@akcelik/strct 4.24.0 → 5.0.0

package/fesm2022/akcelik-strct.mjs

@@ -1074,7 +1074,7 @@ class StrctShell {
     <ng-content select="strct-header" />
     <div class="strct-shell__main"><ng-content /></div>
     <ng-content select="strct-footer" />
-  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-0)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctShell, decorators: [{
             type: Component,
@@ -1091,7 +1091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     <ng-content select="strct-header" />
     <div class="strct-shell__main"><ng-content /></div>
     <ng-content select="strct-footer" />
-  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-2)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
+  `, host: { class: 'strct-shell' }, styles: [".strct-shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh;overflow:hidden;background:var(--bg-0)}.strct-shell__main{display:flex;min-height:0;overflow:hidden}.strct-shell__skip{position:absolute;inset-inline-start:0;top:0;z-index:1;transform:translateY(-120%);padding:var(--space-2) var(--space-3);border-radius:0 0 var(--radius-md) 0;background:var(--acc);color:var(--inv);font-size:var(--text-sm);text-decoration:none}.strct-shell__skip:focus-visible{transform:none;outline:2px solid var(--acc50);outline-offset:2px}\n"] }]
         }], propDecorators: { skipLinkTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkTarget", required: false }] }], skipLinkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "skipLinkLabel", required: false }] }] } });
 /** Top application bar. Holds brand on the left and actions on the right. */
 class StrctHeader {
@@ -2128,8 +2128,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
             args: [{ selector: 'strct-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: { class: 'strct-btn-group', role: 'group' }, styles: [".strct-btn-group{display:inline-flex}.strct-btn-group>.strct-btn{border-radius:0}.strct-btn-group>.strct-btn:not(:first-child){margin-inline-start:-1px}.strct-btn-group>.strct-btn:first-child{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md)}.strct-btn-group>.strct-btn:last-child{border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md)}.strct-btn-group>.strct-btn:hover,.strct-btn-group>.strct-btn:focus-visible{position:relative;z-index:var(--z-base)}\n"] }]
         }] });
 
+/**
+ * Dev-mode diagnostics for combinations a component accepts but cannot honour.
+ *
+ * Every message names what was ignored and what to do instead. Keyed: a
+ * condition warns once per page load, not once per change detection.
+ *
+ * Production cost: none, PROVIDED each call site is guarded INLINE with
+ *   if (typeof ngDevMode !== 'undefined' && ngDevMode) { … }
+ * Production builds define `ngDevMode` as false, and the minifier then drops
+ * the whole block — messages included. A helper function returning that same
+ * expression would NOT be folded across the call, so the check and its
+ * strings would ship; that is why no such helper exists here.
+ */
+const warned = new Set();
+function strctDevWarn(key, message) {
+    if (typeof ngDevMode === 'undefined' || !ngDevMode || warned.has(key))
+        return;
+    warned.add(key);
+    console.warn(message);
+}
+/** Test hook: forget which warnings have fired. Not part of the public API. */
+function resetStrctDevWarnings() {
+    warned.clear();
+}
+
+/**
+ * Dev-mode diagnostics for attributes a component does not have.
+ *
+ * Writing a component the way a sibling component is written must not fail
+ * silently: `<strct-alert variant="warning">` compiles, because a static
+ * attribute is just an HTML attribute to Angular, renders the info-blue
+ * default, and nobody finds out.
+ *
+ * Every call site must guard inline with `ngDevMode`, as `dev-warn` explains —
+ * then production drops the calls, nothing references this module, and the
+ * whole of it (messages included) is tree-shaken away.
+ */
+/**
+ * The closed, small list of input names that exist on *other* strct
+ * components. Only these are ever flagged, so ordinary HTML and ARIA
+ * attributes, `class`, `style` and `data-*` are never touched.
+ */
+const BORROWED = [
+    'variant',
+    'size',
+    'tone',
+    'status',
+    'type',
+    'dense',
+    'compact',
+    'heading',
+    'label',
+];
+/**
+ * Warn about a borrowed input name the component does not have.
+ *
+ * @param host      the component's own element
+ * @param selector  what to call it in the message, e.g. `strct-alert`
+ * @param owns      the component's inputs from that list: name → its values,
+ *                  used to suggest the right one
+ */
+function strctCheckHostInputs(host, selector, owns) {
+    const ownNames = Object.keys(owns);
+    for (const name of BORROWED) {
+        if (!host.hasAttribute(name) || name in owns)
+            continue;
+        // Suggest the input that actually takes the value written, when there is
+        // one — "variant=warning" on an alert means `type`, not `icon`.
+        const written = host.getAttribute(name)?.trim() ?? '';
+        const match = ownNames.find((n) => owns[n]
+            .split(',')
+            .map((v) => v.trim())
+            .includes(written)) ?? (ownNames.length === 1 ? ownNames[0] : null);
+        const hint = match
+            ? ` — did you mean "${match}"? (values: ${owns[match]})`
+            : ownNames.length
+                ? ` — its inputs are: ${ownNames.map((n) => `"${n}"`).join(', ')}`
+                : '';
+        strctDevWarn(`host-input:${selector}:${name}`, `[strct] <${selector}> has no "${name}" input${hint}. ` +
+            `The attribute was ignored, so the default rendered.`);
+    }
+}
+/**
+ * Warn when a consumer's `display` overrides the one the component's layout
+ * depends on — the usual way to give a custom element margins, and the usual
+ * way to break a flex host.
+ */
+function strctCheckHostDisplay(host, selector, expected) {
+    const actual = getComputedStyle(host).display;
+    if (actual === expected)
+        return;
+    strctDevWarn(`host-display:${selector}`, `[strct] <${selector}> needs display: ${expected}, but it computes to ${actual}. ` +
+        `Wrap it, or set the margin on a wrapper, rather than changing its display.`);
+}
+
 /** Small inline status pill: `<strct-badge status="success">Active</strct-badge>`. */
 class StrctBadge {
+    hostEl = inject(ElementRef);
+    constructor() {
+        // Dev-only: writing this component the way a sibling is written must not
+        // fail silently. Guarded inline, so production drops the call — and with it
+        // the whole diagnostics module.
+        afterNextRender(() => {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                const el = this.hostEl.nativeElement;
+                strctCheckHostInputs(el, 'strct-badge', {
+                    status: 'neutral, accent, success, warning, critical',
+                });
+            }
+        });
+    }
     /** Visual status color. */
     status = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
@@ -2150,7 +2259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[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"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", 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 {
@@ -2166,6 +2275,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  *   <strct-tag status="accent" removable (removed)="drop()">Frontend</strct-tag>
  */
 class StrctTag {
+    hostEl = inject(ElementRef);
+    constructor() {
+        // Dev-only: writing this component the way a sibling is written must not
+        // fail silently. Guarded inline, so production drops the call — and with it
+        // the whole diagnostics module.
+        afterNextRender(() => {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                const el = this.hostEl.nativeElement;
+                strctCheckHostInputs(el, 'strct-tag', {
+                    status: 'neutral, accent, success, warning, critical',
+                    shape: 'default, pill',
+                });
+            }
+        });
+    }
     /** Visual status color. */
     status = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
@@ -2258,7 +2382,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-tag--warning]': "status() === 'warning'",
                         '[class.strct-tag--critical]': "status() === 'critical'",
                     }, styles: [".strct-tag{display:inline-flex;align-items:center;gap:5px;padding-block:3px;padding-inline:9px 4px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t1);background:var(--bg-3);border:1px solid var(--b2)}.strct-tag:not(:has(.strct-tag__remove)){padding-inline-end:9px}.strct-tag--accent{color:var(--acc);border-color:var(--acc30);background:var(--acc-s)}.strct-tag--success{color:var(--success);border-color:var(--success);background:transparent}.strct-tag--warning{color:var(--warning);border-color:var(--warning);background:transparent}.strct-tag--critical{color:var(--critical);border-color:var(--critical);background:transparent}.strct-tag__text{display:inline-flex;align-items:center;gap:5px}.strct-tag--interactive .strct-tag__text{cursor:pointer;border-radius:3px}.strct-tag--interactive:hover{border-color:var(--b3);background:var(--bg-2)}.strct-tag--interactive.strct-tag--accent:hover{border-color:var(--acc)}.strct-tag__text:focus-visible{outline:2px solid var(--acc50);outline-offset:2px}.strct-tag--pill{border-radius:var(--radius-full, 999px);padding-inline:10px 5px}.strct-tag--pill:not(:has(.strct-tag__remove)){padding-inline-end:10px}.strct-tag--pill .strct-tag__remove{border-radius:999px}.strct-tag--mono{font-family:var(--mono)}.strct-tag__remove{display:inline-flex;padding:2px;border:0;border-radius:3px;background:transparent;color:currentColor;opacity:.65;cursor:pointer}.strct-tag__remove:hover,.strct-tag__remove:focus-visible{opacity:1;background:var(--dn)}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
+        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], activated: [{ type: i0.Output, args: ["activated"] }] } });
 
 /**
  * Circular avatar: an image when `src` is set, otherwise initials from `name`.
@@ -4578,31 +4702,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     }, styles: [".strct-tree{display:block}.strct-tree--framed{border:1px solid var(--b2);border-radius:var(--radius-md);background:var(--bg-1);padding:var(--space-1)}.strct-tree[style*=max-height]{overflow:auto}.strct-tree--comfortable .strct-tnode__row{gap:7px;padding:6px 10px;border-radius:6px;font-size:14px}.strct-tree--comfortable .strct-tnode__chevron{margin:-4px;margin-inline-end:-9px}.strct-tree--comfortable .strct-tnode__spacer{width:16px}.strct-tree--comfortable .strct-tnode__children{margin-inline-start:19px}\n"] }]
         }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], framed: [{ type: i0.Input, args: [{ isSignal: true, alias: "framed", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], nodeMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeMenu", required: false }] }], canDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrag", required: false }] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], dragExpandDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragExpandDelay", required: false }] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }], chevronAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronAriaLabel", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }], nodeMenuSelect: [{ type: i0.Output, args: ["nodeMenuSelect"] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], nodeToggled: [{ type: i0.Output, args: ["nodeToggled"] }], projectedNodes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTreeNode), { ...{ descendants: false }, isSignal: true }] }] } });
 
-/**
- * Dev-mode diagnostics for combinations a component accepts but cannot honour.
- *
- * Every message names what was ignored and what to do instead. Keyed: a
- * condition warns once per page load, not once per change detection.
- *
- * Production cost: none, PROVIDED each call site is guarded INLINE with
- *   if (typeof ngDevMode !== 'undefined' && ngDevMode) { … }
- * Production builds define `ngDevMode` as false, and the minifier then drops
- * the whole block — messages included. A helper function returning that same
- * expression would NOT be folded across the call, so the check and its
- * strings would ship; that is why no such helper exists here.
- */
-const warned = new Set();
-function strctDevWarn(key, message) {
-    if (typeof ngDevMode === 'undefined' || !ngDevMode || warned.has(key))
-        return;
-    warned.add(key);
-    console.warn(message);
-}
-/** Test hook: forget which warnings have fired. Not part of the public API. */
-function resetStrctDevWarnings() {
-    warned.clear();
-}
-
 /**
  * Refcounted body scroll-lock shared across any number of simultaneously
  * open transient surfaces (modal, drawer …): the first lock hides body
@@ -8213,12 +8312,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  */
 class StrctInput {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctInput, isStandalone: true, selector: "input[strctInput], textarea[strctInput], select[strctInput]", host: { classAttribute: "strct-control" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: StrctInput, isStandalone: true, selector: "input[strctInput], textarea[strctInput], select[strctInput], input[strct-input], textarea[strct-input], select[strct-input]", host: { classAttribute: "strct-control" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[strctInput], textarea[strctInput], select[strctInput]',
+                    // Both spellings: `<button strct-button>` is kebab-case, so `strct-input` is
+                    // what a consumer writes by analogy — and an unstyled input is the silent
+                    // failure that follows. The alias is kinder than a warning and costs nothing.
+                    selector: 'input[strctInput], textarea[strctInput], select[strctInput], ' +
+                        'input[strct-input], textarea[strct-input], select[strct-input]',
                     host: { class: 'strct-control' },
                 }]
         }] });
@@ -8801,7 +8904,7 @@ class StrctSegmented {
         <span>{{ opt.label }}</span>
       </button>
     }
-  `, isInline: true, styles: [".strct-seg{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);max-width:100%}.strct-seg--block{display:flex;width:100%}.strct-seg__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);flex:1 1 auto;padding:6px 14px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.strct-seg--sm .strct-seg__opt{padding:4px 10px;font-size:12px}.strct-seg__opt:hover:not(:disabled):not(.strct-seg__opt--selected){color:var(--t1)}.strct-seg__opt--selected{background:var(--bg-a);color:var(--t1);font-weight:600;box-shadow:var(--sh)}.strct-seg__opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-seg__opt:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-seg--disabled{opacity:var(--disabled-opacity)}.strct-seg--disabled .strct-seg__opt{cursor:not-allowed}\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-seg{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);max-width:100%}.strct-seg--block{display:flex;width:100%}.strct-seg__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);flex:1 1 auto;padding:6px 14px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.strct-seg--sm .strct-seg__opt{padding:4px 10px;font-size:12px}.strct-seg__opt:hover:not(:disabled):not(.strct-seg__opt--selected){color:var(--t1)}.strct-seg__opt--selected{background:var(--bg-a);color:var(--t1);font-weight:600;box-shadow:var(--sh),0 0 0 1px var(--b1)}.strct-seg__opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-seg__opt:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-seg--disabled{opacity:var(--disabled-opacity)}.strct-seg--disabled .strct-seg__opt{cursor:not-allowed}\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: StrctSegmented, decorators: [{
             type: Component,
@@ -8834,7 +8937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-seg--block]': 'block()',
                         '[class.strct-seg--disabled]': 'isDisabled()',
                         '(keydown)': 'onKeydown($event)',
-                    }, styles: [".strct-seg{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);max-width:100%}.strct-seg--block{display:flex;width:100%}.strct-seg__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);flex:1 1 auto;padding:6px 14px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.strct-seg--sm .strct-seg__opt{padding:4px 10px;font-size:12px}.strct-seg__opt:hover:not(:disabled):not(.strct-seg__opt--selected){color:var(--t1)}.strct-seg__opt--selected{background:var(--bg-a);color:var(--t1);font-weight:600;box-shadow:var(--sh)}.strct-seg__opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-seg__opt:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-seg--disabled{opacity:var(--disabled-opacity)}.strct-seg--disabled .strct-seg__opt{cursor:not-allowed}\n"] }]
+                    }, styles: [".strct-seg{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b2);border-radius:var(--radius-md);max-width:100%}.strct-seg--block{display:flex;width:100%}.strct-seg__opt{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);flex:1 1 auto;padding:6px 14px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--t2);font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.strct-seg--sm .strct-seg__opt{padding:4px 10px;font-size:12px}.strct-seg__opt:hover:not(:disabled):not(.strct-seg__opt--selected){color:var(--t1)}.strct-seg__opt--selected{background:var(--bg-a);color:var(--t1);font-weight:600;box-shadow:var(--sh),0 0 0 1px var(--b1)}.strct-seg__opt:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc50)}.strct-seg__opt:disabled{opacity:var(--disabled-opacity);cursor:not-allowed}.strct-seg--disabled{opacity:var(--disabled-opacity)}.strct-seg--disabled .strct-seg__opt{cursor:not-allowed}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], block: [{ type: i0.Input, args: [{ isSignal: true, alias: "block", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], segs: [{ type: i0.ViewChildren, args: ['seg', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
@@ -12290,6 +12393,22 @@ const DEFAULT_LABEL = {
  *   <strct-status-dot status="critical" size="sm" label="Node unreachable" />
  */
 class StrctStatusDot {
+    hostEl = inject(ElementRef);
+    constructor() {
+        // Dev-only: writing this component the way a sibling is written must not
+        // fail silently. Guarded inline, so production drops the call — and with it
+        // the whole diagnostics module.
+        afterNextRender(() => {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                const el = this.hostEl.nativeElement;
+                strctCheckHostInputs(el, 'strct-status-dot', {
+                    status: 'neutral, accent, success, warning, critical',
+                    size: 'sm, md',
+                    label: 'accessible text',
+                });
+            }
+        });
+    }
     /** Status tone (canonical vocabulary: OK = 'success', info = 'accent'). */
     status = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
@@ -12330,7 +12449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-dot--sm]': "size() === 'sm'",
                         '[class.strct-dot--pulse]': 'pulse()',
                     }, styles: [".strct-dot{display:inline-flex;align-items:center;flex:none;line-height:0}.strct-dot__dot{width:10px;height:10px;border-radius:50%;background:var(--t3)}.strct-dot--sm .strct-dot__dot{width:8px;height:8px}.strct-dot--accent .strct-dot__dot{background:var(--acc)}.strct-dot--success .strct-dot__dot{background:var(--success)}.strct-dot--warning .strct-dot__dot{background:var(--warning)}.strct-dot--critical .strct-dot__dot{background:var(--critical)}.strct-dot--pulse .strct-dot__dot{position:relative}.strct-dot--pulse .strct-dot__dot:after{content:\"\";position:absolute;inset:0;border-radius:50%;background:inherit;animation:strct-dot-pulse 1s ease-out infinite}@keyframes strct-dot-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.55}to{box-shadow:0 0 0 5px transparent;opacity:0}}.strct-dot--pulse .strct-dot__dot{color:var(--t3)}.strct-dot--pulse.strct-dot--accent .strct-dot__dot{color:var(--acc)}.strct-dot--pulse.strct-dot--success .strct-dot__dot{color:var(--success)}.strct-dot--pulse.strct-dot--warning .strct-dot__dot{color:var(--warning)}.strct-dot--pulse.strct-dot--critical .strct-dot__dot{color:var(--critical)}@media(prefers-reduced-motion:reduce){.strct-dot--pulse .strct-dot__dot:after{animation:none;box-shadow:0 0 0 3px currentColor;opacity:.25}}.strct-dot__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
-        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "pulse", required: false }] }] } });
 
 /**
  * Compact definition list: aligned `label : value` rows with an optional trailing
@@ -19006,6 +19125,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
 
 /** Inline contextual banner. `<strct-alert type="warning">…</strct-alert>`. */
 class StrctAlert {
+    hostEl = inject(ElementRef);
+    constructor() {
+        // Dev-only: writing this component the way a sibling is written must not
+        // fail silently. Guarded inline, so production drops the call — and with it
+        // the whole diagnostics module.
+        afterNextRender(() => {
+            if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+                const el = this.hostEl.nativeElement;
+                strctCheckHostInputs(el, 'strct-alert', {
+                    type: 'info, success, warning, critical',
+                    icon: 'an icon name',
+                });
+                strctCheckHostDisplay(el, 'strct-alert', 'block');
+            }
+        });
+    }
     /** Visual type / variant. */
     type = input('info', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
@@ -19085,7 +19220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-alert--warning]': "type() === 'warning'",
                         '[class.strct-alert--critical]': "type() === 'critical'",
                     }, styles: [".strct-alert{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);font-size:13px;color:var(--t1);background:var(--bg-1);border:1px solid var(--b2);border-inline-start:3px solid var(--acc)}.strct-alert__row{display:flex;align-items:flex-start;gap:var(--space-2)}.strct-alert strct-icon{color:var(--acc);margin-top:1px;flex-shrink:0}.strct-alert__body{flex:1;color:var(--t1)}.strct-alert__close{flex-shrink:0;display:inline-flex;padding:2px;margin-block-start:-2px;margin-inline-end:-2px;border:0;background:transparent;color:var(--t3);cursor:pointer;border-radius:var(--radius-sm)}.strct-alert__close:hover{color:var(--t1);background:var(--bg-3)}.strct-alert--success{border-inline-start-color:var(--success)}.strct-alert--success strct-icon{color:var(--success)}.strct-alert--warning{border-inline-start-color:var(--warning)}.strct-alert--warning strct-icon{color:var(--warning)}.strct-alert--critical{border-inline-start-color:var(--critical)}.strct-alert--critical strct-icon{color:var(--critical)}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 let tooltipCounter = 0;
 /**
@@ -26564,5 +26699,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_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, 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, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, 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_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, 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, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
 //# sourceMappingURL=akcelik-strct.mjs.map