@doku-com/tala 1.0.0-alpha.5 → 1.0.0-alpha.7

package/fesm2022/doku-com-tala.mjs

@@ -1,13 +1,51 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, forwardRef, inject, ElementRef, HostListener } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { input, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, ElementRef, InjectionToken, contentChild, TemplateRef, Directive, model, HostListener } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+class TalaAlert {
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    type = input('inline', ...(ngDevMode ? [{ debugName: "type" }] : /* 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 */ []));
+    action = input('none', ...(ngDevMode ? [{ debugName: "action" }] : /* istanbul ignore next */ []));
+    actionLabel = input('Action label', ...(ngDevMode ? [{ debugName: "actionLabel" }] : /* istanbul ignore next */ []));
+    actionClick = output();
+    dismissed = output();
+    _dismissed = signal(false, ...(ngDevMode ? [{ debugName: "_dismissed" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => ['tala-alert', `tala-alert--${this.variant()}`, `tala-alert--${this.type()}`].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    _onActionClick() {
+        this.actionClick.emit();
+    }
+    _onDismiss() {
+        this._dismissed.set(true);
+        this.dismissed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TalaAlert, isStandalone: true, selector: "tala-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", dismissed: "dismissed" }, host: { properties: { "class": "hostClasses()", "attr.role": "variant() === 'danger' || variant() === 'warning' ? 'alert' : 'status'", "attr.aria-atomic": "'true'", "style.display": "_dismissed() ? 'none' : null" } }, ngImport: i0, template: "<span class=\"tala-alert__icon\" aria-hidden=\"true\">\n  @switch (variant()) {\n    @case ('success') {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n        <path\n          d=\"M8 12.5l2.5 2.5L16 9.5\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('warning') {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M12 2.5 L22.5 21 H1.5 Z\" fill=\"currentColor\" stroke-linejoin=\"round\" />\n        <rect x=\"11\" y=\"9\" width=\"2\" height=\"6\" rx=\"1\" fill=\"white\" />\n        <rect x=\"11\" y=\"16.5\" width=\"2\" height=\"2\" rx=\"1\" fill=\"white\" />\n      </svg>\n    }\n    @case ('danger') {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n        <path d=\"M9 9l6 6M15 9l-6 6\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @default {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n        <rect x=\"11\" y=\"10\" width=\"2\" height=\"7\" rx=\"1\" fill=\"white\" />\n        <rect x=\"11\" y=\"6.5\" width=\"2\" height=\"2\" rx=\"1\" fill=\"white\" />\n      </svg>\n    }\n  }\n</span>\n\n<div class=\"tala-alert__content\">\n  @if (title()) {\n    <p class=\"tala-alert__title\">{{ title() }}</p>\n  }\n  @if (message()) {\n    <p class=\"tala-alert__message\">{{ message() }}</p>\n  }\n  @switch (action()) {\n    @case ('label') {\n      <div>\n        <button type=\"button\" class=\"tala-alert__action\" (click)=\"_onActionClick()\">\n          {{ actionLabel() }} \u2192\n        </button>\n      </div>\n    }\n    @case ('custom') {\n      <div class=\"tala-alert__actions\">\n        <ng-content></ng-content>\n      </div>\n    }\n  }\n</div>\n\n@if (dismissible()) {\n  <button type=\"button\" class=\"tala-alert__close\" aria-label=\"Dismiss alert\" (click)=\"_onDismiss()\">\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n      <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n    </svg>\n  </button>\n}\n", styles: ["tala-alert{--tala-alert-bg: var(--tala-sys-color-feedback-info-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-info-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-info-text);--tala-alert-body-color: var(--tala-sys-color-text-secondary);--tala-alert-icon-size: 20px;--tala-alert-close-size: 14px;--tala-alert-gap: 12px;--tala-alert-radius: var(--tala-ref-radius-lg);--tala-alert-padding-x: 16px;--tala-alert-padding-y: 14px;display:flex;align-items:flex-start;gap:var(--tala-alert-gap);padding:var(--tala-alert-padding-y) var(--tala-alert-padding-x);background-color:var(--tala-alert-bg);border:1px solid var(--tala-alert-border-color);border-radius:var(--tala-alert-radius);box-sizing:border-box}.tala-alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-alert-icon-size);height:var(--tala-alert-icon-size);color:var(--tala-alert-accent-color)}.tala-alert__icon svg{width:100%;height:100%}.tala-alert__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;gap:4px}.tala-alert__title{margin:0;font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:600;color:var(--tala-alert-accent-color)}.tala-alert__message{margin:0;font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-alert-body-color)}.tala-alert__action{display:inline-flex;align-items:center;gap:4px;padding:0;border:none;background:transparent;font-family:var(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:500;color:var(--tala-alert-accent-color);cursor:pointer}.tala-alert__action:hover{text-decoration:underline}.tala-alert__actions{display:flex;align-items:center;gap:8px}.tala-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-alert-close-size);height:var(--tala-alert-close-size);padding:0;border:none;background:transparent;color:var(--tala-alert-accent-color);opacity:.7;cursor:pointer}.tala-alert__close svg{width:100%;height:100%}.tala-alert__close:hover{opacity:1}tala-alert.tala-alert--success{--tala-alert-bg: var(--tala-sys-color-feedback-success-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-success-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-success-text)}tala-alert.tala-alert--warning{--tala-alert-bg: var(--tala-sys-color-feedback-warning-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-warning-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-warning-text)}tala-alert.tala-alert--danger{--tala-alert-bg: var(--tala-sys-color-feedback-danger-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-danger-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-danger-text)}tala-alert.tala-alert--info{--tala-alert-bg: var(--tala-sys-color-feedback-info-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-info-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-info-text)}tala-alert.tala-alert--banner{--tala-alert-radius: 0;--tala-alert-padding-y: 10px;border-width:0 0 2px 0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaAlert, decorators: [{
+            type: Component,
+            args: [{ selector: 'tala-alert', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.role]': "variant() === 'danger' || variant() === 'warning' ? 'alert' : 'status'",
+                        '[attr.aria-atomic]': "'true'",
+                        '[style.display]': "_dismissed() ? 'none' : null",
+                    }, template: "<span class=\"tala-alert__icon\" aria-hidden=\"true\">\n  @switch (variant()) {\n    @case ('success') {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n        <path\n          d=\"M8 12.5l2.5 2.5L16 9.5\"\n          stroke=\"white\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    }\n    @case ('warning') {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <path d=\"M12 2.5 L22.5 21 H1.5 Z\" fill=\"currentColor\" stroke-linejoin=\"round\" />\n        <rect x=\"11\" y=\"9\" width=\"2\" height=\"6\" rx=\"1\" fill=\"white\" />\n        <rect x=\"11\" y=\"16.5\" width=\"2\" height=\"2\" rx=\"1\" fill=\"white\" />\n      </svg>\n    }\n    @case ('danger') {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n        <path d=\"M9 9l6 6M15 9l-6 6\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @default {\n      <svg viewBox=\"0 0 24 24\" fill=\"none\">\n        <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"currentColor\" />\n        <rect x=\"11\" y=\"10\" width=\"2\" height=\"7\" rx=\"1\" fill=\"white\" />\n        <rect x=\"11\" y=\"6.5\" width=\"2\" height=\"2\" rx=\"1\" fill=\"white\" />\n      </svg>\n    }\n  }\n</span>\n\n<div class=\"tala-alert__content\">\n  @if (title()) {\n    <p class=\"tala-alert__title\">{{ title() }}</p>\n  }\n  @if (message()) {\n    <p class=\"tala-alert__message\">{{ message() }}</p>\n  }\n  @switch (action()) {\n    @case ('label') {\n      <div>\n        <button type=\"button\" class=\"tala-alert__action\" (click)=\"_onActionClick()\">\n          {{ actionLabel() }} \u2192\n        </button>\n      </div>\n    }\n    @case ('custom') {\n      <div class=\"tala-alert__actions\">\n        <ng-content></ng-content>\n      </div>\n    }\n  }\n</div>\n\n@if (dismissible()) {\n  <button type=\"button\" class=\"tala-alert__close\" aria-label=\"Dismiss alert\" (click)=\"_onDismiss()\">\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n      <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n    </svg>\n  </button>\n}\n", styles: ["tala-alert{--tala-alert-bg: var(--tala-sys-color-feedback-info-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-info-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-info-text);--tala-alert-body-color: var(--tala-sys-color-text-secondary);--tala-alert-icon-size: 20px;--tala-alert-close-size: 14px;--tala-alert-gap: 12px;--tala-alert-radius: var(--tala-ref-radius-lg);--tala-alert-padding-x: 16px;--tala-alert-padding-y: 14px;display:flex;align-items:flex-start;gap:var(--tala-alert-gap);padding:var(--tala-alert-padding-y) var(--tala-alert-padding-x);background-color:var(--tala-alert-bg);border:1px solid var(--tala-alert-border-color);border-radius:var(--tala-alert-radius);box-sizing:border-box}.tala-alert__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-alert-icon-size);height:var(--tala-alert-icon-size);color:var(--tala-alert-accent-color)}.tala-alert__icon svg{width:100%;height:100%}.tala-alert__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;gap:4px}.tala-alert__title{margin:0;font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:600;color:var(--tala-alert-accent-color)}.tala-alert__message{margin:0;font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-alert-body-color)}.tala-alert__action{display:inline-flex;align-items:center;gap:4px;padding:0;border:none;background:transparent;font-family:var(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:500;color:var(--tala-alert-accent-color);cursor:pointer}.tala-alert__action:hover{text-decoration:underline}.tala-alert__actions{display:flex;align-items:center;gap:8px}.tala-alert__close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-alert-close-size);height:var(--tala-alert-close-size);padding:0;border:none;background:transparent;color:var(--tala-alert-accent-color);opacity:.7;cursor:pointer}.tala-alert__close svg{width:100%;height:100%}.tala-alert__close:hover{opacity:1}tala-alert.tala-alert--success{--tala-alert-bg: var(--tala-sys-color-feedback-success-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-success-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-success-text)}tala-alert.tala-alert--warning{--tala-alert-bg: var(--tala-sys-color-feedback-warning-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-warning-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-warning-text)}tala-alert.tala-alert--danger{--tala-alert-bg: var(--tala-sys-color-feedback-danger-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-danger-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-danger-text)}tala-alert.tala-alert--info{--tala-alert-bg: var(--tala-sys-color-feedback-info-bg);--tala-alert-border-color: var(--tala-sys-color-feedback-info-border);--tala-alert-accent-color: var(--tala-sys-color-feedback-info-text)}tala-alert.tala-alert--banner{--tala-alert-radius: 0;--tala-alert-padding-y: 10px;border-width:0 0 2px 0}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", 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 }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
 
 class TalaAvatar {
+    /** Accessible display name used for initials and the generated aria label. */
     name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Visual size of the avatar. */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Outer shape of the avatar container. */
     shape = input('circle', ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Optional presence indicator shown on the avatar. */
     status = input('none', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Optional notification badge count. Values above 99 render as `99+`. */
     badgeCount = input(0, ...(ngDevMode ? [{ debugName: "badgeCount" }] : /* istanbul ignore next */ []));
+    /** Image URL. When omitted, the component falls back to generated initials. */
     src = input('', ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
     initials = computed(() => this.getInitials(this.name()), ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
     bgColor = computed(() => this.src()
@@ -61,128 +99,220 @@ class TalaAvatar {
             return words[0].slice(0, 2).toUpperCase();
         return (words[0][0] + words[words.length - 1][0]).toUpperCase();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaAvatar, isStandalone: true, selector: "tala-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.background-color": "bgColor()", "attr.role": "\"img\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@if (src()) {\n  <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n  <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n  <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n  <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n    {{ displayBadge() }}\n  </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--tala-sys-color-outline-default);--tala-avatar-initials-color: var(--tala-sys-color-text-inverse);--tala-avatar-status-ring-width: 2px;--tala-avatar-status-ring-color: var(--tala-sys-color-surface-default);--tala-avatar-status-online-color: var(--tala-ref-color-green-40);--tala-avatar-status-offline-color: var(--tala-ref-color-neutral-40);--tala-avatar-status-busy-color: var(--tala-ref-color-red-50);--tala-avatar-status-away-color: var(--tala-ref-color-amber-30);--tala-avatar-badge-bg: var(--tala-sys-color-brand);--tala-avatar-badge-color: var(--tala-sys-color-text-inverse);--tala-avatar-badge-ring-width: 2px;--tala-avatar-badge-ring-color: var(--tala-sys-color-surface-default);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;border:1px solid var(--tala-avatar-border-color);overflow:visible;-webkit-user-select:none;user-select:none}.tala-avatar__initials{font-family:var(--font-body);font-weight:var(--font-weight-medium);color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:var(--letter-spacing-normal)}tala-avatar.tala-avatar--image{overflow:hidden}.tala-avatar__image{width:100%;height:100%;object-fit:cover;display:block}tala-avatar.tala-avatar--xs{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:24px;height:24px}tala-avatar.tala-avatar--xs .tala-avatar__initials{font-size:9px}tala-avatar.tala-avatar--xs .tala-avatar__status{width:6px;height:6px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--xs .tala-avatar__badge{width:8px;height:8px;top:-5.4px;right:-3.4px;font-size:5px}tala-avatar.tala-avatar--sm{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:32px;height:32px}tala-avatar.tala-avatar--sm .tala-avatar__initials{font-size:var(--font-size-11);line-height:var(--line-height-14)}tala-avatar.tala-avatar--sm .tala-avatar__status{width:7px;height:7px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--sm .tala-avatar__badge{width:10px;height:10px;top:-6.5px;right:-4.5px;font-size:6px}tala-avatar.tala-avatar--md{width:40px;height:40px}tala-avatar.tala-avatar--md .tala-avatar__initials{font-size:var(--font-size-14);line-height:var(--line-height-20)}tala-avatar.tala-avatar--md .tala-avatar__status{width:8px;height:8px;bottom:-1.5px;right:-1.5px}tala-avatar.tala-avatar--md .tala-avatar__badge{min-width:12px;height:12px;top:-7.6px;right:-5.6px;font-size:7px}tala-avatar.tala-avatar--lg{width:48px;height:48px}tala-avatar.tala-avatar--lg .tala-avatar__initials{font-size:var(--font-size-16);line-height:var(--line-height-20)}tala-avatar.tala-avatar--lg .tala-avatar__status{width:10px;height:10px;bottom:-2px;right:-2px}tala-avatar.tala-avatar--lg .tala-avatar__badge{min-width:14px;height:14px;top:-8.7px;right:-6.7px;font-size:8px}tala-avatar.tala-avatar--xl{width:64px;height:64px}tala-avatar.tala-avatar--xl .tala-avatar__initials{font-size:22px;line-height:normal}tala-avatar.tala-avatar--xl .tala-avatar__status{width:12px;height:12px;bottom:-2.5px;right:-2.5px}tala-avatar.tala-avatar--xl .tala-avatar__badge{min-width:16px;height:16px;top:-9.8px;right:-7.8px;font-size:9px}tala-avatar.tala-avatar--circle{border-radius:var(--radius-full)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--radius-full);box-shadow:0 0 0 var(--tala-avatar-status-ring-width) var(--tala-avatar-status-ring-color);pointer-events:none}.tala-avatar__status--online{background-color:var(--tala-avatar-status-online-color)}.tala-avatar__status--offline{background-color:var(--tala-avatar-status-offline-color)}.tala-avatar__status--busy{background-color:var(--tala-avatar-status-busy-color)}.tala-avatar__status--away{background-color:var(--tala-avatar-status-away-color)}.tala-avatar__badge{position:absolute;background-color:var(--tala-avatar-badge-bg);color:var(--tala-avatar-badge-color);border-radius:var(--radius-full);font-family:var(--font-body);font-weight:var(--font-weight-medium);box-shadow:0 0 0 var(--tala-avatar-badge-ring-width) var(--tala-avatar-badge-ring-color);display:flex;align-items:center;justify-content:center;padding:0 2px;pointer-events:none;white-space:nowrap;line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaAvatar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TalaAvatar, isStandalone: true, selector: "tala-avatar", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "style.background-color": "bgColor()", "attr.role": "\"img\"", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: "@if (src()) {\n  <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n  <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n  <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n  <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n    {{ displayBadge() }}\n  </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--tala-sys-color-border-default);--tala-avatar-initials-color: var(--tala-sys-color-text-inverse);--tala-avatar-status-ring-width: 2px;--tala-avatar-status-ring-color: var(--tala-sys-color-surface-default);--tala-avatar-status-online-color: var(--tala-ref-color-green-40);--tala-avatar-status-offline-color: var(--tala-ref-color-neutral-40);--tala-avatar-status-busy-color: var(--tala-ref-color-red-50);--tala-avatar-status-away-color: var(--tala-ref-color-amber-30);--tala-avatar-badge-bg: var(--tala-sys-color-action-accent-bg);--tala-avatar-badge-color: var(--tala-sys-color-text-inverse);--tala-avatar-badge-ring-width: 2px;--tala-avatar-badge-ring-color: var(--tala-sys-color-surface-default);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;border:1px solid var(--tala-avatar-border-color);overflow:visible;-webkit-user-select:none;user-select:none}.tala-avatar__initials{font-family:var(--tala-ref-type-family-inter);font-weight:500;color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:0px}tala-avatar.tala-avatar--image{overflow:hidden}.tala-avatar__image{width:100%;height:100%;object-fit:cover;display:block}tala-avatar.tala-avatar--xs{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:24px;height:24px}tala-avatar.tala-avatar--xs .tala-avatar__initials{font-size:9px}tala-avatar.tala-avatar--xs .tala-avatar__status{width:6px;height:6px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--xs .tala-avatar__badge{width:8px;height:8px;top:-5.4px;right:-3.4px;font-size:5px}tala-avatar.tala-avatar--sm{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:32px;height:32px}tala-avatar.tala-avatar--sm .tala-avatar__initials{font-size:11px;line-height:14px}tala-avatar.tala-avatar--sm .tala-avatar__status{width:7px;height:7px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--sm .tala-avatar__badge{width:10px;height:10px;top:-6.5px;right:-4.5px;font-size:6px}tala-avatar.tala-avatar--md{width:40px;height:40px}tala-avatar.tala-avatar--md .tala-avatar__initials{font-size:14px;line-height:20px}tala-avatar.tala-avatar--md .tala-avatar__status{width:8px;height:8px;bottom:-1.5px;right:-1.5px}tala-avatar.tala-avatar--md .tala-avatar__badge{min-width:12px;height:12px;top:-7.6px;right:-5.6px;font-size:7px}tala-avatar.tala-avatar--lg{width:48px;height:48px}tala-avatar.tala-avatar--lg .tala-avatar__initials{font-size:16px;line-height:20px}tala-avatar.tala-avatar--lg .tala-avatar__status{width:10px;height:10px;bottom:-2px;right:-2px}tala-avatar.tala-avatar--lg .tala-avatar__badge{min-width:14px;height:14px;top:-8.7px;right:-6.7px;font-size:8px}tala-avatar.tala-avatar--xl{width:64px;height:64px}tala-avatar.tala-avatar--xl .tala-avatar__initials{font-size:22px;line-height:normal}tala-avatar.tala-avatar--xl .tala-avatar__status{width:12px;height:12px;bottom:-2.5px;right:-2.5px}tala-avatar.tala-avatar--xl .tala-avatar__badge{min-width:16px;height:16px;top:-9.8px;right:-7.8px;font-size:9px}tala-avatar.tala-avatar--circle{border-radius:var(--tala-ref-radius-full)}tala-avatar.tala-avatar--circle .tala-avatar__status{transform:translate(35%,35%)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--tala-ref-radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--tala-ref-radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--tala-ref-radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--tala-ref-radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--tala-ref-radius-full);box-shadow:0 0 0 var(--tala-avatar-status-ring-width) var(--tala-avatar-status-ring-color);pointer-events:none}.tala-avatar__status--online{background-color:var(--tala-avatar-status-online-color)}.tala-avatar__status--offline{background-color:var(--tala-avatar-status-offline-color)}.tala-avatar__status--busy{background-color:var(--tala-avatar-status-busy-color)}.tala-avatar__status--away{background-color:var(--tala-avatar-status-away-color)}.tala-avatar__badge{position:absolute;background-color:var(--tala-avatar-badge-bg);color:var(--tala-avatar-badge-color);border-radius:var(--tala-ref-radius-full);font-family:var(--tala-ref-type-family-inter);font-weight:500;box-shadow:0 0 0 var(--tala-avatar-badge-ring-width) var(--tala-avatar-badge-ring-color);display:flex;align-items:center;justify-content:center;padding:0 2px;pointer-events:none;white-space:nowrap;line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaAvatar, decorators: [{
             type: Component,
-            args: [{ selector: 'tala-avatar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'tala-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'hostClasses()',
                         '[style.background-color]': 'bgColor()',
                         '[attr.role]': '"img"',
                         '[attr.aria-label]': 'ariaLabel()',
-                    }, template: "@if (src()) {\n  <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n  <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n  <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n  <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n    {{ displayBadge() }}\n  </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--tala-sys-color-outline-default);--tala-avatar-initials-color: var(--tala-sys-color-text-inverse);--tala-avatar-status-ring-width: 2px;--tala-avatar-status-ring-color: var(--tala-sys-color-surface-default);--tala-avatar-status-online-color: var(--tala-ref-color-green-40);--tala-avatar-status-offline-color: var(--tala-ref-color-neutral-40);--tala-avatar-status-busy-color: var(--tala-ref-color-red-50);--tala-avatar-status-away-color: var(--tala-ref-color-amber-30);--tala-avatar-badge-bg: var(--tala-sys-color-brand);--tala-avatar-badge-color: var(--tala-sys-color-text-inverse);--tala-avatar-badge-ring-width: 2px;--tala-avatar-badge-ring-color: var(--tala-sys-color-surface-default);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;border:1px solid var(--tala-avatar-border-color);overflow:visible;-webkit-user-select:none;user-select:none}.tala-avatar__initials{font-family:var(--font-body);font-weight:var(--font-weight-medium);color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:var(--letter-spacing-normal)}tala-avatar.tala-avatar--image{overflow:hidden}.tala-avatar__image{width:100%;height:100%;object-fit:cover;display:block}tala-avatar.tala-avatar--xs{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:24px;height:24px}tala-avatar.tala-avatar--xs .tala-avatar__initials{font-size:9px}tala-avatar.tala-avatar--xs .tala-avatar__status{width:6px;height:6px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--xs .tala-avatar__badge{width:8px;height:8px;top:-5.4px;right:-3.4px;font-size:5px}tala-avatar.tala-avatar--sm{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:32px;height:32px}tala-avatar.tala-avatar--sm .tala-avatar__initials{font-size:var(--font-size-11);line-height:var(--line-height-14)}tala-avatar.tala-avatar--sm .tala-avatar__status{width:7px;height:7px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--sm .tala-avatar__badge{width:10px;height:10px;top:-6.5px;right:-4.5px;font-size:6px}tala-avatar.tala-avatar--md{width:40px;height:40px}tala-avatar.tala-avatar--md .tala-avatar__initials{font-size:var(--font-size-14);line-height:var(--line-height-20)}tala-avatar.tala-avatar--md .tala-avatar__status{width:8px;height:8px;bottom:-1.5px;right:-1.5px}tala-avatar.tala-avatar--md .tala-avatar__badge{min-width:12px;height:12px;top:-7.6px;right:-5.6px;font-size:7px}tala-avatar.tala-avatar--lg{width:48px;height:48px}tala-avatar.tala-avatar--lg .tala-avatar__initials{font-size:var(--font-size-16);line-height:var(--line-height-20)}tala-avatar.tala-avatar--lg .tala-avatar__status{width:10px;height:10px;bottom:-2px;right:-2px}tala-avatar.tala-avatar--lg .tala-avatar__badge{min-width:14px;height:14px;top:-8.7px;right:-6.7px;font-size:8px}tala-avatar.tala-avatar--xl{width:64px;height:64px}tala-avatar.tala-avatar--xl .tala-avatar__initials{font-size:22px;line-height:normal}tala-avatar.tala-avatar--xl .tala-avatar__status{width:12px;height:12px;bottom:-2.5px;right:-2.5px}tala-avatar.tala-avatar--xl .tala-avatar__badge{min-width:16px;height:16px;top:-9.8px;right:-7.8px;font-size:9px}tala-avatar.tala-avatar--circle{border-radius:var(--radius-full)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--radius-full);box-shadow:0 0 0 var(--tala-avatar-status-ring-width) var(--tala-avatar-status-ring-color);pointer-events:none}.tala-avatar__status--online{background-color:var(--tala-avatar-status-online-color)}.tala-avatar__status--offline{background-color:var(--tala-avatar-status-offline-color)}.tala-avatar__status--busy{background-color:var(--tala-avatar-status-busy-color)}.tala-avatar__status--away{background-color:var(--tala-avatar-status-away-color)}.tala-avatar__badge{position:absolute;background-color:var(--tala-avatar-badge-bg);color:var(--tala-avatar-badge-color);border-radius:var(--radius-full);font-family:var(--font-body);font-weight:var(--font-weight-medium);box-shadow:0 0 0 var(--tala-avatar-badge-ring-width) var(--tala-avatar-badge-ring-color);display:flex;align-items:center;justify-content:center;padding:0 2px;pointer-events:none;white-space:nowrap;line-height:1}\n"] }]
+                    }, template: "@if (src()) {\n  <img class=\"tala-avatar__image\" [src]=\"src()\" [alt]=\"name()\" />\n} @else {\n  <span class=\"tala-avatar__initials\">{{ initials() }}</span>\n}\n\n@if (hasStatus()) {\n  <span [class]=\"'tala-avatar__status tala-avatar__status--' + status()\" role=\"presentation\"></span>\n}\n\n@if (hasBadge()) {\n  <span class=\"tala-avatar__badge\" aria-hidden=\"true\">\n    {{ displayBadge() }}\n  </span>\n}\n", styles: ["tala-avatar{--tala-avatar-border-color: var(--tala-sys-color-border-default);--tala-avatar-initials-color: var(--tala-sys-color-text-inverse);--tala-avatar-status-ring-width: 2px;--tala-avatar-status-ring-color: var(--tala-sys-color-surface-default);--tala-avatar-status-online-color: var(--tala-ref-color-green-40);--tala-avatar-status-offline-color: var(--tala-ref-color-neutral-40);--tala-avatar-status-busy-color: var(--tala-ref-color-red-50);--tala-avatar-status-away-color: var(--tala-ref-color-amber-30);--tala-avatar-badge-bg: var(--tala-sys-color-action-accent-bg);--tala-avatar-badge-color: var(--tala-sys-color-text-inverse);--tala-avatar-badge-ring-width: 2px;--tala-avatar-badge-ring-color: var(--tala-sys-color-surface-default);display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;border:1px solid var(--tala-avatar-border-color);overflow:visible;-webkit-user-select:none;user-select:none}.tala-avatar__initials{font-family:var(--tala-ref-type-family-inter);font-weight:500;color:var(--tala-avatar-initials-color);line-height:1;letter-spacing:0px}tala-avatar.tala-avatar--image{overflow:hidden}.tala-avatar__image{width:100%;height:100%;object-fit:cover;display:block}tala-avatar.tala-avatar--xs{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:24px;height:24px}tala-avatar.tala-avatar--xs .tala-avatar__initials{font-size:9px}tala-avatar.tala-avatar--xs .tala-avatar__status{width:6px;height:6px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--xs .tala-avatar__badge{width:8px;height:8px;top:-5.4px;right:-3.4px;font-size:5px}tala-avatar.tala-avatar--sm{--tala-avatar-status-ring-width: 1.5px;--tala-avatar-badge-ring-width: 1.5px;width:32px;height:32px}tala-avatar.tala-avatar--sm .tala-avatar__initials{font-size:11px;line-height:14px}tala-avatar.tala-avatar--sm .tala-avatar__status{width:7px;height:7px;bottom:-1px;right:-1px}tala-avatar.tala-avatar--sm .tala-avatar__badge{width:10px;height:10px;top:-6.5px;right:-4.5px;font-size:6px}tala-avatar.tala-avatar--md{width:40px;height:40px}tala-avatar.tala-avatar--md .tala-avatar__initials{font-size:14px;line-height:20px}tala-avatar.tala-avatar--md .tala-avatar__status{width:8px;height:8px;bottom:-1.5px;right:-1.5px}tala-avatar.tala-avatar--md .tala-avatar__badge{min-width:12px;height:12px;top:-7.6px;right:-5.6px;font-size:7px}tala-avatar.tala-avatar--lg{width:48px;height:48px}tala-avatar.tala-avatar--lg .tala-avatar__initials{font-size:16px;line-height:20px}tala-avatar.tala-avatar--lg .tala-avatar__status{width:10px;height:10px;bottom:-2px;right:-2px}tala-avatar.tala-avatar--lg .tala-avatar__badge{min-width:14px;height:14px;top:-8.7px;right:-6.7px;font-size:8px}tala-avatar.tala-avatar--xl{width:64px;height:64px}tala-avatar.tala-avatar--xl .tala-avatar__initials{font-size:22px;line-height:normal}tala-avatar.tala-avatar--xl .tala-avatar__status{width:12px;height:12px;bottom:-2.5px;right:-2.5px}tala-avatar.tala-avatar--xl .tala-avatar__badge{min-width:16px;height:16px;top:-9.8px;right:-7.8px;font-size:9px}tala-avatar.tala-avatar--circle{border-radius:var(--tala-ref-radius-full)}tala-avatar.tala-avatar--circle .tala-avatar__status{transform:translate(35%,35%)}tala-avatar.tala-avatar--square.tala-avatar--xs{border-radius:var(--tala-ref-radius-sm)}tala-avatar.tala-avatar--square.tala-avatar--sm{border-radius:var(--tala-ref-radius-md)}tala-avatar.tala-avatar--square.tala-avatar--md,tala-avatar.tala-avatar--square.tala-avatar--lg{border-radius:var(--tala-ref-radius-lg)}tala-avatar.tala-avatar--square.tala-avatar--xl{border-radius:var(--tala-ref-radius-xl)}.tala-avatar__status{position:absolute;border-radius:var(--tala-ref-radius-full);box-shadow:0 0 0 var(--tala-avatar-status-ring-width) var(--tala-avatar-status-ring-color);pointer-events:none}.tala-avatar__status--online{background-color:var(--tala-avatar-status-online-color)}.tala-avatar__status--offline{background-color:var(--tala-avatar-status-offline-color)}.tala-avatar__status--busy{background-color:var(--tala-avatar-status-busy-color)}.tala-avatar__status--away{background-color:var(--tala-avatar-status-away-color)}.tala-avatar__badge{position:absolute;background-color:var(--tala-avatar-badge-bg);color:var(--tala-avatar-badge-color);border-radius:var(--tala-ref-radius-full);font-family:var(--tala-ref-type-family-inter);font-weight:500;box-shadow:0 0 0 var(--tala-avatar-badge-ring-width) var(--tala-avatar-badge-ring-color);display:flex;align-items:center;justify-content:center;padding:0 2px;pointer-events:none;white-space:nowrap;line-height:1}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], badgeCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCount", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
 
+/** Groups multiple avatars with shared sizing and overlapping layout styles. */
 class TalaAvatarGroup {
+    /** Shared avatar size applied to items inside the group. */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: TalaAvatarGroup, isStandalone: true, selector: "tala-avatar-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "\"tala-avatar-group--\" + size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tala-avatar-group{--tala-avatar-group-ring-width: 2px;--tala-avatar-group-ring-color: var(--color-surface-default);display:inline-flex;flex-direction:row;align-items:center}tala-avatar-group tala-avatar{box-shadow:0 0 0 var(--tala-avatar-group-ring-width) var(--tala-avatar-group-ring-color)}tala-avatar-group tala-avatar:not(:first-child){margin-left:var(--avatar-group-overlap)}.tala-avatar-group--xs{--avatar-group-overlap: -7px}.tala-avatar-group--sm{--avatar-group-overlap: -10px}.tala-avatar-group--md{--avatar-group-overlap: -12px}.tala-avatar-group--lg{--avatar-group-overlap: -14px}.tala-avatar-group--xl{--avatar-group-overlap: -19px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaAvatarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: TalaAvatarGroup, isStandalone: true, selector: "tala-avatar-group", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "\"tala-avatar-group--\" + size()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tala-avatar-group{--tala-avatar-group-ring-width: 2px;--tala-avatar-group-ring-color: var(--tala-sys-color-surface-default);display:inline-flex;flex-direction:row;align-items:center}tala-avatar-group tala-avatar{box-shadow:0 0 0 var(--tala-avatar-group-ring-width) var(--tala-avatar-group-ring-color)}tala-avatar-group tala-avatar:not(:first-child){margin-left:var(--avatar-group-overlap)}.tala-avatar-group--xs{--avatar-group-overlap: -7px}.tala-avatar-group--sm{--avatar-group-overlap: -10px}.tala-avatar-group--md{--avatar-group-overlap: -12px}.tala-avatar-group--lg{--avatar-group-overlap: -14px}.tala-avatar-group--xl{--avatar-group-overlap: -19px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaAvatarGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaAvatarGroup, decorators: [{
             type: Component,
             args: [{ selector: 'tala-avatar-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: `<ng-content />`, host: {
                         '[class]': '"tala-avatar-group--" + size()',
                         role: 'group',
-                    }, styles: ["tala-avatar-group{--tala-avatar-group-ring-width: 2px;--tala-avatar-group-ring-color: var(--color-surface-default);display:inline-flex;flex-direction:row;align-items:center}tala-avatar-group tala-avatar{box-shadow:0 0 0 var(--tala-avatar-group-ring-width) var(--tala-avatar-group-ring-color)}tala-avatar-group tala-avatar:not(:first-child){margin-left:var(--avatar-group-overlap)}.tala-avatar-group--xs{--avatar-group-overlap: -7px}.tala-avatar-group--sm{--avatar-group-overlap: -10px}.tala-avatar-group--md{--avatar-group-overlap: -12px}.tala-avatar-group--lg{--avatar-group-overlap: -14px}.tala-avatar-group--xl{--avatar-group-overlap: -19px}\n"] }]
+                    }, styles: ["tala-avatar-group{--tala-avatar-group-ring-width: 2px;--tala-avatar-group-ring-color: var(--tala-sys-color-surface-default);display:inline-flex;flex-direction:row;align-items:center}tala-avatar-group tala-avatar{box-shadow:0 0 0 var(--tala-avatar-group-ring-width) var(--tala-avatar-group-ring-color)}tala-avatar-group tala-avatar:not(:first-child){margin-left:var(--avatar-group-overlap)}.tala-avatar-group--xs{--avatar-group-overlap: -7px}.tala-avatar-group--sm{--avatar-group-overlap: -10px}.tala-avatar-group--md{--avatar-group-overlap: -12px}.tala-avatar-group--lg{--avatar-group-overlap: -14px}.tala-avatar-group--xl{--avatar-group-overlap: -19px}\n"] }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class TalaButton {
+    el = inject((ElementRef));
+    /**
+     * Selects the button's visual treatment.
+     *
+     * @default 'primary'
+     */
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls the button's height and horizontal padding.
+     *
+     * @default 'md'
+     */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Disables interaction.
+     * Applies the native `disabled` attribute on `<button>` and `aria-disabled="true"` plus
+     * `tabindex="-1"` on `<a>`.
+     *
+     * @default false
+     */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Shows the loading state and blocks interaction.
+     * Adds `aria-busy="true"` and reuses disabled behavior while loading, including removing
+     * anchors from the tab order.
+     *
+     * @default false
+     */
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /**
+     * Collapses horizontal padding for icon-only buttons.
+     * Provide an accessible name such as `aria-label` when no visible text is present.
+     *
+     * @default false
+     */
     iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
-    hostClasses = computed(() => `tala-button--${this.variant()} tala-button--${this.size()}`, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    innerClasses = computed(() => [
+    isButton = this.el.nativeElement.tagName.toLowerCase() === 'button';
+    hostClasses = computed(() => [
         'tala-button',
+        `tala-button--${this.variant()}`,
+        `tala-button--${this.size()}`,
         this.loading() ? 'tala-button--loading' : '',
         this.iconOnly() ? 'tala-button--icon-only' : '',
     ]
         .filter(Boolean)
-        .join(' '), ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaButton, isStandalone: true, selector: "tala-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 }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "<button\n  [class]=\"innerClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [attr.aria-busy]=\"loading() || null\"\n>\n  @if (loading()) {\n    <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n  }\n  <ng-content select=\"[slot=prefix]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"[slot=suffix]\"></ng-content>\n</button>\n", styles: ["tala-button{display:contents;--tala-button-bg: transparent;--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-focus-ring-color: var(--tala-sys-color-outline-focus);--tala-button-height: 40px;--tala-button-padding-x: var(--space-4);--tala-button-gap: var(--space-2);--tala-button-font-size: var(--text-label-default-size);--tala-button-line-height: var(--text-label-default-height);--tala-button-border-radius: var(--radius-md);--tala-button-spinner-size: 16px}tala-button.tala-button--primary{--tala-button-bg: var(--tala-sys-color-surface-inverse);--tala-button-color: var(--tala-sys-color-text-inverse);--tala-button-hover-bg: var(--tala-ref-color-neutral-90)}tala-button.tala-button--secondary{--tala-button-bg: var(--tala-sys-color-surface-default);--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: var(--tala-sys-color-outline-default);--tala-button-hover-bg: var(--tala-ref-color-neutral-10)}tala-button.tala-button--ghost{--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-hover-bg: var(--tala-ref-color-neutral-10)}tala-button.tala-button--accent{--tala-button-bg: var(--tala-sys-color-brand);--tala-button-color: var(--tala-sys-color-on-brand);--tala-button-hover-bg: var(--tala-sys-color-brand-hover)}tala-button.tala-button--danger{--tala-button-bg: var(--tala-sys-color-error);--tala-button-color: var(--tala-sys-color-on-error);--tala-button-hover-bg: var(--tala-sys-color-error-hover)}tala-button.tala-button--link{--tala-button-color: var(--tala-sys-color-text-link);--tala-button-hover-color: var(--tala-sys-color-brand-hover)}tala-button.tala-button--xs{--tala-button-height: 24px;--tala-button-padding-x: var(--space-2);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-xsmall-size);--tala-button-line-height: var(--text-label-xsmall-height);--tala-button-border-radius: var(--radius-sm);--tala-button-spinner-size: 12px}tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--space-3);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-small-size);--tala-button-line-height: var(--text-label-small-height);--tala-button-spinner-size: 14px}tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--space-5);--tala-button-font-size: var(--text-label-large-size);--tala-button-line-height: var(--text-label-large-height);--tala-button-border-radius: var(--radius-lg);--tala-button-spinner-size: 18px}.tala-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--tala-button-gap);height:var(--tala-button-height);padding:0 var(--tala-button-padding-x);border:1px solid var(--tala-button-border-color);border-radius:var(--tala-button-border-radius);background-color:var(--tala-button-bg);color:var(--tala-button-color);font-family:var(--font-body);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-normal);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.tala-button:focus-visible{outline:2px solid var(--tala-button-focus-ring-color);outline-offset:2px}.tala-button.tala-button--icon-only{width:var(--tala-button-height);padding:0}.tala-button:hover:not(:disabled,.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}.tala-button:disabled:not(.tala-button--loading){opacity:.4;cursor:not-allowed;pointer-events:none}.tala-button--loading{cursor:wait;pointer-events:none}.tala-button__spinner{display:block;width:var(--tala-button-spinner-size);height:var(--tala-button-spinner-size);border-radius:var(--radius-full);border:1.5px solid currentColor;border-top-color:transparent;flex-shrink:0;animation:tala-button-spin .65s linear infinite}@keyframes tala-button-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onHostClick(event) {
+        if (!this.isButton && (this.disabled() || this.loading())) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TalaButton, isStandalone: true, selector: "button[talaButton], a[talaButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "class": "hostClasses()", "attr.disabled": "isButton && (disabled() || loading()) ? \"\" : null", "attr.aria-disabled": "!isButton && (disabled() || loading()) ? \"true\" : null", "attr.tabindex": "!isButton && (disabled() || loading()) ? \"-1\" : null", "attr.aria-busy": "loading() ? \"true\" : null" } }, ngImport: i0, template: "@if (loading()) {\n  <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n", styles: [".tala-button{--tala-button-bg: transparent;--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-active-bg: var(--tala-button-hover-bg);--tala-button-active-color: var(--tala-button-hover-color);--tala-button-focus-ring-color: var(--tala-sys-color-border-focus);--tala-button-focus-glow: none;--tala-button-height: 40px;--tala-button-padding-x: var(--tala-ref-space-4);--tala-button-gap: var(--tala-ref-space-2);--tala-button-font-size: 13px;--tala-button-line-height: 18px;--tala-button-border-radius: var(--tala-ref-radius-md);--tala-button-spinner-size: 16px;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--tala-button-gap);height:var(--tala-button-height);padding:0 var(--tala-button-padding-x);border:1px solid var(--tala-button-border-color);border-radius:var(--tala-button-border-radius);background-color:var(--tala-button-bg);color:var(--tala-button-color);font-family:var(--tala-ref-type-family-inter);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:500;letter-spacing:0px;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.tala-button:focus-visible{outline:2px solid var(--tala-button-focus-ring-color);outline-offset:2px;box-shadow:var(--tala-button-focus-glow)}.tala-button.tala-button--icon-only{width:var(--tala-button-height);padding:0}.tala-button.tala-button--primary{--tala-button-bg: var(--tala-sys-color-action-primary-bg);--tala-button-color: var(--tala-sys-color-action-primary-text);--tala-button-hover-bg: var(--tala-sys-color-action-primary-hover);--tala-button-active-bg: var(--tala-ref-color-neutral-80);--tala-button-focus-glow: 0 0 0 4px color-mix(in srgb, var(--tala-sys-color-action-primary-bg) 22%, transparent)}.tala-button.tala-button--secondary{--tala-button-bg: var(--tala-sys-color-action-secondary-bg);--tala-button-color: var(--tala-sys-color-action-secondary-text);--tala-button-border-color: var(--tala-sys-color-action-secondary-border);--tala-button-hover-bg: var(--tala-sys-color-action-secondary-hover);--tala-button-focus-glow: 0 0 0 4px color-mix(in srgb, var(--tala-ref-color-neutral-100) 15%, transparent)}.tala-button.tala-button--ghost{--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-hover-bg: var(--tala-sys-color-action-ghost-hover);--tala-button-active-bg: var(--tala-sys-color-action-secondary-hover)}.tala-button.tala-button--ghost:focus-visible{border-color:var(--tala-sys-color-border-default)}.tala-button.tala-button--accent{--tala-button-bg: var(--tala-sys-color-action-accent-bg);--tala-button-color: var(--tala-sys-color-action-accent-text);--tala-button-hover-bg: var(--tala-ref-color-red-60);--tala-button-active-bg: var(--tala-ref-color-red-70)}.tala-button.tala-button--danger{--tala-button-bg: var(--tala-sys-color-action-danger-bg);--tala-button-color: var(--tala-sys-color-action-danger-text);--tala-button-hover-bg: var(--tala-ref-color-red-70);--tala-button-active-bg: var(--tala-ref-color-red-80);--tala-button-focus-glow: 0 0 0 4px color-mix(in srgb, var(--tala-sys-color-action-danger-bg) 25%, transparent)}.tala-button.tala-button--link{--tala-button-color: var(--tala-sys-color-text-link);--tala-button-hover-color: var(--tala-ref-color-red-60);--tala-button-active-color: var(--tala-ref-color-red-70)}.tala-button.tala-button--xs{--tala-button-height: 24px;--tala-button-padding-x: var(--tala-ref-space-2);--tala-button-gap: var(--tala-ref-space-1);--tala-button-font-size: 11px;--tala-button-line-height: 14px;--tala-button-border-radius: var(--tala-ref-radius-sm);--tala-button-spinner-size: 12px}.tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--tala-ref-space-3);--tala-button-gap: var(--tala-ref-space-1);--tala-button-font-size: 12px;--tala-button-line-height: 16px;--tala-button-spinner-size: 14px}.tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--tala-ref-space-5);--tala-button-font-size: 14px;--tala-button-line-height: 20px;--tala-button-border-radius: var(--tala-ref-radius-lg);--tala-button-spinner-size: 18px}.tala-button:hover:not(:disabled,[aria-disabled=true],.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}.tala-button:active:not(:disabled,[aria-disabled=true],.tala-button--loading){background-color:var(--tala-button-active-bg);color:var(--tala-button-active-color)}.tala-button:disabled:not(.tala-button--loading),.tala-button[aria-disabled=true]:not(.tala-button--loading){opacity:.4;cursor:not-allowed;pointer-events:none}.tala-button.tala-button--loading{cursor:wait;pointer-events:none}.tala-button__spinner{display:block;width:var(--tala-button-spinner-size);height:var(--tala-button-spinner-size);border-radius:var(--tala-ref-radius-full);border:1.5px solid currentColor;border-top-color:transparent;flex-shrink:0;animation:tala-button-spin .65s linear infinite}@keyframes tala-button-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaButton, decorators: [{
             type: Component,
-            args: [{ selector: 'tala-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'button[talaButton], a[talaButton]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "<button\n  [class]=\"innerClasses()\"\n  [type]=\"type()\"\n  [disabled]=\"disabled() || loading()\"\n  [attr.aria-busy]=\"loading() || null\"\n>\n  @if (loading()) {\n    <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n  }\n  <ng-content select=\"[slot=prefix]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"[slot=suffix]\"></ng-content>\n</button>\n", styles: ["tala-button{display:contents;--tala-button-bg: transparent;--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-focus-ring-color: var(--tala-sys-color-outline-focus);--tala-button-height: 40px;--tala-button-padding-x: var(--space-4);--tala-button-gap: var(--space-2);--tala-button-font-size: var(--text-label-default-size);--tala-button-line-height: var(--text-label-default-height);--tala-button-border-radius: var(--radius-md);--tala-button-spinner-size: 16px}tala-button.tala-button--primary{--tala-button-bg: var(--tala-sys-color-surface-inverse);--tala-button-color: var(--tala-sys-color-text-inverse);--tala-button-hover-bg: var(--tala-ref-color-neutral-90)}tala-button.tala-button--secondary{--tala-button-bg: var(--tala-sys-color-surface-default);--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: var(--tala-sys-color-outline-default);--tala-button-hover-bg: var(--tala-ref-color-neutral-10)}tala-button.tala-button--ghost{--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-hover-bg: var(--tala-ref-color-neutral-10)}tala-button.tala-button--accent{--tala-button-bg: var(--tala-sys-color-brand);--tala-button-color: var(--tala-sys-color-on-brand);--tala-button-hover-bg: var(--tala-sys-color-brand-hover)}tala-button.tala-button--danger{--tala-button-bg: var(--tala-sys-color-error);--tala-button-color: var(--tala-sys-color-on-error);--tala-button-hover-bg: var(--tala-sys-color-error-hover)}tala-button.tala-button--link{--tala-button-color: var(--tala-sys-color-text-link);--tala-button-hover-color: var(--tala-sys-color-brand-hover)}tala-button.tala-button--xs{--tala-button-height: 24px;--tala-button-padding-x: var(--space-2);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-xsmall-size);--tala-button-line-height: var(--text-label-xsmall-height);--tala-button-border-radius: var(--radius-sm);--tala-button-spinner-size: 12px}tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--space-3);--tala-button-gap: var(--space-1);--tala-button-font-size: var(--text-label-small-size);--tala-button-line-height: var(--text-label-small-height);--tala-button-spinner-size: 14px}tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--space-5);--tala-button-font-size: var(--text-label-large-size);--tala-button-line-height: var(--text-label-large-height);--tala-button-border-radius: var(--radius-lg);--tala-button-spinner-size: 18px}.tala-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--tala-button-gap);height:var(--tala-button-height);padding:0 var(--tala-button-padding-x);border:1px solid var(--tala-button-border-color);border-radius:var(--tala-button-border-radius);background-color:var(--tala-button-bg);color:var(--tala-button-color);font-family:var(--font-body);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-normal);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.tala-button:focus-visible{outline:2px solid var(--tala-button-focus-ring-color);outline-offset:2px}.tala-button.tala-button--icon-only{width:var(--tala-button-height);padding:0}.tala-button:hover:not(:disabled,.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}.tala-button:disabled:not(.tala-button--loading){opacity:.4;cursor:not-allowed;pointer-events:none}.tala-button--loading{cursor:wait;pointer-events:none}.tala-button__spinner{display:block;width:var(--tala-button-spinner-size);height:var(--tala-button-spinner-size);border-radius:var(--radius-full);border:1.5px solid currentColor;border-top-color:transparent;flex-shrink:0;animation:tala-button-spin .65s linear infinite}@keyframes tala-button-spin{to{transform:rotate(360deg)}}\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 }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+                        '[attr.disabled]': 'isButton && (disabled() || loading()) ? "" : null',
+                        '[attr.aria-disabled]': '!isButton && (disabled() || loading()) ? "true" : null',
+                        '[attr.tabindex]': '!isButton && (disabled() || loading()) ? "-1" : null',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                        '(click)': 'onHostClick($event)',
+                    }, template: "@if (loading()) {\n  <span class=\"tala-button__spinner\" aria-hidden=\"true\"></span>\n}\n<ng-content select=\"[slot=prefix]\"></ng-content>\n<ng-content></ng-content>\n<ng-content select=\"[slot=suffix]\"></ng-content>\n", styles: [".tala-button{--tala-button-bg: transparent;--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-border-color: transparent;--tala-button-hover-bg: var(--tala-button-bg);--tala-button-hover-color: var(--tala-button-color);--tala-button-active-bg: var(--tala-button-hover-bg);--tala-button-active-color: var(--tala-button-hover-color);--tala-button-focus-ring-color: var(--tala-sys-color-border-focus);--tala-button-focus-glow: none;--tala-button-height: 40px;--tala-button-padding-x: var(--tala-ref-space-4);--tala-button-gap: var(--tala-ref-space-2);--tala-button-font-size: 13px;--tala-button-line-height: 18px;--tala-button-border-radius: var(--tala-ref-radius-md);--tala-button-spinner-size: 16px;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--tala-button-gap);height:var(--tala-button-height);padding:0 var(--tala-button-padding-x);border:1px solid var(--tala-button-border-color);border-radius:var(--tala-button-border-radius);background-color:var(--tala-button-bg);color:var(--tala-button-color);font-family:var(--tala-ref-type-family-inter);font-size:var(--tala-button-font-size);line-height:var(--tala-button-line-height);font-weight:500;letter-spacing:0px;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;text-decoration:none;box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.tala-button:focus-visible{outline:2px solid var(--tala-button-focus-ring-color);outline-offset:2px;box-shadow:var(--tala-button-focus-glow)}.tala-button.tala-button--icon-only{width:var(--tala-button-height);padding:0}.tala-button.tala-button--primary{--tala-button-bg: var(--tala-sys-color-action-primary-bg);--tala-button-color: var(--tala-sys-color-action-primary-text);--tala-button-hover-bg: var(--tala-sys-color-action-primary-hover);--tala-button-active-bg: var(--tala-ref-color-neutral-80);--tala-button-focus-glow: 0 0 0 4px color-mix(in srgb, var(--tala-sys-color-action-primary-bg) 22%, transparent)}.tala-button.tala-button--secondary{--tala-button-bg: var(--tala-sys-color-action-secondary-bg);--tala-button-color: var(--tala-sys-color-action-secondary-text);--tala-button-border-color: var(--tala-sys-color-action-secondary-border);--tala-button-hover-bg: var(--tala-sys-color-action-secondary-hover);--tala-button-focus-glow: 0 0 0 4px color-mix(in srgb, var(--tala-ref-color-neutral-100) 15%, transparent)}.tala-button.tala-button--ghost{--tala-button-color: var(--tala-sys-color-text-primary);--tala-button-hover-bg: var(--tala-sys-color-action-ghost-hover);--tala-button-active-bg: var(--tala-sys-color-action-secondary-hover)}.tala-button.tala-button--ghost:focus-visible{border-color:var(--tala-sys-color-border-default)}.tala-button.tala-button--accent{--tala-button-bg: var(--tala-sys-color-action-accent-bg);--tala-button-color: var(--tala-sys-color-action-accent-text);--tala-button-hover-bg: var(--tala-ref-color-red-60);--tala-button-active-bg: var(--tala-ref-color-red-70)}.tala-button.tala-button--danger{--tala-button-bg: var(--tala-sys-color-action-danger-bg);--tala-button-color: var(--tala-sys-color-action-danger-text);--tala-button-hover-bg: var(--tala-ref-color-red-70);--tala-button-active-bg: var(--tala-ref-color-red-80);--tala-button-focus-glow: 0 0 0 4px color-mix(in srgb, var(--tala-sys-color-action-danger-bg) 25%, transparent)}.tala-button.tala-button--link{--tala-button-color: var(--tala-sys-color-text-link);--tala-button-hover-color: var(--tala-ref-color-red-60);--tala-button-active-color: var(--tala-ref-color-red-70)}.tala-button.tala-button--xs{--tala-button-height: 24px;--tala-button-padding-x: var(--tala-ref-space-2);--tala-button-gap: var(--tala-ref-space-1);--tala-button-font-size: 11px;--tala-button-line-height: 14px;--tala-button-border-radius: var(--tala-ref-radius-sm);--tala-button-spinner-size: 12px}.tala-button.tala-button--sm{--tala-button-height: 32px;--tala-button-padding-x: var(--tala-ref-space-3);--tala-button-gap: var(--tala-ref-space-1);--tala-button-font-size: 12px;--tala-button-line-height: 16px;--tala-button-spinner-size: 14px}.tala-button.tala-button--lg{--tala-button-height: 48px;--tala-button-padding-x: var(--tala-ref-space-5);--tala-button-font-size: 14px;--tala-button-line-height: 20px;--tala-button-border-radius: var(--tala-ref-radius-lg);--tala-button-spinner-size: 18px}.tala-button:hover:not(:disabled,[aria-disabled=true],.tala-button--loading){background-color:var(--tala-button-hover-bg);color:var(--tala-button-hover-color)}.tala-button:active:not(:disabled,[aria-disabled=true],.tala-button--loading){background-color:var(--tala-button-active-bg);color:var(--tala-button-active-color)}.tala-button:disabled:not(.tala-button--loading),.tala-button[aria-disabled=true]:not(.tala-button--loading){opacity:.4;cursor:not-allowed;pointer-events:none}.tala-button.tala-button--loading{cursor:wait;pointer-events:none}.tala-button__spinner{display:block;width:var(--tala-button-spinner-size);height:var(--tala-button-spinner-size);border-radius:var(--tala-ref-radius-full);border:1.5px solid currentColor;border-top-color:transparent;flex-shrink:0;animation:tala-button-spin .65s linear infinite}@keyframes tala-button-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
 
-class TalaInput {
+const TALA_FORM_FIELD_CONTROL = new InjectionToken('TALA_FORM_FIELD_CONTROL');
+const TALA_FORM_FIELD_HOST = new InjectionToken('TALA_FORM_FIELD_HOST');
+
+class TalaFormField {
     static _nextId = 0;
-    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
-    suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
-    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    _id = `tala-input-${++TalaInput._nextId}`;
+    _id = `tala-form-field-${++TalaFormField._nextId}`;
     _helperId = `${this._id}-helper`;
-    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
-    _disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByForm" }] : /* istanbul ignore next */ []));
-    _isDisabled = computed(() => this.disabled() || this._disabledByForm(), ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+    _control = contentChild(TALA_FORM_FIELD_CONTROL, ...(ngDevMode ? [{ debugName: "_control" }] : /* istanbul ignore next */ []));
+    _controlId = computed(() => this._control()?.id(), ...(ngDevMode ? [{ debugName: "_controlId" }] : /* istanbul ignore next */ []));
+    _status = computed(() => this._control()?.status() ?? 'default', ...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
+    _size = computed(() => this._control()?.size() ?? 'md', ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _required = computed(() => this._control()?.required() ?? false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
+    _isDisabled = computed(() => this._control()?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
+    _isReadonly = computed(() => this._control()?.readonly() ?? false, ...(ngDevMode ? [{ debugName: "_isReadonly" }] : /* istanbul ignore next */ []));
+    helperId = computed(() => this._helperId, ...(ngDevMode ? [{ debugName: "helperId" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => [
-        'tala-input',
-        `tala-input--${this.size()}`,
-        `tala-input--${this.status()}`,
-        this._isDisabled() ? 'tala-input--disabled' : '',
-        this.readonly() ? 'tala-input--readonly' : '',
+        'tala-form-field',
+        `tala-form-field--${this._size()}`,
+        `tala-form-field--${this._status()}`,
+        this._isDisabled() ? 'tala-form-field--disabled' : '',
+        this._isReadonly() ? 'tala-form-field--readonly' : '',
     ]
         .filter(Boolean)
         .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    _onChange = () => { };
-    _onTouched = () => { };
-    writeValue(value) {
-        this._value.set(value ?? '');
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this._disabledByForm.set(isDisabled);
-    }
-    _onInput(event) {
-        const value = event.target.value;
-        this._value.set(value);
-        this._onChange(value);
-    }
-    _onBlur() {
-        this._onTouched();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaInput, isStandalone: true, selector: "tala-input", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TalaFormField, isStandalone: true, selector: "tala-form-field", host: { properties: { "class": "hostClasses()" } }, providers: [
             {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TalaInput),
-                multi: true,
+                provide: TALA_FORM_FIELD_HOST,
+                useExisting: TalaFormField,
             },
-        ], ngImport: i0, template: "@if (label()) {\n  <div class=\"tala-input__label-row\">\n    <label class=\"tala-input__label\" [attr.for]=\"_id\">{{ label() }}</label>\n    @if (required()) {\n      <span class=\"tala-input__required\" aria-hidden=\"true\">*</span>\n    }\n  </div>\n}\n\n<div\n  class=\"tala-input__container\"\n  [class.tala-input__container--has-prefix]=\"prefix()\"\n  [class.tala-input__container--has-suffix]=\"suffix()\"\n>\n  @if (prefix()) {\n    <div class=\"tala-input__prefix\">{{ prefix() }}</div>\n  }\n  <ng-content select=\"[slot=leading-icon]\"></ng-content>\n  <input\n    class=\"tala-input__field\"\n    [id]=\"_id\"\n    [type]=\"type()\"\n    [name]=\"name()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"_value()\"\n    [disabled]=\"_isDisabled()\"\n    [attr.readonly]=\"readonly() || null\"\n    [required]=\"required()\"\n    [attr.aria-invalid]=\"status() === 'error' || null\"\n    [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n    (input)=\"_onInput($event)\"\n    (blur)=\"_onBlur()\"\n  />\n  <ng-content select=\"[slot=trailing-icon]\"></ng-content>\n  @if (suffix()) {\n    <div class=\"tala-input__suffix\">{{ suffix() }}</div>\n  }\n</div>\n\n@if (helperText() && !_isDisabled()) {\n  <div class=\"tala-input__helper-row\" [id]=\"_helperId\">\n    <span class=\"tala-input__helper\">{{ helperText() }}</span>\n  </div>\n}\n", styles: ["tala-input{--tala-input-bg: var(--tala-sys-color-surface-default);--tala-input-border-color: var(--tala-sys-color-outline-default);--tala-input-color: var(--tala-sys-color-text-primary);--tala-input-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-input-label-color: var(--tala-sys-color-text-secondary);--tala-input-helper-color: var(--tala-sys-color-text-secondary);--tala-input-prefix-bg: var(--tala-sys-color-surface-sunken);--tala-input-prefix-color: var(--tala-sys-color-text-secondary);--tala-input-required-color: var(--tala-sys-color-brand);--tala-input-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-input-height: 40px;--tala-input-padding-x: 12px;--tala-input-icon-size: 16px;--tala-input-border-radius: var(--radius-md);--tala-input-gap: var(--space-2);display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box}.tala-input__label-row{display:flex;align-items:center;gap:var(--space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-input__label{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-input-label-color);cursor:pointer}.tala-input__required{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-input-required-color)}.tala-input__container{display:flex;align-items:center;gap:var(--tala-input-gap);height:var(--tala-input-height);padding:0 var(--tala-input-padding-x);border:1px solid var(--tala-input-border-color);border-radius:var(--tala-input-border-radius);background-color:var(--tala-input-bg);overflow:hidden;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.tala-input__container--has-prefix{padding-left:0}.tala-input__container--has-suffix{padding-right:0}tala-input:not(.tala-input--disabled,.tala-input--readonly) .tala-input__container:hover{border-color:var(--tala-sys-color-outline-strong)}tala-input:not(.tala-input--disabled) .tala-input__container:focus-within{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-input-focus-ring)}.tala-input__field{flex:1 0 0;min-width:0;height:100%;padding:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-input-color);box-sizing:border-box}.tala-input__field::placeholder{color:var(--tala-input-placeholder-color)}.tala-input__field:disabled{cursor:not-allowed}.tala-input__prefix,.tala-input__suffix{display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0 var(--tala-input-padding-x);background-color:var(--tala-input-prefix-bg);color:var(--tala-input-prefix-color);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}.tala-input__prefix{border-right:1px solid var(--tala-input-border-color)}.tala-input__suffix{border-left:1px solid var(--tala-input-border-color)}tala-input [slot=leading-icon],tala-input [slot=trailing-icon]{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-input-icon-size);height:var(--tala-input-icon-size);color:var(--tala-sys-color-text-tertiary)}tala-input [slot=leading-icon] svg,tala-input [slot=trailing-icon] svg{width:100%;height:100%}.tala-input__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-input__helper{font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-input-helper-color)}tala-input.tala-input--sm{--tala-input-height: 32px;--tala-input-padding-x: 10px;--tala-input-icon-size: 14px}tala-input.tala-input--lg{--tala-input-height: 48px;--tala-input-padding-x: 14px;--tala-input-icon-size: 18px;--tala-input-border-radius: var(--radius-lg)}tala-input.tala-input--error{--tala-input-border-color: var(--tala-sys-color-error-outline);--tala-input-helper-color: var(--tala-sys-color-error-text)}tala-input.tala-input--success{--tala-input-border-color: var(--tala-sys-color-success-outline);--tala-input-helper-color: var(--tala-sys-color-success-text)}tala-input.tala-input--warning{--tala-input-border-color: var(--tala-sys-color-warning-outline);--tala-input-helper-color: var(--tala-sys-color-warning-text)}tala-input.tala-input--disabled{--tala-input-bg: var(--tala-sys-color-surface-sunken);--tala-input-color: var(--tala-sys-color-text-disabled);--tala-input-placeholder-color: var(--tala-sys-color-text-disabled);--tala-input-label-color: var(--tala-sys-color-text-disabled);--tala-input-prefix-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-input.tala-input--readonly{--tala-input-bg: var(--tala-sys-color-surface-sunken)}tala-input.tala-input--readonly .tala-input__field{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "_control", first: true, predicate: TALA_FORM_FIELD_CONTROL, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tala-form-field__label-row\">\n  <label class=\"tala-form-field__label\" [attr.for]=\"_controlId()\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n  @if (_required()) {\n    <span class=\"tala-form-field__required\" aria-hidden=\"true\">*</span>\n  }\n</div>\n\n<div class=\"tala-form-field__container\">\n  <div class=\"tala-form-field__prefix\">\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"[slot=leading-icon]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"[slot=trailing-icon]\"></ng-content>\n  @if (_status() === 'error' || _status() === 'warning') {\n    <svg\n      class=\"tala-form-field__status-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n        d=\"M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z\"\n      />\n    </svg>\n  }\n  @if (_status() === 'success') {\n    <svg\n      class=\"tala-form-field__status-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n        d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"\n      />\n    </svg>\n  }\n  <div class=\"tala-form-field__suffix\">\n    <ng-content select=\"[slot=suffix]\"></ng-content>\n  </div>\n</div>\n\n<div class=\"tala-form-field__helper-row\" [id]=\"_helperId\">\n  <span class=\"tala-form-field__helper\">\n    <ng-content select=\"[slot=helper]\"></ng-content>\n  </span>\n</div>\n", styles: ["tala-form-field{--tala-form-field-bg: var(--tala-sys-color-surface-default);--tala-form-field-border-color: var(--tala-sys-color-border-default);--tala-form-field-label-color: var(--tala-sys-color-text-secondary);--tala-form-field-helper-color: var(--tala-sys-color-text-secondary);--tala-form-field-prefix-bg: var(--tala-sys-color-surface-sunken);--tala-form-field-prefix-color: var(--tala-sys-color-text-secondary);--tala-form-field-required-color: var(--tala-sys-color-text-accent);--tala-form-field-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-form-field-height: 40px;--tala-form-field-padding-x: 12px;--tala-form-field-icon-size: 16px;--tala-form-field-border-radius: var(--tala-ref-radius-md);--tala-form-field-gap: var(--tala-ref-space-2);display:flex;flex-direction:column;gap:var(--tala-ref-space-1);box-sizing:border-box}.tala-form-field__label-row{display:flex;align-items:center;gap:var(--tala-ref-space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-form-field__label-row:has(.tala-form-field__label:empty){display:none}.tala-form-field__label{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-form-field-label-color);cursor:pointer}.tala-form-field__required{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-form-field-required-color)}.tala-form-field__container{display:flex;align-items:center;gap:var(--tala-form-field-gap);height:var(--tala-form-field-height);padding:0 var(--tala-form-field-padding-x);border:1px solid var(--tala-form-field-border-color);border-radius:var(--tala-form-field-border-radius);background-color:var(--tala-form-field-bg);overflow:hidden;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.tala-form-field__container:has(.tala-form-field__prefix:not(:empty)){padding-left:0}.tala-form-field__container:has(.tala-form-field__suffix:not(:empty)){padding-right:0}tala-form-field:not(.tala-form-field--disabled,.tala-form-field--readonly) .tala-form-field__container:hover{border-color:var(--tala-sys-color-border-strong)}tala-form-field:not(.tala-form-field--disabled) .tala-form-field__container:focus-within{border-color:var(--tala-sys-color-border-focus);box-shadow:var(--tala-form-field-focus-ring)}.tala-form-field__prefix,.tala-form-field__suffix{display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0 var(--tala-form-field-padding-x);background-color:var(--tala-form-field-prefix-bg);color:var(--tala-form-field-prefix-color);font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;flex-shrink:0}.tala-form-field__prefix{border-right:1px solid var(--tala-form-field-border-color)}.tala-form-field__suffix{border-left:1px solid var(--tala-form-field-border-color)}.tala-form-field__prefix:empty,.tala-form-field__suffix:empty{display:none}tala-form-field [slot=leading-icon],tala-form-field [slot=trailing-icon]{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-form-field-icon-size);height:var(--tala-form-field-icon-size);color:var(--tala-sys-color-text-tertiary)}tala-form-field [slot=leading-icon] svg,tala-form-field [slot=trailing-icon] svg{width:100%;height:100%}.tala-form-field__status-icon{flex-shrink:0;width:var(--tala-form-field-icon-size);height:var(--tala-form-field-icon-size);color:var(--tala-form-field-helper-color)}.tala-form-field__container:has(>[slot=trailing-icon]) .tala-form-field__status-icon{display:none}.tala-form-field__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-form-field__helper-row:has(.tala-form-field__helper:empty){display:none}.tala-form-field__helper{font-family:var(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;color:var(--tala-form-field-helper-color)}tala-form-field.tala-form-field--sm{--tala-form-field-height: 32px;--tala-form-field-padding-x: 10px;--tala-form-field-icon-size: 14px}tala-form-field.tala-form-field--lg{--tala-form-field-height: 48px;--tala-form-field-padding-x: 14px;--tala-form-field-icon-size: 18px;--tala-form-field-border-radius: var(--tala-ref-radius-lg)}tala-form-field.tala-form-field--error{--tala-form-field-bg: var(--tala-sys-color-feedback-danger-bg);--tala-form-field-border-color: var(--tala-sys-color-border-error);--tala-form-field-helper-color: var(--tala-sys-color-feedback-danger-text)}tala-form-field.tala-form-field--success{--tala-form-field-bg: var(--tala-sys-color-feedback-success-bg);--tala-form-field-border-color: var(--tala-sys-color-feedback-success-border);--tala-form-field-helper-color: var(--tala-sys-color-feedback-success-text)}tala-form-field.tala-form-field--warning{--tala-form-field-bg: var(--tala-sys-color-feedback-warning-bg);--tala-form-field-border-color: var(--tala-sys-color-feedback-warning-border);--tala-form-field-helper-color: var(--tala-sys-color-feedback-warning-text)}tala-form-field.tala-form-field--disabled{--tala-form-field-bg: var(--tala-sys-color-surface-sunken);--tala-form-field-label-color: var(--tala-sys-color-text-disabled);--tala-form-field-prefix-color: var(--tala-sys-color-text-disabled);--tala-form-field-helper-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-form-field.tala-form-field--readonly{--tala-form-field-bg: var(--tala-sys-color-surface-sunken)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaFormField, decorators: [{
             type: Component,
-            args: [{ selector: 'tala-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'tala-form-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'hostClasses()',
                     }, providers: [
                         {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TalaInput),
-                            multi: true,
+                            provide: TALA_FORM_FIELD_HOST,
+                            useExisting: TalaFormField,
                         },
-                    ], template: "@if (label()) {\n  <div class=\"tala-input__label-row\">\n    <label class=\"tala-input__label\" [attr.for]=\"_id\">{{ label() }}</label>\n    @if (required()) {\n      <span class=\"tala-input__required\" aria-hidden=\"true\">*</span>\n    }\n  </div>\n}\n\n<div\n  class=\"tala-input__container\"\n  [class.tala-input__container--has-prefix]=\"prefix()\"\n  [class.tala-input__container--has-suffix]=\"suffix()\"\n>\n  @if (prefix()) {\n    <div class=\"tala-input__prefix\">{{ prefix() }}</div>\n  }\n  <ng-content select=\"[slot=leading-icon]\"></ng-content>\n  <input\n    class=\"tala-input__field\"\n    [id]=\"_id\"\n    [type]=\"type()\"\n    [name]=\"name()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"_value()\"\n    [disabled]=\"_isDisabled()\"\n    [attr.readonly]=\"readonly() || null\"\n    [required]=\"required()\"\n    [attr.aria-invalid]=\"status() === 'error' || null\"\n    [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n    (input)=\"_onInput($event)\"\n    (blur)=\"_onBlur()\"\n  />\n  <ng-content select=\"[slot=trailing-icon]\"></ng-content>\n  @if (suffix()) {\n    <div class=\"tala-input__suffix\">{{ suffix() }}</div>\n  }\n</div>\n\n@if (helperText() && !_isDisabled()) {\n  <div class=\"tala-input__helper-row\" [id]=\"_helperId\">\n    <span class=\"tala-input__helper\">{{ helperText() }}</span>\n  </div>\n}\n", styles: ["tala-input{--tala-input-bg: var(--tala-sys-color-surface-default);--tala-input-border-color: var(--tala-sys-color-outline-default);--tala-input-color: var(--tala-sys-color-text-primary);--tala-input-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-input-label-color: var(--tala-sys-color-text-secondary);--tala-input-helper-color: var(--tala-sys-color-text-secondary);--tala-input-prefix-bg: var(--tala-sys-color-surface-sunken);--tala-input-prefix-color: var(--tala-sys-color-text-secondary);--tala-input-required-color: var(--tala-sys-color-brand);--tala-input-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-input-height: 40px;--tala-input-padding-x: 12px;--tala-input-icon-size: 16px;--tala-input-border-radius: var(--radius-md);--tala-input-gap: var(--space-2);display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box}.tala-input__label-row{display:flex;align-items:center;gap:var(--space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-input__label{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-input-label-color);cursor:pointer}.tala-input__required{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-input-required-color)}.tala-input__container{display:flex;align-items:center;gap:var(--tala-input-gap);height:var(--tala-input-height);padding:0 var(--tala-input-padding-x);border:1px solid var(--tala-input-border-color);border-radius:var(--tala-input-border-radius);background-color:var(--tala-input-bg);overflow:hidden;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.tala-input__container--has-prefix{padding-left:0}.tala-input__container--has-suffix{padding-right:0}tala-input:not(.tala-input--disabled,.tala-input--readonly) .tala-input__container:hover{border-color:var(--tala-sys-color-outline-strong)}tala-input:not(.tala-input--disabled) .tala-input__container:focus-within{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-input-focus-ring)}.tala-input__field{flex:1 0 0;min-width:0;height:100%;padding:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-input-color);box-sizing:border-box}.tala-input__field::placeholder{color:var(--tala-input-placeholder-color)}.tala-input__field:disabled{cursor:not-allowed}.tala-input__prefix,.tala-input__suffix{display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0 var(--tala-input-padding-x);background-color:var(--tala-input-prefix-bg);color:var(--tala-input-prefix-color);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);white-space:nowrap;flex-shrink:0}.tala-input__prefix{border-right:1px solid var(--tala-input-border-color)}.tala-input__suffix{border-left:1px solid var(--tala-input-border-color)}tala-input [slot=leading-icon],tala-input [slot=trailing-icon]{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-input-icon-size);height:var(--tala-input-icon-size);color:var(--tala-sys-color-text-tertiary)}tala-input [slot=leading-icon] svg,tala-input [slot=trailing-icon] svg{width:100%;height:100%}.tala-input__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-input__helper{font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-input-helper-color)}tala-input.tala-input--sm{--tala-input-height: 32px;--tala-input-padding-x: 10px;--tala-input-icon-size: 14px}tala-input.tala-input--lg{--tala-input-height: 48px;--tala-input-padding-x: 14px;--tala-input-icon-size: 18px;--tala-input-border-radius: var(--radius-lg)}tala-input.tala-input--error{--tala-input-border-color: var(--tala-sys-color-error-outline);--tala-input-helper-color: var(--tala-sys-color-error-text)}tala-input.tala-input--success{--tala-input-border-color: var(--tala-sys-color-success-outline);--tala-input-helper-color: var(--tala-sys-color-success-text)}tala-input.tala-input--warning{--tala-input-border-color: var(--tala-sys-color-warning-outline);--tala-input-helper-color: var(--tala-sys-color-warning-text)}tala-input.tala-input--disabled{--tala-input-bg: var(--tala-sys-color-surface-sunken);--tala-input-color: var(--tala-sys-color-text-disabled);--tala-input-placeholder-color: var(--tala-sys-color-text-disabled);--tala-input-label-color: var(--tala-sys-color-text-disabled);--tala-input-prefix-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-input.tala-input--readonly{--tala-input-bg: var(--tala-sys-color-surface-sunken)}tala-input.tala-input--readonly .tala-input__field{cursor:default}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
+                    ], template: "<div class=\"tala-form-field__label-row\">\n  <label class=\"tala-form-field__label\" [attr.for]=\"_controlId()\">\n    <ng-content select=\"[slot=label]\"></ng-content>\n  </label>\n  @if (_required()) {\n    <span class=\"tala-form-field__required\" aria-hidden=\"true\">*</span>\n  }\n</div>\n\n<div class=\"tala-form-field__container\">\n  <div class=\"tala-form-field__prefix\">\n    <ng-content select=\"[slot=prefix]\"></ng-content>\n  </div>\n  <ng-content select=\"[slot=leading-icon]\"></ng-content>\n  <ng-content></ng-content>\n  <ng-content select=\"[slot=trailing-icon]\"></ng-content>\n  @if (_status() === 'error' || _status() === 'warning') {\n    <svg\n      class=\"tala-form-field__status-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n        d=\"M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z\"\n      />\n    </svg>\n  }\n  @if (_status() === 'success') {\n    <svg\n      class=\"tala-form-field__status-icon\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n        d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"\n      />\n    </svg>\n  }\n  <div class=\"tala-form-field__suffix\">\n    <ng-content select=\"[slot=suffix]\"></ng-content>\n  </div>\n</div>\n\n<div class=\"tala-form-field__helper-row\" [id]=\"_helperId\">\n  <span class=\"tala-form-field__helper\">\n    <ng-content select=\"[slot=helper]\"></ng-content>\n  </span>\n</div>\n", styles: ["tala-form-field{--tala-form-field-bg: var(--tala-sys-color-surface-default);--tala-form-field-border-color: var(--tala-sys-color-border-default);--tala-form-field-label-color: var(--tala-sys-color-text-secondary);--tala-form-field-helper-color: var(--tala-sys-color-text-secondary);--tala-form-field-prefix-bg: var(--tala-sys-color-surface-sunken);--tala-form-field-prefix-color: var(--tala-sys-color-text-secondary);--tala-form-field-required-color: var(--tala-sys-color-text-accent);--tala-form-field-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-form-field-height: 40px;--tala-form-field-padding-x: 12px;--tala-form-field-icon-size: 16px;--tala-form-field-border-radius: var(--tala-ref-radius-md);--tala-form-field-gap: var(--tala-ref-space-2);display:flex;flex-direction:column;gap:var(--tala-ref-space-1);box-sizing:border-box}.tala-form-field__label-row{display:flex;align-items:center;gap:var(--tala-ref-space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-form-field__label-row:has(.tala-form-field__label:empty){display:none}.tala-form-field__label{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-form-field-label-color);cursor:pointer}.tala-form-field__required{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-form-field-required-color)}.tala-form-field__container{display:flex;align-items:center;gap:var(--tala-form-field-gap);height:var(--tala-form-field-height);padding:0 var(--tala-form-field-padding-x);border:1px solid var(--tala-form-field-border-color);border-radius:var(--tala-form-field-border-radius);background-color:var(--tala-form-field-bg);overflow:hidden;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.tala-form-field__container:has(.tala-form-field__prefix:not(:empty)){padding-left:0}.tala-form-field__container:has(.tala-form-field__suffix:not(:empty)){padding-right:0}tala-form-field:not(.tala-form-field--disabled,.tala-form-field--readonly) .tala-form-field__container:hover{border-color:var(--tala-sys-color-border-strong)}tala-form-field:not(.tala-form-field--disabled) .tala-form-field__container:focus-within{border-color:var(--tala-sys-color-border-focus);box-shadow:var(--tala-form-field-focus-ring)}.tala-form-field__prefix,.tala-form-field__suffix{display:flex;align-items:center;justify-content:center;align-self:stretch;padding:0 var(--tala-form-field-padding-x);background-color:var(--tala-form-field-prefix-bg);color:var(--tala-form-field-prefix-color);font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;white-space:nowrap;flex-shrink:0}.tala-form-field__prefix{border-right:1px solid var(--tala-form-field-border-color)}.tala-form-field__suffix{border-left:1px solid var(--tala-form-field-border-color)}.tala-form-field__prefix:empty,.tala-form-field__suffix:empty{display:none}tala-form-field [slot=leading-icon],tala-form-field [slot=trailing-icon]{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-form-field-icon-size);height:var(--tala-form-field-icon-size);color:var(--tala-sys-color-text-tertiary)}tala-form-field [slot=leading-icon] svg,tala-form-field [slot=trailing-icon] svg{width:100%;height:100%}.tala-form-field__status-icon{flex-shrink:0;width:var(--tala-form-field-icon-size);height:var(--tala-form-field-icon-size);color:var(--tala-form-field-helper-color)}.tala-form-field__container:has(>[slot=trailing-icon]) .tala-form-field__status-icon{display:none}.tala-form-field__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-form-field__helper-row:has(.tala-form-field__helper:empty){display:none}.tala-form-field__helper{font-family:var(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;color:var(--tala-form-field-helper-color)}tala-form-field.tala-form-field--sm{--tala-form-field-height: 32px;--tala-form-field-padding-x: 10px;--tala-form-field-icon-size: 14px}tala-form-field.tala-form-field--lg{--tala-form-field-height: 48px;--tala-form-field-padding-x: 14px;--tala-form-field-icon-size: 18px;--tala-form-field-border-radius: var(--tala-ref-radius-lg)}tala-form-field.tala-form-field--error{--tala-form-field-bg: var(--tala-sys-color-feedback-danger-bg);--tala-form-field-border-color: var(--tala-sys-color-border-error);--tala-form-field-helper-color: var(--tala-sys-color-feedback-danger-text)}tala-form-field.tala-form-field--success{--tala-form-field-bg: var(--tala-sys-color-feedback-success-bg);--tala-form-field-border-color: var(--tala-sys-color-feedback-success-border);--tala-form-field-helper-color: var(--tala-sys-color-feedback-success-text)}tala-form-field.tala-form-field--warning{--tala-form-field-bg: var(--tala-sys-color-feedback-warning-bg);--tala-form-field-border-color: var(--tala-sys-color-feedback-warning-border);--tala-form-field-helper-color: var(--tala-sys-color-feedback-warning-text)}tala-form-field.tala-form-field--disabled{--tala-form-field-bg: var(--tala-sys-color-surface-sunken);--tala-form-field-label-color: var(--tala-sys-color-text-disabled);--tala-form-field-prefix-color: var(--tala-sys-color-text-disabled);--tala-form-field-helper-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-form-field.tala-form-field--readonly{--tala-form-field-bg: var(--tala-sys-color-surface-sunken)}\n"] }]
+        }], propDecorators: { _control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TALA_FORM_FIELD_CONTROL), { isSignal: true }] }] } });
+
+class TalaInput {
+    static _nextId = 0;
+    // Required, not optional: `talaInput` is only ever used inside `tala-form-field`, so a missing
+    // provider here means it's used standalone — fail fast instead of degrading silently.
+    _field = inject(TALA_FORM_FIELD_HOST);
+    id = input(`tala-input-${++TalaInput._nextId}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    _describedBy = computed(() => this._field.helperId(), ...(ngDevMode ? [{ debugName: "_describedBy" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: TalaInput, isStandalone: true, selector: "input[talaInput]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.id": "id()", "disabled": "disabled()", "attr.readonly": "readonly() || null", "required": "required()", "attr.aria-invalid": "status() === \"error\" || null", "attr.aria-describedby": "_describedBy()" }, classAttribute: "tala-input-control" }, providers: [
+            {
+                provide: TALA_FORM_FIELD_CONTROL,
+                useExisting: TalaInput,
+            },
+        ], ngImport: i0, template: '', isInline: true, styles: [".tala-input-control{--tala-input-color: var(--tala-sys-color-text-primary);--tala-input-placeholder-color: var(--tala-sys-color-text-placeholder);flex:1 0 0;min-width:0;height:100%;padding:0;border:none;outline:none;background:transparent;font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-input-color);box-sizing:border-box}.tala-input-control::placeholder{color:var(--tala-input-placeholder-color)}.tala-input-control:disabled{cursor:not-allowed;color:var(--tala-sys-color-text-disabled)}.tala-input-control:disabled::placeholder{color:var(--tala-sys-color-text-disabled)}.tala-input-control:read-only{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[talaInput]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', host: {
+                        class: 'tala-input-control',
+                        '[attr.id]': 'id()',
+                        '[disabled]': 'disabled()',
+                        '[attr.readonly]': 'readonly() || null',
+                        '[required]': 'required()',
+                        '[attr.aria-invalid]': 'status() === "error" || null',
+                        '[attr.aria-describedby]': '_describedBy()',
+                    }, providers: [
+                        {
+                            provide: TALA_FORM_FIELD_CONTROL,
+                            useExisting: TalaInput,
+                        },
+                    ], styles: [".tala-input-control{--tala-input-color: var(--tala-sys-color-text-primary);--tala-input-placeholder-color: var(--tala-sys-color-text-placeholder);flex:1 0 0;min-width:0;height:100%;padding:0;border:none;outline:none;background:transparent;font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-input-color);box-sizing:border-box}.tala-input-control::placeholder{color:var(--tala-input-placeholder-color)}.tala-input-control:disabled{cursor:not-allowed;color:var(--tala-sys-color-text-disabled)}.tala-input-control:disabled::placeholder{color:var(--tala-sys-color-text-disabled)}.tala-input-control:read-only{cursor:default}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+/**
+ * Apply to an `ng-template` projected into `tala-select` to override how each
+ * option is rendered inside the dropdown list.
+ */
+class TalaSelectOptionTemplate {
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaSelectOptionTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TalaSelectOptionTemplate, isStandalone: true, selector: "ng-template[talaSelectOption]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaSelectOptionTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[talaSelectOption]',
+                }]
+        }] });
+/**
+ * Apply to an `ng-template` projected into `tala-select` to override how the
+ * chosen value is rendered — the trigger label for `single`/`searchable`, or
+ * each chip for `multi`.
+ */
+class TalaSelectValueTemplate {
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaSelectValueTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TalaSelectValueTemplate, isStandalone: true, selector: "ng-template[talaSelectValue]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaSelectValueTemplate, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[talaSelectValue]',
+                }]
+        }] });
 
 class TalaSelect {
     static _nextId = 0;
@@ -198,15 +328,14 @@ class TalaSelect {
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     width = input('full', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     _id = `tala-select-${++TalaSelect._nextId}`;
     _helperId = `${this._id}-helper`;
     _listboxId = `${this._id}-listbox`;
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
-    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
     _searchQuery = signal('', ...(ngDevMode ? [{ debugName: "_searchQuery" }] : /* istanbul ignore next */ []));
     _focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_focusedIndex" }] : /* istanbul ignore next */ []));
-    _disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "_disabledByForm" }] : /* istanbul ignore next */ []));
-    _isDisabled = computed(() => this.disabled() || this._disabledByForm(), ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
     _hostWidth = computed(() => {
         const w = this.width();
         if (w === 'full')
@@ -225,36 +354,43 @@ class TalaSelect {
         return opts.filter((o) => o.label.toLowerCase().includes(q));
     }, ...(ngDevMode ? [{ debugName: "_filteredOptions" }] : /* istanbul ignore next */ []));
     _hasValue = computed(() => {
-        const v = this._value();
+        const v = this.value();
         return Array.isArray(v) ? v.length > 0 : v !== '';
     }, ...(ngDevMode ? [{ debugName: "_hasValue" }] : /* istanbul ignore next */ []));
     _displayValue = computed(() => {
-        const v = this._value();
+        const v = this.value();
         const opts = this.options();
         if (this.type() === 'multi') {
             return v.map((val) => opts.find((o) => o.value === val)?.label ?? val).join(', ');
         }
         return opts.find((o) => o.value === v)?.label ?? '';
     }, ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
-    _selectedLabels = computed(() => {
-        const v = this._value();
+    _selectedOption = computed(() => {
+        const v = this.value();
+        if (Array.isArray(v) || !v)
+            return undefined;
+        const opts = this.options();
+        return opts.find((o) => o.value === v) ?? { value: v, label: v };
+    }, ...(ngDevMode ? [{ debugName: "_selectedOption" }] : /* istanbul ignore next */ []));
+    _selectedOptions = computed(() => {
+        const v = this.value();
         const opts = this.options();
         if (!Array.isArray(v))
             return [];
-        return v.map((val) => ({ value: val, label: opts.find((o) => o.value === val)?.label ?? val }));
-    }, ...(ngDevMode ? [{ debugName: "_selectedLabels" }] : /* istanbul ignore next */ []));
+        return v.map((val) => opts.find((o) => o.value === val) ?? { value: val, label: val });
+    }, ...(ngDevMode ? [{ debugName: "_selectedOptions" }] : /* istanbul ignore next */ []));
+    _optionTemplate = contentChild(TalaSelectOptionTemplate, ...(ngDevMode ? [{ debugName: "_optionTemplate" }] : /* istanbul ignore next */ []));
+    _valueTemplate = contentChild(TalaSelectValueTemplate, ...(ngDevMode ? [{ debugName: "_valueTemplate" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => [
         'tala-select',
         `tala-select--${this.size()}`,
         `tala-select--${this.status()}`,
         this._isOpen() ? 'tala-select--open' : '',
-        this._isDisabled() ? 'tala-select--disabled' : '',
+        this.disabled() ? 'tala-select--disabled' : '',
         this.loading() ? 'tala-select--loading' : '',
     ]
         .filter(Boolean)
         .join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    _onChange = () => { };
-    _onTouched = () => { };
     _onDocumentClick(target) {
         if (!this._elementRef.nativeElement.contains(target)) {
             this._isOpen.set(false);
@@ -262,26 +398,13 @@ class TalaSelect {
             this._focusedIndex.set(-1);
         }
     }
-    writeValue(value) {
-        if (this.type() === 'multi') {
-            this._value.set(Array.isArray(value) ? value : value ? [value] : []);
-        }
-        else {
-            this._value.set(typeof value === 'string' ? value : '');
-        }
-    }
-    registerOnChange(fn) {
-        this._onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this._onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this._disabledByForm.set(isDisabled);
+    focus(options) {
+        const trigger = this._elementRef.nativeElement.querySelector('.tala-select__trigger');
+        trigger?.focus(options);
     }
     _onTriggerClick(event) {
         event.stopPropagation();
-        if (this._isDisabled() || this.loading())
+        if (this.disabled() || this.loading())
             return;
         if (this._isOpen()) {
             this._isOpen.set(false);
@@ -293,7 +416,7 @@ class TalaSelect {
         }
     }
     _onTriggerKeydown(event) {
-        if (this._isDisabled() || this.loading())
+        if (this.disabled() || this.loading())
             return;
         switch (event.key) {
             case ' ':
@@ -337,31 +460,28 @@ class TalaSelect {
         if (opt.disabled)
             return;
         if (this.type() === 'multi') {
-            const current = this._value();
+            const current = this.value();
             const idx = current.indexOf(opt.value);
             const next = idx >= 0 ? current.filter((v) => v !== opt.value) : [...current, opt.value];
-            this._value.set(next);
-            this._onChange(next);
+            this.value.set(next);
         }
         else {
-            this._value.set(opt.value);
-            this._onChange(opt.value);
+            this.value.set(opt.value);
             this._isOpen.set(false);
             this._searchQuery.set('');
             this._focusedIndex.set(-1);
         }
-        this._onTouched();
+        this.touched.set(true);
     }
     _removeChip(value, event) {
         event.stopPropagation();
-        const current = this._value();
+        const current = this.value();
         const next = current.filter((v) => v !== value);
-        this._value.set(next);
-        this._onChange(next);
-        this._onTouched();
+        this.value.set(next);
+        this.touched.set(true);
     }
     _isSelected(value) {
-        const v = this._value();
+        const v = this.value();
         return Array.isArray(v) ? v.includes(value) : v === value;
     }
     _onSearchInput(event) {
@@ -398,32 +518,172 @@ class TalaSelect {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TalaSelect, isStandalone: true, selector: "tala-select", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "_onDocumentClick($event.target)" }, properties: { "class": "hostClasses()", "style.width": "_hostWidth()" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => TalaSelect),
-                multi: true,
-            },
-        ], ngImport: i0, template: "@if (label()) {\n  <div class=\"tala-select__label-row\">\n    <label class=\"tala-select__label\" [attr.for]=\"_id\">{{ label() }}</label>\n    @if (required()) {\n      <span class=\"tala-select__required\" aria-hidden=\"true\">*</span>\n    }\n  </div>\n}\n\n<div\n  class=\"tala-select__trigger\"\n  [id]=\"_id\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-expanded]=\"_isOpen()\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-required]=\"required() || null\"\n  [attr.aria-disabled]=\"_isDisabled() || null\"\n  [attr.aria-invalid]=\"status() === 'error' || null\"\n  [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n  (click)=\"_onTriggerClick($event)\"\n  (keydown)=\"_onTriggerKeydown($event)\"\n>\n  <div class=\"tala-select__trigger-content\">\n    @if (type() === 'multi' && _hasValue()) {\n      <div class=\"tala-select__chips\">\n        @for (chip of _selectedLabels(); track chip.value) {\n          <span class=\"tala-select__chip\">\n            {{ chip.label }}\n            <button\n              class=\"tala-select__chip-remove\"\n              type=\"button\"\n              aria-label=\"Remove {{ chip.label }}\"\n              (click)=\"_removeChip(chip.value, $event)\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n                <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n              </svg>\n            </button>\n          </span>\n        }\n      </div>\n    } @else if (type() === 'searchable' && _isOpen()) {\n      <input\n        class=\"tala-select__search\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"placeholder() || 'Search...'\"\n        [value]=\"_searchQuery()\"\n        (input)=\"_onSearchInput($event)\"\n        (keydown)=\"_onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    } @else {\n      <span class=\"tala-select__value\" [class.tala-select__value--placeholder]=\"!_hasValue()\">\n        {{ _hasValue() ? _displayValue() : placeholder() }}\n      </span>\n    }\n  </div>\n\n  <span class=\"tala-select__trailing\">\n    @if (loading()) {\n      <svg\n        class=\"tala-select__spinner\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n      </svg>\n    } @else {\n      <svg\n        class=\"tala-select__chevron\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M4 6l4 4 4-4\" />\n      </svg>\n    }\n  </span>\n</div>\n\n@if (_isOpen() && !_isDisabled() && !loading()) {\n  <div\n    class=\"tala-select__dropdown\"\n    role=\"listbox\"\n    [id]=\"_listboxId\"\n    [attr.aria-multiselectable]=\"type() === 'multi' || null\"\n    (click)=\"_onDropdownClick($event)\"\n  >\n    @for (opt of _filteredOptions(); track opt.value; let i = $index) {\n      <div\n        class=\"tala-select__option\"\n        [class.tala-select__option--selected]=\"_isSelected(opt.value)\"\n        [class.tala-select__option--disabled]=\"opt.disabled\"\n        [class.tala-select__option--focused]=\"_focusedIndex() === i\"\n        role=\"option\"\n        [attr.aria-selected]=\"_isSelected(opt.value)\"\n        [attr.aria-disabled]=\"opt.disabled || null\"\n        (click)=\"_selectOption(opt, $event)\"\n      >\n        @if (type() === 'multi') {\n          <span class=\"tala-select__checkbox\" aria-hidden=\"true\">\n            @if (_isSelected(opt.value)) {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                <path d=\"M3 8.5L6.5 12 13 5\" />\n              </svg>\n            }\n          </span>\n        }\n        <span class=\"tala-select__option-label\">{{ opt.label }}</span>\n        @if (type() === 'single' && _isSelected(opt.value)) {\n          <svg\n            class=\"tala-select__option-check\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M3 8.5L6.5 12 13 5\" />\n          </svg>\n        }\n      </div>\n    } @empty {\n      <div class=\"tala-select__empty\">No options found</div>\n    }\n  </div>\n}\n\n@if (helperText() && !_isDisabled()) {\n  <div class=\"tala-select__helper-row\" [id]=\"_helperId\">\n    <span class=\"tala-select__helper\">{{ helperText() }}</span>\n  </div>\n}\n", styles: ["tala-select{--tala-select-bg: var(--tala-sys-color-surface-default);--tala-select-border-color: var(--tala-sys-color-outline-default);--tala-select-color: var(--tala-sys-color-text-primary);--tala-select-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-select-label-color: var(--tala-sys-color-text-secondary);--tala-select-helper-color: var(--tala-sys-color-text-secondary);--tala-select-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-select-height: 40px;--tala-select-padding-x: 12px;--tala-select-gap: var(--space-2);--tala-select-icon-size: 16px;--tala-select-border-radius: var(--radius-md);position:relative;display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box}.tala-select__label-row{display:flex;align-items:center;gap:var(--space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-select__label{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-select-label-color);cursor:pointer}.tala-select__required{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-sys-color-brand)}.tala-select__trigger{display:flex;align-items:center;gap:var(--tala-select-gap);min-height:var(--tala-select-height);padding:4px var(--tala-select-padding-x);border:1px solid var(--tala-select-border-color);border-radius:var(--tala-select-border-radius);background-color:var(--tala-select-bg);overflow:hidden;box-sizing:border-box;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.tala-select__trigger:focus-visible{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-select-focus-ring)}tala-select:not(.tala-select--disabled,.tala-select--loading) .tala-select__trigger:hover{border-color:var(--tala-sys-color-outline-strong)}tala-select.tala-select--open .tala-select__trigger{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-select-focus-ring)}.tala-select__trigger-content{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap;overflow:hidden}.tala-select__value{font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tala-select__value--placeholder{color:var(--tala-select-placeholder-color)}.tala-select__search{flex:1 0 0;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);padding:0;box-sizing:border-box}.tala-select__search::placeholder{color:var(--tala-select-placeholder-color)}.tala-select__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-text-tertiary)}.tala-select__chevron{width:100%;height:100%;transition:transform .15s ease}tala-select.tala-select--open .tala-select__chevron{transform:rotate(180deg)}@keyframes tala-spin{to{transform:rotate(360deg)}}.tala-select__spinner{width:100%;height:100%;animation:tala-spin .7s linear infinite;transform-origin:center}.tala-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:var(--tala-sys-color-surface-raised);border:1px solid var(--tala-sys-color-outline-default);border-radius:var(--tala-select-border-radius);box-shadow:var(--shadow-md);max-height:240px;overflow-y:auto;z-index:1000;box-sizing:border-box;padding:var(--space-1) 0}.tala-select__option{display:flex;align-items:center;gap:var(--space-2);padding:8px var(--tala-select-padding-x);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);cursor:pointer;transition:background-color .1s ease}.tala-select__option:hover,.tala-select__option--focused{background-color:var(--tala-sys-color-surface-sunken)}.tala-select__option--selected{color:var(--tala-sys-color-brand);font-weight:var(--font-weight-medium)}.tala-select__option--disabled{color:var(--tala-sys-color-text-disabled);cursor:not-allowed}.tala-select__option--disabled:hover{background-color:transparent}.tala-select__option-label{flex:1 0 0;min-width:0}.tala-select__option-check{flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-brand)}.tala-select__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--tala-sys-color-outline-default);border-radius:4px;color:var(--tala-sys-color-brand);box-sizing:border-box;transition:background-color .1s ease,border-color .1s ease}.tala-select__checkbox svg{width:10px;height:10px;display:none}.tala-select__option--selected .tala-select__checkbox{background-color:var(--tala-sys-color-brand);border-color:var(--tala-sys-color-brand)}.tala-select__option--selected .tala-select__checkbox svg{display:block;color:#fff;stroke:#fff;fill:none;stroke-width:2}.tala-select__empty{padding:8px var(--tala-select-padding-x);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);color:var(--tala-sys-color-text-tertiary);text-align:center}.tala-select__chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}.tala-select__chip{display:inline-flex;align-items:center;gap:4px;padding:0 6px;height:20px;background-color:var(--tala-sys-color-surface-sunken);border:1px solid var(--tala-sys-color-outline-default);border-radius:4px;font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);white-space:nowrap}.tala-select__chip-remove{display:flex;align-items:center;justify-content:center;width:12px;height:12px;padding:0;border:none;background:transparent;color:var(--tala-sys-color-text-tertiary);cursor:pointer;border-radius:2px;flex-shrink:0}.tala-select__chip-remove svg{width:8px;height:8px}.tala-select__chip-remove:hover{color:var(--tala-sys-color-text-primary)}.tala-select__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-select__helper{font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-select-helper-color)}tala-select.tala-select--sm{--tala-select-height: 32px;--tala-select-padding-x: 10px;--tala-select-gap: 6px;--tala-select-icon-size: 14px}tala-select.tala-select--lg{--tala-select-height: 48px;--tala-select-padding-x: 14px;--tala-select-icon-size: 18px;--tala-select-border-radius: var(--radius-lg)}tala-select.tala-select--error{--tala-select-bg: var(--tala-sys-color-error-surface);--tala-select-border-color: var(--tala-sys-color-error-outline);--tala-select-helper-color: var(--tala-sys-color-error-text)}tala-select.tala-select--success{--tala-select-bg: var(--tala-sys-color-success-surface);--tala-select-border-color: var(--tala-sys-color-success-outline);--tala-select-helper-color: var(--tala-sys-color-success-text)}tala-select.tala-select--disabled{--tala-select-bg: var(--tala-sys-color-surface-sunken);--tala-select-color: var(--tala-sys-color-text-disabled);--tala-select-placeholder-color: var(--tala-sys-color-text-disabled);--tala-select-label-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-select.tala-select--disabled .tala-select__trigger{cursor:not-allowed}tala-select.tala-select--loading .tala-select__trigger{cursor:wait;pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TalaSelect, isStandalone: true, selector: "tala-select", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", 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 }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { listeners: { "document:click": "_onDocumentClick($event.target)" }, properties: { "class": "hostClasses()", "style.width": "_hostWidth()" } }, queries: [{ propertyName: "_optionTemplate", first: true, predicate: TalaSelectOptionTemplate, descendants: true, isSignal: true }, { propertyName: "_valueTemplate", first: true, predicate: TalaSelectValueTemplate, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <div class=\"tala-select__label-row\">\n    <label class=\"tala-select__label\" [attr.for]=\"_id\">{{ label() }}</label>\n    @if (required()) {\n      <span class=\"tala-select__required\" aria-hidden=\"true\">*</span>\n    }\n  </div>\n}\n\n<div\n  class=\"tala-select__trigger\"\n  [id]=\"_id\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-expanded]=\"_isOpen()\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-required]=\"required() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"status() === 'error' || null\"\n  [attr.aria-describedby]=\"helperText() && !disabled() ? _helperId : null\"\n  (click)=\"_onTriggerClick($event)\"\n  (keydown)=\"_onTriggerKeydown($event)\"\n>\n  <div class=\"tala-select__trigger-content\">\n    @if (type() === 'multi' && _hasValue()) {\n      <div class=\"tala-select__chips\">\n        @for (chip of _selectedOptions(); track chip.value) {\n          <span class=\"tala-select__chip\">\n            @if (_valueTemplate(); as valueTpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"valueTpl.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: chip }\"\n              ></ng-container>\n            } @else {\n              {{ chip.label }}\n            }\n            <button\n              class=\"tala-select__chip-remove\"\n              type=\"button\"\n              aria-label=\"Remove {{ chip.label }}\"\n              (click)=\"_removeChip(chip.value, $event)\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n                <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n              </svg>\n            </button>\n          </span>\n        }\n      </div>\n    } @else if (type() === 'searchable' && _isOpen()) {\n      <input\n        class=\"tala-select__search\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"placeholder() || 'Search...'\"\n        [value]=\"_searchQuery()\"\n        (input)=\"_onSearchInput($event)\"\n        (keydown)=\"_onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    } @else {\n      <span class=\"tala-select__value\" [class.tala-select__value--placeholder]=\"!_hasValue()\">\n        @if (_hasValue()) {\n          @if (_valueTemplate(); as valueTpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"valueTpl.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: _selectedOption() }\"\n            ></ng-container>\n          } @else {\n            {{ _displayValue() }}\n          }\n        } @else {\n          {{ placeholder() }}\n        }\n      </span>\n    }\n  </div>\n\n  <span class=\"tala-select__trailing\">\n    @if (loading()) {\n      <svg\n        class=\"tala-select__spinner\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n      </svg>\n    } @else {\n      <svg\n        class=\"tala-select__chevron\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M4 6l4 4 4-4\" />\n      </svg>\n    }\n  </span>\n</div>\n\n@if (_isOpen() && !disabled() && !loading()) {\n  <div\n    class=\"tala-select__dropdown\"\n    role=\"listbox\"\n    [id]=\"_listboxId\"\n    [attr.aria-multiselectable]=\"type() === 'multi' || null\"\n    (click)=\"_onDropdownClick($event)\"\n  >\n    @for (opt of _filteredOptions(); track opt.value; let i = $index) {\n      <div\n        class=\"tala-select__option\"\n        [class.tala-select__option--selected]=\"_isSelected(opt.value)\"\n        [class.tala-select__option--disabled]=\"opt.disabled\"\n        [class.tala-select__option--focused]=\"_focusedIndex() === i\"\n        role=\"option\"\n        [attr.aria-selected]=\"_isSelected(opt.value)\"\n        [attr.aria-disabled]=\"opt.disabled || null\"\n        (click)=\"_selectOption(opt, $event)\"\n      >\n        @if (_optionTemplate(); as optionTpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionTpl.templateRef\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: opt,\n              selected: _isSelected(opt.value),\n              focused: _focusedIndex() === i,\n            }\"\n          ></ng-container>\n        } @else {\n          @if (type() === 'multi') {\n            <span class=\"tala-select__checkbox\" aria-hidden=\"true\">\n              @if (_isSelected(opt.value)) {\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                  <path d=\"M3 8.5L6.5 12 13 5\" />\n                </svg>\n              }\n            </span>\n          }\n          <span class=\"tala-select__option-label\">{{ opt.label }}</span>\n          @if (type() === 'single' && _isSelected(opt.value)) {\n            <svg\n              class=\"tala-select__option-check\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M3 8.5L6.5 12 13 5\" />\n            </svg>\n          }\n        }\n      </div>\n    } @empty {\n      <div class=\"tala-select__empty\">No options found</div>\n    }\n  </div>\n}\n\n@if (helperText() && !disabled()) {\n  <div class=\"tala-select__helper-row\" [id]=\"_helperId\">\n    <span class=\"tala-select__helper\">{{ helperText() }}</span>\n  </div>\n}\n", styles: ["tala-select{--tala-select-bg: var(--tala-sys-color-surface-default);--tala-select-border-color: var(--tala-sys-color-border-default);--tala-select-color: var(--tala-sys-color-text-primary);--tala-select-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-select-label-color: var(--tala-sys-color-text-secondary);--tala-select-helper-color: var(--tala-sys-color-text-secondary);--tala-select-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-select-height: 40px;--tala-select-padding-x: 12px;--tala-select-gap: var(--tala-ref-space-2);--tala-select-icon-size: 16px;--tala-select-border-radius: var(--tala-ref-radius-md);position:relative;display:flex;flex-direction:column;gap:var(--tala-ref-space-1);box-sizing:border-box}.tala-select__label-row{display:flex;align-items:center;gap:var(--tala-ref-space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-select__label{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-select-label-color);cursor:pointer}.tala-select__required{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-sys-color-text-accent)}.tala-select__trigger{display:flex;align-items:center;gap:var(--tala-select-gap);min-height:var(--tala-select-height);padding:4px var(--tala-select-padding-x);border:1px solid var(--tala-select-border-color);border-radius:var(--tala-select-border-radius);background-color:var(--tala-select-bg);overflow:hidden;box-sizing:border-box;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.tala-select__trigger:focus-visible{border-color:var(--tala-sys-color-border-focus);box-shadow:var(--tala-select-focus-ring)}tala-select:not(.tala-select--disabled,.tala-select--loading) .tala-select__trigger:hover{border-color:var(--tala-sys-color-border-strong)}tala-select.tala-select--open .tala-select__trigger{border-color:var(--tala-sys-color-border-focus);box-shadow:var(--tala-select-focus-ring)}.tala-select__trigger-content{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:var(--tala-ref-space-1);flex-wrap:wrap;overflow:hidden}.tala-select__value{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-select-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tala-select__value--placeholder{color:var(--tala-select-placeholder-color)}.tala-select__search{flex:1 0 0;min-width:0;border:none;outline:none;background:transparent;font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-select-color);padding:0;box-sizing:border-box}.tala-select__search::placeholder{color:var(--tala-select-placeholder-color)}.tala-select__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-text-tertiary)}.tala-select__chevron{width:100%;height:100%;transition:transform .15s ease}tala-select.tala-select--open .tala-select__chevron{transform:rotate(180deg)}@keyframes tala-spin{to{transform:rotate(360deg)}}.tala-select__spinner{width:100%;height:100%;animation:tala-spin .7s linear infinite;transform-origin:center}.tala-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:var(--tala-sys-color-surface-raised);border:1px solid var(--tala-sys-color-border-default);border-radius:var(--tala-select-border-radius);box-shadow:var(--tala-ref-shadow-md);max-height:240px;overflow-y:auto;z-index:1000;box-sizing:border-box;padding:var(--tala-ref-space-1) 0}.tala-select__option{display:flex;align-items:center;gap:var(--tala-ref-space-2);padding:8px var(--tala-select-padding-x);font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-select-color);cursor:pointer;transition:background-color .1s ease}.tala-select__option:hover,.tala-select__option--focused{background-color:var(--tala-sys-color-surface-sunken)}.tala-select__option--selected{color:var(--tala-sys-color-text-accent);font-weight:500}.tala-select__option--disabled{color:var(--tala-sys-color-text-disabled);cursor:not-allowed}.tala-select__option--disabled:hover{background-color:transparent}.tala-select__option-label{flex:1 0 0;min-width:0}.tala-select__option-check{flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-text-accent)}.tala-select__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--tala-sys-color-border-default);border-radius:4px;color:var(--tala-sys-color-text-accent);box-sizing:border-box;transition:background-color .1s ease,border-color .1s ease}.tala-select__checkbox svg{width:10px;height:10px;display:none}.tala-select__option--selected .tala-select__checkbox{background-color:var(--tala-sys-color-text-accent);border-color:var(--tala-sys-color-text-accent)}.tala-select__option--selected .tala-select__checkbox svg{display:block;color:#fff;stroke:#fff;fill:none;stroke-width:2}.tala-select__empty{padding:8px var(--tala-select-padding-x);font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;color:var(--tala-sys-color-text-tertiary);text-align:center}.tala-select__chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}.tala-select__chip{display:inline-flex;align-items:center;gap:4px;padding:0 6px;height:20px;background-color:var(--tala-sys-color-surface-sunken);border:1px solid var(--tala-sys-color-border-default);border-radius:4px;font-family:var(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;color:var(--tala-select-color);white-space:nowrap}.tala-select__chip-remove{display:flex;align-items:center;justify-content:center;width:12px;height:12px;padding:0;border:none;background:transparent;color:var(--tala-sys-color-text-tertiary);cursor:pointer;border-radius:2px;flex-shrink:0}.tala-select__chip-remove svg{width:8px;height:8px}.tala-select__chip-remove:hover{color:var(--tala-sys-color-text-primary)}.tala-select__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-select__helper{font-family:var(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;color:var(--tala-select-helper-color)}tala-select.tala-select--sm{--tala-select-height: 32px;--tala-select-padding-x: 10px;--tala-select-gap: 6px;--tala-select-icon-size: 14px}tala-select.tala-select--lg{--tala-select-height: 48px;--tala-select-padding-x: 14px;--tala-select-icon-size: 18px;--tala-select-border-radius: var(--tala-ref-radius-lg)}tala-select.tala-select--error{--tala-select-bg: var(--tala-sys-color-feedback-danger-bg);--tala-select-border-color: var(--tala-sys-color-border-error);--tala-select-helper-color: var(--tala-sys-color-feedback-danger-text)}tala-select.tala-select--success{--tala-select-bg: var(--tala-sys-color-feedback-success-bg);--tala-select-border-color: var(--tala-sys-color-feedback-success-border);--tala-select-helper-color: var(--tala-sys-color-feedback-success-text)}tala-select.tala-select--disabled{--tala-select-bg: var(--tala-sys-color-surface-sunken);--tala-select-color: var(--tala-sys-color-text-disabled);--tala-select-placeholder-color: var(--tala-sys-color-text-disabled);--tala-select-label-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-select.tala-select--disabled .tala-select__trigger{cursor:not-allowed}tala-select.tala-select--loading .tala-select__trigger{cursor:wait;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TalaSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaSelect, decorators: [{
             type: Component,
-            args: [{ selector: 'tala-select', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'tala-select', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], host: {
                         '[class]': 'hostClasses()',
                         '[style.width]': '_hostWidth()',
-                    }, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => TalaSelect),
-                            multi: true,
-                        },
-                    ], template: "@if (label()) {\n  <div class=\"tala-select__label-row\">\n    <label class=\"tala-select__label\" [attr.for]=\"_id\">{{ label() }}</label>\n    @if (required()) {\n      <span class=\"tala-select__required\" aria-hidden=\"true\">*</span>\n    }\n  </div>\n}\n\n<div\n  class=\"tala-select__trigger\"\n  [id]=\"_id\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-expanded]=\"_isOpen()\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-required]=\"required() || null\"\n  [attr.aria-disabled]=\"_isDisabled() || null\"\n  [attr.aria-invalid]=\"status() === 'error' || null\"\n  [attr.aria-describedby]=\"helperText() && !_isDisabled() ? _helperId : null\"\n  (click)=\"_onTriggerClick($event)\"\n  (keydown)=\"_onTriggerKeydown($event)\"\n>\n  <div class=\"tala-select__trigger-content\">\n    @if (type() === 'multi' && _hasValue()) {\n      <div class=\"tala-select__chips\">\n        @for (chip of _selectedLabels(); track chip.value) {\n          <span class=\"tala-select__chip\">\n            {{ chip.label }}\n            <button\n              class=\"tala-select__chip-remove\"\n              type=\"button\"\n              aria-label=\"Remove {{ chip.label }}\"\n              (click)=\"_removeChip(chip.value, $event)\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n                <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n              </svg>\n            </button>\n          </span>\n        }\n      </div>\n    } @else if (type() === 'searchable' && _isOpen()) {\n      <input\n        class=\"tala-select__search\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"placeholder() || 'Search...'\"\n        [value]=\"_searchQuery()\"\n        (input)=\"_onSearchInput($event)\"\n        (keydown)=\"_onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    } @else {\n      <span class=\"tala-select__value\" [class.tala-select__value--placeholder]=\"!_hasValue()\">\n        {{ _hasValue() ? _displayValue() : placeholder() }}\n      </span>\n    }\n  </div>\n\n  <span class=\"tala-select__trailing\">\n    @if (loading()) {\n      <svg\n        class=\"tala-select__spinner\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n      </svg>\n    } @else {\n      <svg\n        class=\"tala-select__chevron\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M4 6l4 4 4-4\" />\n      </svg>\n    }\n  </span>\n</div>\n\n@if (_isOpen() && !_isDisabled() && !loading()) {\n  <div\n    class=\"tala-select__dropdown\"\n    role=\"listbox\"\n    [id]=\"_listboxId\"\n    [attr.aria-multiselectable]=\"type() === 'multi' || null\"\n    (click)=\"_onDropdownClick($event)\"\n  >\n    @for (opt of _filteredOptions(); track opt.value; let i = $index) {\n      <div\n        class=\"tala-select__option\"\n        [class.tala-select__option--selected]=\"_isSelected(opt.value)\"\n        [class.tala-select__option--disabled]=\"opt.disabled\"\n        [class.tala-select__option--focused]=\"_focusedIndex() === i\"\n        role=\"option\"\n        [attr.aria-selected]=\"_isSelected(opt.value)\"\n        [attr.aria-disabled]=\"opt.disabled || null\"\n        (click)=\"_selectOption(opt, $event)\"\n      >\n        @if (type() === 'multi') {\n          <span class=\"tala-select__checkbox\" aria-hidden=\"true\">\n            @if (_isSelected(opt.value)) {\n              <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                <path d=\"M3 8.5L6.5 12 13 5\" />\n              </svg>\n            }\n          </span>\n        }\n        <span class=\"tala-select__option-label\">{{ opt.label }}</span>\n        @if (type() === 'single' && _isSelected(opt.value)) {\n          <svg\n            class=\"tala-select__option-check\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <path d=\"M3 8.5L6.5 12 13 5\" />\n          </svg>\n        }\n      </div>\n    } @empty {\n      <div class=\"tala-select__empty\">No options found</div>\n    }\n  </div>\n}\n\n@if (helperText() && !_isDisabled()) {\n  <div class=\"tala-select__helper-row\" [id]=\"_helperId\">\n    <span class=\"tala-select__helper\">{{ helperText() }}</span>\n  </div>\n}\n", styles: ["tala-select{--tala-select-bg: var(--tala-sys-color-surface-default);--tala-select-border-color: var(--tala-sys-color-outline-default);--tala-select-color: var(--tala-sys-color-text-primary);--tala-select-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-select-label-color: var(--tala-sys-color-text-secondary);--tala-select-helper-color: var(--tala-sys-color-text-secondary);--tala-select-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-select-height: 40px;--tala-select-padding-x: 12px;--tala-select-gap: var(--space-2);--tala-select-icon-size: 16px;--tala-select-border-radius: var(--radius-md);position:relative;display:flex;flex-direction:column;gap:var(--space-1);box-sizing:border-box}.tala-select__label-row{display:flex;align-items:center;gap:var(--space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-select__label{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-select-label-color);cursor:pointer}.tala-select__required{font-family:var(--font-body);font-size:var(--text-label-large-size);line-height:var(--text-label-large-height);font-weight:var(--font-weight-medium);color:var(--tala-sys-color-brand)}.tala-select__trigger{display:flex;align-items:center;gap:var(--tala-select-gap);min-height:var(--tala-select-height);padding:4px var(--tala-select-padding-x);border:1px solid var(--tala-select-border-color);border-radius:var(--tala-select-border-radius);background-color:var(--tala-select-bg);overflow:hidden;box-sizing:border-box;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.tala-select__trigger:focus-visible{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-select-focus-ring)}tala-select:not(.tala-select--disabled,.tala-select--loading) .tala-select__trigger:hover{border-color:var(--tala-sys-color-outline-strong)}tala-select.tala-select--open .tala-select__trigger{border-color:var(--tala-sys-color-outline-focus);box-shadow:var(--tala-select-focus-ring)}.tala-select__trigger-content{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap;overflow:hidden}.tala-select__value{font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tala-select__value--placeholder{color:var(--tala-select-placeholder-color)}.tala-select__search{flex:1 0 0;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);padding:0;box-sizing:border-box}.tala-select__search::placeholder{color:var(--tala-select-placeholder-color)}.tala-select__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-text-tertiary)}.tala-select__chevron{width:100%;height:100%;transition:transform .15s ease}tala-select.tala-select--open .tala-select__chevron{transform:rotate(180deg)}@keyframes tala-spin{to{transform:rotate(360deg)}}.tala-select__spinner{width:100%;height:100%;animation:tala-spin .7s linear infinite;transform-origin:center}.tala-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:var(--tala-sys-color-surface-raised);border:1px solid var(--tala-sys-color-outline-default);border-radius:var(--tala-select-border-radius);box-shadow:var(--shadow-md);max-height:240px;overflow-y:auto;z-index:1000;box-sizing:border-box;padding:var(--space-1) 0}.tala-select__option{display:flex;align-items:center;gap:var(--space-2);padding:8px var(--tala-select-padding-x);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);cursor:pointer;transition:background-color .1s ease}.tala-select__option:hover,.tala-select__option--focused{background-color:var(--tala-sys-color-surface-sunken)}.tala-select__option--selected{color:var(--tala-sys-color-brand);font-weight:var(--font-weight-medium)}.tala-select__option--disabled{color:var(--tala-sys-color-text-disabled);cursor:not-allowed}.tala-select__option--disabled:hover{background-color:transparent}.tala-select__option-label{flex:1 0 0;min-width:0}.tala-select__option-check{flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-brand)}.tala-select__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--tala-sys-color-outline-default);border-radius:4px;color:var(--tala-sys-color-brand);box-sizing:border-box;transition:background-color .1s ease,border-color .1s ease}.tala-select__checkbox svg{width:10px;height:10px;display:none}.tala-select__option--selected .tala-select__checkbox{background-color:var(--tala-sys-color-brand);border-color:var(--tala-sys-color-brand)}.tala-select__option--selected .tala-select__checkbox svg{display:block;color:#fff;stroke:#fff;fill:none;stroke-width:2}.tala-select__empty{padding:8px var(--tala-select-padding-x);font-family:var(--font-body);font-size:var(--text-body-small-size);line-height:var(--text-body-small-height);color:var(--tala-sys-color-text-tertiary);text-align:center}.tala-select__chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}.tala-select__chip{display:inline-flex;align-items:center;gap:4px;padding:0 6px;height:20px;background-color:var(--tala-sys-color-surface-sunken);border:1px solid var(--tala-sys-color-outline-default);border-radius:4px;font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-select-color);white-space:nowrap}.tala-select__chip-remove{display:flex;align-items:center;justify-content:center;width:12px;height:12px;padding:0;border:none;background:transparent;color:var(--tala-sys-color-text-tertiary);cursor:pointer;border-radius:2px;flex-shrink:0}.tala-select__chip-remove svg{width:8px;height:8px}.tala-select__chip-remove:hover{color:var(--tala-sys-color-text-primary)}.tala-select__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-select__helper{font-family:var(--font-body);font-size:var(--text-caption-large-size);line-height:var(--text-caption-large-height);font-weight:var(--font-weight-regular);color:var(--tala-select-helper-color)}tala-select.tala-select--sm{--tala-select-height: 32px;--tala-select-padding-x: 10px;--tala-select-gap: 6px;--tala-select-icon-size: 14px}tala-select.tala-select--lg{--tala-select-height: 48px;--tala-select-padding-x: 14px;--tala-select-icon-size: 18px;--tala-select-border-radius: var(--radius-lg)}tala-select.tala-select--error{--tala-select-bg: var(--tala-sys-color-error-surface);--tala-select-border-color: var(--tala-sys-color-error-outline);--tala-select-helper-color: var(--tala-sys-color-error-text)}tala-select.tala-select--success{--tala-select-bg: var(--tala-sys-color-success-surface);--tala-select-border-color: var(--tala-sys-color-success-outline);--tala-select-helper-color: var(--tala-sys-color-success-text)}tala-select.tala-select--disabled{--tala-select-bg: var(--tala-sys-color-surface-sunken);--tala-select-color: var(--tala-sys-color-text-disabled);--tala-select-placeholder-color: var(--tala-sys-color-text-disabled);--tala-select-label-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-select.tala-select--disabled .tala-select__trigger{cursor:not-allowed}tala-select.tala-select--loading .tala-select__trigger{cursor:wait;pointer-events:none}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _onDocumentClick: [{
+                    }, template: "@if (label()) {\n  <div class=\"tala-select__label-row\">\n    <label class=\"tala-select__label\" [attr.for]=\"_id\">{{ label() }}</label>\n    @if (required()) {\n      <span class=\"tala-select__required\" aria-hidden=\"true\">*</span>\n    }\n  </div>\n}\n\n<div\n  class=\"tala-select__trigger\"\n  [id]=\"_id\"\n  role=\"combobox\"\n  tabindex=\"0\"\n  [attr.aria-expanded]=\"_isOpen()\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-required]=\"required() || null\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  [attr.aria-invalid]=\"status() === 'error' || null\"\n  [attr.aria-describedby]=\"helperText() && !disabled() ? _helperId : null\"\n  (click)=\"_onTriggerClick($event)\"\n  (keydown)=\"_onTriggerKeydown($event)\"\n>\n  <div class=\"tala-select__trigger-content\">\n    @if (type() === 'multi' && _hasValue()) {\n      <div class=\"tala-select__chips\">\n        @for (chip of _selectedOptions(); track chip.value) {\n          <span class=\"tala-select__chip\">\n            @if (_valueTemplate(); as valueTpl) {\n              <ng-container\n                [ngTemplateOutlet]=\"valueTpl.templateRef\"\n                [ngTemplateOutletContext]=\"{ $implicit: chip }\"\n              ></ng-container>\n            } @else {\n              {{ chip.label }}\n            }\n            <button\n              class=\"tala-select__chip-remove\"\n              type=\"button\"\n              aria-label=\"Remove {{ chip.label }}\"\n              (click)=\"_removeChip(chip.value, $event)\"\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n              >\n                <line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\" />\n                <line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\" />\n              </svg>\n            </button>\n          </span>\n        }\n      </div>\n    } @else if (type() === 'searchable' && _isOpen()) {\n      <input\n        class=\"tala-select__search\"\n        type=\"text\"\n        autocomplete=\"off\"\n        [placeholder]=\"placeholder() || 'Search...'\"\n        [value]=\"_searchQuery()\"\n        (input)=\"_onSearchInput($event)\"\n        (keydown)=\"_onSearchKeydown($event)\"\n        (click)=\"$event.stopPropagation()\"\n      />\n    } @else {\n      <span class=\"tala-select__value\" [class.tala-select__value--placeholder]=\"!_hasValue()\">\n        @if (_hasValue()) {\n          @if (_valueTemplate(); as valueTpl) {\n            <ng-container\n              [ngTemplateOutlet]=\"valueTpl.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: _selectedOption() }\"\n            ></ng-container>\n          } @else {\n            {{ _displayValue() }}\n          }\n        } @else {\n          {{ placeholder() }}\n        }\n      </span>\n    }\n  </div>\n\n  <span class=\"tala-select__trailing\">\n    @if (loading()) {\n      <svg\n        class=\"tala-select__spinner\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 12a9 9 0 1 1-6.219-8.56\" />\n      </svg>\n    } @else {\n      <svg\n        class=\"tala-select__chevron\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M4 6l4 4 4-4\" />\n      </svg>\n    }\n  </span>\n</div>\n\n@if (_isOpen() && !disabled() && !loading()) {\n  <div\n    class=\"tala-select__dropdown\"\n    role=\"listbox\"\n    [id]=\"_listboxId\"\n    [attr.aria-multiselectable]=\"type() === 'multi' || null\"\n    (click)=\"_onDropdownClick($event)\"\n  >\n    @for (opt of _filteredOptions(); track opt.value; let i = $index) {\n      <div\n        class=\"tala-select__option\"\n        [class.tala-select__option--selected]=\"_isSelected(opt.value)\"\n        [class.tala-select__option--disabled]=\"opt.disabled\"\n        [class.tala-select__option--focused]=\"_focusedIndex() === i\"\n        role=\"option\"\n        [attr.aria-selected]=\"_isSelected(opt.value)\"\n        [attr.aria-disabled]=\"opt.disabled || null\"\n        (click)=\"_selectOption(opt, $event)\"\n      >\n        @if (_optionTemplate(); as optionTpl) {\n          <ng-container\n            [ngTemplateOutlet]=\"optionTpl.templateRef\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: opt,\n              selected: _isSelected(opt.value),\n              focused: _focusedIndex() === i,\n            }\"\n          ></ng-container>\n        } @else {\n          @if (type() === 'multi') {\n            <span class=\"tala-select__checkbox\" aria-hidden=\"true\">\n              @if (_isSelected(opt.value)) {\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n                  <path d=\"M3 8.5L6.5 12 13 5\" />\n                </svg>\n              }\n            </span>\n          }\n          <span class=\"tala-select__option-label\">{{ opt.label }}</span>\n          @if (type() === 'single' && _isSelected(opt.value)) {\n            <svg\n              class=\"tala-select__option-check\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M3 8.5L6.5 12 13 5\" />\n            </svg>\n          }\n        }\n      </div>\n    } @empty {\n      <div class=\"tala-select__empty\">No options found</div>\n    }\n  </div>\n}\n\n@if (helperText() && !disabled()) {\n  <div class=\"tala-select__helper-row\" [id]=\"_helperId\">\n    <span class=\"tala-select__helper\">{{ helperText() }}</span>\n  </div>\n}\n", styles: ["tala-select{--tala-select-bg: var(--tala-sys-color-surface-default);--tala-select-border-color: var(--tala-sys-color-border-default);--tala-select-color: var(--tala-sys-color-text-primary);--tala-select-placeholder-color: var(--tala-sys-color-text-placeholder);--tala-select-label-color: var(--tala-sys-color-text-secondary);--tala-select-helper-color: var(--tala-sys-color-text-secondary);--tala-select-focus-ring: 0 0 0 3px rgba(9, 9, 13, .1);--tala-select-height: 40px;--tala-select-padding-x: 12px;--tala-select-gap: var(--tala-ref-space-2);--tala-select-icon-size: 16px;--tala-select-border-radius: var(--tala-ref-radius-md);position:relative;display:flex;flex-direction:column;gap:var(--tala-ref-space-1);box-sizing:border-box}.tala-select__label-row{display:flex;align-items:center;gap:var(--tala-ref-space-1);height:20px;overflow:hidden;white-space:nowrap}.tala-select__label{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-select-label-color);cursor:pointer}.tala-select__required{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:500;color:var(--tala-sys-color-text-accent)}.tala-select__trigger{display:flex;align-items:center;gap:var(--tala-select-gap);min-height:var(--tala-select-height);padding:4px var(--tala-select-padding-x);border:1px solid var(--tala-select-border-color);border-radius:var(--tala-select-border-radius);background-color:var(--tala-select-bg);overflow:hidden;box-sizing:border-box;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.tala-select__trigger:focus-visible{border-color:var(--tala-sys-color-border-focus);box-shadow:var(--tala-select-focus-ring)}tala-select:not(.tala-select--disabled,.tala-select--loading) .tala-select__trigger:hover{border-color:var(--tala-sys-color-border-strong)}tala-select.tala-select--open .tala-select__trigger{border-color:var(--tala-sys-color-border-focus);box-shadow:var(--tala-select-focus-ring)}.tala-select__trigger-content{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:var(--tala-ref-space-1);flex-wrap:wrap;overflow:hidden}.tala-select__value{font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-select-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tala-select__value--placeholder{color:var(--tala-select-placeholder-color)}.tala-select__search{flex:1 0 0;min-width:0;border:none;outline:none;background:transparent;font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-select-color);padding:0;box-sizing:border-box}.tala-select__search::placeholder{color:var(--tala-select-placeholder-color)}.tala-select__trailing{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-text-tertiary)}.tala-select__chevron{width:100%;height:100%;transition:transform .15s ease}tala-select.tala-select--open .tala-select__chevron{transform:rotate(180deg)}@keyframes tala-spin{to{transform:rotate(360deg)}}.tala-select__spinner{width:100%;height:100%;animation:tala-spin .7s linear infinite;transform-origin:center}.tala-select__dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background-color:var(--tala-sys-color-surface-raised);border:1px solid var(--tala-sys-color-border-default);border-radius:var(--tala-select-border-radius);box-shadow:var(--tala-ref-shadow-md);max-height:240px;overflow-y:auto;z-index:1000;box-sizing:border-box;padding:var(--tala-ref-space-1) 0}.tala-select__option{display:flex;align-items:center;gap:var(--tala-ref-space-2);padding:8px var(--tala-select-padding-x);font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;font-weight:400;color:var(--tala-select-color);cursor:pointer;transition:background-color .1s ease}.tala-select__option:hover,.tala-select__option--focused{background-color:var(--tala-sys-color-surface-sunken)}.tala-select__option--selected{color:var(--tala-sys-color-text-accent);font-weight:500}.tala-select__option--disabled{color:var(--tala-sys-color-text-disabled);cursor:not-allowed}.tala-select__option--disabled:hover{background-color:transparent}.tala-select__option-label{flex:1 0 0;min-width:0}.tala-select__option-check{flex-shrink:0;width:var(--tala-select-icon-size);height:var(--tala-select-icon-size);color:var(--tala-sys-color-text-accent)}.tala-select__checkbox{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:1.5px solid var(--tala-sys-color-border-default);border-radius:4px;color:var(--tala-sys-color-text-accent);box-sizing:border-box;transition:background-color .1s ease,border-color .1s ease}.tala-select__checkbox svg{width:10px;height:10px;display:none}.tala-select__option--selected .tala-select__checkbox{background-color:var(--tala-sys-color-text-accent);border-color:var(--tala-sys-color-text-accent)}.tala-select__option--selected .tala-select__checkbox svg{display:block;color:#fff;stroke:#fff;fill:none;stroke-width:2}.tala-select__empty{padding:8px var(--tala-select-padding-x);font-family:var(--tala-ref-type-family-inter);font-size:14px;line-height:20px;color:var(--tala-sys-color-text-tertiary);text-align:center}.tala-select__chips{display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}.tala-select__chip{display:inline-flex;align-items:center;gap:4px;padding:0 6px;height:20px;background-color:var(--tala-sys-color-surface-sunken);border:1px solid var(--tala-sys-color-border-default);border-radius:4px;font-family:var(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;color:var(--tala-select-color);white-space:nowrap}.tala-select__chip-remove{display:flex;align-items:center;justify-content:center;width:12px;height:12px;padding:0;border:none;background:transparent;color:var(--tala-sys-color-text-tertiary);cursor:pointer;border-radius:2px;flex-shrink:0}.tala-select__chip-remove svg{width:8px;height:8px}.tala-select__chip-remove:hover{color:var(--tala-sys-color-text-primary)}.tala-select__helper-row{display:flex;align-items:flex-start;min-height:16px}.tala-select__helper{font-family:var(--tala-ref-type-family-inter);font-size:12px;line-height:16px;font-weight:400;color:var(--tala-select-helper-color)}tala-select.tala-select--sm{--tala-select-height: 32px;--tala-select-padding-x: 10px;--tala-select-gap: 6px;--tala-select-icon-size: 14px}tala-select.tala-select--lg{--tala-select-height: 48px;--tala-select-padding-x: 14px;--tala-select-icon-size: 18px;--tala-select-border-radius: var(--tala-ref-radius-lg)}tala-select.tala-select--error{--tala-select-bg: var(--tala-sys-color-feedback-danger-bg);--tala-select-border-color: var(--tala-sys-color-border-error);--tala-select-helper-color: var(--tala-sys-color-feedback-danger-text)}tala-select.tala-select--success{--tala-select-bg: var(--tala-sys-color-feedback-success-bg);--tala-select-border-color: var(--tala-sys-color-feedback-success-border);--tala-select-helper-color: var(--tala-sys-color-feedback-success-text)}tala-select.tala-select--disabled{--tala-select-bg: var(--tala-sys-color-surface-sunken);--tala-select-color: var(--tala-sys-color-text-disabled);--tala-select-placeholder-color: var(--tala-sys-color-text-disabled);--tala-select-label-color: var(--tala-sys-color-text-disabled);pointer-events:none}tala-select.tala-select--disabled .tala-select__trigger{cursor:not-allowed}tala-select.tala-select--loading .tala-select__trigger{cursor:wait;pointer-events:none}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], _optionTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalaSelectOptionTemplate), { isSignal: true }] }], _valueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TalaSelectValueTemplate), { isSignal: true }] }], _onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]
             }] } });
 
+class TalaText {
+    /**
+     * Sets the text variant/semantic type.
+     * Determines the HTML semantics and typography styles applied to the element.
+     *
+     * @default 'body'
+     * @example
+     * // Heading variant
+     * <h1 talaText="h1">Heading 1</h1>
+     * // Body text with custom size
+     * <p talaText="body">Body text</p>
+     * // Code block
+     * <code talaText="code">const x = 42;</code>
+     */
+    talaText = input('body', ...(ngDevMode ? [{ debugName: "talaText" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls the font size relative to the current variant.
+     * Size mapping varies by variant:
+     * - Ignored for headings (h1-h6), code, and documentation text
+     * - body: 'sm' | 'md' (default) | 'lg'
+     * - label: 'xs' | 'sm' | 'md' (default) | 'lg'
+     * - caption: 'sm' (default) | 'lg'
+     *
+     * @default 'md'
+     * @example
+     * <p talaText="body" [size]="'lg'">Large body text</p>
+     */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls the font weight.
+     * Weight application varies by variant:
+     * - Ignored for headings (h1-h6), code, caption, and documentation text
+     * - For body/label: 'regular' (default) | 'medium' | 'semibold' | 'bold'
+     *
+     * @default 'regular'
+     * @example
+     * <p talaText="body" [weight]="'bold'">Bold body text</p>
+     */
+    weight = input('regular', ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    normalizedVariant = computed(() => {
+        const value = this.talaText();
+        const normalized = typeof value === 'string' ? value.trim() : '';
+        switch (normalized) {
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6':
+            case 'body':
+            case 'label':
+            case 'caption':
+            case 'code':
+            case 'docTitle':
+            case 'docSection':
+                return normalized;
+            default:
+                return 'body';
+        }
+    }, ...(ngDevMode ? [{ debugName: "normalizedVariant" }] : /* istanbul ignore next */ []));
+    normalizedSize = computed(() => {
+        const value = this.size();
+        const normalized = typeof value === 'string' ? value.trim() : '';
+        switch (normalized) {
+            case 'xs':
+            case 'sm':
+            case 'md':
+            case 'lg':
+                return normalized;
+            default:
+                return 'md';
+        }
+    }, ...(ngDevMode ? [{ debugName: "normalizedSize" }] : /* istanbul ignore next */ []));
+    normalizedWeight = computed(() => {
+        const value = this.weight();
+        const normalized = typeof value === 'string' ? value.trim() : '';
+        switch (normalized) {
+            case 'regular':
+            case 'medium':
+            case 'semibold':
+            case 'bold':
+                return normalized;
+            default:
+                return 'regular';
+        }
+    }, ...(ngDevMode ? [{ debugName: "normalizedWeight" }] : /* istanbul ignore next */ []));
+    classes = computed(() => [this.variantClass(), this.weightClass()].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    variantClass = computed(() => {
+        const v = this.normalizedVariant();
+        if (/^h[1-6]$/.test(v))
+            return `tala-${v}`;
+        if (v === 'code')
+            return 'tala-code';
+        if (v === 'docTitle')
+            return 'tala-doc-title';
+        if (v === 'docSection')
+            return 'tala-doc-section';
+        if (v === 'body')
+            return `tala-body-${this.bodySizeKey()}`;
+        if (v === 'label')
+            return `tala-label-${this.labelSizeKey()}`;
+        return `tala-caption-${this.captionSizeKey()}`;
+    }, ...(ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []));
+    weightClass = computed(() => {
+        const w = this.normalizedWeight();
+        const v = this.normalizedVariant();
+        if (/^h[1-6]$/.test(v) ||
+            v === 'code' ||
+            v === 'caption' ||
+            v === 'docTitle' ||
+            v === 'docSection')
+            return '';
+        if (w === 'regular')
+            return '';
+        if (v === 'label')
+            return w === 'semibold' ? `${this.variantClass()}--semibold` : '';
+        return `${this.variantClass()}--${w}`;
+    }, ...(ngDevMode ? [{ debugName: "weightClass" }] : /* istanbul ignore next */ []));
+    bodySizeKey = computed(() => {
+        const s = this.normalizedSize();
+        if (s === 'lg')
+            return 'lg';
+        if (s === 'sm')
+            return 'sm';
+        return 'md';
+    }, ...(ngDevMode ? [{ debugName: "bodySizeKey" }] : /* istanbul ignore next */ []));
+    labelSizeKey = computed(() => {
+        const s = this.normalizedSize();
+        if (s === 'lg')
+            return 'lg';
+        if (s === 'sm')
+            return 'sm';
+        if (s === 'xs')
+            return 'xs';
+        return 'md';
+    }, ...(ngDevMode ? [{ debugName: "labelSizeKey" }] : /* istanbul ignore next */ []));
+    captionSizeKey = computed(() => {
+        const s = this.normalizedSize();
+        return s === 'lg' ? 'lg' : 'sm';
+    }, ...(ngDevMode ? [{ debugName: "captionSizeKey" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: TalaText, isStandalone: true, selector: "[talaText]", inputs: { talaText: { classPropertyName: "talaText", publicName: "talaText", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TalaText, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[talaText]',
+                    template: '<ng-content />',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { talaText: [{ type: i0.Input, args: [{ isSignal: true, alias: "talaText", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }] } });
+
 /*
  * Public API Surface of doku-tala
  */
@@ -432,5 +692,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TalaAvatar, TalaAvatarGroup, TalaButton, TalaInput, TalaSelect };
+export { TALA_FORM_FIELD_CONTROL, TALA_FORM_FIELD_HOST, TalaAlert, TalaAvatar, TalaAvatarGroup, TalaButton, TalaFormField, TalaInput, TalaSelect, TalaSelectOptionTemplate, TalaSelectValueTemplate, TalaText };
 //# sourceMappingURL=doku-com-tala.mjs.map