@akcelik/strct 0.2.0 → 0.3.0

package/README.md

@@ -19,7 +19,13 @@ npm install @akcelik/strct
 ```
 
 `@angular/core`, `@angular/common`, `@angular/forms` and
-`@angular/platform-browser` are peer dependencies.
+`@angular/platform-browser` are peer dependencies (Angular 21.2+).
+
+> **Consuming a local build?** Install the packed tarball
+> (`ng build strct && npm pack dist/strct`, then `npm i ../akcelik-strct-x.y.z.tgz`)
+> rather than a `file:` symlink — a symlinked dependency resolves its own copy of
+> `@angular/core`, which can trip an `InputSignal` brand mismatch (TS2551) across
+> Angular patch versions.
 
 ## Theme setup
 
@@ -31,6 +37,10 @@ form-control styles):
 @use '@akcelik/strct/styles/theme';
 ```
 
+The theme **self-hosts its fonts** (DM Sans + JetBrains Mono, OFL) — they ship as
+`woff2` under `styles/fonts/` and are referenced by `@font-face`, so there is no
+external request and nothing else to load.
+
 Set the scheme on the document root (or let `StrctThemeService` manage it):
 
 ```html

package/fesm2022/akcelik-strct.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, booleanAttribute, output, HostListener, model, contentChildren, effect, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, TemplateRef, contentChild, Renderer2 } from '@angular/core';
+import { inject, DOCUMENT, signal, computed, Injectable, input, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, NgZone, afterNextRender, Directive, booleanAttribute, output, HostListener, model, contentChildren, effect, DestroyRef, ApplicationRef, EnvironmentInjector, createComponent, forwardRef, TemplateRef, contentChild, Renderer2 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DOCUMENT as DOCUMENT$1, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -124,6 +124,9 @@ const STRCT_ICONS = {
     code: '<path d="M5.5 5L2.5 8l3 3M10.5 5l3 3-3 3M9 3.5l-2 9"/>',
     book: '<path d="M3 3.2h6a1.5 1.5 0 0 1 1.5 1.5v8.1H4.5A1.5 1.5 0 0 1 3 11.3z"/><path d="M13 3.2H9.5A1.5 1.5 0 0 0 8 4.7v8.1h5z"/>',
     terminal: '<rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="M4.8 6.5L7 8.2 4.8 9.9M8.2 10.2h3"/>',
+    folder: '<path d="M2 4.6a1 1 0 0 1 1-1h3.1l1.3 1.6H13a1 1 0 0 1 1 1V12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"/>',
+    template: '<path d="M4.3 2.5h4.6l3.1 3.1V13a.5.5 0 0 1-.5.5H4.3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5z"/><path d="M8.7 2.6v3.1h3.1"/><path d="M5.8 9h4.2M5.8 11h2.6"/>',
+    tag: '<path d="M2.6 7.7V3.2a.6.6 0 0 1 .6-.6h4.5l5.6 5.6a1 1 0 0 1 0 1.4l-3.5 3.5a1 1 0 0 1-1.4 0z"/><circle cx="5.4" cy="5.4" r=".9" fill="currentColor" stroke="none"/>',
     // ── Datacenter / infrastructure ─────────────────────────────
     datacenter: '<rect x="2.5" y="2.5" width="11" height="11" rx="1"/><path d="M5 5h6M5 7.3h6M5 9.6h3.5"/><circle cx="11" cy="9.7" r=".5" fill="currentColor" stroke="none"/>',
     rack: '<rect x="3.5" y="2" width="9" height="12" rx="1"/><path d="M3.5 5.2h9M3.5 8.4h9M3.5 11.6h9"/><circle cx="5.4" cy="3.6" r=".4" fill="currentColor" stroke="none"/><circle cx="5.4" cy="6.8" r=".4" fill="currentColor" stroke="none"/><circle cx="5.4" cy="10" r=".4" fill="currentColor" stroke="none"/>',
@@ -144,6 +147,10 @@ const STRCT_ICONS = {
     hba: '<rect x="2.3" y="3.4" width="11.4" height="6.4" rx="1"/><circle cx="5.1" cy="6.6" r="1.2"/><circle cx="8.1" cy="6.6" r="1.2"/><path d="M10.6 5.6h1.6M10.6 7.6h1.6M5 9.8v2.6M11 9.8v2.6"/>',
     // RJ45 ethernet port (switch / server) — keyed jack with contact pins.
     ethernet: '<rect x="2.5" y="4" width="11" height="7.4" rx="1"/><path d="M6 4V2.6h4V4"/><path d="M5.3 7.6v2M7.1 7.6v2M8.9 7.6v2M10.7 7.6v2"/>',
+    // Resource pool — a proportional allocation (pie with two radii).
+    resourcePool: '<circle cx="8" cy="8" r="5.6"/><path d="M8 8V2.4M8 8l4.9 2.7"/>',
+    // Port group — a grouped set of switch ports under a shared rail.
+    portGroup: '<path d="M1.8 4.4h12.4"/><rect x="2.2" y="6.2" width="3.4" height="4" rx=".5"/><rect x="6.3" y="6.2" width="3.4" height="4" rx=".5"/><rect x="10.4" y="6.2" width="3.4" height="4" rx=".5"/><path d="M3.9 10.2v1.6M8 10.2v1.6M12.1 10.2v1.6"/>',
     // ── Accessibility (original glyphs for generic concepts) ─────
     universalAccess: '<circle cx="8" cy="8" r="6"/><circle cx="8" cy="4.9" r=".9" fill="currentColor" stroke="none"/><path d="M4.9 6.3c2 .8 4.2 .8 6.2 0M8 6.4v3.1M6.3 11.9 8 9.4l1.7 2.5"/>',
     wheelchair: '<circle cx="6.5" cy="3.1" r="1.3"/><path d="M6.5 4.5v3.3h3.1l1.7 3.4"/><circle cx="6.7" cy="11.3" r="2.6"/><path d="M9.3 11.3h2.1l-.5 1.6"/>',
@@ -181,7 +188,7 @@ const STRCT_ICON_GROUPS = [
             'hexagon', 'search', 'menu', 'ellipsis', 'dots', 'close', 'check', 'calendar',
             'eye', 'eyeOff', 'upload', 'download', 'sun', 'moon', 'bell', 'heart', 'layers',
             'grid', 'form', 'chart', 'bars', 'gauge', 'palette', 'sidebar', 'compass',
-            'copy', 'code', 'book', 'terminal',
+            'copy', 'code', 'book', 'terminal', 'folder', 'template', 'tag',
         ],
     },
     {
@@ -201,6 +208,7 @@ const STRCT_ICON_GROUPS = [
         names: [
             'datacenter', 'rack', 'cluster', 'host', 'vm', 'switch', 'storage',
             'network', 'cpu', 'memory', 'disk', 'port', 'nic', 'hba', 'ethernet', 'power',
+            'resourcePool', 'portGroup',
         ],
     },
     {
@@ -436,10 +444,16 @@ class StrctOverlay {
         let left;
         if (p === 'right') {
             left = a.right + gap;
+            // Flip to the left of the anchor if it would overflow the right edge.
+            if (left + w > vw - margin && a.left - gap - w > margin)
+                left = a.left - gap - w;
             top = a.top;
         }
         else if (p === 'left') {
             left = a.left - gap - w;
+            // Flip to the right of the anchor if it would overflow the left edge.
+            if (left < margin && a.right + gap + w < vw - margin)
+                left = a.right + gap;
             top = a.top;
         }
         else {
@@ -1295,6 +1309,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], nodeActivated: [{ type: i0.Output, args: ["nodeActivated"] }] } });
 
 let modalCounter = 0;
+// Body scroll-lock shared across any number of simultaneously open modals.
+let scrollLockCount = 0;
+let savedBodyOverflow = '';
+function lockBodyScroll(doc) {
+    if (scrollLockCount === 0) {
+        savedBodyOverflow = doc.body.style.overflow;
+        doc.body.style.overflow = 'hidden';
+    }
+    scrollLockCount++;
+}
+function unlockBodyScroll(doc) {
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0)
+        doc.body.style.overflow = savedBodyOverflow;
+}
 /**
  * Overlay dialog with two-way `open`:
  *   <strct-modal [(open)]="show" title="Confirm">
@@ -1317,16 +1346,32 @@ class StrctModal {
     titleId = `strct-modal-${++modalCounter}`;
     /** Element that had focus before the dialog opened, restored on close. */
     previousActive = null;
+    /** Whether this instance currently holds a scroll lock. */
+    locked = false;
     constructor() {
         effect(() => {
-            if (this.open()) {
+            const open = this.open();
+            if (open && !this.locked) {
+                this.locked = true;
+                lockBodyScroll(this.doc);
                 this.previousActive = this.doc.activeElement;
                 // Move focus into the dialog once it has rendered.
                 setTimeout(() => this.focusInitial());
             }
-            else if (this.previousActive) {
-                this.previousActive.focus?.();
-                this.previousActive = null;
+            else if (!open && this.locked) {
+                this.locked = false;
+                unlockBodyScroll(this.doc);
+                if (this.previousActive) {
+                    this.previousActive.focus?.();
+                    this.previousActive = null;
+                }
+            }
+        });
+        // Release the lock if the modal is destroyed while still open.
+        inject(DestroyRef).onDestroy(() => {
+            if (this.locked) {
+                this.locked = false;
+                unlockBodyScroll(this.doc);
             }
         });
     }
@@ -1627,28 +1672,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             }] } });
 
 /**
- * A nested fly-out inside a `strct-context-menu` or `strct-dropdown`. Reuse
- * `strct-dropdown-item` for the nested entries.
+ * A nested fly-out inside a `strct-context-menu` or `strct-dropdown`. Opens on
+ * hover, click/tap, or the keyboard (Enter / Space / →), and flips to the left
+ * near the right edge of the viewport. Reuse `strct-dropdown-item` for entries.
  *   <strct-submenu label="Power">
  *     <strct-dropdown-item>Power on</strct-dropdown-item>
  *     <strct-dropdown-item>Power off</strct-dropdown-item>
  *   </strct-submenu>
  */
 class StrctSubmenu {
+    host = inject(ElementRef);
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     /** Optional leading icon; when omitted the icon column is still reserved so
      *  the label stays aligned with sibling items that do have icons. */
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
     open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Open to the left when the fly-out would overflow the right edge. */
+    flip = signal(false, ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
+    setOpen(value) {
+        if (value) {
+            const rect = this.host.nativeElement.getBoundingClientRect();
+            this.flip.set(rect.right + 190 > window.innerWidth);
+        }
+        this.open.set(value);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSubmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctSubmenu, isStandalone: true, selector: "strct-submenu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-submenu-host" }, ngImport: i0, template: `
-    <div class="strct-submenu" (mouseenter)="open.set(true)" (mouseleave)="open.set(false)">
+    <div class="strct-submenu" (mouseenter)="setOpen(true)" (mouseleave)="open.set(false)">
       <div
         class="strct-submenu__trigger"
         role="menuitem"
