@kubex/zinc 1.1.69 → 1.1.71

package/src/components/theme-editor/theme-editor.component.ts

@@ -1,4 +1,4 @@
-import { type CSSResultGroup, html, nothing, unsafeCSS } from 'lit';
+import { type CSSResultGroup, html, nothing, type PropertyValues, unsafeCSS } from 'lit';
 import { HasSlotController } from '../../internal/slot';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
@@ -62,6 +62,17 @@ interface HarvestableControl extends HTMLElement {
   type?: string;
 }
 
+/** Turns a freeform `group`/`category` label into a slot-safe name. */
+function slugify(label: string): string {
+  return label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+}
+
+interface DerivedStructure {
+  sections: ThemeEditorSection[];
+  /** The slot name each control must be assigned to. */
+  assignments: Map<Element, string>;
+}
+
 /**
  * @summary A theme editor: slotted form controls drive a live preview frame,
  * with a toolbar for the preview's light/dark mode and device width.
@@ -89,6 +100,14 @@ interface HarvestableControl extends HTMLElement {
  * `groups` entry) render inside that section/group instead. Harvesting and
  * change detection walk every slot's full assigned subtree, not just direct
  * children.
+ *
+ * With `sections` left unset, the structure is instead derived from the
+ * controls' own attributes: `group="<label>"` becomes a tab and
+ * `category="<label>"` a collapsible within it, and the control is slotted
+ * into that collapsible automatically. Either attribute works alone - a
+ * control with only `group` sits directly in its tab, and one with only
+ * `category` becomes its own top-level section. Setting `sections`
+ * explicitly disables the derivation entirely.
  * @slot toolbar - Actions in the toolbar, right-aligned beside the device
  * controls. Where a save button belongs.
  * @slot footer - Actions pinned beneath the controls. The built-in submit button
@@ -150,10 +169,11 @@ export default class ZnThemeEditor extends ZincElement {
   @property({ type: Number, attribute: 'save-debounce' }) saveDebounce = 1000;
 
   /**
-   * Groups controls into named sections. Empty/unset renders one ungrouped
-   * column. A section with a non-empty `groups` nests a collapsible per
-   * group inside a `zn-tabs` tab for that section - see `groups` on
-   * `ThemeEditorSection`.
+   * Groups controls into named sections. Empty/unset falls back to deriving the
+   * structure from the controls' own `group`/`category` attributes, and renders
+   * one ungrouped column when they carry neither. A section with a non-empty
+   * `groups` nests a collapsible per group inside a `zn-tabs` tab for that
+   * section - see `groups` on `ThemeEditorSection`.
    */
   @property({ type: Array }) sections: ThemeEditorSection[] = [];
 
