@akcelik/strct 5.12.0 → 5.13.0

package/fesm2022/akcelik-strct.mjs

@@ -1139,9 +1139,16 @@ class StrctHeader {
     /** Accessible label of the mobile drawer toggle. */
     drawerToggleAriaLabel = input('Toggle navigation', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "drawerToggleAriaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * A thin line in a product's colour under the header — a colour token or
+     * any CSS colour. It is drawn inset, so the header keeps its height and
+     * nothing under it moves. Empty leaves today's border alone.
+     */
+    accent = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
     shell = inject(StrctShellService);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctHeader, isStandalone: true, selector: "strct-header", inputs: { drawerToggleAriaLabel: { classPropertyName: "drawerToggleAriaLabel", publicName: "drawerToggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-header" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctHeader, isStandalone: true, selector: "strct-header", inputs: { drawerToggleAriaLabel: { classPropertyName: "drawerToggleAriaLabel", publicName: "drawerToggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-header--accent": "accent()", "style.--strct-header-accent": "accent() || null" }, classAttribute: "strct-header" }, ngImport: i0, template: `
     <button
       type="button"
       class="strct-header__drawer-toggle"
@@ -1153,7 +1160,7 @@ class StrctHeader {
       <strct-icon name="menu" [size]="18" />
     </button>
     <ng-content />
-  `, isInline: true, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:var(--strct-header-gap, 14px);height:56px;padding:0 var(--strct-header-pad, 18px);background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header--accent{box-shadow:inset 0 -3px 0 var(--strct-header-accent, var(--acc))}@media(max-width:600px){.strct-header{gap:var(--strct-header-gap, 4px);padding:0 var(--strct-header-pad, 6px)}}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeader, decorators: [{
             type: Component,
@@ -1169,8 +1176,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       <strct-icon name="menu" [size]="18" />
     </button>
     <ng-content />
-  `, host: { class: 'strct-header' }, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
-        }], propDecorators: { drawerToggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerToggleAriaLabel", required: false }] }] } });
+  `, host: {
+                        class: 'strct-header',
+                        '[class.strct-header--accent]': 'accent()',
+                        '[style.--strct-header-accent]': 'accent() || null',
+                    }, styles: [".strct-vnav__backdrop{position:fixed;inset:0;z-index:calc(var(--z-nav) - 1);background:var(--backdrop);animation:strct-vnav-backdrop-in .2s ease}@media(min-width:769px){.strct-vnav__backdrop{display:none}}@keyframes strct-vnav-backdrop-in{0%{opacity:0}to{opacity:1}}.strct-header{display:flex;align-items:center;gap:var(--strct-header-gap, 14px);height:56px;padding:0 var(--strct-header-pad, 18px);background:var(--hdr);border-bottom:1px solid var(--b2);color:var(--hdr-fg)}.strct-header--accent{box-shadow:inset 0 -3px 0 var(--strct-header-accent, var(--acc))}@media(max-width:600px){.strct-header{gap:var(--strct-header-gap, 4px);padding:0 var(--strct-header-pad, 6px)}}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *){color:color-mix(in srgb,var(--hdr-fg) 72%,transparent)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):hover:not(:disabled){background:color-mix(in srgb,var(--hdr-fg) 12%,transparent);color:var(--hdr-fg)}.strct-header .strct-btn--flat:not(.strct-modal__dialog *,.strct-drawer *,.strct-popover__panel *,.strct-dd__menu *,.strct-tour__card *):focus-visible{outline-color:color-mix(in srgb,var(--hdr-fg) 60%,transparent)}.strct-header__drawer-toggle{display:none;align-items:center;justify-content:center;padding:4px;border:0;border-radius:5px;background:transparent;color:color-mix(in srgb,var(--hdr-fg) 85%,transparent);cursor:pointer}.strct-header__drawer-toggle:hover{background:#ffffff1f;color:var(--hdr-fg)}@media(max-width:768px){.strct-header__drawer-toggle{display:inline-flex}}\n"] }]
+        }], propDecorators: { drawerToggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerToggleAriaLabel", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }] } });
 /** Bottom status bar. */
 class StrctFooter {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2323,6 +2334,9 @@ class StrctBadge {
                 const el = this.hostEl.nativeElement;
                 strctCheckHostInputs(el, 'strct-badge', {
                     status: 'neutral, accent, success, warning, critical',
+                    // A real input since 5.13.0 — a colour of its own, so it takes any
+                    // colour token or value rather than one of a list.
+                    tone: 'a colour token or value, e.g. var(--prod-acc)',
                 });
             }
         });
@@ -2330,10 +2344,25 @@ class StrctBadge {
     /** Visual status color. */
     status = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /**
+     * A colour of your own — `tone="var(--prod-acc)"` — for a distinction the
+     * five statuses do not carry, such as which product a row belongs to. The
+     * text takes it and the border a 30% wash of it; `solid` fills with it and
+     * writes in `--strct-badge-on` (`--inv` by default). It overrides `status`.
+     *
+     * The same can be set from a stylesheet with `--strct-badge-fg`,
+     * `--strct-badge-border` and `--strct-badge-on`, which is the better route
+     * when a rule already selects the badges (`.product-badge { … }`).
+     *
+     * The colour is yours to pick, so its contrast is yours to check: the
+     * library's own check covers `--acc` and the status tokens.
+     */
+    tone = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
     /** Opt-in filled style instead of the default outlined style. */
     solid = input(false, { ...(ngDevMode ? { debugName: "solid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctBadge, isStandalone: true, selector: "strct-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-badge--accent": "status() === 'accent'", "class.strct-badge--success": "status() === 'success'", "class.strct-badge--warning": "status() === 'warning'", "class.strct-badge--warninging": "status() === 'warning'", "class.strct-badge--critical": "status() === 'critical'", "class.strct-badge--solid": "solid()" }, classAttribute: "strct-badge" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.2px;padding-block:3px;padding-inline:9px 7px;border-radius:var(--radius-sm);white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-inline-start-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--success);border-color:var(--success)}.strct-badge--warning{color:var(--warning);border-color:var(--warning)}.strct-badge--critical{color:var(--critical);border-color:var(--critical)}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-inline-start-width:1px;padding-inline-start:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:var(--inv)}.strct-badge--solid.strct-badge--success{background:var(--success);color:var(--inv)}.strct-badge--solid.strct-badge--warning{background:var(--warning);color:var(--inv)}.strct-badge--solid.strct-badge--critical{background:var(--critical);color:var(--inv)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctBadge, isStandalone: true, selector: "strct-badge", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-badge--accent": "status() === 'accent'", "class.strct-badge--success": "status() === 'success'", "class.strct-badge--warning": "status() === 'warning'", "class.strct-badge--warninging": "status() === 'warning'", "class.strct-badge--critical": "status() === 'critical'", "class.strct-badge--solid": "solid()", "class.strct-badge--tone": "tone()", "style.--strct-badge-fg": "tone() || null" }, classAttribute: "strct-badge" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.2px;padding-block:3px;padding-inline:9px 7px;border-radius:var(--radius-sm);white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-inline-start-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--success);border-color:var(--success)}.strct-badge--warning{color:var(--warning);border-color:var(--warning)}.strct-badge--critical{color:var(--critical);border-color:var(--critical)}.strct-badge--tone{color:var(--strct-badge-fg, var(--t2));border-color:var( --strct-badge-border, color-mix(in srgb, var(--strct-badge-fg, var(--b3)) 30%, transparent) )}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-inline-start-width:1px;padding-inline-start:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:var(--inv)}.strct-badge--solid.strct-badge--success{background:var(--success);color:var(--inv)}.strct-badge--solid.strct-badge--warning{background:var(--warning);color:var(--inv)}.strct-badge--solid.strct-badge--critical{background:var(--critical);color:var(--inv)}.strct-badge--solid.strct-badge--tone{background:var(--strct-badge-fg, var(--bg-a));color:var(--strct-badge-on, var(--inv));border-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctBadge, decorators: [{
             type: Component,
@@ -2346,8 +2375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-badge--warninging]': "status() === 'warning'",
                         '[class.strct-badge--critical]': "status() === 'critical'",
                         '[class.strct-badge--solid]': 'solid()',
-                    }, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.2px;padding-block:3px;padding-inline:9px 7px;border-radius:var(--radius-sm);white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-inline-start-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--success);border-color:var(--success)}.strct-badge--warning{color:var(--warning);border-color:var(--warning)}.strct-badge--critical{color:var(--critical);border-color:var(--critical)}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-inline-start-width:1px;padding-inline-start:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:var(--inv)}.strct-badge--solid.strct-badge--success{background:var(--success);color:var(--inv)}.strct-badge--solid.strct-badge--warning{background:var(--warning);color:var(--inv)}.strct-badge--solid.strct-badge--critical{background:var(--critical);color:var(--inv)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
+                        '[class.strct-badge--tone]': 'tone()',
+                        '[style.--strct-badge-fg]': 'tone() || null',
+                    }, styles: [".strct-badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;line-height:1;letter-spacing:.2px;padding-block:3px;padding-inline:9px 7px;border-radius:var(--radius-sm);white-space:nowrap;color:var(--t2);background:transparent;border:1px solid var(--b3);border-inline-start-width:3px}.strct-badge--accent{color:var(--acc);border-color:var(--acc30)}.strct-badge--success{color:var(--success);border-color:var(--success)}.strct-badge--warning{color:var(--warning);border-color:var(--warning)}.strct-badge--critical{color:var(--critical);border-color:var(--critical)}.strct-badge--tone{color:var(--strct-badge-fg, var(--t2));border-color:var( --strct-badge-border, color-mix(in srgb, var(--strct-badge-fg, var(--b3)) 30%, transparent) )}.strct-badge--solid{color:var(--t1);background:var(--bg-a);border-color:transparent;border-inline-start-width:1px;padding-inline-start:7px}.strct-badge--solid.strct-badge--accent{background:var(--acc);color:var(--inv)}.strct-badge--solid.strct-badge--success{background:var(--success);color:var(--inv)}.strct-badge--solid.strct-badge--warning{background:var(--warning);color:var(--inv)}.strct-badge--solid.strct-badge--critical{background:var(--critical);color:var(--inv)}.strct-badge--solid.strct-badge--tone{background:var(--strct-badge-fg, var(--bg-a));color:var(--strct-badge-on, var(--inv));border-color:transparent}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
 
 /** Content rendered before the tag's text — a status dot, an icon. */
 class StrctTagLeading {
@@ -5873,6 +5904,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     },
                 }]
         }] });