+        tabindex="0"
         aria-haspopup="menu"
         [attr.aria-expanded]="open()"
-        (click)="$event.stopPropagation()"
+        (click)="$event.stopPropagation(); setOpen(!open())"
+        (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.space)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowright)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowleft)="$event.stopPropagation(); open.set(false)"
+        (keydown.escape)="$event.stopPropagation(); open.set(false)"
       >
         @if (icon()) {
           <strct-icon class="strct-submenu__icon" [name]="icon()" [size]="14" [strokeWidth]="1.3" />
@@ -1659,21 +1721,29 @@ class StrctSubmenu {
         <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
       </div>
       @if (open()) {
-        <div class="strct-submenu__panel" role="menu"><ng-content /></div>
+        <div class="strct-submenu__panel" [class.strct-submenu__panel--flip]="flip()" role="menu">
+          <ng-content />
+        </div>
       }
     </div>
-  `, isInline: true, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "size", "strokeWidth", "badge"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctSubmenu, decorators: [{
             type: Component,
             args: [{ selector: 'strct-submenu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [StrctIcon], template: `
-    <div class="strct-submenu" (mouseenter)="open.set(true)" (mouseleave)="open.set(false)">
+    <div class="strct-submenu" (mouseenter)="setOpen(true)" (mouseleave)="open.set(false)">
       <div
         class="strct-submenu__trigger"
         role="menuitem"
+        tabindex="0"
         aria-haspopup="menu"
         [attr.aria-expanded]="open()"
-        (click)="$event.stopPropagation()"
+        (click)="$event.stopPropagation(); setOpen(!open())"
+        (keydown.enter)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.space)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowright)="$event.preventDefault(); $event.stopPropagation(); setOpen(true)"
+        (keydown.arrowleft)="$event.stopPropagation(); open.set(false)"
+        (keydown.escape)="$event.stopPropagation(); open.set(false)"
       >
         @if (icon()) {
           <strct-icon class="strct-submenu__icon" [name]="icon()" [size]="14" [strokeWidth]="1.3" />
@@ -1684,10 +1754,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
         <strct-icon class="strct-submenu__arrow" name="chevronRight" [size]="12" [strokeWidth]="1.6" />
       </div>
       @if (open()) {
-        <div class="strct-submenu__panel" role="menu"><ng-content /></div>
+        <div class="strct-submenu__panel" [class.strct-submenu__panel--flip]="flip()" role="menu">
+          <ng-content />
+        </div>
       }
     </div>
-  `, host: { class: 'strct-submenu-host' }, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"] }]
+  `, host: { class: 'strct-submenu-host' }, styles: [".strct-submenu{position:relative}.strct-submenu__trigger{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 10px;border-radius:5px;cursor:default;font-size:13px;color:var(--t1)}.strct-submenu__trigger:hover{background:var(--bg-3)}.strct-submenu__trigger:focus-visible{outline:none;background:var(--bg-3)}.strct-submenu__icon{color:var(--t2);flex-shrink:0}.strct-submenu__icon-spacer{width:14px;flex-shrink:0}.strct-submenu__label{flex:1;display:inline-flex;align-items:center;gap:8px}.strct-submenu__arrow{color:var(--t3)}.strct-submenu__panel{position:absolute;top:-5px;left:100%;z-index:1;min-width:170px;margin-left:2px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:7px;box-shadow:var(--shh);animation:strct-submenu-in .1s ease}.strct-submenu__panel--flip{left:auto;right:100%;margin-left:0;margin-right:2px}@keyframes strct-submenu-in{0%{opacity:0;transform:translate(-4px)}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 
 /**
@@ -2329,6 +2401,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
   `, host: { class: 'strct-pg', role: 'navigation', 'aria-label': 'Pagination' }, styles: [".strct-pg{display:inline-flex;align-items:center;gap:4px}.strct-pg__btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border-radius:6px;font-family:var(--font);font-size:13px;cursor:pointer;color:var(--t1);background:transparent;border:1px solid transparent;transition:background .14s ease,border-color .14s ease,color .14s ease}.strct-pg__btn:hover{background:var(--bg-3)}.strct-pg__btn--active{color:var(--acc);border-color:var(--acc30);background:var(--acc-m)}.strct-pg__btn:disabled{color:var(--t4);cursor:not-allowed;background:transparent}.strct-pg__nav{color:var(--t2)}.strct-pg__dots{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:30px;color:var(--t3)}\n"] }]
         }], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
 
+let fieldCounter = 0;
+/**
+ * Form-field wrapper: a label (with optional required marker), the projected
+ * control, and a hint or error message. It auto-links the control via
+ * `aria-describedby` and sets `aria-invalid` when an error is present.
+ *
+ *   <strct-field label="Email" required hint="We never share it." [error]="emailError()">
+ *     <input strctInput type="email" [(ngModel)]="email" />
+ *   </strct-field>
+ */
+class StrctField {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Error message (string or first-of array); falsy clears the error state. */
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    n = ++fieldCounter;
+    hintId = `strct-field-hint-${this.n}`;
+    errorId = `strct-field-err-${this.n}`;
+    controlId = signal('', ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => {
+        const e = this.error();
+        return (Array.isArray(e) ? e[0] : e) ?? '';
+    }, ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => this.link());
+        // Keep aria in sync as the error / hint change.
+        effect(() => {
+            this.errorText();
+            this.hint();
+            this.applyAria();
+        });
+    }
+    control() {
+        return this.host.nativeElement.querySelector('input, select, textarea, [strctInput], [strctField]');
+    }
+    link() {
+        const el = this.control();
+        if (!el)
+            return;
+        if (!el.id)
+            el.id = `strct-field-ctrl-${this.n}`;
+        this.controlId.set(el.id);
+        this.applyAria();
+    }
+    applyAria() {
+        const el = this.control();
+        if (!el)
+            return;
+        const describedBy = this.errorText() ? this.errorId : this.hint() ? this.hintId : '';
+        if (describedBy)
+            el.setAttribute('aria-describedby', describedBy);
+        else
+            el.removeAttribute('aria-describedby');
+        if (this.errorText())
+            el.setAttribute('aria-invalid', 'true');
+        else
+            el.removeAttribute('aria-invalid');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: StrctField, isStandalone: true, selector: "strct-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.strct-field--invalid": "!!errorText()" }, classAttribute: "strct-field" }, ngImport: i0, template: `
+    @if (label()) {
+      <label class="strct-field__label" [attr.for]="controlId() || null">
+        {{ label() }}@if (required()) {<span class="strct-field__req" aria-hidden="true">*</span>}
+      </label>
+    }
+    <div class="strct-field__control"><ng-content /></div>
+    @if (errorText()) {
+      <div class="strct-field__msg strct-field__msg--error" [id]="errorId" role="alert">
+        {{ errorText() }}
+      </div>
+    } @else if (hint()) {
+      <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
+    }
+  `, isInline: true, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--crt);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--crt)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: StrctField, decorators: [{
+            type: Component,
+            args: [{ selector: 'strct-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `
+    @if (label()) {
+      <label class="strct-field__label" [attr.for]="controlId() || null">
+        {{ label() }}@if (required()) {<span class="strct-field__req" aria-hidden="true">*</span>}
+      </label>
+    }
+    <div class="strct-field__control"><ng-content /></div>
+    @if (errorText()) {
+      <div class="strct-field__msg strct-field__msg--error" [id]="errorId" role="alert">
+        {{ errorText() }}
+      </div>
+    } @else if (hint()) {
+      <div class="strct-field__msg strct-field__msg--hint" [id]="hintId">{{ hint() }}</div>
+    }
+  `, host: {
+                        class: 'strct-field',
+                        '[class.strct-field--invalid]': '!!errorText()',
+                    }, styles: [".strct-field{display:flex;flex-direction:column;gap:6px}.strct-field__label{font-size:12px;font-weight:600;color:var(--t2)}.strct-field__req{color:var(--crt);margin-left:2px}.strct-field__control{display:flex;flex-direction:column}.strct-field__msg{font-size:12px;line-height:1.4}.strct-field__msg--hint{color:var(--t3)}.strct-field__msg--error{color:var(--crt)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }] } });
+
 /**
  * Applies the shared `.strct-control` look to a native input / textarea / select.
  *   <input strctInput placeholder="Name" />
@@ -5930,5 +6101,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
+export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, StrctShell, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon };
 //# sourceMappingURL=akcelik-strct.mjs.map