ng-hub-ui-forms 22.4.0 → 22.5.0

package/fesm2022/ng-hub-ui-forms.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, model, HostBinding, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, HostListener, computed, effect, numberAttribute, booleanAttribute, output, DestroyRef, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, LOCALE_ID, Pipe } from '@angular/core';
+import { input, model, Directive, inject, TemplateRef, InjectionToken, makeEnvironmentProviders, ElementRef, ChangeDetectorRef, contentChild, contentChildren, signal, computed, effect, numberAttribute, booleanAttribute, output, DestroyRef, viewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChildren, PLATFORM_ID, afterRenderEffect, afterNextRender, Injectable, Renderer2, NgZone, afterEveryRender, HostAttributeToken, linkedSignal, forwardRef, Injector, HostListener, LOCALE_ID, Pipe } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, Validators, NgControl, ControlContainer, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, Subject, takeUntil, tap, animationFrameScheduler, asapScheduler, fromEvent } from 'rxjs';
@@ -258,14 +258,16 @@ class HubFormControl {
         control['toggle'] = this.toggle;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: HubFormControl, isStandalone: true, inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { required: "requiredChange" }, host: { properties: { "class.hidden-control": "this.hidden" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: HubFormControl, isStandalone: true, inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { required: "requiredChange" }, host: { properties: { "class.hidden-control": "hidden" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFormControl, decorators: [{
-            type: Directive
-        }], propDecorators: { formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }], hidden: [{
-                type: HostBinding,
-                args: ['class.hidden-control']
-            }] } });
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class.hidden-control]': 'hidden'
+                    }
+                }]
+        }], propDecorators: { formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }, { type: i0.Output, args: ["requiredChange"] }] } });
 
 /**
  * Marks a template as form helper text projected into a form field.
@@ -596,11 +598,13 @@ class HubFieldControl extends HubFormControl {
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.1", type: HubFieldControl, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalidFeedbackTemplateFn: { classPropertyName: "invalidFeedbackTemplateFn", publicName: "invalidFeedbackTemplateFn", isSignal: true, isRequired: false, transformFunction: null }, showValid: { classPropertyName: "showValid", publicName: "showValid", isSignal: true, isRequired: false, transformFunction: null }, validFeedback: { classPropertyName: "validFeedback", publicName: "validFeedback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, host: { listeners: { "focusout": "handleBlur($event)" } }, queries: [{ propertyName: "formTextTmp", first: true, predicate: HubFormTextDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "errorTpts", predicate: HubValidationErrorDirective, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubFieldControl, decorators: [{
-            type: Directive
-        }], ctorParameters: () => [], propDecorators: { formTextTmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFormTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], errorTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubValidationErrorDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], invalidFeedbackTemplateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFeedbackTemplateFn", required: false }] }], showValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValid", required: false }] }], validFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "validFeedback", required: false }] }], handleBlur: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
-            }] } });
+            type: Directive,
+            args: [{
+                    host: {
+                        '(focusout)': 'handleBlur($event)'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { formTextTmp: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HubFormTextDirective), { ...{ read: TemplateRef }, isSignal: true }] }], errorTpts: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HubValidationErrorDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], invalidFeedbackTemplateFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidFeedbackTemplateFn", required: false }] }], showValid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValid", required: false }] }], validFeedback: [{ type: i0.Input, args: [{ isSignal: true, alias: "validFeedback", required: false }] }] } });
 
 /**
  * Shared base for form *containers* (`hub-form`, `hub-fieldset`, `hub-legend`).
@@ -1593,18 +1597,14 @@ class HubAutoresizeDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubAutoresizeDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'textarea[hubAutoresize]'
+                    selector: 'textarea[hubAutoresize]',
+                    host: {
+                        '(:focusin)': 'onChange()',
+                        '(:focusout)': 'onChange()',
+                        '(:input)': 'onChange()'
+                    }
                 }]
-        }], propDecorators: { hubAutoresize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubAutoresize", required: false }] }], onChange: [{
-                type: HostListener,
-                args: [':focusin']
-            }, {
-                type: HostListener,
-                args: [':focusout']
-            }, {
-                type: HostListener,
-                args: [':input']
-            }] } });
+        }], propDecorators: { hubAutoresize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hubAutoresize", required: false }] }] } });
 
 /**
  * Accessible multi-line text field with optional auto-resize, character counter and automatic
@@ -1816,6 +1816,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     }, template: "<div\n\tclass=\"hub-field hub-slider\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n\t[style.--hub-slider-percent]=\"percent()\"\n\t[style.--hub-slider-from]=\"lowerPercent()\"\n\t[style.--hub-slider-to]=\"upperPercent()\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div\n\t\tclass=\"hub-field__body hub-slider__range\"\n\t\t[class.hub-slider__range--dual]=\"range()\"\n\t\t[class.hub-slider__range--flush]=\"!showValue()\"\n\t>\n\t\t@if (range()) {\n\t\t\t<div class=\"hub-slider__rail\" aria-hidden=\"true\"></div>\n\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--lower\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"lower()\"\n\t\t\t\t(input)=\"setLower($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range start\"\n\t\t\t\t[attr.aria-valuetext]=\"lower()\"\n\t\t\t/>\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track hub-slider__track--upper\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"upper()\"\n\t\t\t\t(input)=\"setUpper($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\taria-label=\"Range end\"\n\t\t\t\t[attr.aria-valuetext]=\"upper()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--lower\" aria-hidden=\"true\">{{ lower() }}</span>\n\t\t\t\t<span class=\"hub-slider__bubble hub-slider__bubble--upper\" aria-hidden=\"true\">{{ upper() }}</span>\n\t\t\t}\n\t\t} @else {\n\t\t\t<input\n\t\t\t\ttype=\"range\"\n\t\t\t\tclass=\"hub-slider__track\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[min]=\"min()\"\n\t\t\t\t[max]=\"max()\"\n\t\t\t\t[step]=\"step()\"\n\t\t\t\t[value]=\"single()\"\n\t\t\t\t(input)=\"setValue($any($event.target).value)\"\n\t\t\t\t[disabled]=\"disabled()\"\n\t\t\t\t[required]=\"!!required()\"\n\t\t\t\t[attr.aria-valuetext]=\"single()\"\n\t\t\t/>\n\n\t\t\t@if (showValue()) {\n\t\t\t\t<span class=\"hub-slider__bubble\" aria-hidden=\"true\">{{ single() }}</span>\n\t\t\t}\n\t\t}\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-slider{display:block}hub-slider.hidden-control{display:none!important}.hub-slider__range{position:relative;padding-top:var(--hub-slider-value-space)}.hub-slider__range--flush{--hub-slider-value-space: 0}.hub-slider__track{width:var(--hub-slider-track-width);height:var(--hub-slider-track-height);margin:0;appearance:none;-webkit-appearance:none;background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc(var(--hub-slider-percent) * 1%) 100%,100% 100%;border-radius:var(--hub-slider-track-border-radius);cursor:pointer}.hub-slider__track:disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-slider__track::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-thumb{width:var(--hub-slider-thumb-width);height:var(--hub-slider-thumb-height);border-radius:var(--hub-slider-thumb-border-radius);background:var(--hub-slider-thumb-bg);border:var(--hub-slider-thumb-border);box-shadow:var(--hub-slider-thumb-shadow);cursor:pointer}.hub-slider__track::-moz-range-track{height:var(--hub-slider-track-height);background:transparent;border-radius:var(--hub-slider-track-border-radius)}.hub-slider__track:focus-visible{outline:0}.hub-slider__track:focus-visible::-webkit-slider-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__track:focus-visible::-moz-range-thumb{box-shadow:var(--hub-slider-thumb-shadow),var(--hub-input-focus-box-shadow)}.hub-slider__bubble{position:absolute;top:0;left:calc(var(--hub-slider-percent) * 1%);transform:translate(-50%);padding:.1rem .4rem;color:var(--hub-slider-tooltip-color);background:var(--hub-slider-tooltip-bg);font-size:var(--hub-ref-font-size-sm, .875rem);line-height:1.4;border-radius:var(--hub-slider-tooltip-border-radius);white-space:nowrap;pointer-events:none}.hub-slider__bubble--lower{left:calc(var(--hub-slider-from) * 1%)}.hub-slider__bubble--upper{left:calc(var(--hub-slider-to) * 1%)}.hub-slider__range--dual{min-height:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height))}.hub-slider__range--dual .hub-slider__rail,.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{position:absolute;left:0;right:0;top:calc(var(--hub-slider-value-space) + var(--hub-slider-thumb-height) / 2)}.hub-slider__range--dual .hub-slider__rail{height:var(--hub-slider-track-height);transform:translateY(-50%);border-radius:var(--hub-slider-track-border-radius);background:var(--hub-slider-track-fill) no-repeat,var(--hub-slider-track-bg);background-size:calc((var(--hub-slider-to) - var(--hub-slider-from)) * 1%) 100%,100% 100%;background-position:calc(var(--hub-slider-from) / max(100 - var(--hub-slider-to) + var(--hub-slider-from),1) * 100%) center,0 0;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower,.hub-slider__range--dual .hub-slider__track--upper{width:100%;height:var(--hub-slider-thumb-height);margin:0;transform:translateY(-50%);background:transparent;pointer-events:none}.hub-slider__range--dual .hub-slider__track--lower::-webkit-slider-thumb,.hub-slider__range--dual .hub-slider__track--upper::-webkit-slider-thumb{pointer-events:auto;position:relative;z-index:2}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-thumb,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-thumb{pointer-events:auto}.hub-slider__range--dual .hub-slider__track--lower::-moz-range-track,.hub-slider__range--dual .hub-slider__track--upper::-moz-range-track{background:transparent}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], formTextType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formTextType", required: false }] }], classlist: [{ type: i0.Input, args: [{ isSignal: true, alias: "classlist", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * Resolves a user-supplied accent value to a paintable CSS colour for a `--hub-*-accent` slot.
+ *
+ * A bareword (a built-in semantic name such as `primary` / `success`, or any registered accent /
+ * named CSS colour) becomes a `--hub-sys-color-*` design-system token with the word itself as the
+ * raw fallback, so named CSS colours keep working when no token is registered. A literal colour
+ * (`#ff0000`, `rgb(...)`, `oklch(...)`, `var(...)`) is passed through unchanged. Empty / whitespace
+ * input resolves to `null` so the caller can keep its neutral default.
+ *
+ * @param value - The raw accent value (e.g. from a `color` input).
+ * @returns The resolved CSS colour, or `null` when no accent is provided.
+ */
+function resolveHubAccent(value) {
+    const color = value?.trim();
+    if (!color)
+        return null;
+    return /^[a-zA-Z][\w-]*$/.test(color) ? `var(--hub-sys-color-${color}, ${color})` : color;
+}
+
 /**
  * Segmented button bar (`hub-segmented`): a compact group of 2..n options rendered as an inline
  * (or vertical) segmented control. A full `ng-hub-ui-forms` field — it extends
@@ -1848,15 +1867,22 @@ class HubSegmentedComponent extends HubFieldControl {
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /**
-     * Semantic accent for the selected pill. Drives `data-variant` on the bar, which re-bases the
-     * `--hub-segmented-selected-*` tokens. Built-in values map to the design-system palette
-     * (`primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`), but the set is
-     * OPEN — any custom string works as long as the consumer supplies the matching
-     * `--hub-segmented-selected-bg` / `--hub-segmented-selected-color` (or `--hub-segmented-accent`)
-     * for that `data-variant`. Empty string (default) keeps the neutral white-pill look.
+     * Accent for the selected pill. Accepts ANY colour value:
+     * - a built-in semantic name (`primary`, `success`, …) or any registered accent → resolves to
+     *   the matching `--hub-sys-color-*` design-system token;
+     * - a literal colour (`#ff0000`, `rgb(...)`, `oklch(...)`, `rebeccapurple`) → used as-is.
+     * Both the sliding indicator and the multiple-mode pill follow it, and the selected label gets a
+     * derived contrast colour automatically. Empty string (default) keeps the neutral white-pill look.
      */
     color = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolves {@link color} to a paintable accent for the `--hub-segmented-accent` slot: a bareword
