@bspk/ui-ngx 1.2.3 → 1.2.4

package/fesm2022/bspk-ui-ngx.mjs

@@ -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
@@ -62078,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',
         }]));
@@ -62226,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" }] : []));
@@ -62264,6 +62284,8 @@ 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;
@@ -62458,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,
@@ -62483,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 }] }] } });
@@ -62548,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" }] : []));
@@ -63232,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>
@@ -63373,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,
@@ -63413,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: [{
@@ -64155,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) {
@@ -64174,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>
@@ -64192,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) {
@@ -64202,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) {
@@ -64320,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(() => {
@@ -64349,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) {
@@ -64362,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);
@@ -64375,9 +64398,6 @@ class UICalendar {
         if (this.focusTrap())
             this.setFocus();
     }
-    setActiveDate(date) {
-        this.activeDate = date;
-    }
     generateOptionId(date) {
         return optionIdGenerator(this.id() || 'calendar')(date);
     }
@@ -64390,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);
@@ -64407,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"
@@ -64424,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>
@@ -64441,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">
@@ -64466,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>
                             }
@@ -64490,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"
@@ -64500,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>
@@ -64517,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">
@@ -64542,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>
                             }
@@ -64558,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
@@ -64616,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" }] : []));
@@ -64640,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"
@@ -64714,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.
@@ -64749,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,
@@ -64779,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>
@@ -64799,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" }] : []));
@@ -64834,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
@@ -64936,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.
@@ -65149,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()"
@@ -65176,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()"
@@ -65302,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"
@@ -65336,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
@@ -65354,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');
@@ -65366,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" }] : []));
@@ -65397,7 +65411,7 @@ class UIInput {
         this.value.set(event.target.value);
     }
     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>
             }
@@ -65419,11 +65433,11 @@ 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]">
             @if (trailing()) {
@@ -65466,11 +65480,11 @@ 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]">
             @if (trailing()) {
@@ -65494,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)
@@ -65509,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" }] : []));
@@ -65580,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) {
@@ -65588,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
@@ -65652,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,
@@ -65715,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.
@@ -65758,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()"
@@ -65786,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()"
@@ -66034,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" }] : []));
@@ -66205,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();
@@ -66218,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" }] : []));
@@ -66279,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,
@@ -66316,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: [{
@@ -66426,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()"
@@ -66454,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()"
@@ -66481,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.
  *
@@ -66499,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" }] : []));
@@ -66565,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"
@@ -66656,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.
@@ -66692,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()"
@@ -66720,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()"
@@ -67028,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" }] : []));
@@ -67154,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();
@@ -67179,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"
@@ -67351,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.
@@ -67387,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()"
@@ -67415,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()"
@@ -67680,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;
@@ -67743,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>
@@ -67778,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>
@@ -67790,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>
@@ -67806,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>
@@ -67834,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>
@@ -67846,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>
@@ -67855,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 */
 
@@ -67873,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" }] : []));
@@ -67885,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()"
@@ -67919,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.
@@ -67956,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"] }] });
@@ -67984,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>`,
@@ -68010,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" }] : []));
@@ -68025,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"
@@ -68100,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.
@@ -68136,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()"
@@ -68163,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()"
@@ -68190,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
@@ -68261,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);
@@ -68279,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.
  *
@@ -68425,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()"
@@ -68439,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()"
@@ -68472,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" }] : []));
@@ -68507,7 +68484,7 @@ class UISelect {
     document = inject(DOCUMENT$1);
     constructor() {
         this.value.subscribe((val) => {
-            this.valueChange.emit(val || '');
+            this.value.set(val || '');
         });
     }
     get offset() {
@@ -68572,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"
@@ -68703,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.
@@ -68739,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()"
@@ -68768,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()"
@@ -68794,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()"
@@ -68835,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.
@@ -68867,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"] }] });
@@ -68892,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>`,
@@ -68935,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()"
@@ -68951,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()"
@@ -69014,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" }] : []));
@@ -69025,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';
     }
@@ -69063,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) {
@@ -69174,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,
@@ -69261,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>
@@ -69381,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" }] : []));
@@ -69402,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) {
@@ -69413,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
@@ -69472,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.
@@ -69508,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()"
@@ -69536,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()"