@@ -246,6 +266,9 @@ export default class ZnThemeEditor extends ZincElement {
   // the other's guard early.
   private _suppressDepth = 0;
 
+  // One-shot: the initial auto-expand must not fight a user who closes it.
+  private _openedInitialCollapsible = false;
+
   /** The current per-mode value sets. Returns copies. */
   get values(): { light: Record<string, unknown>; dark: Record<string, unknown> } {
     return { light: { ...this._modeValues.light }, dark: { ...this._modeValues.dark } };
@@ -595,9 +618,93 @@ export default class ZnThemeEditor extends ZincElement {
     return Array.isArray(section?.groups) ? section.groups : [];
   }
 
+  /** Whether any direct child carries the `group`/`category` structure attributes. */
+  private _hasStructureAttributes(): boolean {
+    return Array.from(this.children).some(el => el.hasAttribute('group') || el.hasAttribute('category'));
+  }
+
+  /** Attribute-derived structure applies only when `sections` is left unset. */
+  private _usesDerivedSections(): boolean {
+    return this._sectionsSafe().length === 0 && this._hasStructureAttributes();
+  }
+
+  /**
+   * Builds the tab/collapsible tree from the controls' own `group` (tab) and
+   * `category` (collapsible) attributes, alongside the slot name each control
+   * needs assigning to. Only direct children are considered, since `slot` only
+   * works one level deep. Slot names are slugged from the labels and made
+   * unique across the whole tree, so two tabs can each hold a "Colors"
+   * category without their slots colliding.
+   */
+  private _derive(): DerivedStructure {
+    const used = new Set<string>();
+    const unique = (label: string) => {
+      const base = slugify(label) || 'group';
+      let name = base;
+      for (let i = 2; used.has(name); i++) name = `${base}-${i}`;
+      used.add(name);
+      return name;
+    };
+
+    const sections = new Map<string, ThemeEditorSection & { groups: ThemeEditorGroup[] }>();
+    const groupNames = new Map<string, string>();
+    const assignments = new Map<Element, string>();
+
+    for (const child of Array.from(this.children)) {
+      const group = child.getAttribute('group')?.trim() ?? '';
+      const category = child.getAttribute('category')?.trim() ?? '';
+      if (!group && !category) continue;
+
+      // A `category` with no `group` becomes its own top-level section.
+      const sectionLabel = group || category;
+      let section = sections.get(sectionLabel);
+      if (!section) {
+        section = { name: unique(sectionLabel), caption: sectionLabel, groups: [] };
+        sections.set(sectionLabel, section);
+      }
+
+      // Only one of the two present: the control sits directly in the section.
+      if (!group || !category) {
+        assignments.set(child, section.name);
+        continue;
+      }
+
+      const key = `${sectionLabel}${category}`;
+      let groupName = groupNames.get(key);
+      if (!groupName) {
+        groupName = unique(`${sectionLabel}-${category}`);
+        groupNames.set(key, groupName);
+        section.groups.push({ name: groupName, caption: category });
+      }
+      assignments.set(child, groupName);
+    }
+
+    return { sections: Array.from(sections.values()), assignments };
+  }
+
+  /** Explicit `sections` when set, otherwise the attribute-derived tree. */
+  private _effectiveSections(): ThemeEditorSection[] {
+    return this._usesDerivedSections() ? this._derive().sections : this._sectionsSafe();
+  }
+
+  // Assignment is idempotent: the `slot` attribute is only written when it
+  // actually differs, so the slotchange this triggers settles in one pass. The
+  // observer's childList-only config means these writes never feed back into it.
+  private _assignDerivedSlots() {
+    if (!this._usesDerivedSections()) return;
+    for (const [el, slotName] of this._derive().assignments) {
+      if (el.getAttribute('slot') !== slotName) el.setAttribute('slot', slotName);
+    }
+  }
+
+  protected willUpdate(changed: PropertyValues) {
+    super.willUpdate(changed);
+    this._assignDerivedSlots();
+  }
+
   /** Whether any section has a populated `groups` - the switch to nested tabs+collapsibles. */
   private _hasNestedGroups(): boolean {
-    return this._sectionsSafe().some(section => this._groupsFor(section).length > 0);
+    return this._effectiveSections().some(section => this._groupsFor(section).length > 0);
   }
 
   private _visibleGroups(section: ThemeEditorSection): ThemeEditorGroup[] {
@@ -606,7 +713,7 @@ export default class ZnThemeEditor extends ZincElement {
 
   /** Configured sections that have an assigned control, or (nested) a populated group - shared by every presentation. */
   private _visibleSections(): ThemeEditorSection[] {
-    const sections = this._sectionsSafe();
+    const sections = this._effectiveSections();
     return this._hasNestedGroups()
       ? sections.filter(section => this._visibleGroups(section).length > 0)
       : sections.filter(section => this._hasAssignedControls(section.name));
@@ -640,6 +747,52 @@ export default class ZnThemeEditor extends ZincElement {
       </zn-collapsible>`);
   }
 
+  /** Every collapsible inside a tab's panel, in document order. */
+  private _tabCollapsibles(section: ThemeEditorSection): ZnCollapsible[] {
+    const panel = Array.from(this.renderRoot.querySelectorAll<HTMLElement>('.editor__tab-panel'))
+      .find(el => el.id === section.name);
+    if (!panel) return [];
+
+    // Author-slotted collapsibles stay in the light DOM, so they aren't
+    // descendants of the panel - reach them through the slot's assignment.
+    // They precede any group collapsibles the editor renders itself.
+    const slotted = Array.from(panel.querySelectorAll('slot'))
+      .flatMap(slot => slot.assignedElements({ flatten: true }))
+      .filter((el): el is ZnCollapsible => el.tagName.toLowerCase() === 'zn-collapsible');
+
+    return [...slotted, ...Array.from(panel.querySelectorAll<ZnCollapsible>('zn-collapsible'))];
+  }
+
+  /** Expands the first collapsible, unless one is already open. */
+  private _expandFirst(collapsibles: ZnCollapsible[]) {
+    if (collapsibles.length === 0 || collapsibles.some(collapsible => collapsible.expanded)) return;
+    collapsibles[0].expanded = true;
+  }
+
+  // zn-tabs emits no selection event, so this hangs off the same <li> zn-tabs
+  // binds its own click handler to. Independent of that handler: expanding a
+  // collapsible in a panel that is about to be selected needs no ordering.
+  private _openFirstCollapsible(section: ThemeEditorSection) {
+    this._expandFirst(this._tabCollapsibles(section));
+  }
+
+  // Same rule as a tab click, applied once to whatever renders first, so the
+  // editor never opens with every collapsible shut. Runs from updated() rather
+  // than firstUpdated() because the sections themselves only appear once slot
+  // assignment (including the derived kind) has settled.
+  protected updated(changed: PropertyValues) {
+    super.updated(changed);
+    if (this._openedInitialCollapsible) return;
+
+    const sections = this._visibleSections();
+    if (sections.length === 0) return;
+    this._openedInitialCollapsible = true;
+
+    this._expandFirst(this._hasNestedGroups() || this.sectionLayout === 'tabs'
+      ? this._tabCollapsibles(sections[0])
+      : Array.from(this.renderRoot.querySelectorAll<ZnCollapsible>('.editor__section')));
+  }
+
   // zn-tabs never removes a panel - it toggles `selected` on it and hides the
   // rest via its own shadow stylesheet - so every section's slot(s) stay
   // assigned and switching tabs can never drop a control's value from the
@@ -653,7 +806,8 @@ export default class ZnThemeEditor extends ZincElement {
     return html`
       <zn-tabs class="editor__tabs" flush active="${sections[0].name}">
         <zn-navbar slot="top" border>
-          ${sections.map(section => html`<li tab="${section.name}">${section.caption}</li>`)}
+          ${sections.map(section => html`
+            <li tab="${section.name}" @click="${() => this._openFirstCollapsible(section)}">${section.caption}</li>`)}
         </zn-navbar>
         ${sections.map(section => html`
           <div id="${section.name}" class="editor__tab-panel">${panel(section)}</div>`)}
@@ -665,35 +819,40 @@ export default class ZnThemeEditor extends ZincElement {
       <div part="base" class="editor ${this.controlsCollapsed ? 'editor--controls-collapsed' : ''}"
            style="min-height: ${this.minHeight}px">
         <div part="controls" class="editor__controls">
-          <div part="controls-header" class="editor__controls-header">
-            ${this.controlsCaption ? html`<span class="editor__caption">${this.controlsCaption}</span>` : nothing}
-            <button type="button"
-                    class="editor__mode"
-                    data-mode-toggle
-                    aria-label="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
-                    @click="${this._toggleMode}">
-              <zn-icon src="${this.mode === 'dark' ? 'sun' : 'moon'}" library="lucide" size="16"></zn-icon>
-            </button>
-          </div>
-          <div class="editor__controls-body">
-            <div
-              class="editor__fields ${this.hasSlotController.test('[default]') ? '' : 'editor__fields--sections-only'}"
-              @zn-change="${this._onControlChange}"
-              @zn-input="${this._onControlChange}"
-              @change="${this._onControlChange}"
-              @input="${this._onControlChange}">
-              <slot @slotchange="${this._onSlotChange}"></slot>
-              ${this._hasNestedGroups()
-                ? this._renderTabs(section => this._renderGroups(section))
-                : this.sectionLayout === 'tabs'
+          <div class="editor__controls-inner">
+            <div part="controls-header" class="editor__controls-header">
+              ${this.controlsCaption ? html`<span class="editor__caption">${this.controlsCaption}</span>` : nothing}
+              <button type="button"
+                      class="editor__mode"
+                      data-mode-toggle
+                      aria-label="${this.mode === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}"
+                      @click="${this._toggleMode}">
+                <zn-icon src="${this.mode === 'dark' ? 'sun' : 'moon'}" library="lucide" size="16"></zn-icon>
+              </button>
+            </div>
+            <div class="editor__controls-body">
+              <div
+                class="editor__fields ${this.hasSlotController.test('[default]') ? '' : 'editor__fields--sections-only'}"
+                @zn-change="${this._onControlChange}"
+                @zn-input="${this._onControlChange}"
+                @change="${this._onControlChange}"
+                @input="${this._onControlChange}">
+                <slot @slotchange="${this._onSlotChange}"></slot>
+                ${this._hasNestedGroups()
                   ? this._renderTabs(section => html`
-                      <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>`)
-                  : this._renderSections()}
+                      ${this._hasAssignedControls(section.name) ? html`
+                        <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>` : nothing}
+                      ${this._renderGroups(section)}`)
+                  : this.sectionLayout === 'tabs'
+                    ? this._renderTabs(section => html`
+                        <slot name="${section.name}" class="editor__section-slot" @slotchange="${this._onSlotChange}"></slot>`)
+                    : this._renderSections()}
+              </div>
+              ${this.hasSlotController.test('footer') ? html`
+                <div part="footer" class="editor__footer">
+                  <slot name="footer"></slot>
+                </div>` : nothing}
             </div>
-            ${this.hasSlotController.test('footer') ? html`
-              <div part="footer" class="editor__footer">
-                <slot name="footer"></slot>
-              </div>` : nothing}
           </div>
         </div>
 

package/src/components/theme-editor/theme-editor.scss

@@ -4,6 +4,10 @@
   display: block;
   // Matches page-builder's --palette-col.
   --zn-theme-editor-controls-width: 343px;
+  // Resolves to auto when the parent height is indefinite, so the editor still
+  // grows to its content there; given a definite parent it stays inside it and
+  // the two columns scroll on their own instead.
+  height: 100%;
 }
 
 .editor {
@@ -11,6 +15,7 @@
 
   display: flex;
   align-items: stretch;
+  height: 100%;
 
   &--controls-collapsed {
     --controls-col: 0px;
@@ -38,6 +43,7 @@
 .editor__toolbar {
   display: flex;
   align-items: center;
+  flex: 0 0 auto;
   min-height: 44px;
   gap: var(--zn-spacing-small);
   padding: var(--zn-spacing-small) var(--zn-spacing-medium);
@@ -59,6 +65,7 @@
 }
 
 .editor__controls {
+  position: relative;
   display: flex;
   flex-direction: column;
   flex: 0 0 var(--controls-col);
@@ -70,9 +77,21 @@
   transition: flex-basis 0.2s ease;
 }
 
+// Taken out of flow so the controls contribute no height to the row: expanding
+// a section can then never stretch the editor, it just scrolls in place. The
+// preview column alone sets the height (its own min-height, or the parent's if
+// that is definite).
+.editor__controls-inner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 .editor__controls-header {
   display: flex;
   align-items: center;
+  flex: 0 0 auto;
   min-height: 44px;
   padding: var(--zn-spacing-small) var(--zn-spacing-medium);
 }
@@ -82,6 +101,7 @@
   flex-direction: column;
   gap: var(--zn-spacing-medium);
   flex: 1 1 auto;
+  min-height: 0;
 }
 
 .editor__main {
@@ -90,12 +110,17 @@
   flex-direction: column;
   flex: 1 1 auto;
   min-width: 0;
+  min-height: 0;
 }
 
+// The sidebar's scroll region: the header above and the footer below stay put.
 .editor__fields {
   display: flex;
   flex-direction: column;
   gap: var(--zn-spacing-medium);
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 // Supports an author hand-slotting a bare zn-collapsible into the default slot.
@@ -148,16 +173,19 @@
 
 .editor__footer {
   display: flex;
+  flex: 0 0 auto;
   gap: var(--zn-spacing-small);
   padding-top: var(--zn-spacing-small);
   border-top: 1px solid rgb(var(--zn-border-color));
   margin-top: auto;
 }
 
+// The preview's scroll region: the toolbar above stays put.
 .editor__preview {
-  overflow: visible;
+  overflow: auto;
   flex: 1 1 auto;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
 }
@@ -267,8 +295,20 @@
 
 // 768 must match STACKED_QUERY in theme-editor.component.ts.
 @media (max-width: 768px) {
+  // Stacked, the two columns share one vertical axis, so they flow with the
+  // page rather than each owning a cramped scroller of its own.
+  :host {
+    height: auto;
+  }
+
   .editor {
     flex-direction: column;
+    height: auto;
+  }
+
+  .editor__fields,
+  .editor__preview {
+    overflow: visible;
   }
 
   .editor__controls {
@@ -278,6 +318,12 @@
     border-bottom: 1px solid rgb(var(--zn-border-color));
   }
 
+  // Stacked there is no second column to take the height from, so the controls
+  // go back in flow and size themselves.
+  .editor__controls-inner {
+    position: static;
+  }
+
   .editor--controls-collapsed .editor__controls {
     display: none;
   }

package/src/components/theme-editor/theme-editor.test.ts

@@ -970,6 +970,57 @@ describe('<zn-theme-editor>', () => {
       expect(el.shadowRoot!.querySelectorAll('.editor__section').length).to.equal(0);
     });
 
+    it("expands the first tab's first group on load, and closing it stays closed", async () => {
+      const el = await fixture(html`
+        <zn-theme-editor
+          src="about:blank" frame-origin="https://site.example"
+          .sections="${[
+            {name: 'colors', caption: 'Colors', groups: [
+              {name: 'brand', caption: 'Brand'},
+              {name: 'semantic', caption: 'Semantic'},
+            ]},
+          ]}">
+          <zn-input slot="brand" name="brand" value="1"></zn-input>
+          <zn-input slot="semantic" name="semantic" value="2"></zn-input>
+        </zn-theme-editor>`);
+
+      const sections = el.shadowRoot!.querySelectorAll<HTMLElement & {expanded: boolean}>('.editor__section');
+      expect([sections[0].expanded, sections[1].expanded]).to.deep.equal([true, false]);
+
+      // The auto-expand is one-shot - a later render must not reopen it.
+      sections[0].expanded = false;
+      (el as HTMLElement & {requestUpdate: () => void}).requestUpdate();
+      await (el as HTMLElement & {updateComplete: Promise<boolean>}).updateComplete;
+      expect(sections[0].expanded).to.be.false;
+    });
+
+    it("clicking a tab expands its first group, and leaves an already-open group alone", async () => {
+      const el = await NESTED_GROUPS_FIXTURE();
+      const sections = el.shadowRoot!.querySelectorAll<HTMLElement & {expanded: boolean}>('.editor__section');
+      const panels = el.shadowRoot!.querySelectorAll('.editor__tab-panel');
+      const tabs = el.shadowRoot!.querySelectorAll<HTMLElement>('li[tab]');
+      await waitUntil(() => panels[0].hasAttribute('selected'));
+
+      // Colors: Brand (closed) + Semantic (open: true). Shapes: Radius (closed).
+      expect([sections[0].expanded, sections[1].expanded, sections[2].expanded])
+        .to.deep.equal([false, true, false]);
+
+      tabs[1].click();
+      await waitUntil(() => panels[1].hasAttribute('selected'));
+      expect(sections[2].expanded).to.be.true;
+
+      // Semantic is already open, so Brand stays closed.
+      tabs[0].click();
+      await waitUntil(() => panels[0].hasAttribute('selected'));
+      expect(sections[0].expanded).to.be.false;
+      expect(sections[1].expanded).to.be.true;
+
+      // With every group closed, the first one opens.
+      sections[1].expanded = false;
+      tabs[0].click();
+      expect(sections[0].expanded).to.be.true;
+    });
+
     it('does not crash render when groups is malformed', async () => {
       const el = await fixture(html`
         <zn-theme-editor
@@ -983,6 +1034,123 @@ describe('<zn-theme-editor>', () => {
     });
   });
 
+  describe('structure derived from group/category attributes', () => {
+    const DERIVED_FIXTURE = () => fixture(html`
+      <zn-theme-editor src="about:blank" frame-origin="https://site.example" debounce="10">
+        <zn-input group="Background &amp; Foreground" category="Colors" name="bg" value="#ffffff"></zn-input>
+        <zn-input group="Background &amp; Foreground" category="Colors" name="fg" value="#000000"></zn-input>
+        <zn-input group="Background &amp; Foreground" category="Spacing" name="gap" value="8"></zn-input>
+        <zn-input group="Typography" category="Colors" name="font" value="Inter"></zn-input>
+      </zn-theme-editor>`);
+
+    it('renders and is accessible', async () => {
+      const el = await DERIVED_FIXTURE();
+      await expect(el).to.be.accessible();
+    });
+
+    it('creates a tab per group and a collapsible per category within it', async () => {
+      const el = await DERIVED_FIXTURE();
+
+      const tabs = Array.from(el.shadowRoot!.querySelectorAll('li[tab]')).map(t => t.textContent?.trim());
+      expect(tabs).to.deep.equal(['Background & Foreground', 'Typography']);
+
+      const captions = Array.from(el.shadowRoot!.querySelectorAll('.editor__section'))
+        .map(s => s.getAttribute('caption'));
+      expect(captions).to.deep.equal(['Colors', 'Spacing', 'Colors']);
+    });
+
+    it('slots each control into its derived collapsible and harvests them all', async () => {
+      const el = await DERIVED_FIXTURE();
+
+      // Two tabs each hold a "Colors" category - their slots must not collide.
+      const bgSlot = el.querySelector('zn-input[name="bg"]')!.getAttribute('slot');
+      const fontSlot = el.querySelector('zn-input[name="font"]')!.getAttribute('slot');
+      expect(bgSlot).to.be.a('string').and.not.equal('');
+      expect(fontSlot).to.not.equal(bgSlot);
+      // controls sharing a group+category land in the same slot
+      expect(el.querySelector('zn-input[name="fg"]')!.getAttribute('slot')).to.equal(bgSlot);
+
+      expect((el as HTMLElement & {values: {light: Record<string, unknown>}}).values.light)
+        .to.deep.equal({bg: '#ffffff', fg: '#000000', gap: '8', font: 'Inter'});
+    });
+
+    it('puts a control with only group directly in its tab', async () => {
+      const el = await fixture(html`
+        <zn-theme-editor src="about:blank" frame-origin="https://site.example">
+          <zn-input group="Colors" category="Brand" name="accent" value="#6936f5"></zn-input>
+          <zn-input group="Colors" name="loose" value="x"></zn-input>
+        </zn-theme-editor>`);
+
+      expect(el.shadowRoot!.querySelectorAll('li[tab]').length).to.equal(1);
+      const captions = Array.from(el.shadowRoot!.querySelectorAll('.editor__section'))
+        .map(s => s.getAttribute('caption'));
+      expect(captions).to.deep.equal(['Brand']);
+      expect((el as HTMLElement & {values: {light: Record<string, unknown>}}).values.light)
+        .to.deep.equal({accent: '#6936f5', loose: 'x'});
+    });
+
+    it('treats a control with only category as its own top-level section', async () => {
+      const el = await fixture(html`
+        <zn-theme-editor src="about:blank" frame-origin="https://site.example">
+          <zn-input category="Colors" name="accent" value="#6936f5"></zn-input>
+        </zn-theme-editor>`);
+
+      const captions = Array.from(el.shadowRoot!.querySelectorAll('.editor__section'))
+        .map(s => s.getAttribute('caption'));
+      expect(captions).to.deep.equal(['Colors']);
+      expect((el as HTMLElement & {values: {light: Record<string, unknown>}}).values.light)
+        .to.deep.equal({accent: '#6936f5'});
+    });
+
+    it('an explicit sections wins over the attributes', async () => {
+      const el = await fixture(html`
+        <zn-theme-editor
+          src="about:blank" frame-origin="https://site.example"
+          .sections="${[{name: 'explicit', caption: 'Explicit'}]}">
+          <zn-input slot="explicit" group="Ignored" category="Ignored too" name="accent" value="#6936f5"></zn-input>
+        </zn-theme-editor>`);
+
+      const captions = Array.from(el.shadowRoot!.querySelectorAll('.editor__section'))
+        .map(s => s.getAttribute('caption'));
+      expect(captions).to.deep.equal(['Explicit']);
+      // the explicit slot assignment is left untouched
+      expect(el.querySelector('zn-input')!.getAttribute('slot')).to.equal('explicit');
+    });
+
+    it('derives, slots and pushes a control added after mount', async () => {
+      const el = await fixture(html`
+        <zn-theme-editor src="about:blank" frame-origin="https://site.example">
+          <zn-input group="Colors" category="Brand" name="accent" value="#6936f5"></zn-input>
+        </zn-theme-editor>`);
+      const calls = spyOnFrame(el);
+      expect(el.shadowRoot!.querySelectorAll('li[tab]').length).to.equal(1);
+
+      const added = document.createElement('zn-input');
+      added.setAttribute('group', 'Shapes');
+      added.setAttribute('category', 'Radius');
+      added.setAttribute('name', 'radius');
+      added.setAttribute('value', '4');
+      el.append(added);
+
+      await waitUntil(() => calls.length >= 1);
+      expect((calls[0]['values'] as Record<string, unknown>)['radius']).to.equal('4');
+      await waitUntil(() => el.shadowRoot!.querySelectorAll('li[tab]').length === 2);
+      expect(added.getAttribute('slot')).to.be.a('string').and.not.equal('');
+    });
+
+    it('leaves controls with neither attribute in the default slot', async () => {
+      const el = await fixture(html`
+        <zn-theme-editor src="about:blank" frame-origin="https://site.example">
+          <zn-input group="Colors" category="Brand" name="accent" value="#6936f5"></zn-input>
+          <zn-input name="loose" value="x"></zn-input>
+        </zn-theme-editor>`);
+
+      expect(el.querySelector('zn-input[name="loose"]')!.hasAttribute('slot')).to.be.false;
+      expect((el as HTMLElement & {values: {light: Record<string, unknown>}}).values.light)
+        .to.deep.equal({accent: '#6936f5', loose: 'x'});
+    });
+  });
+
   describe('preview sources', () => {
     it('with sources unset, renders no dropdown and leaves src alone', async () => {
       const el = await fixture(html`