internal(summary-control): add support for rendering count in details…

… summary

src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts

@@ -25,6 +25,11 @@ describe('InternalSummaryControl', () => {
     expect(new Control()).to.have.property('layout', null);
   });
 
+  it('has a reactive property "count" that defaults to null', () => {
+    expect(Control).to.have.deep.nested.property('properties.count', { type: Number });
+    expect(new Control()).to.have.property('count', null);
+  });
+
   it('has a reactive property "open" that defaults to false', () => {
     expect(Control).to.have.deep.nested.property('properties.open', { type: Boolean });
     expect(new Control()).to.have.property('open', false);
@@ -48,6 +53,19 @@ describe('InternalSummaryControl', () => {
     expect(control.renderRoot).to.include.text('Foo bar');
   });
 
+  it('renders count in label if .count is set and layout is "details"', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-summary-control layout="details" label="Test"></foxy-internal-summary-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('Test');
+    expect(control.renderRoot).to.not.include.text('Test (123)');
+
+    control.count = 123;
+    await control.requestUpdate();
+    expect(control.renderRoot).to.include.text('Test (123)');
+  });
+
   it('renders helper text in default layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-summary-control></foxy-internal-summary-control>

src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts

@@ -9,6 +9,7 @@ export class InternalSummaryControl extends InternalEditableControl {
     return {
       ...super.properties,
       layout: {},
+      count: { type: Number },
       open: { type: Boolean },
     };
   }
@@ -35,6 +36,8 @@ export class InternalSummaryControl extends InternalEditableControl {
 
   layout: null | 'section' | 'details' = null;
 
+  count: number | null = null;
+
   open = false;
 
   renderLightDom(): void {
@@ -50,7 +53,7 @@ export class InternalSummaryControl extends InternalEditableControl {
           @toggle=${(evt: Event) => {
             const details = evt.currentTarget as HTMLDetailsElement;
             this.open = details.open;
-            if (!evt.composed) this.dispatchEvent(new CustomEvent('toggle'));
+            if (!evt.composed && !evt.bubbles) this.dispatchEvent(new CustomEvent('toggle'));
           }}
         >
           <summary class="select-none cursor-pointer focus-outline-none group">
@@ -63,7 +66,9 @@ export class InternalSummaryControl extends InternalEditableControl {
                 class="font-medium uppercase text-s tracking-wider flex items-center justify-between gap-s"
                 ?hidden=${!this.label}
               >
-                <span>${this.label}</span>
+                <span>
+                  ${this.label}${typeof this.count === 'number' ? ` (${this.count})` : ''}
+                </span>
                 <span
                   class="flex items-center justify-center transition-colors text-tertiary group-hover-text-body"
                   style="transform: scale(1.35)"