@ids-group-ltd/ids-design-system 0.1.0

package/fesm2022/ids-group-ltd-ids-design-system.mjs

@@ -0,0 +1,3170 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, computed, ViewEncapsulation, Component, booleanAttribute, output, viewChild, model, ElementRef, contentChildren, ChangeDetectionStrategy, Directive, ViewContainerRef, signal, effect, TemplateRef, Injectable, DestroyRef, HostBinding, HostListener, forwardRef, DOCUMENT as DOCUMENT$1 } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import * as i2 from '@angular/cdk/a11y';
+import { A11yModule, CdkTrapFocus } from '@angular/cdk/a11y';
+
+const DS_CONFIG = new InjectionToken('DS_CONFIG', {
+    factory: () => ({}),
+});
+/** Provide DS-level defaults at the app root.
+ *
+ *   providers: [provideDsConfig({ card: { padding: 'sm' } })]
+ *
+ * Component inputs (e.g. `<ds-card padding="lg">`) still win over the config.
+ */
+function provideDsConfig(config) {
+    return { provide: DS_CONFIG, useValue: config };
+}
+
+/** A reference to the overlay/container the projected content lives in, used to
+ *  close it from the inside — e.g. a popover (and, later, a dropdown/select)
+ *  closing when a menu item is selected. The container provides it via DI;
+ *  content injects it with `{ optional: true }` so the same content also works
+ *  standalone (outside any overlay).
+ *
+ *  Same shape as Angular Material's `MatDialogRef` (content calls `close()` on a
+ *  ref), generalised so any dismissible overlay can provide it. */
+class DsOverlayCloseRef {
+}
+
+const DS_ICON_REGISTRY = new InjectionToken('DS_ICON_REGISTRY', {
+    factory: () => ({}),
+});
+/** Register additional icons available to `<ds-icon [name]="...">` alongside the built-in DS set.
+ *
+ *   providers: [
+ *     provideDsIcons({
+ *       'cloud-upload': '<path d="..."/>',
+ *       'shield':       '<path d="..."/>',
+ *     }),
+ *   ]
+ *
+ * Names take precedence as: built-in `ICONS` > consumer registry. Consumer names that clash with
+ * built-ins are ignored — to override a built-in, edit the DS source.
+ */
+function provideDsIcons(icons) {
+    return { provide: DS_ICON_REGISTRY, useValue: icons };
+}
+
+// Inline SVG icon set. Ported 1:1 from CLAUDE_DESIGN_DS/ds-icons.jsx.
+// All paths render inside <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">, stroke-width 1.75.
+const ICONS = {
+    search: '<circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />',
+    plus: '<path d="M12 5v14M5 12h14" />',
+    minus: '<path d="M5 12h14" />',
+    check: '<path d="m4 12 5 5L20 6" />',
+    x: '<path d="M6 6l12 12M18 6L6 18" />',
+    chevronDown: '<path d="m6 9 6 6 6-6" />',
+    chevronRight: '<path d="m9 6 6 6-6 6" />',
+    chevronLeft: '<path d="m15 6-6 6 6 6" />',
+    chevronUp: '<path d="m6 15 6-6 6 6" />',
+    arrowRight: '<path d="M5 12h14M13 6l6 6-6 6" />',
+    arrowUp: '<path d="M12 19V5M6 11l6-6 6 6" />',
+    arrowDown: '<path d="M12 5v14M6 13l6 6 6-6" />',
+    info: '<circle cx="12" cy="12" r="9" /><path d="M12 8v.01M11 12h1v4h1" />',
+    warn: '<path d="M12 3 2 21h20L12 3z" /><path d="M12 10v4M12 18v.01" />',
+    error: '<circle cx="12" cy="12" r="9" /><path d="M12 8v4M12 16v.01" />',
+    success: '<circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" />',
+    bell: '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10 21a2 2 0 0 0 4 0" />',
+    settings: '<circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" />',
+    user: '<circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0 1 16 0" />',
+    users: '<circle cx="9" cy="8" r="4" /><path d="M2 21a7 7 0 0 1 14 0" /><path d="M16 4a4 4 0 0 1 0 8M22 21a6 6 0 0 0-6-6" />',
+    home: '<path d="m3 11 9-8 9 8" /><path d="M5 10v10h14V10" />',
+    calendar: '<rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 10h18M8 3v4M16 3v4" />',
+    truck: '<path d="M3 16V6a1 1 0 0 1 1-1h11v11" /><path d="M15 9h4l2 3v4h-6" /><circle cx="7.5" cy="17.5" r="2" /><circle cx="17.5" cy="17.5" r="2" />',
+    box: '<path d="m21 8-9-5-9 5 9 5 9-5z" /><path d="M3 8v8l9 5 9-5V8" /><path d="m12 13 .01 8" />',
+    map: '<path d="m9 4-6 3v13l6-3 6 3 6-3V4l-6 3-6-3z" /><path d="M9 4v13M15 7v13" />',
+    activity: '<path d="M3 12h4l3-9 4 18 3-9h4" />',
+    folder: '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />',
+    edit: '<path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z" />',
+    external: '<path d="M14 4h6v6" /><path d="M20 4 10 14" /><path d="M20 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h5" />',
+    trash: '<path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />',
+    copy: '<rect x="9" y="9" width="11" height="11" rx="2" /><path d="M5 15V5a2 2 0 0 1 2-2h10" />',
+    download: '<path d="M12 4v12M6 12l6 6 6-6" /><path d="M4 20h16" />',
+    upload: '<path d="M12 20V8M6 12l6-6 6 6" /><path d="M4 4h16" />',
+    eye: '<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" />',
+    filter: '<path d="M3 5h18l-7 9v6l-4-2v-4z" />',
+    sort: '<path d="M7 4v16M3 8l4-4 4 4" /><path d="M17 20V4M21 16l-4 4-4-4" />',
+    sortAsc: '<path d="M7 18V6M3 10l4-4 4 4" />',
+    sortDesc: '<path d="M7 6v12M11 14l-4 4-4-4" />',
+    grid: '<rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" />',
+    list: '<path d="M8 6h13M8 12h13M8 18h13" /><circle cx="3.5" cy="6" r="1.2" /><circle cx="3.5" cy="12" r="1.2" /><circle cx="3.5" cy="18" r="1.2" />',
+    moreH: '<circle cx="5" cy="12" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="19" cy="12" r="1.5" />',
+    moreV: '<circle cx="12" cy="5" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="12" cy="19" r="1.5" />',
+    link: '<path d="M10 14a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1" /><path d="M14 10a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1" />',
+    flag: '<path d="M5 21V5a14 14 0 0 1 14 0v9a14 14 0 0 1-14 0z" />',
+    star: '<path d="m12 3 2.9 6 6.6.9-4.8 4.6 1.1 6.5L12 17.8 6.2 21l1.1-6.5L2.5 9.9 9.1 9z" />',
+    inbox: '<path d="M22 12h-6l-2 3h-4l-2-3H2" /><path d="M5 4h14l3 8v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8z" />',
+    archive: '<rect x="3" y="3" width="18" height="5" rx="1" /><path d="M5 8v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8M10 12h4" />',
+    clock: '<circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" />',
+    refresh: '<path d="M3 12a9 9 0 0 1 15-6.7L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-15 6.7L3 16" /><path d="M3 21v-5h5" />',
+    play: '<path d="M6 4l14 8-14 8z" />',
+    pause: '<path d="M7 4v16M17 4v16" />',
+    cmd: '<path d="M9 9h6v6H9zM6 9V7a3 3 0 1 1 3 3H6zM6 15v2a3 3 0 1 0 3-3H6zM18 9V7a3 3 0 1 0-3 3h3zM18 15v2a3 3 0 1 1-3-3h3z" />',
+    paperclip: '<path d="m21 11-9 9a5 5 0 0 1-7-7l9-9a3 3 0 0 1 4 4l-9 9a1 1 0 0 1-1-1l8-8" />',
+    file: '<path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" /><path d="M14 3v6h6" />',
+    image: '<rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-5-5L5 21" />',
+    lock: '<rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" />',
+    logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" /><path d="m16 17 5-5-5-5M21 12H9" />',
+    help: '<circle cx="12" cy="12" r="9" /><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 4M12 17v.01" />',
+    pin: '<path d="M12 22v-7" /><path d="m9 15 6 0M8 9l8 0M9 15c-2-1.5-3-4-3-7l12 0c0 3-1 5.5-3 7" />',
+    bookmark: '<path d="M5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16l-7-4z" />',
+    sparkle: '<path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2" />',
+    layers: '<path d="m12 3 9 5-9 5-9-5z" /><path d="m3 13 9 5 9-5M3 18l9 5 9-5" />',
+    chart: '<path d="M3 3v18h18" /><path d="M7 14l4-4 4 4 5-5" />',
+    gauge: '<path d="M12 14l4-4" /><circle cx="12" cy="14" r="9" /><path d="M3 14a9 9 0 0 1 18 0" />',
+    package: '<path d="M3 7v10l9 4 9-4V7l-9-4z" /><path d="m3 7 9 5 9-5M12 12v9" />',
+    git: '<circle cx="6" cy="6" r="2.5" /><circle cx="6" cy="18" r="2.5" /><circle cx="18" cy="12" r="2.5" /><path d="M6 8.5v7M8.5 6h4a3 3 0 0 1 3 3v0" />',
+    sun: '<circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />',
+    moon: '<path d="M21 13a9 9 0 0 1-12-12 9 9 0 1 0 12 12z" />',
+    save: '<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" /><path d="M17 21v-8H7v8M7 3v5h8" />',
+    rotate: '<path d="M3 12a9 9 0 1 0 3-6.7L3 8" /><path d="M3 3v5h5" />',
+    qr: '<rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><path d="M14 14h3v3h-3zM18 18h3v3h-3z" />',
+    globe: '<circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />',
+    phone: '<path d="M5 4h4l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z" />',
+    bin: '<rect x="3" y="6" width="18" height="14" rx="2" /><path d="M7 6V4h10v2" />',
+    pen: '<path d="M3 17V21h4l11-11-4-4z" />',
+    smile: '<circle cx="12" cy="12" r="9" /><path d="M9 9v.01M15 9v.01M8 14a5 5 0 0 0 8 0" />',
+    frown: '<circle cx="12" cy="12" r="9" /><path d="M9 9v.01M15 9v.01M8 16a5 5 0 0 1 8 0" />',
+    mail: '<rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" />',
+    'eye-off': '<path d="M3 3l18 18" /><path d="M10.6 6.1A10 10 0 0 1 12 6c6 0 10 7 10 7a14 14 0 0 1-2.4 3.1" /><path d="M6.7 6.7A14 14 0 0 0 2 12s4 7 10 7a10 10 0 0 0 4.5-1" /><path d="M9.9 14.1A3 3 0 0 1 9 12a3 3 0 0 1 3-3 3 3 0 0 1 2.1.9" />',
+    'check-circle': '<circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" />',
+    // Drag handle: 6 dots in 2 cols × 3 rows. Use 1.6 radius to read at 12-16px.
+    drag: '<circle cx="9" cy="6" r="1.6" /><circle cx="15" cy="6" r="1.6" /><circle cx="9" cy="12" r="1.6" /><circle cx="15" cy="12" r="1.6" /><circle cx="9" cy="18" r="1.6" /><circle cx="15" cy="18" r="1.6" />',
+    scan: '<path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3" />',
+    wifi: '<path d="M2 9.5a15 15 0 0 1 20 0" /><path d="M5 13a10 10 0 0 1 14 0" /><path d="M8.5 16.5a5 5 0 0 1 7 0" /><path d="M12 20h.01" />',
+    'wifi-off': '<path d="m3 3 18 18" /><path d="M12 20h.01" /><path d="M8.5 16.5a5 5 0 0 1 7 0" /><path d="M5 13a10 10 0 0 1 3.5-2.3" /><path d="M11 8.6A10 10 0 0 1 19 13" /><path d="M2 9.5a15 15 0 0 1 5.7-3.2" /><path d="M11.6 5.6A15 15 0 0 1 22 9.5" />',
+};
+
+class IconComponent {
+    sanitizer = inject(DomSanitizer);
+    // Consumer-supplied icons via provideDsIcons(...). Empty record by default.
+    registry = inject(DS_ICON_REGISTRY);
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    size = input(16, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    stroke = input(1.75, ...(ngDevMode ? [{ debugName: "stroke" }] : /* istanbul ignore next */ []));
+    /** When set, the icon is exposed to assistive tech as an image with this
+     *  name; otherwise it is decorative and hidden (`aria-hidden`). */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    paths = computed(() => {
+        const key = this.name();
+        // Built-in DS set wins over consumer registry — see provideDsIcons() docs.
+        const body = ICONS[key] ?? this.registry[key] ?? '';
+        return this.sanitizer.bypassSecurityTrustHtml(body);
+    }, ...(ngDevMode ? [{ debugName: "paths" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: IconComponent, isStandalone: true, selector: "ds-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, stroke: { classPropertyName: "stroke", publicName: "stroke", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <svg
+      class="icon"
+      [style.--ds-icon-size]="size() + 'px'"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      [attr.stroke-width]="stroke()"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      [attr.role]="ariaLabel() ? 'img' : null"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-hidden]="ariaLabel() ? null : 'true'"
+      [innerHTML]="paths()"
+    ></svg>
+  `, isInline: true, styles: ["ds-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}ds-icon>svg.icon{display:block}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-icon', standalone: true, encapsulation: ViewEncapsulation.None, template: `
+    <svg
+      class="icon"
+      [style.--ds-icon-size]="size() + 'px'"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      [attr.stroke-width]="stroke()"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      [attr.role]="ariaLabel() ? 'img' : null"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-hidden]="ariaLabel() ? null : 'true'"
+      [innerHTML]="paths()"
+    ></svg>
+  `, styles: ["ds-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0}ds-icon>svg.icon{display:block}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stroke: [{ type: i0.Input, args: [{ isSignal: true, alias: "stroke", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class ButtonComponent {
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('l', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Stretch the button to fill its container — the host becomes block-level
+        and 100% wide (the inner control is already full-width). Use for mobile
+        primary CTAs and full-bleed form submit buttons. */
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name — forwarded to the inner <button> as aria-label. Use when
+        the visible label is absent or non-descriptive. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    trailingIcon = input(null, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
+    pressed = output();
+    classes = computed(() => {
+        const variant = this.variant();
+        const parts = [
+            'button',
+            variant === 'primary' ? '' : variant,
+            this.size(),
+            this.loading() ? 'loading' : '',
+        ];
+        return parts.filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.disabled() || this.loading())
+            return;
+        this.pressed.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ButtonComponent, isStandalone: true, selector: "ds-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, host: { properties: { "class.full-width": "fullWidth()" } }, ngImport: i0, template: "<button\r\n  [class]=\"classes()\"\r\n  [type]=\"type()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [disabled]=\"disabled() || loading()\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <span class=\"button-main\"\r\n    >@if (icon(); as name) { <ds-icon [name]=\"name\" /> }<ng-content></ng-content\r\n    >@if (trailingIcon(); as name) { <ds-icon [name]=\"name\" /> }</span\r\n  ><span class=\"subtext-slot\"><ng-content select=\"[dsButtonSubtext]\"></ng-content></span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;width:fit-content}:host(.full-width){display:block;width:100%}.button{--_button-bg: var(--ds-button-bg, var(--primary));--_button-bg-hover: var(--ds-button-bg-hover, color-mix(in srgb, var(--_button-bg) 88%, black));--_button-bg-active: var(--ds-button-bg-active, color-mix(in srgb, var(--_button-bg) 76%, black));--_button-fg: var(--ds-button-fg, var(--primary-on));--_button-border: var(--ds-button-border, transparent);--_button-focus-shadow: var(--ds-button-focus-shadow, var(--focus-ring));--_button-pressed-shadow: var(--ds-button-pressed-shadow, 0 0 0 3px color-mix(in srgb, var(--_button-bg-active) 35%, transparent));--_button-radius: var(--ds-button-radius, var(--radius-md));--_button-bg-disabled: var(--ds-button-bg-disabled, var(--surface-disabled));--_button-fg-disabled: var(--ds-button-fg-disabled, var(--text-disabled));display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:var(--font-weight-extrabold) var(--font-size-m)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);color:var(--_button-fg);background:var(--_button-bg);border:var(--border-width-default) solid var(--_button-border);border-radius:var(--_button-radius);padding:0 var(--space-5);height:var(--hit-cozy);width:100%;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.button:hover{background:var(--_button-bg-hover)}.button:active{background:var(--_button-bg-active);box-shadow:var(--_button-pressed-shadow)}.button:focus-visible{outline:none;box-shadow:var(--_button-focus-shadow);z-index:var(--btn-focus-z)}.button[disabled]{background:var(--_button-bg-disabled);color:var(--_button-fg-disabled);border-color:transparent;cursor:not-allowed;pointer-events:none}.button .icon{width:var(--icon-md);height:var(--icon-md);flex-shrink:0}.button .button-main{display:contents}.button .subtext-slot:empty{display:none}.button .subtext-slot{font:var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-tight) var(--font-sans);letter-spacing:normal;text-align:center}.button:has(.subtext-slot:not(:empty)){flex-direction:column;gap:var(--space-1);height:auto;min-height:var(--hit-cozy);padding-block:var(--space-2);white-space:normal}.button:has(.subtext-slot:not(:empty)) .button-main{display:inline-flex;align-items:center;gap:var(--space-2)}.button:has(.subtext-slot:not(:empty)).l,.button:has(.subtext-slot:not(:empty)).lg{height:auto;min-height:var(--field-h-lg)}.button.l{font-size:var(--font-size-m);height:var(--hit-cozy);padding:0 var(--space-5)}.button.m{font-size:var(--font-size-s);height:var(--hit-min);padding:0 var(--space-4)}.button.m .icon{width:var(--icon-sm);height:var(--icon-sm)}.button.s{font-size:var(--font-size-xs);height:var(--hit-xs);padding:0 var(--space-3)}.button.s .icon{width:var(--icon-xs);height:var(--icon-xs)}.button.lg{font-size:var(--font-size-m);height:var(--field-h-lg);padding:0 var(--space-5)}.button.md{font-size:var(--font-size-m);height:var(--hit-cozy);padding:0 var(--space-5)}.button.sm{font-size:var(--font-size-s);height:var(--hit-min);padding:0 var(--space-4)}.button.sm .icon{width:var(--icon-sm);height:var(--icon-sm)}.button.secondary{--_button-bg: var(--ds-button-bg, var(--primary-muted));--_button-fg: var(--ds-button-fg, var(--primary-strong));--_button-bg-hover: var(--ds-button-bg-hover, var(--primary-muted-strong));--_button-bg-active: var(--ds-button-bg-active, var(--primary-muted-strong))}.button.tertiary{--_button-bg: var(--ds-button-bg, transparent);--_button-fg: var(--ds-button-fg, var(--primary-strong));--_button-bg-hover: var(--ds-button-bg-hover, var(--primary-subtle));--_button-bg-active: var(--ds-button-bg-active, var(--primary-muted))}.button.outline{--_button-bg: var(--ds-button-bg, var(--surface-default));--_button-fg: var(--ds-button-fg, var(--text-primary));--_button-border: var(--ds-button-border, var(--border-default));--_button-bg-hover: var(--ds-button-bg-hover, var(--surface-secondary));--_button-bg-active: var(--ds-button-bg-active, var(--surface-secondary))}.button.error{--_button-bg: var(--ds-button-bg, var(--error));--_button-focus-shadow: var(--ds-button-focus-shadow, var(--focus-ring-error))}.button.success{--_button-bg: var(--ds-button-bg, var(--success));--_button-fg: var(--ds-button-fg, var(--text-on-success))}.button.warning{--_button-bg: var(--ds-button-bg, var(--warning));--_button-fg: var(--ds-button-fg, var(--text-on-warning))}.button.text{--_button-bg: var(--ds-button-bg, transparent);--_button-fg: var(--ds-button-fg, var(--text-link));--_button-bg-hover: var(--ds-button-bg-hover, transparent);--_button-bg-active: var(--ds-button-bg-active, transparent);padding:0;height:auto;width:auto;text-decoration:underline;text-underline-offset:var(--btn-link-uloff)}.button.text:hover{color:var(--primary-pressed)}.button.loading{color:transparent!important;pointer-events:none;background:var(--_button-bg);border-color:var(--_button-border)}.button.loading:after{content:\"\";position:absolute;width:var(--spinner-md);height:var(--spinner-md);border:var(--border-width-strong) solid var(--_button-fg);border-right-color:transparent;border-radius:var(--radius-pill);animation:spin var(--duration-loop-fast) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.button-group{display:inline-flex}.button-group .button{border-radius:var(--radius-flat)}.button-group .button:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.button-group .button:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.button-group .button+.button{margin-left:var(--btn-group-overlap)}.button-group .button:focus-visible{z-index:var(--btn-group-focus-z)}.button-split{display:inline-flex}.button-split>.button:first-child{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:var(--space-4)}.button-split>.button:last-child{border-top-left-radius:var(--radius-flat);border-bottom-left-radius:var(--radius-flat);border-left:var(--border-width-default) solid var(--btn-split-divider);padding:0 var(--space-3);width:auto}.button-toggle{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--hit-min);padding:0 var(--space-3);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);color:var(--text-secondary);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);cursor:pointer}.button-toggle:hover{background:var(--surface-secondary);color:var(--text-primary)}.button-toggle[aria-pressed=true]{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary-strong)}.button-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-button', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { '[class.full-width]': 'fullWidth()' }, template: "<button\r\n  [class]=\"classes()\"\r\n  [type]=\"type()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-busy]=\"loading() ? 'true' : null\"\r\n  [disabled]=\"disabled() || loading()\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <span class=\"button-main\"\r\n    >@if (icon(); as name) { <ds-icon [name]=\"name\" /> }<ng-content></ng-content\r\n    >@if (trailingIcon(); as name) { <ds-icon [name]=\"name\" /> }</span\r\n  ><span class=\"subtext-slot\"><ng-content select=\"[dsButtonSubtext]\"></ng-content></span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;width:fit-content}:host(.full-width){display:block;width:100%}.button{--_button-bg: var(--ds-button-bg, var(--primary));--_button-bg-hover: var(--ds-button-bg-hover, color-mix(in srgb, var(--_button-bg) 88%, black));--_button-bg-active: var(--ds-button-bg-active, color-mix(in srgb, var(--_button-bg) 76%, black));--_button-fg: var(--ds-button-fg, var(--primary-on));--_button-border: var(--ds-button-border, transparent);--_button-focus-shadow: var(--ds-button-focus-shadow, var(--focus-ring));--_button-pressed-shadow: var(--ds-button-pressed-shadow, 0 0 0 3px color-mix(in srgb, var(--_button-bg-active) 35%, transparent));--_button-radius: var(--ds-button-radius, var(--radius-md));--_button-bg-disabled: var(--ds-button-bg-disabled, var(--surface-disabled));--_button-fg-disabled: var(--ds-button-fg-disabled, var(--text-disabled));display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font:var(--font-weight-extrabold) var(--font-size-m)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);color:var(--_button-fg);background:var(--_button-bg);border:var(--border-width-default) solid var(--_button-border);border-radius:var(--_button-radius);padding:0 var(--space-5);height:var(--hit-cozy);width:100%;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.button:hover{background:var(--_button-bg-hover)}.button:active{background:var(--_button-bg-active);box-shadow:var(--_button-pressed-shadow)}.button:focus-visible{outline:none;box-shadow:var(--_button-focus-shadow);z-index:var(--btn-focus-z)}.button[disabled]{background:var(--_button-bg-disabled);color:var(--_button-fg-disabled);border-color:transparent;cursor:not-allowed;pointer-events:none}.button .icon{width:var(--icon-md);height:var(--icon-md);flex-shrink:0}.button .button-main{display:contents}.button .subtext-slot:empty{display:none}.button .subtext-slot{font:var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-tight) var(--font-sans);letter-spacing:normal;text-align:center}.button:has(.subtext-slot:not(:empty)){flex-direction:column;gap:var(--space-1);height:auto;min-height:var(--hit-cozy);padding-block:var(--space-2);white-space:normal}.button:has(.subtext-slot:not(:empty)) .button-main{display:inline-flex;align-items:center;gap:var(--space-2)}.button:has(.subtext-slot:not(:empty)).l,.button:has(.subtext-slot:not(:empty)).lg{height:auto;min-height:var(--field-h-lg)}.button.l{font-size:var(--font-size-m);height:var(--hit-cozy);padding:0 var(--space-5)}.button.m{font-size:var(--font-size-s);height:var(--hit-min);padding:0 var(--space-4)}.button.m .icon{width:var(--icon-sm);height:var(--icon-sm)}.button.s{font-size:var(--font-size-xs);height:var(--hit-xs);padding:0 var(--space-3)}.button.s .icon{width:var(--icon-xs);height:var(--icon-xs)}.button.lg{font-size:var(--font-size-m);height:var(--field-h-lg);padding:0 var(--space-5)}.button.md{font-size:var(--font-size-m);height:var(--hit-cozy);padding:0 var(--space-5)}.button.sm{font-size:var(--font-size-s);height:var(--hit-min);padding:0 var(--space-4)}.button.sm .icon{width:var(--icon-sm);height:var(--icon-sm)}.button.secondary{--_button-bg: var(--ds-button-bg, var(--primary-muted));--_button-fg: var(--ds-button-fg, var(--primary-strong));--_button-bg-hover: var(--ds-button-bg-hover, var(--primary-muted-strong));--_button-bg-active: var(--ds-button-bg-active, var(--primary-muted-strong))}.button.tertiary{--_button-bg: var(--ds-button-bg, transparent);--_button-fg: var(--ds-button-fg, var(--primary-strong));--_button-bg-hover: var(--ds-button-bg-hover, var(--primary-subtle));--_button-bg-active: var(--ds-button-bg-active, var(--primary-muted))}.button.outline{--_button-bg: var(--ds-button-bg, var(--surface-default));--_button-fg: var(--ds-button-fg, var(--text-primary));--_button-border: var(--ds-button-border, var(--border-default));--_button-bg-hover: var(--ds-button-bg-hover, var(--surface-secondary));--_button-bg-active: var(--ds-button-bg-active, var(--surface-secondary))}.button.error{--_button-bg: var(--ds-button-bg, var(--error));--_button-focus-shadow: var(--ds-button-focus-shadow, var(--focus-ring-error))}.button.success{--_button-bg: var(--ds-button-bg, var(--success));--_button-fg: var(--ds-button-fg, var(--text-on-success))}.button.warning{--_button-bg: var(--ds-button-bg, var(--warning));--_button-fg: var(--ds-button-fg, var(--text-on-warning))}.button.text{--_button-bg: var(--ds-button-bg, transparent);--_button-fg: var(--ds-button-fg, var(--text-link));--_button-bg-hover: var(--ds-button-bg-hover, transparent);--_button-bg-active: var(--ds-button-bg-active, transparent);padding:0;height:auto;width:auto;text-decoration:underline;text-underline-offset:var(--btn-link-uloff)}.button.text:hover{color:var(--primary-pressed)}.button.loading{color:transparent!important;pointer-events:none;background:var(--_button-bg);border-color:var(--_button-border)}.button.loading:after{content:\"\";position:absolute;width:var(--spinner-md);height:var(--spinner-md);border:var(--border-width-strong) solid var(--_button-fg);border-right-color:transparent;border-radius:var(--radius-pill);animation:spin var(--duration-loop-fast) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.button-group{display:inline-flex}.button-group .button{border-radius:var(--radius-flat)}.button-group .button:first-child{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.button-group .button:last-child{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.button-group .button+.button{margin-left:var(--btn-group-overlap)}.button-group .button:focus-visible{z-index:var(--btn-group-focus-z)}.button-split{display:inline-flex}.button-split>.button:first-child{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:var(--space-4)}.button-split>.button:last-child{border-top-left-radius:var(--radius-flat);border-bottom-left-radius:var(--radius-flat);border-left:var(--border-width-default) solid var(--btn-split-divider);padding:0 var(--space-3);width:auto}.button-toggle{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--hit-min);padding:0 var(--space-3);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default);color:var(--text-secondary);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);cursor:pointer}.button-toggle:hover{background:var(--surface-secondary);color:var(--text-primary)}.button-toggle[aria-pressed=true]{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary-strong)}.button-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });
+
+/**
+ * Icon-only action button with its own variant taxonomy (standard / filled /
+ * tonal / outlined) + an optional toggle (`selected`) state. Distinct from
+ * `ds-button` — use this for square/round icon affordances; use `ds-button`
+ * for labelled actions. `ariaLabel` is REQUIRED (icon-only has no text label).
+ */
+class IconButtonComponent {
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    variant = input('standard', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Toggle state — renders the pressed/active look and sets aria-pressed. */
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    pressed = output();
+    classes = computed(() => {
+        const parts = ['icon-button', this.variant(), this.size()];
+        if (this.selected())
+            parts.push('selected');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    iconSize = computed(() => {
+        const size = this.size();
+        if (size === 'sm')
+            return 16;
+        if (size === 'lg')
+            return 24;
+        return 20;
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.disabled())
+            return;
+        this.pressed.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: IconButtonComponent, isStandalone: true, selector: "ds-icon-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\r\n  [class]=\"classes()\"\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-pressed]=\"selected() ? true : null\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <ds-icon [name]=\"icon()\" [size]=\"iconSize()\" />\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.icon-button{--_icon-button-bg: var(--ds-icon-button-bg, transparent);--_icon-button-fg: var(--ds-icon-button-fg, var(--text-secondary));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--surface-muted));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--_icon-button-bg-hover));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--text-primary));--_icon-button-focus-shadow: var(--ds-icon-button-focus-shadow, var(--focus-ring));--_icon-button-radius: var(--ds-icon-button-radius, var(--radius-md));display:inline-flex;align-items:center;justify-content:center;width:var(--hit-cozy);height:var(--hit-cozy);aspect-ratio:1;padding:0;border:var(--border-width-default) solid var(--_icon-button-border);border-radius:var(--_icon-button-radius);background:var(--_icon-button-bg);color:var(--_icon-button-fg);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.icon-button:hover{background:var(--_icon-button-bg-hover);color:var(--_icon-button-fg-hover)}.icon-button:active{background:var(--_icon-button-bg-active)}.icon-button:focus-visible{outline:none;box-shadow:var(--_icon-button-focus-shadow)}.icon-button[disabled]{color:var(--text-disabled);background:transparent;border-color:transparent;cursor:not-allowed;pointer-events:none}.icon-button.sm{width:var(--hit-min);height:var(--hit-min)}.icon-button.md{width:var(--hit-cozy);height:var(--hit-cozy)}.icon-button.lg{width:var(--field-h-lg);height:var(--field-h-lg)}.icon-button.filled{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-on));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, color-mix(in srgb, var(--_icon-button-bg) 88%, black));--_icon-button-bg-active: var(--ds-icon-button-bg-active, color-mix(in srgb, var(--_icon-button-bg) 76%, black));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--_icon-button-fg))}.icon-button.tonal{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary-muted));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-strong));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--primary-subtle));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--primary-muted-strong));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--primary-strong))}.icon-button.outlined{--_icon-button-bg: var(--ds-icon-button-bg, var(--surface-default));--_icon-button-fg: var(--ds-icon-button-fg, var(--text-primary));--_icon-button-border: var(--ds-icon-button-border, var(--border-default));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--surface-secondary));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--surface-muted));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--text-primary))}.icon-button.selected{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-on));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, color-mix(in srgb, var(--_icon-button-bg) 88%, black));--_icon-button-bg-active: var(--ds-icon-button-bg-active, color-mix(in srgb, var(--_icon-button-bg) 76%, black));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--_icon-button-fg))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-icon-button', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<button\r\n  [class]=\"classes()\"\r\n  [type]=\"type()\"\r\n  [disabled]=\"disabled()\"\r\n  [attr.aria-label]=\"ariaLabel()\"\r\n  [attr.aria-pressed]=\"selected() ? true : null\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  <ds-icon [name]=\"icon()\" [size]=\"iconSize()\" />\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.icon-button{--_icon-button-bg: var(--ds-icon-button-bg, transparent);--_icon-button-fg: var(--ds-icon-button-fg, var(--text-secondary));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--surface-muted));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--_icon-button-bg-hover));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--text-primary));--_icon-button-focus-shadow: var(--ds-icon-button-focus-shadow, var(--focus-ring));--_icon-button-radius: var(--ds-icon-button-radius, var(--radius-md));display:inline-flex;align-items:center;justify-content:center;width:var(--hit-cozy);height:var(--hit-cozy);aspect-ratio:1;padding:0;border:var(--border-width-default) solid var(--_icon-button-border);border-radius:var(--_icon-button-radius);background:var(--_icon-button-bg);color:var(--_icon-button-fg);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.icon-button:hover{background:var(--_icon-button-bg-hover);color:var(--_icon-button-fg-hover)}.icon-button:active{background:var(--_icon-button-bg-active)}.icon-button:focus-visible{outline:none;box-shadow:var(--_icon-button-focus-shadow)}.icon-button[disabled]{color:var(--text-disabled);background:transparent;border-color:transparent;cursor:not-allowed;pointer-events:none}.icon-button.sm{width:var(--hit-min);height:var(--hit-min)}.icon-button.md{width:var(--hit-cozy);height:var(--hit-cozy)}.icon-button.lg{width:var(--field-h-lg);height:var(--field-h-lg)}.icon-button.filled{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-on));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, color-mix(in srgb, var(--_icon-button-bg) 88%, black));--_icon-button-bg-active: var(--ds-icon-button-bg-active, color-mix(in srgb, var(--_icon-button-bg) 76%, black));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--_icon-button-fg))}.icon-button.tonal{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary-muted));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-strong));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--primary-subtle));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--primary-muted-strong));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--primary-strong))}.icon-button.outlined{--_icon-button-bg: var(--ds-icon-button-bg, var(--surface-default));--_icon-button-fg: var(--ds-icon-button-fg, var(--text-primary));--_icon-button-border: var(--ds-icon-button-border, var(--border-default));--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, var(--surface-secondary));--_icon-button-bg-active: var(--ds-icon-button-bg-active, var(--surface-muted));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--text-primary))}.icon-button.selected{--_icon-button-bg: var(--ds-icon-button-bg, var(--primary));--_icon-button-fg: var(--ds-icon-button-fg, var(--primary-on));--_icon-button-border: var(--ds-icon-button-border, transparent);--_icon-button-bg-hover: var(--ds-icon-button-bg-hover, color-mix(in srgb, var(--_icon-button-bg) 88%, black));--_icon-button-bg-active: var(--ds-icon-button-bg-active, color-mix(in srgb, var(--_icon-button-bg) 76%, black));--_icon-button-fg-hover: var(--ds-icon-button-fg-hover, var(--_icon-button-fg))}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });
+
+class BadgeComponent {
+    variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    withDot = input(false, ...(ngDevMode ? [{ debugName: "withDot" }] : /* istanbul ignore next */ []));
+    solid = input(false, ...(ngDevMode ? [{ debugName: "solid" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = [
+            'badge',
+            this.variant(),
+            this.solid() ? 'solid' : '',
+        ];
+        return parts.filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BadgeComponent, isStandalone: true, selector: "ds-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, withDot: { classPropertyName: "withDot", publicName: "withDot", isSignal: true, isRequired: false, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"classes()\">\n  @if (withDot()) {\n    <span class=\"dot\"></span>\n  }\n  <ng-content></ng-content>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.badge{--_badge-bg: var(--ds-badge-bg, var(--surface-secondary));--_badge-fg: var(--ds-badge-fg, var(--text-secondary));--_badge-radius: var(--ds-badge-radius, var(--radius-pill));--_badge-pad-x: var(--ds-badge-pad-x, var(--badge-pad-x));--_badge-pad-y: var(--ds-badge-pad-y, var(--badge-pad-y));--_badge-font-weight: var(--ds-badge-font-weight, var(--font-weight-bold));display:inline-flex;align-items:center;gap:var(--badge-gap);padding:var(--_badge-pad-y) var(--_badge-pad-x);border-radius:var(--_badge-radius);font:var(--_badge-font-weight) var(--font-size-xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;background:var(--_badge-bg);color:var(--_badge-fg)}.badge .dot{width:var(--badge-dot-size);height:var(--badge-dot-size);border-radius:var(--radius-pill);background:currentColor}.badge.planning{--_badge-bg: var(--ds-badge-bg, var(--status-planning-bg));--_badge-fg: var(--ds-badge-fg, var(--status-planning-fg))}.badge.confirmed{--_badge-bg: var(--ds-badge-bg, var(--status-confirmed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-confirmed-fg))}.badge.active{--_badge-bg: var(--ds-badge-bg, var(--status-active-bg));--_badge-fg: var(--ds-badge-fg, var(--status-active-fg))}.badge.completed{--_badge-bg: var(--ds-badge-bg, var(--status-completed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-completed-fg))}.badge.info{--_badge-bg: var(--ds-badge-bg, var(--info-subtle));--_badge-fg: var(--ds-badge-fg, var(--info-text))}.badge.success{--_badge-bg: var(--ds-badge-bg, var(--success-subtle));--_badge-fg: var(--ds-badge-fg, var(--success-text))}.badge.warning{--_badge-bg: var(--ds-badge-bg, var(--warning-subtle));--_badge-fg: var(--ds-badge-fg, var(--warning-text))}.badge.error{--_badge-bg: var(--ds-badge-bg, var(--error-subtle));--_badge-fg: var(--ds-badge-fg, var(--error-text))}.badge.neutral{--_badge-bg: var(--ds-badge-bg, var(--surface-secondary));--_badge-fg: var(--ds-badge-fg, var(--text-secondary))}.badge.secondary{--_badge-bg: var(--ds-badge-bg, var(--secondary-subtle));--_badge-fg: var(--ds-badge-fg, var(--secondary-strong))}.badge.solid{--_badge-bg: var(--ds-badge-bg, var(--primary));--_badge-fg: var(--ds-badge-fg, var(--primary-on))}.badge.count{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;font-size:var(--font-size-2xs)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-badge', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<span [class]=\"classes()\">\n  @if (withDot()) {\n    <span class=\"dot\"></span>\n  }\n  <ng-content></ng-content>\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.badge{--_badge-bg: var(--ds-badge-bg, var(--surface-secondary));--_badge-fg: var(--ds-badge-fg, var(--text-secondary));--_badge-radius: var(--ds-badge-radius, var(--radius-pill));--_badge-pad-x: var(--ds-badge-pad-x, var(--badge-pad-x));--_badge-pad-y: var(--ds-badge-pad-y, var(--badge-pad-y));--_badge-font-weight: var(--ds-badge-font-weight, var(--font-weight-bold));display:inline-flex;align-items:center;gap:var(--badge-gap);padding:var(--_badge-pad-y) var(--_badge-pad-x);border-radius:var(--_badge-radius);font:var(--_badge-font-weight) var(--font-size-xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;background:var(--_badge-bg);color:var(--_badge-fg)}.badge .dot{width:var(--badge-dot-size);height:var(--badge-dot-size);border-radius:var(--radius-pill);background:currentColor}.badge.planning{--_badge-bg: var(--ds-badge-bg, var(--status-planning-bg));--_badge-fg: var(--ds-badge-fg, var(--status-planning-fg))}.badge.confirmed{--_badge-bg: var(--ds-badge-bg, var(--status-confirmed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-confirmed-fg))}.badge.active{--_badge-bg: var(--ds-badge-bg, var(--status-active-bg));--_badge-fg: var(--ds-badge-fg, var(--status-active-fg))}.badge.completed{--_badge-bg: var(--ds-badge-bg, var(--status-completed-bg));--_badge-fg: var(--ds-badge-fg, var(--status-completed-fg))}.badge.info{--_badge-bg: var(--ds-badge-bg, var(--info-subtle));--_badge-fg: var(--ds-badge-fg, var(--info-text))}.badge.success{--_badge-bg: var(--ds-badge-bg, var(--success-subtle));--_badge-fg: var(--ds-badge-fg, var(--success-text))}.badge.warning{--_badge-bg: var(--ds-badge-bg, var(--warning-subtle));--_badge-fg: var(--ds-badge-fg, var(--warning-text))}.badge.error{--_badge-bg: var(--ds-badge-bg, var(--error-subtle));--_badge-fg: var(--ds-badge-fg, var(--error-text))}.badge.neutral{--_badge-bg: var(--ds-badge-bg, var(--surface-secondary));--_badge-fg: var(--ds-badge-fg, var(--text-secondary))}.badge.secondary{--_badge-bg: var(--ds-badge-bg, var(--secondary-subtle));--_badge-fg: var(--ds-badge-fg, var(--secondary-strong))}.badge.solid{--_badge-bg: var(--ds-badge-bg, var(--primary));--_badge-fg: var(--ds-badge-fg, var(--primary-on))}.badge.count{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;font-size:var(--font-size-2xs)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], withDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "withDot", required: false }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
+
+class StatusDotComponent {
+    status = input('planning', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Override the colour-only status with a human label for assistive tech. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `status-dot ${this.status()}`, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatusDotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: StatusDotComponent, isStandalone: true, selector: "ds-status-dot", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel() || status()" } }, ngImport: i0, template: `<span [class]="classes()" aria-hidden="true"></span>`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;height:1em}.status-dot{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted));--_statusdot-size: var(--ds-statusdot-size, var(--status-dot-size));display:block;width:var(--_statusdot-size);height:var(--_statusdot-size);border-radius:var(--radius-pill);flex-shrink:0;background:var(--_statusdot-color)}.status-dot.planning{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted))}.status-dot.confirmed{--_statusdot-color: var(--ds-statusdot-color, var(--primary))}.status-dot.active{--_statusdot-color: var(--ds-statusdot-color, var(--success))}.status-dot.completed{--_statusdot-color: var(--ds-statusdot-color, var(--icon-strong))}.status-dot.warning{--_statusdot-color: var(--ds-statusdot-color, var(--warning-hover))}.status-dot.error{--_statusdot-color: var(--ds-statusdot-color, var(--error))}.status-dot.secondary{--_statusdot-color: var(--ds-statusdot-color, var(--secondary))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatusDotComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-status-dot', standalone: true, template: `<span [class]="classes()" aria-hidden="true"></span>`, encapsulation: ViewEncapsulation.Emulated, host: {
+                        role: 'img',
+                        '[attr.aria-label]': 'ariaLabel() || status()',
+                    }, styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;height:1em}.status-dot{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted));--_statusdot-size: var(--ds-statusdot-size, var(--status-dot-size));display:block;width:var(--_statusdot-size);height:var(--_statusdot-size);border-radius:var(--radius-pill);flex-shrink:0;background:var(--_statusdot-color)}.status-dot.planning{--_statusdot-color: var(--ds-statusdot-color, var(--icon-muted))}.status-dot.confirmed{--_statusdot-color: var(--ds-statusdot-color, var(--primary))}.status-dot.active{--_statusdot-color: var(--ds-statusdot-color, var(--success))}.status-dot.completed{--_statusdot-color: var(--ds-statusdot-color, var(--icon-strong))}.status-dot.warning{--_statusdot-color: var(--ds-statusdot-color, var(--warning-hover))}.status-dot.error{--_statusdot-color: var(--ds-statusdot-color, var(--error))}.status-dot.secondary{--_statusdot-color: var(--ds-statusdot-color, var(--secondary))}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class AvatarComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    initials = input('', ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    imageUrl = input(null, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+    /** Accessible name. When omitted, the avatar is treated as decorative
+     *  (hidden from AT) — correct when a visible name sits beside it. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Off-token color tint. Accepts a `{ bg, fg }` pair for arbitrary palettes,
+     *  the literal `'neutral'` for the neutral overflow-chip treatment, or null
+     *  for the default brand-subtle tones from avatar.scss. */
+    tint = input(null, ...(ngDevMode ? [{ debugName: "tint" }] : /* istanbul ignore next */ []));
+    tintStyle = computed(() => {
+        const value = this.tint();
+        if (value && value !== 'neutral')
+            return { bg: value.bg, fg: value.fg };
+        return { bg: null, fg: null };
+    }, ...(ngDevMode ? [{ debugName: "tintStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AvatarComponent, isStandalone: true, selector: "ds-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, tint: { classPropertyName: "tint", publicName: "tint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.xs": "size() === 'xs'", "class.sm": "size() === 'sm'", "class.lg": "size() === 'lg'", "class.neutral": "tint() === 'neutral'", "style.--ds-avatar-bg": "tintStyle().bg", "style.--ds-avatar-fg": "tintStyle().fg", "attr.role": "ariaLabel() ? 'img' : null", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "ariaLabel() ? null : true" } }, ngImport: i0, template: "@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" alt=\"\" />\n} @else {\n  {{ initials() }}\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatar-size: var(--ds-avatar-size, var(--avatar-md));--_avatar-bg: var(--ds-avatar-bg, var(--primary-muted));--_avatar-fg: var(--ds-avatar-fg, var(--primary-strong));--_avatar-radius: var(--ds-avatar-radius, var(--radius-pill));--_avatar-ring-width: var(--ds-avatar-ring-width, var(--avatar-bw-group));display:inline-grid;place-items:center;width:var(--_avatar-size);height:var(--_avatar-size);border-radius:var(--_avatar-radius);background:var(--_avatar-bg);color:var(--_avatar-fg);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);flex-shrink:0;overflow:hidden}img{width:100%;height:100%;object-fit:cover}:host(.xs){width:var(--avatar-xs);height:var(--avatar-xs);font-size:var(--font-size-4xs)}:host(.sm){width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--font-size-3xs)}:host(.lg){width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--font-size-s)}:host(.neutral){--_avatar-bg: var(--ds-avatar-bg, var(--surface-secondary));--_avatar-fg: var(--ds-avatar-fg, var(--text-secondary))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-avatar', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[class.xs]': "size() === 'xs'",
+                        '[class.sm]': "size() === 'sm'",
+                        '[class.lg]': "size() === 'lg'",
+                        '[class.neutral]': "tint() === 'neutral'",
+                        '[style.--ds-avatar-bg]': 'tintStyle().bg',
+                        '[style.--ds-avatar-fg]': 'tintStyle().fg',
+                        '[attr.role]': "ariaLabel() ? 'img' : null",
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-hidden]': 'ariaLabel() ? null : true',
+                    }, template: "@if (imageUrl()) {\n  <img [src]=\"imageUrl()\" alt=\"\" />\n} @else {\n  {{ initials() }}\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatar-size: var(--ds-avatar-size, var(--avatar-md));--_avatar-bg: var(--ds-avatar-bg, var(--primary-muted));--_avatar-fg: var(--ds-avatar-fg, var(--primary-strong));--_avatar-radius: var(--ds-avatar-radius, var(--radius-pill));--_avatar-ring-width: var(--ds-avatar-ring-width, var(--avatar-bw-group));display:inline-grid;place-items:center;width:var(--_avatar-size);height:var(--_avatar-size);border-radius:var(--_avatar-radius);background:var(--_avatar-bg);color:var(--_avatar-fg);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);flex-shrink:0;overflow:hidden}img{width:100%;height:100%;object-fit:cover}:host(.xs){width:var(--avatar-xs);height:var(--avatar-xs);font-size:var(--font-size-4xs)}:host(.sm){width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--font-size-3xs)}:host(.lg){width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--font-size-s)}:host(.neutral){--_avatar-bg: var(--ds-avatar-bg, var(--surface-secondary));--_avatar-fg: var(--ds-avatar-fg, var(--text-secondary))}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tint: [{ type: i0.Input, args: [{ isSignal: true, alias: "tint", required: false }] }] } });
+
+class AvatarGroupComponent {
+    max = input(4, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    total = input(null, ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    overflow = computed(() => {
+        const total = this.total();
+        const max = this.max();
+        if (total === null)
+            return null;
+        return total > max ? total - max : null;
+    }, ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AvatarGroupComponent, isStandalone: true, selector: "ds-avatar-group", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (overflow() !== null) {\n  <span class=\"avatar-overflow\">+{{ overflow() }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatargroup-overlap: var(--ds-avatargroup-overlap, calc(-1 * var(--space-2)));--_avatargroup-ring: var(--ds-avatargroup-ring, var(--surface-default));display:inline-flex}:host ::ng-deep ds-avatar{border:var(--avatar-bw-group) solid var(--_avatargroup-ring);margin-left:var(--_avatargroup-overlap)}:host ::ng-deep ds-avatar:first-child{margin-left:0}.avatar-overflow{display:inline-grid;place-items:center;width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-pill);background:var(--primary-muted);color:var(--primary-strong);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);flex-shrink:0;border:var(--avatar-bw-group) solid var(--_avatargroup-ring);margin-left:var(--_avatargroup-overlap)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AvatarGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-avatar-group', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<ng-content></ng-content>\n@if (overflow() !== null) {\n  <span class=\"avatar-overflow\">+{{ overflow() }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avatargroup-overlap: var(--ds-avatargroup-overlap, calc(-1 * var(--space-2)));--_avatargroup-ring: var(--ds-avatargroup-ring, var(--surface-default));display:inline-flex}:host ::ng-deep ds-avatar{border:var(--avatar-bw-group) solid var(--_avatargroup-ring);margin-left:var(--_avatargroup-overlap)}:host ::ng-deep ds-avatar:first-child{margin-left:0}.avatar-overflow{display:inline-grid;place-items:center;width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-pill);background:var(--primary-muted);color:var(--primary-strong);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);flex-shrink:0;border:var(--avatar-bw-group) solid var(--_avatargroup-ring);margin-left:var(--_avatargroup-overlap)}\n"] }]
+        }], propDecorators: { max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }] } });
+
+class CardComponent {
+    elevation = input('flat', ...(ngDevMode ? [{ debugName: "elevation" }] : /* istanbul ignore next */ []));
+    padding = input(null, ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    pressed = output();
+    classes = computed(() => {
+        const pad = this.padding();
+        return `card ${this.elevation()}${pad ? ' padding-' + pad : ''}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        if (this.elevation() === 'interactive') {
+            this.pressed.emit(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CardComponent, isStandalone: true, selector: "ds-card", inputs: { elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<article [class]=\"classes()\" (click)=\"onClick($event)\">\n  <ng-content></ng-content>\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block;--_card-bg: var(--ds-card-bg, var(--surface-default));--_card-border: var(--ds-card-border, var(--border-divider));--_card-radius: var(--ds-card-radius, var(--radius-lg));--_card-pad: var(--ds-card-pad, var(--ds-container-pad));--_card-shadow: var(--ds-card-shadow, none);--_card-shadow-hover: var(--ds-card-shadow-hover, var(--shadow-1));--_card-focus-shadow: var(--ds-card-focus-shadow, var(--focus-ring));--_card-hover-lift: var(--ds-card-hover-lift, var(--card-hover-lift))}.card{background:var(--_card-bg);border:var(--border-width-default) solid var(--_card-border);border-radius:var(--_card-radius);padding:var(--_card-pad);box-shadow:var(--_card-shadow);transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}.card.flat{box-shadow:none}.card.raised{box-shadow:var(--_card-shadow-hover);border-color:transparent}.card.hover:hover{box-shadow:var(--_card-shadow-hover);transform:translateY(calc(var(--_card-hover-lift) * -1))}.card.interactive{cursor:pointer}.card.interactive:focus-visible{outline:none;box-shadow:var(--_card-focus-shadow)}.card.padding-none{--_card-pad: var(--ds-card-pad, 0)}.card.padding-sm{--_card-pad: var(--ds-card-pad, var(--space-4))}.card.padding-md{--_card-pad: var(--ds-card-pad, var(--space-6))}.card.padding-lg{--_card-pad: var(--ds-card-pad, var(--space-8))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-card', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<article [class]=\"classes()\" (click)=\"onClick($event)\">\n  <ng-content></ng-content>\n</article>\n", styles: ["@charset \"UTF-8\";:host{display:block;--_card-bg: var(--ds-card-bg, var(--surface-default));--_card-border: var(--ds-card-border, var(--border-divider));--_card-radius: var(--ds-card-radius, var(--radius-lg));--_card-pad: var(--ds-card-pad, var(--ds-container-pad));--_card-shadow: var(--ds-card-shadow, none);--_card-shadow-hover: var(--ds-card-shadow-hover, var(--shadow-1));--_card-focus-shadow: var(--ds-card-focus-shadow, var(--focus-ring));--_card-hover-lift: var(--ds-card-hover-lift, var(--card-hover-lift))}.card{background:var(--_card-bg);border:var(--border-width-default) solid var(--_card-border);border-radius:var(--_card-radius);padding:var(--_card-pad);box-shadow:var(--_card-shadow);transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}.card.flat{box-shadow:none}.card.raised{box-shadow:var(--_card-shadow-hover);border-color:transparent}.card.hover:hover{box-shadow:var(--_card-shadow-hover);transform:translateY(calc(var(--_card-hover-lift) * -1))}.card.interactive{cursor:pointer}.card.interactive:focus-visible{outline:none;box-shadow:var(--_card-focus-shadow)}.card.padding-none{--_card-pad: var(--ds-card-pad, 0)}.card.padding-sm{--_card-pad: var(--ds-card-pad, var(--space-4))}.card.padding-md{--_card-pad: var(--ds-card-pad, var(--space-6))}.card.padding-lg{--_card-pad: var(--ds-card-pad, var(--space-8))}\n"] }]
+        }], propDecorators: { elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });
+
+class StatComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    delta = input(null, ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
+    deltaLabel = input('', ...(ngDevMode ? [{ debugName: "deltaLabel" }] : /* istanbul ignore next */ []));
+    deltaTone = input(null, ...(ngDevMode ? [{ debugName: "deltaTone" }] : /* istanbul ignore next */ []));
+    caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    unit = input('', ...(ngDevMode ? [{ debugName: "unit" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    deltaClasses = computed(() => {
+        const delta = this.delta();
+        if (delta === null)
+            return '';
+        const tone = this.deltaTone();
+        if (tone)
+            return `delta ${tone}`;
+        if (delta > 0)
+            return 'delta up';
+        if (delta < 0)
+            return 'delta down';
+        return 'delta';
+    }, ...(ngDevMode ? [{ debugName: "deltaClasses" }] : /* istanbul ignore next */ []));
+    deltaIcon = computed(() => {
+        const delta = this.delta();
+        if (delta === null || delta === 0)
+            return null;
+        return delta > 0 ? 'arrowUp' : 'arrowDown';
+    }, ...(ngDevMode ? [{ debugName: "deltaIcon" }] : /* istanbul ignore next */ []));
+    deltaText = computed(() => {
+        const delta = this.delta();
+        if (delta === null)
+            return '';
+        const magnitude = Math.abs(delta);
+        const suffix = this.deltaLabel() ? ` ${this.deltaLabel()}` : '';
+        return `${magnitude}${suffix}`;
+    }, ...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: StatComponent, isStandalone: true, selector: "ds-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaLabel: { classPropertyName: "deltaLabel", publicName: "deltaLabel", isSignal: true, isRequired: false, transformFunction: null }, deltaTone: { classPropertyName: "deltaTone", publicName: "deltaTone", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.danger": "variant() === 'danger'", "class.size-sm": "size() === 'sm'", "class.size-lg": "size() === 'lg'" } }, ngImport: i0, template: "<div class=\"stat\">\n  <div class=\"label\">{{ label() }}</div>\n  <div class=\"value\">{{ value() }}{{ unit() }}</div>\n  @if (delta() !== null) {\n    <div [class]=\"deltaClasses()\">\n      @if (deltaIcon(); as icon) {\n        <ds-icon [name]=\"icon\" [size]=\"12\"></ds-icon>\n      }\n      <ng-content select=\"[delta]\">{{ deltaText() }}</ng-content>\n    </div>\n  } @else if (caption()) {\n    <div class=\"caption\">{{ caption() }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.danger) .value{color:var(--error-text)}:host(.size-sm) .stat .label{font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide)}:host(.size-sm) .stat .value{font-size:var(--font-size-h4)}:host(.size-lg) .stat .label{font-size:var(--font-size-s)}:host(.size-lg) .stat .value{font-size:var(--font-size-h1)}.stat{--_stat-bg: var(--ds-stat-bg, var(--surface-default));--_stat-border: var(--ds-stat-border, var(--border-divider));--_stat-radius: var(--ds-stat-radius, var(--radius-lg));--_stat-pad: var(--ds-stat-pad, var(--ds-container-pad));--_stat-label-color: var(--ds-stat-label-color, var(--text-tertiary));--_stat-value-color: var(--ds-stat-value-color, var(--text-primary));--_stat-up-color: var(--ds-stat-up-color, var(--success-text));--_stat-down-color: var(--ds-stat-down-color, var(--error-text));background:var(--_stat-bg);border:var(--border-width-default) solid var(--_stat-border);border-radius:var(--_stat-radius);padding:var(--_stat-pad)}.stat .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_stat-label-color);margin:0 0 var(--space-2)}.stat .value{font:var(--font-weight-extrabold) var(--font-size-h2)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-snug);color:var(--_stat-value-color);margin:0;white-space:nowrap}.stat .delta{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);margin-top:var(--space-2)}.stat .delta.up{color:var(--_stat-up-color)}.stat .delta.down{color:var(--_stat-down-color)}.stat .delta.neutral{color:var(--text-tertiary)}.stat .delta.secondary{color:var(--secondary-strong)}.stat .caption{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);margin-top:var(--space-2)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StatComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-stat', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[class.danger]': "variant() === 'danger'",
+                        '[class.size-sm]': "size() === 'sm'",
+                        '[class.size-lg]': "size() === 'lg'",
+                    }, template: "<div class=\"stat\">\n  <div class=\"label\">{{ label() }}</div>\n  <div class=\"value\">{{ value() }}{{ unit() }}</div>\n  @if (delta() !== null) {\n    <div [class]=\"deltaClasses()\">\n      @if (deltaIcon(); as icon) {\n        <ds-icon [name]=\"icon\" [size]=\"12\"></ds-icon>\n      }\n      <ng-content select=\"[delta]\">{{ deltaText() }}</ng-content>\n    </div>\n  } @else if (caption()) {\n    <div class=\"caption\">{{ caption() }}</div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.danger) .value{color:var(--error-text)}:host(.size-sm) .stat .label{font-size:var(--font-size-2xs);letter-spacing:var(--letter-spacing-wide)}:host(.size-sm) .stat .value{font-size:var(--font-size-h4)}:host(.size-lg) .stat .label{font-size:var(--font-size-s)}:host(.size-lg) .stat .value{font-size:var(--font-size-h1)}.stat{--_stat-bg: var(--ds-stat-bg, var(--surface-default));--_stat-border: var(--ds-stat-border, var(--border-divider));--_stat-radius: var(--ds-stat-radius, var(--radius-lg));--_stat-pad: var(--ds-stat-pad, var(--ds-container-pad));--_stat-label-color: var(--ds-stat-label-color, var(--text-tertiary));--_stat-value-color: var(--ds-stat-value-color, var(--text-primary));--_stat-up-color: var(--ds-stat-up-color, var(--success-text));--_stat-down-color: var(--ds-stat-down-color, var(--error-text));background:var(--_stat-bg);border:var(--border-width-default) solid var(--_stat-border);border-radius:var(--_stat-radius);padding:var(--_stat-pad)}.stat .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_stat-label-color);margin:0 0 var(--space-2)}.stat .value{font:var(--font-weight-extrabold) var(--font-size-h2)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-snug);color:var(--_stat-value-color);margin:0;white-space:nowrap}.stat .delta{display:inline-flex;align-items:center;gap:var(--space-1);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);margin-top:var(--space-2)}.stat .delta.up{color:var(--_stat-up-color)}.stat .delta.down{color:var(--_stat-down-color)}.stat .delta.neutral{color:var(--text-tertiary)}.stat .delta.secondary{color:var(--secondary-strong)}.stat .caption{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);margin-top:var(--space-2)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaLabel", required: false }] }], deltaTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaTone", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class TabComponent {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    content = viewChild.required('content');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: TabComponent, isStandalone: true, selector: "ds-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content></ng-content></ng-template>`, isInline: true, styles: [":host{display:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-tab', standalone: true, template: `<ng-template #content><ng-content></ng-content></ng-template>`, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+
+let nextId$a = 0;
+class TabsComponent {
+    selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    variant = input('line', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    host = inject((ElementRef));
+    uid = `ds-tabs-${++nextId$a}`;
+    tabs = contentChildren(TabComponent, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    tabId(index) {
+        return `${this.uid}-tab-${index}`;
+    }
+    panelId(index) {
+        return `${this.uid}-panel-${index}`;
+    }
+    tabsClasses = computed(() => this.variant() === 'pills' ? 'tabs pills' : 'tabs', ...(ngDevMode ? [{ debugName: "tabsClasses" }] : /* istanbul ignore next */ []));
+    selectedTemplate = computed(() => {
+        const idx = this.selectedIndex();
+        const list = this.tabs();
+        return list[idx]?.content() ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
+    tabClasses(index, disabled) {
+        const parts = ['tab'];
+        if (index === this.selectedIndex())
+            parts.push('active');
+        if (disabled)
+            parts.push('disabled');
+        return parts.join(' ');
+    }
+    select(index, disabled) {
+        if (disabled)
+            return;
+        this.selectedIndex.set(index);
+    }
+    /** Roving keyboard navigation across the tablist (APG automatic activation). */
+    onKeydown(event, index) {
+        const count = this.tabs().length;
+        if (!count)
+            return;
+        const forward = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+        const backward = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
+        let next;
+        if (forward)
+            next = (index + 1) % count;
+        else if (backward)
+            next = (index - 1 + count) % count;
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = count - 1;
+        else
+            return;
+        event.preventDefault();
+        // Skip disabled tabs in the travel direction.
+        const step = backward || event.key === 'End' ? -1 : 1;
+        let guard = 0;
+        while (this.tabs()[next]?.disabled() && guard < count) {
+            next = (next + step + count) % count;
+            guard++;
+        }
+        this.select(next, this.tabs()[next]?.disabled() ?? false);
+        setTimeout(() => {
+            const el = this.host.nativeElement.querySelector(`#${this.tabId(next)}`);
+            el?.focus();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TabsComponent, isStandalone: true, selector: "ds-tabs", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange" }, queries: [{ propertyName: "tabs", predicate: TabComponent, isSignal: true }], ngImport: i0, template: "<div [class]=\"tabsClasses()\" role=\"tablist\">\r\n  @for (tab of tabs(); track $index) {\r\n    <button\r\n      type=\"button\"\r\n      role=\"tab\"\r\n      [id]=\"tabId($index)\"\r\n      [class]=\"tabClasses($index, tab.disabled())\"\r\n      [attr.aria-selected]=\"$index === selectedIndex()\"\r\n      [attr.aria-controls]=\"panelId($index)\"\r\n      [attr.tabindex]=\"$index === selectedIndex() ? 0 : -1\"\r\n      [disabled]=\"tab.disabled()\"\r\n      (click)=\"select($index, tab.disabled())\"\r\n      (keydown)=\"onKeydown($event, $index)\"\r\n    >\r\n      @if (tab.icon()) {\r\n        <ds-icon [name]=\"tab.icon()!\" [size]=\"14\"></ds-icon>\r\n      }\r\n      <span>{{ tab.label() }}</span>\r\n      @if (tab.count() !== null) {\r\n        <span class=\"badge neutral count\">{{ tab.count() }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div>\r\n<div\r\n  class=\"panel\"\r\n  role=\"tabpanel\"\r\n  [id]=\"panelId(selectedIndex())\"\r\n  [attr.aria-labelledby]=\"tabId(selectedIndex())\"\r\n  tabindex=\"0\"\r\n>\r\n  @if (selectedTemplate(); as tpl) {\r\n    <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.tabs{--_tabs-divider: var(--ds-tabs-divider, var(--border-divider));--_tab-pad-x: var(--ds-tab-pad-x, var(--space-4));--_tab-pad-y: var(--ds-tab-pad-y, var(--space-3));--_tab-fg: var(--ds-tab-fg, var(--text-secondary));--_tab-fg-hover: var(--ds-tab-fg-hover, var(--text-primary));--_tab-fg-active: var(--ds-tab-fg-active, var(--primary));--_tab-indicator-color: var(--ds-tab-indicator-color, var(--primary));--_tab-indicator-width: var(--ds-tab-indicator-width, var(--border-width-strong));--_tabs-pills-bg: var(--ds-tabs-pills-bg, var(--surface-secondary));--_tab-pill-bg-hover: var(--ds-tab-pill-bg-hover, var(--primary-subtle));--_tab-pill-bg-active: var(--ds-tab-pill-bg-active, var(--surface-default));--_tab-pill-bg-active-hover: var(--ds-tab-pill-bg-active-hover, var(--primary-subtle));--_tab-pill-fg-active: var(--ds-tab-pill-fg-active, var(--primary-strong));--_tab-pill-radius: var(--ds-tab-pill-radius, var(--radius-md));display:flex;gap:var(--space-2);border-bottom:var(--border-width-default) solid var(--_tabs-divider)}.tabs .tab{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--_tab-pad-y) var(--_tab-pad-x);border:0;background:transparent;font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_tab-fg);cursor:pointer;border-bottom:var(--_tab-indicator-width) solid transparent;margin-bottom:calc(-1 * var(--border-width-default));transition:color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.tabs .tab:hover{color:var(--_tab-fg-hover)}.tabs .tab.active{color:var(--_tab-fg-active);border-bottom-color:var(--_tab-indicator-color)}.tabs .tab .badge{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;border-radius:var(--radius-pill);font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;background:var(--surface-secondary);color:var(--text-secondary);margin-left:var(--space-1)}.tabs .tab:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.tabs .tab[disabled],.tabs .tab.disabled{color:var(--text-disabled);cursor:not-allowed}.tabs.secondary .tab.active{--_tab-fg-active: var(--ds-tab-fg-active, var(--secondary-strong));--_tab-indicator-color: var(--ds-tab-indicator-color, var(--secondary))}.tabs.pills{border-bottom:0;gap:var(--space-1);padding:var(--space-1);background:var(--_tabs-pills-bg);border-radius:var(--_tab-pill-radius);display:inline-flex}.tabs.pills .tab{padding:var(--space-2) var(--space-3);border-bottom:0;margin-bottom:0;border-radius:var(--_tab-pill-radius);color:var(--_tab-fg)}.tabs.pills .tab:hover{background:var(--_tab-pill-bg-hover);color:var(--_tab-fg-hover)}.tabs.pills .tab.active{background:var(--_tab-pill-bg-active);color:var(--_tab-pill-fg-active);border-bottom:0;box-shadow:var(--shadow-1)}.tabs.pills .tab.active:hover{background:var(--_tab-pill-bg-active-hover)}.panel{padding-top:var(--space-3)}.panel:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-tabs', standalone: true, imports: [NgTemplateOutlet, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"tabsClasses()\" role=\"tablist\">\r\n  @for (tab of tabs(); track $index) {\r\n    <button\r\n      type=\"button\"\r\n      role=\"tab\"\r\n      [id]=\"tabId($index)\"\r\n      [class]=\"tabClasses($index, tab.disabled())\"\r\n      [attr.aria-selected]=\"$index === selectedIndex()\"\r\n      [attr.aria-controls]=\"panelId($index)\"\r\n      [attr.tabindex]=\"$index === selectedIndex() ? 0 : -1\"\r\n      [disabled]=\"tab.disabled()\"\r\n      (click)=\"select($index, tab.disabled())\"\r\n      (keydown)=\"onKeydown($event, $index)\"\r\n    >\r\n      @if (tab.icon()) {\r\n        <ds-icon [name]=\"tab.icon()!\" [size]=\"14\"></ds-icon>\r\n      }\r\n      <span>{{ tab.label() }}</span>\r\n      @if (tab.count() !== null) {\r\n        <span class=\"badge neutral count\">{{ tab.count() }}</span>\r\n      }\r\n    </button>\r\n  }\r\n</div>\r\n<div\r\n  class=\"panel\"\r\n  role=\"tabpanel\"\r\n  [id]=\"panelId(selectedIndex())\"\r\n  [attr.aria-labelledby]=\"tabId(selectedIndex())\"\r\n  tabindex=\"0\"\r\n>\r\n  @if (selectedTemplate(); as tpl) {\r\n    <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.tabs{--_tabs-divider: var(--ds-tabs-divider, var(--border-divider));--_tab-pad-x: var(--ds-tab-pad-x, var(--space-4));--_tab-pad-y: var(--ds-tab-pad-y, var(--space-3));--_tab-fg: var(--ds-tab-fg, var(--text-secondary));--_tab-fg-hover: var(--ds-tab-fg-hover, var(--text-primary));--_tab-fg-active: var(--ds-tab-fg-active, var(--primary));--_tab-indicator-color: var(--ds-tab-indicator-color, var(--primary));--_tab-indicator-width: var(--ds-tab-indicator-width, var(--border-width-strong));--_tabs-pills-bg: var(--ds-tabs-pills-bg, var(--surface-secondary));--_tab-pill-bg-hover: var(--ds-tab-pill-bg-hover, var(--primary-subtle));--_tab-pill-bg-active: var(--ds-tab-pill-bg-active, var(--surface-default));--_tab-pill-bg-active-hover: var(--ds-tab-pill-bg-active-hover, var(--primary-subtle));--_tab-pill-fg-active: var(--ds-tab-pill-fg-active, var(--primary-strong));--_tab-pill-radius: var(--ds-tab-pill-radius, var(--radius-md));display:flex;gap:var(--space-2);border-bottom:var(--border-width-default) solid var(--_tabs-divider)}.tabs .tab{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--_tab-pad-y) var(--_tab-pad-x);border:0;background:transparent;font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_tab-fg);cursor:pointer;border-bottom:var(--_tab-indicator-width) solid transparent;margin-bottom:calc(-1 * var(--border-width-default));transition:color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.tabs .tab:hover{color:var(--_tab-fg-hover)}.tabs .tab.active{color:var(--_tab-fg-active);border-bottom-color:var(--_tab-indicator-color)}.tabs .tab .badge{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;border-radius:var(--radius-pill);font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);white-space:nowrap;background:var(--surface-secondary);color:var(--text-secondary);margin-left:var(--space-1)}.tabs .tab:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.tabs .tab[disabled],.tabs .tab.disabled{color:var(--text-disabled);cursor:not-allowed}.tabs.secondary .tab.active{--_tab-fg-active: var(--ds-tab-fg-active, var(--secondary-strong));--_tab-indicator-color: var(--ds-tab-indicator-color, var(--secondary))}.tabs.pills{border-bottom:0;gap:var(--space-1);padding:var(--space-1);background:var(--_tabs-pills-bg);border-radius:var(--_tab-pill-radius);display:inline-flex}.tabs.pills .tab{padding:var(--space-2) var(--space-3);border-bottom:0;margin-bottom:0;border-radius:var(--_tab-pill-radius);color:var(--_tab-fg)}.tabs.pills .tab:hover{background:var(--_tab-pill-bg-hover);color:var(--_tab-fg-hover)}.tabs.pills .tab.active{background:var(--_tab-pill-bg-active);color:var(--_tab-pill-fg-active);border-bottom:0;box-shadow:var(--shadow-1)}.tabs.pills .tab.active:hover{background:var(--_tab-pill-bg-active-hover)}.panel{padding-top:var(--space-3)}.panel:empty{display:none}\n"] }]
+        }], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TabComponent), { isSignal: true }] }] } });
+
+/** Process-wide counter so each control gets a stable, unique id for
+ *  label/hint association (no DOM dependency, SSR-safe). */
+let nextId$9 = 0;
+class InputComponent {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    success = input(false, { ...(ngDevMode ? { debugName: "success" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    withAddon = input(false, { ...(ngDevMode ? { debugName: "withAddon" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    withAddonRight = input(false, { ...(ngDevMode ? { debugName: "withAddonRight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // Numeric constraints (applied when type="number").
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(null, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Native autocomplete token (e.g. "email", "current-password"). */
+    autocomplete = input(null, ...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
+    /** Accessible name when no visible `label` is provided (falls back to the
+     *  placeholder so the control is never unnamed). */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Mobile keyboard hints — forwarded to the native input as attributes. */
+    enterKeyHint = input(null, ...(ngDevMode ? [{ debugName: "enterKeyHint" }] : /* istanbul ignore next */ []));
+    inputMode = input(null, ...(ngDevMode ? [{ debugName: "inputMode" }] : /* istanbul ignore next */ []));
+    /** Emits when the native input loses focus. */
+    blurred = output();
+    /**
+     * Show an inline clear (×) button when the input has a non-empty value.
+     * Mirrors the Material/PrimeNG pattern: explicit button (not native search
+     * cancel) so the affordance is consistent across browsers and styled with
+     * DS tokens. Defaults to true when type='search', false otherwise — pass
+     * an explicit boolean to override.
+     */
+    clearable = input(null, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    passwordToggle = input(false, { ...(ngDevMode ? { debugName: "passwordToggle" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    passwordVisible = model(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : /* istanbul ignore next */ []));
+    canClear = computed(() => {
+        const explicit = this.clearable();
+        if (explicit !== null)
+            return explicit;
+        return this.type() === 'search';
+    }, ...(ngDevMode ? [{ debugName: "canClear" }] : /* istanbul ignore next */ []));
+    uid = `ds-input-${++nextId$9}`;
+    hintId = computed(() => (this.hint() ? `${this.uid}-hint` : null), ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    /** Only name via aria-label when there's no visible `<label for>`. */
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    showPasswordToggle = computed(() => this.passwordToggle() && this.type() === 'password' && !this.disabled(), ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : /* istanbul ignore next */ []));
+    effectiveType = computed(() => this.passwordToggle() && this.type() === 'password' && this.passwordVisible()
+        ? 'text'
+        : this.type(), ...(ngDevMode ? [{ debugName: "effectiveType" }] : /* istanbul ignore next */ []));
+    togglePassword() {
+        this.passwordVisible.update((visible) => !visible);
+    }
+    wrapperClasses = computed(() => {
+        const parts = ['field'];
+        if (this.size() === 'sm')
+            parts.push('sm');
+        if (this.size() === 'lg')
+            parts.push('lg');
+        if (this.invalid())
+            parts.push('error');
+        else if (this.success())
+            parts.push('success');
+        if (this.disabled())
+            parts.push('disabled');
+        if (this.readOnly())
+            parts.push('read-only');
+        if (this.withAddon())
+            parts.push('with-addon');
+        if (this.withAddonRight())
+            parts.push('with-addon-right');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    clear() {
+        this.value.set('');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: InputComponent, isStandalone: true, selector: "ds-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, withAddon: { classPropertyName: "withAddon", publicName: "withAddon", isSignal: true, isRequired: false, transformFunction: null }, withAddonRight: { classPropertyName: "withAddonRight", publicName: "withAddonRight", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, enterKeyHint: { classPropertyName: "enterKeyHint", publicName: "enterKeyHint", isSignal: true, isRequired: false, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, passwordToggle: { classPropertyName: "passwordToggle", publicName: "passwordToggle", isSignal: true, isRequired: false, transformFunction: null }, passwordVisible: { classPropertyName: "passwordVisible", publicName: "passwordVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", blurred: "blurred", passwordVisible: "passwordVisibleChange" }, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\r\n  @if (label()) {\r\n    <label class=\"label\" [attr.for]=\"uid\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"req\" aria-hidden=\"true\">*</span>\r\n      } @else if (optional()) {\r\n        <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"control\">\r\n    <span class=\"addon-slot prefix\"><ng-content select=\"[dsInputPrefix]\"></ng-content></span>\r\n    <input\r\n      [id]=\"uid\"\r\n      [type]=\"effectiveType()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.name]=\"name()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.autocomplete]=\"autocomplete()\"\r\n      [attr.autofocus]=\"autofocus() ? '' : null\"\r\n      [attr.placeholder]=\"placeholder() || null\"\r\n      [attr.aria-label]=\"resolvedAriaLabel()\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.aria-describedby]=\"hintId()\"\r\n      [attr.aria-required]=\"required() ? 'true' : null\"\r\n      [attr.enterkeyhint]=\"enterKeyHint()\"\r\n      [attr.inputmode]=\"inputMode()\"\r\n      [disabled]=\"disabled()\"\r\n      [readOnly]=\"readOnly()\"\r\n      [required]=\"required()\"\r\n      (blur)=\"blurred.emit()\"\r\n    />\r\n    @if (canClear() && value() && !disabled()) {\r\n      <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\" aria-label=\"Clear input\"></button>\r\n    }\r\n    @if (showPasswordToggle()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"password-toggle\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\r\n        (click)=\"togglePassword()\"\r\n      >\r\n        <ds-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" [size]=\"16\" />\r\n      </button>\r\n    }\r\n    <span class=\"addon-slot suffix\"><ng-content select=\"[dsInputSuffix]\"></ng-content></span>\r\n  </div>\r\n  @if (hint()) {\r\n    <span class=\"hint\" [id]=\"hintId()\" [attr.role]=\"invalid() ? 'alert' : null\">{{ hint() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--_input-bg: var(--ds-input-bg, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-fg: var(--ds-input-fg, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-pad-y: var(--ds-input-pad-y, var(--field-pad-y));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--focus-field));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-bg-error: var(--ds-input-bg-error, var(--error-subtle));--_input-border-success: var(--ds-input-border-success, var(--success));--_input-bg-disabled: var(--ds-input-bg-disabled, var(--surface-disabled));--_input-label-color: var(--ds-input-label-color, var(--text-secondary));--_input-label-fs: var(--ds-input-label-fs, var(--font-size-xs));--_input-label-fw: var(--ds-input-label-fw, var(--font-weight-bold));--_input-hint-color: var(--ds-input-hint-color, var(--text-tertiary));--_input-hint-fs: var(--ds-input-hint-fs, var(--font-size-xs));--_input-fs: var(--ds-input-fs, var(--font-size-s));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--_input-label-fw) var(--_input-label-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-label-color);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:center;gap:var(--space-2);background:var(--_input-bg);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:var(--hit-cozy);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control input{flex:1;min-width:0;appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--_input-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-fg)}.field .control input::placeholder{color:var(--_input-placeholder)}.field .control input[type=search]::-webkit-search-cancel-button,.field .control input[type=search]::-webkit-search-decoration{display:none;appearance:none;-webkit-appearance:none}.field .control .clear-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-md);height:var(--icon-md);padding:0;border:0;background-color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:background-color var(--duration-fast) var(--ease-standard);-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat;mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat}.field .control .clear-btn:hover{background-color:var(--text-primary)}.field .control .clear-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.field .control .password-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:color var(--duration-fast) var(--ease-standard)}.field .control .password-toggle:hover{color:var(--text-primary)}.field .control .password-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--_input-hint-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-hint-color);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background:var(--_input-bg-disabled);border-color:var(--border-disabled)}.field.disabled input{color:var(--text-disabled)}.field.read-only .control{background:var(--surface-secondary)}.field.read-only .control input{cursor:default}.field.error .control{background:var(--_input-bg-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--focus-field-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{height:var(--hit-min);padding:0 var(--space-2)}.field.lg .control{height:var(--field-h-lg)}.field .addon-slot{display:inline-flex;align-items:center;align-self:stretch;color:var(--text-tertiary);flex-shrink:0}.field .addon-slot:empty{display:none}.field ::ng-deep .addon{display:inline-flex;align-items:center;padding:0 var(--space-3);margin:calc(var(--field-affix-overlap) * -1);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);align-self:stretch;border-right:var(--border-width-default) solid var(--border-divider)}.field ::ng-deep .addon.right{border-right:0;border-left:var(--border-width-default) solid var(--border-divider)}.field.with-addon .control{padding-left:0}.field.with-addon-right .control{padding-right:0}.field.with-addon ::ng-deep .addon{border-top-left-radius:var(--_input-radius);border-bottom-left-radius:var(--_input-radius)}.field.with-addon-right ::ng-deep .addon.right{border-top-right-radius:var(--_input-radius);border-bottom-right-radius:var(--_input-radius)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-input', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"wrapperClasses()\">\r\n  @if (label()) {\r\n    <label class=\"label\" [attr.for]=\"uid\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"req\" aria-hidden=\"true\">*</span>\r\n      } @else if (optional()) {\r\n        <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"control\">\r\n    <span class=\"addon-slot prefix\"><ng-content select=\"[dsInputPrefix]\"></ng-content></span>\r\n    <input\r\n      [id]=\"uid\"\r\n      [type]=\"effectiveType()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.name]=\"name()\"\r\n      [attr.min]=\"min()\"\r\n      [attr.max]=\"max()\"\r\n      [attr.step]=\"step()\"\r\n      [attr.autocomplete]=\"autocomplete()\"\r\n      [attr.autofocus]=\"autofocus() ? '' : null\"\r\n      [attr.placeholder]=\"placeholder() || null\"\r\n      [attr.aria-label]=\"resolvedAriaLabel()\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.aria-describedby]=\"hintId()\"\r\n      [attr.aria-required]=\"required() ? 'true' : null\"\r\n      [attr.enterkeyhint]=\"enterKeyHint()\"\r\n      [attr.inputmode]=\"inputMode()\"\r\n      [disabled]=\"disabled()\"\r\n      [readOnly]=\"readOnly()\"\r\n      [required]=\"required()\"\r\n      (blur)=\"blurred.emit()\"\r\n    />\r\n    @if (canClear() && value() && !disabled()) {\r\n      <button type=\"button\" class=\"clear-btn\" (click)=\"clear()\" aria-label=\"Clear input\"></button>\r\n    }\r\n    @if (showPasswordToggle()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"password-toggle\"\r\n        tabindex=\"-1\"\r\n        [attr.aria-label]=\"passwordVisible() ? 'Hide password' : 'Show password'\"\r\n        (click)=\"togglePassword()\"\r\n      >\r\n        <ds-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" [size]=\"16\" />\r\n      </button>\r\n    }\r\n    <span class=\"addon-slot suffix\"><ng-content select=\"[dsInputSuffix]\"></ng-content></span>\r\n  </div>\r\n  @if (hint()) {\r\n    <span class=\"hint\" [id]=\"hintId()\" [attr.role]=\"invalid() ? 'alert' : null\">{{ hint() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{--_input-bg: var(--ds-input-bg, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-fg: var(--ds-input-fg, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-pad-y: var(--ds-input-pad-y, var(--field-pad-y));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--focus-field));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-bg-error: var(--ds-input-bg-error, var(--error-subtle));--_input-border-success: var(--ds-input-border-success, var(--success));--_input-bg-disabled: var(--ds-input-bg-disabled, var(--surface-disabled));--_input-label-color: var(--ds-input-label-color, var(--text-secondary));--_input-label-fs: var(--ds-input-label-fs, var(--font-size-xs));--_input-label-fw: var(--ds-input-label-fw, var(--font-weight-bold));--_input-hint-color: var(--ds-input-hint-color, var(--text-tertiary));--_input-hint-fs: var(--ds-input-hint-fs, var(--font-size-xs));--_input-fs: var(--ds-input-fs, var(--font-size-s));display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--_input-label-fw) var(--_input-label-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-label-color);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:center;gap:var(--space-2);background:var(--_input-bg);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:var(--hit-cozy);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control input{flex:1;min-width:0;appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--_input-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-fg)}.field .control input::placeholder{color:var(--_input-placeholder)}.field .control input[type=search]::-webkit-search-cancel-button,.field .control input[type=search]::-webkit-search-decoration{display:none;appearance:none;-webkit-appearance:none}.field .control .clear-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-md);height:var(--icon-md);padding:0;border:0;background-color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:background-color var(--duration-fast) var(--ease-standard);-webkit-mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat;mask:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6L6 18M6 6l12 12'/></svg>\") center/contain no-repeat}.field .control .clear-btn:hover{background-color:var(--text-primary)}.field .control .clear-btn:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.field .control .password-toggle{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--text-tertiary);cursor:pointer;flex-shrink:0;transition:color var(--duration-fast) var(--ease-standard)}.field .control .password-toggle:hover{color:var(--text-primary)}.field .control .password-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--_input-hint-fs)/var(--line-height-base) var(--font-sans);color:var(--_input-hint-color);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background:var(--_input-bg-disabled);border-color:var(--border-disabled)}.field.disabled input{color:var(--text-disabled)}.field.read-only .control{background:var(--surface-secondary)}.field.read-only .control input{cursor:default}.field.error .control{background:var(--_input-bg-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--focus-field-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{height:var(--hit-min);padding:0 var(--space-2)}.field.lg .control{height:var(--field-h-lg)}.field .addon-slot{display:inline-flex;align-items:center;align-self:stretch;color:var(--text-tertiary);flex-shrink:0}.field .addon-slot:empty{display:none}.field ::ng-deep .addon{display:inline-flex;align-items:center;padding:0 var(--space-3);margin:calc(var(--field-affix-overlap) * -1);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);align-self:stretch;border-right:var(--border-width-default) solid var(--border-divider)}.field ::ng-deep .addon.right{border-right:0;border-left:var(--border-width-default) solid var(--border-divider)}.field.with-addon .control{padding-left:0}.field.with-addon-right .control{padding-right:0}.field.with-addon ::ng-deep .addon{border-top-left-radius:var(--_input-radius);border-bottom-left-radius:var(--_input-radius)}.field.with-addon-right ::ng-deep .addon.right{border-top-right-radius:var(--_input-radius);border-bottom-right-radius:var(--_input-radius)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], withAddon: [{ type: i0.Input, args: [{ isSignal: true, alias: "withAddon", required: false }] }], withAddonRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "withAddonRight", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], enterKeyHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterKeyHint", required: false }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], blurred: [{ type: i0.Output, args: ["blurred"] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], passwordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToggle", required: false }] }], passwordVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordVisible", required: false }] }, { type: i0.Output, args: ["passwordVisibleChange"] }] } });
+
+class NumberStepperComponent {
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    atMin = computed(() => this.value() <= this.min(), ...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
+    atMax = computed(() => {
+        const max = this.max();
+        return max != null && this.value() >= max;
+    }, ...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
+    stepperClass = computed(() => {
+        const parts = ['stepper', `size-${this.size()}`];
+        if (this.disabled())
+            parts.push('disabled');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "stepperClass" }] : /* istanbul ignore next */ []));
+    inc() {
+        if (this.atMax() || this.disabled())
+            return;
+        this.value.set(this.value() + this.step());
+    }
+    dec() {
+        if (this.atMin() || this.disabled())
+            return;
+        this.value.set(this.value() - this.step());
+    }
+    setRaw(raw) {
+        const parsed = Number.parseInt(raw, 10);
+        const number = Number.isNaN(parsed) ? 0 : parsed;
+        let clamped = Math.max(this.min(), number);
+        const max = this.max();
+        if (max != null)
+            clamped = Math.min(max, clamped);
+        this.value.set(clamped);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NumberStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: NumberStepperComponent, isStandalone: true, selector: "ds-number-stepper", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div [class]=\"stepperClass()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"step minus\"\r\n    (click)=\"dec()\"\r\n    [disabled]=\"atMin() || disabled()\"\r\n  >\u2212</button>\r\n  <input\r\n    type=\"number\"\r\n    class=\"qty\"\r\n    [min]=\"min()\"\r\n    [max]=\"max() ?? undefined\"\r\n    [value]=\"value()\"\r\n    [disabled]=\"disabled()\"\r\n    (input)=\"setRaw($any($event.target).value)\"\r\n  />\r\n  <button\r\n    type=\"button\"\r\n    class=\"step plus\"\r\n    (click)=\"inc()\"\r\n    [disabled]=\"atMax() || disabled()\"\r\n  >+</button>\r\n</div>\r\n", styles: [":host{display:inline-flex}.stepper{display:flex;align-items:stretch;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}.stepper:focus-within{border-color:var(--primary);box-shadow:var(--focus-field)}.stepper.size-sm{height:var(--hit-min)}.stepper.size-sm .step{width:var(--hit-min)}.stepper.size-sm .qty{width:calc(var(--hit-min) * 1.25)}.stepper.size-md{height:var(--hit-cozy)}.stepper.size-md .step{width:var(--hit-cozy)}.stepper.size-md .qty{width:calc(var(--hit-cozy) * 1.25)}.stepper.size-lg{height:var(--hit-comfy)}.stepper.size-lg .step{width:var(--hit-comfy)}.stepper.size-lg .qty{width:calc(var(--hit-comfy) * 1.25)}.stepper.disabled{background:var(--surface-disabled);border-color:var(--border-disabled)}.stepper.disabled:focus-within{border-color:var(--border-disabled);box-shadow:none}.step{flex-shrink:0;border:0;background:transparent;color:var(--text-primary);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background var(--duration-fast) var(--ease-standard)}.step:hover:not(:disabled){background:var(--surface-secondary)}.step:active:not(:disabled){background:var(--primary-muted)}.step:disabled{color:var(--text-disabled);cursor:not-allowed}.step.minus{border-right:var(--border-width-default) solid var(--border-default)}.step.plus{border-left:var(--border-width-default) solid var(--border-default)}.qty{flex:1;min-width:0;border:0;background:transparent;text-align:center;font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary);outline:0;padding:0;-moz-appearance:textfield}.qty:disabled{color:var(--text-disabled)}.qty::-webkit-outer-spin-button,.qty::-webkit-inner-spin-button{appearance:none;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NumberStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-number-stepper', standalone: true, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"stepperClass()\">\r\n  <button\r\n    type=\"button\"\r\n    class=\"step minus\"\r\n    (click)=\"dec()\"\r\n    [disabled]=\"atMin() || disabled()\"\r\n  >\u2212</button>\r\n  <input\r\n    type=\"number\"\r\n    class=\"qty\"\r\n    [min]=\"min()\"\r\n    [max]=\"max() ?? undefined\"\r\n    [value]=\"value()\"\r\n    [disabled]=\"disabled()\"\r\n    (input)=\"setRaw($any($event.target).value)\"\r\n  />\r\n  <button\r\n    type=\"button\"\r\n    class=\"step plus\"\r\n    (click)=\"inc()\"\r\n    [disabled]=\"atMax() || disabled()\"\r\n  >+</button>\r\n</div>\r\n", styles: [":host{display:inline-flex}.stepper{display:flex;align-items:stretch;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}.stepper:focus-within{border-color:var(--primary);box-shadow:var(--focus-field)}.stepper.size-sm{height:var(--hit-min)}.stepper.size-sm .step{width:var(--hit-min)}.stepper.size-sm .qty{width:calc(var(--hit-min) * 1.25)}.stepper.size-md{height:var(--hit-cozy)}.stepper.size-md .step{width:var(--hit-cozy)}.stepper.size-md .qty{width:calc(var(--hit-cozy) * 1.25)}.stepper.size-lg{height:var(--hit-comfy)}.stepper.size-lg .step{width:var(--hit-comfy)}.stepper.size-lg .qty{width:calc(var(--hit-comfy) * 1.25)}.stepper.disabled{background:var(--surface-disabled);border-color:var(--border-disabled)}.stepper.disabled:focus-within{border-color:var(--border-disabled);box-shadow:none}.step{flex-shrink:0;border:0;background:transparent;color:var(--text-primary);font-size:var(--font-size-l);font-weight:var(--font-weight-bold);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background var(--duration-fast) var(--ease-standard)}.step:hover:not(:disabled){background:var(--surface-secondary)}.step:active:not(:disabled){background:var(--primary-muted)}.step:disabled{color:var(--text-disabled);cursor:not-allowed}.step.minus{border-right:var(--border-width-default) solid var(--border-default)}.step.plus{border-left:var(--border-width-default) solid var(--border-default)}.qty{flex:1;min-width:0;border:0;background:transparent;text-align:center;font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary);outline:0;padding:0;-moz-appearance:textfield}.qty:disabled{color:var(--text-disabled)}.qty::-webkit-outer-spin-button,.qty::-webkit-inner-spin-button{appearance:none;margin:0}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+let nextId$8 = 0;
+class TextareaComponent {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    autosize = input(false, { ...(ngDevMode ? { debugName: "autosize" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minRows = input(null, ...(ngDevMode ? [{ debugName: "minRows" }] : /* istanbul ignore next */ []));
+    maxRows = input(null, ...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
+    resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    /** Accessible name when no visible `label` is provided. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    uid = `ds-textarea-${++nextId$8}`;
+    hintId = computed(() => (this.hint() ? `${this.uid}-hint` : null), ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => {
+        const parts = ['field'];
+        if (this.size() === 'sm')
+            parts.push('sm');
+        if (this.size() === 'lg')
+            parts.push('lg');
+        if (this.invalid())
+            parts.push('error');
+        if (this.disabled())
+            parts.push('disabled');
+        if (this.autosize())
+            parts.push('autosize');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    autosizeMinHeight = computed(() => this.autosize() && this.minRows() ? `${this.minRows()}lh` : null, ...(ngDevMode ? [{ debugName: "autosizeMinHeight" }] : /* istanbul ignore next */ []));
+    autosizeMaxHeight = computed(() => this.autosize() && this.maxRows() ? `${this.maxRows()}lh` : null, ...(ngDevMode ? [{ debugName: "autosizeMaxHeight" }] : /* istanbul ignore next */ []));
+    // Autosize grows with content, so a manual resize handle conflicts — force none.
+    effectiveResize = computed(() => this.autosize() ? 'none' : this.resize(), ...(ngDevMode ? [{ debugName: "effectiveResize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TextareaComponent, isStandalone: true, selector: "ds-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autosize: { classPropertyName: "autosize", publicName: "autosize", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "<div [class]=\"wrapperClasses()\">\r\n  @if (label()) {\r\n    <label class=\"label\" [attr.for]=\"uid\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"req\" aria-hidden=\"true\">*</span>\r\n      } @else if (optional()) {\r\n        <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"control\">\r\n    <textarea\r\n      [id]=\"uid\"\r\n      [rows]=\"rows()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.name]=\"name()\"\r\n      [attr.placeholder]=\"placeholder() || null\"\r\n      [attr.aria-label]=\"resolvedAriaLabel()\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.aria-describedby]=\"hintId()\"\r\n      [attr.aria-required]=\"required() ? 'true' : null\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [style.resize]=\"effectiveResize()\"\r\n      [style.min-height]=\"autosizeMinHeight()\"\r\n      [style.max-height]=\"autosizeMaxHeight()\"\r\n      [style.overflow-y]=\"autosize() && maxRows() ? 'auto' : null\"\r\n    ></textarea>\r\n  </div>\r\n  @if (hint()) {\r\n    <span class=\"hint\" [id]=\"hintId()\" [attr.role]=\"invalid() ? 'alert' : null\">{{ hint() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.field{--_input-bg: var(--ds-input-bg, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-y: var(--ds-input-pad-y, var(--space-3));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-fg: var(--ds-input-fg, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--focus-field));--_input-bg-disabled: var(--ds-input-bg-disabled, var(--surface-disabled));--_input-bg-error: var(--ds-input-bg-error, var(--error-subtle));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-border-success: var(--ds-input-border-success, var(--success));display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:stretch;gap:var(--space-2);background:var(--_input-bg);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:auto;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control textarea{flex:1;min-width:0;appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_input-fg);min-height:var(--field-textarea-rows-min, 60px)}.field .control textarea::placeholder{color:var(--_input-placeholder)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background:var(--_input-bg-disabled);border-color:var(--border-disabled)}.field.disabled textarea{color:var(--text-disabled)}.field.error .control{background:var(--_input-bg-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--focus-field-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{padding:var(--space-2) var(--space-2)}.field.lg .control{padding:var(--space-4) var(--space-3)}.field.autosize .control textarea{field-sizing:content;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-textarea', standalone: true, imports: [FormsModule], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"wrapperClasses()\">\r\n  @if (label()) {\r\n    <label class=\"label\" [attr.for]=\"uid\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"req\" aria-hidden=\"true\">*</span>\r\n      } @else if (optional()) {\r\n        <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n      }\r\n    </label>\r\n  }\r\n  <div class=\"control\">\r\n    <textarea\r\n      [id]=\"uid\"\r\n      [rows]=\"rows()\"\r\n      [(ngModel)]=\"value\"\r\n      [attr.name]=\"name()\"\r\n      [attr.placeholder]=\"placeholder() || null\"\r\n      [attr.aria-label]=\"resolvedAriaLabel()\"\r\n      [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n      [attr.aria-describedby]=\"hintId()\"\r\n      [attr.aria-required]=\"required() ? 'true' : null\"\r\n      [disabled]=\"disabled()\"\r\n      [required]=\"required()\"\r\n      [style.resize]=\"effectiveResize()\"\r\n      [style.min-height]=\"autosizeMinHeight()\"\r\n      [style.max-height]=\"autosizeMaxHeight()\"\r\n      [style.overflow-y]=\"autosize() && maxRows() ? 'auto' : null\"\r\n    ></textarea>\r\n  </div>\r\n  @if (hint()) {\r\n    <span class=\"hint\" [id]=\"hintId()\" [attr.role]=\"invalid() ? 'alert' : null\">{{ hint() }}</span>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.field{--_input-bg: var(--ds-input-bg, var(--surface-default));--_input-border: var(--ds-input-border, var(--border-default));--_input-radius: var(--ds-input-radius, var(--radius-md));--_input-pad-y: var(--ds-input-pad-y, var(--space-3));--_input-pad-x: var(--ds-input-pad-x, var(--field-pad-x));--_input-fg: var(--ds-input-fg, var(--text-primary));--_input-placeholder: var(--ds-input-placeholder, var(--text-tertiary));--_input-border-hover: var(--ds-input-border-hover, var(--border-strong));--_input-border-focus: var(--ds-input-border-focus, var(--primary));--_input-focus-shadow: var(--ds-input-focus-shadow, var(--focus-field));--_input-bg-disabled: var(--ds-input-bg-disabled, var(--surface-disabled));--_input-bg-error: var(--ds-input-bg-error, var(--error-subtle));--_input-border-error: var(--ds-input-border-error, var(--error));--_input-border-success: var(--ds-input-border-success, var(--success));display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .control{display:flex;align-items:stretch;gap:var(--space-2);background:var(--_input-bg);border:var(--border-width-default) solid var(--_input-border);border-radius:var(--_input-radius);padding:var(--_input-pad-y) var(--_input-pad-x);height:auto;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.field .control textarea{flex:1;min-width:0;appearance:none;-webkit-appearance:none;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_input-fg);min-height:var(--field-textarea-rows-min, 60px)}.field .control textarea::placeholder{color:var(--_input-placeholder)}.field .control:hover{border-color:var(--_input-border-hover)}.field .control:focus-within{border-color:var(--_input-border-focus);box-shadow:var(--_input-focus-shadow)}.field .hint{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-1)}.field.disabled .control{background:var(--_input-bg-disabled);border-color:var(--border-disabled)}.field.disabled textarea{color:var(--text-disabled)}.field.error .control{background:var(--_input-bg-error);border-color:var(--_input-border-error)}.field.error .control:focus-within{box-shadow:var(--focus-field-error)}.field.error .hint{color:var(--error-text)}.field.success .control{border-color:var(--_input-border-success)}.field.success .hint{color:var(--success-text)}.field.sm .control{padding:var(--space-2) var(--space-2)}.field.lg .control{padding:var(--space-4) var(--space-3)}.field.autosize .control textarea{field-sizing:content;overflow:hidden}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autosize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosize", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class SearchComponent {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('Search', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    shortcut = input('', ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    /** Show an inline clear (×) button on the right when there's a value. */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the input (placeholder is not a reliable label). */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    submitted = output();
+    inputEl = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    onSubmit() {
+        this.submitted.emit(this.value());
+    }
+    clear() {
+        this.value.set('');
+        // The × is removed once empty; return focus to the input so keyboard
+        // users don't get dropped onto <body>.
+        this.inputEl()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SearchComponent, isStandalone: true, selector: "ds-search", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", submitted: "submitted" }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"search\">\r\n  @if (showIcon()) {\r\n    <ds-icon name=\"search\" [size]=\"16\"></ds-icon>\r\n  }\r\n  <input\r\n    #searchInput\r\n    class=\"input\"\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder()\"\r\n    [attr.aria-label]=\"ariaLabel() || placeholder() || null\"\r\n    (keydown.enter)=\"onSubmit()\"\r\n  />\r\n  @if (clearable() && value()) {\r\n    <button type=\"button\" class=\"search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\r\n      <ds-icon name=\"x\" [size]=\"14\"></ds-icon>\r\n    </button>\r\n  }\r\n  @if (shortcut()) {\r\n    <kbd class=\"kbd\">{{ shortcut() }}</kbd>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.search{--_search-height: var(--ds-search-height, var(--search-h));--_search-bg: var(--ds-search-bg, var(--surface-default));--_search-border: var(--ds-search-border, var(--border-default));--_search-radius: var(--ds-search-radius, var(--radius-md));--_search-border-hover: var(--ds-search-border-hover, var(--border-default));--_search-bg-focus: var(--ds-search-bg-focus, var(--surface-default));--_search-border-focus: var(--ds-search-border-focus, var(--primary));--_search-focus-shadow: var(--ds-search-focus-shadow, var(--focus-field));--_search-fg: var(--ds-search-fg, var(--text-primary));--_search-placeholder: var(--ds-search-placeholder, var(--text-tertiary));display:flex;align-items:center;gap:var(--space-2);background:var(--_search-bg);border:var(--border-width-default) solid var(--_search-border);border-radius:var(--_search-radius);padding:0 var(--space-3);height:var(--_search-height);width:100%;max-width:var(--search-maxw);transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.search:hover{border-color:var(--_search-border-hover)}.search:focus-within{background:var(--_search-bg-focus);border-color:var(--_search-border-focus);box-shadow:var(--_search-focus-shadow)}.search .icon{width:var(--icon-md);height:var(--icon-md);color:var(--icon-default)}.search .input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_search-fg)}.search .input::placeholder{color:var(--_search-placeholder)}.search .search-clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:2px;border:0;background:transparent;border-radius:var(--radius-pill, 999px);color:var(--icon-default);cursor:pointer;opacity:.7;transition:opacity var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.search .search-clear .icon{width:14px;height:14px}.search .search-clear:hover{opacity:1;background:var(--surface-muted, rgba(0, 0, 0, .06))}.search .kbd{font:var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-flat) var(--font-mono);padding:var(--space-px) var(--space-1-5);background:var(--surface-default);border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-sm);color:var(--text-tertiary)}.search.sm{--_search-height: var(--ds-search-height, var(--hit-min))}.search.md{--_search-height: var(--ds-search-height, var(--hit-cozy))}.search.lg{--_search-height: var(--ds-search-height, var(--field-h-lg))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-search', standalone: true, imports: [FormsModule, IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"search\">\r\n  @if (showIcon()) {\r\n    <ds-icon name=\"search\" [size]=\"16\"></ds-icon>\r\n  }\r\n  <input\r\n    #searchInput\r\n    class=\"input\"\r\n    [(ngModel)]=\"value\"\r\n    [placeholder]=\"placeholder()\"\r\n    [attr.aria-label]=\"ariaLabel() || placeholder() || null\"\r\n    (keydown.enter)=\"onSubmit()\"\r\n  />\r\n  @if (clearable() && value()) {\r\n    <button type=\"button\" class=\"search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\r\n      <ds-icon name=\"x\" [size]=\"14\"></ds-icon>\r\n    </button>\r\n  }\r\n  @if (shortcut()) {\r\n    <kbd class=\"kbd\">{{ shortcut() }}</kbd>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.search{--_search-height: var(--ds-search-height, var(--search-h));--_search-bg: var(--ds-search-bg, var(--surface-default));--_search-border: var(--ds-search-border, var(--border-default));--_search-radius: var(--ds-search-radius, var(--radius-md));--_search-border-hover: var(--ds-search-border-hover, var(--border-default));--_search-bg-focus: var(--ds-search-bg-focus, var(--surface-default));--_search-border-focus: var(--ds-search-border-focus, var(--primary));--_search-focus-shadow: var(--ds-search-focus-shadow, var(--focus-field));--_search-fg: var(--ds-search-fg, var(--text-primary));--_search-placeholder: var(--ds-search-placeholder, var(--text-tertiary));display:flex;align-items:center;gap:var(--space-2);background:var(--_search-bg);border:var(--border-width-default) solid var(--_search-border);border-radius:var(--_search-radius);padding:0 var(--space-3);height:var(--_search-height);width:100%;max-width:var(--search-maxw);transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.search:hover{border-color:var(--_search-border-hover)}.search:focus-within{background:var(--_search-bg-focus);border-color:var(--_search-border-focus);box-shadow:var(--_search-focus-shadow)}.search .icon{width:var(--icon-md);height:var(--icon-md);color:var(--icon-default)}.search .input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_search-fg)}.search .input::placeholder{color:var(--_search-placeholder)}.search .search-clear{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:2px;border:0;background:transparent;border-radius:var(--radius-pill, 999px);color:var(--icon-default);cursor:pointer;opacity:.7;transition:opacity var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.search .search-clear .icon{width:14px;height:14px}.search .search-clear:hover{opacity:1;background:var(--surface-muted, rgba(0, 0, 0, .06))}.search .kbd{font:var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-flat) var(--font-mono);padding:var(--space-px) var(--space-1-5);background:var(--surface-default);border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-sm);color:var(--text-tertiary)}.search.sm{--_search-height: var(--ds-search-height, var(--hit-min))}.search.md{--_search-height: var(--ds-search-height, var(--hit-cozy))}.search.lg{--_search-height: var(--ds-search-height, var(--field-h-lg))}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], inputEl: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
+/** Showcase-only: renders the component's open/overlay surface inline in normal
+ *  flow instead of its real overlay mechanics (for static docs specimens).
+ *  Not part of the production contract. */
+class DsStaticPreview {
+    staticPreview = input(false, { ...(ngDevMode ? { debugName: "staticPreview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DsStaticPreview, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: DsStaticPreview, isStandalone: true, inputs: { staticPreview: { classPropertyName: "staticPreview", publicName: "staticPreview", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DsStaticPreview, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }], propDecorators: { staticPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "staticPreview", required: false }] }] } });
+
+function isSelectOptionGroup(item) {
+    return 'options' in item && Array.isArray(item.options);
+}
+
+let nextId$7 = 0;
+class SelectComponent {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    preview = inject(DsStaticPreview);
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Accessible name when no visible `label` is provided. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    uid = `ds-select-${++nextId$7}`;
+    labelId = `${this.uid}-label`;
+    listboxId = `${this.uid}-listbox`;
+    optionId(flatIdx) {
+        return `${this.uid}-opt-${flatIdx}`;
+    }
+    /** Active option for `aria-activedescendant` (combobox keeps DOM focus). */
+    activeDescendant = computed(() => {
+        const idx = this.activeIndex();
+        return this.open() && idx >= 0 ? this.optionId(idx) : null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    trigger = viewChild.required('trigger');
+    panelTpl = viewChild.required('panel');
+    panelContentTpl = viewChild.required('panelContent');
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    // Flattened list of selectable options paired with the parent-group `disabled`
+    // state, so keyboard nav and selection ignore group-header labels and respect
+    // group-level disable. Index of an entry here corresponds to `activeIndex`.
+    flatOptions = computed(() => {
+        const out = [];
+        for (const item of this.options()) {
+            if (isSelectOptionGroup(item)) {
+                const groupDisabled = !!item.disabled;
+                for (const opt of item.options) {
+                    out.push({ option: opt, groupDisabled });
+                }
+            }
+            else {
+                out.push({ option: item, groupDisabled: false });
+            }
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
+    selectedOption = computed(() => {
+        const current = this.value();
+        const found = this.flatOptions().find(({ option }) => option.value === current);
+        return found?.option ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        return this.selectedOption()?.label ?? this.placeholder();
+    }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => !!this.selectedOption(), ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => {
+        const parts = ['dropdown'];
+        if (this.size() === 'sm')
+            parts.push('sm');
+        if (this.size() === 'lg')
+            parts.push('lg');
+        if (this.disabled())
+            parts.push('disabled');
+        if (this.invalid())
+            parts.push('error');
+        if (this.open() || this.preview.staticPreview())
+            parts.push('open');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!this.open())
+                return;
+            const idx = this.flatOptions().findIndex(({ option }) => option.value === this.value());
+            this.activeIndex.set(idx >= 0 ? idx : this.firstEnabledIndex());
+        });
+    }
+    isOptionGroup(item) {
+        return isSelectOptionGroup(item);
+    }
+    // Resolve the flat-index for a given option so click/hover/selection
+    // map back to the same indices keyboard nav uses (no double bookkeeping).
+    flatIndexOf(opt) {
+        return this.flatOptions().findIndex(({ option }) => option === opt);
+    }
+    toggle() {
+        if (this.disabled() || this.preview.staticPreview())
+            return;
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.openPanel();
+        }
+    }
+    openPanel() {
+        if (this.overlayRef)
+            return;
+        const triggerEl = this.trigger().nativeElement;
+        const width = triggerEl.getBoundingClientRect().width;
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        const cfg = {
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            // Reuse the global panel skin defined in styles/_dropdown-overlay.scss
+            // so the portaled panel actually renders styled — `:host ::ng-deep`
+            // selectors can't reach a node outside the host's DOM tree.
+            panelClass: 'ds-dropdown-panel',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width,
+        };
+        this.overlayRef = this.overlay.create(cfg);
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        const portal = new TemplatePortal(this.panelTpl(), this.vcr);
+        this.overlayRef.attach(portal);
+        this.open.set(true);
+    }
+    close() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.open.set(false);
+        this.activeIndex.set(-1);
+    }
+    pick(option, groupDisabled = false) {
+        if (option.disabled || groupDisabled)
+            return;
+        this.value.set(option.value);
+        this.close();
+        this.trigger().nativeElement.focus();
+    }
+    isSelected(option) {
+        return option.value === this.value();
+    }
+    isOptionDisabled(option, groupDisabled = false) {
+        return !!option.disabled || groupDisabled;
+    }
+    onTriggerKeydown(event) {
+        if (this.disabled() || this.preview.staticPreview())
+            return;
+        const key = event.key;
+        if (!this.open()) {
+            if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter' || key === ' ') {
+                event.preventDefault();
+                this.openPanel();
+            }
+            return;
+        }
+        if (key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (key === 'ArrowDown') {
+            event.preventDefault();
+            this.moveActive(1);
+            return;
+        }
+        if (key === 'ArrowUp') {
+            event.preventDefault();
+            this.moveActive(-1);
+            return;
+        }
+        if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            const idx = this.activeIndex();
+            const entry = this.flatOptions()[idx];
+            if (entry)
+                this.pick(entry.option, entry.groupDisabled);
+            return;
+        }
+        if (key === 'Home') {
+            event.preventDefault();
+            this.activeIndex.set(this.firstEnabledIndex());
+            return;
+        }
+        if (key === 'End') {
+            event.preventDefault();
+            this.activeIndex.set(this.lastEnabledIndex());
+        }
+    }
+    isActive(index) {
+        return this.activeIndex() === index;
+    }
+    moveActive(delta) {
+        const opts = this.flatOptions();
+        if (opts.length === 0)
+            return;
+        let next = this.activeIndex();
+        for (let attempts = 0; attempts < opts.length; attempts++) {
+            next = (next + delta + opts.length) % opts.length;
+            const candidate = opts[next];
+            if (candidate && !candidate.option.disabled && !candidate.groupDisabled) {
+                this.activeIndex.set(next);
+                return;
+            }
+        }
+    }
+    firstEnabledIndex() {
+        const opts = this.flatOptions();
+        for (let i = 0; i < opts.length; i++) {
+            const candidate = opts[i];
+            if (candidate && !candidate.option.disabled && !candidate.groupDisabled)
+                return i;
+        }
+        return -1;
+    }
+    lastEnabledIndex() {
+        const opts = this.flatOptions();
+        for (let i = opts.length - 1; i >= 0; i--) {
+            const candidate = opts[i];
+            if (candidate && !candidate.option.disabled && !candidate.groupDisabled)
+                return i;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SelectComponent, isStandalone: true, selector: "ds-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "panelContentTpl", first: true, predicate: ["panelContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "@if (label()) {\r\n  <span class=\"select-label\" [id]=\"labelId\">\r\n    {{ label() }}\r\n    @if (required()) {\r\n      <span class=\"req\" aria-hidden=\"true\">*</span>\r\n    } @else if (optional()) {\r\n      <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n    }\r\n  </span>\r\n}\r\n\r\n<button\r\n  #trigger\r\n  type=\"button\"\r\n  role=\"combobox\"\r\n  aria-haspopup=\"listbox\"\r\n  [class]=\"triggerClasses()\"\r\n  [attr.name]=\"name()\"\r\n  [attr.aria-expanded]=\"open() || preview.staticPreview()\"\r\n  [attr.aria-controls]=\"listboxId\"\r\n  [attr.aria-activedescendant]=\"activeDescendant()\"\r\n  [attr.aria-labelledby]=\"label() ? labelId : null\"\r\n  [attr.aria-label]=\"resolvedAriaLabel()\"\r\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n  [attr.aria-required]=\"required() ? 'true' : null\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <span class=\"trigger-text\" [class.is-placeholder]=\"!hasValue()\">{{ displayLabel() }}</span>\r\n  <span class=\"chevron\"><ds-icon name=\"chevronDown\" [size]=\"14\" /></span>\r\n</button>\r\n\r\n@if (preview.staticPreview()) {\r\n  <div class=\"ds-dropdown-panel\">\r\n    <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\r\n  </div>\r\n}\r\n\r\n<ng-template #panel>\r\n  <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\r\n</ng-template>\r\n\r\n<ng-template #panelContent>\r\n  <div class=\"dropdown-panel\">\r\n    <ul class=\"dropdown-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-labelledby]=\"label() ? labelId : null\">\r\n      @for (item of options(); track item.label; let groupIdx = $index) {\r\n        @if (isOptionGroup(item)) {\r\n          <li class=\"optgroup\" role=\"group\" [attr.aria-label]=\"item.label\">\r\n            <span class=\"optgroup-label\" [class.is-first]=\"groupIdx === 0\">{{ item.label }}</span>\r\n            <ul class=\"optgroup-list\" role=\"presentation\">\r\n              @for (opt of item.options; track opt.value) {\r\n                <li role=\"presentation\">\r\n                  <button\r\n                    type=\"button\"\r\n                    role=\"option\"\r\n                    class=\"option\"\r\n                    [id]=\"optionId(flatIndexOf(opt))\"\r\n                    [attr.aria-selected]=\"isSelected(opt)\"\r\n                    [attr.aria-disabled]=\"isOptionDisabled(opt, item.disabled) ? 'true' : null\"\r\n                    [class.is-selected]=\"isSelected(opt)\"\r\n                    [class.is-active]=\"isActive(flatIndexOf(opt))\"\r\n                    [class.is-disabled]=\"isOptionDisabled(opt, item.disabled)\"\r\n                    [disabled]=\"isOptionDisabled(opt, item.disabled)\"\r\n                    (click)=\"pick(opt, item.disabled)\"\r\n                    (mouseenter)=\"activeIndex.set(flatIndexOf(opt))\"\r\n                  >\r\n                    <span class=\"option-label\">{{ opt.label }}</span>\r\n                    @if (isSelected(opt)) {\r\n                      <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\r\n                    }\r\n                  </button>\r\n                </li>\r\n              }\r\n            </ul>\r\n          </li>\r\n        } @else {\r\n          <li role=\"presentation\">\r\n            <button\r\n              type=\"button\"\r\n              role=\"option\"\r\n              class=\"option\"\r\n              [id]=\"optionId(flatIndexOf(item))\"\r\n              [attr.aria-selected]=\"isSelected(item)\"\r\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n              [class.is-selected]=\"isSelected(item)\"\r\n              [class.is-active]=\"isActive(flatIndexOf(item))\"\r\n              [class.is-disabled]=\"item.disabled\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"pick(item)\"\r\n              (mouseenter)=\"activeIndex.set(flatIndexOf(item))\"\r\n            >\r\n              <span class=\"option-label\">{{ item.label }}</span>\r\n              @if (isSelected(item)) {\r\n                <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\r\n              }\r\n            </button>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.select-label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1-5)}.select-label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.select-label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.dropdown{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:var(--field-pad-y) var(--field-pad-x);height:var(--hit-cozy);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.dropdown .trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown .trigger-text.is-placeholder{color:var(--text-tertiary)}.dropdown .chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--icon-default);transition:transform var(--duration-fast) var(--ease-standard)}.dropdown:hover:not(:disabled){border-color:var(--border-strong)}.dropdown:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open{border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--focus-field-error)}.dropdown.disabled,.dropdown:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.dropdown.disabled .chevron,.dropdown:disabled .chevron{color:var(--icon-muted)}.dropdown.sm{height:var(--hit-min);padding:0 var(--space-2)}.dropdown.lg{height:var(--field-h-lg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-select', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (label()) {\r\n  <span class=\"select-label\" [id]=\"labelId\">\r\n    {{ label() }}\r\n    @if (required()) {\r\n      <span class=\"req\" aria-hidden=\"true\">*</span>\r\n    } @else if (optional()) {\r\n      <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n    }\r\n  </span>\r\n}\r\n\r\n<button\r\n  #trigger\r\n  type=\"button\"\r\n  role=\"combobox\"\r\n  aria-haspopup=\"listbox\"\r\n  [class]=\"triggerClasses()\"\r\n  [attr.name]=\"name()\"\r\n  [attr.aria-expanded]=\"open() || preview.staticPreview()\"\r\n  [attr.aria-controls]=\"listboxId\"\r\n  [attr.aria-activedescendant]=\"activeDescendant()\"\r\n  [attr.aria-labelledby]=\"label() ? labelId : null\"\r\n  [attr.aria-label]=\"resolvedAriaLabel()\"\r\n  [attr.aria-invalid]=\"invalid() ? 'true' : null\"\r\n  [attr.aria-required]=\"required() ? 'true' : null\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <span class=\"trigger-text\" [class.is-placeholder]=\"!hasValue()\">{{ displayLabel() }}</span>\r\n  <span class=\"chevron\"><ds-icon name=\"chevronDown\" [size]=\"14\" /></span>\r\n</button>\r\n\r\n@if (preview.staticPreview()) {\r\n  <div class=\"ds-dropdown-panel\">\r\n    <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\r\n  </div>\r\n}\r\n\r\n<ng-template #panel>\r\n  <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\r\n</ng-template>\r\n\r\n<ng-template #panelContent>\r\n  <div class=\"dropdown-panel\">\r\n    <ul class=\"dropdown-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-labelledby]=\"label() ? labelId : null\">\r\n      @for (item of options(); track item.label; let groupIdx = $index) {\r\n        @if (isOptionGroup(item)) {\r\n          <li class=\"optgroup\" role=\"group\" [attr.aria-label]=\"item.label\">\r\n            <span class=\"optgroup-label\" [class.is-first]=\"groupIdx === 0\">{{ item.label }}</span>\r\n            <ul class=\"optgroup-list\" role=\"presentation\">\r\n              @for (opt of item.options; track opt.value) {\r\n                <li role=\"presentation\">\r\n                  <button\r\n                    type=\"button\"\r\n                    role=\"option\"\r\n                    class=\"option\"\r\n                    [id]=\"optionId(flatIndexOf(opt))\"\r\n                    [attr.aria-selected]=\"isSelected(opt)\"\r\n                    [attr.aria-disabled]=\"isOptionDisabled(opt, item.disabled) ? 'true' : null\"\r\n                    [class.is-selected]=\"isSelected(opt)\"\r\n                    [class.is-active]=\"isActive(flatIndexOf(opt))\"\r\n                    [class.is-disabled]=\"isOptionDisabled(opt, item.disabled)\"\r\n                    [disabled]=\"isOptionDisabled(opt, item.disabled)\"\r\n                    (click)=\"pick(opt, item.disabled)\"\r\n                    (mouseenter)=\"activeIndex.set(flatIndexOf(opt))\"\r\n                  >\r\n                    <span class=\"option-label\">{{ opt.label }}</span>\r\n                    @if (isSelected(opt)) {\r\n                      <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\r\n                    }\r\n                  </button>\r\n                </li>\r\n              }\r\n            </ul>\r\n          </li>\r\n        } @else {\r\n          <li role=\"presentation\">\r\n            <button\r\n              type=\"button\"\r\n              role=\"option\"\r\n              class=\"option\"\r\n              [id]=\"optionId(flatIndexOf(item))\"\r\n              [attr.aria-selected]=\"isSelected(item)\"\r\n              [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\r\n              [class.is-selected]=\"isSelected(item)\"\r\n              [class.is-active]=\"isActive(flatIndexOf(item))\"\r\n              [class.is-disabled]=\"item.disabled\"\r\n              [disabled]=\"item.disabled\"\r\n              (click)=\"pick(item)\"\r\n              (mouseenter)=\"activeIndex.set(flatIndexOf(item))\"\r\n            >\r\n              <span class=\"option-label\">{{ item.label }}</span>\r\n              @if (isSelected(item)) {\r\n                <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\r\n              }\r\n            </button>\r\n          </li>\r\n        }\r\n      }\r\n    </ul>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.select-label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1-5)}.select-label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.select-label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.dropdown{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:var(--field-pad-y) var(--field-pad-x);height:var(--hit-cozy);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.dropdown .trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown .trigger-text.is-placeholder{color:var(--text-tertiary)}.dropdown .chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--icon-default);transition:transform var(--duration-fast) var(--ease-standard)}.dropdown:hover:not(:disabled){border-color:var(--border-strong)}.dropdown:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open{border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--focus-field-error)}.dropdown.disabled,.dropdown:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.dropdown.disabled .chevron,.dropdown:disabled .chevron{color:var(--icon-muted)}.dropdown.sm{height:var(--hit-min);padding:0 var(--space-2)}.dropdown.lg{height:var(--field-h-lg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], panelContentTpl: [{ type: i0.ViewChild, args: ['panelContent', { isSignal: true }] }] } });
+
+let nextId$6 = 0;
+class DropdownComponent {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    preview = inject(DsStaticPreview);
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : /* istanbul ignore next */ []));
+    error = input(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Accessible name when no visible `label` is provided. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    uid = `ds-dropdown-${++nextId$6}`;
+    labelId = `${this.uid}-label`;
+    listboxId = `${this.uid}-listbox`;
+    optionId(index) {
+        return `${this.uid}-opt-${index}`;
+    }
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    trigger = viewChild.required('trigger');
+    panelTpl = viewChild.required('panel');
+    panelContentTpl = viewChild.required('panelContent');
+    open = signal(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    selectedOption = computed(() => {
+        const current = this.value();
+        const found = this.options().find((o) => o.value === current);
+        return found ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        return this.selectedOption()?.label ?? this.placeholder();
+    }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => !!this.selectedOption(), ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    activeDescendant = computed(() => {
+        const idx = this.activeIndex();
+        return this.open() && idx >= 0 ? this.optionId(idx) : null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => {
+        const parts = ['dropdown'];
+        if (this.size() === 'sm')
+            parts.push('sm');
+        if (this.size() === 'lg')
+            parts.push('lg');
+        if (this.disabled())
+            parts.push('disabled');
+        if (this.readOnly())
+            parts.push('readonly');
+        if (this.error())
+            parts.push('error');
+        if (this.open() || this.preview.staticPreview())
+            parts.push('open');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!this.open())
+                return;
+            const idx = this.options().findIndex((o) => o.value === this.value());
+            this.activeIndex.set(idx >= 0 ? idx : this.firstEnabledIndex());
+        });
+    }
+    toggle() {
+        if (this.disabled() || this.readOnly() || this.preview.staticPreview())
+            return;
+        if (this.open()) {
+            this.close();
+        }
+        else {
+            this.openPanel();
+        }
+    }
+    openPanel() {
+        if (this.overlayRef)
+            return;
+        const triggerEl = this.trigger().nativeElement;
+        const width = triggerEl.getBoundingClientRect().width;
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        const cfg = {
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            // Global panel class — the portaled pane lives outside :host, so
+            // styles live in styles/_dropdown-overlay.scss keyed off this class.
+            panelClass: 'ds-dropdown-panel',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width,
+        };
+        this.overlayRef = this.overlay.create(cfg);
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        const portal = new TemplatePortal(this.panelTpl(), this.vcr);
+        this.overlayRef.attach(portal);
+        this.open.set(true);
+    }
+    close() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.open.set(false);
+        this.activeIndex.set(-1);
+    }
+    pick(option) {
+        if (option.disabled)
+            return;
+        this.value.set(option.value);
+        this.close();
+        this.trigger().nativeElement.focus();
+    }
+    isSelected(option) {
+        return option.value === this.value();
+    }
+    onTriggerKeydown(event) {
+        if (this.disabled() || this.readOnly() || this.preview.staticPreview())
+            return;
+        const key = event.key;
+        if (!this.open()) {
+            if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter' || key === ' ') {
+                event.preventDefault();
+                this.openPanel();
+            }
+            return;
+        }
+        if (key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (key === 'ArrowDown') {
+            event.preventDefault();
+            this.moveActive(1);
+            return;
+        }
+        if (key === 'ArrowUp') {
+            event.preventDefault();
+            this.moveActive(-1);
+            return;
+        }
+        if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            const idx = this.activeIndex();
+            const opt = this.options()[idx];
+            if (opt)
+                this.pick(opt);
+            return;
+        }
+        if (key === 'Home') {
+            event.preventDefault();
+            this.activeIndex.set(this.firstEnabledIndex());
+            return;
+        }
+        if (key === 'End') {
+            event.preventDefault();
+            this.activeIndex.set(this.lastEnabledIndex());
+        }
+    }
+    isActive(index) {
+        return this.activeIndex() === index;
+    }
+    moveActive(delta) {
+        const opts = this.options();
+        if (opts.length === 0)
+            return;
+        let next = this.activeIndex();
+        for (let attempts = 0; attempts < opts.length; attempts++) {
+            next = (next + delta + opts.length) % opts.length;
+            const candidate = opts[next];
+            if (candidate && !candidate.disabled) {
+                this.activeIndex.set(next);
+                return;
+            }
+        }
+    }
+    firstEnabledIndex() {
+        const opts = this.options();
+        for (let i = 0; i < opts.length; i++) {
+            const candidate = opts[i];
+            if (candidate && !candidate.disabled)
+                return i;
+        }
+        return -1;
+    }
+    lastEnabledIndex() {
+        const opts = this.options();
+        for (let i = opts.length - 1; i >= 0; i--) {
+            const candidate = opts[i];
+            if (candidate && !candidate.disabled)
+                return i;
+        }
+        return -1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DropdownComponent, isStandalone: true, selector: "ds-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "panelContentTpl", first: true, predicate: ["panelContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "@if (label()) {\r\n  <span class=\"dropdown-label\" [id]=\"labelId\">{{ label() }}</span>\r\n}\r\n\r\n<button\r\n  #trigger\r\n  type=\"button\"\r\n  role=\"combobox\"\r\n  aria-haspopup=\"listbox\"\r\n  [class]=\"wrapperClasses()\"\r\n  [attr.name]=\"name()\"\r\n  [attr.aria-expanded]=\"open() || preview.staticPreview()\"\r\n  [attr.aria-controls]=\"listboxId\"\r\n  [attr.aria-activedescendant]=\"activeDescendant()\"\r\n  [attr.aria-labelledby]=\"label() ? labelId : null\"\r\n  [attr.aria-label]=\"resolvedAriaLabel()\"\r\n  [attr.aria-invalid]=\"error() ? 'true' : null\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <span class=\"trigger-text\" [class.is-placeholder]=\"!hasValue()\">{{ displayLabel() }}</span>\r\n  <span class=\"chevron\"><ds-icon name=\"chevronDown\" [size]=\"14\" /></span>\r\n</button>\r\n\r\n@if (preview.staticPreview()) {\r\n  <div class=\"ds-dropdown-panel\">\r\n    <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\r\n  </div>\r\n}\r\n\r\n<ng-template #panel>\r\n  <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\r\n</ng-template>\r\n\r\n<ng-template #panelContent>\r\n  <div class=\"dropdown-panel\">\r\n    <ul class=\"dropdown-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-labelledby]=\"label() ? labelId : null\">\r\n      @for (opt of options(); track opt.value; let i = $index) {\r\n        <li role=\"presentation\">\r\n          <button\r\n            type=\"button\"\r\n            role=\"option\"\r\n            class=\"option\"\r\n            [id]=\"optionId(i)\"\r\n            [attr.aria-selected]=\"isSelected(opt)\"\r\n            [attr.aria-disabled]=\"opt.disabled ? 'true' : null\"\r\n            [class.is-selected]=\"isSelected(opt)\"\r\n            [class.is-active]=\"isActive(i)\"\r\n            [class.is-disabled]=\"opt.disabled\"\r\n            [disabled]=\"opt.disabled\"\r\n            (click)=\"pick(opt)\"\r\n            (mouseenter)=\"activeIndex.set(i)\"\r\n          >\r\n            @if (opt.icon) {\r\n              <ds-icon class=\"option-icon\" [name]=\"opt.icon\" [size]=\"16\" />\r\n            }\r\n            <span class=\"option-label\">{{ opt.label }}</span>\r\n            @if (isSelected(opt)) {\r\n              <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\r\n            }\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.dropdown-label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1-5)}.dropdown{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:var(--field-pad-y) var(--field-pad-x);height:var(--hit-cozy);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.dropdown .trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown .trigger-text.is-placeholder{color:var(--text-tertiary)}.dropdown .chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--icon-default);transition:transform var(--duration-fast) var(--ease-standard)}.dropdown:hover:not(:disabled){border-color:var(--border-strong)}.dropdown:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open{border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--focus-field-error)}.dropdown.disabled,.dropdown:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.dropdown.disabled .chevron,.dropdown:disabled .chevron{color:var(--icon-muted)}.dropdown.readonly{background:var(--surface-secondary);border-color:var(--border-divider);color:var(--text-secondary);cursor:default}.dropdown.readonly:hover{border-color:var(--border-divider)}.dropdown.readonly .chevron{display:none}.dropdown.sm{height:var(--hit-min);padding:0 var(--space-2)}.dropdown.lg{height:var(--field-h-lg)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-dropdown', standalone: true, imports: [IconComponent, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (label()) {\r\n  <span class=\"dropdown-label\" [id]=\"labelId\">{{ label() }}</span>\r\n}\r\n\r\n<button\r\n  #trigger\r\n  type=\"button\"\r\n  role=\"combobox\"\r\n  aria-haspopup=\"listbox\"\r\n  [class]=\"wrapperClasses()\"\r\n  [attr.name]=\"name()\"\r\n  [attr.aria-expanded]=\"open() || preview.staticPreview()\"\r\n  [attr.aria-controls]=\"listboxId\"\r\n  [attr.aria-activedescendant]=\"activeDescendant()\"\r\n  [attr.aria-labelledby]=\"label() ? labelId : null\"\r\n  [attr.aria-label]=\"resolvedAriaLabel()\"\r\n  [attr.aria-invalid]=\"error() ? 'true' : null\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"toggle()\"\r\n  (keydown)=\"onTriggerKeydown($event)\"\r\n>\r\n  <span class=\"trigger-text\" [class.is-placeholder]=\"!hasValue()\">{{ displayLabel() }}</span>\r\n  <span class=\"chevron\"><ds-icon name=\"chevronDown\" [size]=\"14\" /></span>\r\n</button>\r\n\r\n@if (preview.staticPreview()) {\r\n  <div class=\"ds-dropdown-panel\">\r\n    <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\r\n  </div>\r\n}\r\n\r\n<ng-template #panel>\r\n  <ng-container [ngTemplateOutlet]=\"panelContentTpl()\" />\r\n</ng-template>\r\n\r\n<ng-template #panelContent>\r\n  <div class=\"dropdown-panel\">\r\n    <ul class=\"dropdown-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-labelledby]=\"label() ? labelId : null\">\r\n      @for (opt of options(); track opt.value; let i = $index) {\r\n        <li role=\"presentation\">\r\n          <button\r\n            type=\"button\"\r\n            role=\"option\"\r\n            class=\"option\"\r\n            [id]=\"optionId(i)\"\r\n            [attr.aria-selected]=\"isSelected(opt)\"\r\n            [attr.aria-disabled]=\"opt.disabled ? 'true' : null\"\r\n            [class.is-selected]=\"isSelected(opt)\"\r\n            [class.is-active]=\"isActive(i)\"\r\n            [class.is-disabled]=\"opt.disabled\"\r\n            [disabled]=\"opt.disabled\"\r\n            (click)=\"pick(opt)\"\r\n            (mouseenter)=\"activeIndex.set(i)\"\r\n          >\r\n            @if (opt.icon) {\r\n              <ds-icon class=\"option-icon\" [name]=\"opt.icon\" [size]=\"16\" />\r\n            }\r\n            <span class=\"option-label\">{{ opt.label }}</span>\r\n            @if (isSelected(opt)) {\r\n              <ds-icon class=\"option-check\" name=\"check\" [size]=\"14\" />\r\n            }\r\n          </button>\r\n        </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.dropdown-label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1-5)}.dropdown{display:flex;align-items:center;gap:var(--space-2);width:100%;background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:var(--field-pad-y) var(--field-pad-x);height:var(--hit-cozy);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);text-align:left;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}.dropdown .trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown .trigger-text.is-placeholder{color:var(--text-tertiary)}.dropdown .chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--icon-default);transition:transform var(--duration-fast) var(--ease-standard)}.dropdown:hover:not(:disabled){border-color:var(--border-strong)}.dropdown:focus-visible{outline:none;border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open{border-color:var(--primary);box-shadow:var(--focus-field)}.dropdown.open .chevron{transform:rotate(180deg)}.dropdown.error{background:var(--error-subtle);border-color:var(--error)}.dropdown.error:focus-visible{box-shadow:var(--focus-field-error)}.dropdown.disabled,.dropdown:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.dropdown.disabled .chevron,.dropdown:disabled .chevron{color:var(--icon-muted)}.dropdown.readonly{background:var(--surface-secondary);border-color:var(--border-divider);color:var(--text-secondary);cursor:default}.dropdown.readonly:hover{border-color:var(--border-divider)}.dropdown.readonly .chevron{display:none}.dropdown.sm{height:var(--hit-min);padding:0 var(--space-2)}.dropdown.lg{height:var(--field-h-lg)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], panelContentTpl: [{ type: i0.ViewChild, args: ['panelContent', { isSignal: true }] }] } });
+
+class SkeletonComponent {
+    width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    height = input(undefined, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    circle = input(false, ...(ngDevMode ? [{ debugName: "circle" }] : /* istanbul ignore next */ []));
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SkeletonComponent, isStandalone: true, selector: "ds-skeleton", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "style.width": "width()", "style.height": "height()", "class.circle": "circle()", "class.inline": "inline()" } }, ngImport: i0, template: '', isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;background:var(--surface-secondary);border-radius:var(--radius-md)}:host(.circle){border-radius:var(--radius-pill)}:host(.inline){display:inline-block;vertical-align:middle}:host:after{content:\"\";position:absolute;inset:0;background:var(--surface-muted);pointer-events:none;will-change:mask-position;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 50%,transparent 70%);mask-image:linear-gradient(90deg,transparent 30%,#000 50%,transparent 70%);-webkit-mask-size:200vw 100%;mask-size:200vw 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-attachment:fixed;mask-attachment:fixed;-webkit-mask-position:var(--skeleton-shimmer-x, 100vw) 0;mask-position:var(--skeleton-shimmer-x, 100vw) 0}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-skeleton', standalone: true, template: '', host: {
+                        'aria-hidden': 'true',
+                        '[style.width]': 'width()',
+                        '[style.height]': 'height()',
+                        '[class.circle]': 'circle()',
+                        '[class.inline]': 'inline()',
+                    }, encapsulation: ViewEncapsulation.Emulated, styles: ["@charset \"UTF-8\";:host{display:block;position:relative;overflow:hidden;background:var(--surface-secondary);border-radius:var(--radius-md)}:host(.circle){border-radius:var(--radius-pill)}:host(.inline){display:inline-block;vertical-align:middle}:host:after{content:\"\";position:absolute;inset:0;background:var(--surface-muted);pointer-events:none;will-change:mask-position;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 50%,transparent 70%);mask-image:linear-gradient(90deg,transparent 30%,#000 50%,transparent 70%);-webkit-mask-size:200vw 100%;mask-size:200vw 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-attachment:fixed;mask-attachment:fixed;-webkit-mask-position:var(--skeleton-shimmer-x, 100vw) 0;mask-position:var(--skeleton-shimmer-x, 100vw) 0}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], circle: [{ type: i0.Input, args: [{ isSignal: true, alias: "circle", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }] } });
+
+/**
+ * Projects a custom cell template into <ds-table> for a specific column.
+ *
+ * Usage:
+ *   <ds-table [data]="rows" [columns]="cols">
+ *     <ng-template dsCellTemplate="product" let-row>
+ *       <div>{{ asRule(row).product }}</div>
+ *     </ng-template>
+ *   </ds-table>
+ *
+ * The template context type is `unknown` because Angular cannot propagate
+ * the parent <ds-table>'s row type to projected templates. Consumers should
+ * narrow the row with a typed helper method on the host component.
+ *
+ * Context shape:
+ *   - $implicit: the row object (typed `unknown`)
+ *   - row: alias for the row object (typed `unknown`)
+ */
+class CellTemplateDirective {
+    dsCellTemplate = input.required(...(ngDevMode ? [{ debugName: "dsCellTemplate" }] : /* istanbul ignore next */ []));
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: CellTemplateDirective, isStandalone: true, selector: "[dsCellTemplate]", inputs: { dsCellTemplate: { classPropertyName: "dsCellTemplate", publicName: "dsCellTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dsCellTemplate]',
+                    standalone: true,
+                }]
+        }], propDecorators: { dsCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsCellTemplate", required: true }] }] } });
+
+class TableComponent {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    /** Opt-in outer border + radius. Off by default so tables flush inside a
+     *  `<ds-card padding="none">` (workspaces, programs-list) don't double-border.
+     *  When `true`, the scroll-wrap gets a `var(--border-default)` outline and
+     *  `var(--radius-md)` radius — useful when the table stands alone in a padded card. */
+    bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** false  — no loading state.
+     *  'skeleton' — first-load placeholder; rows are replaced with shimmer
+     *  rows that read the global --skeleton-shimmer-x driver.
+     *  'overlay'  — re-fetch indicator; existing rows stay visible behind
+     *  a translucent overlay with a centred spinner. */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    stickyHeader = input(true, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
+    selectedIds = model(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    sortKey = model(null, ...(ngDevMode ? [{ debugName: "sortKey" }] : /* istanbul ignore next */ []));
+    sortDir = model(null, ...(ngDevMode ? [{ debugName: "sortDir" }] : /* istanbul ignore next */ []));
+    skeletonRows = input(5, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the table (rendered as a visually-hidden caption).
+     *  Without it, screen-reader users get an unlabelled table. */
+    caption = input('', ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+    /** When true, each row becomes a keyboard-operable control (role=button,
+     *  tabindex, Enter/Space → rowClick) with an accessible name from the first
+     *  column. Off by default so non-navigating tables don't advertise a false
+     *  click affordance. */
+    rowInteractive = input(false, ...(ngDevMode ? [{ debugName: "rowInteractive" }] : /* istanbul ignore next */ []));
+    rowClick = output();
+    sortChange = output();
+    /** Cell templates supplied as an explicit map instead of (or in addition to)
+     *  projected `dsCellTemplate` directives. Lets a wrapper component (e.g.
+     *  ids-data-table) collect the directives itself and pass them down, since
+     *  content projected through a wrapper's `<ng-content>` is not seen by this
+     *  component's content query. Entries here override projected ones. */
+    cellTemplateMap = input({}, ...(ngDevMode ? [{ debugName: "cellTemplateMap" }] : /* istanbul ignore next */ []));
+    /** Empty-state template, as an alternative to the `[empty]` content slot —
+     *  again for wrappers that can't rely on slot re-projection. */
+    emptyTemplate = input(null, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    cellTemplateDirectives = contentChildren(CellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellTemplateDirectives" }] : /* istanbul ignore next */ []));
+    cellTemplates = computed(() => {
+        const map = {};
+        for (const dir of this.cellTemplateDirectives()) {
+            map[dir.dsCellTemplate()] = dir.template;
+        }
+        return { ...map, ...this.cellTemplateMap() };
+    }, ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+    cellTemplate(col) {
+        return this.cellTemplates()[col.key] ?? null;
+    }
+    tableClasses = computed(() => {
+        const parts = ['table'];
+        if (this.loading() === 'skeleton')
+            parts.push('skeleton-mode');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "tableClasses" }] : /* istanbul ignore next */ []));
+    isSkeletonLoading = computed(() => this.loading() === 'skeleton', ...(ngDevMode ? [{ debugName: "isSkeletonLoading" }] : /* istanbul ignore next */ []));
+    isOverlayLoading = computed(() => this.loading() === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlayLoading" }] : /* istanbul ignore next */ []));
+    allSelected = computed(() => {
+        const data = this.data();
+        if (data.length === 0)
+            return false;
+        const sel = this.selectedIds();
+        return data.every((row) => sel.has(row.id));
+    }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+    someSelected = computed(() => {
+        const data = this.data();
+        const sel = this.selectedIds();
+        return data.some((row) => sel.has(row.id)) && !this.allSelected();
+    }, ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+    skeletonArray = computed(() => Array(this.skeletonRows()).fill(0), ...(ngDevMode ? [{ debugName: "skeletonArray" }] : /* istanbul ignore next */ []));
+    isSelected(row) {
+        return this.selectedIds().has(row.id);
+    }
+    onToggleAll(event) {
+        const checked = event.target.checked;
+        const next = new Set(this.selectedIds());
+        if (checked) {
+            this.data().forEach((row) => next.add(row.id));
+        }
+        else {
+            this.data().forEach((row) => next.delete(row.id));
+        }
+        this.selectedIds.set(next);
+    }
+    onToggleRow(row, event) {
+        event.stopPropagation();
+        const checked = event.target.checked;
+        const next = new Set(this.selectedIds());
+        if (checked) {
+            next.add(row.id);
+        }
+        else {
+            next.delete(row.id);
+        }
+        this.selectedIds.set(next);
+    }
+    onRowClick(row, event) {
+        if (event.target.closest('input'))
+            return;
+        this.rowClick.emit(row);
+    }
+    onRowKey(row, event) {
+        if (!this.rowInteractive())
+            return;
+        event.preventDefault();
+        this.rowClick.emit(row);
+    }
+    /** Accessible name for an interactive row, taken from the first column. */
+    rowAriaLabel(row) {
+        const first = this.columns()[0];
+        return first ? this.cellValue(row, first) : '';
+    }
+    /** `aria-sort` value for a header: only meaningful on sortable columns. */
+    ariaSort(col) {
+        if (!col.sortable)
+            return null;
+        if (this.sortKey() === col.key && this.sortDir()) {
+            return this.sortDir() === 'asc' ? 'ascending' : 'descending';
+        }
+        return 'none';
+    }
+    onSort(col) {
+        if (!col.sortable)
+            return;
+        const currentKey = this.sortKey();
+        const currentDir = this.sortDir();
+        let dir;
+        if (currentKey !== col.key) {
+            dir = 'asc';
+        }
+        else if (currentDir === 'asc') {
+            dir = 'desc';
+        }
+        else if (currentDir === 'desc') {
+            dir = null;
+        }
+        else {
+            dir = 'asc';
+        }
+        this.sortKey.set(dir ? col.key : null);
+        this.sortDir.set(dir);
+        this.sortChange.emit({ key: col.key, dir });
+    }
+    headerClasses(col) {
+        const parts = [];
+        if (col.sortable)
+            parts.push('sortable');
+        if (this.sortKey() === col.key && this.sortDir()) {
+            parts.push(`sorted-${this.sortDir()}`);
+        }
+        return parts.join(' ');
+    }
+    sortIcon(col) {
+        if (this.sortKey() !== col.key || !this.sortDir())
+            return 'sort';
+        return this.sortDir() === 'asc' ? 'sortAsc' : 'sortDesc';
+    }
+    cellValue(row, col) {
+        if (col.cell)
+            return col.cell(row);
+        return String(row[col.key] ?? '');
+    }
+    /** Deterministic per-cell width so skeleton rows look organic but stable
+     *  across re-renders. Mixes column key + row index into one of five widths. */
+    skeletonWidth(col, rowIndex) {
+        const seed = `${col.key}-${rowIndex}`;
+        let hash = 0;
+        for (let charIndex = 0; charIndex < seed.length; charIndex++) {
+            hash = (hash + seed.charCodeAt(charIndex)) | 0;
+        }
+        const widths = ['45%', '55%', '65%', '75%', '85%'];
+        return widths[Math.abs(hash) % widths.length] ?? '70%';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TableComponent, isStandalone: true, selector: "ds-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, cellTemplateMap: { classPropertyName: "cellTemplateMap", publicName: "cellTemplateMap", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIds: "selectedIdsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClick: "rowClick", sortChange: "sortChange" }, host: { properties: { "class.bordered": "bordered()" } }, queries: [{ propertyName: "cellTemplateDirectives", predicate: CellTemplateDirective, isSignal: true }], ngImport: i0, template: "<div class=\"scroll-wrap\" [class.loading-overlay]=\"isOverlayLoading()\">\r\n  @if (isOverlayLoading()) {\r\n    <div class=\"overlay\" aria-hidden=\"true\">\r\n      <span class=\"spinner\"></span>\r\n    </div>\r\n  }\r\n  <div class=\"visually-hidden\" role=\"status\" aria-live=\"polite\">\r\n    @if (loading() !== false) { Loading\u2026 }\r\n  </div>\r\n  <table [class]=\"tableClasses()\" [attr.role]=\"rowInteractive() ? 'grid' : null\" [attr.aria-busy]=\"loading() !== false ? 'true' : null\">\r\n    @if (caption()) {\r\n      <caption class=\"visually-hidden\">{{ caption() }}</caption>\r\n    }\r\n    <thead>\r\n      <tr>\r\n        @if (selectable()) {\r\n          <th scope=\"col\" class=\"select-col\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"check\"\r\n              aria-label=\"Select all rows\"\r\n              [checked]=\"allSelected()\"\r\n              [indeterminate]=\"someSelected()\"\r\n              (change)=\"onToggleAll($event)\"\r\n            />\r\n          </th>\r\n        }\r\n        @for (col of columns(); track col.key) {\r\n          <th\r\n            scope=\"col\"\r\n            [class]=\"headerClasses(col)\"\r\n            [class.numeric]=\"col.align === 'right'\"\r\n            [attr.aria-sort]=\"ariaSort(col)\"\r\n          >\r\n            @if (col.sortable) {\r\n              <button type=\"button\" class=\"th-label\" (click)=\"onSort(col)\">\r\n                {{ col.label }}\r\n                <ds-icon class=\"sort-icon\" [name]=\"sortIcon(col)\" [size]=\"12\"></ds-icon>\r\n              </button>\r\n            } @else {\r\n              <span class=\"th-label\">{{ col.label }}</span>\r\n            }\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @if (isSkeletonLoading()) {\r\n        @for (_ of skeletonArray(); track $index; let rowIndex = $index) {\r\n          <tr>\r\n            @if (selectable()) {\r\n              <td><ds-skeleton width=\"14px\" height=\"14px\" [inline]=\"true\" /></td>\r\n            }\r\n            @for (col of columns(); track col.key) {\r\n              <td [class.numeric]=\"col.align === 'right'\">\r\n                <ds-skeleton [width]=\"skeletonWidth(col, rowIndex)\" height=\"14px\" [inline]=\"true\" />\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      } @else if (!data().length) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\r\n            class=\"empty\"\r\n          >\r\n            @if (emptyTemplate()) {\r\n              <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\"></ng-container>\r\n            } @else {\r\n              <ng-content select=\"[empty]\"></ng-content>\r\n            }\r\n          </td>\r\n        </tr>\r\n      } @else {\r\n        @for (row of data(); track row.id) {\r\n          <tr\r\n            [class.selected]=\"isSelected(row)\"\r\n            [class.clickable]=\"rowInteractive()\"\r\n            [attr.tabindex]=\"rowInteractive() ? 0 : null\"\r\n            [attr.aria-label]=\"rowInteractive() ? rowAriaLabel(row) : null\"\r\n            (click)=\"onRowClick(row, $event)\"\r\n            (keydown.enter)=\"onRowKey(row, $event)\"\r\n            (keydown.space)=\"onRowKey(row, $event)\"\r\n          >\r\n            @if (selectable()) {\r\n              <td>\r\n                <input\r\n                  type=\"checkbox\"\r\n                  class=\"check\"\r\n                  [attr.aria-label]=\"'Select ' + rowAriaLabel(row)\"\r\n                  [checked]=\"isSelected(row)\"\r\n                  (change)=\"onToggleRow(row, $event)\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                />\r\n              </td>\r\n            }\r\n            @for (col of columns(); track col.key) {\r\n              <td [class.numeric]=\"col.align === 'right'\">\r\n                @if (cellTemplate(col); as tpl) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"tpl\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\r\n                  ></ng-container>\r\n                } @else {\r\n                  {{ cellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n@if (selectable() && someSelected()) {\r\n  <div class=\"bulk-bar\">\r\n    <span class=\"count\">{{ selectedIds().size }} selected</span>\r\n    <span class=\"sep\"></span>\r\n    <ng-content select=\"[bulk-actions]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.bordered) .scroll-wrap{border:var(--border-width-default) solid var(--_table-border);border-radius:var(--_table-radius)}.scroll-wrap{--_table-border: var(--ds-table-border, var(--border-default));--_table-radius: var(--ds-table-radius, var(--radius-md));--_table-bg: var(--ds-table-bg, var(--surface-default));width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--surface-default);box-sizing:border-box}.scroll-wrap.loading-overlay{position:relative}.scroll-wrap .overlay{position:absolute;inset:var(--ds-table-head-h, 40px) 0 0 0;z-index:var(--layer-popover, 30);display:grid;place-items:center;background:#fff9;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all}.scroll-wrap .spinner{width:var(--spinner-md, 24px);height:var(--spinner-md, 24px);border:var(--border-width-strong, 2px) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:ds-table-overlay-spin var(--duration-loop-fast, .7s) linear infinite}@keyframes ds-table-overlay-spin{to{transform:rotate(360deg)}}.table{--_table-bg: var(--ds-table-bg, var(--surface-default));--_table-row-hover-bg: var(--ds-table-row-hover-bg, var(--surface-secondary));--_table-row-selected-bg: var(--ds-table-row-selected-bg, var(--primary-subtle));--_table-head-fg: var(--ds-table-head-fg, var(--text-secondary));--_table-head-bg: var(--ds-table-head-bg, var(--surface-secondary));--_table-head-fs: var(--ds-table-head-fs, var(--font-size-xs));--_table-divider: var(--ds-table-divider, var(--border-divider));--_table-sort-active-fg: var(--ds-table-sort-active-fg, var(--primary));--_table-cell-pad-x: var(--ds-table-cell-pad-x, var(--table-cell-pad-x));--_table-cell-pad-y: var(--ds-table-cell-pad-y, var(--table-cell-pad-y));width:100%;border-collapse:collapse;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);background:var(--_table-bg)}.table thead th{text-align:left;padding:var(--table-head-pad-y) var(--_table-cell-pad-x);font:var(--font-weight-bold) var(--_table-head-fs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_table-head-fg);background:var(--_table-head-bg);border-bottom:var(--border-width-default) solid var(--_table-divider);white-space:nowrap;position:sticky;top:0;z-index:var(--table-sticky-header-z)}.table thead th .th-label{display:inline-flex;align-items:center;vertical-align:middle;appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left}.table thead th button.th-label{cursor:pointer;-webkit-user-select:none;user-select:none}.table thead th button.th-label:hover{color:var(--text-secondary)}.table thead th button.th-label:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.table thead th .sort-icon{display:inline-block;width:var(--sort-ic-size);height:var(--sort-ic-size);margin-left:var(--sort-ic-gap);vertical-align:middle;transform:translateY(-1px);color:var(--icon-default);opacity:.4}.table thead th .sort-icon .icon{width:var(--sort-ic-size);height:var(--sort-ic-size);display:block}.table thead th.sorted-asc .sort-icon,.table thead th.sorted-desc .sort-icon{opacity:1;color:var(--_table-sort-active-fg)}.table thead th.numeric{text-align:right}.table thead th.select-col{width:var(--space-10)}.table tbody td{padding:var(--_table-cell-pad-y) var(--_table-cell-pad-x);line-height:var(--line-height-flat);box-shadow:inset 0 calc(-1 * var(--border-width-default)) 0 var(--_table-divider);vertical-align:middle}.table tbody td.numeric{text-align:right}.table tbody td.empty{text-align:center;color:var(--text-tertiary);padding:var(--space-4)}.table tbody tr:last-child td{box-shadow:none}.table tbody tr:hover td{background:var(--_table-row-hover-bg)}.table tbody tr.selected td{background:var(--_table-row-selected-bg)}.table tbody tr.clickable{cursor:pointer}.table tbody tr.clickable:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}.table.compact tbody td,.table.compact thead th{padding:var(--space-2) var(--space-3)}.table.skeleton-mode tbody tr:hover td{background:transparent;cursor:default}.table.skeleton-mode tbody tr.clickable{cursor:default}.table.sticky-col tbody td:first-child,.table.sticky-col thead th:first-child{position:sticky;left:0;background:inherit;z-index:var(--table-sticky-col-z)}.table.sticky-col thead th:first-child{z-index:var(--table-sticky-corner-z)}.bulk-bar{position:sticky;bottom:var(--bulk-bar-offset);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-inverted);color:var(--text-inverted);border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);margin:var(--space-4) auto 0;width:fit-content}.bulk-bar .count{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.bulk-bar .sep{width:var(--border-width-default);height:var(--space-4);background:var(--border-inverted)}.bulk-bar .button{background:transparent;color:var(--text-inverted)}.bulk-bar .button:hover{background:var(--surface-inverted-hover)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkeletonComponent, selector: "ds-skeleton", inputs: ["width", "height", "circle", "inline"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-table', standalone: true, imports: [IconComponent, NgTemplateOutlet, SkeletonComponent], encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[class.bordered]': 'bordered()',
+                    }, template: "<div class=\"scroll-wrap\" [class.loading-overlay]=\"isOverlayLoading()\">\r\n  @if (isOverlayLoading()) {\r\n    <div class=\"overlay\" aria-hidden=\"true\">\r\n      <span class=\"spinner\"></span>\r\n    </div>\r\n  }\r\n  <div class=\"visually-hidden\" role=\"status\" aria-live=\"polite\">\r\n    @if (loading() !== false) { Loading\u2026 }\r\n  </div>\r\n  <table [class]=\"tableClasses()\" [attr.role]=\"rowInteractive() ? 'grid' : null\" [attr.aria-busy]=\"loading() !== false ? 'true' : null\">\r\n    @if (caption()) {\r\n      <caption class=\"visually-hidden\">{{ caption() }}</caption>\r\n    }\r\n    <thead>\r\n      <tr>\r\n        @if (selectable()) {\r\n          <th scope=\"col\" class=\"select-col\">\r\n            <input\r\n              type=\"checkbox\"\r\n              class=\"check\"\r\n              aria-label=\"Select all rows\"\r\n              [checked]=\"allSelected()\"\r\n              [indeterminate]=\"someSelected()\"\r\n              (change)=\"onToggleAll($event)\"\r\n            />\r\n          </th>\r\n        }\r\n        @for (col of columns(); track col.key) {\r\n          <th\r\n            scope=\"col\"\r\n            [class]=\"headerClasses(col)\"\r\n            [class.numeric]=\"col.align === 'right'\"\r\n            [attr.aria-sort]=\"ariaSort(col)\"\r\n          >\r\n            @if (col.sortable) {\r\n              <button type=\"button\" class=\"th-label\" (click)=\"onSort(col)\">\r\n                {{ col.label }}\r\n                <ds-icon class=\"sort-icon\" [name]=\"sortIcon(col)\" [size]=\"12\"></ds-icon>\r\n              </button>\r\n            } @else {\r\n              <span class=\"th-label\">{{ col.label }}</span>\r\n            }\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @if (isSkeletonLoading()) {\r\n        @for (_ of skeletonArray(); track $index; let rowIndex = $index) {\r\n          <tr>\r\n            @if (selectable()) {\r\n              <td><ds-skeleton width=\"14px\" height=\"14px\" [inline]=\"true\" /></td>\r\n            }\r\n            @for (col of columns(); track col.key) {\r\n              <td [class.numeric]=\"col.align === 'right'\">\r\n                <ds-skeleton [width]=\"skeletonWidth(col, rowIndex)\" height=\"14px\" [inline]=\"true\" />\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      } @else if (!data().length) {\r\n        <tr>\r\n          <td\r\n            [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\"\r\n            class=\"empty\"\r\n          >\r\n            @if (emptyTemplate()) {\r\n              <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\"></ng-container>\r\n            } @else {\r\n              <ng-content select=\"[empty]\"></ng-content>\r\n            }\r\n          </td>\r\n        </tr>\r\n      } @else {\r\n        @for (row of data(); track row.id) {\r\n          <tr\r\n            [class.selected]=\"isSelected(row)\"\r\n            [class.clickable]=\"rowInteractive()\"\r\n            [attr.tabindex]=\"rowInteractive() ? 0 : null\"\r\n            [attr.aria-label]=\"rowInteractive() ? rowAriaLabel(row) : null\"\r\n            (click)=\"onRowClick(row, $event)\"\r\n            (keydown.enter)=\"onRowKey(row, $event)\"\r\n            (keydown.space)=\"onRowKey(row, $event)\"\r\n          >\r\n            @if (selectable()) {\r\n              <td>\r\n                <input\r\n                  type=\"checkbox\"\r\n                  class=\"check\"\r\n                  [attr.aria-label]=\"'Select ' + rowAriaLabel(row)\"\r\n                  [checked]=\"isSelected(row)\"\r\n                  (change)=\"onToggleRow(row, $event)\"\r\n                  (click)=\"$event.stopPropagation()\"\r\n                />\r\n              </td>\r\n            }\r\n            @for (col of columns(); track col.key) {\r\n              <td [class.numeric]=\"col.align === 'right'\">\r\n                @if (cellTemplate(col); as tpl) {\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"tpl\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: row, row: row }\"\r\n                  ></ng-container>\r\n                } @else {\r\n                  {{ cellValue(row, col) }}\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n@if (selectable() && someSelected()) {\r\n  <div class=\"bulk-bar\">\r\n    <span class=\"count\">{{ selectedIds().size }} selected</span>\r\n    <span class=\"sep\"></span>\r\n    <ng-content select=\"[bulk-actions]\"></ng-content>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.bordered) .scroll-wrap{border:var(--border-width-default) solid var(--_table-border);border-radius:var(--_table-radius)}.scroll-wrap{--_table-border: var(--ds-table-border, var(--border-default));--_table-radius: var(--ds-table-radius, var(--radius-md));--_table-bg: var(--ds-table-bg, var(--surface-default));width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;background:var(--surface-default);box-sizing:border-box}.scroll-wrap.loading-overlay{position:relative}.scroll-wrap .overlay{position:absolute;inset:var(--ds-table-head-h, 40px) 0 0 0;z-index:var(--layer-popover, 30);display:grid;place-items:center;background:#fff9;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);pointer-events:all}.scroll-wrap .spinner{width:var(--spinner-md, 24px);height:var(--spinner-md, 24px);border:var(--border-width-strong, 2px) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:ds-table-overlay-spin var(--duration-loop-fast, .7s) linear infinite}@keyframes ds-table-overlay-spin{to{transform:rotate(360deg)}}.table{--_table-bg: var(--ds-table-bg, var(--surface-default));--_table-row-hover-bg: var(--ds-table-row-hover-bg, var(--surface-secondary));--_table-row-selected-bg: var(--ds-table-row-selected-bg, var(--primary-subtle));--_table-head-fg: var(--ds-table-head-fg, var(--text-secondary));--_table-head-bg: var(--ds-table-head-bg, var(--surface-secondary));--_table-head-fs: var(--ds-table-head-fs, var(--font-size-xs));--_table-divider: var(--ds-table-divider, var(--border-divider));--_table-sort-active-fg: var(--ds-table-sort-active-fg, var(--primary));--_table-cell-pad-x: var(--ds-table-cell-pad-x, var(--table-cell-pad-x));--_table-cell-pad-y: var(--ds-table-cell-pad-y, var(--table-cell-pad-y));width:100%;border-collapse:collapse;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary);background:var(--_table-bg)}.table thead th{text-align:left;padding:var(--table-head-pad-y) var(--_table-cell-pad-x);font:var(--font-weight-bold) var(--_table-head-fs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--_table-head-fg);background:var(--_table-head-bg);border-bottom:var(--border-width-default) solid var(--_table-divider);white-space:nowrap;position:sticky;top:0;z-index:var(--table-sticky-header-z)}.table thead th .th-label{display:inline-flex;align-items:center;vertical-align:middle;appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left}.table thead th button.th-label{cursor:pointer;-webkit-user-select:none;user-select:none}.table thead th button.th-label:hover{color:var(--text-secondary)}.table thead th button.th-label:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.table thead th .sort-icon{display:inline-block;width:var(--sort-ic-size);height:var(--sort-ic-size);margin-left:var(--sort-ic-gap);vertical-align:middle;transform:translateY(-1px);color:var(--icon-default);opacity:.4}.table thead th .sort-icon .icon{width:var(--sort-ic-size);height:var(--sort-ic-size);display:block}.table thead th.sorted-asc .sort-icon,.table thead th.sorted-desc .sort-icon{opacity:1;color:var(--_table-sort-active-fg)}.table thead th.numeric{text-align:right}.table thead th.select-col{width:var(--space-10)}.table tbody td{padding:var(--_table-cell-pad-y) var(--_table-cell-pad-x);line-height:var(--line-height-flat);box-shadow:inset 0 calc(-1 * var(--border-width-default)) 0 var(--_table-divider);vertical-align:middle}.table tbody td.numeric{text-align:right}.table tbody td.empty{text-align:center;color:var(--text-tertiary);padding:var(--space-4)}.table tbody tr:last-child td{box-shadow:none}.table tbody tr:hover td{background:var(--_table-row-hover-bg)}.table tbody tr.selected td{background:var(--_table-row-selected-bg)}.table tbody tr.clickable{cursor:pointer}.table tbody tr.clickable:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}.table.compact tbody td,.table.compact thead th{padding:var(--space-2) var(--space-3)}.table.skeleton-mode tbody tr:hover td{background:transparent;cursor:default}.table.skeleton-mode tbody tr.clickable{cursor:default}.table.sticky-col tbody td:first-child,.table.sticky-col thead th:first-child{position:sticky;left:0;background:inherit;z-index:var(--table-sticky-col-z)}.table.sticky-col thead th:first-child{z-index:var(--table-sticky-corner-z)}.bulk-bar{position:sticky;bottom:var(--bulk-bar-offset);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-inverted);color:var(--text-inverted);border-radius:var(--radius-lg);box-shadow:var(--shadow-toast);margin:var(--space-4) auto 0;width:fit-content}.bulk-bar .count{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.bulk-bar .sep{width:var(--border-width-default);height:var(--space-4);background:var(--border-inverted)}.bulk-bar .button{background:transparent;color:var(--text-inverted)}.bulk-bar .button:hover{background:var(--surface-inverted-hover)}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], cellTemplateMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplateMap", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], cellTemplateDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CellTemplateDirective), { isSignal: true }] }] } });
+
+class PaginationComponent {
+    total = input.required(...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    showLabel = input(true, ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    pageChange = output();
+    pageSizeChange = output();
+    totalPages = computed(() => Math.max(1, Math.ceil(this.total() / this.pageSize())), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    pageItems = computed(() => {
+        const total = this.totalPages();
+        const current = this.currentPage();
+        if (total <= 7) {
+            return Array.from({ length: total }, (_, i) => i + 1);
+        }
+        const items = [1];
+        if (current > 3)
+            items.push('ellipsis');
+        const start = Math.max(2, current - 1);
+        const end = Math.min(total - 1, current + 1);
+        for (let i = start; i <= end; i++)
+            items.push(i);
+        if (current < total - 2)
+            items.push('ellipsis');
+        items.push(total);
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "pageItems" }] : /* istanbul ignore next */ []));
+    rangeLabel = computed(() => {
+        const start = (this.currentPage() - 1) * this.pageSize() + 1;
+        const end = Math.min(this.currentPage() * this.pageSize(), this.total());
+        return `Showing ${start}–${end} of ${this.total()}`;
+    }, ...(ngDevMode ? [{ debugName: "rangeLabel" }] : /* istanbul ignore next */ []));
+    sizeOptions = computed(() => {
+        const presets = this.pageSizeOptions();
+        const current = this.pageSize();
+        const merged = presets.includes(current) ? presets : [current, ...presets].sort((a, b) => a - b);
+        return merged.map((n) => ({ label: `${n} per page`, value: String(n) }));
+    }, ...(ngDevMode ? [{ debugName: "sizeOptions" }] : /* istanbul ignore next */ []));
+    pageSizeStr = computed(() => String(this.pageSize()), ...(ngDevMode ? [{ debugName: "pageSizeStr" }] : /* istanbul ignore next */ []));
+    goTo(page) {
+        if (page < 1 || page > this.totalPages() || page === this.currentPage())
+            return;
+        this.currentPage.set(page);
+        this.pageChange.emit(page);
+    }
+    onSizeChange(value) {
+        const next = Number(value);
+        this.pageSize.set(next);
+        this.currentPage.set(1);
+        this.pageSizeChange.emit(next);
+        this.pageChange.emit(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PaginationComponent, isStandalone: true, selector: "ds-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, ngImport: i0, template: "<nav class=\"pagination\" aria-label=\"Pagination\">\r\n  @if (showLabel()) {\r\n    <span class=\"label\">{{ rangeLabel() }}</span>\r\n  }\r\n  <button class=\"pagination-button\" type=\"button\" aria-label=\"Previous page\" [disabled]=\"currentPage() === 1\" (click)=\"goTo(currentPage() - 1)\">\r\n    <ds-icon name=\"chevronLeft\" [size]=\"14\"></ds-icon>\r\n  </button>\r\n  @for (item of pageItems(); track $index) {\r\n    @if (item === 'ellipsis') {\r\n      <span class=\"ellipsis\" aria-hidden=\"true\">\u2026</span>\r\n    } @else {\r\n      <button\r\n        class=\"pagination-button\"\r\n        type=\"button\"\r\n        [class.active]=\"item === currentPage()\"\r\n        [attr.aria-label]=\"'Page ' + item\"\r\n        [attr.aria-current]=\"item === currentPage() ? 'page' : null\"\r\n        (click)=\"goTo(item)\"\r\n      >{{ item }}</button>\r\n    }\r\n  }\r\n  <button class=\"pagination-button\" type=\"button\" aria-label=\"Next page\" [disabled]=\"currentPage() === totalPages()\" (click)=\"goTo(currentPage() + 1)\">\r\n    <ds-icon name=\"chevronRight\" [size]=\"14\"></ds-icon>\r\n  </button>\r\n  <ds-select\r\n    class=\"size\"\r\n    ariaLabel=\"Rows per page\"\r\n    [options]=\"sizeOptions()\"\r\n    [value]=\"pageSizeStr()\"\r\n    (valueChange)=\"onSizeChange($event)\"\r\n    size=\"sm\"\r\n  ></ds-select>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.pagination{--_pagination-btn-bg: var(--ds-pagination-btn-bg, var(--surface-default));--_pagination-btn-bg-hover: var(--ds-pagination-btn-bg-hover, var(--surface-secondary));--_pagination-btn-fg: var(--ds-pagination-btn-fg, var(--text-secondary));--_pagination-btn-fg-hover: var(--ds-pagination-btn-fg-hover, var(--text-primary));--_pagination-btn-border: var(--ds-pagination-btn-border, var(--border-default));--_pagination-active-bg: var(--ds-pagination-active-bg, var(--primary));--_pagination-active-bg-hover: var(--ds-pagination-active-bg-hover, var(--primary-hover));--_pagination-active-fg: var(--ds-pagination-active-fg, var(--primary-on));--_pagination-radius: var(--ds-pagination-radius, var(--radius-md));display:inline-flex;gap:var(--space-1);align-items:center;flex-wrap:wrap}.pagination .label{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-secondary);margin-right:var(--space-2)}.pagination .pagination-button{min-width:var(--hit-min);height:var(--hit-min);padding:0 var(--space-2);border:var(--border-width-default) solid var(--_pagination-btn-border);background:var(--_pagination-btn-bg);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_pagination-btn-fg);border-radius:var(--_pagination-radius);cursor:pointer;display:inline-grid;place-items:center}.pagination .pagination-button:hover:not([disabled]):not(.active){background:var(--_pagination-btn-bg-hover);color:var(--_pagination-btn-fg-hover)}.pagination .pagination-button.active{background:var(--_pagination-active-bg);color:var(--_pagination-active-fg);border-color:var(--_pagination-active-bg)}.pagination .pagination-button.active:hover:not([disabled]){background:var(--_pagination-active-bg-hover);border-color:var(--_pagination-active-bg-hover)}.pagination .pagination-button[disabled]{color:var(--text-disabled);cursor:not-allowed}.pagination .pagination-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.pagination .ellipsis{padding:0 var(--space-2);color:var(--text-tertiary)}.pagination .size{margin-left:var(--space-2);width:auto;flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "component", type: SelectComponent, selector: "ds-select", inputs: ["value", "options", "placeholder", "size", "label", "disabled", "invalid", "required", "optional", "name", "ariaLabel"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-pagination', standalone: true, imports: [FormsModule, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav class=\"pagination\" aria-label=\"Pagination\">\r\n  @if (showLabel()) {\r\n    <span class=\"label\">{{ rangeLabel() }}</span>\r\n  }\r\n  <button class=\"pagination-button\" type=\"button\" aria-label=\"Previous page\" [disabled]=\"currentPage() === 1\" (click)=\"goTo(currentPage() - 1)\">\r\n    <ds-icon name=\"chevronLeft\" [size]=\"14\"></ds-icon>\r\n  </button>\r\n  @for (item of pageItems(); track $index) {\r\n    @if (item === 'ellipsis') {\r\n      <span class=\"ellipsis\" aria-hidden=\"true\">\u2026</span>\r\n    } @else {\r\n      <button\r\n        class=\"pagination-button\"\r\n        type=\"button\"\r\n        [class.active]=\"item === currentPage()\"\r\n        [attr.aria-label]=\"'Page ' + item\"\r\n        [attr.aria-current]=\"item === currentPage() ? 'page' : null\"\r\n        (click)=\"goTo(item)\"\r\n      >{{ item }}</button>\r\n    }\r\n  }\r\n  <button class=\"pagination-button\" type=\"button\" aria-label=\"Next page\" [disabled]=\"currentPage() === totalPages()\" (click)=\"goTo(currentPage() + 1)\">\r\n    <ds-icon name=\"chevronRight\" [size]=\"14\"></ds-icon>\r\n  </button>\r\n  <ds-select\r\n    class=\"size\"\r\n    ariaLabel=\"Rows per page\"\r\n    [options]=\"sizeOptions()\"\r\n    [value]=\"pageSizeStr()\"\r\n    (valueChange)=\"onSizeChange($event)\"\r\n    size=\"sm\"\r\n  ></ds-select>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.pagination{--_pagination-btn-bg: var(--ds-pagination-btn-bg, var(--surface-default));--_pagination-btn-bg-hover: var(--ds-pagination-btn-bg-hover, var(--surface-secondary));--_pagination-btn-fg: var(--ds-pagination-btn-fg, var(--text-secondary));--_pagination-btn-fg-hover: var(--ds-pagination-btn-fg-hover, var(--text-primary));--_pagination-btn-border: var(--ds-pagination-btn-border, var(--border-default));--_pagination-active-bg: var(--ds-pagination-active-bg, var(--primary));--_pagination-active-bg-hover: var(--ds-pagination-active-bg-hover, var(--primary-hover));--_pagination-active-fg: var(--ds-pagination-active-fg, var(--primary-on));--_pagination-radius: var(--ds-pagination-radius, var(--radius-md));display:inline-flex;gap:var(--space-1);align-items:center;flex-wrap:wrap}.pagination .label{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-secondary);margin-right:var(--space-2)}.pagination .pagination-button{min-width:var(--hit-min);height:var(--hit-min);padding:0 var(--space-2);border:var(--border-width-default) solid var(--_pagination-btn-border);background:var(--_pagination-btn-bg);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_pagination-btn-fg);border-radius:var(--_pagination-radius);cursor:pointer;display:inline-grid;place-items:center}.pagination .pagination-button:hover:not([disabled]):not(.active){background:var(--_pagination-btn-bg-hover);color:var(--_pagination-btn-fg-hover)}.pagination .pagination-button.active{background:var(--_pagination-active-bg);color:var(--_pagination-active-fg);border-color:var(--_pagination-active-bg)}.pagination .pagination-button.active:hover:not([disabled]){background:var(--_pagination-active-bg-hover);border-color:var(--_pagination-active-bg-hover)}.pagination .pagination-button[disabled]{color:var(--text-disabled);cursor:not-allowed}.pagination .pagination-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.pagination .ellipsis{padding:0 var(--space-2);color:var(--text-tertiary)}.pagination .size{margin-left:var(--space-2);width:auto;flex:0 0 auto}\n"] }]
+        }], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
+
+let nextId$5 = 0;
+class DatePickerComponent {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    mode = input('single', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select date', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    optional = input(false, ...(ngDevMode ? [{ debugName: "optional" }] : /* istanbul ignore next */ []));
+    /** Accessible name when no visible `label` is provided. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    uid = `ds-datepicker-${++nextId$5}`;
+    labelId = `${this.uid}-label`;
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    /** The day that holds keyboard focus in the open grid (roving tabindex). */
+    gridFocus = signal(null, ...(ngDevMode ? [{ debugName: "gridFocus" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() || this.placeholder() || null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    dayKey(d) {
+        return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+    }
+    isFocusDay(cell) {
+        const f = this.gridFocus();
+        return !!f && this.dayKey(f) === this.dayKey(cell.date);
+    }
+    /** Arrow-key roving navigation across the calendar grid (APG date grid). */
+    onGridKeydown(event, cell) {
+        const f = this.gridFocus() ?? cell.date;
+        let next = null;
+        switch (event.key) {
+            case 'ArrowLeft':
+                next = this.addDays(f, -1);
+                break;
+            case 'ArrowRight':
+                next = this.addDays(f, 1);
+                break;
+            case 'ArrowUp':
+                next = this.addDays(f, -7);
+                break;
+            case 'ArrowDown':
+                next = this.addDays(f, 7);
+                break;
+            case 'Home':
+                next = this.addDays(f, -((f.getDay() + 6) % 7));
+                break;
+            case 'End':
+                next = this.addDays(f, 6 - ((f.getDay() + 6) % 7));
+                break;
+            case 'PageUp':
+                next = this.addMonths(f, -1);
+                break;
+            case 'PageDown':
+                next = this.addMonths(f, 1);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                this.selectDay(cell);
+                return;
+            case 'Escape':
+                event.preventDefault();
+                this.close();
+                this.trigger().nativeElement.focus();
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.gridFocus.set(next);
+        this.viewMonth.set(new Date(next.getFullYear(), next.getMonth(), 1));
+        setTimeout(() => this.focusGridDay());
+    }
+    addDays(date, n) {
+        const d = new Date(date);
+        d.setDate(d.getDate() + n);
+        return d;
+    }
+    addMonths(date, n) {
+        const d = new Date(date);
+        d.setMonth(d.getMonth() + n);
+        return d;
+    }
+    focusGridDay() {
+        const f = this.gridFocus();
+        if (!f || !this.overlayRef)
+            return;
+        const el = this.overlayRef.overlayElement.querySelector(`[data-day="${this.dayKey(f)}"]`);
+        el?.focus();
+    }
+    /** Full, unambiguous date for a day cell's accessible name. */
+    dayLabel(cell) {
+        return cell.date.toLocaleDateString(undefined, {
+            weekday: 'long',
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric',
+        });
+    }
+    triggerClasses = computed(() => {
+        const size = this.size();
+        return size === 'md' ? 'trigger' : `trigger ${size}`;
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    viewMonth = signal(new Date(), ...(ngDevMode ? [{ debugName: "viewMonth" }] : /* istanbul ignore next */ []));
+    trigger = viewChild.required('trigger');
+    panelTpl = viewChild.required('panel');
+    overlayRef = null;
+    displayLabel = computed(() => {
+        const v = this.value();
+        if (this.mode() === 'single') {
+            const d = v;
+            return d ? d.toLocaleDateString() : this.placeholder();
+        }
+        const r = v ?? [null, null];
+        const a = r[0];
+        const b = r[1];
+        if (a && b)
+            return `${a.toLocaleDateString()} – ${b.toLocaleDateString()}`;
+        if (a)
+            return `${a.toLocaleDateString()} – …`;
+        return this.placeholder();
+    }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    monthLabel = computed(() => {
+        const m = this.viewMonth();
+        return m.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
+    }, ...(ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []));
+    daysGrid = computed(() => {
+        const view = this.viewMonth();
+        const year = view.getFullYear();
+        const month = view.getMonth();
+        const firstOfMonth = new Date(year, month, 1);
+        const gridStart = new Date(firstOfMonth);
+        gridStart.setDate(gridStart.getDate() - ((gridStart.getDay() + 6) % 7));
+        const cells = [];
+        const today = new Date();
+        const todayKey = today.toDateString();
+        for (let i = 0; i < 42; i++) {
+            const d = new Date(gridStart);
+            d.setDate(d.getDate() + i);
+            const inMonth = d.getMonth() === month;
+            const isToday = d.toDateString() === todayKey;
+            const range = this.getRangeContext(d);
+            cells.push({
+                date: d,
+                day: d.getDate(),
+                inMonth,
+                isToday,
+                inRange: range.inRange,
+                isRangeStart: range.isStart,
+                isRangeEnd: range.isEnd,
+                isSelected: range.isSelected,
+            });
+        }
+        return cells;
+    }, ...(ngDevMode ? [{ debugName: "daysGrid" }] : /* istanbul ignore next */ []));
+    getRangeContext(d) {
+        const v = this.value();
+        if (this.mode() === 'single') {
+            const sel = v;
+            return { inRange: false, isStart: false, isEnd: false, isSelected: !!sel && sel.toDateString() === d.toDateString() };
+        }
+        const r = v ?? [null, null];
+        const a = r[0];
+        const b = r[1];
+        if (!a)
+            return { inRange: false, isStart: false, isEnd: false, isSelected: false };
+        if (!b)
+            return { inRange: false, isStart: a.toDateString() === d.toDateString(), isEnd: false, isSelected: false };
+        const t = d.getTime();
+        const aT = a.getTime();
+        const bT = b.getTime();
+        return {
+            inRange: t > Math.min(aT, bT) && t < Math.max(aT, bT),
+            isStart: t === Math.min(aT, bT),
+            isEnd: t === Math.max(aT, bT),
+            isSelected: false,
+        };
+    }
+    open() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(this.trigger().nativeElement)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        const cfg = {
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        };
+        this.overlayRef = this.overlay.create(cfg);
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        const portal = new TemplatePortal(this.panelTpl(), this.vcr);
+        this.overlayRef.attach(portal);
+        this.isOpen.set(true);
+        // Seed grid focus on the selected day (or today) and move focus into it.
+        const selected = this.mode() === 'single'
+            ? this.value()
+            : (this.value()?.[0] ?? null);
+        const focus = selected ?? new Date();
+        this.gridFocus.set(focus);
+        this.viewMonth.set(new Date(focus.getFullYear(), focus.getMonth(), 1));
+        setTimeout(() => this.focusGridDay());
+    }
+    close() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+    }
+    prevMonth() {
+        const m = new Date(this.viewMonth());
+        m.setMonth(m.getMonth() - 1);
+        this.viewMonth.set(m);
+    }
+    nextMonth() {
+        const m = new Date(this.viewMonth());
+        m.setMonth(m.getMonth() + 1);
+        this.viewMonth.set(m);
+    }
+    selectDay(cell) {
+        if (this.mode() === 'single') {
+            this.value.set(new Date(cell.date));
+            this.close();
+            this.trigger().nativeElement.focus();
+            return;
+        }
+        const r = this.value() ?? [null, null];
+        const a = r[0];
+        const b = r[1];
+        if (!a || (a && b)) {
+            this.value.set([new Date(cell.date), null]);
+            this.gridFocus.set(new Date(cell.date));
+        }
+        else {
+            const picked = new Date(cell.date);
+            const range = a.getTime() <= picked.getTime() ? [a, picked] : [picked, a];
+            this.value.set(range);
+            this.close();
+            this.trigger().nativeElement.focus();
+        }
+    }
+    cellClasses(cell) {
+        const parts = ['day'];
+        if (!cell.inMonth)
+            parts.push('muted');
+        if (cell.isToday)
+            parts.push('today');
+        if (cell.inRange)
+            parts.push('in-range');
+        if (cell.isRangeStart)
+            parts.push('range-start');
+        if (cell.isRangeEnd)
+            parts.push('range-end');
+        if (cell.isSelected)
+            parts.push('selected');
+        return parts.join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DatePickerComponent, isStandalone: true, selector: "ds-date-picker", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"field\">\r\n  @if (label()) {\r\n    <span class=\"label\" [id]=\"labelId\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"req\" aria-hidden=\"true\">*</span>\r\n      } @else if (optional()) {\r\n        <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n      }\r\n    </span>\r\n  }\r\n  <button\r\n    #trigger\r\n    type=\"button\"\r\n    aria-haspopup=\"dialog\"\r\n    [class]=\"triggerClasses()\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId : null\"\r\n    [attr.aria-label]=\"resolvedAriaLabel()\"\r\n    [attr.aria-required]=\"required() ? 'true' : null\"\r\n    (click)=\"open()\"\r\n  >\r\n    <ds-icon name=\"calendar\" [size]=\"14\"></ds-icon>\r\n    <span>{{ displayLabel() }}</span>\r\n  </button>\r\n  @if (hint()) {\r\n    <small class=\"hint\">{{ hint() }}</small>\r\n  }\r\n</div>\r\n\r\n<ng-template #panel>\r\n  <div class=\"calendar\">\r\n    <div class=\"head\">\r\n      <span class=\"title\">{{ monthLabel() }}</span>\r\n      <span class=\"nav\">\r\n        <button type=\"button\" (click)=\"prevMonth()\">\r\n          <ds-icon name=\"chevronLeft\" [size]=\"14\"></ds-icon>\r\n        </button>\r\n        <button type=\"button\" (click)=\"nextMonth()\">\r\n          <ds-icon name=\"chevronRight\" [size]=\"14\"></ds-icon>\r\n        </button>\r\n      </span>\r\n    </div>\r\n    <div class=\"grid\">\r\n      <span class=\"dow\">Mo</span>\r\n      <span class=\"dow\">Tu</span>\r\n      <span class=\"dow\">We</span>\r\n      <span class=\"dow\">Th</span>\r\n      <span class=\"dow\">Fr</span>\r\n      <span class=\"dow\">Sa</span>\r\n      <span class=\"dow\">Su</span>\r\n      @for (cell of daysGrid(); track $index) {\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"cellClasses(cell)\"\r\n          [attr.data-day]=\"dayKey(cell.date)\"\r\n          [attr.tabindex]=\"isFocusDay(cell) ? 0 : -1\"\r\n          [attr.aria-label]=\"dayLabel(cell)\"\r\n          [attr.aria-pressed]=\"cell.isSelected\"\r\n          [attr.aria-current]=\"cell.isToday ? 'date' : null\"\r\n          (click)=\"selectDay(cell)\"\r\n          (keydown)=\"onGridKeydown($event, cell)\"\r\n        >\r\n          {{ cell.day }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .hint{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-1)}.trigger{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:0 var(--space-3);height:var(--hit-cozy);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary);cursor:pointer}.trigger:hover{border-color:var(--border-strong)}.trigger:focus-visible{outline:none;box-shadow:var(--focus-ring)}.trigger.sm{height:var(--hit-min);padding:0 var(--space-2);font-size:var(--font-size-xs)}.trigger.lg{height:var(--field-h-lg);padding:0 var(--space-4);font-size:var(--font-size-m)}.calendar{--_datepicker-bg: var(--ds-datepicker-bg, var(--surface-overlay));--_datepicker-border: var(--ds-datepicker-border, var(--border-default));--_datepicker-shadow: var(--ds-datepicker-shadow, var(--shadow-popover));--_datepicker-day-hover-bg: var(--ds-datepicker-day-hover-bg, var(--surface-secondary));--_datepicker-day-today-fg: var(--ds-datepicker-day-today-fg, var(--primary));--_datepicker-day-selected-bg: var(--ds-datepicker-day-selected-bg, var(--primary));--_datepicker-day-selected-bg-hover: var(--ds-datepicker-day-selected-bg-hover, var(--primary-selected-hover));--_datepicker-day-selected-fg: var(--ds-datepicker-day-selected-fg, var(--primary-on));--_datepicker-day-range-bg: var(--ds-datepicker-day-range-bg, var(--primary-subtle));--_datepicker-day-range-fg: var(--ds-datepicker-day-range-fg, var(--primary-strong));--_datepicker-day-disabled-fg: var(--ds-datepicker-day-disabled-fg, var(--text-disabled));--_datepicker-width: var(--ds-datepicker-width, var(--datepicker-w));background:var(--_datepicker-bg);border:var(--border-width-default) solid var(--_datepicker-border);border-radius:var(--radius-lg);box-shadow:var(--_datepicker-shadow);padding:var(--space-3);width:var(--_datepicker-width)}.calendar .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.calendar .title{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.calendar .nav{display:flex;gap:var(--space-1)}.calendar .nav button{width:var(--datepicker-nav-size);height:var(--datepicker-nav-size);border:0;background:transparent;display:grid;place-items:center;color:var(--icon-default);cursor:pointer;border-radius:var(--radius-sm)}.calendar .nav button:hover{background:var(--_datepicker-day-hover-bg)}.calendar .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--datepicker-cell-gap)}.calendar .dow{font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-flat) var(--font-sans);text-align:center;padding:var(--space-1) 0;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}.calendar .day{width:var(--space-8);height:var(--space-8);display:grid;place-items:center;font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;border:0;background:transparent;color:var(--text-primary)}.calendar .day:hover{background:var(--_datepicker-day-hover-bg)}.calendar .day.muted{color:var(--text-muted)}.calendar .day.today{font-weight:var(--font-weight-bold);color:var(--_datepicker-day-today-fg)}.calendar .day.selected{background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.selected:hover{background:var(--_datepicker-day-selected-bg-hover)}.calendar .day.in-range{background:var(--_datepicker-day-range-bg);color:var(--_datepicker-day-range-fg);border-radius:var(--radius-flat)}.calendar .day.range-start{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.range-end{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.range-start:hover,.calendar .day.range-end:hover{background:var(--_datepicker-day-selected-bg-hover)}.calendar .day.disabled{color:var(--_datepicker-day-disabled-fg);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-date-picker', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div class=\"field\">\r\n  @if (label()) {\r\n    <span class=\"label\" [id]=\"labelId\">\r\n      {{ label() }}\r\n      @if (required()) {\r\n        <span class=\"req\" aria-hidden=\"true\">*</span>\r\n      } @else if (optional()) {\r\n        <span class=\"optional-marker\" aria-hidden=\"true\">(optional)</span>\r\n      }\r\n    </span>\r\n  }\r\n  <button\r\n    #trigger\r\n    type=\"button\"\r\n    aria-haspopup=\"dialog\"\r\n    [class]=\"triggerClasses()\"\r\n    [attr.aria-expanded]=\"isOpen()\"\r\n    [attr.aria-labelledby]=\"label() ? labelId : null\"\r\n    [attr.aria-label]=\"resolvedAriaLabel()\"\r\n    [attr.aria-required]=\"required() ? 'true' : null\"\r\n    (click)=\"open()\"\r\n  >\r\n    <ds-icon name=\"calendar\" [size]=\"14\"></ds-icon>\r\n    <span>{{ displayLabel() }}</span>\r\n  </button>\r\n  @if (hint()) {\r\n    <small class=\"hint\">{{ hint() }}</small>\r\n  }\r\n</div>\r\n\r\n<ng-template #panel>\r\n  <div class=\"calendar\">\r\n    <div class=\"head\">\r\n      <span class=\"title\">{{ monthLabel() }}</span>\r\n      <span class=\"nav\">\r\n        <button type=\"button\" (click)=\"prevMonth()\">\r\n          <ds-icon name=\"chevronLeft\" [size]=\"14\"></ds-icon>\r\n        </button>\r\n        <button type=\"button\" (click)=\"nextMonth()\">\r\n          <ds-icon name=\"chevronRight\" [size]=\"14\"></ds-icon>\r\n        </button>\r\n      </span>\r\n    </div>\r\n    <div class=\"grid\">\r\n      <span class=\"dow\">Mo</span>\r\n      <span class=\"dow\">Tu</span>\r\n      <span class=\"dow\">We</span>\r\n      <span class=\"dow\">Th</span>\r\n      <span class=\"dow\">Fr</span>\r\n      <span class=\"dow\">Sa</span>\r\n      <span class=\"dow\">Su</span>\r\n      @for (cell of daysGrid(); track $index) {\r\n        <button\r\n          type=\"button\"\r\n          [class]=\"cellClasses(cell)\"\r\n          [attr.data-day]=\"dayKey(cell.date)\"\r\n          [attr.tabindex]=\"isFocusDay(cell) ? 0 : -1\"\r\n          [attr.aria-label]=\"dayLabel(cell)\"\r\n          [attr.aria-pressed]=\"cell.isSelected\"\r\n          [attr.aria-current]=\"cell.isToday ? 'date' : null\"\r\n          (click)=\"selectDay(cell)\"\r\n          (keydown)=\"onGridKeydown($event, cell)\"\r\n        >\r\n          {{ cell.day }}\r\n        </button>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.field{display:flex;flex-direction:column;gap:var(--space-1-5);width:100%}.field .label{font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-1)}.field .label .req{color:var(--error);font-weight:var(--font-weight-semibold)}.field .label .optional-marker{color:var(--text-tertiary);font-weight:var(--font-weight-regular)}.field .hint{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);display:flex;align-items:center;gap:var(--space-1)}.trigger{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);padding:0 var(--space-3);height:var(--hit-cozy);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary);cursor:pointer}.trigger:hover{border-color:var(--border-strong)}.trigger:focus-visible{outline:none;box-shadow:var(--focus-ring)}.trigger.sm{height:var(--hit-min);padding:0 var(--space-2);font-size:var(--font-size-xs)}.trigger.lg{height:var(--field-h-lg);padding:0 var(--space-4);font-size:var(--font-size-m)}.calendar{--_datepicker-bg: var(--ds-datepicker-bg, var(--surface-overlay));--_datepicker-border: var(--ds-datepicker-border, var(--border-default));--_datepicker-shadow: var(--ds-datepicker-shadow, var(--shadow-popover));--_datepicker-day-hover-bg: var(--ds-datepicker-day-hover-bg, var(--surface-secondary));--_datepicker-day-today-fg: var(--ds-datepicker-day-today-fg, var(--primary));--_datepicker-day-selected-bg: var(--ds-datepicker-day-selected-bg, var(--primary));--_datepicker-day-selected-bg-hover: var(--ds-datepicker-day-selected-bg-hover, var(--primary-selected-hover));--_datepicker-day-selected-fg: var(--ds-datepicker-day-selected-fg, var(--primary-on));--_datepicker-day-range-bg: var(--ds-datepicker-day-range-bg, var(--primary-subtle));--_datepicker-day-range-fg: var(--ds-datepicker-day-range-fg, var(--primary-strong));--_datepicker-day-disabled-fg: var(--ds-datepicker-day-disabled-fg, var(--text-disabled));--_datepicker-width: var(--ds-datepicker-width, var(--datepicker-w));background:var(--_datepicker-bg);border:var(--border-width-default) solid var(--_datepicker-border);border-radius:var(--radius-lg);box-shadow:var(--_datepicker-shadow);padding:var(--space-3);width:var(--_datepicker-width)}.calendar .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}.calendar .title{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans)}.calendar .nav{display:flex;gap:var(--space-1)}.calendar .nav button{width:var(--datepicker-nav-size);height:var(--datepicker-nav-size);border:0;background:transparent;display:grid;place-items:center;color:var(--icon-default);cursor:pointer;border-radius:var(--radius-sm)}.calendar .nav button:hover{background:var(--_datepicker-day-hover-bg)}.calendar .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--datepicker-cell-gap)}.calendar .dow{font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-flat) var(--font-sans);text-align:center;padding:var(--space-1) 0;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}.calendar .day{width:var(--space-8);height:var(--space-8);display:grid;place-items:center;font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;border:0;background:transparent;color:var(--text-primary)}.calendar .day:hover{background:var(--_datepicker-day-hover-bg)}.calendar .day.muted{color:var(--text-muted)}.calendar .day.today{font-weight:var(--font-weight-bold);color:var(--_datepicker-day-today-fg)}.calendar .day.selected{background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.selected:hover{background:var(--_datepicker-day-selected-bg-hover)}.calendar .day.in-range{background:var(--_datepicker-day-range-bg);color:var(--_datepicker-day-range-fg);border-radius:var(--radius-flat)}.calendar .day.range-start{border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm);background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.range-end{border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);background:var(--_datepicker-day-selected-bg);color:var(--_datepicker-day-selected-fg)}.calendar .day.range-start:hover,.calendar .day.range-end:hover{background:var(--_datepicker-day-selected-bg-hover)}.calendar .day.disabled{color:var(--_datepicker-day-disabled-fg);cursor:not-allowed}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+
+/**
+ * Library-level breadcrumb state. Apps push items either programmatically
+ * (page constructor / effect) or via a router-data driver (see app docs).
+ * `<ds-breadcrumbs>` reads from here when no `[items]` input is provided.
+ */
+class BreadcrumbsService {
+    _items = signal([], ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+    items = this._items.asReadonly();
+    set(items) {
+        this._items.set(items);
+    }
+    push(item) {
+        this._items.update((arr) => [...arr, item]);
+    }
+    pop() {
+        this._items.update((arr) => arr.slice(0, -1));
+    }
+    replaceLast(item) {
+        this._items.update((arr) => (arr.length ? [...arr.slice(0, -1), item] : [item]));
+    }
+    clear() {
+        this._items.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BreadcrumbsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BreadcrumbsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BreadcrumbsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class BreadcrumbsComponent {
+    cfg = inject(DS_CONFIG);
+    svc = inject(BreadcrumbsService);
+    /**
+     * When omitted, the component reads from `BreadcrumbsService.items`.
+     * Pass an explicit array to opt out of the service (per-page override).
+     */
+    items = input(null, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    separator = input(null, ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    clickable = input(null, ...(ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []));
+    navigate = output();
+    resolvedItems = computed(() => this.items() ?? this.svc.items(), ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+    effectiveSeparator = computed(() => this.separator() ?? this.cfg.breadcrumbs?.separator ?? 'chevronRight', ...(ngDevMode ? [{ debugName: "effectiveSeparator" }] : /* istanbul ignore next */ []));
+    effectiveClickable = computed(() => this.clickable() ?? this.cfg.breadcrumbs?.clickable ?? true, ...(ngDevMode ? [{ debugName: "effectiveClickable" }] : /* istanbul ignore next */ []));
+    onNav(event, item) {
+        if (!item.href || !this.effectiveClickable()) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        this.navigate.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BreadcrumbsComponent, isStandalone: true, selector: "ds-breadcrumbs", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\" [class.is-static]=\"!effectiveClickable()\">\r\n  @for (item of resolvedItems(); track $index; let last = $last) {\r\n    @if (item.href && !last && effectiveClickable()) {\r\n      <a [href]=\"item.href\" (click)=\"onNav($event, item)\">\r\n        @if (item.icon) { <ds-icon [name]=\"item.icon\" [size]=\"14\" /> }\r\n        @if (item.label) { <span class=\"label\">{{ item.label }}</span> }\r\n      </a>\r\n    } @else {\r\n      <span [class.current]=\"last\" [attr.aria-current]=\"last ? 'page' : null\">\r\n        @if (item.icon) { <ds-icon [name]=\"item.icon\" [size]=\"14\" /> }\r\n        @if (item.label) { <span class=\"label\">{{ item.label }}</span> }\r\n      </span>\r\n    }\r\n    @if (!last) { <span class=\"sep\" aria-hidden=\"true\"><ds-icon [name]=\"effectiveSeparator()\" [size]=\"12\" /></span> }\r\n  }\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;min-width:0;max-width:100%}.breadcrumbs{--_breadcrumbs-fg: var(--ds-breadcrumbs-fg, var(--text-tertiary));--_breadcrumbs-fg-hover: var(--ds-breadcrumbs-fg-hover, var(--primary));--_breadcrumbs-separator-fg: var(--ds-breadcrumbs-separator-fg, var(--icon-muted));--_breadcrumbs-current-fg: var(--ds-breadcrumbs-current-fg, var(--text-primary));display:inline-flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_breadcrumbs-fg);min-width:0;max-width:100%;flex-wrap:nowrap;overflow:hidden}.breadcrumbs a,.breadcrumbs .current{display:inline-flex;align-items:center;gap:var(--space-1)}.breadcrumbs a{color:var(--_breadcrumbs-fg);text-decoration:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}.breadcrumbs a:hover{color:var(--_breadcrumbs-fg-hover);text-decoration:underline;text-underline-offset:2px}.breadcrumbs a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.breadcrumbs.is-static a,.breadcrumbs.is-static .current{cursor:default}.breadcrumbs .sep{color:var(--_breadcrumbs-separator-fg);display:inline-flex;align-items:center}.breadcrumbs .current{color:var(--_breadcrumbs-current-fg);font-weight:var(--font-weight-bold)}.breadcrumbs .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}.breadcrumbs .current .label{max-width:32ch}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-breadcrumbs', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<nav class=\"breadcrumbs\" aria-label=\"Breadcrumb\" [class.is-static]=\"!effectiveClickable()\">\r\n  @for (item of resolvedItems(); track $index; let last = $last) {\r\n    @if (item.href && !last && effectiveClickable()) {\r\n      <a [href]=\"item.href\" (click)=\"onNav($event, item)\">\r\n        @if (item.icon) { <ds-icon [name]=\"item.icon\" [size]=\"14\" /> }\r\n        @if (item.label) { <span class=\"label\">{{ item.label }}</span> }\r\n      </a>\r\n    } @else {\r\n      <span [class.current]=\"last\" [attr.aria-current]=\"last ? 'page' : null\">\r\n        @if (item.icon) { <ds-icon [name]=\"item.icon\" [size]=\"14\" /> }\r\n        @if (item.label) { <span class=\"label\">{{ item.label }}</span> }\r\n      </span>\r\n    }\r\n    @if (!last) { <span class=\"sep\" aria-hidden=\"true\"><ds-icon [name]=\"effectiveSeparator()\" [size]=\"12\" /></span> }\r\n  }\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;min-width:0;max-width:100%}.breadcrumbs{--_breadcrumbs-fg: var(--ds-breadcrumbs-fg, var(--text-tertiary));--_breadcrumbs-fg-hover: var(--ds-breadcrumbs-fg-hover, var(--primary));--_breadcrumbs-separator-fg: var(--ds-breadcrumbs-separator-fg, var(--icon-muted));--_breadcrumbs-current-fg: var(--ds-breadcrumbs-current-fg, var(--text-primary));display:inline-flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--_breadcrumbs-fg);min-width:0;max-width:100%;flex-wrap:nowrap;overflow:hidden}.breadcrumbs a,.breadcrumbs .current{display:inline-flex;align-items:center;gap:var(--space-1)}.breadcrumbs a{color:var(--_breadcrumbs-fg);text-decoration:none;cursor:pointer;transition:color var(--duration-fast) var(--ease-standard)}.breadcrumbs a:hover{color:var(--_breadcrumbs-fg-hover);text-decoration:underline;text-underline-offset:2px}.breadcrumbs a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.breadcrumbs.is-static a,.breadcrumbs.is-static .current{cursor:default}.breadcrumbs .sep{color:var(--_breadcrumbs-separator-fg);display:inline-flex;align-items:center}.breadcrumbs .current{color:var(--_breadcrumbs-current-fg);font-weight:var(--font-weight-bold)}.breadcrumbs .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}.breadcrumbs .current .label{max-width:32ch}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
+
+class SidenavComponent {
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    brand = input('', ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SidenavComponent, isStandalone: true, selector: "ds-sidenav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.sidenav": "true", "class.collapsed": "collapsed()" } }, ngImport: i0, template: "@if (brand()) {\n  <div class=\"brand\">\n    <span class=\"mark\">{{ brand().charAt(0) }}</span>\n    <span class=\"brand-name\">{{ brand() }}</span>\n  </div>\n}\n<ng-content></ng-content>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-bg: var(--ds-sidenav-bg, var(--surface-default));--_sidenav-border: var(--ds-sidenav-border, var(--border-divider));--_sidenav-width: var(--ds-sidenav-width, var(--sidenav-w));--_sidenav-width-collapsed: var(--ds-sidenav-width-collapsed, var(--sidenav-w-collapsed));--_sidenav-mark-bg: var(--ds-sidenav-mark-bg, var(--primary));--_sidenav-mark-fg: var(--ds-sidenav-mark-fg, var(--primary-on));display:flex;flex-direction:column;gap:var(--space-1);width:var(--_sidenav-width);background:var(--_sidenav-bg);border-right:var(--border-width-default) solid var(--_sidenav-border);padding:var(--space-5)}.brand{font:var(--font-weight-extrabold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-6)}.mark{width:var(--sidenav-logo-size);height:var(--sidenav-logo-size);border-radius:var(--radius-md);background:var(--_sidenav-mark-bg);display:grid;place-items:center;color:var(--_sidenav-mark-fg);font-size:var(--font-size-s);flex-shrink:0}.brand-name{font:var(--font-weight-extrabold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans)}:host(.collapsed){width:var(--_sidenav-width-collapsed);padding:var(--space-3);align-items:center}:host(.collapsed) .brand{padding:var(--sidenav-pad-brand-y) 0 var(--sidenav-pad-brand-b);justify-content:center}:host(.collapsed) .brand-name{display:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-sidenav', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[class.sidenav]': 'true',
+                        '[class.collapsed]': 'collapsed()',
+                    }, template: "@if (brand()) {\n  <div class=\"brand\">\n    <span class=\"mark\">{{ brand().charAt(0) }}</span>\n    <span class=\"brand-name\">{{ brand() }}</span>\n  </div>\n}\n<ng-content></ng-content>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-bg: var(--ds-sidenav-bg, var(--surface-default));--_sidenav-border: var(--ds-sidenav-border, var(--border-divider));--_sidenav-width: var(--ds-sidenav-width, var(--sidenav-w));--_sidenav-width-collapsed: var(--ds-sidenav-width-collapsed, var(--sidenav-w-collapsed));--_sidenav-mark-bg: var(--ds-sidenav-mark-bg, var(--primary));--_sidenav-mark-fg: var(--ds-sidenav-mark-fg, var(--primary-on));display:flex;flex-direction:column;gap:var(--space-1);width:var(--_sidenav-width);background:var(--_sidenav-bg);border-right:var(--border-width-default) solid var(--_sidenav-border);padding:var(--space-5)}.brand{font:var(--font-weight-extrabold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-6)}.mark{width:var(--sidenav-logo-size);height:var(--sidenav-logo-size);border-radius:var(--radius-md);background:var(--_sidenav-mark-bg);display:grid;place-items:center;color:var(--_sidenav-mark-fg);font-size:var(--font-size-s);flex-shrink:0}.brand-name{font:var(--font-weight-extrabold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans)}:host(.collapsed){width:var(--_sidenav-width-collapsed);padding:var(--space-3);align-items:center}:host(.collapsed) .brand{padding:var(--sidenav-pad-brand-y) 0 var(--sidenav-pad-brand-b);justify-content:center}:host(.collapsed) .brand-name{display:none}\n"] }]
+        }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }] } });
+
+class SidenavGroupComponent {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    // Optional group icon (DS IconName). Consumers without a DS icon can project
+    // custom content via the `[icon]` slot.
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    // When true the label/icon row becomes a clickable header that expands /
+    // collapses the projected children with a caret rotation.
+    expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+    // Two-way bindable open state. Defaults to open (true) so a non-expandable
+    // group always shows its items.
+    expanded = model(true, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (!this.expandable())
+            return;
+        this.expanded.update((v) => !v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidenavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SidenavGroupComponent, isStandalone: true, selector: "ds-sidenav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<!-- Single <ng-content> outside any @if blocks. Angular accepts only one\n     default slot per component; duplicate <ng-content> elements caused\n     children to silently drop when control flow chose a non-matching branch. -->\n@if (expandable()) {\n  <button\n    type=\"button\"\n    class=\"group-header\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"expanded()\"\n  >\n    @if (icon()) {\n      <ds-icon class=\"group-icon\" [name]=\"icon()!\" [size]=\"18\"></ds-icon>\n    } @else {\n      <!-- `[ds-group-icon]` is selector-distinct from `[icon]` slots used on\n           sidenav-item children, so projected icons don't get swallowed when\n           a consumer puts items inside the group. -->\n      <span class=\"group-icon\"><ng-content select=\"[ds-group-icon]\"></ng-content></span>\n    }\n    @if (label()) {\n      <span class=\"group-title\">{{ label() }}</span>\n    }\n    <ds-icon\n      class=\"group-caret\"\n      [class.open]=\"expanded()\"\n      name=\"chevronDown\"\n      [size]=\"14\"\n    ></ds-icon>\n  </button>\n} @else if (label()) {\n  <span class=\"group-label\">{{ label() }}</span>\n}\n<div class=\"group-body\" [class.hidden]=\"expandable() && !expanded()\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-group-open-bg: var(--ds-sidenav-group-open-bg, var(--surface-secondary));--_sidenav-group-child-indent: var(--ds-sidenav-group-child-indent, var(--space-3));--_sidenav-group-radius: var(--ds-sidenav-group-radius, var(--radius-md));display:flex;flex-direction:column;gap:var(--space-1);border-radius:var(--_sidenav-group-radius);transition:background var(--duration-fast) var(--ease-standard)}:host(:has(.group-header[aria-expanded=true])){background:var(--_sidenav-group-open-bg)}.group-label{--_sidenav-group-fg: var(--ds-sidenav-group-fg, var(--text-tertiary));display:block;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);color:var(--_sidenav-group-fg);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);padding:var(--space-4) var(--space-3) var(--sidenav-section-pad-b)}.group-header{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-md);color:var(--text-primary);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-base) var(--font-sans);text-align:left;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.group-header:hover{background:var(--surface-secondary)}.group-header:focus-visible{outline:none;box-shadow:var(--focus-ring)}.group-icon{display:inline-flex;align-items:center;color:var(--text-secondary);flex-shrink:0}.group-title{flex:1;min-width:0}.group-caret{display:inline-flex;color:var(--text-tertiary);transition:transform var(--duration-base) var(--ease-standard)}.group-caret:not(.open){transform:rotate(-90deg)}.group-body{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--_sidenav-group-child-indent)}.group-body.hidden{display:none}:host-context(.sidenav.collapsed) .group-label,:host-context(.sidenav.collapsed) .group-title,:host-context(.sidenav.collapsed) .group-caret{display:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidenavGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-sidenav-group', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<!-- Single <ng-content> outside any @if blocks. Angular accepts only one\n     default slot per component; duplicate <ng-content> elements caused\n     children to silently drop when control flow chose a non-matching branch. -->\n@if (expandable()) {\n  <button\n    type=\"button\"\n    class=\"group-header\"\n    (click)=\"toggle()\"\n    [attr.aria-expanded]=\"expanded()\"\n  >\n    @if (icon()) {\n      <ds-icon class=\"group-icon\" [name]=\"icon()!\" [size]=\"18\"></ds-icon>\n    } @else {\n      <!-- `[ds-group-icon]` is selector-distinct from `[icon]` slots used on\n           sidenav-item children, so projected icons don't get swallowed when\n           a consumer puts items inside the group. -->\n      <span class=\"group-icon\"><ng-content select=\"[ds-group-icon]\"></ng-content></span>\n    }\n    @if (label()) {\n      <span class=\"group-title\">{{ label() }}</span>\n    }\n    <ds-icon\n      class=\"group-caret\"\n      [class.open]=\"expanded()\"\n      name=\"chevronDown\"\n      [size]=\"14\"\n    ></ds-icon>\n  </button>\n} @else if (label()) {\n  <span class=\"group-label\">{{ label() }}</span>\n}\n<div class=\"group-body\" [class.hidden]=\"expandable() && !expanded()\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-group-open-bg: var(--ds-sidenav-group-open-bg, var(--surface-secondary));--_sidenav-group-child-indent: var(--ds-sidenav-group-child-indent, var(--space-3));--_sidenav-group-radius: var(--ds-sidenav-group-radius, var(--radius-md));display:flex;flex-direction:column;gap:var(--space-1);border-radius:var(--_sidenav-group-radius);transition:background var(--duration-fast) var(--ease-standard)}:host(:has(.group-header[aria-expanded=true])){background:var(--_sidenav-group-open-bg)}.group-label{--_sidenav-group-fg: var(--ds-sidenav-group-fg, var(--text-tertiary));display:block;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);color:var(--_sidenav-group-fg);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);padding:var(--space-4) var(--space-3) var(--sidenav-section-pad-b)}.group-header{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-md);color:var(--text-primary);font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-base) var(--font-sans);text-align:left;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.group-header:hover{background:var(--surface-secondary)}.group-header:focus-visible{outline:none;box-shadow:var(--focus-ring)}.group-icon{display:inline-flex;align-items:center;color:var(--text-secondary);flex-shrink:0}.group-title{flex:1;min-width:0}.group-caret{display:inline-flex;color:var(--text-tertiary);transition:transform var(--duration-base) var(--ease-standard)}.group-caret:not(.open){transform:rotate(-90deg)}.group-body{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--_sidenav-group-child-indent)}.group-body.hidden{display:none}:host-context(.sidenav.collapsed) .group-label,:host-context(.sidenav.collapsed) .group-title,:host-context(.sidenav.collapsed) .group-caret{display:none}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+class SidenavItemComponent {
+    // `icon` is optional — consumers without a DS IconName can project a custom
+    // icon via the `[icon]` content slot. When both are supplied, the input
+    // wins (legacy DS-consumer behaviour).
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    href = input('', ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    // Angular RouterLink accepts both string and array forms — mirror that so
+    // consumers can pass dynamic segments (e.g. `['/programs', id, 'overview']`).
+    routerLink = input(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    hasAlert = input(false, ...(ngDevMode ? [{ debugName: "hasAlert" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    linkClasses = computed(() => {
+        const parts = ['item'];
+        if (this.active())
+            parts.push('active');
+        if (this.disabled())
+            parts.push('disabled');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "linkClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidenavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SidenavItemComponent, isStandalone: true, selector: "ds-sidenav-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, hasAlert: { classPropertyName: "hasAlert", publicName: "hasAlert", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Selector-scoped slots ([icon], [trailing]) coexist with no default\r\n     <ng-content> here \u2014 projection goes via attributes only, so consumers\r\n     can compose icon + label + arbitrary trailing content (status pill,\r\n     status icon, etc.). The two <a> variants (routerLink vs href) share one\r\n     #content template so the inner markup isn't duplicated. -->\r\n@if (routerLink()) {\r\n  <a\r\n    [routerLink]=\"disabled() ? null : routerLink()\"\r\n    routerLinkActive=\"active\"\r\n    #rla=\"routerLinkActive\"\r\n    [class]=\"linkClasses()\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-current]=\"rla.isActive ? 'page' : null\"\r\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n    [attr.tabindex]=\"disabled() ? -1 : null\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\" />\r\n  </a>\r\n} @else {\r\n  <a\r\n    [href]=\"href() || '#'\"\r\n    [class]=\"linkClasses()\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-current]=\"active() ? 'page' : null\"\r\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n    [attr.tabindex]=\"disabled() ? -1 : null\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\" />\r\n  </a>\r\n}\r\n\r\n<ng-template #content>\r\n  @if (icon()) {\r\n    <ds-icon class=\"icon\" [name]=\"icon()!\" [size]=\"20\"></ds-icon>\r\n  } @else {\r\n    <span class=\"icon\"><ng-content select=\"[icon]\"></ng-content></span>\r\n  }\r\n  @if (label()) {\r\n    <span class=\"item-label\">{{ label() }}</span>\r\n  }\r\n  <span class=\"trailing\"><ng-content select=\"[trailing]\"></ng-content></span>\r\n  @if (badge() !== null) {\r\n    <span class=\"count\">{{ badge() }}</span>\r\n  }\r\n  @if (hasAlert()) {\r\n    <span class=\"alert\"></span>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-item-fg: var(--ds-sidenav-item-fg, var(--text-secondary));--_sidenav-item-fg-hover: var(--ds-sidenav-item-fg-hover, var(--text-primary));--_sidenav-item-bg-hover: var(--ds-sidenav-item-bg-hover, var(--surface-secondary));--_sidenav-item-bg-active: var(--ds-sidenav-item-bg-active, var(--primary));--_sidenav-item-fg-active: var(--ds-sidenav-item-fg-active, var(--text-on-primary));--_sidenav-item-bg-active-hover: var(--ds-sidenav-item-bg-active-hover, color-mix(in srgb, var(--_sidenav-item-bg-active) 88%, white));--_sidenav-item-rail: var(--ds-sidenav-item-rail, var(--secondary));--_sidenav-item-radius: var(--ds-sidenav-item-radius, var(--radius-md));--_sidenav-alert-color: var(--ds-sidenav-alert-color, var(--error));display:block}.item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--_sidenav-item-radius);color:var(--_sidenav-item-fg);text-decoration:none;font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-base) var(--font-sans);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);position:relative}.item:hover{background:var(--_sidenav-item-bg-hover);color:var(--_sidenav-item-fg-hover)}.item:focus-visible{outline:none;box-shadow:var(--focus-ring)}.item.active{background:var(--_sidenav-item-bg-active);color:var(--_sidenav-item-fg-active);box-shadow:inset 3px 0 0 var(--_sidenav-item-rail)}.item.active:hover{background:var(--_sidenav-item-bg-active-hover)}.item .icon{width:var(--icon-lg);height:var(--icon-lg);color:currentColor;flex-shrink:0}.item .item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .count{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);margin-left:auto}.item .alert{width:var(--badge-dot-size);height:var(--badge-dot-size);background:var(--_sidenav-alert-color);border-radius:var(--radius-pill);margin-left:auto}.item .trailing{display:inline-flex;align-items:center;margin-left:auto;color:var(--text-tertiary);flex-shrink:0}.item.active .trailing{color:currentColor}.item.disabled{color:var(--text-disabled);cursor:not-allowed}.item.disabled:hover{background:unset;color:var(--text-disabled)}:host-context(.sidenav.collapsed) .item{justify-content:center;padding:0;width:var(--sidenav-collapsed-item);height:var(--sidenav-collapsed-item);gap:0;font-size:0}:host-context(.sidenav.collapsed) .item .icon{font-size:0}:host-context(.sidenav.collapsed) .item .item-label,:host-context(.sidenav.collapsed) .item .count,:host-context(.sidenav.collapsed) .item .trailing{display:none}:host-context(.sidenav.collapsed) .item .alert{position:absolute;top:var(--space-1-5);right:var(--space-1-5);margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidenavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-sidenav-item', standalone: true, imports: [IconComponent, RouterLink, RouterLinkActive, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, template: "<!-- Selector-scoped slots ([icon], [trailing]) coexist with no default\r\n     <ng-content> here \u2014 projection goes via attributes only, so consumers\r\n     can compose icon + label + arbitrary trailing content (status pill,\r\n     status icon, etc.). The two <a> variants (routerLink vs href) share one\r\n     #content template so the inner markup isn't duplicated. -->\r\n@if (routerLink()) {\r\n  <a\r\n    [routerLink]=\"disabled() ? null : routerLink()\"\r\n    routerLinkActive=\"active\"\r\n    #rla=\"routerLinkActive\"\r\n    [class]=\"linkClasses()\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-current]=\"rla.isActive ? 'page' : null\"\r\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n    [attr.tabindex]=\"disabled() ? -1 : null\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\" />\r\n  </a>\r\n} @else {\r\n  <a\r\n    [href]=\"href() || '#'\"\r\n    [class]=\"linkClasses()\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-current]=\"active() ? 'page' : null\"\r\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n    [attr.tabindex]=\"disabled() ? -1 : null\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\" />\r\n  </a>\r\n}\r\n\r\n<ng-template #content>\r\n  @if (icon()) {\r\n    <ds-icon class=\"icon\" [name]=\"icon()!\" [size]=\"20\"></ds-icon>\r\n  } @else {\r\n    <span class=\"icon\"><ng-content select=\"[icon]\"></ng-content></span>\r\n  }\r\n  @if (label()) {\r\n    <span class=\"item-label\">{{ label() }}</span>\r\n  }\r\n  <span class=\"trailing\"><ng-content select=\"[trailing]\"></ng-content></span>\r\n  @if (badge() !== null) {\r\n    <span class=\"count\">{{ badge() }}</span>\r\n  }\r\n  @if (hasAlert()) {\r\n    <span class=\"alert\"></span>\r\n  }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_sidenav-item-fg: var(--ds-sidenav-item-fg, var(--text-secondary));--_sidenav-item-fg-hover: var(--ds-sidenav-item-fg-hover, var(--text-primary));--_sidenav-item-bg-hover: var(--ds-sidenav-item-bg-hover, var(--surface-secondary));--_sidenav-item-bg-active: var(--ds-sidenav-item-bg-active, var(--primary));--_sidenav-item-fg-active: var(--ds-sidenav-item-fg-active, var(--text-on-primary));--_sidenav-item-bg-active-hover: var(--ds-sidenav-item-bg-active-hover, color-mix(in srgb, var(--_sidenav-item-bg-active) 88%, white));--_sidenav-item-rail: var(--ds-sidenav-item-rail, var(--secondary));--_sidenav-item-radius: var(--ds-sidenav-item-radius, var(--radius-md));--_sidenav-alert-color: var(--ds-sidenav-alert-color, var(--error));display:block}.item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--_sidenav-item-radius);color:var(--_sidenav-item-fg);text-decoration:none;font:var(--font-weight-semibold) var(--font-size-s)/var(--line-height-base) var(--font-sans);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard);position:relative}.item:hover{background:var(--_sidenav-item-bg-hover);color:var(--_sidenav-item-fg-hover)}.item:focus-visible{outline:none;box-shadow:var(--focus-ring)}.item.active{background:var(--_sidenav-item-bg-active);color:var(--_sidenav-item-fg-active);box-shadow:inset 3px 0 0 var(--_sidenav-item-rail)}.item.active:hover{background:var(--_sidenav-item-bg-active-hover)}.item .icon{width:var(--icon-lg);height:var(--icon-lg);color:currentColor;flex-shrink:0}.item .item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .count{min-width:var(--badge-count-size);height:var(--badge-count-size);padding:0 var(--space-1-5);display:inline-grid;place-items:center;border-radius:var(--radius-pill);background:var(--surface-secondary);color:var(--text-secondary);font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wide);margin-left:auto}.item .alert{width:var(--badge-dot-size);height:var(--badge-dot-size);background:var(--_sidenav-alert-color);border-radius:var(--radius-pill);margin-left:auto}.item .trailing{display:inline-flex;align-items:center;margin-left:auto;color:var(--text-tertiary);flex-shrink:0}.item.active .trailing{color:currentColor}.item.disabled{color:var(--text-disabled);cursor:not-allowed}.item.disabled:hover{background:unset;color:var(--text-disabled)}:host-context(.sidenav.collapsed) .item{justify-content:center;padding:0;width:var(--sidenav-collapsed-item);height:var(--sidenav-collapsed-item);gap:0;font-size:0}:host-context(.sidenav.collapsed) .item .icon{font-size:0}:host-context(.sidenav.collapsed) .item .item-label,:host-context(.sidenav.collapsed) .item .count,:host-context(.sidenav.collapsed) .item .trailing{display:none}:host-context(.sidenav.collapsed) .item .alert{position:absolute;top:var(--space-1-5);right:var(--space-1-5);margin:0}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], hasAlert: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasAlert", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+class TopBarComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: TopBarComponent, isStandalone: true, selector: "ds-topbar", ngImport: i0, template: "<header class=\"topbar\">\n  <div class=\"title\"><ng-content select=\"[title]\"></ng-content></div>\n  <ng-content select=\"[breadcrumbs]\"></ng-content>\n  <div class=\"spacer\"><ng-content select=\"[search]\"></ng-content></div>\n  <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block}.topbar{--_topbar-height: var(--ds-topbar-height, var(--topbar-h));--_topbar-bg: var(--ds-topbar-bg, var(--surface-default));--_topbar-border: var(--ds-topbar-border, var(--border-divider));--_topbar-title-fg: var(--ds-topbar-title-fg, var(--text-primary));display:flex;align-items:center;gap:var(--space-4);height:var(--_topbar-height);padding:0 var(--space-6);background:var(--_topbar-bg);border-bottom:var(--border-width-default) solid var(--_topbar-border)}.topbar .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);color:var(--_topbar-title-fg)}.topbar .spacer{flex:1;min-width:0}.topbar .actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}.topbar .crumbs-trail{display:flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-tertiary);min-width:0;max-width:100%;flex-wrap:nowrap;overflow:hidden}.topbar .crumb{color:var(--text-tertiary);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}.topbar .crumb:hover{color:var(--primary)}.topbar .crumb.crumb--current{color:var(--text-primary);font-weight:var(--font-weight-bold);max-width:32ch}.topbar .crumb-sep{color:var(--icon-muted);display:inline-flex;align-items:center}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TopBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-topbar', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<header class=\"topbar\">\n  <div class=\"title\"><ng-content select=\"[title]\"></ng-content></div>\n  <ng-content select=\"[breadcrumbs]\"></ng-content>\n  <div class=\"spacer\"><ng-content select=\"[search]\"></ng-content></div>\n  <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block}.topbar{--_topbar-height: var(--ds-topbar-height, var(--topbar-h));--_topbar-bg: var(--ds-topbar-bg, var(--surface-default));--_topbar-border: var(--ds-topbar-border, var(--border-divider));--_topbar-title-fg: var(--ds-topbar-title-fg, var(--text-primary));display:flex;align-items:center;gap:var(--space-4);height:var(--_topbar-height);padding:0 var(--space-6);background:var(--_topbar-bg);border-bottom:var(--border-width-default) solid var(--_topbar-border)}.topbar .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);color:var(--_topbar-title-fg)}.topbar .spacer{flex:1;min-width:0}.topbar .actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}.topbar .crumbs-trail{display:flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-tertiary);min-width:0;max-width:100%;flex-wrap:nowrap;overflow:hidden}.topbar .crumb{color:var(--text-tertiary);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}.topbar .crumb:hover{color:var(--primary)}.topbar .crumb.crumb--current{color:var(--text-primary);font-weight:var(--font-weight-bold);max-width:32ch}.topbar .crumb-sep{color:var(--icon-muted);display:inline-flex;align-items:center}\n"] }]
+        }] });
+
+class PageHeaderComponent {
+    eyebrow = input('', ...(ngDevMode ? [{ debugName: "eyebrow" }] : /* istanbul ignore next */ []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    divider = input(false, ...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
+    metaDivider = input(false, ...(ngDevMode ? [{ debugName: "metaDivider" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const parts = ['page-header'];
+        if (this.compact())
+            parts.push('compact');
+        if (this.divider())
+            parts.push('with-divider');
+        if (this.metaDivider())
+            parts.push('with-meta-divider');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PageHeaderComponent, isStandalone: true, selector: "ds-page-header", inputs: { eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, metaDivider: { classPropertyName: "metaDivider", publicName: "metaDivider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<header [class]=\"classes()\">\n  <ng-content select=\"[breadcrumbs]\"></ng-content>\n  <div class=\"row title-row\">\n    <div class=\"title-block\">\n      @if (eyebrow()) { <div class=\"eyebrow\">{{ eyebrow() }}</div> }\n      <div class=\"title-line\">\n        <h1 class=\"title\">{{ title() }}</h1>\n        <ng-content select=\"[title-badge]\"></ng-content>\n      </div>\n      @if (subtitle()) { <p class=\"subtitle\">{{ subtitle() }}</p> }\n      <div class=\"meta\"><ng-content select=\"[meta]\"></ng-content></div>\n    </div>\n    <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n  </div>\n  <ng-content select=\"[tabs]\"></ng-content>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.eyebrow-secondary){--_pagehdr-eyebrow-fg: var(--ds-pagehdr-eyebrow-fg, var(--secondary-strong))}.page-header{--_pagehdr-eyebrow-fg: var(--ds-pagehdr-eyebrow-fg, var(--text-tertiary));--_pagehdr-title-fg: var(--ds-pagehdr-title-fg, var(--text-primary));--_pagehdr-subtitle-fg: var(--ds-pagehdr-subtitle-fg, var(--text-secondary));--_pagehdr-meta-fg: var(--ds-pagehdr-meta-fg, var(--text-secondary));--_pagehdr-meta-icon-fg: var(--ds-pagehdr-meta-icon-fg, var(--icon-default));--_pagehdr-divider: var(--ds-pagehdr-divider, var(--border-divider));--_pagehdr-title-fs: var(--ds-pagehdr-title-fs, var(--font-size-h3));--_pagehdr-title-gap: var(--ds-pagehdr-title-gap, var(--space-1-5));display:flex;flex-direction:column;gap:var(--space-3)}.page-header.with-divider{padding-bottom:var(--space-4);border-bottom:var(--border-width-default) solid var(--_pagehdr-divider)}.page-header:has(>[tabs]){padding-bottom:0;border-bottom:0}.page-header .row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.page-header .title-block{display:flex;flex-direction:column;gap:var(--_pagehdr-title-gap);min-width:0;flex:1 1 0;align-self:flex-start}.page-header .eyebrow{font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--_pagehdr-eyebrow-fg)}.page-header .title{font:var(--font-weight-extrabold) var(--_pagehdr-title-fs)/var(--line-height-tight) var(--font-display);color:var(--_pagehdr-title-fg);margin:0;letter-spacing:-.02em}.page-header .title-line{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.page-header .crumbs-trail{display:flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-tertiary);min-width:0;flex-wrap:nowrap;overflow:hidden;padding-bottom:var(--space-1)}.page-header .crumb{color:var(--text-tertiary);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}.page-header .crumb:hover{color:var(--primary)}.page-header .crumb.crumb--current{color:var(--text-primary);font-weight:var(--font-weight-bold);max-width:32ch}.page-header .crumb-sep{color:var(--icon-muted);display:inline-flex;align-items:center}.page-header .subtitle{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_pagehdr-subtitle-fg);margin:0}.page-header .actions{display:flex;align-items:flex-end;gap:var(--space-2);flex-shrink:0;align-self:flex-start}.page-header .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-1-5)}.page-header .meta:not(:has(>*)){display:none}.page-header.with-meta-divider .meta{padding-top:var(--space-2);border-top:var(--border-width-default) solid var(--_pagehdr-divider)}.page-header .meta-item{display:inline-flex;align-items:center;gap:var(--space-1-5);font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);color:var(--_pagehdr-meta-fg)}.page-header .meta-item .icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--_pagehdr-meta-icon-fg)}.page-header.compact{--_pagehdr-title-fs: var(--ds-pagehdr-title-fs, var(--font-size-h4));gap:var(--space-2);padding-bottom:var(--space-3)}@media(max-width:720px){.page-header .actions{width:100%}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PageHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-page-header', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<header [class]=\"classes()\">\n  <ng-content select=\"[breadcrumbs]\"></ng-content>\n  <div class=\"row title-row\">\n    <div class=\"title-block\">\n      @if (eyebrow()) { <div class=\"eyebrow\">{{ eyebrow() }}</div> }\n      <div class=\"title-line\">\n        <h1 class=\"title\">{{ title() }}</h1>\n        <ng-content select=\"[title-badge]\"></ng-content>\n      </div>\n      @if (subtitle()) { <p class=\"subtitle\">{{ subtitle() }}</p> }\n      <div class=\"meta\"><ng-content select=\"[meta]\"></ng-content></div>\n    </div>\n    <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n  </div>\n  <ng-content select=\"[tabs]\"></ng-content>\n</header>\n", styles: ["@charset \"UTF-8\";:host{display:block}:host(.eyebrow-secondary){--_pagehdr-eyebrow-fg: var(--ds-pagehdr-eyebrow-fg, var(--secondary-strong))}.page-header{--_pagehdr-eyebrow-fg: var(--ds-pagehdr-eyebrow-fg, var(--text-tertiary));--_pagehdr-title-fg: var(--ds-pagehdr-title-fg, var(--text-primary));--_pagehdr-subtitle-fg: var(--ds-pagehdr-subtitle-fg, var(--text-secondary));--_pagehdr-meta-fg: var(--ds-pagehdr-meta-fg, var(--text-secondary));--_pagehdr-meta-icon-fg: var(--ds-pagehdr-meta-icon-fg, var(--icon-default));--_pagehdr-divider: var(--ds-pagehdr-divider, var(--border-divider));--_pagehdr-title-fs: var(--ds-pagehdr-title-fs, var(--font-size-h3));--_pagehdr-title-gap: var(--ds-pagehdr-title-gap, var(--space-1-5));display:flex;flex-direction:column;gap:var(--space-3)}.page-header.with-divider{padding-bottom:var(--space-4);border-bottom:var(--border-width-default) solid var(--_pagehdr-divider)}.page-header:has(>[tabs]){padding-bottom:0;border-bottom:0}.page-header .row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.page-header .title-block{display:flex;flex-direction:column;gap:var(--_pagehdr-title-gap);min-width:0;flex:1 1 0;align-self:flex-start}.page-header .eyebrow{font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-flat) var(--font-sans);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--_pagehdr-eyebrow-fg)}.page-header .title{font:var(--font-weight-extrabold) var(--_pagehdr-title-fs)/var(--line-height-tight) var(--font-display);color:var(--_pagehdr-title-fg);margin:0;letter-spacing:-.02em}.page-header .title-line{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.page-header .crumbs-trail{display:flex;align-items:center;gap:var(--space-2);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-tertiary);min-width:0;flex-wrap:nowrap;overflow:hidden;padding-bottom:var(--space-1)}.page-header .crumb{color:var(--text-tertiary);text-decoration:none;display:inline-flex;align-items:center;gap:var(--space-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}.page-header .crumb:hover{color:var(--primary)}.page-header .crumb.crumb--current{color:var(--text-primary);font-weight:var(--font-weight-bold);max-width:32ch}.page-header .crumb-sep{color:var(--icon-muted);display:inline-flex;align-items:center}.page-header .subtitle{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_pagehdr-subtitle-fg);margin:0}.page-header .actions{display:flex;align-items:flex-end;gap:var(--space-2);flex-shrink:0;align-self:flex-start}.page-header .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-1-5)}.page-header .meta:not(:has(>*)){display:none}.page-header.with-meta-divider .meta{padding-top:var(--space-2);border-top:var(--border-width-default) solid var(--_pagehdr-divider)}.page-header .meta-item{display:inline-flex;align-items:center;gap:var(--space-1-5);font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-flat) var(--font-sans);color:var(--_pagehdr-meta-fg)}.page-header .meta-item .icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--_pagehdr-meta-icon-fg)}.page-header.compact{--_pagehdr-title-fs: var(--ds-pagehdr-title-fs, var(--font-size-h4));gap:var(--space-2);padding-bottom:var(--space-3)}@media(max-width:720px){.page-header .actions{width:100%}}\n"] }]
+        }], propDecorators: { eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], metaDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaDivider", required: false }] }] } });
+
+let nextId$4 = 0;
+class ModalCardComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    danger = input(false, ...(ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    closed = output();
+    titleId = `ds-modal-title-${++nextId$4}`;
+    classes = computed(() => {
+        const parts = ['modal', this.size()];
+        if (this.danger())
+            parts.push('danger');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onClose() {
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ModalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ModalCardComponent, isStandalone: true, selector: "ds-modal-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\r\n  [class]=\"classes()\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  [attr.aria-labelledby]=\"titleId\"\r\n>\r\n  <div class=\"header\">\r\n    <h2 class=\"title\" [id]=\"titleId\">{{ title() }}</h2>\r\n    @if (showClose()) {\r\n      <button class=\"close\" type=\"button\" aria-label=\"Close dialog\" (click)=\"onClose()\">\r\n        <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n  <div class=\"body\">\r\n    <ng-content select=\"[body]\"></ng-content>\r\n    <div class=\"impact\"><ng-content select=\"[impact]\"></ng-content></div>\r\n  </div>\r\n  <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.modal{--_modal-bg: var(--ds-modal-bg, var(--surface-overlay));--_modal-radius: var(--ds-modal-radius, var(--radius-lg));--_modal-shadow: var(--ds-modal-shadow, var(--shadow-modal));--_modal-divider: var(--ds-modal-divider, var(--border-divider));--_modal-title-fg: var(--ds-modal-title-fg, var(--text-primary));--_modal-title-fg-error: var(--ds-modal-title-fg-error, var(--error-text));--_modal-close-fg: var(--ds-modal-close-fg, var(--icon-default));--_modal-close-fg-hover: var(--ds-modal-close-fg-hover, var(--icon-strong));background:var(--_modal-bg);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal.sm{width:var(--modal-w-sm)}.modal.md{width:var(--modal-w-md)}.modal.lg{width:var(--modal-w-lg)}.modal .header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-width-default) solid var(--_modal-divider)}.modal .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading);margin:0;color:var(--_modal-title-fg)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-fg);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-fg-hover)}.modal .body{padding:var(--space-5);overflow-y:auto}.modal .actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--border-width-default) solid var(--_modal-divider)}.modal.danger .title{color:var(--_modal-title-fg-error)}.modal .impact{margin-top:var(--space-3)}.modal .impact:empty{display:none}.modal .impact .list{margin:var(--space-1) 0 0;padding-left:var(--space-4);font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--warning-text)}.modal-static{display:contents}.modal-backdrop{--_modal-backdrop: var(--ds-modal-backdrop, var(--surface-scrim));position:fixed;inset:0;background:var(--_modal-backdrop);z-index:var(--layer-modal);display:grid;place-items:center;animation:fade-in var(--duration-base) var(--ease-decelerate)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ModalCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-modal-card', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\r\n  [class]=\"classes()\"\r\n  role=\"dialog\"\r\n  aria-modal=\"true\"\r\n  [attr.aria-labelledby]=\"titleId\"\r\n>\r\n  <div class=\"header\">\r\n    <h2 class=\"title\" [id]=\"titleId\">{{ title() }}</h2>\r\n    @if (showClose()) {\r\n      <button class=\"close\" type=\"button\" aria-label=\"Close dialog\" (click)=\"onClose()\">\r\n        <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\r\n      </button>\r\n    }\r\n  </div>\r\n  <div class=\"body\">\r\n    <ng-content select=\"[body]\"></ng-content>\r\n    <div class=\"impact\"><ng-content select=\"[impact]\"></ng-content></div>\r\n  </div>\r\n  <div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.modal{--_modal-bg: var(--ds-modal-bg, var(--surface-overlay));--_modal-radius: var(--ds-modal-radius, var(--radius-lg));--_modal-shadow: var(--ds-modal-shadow, var(--shadow-modal));--_modal-divider: var(--ds-modal-divider, var(--border-divider));--_modal-title-fg: var(--ds-modal-title-fg, var(--text-primary));--_modal-title-fg-error: var(--ds-modal-title-fg-error, var(--error-text));--_modal-close-fg: var(--ds-modal-close-fg, var(--icon-default));--_modal-close-fg-hover: var(--ds-modal-close-fg-hover, var(--icon-strong));background:var(--_modal-bg);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal.sm{width:var(--modal-w-sm)}.modal.md{width:var(--modal-w-md)}.modal.lg{width:var(--modal-w-lg)}.modal .header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-width-default) solid var(--_modal-divider)}.modal .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading);margin:0;color:var(--_modal-title-fg)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-fg);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-fg-hover)}.modal .body{padding:var(--space-5);overflow-y:auto}.modal .actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--border-width-default) solid var(--_modal-divider)}.modal.danger .title{color:var(--_modal-title-fg-error)}.modal .impact{margin-top:var(--space-3)}.modal .impact:empty{display:none}.modal .impact .list{margin:var(--space-1) 0 0;padding-left:var(--space-4);font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--warning-text)}.modal-static{display:contents}.modal-backdrop{--_modal-backdrop: var(--ds-modal-backdrop, var(--surface-scrim));position:fixed;inset:0;background:var(--_modal-backdrop);z-index:var(--layer-modal);display:grid;place-items:center;animation:fade-in var(--duration-base) var(--ease-decelerate)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class ModalComponent {
+    doc = inject(DOCUMENT);
+    preview = inject(DsStaticPreview);
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    danger = input(false, ...(ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []));
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    closed = output();
+    confirmed = output();
+    constructor() {
+        // Lock background scroll while the dialog is open (skipped in preview mode).
+        effect(() => {
+            if (this.preview.staticPreview())
+                return;
+            this.doc.body.style.overflow = this.open() ? 'hidden' : '';
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.doc.body.style.overflow = '';
+        });
+    }
+    onClose() {
+        if (this.preview.staticPreview())
+            return;
+        this.open.set(false);
+        this.closed.emit();
+    }
+    onBackdrop(event) {
+        if (event.target === event.currentTarget)
+            this.onClose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ModalComponent, isStandalone: true, selector: "ds-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", confirmed: "confirmed" }, hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "@if (open() || preview.staticPreview()) {\r\n  <div\r\n    [class]=\"preview.staticPreview() ? 'modal-static' : 'modal-backdrop'\"\r\n    (click)=\"onBackdrop($event)\"\r\n    (keydown.escape)=\"onClose()\"\r\n  >\r\n    <ds-modal-card\r\n      [cdkTrapFocus]=\"!preview.staticPreview()\"\r\n      [cdkTrapFocusAutoCapture]=\"!preview.staticPreview()\"\r\n      [size]=\"size()\"\r\n      [danger]=\"danger()\"\r\n      [title]=\"title()\"\r\n      (closed)=\"onClose()\"\r\n    >\r\n      <ng-container body><ng-content select=\"[body]\"></ng-content></ng-container>\r\n      <ng-container impact><ng-content select=\"[impact]\"></ng-content></ng-container>\r\n      <ng-container actions><ng-content select=\"[actions]\"></ng-content></ng-container>\r\n    </ds-modal-card>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.modal{--_modal-bg: var(--ds-modal-bg, var(--surface-overlay));--_modal-radius: var(--ds-modal-radius, var(--radius-lg));--_modal-shadow: var(--ds-modal-shadow, var(--shadow-modal));--_modal-divider: var(--ds-modal-divider, var(--border-divider));--_modal-title-fg: var(--ds-modal-title-fg, var(--text-primary));--_modal-title-fg-error: var(--ds-modal-title-fg-error, var(--error-text));--_modal-close-fg: var(--ds-modal-close-fg, var(--icon-default));--_modal-close-fg-hover: var(--ds-modal-close-fg-hover, var(--icon-strong));background:var(--_modal-bg);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal.sm{width:var(--modal-w-sm)}.modal.md{width:var(--modal-w-md)}.modal.lg{width:var(--modal-w-lg)}.modal .header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-width-default) solid var(--_modal-divider)}.modal .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading);margin:0;color:var(--_modal-title-fg)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-fg);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-fg-hover)}.modal .body{padding:var(--space-5);overflow-y:auto}.modal .actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--border-width-default) solid var(--_modal-divider)}.modal.danger .title{color:var(--_modal-title-fg-error)}.modal .impact{margin-top:var(--space-3)}.modal .impact:empty{display:none}.modal .impact .list{margin:var(--space-1) 0 0;padding-left:var(--space-4);font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--warning-text)}.modal-static{display:contents}.modal-backdrop{--_modal-backdrop: var(--ds-modal-backdrop, var(--surface-scrim));position:fixed;inset:0;background:var(--_modal-backdrop);z-index:var(--layer-modal);display:grid;place-items:center;animation:fade-in var(--duration-base) var(--ease-decelerate)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "component", type: ModalCardComponent, selector: "ds-modal-card", inputs: ["size", "danger", "title", "showClose"], outputs: ["closed"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-modal', standalone: true, imports: [ModalCardComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], template: "@if (open() || preview.staticPreview()) {\r\n  <div\r\n    [class]=\"preview.staticPreview() ? 'modal-static' : 'modal-backdrop'\"\r\n    (click)=\"onBackdrop($event)\"\r\n    (keydown.escape)=\"onClose()\"\r\n  >\r\n    <ds-modal-card\r\n      [cdkTrapFocus]=\"!preview.staticPreview()\"\r\n      [cdkTrapFocusAutoCapture]=\"!preview.staticPreview()\"\r\n      [size]=\"size()\"\r\n      [danger]=\"danger()\"\r\n      [title]=\"title()\"\r\n      (closed)=\"onClose()\"\r\n    >\r\n      <ng-container body><ng-content select=\"[body]\"></ng-content></ng-container>\r\n      <ng-container impact><ng-content select=\"[impact]\"></ng-content></ng-container>\r\n      <ng-container actions><ng-content select=\"[actions]\"></ng-content></ng-container>\r\n    </ds-modal-card>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.modal{--_modal-bg: var(--ds-modal-bg, var(--surface-overlay));--_modal-radius: var(--ds-modal-radius, var(--radius-lg));--_modal-shadow: var(--ds-modal-shadow, var(--shadow-modal));--_modal-divider: var(--ds-modal-divider, var(--border-divider));--_modal-title-fg: var(--ds-modal-title-fg, var(--text-primary));--_modal-title-fg-error: var(--ds-modal-title-fg-error, var(--error-text));--_modal-close-fg: var(--ds-modal-close-fg, var(--icon-default));--_modal-close-fg-hover: var(--ds-modal-close-fg-hover, var(--icon-strong));background:var(--_modal-bg);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);display:flex;flex-direction:column;max-height:90vh;overflow:hidden}.modal.sm{width:var(--modal-w-sm)}.modal.md{width:var(--modal-w-md)}.modal.lg{width:var(--modal-w-lg)}.modal .header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:var(--border-width-default) solid var(--_modal-divider)}.modal .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading);margin:0;color:var(--_modal-title-fg)}.modal .close{background:none;border:0;cursor:pointer;color:var(--_modal-close-fg);width:var(--modal-close-size);height:var(--modal-close-size);display:grid;place-items:center}.modal .close:hover{color:var(--_modal-close-fg-hover)}.modal .body{padding:var(--space-5);overflow-y:auto}.modal .actions{display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--border-width-default) solid var(--_modal-divider)}.modal.danger .title{color:var(--_modal-title-fg-error)}.modal .impact{margin-top:var(--space-3)}.modal .impact:empty{display:none}.modal .impact .list{margin:var(--space-1) 0 0;padding-left:var(--space-4);font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--warning-text)}.modal-static{display:contents}.modal-backdrop{--_modal-backdrop: var(--ds-modal-backdrop, var(--surface-scrim));position:fixed;inset:0;background:var(--_modal-backdrop);z-index:var(--layer-modal);display:grid;place-items:center;animation:fade-in var(--duration-base) var(--ease-decelerate)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }] } });
+
+class BannerComponent {
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    layout = input('stacked', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    accentRail = input(true, ...(ngDevMode ? [{ debugName: "accentRail" }] : /* istanbul ignore next */ []));
+    dismissed = output();
+    get noRail() {
+        return !this.accentRail();
+    }
+    // Announce banners to assistive tech: errors/warnings interrupt (alert),
+    // info/success wait their turn (status). A statically-rendered banner is
+    // present at first paint, so a `status` region won't be re-read needlessly.
+    get ariaRole() {
+        const v = this.variant();
+        return v === 'error' || v === 'warning' || v === 'severe' ? 'alert' : 'status';
+    }
+    get ariaLive() {
+        return this.ariaRole === 'alert' ? 'assertive' : 'polite';
+    }
+    classes = computed(() => {
+        const parts = ['banner', this.variant(), `layout-${this.layout()}`];
+        if (this.compact())
+            parts.push('compact');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    defaultIcon = computed(() => {
+        const variant = this.variant();
+        if (variant === 'success')
+            return 'success';
+        if (variant === 'warning' || variant === 'severe')
+            return 'warn';
+        if (variant === 'error')
+            return 'error';
+        return 'info';
+    }, ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
+    onDismiss() {
+        this.dismissed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BannerComponent, isStandalone: true, selector: "ds-banner", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, accentRail: { classPropertyName: "accentRail", publicName: "accentRail", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class.no-rail": "this.noRail", "attr.role": "this.ariaRole", "attr.aria-live": "this.ariaLive" } }, ngImport: i0, template: "<div [class]=\"classes()\">\n  <ds-icon class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"20\"></ds-icon>\n  <div class=\"body\">\n    @if (title()) { <div class=\"title\">{{ title() }}</div> }\n    <ng-content></ng-content>\n  </div>\n  <div class=\"actions\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </div>\n  @if (dismissible()) {\n    <button class=\"close\" type=\"button\" (click)=\"onDismiss()\">\n      <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.banner{--_banner-bg: var(--ds-banner-bg, var(--info-subtle));--_banner-fg: var(--ds-banner-fg, var(--info-text));--_banner-bar: var(--ds-banner-bar, var(--info));--_banner-pad-y: var(--ds-banner-pad-y, var(--space-3));--_banner-pad-x: var(--ds-banner-pad-x, var(--space-4));--_banner-radius: var(--ds-banner-radius, var(--radius-md));--_banner-bar-width: var(--ds-banner-bar-width, var(--banner-bar-w));--_banner-title-fg: var(--ds-banner-title-fg, var(--text-primary));--_banner-close-fg: var(--ds-banner-close-fg, var(--icon-default));--_banner-close-fg-hover: var(--ds-banner-close-fg-hover, var(--icon-strong));display:flex;gap:var(--space-3);padding:var(--_banner-pad-y) var(--_banner-pad-x);border-radius:var(--_banner-radius);background:var(--_banner-bg);color:var(--_banner-fg)}:host(:not(.no-rail)) .banner{border-left:var(--_banner-bar-width) solid var(--_banner-bar)}.banner.success{--_banner-bar: var(--ds-banner-bar, var(--success));--_banner-bg: var(--ds-banner-bg, var(--success-subtle));--_banner-fg: var(--ds-banner-fg, var(--success-text))}.banner.warning{--_banner-bar: var(--ds-banner-bar, var(--warning));--_banner-bg: var(--ds-banner-bg, var(--warning-subtle));--_banner-fg: var(--ds-banner-fg, var(--warning-text))}.banner.severe{--_banner-bar: var(--ds-banner-bar, var(--warning-hover));--_banner-bg: var(--ds-banner-bg, var(--warning-muted));--_banner-fg: var(--ds-banner-fg, var(--warning-text))}.banner.error{--_banner-bar: var(--ds-banner-bar, var(--error));--_banner-bg: var(--ds-banner-bg, var(--error-subtle));--_banner-fg: var(--ds-banner-fg, var(--error-text))}.banner.neutral{--_banner-bar: var(--ds-banner-bar, var(--border-strong));--_banner-bg: var(--ds-banner-bg, var(--surface-secondary));--_banner-fg: var(--ds-banner-fg, var(--text-secondary))}.banner .icon{flex-shrink:0;color:inherit;margin-top:var(--banner-ic-mt)}.banner .body{flex:1;min-width:0}.banner .title{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_banner-title-fg);margin:0 0 var(--space-1)}.banner .close{background:none;border:0;cursor:pointer;color:var(--_banner-close-fg)}.banner .close:hover{color:var(--_banner-close-fg-hover)}.banner .actions{display:flex;gap:var(--space-2)}.banner .actions:empty{display:none}.banner.layout-stacked{flex-wrap:wrap;align-items:flex-start}.banner.layout-stacked .actions{flex-basis:100%;margin-top:var(--space-2);padding-left:calc(20px + var(--space-3))}.banner.layout-row{align-items:center}.banner.layout-row .body{flex:1;min-width:0}.banner.layout-row .actions{flex-shrink:0}.banner.compact{align-items:center;--_banner-pad-y: var(--ds-banner-pad-y, var(--space-2));--_banner-pad-x: var(--ds-banner-pad-x, var(--space-3))}.banner.compact .icon{margin-top:0}.banner.compact .title{margin:0;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-banner', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div [class]=\"classes()\">\n  <ds-icon class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"20\"></ds-icon>\n  <div class=\"body\">\n    @if (title()) { <div class=\"title\">{{ title() }}</div> }\n    <ng-content></ng-content>\n  </div>\n  <div class=\"actions\">\n    <ng-content select=\"[actions]\"></ng-content>\n  </div>\n  @if (dismissible()) {\n    <button class=\"close\" type=\"button\" (click)=\"onDismiss()\">\n      <ds-icon name=\"x\" [size]=\"16\"></ds-icon>\n    </button>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.banner{--_banner-bg: var(--ds-banner-bg, var(--info-subtle));--_banner-fg: var(--ds-banner-fg, var(--info-text));--_banner-bar: var(--ds-banner-bar, var(--info));--_banner-pad-y: var(--ds-banner-pad-y, var(--space-3));--_banner-pad-x: var(--ds-banner-pad-x, var(--space-4));--_banner-radius: var(--ds-banner-radius, var(--radius-md));--_banner-bar-width: var(--ds-banner-bar-width, var(--banner-bar-w));--_banner-title-fg: var(--ds-banner-title-fg, var(--text-primary));--_banner-close-fg: var(--ds-banner-close-fg, var(--icon-default));--_banner-close-fg-hover: var(--ds-banner-close-fg-hover, var(--icon-strong));display:flex;gap:var(--space-3);padding:var(--_banner-pad-y) var(--_banner-pad-x);border-radius:var(--_banner-radius);background:var(--_banner-bg);color:var(--_banner-fg)}:host(:not(.no-rail)) .banner{border-left:var(--_banner-bar-width) solid var(--_banner-bar)}.banner.success{--_banner-bar: var(--ds-banner-bar, var(--success));--_banner-bg: var(--ds-banner-bg, var(--success-subtle));--_banner-fg: var(--ds-banner-fg, var(--success-text))}.banner.warning{--_banner-bar: var(--ds-banner-bar, var(--warning));--_banner-bg: var(--ds-banner-bg, var(--warning-subtle));--_banner-fg: var(--ds-banner-fg, var(--warning-text))}.banner.severe{--_banner-bar: var(--ds-banner-bar, var(--warning-hover));--_banner-bg: var(--ds-banner-bg, var(--warning-muted));--_banner-fg: var(--ds-banner-fg, var(--warning-text))}.banner.error{--_banner-bar: var(--ds-banner-bar, var(--error));--_banner-bg: var(--ds-banner-bg, var(--error-subtle));--_banner-fg: var(--ds-banner-fg, var(--error-text))}.banner.neutral{--_banner-bar: var(--ds-banner-bar, var(--border-strong));--_banner-bg: var(--ds-banner-bg, var(--surface-secondary));--_banner-fg: var(--ds-banner-fg, var(--text-secondary))}.banner .icon{flex-shrink:0;color:inherit;margin-top:var(--banner-ic-mt)}.banner .body{flex:1;min-width:0}.banner .title{font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_banner-title-fg);margin:0 0 var(--space-1)}.banner .close{background:none;border:0;cursor:pointer;color:var(--_banner-close-fg)}.banner .close:hover{color:var(--_banner-close-fg-hover)}.banner .actions{display:flex;gap:var(--space-2)}.banner .actions:empty{display:none}.banner.layout-stacked{flex-wrap:wrap;align-items:flex-start}.banner.layout-stacked .actions{flex-basis:100%;margin-top:var(--space-2);padding-left:calc(20px + var(--space-3))}.banner.layout-row{align-items:center}.banner.layout-row .body{flex:1;min-width:0}.banner.layout-row .actions{flex-shrink:0}.banner.compact{align-items:center;--_banner-pad-y: var(--ds-banner-pad-y, var(--space-2));--_banner-pad-x: var(--ds-banner-pad-x, var(--space-3))}.banner.compact .icon{margin-top:0}.banner.compact .title{margin:0;white-space:nowrap}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], accentRail: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentRail", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], noRail: [{
+                type: HostBinding,
+                args: ['class.no-rail']
+            }], ariaRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], ariaLive: [{
+                type: HostBinding,
+                args: ['attr.aria-live']
+            }] } });
+
+class DropzoneComponent {
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    files = model([], ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    /** Disables the dropzone: blocks all file-picking interactions and signals unavailability. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Restricts the dropzone to a single file; narrows the panel to `--col-cap-text`. */
+    single = input(false, { ...(ngDevMode ? { debugName: "single" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dragOver = signal(false, ...(ngDevMode ? [{ debugName: "dragOver" }] : /* istanbul ignore next */ []));
+    filesAdded = output();
+    fileRemoved = output();
+    classes = computed(() => {
+        const parts = ['dropzone'];
+        if (this.dragOver())
+            parts.push('active');
+        if (this.files().length > 0)
+            parts.push('has-files');
+        if (this.disabled())
+            parts.push('disabled');
+        if (this.single())
+            parts.push('single');
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onDragOver(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragOver.set(true);
+    }
+    onDragLeave() {
+        this.dragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragOver.set(false);
+        if (this.disabled())
+            return;
+        const list = event.dataTransfer?.files;
+        if (list)
+            this.filesAdded.emit(Array.from(list));
+    }
+    onPickerChange(event) {
+        if (this.disabled())
+            return;
+        const list = event.target.files;
+        if (list)
+            this.filesAdded.emit(Array.from(list));
+    }
+    onRemove(file) {
+        this.fileRemoved.emit(file);
+    }
+    formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+    }
+    fileIcon(state) {
+        if (state === 'success')
+            return 'check';
+        if (state === 'error')
+            return 'error';
+        return 'file';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DropzoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DropzoneComponent, isStandalone: true, selector: "ds-dropzone", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, single: { classPropertyName: "single", publicName: "single", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { files: "filesChange", filesAdded: "filesAdded", fileRemoved: "fileRemoved" }, ngImport: i0, template: "<label\r\n  [class]=\"classes()\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave()\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  <input\r\n    type=\"file\"\r\n    class=\"dz-input\"\r\n    aria-label=\"Upload files\"\r\n    [attr.accept]=\"accept() || null\"\r\n    [multiple]=\"single() ? false : multiple()\"\r\n    [disabled]=\"disabled()\"\r\n    (change)=\"onPickerChange($event)\"\r\n  />\r\n  @if (files().length === 0) {\r\n    <ds-icon name=\"upload\" [size]=\"24\"></ds-icon>\r\n    <div class=\"title\">Drop files here</div>\r\n    <div class=\"hint\">or click to browse</div>\r\n    <ng-content select=\"[hint]\"></ng-content>\r\n  } @else {\r\n    <div class=\"file-list\">\r\n      @for (file of files(); track file.id) {\r\n        <div [class]=\"'file ' + file.state\">\r\n          <ds-icon class=\"icon\" [name]=\"fileIcon(file.state)\" [size]=\"20\"></ds-icon>\r\n          <div class=\"main\">\r\n            <div class=\"name\">{{ file.name }}</div>\r\n            <div class=\"meta\">{{ formatSize(file.size) }} \u00B7 {{ file.state }}</div>\r\n            @if (file.state === 'uploading') {\r\n              <div class=\"progress\"><div class=\"progress-fill\" [style.width.%]=\"file.progress\"></div></div>\r\n            }\r\n          </div>\r\n          <button class=\"remove\" type=\"button\" [attr.aria-label]=\"'Remove ' + file.name\" (click)=\"onRemove(file); $event.preventDefault(); $event.stopPropagation()\">\r\n            <ds-icon name=\"x\" [size]=\"14\"></ds-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</label>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0}.dz-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dropzone:focus-within{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px}.dropzone{flex:1;--_dropzone-bg: var(--ds-dropzone-bg, var(--surface-default));--_dropzone-bg-hover: var(--ds-dropzone-bg-hover, var(--primary-subtle));--_dropzone-bg-active: var(--ds-dropzone-bg-active, var(--primary-subtle));--_dropzone-border: var(--ds-dropzone-border, var(--border-default));--_dropzone-border-hover: var(--ds-dropzone-border-hover, var(--primary));--_dropzone-border-active: var(--ds-dropzone-border-active, var(--primary));--_dropzone-fg: var(--ds-dropzone-fg, var(--text-secondary));--_dropzone-fg-active: var(--ds-dropzone-fg-active, var(--primary-strong));--_dropzone-radius: var(--ds-dropzone-radius, var(--radius-lg));--_dropzone-file-progress: var(--ds-dropzone-file-progress, var(--primary));--_dropzone-file-success: var(--ds-dropzone-file-success, var(--success));--_dropzone-file-error: var(--ds-dropzone-file-error, var(--error));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border-width-strong) dashed var(--_dropzone-border);border-radius:var(--_dropzone-radius);padding:var(--space-6);text-align:center;background:var(--_dropzone-bg);cursor:pointer;min-height:160px}.dropzone:hover{border-color:var(--_dropzone-border-hover);background:var(--_dropzone-bg-hover)}.dropzone.active{border-color:var(--_dropzone-border-active);background:var(--_dropzone-bg-active)}.dropzone.has-files{align-items:stretch;text-align:left;min-height:0;cursor:default}.dropzone.disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;pointer-events:none}.dropzone.single{max-width:var(--col-cap-text)}.dropzone .title{font:var(--font-weight-bold) var(--font-size-m)/var(--line-height-snug) var(--font-heading);margin:0 0 var(--space-1)}.dropzone .hint{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_dropzone-fg)}.dropzone [hint]{margin:var(--space-3) calc(var(--space-6) * -1) 0;padding:var(--space-3) var(--space-6) 0;border-top:var(--border-width-default) solid var(--border-subtle);align-self:stretch;text-align:center;font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);letter-spacing:var(--letter-spacing-wide)}.dropzone .file-list{width:100%;margin-top:var(--space-4);display:grid;gap:var(--space-2)}.dropzone .file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default)}.dropzone .file .icon{flex-shrink:0;color:var(--icon-default)}.dropzone .file .main{flex:1;min-width:0}.dropzone .file .name{font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary)}.dropzone .file .meta{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary)}.dropzone .file .progress{height:var(--border-width-strong);background:var(--surface-secondary);border-radius:var(--radius-pill);margin-top:var(--space-1)}.dropzone .file .progress-fill{height:100%;background:var(--_dropzone-file-progress);border-radius:var(--radius-pill);transition:width var(--duration-base) var(--ease-standard)}.dropzone .file .remove{background:none;border:0;cursor:pointer;color:var(--icon-default)}.dropzone .file .remove:hover{color:var(--icon-strong)}.dropzone .file.uploading .icon{color:var(--_dropzone-file-progress)}.dropzone .file.success{border-color:var(--_dropzone-file-success)}.dropzone .file.success .icon{color:var(--_dropzone-file-success)}.dropzone .file.error{border-color:var(--_dropzone-file-error)}.dropzone .file.error .icon{color:var(--_dropzone-file-error)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DropzoneComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-dropzone', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<label\r\n  [class]=\"classes()\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  (dragover)=\"onDragOver($event)\"\r\n  (dragleave)=\"onDragLeave()\"\r\n  (drop)=\"onDrop($event)\"\r\n>\r\n  <input\r\n    type=\"file\"\r\n    class=\"dz-input\"\r\n    aria-label=\"Upload files\"\r\n    [attr.accept]=\"accept() || null\"\r\n    [multiple]=\"single() ? false : multiple()\"\r\n    [disabled]=\"disabled()\"\r\n    (change)=\"onPickerChange($event)\"\r\n  />\r\n  @if (files().length === 0) {\r\n    <ds-icon name=\"upload\" [size]=\"24\"></ds-icon>\r\n    <div class=\"title\">Drop files here</div>\r\n    <div class=\"hint\">or click to browse</div>\r\n    <ng-content select=\"[hint]\"></ng-content>\r\n  } @else {\r\n    <div class=\"file-list\">\r\n      @for (file of files(); track file.id) {\r\n        <div [class]=\"'file ' + file.state\">\r\n          <ds-icon class=\"icon\" [name]=\"fileIcon(file.state)\" [size]=\"20\"></ds-icon>\r\n          <div class=\"main\">\r\n            <div class=\"name\">{{ file.name }}</div>\r\n            <div class=\"meta\">{{ formatSize(file.size) }} \u00B7 {{ file.state }}</div>\r\n            @if (file.state === 'uploading') {\r\n              <div class=\"progress\"><div class=\"progress-fill\" [style.width.%]=\"file.progress\"></div></div>\r\n            }\r\n          </div>\r\n          <button class=\"remove\" type=\"button\" [attr.aria-label]=\"'Remove ' + file.name\" (click)=\"onRemove(file); $event.preventDefault(); $event.stopPropagation()\">\r\n            <ds-icon name=\"x\" [size]=\"14\"></ds-icon>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</label>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-width:0}.dz-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.dropzone:focus-within{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:2px}.dropzone{flex:1;--_dropzone-bg: var(--ds-dropzone-bg, var(--surface-default));--_dropzone-bg-hover: var(--ds-dropzone-bg-hover, var(--primary-subtle));--_dropzone-bg-active: var(--ds-dropzone-bg-active, var(--primary-subtle));--_dropzone-border: var(--ds-dropzone-border, var(--border-default));--_dropzone-border-hover: var(--ds-dropzone-border-hover, var(--primary));--_dropzone-border-active: var(--ds-dropzone-border-active, var(--primary));--_dropzone-fg: var(--ds-dropzone-fg, var(--text-secondary));--_dropzone-fg-active: var(--ds-dropzone-fg-active, var(--primary-strong));--_dropzone-radius: var(--ds-dropzone-radius, var(--radius-lg));--_dropzone-file-progress: var(--ds-dropzone-file-progress, var(--primary));--_dropzone-file-success: var(--ds-dropzone-file-success, var(--success));--_dropzone-file-error: var(--ds-dropzone-file-error, var(--error));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);border:var(--border-width-strong) dashed var(--_dropzone-border);border-radius:var(--_dropzone-radius);padding:var(--space-6);text-align:center;background:var(--_dropzone-bg);cursor:pointer;min-height:160px}.dropzone:hover{border-color:var(--_dropzone-border-hover);background:var(--_dropzone-bg-hover)}.dropzone.active{border-color:var(--_dropzone-border-active);background:var(--_dropzone-bg-active)}.dropzone.has-files{align-items:stretch;text-align:left;min-height:0;cursor:default}.dropzone.disabled{background:var(--surface-disabled);border-color:var(--border-disabled);color:var(--text-disabled);cursor:not-allowed;pointer-events:none}.dropzone.single{max-width:var(--col-cap-text)}.dropzone .title{font:var(--font-weight-bold) var(--font-size-m)/var(--line-height-snug) var(--font-heading);margin:0 0 var(--space-1)}.dropzone .hint{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_dropzone-fg)}.dropzone [hint]{margin:var(--space-3) calc(var(--space-6) * -1) 0;padding:var(--space-3) var(--space-6) 0;border-top:var(--border-width-default) solid var(--border-subtle);align-self:stretch;text-align:center;font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary);letter-spacing:var(--letter-spacing-wide)}.dropzone .file-list{width:100%;margin-top:var(--space-4);display:grid;gap:var(--space-2)}.dropzone .file{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default)}.dropzone .file .icon{flex-shrink:0;color:var(--icon-default)}.dropzone .file .main{flex:1;min-width:0}.dropzone .file .name{font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-primary)}.dropzone .file .meta{font:var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans);color:var(--text-tertiary)}.dropzone .file .progress{height:var(--border-width-strong);background:var(--surface-secondary);border-radius:var(--radius-pill);margin-top:var(--space-1)}.dropzone .file .progress-fill{height:100%;background:var(--_dropzone-file-progress);border-radius:var(--radius-pill);transition:width var(--duration-base) var(--ease-standard)}.dropzone .file .remove{background:none;border:0;cursor:pointer;color:var(--icon-default)}.dropzone .file .remove:hover{color:var(--icon-strong)}.dropzone .file.uploading .icon{color:var(--_dropzone-file-progress)}.dropzone .file.success{border-color:var(--_dropzone-file-success)}.dropzone .file.success .icon{color:var(--_dropzone-file-success)}.dropzone .file.error{border-color:var(--_dropzone-file-error)}.dropzone .file.error .icon{color:var(--_dropzone-file-error)}\n"] }]
+        }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }, { type: i0.Output, args: ["filesChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], single: [{ type: i0.Input, args: [{ isSignal: true, alias: "single", required: false }] }], filesAdded: [{ type: i0.Output, args: ["filesAdded"] }], fileRemoved: [{ type: i0.Output, args: ["fileRemoved"] }] } });
+
+class MenuItemComponent {
+    // The containing overlay (e.g. popover), if any — selecting an item closes it.
+    // Optional, so menu-items also work standalone.
+    closeRef = inject(DsOverlayCloseRef, { optional: true });
+    button = viewChild.required('button');
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    danger = input(false, ...(ngDevMode ? [{ debugName: "danger" }] : /* istanbul ignore next */ []));
+    pressed = output();
+    /** Roving tabindex, owned by ds-menu — exactly one item is tabbable (0), the
+     *  rest -1. Defaults true so a standalone item (outside ds-menu) stays
+     *  reachable. */
+    tabbable = signal(true, ...(ngDevMode ? [{ debugName: "tabbable" }] : /* istanbul ignore next */ []));
+    /** Move keyboard focus to this item's control. */
+    focus() {
+        this.button().nativeElement.focus();
+    }
+    /** Whether `node` lives inside this item's control (used by ds-menu to find
+     *  the currently focused item during keyboard nav). */
+    contains(node) {
+        return !!node && this.button().nativeElement.contains(node);
+    }
+    /** Visible label text — used by ds-menu's type-ahead. */
+    label() {
+        return this.button().nativeElement.textContent?.trim() ?? '';
+    }
+    onClick(event) {
+        if (this.disabled())
+            return;
+        this.pressed.emit(event);
+        this.closeRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: MenuItemComponent, isStandalone: true, selector: "ds-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressed: "pressed" }, host: { attributes: { "role": "none" } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\r\n  #button\r\n  class=\"menu-item\"\r\n  type=\"button\"\r\n  role=\"menuitem\"\r\n  [attr.tabindex]=\"tabbable() ? 0 : -1\"\r\n  [disabled]=\"disabled()\"\r\n  [class.danger]=\"danger()\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  @if (icon()) {\r\n    <ds-icon [name]=\"icon()!\" [size]=\"16\"></ds-icon>\r\n  } @else {\r\n    <span class=\"menu-item-icon\"><ng-content select=\"[icon]\"></ng-content></span>\r\n  }\r\n  <span><ng-content></ng-content></span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.menu-item{--_menu-item-fg: var(--ds-menu-item-fg, var(--text-primary));display:flex;align-items:center;gap:var(--space-2-5);width:100%;padding:var(--space-2) var(--space-3);background:transparent;border:0;border-radius:var(--radius-md);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_menu-item-fg);cursor:pointer;text-align:left;transition:background var(--duration-fast) var(--ease-standard)}.menu-item:hover{background:var(--surface-secondary)}.menu-item:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}.menu-item[disabled]{color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.menu-item[disabled]:hover{background:transparent}.menu-item.danger{color:var(--error-text)}.menu-item.danger:hover{background:var(--error-subtle)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-menu-item', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { role: 'none' }, template: "<button\r\n  #button\r\n  class=\"menu-item\"\r\n  type=\"button\"\r\n  role=\"menuitem\"\r\n  [attr.tabindex]=\"tabbable() ? 0 : -1\"\r\n  [disabled]=\"disabled()\"\r\n  [class.danger]=\"danger()\"\r\n  (click)=\"onClick($event)\"\r\n>\r\n  @if (icon()) {\r\n    <ds-icon [name]=\"icon()!\" [size]=\"16\"></ds-icon>\r\n  } @else {\r\n    <span class=\"menu-item-icon\"><ng-content select=\"[icon]\"></ng-content></span>\r\n  }\r\n  <span><ng-content></ng-content></span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.menu-item{--_menu-item-fg: var(--ds-menu-item-fg, var(--text-primary));display:flex;align-items:center;gap:var(--space-2-5);width:100%;padding:var(--space-2) var(--space-3);background:transparent;border:0;border-radius:var(--radius-md);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_menu-item-fg);cursor:pointer;text-align:left;transition:background var(--duration-fast) var(--ease-standard)}.menu-item:hover{background:var(--surface-secondary)}.menu-item:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}.menu-item[disabled]{color:var(--text-disabled);cursor:not-allowed;opacity:var(--opacity-muted)}.menu-item[disabled]:hover{background:transparent}.menu-item.danger{color:var(--error-text)}.menu-item.danger:hover{background:var(--error-subtle)}\n"] }]
+        }], propDecorators: { button: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], pressed: [{ type: i0.Output, args: ["pressed"] }] } });
+
+class MenuComponent {
+    items = contentChildren(MenuItemComponent, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Index of the roving-focus item — the single item reachable via Tab. */
+    activeIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Roving tabindex: exactly one enabled item is tabbable (0), the rest -1.
+        effect(() => {
+            const items = this.items();
+            if (!items.length)
+                return;
+            let index = this.activeIndex();
+            if (index >= items.length || items[index].disabled()) {
+                index = items.findIndex((item) => !item.disabled());
+            }
+            items.forEach((item, i) => item.tabbable.set(i === index));
+        });
+    }
+    onKeydown(event) {
+        const items = this.items();
+        if (!items.length)
+            return;
+        const count = items.length;
+        const focused = items.findIndex((item) => item.contains(event.target));
+        const from = focused >= 0 ? focused : this.activeIndex();
+        // Single-character type-ahead: jump to the next enabled item whose label
+        // starts with the typed character.
+        if (event.key.length === 1 &&
+            /\S/.test(event.key) &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey) {
+            this.typeAhead(event.key, from, items);
+            event.preventDefault();
+            return;
+        }
+        let next;
+        switch (event.key) {
+            case 'ArrowDown':
+                next = (from + 1) % count;
+                break;
+            case 'ArrowUp':
+                next = (from - 1 + count) % count;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = count - 1;
+                break;
+            default: return;
+        }
+        event.preventDefault();
+        // Skip disabled items in the travel direction (guard against all-disabled).
+        const step = event.key === 'ArrowUp' || event.key === 'End' ? -1 : 1;
+        let guard = 0;
+        while (items[next]?.disabled() && guard < count) {
+            next = (next + step + count) % count;
+            guard++;
+        }
+        if (!items[next] || items[next].disabled())
+            return;
+        this.focusItem(next);
+    }
+    typeAhead(char, from, items) {
+        const needle = char.toLowerCase();
+        const count = items.length;
+        for (let offset = 1; offset <= count; offset++) {
+            const i = (from + offset) % count;
+            const item = items[i];
+            if (!item.disabled() && item.label().toLowerCase().startsWith(needle)) {
+                this.focusItem(i);
+                return;
+            }
+        }
+    }
+    focusItem(index) {
+        this.activeIndex.set(index);
+        this.items()[index].focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: MenuComponent, isStandalone: true, selector: "ds-menu", host: { listeners: { "keydown": "onKeydown($event)" } }, queries: [{ propertyName: "items", predicate: MenuItemComponent, isSignal: true }], ngImport: i0, template: "<ul class=\"menu\" role=\"menu\">\r\n  <ng-content></ng-content>\r\n</ul>\r\n", styles: [":host{display:block;background:var(--surface-default);border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-md);padding:var(--space-1)}:host-context(.popover){background:transparent;border:0;border-radius:0;padding:0}.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-0-5)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-menu', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: { '(keydown)': 'onKeydown($event)' }, template: "<ul class=\"menu\" role=\"menu\">\r\n  <ng-content></ng-content>\r\n</ul>\r\n", styles: [":host{display:block;background:var(--surface-default);border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-md);padding:var(--space-1)}:host-context(.popover){background:transparent;border:0;border-radius:0;padding:0}.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-0-5)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MenuItemComponent), { isSignal: true }] }] } });
+
+class SpinnerComponent {
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SpinnerComponent, isStandalone: true, selector: "ds-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status", "aria-label": "Loading" }, properties: { "class.sm": "size() === 'sm'", "class.lg": "size() === 'lg'" } }, ngImport: i0, template: '', isInline: true, styles: ["@charset \"UTF-8\";:host{display:inline-block;width:var(--spinner-md);height:var(--spinner-md);border:var(--spinner-bw) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:spinner-rotate var(--duration-loop-fast) linear infinite}:host(.sm){width:var(--spinner-sm);height:var(--spinner-sm);border-width:var(--border-width-default)}:host(.lg){width:var(--spinner-lg);height:var(--spinner-lg);border-width:var(--border-width-strong)}@keyframes spinner-rotate{to{transform:rotate(360deg)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-spinner', standalone: true, template: '', host: {
+                        'role': 'status',
+                        'aria-label': 'Loading',
+                        '[class.sm]': "size() === 'sm'",
+                        '[class.lg]': "size() === 'lg'",
+                    }, encapsulation: ViewEncapsulation.Emulated, styles: ["@charset \"UTF-8\";:host{display:inline-block;width:var(--spinner-md);height:var(--spinner-md);border:var(--spinner-bw) solid var(--border-default);border-top-color:var(--primary);border-radius:var(--radius-pill);animation:spinner-rotate var(--duration-loop-fast) linear infinite}:host(.sm){width:var(--spinner-sm);height:var(--spinner-sm);border-width:var(--border-width-default)}:host(.lg){width:var(--spinner-lg);height:var(--spinner-lg);border-width:var(--border-width-strong)}@keyframes spinner-rotate{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+class EmptyStateComponent {
+    variant = input('none', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    body = input('', ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const variant = this.variant();
+        return variant === 'none' ? 'empty-state' : `empty-state ${variant}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    resolvedIcon = computed(() => {
+        const explicit = this.icon();
+        if (explicit)
+            return explicit;
+        const variant = this.variant();
+        if (variant === 'error')
+            return 'warn';
+        if (variant === 'locked')
+            return 'lock';
+        if (variant === 'success')
+            return 'success';
+        if (variant === 'loading')
+            return 'package';
+        return 'package';
+    }, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: EmptyStateComponent, isStandalone: true, selector: "ds-empty-state", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, body: { classPropertyName: "body", publicName: "body", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [class]=\"classes()\">\n  <span class=\"icon-tile\">\n    <ds-icon [name]=\"resolvedIcon()\" [size]=\"28\"></ds-icon>\n  </span>\n  @if (title()) { <span class=\"title\">{{ title() }}</span> }\n  @if (body()) { <span class=\"body\">{{ body() }}</span> }\n  <span class=\"cta\"><ng-content select=\"[actions]\"></ng-content></span>\n  @if (variant() === 'loading') {\n    <span class=\"overlay-spin\"><ds-spinner size=\"lg\" /></span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:block}.empty-state{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-tint));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-secondary));--_es-title-fg: var(--ds-empty-state-title-fg, var(--text-primary));--_es-body-fg: var(--ds-empty-state-body-fg, var(--text-secondary));--_es-body-maxw: var(--ds-empty-state-body-maxw, var(--empty-body-maxw));--_es-pad: var(--ds-empty-state-pad, var(--space-12) var(--space-6));display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--_es-pad);gap:var(--space-3);position:relative}.empty-state .icon-tile{width:var(--empty-icon-size);height:var(--empty-icon-size);border-radius:var(--radius-lg);background:var(--_es-tile-bg);color:var(--_es-tile-fg);display:grid;place-items:center;margin-bottom:var(--space-2)}.empty-state .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);color:var(--_es-title-fg);margin:0}.empty-state .body{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_es-body-fg);max-width:var(--_es-body-maxw);margin:0}.empty-state .cta{margin-top:var(--space-3);display:inline-flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;justify-content:center}.empty-state .cta:empty{display:none;margin-top:0}.empty-state .overlay-spin{position:absolute;inset:0;display:grid;place-items:center;z-index:1}.empty-state .overlay-spin:before{content:\"\";position:absolute;inset:0;background:#ffffff80;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));border-radius:inherit}.empty-state .overlay-spin .spinner{position:relative;z-index:1}.empty-state.error{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--error-subtle));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--error-text))}.empty-state.locked{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-muted));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-tertiary))}.empty-state.success{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--success-subtle));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--success-text))}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "component", type: SpinnerComponent, selector: "ds-spinner", inputs: ["size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-empty-state', standalone: true, imports: [IconComponent, SpinnerComponent], encapsulation: ViewEncapsulation.Emulated, template: "<span [class]=\"classes()\">\n  <span class=\"icon-tile\">\n    <ds-icon [name]=\"resolvedIcon()\" [size]=\"28\"></ds-icon>\n  </span>\n  @if (title()) { <span class=\"title\">{{ title() }}</span> }\n  @if (body()) { <span class=\"body\">{{ body() }}</span> }\n  <span class=\"cta\"><ng-content select=\"[actions]\"></ng-content></span>\n  @if (variant() === 'loading') {\n    <span class=\"overlay-spin\"><ds-spinner size=\"lg\" /></span>\n  }\n</span>\n", styles: ["@charset \"UTF-8\";:host{display:block}.empty-state{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-tint));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-secondary));--_es-title-fg: var(--ds-empty-state-title-fg, var(--text-primary));--_es-body-fg: var(--ds-empty-state-body-fg, var(--text-secondary));--_es-body-maxw: var(--ds-empty-state-body-maxw, var(--empty-body-maxw));--_es-pad: var(--ds-empty-state-pad, var(--space-12) var(--space-6));display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--_es-pad);gap:var(--space-3);position:relative}.empty-state .icon-tile{width:var(--empty-icon-size);height:var(--empty-icon-size);border-radius:var(--radius-lg);background:var(--_es-tile-bg);color:var(--_es-tile-fg);display:grid;place-items:center;margin-bottom:var(--space-2)}.empty-state .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);color:var(--_es-title-fg);margin:0}.empty-state .body{font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--_es-body-fg);max-width:var(--_es-body-maxw);margin:0}.empty-state .cta{margin-top:var(--space-3);display:inline-flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;justify-content:center}.empty-state .cta:empty{display:none;margin-top:0}.empty-state .overlay-spin{position:absolute;inset:0;display:grid;place-items:center;z-index:1}.empty-state .overlay-spin:before{content:\"\";position:absolute;inset:0;background:#ffffff80;-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));border-radius:inherit}.empty-state .overlay-spin .spinner{position:relative;z-index:1}.empty-state.error{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--error-subtle));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--error-text))}.empty-state.locked{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--surface-muted));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--text-tertiary))}.empty-state.success{--_es-tile-bg: var(--ds-empty-state-tile-bg, var(--success-subtle));--_es-tile-fg: var(--ds-empty-state-tile-fg, var(--success-text))}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], body: [{ type: i0.Input, args: [{ isSignal: true, alias: "body", required: false }] }] } });
+
+class ProgressComponent {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the progress bar (e.g. "Upload progress"). */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    clampedValue = computed(() => {
+        const v = this.value();
+        return Math.max(0, Math.min(100, v));
+    }, ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    isIndet = computed(() => this.variant() === 'indeterminate', ...(ngDevMode ? [{ debugName: "isIndet" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ProgressComponent, isStandalone: true, selector: "ds-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-valuemin": "0", "aria-valuemax": "100" }, properties: { "attr.aria-valuenow": "isIndet() ? null : clampedValue()", "attr.aria-label": "ariaLabel()", "class.success": "variant() === 'success'", "class.warn": "variant() === 'warn'", "class.error": "variant() === 'error'", "class.indeterminate": "isIndet()" } }, ngImport: i0, template: "@if (isIndet()) {\n  <span></span>\n} @else {\n  <span [style.width.%]=\"clampedValue()\"></span>\n}\n", styles: [":host{display:block;width:100%;height:var(--progress-h);background:var(--surface-muted);border-radius:var(--radius-pill);overflow:hidden}:host>span{display:block;height:100%;background:var(--primary);border-radius:var(--radius-pill);transition:width var(--duration-base) var(--ease-standard)}:host(.success)>span{background:var(--success)}:host(.warn)>span{background:var(--warning-hover)}:host(.error)>span{background:var(--error)}:host(.indeterminate)>span{width:30%;animation:progress-indet var(--duration-loop-slow) var(--ease-standard) infinite}@keyframes progress-indet{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ProgressComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-progress', standalone: true, imports: [], encapsulation: ViewEncapsulation.Emulated, host: {
+                        role: 'progressbar',
+                        'aria-valuemin': '0',
+                        'aria-valuemax': '100',
+                        '[attr.aria-valuenow]': 'isIndet() ? null : clampedValue()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[class.success]': "variant() === 'success'",
+                        '[class.warn]': "variant() === 'warn'",
+                        '[class.error]': "variant() === 'error'",
+                        '[class.indeterminate]': 'isIndet()',
+                    }, template: "@if (isIndet()) {\n  <span></span>\n} @else {\n  <span [style.width.%]=\"clampedValue()\"></span>\n}\n", styles: [":host{display:block;width:100%;height:var(--progress-h);background:var(--surface-muted);border-radius:var(--radius-pill);overflow:hidden}:host>span{display:block;height:100%;background:var(--primary);border-radius:var(--radius-pill);transition:width var(--duration-base) var(--ease-standard)}:host(.success)>span{background:var(--success)}:host(.warn)>span{background:var(--warning-hover)}:host(.error)>span{background:var(--error)}:host(.indeterminate)>span{width:30%;animation:progress-indet var(--duration-loop-slow) var(--ease-standard) infinite}@keyframes progress-indet{0%{transform:translate(-100%)}to{transform:translate(400%)}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+class AccordionComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: AccordionComponent, isStandalone: true, selector: "ds-accordion", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-lg);overflow:hidden}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-accordion', standalone: true, imports: [], template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:block;border:var(--border-width-default) solid var(--border-divider);border-radius:var(--radius-lg);overflow:hidden}\n"] }]
+        }] });
+
+let nextId$3 = 0;
+class AccordionItemComponent {
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    uid = `ds-accordion-${++nextId$3}`;
+    headId = `${this.uid}-head`;
+    bodyId = `${this.uid}-body`;
+    toggle() {
+        this.expanded.set(!this.expanded());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AccordionItemComponent, isStandalone: true, selector: "ds-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"head\"\r\n  [id]=\"headId\"\r\n  [attr.aria-expanded]=\"expanded()\"\r\n  [attr.aria-controls]=\"bodyId\"\r\n  (click)=\"toggle()\"\r\n>\r\n  <span>{{ title() }}</span>\r\n  <ng-content select=\"[badge]\"></ng-content>\r\n  <ds-icon name=\"chevronRight\" class=\"chev\" [size]=\"16\" />\r\n</button>\r\n@if (expanded()) {\r\n  <div class=\"body\" role=\"region\" [id]=\"bodyId\" [attr.aria-labelledby]=\"headId\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}:host+:host{border-top:var(--border-width-default) solid var(--border-divider)}:host .head{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);border:0;background:var(--surface-default);text-align:left;cursor:pointer;font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}:host .head:hover{background:var(--surface-secondary)}:host .head:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}:host .head .chev{margin-left:auto;transition:transform var(--duration-base) var(--ease-standard);color:var(--icon-default)}:host .head[aria-expanded=true] .chev{transform:rotate(90deg)}:host .body{padding:0 var(--space-4) var(--space-4);color:var(--text-secondary);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-accordion-item', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<button\r\n  type=\"button\"\r\n  class=\"head\"\r\n  [id]=\"headId\"\r\n  [attr.aria-expanded]=\"expanded()\"\r\n  [attr.aria-controls]=\"bodyId\"\r\n  (click)=\"toggle()\"\r\n>\r\n  <span>{{ title() }}</span>\r\n  <ng-content select=\"[badge]\"></ng-content>\r\n  <ds-icon name=\"chevronRight\" class=\"chev\" [size]=\"16\" />\r\n</button>\r\n@if (expanded()) {\r\n  <div class=\"body\" role=\"region\" [id]=\"bodyId\" [attr.aria-labelledby]=\"headId\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}:host+:host{border-top:var(--border-width-default) solid var(--border-divider)}:host .head{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-3) var(--space-4);border:0;background:var(--surface-default);text-align:left;cursor:pointer;font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}:host .head:hover{background:var(--surface-secondary)}:host .head:focus-visible{outline:var(--border-width-strong, 2px) solid var(--primary);outline-offset:-2px}:host .head .chev{margin-left:auto;transition:transform var(--duration-base) var(--ease-standard);color:var(--icon-default)}:host .head[aria-expanded=true] .chev{transform:rotate(90deg)}:host .body{padding:0 var(--space-4) var(--space-4);color:var(--text-secondary);font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
+
+class StepperComponent {
+    steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    current = input(0, ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    stepState(i) {
+        const c = this.current();
+        if (i < c)
+            return 'completed';
+        if (i === c)
+            return 'current';
+        return 'upcoming';
+    }
+    nodeClass(i) {
+        const c = this.current();
+        if (i < c)
+            return 'node done';
+        if (i === c)
+            return 'node active';
+        return 'node';
+    }
+    barClass(i) {
+        return i < this.current() ? 'bar done' : 'bar';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: StepperComponent, isStandalone: true, selector: "ds-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "list", "aria-label": "Progress" } }, ngImport: i0, template: "@for (label of steps(); track $index; let i = $index, last = $last) {\r\n  <span\r\n    [class]=\"nodeClass(i)\"\r\n    role=\"listitem\"\r\n    [attr.aria-current]=\"i === current() ? 'step' : null\"\r\n  >\r\n    <span aria-hidden=\"true\">\r\n      @if (i < current()) {\r\n        <ds-icon name=\"check\" [size]=\"14\" />\r\n      } @else {\r\n        {{ i + 1 }}\r\n      }\r\n    </span>\r\n    <span class=\"visually-hidden\">Step {{ i + 1 }}: {{ label }} ({{ stepState(i) }})</span>\r\n  </span>\r\n  @if (!last) {\r\n    <span [class]=\"barClass(i)\" aria-hidden=\"true\"></span>\r\n  }\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center}:host .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .node{width:var(--stepper-node-size);height:var(--stepper-node-size);border-radius:var(--radius-pill);display:grid;place-items:center;border:var(--border-width-default) solid var(--border-strong);background:var(--surface-default);color:var(--text-tertiary);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans)}:host .node.done{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary)}:host .node.active{background:var(--primary);border-color:var(--primary);color:var(--primary-on)}:host .bar{height:var(--stepper-bar-h);width:var(--stepper-bar-w);background:var(--border-divider)}:host .bar.done{background:var(--primary)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-stepper', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: { role: 'list', 'aria-label': 'Progress' }, template: "@for (label of steps(); track $index; let i = $index, last = $last) {\r\n  <span\r\n    [class]=\"nodeClass(i)\"\r\n    role=\"listitem\"\r\n    [attr.aria-current]=\"i === current() ? 'step' : null\"\r\n  >\r\n    <span aria-hidden=\"true\">\r\n      @if (i < current()) {\r\n        <ds-icon name=\"check\" [size]=\"14\" />\r\n      } @else {\r\n        {{ i + 1 }}\r\n      }\r\n    </span>\r\n    <span class=\"visually-hidden\">Step {{ i + 1 }}: {{ label }} ({{ stepState(i) }})</span>\r\n  </span>\r\n  @if (!last) {\r\n    <span [class]=\"barClass(i)\" aria-hidden=\"true\"></span>\r\n  }\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center}:host .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host .node{width:var(--stepper-node-size);height:var(--stepper-node-size);border-radius:var(--radius-pill);display:grid;place-items:center;border:var(--border-width-default) solid var(--border-strong);background:var(--surface-default);color:var(--text-tertiary);font:var(--font-weight-bold) var(--font-size-xs)/var(--line-height-flat) var(--font-sans)}:host .node.done{background:var(--primary-subtle);border-color:var(--primary);color:var(--primary)}:host .node.active{background:var(--primary);border-color:var(--primary);color:var(--primary-on)}:host .bar{height:var(--stepper-bar-h);width:var(--stepper-bar-w);background:var(--border-divider)}:host .bar.done{background:var(--primary)}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }] } });
+
+class TooltipPanelComponent {
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    placement = input.required(...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: TooltipPanelComponent, isStandalone: true, selector: "ds-tooltip-panel", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: true, transformFunction: null }, panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "attr.id": "panelId()", "class.top": "placement() === 'top'", "class.bottom": "placement() === 'bottom'", "class.left": "placement() === 'left'", "class.right": "placement() === 'right'" } }, ngImport: i0, template: `{{ text() }}`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;position:relative;background:var(--surface-inverted);color:var(--text-inverted);font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-base) var(--font-sans);padding:var(--space-1-5) var(--space-2-5);border-radius:var(--radius-md);max-width:var(--tooltip-maxw);z-index:var(--layer-tooltip);box-shadow:var(--shadow-2)}:host:after{content:\"\";position:absolute;width:var(--space-2);height:var(--space-2);background:var(--surface-inverted);transform:rotate(45deg)}:host(.bottom):after{top:calc(var(--tooltip-arrow) / -2);left:50%;margin-left:calc(var(--tooltip-arrow) / -2)}:host(.top):after{bottom:calc(var(--tooltip-arrow) / -2);left:50%;margin-left:calc(var(--tooltip-arrow) / -2)}:host(.left):after{right:calc(var(--tooltip-arrow) / -2);top:50%;margin-top:calc(var(--tooltip-arrow) / -2)}:host(.right):after{left:calc(var(--tooltip-arrow) / -2);top:50%;margin-top:calc(var(--tooltip-arrow) / -2)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-tooltip-panel', standalone: true, template: `{{ text() }}`, host: {
+                        role: 'tooltip',
+                        '[attr.id]': 'panelId()',
+                        '[class.top]': "placement() === 'top'",
+                        '[class.bottom]': "placement() === 'bottom'",
+                        '[class.left]': "placement() === 'left'",
+                        '[class.right]': "placement() === 'right'",
+                    }, encapsulation: ViewEncapsulation.Emulated, styles: ["@charset \"UTF-8\";:host{display:block;position:relative;background:var(--surface-inverted);color:var(--text-inverted);font:var(--font-weight-medium) var(--font-size-xs)/var(--line-height-base) var(--font-sans);padding:var(--space-1-5) var(--space-2-5);border-radius:var(--radius-md);max-width:var(--tooltip-maxw);z-index:var(--layer-tooltip);box-shadow:var(--shadow-2)}:host:after{content:\"\";position:absolute;width:var(--space-2);height:var(--space-2);background:var(--surface-inverted);transform:rotate(45deg)}:host(.bottom):after{top:calc(var(--tooltip-arrow) / -2);left:50%;margin-left:calc(var(--tooltip-arrow) / -2)}:host(.top):after{bottom:calc(var(--tooltip-arrow) / -2);left:50%;margin-left:calc(var(--tooltip-arrow) / -2)}:host(.left):after{right:calc(var(--tooltip-arrow) / -2);top:50%;margin-top:calc(var(--tooltip-arrow) / -2)}:host(.right):after{left:calc(var(--tooltip-arrow) / -2);top:50%;margin-top:calc(var(--tooltip-arrow) / -2)}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: true }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }] } });
+
+let nextId$2 = 0;
+class TooltipDirective {
+    overlay = inject(Overlay);
+    host = inject((ElementRef));
+    dsTooltip = input('', ...(ngDevMode ? [{ debugName: "dsTooltip" }] : /* istanbul ignore next */ []));
+    dsTooltipPlacement = input('top', ...(ngDevMode ? [{ debugName: "dsTooltipPlacement" }] : /* istanbul ignore next */ []));
+    dsTooltipDelay = input(120, ...(ngDevMode ? [{ debugName: "dsTooltipDelay" }] : /* istanbul ignore next */ []));
+    ref = null;
+    timer = null;
+    tipId = `ds-tooltip-${++nextId$2}`;
+    onOpen() {
+        if (!this.dsTooltip())
+            return;
+        if (this.timer !== null)
+            clearTimeout(this.timer);
+        this.timer = window.setTimeout(() => this.show(), this.dsTooltipDelay());
+    }
+    onClose() {
+        if (this.timer !== null) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        this.ref?.dispose();
+        this.ref = null;
+        const host = this.host.nativeElement;
+        const remaining = (host.getAttribute('aria-describedby') ?? '')
+            .split(' ')
+            .filter((id) => id && id !== this.tipId)
+            .join(' ');
+        if (remaining)
+            host.setAttribute('aria-describedby', remaining);
+        else
+            host.removeAttribute('aria-describedby');
+    }
+    onEscape() {
+        if (this.ref)
+            this.onClose();
+    }
+    show() {
+        const placement = this.dsTooltipPlacement();
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(this.host)
+            .withPositions([this.positionFor(placement)]);
+        this.ref = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+        });
+        const cmpRef = this.ref.attach(new ComponentPortal(TooltipPanelComponent));
+        cmpRef.setInput('text', this.dsTooltip());
+        cmpRef.setInput('placement', placement);
+        cmpRef.setInput('panelId', this.tipId);
+        const host = this.host.nativeElement;
+        const existing = host.getAttribute('aria-describedby');
+        host.setAttribute('aria-describedby', existing ? `${existing} ${this.tipId}` : this.tipId);
+    }
+    positionFor(p) {
+        switch (p) {
+            case 'top':
+                return { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 };
+            case 'bottom':
+                return { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 };
+            case 'left':
+                return { originX: 'start', originY: 'center', overlayX: 'end', overlayY: 'center', offsetX: -8 };
+            case 'right':
+                return { originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center', offsetX: 8 };
+        }
+    }
+    ngOnDestroy() {
+        this.onClose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: TooltipDirective, isStandalone: true, selector: "[dsTooltip]", inputs: { dsTooltip: { classPropertyName: "dsTooltip", publicName: "dsTooltip", isSignal: true, isRequired: false, transformFunction: null }, dsTooltipPlacement: { classPropertyName: "dsTooltipPlacement", publicName: "dsTooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, dsTooltipDelay: { classPropertyName: "dsTooltipDelay", publicName: "dsTooltipDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onOpen()", "focus": "onOpen()", "mouseleave": "onClose()", "blur": "onClose()", "keydown.escape": "onEscape()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dsTooltip]',
+                    standalone: true,
+                }]
+        }], propDecorators: { dsTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsTooltip", required: false }] }], dsTooltipPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsTooltipPlacement", required: false }] }], dsTooltipDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "dsTooltipDelay", required: false }] }], onOpen: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focus']
+            }], onClose: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['blur']
+            }], onEscape: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+
+class PopoverComponent {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    preview = inject(DsStaticPreview);
+    panelTpl = viewChild('panel', ...(ngDevMode ? [{ debugName: "panelTpl" }] : /* istanbul ignore next */ []));
+    ref = null;
+    align = input('start', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    /** ARIA role for the panel (e.g. 'dialog' for interactive popovers). When set,
+     *  the panel also traps focus, auto-captures it into the panel on open, and
+     *  restores it to the trigger on close (Escape or backdrop). Leave null for
+     *  plain, non-interactive text popovers. */
+    panelRole = input(null, ...(ngDevMode ? [{ debugName: "panelRole" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the panel; pair with `panelRole`. */
+    panelLabel = input(null, ...(ngDevMode ? [{ debugName: "panelLabel" }] : /* istanbul ignore next */ []));
+    /** Open/closed state — for callers binding `aria-expanded` on the trigger. */
+    opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    toggle(trigger) {
+        if (this.preview.staticPreview())
+            return;
+        if (this.ref) {
+            this.close();
+            return;
+        }
+        const align = this.align();
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(trigger)
+            .withPositions([
+            { originX: align, originY: 'bottom', overlayX: align, overlayY: 'top', offsetY: 4 },
+            { originX: align, originY: 'top', overlayX: align, overlayY: 'bottom', offsetY: -4 },
+        ]);
+        const cfg = {
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+        };
+        this.ref = this.overlay.create(cfg);
+        this.ref.backdropClick().subscribe(() => this.close());
+        this.ref.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.close();
+                trigger.focus();
+            }
+        });
+        this.ref.attach(new TemplatePortal(this.panelTpl(), this.vcr));
+        this.opened.set(true);
+    }
+    close() {
+        this.ref?.dispose();
+        this.ref = null;
+        this.opened.set(false);
+    }
+    ngOnDestroy() {
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PopoverComponent, isStandalone: true, selector: "ds-popover", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, panelRole: { classPropertyName: "panelRole", publicName: "panelRole", isSignal: true, isRequired: false, transformFunction: null }, panelLabel: { classPropertyName: "panelLabel", publicName: "panelLabel", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: DsOverlayCloseRef, useExisting: forwardRef(() => PopoverComponent) }], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], hostDirectives: [{ directive: DsStaticPreview, inputs: ["staticPreview", "staticPreview"] }], ngImport: i0, template: "<!-- Projected content is captured ONCE here and stamped into whichever render\n     site is active \u2014 duplicating ng-content across branches breaks projection. -->\n<ng-template #content><ng-content /></ng-template>\n\n@if (preview.staticPreview()) {\n  <div\n    class=\"popover\"\n    [attr.role]=\"panelRole()\"\n    [attr.aria-label]=\"panelLabel()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n}\n\n<ng-template #panel>\n  <div\n    class=\"popover\"\n    [attr.role]=\"panelRole()\"\n    [attr.aria-label]=\"panelLabel()\"\n    [cdkTrapFocus]=\"!!panelRole()\"\n    [cdkTrapFocusAutoCapture]=\"!!panelRole()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.popover{background:var(--surface-overlay);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);padding:var(--space-3);z-index:var(--layer-popover);max-width:var(--popover-maxw)}.popover:has(ds-menu){padding:0}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-popover', standalone: true, imports: [CdkTrapFocus, NgTemplateOutlet], encapsulation: ViewEncapsulation.Emulated, hostDirectives: [{ directive: DsStaticPreview, inputs: ['staticPreview'] }], providers: [{ provide: DsOverlayCloseRef, useExisting: forwardRef(() => PopoverComponent) }], template: "<!-- Projected content is captured ONCE here and stamped into whichever render\n     site is active \u2014 duplicating ng-content across branches breaks projection. -->\n<ng-template #content><ng-content /></ng-template>\n\n@if (preview.staticPreview()) {\n  <div\n    class=\"popover\"\n    [attr.role]=\"panelRole()\"\n    [attr.aria-label]=\"panelLabel()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n}\n\n<ng-template #panel>\n  <div\n    class=\"popover\"\n    [attr.role]=\"panelRole()\"\n    [attr.aria-label]=\"panelLabel()\"\n    [cdkTrapFocus]=\"!!panelRole()\"\n    [cdkTrapFocusAutoCapture]=\"!!panelRole()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.popover{background:var(--surface-overlay);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);padding:var(--space-3);z-index:var(--layer-popover);max-width:var(--popover-maxw)}.popover:has(ds-menu){padding:0}\n"] }]
+        }], propDecorators: { panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], panelRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelRole", required: false }] }], panelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelLabel", required: false }] }] } });
+
+/**
+ * Single toast pill. Consumed by ToastRegion for service-driven runtime toasts
+ * AND by static showcases that need to display a toast specimen inline.
+ */
+class ToastComponent {
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    action = input(null, ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    dismissed = output();
+    onAction(action) {
+        action.handler();
+        this.dismissed.emit();
+    }
+    classes = computed(() => `toast ${this.variant()}`, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    /** Errors/warnings interrupt (assertive); info/success wait their turn. */
+    role = computed(() => this.variant() === 'error' || this.variant() === 'warning' ? 'alert' : 'status', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    defaultIcon = computed(() => {
+        switch (this.variant()) {
+            case 'success': return 'success';
+            case 'warning': return 'warn';
+            case 'error': return 'error';
+            default: return 'info';
+        }
+    }, ...(ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []));
+    onDismiss() {
+        this.dismissed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ToastComponent, isStandalone: true, selector: "ds-toast", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\r\n  [class]=\"classes()\"\r\n  [attr.role]=\"role()\"\r\n  [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\"\r\n  aria-atomic=\"true\"\r\n>\r\n  <ds-icon class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"16\" />\r\n  <div class=\"body\">\r\n    @if (title()) { <div class=\"title\">{{ title() }}</div> }\r\n    {{ message() }}\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (action(); as act) {\r\n    <button type=\"button\" class=\"action\" (click)=\"onAction(act)\">{{ act.label }}</button>\r\n  }\r\n  <span class=\"actions\"><ng-content select=\"[actions]\"></ng-content></span>\r\n  @if (dismissible()) {\r\n    <button type=\"button\" class=\"close\" (click)=\"onDismiss()\" aria-label=\"Dismiss\">\r\n      <ds-icon name=\"x\" [size]=\"14\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}:host(.leaving){opacity:0;transform:translateY(calc(var(--space-2) * -1));pointer-events:none}.toast{--_toast-bg: var(--ds-toast-bg, var(--surface-overlay));--_toast-border: var(--ds-toast-border, var(--border-default));display:flex;align-items:flex-start;gap:var(--space-3);background:var(--_toast-bg);border:var(--border-width-default) solid var(--_toast-border);border-left:var(--toast-bar-w) solid var(--primary);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-toast);min-width:var(--toast-minw);max-width:var(--toast-maxw);animation:ds-toast-in var(--duration-slow) var(--ease-decelerate)}.toast .icon{color:var(--primary);flex-shrink:0;margin-top:var(--space-0-5)}.toast .body{flex:1;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-secondary)}.toast .title{font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--space-0-5)}.toast .close{border:0;background:transparent;color:var(--icon-default);cursor:pointer;padding:var(--space-0-5)}.toast .action{flex-shrink:0;align-self:center;border:0;background:transparent;color:var(--primary-strong);font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.toast .action:hover{background:var(--surface-secondary)}.toast .action:focus-visible{outline:none;box-shadow:var(--focus-ring)}.toast .actions{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0}.toast .actions:empty{display:none}.toast.info{--_toast-bg: var(--ds-toast-bg-info, var(--ds-toast-bg, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-info, var(--ds-toast-border, var(--border-default)));border-left-color:var(--primary)}.toast.success{--_toast-bg: var(--ds-toast-bg-success, var(--ds-toast-bg, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-success, var(--ds-toast-border, var(--border-default)));border-left-color:var(--success)}.toast.success .icon{color:var(--success)}.toast.warning{--_toast-bg: var(--ds-toast-bg-warning, var(--ds-toast-bg, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-warning, var(--ds-toast-border, var(--border-default)));border-left-color:var(--warning-hover)}.toast.warning .icon{color:var(--warning-hover)}.toast.error{--_toast-bg: var(--ds-toast-bg-error, var(--ds-toast-bg, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-error, var(--ds-toast-border, var(--border-default)));border-left-color:var(--error)}.toast.error .icon{color:var(--error)}@keyframes ds-toast-in{0%{transform:translateY(calc(var(--space-2) * -1));opacity:0}to{transform:none;opacity:1}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-toast', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div\r\n  [class]=\"classes()\"\r\n  [attr.role]=\"role()\"\r\n  [attr.aria-live]=\"role() === 'alert' ? 'assertive' : 'polite'\"\r\n  aria-atomic=\"true\"\r\n>\r\n  <ds-icon class=\"icon\" [name]=\"icon() ?? defaultIcon()\" [size]=\"16\" />\r\n  <div class=\"body\">\r\n    @if (title()) { <div class=\"title\">{{ title() }}</div> }\r\n    {{ message() }}\r\n    <ng-content></ng-content>\r\n  </div>\r\n  @if (action(); as act) {\r\n    <button type=\"button\" class=\"action\" (click)=\"onAction(act)\">{{ act.label }}</button>\r\n  }\r\n  <span class=\"actions\"><ng-content select=\"[actions]\"></ng-content></span>\r\n  @if (dismissible()) {\r\n    <button type=\"button\" class=\"close\" (click)=\"onDismiss()\" aria-label=\"Dismiss\">\r\n      <ds-icon name=\"x\" [size]=\"14\" />\r\n    </button>\r\n  }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}:host(.leaving){opacity:0;transform:translateY(calc(var(--space-2) * -1));pointer-events:none}.toast{--_toast-bg: var(--ds-toast-bg, var(--surface-overlay));--_toast-border: var(--ds-toast-border, var(--border-default));display:flex;align-items:flex-start;gap:var(--space-3);background:var(--_toast-bg);border:var(--border-width-default) solid var(--_toast-border);border-left:var(--toast-bar-w) solid var(--primary);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-toast);min-width:var(--toast-minw);max-width:var(--toast-maxw);animation:ds-toast-in var(--duration-slow) var(--ease-decelerate)}.toast .icon{color:var(--primary);flex-shrink:0;margin-top:var(--space-0-5)}.toast .body{flex:1;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans);color:var(--text-secondary)}.toast .title{font-weight:var(--font-weight-bold);color:var(--text-primary);margin-bottom:var(--space-0-5)}.toast .close{border:0;background:transparent;color:var(--icon-default);cursor:pointer;padding:var(--space-0-5)}.toast .action{flex-shrink:0;align-self:center;border:0;background:transparent;color:var(--primary-strong);font:var(--font-weight-bold) var(--font-size-s)/var(--line-height-flat) var(--font-sans);cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm)}.toast .action:hover{background:var(--surface-secondary)}.toast .action:focus-visible{outline:none;box-shadow:var(--focus-ring)}.toast .actions{display:inline-flex;align-items:center;gap:var(--space-2);flex-shrink:0}.toast .actions:empty{display:none}.toast.info{--_toast-bg: var(--ds-toast-bg-info, var(--ds-toast-bg, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-info, var(--ds-toast-border, var(--border-default)));border-left-color:var(--primary)}.toast.success{--_toast-bg: var(--ds-toast-bg-success, var(--ds-toast-bg, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-success, var(--ds-toast-border, var(--border-default)));border-left-color:var(--success)}.toast.success .icon{color:var(--success)}.toast.warning{--_toast-bg: var(--ds-toast-bg-warning, var(--ds-toast-bg, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-warning, var(--ds-toast-border, var(--border-default)));border-left-color:var(--warning-hover)}.toast.warning .icon{color:var(--warning-hover)}.toast.error{--_toast-bg: var(--ds-toast-bg-error, var(--ds-toast-bg, var(--surface-overlay)));--_toast-border: var(--ds-toast-border-error, var(--ds-toast-border, var(--border-default)));border-left-color:var(--error)}.toast.error .icon{color:var(--error)}@keyframes ds-toast-in{0%{transform:translateY(calc(var(--space-2) * -1));opacity:0}to{transform:none;opacity:1}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
+
+// Must match the leave transition on :host in toast.component.scss (--duration-base).
+const LEAVE_DURATION_MS = 180;
+class ToastRegionComponent {
+    entries = signal([], ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    leaving = signal(new Set(), ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
+    add(entry) {
+        this.entries.update((existing) => [...existing, entry]);
+    }
+    remove(id) {
+        if (this.leaving().has(id))
+            return;
+        this.leaving.update((set) => new Set(set).add(id));
+        setTimeout(() => {
+            this.entries.update((existing) => existing.filter((entry) => entry.id !== id));
+            this.leaving.update((set) => {
+                const next = new Set(set);
+                next.delete(id);
+                return next;
+            });
+        }, LEAVE_DURATION_MS);
+    }
+    isLeaving(id) {
+        return this.leaving().has(id);
+    }
+    clear() {
+        this.entries.set([]);
+        this.leaving.set(new Set());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastRegionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ToastRegionComponent, isStandalone: true, selector: "ds-toast-region", host: { attributes: { "role": "region", "aria-label": "Notifications" } }, ngImport: i0, template: "@for (entry of entries(); track entry.id) {\r\n  <ds-toast\r\n    [variant]=\"entry.variant\"\r\n    [title]=\"entry.title ?? ''\"\r\n    [message]=\"entry.body\"\r\n    [dismissible]=\"entry.dismissible\"\r\n    [action]=\"entry.action ?? null\"\r\n    [class.leaving]=\"isLeaving(entry.id)\"\r\n    (dismissed)=\"remove(entry.id)\"\r\n  />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--space-2)}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "ds-toast", inputs: ["variant", "title", "message", "dismissible", "icon", "action"], outputs: ["dismissed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastRegionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-toast-region', standalone: true, imports: [ToastComponent], encapsulation: ViewEncapsulation.Emulated, host: {
+                        role: 'region',
+                        'aria-label': 'Notifications',
+                    }, template: "@for (entry of entries(); track entry.id) {\r\n  <ds-toast\r\n    [variant]=\"entry.variant\"\r\n    [title]=\"entry.title ?? ''\"\r\n    [message]=\"entry.body\"\r\n    [dismissible]=\"entry.dismissible\"\r\n    [action]=\"entry.action ?? null\"\r\n    [class.leaving]=\"isLeaving(entry.id)\"\r\n    (dismissed)=\"remove(entry.id)\"\r\n  />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--space-2)}\n"] }]
+        }] });
+
+const DS_TOAST_POSITION = new InjectionToken('DS_TOAST_POSITION');
+const DS_TOAST_POSITION_DEFAULT = {
+    horizontalPosition: 'right',
+    verticalPosition: 'top',
+    offset: 'var(--space-6)',
+};
+
+class ToastService {
+    overlay = inject(Overlay);
+    position = inject(DS_TOAST_POSITION, { optional: true });
+    overlayRef = null;
+    regionRef = null;
+    nextId = 1;
+    show(opts) {
+        this.ensureRegion();
+        const id = this.nextId++;
+        const entry = {
+            id,
+            title: opts.title,
+            body: opts.body,
+            variant: opts.variant ?? 'info',
+            dismissible: opts.dismissible ?? true,
+            action: opts.action,
+        };
+        this.regionRef.instance.add(entry);
+        const ref = {
+            id,
+            dismiss: () => this.regionRef?.instance.remove(id),
+        };
+        const duration = opts.durationMs ?? 5000;
+        if (duration > 0) {
+            window.setTimeout(() => ref.dismiss(), duration);
+        }
+        return ref;
+    }
+    dismissAll() {
+        this.regionRef?.instance.clear();
+    }
+    ensureRegion() {
+        if (this.overlayRef)
+            return;
+        this.overlayRef = this.overlay.create({
+            hasBackdrop: false,
+            panelClass: 'ds-toast-panel',
+            positionStrategy: this.buildPositionStrategy(),
+        });
+        this.regionRef = this.overlayRef.attach(new ComponentPortal(ToastRegionComponent));
+    }
+    buildPositionStrategy() {
+        const config = this.position ?? DS_TOAST_POSITION_DEFAULT;
+        const strategy = this.overlay.position().global();
+        if (config.verticalPosition === 'top')
+            strategy.top(config.offset);
+        else
+            strategy.bottom(config.offset);
+        if (config.horizontalPosition === 'left')
+            strategy.left(config.offset);
+        else if (config.horizontalPosition === 'right')
+            strategy.right(config.offset);
+        else
+            strategy.centerHorizontally();
+        return strategy;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let nextId$1 = 0;
+class DrawerComponent {
+    doc = inject(DOCUMENT);
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    closed = output();
+    titleId = `ds-drawer-title-${++nextId$1}`;
+    classes = computed(() => this.size() === 'lg' ? 'drawer lg' : 'drawer', ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.doc.body.style.overflow = this.open() ? 'hidden' : '';
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.doc.body.style.overflow = '';
+        });
+    }
+    onClose() {
+        this.open.set(false);
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DrawerComponent, isStandalone: true, selector: "ds-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, ngImport: i0, template: "@if (open()) {\r\n  <div class=\"drawer-scrim\" (click)=\"onClose()\"></div>\r\n  <div\r\n    [class]=\"classes()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\r\n    cdkTrapFocus\r\n    cdkTrapFocusAutoCapture\r\n    (keydown.escape)=\"onClose()\"\r\n  >\r\n    <header class=\"header\">\r\n      <h4 class=\"title\" [id]=\"titleId\">{{ title() }}</h4>\r\n      <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"onClose()\">\r\n        <ds-icon name=\"x\" [size]=\"16\" />\r\n      </button>\r\n    </header>\r\n    <div class=\"body\"><ng-content select=\"[drawer-body]\"></ng-content></div>\r\n    <div class=\"footer\"><ng-content select=\"[drawer-footer]\"></ng-content></div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.drawer-scrim{position:fixed;inset:0;background:var(--scrim, hsla(220, 20%, 12%, .45));z-index:var(--layer-modal);animation:drawer-scrim-in var(--duration-fast, .12s) var(--ease-decelerate, ease-out)}@keyframes drawer-scrim-in{0%{opacity:0}to{opacity:1}}.drawer{position:fixed;top:0;right:0;bottom:0;width:var(--drawer-w-md);max-width:100vw;background:var(--surface-overlay);box-shadow:var(--shadow-modal);z-index:var(--layer-modal);display:flex;flex-direction:column;animation:drawer-in var(--duration-slow) var(--ease-decelerate)}.drawer.lg{width:var(--drawer-w-lg)}.drawer .header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6);border-bottom:var(--border-width-default) solid var(--border-divider)}.drawer .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);margin:0;flex:1}.drawer .close{background:transparent;border:0;width:var(--modal-close-size);height:var(--modal-close-size);color:var(--icon-default);cursor:pointer;padding:0}.drawer .close:hover{color:var(--icon-strong)}.drawer .body{flex:1;padding:var(--space-6);overflow-y:auto}.drawer .footer{padding:var(--space-4) var(--space-6);border-top:var(--border-width-default) solid var(--border-divider);display:flex;gap:var(--space-2);justify-content:flex-end}@keyframes drawer-in{0%{transform:translate(100%)}to{transform:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-drawer', standalone: true, imports: [IconComponent, A11yModule], encapsulation: ViewEncapsulation.Emulated, template: "@if (open()) {\r\n  <div class=\"drawer-scrim\" (click)=\"onClose()\"></div>\r\n  <div\r\n    [class]=\"classes()\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\r\n    cdkTrapFocus\r\n    cdkTrapFocusAutoCapture\r\n    (keydown.escape)=\"onClose()\"\r\n  >\r\n    <header class=\"header\">\r\n      <h4 class=\"title\" [id]=\"titleId\">{{ title() }}</h4>\r\n      <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"onClose()\">\r\n        <ds-icon name=\"x\" [size]=\"16\" />\r\n      </button>\r\n    </header>\r\n    <div class=\"body\"><ng-content select=\"[drawer-body]\"></ng-content></div>\r\n    <div class=\"footer\"><ng-content select=\"[drawer-footer]\"></ng-content></div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.drawer-scrim{position:fixed;inset:0;background:var(--scrim, hsla(220, 20%, 12%, .45));z-index:var(--layer-modal);animation:drawer-scrim-in var(--duration-fast, .12s) var(--ease-decelerate, ease-out)}@keyframes drawer-scrim-in{0%{opacity:0}to{opacity:1}}.drawer{position:fixed;top:0;right:0;bottom:0;width:var(--drawer-w-md);max-width:100vw;background:var(--surface-overlay);box-shadow:var(--shadow-modal);z-index:var(--layer-modal);display:flex;flex-direction:column;animation:drawer-in var(--duration-slow) var(--ease-decelerate)}.drawer.lg{width:var(--drawer-w-lg)}.drawer .header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-6);border-bottom:var(--border-width-default) solid var(--border-divider)}.drawer .title{font:var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-sans);margin:0;flex:1}.drawer .close{background:transparent;border:0;width:var(--modal-close-size);height:var(--modal-close-size);color:var(--icon-default);cursor:pointer;padding:0}.drawer .close:hover{color:var(--icon-strong)}.drawer .body{flex:1;padding:var(--space-6);overflow-y:auto}.drawer .footer{padding:var(--space-4) var(--space-6);border-top:var(--border-width-default) solid var(--border-divider);display:flex;gap:var(--space-2);justify-content:flex-end}@keyframes drawer-in{0%{transform:translate(100%)}to{transform:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/** Bottom-anchored sheet — the mobile sibling of ds-drawer. Closes on scrim
+ * tap, Escape, or a downward drag on the grab strip. While open it locks
+ * body scroll. On wide viewports the panel is capped by
+ * --ds-bottom-sheet-maxw and centred; prefer ds-modal / ds-drawer for
+ * desktop-first layouts. position: fixed resolves against the nearest
+ * ancestor containing block, so framed hosts contain the sheet. */
+class BottomSheetComponent {
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    closed = output();
+    doc = inject(DOCUMENT$1);
+    sheetRef = viewChild('sheet', ...(ngDevMode ? [{ debugName: "sheetRef" }] : /* istanbul ignore next */ []));
+    dragOffset = signal(null, ...(ngDevMode ? [{ debugName: "dragOffset" }] : /* istanbul ignore next */ []));
+    dragStartY = 0;
+    lastMoveY = 0;
+    lastMoveTime = 0;
+    velocity = 0;
+    previousBodyOverflow = null;
+    constructor() {
+        effect((onCleanup) => {
+            if (!this.open())
+                return;
+            this.previousBodyOverflow = this.doc.body.style.overflow;
+            this.doc.body.style.overflow = 'hidden';
+            onCleanup(() => {
+                this.doc.body.style.overflow = this.previousBodyOverflow ?? '';
+                this.previousBodyOverflow = null;
+            });
+        });
+    }
+    close() {
+        this.dragOffset.set(null);
+        this.open.set(false);
+        this.closed.emit();
+    }
+    onEscape() {
+        if (this.open())
+            this.close();
+    }
+    stop(event) {
+        event.stopPropagation();
+    }
+    onGrabStart(event) {
+        event.target.setPointerCapture(event.pointerId);
+        this.dragStartY = event.clientY;
+        this.lastMoveY = event.clientY;
+        this.lastMoveTime = event.timeStamp;
+        this.velocity = 0;
+        this.dragOffset.set(0);
+    }
+    onGrabMove(event) {
+        if (this.dragOffset() === null)
+            return;
+        const deltaTime = event.timeStamp - this.lastMoveTime;
+        if (deltaTime > 0) {
+            this.velocity = (event.clientY - this.lastMoveY) / deltaTime;
+        }
+        this.lastMoveY = event.clientY;
+        this.lastMoveTime = event.timeStamp;
+        this.dragOffset.set(Math.max(0, event.clientY - this.dragStartY));
+    }
+    onGrabEnd() {
+        const offset = this.dragOffset();
+        if (offset === null)
+            return;
+        const sheetHeight = this.sheetRef()?.nativeElement.offsetHeight ?? 0;
+        const pastThreshold = sheetHeight > 0 && offset > sheetHeight * 0.3;
+        const flicked = this.velocity > 0.5;
+        if (pastThreshold || flicked) {
+            this.close();
+        }
+        else {
+            this.dragOffset.set(null);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BottomSheetComponent, isStandalone: true, selector: "ds-bottom-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "sheetRef", first: true, predicate: ["sheet"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\r\n  <div class=\"sheet-overlay\" (click)=\"close()\">\r\n    <div\r\n      #sheet\r\n      class=\"sheet\"\r\n      [class.dragging]=\"dragOffset() !== null\"\r\n      [style.transform]=\"dragOffset() ? 'translateY(' + dragOffset() + 'px)' : null\"\r\n      (click)=\"stop($event)\"\r\n    >\r\n      <div\r\n        class=\"grab\"\r\n        (pointerdown)=\"onGrabStart($event)\"\r\n        (pointermove)=\"onGrabMove($event)\"\r\n        (pointerup)=\"onGrabEnd()\"\r\n        (pointercancel)=\"onGrabEnd()\"\r\n      >\r\n        <div class=\"sheet-handle\"></div>\r\n      </div>\r\n      @if (title()) {\r\n        <h3 class=\"sheet-title\">{{ title() }}</h3>\r\n      }\r\n      <div class=\"sheet-body\">\r\n        <ng-content />\r\n      </div>\r\n      <div class=\"sheet-actions\">\r\n        <ng-content select=\"[actions]\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_bottom-sheet-maxw: var(--ds-bottom-sheet-maxw, 480px);--_bottom-sheet-maxh: var(--ds-bottom-sheet-maxh, 80%);--_bottom-sheet-radius: var(--ds-bottom-sheet-radius, var(--radius-lg));display:contents}.sheet-overlay{position:fixed;inset:0;z-index:var(--layer-modal);background:var(--surface-scrim);display:flex;flex-direction:column;justify-content:flex-end;animation:ds-sheet-fade-in var(--duration-fast) var(--ease-decelerate)}.sheet{position:relative;width:min(100%,var(--_bottom-sheet-maxw));margin-inline:auto;background:var(--surface-default);border-radius:var(--_bottom-sheet-radius) var(--_bottom-sheet-radius) 0 0;padding:0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));animation:ds-sheet-up var(--duration-base) var(--ease-decelerate);max-height:var(--_bottom-sheet-maxh);display:flex;flex-direction:column;transition:transform var(--duration-base) var(--ease-decelerate)}.sheet.dragging{transition:none}.grab{padding:var(--space-3) 0;margin:0 calc(var(--space-4) * -1);cursor:grab;touch-action:none}.sheet-handle{width:36px;height:4px;background:var(--border-strong);border-radius:var(--radius-pill);margin:0 auto}.sheet-title{font:var(--font-weight-semibold) var(--font-size-l)/var(--line-height-snug) var(--font-sans);color:var(--text-primary);margin:0 0 var(--space-3)}.sheet-body{display:flex;flex-direction:column;gap:var(--space-2);overflow-y:auto;min-height:0;padding:var(--space-1);margin:calc(var(--space-1) * -1)}.sheet-actions{display:flex;flex-direction:column;gap:var(--space-2)}.sheet-actions:not(:empty){margin-top:var(--space-3)}@keyframes ds-sheet-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ds-sheet-up{0%{transform:translateY(100%)}to{transform:none}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-bottom-sheet', standalone: true, encapsulation: ViewEncapsulation.Emulated, host: {
+                        '(document:keydown.escape)': 'onEscape()',
+                    }, template: "@if (open()) {\r\n  <div class=\"sheet-overlay\" (click)=\"close()\">\r\n    <div\r\n      #sheet\r\n      class=\"sheet\"\r\n      [class.dragging]=\"dragOffset() !== null\"\r\n      [style.transform]=\"dragOffset() ? 'translateY(' + dragOffset() + 'px)' : null\"\r\n      (click)=\"stop($event)\"\r\n    >\r\n      <div\r\n        class=\"grab\"\r\n        (pointerdown)=\"onGrabStart($event)\"\r\n        (pointermove)=\"onGrabMove($event)\"\r\n        (pointerup)=\"onGrabEnd()\"\r\n        (pointercancel)=\"onGrabEnd()\"\r\n      >\r\n        <div class=\"sheet-handle\"></div>\r\n      </div>\r\n      @if (title()) {\r\n        <h3 class=\"sheet-title\">{{ title() }}</h3>\r\n      }\r\n      <div class=\"sheet-body\">\r\n        <ng-content />\r\n      </div>\r\n      <div class=\"sheet-actions\">\r\n        <ng-content select=\"[actions]\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_bottom-sheet-maxw: var(--ds-bottom-sheet-maxw, 480px);--_bottom-sheet-maxh: var(--ds-bottom-sheet-maxh, 80%);--_bottom-sheet-radius: var(--ds-bottom-sheet-radius, var(--radius-lg));display:contents}.sheet-overlay{position:fixed;inset:0;z-index:var(--layer-modal);background:var(--surface-scrim);display:flex;flex-direction:column;justify-content:flex-end;animation:ds-sheet-fade-in var(--duration-fast) var(--ease-decelerate)}.sheet{position:relative;width:min(100%,var(--_bottom-sheet-maxw));margin-inline:auto;background:var(--surface-default);border-radius:var(--_bottom-sheet-radius) var(--_bottom-sheet-radius) 0 0;padding:0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));animation:ds-sheet-up var(--duration-base) var(--ease-decelerate);max-height:var(--_bottom-sheet-maxh);display:flex;flex-direction:column;transition:transform var(--duration-base) var(--ease-decelerate)}.sheet.dragging{transition:none}.grab{padding:var(--space-3) 0;margin:0 calc(var(--space-4) * -1);cursor:grab;touch-action:none}.sheet-handle{width:36px;height:4px;background:var(--border-strong);border-radius:var(--radius-pill);margin:0 auto}.sheet-title{font:var(--font-weight-semibold) var(--font-size-l)/var(--line-height-snug) var(--font-sans);color:var(--text-primary);margin:0 0 var(--space-3)}.sheet-body{display:flex;flex-direction:column;gap:var(--space-2);overflow-y:auto;min-height:0;padding:var(--space-1);margin:calc(var(--space-1) * -1)}.sheet-actions{display:flex;flex-direction:column;gap:var(--space-2)}.sheet-actions:not(:empty){margin-top:var(--space-3)}@keyframes ds-sheet-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ds-sheet-up{0%{transform:translateY(100%)}to{transform:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], sheetRef: [{ type: i0.ViewChild, args: ['sheet', { isSignal: true }] }] } });
+
+class TagComponent {
+    variant = input('solid', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    closable = input(false, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible label for the close button (e.g. "Remove Source filter"). */
+    closeLabel = input('Remove', ...(ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    closed = output();
+    toggled = output();
+    onClick() {
+        if (this.interactive())
+            this.toggled.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TagComponent, isStandalone: true, selector: "ds-tag", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", toggled: "toggled" }, host: { listeners: { "click": "onClick()" }, properties: { "class.neutral": "variant() === 'neutral'", "class.closable": "closable()", "class.interactive": "interactive()", "class.is-active": "selected()" } }, ngImport: i0, template: "<ng-content></ng-content>\r\n@if (closable()) {\r\n  <button type=\"button\" class=\"close\" [attr.aria-label]=\"closeLabel()\" (click)=\"$event.stopPropagation(); closed.emit()\">\r\n    <ds-icon name=\"x\" [size]=\"12\" />\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tag-pad-y: var(--ds-tag-pad-y, var(--tag-pad-y));--_tag-pad-x: var(--ds-tag-pad-x, var(--tag-pad-x));--_tag-radius: var(--ds-tag-radius, var(--radius-md));--_tag-bg: var(--ds-tag-bg, var(--primary));--_tag-fw: var(--ds-tag-fw, var(--font-weight-bold));--_tag-fs: var(--ds-tag-fs, var(--font-size-xs));--_tag-lh: var(--ds-tag-lh, var(--line-height-base));display:inline-flex;align-items:center;gap:var(--tag-gap);padding:var(--_tag-pad-y) var(--_tag-pad-x);border-radius:var(--_tag-radius);background:var(--_tag-bg);color:var(--primary-on);font:var(--_tag-fw) var(--_tag-fs)/var(--_tag-lh) var(--font-sans)}:host(.closable){padding-right:var(--tag-pad-x-close)}:host(.neutral){--_tag-bg: var(--ds-tag-bg, var(--surface-secondary));background:var(--_tag-bg);color:var(--text-primary);border:var(--border-width-default) solid var(--border-divider);padding:calc(var(--_tag-pad-y) - var(--border-width-default)) calc(var(--_tag-pad-x) - var(--border-width-default))}:host(.neutral.closable){padding-right:calc(var(--tag-pad-x-close) - 1px)}:host(.interactive){cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}:host(.interactive:hover):not(.is-active){--_tag-hover-bg: var(--ds-tag-hover-bg, var(--surface-muted));background:var(--_tag-hover-bg);color:var(--text-primary)}:host(.interactive.is-active){--_tag-active-bg: var(--ds-tag-active-bg, var(--primary-muted));--_tag-active-fg: var(--ds-tag-active-fg, var(--primary-strong));--_tag-active-border: var(--ds-tag-active-border, var(--primary));background:var(--_tag-active-bg);color:var(--_tag-active-fg);box-shadow:inset 0 0 0 var(--border-width-default) var(--_tag-active-border)}.close{display:inline-flex;align-items:center;justify-content:center;border:0;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-sm);padding:var(--tag-close-pad);margin-left:var(--tag-close-pad);background:color-mix(in oklab,currentColor calc(var(--opacity-state-hover) * 100%),transparent);transition:background var(--duration-fast) var(--ease-standard)}.close:hover{background:color-mix(in oklab,currentColor calc(var(--opacity-state-pressed) * 100%),transparent)}.close:focus-visible{outline:var(--border-width-strong, 2px) solid var(--focus-ring-color, currentColor);outline-offset:1px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-tag', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[class.neutral]': "variant() === 'neutral'",
+                        '[class.closable]': 'closable()',
+                        '[class.interactive]': 'interactive()',
+                        '[class.is-active]': 'selected()',
+                        '(click)': 'onClick()',
+                    }, template: "<ng-content></ng-content>\r\n@if (closable()) {\r\n  <button type=\"button\" class=\"close\" [attr.aria-label]=\"closeLabel()\" (click)=\"$event.stopPropagation(); closed.emit()\">\r\n    <ds-icon name=\"x\" [size]=\"12\" />\r\n  </button>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tag-pad-y: var(--ds-tag-pad-y, var(--tag-pad-y));--_tag-pad-x: var(--ds-tag-pad-x, var(--tag-pad-x));--_tag-radius: var(--ds-tag-radius, var(--radius-md));--_tag-bg: var(--ds-tag-bg, var(--primary));--_tag-fw: var(--ds-tag-fw, var(--font-weight-bold));--_tag-fs: var(--ds-tag-fs, var(--font-size-xs));--_tag-lh: var(--ds-tag-lh, var(--line-height-base));display:inline-flex;align-items:center;gap:var(--tag-gap);padding:var(--_tag-pad-y) var(--_tag-pad-x);border-radius:var(--_tag-radius);background:var(--_tag-bg);color:var(--primary-on);font:var(--_tag-fw) var(--_tag-fs)/var(--_tag-lh) var(--font-sans)}:host(.closable){padding-right:var(--tag-pad-x-close)}:host(.neutral){--_tag-bg: var(--ds-tag-bg, var(--surface-secondary));background:var(--_tag-bg);color:var(--text-primary);border:var(--border-width-default) solid var(--border-divider);padding:calc(var(--_tag-pad-y) - var(--border-width-default)) calc(var(--_tag-pad-x) - var(--border-width-default))}:host(.neutral.closable){padding-right:calc(var(--tag-pad-x-close) - 1px)}:host(.interactive){cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}:host(.interactive:hover):not(.is-active){--_tag-hover-bg: var(--ds-tag-hover-bg, var(--surface-muted));background:var(--_tag-hover-bg);color:var(--text-primary)}:host(.interactive.is-active){--_tag-active-bg: var(--ds-tag-active-bg, var(--primary-muted));--_tag-active-fg: var(--ds-tag-active-fg, var(--primary-strong));--_tag-active-border: var(--ds-tag-active-border, var(--primary));background:var(--_tag-active-bg);color:var(--_tag-active-fg);box-shadow:inset 0 0 0 var(--border-width-default) var(--_tag-active-border)}.close{display:inline-flex;align-items:center;justify-content:center;border:0;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-sm);padding:var(--tag-close-pad);margin-left:var(--tag-close-pad);background:color-mix(in oklab,currentColor calc(var(--opacity-state-hover) * 100%),transparent);transition:background var(--duration-fast) var(--ease-standard)}.close:hover{background:color-mix(in oklab,currentColor calc(var(--opacity-state-pressed) * 100%),transparent)}.close:focus-visible{outline:var(--border-width-strong, 2px) solid var(--focus-ring-color, currentColor);outline-offset:1px}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
+
+class W3wComponent {
+    prefix = input('///', ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
+    address = input.required(...(ngDevMode ? [{ debugName: "address" }] : /* istanbul ignore next */ []));
+    copyable = input(true, ...(ngDevMode ? [{ debugName: "copyable" }] : /* istanbul ignore next */ []));
+    copied = output();
+    onKeyActivate(event) {
+        event.preventDefault();
+        this.onCopy();
+    }
+    onCopy() {
+        if (!this.copyable())
+            return;
+        const text = `${this.prefix()}${this.address()}`;
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            void navigator.clipboard.writeText(text);
+        }
+        this.copied.emit(this.address());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: W3wComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: W3wComponent, isStandalone: true, selector: "ds-w3w", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: true, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copied: "copied" }, host: { listeners: { "click": "onCopy()", "keydown.enter": "onCopy()", "keydown.space": "onKeyActivate($event)" }, properties: { "attr.role": "copyable() ? 'button' : null", "attr.tabindex": "copyable() ? 0 : null", "attr.aria-label": "copyable() ? ('Copy what3words address ' + prefix() + address()) : null" } }, ngImport: i0, template: "<ds-icon name=\"map\" [size]=\"14\" />\n<span><span class=\"mark\">{{ prefix() }}</span>{{ address() }}</span>\n@if (copyable()) { <ds-icon name=\"copy\" [size]=\"12\" /> }\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);background:var(--primary-subtle);color:var(--primary);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--font-size-mono);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}:host:hover{background:var(--primary-muted)}:host .mark{color:var(--error);font-weight:var(--font-weight-bold)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: W3wComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-w3w', standalone: true, imports: [IconComponent], encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[attr.role]': "copyable() ? 'button' : null",
+                        '[attr.tabindex]': 'copyable() ? 0 : null',
+                        '[attr.aria-label]': "copyable() ? ('Copy what3words address ' + prefix() + address()) : null",
+                        '(click)': 'onCopy()',
+                        '(keydown.enter)': 'onCopy()',
+                        '(keydown.space)': 'onKeyActivate($event)',
+                    }, template: "<ds-icon name=\"map\" [size]=\"14\" />\n<span><span class=\"mark\">{{ prefix() }}</span>{{ address() }}</span>\n@if (copyable()) { <ds-icon name=\"copy\" [size]=\"12\" /> }\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-2);background:var(--primary-subtle);color:var(--primary);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--font-size-mono);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}:host:hover{background:var(--primary-muted)}:host .mark{color:var(--error);font-weight:var(--font-weight-bold)}\n"] }]
+        }], propDecorators: { prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], address: [{ type: i0.Input, args: [{ isSignal: true, alias: "address", required: true }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], copied: [{ type: i0.Output, args: ["copied"] }] } });
+
+class PageFooterComponent {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: PageFooterComponent, isStandalone: true, selector: "ds-page-footer", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.compact": "variant() === 'compact'", "class.save": "variant() === 'save'" } }, ngImport: i0, template: "<ng-content select=\"[brand]\"></ng-content>\n<ng-content select=\"[nav]\"></ng-content>\n<ng-content select=\"[actions]\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:var(--border-width-default) solid var(--border-divider);flex-wrap:wrap}:host(.compact){padding:var(--space-3) var(--space-4);gap:var(--space-3);background:var(--surface-secondary);border-radius:var(--radius-lg);border:var(--border-width-default) solid var(--border-divider);border-top:var(--border-width-default) solid var(--border-divider)}:host(.save){position:relative;padding:var(--space-3) var(--space-4);background:var(--primary-subtle);border:var(--border-width-default) solid var(--primary);border-radius:var(--radius-lg)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PageFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-page-footer', standalone: true, imports: [], encapsulation: ViewEncapsulation.Emulated, host: {
+                        '[class.compact]': "variant() === 'compact'",
+                        '[class.save]': "variant() === 'save'",
+                    }, template: "<ng-content select=\"[brand]\"></ng-content>\n<ng-content select=\"[nav]\"></ng-content>\n<ng-content select=\"[actions]\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0;border-top:var(--border-width-default) solid var(--border-divider);flex-wrap:wrap}:host(.compact){padding:var(--space-3) var(--space-4);gap:var(--space-3);background:var(--surface-secondary);border-radius:var(--radius-lg);border:var(--border-width-default) solid var(--border-divider);border-top:var(--border-width-default) solid var(--border-divider)}:host(.save){position:relative;padding:var(--space-3) var(--space-4);background:var(--primary-subtle);border:var(--border-width-default) solid var(--primary);border-radius:var(--radius-lg)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+let nextId = 0;
+class ComboboxComponent {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the combobox input. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    trigger = viewChild.required('trigger');
+    filterInput = viewChild.required('filter');
+    panelTpl = viewChild.required('panel');
+    overlayRef = null;
+    uid = `ds-combobox-${++nextId}`;
+    listboxId = `${this.uid}-listbox`;
+    optionId(index) {
+        return `${this.uid}-opt-${index}`;
+    }
+    activeDescendant = computed(() => {
+        const idx = this.activeIndex();
+        return this.isOpen() && idx >= 0 ? this.optionId(idx) : null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const trimmedQuery = this.query().toLowerCase().trim();
+        const allOptions = this.options();
+        if (!trimmedQuery)
+            return allOptions;
+        return allOptions.filter((option) => option.label.toLowerCase().includes(trimmedQuery));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    selectedTags = computed(() => {
+        if (!this.multiple())
+            return [];
+        const selectedValues = this.value() ?? [];
+        const selectedSet = new Set(selectedValues);
+        return this.options().filter((option) => selectedSet.has(option.value));
+    }, ...(ngDevMode ? [{ debugName: "selectedTags" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        if (this.multiple())
+            return '';
+        const currentValue = this.value();
+        if (currentValue === null)
+            return '';
+        return this.options().find((option) => option.value === currentValue)?.label ?? '';
+    }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    placeholderText = computed(() => {
+        if (this.multiple())
+            return '';
+        if (this.displayLabel())
+            return '';
+        return this.placeholder();
+    }, ...(ngDevMode ? [{ debugName: "placeholderText" }] : /* istanbul ignore next */ []));
+    isSelected(option) {
+        if (this.multiple()) {
+            const selectedValues = this.value() ?? [];
+            return selectedValues.includes(option.value);
+        }
+        return this.value() === option.value;
+    }
+    optionClass(option) {
+        const parts = ['option'];
+        if (this.multiple())
+            parts.push('check');
+        void option;
+        return parts.join(' ');
+    }
+    onTriggerClick() {
+        this.filterInput().nativeElement.focus();
+        if (!this.overlayRef)
+            this.openPanel();
+    }
+    togglePanel(event) {
+        event.stopPropagation();
+        if (this.overlayRef) {
+            this.close();
+        }
+        else {
+            this.filterInput().nativeElement.focus();
+            this.openPanel();
+        }
+    }
+    onKeydown(event) {
+        const opts = this.filteredOptions();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.overlayRef) {
+                    this.openPanel();
+                    return;
+                }
+                this.activeIndex.set(opts.length ? (this.activeIndex() + 1) % opts.length : -1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.overlayRef) {
+                    this.openPanel();
+                    return;
+                }
+                this.activeIndex.set(opts.length ? (this.activeIndex() - 1 + opts.length) % opts.length : -1);
+                break;
+            case 'Enter': {
+                const opt = opts[this.activeIndex()];
+                if (opt) {
+                    event.preventDefault();
+                    this.onPick(opt);
+                }
+                break;
+            }
+            case 'Escape':
+                if (this.overlayRef) {
+                    event.preventDefault();
+                    this.close();
+                }
+                break;
+            case 'Backspace':
+                if (this.multiple() && !this.query()) {
+                    const tags = this.selectedTags();
+                    const last = tags[tags.length - 1];
+                    if (last)
+                        this.remove(last.value);
+                }
+                break;
+        }
+    }
+    openPanel() {
+        if (this.overlayRef)
+            return;
+        const triggerElement = this.trigger().nativeElement;
+        const positionStrategy = this.overlay.position()
+            .flexibleConnectedTo(triggerElement)
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ]);
+        const overlayConfig = {
+            positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width: triggerElement.getBoundingClientRect().width,
+        };
+        this.overlayRef = this.overlay.create(overlayConfig);
+        this.overlayRef.backdropClick().subscribe(() => this.close());
+        this.overlayRef.attach(new TemplatePortal(this.panelTpl(), this.vcr));
+        this.isOpen.set(true);
+        this.activeIndex.set(this.filteredOptions().length ? 0 : -1);
+    }
+    close() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        this.activeIndex.set(-1);
+    }
+    onFilter(event) {
+        this.query.set(event.target.value);
+    }
+    onPick(option) {
+        if (this.multiple()) {
+            const current = this.value() ?? [];
+            const next = current.includes(option.value)
+                ? current.filter((existing) => existing !== option.value)
+                : [...current, option.value];
+            this.value.set(next);
+        }
+        else {
+            this.value.set(option.value);
+            this.close();
+        }
+    }
+    remove(target) {
+        if (!this.multiple())
+            return;
+        const current = this.value() ?? [];
+        this.value.set(current.filter((existing) => existing !== target));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ComboboxComponent, isStandalone: true, selector: "ds-combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "filterInput", first: true, predicate: ["filter"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #trigger class=\"combo-trigger\" [class.open]=\"isOpen()\" (click)=\"onTriggerClick()\">\r\n  @if (multiple()) {\r\n    @for (selectedOption of selectedTags(); track selectedOption.value) {\r\n      <ds-tag [closable]=\"true\" [closeLabel]=\"'Remove ' + selectedOption.label\" (closed)=\"remove(selectedOption.value)\">{{ selectedOption.label }}</ds-tag>\r\n    }\r\n  } @else if (displayLabel()) {\r\n    <span class=\"combo-value\">{{ displayLabel() }}</span>\r\n  }\r\n  <input #filter type=\"text\" class=\"combo-input\"\r\n         role=\"combobox\"\r\n         aria-autocomplete=\"list\"\r\n         [attr.aria-expanded]=\"isOpen()\"\r\n         [attr.aria-controls]=\"listboxId\"\r\n         [attr.aria-activedescendant]=\"activeDescendant()\"\r\n         [attr.aria-label]=\"ariaLabel() || placeholder()\"\r\n         [value]=\"query()\" (input)=\"onFilter($event)\" (focus)=\"openPanel()\" (keydown)=\"onKeydown($event)\"\r\n         [placeholder]=\"placeholderText()\" />\r\n  <ds-icon name=\"chevronDown\" [size]=\"16\" class=\"combo-chevron\" (click)=\"togglePanel($event)\" />\r\n</div>\r\n\r\n<ng-template #panel>\r\n  <ul class=\"combo-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"multiple() ? 'true' : null\">\r\n    @for (option of filteredOptions(); track option.value; let i = $index) {\r\n      <li [class]=\"optionClass(option)\" role=\"option\" [id]=\"optionId(i)\"\r\n          [class.is-active]=\"i === activeIndex()\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          (click)=\"onPick(option)\" (mouseenter)=\"activeIndex.set(i)\">\r\n        @if (multiple()) {\r\n          <input type=\"checkbox\" class=\"check\" tabindex=\"-1\" aria-hidden=\"true\" [checked]=\"isSelected(option)\" />\r\n        }\r\n        <span>{{ option.label }}</span>\r\n        @if (!multiple() && isSelected(option)) {\r\n          <ds-icon name=\"check\" class=\"icon\" [size]=\"14\" />\r\n        }\r\n      </li>\r\n    }\r\n    @if (filteredOptions().length === 0) {\r\n      <li class=\"empty t-s\" role=\"option\" [attr.aria-disabled]=\"true\">No matches</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:100%;position:relative}.combo-trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:var(--hit-cozy);padding:var(--space-1) var(--space-2);background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);cursor:text;text-align:left;flex-wrap:wrap}.combo-trigger:hover{border-color:var(--border-strong)}.combo-trigger:focus-within{border-color:var(--primary);box-shadow:var(--focus-ring);outline:0}.combo-value{font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}.combo-input{flex:1;min-width:80px;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}.combo-chevron{color:var(--icon-default);margin-left:auto}.combo-list{width:100%;list-style:none;padding:0;background:var(--surface-overlay);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);margin:var(--combobox-offset) 0 0;max-height:var(--combobox-maxh);overflow-y:auto;z-index:var(--layer-popover)}.combo-list .option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);cursor:pointer}.combo-list .option:hover,.combo-list .option.is-active,.combo-list .option[aria-selected=true]{background:var(--surface-secondary)}.combo-list .option .icon{color:var(--primary);margin-left:auto}.combo-list .option.check{padding-left:var(--space-2)}.combo-list .empty{padding:var(--space-3) var(--space-4);color:var(--text-tertiary);text-align:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ds-icon", inputs: ["name", "size", "stroke", "ariaLabel"] }, { kind: "component", type: TagComponent, selector: "ds-tag", inputs: ["variant", "closable", "interactive", "selected", "closeLabel"], outputs: ["closed", "toggled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ComboboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-combobox', standalone: true, imports: [IconComponent, TagComponent], encapsulation: ViewEncapsulation.Emulated, template: "<div #trigger class=\"combo-trigger\" [class.open]=\"isOpen()\" (click)=\"onTriggerClick()\">\r\n  @if (multiple()) {\r\n    @for (selectedOption of selectedTags(); track selectedOption.value) {\r\n      <ds-tag [closable]=\"true\" [closeLabel]=\"'Remove ' + selectedOption.label\" (closed)=\"remove(selectedOption.value)\">{{ selectedOption.label }}</ds-tag>\r\n    }\r\n  } @else if (displayLabel()) {\r\n    <span class=\"combo-value\">{{ displayLabel() }}</span>\r\n  }\r\n  <input #filter type=\"text\" class=\"combo-input\"\r\n         role=\"combobox\"\r\n         aria-autocomplete=\"list\"\r\n         [attr.aria-expanded]=\"isOpen()\"\r\n         [attr.aria-controls]=\"listboxId\"\r\n         [attr.aria-activedescendant]=\"activeDescendant()\"\r\n         [attr.aria-label]=\"ariaLabel() || placeholder()\"\r\n         [value]=\"query()\" (input)=\"onFilter($event)\" (focus)=\"openPanel()\" (keydown)=\"onKeydown($event)\"\r\n         [placeholder]=\"placeholderText()\" />\r\n  <ds-icon name=\"chevronDown\" [size]=\"16\" class=\"combo-chevron\" (click)=\"togglePanel($event)\" />\r\n</div>\r\n\r\n<ng-template #panel>\r\n  <ul class=\"combo-list\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"multiple() ? 'true' : null\">\r\n    @for (option of filteredOptions(); track option.value; let i = $index) {\r\n      <li [class]=\"optionClass(option)\" role=\"option\" [id]=\"optionId(i)\"\r\n          [class.is-active]=\"i === activeIndex()\"\r\n          [attr.aria-selected]=\"isSelected(option)\"\r\n          (click)=\"onPick(option)\" (mouseenter)=\"activeIndex.set(i)\">\r\n        @if (multiple()) {\r\n          <input type=\"checkbox\" class=\"check\" tabindex=\"-1\" aria-hidden=\"true\" [checked]=\"isSelected(option)\" />\r\n        }\r\n        <span>{{ option.label }}</span>\r\n        @if (!multiple() && isSelected(option)) {\r\n          <ds-icon name=\"check\" class=\"icon\" [size]=\"14\" />\r\n        }\r\n      </li>\r\n    }\r\n    @if (filteredOptions().length === 0) {\r\n      <li class=\"empty t-s\" role=\"option\" [attr.aria-disabled]=\"true\">No matches</li>\r\n    }\r\n  </ul>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;width:100%;position:relative}.combo-trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:var(--hit-cozy);padding:var(--space-1) var(--space-2);background:var(--surface-default);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-md);cursor:text;text-align:left;flex-wrap:wrap}.combo-trigger:hover{border-color:var(--border-strong)}.combo-trigger:focus-within{border-color:var(--primary);box-shadow:var(--focus-ring);outline:0}.combo-value{font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}.combo-input{flex:1;min-width:80px;border:0;outline:0;background:transparent;font:var(--font-weight-regular) var(--font-size-s)/var(--line-height-flat) var(--font-sans);color:var(--text-primary)}.combo-chevron{color:var(--icon-default);margin-left:auto}.combo-list{width:100%;list-style:none;padding:0;background:var(--surface-overlay);border:var(--border-width-default) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);margin:var(--combobox-offset) 0 0;max-height:var(--combobox-maxh);overflow-y:auto;z-index:var(--layer-popover)}.combo-list .option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font:var(--font-weight-medium) var(--font-size-s)/var(--line-height-base) var(--font-sans);cursor:pointer}.combo-list .option:hover,.combo-list .option.is-active,.combo-list .option[aria-selected=true]{background:var(--surface-secondary)}.combo-list .option .icon{color:var(--primary);margin-left:auto}.combo-list .option.check{padding-left:var(--space-2)}.combo-list .empty{padding:var(--space-3) var(--space-4);color:var(--text-tertiary);text-align:center}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], filterInput: [{ type: i0.ViewChild, args: ['filter', { isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+
+class DividerComponent {
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    // Vertical margin around the divider. Defaults to `md` (8px) for parity
+    // with menus / sidenavs; bump to `lg` for content-section separators.
+    spacing = input('md', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: DividerComponent, isStandalone: true, selector: "ds-divider", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class.strong": "variant() === 'strong'", "class.vertical": "variant() === 'vertical'", "class.label": "variant() === 'label'", "class.spacing-none": "spacing() === 'none'", "class.spacing-sm": "spacing() === 'sm'", "class.spacing-md": "spacing() === 'md'", "class.spacing-lg": "spacing() === 'lg'", "attr.aria-orientation": "variant() === 'vertical' ? 'vertical' : null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;height:var(--border-width-default);background:var(--border-divider);margin:var(--space-2) 0;border:0}:host(.spacing-none){margin:0}:host(.spacing-sm){margin:var(--space-1) 0}:host(.spacing-md){margin:var(--space-2) 0}:host(.spacing-lg){margin:var(--space-4) 0}:host(.strong){background:var(--border-default)}:host(.vertical){width:var(--border-width-default);height:auto;align-self:stretch;margin:0 var(--space-3)}:host(.label){display:flex;align-items:center;gap:var(--space-3);background:transparent;height:auto;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--text-tertiary)}:host(.label):before,:host(.label):after{content:\"\";flex:1;height:var(--border-width-default);background:var(--border-divider)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-divider', standalone: true, template: '<ng-content></ng-content>', host: {
+                        role: 'separator',
+                        '[class.strong]': "variant() === 'strong'",
+                        '[class.vertical]': "variant() === 'vertical'",
+                        '[class.label]': "variant() === 'label'",
+                        '[class.spacing-none]': "spacing() === 'none'",
+                        '[class.spacing-sm]': "spacing() === 'sm'",
+                        '[class.spacing-md]': "spacing() === 'md'",
+                        '[class.spacing-lg]': "spacing() === 'lg'",
+                        '[attr.aria-orientation]': "variant() === 'vertical' ? 'vertical' : null",
+                    }, encapsulation: ViewEncapsulation.Emulated, styles: ["@charset \"UTF-8\";:host{display:block;height:var(--border-width-default);background:var(--border-divider);margin:var(--space-2) 0;border:0}:host(.spacing-none){margin:0}:host(.spacing-sm){margin:var(--space-1) 0}:host(.spacing-md){margin:var(--space-2) 0}:host(.spacing-lg){margin:var(--space-4) 0}:host(.strong){background:var(--border-default)}:host(.vertical){width:var(--border-width-default);height:auto;align-self:stretch;margin:0 var(--space-3)}:host(.label){display:flex;align-items:center;gap:var(--space-3);background:transparent;height:auto;font:var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--text-tertiary)}:host(.label):before,:host(.label):after{content:\"\";flex:1;height:var(--border-width-default);background:var(--border-divider)}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }] } });
+
+class CheckboxComponent {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    inputId = input(null, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        this.checked.set(event.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: CheckboxComponent, isStandalone: true, selector: "ds-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n  type=\"checkbox\"\n  class=\"check\"\n  [checked]=\"checked()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabled()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"inputId()\"\n  (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.check{appearance:none;-webkit-appearance:none;width:var(--check-size);height:var(--check-size);border:var(--check-bw) solid var(--border-strong);background:var(--surface-default);cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0;margin:0;border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.check:hover:not(:disabled){border-color:var(--primary)}.check:focus-visible{outline:none;box-shadow:var(--focus-ring)}.check:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);cursor:not-allowed}.check:checked{background:var(--primary);border-color:var(--primary)}.check:checked:after{content:\"\";width:var(--check-tick-size);height:var(--check-tick-size);background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6.5l2.5 2.5L10 3.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>\") center/contain no-repeat}.check:indeterminate{background:var(--primary);border-color:var(--primary)}.check:indeterminate:after{content:\"\";width:var(--check-indet-w);height:var(--check-indet-h);background:var(--icon-on-primary);border-radius:var(--radius-sm)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-checkbox', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n  type=\"checkbox\"\n  class=\"check\"\n  [checked]=\"checked()\"\n  [indeterminate]=\"indeterminate()\"\n  [disabled]=\"disabled()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"inputId()\"\n  (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.check{appearance:none;-webkit-appearance:none;width:var(--check-size);height:var(--check-size);border:var(--check-bw) solid var(--border-strong);background:var(--surface-default);cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0;margin:0;border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.check:hover:not(:disabled){border-color:var(--primary)}.check:focus-visible{outline:none;box-shadow:var(--focus-ring)}.check:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);cursor:not-allowed}.check:checked{background:var(--primary);border-color:var(--primary)}.check:checked:after{content:\"\";width:var(--check-tick-size);height:var(--check-tick-size);background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6.5l2.5 2.5L10 3.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>\") center/contain no-repeat}.check:indeterminate{background:var(--primary);border-color:var(--primary)}.check:indeterminate:after{content:\"\";width:var(--check-indet-w);height:var(--check-indet-h);background:var(--icon-on-primary);border-radius:var(--radius-sm)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
+
+class RadioComponent {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    inputId = input(null, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        this.checked.set(event.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: RadioComponent, isStandalone: true, selector: "ds-radio", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n  type=\"radio\"\n  class=\"radio\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [attr.name]=\"name() || null\"\n  [attr.value]=\"value() || null\"\n  [attr.id]=\"inputId()\"\n  (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.radio{appearance:none;-webkit-appearance:none;width:var(--check-size);height:var(--check-size);border:var(--check-bw) solid var(--border-strong);background:var(--surface-default);cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0;margin:0;border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.radio:hover:not(:disabled){border-color:var(--primary)}.radio:focus-visible{outline:none;box-shadow:var(--focus-ring)}.radio:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);cursor:not-allowed}.radio:checked{border-color:var(--primary);border-width:var(--radio-bw-checked)}.radio:checked:after{content:\"\";width:var(--radio-dot-size);height:var(--radio-dot-size);border-radius:var(--radius-pill);background:var(--primary)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-radio', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n  type=\"radio\"\n  class=\"radio\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [attr.name]=\"name() || null\"\n  [attr.value]=\"value() || null\"\n  [attr.id]=\"inputId()\"\n  (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.radio{appearance:none;-webkit-appearance:none;width:var(--check-size);height:var(--check-size);border:var(--check-bw) solid var(--border-strong);background:var(--surface-default);cursor:pointer;display:inline-grid;place-items:center;flex-shrink:0;margin:0;border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.radio:hover:not(:disabled){border-color:var(--primary)}.radio:focus-visible{outline:none;box-shadow:var(--focus-ring)}.radio:disabled{background:var(--surface-disabled);border-color:var(--border-disabled);cursor:not-allowed}.radio:checked{border-color:var(--primary);border-width:var(--radio-bw-checked)}.radio:checked:after{content:\"\";width:var(--radio-dot-size);height:var(--radio-dot-size);border-radius:var(--radius-pill);background:var(--primary)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
+
+class SwitchComponent {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    name = input(null, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    inputId = input(null, ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const variant = this.variant();
+        return variant === 'default' ? 'switch' : `switch ${variant}`;
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        this.checked.set(event.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: SwitchComponent, isStandalone: true, selector: "ds-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<input\n  type=\"checkbox\"\n  [class]=\"classes()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"inputId()\"\n  (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.switch{appearance:none;-webkit-appearance:none;width:var(--switch-track-w);height:var(--switch-track-h);background:var(--border-strong);border-radius:var(--radius-pill);position:relative;cursor:pointer;flex-shrink:0;margin:0;transition:background var(--duration-fast) var(--ease-standard)}.switch:after{content:\"\";position:absolute;top:var(--switch-thumb-pad);left:var(--switch-thumb-pad);width:var(--switch-thumb-size);height:var(--switch-thumb-size);background:var(--surface-default);border-radius:var(--radius-pill);box-shadow:var(--shadow-1);transition:transform var(--duration-base) var(--ease-standard)}.switch:checked{background:var(--primary)}.switch:checked:after{transform:translate(var(--switch-thumb-travel))}.switch:focus-visible{outline:none;box-shadow:var(--focus-ring)}.switch:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.switch.success:checked{background:var(--success)}.switch.error:checked{background:var(--error)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SwitchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-switch', standalone: true, encapsulation: ViewEncapsulation.Emulated, template: "<input\n  type=\"checkbox\"\n  [class]=\"classes()\"\n  [checked]=\"checked()\"\n  [disabled]=\"disabled()\"\n  [attr.name]=\"name()\"\n  [attr.id]=\"inputId()\"\n  (change)=\"onChange($event)\"\n/>\n", styles: [":host{display:inline-flex;align-items:center}.switch{appearance:none;-webkit-appearance:none;width:var(--switch-track-w);height:var(--switch-track-h);background:var(--border-strong);border-radius:var(--radius-pill);position:relative;cursor:pointer;flex-shrink:0;margin:0;transition:background var(--duration-fast) var(--ease-standard)}.switch:after{content:\"\";position:absolute;top:var(--switch-thumb-pad);left:var(--switch-thumb-pad);width:var(--switch-thumb-size);height:var(--switch-thumb-size);background:var(--surface-default);border-radius:var(--radius-pill);box-shadow:var(--shadow-1);transition:transform var(--duration-base) var(--ease-standard)}.switch:checked{background:var(--primary)}.switch:checked:after{transform:translate(var(--switch-thumb-travel))}.switch:focus-visible{outline:none;box-shadow:var(--focus-ring)}.switch:disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.switch.success:checked{background:var(--success)}.switch.error:checked{background:var(--error)}\n"] }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
+
+/**
+ * Public surface of @ids-group-ltd/ids-design-system.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent, AccordionItemComponent, AvatarComponent, AvatarGroupComponent, BadgeComponent, BannerComponent, BottomSheetComponent, BreadcrumbsComponent, BreadcrumbsService, ButtonComponent, CardComponent, CellTemplateDirective, CheckboxComponent, ComboboxComponent, DS_CONFIG, DS_ICON_REGISTRY, DS_TOAST_POSITION, DS_TOAST_POSITION_DEFAULT, DatePickerComponent, DividerComponent, DrawerComponent, DropdownComponent, DropzoneComponent, DsOverlayCloseRef, DsStaticPreview, EmptyStateComponent, ICONS, IconButtonComponent, IconComponent, InputComponent, MenuComponent, MenuItemComponent, ModalCardComponent, ModalComponent, NumberStepperComponent, PageFooterComponent, PageHeaderComponent, PaginationComponent, PopoverComponent, ProgressComponent, RadioComponent, SearchComponent, SelectComponent, SidenavComponent, SidenavGroupComponent, SidenavItemComponent, SkeletonComponent, SpinnerComponent, StatComponent, StatusDotComponent, StepperComponent, SwitchComponent, TabComponent, TableComponent, TabsComponent, TagComponent, TextareaComponent, ToastComponent, ToastRegionComponent, ToastService, TooltipDirective, TooltipPanelComponent, TopBarComponent, W3wComponent, isSelectOptionGroup, provideDsConfig, provideDsIcons };
+//# sourceMappingURL=ids-group-ltd-ids-design-system.mjs.map