@kubex/zinc 1.1.69 → 1.1.70

package/src/components/input/input.component.ts

@@ -33,7 +33,7 @@ import styles from './input.scss';
  *
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot label-tooltip - Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
- * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute.
+ * @slot context-note - Used to add contextual text that is displayed above the input, on the right. Alternatively, you can use the `context-note` attribute. Range inputs display their live value here unless this is set.
  * @slot prefix - Used to prepend a presentational icon or similar element to the input.
  * @slot suffix - Used to append a presentational icon or similar element to the input.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
@@ -51,6 +51,12 @@ import styles from './input.scss';
  * @csspart clear-button - The clear button.
  * @csspart password-toggle-button - The password toggle button.
  * @csspart suffix - The container that wraps the suffix.
+ *
+ * @cssproperty --zn-range-track-height - The height of a range input's track.
+ * @cssproperty --zn-range-track-color - The color of a range input's track.
+ * @cssproperty --zn-range-thumb-size - The diameter of a range input's thumb.
+ * @cssproperty --zn-range-thumb-color - The color of a range input's thumb.
+ * @cssproperty --zn-range-thumb-ring-width - The width of the ring drawn around a range input's thumb.
  */
 export default class ZnInput extends ZincElement implements ZincFormControl {
   static styles = unsafeCSS(styles);
@@ -80,7 +86,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
    * to `text`
    */
   @property({reflect: true}) type: 'color' | 'currency' | 'date' | 'datetime-local' | 'email' | 'number' | 'password' |
-    'search' | 'tel' | 'text' | 'time' | 'url' = 'text';
+    'range' | 'search' | 'tel' | 'text' | 'time' | 'url' = 'text';
 
   /** The name of the input, submitted as a name/value pair with form data. */
   @property() name: string = "";
@@ -146,6 +152,12 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
   /** The color format to display for color inputs. Only applies when type is 'color'. **/
   @property({attribute: 'color-format'}) colorFormat: 'hex' | 'rgb' | 'hsl' | 'oklch' = 'hex';
 
+  /**
+   * Appended to the value that range inputs display above the track, on the right, e.g. `rem`. Only applies when type
+   * is 'range' and no `context-note` is set.
+   */
+  @property({attribute: 'value-suffix'}) valueSuffix: string = '';
+
   /**
    * By default, form-controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside a form and associate it with the form that has this `id`. The form must be
@@ -615,6 +627,13 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     }
   }
 
+  protected firstUpdated() {
+    // A range input with no value resolves to the midpoint of min/max natively, so adopt it as our value
+    if (this.type === 'range' && this.value === '') {
+      this.value = this.input.value;
+    }
+  }
+
   @watch('disabled', {waitUntilFirstUpdate: true})
   handleDisabledChange() {
     // Disabled form controls are always valid
@@ -763,9 +782,10 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     const hasLabelTooltipSlot = this.hasSlotController.test('label-tooltip');
     const hasContextNoteSlot = this.hasSlotController.test('context-note');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
+    const isRange = this.type === 'range';
     const hasLabel = this.label ? true : hasLabelSlot;
     const hasLabelTooltip = this.labelTooltip ? true : hasLabelTooltipSlot;
-    const hasContextNote = this.contextNote ? true : hasContextNoteSlot;
+    const hasContextNote = this.contextNote || isRange ? true : hasContextNoteSlot;
     const hasHelpText = this.helpText ? true : hasHelpTextSlot;
     const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
     const hasOptionalIcon = this.optionalIcon;
@@ -803,7 +823,8 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
 
         ${hasContextNote
           ? html`
-            <span class="form-control__label-context-note"><slot name="context-note">${this.contextNote}</slot></span>`
+            <span class="form-control__label-context-note"><slot name="context-note">${this.contextNote ||
+            (isRange ? `${this.value ?? ''}${this.valueSuffix}` : '')}</slot></span>`
           : ''}
 
         <div part="form-control-input"
@@ -822,27 +843,12 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
                  'input--filled': this.filled,
                  'input--focused': this.hasFocus,
                  'input--empty': !this.value,
+                 'input--range': isRange,
                  'input--no-spin-buttons': this.noSpinButtons && this.type !== 'currency',
                })}>
 
             <span part="prefix" class="input__prefix">
-              ${this.type === 'color'
-                ? html`
-                  <div
-                    class="input__color-swatch"
-                    @click=${this.handleColorSwatchClick}
-                    style="--color-value: ${this.convertToHex(this.value) || '#000000'}">
-                    <div class="input__color-swatch-inner"></div>
-                  </div>
-                  <input
-                    class="input__color-picker"
-                    type="color"
-                    .value=${this.convertToHex(this.value) || '#000000'}
-                    @change=${this.handleColorPickerChange}
-                    @input=${this.handleColorPickerChange}
-                    tabindex="-1"
-                  />`
-                : this.type === 'currency'
+              ${this.type === 'currency'
                 ? html`
                   <zn-icon class="input__prefix-default" src="payments"></zn-icon>`
                 : this.type === 'email' && hasOptionalIcon
@@ -933,6 +939,23 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
 
             <span part="suffix" class="input__suffix">
               <slot name="suffix"></slot>
+              ${this.type === 'color'
+                ? html`
+                  <div
+                    class="input__color-swatch"
+                    @click=${this.handleColorSwatchClick}
+                    style="--color-value: ${this.convertToHex(this.value) || '#000000'}">
+                    <div class="input__color-swatch-inner"></div>
+                  </div>
+                  <input
+                    class="input__color-picker"
+                    type="color"
+                    .value=${this.convertToHex(this.value) || '#000000'}
+                    @change=${this.handleColorPickerChange}
+                    @input=${this.handleColorPickerChange}
+                    tabindex="-1"
+                  />`
+                : ''}
             </span>
           </div>
         </div>

package/src/components/input/input.scss

@@ -384,51 +384,163 @@ input[type='date']::-webkit-calendar-picker-indicator {
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="%236d7176" d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z"/></svg>');
 }
 
-/* Color input styling */
+/* Color input styling — the preview fills the trailing edge of the field */
 .input__color-swatch {
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border-radius: var(--zn-border-radius);
-  border: solid 1px rgba(0, 0, 0, 0.15);
+  align-self: stretch;
+  border: none;
+  border-inline-start: solid var(--zn-input-border-width) var(--zn-input-border-color);
+  border-radius: 0;
   background-color: var(--zn-color-neutral-0);
   cursor: pointer;
-  transition: var(--zn-transition-fast) border-color, var(--zn-transition-fast) box-shadow;
   overflow: hidden;
   position: relative;
   flex-shrink: 0;
-  margin-inline-start: var(--zn-input-spacing-small);
+  margin: 0;
 
-  &:hover {
-    border-color: rgba(0, 0, 0, 0.25);
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
+  &:hover .input__color-swatch-inner {
+    filter: brightness(0.95);
   }
 }
 
-/* Size-specific spacing adjustments for color swatch */
+.input__color-swatch-inner {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-value, #000000);
+  transition: var(--zn-transition-fast) filter;
+}
+
+/* Size adjustments for color inputs — .input clips the trailing corners */
 .input--x-small .input__color-swatch {
-  margin-inline-start: var(--zn-input-spacing-x-small);
+  width: calc(var(--zn-input-height-x-small) * 1.2);
 }
 
 .input--small .input__color-swatch {
-  margin-inline-start: var(--zn-spacing-x2-small);
+  width: calc(var(--zn-input-height-small) * 1.2);
 }
 
 .input--medium .input__color-swatch {
-  margin-inline-start: var(--zn-spacing-x-small);
+  width: calc(var(--zn-input-height-medium) * 1.2);
 }
 
 .input--large .input__color-swatch {
-  margin-inline-start: var(--zn-spacing-small);
+  width: calc(var(--zn-input-height-large) * 1.2);
 }
 
-.input__color-swatch-inner {
-  width: 100%;
-  height: 100%;
-  border-radius: calc(var(--zn-border-radius) - 2px);
-  background-color: var(--color-value, #000000);
+/* Range inputs render as a bare track, with the value shown in the context note above */
+/* The thumb already leaves clear space above the track, so drop the label/field gap */
+:host([type='range']) .form-control--has-label .form-control__label,
+:host([type='range']) .form-control__label-context-note {
+  margin-bottom: 0;
+}
+
+:host([type='range']) .form-control-input {
+  margin-top: 0;
+}
+
+.input--standard.input--range {
+  --zn-range-track-height: 6px;
+  --zn-range-track-color: var(--zn-color-neutral-200);
+  --zn-range-thumb-size: 18px;
+  --zn-range-thumb-color: var(--zn-color-primary-600);
+  --zn-range-thumb-ring-width: 4px;
+
+  align-items: center;
+  height: var(--zn-range-thumb-size);
+  padding: 0;
+  overflow: visible;
+  cursor: pointer;
+}
+
+/* Matches the specificity of the hover/focus/disabled chrome rules above so the track stays bare */
+.input--standard.input--range,
+.input--standard.input--range:hover,
+.input--standard.input--range.input--focused,
+.input--standard.input--range.input--disabled {
+  border: none;
+  background: none;
+  box-shadow: none;
+}
+
+.input--standard.input--range.input--x-small {
+  --zn-range-track-height: 4px;
+  --zn-range-thumb-size: 14px;
+  --zn-range-thumb-ring-width: 3px;
+}
+
+.input--standard.input--range.input--small {
+  --zn-range-track-height: 5px;
+  --zn-range-thumb-size: 16px;
+  --zn-range-thumb-ring-width: 3px;
+}
+
+.input--standard.input--range.input--large {
+  --zn-range-track-height: 7px;
+  --zn-range-thumb-size: 20px;
+}
+
+.input--range .input__control {
+  -webkit-appearance: none;
+  appearance: none;
+  height: var(--zn-range-thumb-size);
+  padding: 0;
+  margin: 0;
+  background: none;
+  cursor: inherit;
+}
+
+.input--range .input__control::-webkit-slider-runnable-track {
+  height: var(--zn-range-track-height);
+  border-radius: calc(var(--zn-range-track-height) / 2);
+  background-color: var(--zn-range-track-color);
+}
+
+.input--range .input__control::-moz-range-track {
+  height: var(--zn-range-track-height);
+  border-radius: calc(var(--zn-range-track-height) / 2);
+  background-color: var(--zn-range-track-color);
+}
+
+.input--range .input__control::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--zn-range-thumb-size);
+  height: var(--zn-range-thumb-size);
+  margin-top: calc((var(--zn-range-track-height) - var(--zn-range-thumb-size)) / 2);
+  border: var(--zn-range-thumb-ring-width) solid var(--zn-color-neutral-0);
+  border-radius: 50%;
+  background-color: var(--zn-range-thumb-color);
+  box-shadow: 0 0 0 1px var(--zn-input-border-color);
+  transition: var(--zn-transition-fast) box-shadow, var(--zn-transition-fast) background-color;
+}
+
+.input--range .input__control::-moz-range-thumb {
+  width: var(--zn-range-thumb-size);
+  height: var(--zn-range-thumb-size);
+  box-sizing: border-box;
+  border: var(--zn-range-thumb-ring-width) solid var(--zn-color-neutral-0);
+  border-radius: 50%;
+  background-color: var(--zn-range-thumb-color);
+  box-shadow: 0 0 0 1px var(--zn-input-border-color);
+  transition: var(--zn-transition-fast) box-shadow, var(--zn-transition-fast) background-color;
+}
+
+.input--range:hover:not(.input--disabled) .input__control::-webkit-slider-thumb {
+  background-color: var(--zn-color-primary-500);
+  box-shadow: 0 0 0 1px var(--zn-input-border-color-hover);
+}
+
+.input--range:hover:not(.input--disabled) .input__control::-moz-range-thumb {
+  background-color: var(--zn-color-primary-500);
+  box-shadow: 0 0 0 1px var(--zn-input-border-color-hover);
+}
+
+.input--range .input__control:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
+}
+
+.input--range .input__control:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 var(--zn-focus-ring-width) var(--zn-input-focus-ring-color);
 }
 
 /* Hide the native color input but keep it functional */
