@educarehq/solaris-components 0.0.1 → 0.0.3

package/fesm2022/educarehq-solaris-components.mjs

@@ -1,8 +1,1580 @@
-const SOLARIS_COMPONENTS_VERSION = '0.0.1';
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, HostBinding, Input, ChangeDetectionStrategy, Component, signal, ContentChildren, HostListener, Optional, Directive, ContentChild, inject, ElementRef, computed, booleanAttribute, InjectionToken, Renderer2, forwardRef, ViewChild, effect, Injectable } from '@angular/core';
+import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
+import { RouterLink } from '@angular/router';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
+import { getCountries, getCountryCallingCode, parsePhoneNumberFromString, AsYouType } from 'libphonenumber-js';
+import intlTelInput from 'intl-tel-input';
+import { SolarisTranslationPipe } from '@educarehq/solaris-services';
+
+class SolarisBreadcrumb {
+    minItems = 2;
+    maxItems = 4;
+    responsive = true;
+    items = [];
+    hostClass = 'solaris-breadcrumb-host';
+    itemSelect = new EventEmitter();
+    get viewModel() {
+        const items = this.items ?? [];
+        const total = items.length;
+        const max = Math.max(this.minItems, this.effectiveMaxItems);
+        if (total <= max) {
+            return { head: items, overflow: [], tail: [] };
+        }
+        const keepHead = 1;
+        const keepTail = 1;
+        const remaining = max - keepHead - keepTail;
+        const extraTail = Math.max(0, remaining);
+        const head = items.slice(0, keepHead);
+        const tail = items.slice(total - (keepTail + extraTail), total);
+        const overflow = items.slice(keepHead, total - tail.length);
+        return { head, overflow, tail };
+    }
+    get effectiveMaxItems() {
+        if (!this.responsive)
+            return this.maxItems;
+        const isSmall = typeof globalThis.matchMedia === "function" &&
+            globalThis.matchMedia("(max-width: 640px)").matches;
+        return isSmall ? Math.max(this.minItems, 3) : this.maxItems;
+    }
+    getRouterCommands(it) {
+        return it.target?.kind === 'router' ? it.target.commands : null;
+    }
+    getRouterQueryParams(it) {
+        return it.target?.kind === 'router' ? (it.target.extras?.queryParams ?? null) : null;
+    }
+    shouldRenderSeparatorAfterHead(headIndex) {
+        if (headIndex < this.viewModel.head.length - 1)
+            return true;
+        return this.viewModel.overflow.length > 0 || this.viewModel.tail.length > 0;
+    }
+    onAction(item) {
+        if (item.disabled)
+            return;
+        const t = item.target;
+        if (t?.kind === 'action')
+            this.itemSelect.emit({ id: t.id, item });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisBreadcrumb, isStandalone: true, selector: "solaris-breadcrumb", inputs: { minItems: ["min-items", "minItems"], maxItems: ["max-items", "maxItems"], responsive: "responsive", items: "items" }, outputs: { itemSelect: "itemSelect" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<nav class=\"solaris-breadcrumb\" aria-label=\"Breadcrumb\">\r\n  <ol class=\"solaris-breadcrumb__list\">\r\n    @for (it of viewModel.head; track it.label; let i = $index) {\r\n      <li class=\"solaris-breadcrumb__item\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it }\"/>\r\n        @if (shouldRenderSeparatorAfterHead(i)) {\r\n          <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n            <i class=\"ph ph-caret-right\"></i>\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n\r\n    @if (viewModel.overflow.length > 0) {\r\n      <li class=\"solaris-breadcrumb__item\">\r\n        <button type=\"button\" class=\"solaris-breadcrumb__ellipsis\" aria-label=\"Mostrar mais\" [cdkMenuTriggerFor]=\"overflowMenu\">\r\n          <i class=\"ph ph-dots-three\"></i>\r\n        </button>\r\n\r\n        <ng-template #overflowMenu>\r\n          <div class=\"solaris-breadcrumb__menu\" cdkMenu>\r\n            @for (it of viewModel.overflow; track it.label) {\r\n              <button type=\"button\" class=\"solaris-breadcrumb__menu-item\" cdkMenuItem (click)=\"onAction(it)\"\r\n                      [disabled]=\"it.disabled\" [routerLink]=\"getRouterCommands(it)\"\r\n                      [queryParams]=\"getRouterQueryParams(it)\">\r\n                @if (it.icon) {\r\n                  <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n                }\r\n                <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n              </button>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n\r\n        @if (viewModel.tail.length > 0) {\r\n          <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n            <i class=\"ph ph-caret-right\"></i>\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n\r\n    @for (it of viewModel.tail; track it.label; let i = $index) {\r\n      <li class=\"solaris-breadcrumb__item\" [class.is-current]=\"i === viewModel.tail.length - 1\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it, current: i === viewModel.tail.length - 1 }\"/>\r\n        @if (it !== viewModel.tail[viewModel.tail.length - 1]) {\r\n          <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n            <i class=\"ph ph-caret-right\"></i>\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n\r\n  <ng-template #itemTpl let-it let-current=\"current\">\r\n    @if (it.target?.kind === 'router') {\r\n      <a class=\"solaris-breadcrumb__link\" [class.is-disabled]=\"it.disabled\" [class.is-current]=\"current\"\r\n         [routerLink]=\"it.disabled ? null : it.target!.commands\" [attr.aria-current]=\"current ? 'page' : null\"\r\n         [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n        @if (it.icon) {\r\n          <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n        }\r\n        <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n      </a>\r\n    }\r\n    @else if (it.target?.kind === 'href') {\r\n      <a class=\"solaris-breadcrumb__link\" [class.is-disabled]=\"it.disabled\" [class.is-current]=\"current\"\r\n         [href]=\"it.disabled ? null : it.target!.href\" [target]=\"it.target!.target || '_self'\"\r\n         [attr.aria-current]=\"current ? 'page' : null\" [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n        @if (it.icon) {\r\n          <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n        }\r\n        <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n      </a>\r\n    }\r\n    @else if (it.target?.kind === 'action') {\r\n      <button type=\"button\" class=\"solaris-breadcrumb__link as-button\" [class.is-current]=\"current\"\r\n              [disabled]=\"it.disabled\" (click)=\"onAction(it)\" [attr.aria-current]=\"current ? 'page' : null\"\r\n              [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n        @if (it.icon) {\r\n          <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n        }\r\n        <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n      </button>\r\n    }\r\n    @else {\r\n      <span class=\"solaris-breadcrumb__text\" [attr.aria-current]=\"current ? 'page' : null\">\r\n        @if (it.icon) {\r\n          <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n        }\r\n        <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n      </span>\r\n    }\r\n  </ng-template>\r\n</nav>\r\n", styles: [":host.solaris-breadcrumb-host{display:block}.solaris-breadcrumb{font-size:var(--solaris-bc-fs);--solaris-bc-fs: var(--solaris-fs-14);color:var(--solaris-color-text-muted);--solaris-bc-gap: var(--solaris-space-2);--solaris-bc-radius: var(--solaris-radius-sm)}.solaris-breadcrumb__list{margin:0;padding:0;min-width:0;display:flex;list-style:none;flex-wrap:nowrap;align-items:center;gap:var(--solaris-bc-gap)}.solaris-breadcrumb__item{min-width:0;align-items:center;display:inline-flex}.solaris-breadcrumb__item i.ph{display:flex}.solaris-breadcrumb__sep{-webkit-user-select:none;user-select:none;margin-inline:var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-text-muted) 60%,transparent)}.solaris-breadcrumb__icon{line-height:1;font-size:var(--solaris-fs-16);margin-right:var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-text-muted) 75%,transparent)}.solaris-breadcrumb__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-breadcrumb__link,.solaris-breadcrumb__text{min-width:0;color:inherit;align-items:center;display:inline-flex;text-decoration:none;border-radius:var(--solaris-bc-radius)}.solaris-breadcrumb__link{padding:.2rem .5rem;transition:all .15s ease-in-out}.solaris-breadcrumb__link:hover{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 70%,transparent)}.solaris-breadcrumb__link.is-current{font-weight:600;color:var(--solaris-color-text)}.solaris-breadcrumb__link.is-disabled{opacity:.55;pointer-events:none}.solaris-breadcrumb__link.as-button{border:0;font:inherit;cursor:pointer;background:transparent}.solaris-breadcrumb__ellipsis{padding:.2rem .6rem;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-bc-radius);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-breadcrumb__ellipsis:hover{color:var(--solaris-color-text);box-shadow:var(--solaris-shadow-xs)}.solaris-breadcrumb__menu{min-width:22rem;padding:var(--solaris-space-2);margin-top:var(--solaris-space-2);box-shadow:var(--solaris-shadow-md);border-radius:var(--solaris-radius-md);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-breadcrumb__menu-item{border:0;width:100%;font:inherit;display:flex;cursor:pointer;text-align:left;align-items:center;background:transparent;gap:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm);padding:var(--solaris-space-2) var(--solaris-space-3)}.solaris-breadcrumb__menu-item:hover{background:var(--solaris-color-surface-2)}.solaris-breadcrumb__menu-item:disabled{opacity:.55;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }, { kind: "directive", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"], outputs: ["cdkMenuItemTriggered"], exportAs: ["cdkMenuItem"] }, { kind: "directive", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: ["cdkMenuTriggerFor", "cdkMenuPosition", "cdkMenuTriggerData", "cdkMenuTriggerTransformOriginOn"], outputs: ["cdkMenuOpened", "cdkMenuClosed"], exportAs: ["cdkMenuTriggerFor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-breadcrumb', standalone: true, imports: [
+                        NgClass,
+                        RouterLink,
+                        CdkMenu,
+                        CdkMenuItem,
+                        CdkMenuTrigger,
+                        NgTemplateOutlet
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"solaris-breadcrumb\" aria-label=\"Breadcrumb\">\r\n  <ol class=\"solaris-breadcrumb__list\">\r\n    @for (it of viewModel.head; track it.label; let i = $index) {\r\n      <li class=\"solaris-breadcrumb__item\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it }\"/>\r\n        @if (shouldRenderSeparatorAfterHead(i)) {\r\n          <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n            <i class=\"ph ph-caret-right\"></i>\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n\r\n    @if (viewModel.overflow.length > 0) {\r\n      <li class=\"solaris-breadcrumb__item\">\r\n        <button type=\"button\" class=\"solaris-breadcrumb__ellipsis\" aria-label=\"Mostrar mais\" [cdkMenuTriggerFor]=\"overflowMenu\">\r\n          <i class=\"ph ph-dots-three\"></i>\r\n        </button>\r\n\r\n        <ng-template #overflowMenu>\r\n          <div class=\"solaris-breadcrumb__menu\" cdkMenu>\r\n            @for (it of viewModel.overflow; track it.label) {\r\n              <button type=\"button\" class=\"solaris-breadcrumb__menu-item\" cdkMenuItem (click)=\"onAction(it)\"\r\n                      [disabled]=\"it.disabled\" [routerLink]=\"getRouterCommands(it)\"\r\n                      [queryParams]=\"getRouterQueryParams(it)\">\r\n                @if (it.icon) {\r\n                  <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n                }\r\n                <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n              </button>\r\n            }\r\n          </div>\r\n        </ng-template>\r\n\r\n        @if (viewModel.tail.length > 0) {\r\n          <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n            <i class=\"ph ph-caret-right\"></i>\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n\r\n    @for (it of viewModel.tail; track it.label; let i = $index) {\r\n      <li class=\"solaris-breadcrumb__item\" [class.is-current]=\"i === viewModel.tail.length - 1\">\r\n        <ng-container [ngTemplateOutlet]=\"itemTpl\" [ngTemplateOutletContext]=\"{ $implicit: it, current: i === viewModel.tail.length - 1 }\"/>\r\n        @if (it !== viewModel.tail[viewModel.tail.length - 1]) {\r\n          <span class=\"solaris-breadcrumb__sep\" aria-hidden=\"true\">\r\n            <i class=\"ph ph-caret-right\"></i>\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n\r\n  <ng-template #itemTpl let-it let-current=\"current\">\r\n    @if (it.target?.kind === 'router') {\r\n      <a class=\"solaris-breadcrumb__link\" [class.is-disabled]=\"it.disabled\" [class.is-current]=\"current\"\r\n         [routerLink]=\"it.disabled ? null : it.target!.commands\" [attr.aria-current]=\"current ? 'page' : null\"\r\n         [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n        @if (it.icon) {\r\n          <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n        }\r\n        <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n      </a>\r\n    }\r\n    @else if (it.target?.kind === 'href') {\r\n      <a class=\"solaris-breadcrumb__link\" [class.is-disabled]=\"it.disabled\" [class.is-current]=\"current\"\r\n         [href]=\"it.disabled ? null : it.target!.href\" [target]=\"it.target!.target || '_self'\"\r\n         [attr.aria-current]=\"current ? 'page' : null\" [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n        @if (it.icon) {\r\n          <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n        }\r\n        <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n      </a>\r\n    }\r\n    @else if (it.target?.kind === 'action') {\r\n      <button type=\"button\" class=\"solaris-breadcrumb__link as-button\" [class.is-current]=\"current\"\r\n              [disabled]=\"it.disabled\" (click)=\"onAction(it)\" [attr.aria-current]=\"current ? 'page' : null\"\r\n              [attr.aria-label]=\"it.ariaLabel || it.label\">\r\n        @if (it.icon) {\r\n          <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n        }\r\n        <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n      </button>\r\n    }\r\n    @else {\r\n      <span class=\"solaris-breadcrumb__text\" [attr.aria-current]=\"current ? 'page' : null\">\r\n        @if (it.icon) {\r\n          <i class=\"solaris-breadcrumb__icon\" [ngClass]=\"it.icon\" aria-hidden=\"true\"></i>\r\n        }\r\n        <span class=\"solaris-breadcrumb__label\">{{ it.label }}</span>\r\n      </span>\r\n    }\r\n  </ng-template>\r\n</nav>\r\n", styles: [":host.solaris-breadcrumb-host{display:block}.solaris-breadcrumb{font-size:var(--solaris-bc-fs);--solaris-bc-fs: var(--solaris-fs-14);color:var(--solaris-color-text-muted);--solaris-bc-gap: var(--solaris-space-2);--solaris-bc-radius: var(--solaris-radius-sm)}.solaris-breadcrumb__list{margin:0;padding:0;min-width:0;display:flex;list-style:none;flex-wrap:nowrap;align-items:center;gap:var(--solaris-bc-gap)}.solaris-breadcrumb__item{min-width:0;align-items:center;display:inline-flex}.solaris-breadcrumb__item i.ph{display:flex}.solaris-breadcrumb__sep{-webkit-user-select:none;user-select:none;margin-inline:var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-text-muted) 60%,transparent)}.solaris-breadcrumb__icon{line-height:1;font-size:var(--solaris-fs-16);margin-right:var(--solaris-space-2);color:color-mix(in srgb,var(--solaris-color-text-muted) 75%,transparent)}.solaris-breadcrumb__label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.solaris-breadcrumb__link,.solaris-breadcrumb__text{min-width:0;color:inherit;align-items:center;display:inline-flex;text-decoration:none;border-radius:var(--solaris-bc-radius)}.solaris-breadcrumb__link{padding:.2rem .5rem;transition:all .15s ease-in-out}.solaris-breadcrumb__link:hover{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 70%,transparent)}.solaris-breadcrumb__link.is-current{font-weight:600;color:var(--solaris-color-text)}.solaris-breadcrumb__link.is-disabled{opacity:.55;pointer-events:none}.solaris-breadcrumb__link.as-button{border:0;font:inherit;cursor:pointer;background:transparent}.solaris-breadcrumb__ellipsis{padding:.2rem .6rem;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-bc-radius);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-breadcrumb__ellipsis:hover{color:var(--solaris-color-text);box-shadow:var(--solaris-shadow-xs)}.solaris-breadcrumb__menu{min-width:22rem;padding:var(--solaris-space-2);margin-top:var(--solaris-space-2);box-shadow:var(--solaris-shadow-md);border-radius:var(--solaris-radius-md);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-breadcrumb__menu-item{border:0;width:100%;font:inherit;display:flex;cursor:pointer;text-align:left;align-items:center;background:transparent;gap:var(--solaris-space-2);color:var(--solaris-color-text);border-radius:var(--solaris-radius-sm);padding:var(--solaris-space-2) var(--solaris-space-3)}.solaris-breadcrumb__menu-item:hover{background:var(--solaris-color-surface-2)}.solaris-breadcrumb__menu-item:disabled{opacity:.55;cursor:not-allowed}\n"] }]
+        }], propDecorators: { minItems: [{
+                type: Input,
+                args: [{ alias: 'min-items' }]
+            }], maxItems: [{
+                type: Input,
+                args: [{ alias: 'max-items' }]
+            }], responsive: [{
+                type: Input
+            }], items: [{
+                type: Input,
+                args: [{ required: true }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], itemSelect: [{
+                type: Output
+            }] } });
+
+class SolarisTabs {
+    size = 'md';
+    disabled = false;
+    variant = 'underline';
+    activeId;
+    activeIdChange = new EventEmitter();
+    tabChange = new EventEmitter();
+    hostClass = 'solaris-tabs-host';
+    tabs;
+    focusId = signal(null, ...(ngDevMode ? [{ debugName: "focusId" }] : []));
+    ngAfterContentInit() {
+        queueMicrotask(() => {
+            const first = this.tabs?.get(0);
+            if (!this.activeId && first?.id) {
+                this.setActive(first.id, false);
+            }
+            if (!this.focusId() && (this.activeId ?? first?.id)) {
+                this.focusId.set(this.activeId ?? first?.id ?? null);
+            }
+            this.syncTabs();
+            this.tabs.changes.subscribe(() => this.syncTabs());
+        });
+    }
+    syncTabs() {
+        const list = this.tabs?.toArray() ?? [];
+        for (const t of list) {
+            t._setParent(this);
+            t._setDisabled(this.disabled || t.disabled);
+        }
+    }
+    isActive(id) {
+        return this.activeId === id;
+    }
+    isFocusable(id) {
+        const fid = this.focusId();
+        return (fid ?? this.activeId) === id;
+    }
+    setActive(id, emit = true) {
+        if (!id)
+            return;
+        this.activeId = id;
+        this.focusId.set(id);
+        if (emit) {
+            this.activeIdChange.emit(id);
+            this.tabChange.emit({ id });
+        }
+    }
+    onKeydown(ev) {
+        if (this.disabled)
+            return;
+        const keys = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
+        if (!keys.includes(ev.key))
+            return;
+        const list = (this.tabs?.toArray() ?? []).filter(t => !t._isDisabled());
+        if (!list.length)
+            return;
+        ev.preventDefault();
+        const currentId = this.focusId() ?? this.activeId ?? list[0].id;
+        const idx = Math.max(0, list.findIndex(t => t.id === currentId));
+        let next = idx;
+        if (ev.key === 'ArrowLeft')
+            next = (idx - 1 + list.length) % list.length;
+        if (ev.key === 'ArrowRight')
+            next = (idx + 1) % list.length;
+        if (ev.key === 'Home')
+            next = 0;
+        if (ev.key === 'End')
+            next = list.length - 1;
+        const nextTab = list[next];
+        this.focusId.set(nextTab.id);
+        nextTab._focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisTabs, isStandalone: true, selector: "solaris-tabs", inputs: { size: "size", disabled: "disabled", variant: "variant", activeId: ["active-id", "activeId"] }, outputs: { activeIdChange: "active-idChange", tabChange: "tabChange" }, host: { properties: { "class": "this.hostClass" } }, queries: [{ propertyName: "tabs", predicate: SolarisTab }], ngImport: i0, template: "<div [ngClass]=\"['size-' + size, 'variant-' + variant, disabled ? 'is-disabled' : '']\"\r\n     class=\"solaris-tabs\" role=\"tablist\" (keydown)=\"onKeydown($event)\">\r\n  <ng-content/>\r\n</div>\r\n", styles: [":host.solaris-tabs-host{display:block}.solaris-tabs{--solaris-tabs-gap: var(--solaris-space-2);--solaris-tabs-radius: var(--solaris-radius-sm);min-width:0;display:inline-flex;align-items:stretch;gap:var(--solaris-tabs-gap)}.solaris-tabs.size-sm{--solaris-tab-py: .4rem;--solaris-tab-px: .8rem;font-size:var(--solaris-fs-12)}.solaris-tabs.size-md{--solaris-tab-py: .6rem;--solaris-tab-px: 1.2rem;font-size:var(--solaris-fs-14)}.solaris-tabs.variant-pill{--solaris-tabs-gap: 0;border-radius:var(--solaris-tabs-radius);border:1px solid var(--solaris-color-border);background:color-mix(in srgb,var(--solaris-color-surface) 80%,transparent)}.solaris-tabs.variant-pill ::ng-deep>solaris-tab{display:inline-flex;align-items:stretch}.solaris-tabs.variant-pill ::ng-deep>solaris-tab:not(:first-child){border-left:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent)}.solaris-tabs.variant-underline{padding-bottom:var(--solaris-space-1);border-bottom:1px solid var(--solaris-color-border)}.solaris-tabs.is-disabled{opacity:.6;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-tabs', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['size-' + size, 'variant-' + variant, disabled ? 'is-disabled' : '']\"\r\n     class=\"solaris-tabs\" role=\"tablist\" (keydown)=\"onKeydown($event)\">\r\n  <ng-content/>\r\n</div>\r\n", styles: [":host.solaris-tabs-host{display:block}.solaris-tabs{--solaris-tabs-gap: var(--solaris-space-2);--solaris-tabs-radius: var(--solaris-radius-sm);min-width:0;display:inline-flex;align-items:stretch;gap:var(--solaris-tabs-gap)}.solaris-tabs.size-sm{--solaris-tab-py: .4rem;--solaris-tab-px: .8rem;font-size:var(--solaris-fs-12)}.solaris-tabs.size-md{--solaris-tab-py: .6rem;--solaris-tab-px: 1.2rem;font-size:var(--solaris-fs-14)}.solaris-tabs.variant-pill{--solaris-tabs-gap: 0;border-radius:var(--solaris-tabs-radius);border:1px solid var(--solaris-color-border);background:color-mix(in srgb,var(--solaris-color-surface) 80%,transparent)}.solaris-tabs.variant-pill ::ng-deep>solaris-tab{display:inline-flex;align-items:stretch}.solaris-tabs.variant-pill ::ng-deep>solaris-tab:not(:first-child){border-left:1px solid color-mix(in srgb,var(--solaris-color-border) 70%,transparent)}.solaris-tabs.variant-underline{padding-bottom:var(--solaris-space-1);border-bottom:1px solid var(--solaris-color-border)}.solaris-tabs.is-disabled{opacity:.6;pointer-events:none}\n"] }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], activeId: [{
+                type: Input,
+                args: [{ alias: 'active-id' }]
+            }], activeIdChange: [{
+                type: Output,
+                args: ['active-idChange']
+            }], tabChange: [{
+                type: Output
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], tabs: [{
+                type: ContentChildren,
+                args: [SolarisTab]
+            }] } });
+
+class SolarisTab {
+    elementRef;
+    disabled = false;
+    routerLink;
+    id;
+    parent;
+    disabledByParent = false;
+    constructor(elementRef, parent) {
+        this.elementRef = elementRef;
+        this.parent = parent;
+    }
+    _setParent(p) { this.parent = p; }
+    _setDisabled(v) { this.disabledByParent = v; }
+    _isDisabled() {
+        return this.disabled || this.disabledByParent;
+    }
+    _focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    get hostClass() {
+        const active = this.parent?.isActive(this.id);
+        return [
+            'solaris-tab',
+            active ? 'is-active' : '',
+            this._isDisabled() ? 'is-disabled' : '',
+            this.routerLink ? 'is-link' : '',
+        ].filter(Boolean).join(' ');
+    }
+    role = 'tab';
+    get tabIndex() {
+        if (this._isDisabled())
+            return -1;
+        return this.parent?.isFocusable(this.id) ? 0 : -1;
+    }
+    get ariaSelected() {
+        return this.parent?.isActive(this.id) ? 'true' : 'false';
+    }
+    onClick() {
+        if (this._isDisabled())
+            return;
+        this.parent?.setActive(this.id, true);
+    }
+    onFocus() {
+        if (this._isDisabled())
+            return;
+        this.parent?.focusId.set(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTab, deps: [{ token: i0.ElementRef }, { token: SolarisTabs, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisTab, isStandalone: true, selector: "solaris-tab", inputs: { disabled: "disabled", routerLink: "routerLink", id: "id" }, host: { listeners: { "click": "onClick()", "focus": "onFocus()" }, properties: { "class": "this.hostClass", "attr.role": "this.role", "attr.tabindex": "this.tabIndex", "attr.aria-selected": "this.ariaSelected" } }, ngImport: i0, template: "@if (routerLink) {\r\n  <a class=\"solaris-tab__inner\" [routerLink]=\"routerLink\">\r\n    <ng-content />\r\n  </a>\r\n} @else {\r\n  <button type=\"button\" class=\"solaris-tab__inner\">\r\n    <ng-content />\r\n  </button>\r\n}\r\n", styles: [":host{min-width:0;display:inline-flex;align-items:stretch}.solaris-tab__inner{border:0;min-width:0;height:100%;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:transparent;gap:var(--solaris-space-2);transition:all .15s ease-in-out;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-md);padding:var(--solaris-tab-py, .6rem) var(--solaris-tab-px, 1.2rem)}:host(:hover) .solaris-tab__inner{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 75%,transparent)}:host(.is-active) .solaris-tab__inner{color:var(--solaris-color-text)}:host(.is-disabled) .solaris-tab__inner{opacity:.6;cursor:not-allowed}:host-context(.solaris-tabs.variant-underline) :host(.is-active) .solaris-tab__inner{border-radius:0;box-shadow:inset 0 -2px 0 var(--solaris-color-primary)}:host-context(.solaris-tabs.variant-pill) .solaris-tab__inner{border-radius:0}:host-context(.solaris-tabs.variant-pill) :host(:first-child:hover) .solaris-tab__inner,:host-context(.solaris-tabs.variant-pill) :host(:first-child.is-active) .solaris-tab__inner{border-top-left-radius:var(--solaris-tabs-radius);border-bottom-left-radius:var(--solaris-tabs-radius)}:host-context(.solaris-tabs.variant-pill) :host(:last-child:hover) .solaris-tab__inner,:host-context(.solaris-tabs.variant-pill) :host(:last-child.is-active) .solaris-tab__inner{border-top-right-radius:var(--solaris-tabs-radius);border-bottom-right-radius:var(--solaris-tabs-radius)}:host-context(.solaris-tabs.variant-pill) :host(.is-active) .solaris-tab__inner{background:var(--solaris-color-surface-2);box-shadow:var(--solaris-shadow-xs);color:var(--solaris-color-text)}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisTab, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-tab', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (routerLink) {\r\n  <a class=\"solaris-tab__inner\" [routerLink]=\"routerLink\">\r\n    <ng-content />\r\n  </a>\r\n} @else {\r\n  <button type=\"button\" class=\"solaris-tab__inner\">\r\n    <ng-content />\r\n  </button>\r\n}\r\n", styles: [":host{min-width:0;display:inline-flex;align-items:stretch}.solaris-tab__inner{border:0;min-width:0;height:100%;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:transparent;gap:var(--solaris-space-2);transition:all .15s ease-in-out;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-md);padding:var(--solaris-tab-py, .6rem) var(--solaris-tab-px, 1.2rem)}:host(:hover) .solaris-tab__inner{color:var(--solaris-color-text);background:color-mix(in srgb,var(--solaris-color-surface-2) 75%,transparent)}:host(.is-active) .solaris-tab__inner{color:var(--solaris-color-text)}:host(.is-disabled) .solaris-tab__inner{opacity:.6;cursor:not-allowed}:host-context(.solaris-tabs.variant-underline) :host(.is-active) .solaris-tab__inner{border-radius:0;box-shadow:inset 0 -2px 0 var(--solaris-color-primary)}:host-context(.solaris-tabs.variant-pill) .solaris-tab__inner{border-radius:0}:host-context(.solaris-tabs.variant-pill) :host(:first-child:hover) .solaris-tab__inner,:host-context(.solaris-tabs.variant-pill) :host(:first-child.is-active) .solaris-tab__inner{border-top-left-radius:var(--solaris-tabs-radius);border-bottom-left-radius:var(--solaris-tabs-radius)}:host-context(.solaris-tabs.variant-pill) :host(:last-child:hover) .solaris-tab__inner,:host-context(.solaris-tabs.variant-pill) :host(:last-child.is-active) .solaris-tab__inner{border-top-right-radius:var(--solaris-tabs-radius);border-bottom-right-radius:var(--solaris-tabs-radius)}:host-context(.solaris-tabs.variant-pill) :host(.is-active) .solaris-tab__inner{background:var(--solaris-color-surface-2);box-shadow:var(--solaris-shadow-xs);color:var(--solaris-color-text)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: SolarisTabs, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { disabled: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], id: [{
+                type: Input,
+                args: [{ required: true }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaSelected: [{
+                type: HostBinding,
+                args: ['attr.aria-selected']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }] } });
+
+class SolarisBadge {
+    hostClass = 'solaris-badge-host';
+    pill = false;
+    size = 'md';
+    interactive = false;
+    color = 'surface';
+    variant = 'subtle';
+    ariaHidden = null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisBadge, isStandalone: true, selector: "solaris-badge", inputs: { pill: "pill", size: "size", interactive: "interactive", color: "color", variant: "variant", ariaHidden: ["aria-hidden", "ariaHidden"] }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n  [ngClass]=\"[\r\n    'variant-' + variant,\r\n    'color-' + color,\r\n    'size-' + size,\r\n    pill ? 'is-pill' : '',\r\n    interactive ? 'is-interactive' : ''\r\n  ]\">\r\n  <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-radius: var(--solaris-radius-md);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: var(--solaris-color-surface-2);--solaris-badge-border: var(--solaris-color-border)}.solaris-badge.color-primary{--solaris-badge-fg: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-primary) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-primary) 55%, var(--solaris-color-border))}.solaris-badge.color-success{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-success) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-success) 45%, var(--solaris-color-border))}.solaris-badge.color-warning{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-warning) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-warning) 45%, var(--solaris-color-border))}.solaris-badge.color-error{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-error) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-error) 45%, var(--solaris-color-border))}.solaris-badge.color-info{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-info) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-info) 45%, var(--solaris-color-border))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-subtle{color:var(--solaris-color-text);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{background:transparent;color:var(--solaris-color-text);border-color:var(--solaris-badge-border)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBadge, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-badge', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"solaris-badge\" [attr.aria-hidden]=\"ariaHidden\"\r\n  [ngClass]=\"[\r\n    'variant-' + variant,\r\n    'color-' + color,\r\n    'size-' + size,\r\n    pill ? 'is-pill' : '',\r\n    interactive ? 'is-interactive' : ''\r\n  ]\">\r\n  <ng-content></ng-content>\r\n</span>\r\n", styles: [":host.solaris-badge-host{display:inline-flex}.solaris-badge{--solaris-badge-radius: var(--solaris-radius-md);line-height:1;font-weight:600;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;display:inline-flex;gap:var(--solaris-space-2);border:1px solid transparent;letter-spacing:var(--solaris-ls-sm);border-radius:var(--solaris-badge-radius)}.solaris-badge.size-sm{padding:.3rem .6rem;font-size:var(--solaris-fs-10)}.solaris-badge.size-md{padding:.4rem .8rem;font-size:var(--solaris-fs-12)}.solaris-badge.is-pill{--solaris-badge-radius: var(--solaris-radius-full)}.solaris-badge.is-interactive{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.solaris-badge.is-interactive:hover{box-shadow:var(--solaris-shadow-xs)}.solaris-badge.color-surface{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: var(--solaris-color-surface-2);--solaris-badge-border: var(--solaris-color-border)}.solaris-badge.color-primary{--solaris-badge-fg: var(--solaris-color-primary-contrast, #fff);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-primary) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-primary) 55%, var(--solaris-color-border))}.solaris-badge.color-success{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-success) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-success) 45%, var(--solaris-color-border))}.solaris-badge.color-warning{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-warning) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-warning) 45%, var(--solaris-color-border))}.solaris-badge.color-error{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-error) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-error) 45%, var(--solaris-color-border))}.solaris-badge.color-info{--solaris-badge-fg: var(--solaris-color-text);--solaris-badge-bg: color-mix(in srgb, var(--solaris-color-info) 20%, transparent);--solaris-badge-border: color-mix(in srgb, var(--solaris-color-info) 45%, var(--solaris-color-border))}.solaris-badge.variant-solid{color:var(--solaris-badge-fg);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-subtle{color:var(--solaris-color-text);background:var(--solaris-badge-bg);border-color:var(--solaris-badge-border)}.solaris-badge.variant-outline{background:transparent;color:var(--solaris-color-text);border-color:var(--solaris-badge-border)}.solaris-badge.variant-solid.color-surface{color:var(--solaris-color-text);border-color:var(--solaris-color-border);background:var(--solaris-color-surface-2)}\n"] }]
+        }], propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], pill: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], interactive: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], ariaHidden: [{
+                type: Input,
+                args: [{ alias: 'aria-hidden' }]
+            }] } });
+
+class SolarisSectionComponent {
+    title;
+    description;
+    appearance = 'plain';
+    density = 'comfortable';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisSectionComponent, isStandalone: true, selector: "solaris-section", inputs: { title: "title", description: "description", appearance: "appearance", density: "density" }, ngImport: i0, template: "<section class=\"solaris-section\" [ngClass]=\"['appearance-' + appearance, 'density-' + density]\">\r\n  @if (title || description) {\r\n    <header class=\"solaris-section__header\">\r\n      @if (title) { <h2 class=\"solaris-section__title\">{{ title }}</h2> }\r\n      @if (description) { <p class=\"solaris-section__description\">{{ description }}</p> }\r\n    </header>\r\n  }\r\n\r\n  <div class=\"solaris-section__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</section>\r\n", styles: [".solaris-section{--solaris-section-gap: var(--solaris-space-4);--solaris-section-padding: var(--solaris-space-6);min-width:0;display:flex;flex-direction:column;gap:var(--solaris-section-gap)}.solaris-section.density-compact{--solaris-section-gap: var(--solaris-space-3);--solaris-section-padding: var(--solaris-space-4)}.solaris-section.appearance-plain{padding:0}.solaris-section.appearance-card{box-shadow:var(--solaris-shadow-xs);padding:var(--solaris-section-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-section__header{display:flex;flex-direction:column;gap:var(--solaris-space-2);font-size:var(--solaris-fs-16)}.solaris-section__title{margin:0;font-size:var(--solaris-h-5);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight)}.solaris-section__description{margin:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-section__content{min-width:0;font-size:var(--solaris-fs-16)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-section', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"solaris-section\" [ngClass]=\"['appearance-' + appearance, 'density-' + density]\">\r\n  @if (title || description) {\r\n    <header class=\"solaris-section__header\">\r\n      @if (title) { <h2 class=\"solaris-section__title\">{{ title }}</h2> }\r\n      @if (description) { <p class=\"solaris-section__description\">{{ description }}</p> }\r\n    </header>\r\n  }\r\n\r\n  <div class=\"solaris-section__content\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</section>\r\n", styles: [".solaris-section{--solaris-section-gap: var(--solaris-space-4);--solaris-section-padding: var(--solaris-space-6);min-width:0;display:flex;flex-direction:column;gap:var(--solaris-section-gap)}.solaris-section.density-compact{--solaris-section-gap: var(--solaris-space-3);--solaris-section-padding: var(--solaris-space-4)}.solaris-section.appearance-plain{padding:0}.solaris-section.appearance-card{box-shadow:var(--solaris-shadow-xs);padding:var(--solaris-section-padding);border-radius:var(--solaris-radius-md);background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border)}.solaris-section__header{display:flex;flex-direction:column;gap:var(--solaris-space-2);font-size:var(--solaris-fs-16)}.solaris-section__title{margin:0;font-size:var(--solaris-h-5);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight)}.solaris-section__description{margin:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-section__content{min-width:0;font-size:var(--solaris-fs-16)}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], density: [{
+                type: Input
+            }] } });
+
+class SolarisDivider {
+    label;
+    inset = false;
+    spacing = 'none';
+    variant = 'solid';
+    strength = 'normal';
+    orientation = 'horizontal';
+    labelAlign = 'center';
+    hostClass = 'solaris-divider-host';
+    get ariaOrientation() {
+        return this.orientation === 'vertical' ? 'vertical' : 'horizontal';
+    }
+    get hasLabel() {
+        return !!this.label && this.orientation === 'horizontal';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisDivider, isStandalone: true, selector: "solaris-divider", inputs: { label: "label", inset: "inset", spacing: "spacing", variant: "variant", strength: "strength", orientation: "orientation", labelAlign: ["label-align", "labelAlign"] }, host: { attributes: { "role": "separator" }, properties: { "class": "this.hostClass", "attr.aria-orientation": "this.ariaOrientation" } }, ngImport: i0, template: "<div\r\n  class=\"solaris-divider\"\r\n  [ngClass]=\"[\r\n    'orientation-' + orientation,\r\n    'spacing-' + spacing,\r\n    'strength-' + strength,\r\n    'variant-' + variant,\r\n    inset ? 'is-inset' : '',\r\n    hasLabel ? 'has-label' : '',\r\n    hasLabel ? 'label-' + labelAlign : ''\r\n  ]\">\r\n  @if (hasLabel) {\r\n    <span class=\"solaris-divider__line\"></span>\r\n    <span class=\"solaris-divider__label\">{{ label }}</span>\r\n    <span class=\"solaris-divider__line\"></span>\r\n  }\r\n</div>\r\n", styles: [":host.solaris-divider-host{display:block}.solaris-divider{--solaris-divider-thickness: 1px;--solaris-divider-label-fs: var(--solaris-fs-12);--solaris-divider-inset-x: var(--solaris-space-8);--solaris-divider-label-gap: var(--solaris-space-3);--solaris-divider-color: var(--solaris-color-border);--solaris-divider-label-color: var(--solaris-color-text-muted);opacity:1}.solaris-divider.strength-soft{opacity:.65}.solaris-divider.orientation-horizontal:not(.has-label){width:100%;height:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.orientation-vertical:not(.has-label){height:100%;align-self:stretch;width:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.variant-dashed.orientation-horizontal:not(.has-label){height:0;background:transparent;border-top:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.variant-dashed.orientation-vertical:not(.has-label){width:0;background:transparent;border-left:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.is-inset.orientation-horizontal{width:auto;margin-inline:var(--solaris-divider-inset-x)}.solaris-divider.is-inset.orientation-vertical{height:auto;margin-block:var(--solaris-divider-inset-x)}.solaris-divider.spacing-none{margin:0}.solaris-divider.orientation-horizontal.spacing-sm{margin-block:var(--solaris-space-3)}.solaris-divider.orientation-horizontal.spacing-md{margin-block:var(--solaris-space-6)}.solaris-divider.orientation-horizontal.spacing-lg{margin-block:var(--solaris-space-8)}.solaris-divider.orientation-vertical.spacing-sm{margin-inline:var(--solaris-space-3)}.solaris-divider.orientation-vertical.spacing-md{margin-inline:var(--solaris-space-6)}.solaris-divider.orientation-vertical.spacing-lg{margin-inline:var(--solaris-space-8)}.solaris-divider.has-label{width:100%;display:flex;align-items:center;gap:var(--solaris-divider-label-gap)}.solaris-divider.has-label .solaris-divider__label{white-space:nowrap;text-transform:uppercase;letter-spacing:var(--solaris-ls-md);line-height:var(--solaris-lh-normal);color:var(--solaris-divider-label-color);font-size:var(--solaris-divider-label-fs)}.solaris-divider.has-label .solaris-divider__line{flex:1;min-width:0;height:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.variant-dashed.has-label .solaris-divider__line{height:0;background:transparent;border-top:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.label-start .solaris-divider__line:first-child{flex:.35}.solaris-divider.label-start .solaris-divider__line:last-child{flex:1}.solaris-divider.label-center .solaris-divider__line,.solaris-divider.label-end .solaris-divider__line:first-child{flex:1}.solaris-divider.label-end .solaris-divider__line:last-child{flex:.35}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisDivider, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-divider', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, host: { role: 'separator' }, template: "<div\r\n  class=\"solaris-divider\"\r\n  [ngClass]=\"[\r\n    'orientation-' + orientation,\r\n    'spacing-' + spacing,\r\n    'strength-' + strength,\r\n    'variant-' + variant,\r\n    inset ? 'is-inset' : '',\r\n    hasLabel ? 'has-label' : '',\r\n    hasLabel ? 'label-' + labelAlign : ''\r\n  ]\">\r\n  @if (hasLabel) {\r\n    <span class=\"solaris-divider__line\"></span>\r\n    <span class=\"solaris-divider__label\">{{ label }}</span>\r\n    <span class=\"solaris-divider__line\"></span>\r\n  }\r\n</div>\r\n", styles: [":host.solaris-divider-host{display:block}.solaris-divider{--solaris-divider-thickness: 1px;--solaris-divider-label-fs: var(--solaris-fs-12);--solaris-divider-inset-x: var(--solaris-space-8);--solaris-divider-label-gap: var(--solaris-space-3);--solaris-divider-color: var(--solaris-color-border);--solaris-divider-label-color: var(--solaris-color-text-muted);opacity:1}.solaris-divider.strength-soft{opacity:.65}.solaris-divider.orientation-horizontal:not(.has-label){width:100%;height:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.orientation-vertical:not(.has-label){height:100%;align-self:stretch;width:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.variant-dashed.orientation-horizontal:not(.has-label){height:0;background:transparent;border-top:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.variant-dashed.orientation-vertical:not(.has-label){width:0;background:transparent;border-left:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.is-inset.orientation-horizontal{width:auto;margin-inline:var(--solaris-divider-inset-x)}.solaris-divider.is-inset.orientation-vertical{height:auto;margin-block:var(--solaris-divider-inset-x)}.solaris-divider.spacing-none{margin:0}.solaris-divider.orientation-horizontal.spacing-sm{margin-block:var(--solaris-space-3)}.solaris-divider.orientation-horizontal.spacing-md{margin-block:var(--solaris-space-6)}.solaris-divider.orientation-horizontal.spacing-lg{margin-block:var(--solaris-space-8)}.solaris-divider.orientation-vertical.spacing-sm{margin-inline:var(--solaris-space-3)}.solaris-divider.orientation-vertical.spacing-md{margin-inline:var(--solaris-space-6)}.solaris-divider.orientation-vertical.spacing-lg{margin-inline:var(--solaris-space-8)}.solaris-divider.has-label{width:100%;display:flex;align-items:center;gap:var(--solaris-divider-label-gap)}.solaris-divider.has-label .solaris-divider__label{white-space:nowrap;text-transform:uppercase;letter-spacing:var(--solaris-ls-md);line-height:var(--solaris-lh-normal);color:var(--solaris-divider-label-color);font-size:var(--solaris-divider-label-fs)}.solaris-divider.has-label .solaris-divider__line{flex:1;min-width:0;height:var(--solaris-divider-thickness);background:var(--solaris-divider-color)}.solaris-divider.variant-dashed.has-label .solaris-divider__line{height:0;background:transparent;border-top:var(--solaris-divider-thickness) dashed var(--solaris-divider-color)}.solaris-divider.label-start .solaris-divider__line:first-child{flex:.35}.solaris-divider.label-start .solaris-divider__line:last-child{flex:1}.solaris-divider.label-center .solaris-divider__line,.solaris-divider.label-end .solaris-divider__line:first-child{flex:1}.solaris-divider.label-end .solaris-divider__line:last-child{flex:.35}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], inset: [{
+                type: Input
+            }], spacing: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], strength: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], labelAlign: [{
+                type: Input,
+                args: [{ alias: 'label-align' }]
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], ariaOrientation: [{
+                type: HostBinding,
+                args: ['attr.aria-orientation']
+            }] } });
+
+class SolarisHeaderDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisHeaderDirective, isStandalone: true, selector: "[solaris-header]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-header]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisFooterDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisFooterDirective, isStandalone: true, selector: "[solaris-footer]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-footer]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisBodyDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisBodyDirective, isStandalone: true, selector: "[solaris-body]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-body]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisPageComponent {
+    stickyHeader = false;
+    container = 'contained';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisPageComponent, isStandalone: true, selector: "solaris-page", inputs: { stickyHeader: "stickyHeader", container: "container" }, host: { classAttribute: "solaris-page-host" }, ngImport: i0, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\r\n  <header class=\"solaris-page__header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\r\n    <ng-content select=\"[solaris-header]\"></ng-content>\r\n    @if (stickyHeader) { <solaris-divider class=\"solaris-page__header-divider\"/> }\r\n  </header>\r\n\r\n  <main class=\"solaris-page__body\">\r\n    <ng-content select=\"[solaris-body]\"></ng-content>\r\n  </main>\r\n\r\n  <footer class=\"solaris-page__footer\">\r\n    <solaris-divider class=\"solaris-page__footer-divider\"/>\r\n\r\n    <div class=\"solaris-page__footer-content\">\r\n      <ng-content select=\"[solaris-footer]\"></ng-content>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host.solaris-page-host{display:block}.solaris-page{--solaris-page-gap: var(--solaris-space-8);--solaris-header-gap: var(--solaris-space-4);--solaris-footer-gap: var(--solaris-space-4);--solaris-page-padding-x: var(--solaris-space-8);--solaris-page-padding-y: var(--solaris-space-8);display:grid;min-height:100%;gap:var(--solaris-page-gap);color:var(--solaris-color-text);grid-template-rows:auto 1fr auto;padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x)}.solaris-page.container-contained{margin-inline:auto}.solaris-page.container-fluid{max-width:none}.solaris-page__header{display:flex;flex-direction:column;gap:var(--solaris-header-gap)}.solaris-page__header.is-sticky{position:sticky;top:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:var(--solaris-z-sticky, 100);padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x) var(--solaris-space-4)}.solaris-page__body{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-footer-gap);padding-top:var(--solaris-space-4)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SolarisDivider, selector: "solaris-divider", inputs: ["label", "inset", "spacing", "variant", "strength", "orientation", "label-align"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-page', standalone: true, imports: [NgClass, SolarisDivider], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'solaris-page-host',
+                    }, template: "<div class=\"solaris-page\" [ngClass]=\"['container-' + container]\">\r\n  <header class=\"solaris-page__header\" [ngClass]=\"{ 'is-sticky': stickyHeader }\">\r\n    <ng-content select=\"[solaris-header]\"></ng-content>\r\n    @if (stickyHeader) { <solaris-divider class=\"solaris-page__header-divider\"/> }\r\n  </header>\r\n\r\n  <main class=\"solaris-page__body\">\r\n    <ng-content select=\"[solaris-body]\"></ng-content>\r\n  </main>\r\n\r\n  <footer class=\"solaris-page__footer\">\r\n    <solaris-divider class=\"solaris-page__footer-divider\"/>\r\n\r\n    <div class=\"solaris-page__footer-content\">\r\n      <ng-content select=\"[solaris-footer]\"></ng-content>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host.solaris-page-host{display:block}.solaris-page{--solaris-page-gap: var(--solaris-space-8);--solaris-header-gap: var(--solaris-space-4);--solaris-footer-gap: var(--solaris-space-4);--solaris-page-padding-x: var(--solaris-space-8);--solaris-page-padding-y: var(--solaris-space-8);display:grid;min-height:100%;gap:var(--solaris-page-gap);color:var(--solaris-color-text);grid-template-rows:auto 1fr auto;padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x)}.solaris-page.container-contained{margin-inline:auto}.solaris-page.container-fluid{max-width:none}.solaris-page__header{display:flex;flex-direction:column;gap:var(--solaris-header-gap)}.solaris-page__header.is-sticky{position:sticky;top:0;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);z-index:var(--solaris-z-sticky, 100);padding:var(--solaris-page-padding-y) var(--solaris-page-padding-x) var(--solaris-space-4)}.solaris-page__body{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--solaris-footer-gap);padding-top:var(--solaris-space-4)}\n"] }]
+        }], propDecorators: { stickyHeader: [{
+                type: Input
+            }], container: [{
+                type: Input
+            }] } });
+
+class SolarisPageHeaderDescriptionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeaderDescriptionDirective, isStandalone: true, selector: "[solaris-page-header-description]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-page-header-description]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisPageHeaderBreadcrumbDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderBreadcrumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeaderBreadcrumbDirective, isStandalone: true, selector: "[solaris-page-header-breadcrumb]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderBreadcrumbDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-page-header-breadcrumb]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisPageHeaderTitleDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeaderTitleDirective, isStandalone: true, selector: "[solaris-page-header-title]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-page-header-title]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisPageHeaderTitle {
+    title = '';
+    overline;
+    description;
+    size = 'lg';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisPageHeaderTitle, isStandalone: true, selector: "solaris-page-header-title", inputs: { title: "title", overline: "overline", description: "description", size: "size" }, ngImport: i0, template: "<div class=\"solaris-page-title\" [ngClass]=\"['size-' + size]\">\r\n  @if (overline) {\r\n    <div class=\"solaris-page-title__overline\">{{ overline }}</div>\r\n  }\r\n\r\n  <h1 class=\"solaris-page-title__title\">{{ title }}</h1>\r\n\r\n  @if (description) {\r\n    <p class=\"solaris-page-title__description\">{{ description }}</p>\r\n  }\r\n</div>\r\n", styles: [".solaris-page-title{--solaris-page-title-gap: var(--solaris-space-2);min-width:0;display:flex;flex-direction:column;gap:var(--solaris-page-title-gap)}.solaris-page-title__overline{text-transform:uppercase;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-page-title__title{margin:0;color:var(--solaris-color-text);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);min-width:0}.solaris-page-title__description{margin:0;min-width:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-page-title.size-lg .solaris-page-title__title{font-size:var(--solaris-h-2)}.solaris-page-title.size-md .solaris-page-title__title{font-size:var(--solaris-h-4)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderTitle, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-page-header-title', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-page-title\" [ngClass]=\"['size-' + size]\">\r\n  @if (overline) {\r\n    <div class=\"solaris-page-title__overline\">{{ overline }}</div>\r\n  }\r\n\r\n  <h1 class=\"solaris-page-title__title\">{{ title }}</h1>\r\n\r\n  @if (description) {\r\n    <p class=\"solaris-page-title__description\">{{ description }}</p>\r\n  }\r\n</div>\r\n", styles: [".solaris-page-title{--solaris-page-title-gap: var(--solaris-space-2);min-width:0;display:flex;flex-direction:column;gap:var(--solaris-page-title-gap)}.solaris-page-title__overline{text-transform:uppercase;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-normal);letter-spacing:var(--solaris-ls-md);color:var(--solaris-color-text-muted)}.solaris-page-title__title{margin:0;color:var(--solaris-color-text);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);min-width:0}.solaris-page-title__description{margin:0;min-width:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-page-title.size-lg .solaris-page-title__title{font-size:var(--solaris-h-2)}.solaris-page-title.size-md .solaris-page-title__title{font-size:var(--solaris-h-4)}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], overline: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class SolarisPageHeaderActionsDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeaderActionsDirective, isStandalone: true, selector: "[solaris-page-header-actions]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeaderActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-page-header-actions]',
+                    standalone: true,
+                }]
+        }] });
+
+class SolarisPageHeader {
+    layout = 'split';
+    density = 'md';
+    titleSlot;
+    actionsSlot;
+    breadcrumbSlot;
+    descriptionSlot;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPageHeader, isStandalone: true, selector: "solaris-page-header", inputs: { layout: "layout", density: "density" }, queries: [{ propertyName: "titleSlot", first: true, predicate: SolarisPageHeaderTitleDirective, descendants: true }, { propertyName: "actionsSlot", first: true, predicate: SolarisPageHeaderActionsDirective, descendants: true }, { propertyName: "breadcrumbSlot", first: true, predicate: SolarisPageHeaderBreadcrumbDirective, descendants: true }, { propertyName: "descriptionSlot", first: true, predicate: SolarisPageHeaderDescriptionDirective, descendants: true }], ngImport: i0, template: "<header class=\"solaris-page-header\" [ngClass]=\"['layout-' + layout, 'density-' + density]\">\r\n  <div class=\"solaris-page-header__left\">\r\n    <div class=\"solaris-page-header__breadcrumb\">\r\n      <ng-content select=\"[solaris-page-header-breadcrumb]\" />\r\n    </div>\r\n\r\n    <div class=\"solaris-page-header__titles\">\r\n      <div class=\"solaris-page-header__title-row\">\r\n        <h1 class=\"solaris-page-header__title\">\r\n          <span class=\"solaris-page-header__title-slot\">\r\n            <ng-content select=\"[solaris-page-header-title]\" />\r\n          </span>\r\n\r\n          <span class=\"solaris-page-header__title-meta\">\r\n            <ng-content select=\"[solaris-page-header-title-meta]\" />\r\n          </span>\r\n        </h1>\r\n\r\n        <div class=\"solaris-page-header__title-meta\">\r\n          <ng-content select=\"[solaris-page-header-title-meta]\" />\r\n        </div>\r\n      </div>\r\n\r\n      <p class=\"solaris-page-header__description\">\r\n        <ng-content select=\"[solaris-page-header-description]\" />\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"solaris-page-header__actions\">\r\n    <ng-content select=\"[solaris-page-header-actions]\" />\r\n  </div>\r\n</header>\r\n", styles: [".solaris-page-header{--solaris-page-header-gap: var(--solaris-space-6);--solaris-page-header-left-gap: var(--solaris-space-3);--solaris-page-header-title-gap: var(--solaris-space-2);min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-page-header-gap)}.solaris-page-header__breadcrumb:empty,.solaris-page-header__actions:empty,.solaris-page-header__title:empty,.solaris-page-header__description:empty{display:none}.solaris-page-header.density-sm{--solaris-page-header-gap: var(--solaris-space-4);--solaris-page-header-left-gap: var(--solaris-space-2)}.solaris-page-header.density-md{--solaris-page-header-gap: var(--solaris-space-6);--solaris-page-header-left-gap: var(--solaris-space-3)}.solaris-page-header.density-lg{--solaris-page-header-gap: var(--solaris-space-8);--solaris-page-header-left-gap: var(--solaris-space-12)}.solaris-page-header.layout-stacked{align-items:stretch;flex-direction:column}.solaris-page-header__left{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page-header__breadcrumb{min-width:0}.solaris-page-header__titles{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-page-header-title-gap)}.solaris-page-header__title{margin:0;min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);font-size:var(--solaris-h-2);color:var(--solaris-color-text);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight)}.solaris-page-header__title-slot{min-width:0;display:inline-flex;align-items:center;gap:var(--solaris-space-3)}.solaris-page-header__title-content{min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-3)}.solaris-page-header__title-content>[solaris-page-header-title]{display:inline-flex;align-items:center;gap:var(--solaris-space-3);min-width:0}.solaris-page-header__title-content solaris-badge{align-self:center}.solaris-page-header__description{margin:0;min-width:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-page-header__actions{display:flex;flex:0 0 auto;align-items:center;gap:var(--solaris-space-3)}@media(max-width:64rem){.solaris-page-header.layout-split{align-items:stretch;flex-direction:column}.solaris-page-header__actions{justify-content:flex-start}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPageHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-page-header', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header class=\"solaris-page-header\" [ngClass]=\"['layout-' + layout, 'density-' + density]\">\r\n  <div class=\"solaris-page-header__left\">\r\n    <div class=\"solaris-page-header__breadcrumb\">\r\n      <ng-content select=\"[solaris-page-header-breadcrumb]\" />\r\n    </div>\r\n\r\n    <div class=\"solaris-page-header__titles\">\r\n      <div class=\"solaris-page-header__title-row\">\r\n        <h1 class=\"solaris-page-header__title\">\r\n          <span class=\"solaris-page-header__title-slot\">\r\n            <ng-content select=\"[solaris-page-header-title]\" />\r\n          </span>\r\n\r\n          <span class=\"solaris-page-header__title-meta\">\r\n            <ng-content select=\"[solaris-page-header-title-meta]\" />\r\n          </span>\r\n        </h1>\r\n\r\n        <div class=\"solaris-page-header__title-meta\">\r\n          <ng-content select=\"[solaris-page-header-title-meta]\" />\r\n        </div>\r\n      </div>\r\n\r\n      <p class=\"solaris-page-header__description\">\r\n        <ng-content select=\"[solaris-page-header-description]\" />\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"solaris-page-header__actions\">\r\n    <ng-content select=\"[solaris-page-header-actions]\" />\r\n  </div>\r\n</header>\r\n", styles: [".solaris-page-header{--solaris-page-header-gap: var(--solaris-space-6);--solaris-page-header-left-gap: var(--solaris-space-3);--solaris-page-header-title-gap: var(--solaris-space-2);min-width:0;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-page-header-gap)}.solaris-page-header__breadcrumb:empty,.solaris-page-header__actions:empty,.solaris-page-header__title:empty,.solaris-page-header__description:empty{display:none}.solaris-page-header.density-sm{--solaris-page-header-gap: var(--solaris-space-4);--solaris-page-header-left-gap: var(--solaris-space-2)}.solaris-page-header.density-md{--solaris-page-header-gap: var(--solaris-space-6);--solaris-page-header-left-gap: var(--solaris-space-3)}.solaris-page-header.density-lg{--solaris-page-header-gap: var(--solaris-space-8);--solaris-page-header-left-gap: var(--solaris-space-12)}.solaris-page-header.layout-stacked{align-items:stretch;flex-direction:column}.solaris-page-header__left{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--solaris-space-8)}.solaris-page-header__breadcrumb{min-width:0}.solaris-page-header__titles{min-width:0;display:flex;flex-direction:column;gap:var(--solaris-page-header-title-gap)}.solaris-page-header__title{margin:0;min-width:0;display:flex;align-items:center;gap:var(--solaris-space-3);font-size:var(--solaris-h-2);color:var(--solaris-color-text);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight)}.solaris-page-header__title-slot{min-width:0;display:inline-flex;align-items:center;gap:var(--solaris-space-3)}.solaris-page-header__title-content{min-width:0;align-items:center;display:inline-flex;gap:var(--solaris-space-3)}.solaris-page-header__title-content>[solaris-page-header-title]{display:inline-flex;align-items:center;gap:var(--solaris-space-3);min-width:0}.solaris-page-header__title-content solaris-badge{align-self:center}.solaris-page-header__description{margin:0;min-width:0;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text-muted)}.solaris-page-header__actions{display:flex;flex:0 0 auto;align-items:center;gap:var(--solaris-space-3)}@media(max-width:64rem){.solaris-page-header.layout-split{align-items:stretch;flex-direction:column}.solaris-page-header__actions{justify-content:flex-start}}\n"] }]
+        }], propDecorators: { layout: [{
+                type: Input
+            }], density: [{
+                type: Input
+            }], titleSlot: [{
+                type: ContentChild,
+                args: [SolarisPageHeaderTitleDirective]
+            }], actionsSlot: [{
+                type: ContentChild,
+                args: [SolarisPageHeaderActionsDirective]
+            }], breadcrumbSlot: [{
+                type: ContentChild,
+                args: [SolarisPageHeaderBreadcrumbDirective]
+            }], descriptionSlot: [{
+                type: ContentChild,
+                args: [SolarisPageHeaderDescriptionDirective]
+            }] } });
+
+class SolarisButtonGroupDirective {
+    attr = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisButtonGroupDirective, isStandalone: true, selector: "[solaris-button-group]", host: { properties: { "attr.solaris-button-group": "this.attr" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-button-group]',
+                    standalone: true,
+                }]
+        }], propDecorators: { attr: [{
+                type: HostBinding,
+                args: ['attr.solaris-button-group']
+            }] } });
+
+class SolarisButtonDirective {
+    el = inject((ElementRef));
+    isAnchor = computed(() => this.el.nativeElement.tagName.toLowerCase() === 'a', ...(ngDevMode ? [{ debugName: "isAnchor" }] : []));
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _iconOnly = signal(false, ...(ngDevMode ? [{ debugName: "_iconOnly" }] : []));
+    _fullWidth = signal(false, ...(ngDevMode ? [{ debugName: "_fullWidth" }] : []));
+    _size = signal('md', ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _color = signal('primary', ...(ngDevMode ? [{ debugName: "_color" }] : []));
+    _variant = signal('solid', ...(ngDevMode ? [{ debugName: "_variant" }] : []));
+    set size(v) { if (v)
+        this._size.set(v); }
+    set color(v) { if (v)
+        this._color.set(v); }
+    set fullWidth(v) {
+        this._fullWidth.set(v);
+    }
+    set variant(v) { if (v)
+        this._variant.set(v); }
+    set loading(v) { this._loading.set(v); }
+    set disabled(v) { this._disabled.set(v); }
+    set iconOnly(v) { this._iconOnly.set(v); }
+    get tabIndex() {
+        return this.isAnchor() && (this._disabled() || this._loading()) ? -1 : null;
+    }
+    get nativeDisabled() {
+        const isButton = !this.isAnchor();
+        return isButton && (this._disabled() || this._loading()) ? '' : null;
+    }
+    attr = '';
+    get ariaDisabled() {
+        return this.isAnchor() && (this._disabled() || this._loading()) ? 'true' : null;
+    }
+    get dataSize() { return this._size(); }
+    get dataColor() { return this._color(); }
+    get dataVariant() { return this._variant(); }
+    get ariaBusy() { return this._loading() ? 'true' : null; }
+    get dataIconOnly() { return this._iconOnly() ? 'true' : null; }
+    get dataFullWidth() { return this._fullWidth() ? 'true' : null; }
+    onClick(ev) {
+        if (!this.isAnchor())
+            return;
+        if (this._disabled() || this._loading()) {
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.1", type: SolarisButtonDirective, isStandalone: true, selector: "button[solaris-button], a[solaris-button]", inputs: { size: "size", color: "color", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], variant: "variant", loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], iconOnly: ["iconOnly", "iconOnly", booleanAttribute] }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.tabindex": "this.tabIndex", "attr.disabled": "this.nativeDisabled", "attr.solaris-button": "this.attr", "attr.aria-disabled": "this.ariaDisabled", "attr.data-size": "this.dataSize", "attr.data-color": "this.dataColor", "attr.data-variant": "this.dataVariant", "attr.aria-busy": "this.ariaBusy", "attr.data-icon-only": "this.dataIconOnly", "attr.data-full-width": "this.dataFullWidth" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[solaris-button], a[solaris-button]',
+                    standalone: true,
+                }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], variant: [{
+                type: Input
+            }], loading: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], iconOnly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], nativeDisabled: [{
+                type: HostBinding,
+                args: ['attr.disabled']
+            }], attr: [{
+                type: HostBinding,
+                args: ['attr.solaris-button']
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ['attr.aria-disabled']
+            }], dataSize: [{
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], dataColor: [{
+                type: HostBinding,
+                args: ['attr.data-color']
+            }], dataVariant: [{
+                type: HostBinding,
+                args: ['attr.data-variant']
+            }], ariaBusy: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
+            }], dataIconOnly: [{
+                type: HostBinding,
+                args: ['attr.data-icon-only']
+            }], dataFullWidth: [{
+                type: HostBinding,
+                args: ['attr.data-full-width']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+function sanitizePhoneInput(v) {
+    let s = (v ?? '').replace(/[^\d+\-\s().]/g, '');
+    s = s.replace(/\+/g, (_m, offset) => (offset === 0 ? '+' : ''));
+    return s;
+}
+function insertAtCursor(input, text) {
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    input.value = input.value.slice(0, start) + text + input.value.slice(end);
+    const pos = start + text.length;
+    input.setSelectionRange(pos, pos);
+}
+function enforceMaxDigitsInPlace(input, maxDigits) {
+    if (!maxDigits)
+        return;
+    const v = input.value ?? '';
+    const sanitized = sanitizePhoneInput(v);
+    const digits = (sanitized.match(/\d/g) ?? []).length;
+    if (digits <= maxDigits) {
+        if (sanitized !== v)
+            input.value = sanitized;
+        return;
+    }
+    let digitCount = 0;
+    let out = '';
+    for (const ch of sanitized) {
+        if (/\d/.test(ch)) {
+            if (digitCount >= maxDigits)
+                break;
+            digitCount++;
+        }
+        out += ch;
+    }
+    input.value = out;
+}
+function shouldBlockBeforeInput(ev, cfg) {
+    return !!ev.data && !cfg.allowedChars.test(ev.data);
+}
+function shouldBlockKeyDown(ev) {
+    if (ev.ctrlKey || ev.metaKey || ev.altKey)
+        return false;
+    const k = ev.key;
+    const allowedControl = [
+        'Backspace', 'Delete', 'Tab', 'Enter', 'Escape',
+        'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End',
+    ];
+    if (allowedControl.includes(k))
+        return false;
+    if (/^\d$/.test(k))
+        return false;
+    return !(k === '+' || k === '-' || k === ' ' || k === '(' || k === ')' || k === '.');
+}
+
+function buildCallingCodeIndex() {
+    const m = new Map();
+    for (const c of getCountries()) {
+        const code = getCountryCallingCode(c);
+        const arr = m.get(code) ?? [];
+        arr.push(c.toLowerCase());
+        m.set(code, arr);
+    }
+    return m;
+}
+function pickIso2ForCallingCode(callingCode, selectedIso2, index, preferredCountries) {
+    const list = index.get(callingCode) ?? [];
+    if (!list.length)
+        return null;
+    const sel = selectedIso2?.toLowerCase() ?? null;
+    if (sel && list.includes(sel))
+        return sel;
+    if (callingCode === '1') {
+        if (list.includes('us'))
+            return 'us';
+        if (list.includes('ca'))
+            return 'ca';
+    }
+    const preferred = (preferredCountries ?? []).map((x) => x.toLowerCase());
+    for (const p of preferred) {
+        if (list.includes(p))
+            return p;
+    }
+    return list[0] ?? null;
+}
+function getInitialCountryFromBrowser(fallbackIso2) {
+    const lang = globalThis?.navigator?.language ?? '';
+    const region = lang.split('-')[1]?.toLowerCase() ?? '';
+    return region.length === 2 ? region : fallbackIso2;
+}
+
+const SOLARIS_INPUT = new InjectionToken('SOLARIS_INPUT');
+
+class InputTextDirective {
+    el = inject((ElementRef));
+    attr = '';
+    get placeholderAttr() {
+        return this.el.nativeElement.getAttribute('placeholder');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InputTextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: InputTextDirective, isStandalone: true, selector: "input[solaris-input],textarea[solaris-input]", host: { properties: { "attr.solaris-input": "this.attr", "attr.placeholder": "this.placeholderAttr" } }, providers: [
+            {
+                provide: SOLARIS_INPUT,
+                useFactory: () => {
+                    const el = inject((ElementRef)).nativeElement;
+                    return {
+                        element: el,
+                        setType: (type) => {
+                            if (el instanceof HTMLInputElement)
+                                el.type = type;
+                        },
+                        getType: () => (el instanceof HTMLInputElement ? el.type : 'textarea'),
+                    };
+                },
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: InputTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[solaris-input],textarea[solaris-input]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: SOLARIS_INPUT,
+                            useFactory: () => {
+                                const el = inject((ElementRef)).nativeElement;
+                                return {
+                                    element: el,
+                                    setType: (type) => {
+                                        if (el instanceof HTMLInputElement)
+                                            el.type = type;
+                                    },
+                                    getType: () => (el instanceof HTMLInputElement ? el.type : 'textarea'),
+                                };
+                            },
+                        },
+                    ],
+                }]
+        }], propDecorators: { attr: [{
+                type: HostBinding,
+                args: ['attr.solaris-input']
+            }], placeholderAttr: [{
+                type: HostBinding,
+                args: ['attr.placeholder']
+            }] } });
+
+class SolarisPhoneInput {
+    renderer = inject(Renderer2);
+    marker = '';
+    inputRef;
+    set placeholder(v) {
+        this._placeholder = v;
+        this.applyPlaceholderIfCustom();
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    format = 'e164';
+    onlyCountries;
+    defaultCountry = 'br';
+    preferredCountries;
+    _raw = '';
+    maxDigits;
+    _placeholder;
+    _disabled = false;
+    iti = null;
+    _lastE164 = null;
+    allowedChars = /^[0-9+\-\s().]*$/;
+    callingCodeIndex = new Map();
+    onChange = () => { };
+    onTouched = () => { };
+    onValidatorChange;
+    ngAfterViewInit() {
+        const el = this.el;
+        if (!el)
+            return;
+        this.callingCodeIndex = buildCallingCodeIndex();
+        this.initIntlTelInput(el);
+        this.setupListeners(el);
+        if (this._raw)
+            el.value = this._raw;
+        this.normalizeAndFormat(true);
+        this.recalculateLimits();
+        this.afterUtilsReady();
+    }
+    ngOnDestroy() {
+        const el = this.el;
+        if (el)
+            this.teardownListeners(el);
+        this.iti?.destroy?.();
+        this.iti = null;
+    }
+    writeValue(value) {
+        this._lastE164 = value ?? null;
+        const el = this.el;
+        if (!el)
+            return;
+        if (!value) {
+            this._raw = '';
+            el.value = '';
+            this.recomputeFromRaw(true);
+            return;
+        }
+        const iso2 = this.getSelectedIso2();
+        const cc = iso2 ? iso2.toUpperCase() : undefined;
+        const parsed = parsePhoneNumberFromString(value, cc);
+        const next = parsed ? parsed.formatNational() : value;
+        this._raw = next;
+        el.value = next;
+        this.recomputeFromRaw(true);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled = isDisabled;
+        const el = this.el;
+        if (el)
+            el.disabled = isDisabled;
+    }
+    validate() {
+        if (!this._raw?.trim())
+            return null;
+        return this._lastE164 ? null : { solarisPhone: true };
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    onInput(silent = false) {
+        this.normalizeAndFormat(silent);
+    }
+    onBlur() {
+        this.onTouched();
+        const el = this.el;
+        if (!el)
+            return;
+        this._raw = el.value ?? '';
+        this.recomputeFromRaw(false);
+    }
+    onFocus() {
+        const el = this.el;
+        if (!el || this._disabled)
+            return;
+        if ((el.value ?? '').trim().length)
+            return;
+        const dial = this.getSelectedDialCode();
+        if (!dial)
+            return;
+        const v = `+${dial} `;
+        el.value = v;
+        this._raw = v;
+        queueMicrotask(() => el.setSelectionRange(v.length, v.length));
+        this.recomputeFromRaw(false);
+    }
+    normalizeAndFormat(silent) {
+        const el = this.el;
+        if (!el)
+            return;
+        const raw = sanitizePhoneInput(el.value ?? '');
+        const selectedIso2 = this.getSelectedIso2();
+        const selectedCountry = selectedIso2 ? selectedIso2.toUpperCase() : undefined;
+        const ayt = raw.trim().startsWith('+')
+            ? new AsYouType()
+            : new AsYouType(selectedCountry);
+        const formatted = ayt.input(raw);
+        el.value = formatted;
+        this._raw = formatted;
+        const number = ayt.getNumber();
+        if (number?.countryCallingCode && this.iti) {
+            const nextIso2 = pickIso2ForCallingCode(number.countryCallingCode, selectedIso2, this.callingCodeIndex, this.preferredCountries);
+            if (nextIso2 && nextIso2 !== selectedIso2) {
+                this.setCountrySafely(nextIso2);
+            }
+        }
+        enforceMaxDigitsInPlace(el, this.maxDigits);
+        this.recomputeFromRaw(silent);
+    }
+    recomputeFromRaw(silent) {
+        const raw = (this._raw ?? '').trim();
+        if (!raw) {
+            this._lastE164 = null;
+            if (!silent)
+                this.emit(null);
+            return;
+        }
+        const iso2 = this.getSelectedIso2();
+        const cc = iso2 ? iso2.toUpperCase() : undefined;
+        const parsed = raw.startsWith('+')
+            ? parsePhoneNumberFromString(raw)
+            : parsePhoneNumberFromString(raw, cc);
+        if (parsed?.isValid()) {
+            this._lastE164 = parsed.number;
+            if (!silent)
+                this.emit(parsed.number);
+            return;
+        }
+        this._lastE164 = null;
+        if (!silent)
+            this.emit(null);
+    }
+    emit(v) {
+        this.onChange(v);
+        this.onValidatorChange?.();
+    }
+    initIntlTelInput(el) {
+        const options = {
+            initialCountry: getInitialCountryFromBrowser((this.defaultCountry || 'br').toLowerCase()),
+            separateDialCode: false,
+            nationalMode: false,
+            formatOnDisplay: true,
+            autoPlaceholder: 'aggressive',
+            loadUtils: () => import('intl-tel-input/build/js/utils.js'),
+        };
+        const only = this.onlyCountries?.map((x) => x.toLowerCase());
+        if (only?.length)
+            options['onlyCountries'] = only;
+        const preferred = this.preferredCountries?.map((x) => x.toLowerCase());
+        if (preferred?.length)
+            options['preferredCountries'] = preferred;
+        this.iti = intlTelInput(el, options);
+        this.applyPlaceholderIfCustom();
+    }
+    afterUtilsReady() {
+        const itiAny = this.iti;
+        const p = itiAny?.promise;
+        const run = () => {
+            const iso2 = this.getSelectedIso2();
+            if (iso2)
+                this.setCountrySafely(iso2);
+            this.recalculateLimits();
+        };
+        if (p?.then)
+            p.then(run);
+        else
+            queueMicrotask(run);
+    }
+    setCountrySafely(iso2) {
+        try {
+            this.iti?.setCountry?.(iso2);
+        }
+        catch { }
+    }
+    recalculateLimits() {
+        this.updateMaxDigits();
+        const el = this.el;
+        if (el)
+            enforceMaxDigitsInPlace(el, this.maxDigits);
+    }
+    updateMaxDigits() {
+        if (!this.iti) {
+            this.maxDigits = undefined;
+            return;
+        }
+        const c = this.iti.getSelectedCountryData?.();
+        const iso2 = String(c?.iso2 ?? '').toLowerCase();
+        const dialDigits = String(c?.dialCode ?? '').replace(/\D/g, '').length;
+        const u = this.getUtils();
+        const exNationalDigits = this.safe(() => {
+            if (!u?.getExampleNumber)
+                return undefined;
+            const t = u.numberType?.MOBILE;
+            const ex = u.getExampleNumber?.(iso2, true, t);
+            return ex ? (String(ex).match(/\d/g) ?? []).length : undefined;
+        });
+        if (exNationalDigits && exNationalDigits > 0) {
+            this.maxDigits = dialDigits + exNationalDigits;
+            return;
+        }
+        const el = this.el;
+        const ph = el?.getAttribute('placeholder') ?? '';
+        const phDigits = (ph.match(/\d/g) ?? []).length;
+        this.maxDigits = phDigits > 0 ? phDigits : undefined;
+    }
+    setupListeners(el) {
+        el.addEventListener('beforeinput', this.onBeforeInput);
+        el.addEventListener('keydown', this.onKeyDown);
+        el.addEventListener('paste', this.onPaste);
+        el.addEventListener('countrychange', this.onCountryChange);
+    }
+    teardownListeners(el) {
+        el.removeEventListener('beforeinput', this.onBeforeInput);
+        el.removeEventListener('keydown', this.onKeyDown);
+        el.removeEventListener('paste', this.onPaste);
+        el.removeEventListener('countrychange', this.onCountryChange);
+    }
+    onCountryChange = () => {
+        this.recalculateLimits();
+        const el = this.el;
+        if (!el || !(el.value ?? '').trim())
+            return;
+        this._raw = el.value ?? '';
+        this.normalizeAndFormat(false);
+    };
+    onBeforeInput = (ev) => {
+        if (shouldBlockBeforeInput(ev, { allowedChars: this.allowedChars })) {
+            ev.preventDefault();
+        }
+    };
+    onKeyDown = (ev) => {
+        if (shouldBlockKeyDown(ev))
+            ev.preventDefault();
+    };
+    onPaste = (ev) => {
+        const el = this.el;
+        if (!el)
+            return;
+        const text = ev.clipboardData?.getData('text') ?? '';
+        if (!text)
+            return;
+        const sanitized = sanitizePhoneInput(text);
+        if (sanitized === text)
+            return;
+        ev.preventDefault();
+        insertAtCursor(el, sanitized);
+        queueMicrotask(() => {
+            this.recalculateLimits();
+            this.normalizeAndFormat(false);
+        });
+    };
+    applyPlaceholderIfCustom() {
+        const el = this.el;
+        if (!el)
+            return;
+        const ph = this._placeholder?.trim();
+        if (ph)
+            this.renderer.setAttribute(el, 'placeholder', ph);
+    }
+    getSelectedIso2() {
+        try {
+            const data = this.iti?.getSelectedCountryData?.();
+            return data?.iso2?.toLowerCase() ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    getSelectedDialCode() {
+        try {
+            const data = this.iti?.getSelectedCountryData?.();
+            return data?.dialCode ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    getUtils() {
+        return globalThis.intlTelInputUtils;
+    }
+    safe(fn) {
+        try {
+            return fn();
+        }
+        catch {
+            return undefined;
+        }
+    }
+    get el() {
+        return this.inputRef?.nativeElement ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPhoneInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPhoneInput, isStandalone: true, selector: "solaris-phone-input", inputs: { placeholder: "placeholder", format: "format", onlyCountries: ["only-countries", "onlyCountries"], defaultCountry: ["default-country", "defaultCountry"], preferredCountries: ["preferred-countries", "preferredCountries"] }, host: { properties: { "attr.solaris-phone-input": "this.marker" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SolarisPhoneInput),
+                multi: true,
+            },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: forwardRef(() => SolarisPhoneInput),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input\r\n  #input\r\n  solaris-input\r\n  type=\"tel\"\r\n  [disabled]=\"_disabled\"\r\n  (focus)=\"onFocus()\"\r\n  (input)=\"onInput()\"\r\n  (blur)=\"onBlur()\"\r\n/>\r\n", styles: [":host{min-width:0;width:100%;display:block}:host ::ng-deep .iti{width:100%}:host ::ng-deep .iti__flag-container{width:3.8rem;height:3.8rem;display:grid;place-items:center;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}:host ::ng-deep .iti__selected-flag{padding:0;width:100%;height:100%;display:grid;place-items:center;border-radius:var(--solaris-radius-sm)}:host ::ng-deep .iti__arrow{margin-left:.4rem;opacity:.5}:host ::ng-deep input[type=tel]{height:3.8rem;padding-left:var(--solaris-space-3)!important}:host ::ng-deep .iti input[type=tel]{padding-left:calc(3.8rem + var(--solaris-space-5))!important}:host ::ng-deep .iti__country-container{border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}:host ::ng-deep .iti__dropdown-content{width:100%;max-width:32rem;margin-top:.4rem;background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-radius-md);box-shadow:var(--solaris-shadow-lg);overflow:hidden}:host ::ng-deep .iti__search-input{border:0;width:100%;outline:none;height:3.2rem;color:var(--solaris-color-text);padding:0 var(--solaris-space-10);background:var(--solaris-color-surface);border-bottom:1px solid var(--solaris-color-border)}:host ::ng-deep .iti__search-input::placeholder{opacity:1;color:color-mix(in srgb,var(--solaris-color-text) 45%,transparent)}:host ::ng-deep .iti__country-list{max-height:22rem;margin:0}:host ::ng-deep .iti__country{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3)}:host ::ng-deep .iti__country:hover{background:color-mix(in srgb,var(--solaris-color-primary) 12%,transparent)}:host ::ng-deep .iti__country.iti__active{background:color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}:host ::ng-deep .iti__flag-box{width:2rem;display:grid;height:1.4rem;place-items:center}:host ::ng-deep .iti__country-name{font:inherit;font-size:var(--solaris-fs-12);color:var(--solaris-color-text)}:host ::ng-deep .iti__dial-code{color:color-mix(in srgb,var(--solaris-color-text) 55%,transparent);font-variant-numeric:tabular-nums}\n"], dependencies: [{ kind: "directive", type: InputTextDirective, selector: "input[solaris-input],textarea[solaris-input]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPhoneInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-phone-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SolarisPhoneInput),
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => SolarisPhoneInput),
+                            multi: true,
+                        },
+                    ], imports: [InputTextDirective], template: "<input\r\n  #input\r\n  solaris-input\r\n  type=\"tel\"\r\n  [disabled]=\"_disabled\"\r\n  (focus)=\"onFocus()\"\r\n  (input)=\"onInput()\"\r\n  (blur)=\"onBlur()\"\r\n/>\r\n", styles: [":host{min-width:0;width:100%;display:block}:host ::ng-deep .iti{width:100%}:host ::ng-deep .iti__flag-container{width:3.8rem;height:3.8rem;display:grid;place-items:center;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}:host ::ng-deep .iti__selected-flag{padding:0;width:100%;height:100%;display:grid;place-items:center;border-radius:var(--solaris-radius-sm)}:host ::ng-deep .iti__arrow{margin-left:.4rem;opacity:.5}:host ::ng-deep input[type=tel]{height:3.8rem;padding-left:var(--solaris-space-3)!important}:host ::ng-deep .iti input[type=tel]{padding-left:calc(3.8rem + var(--solaris-space-5))!important}:host ::ng-deep .iti__country-container{border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}:host ::ng-deep .iti__dropdown-content{width:100%;max-width:32rem;margin-top:.4rem;background:var(--solaris-color-surface);border:1px solid var(--solaris-color-border);border-radius:var(--solaris-radius-md);box-shadow:var(--solaris-shadow-lg);overflow:hidden}:host ::ng-deep .iti__search-input{border:0;width:100%;outline:none;height:3.2rem;color:var(--solaris-color-text);padding:0 var(--solaris-space-10);background:var(--solaris-color-surface);border-bottom:1px solid var(--solaris-color-border)}:host ::ng-deep .iti__search-input::placeholder{opacity:1;color:color-mix(in srgb,var(--solaris-color-text) 45%,transparent)}:host ::ng-deep .iti__country-list{max-height:22rem;margin:0}:host ::ng-deep .iti__country{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:var(--solaris-space-2);padding:var(--solaris-space-2) var(--solaris-space-3)}:host ::ng-deep .iti__country:hover{background:color-mix(in srgb,var(--solaris-color-primary) 12%,transparent)}:host ::ng-deep .iti__country.iti__active{background:color-mix(in srgb,var(--solaris-color-primary) 18%,transparent)}:host ::ng-deep .iti__flag-box{width:2rem;display:grid;height:1.4rem;place-items:center}:host ::ng-deep .iti__country-name{font:inherit;font-size:var(--solaris-fs-12);color:var(--solaris-color-text)}:host ::ng-deep .iti__dial-code{color:color-mix(in srgb,var(--solaris-color-text) 55%,transparent);font-variant-numeric:tabular-nums}\n"] }]
+        }], propDecorators: { marker: [{
+                type: HostBinding,
+                args: ['attr.solaris-phone-input']
+            }], inputRef: [{
+                type: ViewChild,
+                args: ['input', { static: false }]
+            }], placeholder: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], onlyCountries: [{
+                type: Input,
+                args: [{ alias: 'only-countries' }]
+            }], defaultCountry: [{
+                type: Input,
+                args: [{ alias: 'default-country' }]
+            }], preferredCountries: [{
+                type: Input,
+                args: [{ alias: 'preferred-countries' }]
+            }] } });
+
+const SOLARIS_FORM_FIELD_FEATURES = new InjectionToken('SOLARIS_FORM_FIELD_FEATURES');
+
+class SolarisFormFieldController {
+    features = inject(SOLARIS_FORM_FIELD_FEATURES, { optional: true }) ?? [];
+    ngForm = inject(NgForm, { optional: true });
+    formGroupDir = inject(FormGroupDirective, { optional: true });
+    submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
+    control = signal(null, ...(ngDevMode ? [{ debugName: "control" }] : []));
+    email = signal(null, ...(ngDevMode ? [{ debugName: "email" }] : []));
+    password = signal(null, ...(ngDevMode ? [{ debugName: "password" }] : []));
+    constructor() {
+        effect(() => {
+            const fgSubmitted = this.formGroupDir?.submitted ?? false;
+            const nfSubmitted = this.ngForm?.submitted ?? false;
+            this.submitted.set(fgSubmitted || nfSubmitted);
+        });
+    }
+    registerPassword(dir) {
+        this.password.set(dir);
+    }
+    registerEmail(dir) {
+        this.email.set(dir);
+    }
+    registerControl(ctrl) {
+        if (!ctrl && this.control())
+            return;
+        this.control.set(ctrl);
+    }
+    passwordVisible() {
+        return this.password()?.visible() ?? false;
+    }
+    togglePasswordVisibility() {
+        this.password()?.toggle();
+    }
+    resetSubmitted() {
+        this.submitted.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisFormFieldController, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [], propDecorators: { ngForm: [{
+                type: Optional
+            }], formGroupDir: [{
+                type: Optional
+            }] } });
+
+class SolarisPasswordDirective {
+    minLength = 8;
+    requireUpper = true;
+    requireLower = true;
+    requireNumber = true;
+    requireSpecial = false;
+    set requireUpperKebab(v) { this.requireUpper = coerceBoolean(v); this._onChange?.(); }
+    set requireLowerKebab(v) { this.requireLower = coerceBoolean(v); this._onChange?.(); }
+    set requireNumberKebab(v) { this.requireNumber = coerceBoolean(v); this._onChange?.(); }
+    set minLengthKebab(v) { this.minLength = coerceNumber(v, 8); this._onChange?.(); }
+    set requireSpecialKebab(v) { this.requireSpecial = coerceBoolean(v); this._onChange?.(); }
+    get type() {
+        return this.visible() ? 'text' : 'password';
+    }
+    spellcheck = 'false';
+    marker = '';
+    solarisInput = '';
+    autocapitalize = 'none';
+    autocomplete = 'current-password';
+    field = inject(SolarisFormFieldController, { optional: true });
+    visible = signal(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    _onChange;
+    constructor() {
+        this.field?.registerPassword(this);
+    }
+    toggle() {
+        this.visible.set(!this.visible());
+    }
+    validate(control) {
+        const v = String(control.value ?? '');
+        if (!v)
+            return null;
+        const errors = {};
+        if (this.minLength && v.length < this.minLength) {
+            errors.minLength = { requiredLength: this.minLength, actualLength: v.length };
+        }
+        if (this.requireLower && !/[a-z]/.test(v))
+            errors.lowercase = true;
+        if (this.requireUpper && !/[A-Z]/.test(v))
+            errors.uppercase = true;
+        if (this.requireNumber && !/\d/.test(v))
+            errors.number = true;
+        if (this.requireSpecial && !/[^\w\s]/.test(v))
+            errors.special = true;
+        return Object.keys(errors).length ? { solarisPassword: errors } : null;
+    }
+    registerOnValidatorChange(fn) {
+        this._onChange = fn;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPasswordDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPasswordDirective, isStandalone: true, selector: "input[solaris-password],input[solarisPassword]", inputs: { minLength: "minLength", requireUpper: "requireUpper", requireLower: "requireLower", requireNumber: "requireNumber", requireSpecial: "requireSpecial", requireUpperKebab: "requireUpperKebab", requireLowerKebab: "requireLowerKebab", requireNumberKebab: "requireNumberKebab", minLengthKebab: "minLengthKebab", requireSpecialKebab: "requireSpecialKebab" }, host: { properties: { "attr.type": "this.type", "attr.spellcheck": "this.spellcheck", "attr.solaris-password": "this.marker", "attr.solaris-input": "this.solarisInput", "attr.autocapitalize": "this.autocapitalize", "attr.autocomplete": "this.autocomplete" } }, providers: [
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SolarisPasswordDirective), multi: true },
+            { provide: SOLARIS_FORM_FIELD_FEATURES, useValue: { kind: 'password' }, multi: true }
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPasswordDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[solaris-password],input[solarisPassword]',
+                    standalone: true,
+                    providers: [
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SolarisPasswordDirective), multi: true },
+                        { provide: SOLARIS_FORM_FIELD_FEATURES, useValue: { kind: 'password' }, multi: true }
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { minLength: [{
+                type: Input
+            }], requireUpper: [{
+                type: Input
+            }], requireLower: [{
+                type: Input
+            }], requireNumber: [{
+                type: Input
+            }], requireSpecial: [{
+                type: Input
+            }], requireUpperKebab: [{
+                type: Input
+            }], requireLowerKebab: [{
+                type: Input
+            }], requireNumberKebab: [{
+                type: Input
+            }], minLengthKebab: [{
+                type: Input
+            }], requireSpecialKebab: [{
+                type: Input
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], spellcheck: [{
+                type: HostBinding,
+                args: ['attr.spellcheck']
+            }], marker: [{
+                type: HostBinding,
+                args: ['attr.solaris-password']
+            }], solarisInput: [{
+                type: HostBinding,
+                args: ['attr.solaris-input']
+            }], autocapitalize: [{
+                type: HostBinding,
+                args: ['attr.autocapitalize']
+            }], autocomplete: [{
+                type: HostBinding,
+                args: ['attr.autocomplete']
+            }], field: [{
+                type: Optional
+            }] } });
+function coerceBoolean(v) {
+    return v === '' || v === true || v === 'true' || v === 1 || v === '1';
+}
+function coerceNumber(v, fallback) {
+    const n = Number(v);
+    return Number.isFinite(n) ? n : fallback;
+}
+
+class SolarisEmailDirective {
+    type = 'email';
+    inputmode = 'email';
+    spellcheck = 'false';
+    autocomplete = 'email';
+    solarisInput = '';
+    autocapitalize = 'none';
+    field = inject(SolarisFormFieldController, { optional: true });
+    constructor() {
+        this.field?.registerEmail(this);
+    }
+    validate(control) {
+        const v = String(control.value ?? '').trim();
+        if (!v)
+            return null;
+        const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
+        return ok ? null : { solarisEmail: true };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisEmailDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisEmailDirective, isStandalone: true, selector: "input[solaris-email],input[solarisEmail]", host: { properties: { "attr.type": "this.type", "attr.inputmode": "this.inputmode", "attr.spellcheck": "this.spellcheck", "attr.autocomplete": "this.autocomplete", "attr.solaris-input": "this.solarisInput", "attr.autocapitalize": "this.autocapitalize" } }, providers: [
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => SolarisEmailDirective), multi: true },
+            { provide: SOLARIS_FORM_FIELD_FEATURES, useValue: { kind: 'email' }, multi: true }
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisEmailDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[solaris-email],input[solarisEmail]',
+                    standalone: true,
+                    providers: [
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => SolarisEmailDirective), multi: true },
+                        { provide: SOLARIS_FORM_FIELD_FEATURES, useValue: { kind: 'email' }, multi: true }
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], inputmode: [{
+                type: HostBinding,
+                args: ['attr.inputmode']
+            }], spellcheck: [{
+                type: HostBinding,
+                args: ['attr.spellcheck']
+            }], autocomplete: [{
+                type: HostBinding,
+                args: ['attr.autocomplete']
+            }], solarisInput: [{
+                type: HostBinding,
+                args: ['attr.solaris-input']
+            }], autocapitalize: [{
+                type: HostBinding,
+                args: ['attr.autocapitalize']
+            }], field: [{
+                type: Optional
+            }] } });
+
+const SOLARIS_FORM_FIELD_CONTROLLER = new InjectionToken('SOLARIS_FORM_FIELD_CONTROLLER');
+
+class PasswordToggle {
+    solarisSuffix = '';
+    field = inject(SOLARIS_FORM_FIELD_CONTROLLER, { optional: true });
+    visible = () => this.field?.passwordVisible() ?? false;
+    toggle() {
+        this.field?.togglePasswordVisibility();
+    }
+    get ariaLabelHide() { return 'Hide password'; }
+    get ariaLabelShow() { return 'Show password'; }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: PasswordToggle, isStandalone: true, selector: "solaris-password-toggle", host: { properties: { "attr.solaris-suffix": "this.solarisSuffix" } }, ngImport: i0, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n        [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n  @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n  @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-md);outline:.2rem solid color-mix(in srgb,var(--solaris-color-primary) 35%,transparent)}.solaris-password-toggle i.ph{font-size:var(--solaris-fs-14)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: PasswordToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-password-toggle', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"solaris-password-toggle\" type=\"button\" (click)=\"toggle()\" [attr.aria-pressed]=\"visible() ? 'true' : 'false'\"\r\n        [attr.aria-label]=\"visible() ? ariaLabelHide : ariaLabelShow\">\r\n  @if (visible()) { <i class=\"ph ph-eye-slash\"></i> }\r\n  @else { <i class=\"ph ph-eye\"></i> }\r\n</button>\r\n", styles: [".solaris-password-toggle{border:0;opacity:.6;display:grid;width:3.8rem;height:3.8rem;cursor:pointer;place-items:center;background:transparent;color:var(--solaris-color-text-muted);transition:opacity .16s ease,filter .16s ease}.solaris-password-toggle:hover,.solaris-password-toggle:focus-visible{opacity:1;filter:brightness(1.1)}.solaris-password-toggle:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-md);outline:.2rem solid color-mix(in srgb,var(--solaris-color-primary) 35%,transparent)}.solaris-password-toggle i.ph{font-size:var(--solaris-fs-14)}\n"] }]
+        }], propDecorators: { solarisSuffix: [{
+                type: HostBinding,
+                args: ['attr.solaris-suffix']
+            }], field: [{
+                type: Optional
+            }] } });
+
+class SolarisControlBridgeDirective {
+    ctrl = inject(NgControl, { optional: true });
+    field = inject(SolarisFormFieldController, { optional: true });
+    constructor() {
+        if (this.ctrl)
+            this.field?.registerControl(this.ctrl);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisControlBridgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisControlBridgeDirective, isStandalone: true, selector: "input[solaris-password],input[solaris-email],input[solaris-input],textarea[solaris-input]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisControlBridgeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[solaris-password],input[solaris-email],input[solaris-input],textarea[solaris-input]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { ctrl: [{
+                type: Optional
+            }], field: [{
+                type: Optional
+            }] } });
+
+class SolarisPrefixDirective {
+    attr = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisPrefixDirective, isStandalone: true, selector: "[solaris-prefix]", host: { properties: { "attr.solaris-prefix": "this.attr" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-prefix]',
+                }]
+        }], propDecorators: { attr: [{
+                type: HostBinding,
+                args: ['attr.solaris-prefix']
+            }] } });
+
+class SolarisSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: SolarisSuffixDirective, isStandalone: true, selector: "[solaris-suffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[solaris-suffix]',
+                    standalone: true
+                }]
+        }] });
+
+class FieldErrorComponent {
+    text;
+    textKey;
+    textParams;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FieldErrorComponent, isStandalone: true, selector: "solaris-field-error", inputs: { text: "text", textKey: "textKey", textParams: "textParams" }, ngImport: i0, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n  <span class=\"solaris-field-error__text\">\r\n    @if (textKey) { {{ textKey | translate:textParams }} }\r\n    @else { {{ text }} }\r\n  </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"], dependencies: [{ kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FieldErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-field-error', standalone: true, imports: [SolarisTranslationPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-field-error\" role=\"alert\" aria-live=\"polite\">\r\n  <span class=\"solaris-field-error__text\">\r\n    @if (textKey) { {{ textKey | translate:textParams }} }\r\n    @else { {{ text }} }\r\n  </span>\r\n</div>\r\n", styles: [".solaris-field-error{line-height:1.25;padding-left:.5rem;font-size:var(--solaris-fs-10);color:var(--solaris-color-error)}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], textKey: [{
+                type: Input
+            }], textParams: [{
+                type: Input
+            }] } });
+
+class FormField {
+    field = inject(SolarisFormFieldController);
+    prefix;
+    suffix;
+    hint = '';
+    label = '';
+    hintKey = '';
+    labelKey = '';
+    invalid = null;
+    showErrors = 'dirtyOrTouched';
+    get hasPrefix() { return !!this.prefix; }
+    get hasSuffix() { return !!this.suffix; }
+    getDirectErrorKey(errors) {
+        if (errors['required'])
+            return 'ui.solaris.validation.required';
+        if (errors['email'] || errors['solarisEmail'])
+            return 'ui.solaris.validation.email';
+        return '';
+    }
+    getPasswordErrorKey(bag) {
+        if (bag?.minLength)
+            return 'ui.solaris.validation.password.minLength';
+        if (bag?.uppercase)
+            return 'ui.solaris.validation.password.uppercase';
+        if (bag?.lowercase)
+            return 'ui.solaris.validation.password.lowercase';
+        if (bag?.number)
+            return 'ui.solaris.validation.password.number';
+        if (bag?.special)
+            return 'ui.solaris.validation.password.special';
+        return 'ui.solaris.validation.password.invalid';
+    }
+    showPasswordToggle = computed(() => !!this.field.password(), ...(ngDevMode ? [{ debugName: "showPasswordToggle" }] : []));
+    errorParams = computed(() => {
+        if (!this.invalidComputed())
+            return undefined;
+        const errors = this.field.control()?.errors;
+        if (!errors)
+            return undefined;
+        const bag = errors['solarisPassword'];
+        if (bag?.minLength)
+            return { requiredLength: bag.minLength.requiredLength };
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "errorParams" }] : []));
+    invalidComputed = computed(() => {
+        if (this.invalid !== null)
+            return this.invalid;
+        const c = this.field.control();
+        if (!c)
+            return false;
+        if (this.showErrors === 'always')
+            return !!c.invalid;
+        if (this.showErrors === 'submitted')
+            return !!(c.invalid && this.field.submitted());
+        return !!(c.invalid && (c.touched || c.dirty));
+    }, ...(ngDevMode ? [{ debugName: "invalidComputed" }] : []));
+    errorKey = computed(() => {
+        if (!this.invalidComputed())
+            return '';
+        const c = this.field.control();
+        console.log('status', c?.status, 'errors', c?.errors, 'value', c?.value);
+        const errors = this.field.control()?.errors;
+        if (!errors)
+            return '';
+        const direct = this.getDirectErrorKey(errors);
+        if (direct)
+            return direct;
+        if (errors['solarisPassword'])
+            return this.getPasswordErrorKey(errors['solarisPassword']);
+        return 'solaris.validation.invalid';
+    }, ...(ngDevMode ? [{ debugName: "errorKey" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: FormField, isStandalone: true, selector: "solaris-form-field", inputs: { hint: "hint", label: "label", hintKey: "hintKey", labelKey: "labelKey", invalid: "invalid", showErrors: "showErrors" }, providers: [
+            SolarisFormFieldController,
+            { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController }
+        ], queries: [{ propertyName: "prefix", first: true, predicate: SolarisPrefixDirective, descendants: true }, { propertyName: "suffix", first: true, predicate: SolarisSuffixDirective, descendants: true }], ngImport: i0, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\"\r\n     [attr.data-invalid]=\"invalidComputed() ? 'true' : null\">\r\n  @if ((label || labelKey)) {\r\n    <label class=\"solaris-form-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} }\r\n      @else if (label) { {{ label }} }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"solaris-form-field__frame\">\r\n    @if (hasPrefix) {\r\n      <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n        <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"solaris-form-field__body\">\r\n      <div class=\"solaris-form-field__control-slot\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n\r\n      @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n        <span class=\"solaris-form-field__suffix\">\r\n          <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n          @if (showPasswordToggle()) {\r\n            <solaris-password-toggle></solaris-password-toggle>\r\n          }\r\n\r\n          @if (invalidComputed()) {\r\n            <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n              <i class=\"ph ph-warning-circle\"></i>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (errorKey()) {\r\n    <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n  } @else {\r\n    <ng-content select=\"[form-field-message]\"></ng-content>\r\n  }\r\n\r\n  @if (hint || hintKey) {\r\n    <div class=\"solaris-form-field__hint\">\r\n      @if (hintKey) { {{ hintKey | translate }} }\r\n      @else { {{ hint }} }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2)}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:1.9rem}.solaris-form-field__prefix svg{width:1.9rem;height:1.9rem}.solaris-form-field__body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;position:relative;padding-left:var(--solaris-space-3);padding-right:0}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;align-items:center;flex:1 1 auto}.solaris-form-field__control-slot>*{flex:1 1 0;min-width:0;width:100%}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;outline:none;width:100%;min-width:0;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){align-self:stretch;display:inline-flex;align-items:center;height:3.6rem}.solaris-form-field__status{width:3.8rem;height:3.8rem;display:grid;place-items:center;color:var(--solaris-color-error);opacity:.95}.solaris-form-field__status i.ph{font-size:1.9rem;line-height:1}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}\n"], dependencies: [{ kind: "component", type: PasswordToggle, selector: "solaris-password-toggle" }, { kind: "component", type: FieldErrorComponent, selector: "solaris-field-error", inputs: ["text", "textKey", "textParams"] }, { kind: "pipe", type: SolarisTranslationPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'solaris-form-field', standalone: true, imports: [
+                        PasswordToggle,
+                        FieldErrorComponent,
+                        SolarisTranslationPipe
+                    ], providers: [
+                        SolarisFormFieldController,
+                        { provide: SOLARIS_FORM_FIELD_CONTROLLER, useExisting: SolarisFormFieldController }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"solaris-form-field\" [class.solaris-form-field--has-prefix]=\"hasPrefix\"\r\n     [attr.data-invalid]=\"invalidComputed() ? 'true' : null\">\r\n  @if ((label || labelKey)) {\r\n    <label class=\"solaris-form-field__label\">\r\n      @if (labelKey) { {{ labelKey | translate }} }\r\n      @else if (label) { {{ label }} }\r\n    </label>\r\n  }\r\n\r\n  <div class=\"solaris-form-field__frame\">\r\n    @if (hasPrefix) {\r\n      <span class=\"solaris-form-field__prefix\" aria-hidden=\"true\">\r\n        <ng-content select=\"[solaris-prefix]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <div class=\"solaris-form-field__body\">\r\n      <div class=\"solaris-form-field__control-slot\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n\r\n      @if (hasSuffix || showPasswordToggle() || invalidComputed()) {\r\n        <span class=\"solaris-form-field__suffix\">\r\n          <ng-content select=\"[solaris-suffix]\"></ng-content>\r\n\r\n          @if (showPasswordToggle()) {\r\n            <solaris-password-toggle></solaris-password-toggle>\r\n          }\r\n\r\n          @if (invalidComputed()) {\r\n            <span class=\"solaris-form-field__status\" aria-hidden=\"true\">\r\n              <i class=\"ph ph-warning-circle\"></i>\r\n            </span>\r\n          }\r\n        </span>\r\n      }\r\n    </div>\r\n  </div>\r\n\r\n  @if (errorKey()) {\r\n    <solaris-field-error [textKey]=\"errorKey()\" [textParams]=\"errorParams()\"></solaris-field-error>\r\n  } @else {\r\n    <ng-content select=\"[form-field-message]\"></ng-content>\r\n  }\r\n\r\n  @if (hint || hintKey) {\r\n    <div class=\"solaris-form-field__hint\">\r\n      @if (hintKey) { {{ hintKey | translate }} }\r\n      @else { {{ hint }} }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".solaris-form-field{display:grid;gap:var(--solaris-space-2)}.solaris-form-field__label{font-weight:600;font-size:var(--solaris-fs-14);color:var(--solaris-color-text);margin-left:var(--solaris-space-1)}.solaris-form-field__frame{display:grid;min-height:3.8rem;align-items:stretch;grid-template-columns:1fr;border-radius:var(--solaris-radius-sm);background:var(--solaris-color-surface-2);border:1px solid var(--solaris-color-border);transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease}.solaris-form-field--has-prefix .solaris-form-field__frame{grid-template-columns:3.8rem 1fr}.solaris-form-field__prefix{opacity:.5;display:grid;width:3.8rem;line-height:0;place-items:center;font-size:var(--solaris-fs-14);color:var(--solaris-color-text-muted);transition:opacity .3s ease,filter .3s ease;border-right:1px solid color-mix(in srgb,var(--solaris-color-border) 85%,transparent)}.solaris-form-field__frame:hover .solaris-form-field__prefix,.solaris-form-field__frame:focus-within .solaris-form-field__prefix{opacity:1;filter:brightness(1.05)}.solaris-form-field__prefix :is(i,svg,[solarisPrefixIcon]){display:block;line-height:1}.solaris-form-field__prefix i.ph{opacity:.6;font-size:1.9rem}.solaris-form-field__prefix svg{width:1.9rem;height:1.9rem}.solaris-form-field__body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;position:relative;padding-left:var(--solaris-space-3);padding-right:0}.solaris-form-field__control-slot{width:100%;min-width:0;display:flex;align-items:center;flex:1 1 auto}.solaris-form-field__control-slot>*{flex:1 1 0;min-width:0;width:100%}.solaris-form-field__control-slot :is(input,textarea){margin:0;border:0;outline:none;width:100%;min-width:0;padding:.9rem 0;background:transparent;font-size:var(--solaris-fs-14);line-height:var(--solaris-lh-normal);color:var(--solaris-color-text)}.solaris-form-field__control-slot :is(input,textarea)::placeholder{opacity:.9;color:var(--solaris-color-text-muted)}.solaris-form-field__suffix{display:inline-flex;align-items:center;justify-content:center;padding-right:var(--solaris-space-3);gap:var(--solaris-space-2)}.solaris-form-field__suffix :is(button,a){align-self:stretch;display:inline-flex;align-items:center;height:3.6rem}.solaris-form-field__status{width:3.8rem;height:3.8rem;display:grid;place-items:center;color:var(--solaris-color-error);opacity:.95}.solaris-form-field__status i.ph{font-size:1.9rem;line-height:1}.solaris-form-field__hint{font-size:var(--solaris-fs-12);color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:is(input,textarea)[disabled]){opacity:.45}.solaris-form-field__frame:has(:is(input,textarea)[disabled]) .solaris-form-field__prefix,.solaris-form-field__frame:has(:is(input,textarea)[disabled]) :is(.solaris-form-field__label,.solaris-form-field__hint){color:var(--solaris-color-text-muted)}.solaris-form-field__frame:has(:focus-visible){box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-primary) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-primary) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame{box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 5%,transparent);border-color:color-mix(in srgb,var(--solaris-color-error) 70%,var(--solaris-color-border))}.solaris-form-field[data-invalid=true] .solaris-form-field__frame:focus-within{border-color:color-mix(in srgb,var(--solaris-color-error) 80%,var(--solaris-color-border));box-shadow:0 0 .5rem .25rem color-mix(in srgb,var(--solaris-color-error) 16%,transparent)}.solaris-form-field[data-invalid=true] .solaris-form-field__prefix{border-right-color:color-mix(in srgb,var(--solaris-color-error) 30%,var(--solaris-color-border));color:color-mix(in srgb,var(--solaris-color-error) 75%,var(--solaris-color-text-muted))}.solaris-form-field[data-invalid=true] .solaris-form-field__control-slot :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--solaris-color-error) 45%,var(--solaris-color-text-muted))}.solaris-form-field__body:has(solaris-phone-input){padding-left:0}\n"] }]
+        }], propDecorators: { prefix: [{
+                type: ContentChild,
+                args: [SolarisPrefixDirective]
+            }], suffix: [{
+                type: ContentChild,
+                args: [SolarisSuffixDirective]
+            }], hint: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hintKey: [{
+                type: Input
+            }], labelKey: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], showErrors: [{
+                type: Input
+            }] } });
+
+/// <reference path="./typings/intl-tel-input-utils.d.ts" />
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SOLARIS_COMPONENTS_VERSION };
+export { FieldErrorComponent, FormField, InputTextDirective, PasswordToggle, SOLARIS_FORM_FIELD_CONTROLLER, SOLARIS_FORM_FIELD_FEATURES, SOLARIS_INPUT, SolarisBadge, SolarisBodyDirective, SolarisBreadcrumb, SolarisButtonDirective, SolarisButtonGroupDirective, SolarisControlBridgeDirective, SolarisDivider, SolarisEmailDirective, SolarisFooterDirective, SolarisFormFieldController, SolarisHeaderDirective, SolarisPageComponent, SolarisPageHeader, SolarisPageHeaderBreadcrumbDirective, SolarisPageHeaderDescriptionDirective, SolarisPageHeaderTitle, SolarisPageHeaderTitleDirective, SolarisPasswordDirective, SolarisPhoneInput, SolarisPrefixDirective, SolarisSectionComponent, SolarisSuffixDirective, SolarisTab, SolarisTabs };
 //# sourceMappingURL=educarehq-solaris-components.mjs.map