+/**
+ * A leading icon for a menu row, in a colour of its own:
+ * `<strct-icon strctDropdownItemIcon tone="var(--prod-acc)" name="shield" />`.
+ * The row keeps its text aligned whether or not the icon is there.
+ */
+class StrctDropdownItemIcon {
+    /** A colour token or value — a product's accent, say. */
+    tone = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: StrctDropdownItemIcon, isStandalone: true, selector: "[strctDropdownItemIcon]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.color": "tone() || null" }, classAttribute: "strct-dd__itemlead" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownItemIcon]',
+                    host: { class: 'strct-dd__itemlead', '[style.color]': 'tone() || null' },
+                }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+/**
+ * The row's label, when the row also carries a description. A screen reader
+ * reads a row in DOM order, and a projected slot can only be declared before
+ * the catch-all one — so marking the label is what keeps "HyperStruct Backup"
+ * ahead of "2 VMs past RPO" in what the row is called. A row without a
+ * description does not need it.
+ */
+class StrctDropdownItemLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDropdownItemLabel, isStandalone: true, selector: "[strctDropdownItemLabel]", host: { classAttribute: "strct-dd__itemlabel" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownItemLabel]',
+                    host: { class: 'strct-dd__itemlabel' },
+                }]
+        }] });
+/**
+ * A second, quieter line under a row's label: "● 2 VMs past RPO" under
+ * "HyperStruct Backup". It is inside the row, so it is part of what the row
+ * is called — put the label in `[strctDropdownItemLabel]` so it is read
+ * first.
+ */
+class StrctDropdownItemDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctDropdownItemDescription, isStandalone: true, selector: "[strctDropdownItemDescription]", host: { classAttribute: "strct-dd__itemdesc" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItemDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[strctDropdownItemDescription]',
+                    host: { class: 'strct-dd__itemdesc' },
+                }]
+        }] });
 class StrctDropdownItem {
     /**
      * Select-like usage: bind `selected` and the item becomes a
@@ -5914,6 +5999,18 @@ class StrctDropdownItem {
         // runs before those listeners, and stopping here also keeps the menu's own
         // activate-and-close handler from seeing it.
         const host = inject((ElementRef)).nativeElement;
+        // Dev-only: a description reads before an unmarked label, which is the
+        // one thing this slot must not do.
+        afterNextRender(() => {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                if (host.querySelector('.strct-dd__itemdesc') &&
+                    !host.querySelector('.strct-dd__itemlabel')) {
+                    strctDevWarn('dd-item-description-without-label', '[strct] strct-dropdown-item: a [strctDropdownItemDescription] row reads its ' +
+                        'description before its label, because a slot can only be declared before the ' +
+                        'catch-all one. Wrap the label in [strctDropdownItemLabel].');
+                }
+            }
+        });
         host.addEventListener('click', (event) => {
             if (!this.disabled())
                 return;
@@ -5929,15 +6026,21 @@ class StrctDropdownItem {
         }
       </span>
     }
-    <!-- Declared before the catch-all so its selector wins; CSS order and an
-         auto margin put it at the item's end. -->
+    <!-- Every selective slot is declared before the catch-all, or the
+         catch-all would swallow its content; the visual order is CSS's
+         (the label is raw text, which only source order can place). -->
+    <ng-content select="[strctDropdownItemIcon]" />
     <ng-content select="[strctDropdownItemAction]" />
+    <span class="strct-dd__itemtext">
+      <ng-content select="[strctDropdownItemLabel]" />
+      <ng-content select="[strctDropdownItemDescription]" />
+    </span>
     <ng-content />
     @if (hint()) {
       <!-- hidden: kept out of the item's accessible NAME, still read as its
            description through aria-describedby. -->
       <span [id]="hintId" hidden>{{ hint() }}</span>
-    }`, isInline: true, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__itemaction{order:1;margin-inline-start:auto;flex:none}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    }`, isInline: true, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__itemaction{order:1;margin-inline-start:auto;flex:none}.strct-dd__itemlead{flex:none;display:inline-flex;align-items:center}.strct-dd__itemlabel{min-width:0;overflow:hidden;text-overflow:ellipsis}.strct-dd__itemtext{display:contents}.strct-dd__item:has(.strct-dd__itemdesc) .strct-dd__itemtext{display:flex;flex-direction:column;row-gap:2px;min-width:0}.strct-dd__itemdesc{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--t2)}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItem, decorators: [{
             type: Component,
@@ -5948,9 +6051,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         }
       </span>
     }
-    <!-- Declared before the catch-all so its selector wins; CSS order and an
-         auto margin put it at the item's end. -->
+    <!-- Every selective slot is declared before the catch-all, or the
+         catch-all would swallow its content; the visual order is CSS's
+         (the label is raw text, which only source order can place). -->
+    <ng-content select="[strctDropdownItemIcon]" />
     <ng-content select="[strctDropdownItemAction]" />
+    <span class="strct-dd__itemtext">
+      <ng-content select="[strctDropdownItemLabel]" />
+      <ng-content select="[strctDropdownItemDescription]" />
+    </span>
     <ng-content />
     @if (hint()) {
       <!-- hidden: kept out of the item's accessible NAME, still read as its
@@ -5968,8 +6077,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-dd__item--critical]': 'critical()',
                         '[class.strct-dd__item--selected]': 'selected() === true',
                         '[attr.aria-disabled]': 'disabled() || null',
-                    }, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__itemaction{order:1;margin-inline-start:auto;flex:none}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"] }]
+                    }, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__itemaction{order:1;margin-inline-start:auto;flex:none}.strct-dd__itemlead{flex:none;display:inline-flex;align-items:center}.strct-dd__itemlabel{min-width:0;overflow:hidden;text-overflow:ellipsis}.strct-dd__itemtext{display:contents}.strct-dd__item:has(.strct-dd__itemdesc) .strct-dd__itemtext{display:flex;flex-direction:column;row-gap:2px;min-width:0}.strct-dd__itemdesc{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--t2)}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], critical: [{ type: i0.Input, args: [{ isSignal: true, alias: "critical", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+/**
+ * A named group of rows — "Create" above the create actions, where a divider
+ * alone leaves what the group is unsaid. The label is not an item: the arrows
+ * pass over it and it is never activated.
+ */
+class StrctDropdownGroup {
+    /** What the group is — read when a screen reader enters it. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    labelId = `strct-dd-group-${++dropdownItemCounter}-label`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: StrctDropdownGroup, isStandalone: true, selector: "strct-dropdown-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId" }, classAttribute: "strct-dd__group" }, ngImport: i0, template: `<div class="strct-dd__grouplabel" [id]="labelId" role="presentation">
+      {{ label() }}
+    </div>
+    <ng-content />`, isInline: true, styles: [".strct-dd__group{display:block}.strct-dd__group+.strct-dd__group{margin-top:4px;border-top:1px solid var(--b2);padding-top:4px}.strct-dd__grouplabel{padding:6px 10px 2px;font-size:var(--text-xs, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-dropdown-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<div class="strct-dd__grouplabel" [id]="labelId" role="presentation">
+      {{ label() }}
+    </div>
+    <ng-content />`, host: {
+                        class: 'strct-dd__group',
+                        role: 'group',
+                        '[attr.aria-labelledby]': 'labelId',
+                    }, styles: [".strct-dd__group{display:block}.strct-dd__group+.strct-dd__group{margin-top:4px;border-top:1px solid var(--b2);padding-top:4px}.strct-dd__grouplabel{padding:6px 10px 2px;font-size:var(--text-xs, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 /** Thin separator between groups of menu items. */
 class StrctDropdownDivider {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -7324,6 +7460,12 @@ class StrctCommandPalette {
      * rendering.
      */
     filter = input(true, { ...(ngDevMode ? { debugName: "filter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * The order the sections are drawn in — the product you are in first, say.
+     * Sections not named here follow, in the order their first result arrives.
+     */
+    sectionOrder = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sectionOrder" }] : /* istanbul ignore next */ []));
     /** Show a "searching" row while server results are in flight. */
     loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Localizable text of the loading row. */
@@ -7344,19 +7486,39 @@ class StrctCommandPalette {
     optionId(i) {
         return `${this.listId}-opt-${i}`;
     }
+    /**
+     * The results in their drawn order, chunked into sections. The flat index
+     * each row carries is the one the keyboard and `aria-activedescendant`
+     * use, so what the arrows do and what the eye sees stay the same list.
+     */
+    sections = computed(() => {
+        const out = [];
+        this.filtered().forEach((item, index) => {
+            const label = item.section ?? '';
+            const last = out[out.length - 1];
+            if (last && last.label === label)
+                last.rows.push({ item, index });
+            else
+                out.push({ label, id: `${this.listId}-sec-${out.length}`, rows: [{ item, index }] });
+        });
+        return out;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
     /** Rank: label prefix > word-start > substring; group/keyword matches last. */
     filtered = computed(() => {
         const items = this.items();
         // Server-backed mode: the caller already filtered — render as given.
         if (!this.filter())
-            return items.slice(0, this.maxResults());
+            return this.bySection(items.slice(0, this.maxResults()));
         const q = this.query().trim().toLowerCase();
         if (!q)
-            return items.slice(0, this.maxResults());
+            return this.bySection(items.slice(0, this.maxResults()));
         const scored = [];
         for (const item of items) {
             const label = item.label.toLowerCase();
-            const hay = [item.group ?? '', ...(item.keywords ?? [])].join(' ').toLowerCase();
+            const hay = [item.group ?? '', item.section ?? '', ...(item.keywords ?? [])]
+                .join(' ')
+                .toLowerCase();
             let score = -1;
             if (label.startsWith(q))
                 score = 0;
@@ -7369,12 +7531,30 @@ class StrctCommandPalette {
             if (score >= 0)
                 scored.push({ item, score });
         }
-        return scored
+        return this.bySection(scored
             .sort((a, b) => a.score - b.score)
             .slice(0, this.maxResults())
-            .map((s) => s.item);
+            .map((s) => s.item));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filtered" }] : /* istanbul ignore next */ []));
+    /**
+     * Keeps each section's results together, in `sectionOrder` where it is
+     * given and otherwise in the order the sections first appear. The sort is
+     * stable, so how well a result matched still orders it inside its section.
+     */
+    bySection(list) {
+        const rank = new Map();
+        this.sectionOrder().forEach((name, i) => rank.set(name, i));
+        let next = rank.size;
+        for (const item of list) {
+            const key = item.section ?? '';
+            if (!rank.has(key))
+                rank.set(key, next++);
+        }
+        if (rank.size < 2)
+            return list;
+        return [...list].sort((a, b) => rank.get(a.section ?? '') - rank.get(b.section ?? ''));
+    }
     constructor() {
         // Async results can shrink under the cursor — keep the active option in range.
         effect(() => {
@@ -7453,7 +7633,7 @@ class StrctCommandPalette {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCommandPalette, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctCommandPalette, isStandalone: true, selector: "strct-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", picked: "picked", query: "queryChange" }, host: { listeners: { "document:keydown": "onGlobalKey($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctCommandPalette, isStandalone: true, selector: "strct-command-palette", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, maxResults: { classPropertyName: "maxResults", publicName: "maxResults", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, sectionOrder: { classPropertyName: "sectionOrder", publicName: "sectionOrder", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", picked: "picked", query: "queryChange" }, host: { listeners: { "document:keydown": "onGlobalKey($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (open()) {
       <!-- Backdrop: pointer-only dismiss (Escape covers keyboard). -->
       <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
@@ -7489,34 +7669,61 @@ class StrctCommandPalette {
                 <span class="strct-cmdp__spin" aria-hidden="true"></span>{{ loadingText() }}
               </div>
             }
-            @for (item of filtered(); track item.id; let i = $index) {
-              <button
-                type="button"
-                class="strct-cmdp__item"
-                role="option"
-                [id]="optionId(i)"
-                [attr.aria-selected]="i === activeIndex()"
-                [class.is-active]="i === activeIndex()"
-                tabindex="-1"
-                (click)="pick(item)"
-                (mousemove)="activeIndex.set(i)"
+            <!-- A section is a group with a heading, not an option: the
+                 heading is never active and never picked, and the arrows
+                 move through every option across every section. -->
+            @for (section of sections(); track section.id) {
+              <div
+                class="strct-cmdp__sec"
+                role="group"
+                [attr.aria-labelledby]="section.label ? section.id : null"
               >
-                @if (item.icon) {
-                  <strct-icon
-                    class="strct-cmdp__icon"
-                    [name]="item.icon"
-                    [size]="16"
-                    [strokeWidth]="1.4"
-                  />
-                }
-                <span class="strct-cmdp__label">{{ item.label }}</span>
-                @if (item.hint) {
-                  <strct-kbd>{{ item.hint }}</strct-kbd>
+                @if (section.label) {
+                  <div class="strct-cmdp__section" [id]="section.id">{{ section.label }}</div>
                 }
-                @if (item.group) {
-                  <span class="strct-cmdp__group">{{ item.group }}</span>
+                @for (row of section.rows; track row.item.id) {
+                  <button
+                    type="button"
+                    class="strct-cmdp__item"
+                    role="option"
+                    [id]="optionId(row.index)"
+                    [attr.aria-selected]="row.index === activeIndex()"
+                    [class.is-active]="row.index === activeIndex()"
+                    tabindex="-1"
+                    (click)="pick(row.item)"
+                    (mousemove)="activeIndex.set(row.index)"
+                  >
+                    @if (row.item.icon) {
+                      <strct-icon
+                        class="strct-cmdp__icon"
+                        [name]="row.item.icon"
+                        [size]="16"
+                        [strokeWidth]="1.4"
+                      />
+                    }
+                    <span class="strct-cmdp__text">
+                      <span class="strct-cmdp__label">{{ row.item.label }}</span>
+                      @if (row.item.description) {
+                        <span class="strct-cmdp__desc">{{ row.item.description }}</span>
+                      }
+                    </span>
+                    @if (row.item.hint) {
+                      <strct-kbd>{{ row.item.hint }}</strct-kbd>
+                    }
+                    @if (row.item.badge; as badge) {
+                      <strct-badge
+                        class="strct-cmdp__badge"
+                        [status]="badge.status ?? 'neutral'"
+                        [tone]="badge.tone ?? ''"
+                        >{{ badge.label }}</strct-badge
+                      >
+                    }
+                    @if (row.item.group) {
+                      <span class="strct-cmdp__group">{{ row.item.group }}</span>
+                    }
+                  </button>
                 }
-              </button>
+              </div>
             } @empty {
               @if (!loading()) {
                 <div class="strct-cmdp__empty">{{ emptyText() }} “{{ query() }}”</div>
@@ -7526,11 +7733,11 @@ class StrctCommandPalette {
         </div>
       </div>
     }
-  `, isInline: true, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:var(--z-toast);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex-shrink:0}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctKbd, selector: "strct-kbd" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:var(--z-toast);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex:0 20 auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cmdp__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.strct-cmdp__desc{font-size:var(--text-sm);color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cmdp__badge{flex:none}.strct-cmdp__section{padding:8px 12px 4px;font-size:var(--text-xs, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel", "count", "countMax", "countStatus", "countLabel"] }, { kind: "component", type: StrctKbd, selector: "strct-kbd" }, { kind: "component", type: StrctBadge, selector: "strct-badge", inputs: ["status", "tone", "solid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctCommandPalette, decorators: [{
             type: Component,
-            args: [{ selector: 'strct-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctKbd], host: { '(document:keydown)': 'onGlobalKey($event)' }, template: `
+            args: [{ selector: 'strct-command-palette', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon, StrctKbd, StrctBadge], host: { '(document:keydown)': 'onGlobalKey($event)' }, template: `
     @if (open()) {
       <!-- Backdrop: pointer-only dismiss (Escape covers keyboard). -->
       <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
@@ -7566,34 +7773,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 <span class="strct-cmdp__spin" aria-hidden="true"></span>{{ loadingText() }}
               </div>
             }
-            @for (item of filtered(); track item.id; let i = $index) {
-              <button
-                type="button"
-                class="strct-cmdp__item"
-                role="option"
-                [id]="optionId(i)"
-                [attr.aria-selected]="i === activeIndex()"
-                [class.is-active]="i === activeIndex()"
-                tabindex="-1"
-                (click)="pick(item)"
-                (mousemove)="activeIndex.set(i)"
+            <!-- A section is a group with a heading, not an option: the
+                 heading is never active and never picked, and the arrows
+                 move through every option across every section. -->
+            @for (section of sections(); track section.id) {
+              <div
+                class="strct-cmdp__sec"
+                role="group"
+                [attr.aria-labelledby]="section.label ? section.id : null"
               >
-                @if (item.icon) {
-                  <strct-icon
-                    class="strct-cmdp__icon"
-                    [name]="item.icon"
-                    [size]="16"
-                    [strokeWidth]="1.4"
-                  />
-                }
-                <span class="strct-cmdp__label">{{ item.label }}</span>
-                @if (item.hint) {
-                  <strct-kbd>{{ item.hint }}</strct-kbd>
+                @if (section.label) {
+                  <div class="strct-cmdp__section" [id]="section.id">{{ section.label }}</div>
                 }
-                @if (item.group) {
-                  <span class="strct-cmdp__group">{{ item.group }}</span>
+                @for (row of section.rows; track row.item.id) {
+                  <button
+                    type="button"
+                    class="strct-cmdp__item"
+                    role="option"
+                    [id]="optionId(row.index)"
+                    [attr.aria-selected]="row.index === activeIndex()"
+                    [class.is-active]="row.index === activeIndex()"
+                    tabindex="-1"
+                    (click)="pick(row.item)"
+                    (mousemove)="activeIndex.set(row.index)"
+                  >
+                    @if (row.item.icon) {
+                      <strct-icon
+                        class="strct-cmdp__icon"
+                        [name]="row.item.icon"
+                        [size]="16"
+                        [strokeWidth]="1.4"
+                      />
+                    }
+                    <span class="strct-cmdp__text">
+                      <span class="strct-cmdp__label">{{ row.item.label }}</span>
+                      @if (row.item.description) {
+                        <span class="strct-cmdp__desc">{{ row.item.description }}</span>
+                      }
+                    </span>
+                    @if (row.item.hint) {
+                      <strct-kbd>{{ row.item.hint }}</strct-kbd>
+                    }
+                    @if (row.item.badge; as badge) {
+                      <strct-badge
+                        class="strct-cmdp__badge"
+                        [status]="badge.status ?? 'neutral'"
+                        [tone]="badge.tone ?? ''"
+                        >{{ badge.label }}</strct-badge
+                      >
+                    }
+                    @if (row.item.group) {
+                      <span class="strct-cmdp__group">{{ row.item.group }}</span>
+                    }
+                  </button>
                 }
-              </button>
+              </div>
             } @empty {
               @if (!loading()) {
                 <div class="strct-cmdp__empty">{{ emptyText() }} “{{ query() }}”</div>
@@ -7603,8 +7837,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         </div>
       </div>
     }
-  `, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:var(--z-toast);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex-shrink:0}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }] } });
+  `, styles: [".strct-cmdp__backdrop{position:fixed;inset:0;z-index:var(--z-toast);display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-cmdp-fade .12s ease}.strct-cmdp{width:100%;max-width:560px;max-height:60vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-floating);overflow:hidden;animation:strct-cmdp-rise .14s ease}.strct-cmdp__search{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--b1);color:var(--t3)}.strct-cmdp__input{flex:1;min-width:0;border:0;background:transparent;color:var(--t1);font-size:15px;font-family:var(--font);outline:none}.strct-cmdp__list{overflow-y:auto;padding:6px}.strct-cmdp__item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border:0;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:start;font-family:var(--font)}.strct-cmdp__item.is-active{background:var(--acc-m)}.strct-cmdp__icon{color:var(--t2);flex-shrink:0}.strct-cmdp__item.is-active .strct-cmdp__icon{color:var(--acc)}.strct-cmdp__label{flex:1;min-width:0;font-size:var(--text-lg);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-cmdp__group{font-size:var(--text-sm);color:var(--t3);flex:0 20 auto;min-width:0;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cmdp__text{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.strct-cmdp__desc{font-size:var(--text-sm);color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strct-cmdp__badge{flex:none}.strct-cmdp__section{padding:8px 12px 4px;font-size:var(--text-xs, 11px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}.strct-cmdp__loading{display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:var(--text-md);color:var(--t3)}.strct-cmdp__spin{width:13px;height:13px;border:2px solid var(--acc30);border-top-color:var(--acc);border-radius:50%;flex-shrink:0}@media(prefers-reduced-motion:no-preference){.strct-cmdp__spin{animation:strct-cmdp-spin .8s linear infinite}}@keyframes strct-cmdp-spin{to{transform:rotate(360deg)}}.strct-cmdp__empty{padding:20px;text-align:center;font-size:var(--text-md);color:var(--t3)}@keyframes strct-cmdp-fade{0%{opacity:0}}@keyframes strct-cmdp-rise{0%{opacity:0;transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){.strct-cmdp__backdrop,.strct-cmdp{animation:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], sectionOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionOrder", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }] } });
 
 /**
  * Compact search pill — the pattern from the docs header: a leading search
@@ -29449,5 +29683,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map