+     * becomes a `--hub-sys-color-*` token with the word as raw fallback (so named CSS colours work
+     * too), while a literal `#hex` / `rgb()` / `oklch()` / `var()` is passed through unchanged.
+     */
+    accentVar = computed(() => resolveHubAccent(this.color()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accentVar" }] : /* istanbul ignore next */ []));
     /** Label text. */
     label = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -2051,13 +2077,13 @@ class HubSegmentedComponent extends HubFieldControl {
         return Object.is(a, b);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant=primary]){--hub-segmented-selected-bg: var(--hub-sys-color-primary);--hub-segmented-selected-color: var(--hub-sys-color-primary-on, #fff)}:where(.hub-segmented[data-variant=secondary]){--hub-segmented-selected-bg: var(--hub-sys-color-secondary);--hub-segmented-selected-color: var(--hub-sys-color-secondary-on, #fff)}:where(.hub-segmented[data-variant=success]){--hub-segmented-selected-bg: var(--hub-sys-color-success);--hub-segmented-selected-color: var(--hub-sys-color-success-on, #fff)}:where(.hub-segmented[data-variant=danger]){--hub-segmented-selected-bg: var(--hub-sys-color-danger);--hub-segmented-selected-color: var(--hub-sys-color-danger-on, #fff)}:where(.hub-segmented[data-variant=warning]){--hub-segmented-selected-bg: var(--hub-sys-color-warning);--hub-segmented-selected-color: var(--hub-sys-color-warning-on, #fff)}:where(.hub-segmented[data-variant=info]){--hub-segmented-selected-bg: var(--hub-sys-color-info);--hub-segmented-selected-color: var(--hub-sys-color-info-on, #fff)}:where(.hub-segmented[data-variant=neutral]){--hub-segmented-selected-bg: var(--hub-sys-color-neutral);--hub-segmented-selected-color: var(--hub-sys-color-neutral-on, #fff)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: HubSegmentedComponent, isStandalone: true, selector: "hub-segmented", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelType: { classPropertyName: "labelType", publicName: "labelType", isSignal: true, isRequired: false, transformFunction: null }, formText: { classPropertyName: "formText", publicName: "formText", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.hub-segmented-host": "true" } }, viewQueries: [{ propertyName: "_buttons", predicate: ["optionButton"], descendants: true, isSignal: true }, { propertyName: "_bar", first: true, predicate: ["segmentedBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: HubSegmentedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'hub-segmented', standalone: true, imports: [NgTemplateOutlet, KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class.hub-segmented-host]': 'true'
-                    }, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant=primary]){--hub-segmented-selected-bg: var(--hub-sys-color-primary);--hub-segmented-selected-color: var(--hub-sys-color-primary-on, #fff)}:where(.hub-segmented[data-variant=secondary]){--hub-segmented-selected-bg: var(--hub-sys-color-secondary);--hub-segmented-selected-color: var(--hub-sys-color-secondary-on, #fff)}:where(.hub-segmented[data-variant=success]){--hub-segmented-selected-bg: var(--hub-sys-color-success);--hub-segmented-selected-color: var(--hub-sys-color-success-on, #fff)}:where(.hub-segmented[data-variant=danger]){--hub-segmented-selected-bg: var(--hub-sys-color-danger);--hub-segmented-selected-color: var(--hub-sys-color-danger-on, #fff)}:where(.hub-segmented[data-variant=warning]){--hub-segmented-selected-bg: var(--hub-sys-color-warning);--hub-segmented-selected-color: var(--hub-sys-color-warning-on, #fff)}:where(.hub-segmented[data-variant=info]){--hub-segmented-selected-bg: var(--hub-sys-color-info);--hub-segmented-selected-color: var(--hub-sys-color-info-on, #fff)}:where(.hub-segmented[data-variant=neutral]){--hub-segmented-selected-bg: var(--hub-sys-color-neutral);--hub-segmented-selected-color: var(--hub-sys-color-neutral-on, #fff)}\n"] }]
+                    }, template: "<div\n\tclass=\"hub-field hub-segmented-field\"\n\t[class.hub-field--horizontal]=\"label() && labelType() === _labelTypes.Horizontal\"\n\t[class.hub-field--disabled]=\"disabled()\"\n\t[class.hub-field--invalid]=\"isInvalid\"\n\t[class.hub-field--valid]=\"showsValid\"\n>\n\t@if (label() || required()) {\n\t\t<label [for]=\"id\" class=\"hub-field__label\">\n\t\t\t{{ label() }}\n\t\t\t@if (required()) {\n\t\t\t\t<span class=\"hub-field__required\" aria-hidden=\"true\">*</span>\n\t\t\t}\n\t\t</label>\n\t}\n\n\t<div class=\"hub-field__body\">\n\t\t<div\n\t\t\t#segmentedBar\n\t\t\t[id]=\"id\"\n\t\t\tclass=\"hub-segmented\"\n\t\t\t[class.hub-segmented--sm]=\"size() === 'sm'\"\n\t\t\t[class.hub-segmented--lg]=\"size() === 'lg'\"\n\t\t\t[class.hub-segmented--vertical]=\"vertical()\"\n\t\t\t[class.hub-segmented--multiple]=\"multiple()\"\n\t\t\t[class.hub-segmented--disabled]=\"disabled()\"\n\t\t\t[attr.data-variant]=\"color() || null\"\n\t\t\t[style.--hub-segmented-accent]=\"accentVar()\"\n\t\t\t[attr.role]=\"multiple() ? 'group' : 'radiogroup'\"\n\t\t\t[attr.aria-disabled]=\"disabled() ? 'true' : null\"\n\t\t\t(keydown)=\"onKeydown($event)\"\n\t\t>\n\t\t\t@if (!multiple()) {\n\t\t\t\t<span class=\"hub-segmented__indicator\" aria-hidden=\"true\"></span>\n\t\t\t}\n\n\t\t\t@for (option of options(); track option.value; let index = $index) {\n\t\t\t\t<button\n\t\t\t\t\t#optionButton\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"hub-segmented__option\"\n\t\t\t\t\t[class.hub-segmented__option--selected]=\"isSelected(option)\"\n\t\t\t\t\t[attr.role]=\"multiple() ? null : 'radio'\"\n\t\t\t\t\t[attr.aria-checked]=\"multiple() ? null : isSelected(option)\"\n\t\t\t\t\t[attr.aria-pressed]=\"multiple() ? isSelected(option) : null\"\n\t\t\t\t\t[disabled]=\"disabled() || !!option.disabled\"\n\t\t\t\t\t[tabindex]=\"rovingIndex() === index ? 0 : -1\"\n\t\t\t\t\t(click)=\"select(option)\"\n\t\t\t\t>\n\t\t\t\t\t{{ option.label }}\n\t\t\t\t</button>\n\t\t\t}\n\t\t</div>\n\t</div>\n\n\t@if (formText() || formTextTmp()) {\n\t\t<div class=\"hub-field__form-text\" [class.hub-field__form-text--disabled]=\"disabled()\">\n\t\t\t@if (formTextTmp()) {\n\t\t\t\t<ng-container [ngTemplateOutlet]=\"formTextTmp()!\"></ng-container>\n\t\t\t} @else {\n\t\t\t\t{{ formText() }}\n\t\t\t}\n\t\t</div>\n\t}\n\n\t@if (isInvalid) {\n\t\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t\t<ul>\n\t\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t\t></ng-container>\n\t\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t</div>\n\t}\n\n\t@if (showsValid && validFeedback()) {\n\t\t<div class=\"hub-field__feedback hub-field__feedback--valid\" role=\"status\">\n\t\t\t<span class=\"hub-field__feedback-text\">{{ validFeedback() }}</span>\n\t\t</div>\n\t}\n</div>\n", styles: ["hub-segmented{display:block}hub-segmented.hidden-control{display:none!important}.hub-segmented{position:relative;display:inline-flex;gap:var(--hub-segmented-gap);padding:var(--hub-segmented-gap);background:var(--hub-segmented-bg);border-radius:var(--hub-segmented-radius)}.hub-segmented__indicator{position:absolute;z-index:0;left:var(--hub-segmented-indicator-x, 0);top:var(--hub-segmented-indicator-y, 0);width:var(--hub-segmented-indicator-width, 0);height:var(--hub-segmented-indicator-height, 0);background:var(--hub-segmented-selected-bg);border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075));pointer-events:none;transition:left var(--hub-segmented-indicator-transition),top var(--hub-segmented-indicator-transition),width var(--hub-segmented-indicator-transition),height var(--hub-segmented-indicator-transition)}@media(prefers-reduced-motion:reduce){.hub-segmented .hub-segmented__indicator{transition:none}}.hub-segmented--disabled{opacity:var(--hub-form-disabled-opacity);cursor:not-allowed}.hub-segmented--vertical{flex-direction:column}.hub-segmented--vertical .hub-segmented__option{width:100%}.hub-segmented--multiple .hub-segmented__option--selected{background:var(--hub-segmented-selected-bg);box-shadow:var(--hub-sys-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075))}.hub-segmented__option{appearance:none;border:0;margin:0;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;padding:var(--hub-segmented-padding-y) var(--hub-segmented-padding-x);color:var(--hub-sys-text-muted, #6c757d);background:transparent;font:inherit;line-height:1.2;white-space:nowrap;border-radius:calc(var(--hub-segmented-radius) - var(--hub-segmented-gap));cursor:pointer;transition:var(--hub-form-transition),color .15s ease-in-out,background-color .15s ease-in-out}.hub-segmented__option:focus-visible{outline:0;box-shadow:0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color)}.hub-segmented__option--selected{color:var(--hub-segmented-selected-color)}.hub-segmented__option:disabled{cursor:not-allowed;opacity:var(--hub-form-disabled-opacity)}.hub-segmented--sm .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * .5) calc(var(--hub-segmented-padding-x) * .65);font-size:var(--hub-ref-font-size-sm, .875rem)}.hub-segmented--lg .hub-segmented__option{padding:calc(var(--hub-segmented-padding-y) * 1.35) calc(var(--hub-segmented-padding-x) * 1.35);font-size:var(--hub-ref-font-size-lg, 1.125rem)}:where(.hub-segmented[data-variant]){--hub-segmented-selected-bg: var(--hub-segmented-accent);--hub-segmented-selected-color: oklch(from var(--hub-segmented-accent) clamp(0, (.62 - l) * 1000, 1) 0 h)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelType: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelType", required: false }] }], formText: [{ type: i0.Input, args: [{ isSignal: true, alias: "formText", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], _buttons: [{ type: i0.ViewChildren, args: ['optionButton', { isSignal: true }] }], _bar: [{ type: i0.ViewChild, args: ['segmentedBar', { isSignal: true }] }] } });
 
 /**
@@ -2158,12 +2184,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
             type: Component,
             args: [{ selector: 'form[hubForm]', imports: [NgTemplateOutlet, KeyValuePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class.hub-form-host]': 'true',
-                        '[class.hub-form--invalid]': 'isInvalid'
+                        '[class.hub-form--invalid]': 'isInvalid',
+                        '(submit)': 'handleSubmit($event)'
                     }, template: "<ng-content></ng-content>\n\n@if (isInvalid) {\n\t<div class=\"hub-field__feedback\" role=\"alert\">\n\t\t<ul>\n\t\t\t@for (error of errors | keyvalue; track error.key) {\n\t\t\t\t<li>\n\t\t\t\t\t<ng-container\n\t\t\t\t\t\t[ngTemplateOutlet]=\"_errorTemplates[error.key] ?? defaultErrorTpt\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: error.value, value: error.value }\"\n\t\t\t\t\t></ng-container>\n\t\t\t\t\t<ng-template #defaultErrorTpt>\n\t\t\t\t\t\t<span class=\"hub-field__feedback-text\" [innerHTML]=\"getInvalidFeedbackTemplate(error.key, error.value)\"></span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</li>\n\t\t\t}\n\t\t</ul>\n\t</div>\n}\n" }]
-        }], propDecorators: { handleSubmit: [{
-                type: HostListener,
-                args: ['submit', ['$event']]
-            }] } });
+        }] });
 
 /**
  * Presentational legend for a `<hub-fieldset>` (or any grouped section), with optional