@bspk/ui-ngx 1.2.2 → 1.2.4

package/fesm2022/bspk-ui-ngx.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, output, input, model, contentChildren, createComponent, computed, inject, ElementRef, Renderer2, EnvironmentInjector, signal, effect, Directive, viewChild, EventEmitter, Output, ChangeDetectionStrategy, ViewContainerRef, DestroyRef, TemplateRef, Injectable, DOCUMENT as DOCUMENT$1 } from '@angular/core';
+import { Input, ViewEncapsulation, Component, output, input, model, contentChildren, computed, inject, ElementRef, Renderer2, EnvironmentInjector, signal, effect, createComponent, Directive, viewChild, EventEmitter, DOCUMENT as DOCUMENT$1, Output, ChangeDetectionStrategy, ViewContainerRef, DestroyRef, Injectable } from '@angular/core';
 import { computePosition, arrow, offset, flip, size, autoUpdate } from '@floating-ui/dom';
 import { parse, isValid, format, addDays, addMonths, isSameDay, startOfToday, addYears, startOfWeek, startOfMonth, endOfWeek, endOfMonth, eachDayOfInterval } from 'date-fns';
 import { getCountryCallingCode, AsYouType } from 'libphonenumber-js';
@@ -61865,19 +61865,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 /**
  * A utility component representing a single section within an accordion.
  *
- * @ignore
+ * @name AccordionSection
+ * @phase Utility
  */
 class UIAccordionSection {
+    /**
+     * Emits the id of the accordion section when its header is clicked to toggle open/closed state. The parent
+     * accordion component listens for this event to manage which sections are open.
+     */
     toggleOpen = output();
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
     subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
-    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     id = input(uniqueId('accordion-section'), ...(ngDevMode ? [{ debugName: "id" }] : []));
     leading = input(undefined, ...(ngDevMode ? [{ debugName: "leading" }] : []));
     trailing = input(undefined, ...(ngDevMode ? [{ debugName: "trailing" }] : []));
+    /** Whether the accordion section is open or closed. This is managed internally by the component, but can be set */
+    isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIAccordionSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIAccordionSection, isStandalone: true, selector: "ui-accordion-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", isOpen: "isOpenChange" }, host: { attributes: { "data-bspk": "accordion-item" }, properties: { "attr.data-disabled": "disabled() ? true : null", "id": "id()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIAccordionSection, isStandalone: true, selector: "ui-accordion-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleOpen: "toggleOpen", isOpen: "isOpenChange" }, host: { attributes: { "data-bspk": "accordion-item" }, properties: { "attr.data-disabled": "disabled() ? true : null", "id": "id()" } }, ngImport: i0, template: `
         <button
             type="button"
             [attr.aria-controls]="id() + '-content'"
@@ -61974,7 +61980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <span data-divider></span>
     `,
                 }]