@@ -444,23 +556,3 @@ input[type='date']::-webkit-calendar-picker-indicator {
   visibility: hidden;
 }
 
-/* Size adjustments for color inputs */
-.input--x-small .input__color-swatch {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.input--small .input__color-swatch {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.input--medium .input__color-swatch {
-  width: 1.75rem;
-  height: 1.75rem;
-}
-
-.input--large .input__color-swatch {
-  width: 2rem;
-  height: 2rem;
-}

package/src/components/input/input.test.ts

@@ -172,4 +172,49 @@ describe('<zn-input>', () => {
       expect(secondInput.value).to.equal('');
     });
   });
+
+  describe('type="range"', () => {
+    const contextNote = (el: ZnInput) =>
+      el.shadowRoot!.querySelector('.form-control__label-context-note')!.textContent!.trim();
+
+    it('adopts the native midpoint when no value is set', async () => {
+      const el = await fixture<ZnInput>(html`<zn-input type="range" min="0" max="10"></zn-input>`);
+      await el.updateComplete;
+
+      expect(el.value).to.equal('5');
+    });
+
+    it('displays the value with its suffix in the context note', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" min="0" max="2" step="0.5" value="0.5" value-suffix="rem"></zn-input>`
+      );
+      await el.updateComplete;
+
+      expect(contextNote(el)).to.equal('0.5rem');
+    });
+
+    it('updates the context note as the value changes', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" min="0" max="10" value="4" value-suffix="px"></zn-input>`
+      );
+      await el.updateComplete;
+
+      const input = el.shadowRoot!.querySelector('.input__control') as HTMLInputElement;
+      input.value = '7';
+      input.dispatchEvent(new Event('input'));
+      await el.updateComplete;
+
+      expect(el.value).to.equal('7');
+      expect(contextNote(el)).to.equal('7px');
+    });
+
+    it('prefers an explicit context-note over the value', async () => {
+      const el = await fixture<ZnInput>(
+        html`<zn-input type="range" label="Radius" context-note="Custom" value="4"></zn-input>`
+      );
+      await el.updateComplete;
+
+      expect(contextNote(el)).to.equal('Custom');
+    });
+  });
 });

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>`)}
@@ -684,7 +838,10 @@ export default class ZnThemeEditor extends ZincElement {
               @input="${this._onControlChange}">
               <slot @slotchange="${this._onSlotChange}"></slot>
               ${this._hasNestedGroups()
-                ? this._renderTabs(section => this._renderGroups(section))
+                ? this._renderTabs(section => html`
+                    ${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>`)