-        }], propDecorators: { toggleOpen: [{ type: i0.Output, args: ["toggleOpen"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], trailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing", required: false }] }] } });
+        }], propDecorators: { toggleOpen: [{ type: i0.Output, args: ["toggleOpen"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], trailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }] } });
 
 /**
  * A vertical stack of collapsible panels or that allows customers to expand or collapse each panel individually to
@@ -62013,17 +62019,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     }, styles: ["[data-bspk=accordion]{display:block;width:100%;padding:var(--spacing-sizing-02)}[data-bspk=accordion]:empty{display:none}[data-bspk=accordion]>[data-bspk=accordion-item]{--border-bottom-color: var(--stroke-neutral-base);display:flex;flex-direction:column;justify-content:center;color:var(--foreground-neutral-on-surface)}[data-bspk=accordion]>[data-bspk=accordion-item][data-disabled]{--border-bottom-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base));color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header]{display:flex;flex-direction:row;align-items:center;background:none;color:inherit;border:none;padding:0 var(--spacing-sizing-02);gap:var(--spacing-sizing-02);font:inherit;cursor:pointer;outline:none;min-height:var(--spacing-sizing-12)}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header] [data-title-subtitle]{display:flex;flex-direction:column;align-items:flex-start;flex:1}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header] [data-title-subtitle] [data-title]{font:var(--labels-base)}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header] [data-title-subtitle] [data-subtitle]{font:var(--body-x-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header] [data-arrow]{display:flex;align-items:center;justify-content:center;margin-left:var(--spacing-sizing-02)}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header] [data-arrow] svg{width:var(--spacing-sizing-06)}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header]:not(:disabled):hover{background-image:linear-gradient(var(--interactions-neutral-hover-opacity),var(--interactions-neutral-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header]:not(:disabled):active{background-image:linear-gradient(var(--interactions-neutral-press-opacity),var(--interactions-neutral-press-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=accordion]>[data-bspk=accordion-item] button[data-header]:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface);border-color:var(--stroke-neutral-disabled-light)}[data-bspk=accordion]>[data-bspk=accordion-item]:has(:focus-visible){outline:2px solid var(--stroke-neutral-focus);border-color:var(--stroke-neutral-focus);margin-bottom:1px}[data-bspk=accordion]>[data-bspk=accordion-item] [data-content]{padding:var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=accordion] [data-divider]{display:block;height:1px;width:calc(100% - var(--spacing-sizing-04));margin:-1px var(--spacing-sizing-02) 0;background-color:var(--border-bottom-color)}\n"] }]
         }], propDecorators: { singleOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleOpen", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => UIAccordionSection), { ...{ descendants: true }, isSignal: true }] }] } });
 
-function addComponent(env, component, tagName, hostElement) {
-    if (typeof document === 'undefined')
-        return null;
-    const componentElement = document.createElement(tagName);
-    (hostElement || document.body).appendChild(componentElement);
-    return createComponent(component, {
-        environmentInjector: env,
-        hostElement: componentElement,
-    });
-}
-
 /**
  * A utility to position an element relative to a reference element using floating UI logic.
  *
@@ -62089,6 +62084,16 @@ class FloatingUtility {
  * @phase Dev
  */
 class UITooltipDirective {
+    /**
+     * The value of the tooltip directive. Can be a string for simple usage or an object for more control.
+     *
+     * When using the truncated option, the tooltip will only show when the content is truncated and will use the text
+     * content of the reference element as the label. This is useful for cases like table cells where you want to show a
+     * tooltip only when the content is too long to fit.
+     *
+     * Note: When using the truncated option, the directive will add a data-truncated attribute to the host element.
+     * This can be used for styling purposes.
+     */
     value = model(undefined, ...(ngDevMode ? [{ debugName: "value", alias: 'ui-tooltip' }] : [{
             alias: 'ui-tooltip',
         }]));
@@ -62198,7 +62203,12 @@ class UITooltipDirective {
             !props.label) {
             return false;
         }
-        this.tooltipComponent = addComponent(this.env, UITooltip, 'ui-tooltip');
+        const componentElement = this.document.createElement('ui-tooltip');
+        this.document.body.appendChild(componentElement);
+        this.tooltipComponent = createComponent(UITooltip, {
+            environmentInjector: this.env,
+            hostElement: componentElement,
+        });
         if (this.tooltipEl)
             this.renderer.setStyle(this.tooltipEl, 'display', 'none');
         this.tooltipComponent.instance.id.set(this.tooltipId);
@@ -62232,7 +62242,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "ui-tooltip", required: false }] }, { type: i0.Output, args: ["ui-tooltipChange"] }] } });
-/** Single use component to display tooltip content. */
+/**
+ * Single use component to display tooltip content.
+ *
+ * @ignore
+ */
 class UITooltip {
     arrow = viewChild('arrow', ...(ngDevMode ? [{ debugName: "arrow" }] : []));
     id = signal(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
@@ -62270,18 +62284,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Utility to manage tooltip properties and behavior.
  *
  * Should be used in components that require tooltip functionality.
+ *
+ * @ignore
  */
 class TooltipUtility {
     renderer;
     env;
+    document;
     props = signal({}, ...(ngDevMode ? [{ debugName: "props" }] : []));
     tooltipId = uniqueId('tooltip');
     floating;
     computedPlacement = signal(null, ...(ngDevMode ? [{ debugName: "computedPlacement" }] : []));
     tooltipComponent;
-    constructor(renderer, env, props) {
+    constructor(renderer, env, props, document) {
         this.renderer = renderer;
         this.env = env;
+        this.document = document;
         this.updateProps(props);
         const host = props.reference;
         this.floating = new FloatingUtility(this.renderer);
@@ -62336,7 +62354,12 @@ class TooltipUtility {
             !props.label) {
             return false;
         }
-        this.tooltipComponent = addComponent(this.env, UITooltip, 'ui-tooltip');
+        const componentElement = this.document.createElement('ui-tooltip');
+        this.document.body.appendChild(componentElement);
+        this.tooltipComponent = createComponent(UITooltip, {
+            environmentInjector: this.env,
+            hostElement: componentElement,
+        });
         if (this.tooltipEl)
             this.renderer.setStyle(this.tooltipEl, 'display', 'none');
         this.tooltipComponent.instance.id.set(this.tooltipId);
@@ -62400,13 +62423,14 @@ class UIAvatar {
     size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : []));
     color = input('grey', ...(ngDevMode ? [{ debugName: "color" }] : []));
     initials = input(...(ngDevMode ? [undefined, { debugName: "initials" }] : []));
-    showIcon = input(false, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
     image = input(...(ngDevMode ? [undefined, { debugName: "image" }] : []));
     hideTooltip = input(false, ...(ngDevMode ? [{ debugName: "hideTooltip" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     renderer = inject(Renderer2);
     env = inject(EnvironmentInjector);
     host = inject((ElementRef));
+    document = inject(DOCUMENT$1);
     tooltipUtility;
     get computedInitials() {
         const initials = this.initials();
@@ -62429,7 +62453,7 @@ class UIAvatar {
                 label: this.name(),
                 reference: this.host.nativeElement,
                 placement: 'top',
-            });
+            }, this.document);
         }
     }
     onDestroy() {
@@ -62456,7 +62480,7 @@ class UIAvatar {
             <span aria-hidden="true" data-initials>
                 {{ computedInitials }}
             </span>
-        }`, isInline: true, styles: ["[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-10);border:var(--avatar-border);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:var(--radius-full);background-color:var(--background);color:var(--foreground);font:var(--font);flex-shrink:0;flex-grow:0;position:relative;--state-background: transparent}[data-bspk=avatar]:not([data-color]){--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low)}[data-bspk=avatar]:has(img){overflow:hidden;align-items:start;justify-content:start}[data-bspk=avatar] img{vertical-align:top;max-width:100%;height:auto}[data-bspk=avatar] svg{width:var(--svg-size);height:var(--svg-size)}[data-bspk=avatar] [data-icon]{display:flex;align-items:center;justify-content:center}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small);--svg-size: var(--spacing-sizing-04)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large);--svg-size: var(--spacing-sizing-06)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large);--svg-size: var(--spacing-sizing-08)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large);--svg-size: var(--spacing-sizing-12)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small);--svg-size: var(--spacing-sizing-15)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium);--svg-size: var(--spacing-sizing-17)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large);--svg-size: var(--spacing-sizing-18)}[data-bspk=avatar]:after{content:\"\";position:absolute;display:block;inset:0;border-radius:var(--radius-full);background:var(--state-background)}[data-bspk=avatar]:not([aria-disabled]):hover{--state-background: var(--interactions-neutral-hover-opacity)}[data-bspk=avatar]:not([aria-disabled]):active{--state-background: var(--interactions-neutral-press-opacity)}[data-bspk=avatar][aria-disabled]{opacity:.5;cursor:not-allowed}[data-bspk=avatar]:focus:not(:active){outline:2px solid var(--stroke-neutral-focus);outline-offset:-2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconPerson, selector: "icon-person", inputs: ["width"] }], encapsulation: i0.ViewEncapsulation.None });
+        }`, isInline: true, styles: ["[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-10);border:var(--avatar-border);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:var(--radius-full);background-color:var(--background);color:var(--foreground);font:var(--font);flex-shrink:0;flex-grow:0;position:relative;--state-background: transparent}[data-bspk=avatar]:not([data-color]){--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low)}[data-bspk=avatar]:has(img){overflow:hidden;align-items:start;justify-content:start}[data-bspk=avatar] img{vertical-align:top;max-width:100%;height:auto}[data-bspk=avatar] svg{width:var(--svg-size);height:var(--svg-size)}[data-bspk=avatar] [data-icon]{display:flex;align-items:center;justify-content:center}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small);--svg-size: var(--spacing-sizing-04)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large);--svg-size: var(--spacing-sizing-06)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large);--svg-size: var(--spacing-sizing-08)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large);--svg-size: var(--spacing-sizing-12)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small);--svg-size: var(--spacing-sizing-15)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium);--svg-size: var(--spacing-sizing-17)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large);--svg-size: var(--spacing-sizing-18)}[data-bspk=avatar]:after{content:\"\";position:absolute;display:block;inset:0;border-radius:var(--radius-full);background:var(--state-background)}[data-bspk=avatar]:not([aria-disabled])[role=button]:hover{--state-background: var(--interactions-neutral-hover-opacity)}[data-bspk=avatar]:not([aria-disabled])[role=button]:active{--state-background: var(--interactions-neutral-press-opacity)}[data-bspk=avatar][aria-disabled]{opacity:.5;cursor:not-allowed}[data-bspk=avatar]:focus:not(:active,[aria-disabled]){outline:2px solid var(--stroke-neutral-focus);outline-offset:-2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconPerson, selector: "icon-person", inputs: ["width"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIAvatar, decorators: [{
             type: Component,
@@ -62481,7 +62505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.data-size]': 'size()',
                         '(click)': 'handleOnClick($event)',
                         '(keydown)': 'handleKeyDown($event)',
-                    }, styles: ["[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-10);border:var(--avatar-border);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:var(--radius-full);background-color:var(--background);color:var(--foreground);font:var(--font);flex-shrink:0;flex-grow:0;position:relative;--state-background: transparent}[data-bspk=avatar]:not([data-color]){--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low)}[data-bspk=avatar]:has(img){overflow:hidden;align-items:start;justify-content:start}[data-bspk=avatar] img{vertical-align:top;max-width:100%;height:auto}[data-bspk=avatar] svg{width:var(--svg-size);height:var(--svg-size)}[data-bspk=avatar] [data-icon]{display:flex;align-items:center;justify-content:center}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small);--svg-size: var(--spacing-sizing-04)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large);--svg-size: var(--spacing-sizing-06)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large);--svg-size: var(--spacing-sizing-08)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large);--svg-size: var(--spacing-sizing-12)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small);--svg-size: var(--spacing-sizing-15)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium);--svg-size: var(--spacing-sizing-17)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large);--svg-size: var(--spacing-sizing-18)}[data-bspk=avatar]:after{content:\"\";position:absolute;display:block;inset:0;border-radius:var(--radius-full);background:var(--state-background)}[data-bspk=avatar]:not([aria-disabled]):hover{--state-background: var(--interactions-neutral-hover-opacity)}[data-bspk=avatar]:not([aria-disabled]):active{--state-background: var(--interactions-neutral-press-opacity)}[data-bspk=avatar][aria-disabled]{opacity:.5;cursor:not-allowed}[data-bspk=avatar]:focus:not(:active){outline:2px solid var(--stroke-neutral-focus);outline-offset:-2px}\n"] }]
+                    }, styles: ["[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-10);border:var(--avatar-border);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:var(--radius-full);background-color:var(--background);color:var(--foreground);font:var(--font);flex-shrink:0;flex-grow:0;position:relative;--state-background: transparent}[data-bspk=avatar]:not([data-color]){--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low)}[data-bspk=avatar]:has(img){overflow:hidden;align-items:start;justify-content:start}[data-bspk=avatar] img{vertical-align:top;max-width:100%;height:auto}[data-bspk=avatar] svg{width:var(--svg-size);height:var(--svg-size)}[data-bspk=avatar] [data-icon]{display:flex;align-items:center;justify-content:center}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small);--svg-size: var(--spacing-sizing-04)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large);--svg-size: var(--spacing-sizing-06)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large);--svg-size: var(--spacing-sizing-08)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large);--svg-size: var(--spacing-sizing-12)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small);--svg-size: var(--spacing-sizing-15)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium);--svg-size: var(--spacing-sizing-17)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large);--svg-size: var(--spacing-sizing-18)}[data-bspk=avatar]:after{content:\"\";position:absolute;display:block;inset:0;border-radius:var(--radius-full);background:var(--state-background)}[data-bspk=avatar]:not([aria-disabled])[role=button]:hover{--state-background: var(--interactions-neutral-hover-opacity)}[data-bspk=avatar]:not([aria-disabled])[role=button]:active{--state-background: var(--interactions-neutral-press-opacity)}[data-bspk=avatar][aria-disabled]{opacity:.5;cursor:not-allowed}[data-bspk=avatar]:focus:not(:active,[aria-disabled]){outline:2px solid var(--stroke-neutral-focus);outline-offset:-2px}\n"] }]
         }], propDecorators: { onClick: [{
                 type: Output
             }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], hideTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
@@ -62546,6 +62570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Dev
  */
 class UIListItem {
+    /** Emits when the ListItem is activated by click or keyboard interaction. */
     onClick = new EventEmitter();
     active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
     owner = input(...(ngDevMode ? [undefined, { debugName: "owner" }] : []));
@@ -62838,9 +62863,10 @@ class UIAvatarGroupOverflow {
     activeElementId = model(...(ngDevMode ? [undefined, { debugName: "activeElementId" }] : []));
     menuReference = input.required(...(ngDevMode ? [{ debugName: "menuReference" }] : []));
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    document = inject(DOCUMENT$1);
     get offset() {
         // Reads the CSS variable value at runtime, offsetOptions requires a number
-        return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--spacing-sizing-01'));
+        return parseInt(getComputedStyle(this.document.documentElement).getPropertyValue('--spacing-sizing-01'));
     }
     get maxMenuHeight() {
         return this.items().length > 5 ? 'calc(var(--spacing-sizing-12) * 5)' : '';
@@ -63229,7 +63255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 class UIIcon {
     icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
-    width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
+    width = input('24', ...(ngDevMode ? [{ debugName: "width" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIIcon, isStandalone: true, selector: "ui-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `@if (icon()) {
         <ng-container [ngComponentOutlet]="icon()" [ngComponentOutletInputs]="{ width: width() }"></ng-container>
@@ -63268,7 +63294,6 @@ class UIButton {
     onMouseEnter = new EventEmitter();
     /** Event emitted when mouse leaves the button. */
     onMouseLeave = new EventEmitter();
-    buttonElement = viewChild.required('buttonElement');
     style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
@@ -63286,8 +63311,9 @@ class UIButton {
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
     owner = input(...(ngDevMode ? [undefined, { debugName: "owner" }] : []));
     class = input(...(ngDevMode ? [undefined, { debugName: "class" }] : []));
+    host = inject(ElementRef);
     get nativeElement() {
-        return this.buttonElement().nativeElement;
+        return this.host.nativeElement.firstElementChild;
     }
     get shouldShowLabel() {
         return !this.iconOnly();
@@ -63302,6 +63328,14 @@ class UIButton {
         }
         return classes.join(' ');
     }
+    ngOnInit() {
+        // Pass through data- attributes from host to native button element
+        this.host.nativeElement.getAttributeNames().forEach((attr) => {
+            if (attr.startsWith('data-')) {
+                this.nativeElement.setAttribute(attr, this.host.nativeElement.getAttribute(attr));
+            }
+        });
+    }
     handleClick(event) {
         if (!this.disabled()) {
             this.onClick.emit(event);
@@ -63328,7 +63362,7 @@ class UIButton {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIButton, isStandalone: true, selector: "ui-button", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, destructive: { classPropertyName: "destructive", publicName: "destructive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, owner: { classPropertyName: "owner", publicName: "owner", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["buttonElement"], descendants: true, isSignal: true }], ngImport: i0, template: `<button
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIButton, isStandalone: true, selector: "ui-button", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHaspopup: { classPropertyName: "ariaHaspopup", publicName: "ariaHaspopup", isSignal: true, isRequired: false, transformFunction: null }, ariaExpanded: { classPropertyName: "ariaExpanded", publicName: "ariaExpanded", isSignal: true, isRequired: false, transformFunction: null }, ariaControls: { classPropertyName: "ariaControls", publicName: "ariaControls", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, destructive: { classPropertyName: "destructive", publicName: "destructive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, owner: { classPropertyName: "owner", publicName: "owner", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `<button
         [ui-tooltip]="tooltipLabel"
         #buttonElement
         [type]="type()"
@@ -63362,7 +63396,7 @@ class UIButton {
             }
         </ng-content>
         <span [attr.aria-hidden]="true" [attr.data-touch-target]="true"></span>
-    </button>`, isInline: true, styles: ["[data-bspk=button]{display:flex;flex-direction:row;gap:var(--spacing-sizing-02);border:none;cursor:pointer;background:transparent;text-decoration:none;width:fit-content;font-family:var(--typeface)}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon]{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon]{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center;justify-content:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background-color:var(--primary-background);color:var(--foreground-brand-on-primary);border-radius:var(--button-border-radius)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity),var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background),var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity),var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background),var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=primary][data-destructive]:not([disabled]){--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid var(--button-border-width) var(--stroke-neutral-base);border-radius:var(--button-border-radius);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid var(--button-border-width) var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=secondary][data-destructive]:not([disabled]){background:transparent;color:var(--status-error);border:solid var(--button-border-width) var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:transparent;color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=tertiary][data-destructive]:not([disabled]){color:var(--status-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["icon", "width"] }, { kind: "directive", type: UITooltipDirective, selector: "[ui-tooltip]", inputs: ["ui-tooltip"], outputs: ["ui-tooltipChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    </button>`, isInline: true, styles: ["[data-bspk=button]{display:flex;flex-direction:row;gap:var(--spacing-sizing-02);border:none;cursor:pointer;background:transparent;text-decoration:none;width:fit-content;font-family:var(--typeface)}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon] svg{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon] svg{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon] svg{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon] svg{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center;justify-content:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background-color:var(--primary-background);color:var(--foreground-brand-on-primary);border-radius:var(--button-border-radius)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity),var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background),var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity),var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background),var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=primary][data-destructive]:not([disabled]){--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid var(--button-border-width) var(--stroke-neutral-base);border-radius:var(--button-border-radius);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid var(--button-border-width) var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=secondary][data-destructive]:not([disabled]){background:transparent;color:var(--status-error);border:solid var(--button-border-width) var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:transparent;color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=tertiary][data-destructive]:not([disabled]){color:var(--status-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["icon", "width"] }, { kind: "directive", type: UITooltipDirective, selector: "[ui-tooltip]", inputs: ["ui-tooltip"], outputs: ["ui-tooltipChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIButton, decorators: [{
             type: Component,
@@ -63402,7 +63436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <span [attr.aria-hidden]="true" [attr.data-touch-target]="true"></span>
     </button>`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, UIIcon, UITooltipDirective], encapsulation: ViewEncapsulation.None, host: {
                         style: 'display: contents;',
-                    }, styles: ["[data-bspk=button]{display:flex;flex-direction:row;gap:var(--spacing-sizing-02);border:none;cursor:pointer;background:transparent;text-decoration:none;width:fit-content;font-family:var(--typeface)}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon]{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon]{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center;justify-content:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background-color:var(--primary-background);color:var(--foreground-brand-on-primary);border-radius:var(--button-border-radius)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity),var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background),var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity),var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background),var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=primary][data-destructive]:not([disabled]){--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid var(--button-border-width) var(--stroke-neutral-base);border-radius:var(--button-border-radius);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid var(--button-border-width) var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=secondary][data-destructive]:not([disabled]){background:transparent;color:var(--status-error);border:solid var(--button-border-width) var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:transparent;color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=tertiary][data-destructive]:not([disabled]){color:var(--status-error)}\n"] }]
+                    }, styles: ["[data-bspk=button]{display:flex;flex-direction:row;gap:var(--spacing-sizing-02);border:none;cursor:pointer;background:transparent;text-decoration:none;width:fit-content;font-family:var(--typeface)}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon] svg{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon] svg{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon] svg{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon] svg{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center;justify-content:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background-color:var(--primary-background);color:var(--foreground-brand-on-primary);border-radius:var(--button-border-radius)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity),var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background),var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity),var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background),var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=primary][data-destructive]:not([disabled]){--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid var(--button-border-width) var(--stroke-neutral-base);border-radius:var(--button-border-radius);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid var(--button-border-width) var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=secondary][data-destructive]:not([disabled]){background:transparent;color:var(--status-error);border:solid var(--button-border-width) var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:transparent;color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=button][data-variant=tertiary][data-destructive]:not([disabled]){color:var(--status-error)}\n"] }]
         }], propDecorators: { onClick: [{
                 type: Output
             }], onFocus: [{
@@ -63413,7 +63447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Output
             }], onMouseLeave: [{
                 type: Output
-            }], buttonElement: [{ type: i0.ViewChild, args: ['buttonElement', { isSignal: true }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaHaspopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHaspopup", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], destructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "destructive", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], owner: [{ type: i0.Input, args: [{ isSignal: true, alias: "owner", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+            }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaHaspopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHaspopup", required: false }] }], ariaExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaExpanded", required: false }] }], ariaControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaControls", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], destructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "destructive", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], owner: [{ type: i0.Input, args: [{ isSignal: true, alias: "owner", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * A visual and contextual message used to communicate an important message or notification to users relating to a
@@ -63752,6 +63786,7 @@ class KeyNavigationUtility {
             },
         ]));
     }, ...(ngDevMode ? [{ debugName: "arrowKeyCallbacks" }] : []));
+    document = inject(DOCUMENT$1);
     constructor() {
         effect(() => {
             const { ids, activeElementId } = this.props();
@@ -63765,7 +63800,7 @@ class KeyNavigationUtility {
         return this.props().activeElementId;
     }
     get activeElement() {
-        return (this.activeElementId && document.querySelector(`[id="${this.activeElementId}"]`)) || null;
+        return (this.activeElementId && this.document.querySelector(`[id="${this.activeElementId}"]`)) || null;
     }
     /**
      * Cleans up the utility by resetting its properties.
@@ -63783,7 +63818,7 @@ class KeyNavigationUtility {
     setActiveElementId(id) {
         this.updateProps({ activeElementId: id });
         if (id)
-            document.querySelector(`[id="${id}"]`)?.scrollIntoView({
+            this.document.querySelector(`[id="${id}"]`)?.scrollIntoView({
                 block: 'nearest',
                 behavior: 'smooth',
                 inline: 'nearest',
@@ -63866,6 +63901,7 @@ class OutsideClickUtility {
         disabled: false,
         handleTabs: false,
     }, ...(ngDevMode ? [{ debugName: "props" }] : []));
+    document = inject(DOCUMENT$1);
     updateProps(next) {
         this.props.set({
             ...this.props(),
@@ -63877,15 +63913,15 @@ class OutsideClickUtility {
             return;
         this.updateProps(props);
         if (this.props().elements?.length) {
-            document.addEventListener('mousedown', this.handleClickOutside);
-            document.addEventListener('keydown', this.handleOutsideTab);
+            this.document.addEventListener('mousedown', this.handleClickOutside);
+            this.document.addEventListener('keydown', this.handleOutsideTab);
         }
     }
     destroy() {
         if (typeof document === 'undefined')
             return;
-        document.removeEventListener('mousedown', this.handleClickOutside);
-        document.removeEventListener('keydown', this.handleOutsideTab);
+        this.document.removeEventListener('mousedown', this.handleClickOutside);
+        this.document.removeEventListener('keydown', this.handleOutsideTab);
     }
     handleClickOutside = (event) => {
         const { elements, callback, disabled } = this.props();
@@ -63898,7 +63934,7 @@ class OutsideClickUtility {
         if (!handleTabs || event.key !== 'Tab' || disabled)
             return;
         setTimeout(() => {
-            if (elements?.some?.((element) => element?.contains?.(document.activeElement)))
+            if (elements?.some?.((element) => element?.contains?.(this.document.activeElement)))
                 return;
             callback?.(event);
         }, 0);
@@ -63970,9 +64006,10 @@ class UIBreadcrumbDropdown {
             minWidth: '150px',
         };
     }, ...(ngDevMode ? [{ debugName: "ngMenuStyle" }] : []));
+    document = inject(DOCUMENT$1);
     get offset() {
         // Reads the CSS variable value at runtime, offsetOptions requires a number
-        return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--spacing-sizing-01'));
+        return parseInt(getComputedStyle(this.document.documentElement).getPropertyValue('--spacing-sizing-01'));
     }
     get referenceEl() {
         return this.reference().nativeElement;
@@ -64141,16 +64178,17 @@ class UIBreadcrumb {
     items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
     id = input(uniqueId('breadcrumb-'), ...(ngDevMode ? [{ debugName: "id" }] : []));
     scrollLimit = input(...(ngDevMode ? [undefined, { debugName: "scrollLimit" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     shouldRender = computed(() => this.items().length >= 2, ...(ngDevMode ? [{ debugName: "shouldRender" }] : []));
     firstItem = computed(() => this.items()[0], ...(ngDevMode ? [{ debugName: "firstItem" }] : []));
     lastItem = computed(() => this.items()[this.items().length - 1], ...(ngDevMode ? [{ debugName: "lastItem" }] : []));
     middleItems = computed(() => this.items().length > 2 ? this.items().slice(1, this.items().length - 1) : [], ...(ngDevMode ? [{ debugName: "middleItems" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIBreadcrumb, isStandalone: true, selector: "ui-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, scrollLimit: { classPropertyName: "scrollLimit", publicName: "scrollLimit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `@if (shouldRender()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIBreadcrumb, isStandalone: true, selector: "ui-breadcrumb", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, scrollLimit: { classPropertyName: "scrollLimit", publicName: "scrollLimit", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `@if (shouldRender()) {
         <nav [attr.aria-label]="ariaLabel() || 'Breadcrumb'" [attr.data-bspk]="'breadcrumb'" [attr.id]="id()">
             <ol>
                 <li>
-                    <a ui-link [href]="firstItem().href">{{ firstItem().label }}</a>
+                    <a ui-link size="small" [variant]="variant()" [href]="firstItem().href">{{ firstItem().label }}</a>
                     <icon-chevron-right aria-hidden="true" width="24" />
                 </li>
                 @if (items().length > 5) {
@@ -64160,12 +64198,12 @@ class UIBreadcrumb {
                 } @else {
                     @for (item of middleItems(); track item.href) {
                         <li>
-                            <a ui-link [href]="item.href">{{ item.label }}</a>
+                            <a ui-link size="small" [variant]="variant()" [href]="item.href">{{ item.label }}</a>
                             <icon-chevron-right aria-hidden="true" width="24" />
                         </li>
                     }
                 }
-                <li [attr.aria-current]="'page'" [ui-txt]="'body-base'">
+                <li [attr.aria-current]="'page'" [ui-txt]="'labels-small'">
                     {{ lastItem().label }}
                 </li>
             </ol>
@@ -64178,7 +64216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <nav [attr.aria-label]="ariaLabel() || 'Breadcrumb'" [attr.data-bspk]="'breadcrumb'" [attr.id]="id()">
             <ol>
                 <li>
-                    <a ui-link [href]="firstItem().href">{{ firstItem().label }}</a>
+                    <a ui-link size="small" [variant]="variant()" [href]="firstItem().href">{{ firstItem().label }}</a>
                     <icon-chevron-right aria-hidden="true" width="24" />
                 </li>
                 @if (items().length > 5) {
@@ -64188,18 +64226,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 } @else {
                     @for (item of middleItems(); track item.href) {
                         <li>
-                            <a ui-link [href]="item.href">{{ item.label }}</a>
+                            <a ui-link size="small" [variant]="variant()" [href]="item.href">{{ item.label }}</a>
                             <icon-chevron-right aria-hidden="true" width="24" />
                         </li>
                     }
                 }
-                <li [attr.aria-current]="'page'" [ui-txt]="'body-base'">
+                <li [attr.aria-current]="'page'" [ui-txt]="'labels-small'">
                     {{ lastItem().label }}
                 </li>
             </ol>
         </nav>
     }`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, UITxtDirective, UIBreadcrumbDropdown, IconChevronRight, UILinkDirective], encapsulation: ViewEncapsulation.None, styles: ["[data-bspk=breadcrumb]{width:100%}[data-bspk=breadcrumb] ol{display:flex;align-items:center;flex-flow:row wrap;list-style:none;gap:var(--spacing-sizing-02)}[data-bspk=breadcrumb] ol li{display:flex;gap:var(--spacing-sizing-02)}\n"] }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], scrollLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLimit", required: false }] }] } });
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], scrollLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLimit", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 const COLUMNS_COUNT = 7;
 function parseDate$1(next) {
@@ -64306,27 +64344,26 @@ function getCalendarKeydownHandler(activeDate, setActiveDate, rows, focusActiveD
  * Allows customers to select the date, month, and year.
  *
  * @example
- *     <ui-calendar (onChange)="handleChange($event)" />
+ *     <ui-calendar (valueChange)="handleChange($event)" />
  *
  * @name Calendar
  * @phase Dev
  */
 class UICalendar {
-    onChange = new EventEmitter();
     IconKeyboardDoubleArrowLeft = IconKeyboardDoubleArrowLeft;
     IconKeyboardDoubleArrowRight = IconKeyboardDoubleArrowRight;
     IconChevronLeft = IconChevronLeft;
     IconChevronRight = IconChevronRight;
-    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     focusTrap = input(false, ...(ngDevMode ? [{ debugName: "focusTrap" }] : []));
     id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    activeDate = startOfToday();
+    activeDate = signal(startOfToday(), ...(ngDevMode ? [{ debugName: "activeDate" }] : []));
     format = format;
     isSameDay = isSameDay;
     addYears = addYears;
     addMonths = addMonths;
     firstButton = viewChild('firstButton', ...(ngDevMode ? [{ debugName: "firstButton" }] : []));
-    lastButton = viewChild('lastButton', ...(ngDevMode ? [{ debugName: "lastButton" }] : []));
+    //  private readonly lastButton = viewChild<ElementRef<HTMLButtonElement>>('lastButton');
     grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : []));
     constructor() {
         effect(() => {
@@ -64335,8 +64372,8 @@ class UICalendar {
         });
     }
     get rows() {
-        const start = startOfWeek(startOfMonth(this.activeDate), { weekStartsOn: 0 });
-        const end = endOfWeek(endOfMonth(this.activeDate), { weekStartsOn: 0 });
+        const start = startOfWeek(startOfMonth(this.activeDate()), { weekStartsOn: 0 });
+        const end = endOfWeek(endOfMonth(this.activeDate()), { weekStartsOn: 0 });
         const days = eachDayOfInterval({ start, end });
         const weeks = [];
         for (let i = 0; i < days.length; i += COLUMNS_COUNT) {
@@ -64348,11 +64385,11 @@ class UICalendar {
         return `${this.id() || 'calendar'}-grid`;
     }
     ngOnInit() {
-        this.activeDate = this.value() && isValid(this.value()) ? this.value() : startOfToday();
+        this.activeDate.set(this.value() && isValid(this.value()) ? this.value() : startOfToday());
     }
     setFocus() {
         setTimeout(() => {
-            const selectedDateId = this.generateOptionId(this.activeDate);
+            const selectedDateId = this.generateOptionId(this.activeDate());
             const selectedDateElement = this.grid()?.nativeElement?.querySelector(`#${selectedDateId}`);
             selectedDateElement?.focus();
         }, 0);
@@ -64361,9 +64398,6 @@ class UICalendar {
         if (this.focusTrap())
             this.setFocus();
     }
-    setActiveDate(date) {
-        this.activeDate = date;
-    }
     generateOptionId(date) {
         return optionIdGenerator(this.id() || 'calendar')(date);
     }
@@ -64376,11 +64410,11 @@ class UICalendar {
     }
     onGridKeydown(event) {
         // Use the shared calendar keydown handler from utils
-        getCalendarKeydownHandler(this.activeDate, (date) => {
-            this.setActiveDate(date);
+        getCalendarKeydownHandler(this.activeDate(), (date) => {
+            this.activeDate.set(date);
         }, this.rows, () => {
             setTimeout(() => {
-                const selectedDateId = this.generateOptionId(this.activeDate);
+                const selectedDateId = this.generateOptionId(this.activeDate());
                 const selectedDateElement = this.grid()?.nativeElement?.querySelector(`#${selectedDateId}`);
                 selectedDateElement?.focus();
             }, 0);
@@ -64393,14 +64427,14 @@ class UICalendar {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UICalendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UICalendar, isStandalone: true, selector: "ui-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["firstButton"], descendants: true, isSignal: true }, { propertyName: "lastButton", first: true, predicate: ["lastButton"], descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UICalendar, isStandalone: true, selector: "ui-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, focusTrap: { classPropertyName: "focusTrap", publicName: "focusTrap", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { styleAttribute: "display: contents;" }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["firstButton"], descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <div data-bspk="calendar" [id]="id()">
             <div data-header>
                 <ui-button
                     label="Previous Year"
                     variant="tertiary"
                     size="large"
-                    (click)="setActiveDate(addYears(activeDate, -1))"
+                    (click)="this.activeDate.set(addYears(activeDate(), -1))"
                     (keydown)="onFirstButtonKeydown($event)"
                     #firstButton
                     [icon]="IconKeyboardDoubleArrowLeft"
@@ -64410,16 +64444,16 @@ class UICalendar {
                     label="Previous Month"
                     variant="tertiary"
                     size="large"
-                    (click)="setActiveDate(addMonths(activeDate, -1))"
+                    (click)="this.activeDate.set(addMonths(activeDate(), -1))"
                     [iconOnly]="true"
                     [icon]="IconChevronLeft">
                 </ui-button>
-                <span data-title>{{ format(activeDate, 'MMMM yyyy') }}</span>
+                <span data-title>{{ format(activeDate(), 'MMMM yyyy') }}</span>
                 <ui-button
                     label="Next Month"
                     variant="tertiary"
                     size="large"
-                    (click)="setActiveDate(addMonths(activeDate, 1))"
+                    (click)="this.activeDate.set(addMonths(activeDate(), 1))"
                     [iconOnly]="true"
                     [icon]="IconChevronRight">
                 </ui-button>
@@ -64427,7 +64461,7 @@ class UICalendar {
                     label="Next Year"
                     variant="tertiary"
                     size="large"
-                    (click)="setActiveDate(addYears(activeDate, 1))"
+                    (click)="this.activeDate.set(addYears(activeDate(), 1))"
                     #lastButton
                     [iconOnly]="true"
                     [icon]="IconKeyboardDoubleArrowRight">
@@ -64452,11 +64486,11 @@ class UICalendar {
                             @for (date of week; track date?.getTime() ?? -1) {
                                 <td
                                     [attr.aria-label]="format(date, 'do MMMM yyyy')"
-                                    [attr.data-selected]="isSameDay(date, activeDate) ? true : null"
+                                    [attr.data-selected]="isSameDay(date, activeDate()) ? true : null"
                                     [id]="generateOptionId(date)"
-                                    (click)="onChange.emit(date)"
-                                    [attr.role]="isSameDay(date, activeDate) ? 'gridcell' : null"
-                                    [attr.tabindex]="isSameDay(date, activeDate) ? 0 : -1">
+                                    (click)="value.set(date); activeDate.set(date)"
+                                    [attr.role]="isSameDay(date, activeDate()) ? 'gridcell' : null"
+                                    [attr.tabindex]="isSameDay(date, activeDate()) ? 0 : -1">
                                     {{ format(date, 'd') }}
                                 </td>
                             }
@@ -64476,7 +64510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     label="Previous Year"
                     variant="tertiary"
                     size="large"
-                    (click)="setActiveDate(addYears(activeDate, -1))"
+                    (click)="this.activeDate.set(addYears(activeDate(), -1))"
                     (keydown)="onFirstButtonKeydown($event)"
                     #firstButton
                     [icon]="IconKeyboardDoubleArrowLeft"
@@ -64486,16 +64520,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     label="Previous Month"
                     variant="tertiary"
                     size="large"
-                    (click)="setActiveDate(addMonths(activeDate, -1))"
+                    (click)="this.activeDate.set(addMonths(activeDate(), -1))"
                     [iconOnly]="true"
                     [icon]="IconChevronLeft">
                 </ui-button>
-                <span data-title>{{ format(activeDate, 'MMMM yyyy') }}</span>
+                <span data-title>{{ format(activeDate(), 'MMMM yyyy') }}</span>
                 <ui-button
                     label="Next Month"
                     variant="tertiary"
                     size="large"
-                    (click)="setActiveDate(addMonths(activeDate, 1))"
+                    (click)="this.activeDate.set(addMonths(activeDate(), 1))"
                     [iconOnly]="true"
                     [icon]="IconChevronRight">
                 </ui-button>
@@ -64503,7 +64537,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     label="Next Year"
                     variant="tertiary"
                     size="large"
-                    (click)="setActiveDate(addYears(activeDate, 1))"
+                    (click)="this.activeDate.set(addYears(activeDate(), 1))"
                     #lastButton
                     [iconOnly]="true"
                     [icon]="IconKeyboardDoubleArrowRight">
@@ -64528,11 +64562,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             @for (date of week; track date?.getTime() ?? -1) {
                                 <td
                                     [attr.aria-label]="format(date, 'do MMMM yyyy')"
-                                    [attr.data-selected]="isSameDay(date, activeDate) ? true : null"
+                                    [attr.data-selected]="isSameDay(date, activeDate()) ? true : null"
                                     [id]="generateOptionId(date)"
-                                    (click)="onChange.emit(date)"
-                                    [attr.role]="isSameDay(date, activeDate) ? 'gridcell' : null"
-                                    [attr.tabindex]="isSameDay(date, activeDate) ? 0 : -1">
+                                    (click)="value.set(date); activeDate.set(date)"
+                                    [attr.role]="isSameDay(date, activeDate()) ? 'gridcell' : null"
+                                    [attr.tabindex]="isSameDay(date, activeDate()) ? 0 : -1">
                                     {{ format(date, 'd') }}
                                 </td>
                             }
@@ -64544,9 +64578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     `, imports: [UIButton], encapsulation: ViewEncapsulation.None, host: {
                         style: 'display: contents;',
                     }, styles: ["[data-bspk=calendar]{display:flex;flex-direction:column;justify-content:center;font:var(--labels-base);width:360px;color:var(--foreground-neutral-on-surface);gap:var(--spacing-sizing-01);background:var(--surface-neutral-t1-base);border-radius:var(--radius-lg);padding:var(--spacing-sizing-02)}[data-bspk=calendar] [data-header]{display:flex;justify-content:space-between;align-items:center;padding:0;border-bottom:1px solid var(--stroke-neutral-low)}[data-bspk=calendar] [data-header] [data-title]{flex-grow:1;display:flex;align-items:center;justify-content:center}[data-bspk=calendar] [data-header] [data-title] [data-bspk=button]{font:inherit}[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-month],[data-bspk=calendar] [data-header] [data-title] [data-bspk=button][data-year]{padding:0;min-width:var(--spacing-sizing-12)}[data-bspk=calendar] [data-header] [data-bspk=button]{border-radius:var(--radius-sm)}[data-bspk=calendar] table{display:flex;flex-direction:column}[data-bspk=calendar] table tr{display:contents}[data-bspk=calendar] table td,[data-bspk=calendar] table th{height:var(--spacing-sizing-12);line-height:var(--spacing-sizing-12);text-align:center;border-radius:var(--radius-sm);font-weight:inherit}[data-bspk=calendar] table thead{display:grid;grid-template-columns:repeat(7,14.2857142857%);text-align:center}[data-bspk=calendar] table thead th{color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=calendar] table tbody{display:grid;grid-template-columns:repeat(7,14.2857142857%)}[data-bspk=calendar] table tbody [data-non-month-day]{color:var(--foreground-neutral-on-surface-variant-02)}[data-bspk=calendar] table tbody td:hover,[data-bspk=calendar] table tbody td:focus-visible{cursor:pointer;outline:2px solid var(--stroke-neutral-focus);outline-offset:-2px}[data-bspk=calendar] table tbody td[data-selected]{background:var(--surface-brand-primary);color:var(--foreground-brand-on-primary);outline-offset:2px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { onChange: [{
-                type: Output
-            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], focusTrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrap", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], firstButton: [{ type: i0.ViewChild, args: ['firstButton', { isSignal: true }] }], lastButton: [{ type: i0.ViewChild, args: ['lastButton', { isSignal: true }] }], grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], focusTrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusTrap", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], firstButton: [{ type: i0.ViewChild, args: ['firstButton', { isSignal: true }] }], grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
 
 /**
  * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
@@ -64602,13 +64634,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Dev
  */
 class UICheckbox {
-    /** Emits the new checked state (true or false) */
-    checkedChange = output();
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     id = input(uniqueId('checkbox'), ...(ngDevMode ? [{ debugName: "id" }] : []));
-    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
     indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
@@ -64626,10 +64656,10 @@ class UICheckbox {
         });
     }
     onInputChange() {
-        this.checkedChange.emit(this.inputEl().nativeElement.checked);
+        this.checked.set(this.inputEl().nativeElement.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UICheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UICheckbox, isStandalone: true, selector: "ui-checkbox", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { attributes: { "data-bspk": "checkbox" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UICheckbox, isStandalone: true, selector: "ui-checkbox", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", checked: "checkedChange" }, host: { attributes: { "data-bspk": "checkbox" } }, viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <input
             [attr.aria-describedby]="ariaDescribedBy() || undefined"
             [attr.aria-errormessage]="ariaErrorMessage() || undefined"
@@ -64700,7 +64730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     `, encapsulation: ViewEncapsulation.None, host: {
                         'data-bspk': 'checkbox',
                     }, styles: ["[data-bspk=checkbox]{display:block;position:relative;width:var(--spacing-sizing-06);aspect-ratio:1/1;padding:2px}[data-bspk=checkbox] input[type=checkbox]{position:absolute;opacity:0;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}[data-bspk=checkbox] span{--stroke: var(--stroke-neutral-base);--inner: none;--background: none;--color: var(--foreground-brand-on-primary);display:flex;width:20px;aspect-ratio:1/1;cursor:pointer;border-radius:2px;border:2px solid var(--stroke);align-items:center;flex-direction:column;justify-content:center;position:relative;background:var(--background);color:var(--color)}[data-bspk=checkbox] span svg[data-checked]{width:14px}[data-bspk=checkbox] span svg[data-indeterminate]{width:12px}[data-bspk=checkbox] input[type=checkbox]:not(:checked,:indeterminate,[disabled],[readOnly]):hover+span{background-color:var(--interactions-neutral-hover-opacity)}[data-bspk=checkbox] input[type=checkbox]:not(:checked,:indeterminate,[disabled],[readOnly]):active+span{background-color:var(--interactions-neutral-press-opacity)}[data-bspk=checkbox] input[type=checkbox]:checked+span,[data-bspk=checkbox] input[type=checkbox]:indeterminate+span{--stroke: var(--stroke-brand-primary);--background: var(--surface-brand-primary)}[data-bspk=checkbox] input[type=checkbox][disabled],[data-bspk=checkbox] input[type=checkbox][readOnly]{cursor:not-allowed}[data-bspk=checkbox] input[type=checkbox][disabled]+span,[data-bspk=checkbox] input[type=checkbox][readOnly]+span{--stroke: var(--stroke-neutral-interactions-disabled-light)}[data-bspk=checkbox] input[type=checkbox][disabled]:is(:checked,:indeterminate)+span,[data-bspk=checkbox] input[type=checkbox][readOnly]:is(:checked,:indeterminate)+span{--stroke: transparent;--background: var(--interactions-disabled-opacity);--color: var(--foreground-neutral-disabled-on-surface)}[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled],[readOnly]):checked+span,[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled],[readOnly]):indeterminate+span{--background: var(--status-error)}[data-bspk=checkbox] input[type=checkbox][aria-invalid]:not([disabled],[readOnly])+span{--stroke: var(--status-error)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { checkedChange: [{ type: i0.Output, args: ["checkedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
 
 /**
  * A control that allows users to choose one or more items from a list or turn a feature on or off.
@@ -64735,11 +64765,11 @@ class UICheckboxOption extends UICheckbox {
                 [required]="required()"
                 [invalid]="invalid()"
                 [ariaLabel]="ariaLabel() || computedAriaLabel()"
-                (checkedChange)="checkedChange.emit($event)"
+                (checkedChange)="checked.set($event)"
                 #input>
             </ui-checkbox>
         </span>
-    </ui-list-item>`, isInline: true, dependencies: [{ kind: "component", type: UICheckbox, selector: "ui-checkbox", inputs: ["name", "value", "ariaLabel", "id", "checked", "indeterminate", "disabled", "invalid", "required", "readOnly", "ariaDescribedBy", "ariaErrorMessage"], outputs: ["checkedChange"] }, { kind: "component", type: UIListItem, selector: "ui-list-item", inputs: ["active", "owner", "ariaLabel", "ariaRole", "ariaSelected", "ariaDisabled", "ariaReadonly", "htmlFor", "disabled", "readOnly", "as", "href", "label", "subText", "width", "tabIndex", "id"], outputs: ["onClick"] }] });
+    </ui-list-item>`, isInline: true, dependencies: [{ kind: "component", type: UICheckbox, selector: "ui-checkbox", inputs: ["name", "value", "ariaLabel", "id", "checked", "indeterminate", "disabled", "invalid", "required", "readOnly", "ariaDescribedBy", "ariaErrorMessage"], outputs: ["valueChange", "checkedChange"] }, { kind: "component", type: UIListItem, selector: "ui-list-item", inputs: ["active", "owner", "ariaLabel", "ariaRole", "ariaSelected", "ariaDisabled", "ariaReadonly", "htmlFor", "disabled", "readOnly", "as", "href", "label", "subText", "width", "tabIndex", "id"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UICheckboxOption, decorators: [{
             type: Component,
@@ -64765,7 +64795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [required]="required()"
                 [invalid]="invalid()"
                 [ariaLabel]="ariaLabel() || computedAriaLabel()"
-                (checkedChange)="checkedChange.emit($event)"
+                (checkedChange)="checked.set($event)"
                 #input>
             </ui-checkbox>
         </span>
@@ -64785,10 +64815,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Stable
  */
 class UICheckboxGroup {
-    valueChange = output();
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model([], ...(ngDevMode ? [{ debugName: "value" }] : []));
     selectAll = input(false, ...(ngDevMode ? [{ debugName: "selectAll" }] : []));
     selectAllProps = input(undefined, ...(ngDevMode ? [{ debugName: "selectAllProps" }] : []));
     id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
@@ -64820,20 +64849,20 @@ class UICheckboxGroup {
     }
     onSelectAllChange(checked) {
         const opts = this.availableOptions();
-        this.valueChange.emit(checked ? opts.map((o) => o.value) : []);
+        this.value.set(checked ? opts.map((o) => o.value) : []);
     }
     onOptionChange(optionValue, checked) {
         const value = this.value();
         const current = Array.isArray(value) ? value : [];
         if (checked) {
-            this.valueChange.emit([...current, optionValue]);
+            this.value.set([...current, optionValue]);
         }
         else {
-            this.valueChange.emit(current.filter((v) => v !== optionValue));
+            this.value.set(current.filter((v) => v !== optionValue));
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UICheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UICheckboxGroup, isStandalone: true, selector: "ui-checkbox-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllProps: { classPropertyName: "selectAllProps", publicName: "selectAllProps", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UICheckboxGroup, isStandalone: true, selector: "ui-checkbox-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, selectAll: { classPropertyName: "selectAll", publicName: "selectAll", isSignal: true, isRequired: false, transformFunction: null }, selectAllProps: { classPropertyName: "selectAllProps", publicName: "selectAllProps", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: `
         <div role="group">
             @if (selectAll()) {
                 <ui-checkbox-option
@@ -64922,7 +64951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         </div>
     `,
                 }]
-        }], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllProps", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], selectAllProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllProps", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }] } });
 
 /**
  * A two-tone warning icon used to indicate a warning state specifically in inline alerts.
@@ -65135,7 +65164,7 @@ class UICheckboxGroupField extends UICheckboxGroup {
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -65162,7 +65191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -65288,9 +65317,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 class UIChipGroup {
     overflow = input('wrap', ...(ngDevMode ? [{ debugName: "overflow" }] : []));
-    items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIChipGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIChipGroup, isStandalone: true, selector: "ui-chip-group", inputs: { overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-bspk": "chip-group" }, properties: { "attr.data-scroll": "overflow() === 'scroll' ? true : null" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIChipGroup, isStandalone: true, selector: "ui-chip-group", inputs: { overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-bspk": "chip-group" }, properties: { "attr.data-scroll": "overflow() === 'scroll' ? true : null" } }, ngImport: i0, template: `
         @for (item of items(); track item) {
             <ui-chip
                 [label]="item.label"
@@ -65322,7 +65351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         'data-bspk': 'chip-group',
                         '[attr.data-scroll]': "overflow() === 'scroll' ? true : null",
                     }, styles: ["[data-bspk=chip-group]{display:flex;gap:var(--spacing-sizing-02);width:100%;flex-flow:row wrap;padding-bottom:var(--spacing-sizing-01)}[data-bspk=chip-group]:empty{display:none}[data-bspk=chip-group][data-scroll]{overflow:auto;flex-wrap:nowrap}\n"] }]
-        }], propDecorators: { overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
+        }], propDecorators: { overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }] } });
 
 /**
  * An input that allows users to enter text, numbers or symbols in a singular line. This is a utility element and is not
@@ -65340,7 +65369,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase UXReview
  */
 class UIInput {
-    valueChange = output();
     IconCancel = IconCancel;
     hasFocus = signal(false, ...(ngDevMode ? [{ debugName: "hasFocus" }] : []));
     inputEl = viewChild.required('inputEl');
@@ -65352,7 +65380,7 @@ class UIInput {
         const sizeValue = this.size();
         return validSizes.includes(sizeValue) ? sizeValue : 'medium';
     }, ...(ngDevMode ? [{ debugName: "buttonSize" }] : []));
-    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     inputMode = input(...(ngDevMode ? [undefined, { debugName: "inputMode" }] : []));
     showClearButton = input(true, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
@@ -65372,10 +65400,6 @@ class UIInput {
     ariaLabelledBy = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledBy" }] : []));
     ariaDescribedBy = input(...(ngDevMode ? [undefined, { debugName: "ariaDescribedBy" }] : []));
     ariaErrorMessage = input(...(ngDevMode ? [undefined, { debugName: "ariaErrorMessage" }] : []));
-    get trailingValue() {
-        const value = this.trailing();
-        return value instanceof TemplateRef ? value : undefined;
-    }
     onClearMouseDown(event) {
         event.preventDefault();
     }
@@ -65386,11 +65410,8 @@ class UIInput {
     handleInput(event) {
         this.value.set(event.target.value);
     }
-    isTemplateRef(value) {
-        return value instanceof TemplateRef;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIInput, isStandalone: true, selector: "ui-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, owner: { classPropertyName: "owner", publicName: "owner", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", value: "valueChange" }, host: { attributes: { "data-bspk": "input" }, properties: { "attr.data-size": "size()", "attr.data-invalid": "invalid() || null", "attr.data-show-clear-button": "( displayClearButton()) || null", "attr.data-readonly": "readOnly() || null" } }, providers: [], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content select="[data-leading]">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIInput, isStandalone: true, selector: "ui-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, inputMode: { classPropertyName: "inputMode", publicName: "inputMode", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, owner: { classPropertyName: "owner", publicName: "owner", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-bspk": "input" }, properties: { "attr.data-size": "size()", "attr.data-invalid": "invalid() || null", "attr.data-show-clear-button": "( displayClearButton()) || null", "attr.data-readonly": "readOnly() || null" } }, providers: [], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content select="[data-leading]">
             @if (leading()) {
                 <span data-leading>{{ leading() }}</span>
             }
@@ -65412,20 +65433,17 @@ class UIInput {
             [readOnly]="readOnly() || null"
             [required]="required() || null"
             [type]="type()"
-            [value]="value() || ''"
+            [value]="value()"
             (input)="handleInput($event)"
             (focus)="hasFocus.set(true)"
             (blur)="hasFocus.set(false)"
-            (change)="valueChange.emit($event.target.value)"
+            (change)="value.set($event.target.value)"
             #inputEl />
-        <ng-content select="[data-trailing]"></ng-content>
-        @if (trailing()) {
-            @if (trailingValue) {
-                <ng-container [ngTemplateOutlet]="trailingValue"></ng-container>
-            } @else {
+        <ng-content select="[data-trailing]">
+            @if (trailing()) {
                 <span data-trailing>{{ trailing() }}</span>
             }
-        }
+        </ng-content>
         @if (displayClearButton()) {
             <ui-button
                 data-clear-button
@@ -65436,7 +65454,7 @@ class UIInput {
                 (click)="clearInput()"
                 [icon]="IconCancel"
                 [iconOnly]="true" />
-        }`, isInline: true, styles: ["[data-bspk=input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-sm);padding:0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=input][data-show-clear-button]:focus-within{padding-right:0}[data-bspk=input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity),var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity),var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-disabled],[data-bspk=input]:has([data-main-input][disabled]){--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-disabled]>*,[data-bspk=input]:has([data-main-input][disabled])>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=input][data-invalid]{--border-color: var(--status-error)}[data-bspk=input]:not(:focus-within) [data-clear-button]{display:none}[data-bspk=input]:focus-within{--border-color: var(--stroke-neutral-focus);outline:1px solid var(--stroke-neutral-focus)}[data-bspk=input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=input] [data-leading],[data-bspk=input] [data-trailing]{position:relative}[data-bspk=input] [data-leading] svg,[data-bspk=input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=input] [data-main-input]{flex:1;background-color:transparent!important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=input] [data-main-input][type=number]::-webkit-inner-spin-button,[data-bspk=input] [data-main-input][type=number]::-webkit-outer-spin-button{display:none}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["style", "label", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls", "icon", "iconOnly", "destructive", "size", "variant", "width", "tooltip", "disabled", "type", "owner", "class"], outputs: ["onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+        }`, isInline: true, styles: ["[data-bspk=input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-sm);padding:0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=input][data-show-clear-button]:focus-within{padding-right:0}[data-bspk=input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity),var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity),var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-disabled],[data-bspk=input]:has([data-main-input][disabled]){--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-disabled]>*,[data-bspk=input]:has([data-main-input][disabled])>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=input][data-invalid]{--border-color: var(--status-error)}[data-bspk=input]:not(:focus-within) [data-clear-button]{display:none}[data-bspk=input]:focus-within{--border-color: var(--stroke-neutral-focus);outline:1px solid var(--stroke-neutral-focus)}[data-bspk=input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=input] [data-leading],[data-bspk=input] [data-trailing]{position:relative}[data-bspk=input] [data-leading] svg,[data-bspk=input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=input] [data-main-input]{flex:1;background-color:transparent!important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=input] [data-main-input][type=number]::-webkit-inner-spin-button,[data-bspk=input] [data-main-input][type=number]::-webkit-outer-spin-button{display:none}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["style", "label", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls", "icon", "iconOnly", "destructive", "size", "variant", "width", "tooltip", "disabled", "type", "owner", "class"], outputs: ["onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIInput, decorators: [{
             type: Component,
@@ -65462,20 +65480,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             [readOnly]="readOnly() || null"
             [required]="required() || null"
             [type]="type()"
-            [value]="value() || ''"
+            [value]="value()"
             (input)="handleInput($event)"
             (focus)="hasFocus.set(true)"
             (blur)="hasFocus.set(false)"
-            (change)="valueChange.emit($event.target.value)"
+            (change)="value.set($event.target.value)"
             #inputEl />
-        <ng-content select="[data-trailing]"></ng-content>
-        @if (trailing()) {
-            @if (trailingValue) {
-                <ng-container [ngTemplateOutlet]="trailingValue"></ng-container>
-            } @else {
+        <ng-content select="[data-trailing]">
+            @if (trailing()) {
                 <span data-trailing>{{ trailing() }}</span>
             }
-        }
+        </ng-content>
         @if (displayClearButton()) {
             <ui-button
                 data-clear-button
@@ -65493,7 +65508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.data-show-clear-button]': '( displayClearButton()) || null',
                         '[attr.data-readonly]': 'readOnly() || null',
                     }, encapsulation: ViewEncapsulation.None, styles: ["[data-bspk=input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-sm);padding:0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=input][data-show-clear-button]:focus-within{padding-right:0}[data-bspk=input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity),var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity),var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-disabled],[data-bspk=input]:has([data-main-input][disabled]){--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input][data-disabled]>*,[data-bspk=input]:has([data-main-input][disabled])>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=input][data-invalid]{--border-color: var(--status-error)}[data-bspk=input]:not(:focus-within) [data-clear-button]{display:none}[data-bspk=input]:focus-within{--border-color: var(--stroke-neutral-focus);outline:1px solid var(--stroke-neutral-focus)}[data-bspk=input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=input] [data-leading],[data-bspk=input] [data-trailing]{position:relative}[data-bspk=input] [data-leading] svg,[data-bspk=input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=input] [data-main-input]{flex:1;background-color:transparent!important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=input] [data-main-input][type=number]::-webkit-inner-spin-button,[data-bspk=input] [data-main-input][type=number]::-webkit-outer-spin-button{display:none}\n"] }]
-        }], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], trailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing", required: false }] }], autoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoComplete", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], owner: [{ type: i0.Input, args: [{ isSignal: true, alias: "owner", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }] } });
+        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], inputMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputMode", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], trailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing", required: false }] }], autoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoComplete", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], owner: [{ type: i0.Input, args: [{ isSignal: true, alias: "owner", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }] } });
 
 function parseDate(value) {
     if (!value)
@@ -65508,16 +65523,15 @@ function parseDate(value) {
  * @example
  *     <ui-date-picker
  *     [value]="selectedDate"
- *     (onChange)="handleDateChange($event)"
+ *     (valueChange)="handleDateChange($event)"
  *     ></ui-date-picker>
  *
  * @name DatePicker
  * @phase Dev
  */
 class UIDatePicker {
-    valueChange = new EventEmitter();
     // Inputs
-    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
     readOnly = input(...(ngDevMode ? [undefined, { debugName: "readOnly" }] : []));
     closeCalendarOnChange = input(true, ...(ngDevMode ? [{ debugName: "closeCalendarOnChange" }] : []));
@@ -65538,6 +65552,7 @@ class UIDatePicker {
     reference = viewChild('reference', ...(ngDevMode ? [{ debugName: "reference", read: ElementRef }] : [{ read: ElementRef }]));
     internalValue = signal(this.value(), ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
     IconEvent = IconEvent;
+    document = inject(DOCUMENT$1);
     get calendarId() {
         return `${this.id() || 'date-picker'}-calendar`;
     }
@@ -65546,7 +65561,7 @@ class UIDatePicker {
     }
     get offset() {
         // Reads the CSS variable value at runtime, offsetOptions requires a number
-        return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--spacing-sizing-01'));
+        return parseInt(getComputedStyle(this.document.documentElement).getPropertyValue('--spacing-sizing-01'));
     }
     get internalValueAsString() {
         const value = this.internalValue();
@@ -65578,7 +65593,7 @@ class UIDatePicker {
         this.calendarVisible.set(false);
     };
     onInputChange(value) {
-        this.valueChange.emit(value ?? '');
+        this.value.set(value ?? '');
         this.internalValue.set(value);
         const parsed = value ? parseDate(value) : undefined;
         if (parsed) {
@@ -65586,16 +65601,20 @@ class UIDatePicker {
         }
     }
     onCalendarChange(date) {
+        if (!date) {
+            this.value.set(undefined);
+            return;
+        }
         const formatted = format(date, 'MM/dd/yyyy');
         this.internalValue.set(formatted);
         this.activeDate.set(date);
         if (this.closeCalendarOnChange()) {
             this.calendarVisible.set(false);
         }
-        this.valueChange.emit(formatted);
+        this.value.set(formatted);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIDatePicker, isStandalone: true, selector: "ui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, closeCalendarOnChange: { classPropertyName: "closeCalendarOnChange", publicName: "closeCalendarOnChange", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "reference", first: true, predicate: ["reference"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIDatePicker, isStandalone: true, selector: "ui-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, closeCalendarOnChange: { classPropertyName: "closeCalendarOnChange", publicName: "closeCalendarOnChange", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "reference", first: true, predicate: ["reference"], descendants: true, read: ElementRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
         <div data-bspk="date-picker" #root>
             <ui-input
                 #reference
@@ -65613,10 +65632,19 @@ class UIDatePicker {
                 [showClearButton]="false"
                 [size]="size() || 'medium'"
                 [value]="internalValueAsString"
-                (valueChange)="onInputChange($event)"
-                [trailing]="calendarButton"></ui-input>
+                (valueChange)="onInputChange($event)">
+                @if (!disabled() && !readOnly()) {
+                    <ui-button
+                        data-trailing
+                        [icon]="IconEvent"
+                        [iconOnly]="true"
+                        label="Toggle calendar"
+                        variant="tertiary"
+                        (onClick)="toggleCalendar()"></ui-button>
+                }
+            </ui-input>
 
-            <ng-template #calendarButton>
+            <!-- <ng-template #calendarButton>
                 @if (!disabled() && !readOnly()) {
                     <ui-button
                         [icon]="IconEvent"
@@ -65625,7 +65653,7 @@ class UIDatePicker {
                         variant="tertiary"
                         (onClick)="toggleCalendar()"></ui-button>
                 }
-            </ng-template>
+            </ng-template> -->
             @if (calendarVisible()) {
                 <div
                     aria-label="Choose Date"
@@ -65641,11 +65669,11 @@ class UIDatePicker {
                         [focusTrap]="true"
                         [id]="calendarId"
                         [value]="activeDate()"
-                        (onChange)="onCalendarChange($event)"></ui-calendar>
+                        (valueChange)="onCalendarChange($event)"></ui-calendar>
                 </div>
             }
         </div>
-    `, isInline: true, styles: ["[data-bspk=date-picker]{display:flex;flex-direction:column;justify-content:center;width:100%}[data-bspk=date-picker] [data-bspk=input]{padding-right:0}[data-bspk=date-picker] [data-bspk=calendar-popup]{border-radius:var(--radius-lg);box-shadow:var(--drop-shadow-float);z-index:var(--z-index-dropdown);width:fit-content}[data-bspk=date-picker] [data-bspk=inline-alert]{margin-top:var(--spacing-sizing-01)}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["style", "label", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls", "icon", "iconOnly", "destructive", "size", "variant", "width", "tooltip", "disabled", "type", "owner", "class"], outputs: ["onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: UICalendar, selector: "ui-calendar", inputs: ["value", "focusTrap", "id"], outputs: ["onChange"] }, { kind: "component", type: UIInput, selector: "ui-input", inputs: ["value", "name", "inputMode", "showClearButton", "disabled", "invalid", "placeholder", "readOnly", "required", "type", "size", "leading", "trailing", "autoComplete", "id", "owner", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaErrorMessage"], outputs: ["valueChange"] }, { kind: "directive", type: UIFloatingDirective, selector: "[ui-floating]", inputs: ["ui-floating"] }, { kind: "directive", type: UIOutsideClickDirective, selector: "[ui-outside-click]", inputs: ["ui-outside-click"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["[data-bspk=date-picker]{display:flex;flex-direction:column;justify-content:center;width:100%}[data-bspk=date-picker] [data-bspk=input]{padding-right:0}[data-bspk=date-picker] [data-bspk=calendar-popup]{border-radius:var(--radius-lg);box-shadow:var(--drop-shadow-float);z-index:var(--z-index-dropdown);width:fit-content}[data-bspk=date-picker] [data-bspk=inline-alert]{margin-top:var(--spacing-sizing-01)}\n"], dependencies: [{ kind: "component", type: UIButton, selector: "ui-button", inputs: ["style", "label", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls", "icon", "iconOnly", "destructive", "size", "variant", "width", "tooltip", "disabled", "type", "owner", "class"], outputs: ["onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"] }, { kind: "component", type: UICalendar, selector: "ui-calendar", inputs: ["value", "focusTrap", "id"], outputs: ["valueChange"] }, { kind: "component", type: UIInput, selector: "ui-input", inputs: ["value", "name", "inputMode", "showClearButton", "disabled", "invalid", "placeholder", "readOnly", "required", "type", "size", "leading", "trailing", "autoComplete", "id", "owner", "ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "ariaErrorMessage"], outputs: ["valueChange"] }, { kind: "directive", type: UIFloatingDirective, selector: "[ui-floating]", inputs: ["ui-floating"] }, { kind: "directive", type: UIOutsideClickDirective, selector: "[ui-outside-click]", inputs: ["ui-outside-click"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIDatePicker, decorators: [{
             type: Component,
@@ -65667,10 +65695,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [showClearButton]="false"
                 [size]="size() || 'medium'"
                 [value]="internalValueAsString"
-                (valueChange)="onInputChange($event)"
-                [trailing]="calendarButton"></ui-input>
+                (valueChange)="onInputChange($event)">
+                @if (!disabled() && !readOnly()) {
+                    <ui-button
+                        data-trailing
+                        [icon]="IconEvent"
+                        [iconOnly]="true"
+                        label="Toggle calendar"
+                        variant="tertiary"
+                        (onClick)="toggleCalendar()"></ui-button>
+                }
+            </ui-input>
 
-            <ng-template #calendarButton>
+            <!-- <ng-template #calendarButton>
                 @if (!disabled() && !readOnly()) {
                     <ui-button
                         [icon]="IconEvent"
@@ -65679,7 +65716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         variant="tertiary"
                         (onClick)="toggleCalendar()"></ui-button>
                 }
-            </ng-template>
+            </ng-template> -->
             @if (calendarVisible()) {
                 <div
                     aria-label="Choose Date"
@@ -65695,14 +65732,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         [focusTrap]="true"
                         [id]="calendarId"
                         [value]="activeDate()"
-                        (onChange)="onCalendarChange($event)"></ui-calendar>
+                        (valueChange)="onCalendarChange($event)"></ui-calendar>
                 </div>
             }
         </div>
     `, encapsulation: ViewEncapsulation.None, styles: ["[data-bspk=date-picker]{display:flex;flex-direction:column;justify-content:center;width:100%}[data-bspk=date-picker] [data-bspk=input]{padding-right:0}[data-bspk=date-picker] [data-bspk=calendar-popup]{border-radius:var(--radius-lg);box-shadow:var(--drop-shadow-float);z-index:var(--z-index-dropdown);width:fit-content}[data-bspk=date-picker] [data-bspk=inline-alert]{margin-top:var(--spacing-sizing-01)}\n"] }]
-        }], propDecorators: { valueChange: [{
-                type: Output
-            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], closeCalendarOnChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarOnChange", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], reference: [{ type: i0.ViewChild, args: ['reference', { ...{ read: ElementRef }, isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], closeCalendarOnChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeCalendarOnChange", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], reference: [{ type: i0.ViewChild, args: ['reference', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * A field wrapper for the UIDatePicker component.
@@ -65738,7 +65773,7 @@ class UIDatePickerField extends UIDatePicker {
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -65766,7 +65801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -65929,40 +65964,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Utility
  */
 class UIPortalDirective {
-    elRef;
-    /** The target element to render the portal into. Defaults to `document.body` in the browser. */
+    /** The target element to render the portal into. Defaults to `this.document.body` in the browser. */
     container = input(undefined, ...(ngDevMode ? [{ debugName: "container", alias: 'ui-portal' }] : [{ alias: 'ui-portal' }]));
-    constructor(elRef) {
-        this.elRef = elRef;
-    }
-    ngOnChanges(changes) {
-        if (changes['container']) {
-            if (typeof document === 'undefined' || !this.elRef?.nativeElement || !this.elRef.nativeElement.parentNode)
+    host = inject(ElementRef);
+    renderer = inject(Renderer2);
+    document = inject(DOCUMENT$1);
+    constructor() {
+        effect(() => {
+            if (typeof document === 'undefined' ||
+                !this.host?.nativeElement ||
+                !this.host.nativeElement.parentNode ||
+                !this.container())
                 return;
-            this.elRef.nativeElement.parentNode.removeChild(this.elRef.nativeElement);
+            this.renderer.removeChild(this.host.nativeElement.parentNode, this.host.nativeElement);
             // Move the element to the new target
             let targetElement;
-            const target = changes['container'].currentValue;
+            const target = this.container();
             if (typeof target === 'function') {
                 targetElement = target();
             }
             else {
-                targetElement = target || document.body;
+                targetElement = target || this.document.body;
             }
-            targetElement?.appendChild(this.elRef.nativeElement);
-        }
+            this.renderer.appendChild(targetElement, this.host.nativeElement);
+        });
     }
     ngOnDestroy() {
-        if (this.elRef.nativeElement.parentNode)
-            this.elRef.nativeElement.parentNode.removeChild(this.elRef.nativeElement);
+        if (this.host.nativeElement.parentNode && this.host.nativeElement)
+            this.host.nativeElement.parentNode.removeChild(this.host.nativeElement);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIPortalDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: UIPortalDirective, isStandalone: true, selector: "[ui-portal]", inputs: { container: { classPropertyName: "container", publicName: "ui-portal", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIPortalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: UIPortalDirective, isStandalone: true, selector: "[ui-portal]", inputs: { container: { classPropertyName: "container", publicName: "ui-portal", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIPortalDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ui-portal]' }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ui-portal", required: false }] }] } });
+            args: [{
+                    selector: '[ui-portal]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "ui-portal", required: false }] }] } });
 
 /**
  * A temporary effect or overlay that can be applied to a user interface to make content less prominent or to draw
@@ -66009,6 +66049,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Dev
  */
 class UIDialog {
+    /**
+     * Emits when the dialog should be closed, such as when the scrim is clicked or the escape key is pressed. The
+     * parent component should handle this event and set `open` to false to close the dialog.
+     */
     onClose = new EventEmitter();
     box = viewChild('box', ...(ngDevMode ? [{ debugName: "box", read: ElementRef }] : [{ read: ElementRef }]));
     open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
@@ -66021,11 +66065,12 @@ class UIDialog {
     disableFocusTrap = input(false, ...(ngDevMode ? [{ debugName: "disableFocusTrap" }] : []));
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     ariaDescription = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescription" }] : []));
+    document = inject(DOCUMENT$1);
     keydownBound = signal(false, ...(ngDevMode ? [{ debugName: "keydownBound" }] : []));
     ngOnChanges() {
         const isOpen = this.open();
         // Lock page scroll when open (like React)
-        document.documentElement.style.overflow = isOpen ? 'hidden' : '';
+        this.document.documentElement.style.overflow = isOpen ? 'hidden' : '';
         if (isOpen && !this.keydownBound()) {
             window.addEventListener('keydown', this._onKeydown);
             this.keydownBound.set(true);
@@ -66036,7 +66081,7 @@ class UIDialog {
         }
     }
     ngOnDestroy() {
-        document.documentElement.style.overflow = '';
+        this.document.documentElement.style.overflow = '';
         if (this.keydownBound()) {
             window.removeEventListener('keydown', this._onKeydown);
             this.keydownBound.set(false);
@@ -66179,6 +66224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Dev
  */
 class UIFab {
+    /** Event emitted when the button is clicked. */
     onClick = new EventEmitter();
     /** Event emitted when the button receives focus. */
     onFocus = new EventEmitter();
@@ -66192,7 +66238,7 @@ class UIFab {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
     tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
-    size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     placement = input('bottom-right', ...(ngDevMode ? [{ debugName: "placement" }] : []));
     container = input('local', ...(ngDevMode ? [{ debugName: "container" }] : []));
@@ -66253,7 +66299,7 @@ class UIFab {
             }
             <span [attr.data-touch-target]="true"></span>
         </button>
-    `, isInline: true, styles: ["[data-bspk=fab]{--placement-offset: var(--spacing-sizing-04);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;text-decoration:none;z-index:var(--z-index-fab);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-sm);background:var(--variant-background);color:var(--variant-foreground);--variant-gradient: linear-gradient(var(--variant-background), var(--variant-background))}[data-bspk=fab][data-container=page]{position:fixed}[data-bspk=fab][data-container=local]{position:absolute}[data-bspk=fab][data-placement=top-right]{top:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-right]{bottom:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=top-left]{top:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-left]{bottom:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab]>[data-fab-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=fab]>[data-fab-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=fab][data-size=small]{font:var(--labels-base);height:var(--spacing-sizing-10);padding:0 var(--spacing-sizing-04)}[data-bspk=fab][data-size=small]>[data-fab-icon]{width:var(--spacing-sizing-05)}[data-bspk=fab][data-size=medium]{font:var(--labels-large);height:var(--spacing-sizing-14);padding:0 var(--spacing-sizing-07)}[data-bspk=fab][data-size=medium]>[data-fab-icon]{width:var(--spacing-sizing-06)}[data-bspk=fab][data-variant=primary]{--variant-background: var(--surface-brand-primary);--variant-foreground: var(--foreground-brand-on-primary)}[data-bspk=fab][data-variant=secondary]{--variant-background: var(--surface-brand-secondary);--variant-foreground: var(--foreground-brand-on-secondary)}[data-bspk=fab][data-variant=neutral]{--variant-background: var(--surface-neutral-t1-base);--variant-foreground: var(--foreground-neutral-on-surface-variant-01)}[data-pseudo=hover]>[data-bspk=fab],[data-bspk=fab]:hover{background:linear-gradient(var(--interactions-brand-hover-opacity),var(--interactions-brand-hover-opacity)),var(--variant-gradient)}[data-pseudo=active]>[data-bspk=fab],[data-bspk=fab]:active{background:linear-gradient(var(--interactions-brand-press-opacity),var(--interactions-brand-press-opacity)),var(--variant-gradient)}[data-pseudo=focus]>[data-bspk=fab],[data-bspk=fab]:focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=fab][data-round]{border-radius:var(--radius-full);aspect-ratio:1/1;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["icon", "width"] }, { kind: "directive", type: UITooltipDirective, selector: "[ui-tooltip]", inputs: ["ui-tooltip"], outputs: ["ui-tooltipChange"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["[data-bspk=fab]{--placement-offset: var(--spacing-sizing-04);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;text-decoration:none;z-index:var(--z-index-fab);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-sm);background:var(--variant-background);color:var(--variant-foreground);--variant-gradient: linear-gradient(var(--variant-background), var(--variant-background))}[data-bspk=fab][data-container=page]{position:fixed}[data-bspk=fab][data-container=local]{position:absolute}[data-bspk=fab][data-placement=top-right]{top:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-right]{bottom:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=top-left]{top:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-left]{bottom:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab]>[data-fab-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=fab]>[data-fab-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=fab][data-size=medium]{font:var(--labels-base);height:var(--spacing-sizing-10);padding:0 var(--spacing-sizing-04)}[data-bspk=fab][data-size=medium]>[data-fab-icon]{width:var(--spacing-sizing-05)}[data-bspk=fab][data-size=x-large]{font:var(--labels-large);height:var(--spacing-sizing-14);padding:0 var(--spacing-sizing-07)}[data-bspk=fab][data-size=x-large]>[data-fab-icon]{width:var(--spacing-sizing-06)}[data-bspk=fab][data-variant=primary]{--variant-background: var(--surface-brand-primary);--variant-foreground: var(--foreground-brand-on-primary)}[data-bspk=fab][data-variant=secondary]{--variant-background: var(--surface-brand-secondary);--variant-foreground: var(--foreground-brand-on-secondary)}[data-bspk=fab][data-variant=neutral]{--variant-background: var(--surface-neutral-t1-base);--variant-foreground: var(--foreground-neutral-on-surface-variant-01)}[data-pseudo=hover]>[data-bspk=fab],[data-bspk=fab]:hover{background:linear-gradient(var(--interactions-brand-hover-opacity),var(--interactions-brand-hover-opacity)),var(--variant-gradient)}[data-pseudo=active]>[data-bspk=fab],[data-bspk=fab]:active{background:linear-gradient(var(--interactions-brand-press-opacity),var(--interactions-brand-press-opacity)),var(--variant-gradient)}[data-pseudo=focus]>[data-bspk=fab],[data-bspk=fab]:focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=fab][data-round]{border-radius:var(--radius-full);aspect-ratio:1/1;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["icon", "width"] }, { kind: "directive", type: UITooltipDirective, selector: "[ui-tooltip]", inputs: ["ui-tooltip"], outputs: ["ui-tooltipChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIFab, decorators: [{
             type: Component,
@@ -66290,7 +66336,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         </button>
     `, encapsulation: ViewEncapsulation.None, standalone: true, imports: [CommonModule, UIIcon, UITooltipDirective], host: {
                         style: 'display: contents;',
-                    }, styles: ["[data-bspk=fab]{--placement-offset: var(--spacing-sizing-04);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;text-decoration:none;z-index:var(--z-index-fab);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-sm);background:var(--variant-background);color:var(--variant-foreground);--variant-gradient: linear-gradient(var(--variant-background), var(--variant-background))}[data-bspk=fab][data-container=page]{position:fixed}[data-bspk=fab][data-container=local]{position:absolute}[data-bspk=fab][data-placement=top-right]{top:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-right]{bottom:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=top-left]{top:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-left]{bottom:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab]>[data-fab-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=fab]>[data-fab-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=fab][data-size=small]{font:var(--labels-base);height:var(--spacing-sizing-10);padding:0 var(--spacing-sizing-04)}[data-bspk=fab][data-size=small]>[data-fab-icon]{width:var(--spacing-sizing-05)}[data-bspk=fab][data-size=medium]{font:var(--labels-large);height:var(--spacing-sizing-14);padding:0 var(--spacing-sizing-07)}[data-bspk=fab][data-size=medium]>[data-fab-icon]{width:var(--spacing-sizing-06)}[data-bspk=fab][data-variant=primary]{--variant-background: var(--surface-brand-primary);--variant-foreground: var(--foreground-brand-on-primary)}[data-bspk=fab][data-variant=secondary]{--variant-background: var(--surface-brand-secondary);--variant-foreground: var(--foreground-brand-on-secondary)}[data-bspk=fab][data-variant=neutral]{--variant-background: var(--surface-neutral-t1-base);--variant-foreground: var(--foreground-neutral-on-surface-variant-01)}[data-pseudo=hover]>[data-bspk=fab],[data-bspk=fab]:hover{background:linear-gradient(var(--interactions-brand-hover-opacity),var(--interactions-brand-hover-opacity)),var(--variant-gradient)}[data-pseudo=active]>[data-bspk=fab],[data-bspk=fab]:active{background:linear-gradient(var(--interactions-brand-press-opacity),var(--interactions-brand-press-opacity)),var(--variant-gradient)}[data-pseudo=focus]>[data-bspk=fab],[data-bspk=fab]:focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=fab][data-round]{border-radius:var(--radius-full);aspect-ratio:1/1;padding:0}\n"] }]
+                    }, styles: ["[data-bspk=fab]{--placement-offset: var(--spacing-sizing-04);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;text-decoration:none;z-index:var(--z-index-fab);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-sm);background:var(--variant-background);color:var(--variant-foreground);--variant-gradient: linear-gradient(var(--variant-background), var(--variant-background))}[data-bspk=fab][data-container=page]{position:fixed}[data-bspk=fab][data-container=local]{position:absolute}[data-bspk=fab][data-placement=top-right]{top:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-right]{bottom:var(--placement-offset);right:var(--placement-offset)}[data-bspk=fab][data-placement=top-left]{top:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab][data-placement=bottom-left]{bottom:var(--placement-offset);left:var(--placement-offset)}[data-bspk=fab]>[data-fab-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=fab]>[data-fab-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=fab][data-size=medium]{font:var(--labels-base);height:var(--spacing-sizing-10);padding:0 var(--spacing-sizing-04)}[data-bspk=fab][data-size=medium]>[data-fab-icon]{width:var(--spacing-sizing-05)}[data-bspk=fab][data-size=x-large]{font:var(--labels-large);height:var(--spacing-sizing-14);padding:0 var(--spacing-sizing-07)}[data-bspk=fab][data-size=x-large]>[data-fab-icon]{width:var(--spacing-sizing-06)}[data-bspk=fab][data-variant=primary]{--variant-background: var(--surface-brand-primary);--variant-foreground: var(--foreground-brand-on-primary)}[data-bspk=fab][data-variant=secondary]{--variant-background: var(--surface-brand-secondary);--variant-foreground: var(--foreground-brand-on-secondary)}[data-bspk=fab][data-variant=neutral]{--variant-background: var(--surface-neutral-t1-base);--variant-foreground: var(--foreground-neutral-on-surface-variant-01)}[data-pseudo=hover]>[data-bspk=fab],[data-bspk=fab]:hover{background:linear-gradient(var(--interactions-brand-hover-opacity),var(--interactions-brand-hover-opacity)),var(--variant-gradient)}[data-pseudo=active]>[data-bspk=fab],[data-bspk=fab]:active{background:linear-gradient(var(--interactions-brand-press-opacity),var(--interactions-brand-press-opacity)),var(--variant-gradient)}[data-pseudo=focus]>[data-bspk=fab],[data-bspk=fab]:focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=fab][data-round]{border-radius:var(--radius-full);aspect-ratio:1/1;padding:0}\n"] }]
         }], propDecorators: { onClick: [{
                 type: Output
             }], onFocus: [{
@@ -66400,7 +66446,7 @@ class UIInputField extends UIInput {
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -66428,7 +66474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -66455,7 +66501,7 @@ function isNumber(value, fallbackValue) {
 }
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
- * pressing the (+) or (-).
+ * pressing the (+) or (-) buttons.
  *
  * The value of the input is a number. The value is clamped to the min and max values if they are provided.
  *
@@ -66473,7 +66519,6 @@ function isNumber(value, fallbackValue) {
  * @phase UXReview
  */
 class UIInputNumber {
-    valueChange = output();
     inputEl = viewChild.required('inputEl');
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
@@ -66539,7 +66584,7 @@ class UIInputNumber {
         this.value.set(next !== undefined ? next.toString() : '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: UIInputNumber, isStandalone: true, selector: "ui-input-number", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, owner: { classPropertyName: "owner", publicName: "owner", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", value: "valueChange" }, host: { attributes: { "data-bspk": "input-number" }, properties: { "attr.data-size": "size()", "attr.data-invalid": "invalid() || null", "attr.data-centered": "centered || null", "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readOnly() || null", "attr.data-stepper-input": "true" } }, providers: [], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: UIInputNumber, isStandalone: true, selector: "ui-input-number", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, owner: { classPropertyName: "owner", publicName: "owner", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-bspk": "input-number" }, properties: { "attr.data-size": "size()", "attr.data-invalid": "invalid() || null", "attr.data-centered": "centered || null", "attr.data-disabled": "disabled() || null", "attr.data-readonly": "readOnly() || null", "attr.data-stepper-input": "true" } }, providers: [], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <input
             data-main-input
             [attr.aria-labelledby]="ariaLabelledBy() || null"
@@ -66630,7 +66675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.data-readonly]': 'readOnly() || null',
                         '[attr.data-stepper-input]': 'true',
                     }, encapsulation: ViewEncapsulation.None, styles: ["[data-bspk=input-number]{--font: var(--body-base);--height: var(--spacing-sizing-10);--svg-width: var(--spacing-sizing-05);--color: var(--foreground-neutral-on-surface);width:100%;display:flex;flex-flow:row nowrap;font:var(--font);height:var(--height);border:1px solid var(--stroke-neutral-base);border-radius:var(--radius-sm);background:var(--surface-neutral-t1-base)}[data-bspk=input-number]:focus-within{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=input-number] [data-divider]{width:1px;background:var(--stroke-neutral-base);margin:3px 0;height:calc(var(--height) - 8px)}[data-bspk=input-number] button{width:var(--height);height:calc(var(--height) - 2px);background:none;border:none;cursor:pointer;font:var(--font);flex-shrink:0;display:flex;justify-content:center;align-items:center;color:var(--color)}[data-bspk=input-number] button svg{width:var(--svg-width)}[data-bspk=input-number] button:focus{outline:none}[data-bspk=input-number] button:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=input-number] input{color:var(--color);min-width:0;display:block;font:var(--font);text-align:center;padding:0 var(--spacing-sizing-03);background:transparent;border:none;flex-grow:1}[data-bspk=input-number] input:focus{outline:none}[data-bspk=input-number] input::-webkit-outer-spin-button,[data-bspk=input-number] input::-webkit-inner-spin-button{appearance:none;margin:0}[data-bspk=input-number] input[type=number]{appearance:textfield}[data-bspk=input-number]:not([data-disabled],[data-readonly]) input:hover,[data-bspk=input-number]:not([data-disabled],[data-readonly]) button:not(:disabled):hover{background-color:var(--interactions-hover-opacity)}[data-bspk=input-number]:not([data-disabled],[data-readonly]) input:active,[data-bspk=input-number]:not([data-disabled],[data-readonly]) button:not(:disabled):active{background-color:var(--interactions-press-opacity)}[data-bspk=input-number]:not([data-disabled],[data-readonly])[data-invalid]{border-color:var(--status-error);outline-color:var(--status-error)}[data-bspk=input-number][data-disabled],[data-bspk=input-number][data-readonly]{--color: var(--foreground-neutral-disabled-on-surface);border-color:var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=input-number][data-disabled] [data-divider],[data-bspk=input-number][data-readonly] [data-divider]{border-color:var(--stroke-neutral-disabled-light)}[data-bspk=input-number][data-readonly] input{color:var(--foreground-neutral-on-surface)!important}[data-bspk=input-number][data-size=small]{--font: var(--body-small);--height: var(--spacing-sizing-08)}[data-bspk=input-number][data-size=large]{--font: var(--body-large);--height: var(--spacing-sizing-12);--svg-width: var(--spacing-sizing-06)}[data-bspk=input-number][data-centered] button:first-of-type{order:-1}[data-bspk=input-number][data-centered] [data-divider]{display:none}\n"] }]
-        }], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], owner: [{ type: i0.Input, args: [{ isSignal: true, alias: "owner", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }] } });
+        }], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], owner: [{ type: i0.Input, args: [{ isSignal: true, alias: "owner", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }] } });
 
 /**
  * A field wrapper for the UIInputNumber component.
@@ -66666,7 +66711,7 @@ class UIInputNumberField extends UIInputNumber {
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -66694,7 +66739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -67002,7 +67047,6 @@ const SELECT_OPTIONS = countryCodes.map((code) => {
  * @phase Dev
  */
 class UIInputPhone {
-    valueChange = output();
     keyNavigation = new KeyNavigationUtility();
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
@@ -67128,7 +67172,6 @@ class UIInputPhone {
         const formatted = this.formatValueIfNeeded(newValue || '');
         this.previousValue.set(formatted);
         this.value.set(formatted);
-        this.valueChange.emit(formatted);
     }
     formatValueIfNeeded(newValue) {
         const prev = this.previousValue();
@@ -67153,7 +67196,7 @@ class UIInputPhone {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIInputPhone, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIInputPhone, isStandalone: true, selector: "ui-input-phone", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, initialCountryCode: { classPropertyName: "initialCountryCode", publicName: "initialCountryCode", isSignal: true, isRequired: false, transformFunction: null }, disableFormatting: { classPropertyName: "disableFormatting", publicName: "disableFormatting", isSignal: true, isRequired: false, transformFunction: null }, scrollLimit: { classPropertyName: "scrollLimit", publicName: "scrollLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", value: "valueChange" }, host: { attributes: { "data-bspk": "input-phone", "tabindex": "-1" } }, viewQueries: [{ propertyName: "reference", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIInputPhone, isStandalone: true, selector: "ui-input-phone", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, initialCountryCode: { classPropertyName: "initialCountryCode", publicName: "initialCountryCode", isSignal: true, isRequired: false, transformFunction: null }, disableFormatting: { classPropertyName: "disableFormatting", publicName: "disableFormatting", isSignal: true, isRequired: false, transformFunction: null }, scrollLimit: { classPropertyName: "scrollLimit", publicName: "scrollLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-bspk": "input-phone", "tabindex": "-1" } }, viewQueries: [{ propertyName: "reference", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["inputEl"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
         <ui-input
             [attr.data-bspk-owner]="'input-phone'"
             type="tel"
@@ -67325,7 +67368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             </ui-menu>
         }
     `, styles: ["[data-bspk=input-phone]{position:relative;width:100%}[data-bspk-owner=input-phone][data-bspk=input]{padding-left:0}[data-bspk-owner=input-phone][data-bspk=input]:focus-within{outline:none}[data-bspk-owner=input-phone][data-bspk=input] input:focus-visible{outline:solid 2px var(--stroke-neutral-focus);isolation:isolate;border-radius:var(--radius-sm)}[data-bspk-owner=input-phone][data-bspk=input] [data-bspk=divider]{margin:0 var(--spacing-sizing-02) 0 0}[data-bspk-owner=input-phone][data-bspk=input] [data-leading]{position:relative}[data-bspk-owner=input-phone][data-bspk=input] [data-leading] [data-bspk=button]{gap:var(--spacing-sizing-02);padding:0 var(--spacing-sizing-03);min-height:100%;margin-right:var(--spacing-sizing-02);position:relative;z-index:2}[data-bspk-owner=input-phone][data-bspk=input] [data-leading] [data-bspk=button]:after{content:\"\";position:absolute;top:var(--spacing-sizing-01);bottom:var(--spacing-sizing-01);right:0;width:1px;background-color:var(--stroke-neutral-base);pointer-events:none}[data-bspk-owner=input-phone][data-bspk=input][data-size=small] [data-leading] [data-bspk=button]{padding-left:var(--spacing-sizing-02)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], initialCountryCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialCountryCode", required: false }] }], disableFormatting: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFormatting", required: false }] }], scrollLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLimit", required: false }] }], reference: [{ type: i0.ViewChild, args: ['inputEl', { ...{ read: ElementRef }, isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['inputEl', { ...{ read: ElementRef }, isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], initialCountryCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialCountryCode", required: false }] }], disableFormatting: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFormatting", required: false }] }], scrollLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLimit", required: false }] }], reference: [{ type: i0.ViewChild, args: ['inputEl', { ...{ read: ElementRef }, isSignal: true }] }], containerRef: [{ type: i0.ViewChild, args: ['inputEl', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * A field wrapper for the UIInputPhone component.
@@ -67361,7 +67404,7 @@ class UIInputPhoneField extends UIInputPhone {
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -67389,7 +67432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -67654,61 +67697,31 @@ const INPUT_TYPE_THRESHOLD = 7;
  * multiple micro pages.
  *
  * @example
- *     <ui-pagination [value]="currentPage" [numPages]="10" (onChange)="currentPage = $event"></ui-pagination>
+ *     <ui-pagination [value]="currentPage" [numPages]="10" (valueChange)="currentPage = $event"></ui-pagination>
  *
  * @name Pagination
  * @phase Dev
  */
 class UIPagination {
-    /** Called when the page changes. */
-    onChange = new EventEmitter();
     numPages = input(2, ...(ngDevMode ? [{ debugName: "numPages" }] : []));
-    value = input(1, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    // Internal string representation for the input field when large page counts.
-    inputValue = '1';
+    value = model(1, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    inputValue = signal(this.value().toString(), ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
     INPUT_TYPE_THRESHOLD = INPUT_TYPE_THRESHOLD;
     ChevronRight = IconChevronRight;
     ChevronLeft = IconChevronLeft;
-    ngOnChanges(changes) {
-        if (changes['value']) {
-            this.inputValue = String(this.value());
-        }
-    }
-    emit(page) {
-        const next = this.clamp(page);
-        this.onChange.emit(next);
-        sendAriaLiveMessage(`Page ${page} of ${this.numPages()}`);
-    }
-    previousPage() {
-        if (this.value() > 1)
-            this.emit(this.value() - 1);
-    }
-    nextPage() {
-        if (this.value() < this.numPages())
-            this.emit(this.value() + 1);
-    }
-    submitManual(event) {
+    pages = computed(() => Array.from({ length: this.numPages() }, (_, i) => i + 1), ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    label = computed(() => `Go to page ${this.value()}`, ...(ngDevMode ? [{ debugName: "label" }] : []));
+    updateValue(value, event) {
         if (event)
             event.preventDefault();
-        const parsedValue = parseInt(this.inputValue || '', 10);
-        if (isNaN(parsedValue)) {
-            this.inputValue = String(this.value());
-            return;
-        }
-        const next = this.clamp(parsedValue);
-        this.emit(next);
-        if (next !== parsedValue)
-            this.inputValue = String(next);
+        const next = this.clamp(Number(value));
+        this.value.set(next);
+        sendAriaLiveMessage(`Page ${next} of ${this.numPages()}`);
+        this.inputValue.set(next.toString());
     }
     inBounds(n) {
         return n >= 1 && n <= this.numPages();
     }
-    pages() {
-        return Array.from({ length: this.numPages() }, (_, i) => i + 1);
-    }
-    label() {
-        return `Go to page ${this.value()}`;
-    }
     clamp(page) {
         if (page < 1)
             return 1;
@@ -67717,28 +67730,28 @@ class UIPagination {
         return page;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIPagination, isStandalone: true, selector: "ui-pagination", inputs: { numPages: { classPropertyName: "numPages", publicName: "numPages", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { attributes: { "data-bspk": "pagination", "role": "group" } }, usesOnChanges: true, ngImport: i0, template: `@if (numPages() > 1) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIPagination, isStandalone: true, selector: "ui-pagination", inputs: { numPages: { classPropertyName: "numPages", publicName: "numPages", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-bspk": "pagination", "role": "group" } }, ngImport: i0, template: `@if (numPages() > 1) {
         <ng-container>
             <ui-button
                 [disabled]="!inBounds(value() - 1)"
                 [icon]="ChevronLeft"
                 [iconOnly]="true"
                 [label]="value() === 1 ? 'First page' : 'Previous page (' + (value() - 1) + ')'"
-                (onClick)="previousPage()"
+                (onClick)="updateValue(value() - 1)"
                 size="small"
                 variant="tertiary"
                 owner="pagination"></ui-button>
 
             @if (numPages() > INPUT_TYPE_THRESHOLD) {
                 <ng-container>
-                    <form data-input-form (submit)="submitManual($event)">
+                    <form data-input-form (submit)="updateValue(inputValue(), $event)">
                         <ui-input
                             ariaLabel="Page number"
                             [type]="'number'"
                             [showClearButton]="false"
-                            [value]="inputValue"
-                            (valueChange)="inputValue = $event!"
-                            (blur)="submitManual()"
+                            [value]="inputValue() || '1'"
+                            (valueChange)="this.inputValue.set($event!)"
+                            (blur)="updateValue(inputValue())"
                             name="page-number" />
                         <span>of {{ numPages() }}</span>
                     </form>
@@ -67752,7 +67765,7 @@ class UIPagination {
                     <ui-button
                         [ariaLabel]="'Page ' + page"
                         [label]="page.toString()"
-                        (onClick)="emit(page)"
+                        (onClick)="updateValue(page)"
                         size="small"
                         [variant]="value() === page ? 'primary' : 'tertiary'"
                         owner="pagination"></ui-button>
@@ -67764,7 +67777,7 @@ class UIPagination {
                 [icon]="ChevronRight"
                 [iconOnly]="true"
                 [label]="value() === numPages() ? 'Last page' : 'Next page (' + (value() + 1) + ')'"
-                (onClick)="nextPage()"
+                (onClick)="updateValue(value() + 1)"
                 size="small"
                 variant="tertiary"
                 owner="pagination"></ui-button>
@@ -67780,21 +67793,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [icon]="ChevronLeft"
                 [iconOnly]="true"
                 [label]="value() === 1 ? 'First page' : 'Previous page (' + (value() - 1) + ')'"
-                (onClick)="previousPage()"
+                (onClick)="updateValue(value() - 1)"
                 size="small"
                 variant="tertiary"
                 owner="pagination"></ui-button>
 
             @if (numPages() > INPUT_TYPE_THRESHOLD) {
                 <ng-container>
-                    <form data-input-form (submit)="submitManual($event)">
+                    <form data-input-form (submit)="updateValue(inputValue(), $event)">
                         <ui-input
                             ariaLabel="Page number"
                             [type]="'number'"
                             [showClearButton]="false"
-                            [value]="inputValue"
-                            (valueChange)="inputValue = $event!"
-                            (blur)="submitManual()"
+                            [value]="inputValue() || '1'"
+                            (valueChange)="this.inputValue.set($event!)"
+                            (blur)="updateValue(inputValue())"
                             name="page-number" />
                         <span>of {{ numPages() }}</span>
                     </form>
@@ -67808,7 +67821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     <ui-button
                         [ariaLabel]="'Page ' + page"
                         [label]="page.toString()"
-                        (onClick)="emit(page)"
+                        (onClick)="updateValue(page)"
                         size="small"
                         [variant]="value() === page ? 'primary' : 'tertiary'"
                         owner="pagination"></ui-button>
@@ -67820,7 +67833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [icon]="ChevronRight"
                 [iconOnly]="true"
                 [label]="value() === numPages() ? 'Last page' : 'Next page (' + (value() + 1) + ')'"
-                (onClick)="nextPage()"
+                (onClick)="updateValue(value() + 1)"
                 size="small"
                 variant="tertiary"
                 owner="pagination"></ui-button>
@@ -67829,9 +67842,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         'data-bspk': 'pagination',
                         role: 'group',
                     }, styles: ["[data-bspk=pagination]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-01);flex:1}[data-bspk=pagination] [data-input-form]{display:contents}[data-bspk=pagination] [data-input-form] [data-bspk=input]{max-width:var(--spacing-sizing-12);margin-right:var(--spacing-sizing-01)}[data-bspk=pagination] [data-input-form] [data-bspk=input] input{text-align:center}[data-bspk=pagination] [data-input-form] span{display:block;white-space:nowrap;font:var(--body-small)}[data-bspk=pagination] button[data-bspk-owner=pagination][data-bspk=button][data-size=small]{padding:6px 0}\n"] }]
-        }], propDecorators: { onChange: [{
-                type: Output
-            }], numPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "numPages", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+        }], propDecorators: { numPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "numPages", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /** Copyright 2026 Anywhere Real Estate - CC BY 4.0 */
 
@@ -67847,11 +67858,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Utility
  */
 class UIRadio {
-    checkedChange = new EventEmitter();
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
-    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     id = input(uniqueId('radio'), ...(ngDevMode ? [{ debugName: "id" }] : []));
     invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
@@ -67859,10 +67869,10 @@ class UIRadio {
     readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
     onInputChange(event) {
         const inputElement = event.target;
-        this.checkedChange.emit(inputElement.checked);
+        this.checked.set(inputElement.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: UIRadio, isStandalone: true, selector: "ui-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { attributes: { "data-bspk": "radio" } }, ngImport: i0, template: `<input
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: UIRadio, isStandalone: true, selector: "ui-radio", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "data-bspk": "radio" } }, ngImport: i0, template: `<input
             [attr.name]="name()"
             [attr.id]="id()"
             [attr.aria-label]="ariaLabel()"
@@ -67893,9 +67903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <span aria-hidden="true"></span>`, encapsulation: ViewEncapsulation.None, host: {
                         'data-bspk': 'radio',
                     }, styles: ["[data-bspk=radio]{display:block;position:relative;width:var(--spacing-sizing-06);aspect-ratio:1/1;padding:2px}[data-bspk=radio] input[type=radio]{position:absolute;opacity:0;z-index:2;width:100%;height:100%;top:0;left:0;cursor:pointer}[data-bspk=radio] span{--stroke: var(--stroke-neutral-base);--inner: var(--foreground-brand-primary);--background: none;position:relative;z-index:1;display:flex;width:var(--spacing-sizing-05);aspect-ratio:1/1;border-radius:50%;border:2px solid var(--stroke);align-items:center;flex-direction:column;justify-content:center;background:var(--background)}[data-bspk=radio] span:before{content:\"\";display:block;width:100%;scale:.7;aspect-ratio:1/1;background:var(--inner);border-radius:var(--radius-full);opacity:0}[data-bspk=radio] input[type=radio]:not(:disabled):hover+span{--background: var(--interactions-neutral-hover-opacity)}[data-bspk=radio] input[type=radio]:not(:disabled):active+span{--background: var(--interactions-neutral-press-opacity)}[data-bspk=radio] input[type=radio]:not(:disabled)[data-invalid]+span{--stroke: var(--status-error);--inner: var(--status-error)}[data-bspk=radio] input[type=radio]:checked+span{--stroke: var(--stroke-brand-primary)}[data-bspk=radio] input[type=radio]:checked+span:before{opacity:1}[data-bspk=radio] input[type=radio]:disabled{pointer-events:none}[data-bspk=radio] input[type=radio]:disabled+span{--stroke: var(--stroke-neutral-interactions-disabled-light);--inner: var(--foreground-neutral-disabled-on-surface)}\n"] }]
-        }], propDecorators: { checkedChange: [{
-                type: Output
-            }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -67930,7 +67938,7 @@ class UIRadioOption extends UIRadio {
                 [invalid]="invalid()"
                 [readOnly]="readOnly()"
                 [ariaLabel]="ariaLabel() || computedAriaLabel()"
-                (checkedChange)="checkedChange.emit($event)">
+                (checkedChange)="checked.set($event)">
             </ui-radio>
         </span>
     </ui-list-item>`, isInline: true, dependencies: [{ kind: "component", type: UIRadio, selector: "ui-radio", inputs: ["name", "value", "ariaLabel", "checked", "disabled", "id", "invalid", "required", "readOnly"], outputs: ["checkedChange"] }, { kind: "component", type: UIListItem, selector: "ui-list-item", inputs: ["active", "owner", "ariaLabel", "ariaRole", "ariaSelected", "ariaDisabled", "ariaReadonly", "htmlFor", "disabled", "readOnly", "as", "href", "label", "subText", "width", "tabIndex", "id"], outputs: ["onClick"] }] });
@@ -67958,7 +67966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [invalid]="invalid()"
                 [readOnly]="readOnly()"
                 [ariaLabel]="ariaLabel() || computedAriaLabel()"
-                (checkedChange)="checkedChange.emit($event)">
+                (checkedChange)="checked.set($event)">
             </ui-radio>
         </span>
     </ui-list-item>`,
@@ -67984,7 +67992,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Dev
  */
 class UIRadioGroup {
-    valueChange = output();
     id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -67999,17 +68006,17 @@ class UIRadioGroup {
     readOnly = input(false, ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
     constructor() {
         this.value.subscribe((val) => {
-            this.valueChange.emit(val || '');
+            this.value.set(val || '');
         });
     }
     /** Handles changes to the radio button selection. */
     onRadioChange(value, checked) {
         if (checked) {
-            this.valueChange.emit(value);
+            this.value.set(value);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UIRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIRadioGroup, isStandalone: true, selector: "ui-radio-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", value: "valueChange" }, host: { attributes: { "data-bspk": "radio-group", "style.display": "flex", "style.flex-direction": "column", "style.gap": "0", "style.max-width": "100%", "style.--list-item-height": "auto" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UIRadioGroup, isStandalone: true, selector: "ui-radio-group", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-bspk": "radio-group", "style.display": "flex", "style.flex-direction": "column", "style.gap": "0", "style.max-width": "100%", "style.--list-item-height": "auto" } }, ngImport: i0, template: `
         <div
             [attr.aria-describedby]="ariaDescribedBy() || null"
             [attr.aria-errormessage]="ariaErrorMessage() || null"
@@ -68074,7 +68081,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     },
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], ctorParameters: () => [], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
 
 /**
  * A field wrapper for the UIRadioGroup component.
@@ -68110,7 +68117,7 @@ class UIRadioGroupField extends UIRadioGroup {
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -68137,7 +68144,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -68164,15 +68171,14 @@ const TAB_BADGE_SIZES = {
  *
  * See TabGroup or SegmentedControl for examples.
  *
- * @ignore
+ * @name TabList
+ * @phase Utility
  */
 class UITabListUtility {
-    /** The function to call when the tab is clicked. */
-    valueChange = new EventEmitter();
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     width = input('hug', ...(ngDevMode ? [{ debugName: "width" }] : []));
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
     iconsOnly = input(false, ...(ngDevMode ? [{ debugName: "iconsOnly" }] : []));
     // eslint-disable-next-line @angular-eslint/no-input-rename
@@ -68235,7 +68241,7 @@ class UITabListUtility {
             return;
         this.activeId.set(item.id);
         if (!item.disabled)
-            this.valueChange.emit(item.value);
+            this.value.set(item.value);
     }
     handleKeyDownEvent(event) {
         const opts = this.optionsWithIds().filter((o) => !o.disabled);
@@ -68253,28 +68259,26 @@ class UITabListUtility {
             Enter: () => {
                 const active = this.optionsWithIds().find((o) => o.id === this.activeId());
                 if (active && !active.disabled)
-                    this.valueChange.emit(active.value);
+                    this.value.set(active.value);
             },
             Space: () => {
                 const active = this.optionsWithIds().find((o) => o.id === this.activeId());
                 if (active && !active.disabled)
-                    this.valueChange.emit(active.value);
+                    this.value.set(active.value);
             },
         }, {
             preventDefault: true,
         })(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UITabListUtility, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: UITabListUtility, isStandalone: true, selector: "ng-component", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, iconsOnly: { classPropertyName: "iconsOnly", publicName: "iconsOnly", isSignal: true, isRequired: false, transformFunction: null }, sizeProp: { classPropertyName: "sizeProp", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: UITabListUtility, isStandalone: true, selector: "ng-component", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, iconsOnly: { classPropertyName: "iconsOnly", publicName: "iconsOnly", isSignal: true, isRequired: false, transformFunction: null }, sizeProp: { classPropertyName: "sizeProp", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UITabListUtility, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }], ctorParameters: () => [], propDecorators: { valueChange: [{
-                type: Output
-            }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], iconsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconsOnly", required: false }] }], sizeProp: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], iconsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconsOnly", required: false }] }], sizeProp: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 /**
  * Navigation tool that organizes content across different screens and views.
  *
@@ -68399,7 +68403,7 @@ class UISegmentedControl extends UITabListUtility {
         data-bspk="segmented-control"
         [options]="options()"
         [value]="value()"
-        (valueChange)="valueChange.emit($event)"
+        (valueChange)="value.set($event)"
         [label]="label()"
         [size]="size()"
         [width]="width()"
@@ -68413,7 +68417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         data-bspk="segmented-control"
         [options]="options()"
         [value]="value()"
-        (valueChange)="valueChange.emit($event)"
+        (valueChange)="value.set($event)"
         [label]="label()"
         [size]="size()"
         [width]="width()"
@@ -68446,7 +68450,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  */
 class UISelect {
     keyNavigation = new KeyNavigationUtility();
-    valueChange = output();
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     placeholder = input('Select one', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
@@ -68478,14 +68481,15 @@ class UISelect {
             width: this.menuWidth() || 'fit-content',
         };
     }, ...(ngDevMode ? [{ debugName: "ngMenuStyle" }] : []));
+    document = inject(DOCUMENT$1);
     constructor() {
         this.value.subscribe((val) => {
-            this.valueChange.emit(val || '');
+            this.value.set(val || '');
         });
     }
     get offset() {
         // Reads the CSS variable value at runtime, offsetOptions requires a number
-        return parseInt(getComputedStyle(document.documentElement).getPropertyValue('--spacing-sizing-01'));
+        return parseInt(getComputedStyle(this.document.documentElement).getPropertyValue('--spacing-sizing-01'));
     }
     get selectedItem() {
         return this.menuItems().find((item) => item.value === this.value());
@@ -68545,7 +68549,7 @@ class UISelect {
         this.keyNavigation.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UISelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UISelect, isStandalone: true, selector: "ui-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuWidth: { classPropertyName: "menuWidth", publicName: "menuWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, scrollLimit: { classPropertyName: "scrollLimit", publicName: "scrollLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", value: "valueChange" }, viewQueries: [{ propertyName: "reference", first: true, predicate: ["reference"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: UISelect, isStandalone: true, selector: "ui-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, menuWidth: { classPropertyName: "menuWidth", publicName: "menuWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, scrollLimit: { classPropertyName: "scrollLimit", publicName: "scrollLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "reference", first: true, predicate: ["reference"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
         <input [attr.name]="name() || null" type="hidden" [value]="value() || ''" />
         <button
             type="button"
@@ -68676,7 +68680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             </ui-menu>
         }
     `, styles: ["[data-bspk=select]{--select-background: var(--surface-neutral-t1-base);--select-border-color: var(--stroke-neutral-base);--select-text-color: var(--foreground-neutral-on-surface);--select-height: var(--spacing-sizing-10);--select-font: var(--body-base);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-03);--select-icon-width: var(--spacing-sizing-05);overflow:hidden;position:relative;width:100%;outline:unset;min-height:var(--select-height);max-height:var(--select-height);display:flex;flex-direction:row;align-items:center;gap:var(--spacing-sizing-02);flex-grow:0;flex-shrink:0;text-align:left;font:var(--select-font);border:1px solid var(--select-border-color);border-radius:var(--radius-sm);background:var(--select-background);padding:0 var(--select-padding);cursor:pointer}[data-bspk=select] [data-input]{position:absolute;opacity:0;inset:0;cursor:pointer}[data-bspk=select] [data-bspk=list-item]{background:transparent}[data-bspk=select] [data-bspk=list-item] [data-item-label] [data-text]{font:var(--select-font);color:var(--select-text-color)}[data-bspk=select][data-size=small]{--select-height: var(--spacing-sizing-08);--select-font: var(--body-small);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-02);--select-icon-width: var(--spacing-sizing-05)}[data-bspk=select][data-size=large]{--select-height: var(--spacing-sizing-12);--select-font: var(--body-large);--select-clear-height: var(--spacing-sizing-06);--select-icon-width: var(--spacing-sizing-06)}[data-bspk=select][aria-disabled],[data-bspk=select][aria-readonly]:not([data-empty]){--select-text-color: var(--foreground-neutral-disabled-on-surface);--select-border-color: var(--stroke-neutral-disabled-light);--select-background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));cursor:not-allowed}[data-bspk=select][aria-disabled][aria-readonly]:not([data-empty]),[data-bspk=select][aria-readonly]:not([data-empty])[aria-readonly]:not([data-empty]){--select-text-color: var(--foreground-neutral-on-surface)}[data-bspk=select]:not([aria-disabled],[aria-readonly]):focus-within{--select-border-color: var(--stroke-neutral-focus);border-width:1px;outline:1px solid var(--stroke-neutral-focus)}[data-bspk=select]:not([aria-disabled],[aria-readonly]):hover{--select-background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select]:not([aria-disabled],[aria-readonly]):active{--select-background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select][data-invalid]{--select-border-color: var(--status-error)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], menuWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuWidth", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], reference: [{ type: i0.ViewChild, args: ['reference', { ...{ read: ElementRef }, isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], scrollLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLimit", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], menuWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuWidth", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], reference: [{ type: i0.ViewChild, args: ['reference', { ...{ read: ElementRef }, isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], scrollLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLimit", required: false }] }] } });
 
 /**
  * A field wrapper for the UISelect component.
@@ -68712,7 +68716,7 @@ class UISelectField extends UISelect {
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -68741,7 +68745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -68767,19 +68771,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase Dev
  */
 class UISwitch {
-    checkedChange = new EventEmitter();
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
-    checked = input(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
+    checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : []));
     disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
     onInputChange(event) {
         const inputElement = event.target;
-        this.checkedChange.emit(inputElement.checked);
+        this.checked.set(inputElement.checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UISwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: UISwitch, isStandalone: true, selector: "ui-switch", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkedChange: "checkedChange" }, host: { attributes: { "data-bspk": "switch" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: UISwitch, isStandalone: true, selector: "ui-switch", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { attributes: { "data-bspk": "switch" } }, ngImport: i0, template: `
         <input
             type="checkbox"
             [attr.aria-label]="ariaLabel()"
@@ -68808,9 +68811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     `, encapsulation: ViewEncapsulation.None, host: {
                         'data-bspk': 'switch',
                     }, styles: ["[data-bspk=switch]{--track-width: var(--spacing-sizing-09);--toggle-width: var(--spacing-sizing-04);--track-bg: var(--surface-neutral-t4-high);--toggle-bg: var(--foreground-neutral-on-color);display:block;margin:2px;width:var(--track-width);height:var(--spacing-sizing-05);border-radius:var(--spacing-sizing-05);background-color:var(--track-bg);position:relative;z-index:1}[data-bspk=switch] input[type=checkbox]{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;z-index:2;cursor:pointer}[data-bspk=switch] span{display:block;width:var(--toggle-width);height:var(--toggle-width);border-radius:var(--radius-full);background-color:var(--toggle-bg);transition:left .2s;box-shadow:var(--drop-shadow-raise);left:2px;top:2px;position:absolute}[data-bspk=switch]:has(input[type=checkbox]:checked){--track-bg: var(--foreground-brand-primary)}[data-bspk=switch]:has(input[type=checkbox]:checked) span{left:calc(var(--track-width) - var(--toggle-width) - 2px)}[data-bspk=switch]:has(input[type=checkbox]:disabled){--track-bg: var(--interactions-disabled-opacity);--toggle-bg: var(--foreground-neutral-disabled-on-surface)}[data-bspk=switch]:has(input[type=checkbox]:disabled) input[type=checkbox]{pointer-events:none}[data-bspk=switch]:has(input[type=checkbox]:disabled):has(input[type=checkbox]:checked) span{--toggle-bg: var(--foreground-neutral-disabled-on-color-surface)}\n"] }]
-        }], propDecorators: { checkedChange: [{
-                type: Output
-            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
@@ -68840,7 +68841,7 @@ class UISwitchOption extends UISwitch {
                 [checked]="checked()"
                 [disabled]="disabled()"
                 [ariaLabel]="ariaLabel() || computedAriaLabel()"
-                (checkedChange)="checkedChange.emit($event)">
+                (checkedChange)="checked.set($event)">
             </ui-switch
         ></span>
     </ui-list-item>`, isInline: true, dependencies: [{ kind: "component", type: UISwitch, selector: "ui-switch", inputs: ["value", "checked", "ariaLabel", "name", "id", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: UIListItem, selector: "ui-list-item", inputs: ["active", "owner", "ariaLabel", "ariaRole", "ariaSelected", "ariaDisabled", "ariaReadonly", "htmlFor", "disabled", "readOnly", "as", "href", "label", "subText", "width", "tabIndex", "id"], outputs: ["onClick"] }] });
@@ -68865,7 +68866,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [checked]="checked()"
                 [disabled]="disabled()"
                 [ariaLabel]="ariaLabel() || computedAriaLabel()"
-                (checkedChange)="checkedChange.emit($event)">
+                (checkedChange)="checked.set($event)">
             </ui-switch
         ></span>
     </ui-list-item>`,
@@ -68908,7 +68909,7 @@ class UITabGroup extends UITabListUtility {
         data-bspk="tab-group"
         [options]="options()"
         [value]="value()"
-        (valueChange)="valueChange.emit($event)"
+        (valueChange)="value.set($event)"
         [label]="label()"
         [size]="size()"
         [width]="width()"
@@ -68924,7 +68925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         data-bspk="tab-group"
         [options]="options()"
         [value]="value()"
-        (valueChange)="valueChange.emit($event)"
+        (valueChange)="value.set($event)"
         [label]="label()"
         [size]="size()"
         [width]="width()"
@@ -68987,7 +68988,7 @@ class UITable {
                 return 0;
             });
         }
-        const start = this.pageIndex * this.pageSizeSafe;
+        const start = this.pageIndex() * this.pageSizeSafe;
         const end = start + this.pageSizeSafe;
         return result.slice(start, end);
     }, ...(ngDevMode ? [{ debugName: "rows" }] : []));
@@ -68998,7 +68999,7 @@ class UITable {
     title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
     size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
     pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
-    pageIndex = 0;
+    pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
     get sizeSafe() {
         return this.size() || 'medium';
     }
@@ -69036,15 +69037,12 @@ class UITable {
     trackRow(index, row) {
         return row.id;
     }
-    setPageIndex(idx) {
-        this.pageIndex = idx;
-    }
     startRow() {
         const total = this.data().length;
-        return total === 0 ? 0 : this.pageIndex * this.pageSizeSafe + 1;
+        return total === 0 ? 0 : this.pageIndex() * this.pageSizeSafe + 1;
     }
     endRow() {
-        const end = this.pageIndex * this.pageSizeSafe + this.pageSizeSafe;
+        const end = this.pageIndex() * this.pageSizeSafe + this.pageSizeSafe;
         return Math.min(end, this.data().length);
     }
     formatCell(value) {
@@ -69147,13 +69145,13 @@ class UITable {
                         Showing {{ startRow() }}-{{ endRow() }} of {{ data().length }} results
                     </div>
                     <ui-pagination
-                        [value]="pageIndex + 1"
+                        [value]="pageIndex() + 1"
                         [numPages]="totalPages"
-                        (onChange)="setPageIndex($event - 1)"></ui-pagination>
+                        (valueChange)="pageIndex.set($event - 1)"></ui-pagination>
                 </div>
             }
         </div>
-    </div>`, isInline: true, styles: ["[data-bspk=table]{--white-background: var(--surface-neutral-t1-base);--grey-background: var(--surface-neutral-t2-lowest);--icon-size: var(--spacing-sizing-05);display:block;min-width:100%;overflow:auto hidden;border-collapse:separate;text-align:left;border-spacing:2rem .125rem;color:var(--foreground-neutral-on-surface);font:var(--labels-base);border-radius:var(--radius-md);border:1px solid var(--stroke-neutral-low);background:var(--white-background);--min-height: var(--spacing-sizing-10);--padding-y: var(--spacing-sizing-02)}[data-bspk=table][data-size=x-large]{--min-height: var(--spacing-sizing-14);--padding-y: var(--spacing-sizing-04)}[data-bspk=table][data-size=large]{--min-height: var(--spacing-sizing-12);--padding-y: var(--spacing-sizing-03)}[data-bspk=table][data-size=small]{--min-height: var(--spacing-sizing-08);--padding-y: var(--spacing-sizing-01)}[data-bspk=table] [data-scroll-container]{width:fit-content;min-width:100%;border-radius:var(--radius-md)}[data-bspk=table] table{display:grid;grid-template-columns:var(--template-columns);border-collapse:collapse;min-width:100%}[data-bspk=table] table tr,[data-bspk=table] table tbody,[data-bspk=table] table thead{display:contents}[data-bspk=table] table caption{grid-column:1/-1;background:var(--grey-background);border-bottom:1px solid var(--stroke-neutral-low);display:flex;flex-direction:row;justify-content:start;align-items:center;font:var(--labels-small);min-height:var(--min-height);padding:calc(var(--padding-y) + 2px) var(--spacing-sizing-04);overflow:hidden}[data-bspk=table] table th{display:flex;min-height:var(--min-height);overflow:hidden;flex-direction:row;background:var(--grey-background);font:var(--labels-small);border-bottom:1px solid var(--stroke-neutral-base);white-space:nowrap;z-index:1;position:relative}[data-bspk=table] table th:not([data-sortable]){padding:calc(var(--padding-y) + 2px) var(--spacing-sizing-04);pointer-events:none}[data-bspk=table] table th[data-sortable] button{display:flex;min-height:var(--min-height);border:none;overflow:hidden;flex-direction:row;padding:calc(var(--padding-y) + 2px) var(--spacing-sizing-04);background:var(--grey-background);align-items:center;justify-content:space-between;gap:var(--spacing-sizing-02);width:100%;cursor:pointer;font:inherit;outline:none;position:relative}[data-bspk=table] table th[data-sortable] button:hover{background:linear-gradient(var(--interactions-neutral-hover-opacity),var(--interactions-neutral-hover-opacity)),linear-gradient(var(--grey-background),var(--grey-background))}[data-bspk=table] table th[data-sortable] button:active{background:linear-gradient(var(--interactions-neutral-press-opacity),var(--interactions-neutral-press-opacity)),linear-gradient(var(--grey-background),var(--grey-background))}[data-bspk=table] table th[data-sortable] button [data-sort-icon]{display:flex;flex-direction:row;align-items:center}[data-bspk=table] table th[data-sortable] button [data-sort-icon] svg{width:var(--icon-size)}[data-bspk=table] table th[data-sortable] button:focus-visible{position:absolute;z-index:var(--z-index-focus);inset:0;outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=table] table th[data-align=right]{align-items:flex-end}[data-bspk=table] table th[data-align=right] button{justify-content:flex-end}[data-bspk=table] table th[data-align=center]{align-items:center}[data-bspk=table] table th[data-align=center] button{justify-content:center}[data-bspk=table] table th[data-align=left]{align-items:flex-start}[data-bspk=table] table th[data-align=left] button{justify-content:space-between}[data-bspk=table] table td{display:flex;min-height:var(--min-height);overflow:hidden;padding:calc(var(--padding-y) + 2px) var(--spacing-sizing-04);flex-direction:column;font:var(--body-small)}[data-bspk=table] table td[data-align=right]{align-items:flex-end}[data-bspk=table] table td[data-align=center]{align-items:center}[data-bspk=table] table td[data-align=left]{align-items:flex-start}[data-bspk=table] table td[data-valign=top]{justify-content:flex-start}[data-bspk=table] table td[data-valign=bottom]{justify-content:flex-end}[data-bspk=table] table td[data-valign=center]{justify-content:center}[data-bspk=table] table td p{margin:0;padding:0;font:var(--body-small)}[data-bspk=table] table td[data-action]:hover{background:linear-gradient(var(--interactions-neutral-hover-opacity),var(--interactions-neutral-hover-opacity)),linear-gradient(var(--white-background),var(--white-background))}[data-bspk=table] table tr:nth-child(2n) td{background:var(--grey-background)}[data-bspk=table] table tr:nth-child(2n) td[data-action]:hover{background:linear-gradient(var(--interactions-neutral-hover-opacity),var(--interactions-neutral-hover-opacity)),linear-gradient(var(--grey-background),var(--grey-background))}[data-bspk=table] [data-pagination]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--spacing-sizing-03) var(--spacing-sizing-04);width:100%}[data-bspk=table] [data-pagination] [data-pagination-label]{font:var(--body-small);min-width:fit-content}[data-bspk=table] [data-pagination] [data-bspk=pagination]{flex-grow:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: UIPagination, selector: "ui-pagination", inputs: ["numPages", "value"], outputs: ["onChange"] }, { kind: "component", type: IconArrowUpward, selector: "icon-arrow-upward", inputs: ["width"] }, { kind: "component", type: IconArrowDownward, selector: "icon-arrow-downward", inputs: ["width"] }], encapsulation: i0.ViewEncapsulation.None });
+    </div>`, isInline: true, styles: ["[data-bspk=table]{--white-background: var(--surface-neutral-t1-base);--grey-background: var(--surface-neutral-t2-lowest);--icon-size: var(--spacing-sizing-05);display:block;min-width:100%;overflow:auto hidden;border-collapse:separate;text-align:left;border-spacing:2rem .125rem;color:var(--foreground-neutral-on-surface);font:var(--labels-base);border-radius:var(--radius-md);border:1px solid var(--stroke-neutral-low);background:var(--white-background);--min-height: var(--spacing-sizing-10);--padding-y: var(--spacing-sizing-02)}[data-bspk=table][data-size=x-large]{--min-height: var(--spacing-sizing-14);--padding-y: var(--spacing-sizing-04)}[data-bspk=table][data-size=large]{--min-height: var(--spacing-sizing-12);--padding-y: var(--spacing-sizing-03)}[data-bspk=table][data-size=small]{--min-height: var(--spacing-sizing-08);--padding-y: var(--spacing-sizing-01)}[data-bspk=table] [data-scroll-container]{width:fit-content;min-width:100%;border-radius:var(--radius-md)}[data-bspk=table] table{display:grid;grid-template-columns:var(--template-columns);border-collapse:collapse;min-width:100%}[data-bspk=table] table tr,[data-bspk=table] table tbody,[data-bspk=table] table thead{display:contents}[data-bspk=table] table caption{grid-column:1/-1;background:var(--grey-background);border-bottom:1px solid var(--stroke-neutral-low);display:flex;flex-direction:row;justify-content:start;align-items:center;font:var(--labels-small);min-height:var(--min-height);padding:calc(var(--padding-y) + 2px) var(--spacing-sizing-04);overflow:hidden}[data-bspk=table] table th{display:flex;min-height:var(--min-height);overflow:hidden;flex-direction:row;background:var(--grey-background);font:var(--labels-small);border-bottom:1px solid var(--stroke-neutral-base);white-space:nowrap;z-index:1;position:relative}[data-bspk=table] table th:not([data-sortable]){padding:calc(var(--padding-y) + 2px) var(--spacing-sizing-04);pointer-events:none}[data-bspk=table] table th[data-sortable] button{display:flex;min-height:var(--min-height);border:none;overflow:hidden;flex-direction:row;padding:calc(var(--padding-y) + 2px) var(--spacing-sizing-04);background:var(--grey-background);align-items:center;justify-content:space-between;gap:var(--spacing-sizing-02);width:100%;cursor:pointer;font:inherit;outline:none;position:relative}[data-bspk=table] table th[data-sortable] button:hover{background:linear-gradient(var(--interactions-neutral-hover-opacity),var(--interactions-neutral-hover-opacity)),linear-gradient(var(--grey-background),var(--grey-background))}[data-bspk=table] table th[data-sortable] button:active{background:linear-gradient(var(--interactions-neutral-press-opacity),var(--interactions-neutral-press-opacity)),linear-gradient(var(--grey-background),var(--grey-background))}[data-bspk=table] table th[data-sortable] button [data-sort-icon]{display:flex;flex-direction:row;align-items:center}[data-bspk=table] table th[data-sortable] button [data-sort-icon] svg{width:var(--icon-size)}[data-bspk=table] table th[data-sortable] button:focus-visible{position:absolute;z-index:var(--z-index-focus);inset:0;outline:solid 2px var(--stroke-neutral-focus);isolation:isolate}[data-bspk=table] table th[data-align=right]{align-items:flex-end}[data-bspk=table] table th[data-align=right] button{justify-content:flex-end}[data-bspk=table] table th[data-align=center]{align-items:center}[data-bspk=table] table th[data-align=center] button{justify-content:center}[data-bspk=table] table th[data-align=left]{align-items:flex-start}[data-bspk=table] table th[data-align=left] button{justify-content:space-between}[data-bspk=table] table td{display:flex;min-height:var(--min-height);overflow:hidden;padding:calc(var(--padding-y) + 2px) var(--spacing-sizing-04);flex-direction:column;font:var(--body-small)}[data-bspk=table] table td[data-align=right]{align-items:flex-end}[data-bspk=table] table td[data-align=center]{align-items:center}[data-bspk=table] table td[data-align=left]{align-items:flex-start}[data-bspk=table] table td[data-valign=top]{justify-content:flex-start}[data-bspk=table] table td[data-valign=bottom]{justify-content:flex-end}[data-bspk=table] table td[data-valign=center]{justify-content:center}[data-bspk=table] table td p{margin:0;padding:0;font:var(--body-small)}[data-bspk=table] table td[data-action]:hover{background:linear-gradient(var(--interactions-neutral-hover-opacity),var(--interactions-neutral-hover-opacity)),linear-gradient(var(--white-background),var(--white-background))}[data-bspk=table] table tr:nth-child(2n) td{background:var(--grey-background)}[data-bspk=table] table tr:nth-child(2n) td[data-action]:hover{background:linear-gradient(var(--interactions-neutral-hover-opacity),var(--interactions-neutral-hover-opacity)),linear-gradient(var(--grey-background),var(--grey-background))}[data-bspk=table] [data-pagination]{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--spacing-sizing-03) var(--spacing-sizing-04);width:100%}[data-bspk=table] [data-pagination] [data-pagination-label]{font:var(--body-small);min-width:fit-content}[data-bspk=table] [data-pagination] [data-bspk=pagination]{flex-grow:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: UIPagination, selector: "ui-pagination", inputs: ["numPages", "value"], outputs: ["valueChange"] }, { kind: "component", type: IconArrowUpward, selector: "icon-arrow-upward", inputs: ["width"] }, { kind: "component", type: IconArrowDownward, selector: "icon-arrow-downward", inputs: ["width"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UITable, decorators: [{
             type: Component,
@@ -69234,9 +69232,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         Showing {{ startRow() }}-{{ endRow() }} of {{ data().length }} results
                     </div>
                     <ui-pagination
-                        [value]="pageIndex + 1"
+                        [value]="pageIndex() + 1"
                         [numPages]="totalPages"
-                        (onChange)="setPageIndex($event - 1)"></ui-pagination>
+                        (valueChange)="pageIndex.set($event - 1)"></ui-pagination>
                 </div>
             }
         </div>
@@ -69354,7 +69352,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * @phase UXReview
  */
 class UITextarea {
-    valueChange = output();
     name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
@@ -69375,7 +69372,7 @@ class UITextarea {
     maxRowsValid = computed(() => Math.min(10, Math.max(3, this.maxRows() || 10)), ...(ngDevMode ? [{ debugName: "maxRowsValid" }] : []));
     constructor() {
         this.value.subscribe((val) => {
-            this.valueChange.emit(val || '');
+            this.value.set(val || '');
         });
     }
     handleBlur(event) {
@@ -69386,7 +69383,7 @@ class UITextarea {
         this.value.set(event.target.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: UITextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: UITextarea, isStandalone: true, selector: "ui-textarea", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", value: "valueChange" }, host: { attributes: { "data-bspk": "textarea" }, properties: { "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalid() || null", "attr.data-readonly": "readOnly() || null", "attr.data-size": "size() || \"medium\"", "style.--min-rows": "minRowsValid()", "style.--max-rows": "maxRowsValid()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: UITextarea, isStandalone: true, selector: "ui-textarea", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, ariaErrorMessage: { classPropertyName: "ariaErrorMessage", publicName: "ariaErrorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "data-bspk": "textarea" }, properties: { "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalid() || null", "attr.data-readonly": "readOnly() || null", "attr.data-size": "size() || \"medium\"", "style.--min-rows": "minRowsValid()", "style.--max-rows": "maxRowsValid()" } }, ngImport: i0, template: `
         <textarea
             #el
             data-main-input
@@ -69445,7 +69442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[style.--min-rows]': 'minRowsValid()',
                         '[style.--max-rows]': 'maxRowsValid()',
                     }, encapsulation: ViewEncapsulation.None, styles: ["[data-bspk=textarea]{display:grid;width:100%;border:1px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);--border-color: var(--stroke-neutral-base);--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea]:has(textarea:focus-within){--border-color: var(--stroke-neutral-focus)}[data-bspk=textarea]:has(textarea[aria-invalid]){--border-color: var(--status-error)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden;overflow-y:hidden}[data-bspk=textarea] textarea,[data-bspk=textarea] [data-replicated-value]{width:100%;font:var(--font);padding:var(--padding);border:none;background:transparent;grid-area:1/1/2/2;min-height:calc(var(--line-height) * var(--min-rows) + var(--padding) * 2);max-height:calc(var(--line-height) * var(--max-rows) + var(--padding) * 2);max-width:100%}[data-bspk=textarea] textarea{text-wrap:break-word;resize:none;color:inherit;background-color:inherit;outline:none}[data-bspk=textarea] textarea::placeholder{color:var(--foreground-neutral-on-surface-variant-03)}[data-bspk=textarea]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity),var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=textarea]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity),var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=textarea][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=textarea][data-disabled],[data-bspk=textarea]:has([data-main-input][disabled]){--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity),var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base),var(--surface-neutral-t1-base))}[data-bspk=textarea][data-disabled]>*,[data-bspk=textarea]:has([data-main-input][disabled])>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=textarea][data-invalid]{--border-color: var(--status-error)}[data-bspk=textarea]:focus-within{--border-color: var(--stroke-neutral-focus);outline:1px solid var(--stroke-neutral-focus)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], ariaErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaErrorMessage", required: false }] }] } });
 
 /**
  * A field wrapper for the UITextarea component.
@@ -69481,7 +69478,7 @@ class UITextareaField extends UITextarea {
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -69509,7 +69506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 [ariaLabelledBy]="labelledById()"
                 [ariaDescribedBy]="describedById()"
                 [ariaErrorMessage]="errorMessageId()"
-                (valueChange)="valueChange.emit($event)"
+                (valueChange)="value.set($event)"
                 [ariaLabel]="ariaLabel()"
                 [disabled]="disabled()"
                 [id]="controlId()"
@@ -69526,11 +69523,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     }, encapsulation: ViewEncapsulation.None, styles: ["[data-bspk-utility=field]{width:100%;display:flex;flex-direction:column;gap:var(--spacing-sizing-01);border:none;max-width:100%;min-inline-size:unset}[data-bspk-utility=field] [data-field-label]{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-sizing-01)}[data-bspk-utility=field] [data-field-label] span{font:var(--labels-small);color:var(--foreground-neutral-on-surface)}[data-bspk-utility=field] [data-field-label] span[data-required]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk-utility=field] [data-field-label] span[data-trailing]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-02);margin-left:auto}[data-bspk-utility=field] [data-field-description]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-01);margin:0;padding:0}[data-bspk-utility=field] fieldset,[data-bspk-utility=field] legend{display:contents}\n"] }]
         }], propDecorators: { errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], labelTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelTrailing", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
+// create an angular service to manage brand setting and getting
+const BRAND_KEY = 'brand-preference';
+const EXTRA_BRANDS = [
+    {
+        title: 'Example',
+        slug: 'example',
+    },
+];
+class BrandService {
+    document = inject(DOCUMENT$1);
+    value = signal(localStorage.getItem(BRAND_KEY) || 'anywhere', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    constructor() {
+        effect(() => {
+            const brand = this.value();
+            this.document.documentElement.setAttribute('data-brand', brand);
+            localStorage.setItem(BRAND_KEY, brand);
+            updateBrandStylesheet(brand);
+        });
+    }
+    toggle() {
+        const newBrand = this.value();
+        this.value.set(newBrand);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BrandService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Loads the brand stylesheet corresponding to the given brand value.
+ *
+ * 1. Appends the new brand stylesheet link element to the document head
+ * 2. Once the stylesheet is loaded, it adds a 'loaded' class to the body to help mitigate F.O.U.C. (Flash of Unstyled
+ *    Content)
+ * 3. If a previous brand stylesheet exists (id of 'brand-stylesheet'), it removes it to ensure only the current brand's
+ *    styles are applied.
+ * 4. Adds an id of 'brand-stylesheet' to the link element for easy identification and management of the brand stylesheet.
+ *
+ * Once the stylesheet is loaded, it adds a 'loaded' class to the body to help mitigate F.O.U.C. (Flash of Unstyled
+ * Content) when switching brands.
+ *
+ * Then it removes any previously loaded brand stylesheet to ensure that only the current brand's styles are applied.
+ *
+ * Then it
+ *
+ * @param value The brand value for which to load the stylesheet.
+ */
+function updateBrandStylesheet(value) {
+    const linkElement = document.createElement('link');
+    linkElement.onload = () => {
+        // eslint-disable-next-line no-console
+        console.info(`Brand ${value} stylesheet loaded`);
+        document.body.classList.add('loaded');
+        // remove any previous brand stylesheets
+        const existingLinks = document.querySelector('link#brand-stylesheet');
+        existingLinks?.remove();
+        linkElement.id = 'brand-stylesheet';
+    };
+    linkElement.rel = 'stylesheet';
+    linkElement.href = value === 'example' ? `/example.css` : `/brands/${value}.css`;
+    document.head.appendChild(linkElement);
+}
+
 // create an angular service to manage theme setting and getting
 const THEME_KEY = 'theme-preference';
 class ThemeService {
-    document = inject(DOCUMENT$1);
     value = signal(localStorage.getItem(THEME_KEY) || 'light', ...(ngDevMode ? [{ debugName: "value" }] : []));
+    document = inject(DOCUMENT$1);
     constructor() {
         effect(() => {
             const theme = this.value();
@@ -69562,5 +69626,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BUILT_IN_COLUMN_SORTERS, Icon360, IconAZAscend, IconAZDescend, IconAccessibilityNew, IconAccessible, IconAccountCircle, IconAccountCircleFill, IconAccountTree, IconAccountTreeFill, IconAdd, IconAddAPhoto, IconAddAPhotoFill, IconAddAlert, IconAddAlertFill, IconAddBusiness, IconAddBusinessFill, IconAddChart, IconAddChartFill, IconAddCircle, IconAddCircleFill, IconAddComment, IconAddCommentFill, IconAddReaction, IconAddReactionFill, IconAddShoppingCart, IconAirplanemodeInactive, IconAirportShuttle, IconAirportShuttleFill, IconAlignCenter, IconAlignEnd, IconAlignFlexCenter, IconAlignFlexEnd, IconAlignFlexStart, IconAlignHorizontalCenter, IconAlignHorizontalLeft, IconAlignHorizontalRight, IconAlignItemsStretch, IconAlignJustifyCenter, IconAlignJustifyFlexEnd, IconAlignJustifyFlexStart, IconAlignJustifySpaceAround, IconAlignJustifySpaceBetween, IconAlignJustifySpaceEven, IconAlignJustifyStretch, IconAlignSpaceAround, IconAlignSpaceBetween, IconAlignSpaceEven, IconAlignStart, IconAlignStretch, IconAlignVerticalBottom, IconAlignVerticalCenter, IconAlignVerticalTop, IconAlternateEmail, IconAmex, IconAnalytics, IconAnalyticsFill, IconApartment, IconAppStore, IconAppleBlack, IconAppleWhite, IconApplepay, IconApps, IconArOnYou, IconArOnYouFill, IconArStickers, IconArStickersFill, IconArchive, IconArchiveFill, IconAreaChart, IconAreaChartFill, IconArrowBack, IconArrowDownward, IconArrowDropDown, IconArrowDropUp, IconArrowForward, IconArrowInsert, IconArrowLeft, IconArrowOutward, IconArrowRight, IconArrowUpward, IconAssignment, IconAssignmentAdd, IconAssignmentAddFill, IconAssignmentFill, IconAttachFile, IconAttachFileAdd, IconAttachFileFill, IconAttachMoney, IconAutomation, IconAutomationFill, IconBadge, IconBadgeFill, IconBakeryDining, IconBakeryDiningFill, IconBarChart, IconBarcode, IconBarcodeScanner, IconBarn, IconBarnFill, IconBasement, IconBasementFill, IconBathroom, IconBathroomFill, IconBed, IconBedFill, IconBlock, IconBluetooth, IconBolt, IconBoltFill, IconBookmark, IconBookmarkAdd, IconBookmarkAddFill, IconBookmarkAdded, IconBookmarkAddedFill, IconBookmarkFill, IconBookmarkRemove, IconBookmarkRemoveFill, IconBookmarks, IconBookmarksFill, IconBorderColor, IconBorderColorFill, IconBorderStyle, IconBox, IconBoxAdd, IconBoxAddFill, IconBoxFill, IconBrail, IconBubbleChart, IconBubbleChartFill, IconBuilding, IconBuildingFill, IconBusinessCenter, IconBusinessCenterFill, IconCalendarViewDay, IconCalendarViewDayFill, IconCalendarViewWeek, IconCalendarViewWeekFill, IconCall, IconCallEnd, IconCallEndFill, IconCallFill, IconCampaign, IconCampaignFill, IconCancel, IconCancelFill, IconCasino, IconCasinoFill, IconCat, IconCatFill, IconCategory, IconCategoryFill, IconChartData, IconChartDataFill, IconChat, IconChatBubble, IconChatBubbleFill, IconChatFill, IconCheck, IconCheckCircle, IconCheckCircleFill, IconCheckFill, IconChecklist, IconChevronLeft, IconChevronRight, IconCircle, IconCircleFill, IconCleaningServices, IconCleaningServicesFill, IconClose, IconCloseFill, IconClosedCaption, IconClosedCaptionDisabled, IconClosedCaptionDisabledFill, IconClosedCaptionFill, IconCloud, IconCloudDone, IconCloudDoneFill, IconCloudDownload, IconCloudDownloadFill, IconCloudFill, IconCloudOff, IconCloudOffFill, IconCloudUpload, IconCloudUploadFill, IconCode, IconCognition, IconCognitionFill, IconColorBlind, IconColors, IconCommute, IconCommuteFill, IconComputer, IconComputerFill, IconConstruction, IconContactMail, IconContactMailFill, IconContactPage, IconContactPageFill, IconContactPhone, IconContactPhoneFill, IconContactSupport, IconContactSupportFill, IconContacts, IconContactsFill, IconContentCopy, IconContentCopyFill, IconContentPasteOff, IconContentPasteSearch, IconContrast, IconContrastCircle, IconContrastFill, IconContrastSquare, IconCopyright, IconCopyrightFill, IconCrawlspace, IconCrawlspaceFill, IconCreditCard, IconCreditCardFill, IconDangerous, IconDangerousFill, IconDarkMode, IconDarkModeFill, IconDashboard, IconDashboard2, IconDashboard2Fill, IconDashboardCustomize, IconDashboardCustomizeFill, IconDashboardFill, IconDatabase, IconDatabaseFill, IconDelete, IconDeleteFill, IconDeleteForever, IconDeleteForeverFill, IconDeployedCode, IconDeployedCodeAccount, IconDeployedCodeAccountFill, IconDeployedCodeAlert, IconDeployedCodeAlertFill, IconDeployedCodeFill, IconDeployedCodeHistory, IconDeployedCodeHistoryFill, IconDeployedCodeUpdate, IconDeployedCodeUpdateFill, IconDescription, IconDescriptionFill, IconDesktopWindows, IconDesktopWindowsFill, IconDeviceThermostat, IconDevices, IconDevicesFill, IconDialpad, IconDiamond, IconDiamondFill, IconDirections, IconDirectionsBike, IconDirectionsBoat, IconDirectionsBoatFill, IconDirectionsBus, IconDirectionsBusFill, IconDirectionsCar, IconDirectionsCarFill, IconDirectionsFill, IconDirectionsSubway, IconDirectionsSubwayFill, IconDirectionsWalk, IconDiscover, IconDiversity1, IconDiversity1Fill, IconDoNotDisturbOn, IconDoNotDisturbOnFill, IconDocumentScanner, IconDocumentScannerFill, IconDog, IconDogFill, IconDonutLarge, IconDonutSmall, IconDonutSmallFill, IconDoorOpen, IconDoorOpenFill, IconDraft, IconDraftFill, IconDrafts, IconDraftsFill, IconDragHandle, IconDragIndicator, IconDraw, IconDrawFill, IconEdit, IconEditFill, IconEditNote, IconEditNoteFill, IconEditRoad, IconEditRoadFill, IconEditSquare, IconEditSquareFill, IconEgg, IconEggFill, IconEmojiLanguage, IconEmojiLanguageFill, IconEmoticon, IconEncrypted, IconEncryptedFill, IconError, IconErrorFill, IconEvent, IconEventFill, IconEventNote, IconEventNoteFill, IconExercise, IconExerciseFill, IconExperiment, IconExperimentFill, IconExplore, IconExploreFill, IconExtension, IconExtensionFill, IconExtensionOff, IconExtensionOffFill, IconFaceId, IconFaceRetouchingOff, IconFaceRetouchingOffFill, IconFacebook, IconFacebookWhite, IconFamilyHome, IconFamilyHomeFill, IconFastfood, IconFastfoodFill, IconFavorite, IconFavoriteFill, IconFileDownload, IconFileUpload, IconFilterList, IconFinance, IconFingerprint, IconFingerprintOff, IconFireplace, IconFireplaceFill, IconFitScreen, IconFitScreenFill, IconFitnessCenter, IconFlag, IconFlagAfghanistan, IconFlagAlandIsland, IconFlagAlbania, IconFlagAlgeria, IconFlagAmericanSamoa, IconFlagAndorra, IconFlagAngola, IconFlagAnguilla, IconFlagAntiguaAndBarbuda, IconFlagArgentina, IconFlagArmenia, IconFlagAruba, IconFlagAustralia, IconFlagAustria, IconFlagAzerbaijan, IconFlagBahamas, IconFlagBahrain, IconFlagBangladesh, IconFlagBarbados, IconFlagBelarus, IconFlagBelgium, IconFlagBelize, IconFlagBenin, IconFlagBermuda, IconFlagBhutan, IconFlagBolivia, IconFlagBonaire, IconFlagBosniaAndHerzegovina, IconFlagBotswana, IconFlagBrazil, IconFlagBrunei, IconFlagBulgaria, IconFlagBurkinaFaso, IconFlagBurundi, IconFlagCambodia, IconFlagCameroon, IconFlagCanada, IconFlagCaymanIslands, IconFlagCentralAfricanRepublic, IconFlagChad, IconFlagChile, IconFlagChina, IconFlagChristmasIsland, IconFlagCocosIslands, IconFlagColombia, IconFlagComoros, IconFlagCookIsland, IconFlagCostaRica, IconFlagCroatia, IconFlagCuba, IconFlagCuracao, IconFlagCyprus, IconFlagCzechRepublic, IconFlagDemocraticRepublicOfTheCongo, IconFlagDenmark, IconFlagDjibouti, IconFlagDominica, IconFlagDominicanRepublic, IconFlagEcuador, IconFlagEgypt, IconFlagElSalvador, IconFlagEquatorialGuinea, IconFlagEritrea, IconFlagEstonia, IconFlagEswatini, IconFlagEthiopia, IconFlagFalklandIslands, IconFlagFaroeIslands, IconFlagFederatedStatesOfMicronesia, IconFlagFiji, IconFlagFill, IconFlagFinland, IconFlagFrance, IconFlagFrenchGuiana, IconFlagFrenchPolynesia, IconFlagGabon, IconFlagGambia, IconFlagGeorgia, IconFlagGermany, IconFlagGhana, IconFlagGibraltar, IconFlagGreece, IconFlagGreeland, IconFlagGrenada, IconFlagGrenadines, IconFlagGuam, IconFlagGuatemala, IconFlagGuernsey, IconFlagGuinea, IconFlagGuineaBissau, IconFlagGuyana, IconFlagHaiti, IconFlagHonduras, IconFlagHongKong, IconFlagHungary, IconFlagIceland, IconFlagIndia, IconFlagIndianOceanTerritory, IconFlagIndonesia, IconFlagIran, IconFlagIraq, IconFlagIreland, IconFlagIsleOfMan, IconFlagIsrael, IconFlagItaly, IconFlagJamaica, IconFlagJapan, IconFlagJersey, IconFlagJordan, IconFlagKazakhstan, IconFlagKenya, IconFlagKiribati, IconFlagKuwait, IconFlagKyrgyzstan, IconFlagLaos, IconFlagLatvia, IconFlagLebanon, IconFlagLesotho, IconFlagLiberia, IconFlagLibya, IconFlagLiechtenstein, IconFlagLithuania, IconFlagLuxembourg, IconFlagMacau, IconFlagMadagascar, IconFlagMalasia, IconFlagMalawi, IconFlagMaldives, IconFlagMali, IconFlagMalta, IconFlagMarshallIslands, IconFlagMartinique, IconFlagMauritania, IconFlagMauritius, IconFlagMexico, IconFlagMoldova, IconFlagMonaco, IconFlagMongolia, IconFlagMontenegro, IconFlagMontserrat, IconFlagMorroco, IconFlagMozambique, IconFlagMyanmar, IconFlagNamibia, IconFlagNauru, IconFlagNepal, IconFlagNetherlands, IconFlagNewZealand, IconFlagNicaragua, IconFlagNiger, IconFlagNigeria, IconFlagNiue, IconFlagNorfolkIsland, IconFlagNorthKorea, IconFlagNorthMacedonia, IconFlagNorthernMarianaIslands, IconFlagNorway, IconFlagOman, IconFlagPakistan, IconFlagPalau, IconFlagPalestine, IconFlagPanama, IconFlagPapuaNewGuinea, IconFlagParaguay, IconFlagPeru, IconFlagPhilippines, IconFlagPitcairnIslands, IconFlagPoland, IconFlagPortugal, IconFlagPuertoRico, IconFlagQatar, IconFlagRepublicOfTheCongo, IconFlagRomania, IconFlagRussia, IconFlagRwanda, IconFlagSaintBarthelemy, IconFlagSamoa, IconFlagSanMarino, IconFlagSaoTomeAndPrincipe, IconFlagSaudiArabia, IconFlagSenegal, IconFlagSerbia, IconFlagSeychelles, IconFlagSierraLeone, IconFlagSingapore, IconFlagSintMaarten, IconFlagSlovakia, IconFlagSlovenia, IconFlagSolomonIslands, IconFlagSomalia, IconFlagSouthAfrica, IconFlagSouthKorea, IconFlagSouthSudan, IconFlagSpain, IconFlagSriLanka, IconFlagStKittsNevis, IconFlagStLucia, IconFlagSudan, IconFlagSuriname, IconFlagSweden, IconFlagSwitzerland, IconFlagSyria, IconFlagTaiwan, IconFlagTajikistan, IconFlagTanzania, IconFlagThailand, IconFlagTimorLeste, IconFlagTogo, IconFlagTokelau, IconFlagTonga, IconFlagTrinidadAndTobago, IconFlagTunisia, IconFlagTurkey, IconFlagTurkmenistan, IconFlagTurksAndCaicos, IconFlagTuvalu, IconFlagUganda, IconFlagUkraine, IconFlagUnitedArabEmirates, IconFlagUnitedKingdom, IconFlagUnitedKingdomOfGreatBritainAndNorthernIreland, IconFlagUnitedStates, IconFlagUruguay, IconFlagUzbekistan, IconFlagVanuatu, IconFlagVenezuela, IconFlagVietnam, IconFlagVirginIslands, IconFlagVirginIslandsBritish, IconFlagWestSahara, IconFlagYemen, IconFlagZambia, IconFlagZimbabwe, IconFlashAuto, IconFlashAutoFill, IconFlight, IconFlowchart, IconFlowchartFill, IconFolder, IconFolderFill, IconFolderOpen, IconFolderOpenFill, IconFolderShared, IconFolderSharedFill, IconFontDownload, IconFontDownloadFill, IconForSaleSign, IconForYou, IconForYouFill, IconForest, IconForestFill, IconForkRight, IconFormatAlignCenter, IconFormatAlignJustify, IconFormatAlignLeft, IconFormatAlignRight, IconFormatColorFill, IconFormatLetterSpacingWide, IconFormatLetterSpacingWider, IconFormatLineSpacing, IconFormatListBulleted, IconFormatListNumbered, IconFormatShapes, IconFormatShapesFill, IconFormatSize, IconForum, IconForumFill, IconForward, IconForwardToInbox, IconForwardToInboxFill, IconFullStackedBarChart, IconFullscreen, IconFullscreenExit, IconFullscreenFill, IconGTranslate, IconGalleryThumbnail, IconGalleryThumbnailFill, IconGarage, IconGarageFill, IconGlobe, IconGoogle, IconGooglePlay, IconGooglepay, IconGridView, IconGridViewFill, IconGroup, IconGroupFill, IconGroupedBarChart, IconHail, IconHandDraw, IconHandDrawFill, IconHandshake, IconHandshakeFill, IconHandyman, IconHandymanFill, IconHeadMountedDevice, IconHeadMountedDeviceFill, IconHeadsetMic, IconHeadsetMicFill, IconHearing, IconHeat, IconHeatPump, IconHeatPumpFill, IconHelp, IconHelpFill, IconHexagon, IconHexagonFill, IconHistory, IconHome, IconHomeAdd, IconHomeAddFill, IconHomeCheck, IconHomeCheckFill, IconHomeFill, IconHomeLock, IconHomeLockFill, IconHomeMonitize, IconHomeMonitizeFill, IconHomeMove, IconHomeMoveFill, IconHomeRemove, IconHomeRemoveFill, IconHomeStorage, IconHomeStorageFill, IconHomeTimer, IconHomeTimerFill, IconHomeWork, IconHomeWorkFill, IconHorizontalDistribute, IconHub, IconHubFill, IconHvac, IconHvacFill, IconIcecream, IconIcecreamFill, IconIdCard, IconIdCardFill, IconImage, IconImageFill, IconInProgress, IconInbox, IconInboxFill, IconIncompleteCircle, IconInfo, IconInfoFill, IconInkEraser, IconInkEraserFill, IconInput, IconInstagramBlack, IconInstagramWhite, IconInventory, IconInventory2, IconInventory2Fill, IconInventoryFill, IconIosShare, IconKebabDining, IconKebabDiningFill, IconKey, IconKeyFill, IconKeyOff, IconKeyOffFill, IconKeyVertical, IconKeyVerticalFill, IconKeyboard, IconKeyboardArrowDown, IconKeyboardArrowUp, IconKeyboardDoubleArrowLeft, IconKeyboardDoubleArrowRight, IconKeyboardFill, IconLabel, IconLabelFill, IconLabelImportant, IconLabelImportantFill, IconLan, IconLanFill, IconLandscape, IconLandscapeFill, IconLanguage, IconLaundry, IconLaundryFill, IconLayers, IconLayersFill, IconLeaderboard, IconLeaderboardFill, IconLeftPanelClose, IconLeftPanelCloseFill, IconLeftPanelOpen, IconLeftPanelOpenFill, IconLicense, IconLicenseFill, IconLight, IconLightFill, IconLightMode, IconLightModeFill, IconLightbulb, IconLightbulbFill, IconLink, IconLinkFill, IconLinkOff, IconLinkedin, IconLinkedinWhite, IconList, IconListChange, IconListFill, IconLocalCafe, IconLocalCafeFill, IconLocalParking, IconLocalShipping, IconLocalShippingFill, IconLocalTaxi, IconLocalTaxiFill, IconLocationDisabled, IconLocationOff, IconLocationOffFill, IconLocationOn, IconLocationOnFill, IconLocationSearching, IconLock, IconLockFill, IconLockOpen, IconLockOpenFill, IconLogin, IconLogout, IconLowVisibility, IconMail, IconMailFill, IconMailLock, IconMailLockFill, IconMan, IconManFill, IconManageAccounts, IconManageAccountsFill, IconMap, IconMapFill, IconMarkAsUnread, IconMarkAsUnreadFill, IconMarkEmailRead, IconMarkEmailReadFill, IconMarkEmailUnread, IconMarkEmailUnreadFill, IconMastercard, IconMenu, IconMenuBook, IconMenuBookFill, IconMenuFill, IconMerge, IconMic, IconMicFill, IconMicOff, IconMicOffFill, IconModeCool, IconModeCoolOff, IconModeFan, IconModeFanFill, IconModeFanOff, IconModeFanOffFill, IconModeHeat, IconModeHeatFill, IconMoneyOff, IconMonitor, IconMonitorFill, IconMood, IconMoodBad, IconMoodBadFill, IconMoodFill, IconMoreHoriz, IconMoreVert, IconMoveLocation, IconMoveLocationFill, IconMoveToInbox, IconMoveToInboxFill, IconMultilineChart, IconMusicNote, IconMyLocation, IconMyLocationFill, IconNavigation, IconNavigationFill, IconNearMe, IconNearMeFill, IconNoSound, IconNoSoundFill, IconNorth, IconNorthWest, IconNoteAdd, IconNoteAddFill, IconNotifications, IconNotificationsFill, IconNotificationsOff, IconNotificationsOffFill, IconNutrition, IconNutritionFill, IconOktaBlack, IconOktaWhite, IconOmniChatbox, IconOmniChatboxFill, IconOpenInFull, IconOpenInNew, IconOpportunities, IconOrders, IconOrdersFill, IconOtherHouses, IconOtherHousesFill, IconOutbox, IconOutboxFill, IconOutgoingMail, IconOutgoingMailFill, IconOutlook, IconOvenGen, IconOvenGenFill, IconPackage, IconPackage2, IconPackage2Fill, IconPackageFill, IconPaid, IconPaidFill, IconPalette, IconPaletteFill, IconPanZoom, IconPartnerExchange, IconPartnerExchangeFill, IconPause, IconPauseCircle, IconPauseCircleFill, IconPauseFill, IconPayments, IconPaymentsFill, IconPaypal, IconPendingActions, IconPentagon, IconPentagonFill, IconPercent, IconPerson, IconPersonAdd, IconPersonAddDisabled, IconPersonAddDisabledFill, IconPersonAddFill, IconPersonBook, IconPersonBookFill, IconPersonCancel, IconPersonCancelFill, IconPersonCheck, IconPersonCheckFill, IconPersonFill, IconPersonRemove, IconPersonRemoveFill, IconPersonSearch, IconPersonSearchFill, IconPets, IconPhotoCamera, IconPhotoCameraFill, IconPieChart, IconPieChartFill, IconPin, IconPinFill, IconPinterest, IconPinterestBlack, IconPlayArrow, IconPlayArrowFill, IconPlayCircle, IconPlayCircleFill, IconPlayPause, IconPlaylistAdd, IconPlaylistAddCheck, IconPlaylistAddFill, IconPlaylistRemove, IconPolicy, IconPolicyFill, IconPreview, IconPreviewFill, IconPrint, IconPrintFill, IconPublic, IconQrCode, IconQrCodeScanner, IconQuestionMark, IconRampLeft, IconRampRight, IconRealEstateAgent, IconRealEstateAgentFill, IconReceipt, IconReceiptFill, IconReceiptLong, IconReceiptLongFill, IconRecordVoiceOver, IconRecordVoiceOverFill, IconRecycling, IconRefresh, IconRemove, IconRemoveShoppingCart, IconRentSign, IconReplay, IconReply, IconReplyAll, IconReplyFill, IconReport, IconReportFill, IconResize, IconResizeHandle, IconRestaurant, IconRightPanelClose, IconRightPanelCloseFill, IconRightPanelOpen, IconRightPanelOpenFill, IconRoofing, IconRoofingFill, IconRoomPreferences, IconRoomPreferencesFill, IconRoundaboutLeft, IconRoundaboutRight, IconRoute, IconRouteFill, IconSave, IconSaveFill, IconSaveSearch, IconSaveSearchFill, IconScatterPlot, IconScatterPlotFill, IconSchedule, IconScheduleFill, IconScheduleSend, IconScheduleSendFill, IconSchema, IconSchemaFill, IconSchool, IconSchoolFill, IconScience, IconScienceFill, IconScore, IconScoreFill, IconSearch, IconSegment, IconSell, IconSellFill, IconSeller, IconSellerFill, IconSend, IconSendFill, IconSentimentDissatisfied, IconSentimentDissatisfiedFill, IconSentimentExtremelyDissatisfied, IconSentimentExtremelyDissatisfiedFill, IconSentimentNeutral, IconSentimentNeutralFill, IconSentimentSatisfied, IconSentimentSatisfiedFill, IconSentimentVeryDissatisfied, IconSentimentVeryDissatisfiedFill, IconSentimentVerySatisfied, IconSentimentVerySatisfiedFill, IconSettings, IconSettingsAccessibility, IconSettingsFill, IconShare, IconShareFill, IconShippingContainer, IconShippingContainerFill, IconShoppingBag, IconShoppingBagFill, IconShoppingCart, IconShoppingCartCheckout, IconShoppingCartFill, IconShoppingCartOff, IconShoppingCartOffFill, IconSick, IconSickFill, IconSignLanguage, IconSignLanguageFill, IconSignalCellularAlt, IconSkipNext, IconSkipNextFill, IconSkipPrevious, IconSkipPreviousFill, IconSlabSerif, IconSlabSerifFill, IconSmartphone, IconSmartphoneFill, IconSms, IconSmsFill, IconSort, IconSortByAlpha, IconSortByReverseAlpha, IconSortFill, IconSouth, IconSouthEast, IconSouthFill, IconSouthWest, IconSquare, IconSquareFill, IconSquareFoot, IconStackedBarChart, IconStackedEmail, IconStackedEmailFill, IconStacks, IconStacksFill, IconStar, IconStarFill, IconStop, IconStopCircle, IconStopCircleFill, IconStopFill, IconStorefront, IconStorefrontFill, IconStraight, IconStraightFill, IconStraighten, IconStraightenFill, IconStressManagement, IconStressManagementFill, IconSubject, IconSubway, IconSubwayFill, IconSwapVert, IconSwapVerticalCircle, IconSwapVerticalCircleFill, IconSymbolAfghanistan, IconSymbolAlandIsland, IconSymbolAlbania, IconSymbolAlgeria, IconSymbolAmericanSamoa, IconSymbolAndorra, IconSymbolAngola, IconSymbolAnguilla, IconSymbolAntiguaAndBarbuda, IconSymbolArgentina, IconSymbolArmenia, IconSymbolAruba, IconSymbolAustralia, IconSymbolAustria, IconSymbolAzerbaijan, IconSymbolBahamas, IconSymbolBahrain, IconSymbolBangladesh, IconSymbolBarbados, IconSymbolBelarus, IconSymbolBelgium, IconSymbolBelize, IconSymbolBenin, IconSymbolBermuda, IconSymbolBhutan, IconSymbolBolivia, IconSymbolBonaire, IconSymbolBosniaAndHerzegovina, IconSymbolBotswana, IconSymbolBrazil, IconSymbolBrunei, IconSymbolBulgaria, IconSymbolBurkinaFaso, IconSymbolBurundi, IconSymbolCambodia, IconSymbolCameroon, IconSymbolCanada, IconSymbolCaymanIslands, IconSymbolCentralAfricanRepublic, IconSymbolChad, IconSymbolChile, IconSymbolChina, IconSymbolChristmasIsland, IconSymbolCocosIslands, IconSymbolColombia, IconSymbolComoros, IconSymbolCookIsland, IconSymbolCostaRica, IconSymbolCroatia, IconSymbolCuba, IconSymbolCuracao, IconSymbolCyprus, IconSymbolCzechRepublic, IconSymbolDemocraticRepublicOfTheCongo, IconSymbolDenmark, IconSymbolDjibouti, IconSymbolDominica, IconSymbolDominicanRepublic, IconSymbolEcuador, IconSymbolEgypt, IconSymbolElSalvador, IconSymbolEquatorialGuinea, IconSymbolEritrea, IconSymbolEstonia, IconSymbolEswatini, IconSymbolEthiopia, IconSymbolFalklandIslands, IconSymbolFaroeIslands, IconSymbolFederatedStatesOfMicronesia, IconSymbolFiji, IconSymbolFinland, IconSymbolFrance, IconSymbolFrenchGuiana, IconSymbolFrenchPolynesia, IconSymbolGabon, IconSymbolGambia, IconSymbolGeorgia, IconSymbolGermany, IconSymbolGhana, IconSymbolGibraltar, IconSymbolGreece, IconSymbolGreeland, IconSymbolGrenada, IconSymbolGrenadines, IconSymbolGuam, IconSymbolGuatemala, IconSymbolGuernsey, IconSymbolGuinea, IconSymbolGuineaBissau, IconSymbolGuyana, IconSymbolHaiti, IconSymbolHonduras, IconSymbolHongKong, IconSymbolHungary, IconSymbolIceland, IconSymbolIndia, IconSymbolIndianOceanTerritory, IconSymbolIndonesia, IconSymbolIran, IconSymbolIraq, IconSymbolIreland, IconSymbolIsleOfMan, IconSymbolIsrael, IconSymbolItaly, IconSymbolJamaica, IconSymbolJapan, IconSymbolJersey, IconSymbolJordan, IconSymbolKazakhstan, IconSymbolKenya, IconSymbolKiribati, IconSymbolKuwait, IconSymbolKyrgyzstan, IconSymbolLaos, IconSymbolLatvia, IconSymbolLebanon, IconSymbolLesotho, IconSymbolLiberia, IconSymbolLibya, IconSymbolLiechtenstein, IconSymbolLithuania, IconSymbolLuxembourg, IconSymbolMacau, IconSymbolMadagascar, IconSymbolMalasia, IconSymbolMalawi, IconSymbolMaldives, IconSymbolMali, IconSymbolMalta, IconSymbolMarshallIslands, IconSymbolMartinique, IconSymbolMauritania, IconSymbolMauritius, IconSymbolMexico, IconSymbolMoldova, IconSymbolMonaco, IconSymbolMongolia, IconSymbolMontenegro, IconSymbolMontserrat, IconSymbolMorroco, IconSymbolMozambique, IconSymbolMyanmar, IconSymbolNamibia, IconSymbolNauru, IconSymbolNepal, IconSymbolNetherlands, IconSymbolNewZealand, IconSymbolNicaragua, IconSymbolNiger, IconSymbolNigeria, IconSymbolNiue, IconSymbolNorfolkIsland, IconSymbolNorthKorea, IconSymbolNorthMacedonia, IconSymbolNorthernMarianaIslands, IconSymbolNorway, IconSymbolOman, IconSymbolPakistan, IconSymbolPalau, IconSymbolPalestine, IconSymbolPanama, IconSymbolPapuaNewGuinea, IconSymbolParaguay, IconSymbolPeru, IconSymbolPhilippines, IconSymbolPitcairnIslands, IconSymbolPoland, IconSymbolPortugal, IconSymbolPuertoRico, IconSymbolQatar, IconSymbolRepublicOfTheCongo, IconSymbolRomania, IconSymbolRussia, IconSymbolRwanda, IconSymbolSaintBarthelemy, IconSymbolSamoa, IconSymbolSanMarino, IconSymbolSaoTomeAndPrincipe, IconSymbolSaudiArabia, IconSymbolSenegal, IconSymbolSerbia, IconSymbolSeychelles, IconSymbolSierraLeone, IconSymbolSingapore, IconSymbolSintMaarten, IconSymbolSlovakia, IconSymbolSlovenia, IconSymbolSolomonIslands, IconSymbolSomalia, IconSymbolSouthAfrica, IconSymbolSouthKorea, IconSymbolSouthSudan, IconSymbolSpain, IconSymbolSriLanka, IconSymbolStKittsNevis, IconSymbolStLucia, IconSymbolSudan, IconSymbolSuriname, IconSymbolSweden, IconSymbolSwitzerland, IconSymbolSyria, IconSymbolTaiwan, IconSymbolTajikistan, IconSymbolTanzania, IconSymbolThailand, IconSymbolTimorLeste, IconSymbolTogo, IconSymbolTokelau, IconSymbolTonga, IconSymbolTrinidadAndTobago, IconSymbolTunisia, IconSymbolTurkey, IconSymbolTurkmenistan, IconSymbolTurksAndCaicos, IconSymbolTuvalu, IconSymbolUganda, IconSymbolUkraine, IconSymbolUnitedArabEmirates, IconSymbolUnitedKingdom, IconSymbolUnitedKingdomOfGreatBritainAndNorthernIreland, IconSymbolUnitedStates, IconSymbolUruguay, IconSymbolUzbekistan, IconSymbolVanuatu, IconSymbolVenezuela, IconSymbolVietnam, IconSymbolVirginIslands, IconSymbolVirginIslandsBritish, IconSymbolWestSahara, IconSymbolYemen, IconSymbolZambia, IconSymbolZimbabwe, IconSync, IconTableChart, IconTableChartFill, IconTableChartView, IconTableChartViewFill, IconTablet, IconTabletFill, IconTag, IconTaxiAlert, IconTaxiAlertFill, IconThermometer, IconThermometerAdd, IconThermometerFill, IconThermometerGain, IconThermometerGainFill, IconThermometerLoss, IconThermometerLossFill, IconThermostat, IconThermostatAuto, IconThermostatFill, IconThumbDown, IconThumbDownFill, IconThumbUp, IconThumbUpFill, IconTimeline, IconTimer, IconTimerFill, IconTitle, IconToken, IconTokenFill, IconTrain, IconTrainFill, IconTranslate, IconTravel, IconTravelExplore, IconTravelFill, IconTrendingDown, IconTrendingFlat, IconTrendingUp, IconTriangle, IconTriangleFill, IconTrip, IconTripFill, IconTrophy, IconTrophyFill, IconTune, IconTurnLeft, IconTurnRight, IconTurnSharpLeft, IconTurnSlightLeft, IconTurnSlightRight, IconTv, IconTvFill, IconUTurnLeft, IconUTurnRight, IconUnarchive, IconUnarchiveFill, IconUndo, IconUnsubscribe, IconUnsubscribeFill, IconUpcoming, IconUpcomingFill, IconVerifiedUser, IconVerifiedUserFill, IconVerticalAlignBottom, IconVerticalAlignCenter, IconVerticalAlignTop, IconVerticalDistribute, IconVideoLibrary, IconVideoLibraryFill, IconVideocam, IconVideocamFill, IconViewCarousel, IconViewCarouselFill, IconViewColumn, IconViewColumn2, IconViewColumn2Fill, IconViewColumnFill, IconViewDay, IconViewDayFill, IconViewInAr, IconViewInArFill, IconViewList, IconViewListFill, IconViewModule, IconViewModuleFill, IconVilla, IconVillaFill, IconVisa, IconVisibility, IconVisibilityFill, IconVisibilityOff, IconVisibilityOffFill, IconVoicemail, IconVolumeDown, IconVolumeDownFill, IconVolumeMute, IconVolumeMuteFill, IconVolumeOff, IconVolumeOffFill, IconVolumeUp, IconVolumeUpFill, IconVolunteerActivism, IconVolunteerActivismFill, IconWallet, IconWarehouse, IconWarehouseFill, IconWarning, IconWarningFill, IconWc, IconWest, IconWifi, IconWifiCalling, IconWifiCallingFill, IconWifiFill, IconWifiHome, IconWifiHomeFill, IconWineBar, IconWineBarFill, IconWoman, IconWork, IconWorkFill, IconX, IconXWhite, IconYoutube, IconYoutubeBlack, IconYoutubeWhite, IconZoomIn, IconZoomInMap, IconZoomOut, IconZoomOutMap, KeyNavigationUtility, ThemeService, UIAccordion, UIAccordionSection, UIAvatar, UIAvatarGroup, UIBadge, UIBannerAlert, UIBreadcrumb, UIButton, UICalendar, UICard, UICheckbox, UICheckboxGroup, UICheckboxGroupField, UICheckboxOption, UIChip, UIChipGroup, UIDatePicker, UIDatePickerField, UIDialog, UIDivider, UIFab, UIField, UIFlexDirective, UIFloatingDirective, UIFocusTrapDirective, UIIcon, UIInlineAlert, UIInput, UIInputField, UIInputNumber, UIInputNumberField, UIInputPhone, UIInputPhoneField, UIKeyNavigationDirective, UILinkDirective, UIListItem, UIMatchParentHeightDirective, UIMenu, UIModal, UIOutsideClickDirective, UIPagination, UIPortalDirective, UIRadio, UIRadioGroup, UIRadioGroupField, UIRadioOption, UIScrim, UISegmentedControl, UISelect, UISelectField, UISwitch, UISwitchOption, UITabGroup, UITabList, UITabListUtility, UITable, UITableCell, UITag, UITextarea, UITextareaField, UITooltip, UITooltipDirective, UITxtDirective, describedById, errorMessageId, formatCell, labelledById };
+export { BUILT_IN_COLUMN_SORTERS, BrandService, EXTRA_BRANDS, Icon360, IconAZAscend, IconAZDescend, IconAccessibilityNew, IconAccessible, IconAccountCircle, IconAccountCircleFill, IconAccountTree, IconAccountTreeFill, IconAdd, IconAddAPhoto, IconAddAPhotoFill, IconAddAlert, IconAddAlertFill, IconAddBusiness, IconAddBusinessFill, IconAddChart, IconAddChartFill, IconAddCircle, IconAddCircleFill, IconAddComment, IconAddCommentFill, IconAddReaction, IconAddReactionFill, IconAddShoppingCart, IconAirplanemodeInactive, IconAirportShuttle, IconAirportShuttleFill, IconAlignCenter, IconAlignEnd, IconAlignFlexCenter, IconAlignFlexEnd, IconAlignFlexStart, IconAlignHorizontalCenter, IconAlignHorizontalLeft, IconAlignHorizontalRight, IconAlignItemsStretch, IconAlignJustifyCenter, IconAlignJustifyFlexEnd, IconAlignJustifyFlexStart, IconAlignJustifySpaceAround, IconAlignJustifySpaceBetween, IconAlignJustifySpaceEven, IconAlignJustifyStretch, IconAlignSpaceAround, IconAlignSpaceBetween, IconAlignSpaceEven, IconAlignStart, IconAlignStretch, IconAlignVerticalBottom, IconAlignVerticalCenter, IconAlignVerticalTop, IconAlternateEmail, IconAmex, IconAnalytics, IconAnalyticsFill, IconApartment, IconAppStore, IconAppleBlack, IconAppleWhite, IconApplepay, IconApps, IconArOnYou, IconArOnYouFill, IconArStickers, IconArStickersFill, IconArchive, IconArchiveFill, IconAreaChart, IconAreaChartFill, IconArrowBack, IconArrowDownward, IconArrowDropDown, IconArrowDropUp, IconArrowForward, IconArrowInsert, IconArrowLeft, IconArrowOutward, IconArrowRight, IconArrowUpward, IconAssignment, IconAssignmentAdd, IconAssignmentAddFill, IconAssignmentFill, IconAttachFile, IconAttachFileAdd, IconAttachFileFill, IconAttachMoney, IconAutomation, IconAutomationFill, IconBadge, IconBadgeFill, IconBakeryDining, IconBakeryDiningFill, IconBarChart, IconBarcode, IconBarcodeScanner, IconBarn, IconBarnFill, IconBasement, IconBasementFill, IconBathroom, IconBathroomFill, IconBed, IconBedFill, IconBlock, IconBluetooth, IconBolt, IconBoltFill, IconBookmark, IconBookmarkAdd, IconBookmarkAddFill, IconBookmarkAdded, IconBookmarkAddedFill, IconBookmarkFill, IconBookmarkRemove, IconBookmarkRemoveFill, IconBookmarks, IconBookmarksFill, IconBorderColor, IconBorderColorFill, IconBorderStyle, IconBox, IconBoxAdd, IconBoxAddFill, IconBoxFill, IconBrail, IconBubbleChart, IconBubbleChartFill, IconBuilding, IconBuildingFill, IconBusinessCenter, IconBusinessCenterFill, IconCalendarViewDay, IconCalendarViewDayFill, IconCalendarViewWeek, IconCalendarViewWeekFill, IconCall, IconCallEnd, IconCallEndFill, IconCallFill, IconCampaign, IconCampaignFill, IconCancel, IconCancelFill, IconCasino, IconCasinoFill, IconCat, IconCatFill, IconCategory, IconCategoryFill, IconChartData, IconChartDataFill, IconChat, IconChatBubble, IconChatBubbleFill, IconChatFill, IconCheck, IconCheckCircle, IconCheckCircleFill, IconCheckFill, IconChecklist, IconChevronLeft, IconChevronRight, IconCircle, IconCircleFill, IconCleaningServices, IconCleaningServicesFill, IconClose, IconCloseFill, IconClosedCaption, IconClosedCaptionDisabled, IconClosedCaptionDisabledFill, IconClosedCaptionFill, IconCloud, IconCloudDone, IconCloudDoneFill, IconCloudDownload, IconCloudDownloadFill, IconCloudFill, IconCloudOff, IconCloudOffFill, IconCloudUpload, IconCloudUploadFill, IconCode, IconCognition, IconCognitionFill, IconColorBlind, IconColors, IconCommute, IconCommuteFill, IconComputer, IconComputerFill, IconConstruction, IconContactMail, IconContactMailFill, IconContactPage, IconContactPageFill, IconContactPhone, IconContactPhoneFill, IconContactSupport, IconContactSupportFill, IconContacts, IconContactsFill, IconContentCopy, IconContentCopyFill, IconContentPasteOff, IconContentPasteSearch, IconContrast, IconContrastCircle, IconContrastFill, IconContrastSquare, IconCopyright, IconCopyrightFill, IconCrawlspace, IconCrawlspaceFill, IconCreditCard, IconCreditCardFill, IconDangerous, IconDangerousFill, IconDarkMode, IconDarkModeFill, IconDashboard, IconDashboard2, IconDashboard2Fill, IconDashboardCustomize, IconDashboardCustomizeFill, IconDashboardFill, IconDatabase, IconDatabaseFill, IconDelete, IconDeleteFill, IconDeleteForever, IconDeleteForeverFill, IconDeployedCode, IconDeployedCodeAccount, IconDeployedCodeAccountFill, IconDeployedCodeAlert, IconDeployedCodeAlertFill, IconDeployedCodeFill, IconDeployedCodeHistory, IconDeployedCodeHistoryFill, IconDeployedCodeUpdate, IconDeployedCodeUpdateFill, IconDescription, IconDescriptionFill, IconDesktopWindows, IconDesktopWindowsFill, IconDeviceThermostat, IconDevices, IconDevicesFill, IconDialpad, IconDiamond, IconDiamondFill, IconDirections, IconDirectionsBike, IconDirectionsBoat, IconDirectionsBoatFill, IconDirectionsBus, IconDirectionsBusFill, IconDirectionsCar, IconDirectionsCarFill, IconDirectionsFill, IconDirectionsSubway, IconDirectionsSubwayFill, IconDirectionsWalk, IconDiscover, IconDiversity1, IconDiversity1Fill, IconDoNotDisturbOn, IconDoNotDisturbOnFill, IconDocumentScanner, IconDocumentScannerFill, IconDog, IconDogFill, IconDonutLarge, IconDonutSmall, IconDonutSmallFill, IconDoorOpen, IconDoorOpenFill, IconDraft, IconDraftFill, IconDrafts, IconDraftsFill, IconDragHandle, IconDragIndicator, IconDraw, IconDrawFill, IconEdit, IconEditFill, IconEditNote, IconEditNoteFill, IconEditRoad, IconEditRoadFill, IconEditSquare, IconEditSquareFill, IconEgg, IconEggFill, IconEmojiLanguage, IconEmojiLanguageFill, IconEmoticon, IconEncrypted, IconEncryptedFill, IconError, IconErrorFill, IconEvent, IconEventFill, IconEventNote, IconEventNoteFill, IconExercise, IconExerciseFill, IconExperiment, IconExperimentFill, IconExplore, IconExploreFill, IconExtension, IconExtensionFill, IconExtensionOff, IconExtensionOffFill, IconFaceId, IconFaceRetouchingOff, IconFaceRetouchingOffFill, IconFacebook, IconFacebookWhite, IconFamilyHome, IconFamilyHomeFill, IconFastfood, IconFastfoodFill, IconFavorite, IconFavoriteFill, IconFileDownload, IconFileUpload, IconFilterList, IconFinance, IconFingerprint, IconFingerprintOff, IconFireplace, IconFireplaceFill, IconFitScreen, IconFitScreenFill, IconFitnessCenter, IconFlag, IconFlagAfghanistan, IconFlagAlandIsland, IconFlagAlbania, IconFlagAlgeria, IconFlagAmericanSamoa, IconFlagAndorra, IconFlagAngola, IconFlagAnguilla, IconFlagAntiguaAndBarbuda, IconFlagArgentina, IconFlagArmenia, IconFlagAruba, IconFlagAustralia, IconFlagAustria, IconFlagAzerbaijan, IconFlagBahamas, IconFlagBahrain, IconFlagBangladesh, IconFlagBarbados, IconFlagBelarus, IconFlagBelgium, IconFlagBelize, IconFlagBenin, IconFlagBermuda, IconFlagBhutan, IconFlagBolivia, IconFlagBonaire, IconFlagBosniaAndHerzegovina, IconFlagBotswana, IconFlagBrazil, IconFlagBrunei, IconFlagBulgaria, IconFlagBurkinaFaso, IconFlagBurundi, IconFlagCambodia, IconFlagCameroon, IconFlagCanada, IconFlagCaymanIslands, IconFlagCentralAfricanRepublic, IconFlagChad, IconFlagChile, IconFlagChina, IconFlagChristmasIsland, IconFlagCocosIslands, IconFlagColombia, IconFlagComoros, IconFlagCookIsland, IconFlagCostaRica, IconFlagCroatia, IconFlagCuba, IconFlagCuracao, IconFlagCyprus, IconFlagCzechRepublic, IconFlagDemocraticRepublicOfTheCongo, IconFlagDenmark, IconFlagDjibouti, IconFlagDominica, IconFlagDominicanRepublic, IconFlagEcuador, IconFlagEgypt, IconFlagElSalvador, IconFlagEquatorialGuinea, IconFlagEritrea, IconFlagEstonia, IconFlagEswatini, IconFlagEthiopia, IconFlagFalklandIslands, IconFlagFaroeIslands, IconFlagFederatedStatesOfMicronesia, IconFlagFiji, IconFlagFill, IconFlagFinland, IconFlagFrance, IconFlagFrenchGuiana, IconFlagFrenchPolynesia, IconFlagGabon, IconFlagGambia, IconFlagGeorgia, IconFlagGermany, IconFlagGhana, IconFlagGibraltar, IconFlagGreece, IconFlagGreeland, IconFlagGrenada, IconFlagGrenadines, IconFlagGuam, IconFlagGuatemala, IconFlagGuernsey, IconFlagGuinea, IconFlagGuineaBissau, IconFlagGuyana, IconFlagHaiti, IconFlagHonduras, IconFlagHongKong, IconFlagHungary, IconFlagIceland, IconFlagIndia, IconFlagIndianOceanTerritory, IconFlagIndonesia, IconFlagIran, IconFlagIraq, IconFlagIreland, IconFlagIsleOfMan, IconFlagIsrael, IconFlagItaly, IconFlagJamaica, IconFlagJapan, IconFlagJersey, IconFlagJordan, IconFlagKazakhstan, IconFlagKenya, IconFlagKiribati, IconFlagKuwait, IconFlagKyrgyzstan, IconFlagLaos, IconFlagLatvia, IconFlagLebanon, IconFlagLesotho, IconFlagLiberia, IconFlagLibya, IconFlagLiechtenstein, IconFlagLithuania, IconFlagLuxembourg, IconFlagMacau, IconFlagMadagascar, IconFlagMalasia, IconFlagMalawi, IconFlagMaldives, IconFlagMali, IconFlagMalta, IconFlagMarshallIslands, IconFlagMartinique, IconFlagMauritania, IconFlagMauritius, IconFlagMexico, IconFlagMoldova, IconFlagMonaco, IconFlagMongolia, IconFlagMontenegro, IconFlagMontserrat, IconFlagMorroco, IconFlagMozambique, IconFlagMyanmar, IconFlagNamibia, IconFlagNauru, IconFlagNepal, IconFlagNetherlands, IconFlagNewZealand, IconFlagNicaragua, IconFlagNiger, IconFlagNigeria, IconFlagNiue, IconFlagNorfolkIsland, IconFlagNorthKorea, IconFlagNorthMacedonia, IconFlagNorthernMarianaIslands, IconFlagNorway, IconFlagOman, IconFlagPakistan, IconFlagPalau, IconFlagPalestine, IconFlagPanama, IconFlagPapuaNewGuinea, IconFlagParaguay, IconFlagPeru, IconFlagPhilippines, IconFlagPitcairnIslands, IconFlagPoland, IconFlagPortugal, IconFlagPuertoRico, IconFlagQatar, IconFlagRepublicOfTheCongo, IconFlagRomania, IconFlagRussia, IconFlagRwanda, IconFlagSaintBarthelemy, IconFlagSamoa, IconFlagSanMarino, IconFlagSaoTomeAndPrincipe, IconFlagSaudiArabia, IconFlagSenegal, IconFlagSerbia, IconFlagSeychelles, IconFlagSierraLeone, IconFlagSingapore, IconFlagSintMaarten, IconFlagSlovakia, IconFlagSlovenia, IconFlagSolomonIslands, IconFlagSomalia, IconFlagSouthAfrica, IconFlagSouthKorea, IconFlagSouthSudan, IconFlagSpain, IconFlagSriLanka, IconFlagStKittsNevis, IconFlagStLucia, IconFlagSudan, IconFlagSuriname, IconFlagSweden, IconFlagSwitzerland, IconFlagSyria, IconFlagTaiwan, IconFlagTajikistan, IconFlagTanzania, IconFlagThailand, IconFlagTimorLeste, IconFlagTogo, IconFlagTokelau, IconFlagTonga, IconFlagTrinidadAndTobago, IconFlagTunisia, IconFlagTurkey, IconFlagTurkmenistan, IconFlagTurksAndCaicos, IconFlagTuvalu, IconFlagUganda, IconFlagUkraine, IconFlagUnitedArabEmirates, IconFlagUnitedKingdom, IconFlagUnitedKingdomOfGreatBritainAndNorthernIreland, IconFlagUnitedStates, IconFlagUruguay, IconFlagUzbekistan, IconFlagVanuatu, IconFlagVenezuela, IconFlagVietnam, IconFlagVirginIslands, IconFlagVirginIslandsBritish, IconFlagWestSahara, IconFlagYemen, IconFlagZambia, IconFlagZimbabwe, IconFlashAuto, IconFlashAutoFill, IconFlight, IconFlowchart, IconFlowchartFill, IconFolder, IconFolderFill, IconFolderOpen, IconFolderOpenFill, IconFolderShared, IconFolderSharedFill, IconFontDownload, IconFontDownloadFill, IconForSaleSign, IconForYou, IconForYouFill, IconForest, IconForestFill, IconForkRight, IconFormatAlignCenter, IconFormatAlignJustify, IconFormatAlignLeft, IconFormatAlignRight, IconFormatColorFill, IconFormatLetterSpacingWide, IconFormatLetterSpacingWider, IconFormatLineSpacing, IconFormatListBulleted, IconFormatListNumbered, IconFormatShapes, IconFormatShapesFill, IconFormatSize, IconForum, IconForumFill, IconForward, IconForwardToInbox, IconForwardToInboxFill, IconFullStackedBarChart, IconFullscreen, IconFullscreenExit, IconFullscreenFill, IconGTranslate, IconGalleryThumbnail, IconGalleryThumbnailFill, IconGarage, IconGarageFill, IconGlobe, IconGoogle, IconGooglePlay, IconGooglepay, IconGridView, IconGridViewFill, IconGroup, IconGroupFill, IconGroupedBarChart, IconHail, IconHandDraw, IconHandDrawFill, IconHandshake, IconHandshakeFill, IconHandyman, IconHandymanFill, IconHeadMountedDevice, IconHeadMountedDeviceFill, IconHeadsetMic, IconHeadsetMicFill, IconHearing, IconHeat, IconHeatPump, IconHeatPumpFill, IconHelp, IconHelpFill, IconHexagon, IconHexagonFill, IconHistory, IconHome, IconHomeAdd, IconHomeAddFill, IconHomeCheck, IconHomeCheckFill, IconHomeFill, IconHomeLock, IconHomeLockFill, IconHomeMonitize, IconHomeMonitizeFill, IconHomeMove, IconHomeMoveFill, IconHomeRemove, IconHomeRemoveFill, IconHomeStorage, IconHomeStorageFill, IconHomeTimer, IconHomeTimerFill, IconHomeWork, IconHomeWorkFill, IconHorizontalDistribute, IconHub, IconHubFill, IconHvac, IconHvacFill, IconIcecream, IconIcecreamFill, IconIdCard, IconIdCardFill, IconImage, IconImageFill, IconInProgress, IconInbox, IconInboxFill, IconIncompleteCircle, IconInfo, IconInfoFill, IconInkEraser, IconInkEraserFill, IconInput, IconInstagramBlack, IconInstagramWhite, IconInventory, IconInventory2, IconInventory2Fill, IconInventoryFill, IconIosShare, IconKebabDining, IconKebabDiningFill, IconKey, IconKeyFill, IconKeyOff, IconKeyOffFill, IconKeyVertical, IconKeyVerticalFill, IconKeyboard, IconKeyboardArrowDown, IconKeyboardArrowUp, IconKeyboardDoubleArrowLeft, IconKeyboardDoubleArrowRight, IconKeyboardFill, IconLabel, IconLabelFill, IconLabelImportant, IconLabelImportantFill, IconLan, IconLanFill, IconLandscape, IconLandscapeFill, IconLanguage, IconLaundry, IconLaundryFill, IconLayers, IconLayersFill, IconLeaderboard, IconLeaderboardFill, IconLeftPanelClose, IconLeftPanelCloseFill, IconLeftPanelOpen, IconLeftPanelOpenFill, IconLicense, IconLicenseFill, IconLight, IconLightFill, IconLightMode, IconLightModeFill, IconLightbulb, IconLightbulbFill, IconLink, IconLinkFill, IconLinkOff, IconLinkedin, IconLinkedinWhite, IconList, IconListChange, IconListFill, IconLocalCafe, IconLocalCafeFill, IconLocalParking, IconLocalShipping, IconLocalShippingFill, IconLocalTaxi, IconLocalTaxiFill, IconLocationDisabled, IconLocationOff, IconLocationOffFill, IconLocationOn, IconLocationOnFill, IconLocationSearching, IconLock, IconLockFill, IconLockOpen, IconLockOpenFill, IconLogin, IconLogout, IconLowVisibility, IconMail, IconMailFill, IconMailLock, IconMailLockFill, IconMan, IconManFill, IconManageAccounts, IconManageAccountsFill, IconMap, IconMapFill, IconMarkAsUnread, IconMarkAsUnreadFill, IconMarkEmailRead, IconMarkEmailReadFill, IconMarkEmailUnread, IconMarkEmailUnreadFill, IconMastercard, IconMenu, IconMenuBook, IconMenuBookFill, IconMenuFill, IconMerge, IconMic, IconMicFill, IconMicOff, IconMicOffFill, IconModeCool, IconModeCoolOff, IconModeFan, IconModeFanFill, IconModeFanOff, IconModeFanOffFill, IconModeHeat, IconModeHeatFill, IconMoneyOff, IconMonitor, IconMonitorFill, IconMood, IconMoodBad, IconMoodBadFill, IconMoodFill, IconMoreHoriz, IconMoreVert, IconMoveLocation, IconMoveLocationFill, IconMoveToInbox, IconMoveToInboxFill, IconMultilineChart, IconMusicNote, IconMyLocation, IconMyLocationFill, IconNavigation, IconNavigationFill, IconNearMe, IconNearMeFill, IconNoSound, IconNoSoundFill, IconNorth, IconNorthWest, IconNoteAdd, IconNoteAddFill, IconNotifications, IconNotificationsFill, IconNotificationsOff, IconNotificationsOffFill, IconNutrition, IconNutritionFill, IconOktaBlack, IconOktaWhite, IconOmniChatbox, IconOmniChatboxFill, IconOpenInFull, IconOpenInNew, IconOpportunities, IconOrders, IconOrdersFill, IconOtherHouses, IconOtherHousesFill, IconOutbox, IconOutboxFill, IconOutgoingMail, IconOutgoingMailFill, IconOutlook, IconOvenGen, IconOvenGenFill, IconPackage, IconPackage2, IconPackage2Fill, IconPackageFill, IconPaid, IconPaidFill, IconPalette, IconPaletteFill, IconPanZoom, IconPartnerExchange, IconPartnerExchangeFill, IconPause, IconPauseCircle, IconPauseCircleFill, IconPauseFill, IconPayments, IconPaymentsFill, IconPaypal, IconPendingActions, IconPentagon, IconPentagonFill, IconPercent, IconPerson, IconPersonAdd, IconPersonAddDisabled, IconPersonAddDisabledFill, IconPersonAddFill, IconPersonBook, IconPersonBookFill, IconPersonCancel, IconPersonCancelFill, IconPersonCheck, IconPersonCheckFill, IconPersonFill, IconPersonRemove, IconPersonRemoveFill, IconPersonSearch, IconPersonSearchFill, IconPets, IconPhotoCamera, IconPhotoCameraFill, IconPieChart, IconPieChartFill, IconPin, IconPinFill, IconPinterest, IconPinterestBlack, IconPlayArrow, IconPlayArrowFill, IconPlayCircle, IconPlayCircleFill, IconPlayPause, IconPlaylistAdd, IconPlaylistAddCheck, IconPlaylistAddFill, IconPlaylistRemove, IconPolicy, IconPolicyFill, IconPreview, IconPreviewFill, IconPrint, IconPrintFill, IconPublic, IconQrCode, IconQrCodeScanner, IconQuestionMark, IconRampLeft, IconRampRight, IconRealEstateAgent, IconRealEstateAgentFill, IconReceipt, IconReceiptFill, IconReceiptLong, IconReceiptLongFill, IconRecordVoiceOver, IconRecordVoiceOverFill, IconRecycling, IconRefresh, IconRemove, IconRemoveShoppingCart, IconRentSign, IconReplay, IconReply, IconReplyAll, IconReplyFill, IconReport, IconReportFill, IconResize, IconResizeHandle, IconRestaurant, IconRightPanelClose, IconRightPanelCloseFill, IconRightPanelOpen, IconRightPanelOpenFill, IconRoofing, IconRoofingFill, IconRoomPreferences, IconRoomPreferencesFill, IconRoundaboutLeft, IconRoundaboutRight, IconRoute, IconRouteFill, IconSave, IconSaveFill, IconSaveSearch, IconSaveSearchFill, IconScatterPlot, IconScatterPlotFill, IconSchedule, IconScheduleFill, IconScheduleSend, IconScheduleSendFill, IconSchema, IconSchemaFill, IconSchool, IconSchoolFill, IconScience, IconScienceFill, IconScore, IconScoreFill, IconSearch, IconSegment, IconSell, IconSellFill, IconSeller, IconSellerFill, IconSend, IconSendFill, IconSentimentDissatisfied, IconSentimentDissatisfiedFill, IconSentimentExtremelyDissatisfied, IconSentimentExtremelyDissatisfiedFill, IconSentimentNeutral, IconSentimentNeutralFill, IconSentimentSatisfied, IconSentimentSatisfiedFill, IconSentimentVeryDissatisfied, IconSentimentVeryDissatisfiedFill, IconSentimentVerySatisfied, IconSentimentVerySatisfiedFill, IconSettings, IconSettingsAccessibility, IconSettingsFill, IconShare, IconShareFill, IconShippingContainer, IconShippingContainerFill, IconShoppingBag, IconShoppingBagFill, IconShoppingCart, IconShoppingCartCheckout, IconShoppingCartFill, IconShoppingCartOff, IconShoppingCartOffFill, IconSick, IconSickFill, IconSignLanguage, IconSignLanguageFill, IconSignalCellularAlt, IconSkipNext, IconSkipNextFill, IconSkipPrevious, IconSkipPreviousFill, IconSlabSerif, IconSlabSerifFill, IconSmartphone, IconSmartphoneFill, IconSms, IconSmsFill, IconSort, IconSortByAlpha, IconSortByReverseAlpha, IconSortFill, IconSouth, IconSouthEast, IconSouthFill, IconSouthWest, IconSquare, IconSquareFill, IconSquareFoot, IconStackedBarChart, IconStackedEmail, IconStackedEmailFill, IconStacks, IconStacksFill, IconStar, IconStarFill, IconStop, IconStopCircle, IconStopCircleFill, IconStopFill, IconStorefront, IconStorefrontFill, IconStraight, IconStraightFill, IconStraighten, IconStraightenFill, IconStressManagement, IconStressManagementFill, IconSubject, IconSubway, IconSubwayFill, IconSwapVert, IconSwapVerticalCircle, IconSwapVerticalCircleFill, IconSymbolAfghanistan, IconSymbolAlandIsland, IconSymbolAlbania, IconSymbolAlgeria, IconSymbolAmericanSamoa, IconSymbolAndorra, IconSymbolAngola, IconSymbolAnguilla, IconSymbolAntiguaAndBarbuda, IconSymbolArgentina, IconSymbolArmenia, IconSymbolAruba, IconSymbolAustralia, IconSymbolAustria, IconSymbolAzerbaijan, IconSymbolBahamas, IconSymbolBahrain, IconSymbolBangladesh, IconSymbolBarbados, IconSymbolBelarus, IconSymbolBelgium, IconSymbolBelize, IconSymbolBenin, IconSymbolBermuda, IconSymbolBhutan, IconSymbolBolivia, IconSymbolBonaire, IconSymbolBosniaAndHerzegovina, IconSymbolBotswana, IconSymbolBrazil, IconSymbolBrunei, IconSymbolBulgaria, IconSymbolBurkinaFaso, IconSymbolBurundi, IconSymbolCambodia, IconSymbolCameroon, IconSymbolCanada, IconSymbolCaymanIslands, IconSymbolCentralAfricanRepublic, IconSymbolChad, IconSymbolChile, IconSymbolChina, IconSymbolChristmasIsland, IconSymbolCocosIslands, IconSymbolColombia, IconSymbolComoros, IconSymbolCookIsland, IconSymbolCostaRica, IconSymbolCroatia, IconSymbolCuba, IconSymbolCuracao, IconSymbolCyprus, IconSymbolCzechRepublic, IconSymbolDemocraticRepublicOfTheCongo, IconSymbolDenmark, IconSymbolDjibouti, IconSymbolDominica, IconSymbolDominicanRepublic, IconSymbolEcuador, IconSymbolEgypt, IconSymbolElSalvador, IconSymbolEquatorialGuinea, IconSymbolEritrea, IconSymbolEstonia, IconSymbolEswatini, IconSymbolEthiopia, IconSymbolFalklandIslands, IconSymbolFaroeIslands, IconSymbolFederatedStatesOfMicronesia, IconSymbolFiji, IconSymbolFinland, IconSymbolFrance, IconSymbolFrenchGuiana, IconSymbolFrenchPolynesia, IconSymbolGabon, IconSymbolGambia, IconSymbolGeorgia, IconSymbolGermany, IconSymbolGhana, IconSymbolGibraltar, IconSymbolGreece, IconSymbolGreeland, IconSymbolGrenada, IconSymbolGrenadines, IconSymbolGuam, IconSymbolGuatemala, IconSymbolGuernsey, IconSymbolGuinea, IconSymbolGuineaBissau, IconSymbolGuyana, IconSymbolHaiti, IconSymbolHonduras, IconSymbolHongKong, IconSymbolHungary, IconSymbolIceland, IconSymbolIndia, IconSymbolIndianOceanTerritory, IconSymbolIndonesia, IconSymbolIran, IconSymbolIraq, IconSymbolIreland, IconSymbolIsleOfMan, IconSymbolIsrael, IconSymbolItaly, IconSymbolJamaica, IconSymbolJapan, IconSymbolJersey, IconSymbolJordan, IconSymbolKazakhstan, IconSymbolKenya, IconSymbolKiribati, IconSymbolKuwait, IconSymbolKyrgyzstan, IconSymbolLaos, IconSymbolLatvia, IconSymbolLebanon, IconSymbolLesotho, IconSymbolLiberia, IconSymbolLibya, IconSymbolLiechtenstein, IconSymbolLithuania, IconSymbolLuxembourg, IconSymbolMacau, IconSymbolMadagascar, IconSymbolMalasia, IconSymbolMalawi, IconSymbolMaldives, IconSymbolMali, IconSymbolMalta, IconSymbolMarshallIslands, IconSymbolMartinique, IconSymbolMauritania, IconSymbolMauritius, IconSymbolMexico, IconSymbolMoldova, IconSymbolMonaco, IconSymbolMongolia, IconSymbolMontenegro, IconSymbolMontserrat, IconSymbolMorroco, IconSymbolMozambique, IconSymbolMyanmar, IconSymbolNamibia, IconSymbolNauru, IconSymbolNepal, IconSymbolNetherlands, IconSymbolNewZealand, IconSymbolNicaragua, IconSymbolNiger, IconSymbolNigeria, IconSymbolNiue, IconSymbolNorfolkIsland, IconSymbolNorthKorea, IconSymbolNorthMacedonia, IconSymbolNorthernMarianaIslands, IconSymbolNorway, IconSymbolOman, IconSymbolPakistan, IconSymbolPalau, IconSymbolPalestine, IconSymbolPanama, IconSymbolPapuaNewGuinea, IconSymbolParaguay, IconSymbolPeru, IconSymbolPhilippines, IconSymbolPitcairnIslands, IconSymbolPoland, IconSymbolPortugal, IconSymbolPuertoRico, IconSymbolQatar, IconSymbolRepublicOfTheCongo, IconSymbolRomania, IconSymbolRussia, IconSymbolRwanda, IconSymbolSaintBarthelemy, IconSymbolSamoa, IconSymbolSanMarino, IconSymbolSaoTomeAndPrincipe, IconSymbolSaudiArabia, IconSymbolSenegal, IconSymbolSerbia, IconSymbolSeychelles, IconSymbolSierraLeone, IconSymbolSingapore, IconSymbolSintMaarten, IconSymbolSlovakia, IconSymbolSlovenia, IconSymbolSolomonIslands, IconSymbolSomalia, IconSymbolSouthAfrica, IconSymbolSouthKorea, IconSymbolSouthSudan, IconSymbolSpain, IconSymbolSriLanka, IconSymbolStKittsNevis, IconSymbolStLucia, IconSymbolSudan, IconSymbolSuriname, IconSymbolSweden, IconSymbolSwitzerland, IconSymbolSyria, IconSymbolTaiwan, IconSymbolTajikistan, IconSymbolTanzania, IconSymbolThailand, IconSymbolTimorLeste, IconSymbolTogo, IconSymbolTokelau, IconSymbolTonga, IconSymbolTrinidadAndTobago, IconSymbolTunisia, IconSymbolTurkey, IconSymbolTurkmenistan, IconSymbolTurksAndCaicos, IconSymbolTuvalu, IconSymbolUganda, IconSymbolUkraine, IconSymbolUnitedArabEmirates, IconSymbolUnitedKingdom, IconSymbolUnitedKingdomOfGreatBritainAndNorthernIreland, IconSymbolUnitedStates, IconSymbolUruguay, IconSymbolUzbekistan, IconSymbolVanuatu, IconSymbolVenezuela, IconSymbolVietnam, IconSymbolVirginIslands, IconSymbolVirginIslandsBritish, IconSymbolWestSahara, IconSymbolYemen, IconSymbolZambia, IconSymbolZimbabwe, IconSync, IconTableChart, IconTableChartFill, IconTableChartView, IconTableChartViewFill, IconTablet, IconTabletFill, IconTag, IconTaxiAlert, IconTaxiAlertFill, IconThermometer, IconThermometerAdd, IconThermometerFill, IconThermometerGain, IconThermometerGainFill, IconThermometerLoss, IconThermometerLossFill, IconThermostat, IconThermostatAuto, IconThermostatFill, IconThumbDown, IconThumbDownFill, IconThumbUp, IconThumbUpFill, IconTimeline, IconTimer, IconTimerFill, IconTitle, IconToken, IconTokenFill, IconTrain, IconTrainFill, IconTranslate, IconTravel, IconTravelExplore, IconTravelFill, IconTrendingDown, IconTrendingFlat, IconTrendingUp, IconTriangle, IconTriangleFill, IconTrip, IconTripFill, IconTrophy, IconTrophyFill, IconTune, IconTurnLeft, IconTurnRight, IconTurnSharpLeft, IconTurnSlightLeft, IconTurnSlightRight, IconTv, IconTvFill, IconUTurnLeft, IconUTurnRight, IconUnarchive, IconUnarchiveFill, IconUndo, IconUnsubscribe, IconUnsubscribeFill, IconUpcoming, IconUpcomingFill, IconVerifiedUser, IconVerifiedUserFill, IconVerticalAlignBottom, IconVerticalAlignCenter, IconVerticalAlignTop, IconVerticalDistribute, IconVideoLibrary, IconVideoLibraryFill, IconVideocam, IconVideocamFill, IconViewCarousel, IconViewCarouselFill, IconViewColumn, IconViewColumn2, IconViewColumn2Fill, IconViewColumnFill, IconViewDay, IconViewDayFill, IconViewInAr, IconViewInArFill, IconViewList, IconViewListFill, IconViewModule, IconViewModuleFill, IconVilla, IconVillaFill, IconVisa, IconVisibility, IconVisibilityFill, IconVisibilityOff, IconVisibilityOffFill, IconVoicemail, IconVolumeDown, IconVolumeDownFill, IconVolumeMute, IconVolumeMuteFill, IconVolumeOff, IconVolumeOffFill, IconVolumeUp, IconVolumeUpFill, IconVolunteerActivism, IconVolunteerActivismFill, IconWallet, IconWarehouse, IconWarehouseFill, IconWarning, IconWarningFill, IconWc, IconWest, IconWifi, IconWifiCalling, IconWifiCallingFill, IconWifiFill, IconWifiHome, IconWifiHomeFill, IconWineBar, IconWineBarFill, IconWoman, IconWork, IconWorkFill, IconX, IconXWhite, IconYoutube, IconYoutubeBlack, IconYoutubeWhite, IconZoomIn, IconZoomInMap, IconZoomOut, IconZoomOutMap, KeyNavigationUtility, ThemeService, UIAccordion, UIAccordionSection, UIAvatar, UIAvatarGroup, UIBadge, UIBannerAlert, UIBreadcrumb, UIButton, UICalendar, UICard, UICheckbox, UICheckboxGroup, UICheckboxGroupField, UICheckboxOption, UIChip, UIChipGroup, UIDatePicker, UIDatePickerField, UIDialog, UIDivider, UIFab, UIField, UIFlexDirective, UIFloatingDirective, UIFocusTrapDirective, UIIcon, UIInlineAlert, UIInput, UIInputField, UIInputNumber, UIInputNumberField, UIInputPhone, UIInputPhoneField, UIKeyNavigationDirective, UILinkDirective, UIListItem, UIMatchParentHeightDirective, UIMenu, UIModal, UIOutsideClickDirective, UIPagination, UIPortalDirective, UIRadio, UIRadioGroup, UIRadioGroupField, UIRadioOption, UIScrim, UISegmentedControl, UISelect, UISelectField, UISwitch, UISwitchOption, UITabGroup, UITabList, UITabListUtility, UITable, UITableCell, UITag, UITextarea, UITextareaField, UITooltip, UITooltipDirective, UITxtDirective, describedById, errorMessageId, formatCell, labelledById, updateBrandStylesheet };
 //# sourceMappingURL=bspk-ui-ngx.mjs.map