@ardium-ui/ui 5.0.0-alpha.69 → 5.0.0-alpha.70

package/fesm2022/ardium-ui-ui.mjs

@@ -479,9 +479,14 @@ const SimpleOneAxisAlignment = {
 };
 const OneAxisAlignment = {
     Left: 'left',
-    Middle: 'middle',
+    Center: 'center',
     Right: 'right',
 };
+const OneAxisAlignmentOrientational = {
+    Start: 'start',
+    Center: 'center',
+    End: 'end',
+};
 
 class RegExpTransformer {
     constructor(regex, replace = '', caretModif = 0) {
@@ -1218,7 +1223,7 @@ class ArdiumDropdownPanelComponent {
         return this._scrollTop + (this._scrollEl()?.getBoundingClientRect().height ?? 0);
     }
     //! scroll to element methods
-    _scrollToElement(el, alignTo = 'middle') {
+    _scrollToElement(el, alignTo = 'center') {
         const scrollEl = this._scrollEl();
         if (!scrollEl)
             return;
@@ -1231,7 +1236,7 @@ class ArdiumDropdownPanelComponent {
             case 'bottom':
                 this._scrollTop += elementRect.bottom - parentContentRect.bottom;
                 break;
-            case 'middle':
+            case 'center':
                 this._scrollTop += (elementRect.top + elementRect.bottom) / 2 - parentContentRect.top - parentContentRect.height / 2;
                 break;
         }
@@ -4505,7 +4510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     args: [ARD_CHIP_DEFAULTS]
                 }] }] });
 
-const _booleanComponentDefaults = _ngModelComponentDefaults;
+const _booleanComponentDefaults = { ..._ngModelComponentDefaults, reverseSelected: false };
 /**
  * Common code for components, which only operate on the "selected" state.
  */
@@ -4532,6 +4537,14 @@ class _BooleanComponentBase extends _NgModelComponentBase {
          * The event emitter responsible for firing `selectedChange` events. Fired when the `selected` state is changed.
          */
         this.selectedChange = output();
+        /**
+         * The reverse of the `selected` state. Coercible into a boolean. Useful for cases where the "selected" state is semantically reversed, e.g. "disabled".
+         */
+        this.reverseSelected = input(false, { transform: v => coerceBooleanProperty(v) });
+        /**
+         * The "selected" state, accounting for the `reverseSelected` input.
+         */
+        this.selectedAccountingForReverse = computed(() => (this.reverseSelected() ? !this.selected() : this.selected()));
     }
     //! control value accessor
     writeValue(v) {
@@ -4557,7 +4570,7 @@ class _BooleanComponentBase extends _NgModelComponentBase {
         this.selected.set(coerceBooleanProperty(v));
     }
     get _selectedHostAttribute() {
-        return this.selected();
+        return this.selectedAccountingForReverse();
     }
     /**
      * Toggles the selected state. Emits all appropriate events.
@@ -4581,7 +4594,7 @@ class _BooleanComponentBase extends _NgModelComponentBase {
         this._emitChange();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _BooleanComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: _BooleanComponentBase, isStandalone: true, inputs: { _selected: ["selected", "_selected"] }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: _BooleanComponentBase, isStandalone: true, inputs: { _selected: { classPropertyName: "_selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, reverseSelected: { classPropertyName: "reverseSelected", publicName: "reverseSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectEvent: "select", unselectEvent: "unselect", changeEvent: "change", selectedChange: "selectedChange" }, host: { properties: { "attr.selected": "this._selectedHostAttribute", "class.ard-selected": "this._selectedHostAttribute" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: _BooleanComponentBase, decorators: [{
             type: Directive
@@ -4614,6 +4627,8 @@ function provideSelectableChipDefaults(config) {
 class ArdiumSelectableChipComponent extends _BooleanComponentBase {
     constructor(defaults) {
         super(defaults);
+        this._componentId = '111';
+        this._componentName = 'selectable-chip';
         this.chipTitle = input(this._DEFAULTS.chipTitle);
         this.hideSelectionIcon = input(this._DEFAULTS.hideSelectionIcon, {
             transform: v => coerceBooleanProperty(v),
@@ -4641,7 +4656,7 @@ class ArdiumSelectableChipComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumSelectableChipComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"ard-chip-wrapper ard-chip-selectable\"\r\n  [class.ard-chip-selected]=\"selected()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [title]=\"chipTitle()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-chip-selection-icon\"\r\n    role=\"img\"\r\n  ></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  class=\"ard-chip-wrapper ard-chip-selectable\"\r\n  [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [title]=\"chipTitle()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-chip-selection-icon\"\r\n    role=\"img\"\r\n  ></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSelectableChipComponent, decorators: [{
             type: Component,
@@ -4651,7 +4666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumSelectableChipComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  type=\"button\"\r\n  class=\"ard-chip-wrapper ard-chip-selectable\"\r\n  [class.ard-chip-selected]=\"selected()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [title]=\"chipTitle()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-chip-selection-icon\"\r\n    role=\"img\"\r\n  ></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"] }]
+                    ], template: "<button\r\n  type=\"button\"\r\n  class=\"ard-chip-wrapper ard-chip-selectable\"\r\n  [class.ard-chip-selected]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [title]=\"chipTitle()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  <div\r\n    class=\"ard-chip-selection-icon\"\r\n    role=\"img\"\r\n  ></div>\r\n  <div class=\"ard-chip-content-wrapper\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</button>\r\n", styles: [".ard-chip-wrapper{display:flex;width:max-content}.ard-chip-left{flex-direction:row}.ard-chip-right{flex-direction:row-reverse}.ard-chip-selectable .ard-chip-selection-icon{display:none}.ard-chip-selectable.ard-chip-selected .ard-chip-selection-icon{display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SELECTABLE_CHIP_DEFAULTS]
@@ -9915,7 +9930,7 @@ const _numberInputDefaults = {
     variant: FormElementVariant.Rounded,
     compact: false,
     placeholder: '',
-    alignText: OneAxisAlignment.Middle,
+    alignText: OneAxisAlignment.Center,
     inputAttrs: {},
     min: 0,
     max: Infinity,
@@ -10231,7 +10246,7 @@ class ArdiumNumberInputComponent extends _FormFieldComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumNumberInputComponent,
             },
-        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template\r\n          #defaultPlaceholderTemplate\r\n          let-plchldr\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        inputmode=\"numeric\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n    @if (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button increment\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canIncrement()\"\r\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-middle input{text-align:center}.ard-text-align-middle .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "placeholderTemplate", first: true, predicate: ArdNumberInputPlaceholderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: ArdNumberInputPrefixTemplateDirective, descendants: true, isSignal: true }, { propertyName: "suffixTemplate", first: true, predicate: ArdNumberInputSuffixTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template\r\n          #defaultPlaceholderTemplate\r\n          let-plchldr\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        inputmode=\"numeric\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n    @if (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button increment\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canIncrement()\"\r\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.ArdiumHoldDirective, selector: "[ardHold]", inputs: ["ardHoldDisabled", "ardHoldDelay", "ardHoldRepeat", "ardAllowSpaceKey", "ardAllowEnterKey"], outputs: ["ardHold"] }, { kind: "component", type: ArdiumButtonComponent, selector: "ard-button", inputs: ["variant", "vertical"], outputs: ["focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumNumberInputComponent, decorators: [{
             type: Component,
@@ -10245,7 +10260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumNumberInputComponent,
                         },
-                    ], template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template\r\n          #defaultPlaceholderTemplate\r\n          let-plchldr\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        inputmode=\"numeric\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n    @if (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button increment\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canIncrement()\"\r\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-middle input{text-align:center}.ard-text-align-middle .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
+                    ], template: "<div\r\n  class=\"ard-number-input\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-has-error]=\"hasError()\"\r\n  [class.ard-is-success]=\"isSuccess()\"\r\n  [class.ard-has-value]=\"value\"\r\n  (mousedown)=\"$event.preventDefault()\"\r\n  (mouseup)=\"onMouseup()\"\r\n>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button decrement\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canDecrement()\"\r\n      [tabIndex]=\"!canDecrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canDecrement() && onQuickChangeButtonClick(-1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canDecrement() && onQuickChangeButtonClick(-1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      -\r\n    </ard-button>\r\n  }\r\n  <div class=\"ard-number-input-wrapper\">\r\n    @if (prefixTemplate()) {\r\n      <div class=\"ard-number-input-prefix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"prefixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n    <div class=\"ard-input-container\">\r\n      @if (shouldDisplayPlaceholder()) {\r\n        <ng-template\r\n          #defaultPlaceholderTemplate\r\n          let-plchldr\r\n        >\r\n          <div class=\"ard-placeholder\">{{ placeholder() }}</div>\r\n        </ng-template>\r\n\r\n        <ng-template [ngTemplateOutlet]=\"placeholderTemplate()?.template || defaultPlaceholderTemplate\"></ng-template>\r\n      }\r\n\r\n      <input\r\n        #textInput\r\n        #focusableElement\r\n        type=\"text\"\r\n        inputmode=\"numeric\"\r\n        [attr.id]=\"inputId()\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        [readonly]=\"readonly()\"\r\n        [disabled]=\"disabled()\"\r\n        (input)=\"onInput(textInput.value)\"\r\n        (focus)=\"onFocusMaster($event)\"\r\n        (blur)=\"onBlurMaster($event)\"\r\n        (change)=\"onChange($event)\"\r\n        (mousedown)=\"$event.stopPropagation()\"\r\n        (mouseup)=\"$event.stopPropagation()\"\r\n        (copy)=\"onCopy($event)\"\r\n      />\r\n    </div>\r\n    @if (suffixTemplate()) {\r\n      <div class=\"ard-number-input-suffix-container\">\r\n        <ng-template [ngTemplateOutlet]=\"suffixTemplate()?.template ?? null\"></ng-template>\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (!noButtons()) {\r\n    <ard-button\r\n      class=\"ard-quick-change-button increment\"\r\n      [variant]=\"buttonVariant()\"\r\n      [appearance]=\"buttonAppearance()\"\r\n      color=\"none\"\r\n      [disabled]=\"!canIncrement()\"\r\n      [tabIndex]=\"!canIncrement() ? -1 : tabIndex()\"\r\n      pointerEventsWhenDisabled\r\n      (click)=\"canIncrement() && onQuickChangeButtonClick(1, $event)\"\r\n      (mouseup)=\"onQuickChangeButtonMouseup($event)\"\r\n      (ardHold)=\"canIncrement() && onQuickChangeButtonClick(1)\"\r\n      ardHoldSpaceKey\r\n    >\r\n      +\r\n    </ard-button>\r\n  }\r\n</div>\r\n", styles: [".ard-number-input{display:flex;max-width:100%}.ard-number-input .ard-placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;pointer-events:none}.ard-text-align-left input{text-align:left}.ard-text-align-left .ard-placeholder{justify-content:flex-start}.ard-text-align-center input{text-align:center}.ard-text-align-center .ard-placeholder{justify-content:center}.ard-text-align-right input{text-align:right}.ard-text-align-right .ard-placeholder{justify-content:flex-end}.ard-quick-change-button{-webkit-user-select:none;user-select:none;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_NUMBER_INPUT_DEFAULTS]
@@ -10389,45 +10404,58 @@ const CheckboxState = {
 class ArdiumCheckboxComponent extends _BooleanComponentBase {
     constructor(defaults) {
         super(defaults);
+        this._componentId = '100';
+        this._componentName = 'checkbox';
         //! appearance
         this.color = input(this._DEFAULTS.color);
         this.unselectedColor = input(this._DEFAULTS.unselectedColor);
-        this.ngClasses = computed(() => [`ard-color-${this.color()}`, `ard-unselected-color-${this.unselectedColor()}`, `ard-checkbox-${this.state()}`].join(' '));
-        this.state = model(CheckboxState.Unselected);
+        this.ngClasses = computed(() => [`ard-color-${this.color()}`, `ard-unselected-color-${this.unselectedColor()}`, `ard-checkbox-${this.internalState()}`].join(' '));
+        this.internalState = model(CheckboxState.Unselected, { alias: 'state' });
+        this.state = computed(() => {
+            if (!this.reverseSelected())
+                return this.internalState();
+            if (this.internalState() === CheckboxState.Unselected)
+                return CheckboxState.Selected;
+            if (this.internalState() === CheckboxState.Selected)
+                return CheckboxState.Unselected;
+            return this.internalState();
+        });
         this.State = CheckboxState;
         //! templates
         this.templateRepository = contentChild(_CheckboxTemplateRepositoryDirective);
         this.checkboxTemplate = contentChild(ArdCheckboxTemplateDirective);
         this.checkboxTemplateContext = computed(() => ({
-            $implicit: this.selected(),
-            selected: this.selected(),
+            $implicit: this.selectedAccountingForReverse(),
+            selected: this.selectedAccountingForReverse(),
+            internalSelected: this.selected(),
             state: this.state(),
+            internalState: this.internalState(),
         }));
     }
     //override the "selected" setter, so it changes the state too.
     set _selected(v) {
         const selected = coerceBooleanProperty(v);
         this.selected.set(selected);
-        this.state.set(selected ? CheckboxState.Selected : CheckboxState.Unselected);
+        this.internalState.set(selected ? CheckboxState.Selected : CheckboxState.Unselected);
     }
     //! click action
     toggleState() {
         let newState = CheckboxState.Unselected;
-        if (this.state() === CheckboxState.Unselected) {
+        if (this.internalState() === CheckboxState.Unselected) {
             newState = CheckboxState.Selected;
         }
-        this.state.set(newState);
-        this.selected.set(this.state() === CheckboxState.Selected);
+        this.internalState.set(newState);
+        this.selected.set(this.internalState() === CheckboxState.Selected);
         this._emitChange();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, deps: [{ token: ARD_CHECKBOX_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumCheckboxComponent, isStandalone: false, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: ArdiumCheckboxComponent, isStandalone: false, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, internalState: { classPropertyName: "internalState", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { internalState: "stateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ArdiumCheckboxComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"selected\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
             type: Component,
@@ -10437,7 +10465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumCheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selected()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"selected\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
+                    ], template: "<button\r\n  class=\"ard-checkbox\"\r\n  role=\"checkbox\"\r\n  type=\"button\"\r\n  [id]=\"htmlId()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  (click)=\"toggleState()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n\r\n  <ng-template\r\n    #defaultCheckboxTemplate\r\n    let-state=\"state\"\r\n    let-selected=\"selected\"\r\n  >\r\n    <ard-icon\r\n      [icon]=\"\r\n        state === State.Selected\r\n          ? 'check_box'\r\n          : state === State.Unselected\r\n          ? 'check_box_outline_blank'\r\n          : 'indeterminate_check_box'\r\n      \"\r\n      [filled]=\"state !== State.Indeterminate\"\r\n    />\r\n  </ng-template>\r\n\r\n  <ng-template\r\n    [ngTemplateOutlet]=\"templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\"\r\n    [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n  />\r\n</button>\r\n", styles: ["ard-checkbox{display:inline}.ard-checkbox{font-size:inherit}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_CHECKBOX_DEFAULTS]
@@ -11456,7 +11484,7 @@ const _segmentDefaults = {
     appearance: SegmentAppearance.Outlined,
     variant: SegmentVariant.RoundedConnected,
     color: ComponentColor.Primary,
-    align: OneAxisAlignment.Middle,
+    align: OneAxisAlignment.Center,
     iconBased: false,
     compact: false,
     autoFocus: false,
@@ -11580,7 +11608,7 @@ class ArdiumSegmentComponent extends _SelectableListComponentBase {
                 provide: ARD_FORM_FIELD_CONTROL,
                 useExisting: ArdiumSegmentComponent,
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ArdSegmentOptionTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-center .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSegmentComponent, decorators: [{
             type: Component,
@@ -11594,7 +11622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: ARD_FORM_FIELD_CONTROL,
                             useExisting: ArdiumSegmentComponent,
                         },
-                    ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-middle .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
+                    ], template: "<div\r\n  #focusableElement\r\n  class=\"ard-segment-container\"\r\n  [class.ard-disabled]=\"disabled()\"\r\n  [ariaDisabled]=\"disabled()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [class.ard-focus-visible]=\"isFocused() && !isMouseBeingUsed\"\r\n  [class.ard-using-keyboard]=\"!isMouseBeingUsed()\"\r\n  [attr.tabindex]=\"tabIndex()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  @for (row of itemRows(); track $index) {\r\n  <div\r\n    class=\"ard-segment-row\"\r\n    [class.ard-segment-row-partial]=\"row.isNotFull\"\r\n    [class.ard-segment-row-uniform]=\"uniformWidths() || itemsPerRow() < items.length\"\r\n    [style]=\"{ '--ard-_segment-row-items': itemsInActualRow }\"\r\n  >\r\n    @for (option of row.options; track $index) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"ard-segment-option\"\r\n      tabindex=\"-1\"\r\n      [class.ard-option-disabled]=\"option.disabled || (isItemLimitReached() && !option.selected)\"\r\n      [class.ard-option-selected]=\"option.selected\"\r\n      [class.ard-option-highlighted]=\"option.highlighted\"\r\n      [ariaSelected]=\"option.selected\"\r\n      (mouseenter)=\"onItemMouseEnter(option, $event)\"\r\n      (mouseleave)=\"onItemMouseLeave(option, $event)\"\r\n      (click)=\"onItemClick(option, $event)\"\r\n    >\r\n      <div class=\"ard-focus-overlay\"></div>\r\n      <div class=\"ard-button-content\">\r\n        <span class=\"ard-option-label\">\r\n          <ng-template #defaultOptionTemplate>\r\n            {{ option.label }}\r\n          </ng-template>\r\n\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"optionTemplate()?.template || defaultOptionTemplate\"\r\n            [ngTemplateOutletContext]=\"optionContextGenerator()(option)\"\r\n          />\r\n        </span>\r\n      </div>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".ard-segment-container{display:flex;flex-direction:column}.ard-segment-container.ard-align-left .ard-segment-option{justify-content:left}.ard-segment-container.ard-align-center .ard-segment-option{justify-content:center}.ard-segment-container.ard-align-right .ard-segment-option{justify-content:right}.ard-segment-row{width:100%;display:flex;align-items:center}.ard-segment-row.ard-segment-row-uniform{display:grid;grid-template-columns:repeat(var(--ard-_segment-row-items),1fr)}.ard-segment-option{-webkit-user-select:none;user-select:none}.ard-option-disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SEGMENT_DEFAULTS]
@@ -11639,6 +11667,8 @@ function provideSlideToggleDefaults(config) {
 class ArdiumSlideToggleComponent extends _BooleanComponentBase {
     constructor(defaults) {
         super(defaults);
+        this._componentId = '101';
+        this._componentName = 'slide-toggle';
         this.wrapperClass = input(undefined);
         //! appearance
         this.color = input(this._DEFAULTS.color);
@@ -11657,7 +11687,7 @@ class ArdiumSlideToggleComponent extends _BooleanComponentBase {
                 useExisting: forwardRef(() => ArdiumSlideToggleComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  role=\"checkbox\"\r\n  [ariaChecked]=\"selected()\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selected()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-slide-toggle-track\">\r\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n  </div>\r\n  <div class=\"ard-slide-toggle-handle\">\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    @if (selectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n    }\r\n    @if (unselectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n    }\r\n  </div>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  type=\"button\"\r\n  role=\"checkbox\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-slide-toggle-track\">\r\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n  </div>\r\n  <div class=\"ard-slide-toggle-handle\">\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    @if (selectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n    }\r\n    @if (unselectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n    }\r\n  </div>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumSlideToggleComponent, decorators: [{
             type: Component,
@@ -11667,7 +11697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             useExisting: forwardRef(() => ArdiumSlideToggleComponent),
                             multi: true,
                         },
-                    ], template: "<button\r\n  type=\"button\"\r\n  role=\"checkbox\"\r\n  [ariaChecked]=\"selected()\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selected()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-slide-toggle-track\">\r\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n  </div>\r\n  <div class=\"ard-slide-toggle-handle\">\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    @if (selectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n    }\r\n    @if (unselectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n    }\r\n  </div>\r\n</button>\r\n" }]
+                    ], template: "<button\r\n  type=\"button\"\r\n  role=\"checkbox\"\r\n  class=\"ard-slide-toggle\"\r\n  [class.ard-slide-toggle-selected]=\"selectedAccountingForReverse()\"\r\n  [ariaChecked]=\"selectedAccountingForReverse()\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"toggleSelected()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-slide-toggle-track\">\r\n    <div class=\"ard-slide-toggle-track-overlay\"></div>\r\n  </div>\r\n  <div class=\"ard-slide-toggle-handle\">\r\n    <div class=\"ard-focus-overlay\"></div>\r\n    @if (selectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-selected\">{{ selectedIcon() ?? icon() }}</div>\r\n    }\r\n    @if (unselectedIcon() ?? icon()) {\r\n      <div class=\"ard-slide-toggle-icon ard-icon-for-unselected\">{{ unselectedIcon() ?? icon() }}</div>\r\n    }\r\n  </div>\r\n</button>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [ARD_SLIDE_TOGGLE_DEFAULTS]
@@ -12480,17 +12510,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class ArdiumStarButtonComponent extends _BooleanComponentBase {
     constructor(defaults) {
         super(defaults);
+        this._componentId = '107';
+        this._componentName = 'start-button';
         this.wrapperClasses = input('');
         this.clickStrategy = input(this._DEFAULTS.clickStrategy);
         //! appearance
         this.color = input(this._DEFAULTS.color);
         this.ngClasses = computed(() => [this.wrapperClasses(), `ard-color-${this.color}`].join(' '));
-        this.starFillState = computed(() => (this.selected() ? StarFillMode.Filled : StarFillMode.None));
+        this.starFillState = computed(() => this.selectedAccountingForReverse() ? StarFillMode.Filled : StarFillMode.None);
+        this.starFillInternal = computed(() => (this.selected() ? StarFillMode.Filled : StarFillMode.None));
         //! template
         this.starTemplate = contentChild(ArdStarButtonStarTemplateDirective);
         this.starTemplateContext = computed(() => ({
             $implicit: this.starFillState(),
             fillMode: this.starFillState(),
+            fillModeInternal: this.starFillInternal(),
             color: this.color(),
         }));
     }
@@ -12744,143 +12778,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
-const _stateboxDefaults = {
-    ..._ngModelComponentDefaults,
-    clickStrategy: ClickStrategy.Default,
-    states: [
-        { value: false, color: 'none' },
-        { value: true, color: 'secondary', icon: 'check_box', filled: true },
-    ],
-};
-const ARD_STATEBOX_DEFAULTS = new InjectionToken('ard-statebox-defaults', {
-    factory: () => ({
-        ..._stateboxDefaults,
-    }),
-});
-function provideStateboxDefaults(config) {
-    return { provide: ARD_STATEBOX_DEFAULTS, useValue: { ..._stateboxDefaults, ...config } };
-}
-
-class ArdiumStateboxComponent extends _NgModelComponentBase {
-    constructor(defaults) {
-        super(defaults);
-        this.states = input(this._DEFAULTS.states);
-        this._states = computed(() => this.states().map(this._stateMapFn));
-        this._defaultState = computed(() => this._states()[0]);
-        this.clickStrategy = input(this._DEFAULTS.clickStrategy);
-        this.wrapperClasses = input('');
-        //! appearance
-        this.ngClasses = computed(() => [
-            this.wrapperClasses(),
-            this.internalState().useCustomColor ? 'ard-color-custom' : `ard-color-${this.internalState().color}`,
-            this.internalState().filled ? 'ard-statebox-filled' : '',
-            this.internalState().keepFrame ? 'ard-statebox-keep-frame' : '',
-        ].join(' '));
-        //! state handlers
-        this.state = model(this._defaultState().value);
-        this._stateIndex = computed(() => {
-            const v = this.state();
-            const foundStateIndex = this._states().findIndex(state => state.value === v);
-            return foundStateIndex === -1 ? 0 : foundStateIndex;
-        });
-        this.internalState = computed(() => this._states()[this._stateIndex()]);
-        this.ngStyle = computed(() => {
-            let customColor = null;
-            const state = this.internalState();
-            if (state.useCustomColor) {
-                customColor = state.color;
-            }
-            return {
-                '--ard-custom-color': customColor,
-                '--ard-on-custom-color': state.colorOnCustom ?? '#fff',
-            };
-        });
-        effect(() => {
-            this.state(); // let the effect know when to fire
-            this._emitChange();
-        });
-    }
-    writeValue(v) {
-        this.state.set(v);
-    }
-    //! change handlers
-    _stateMapFn(state) {
-        let display;
-        let displayAsIcon = false;
-        let keepFrame = true;
-        if (state.icon) {
-            display = state.icon;
-            displayAsIcon = true;
-            keepFrame = false;
-        }
-        else if (state.character) {
-            display = state.character.substring(0, 1);
-        }
-        else {
-            display = '';
-        }
-        return {
-            value: state.value,
-            display,
-            displayAsIcon,
-            color: state.color ?? state.customColor ?? 'none',
-            useCustomColor: state.color ? false : true,
-            colorOnCustom: state.colorOnCustom,
-            filled: state.filled ?? false,
-            keepFrame: state.keepFrame ?? keepFrame,
-        };
-    }
-    //! event handlers
-    onClick() {
-        if (this.clickStrategy() === ClickStrategy.Noop) {
-            return;
-        }
-        let newIndex = this._stateIndex() + 1;
-        if (newIndex >= this._states().length) {
-            newIndex = 0;
-        }
-        this.state.set(this._states()[newIndex].value);
-    }
-    _emitChange() {
-        this._onChangeRegistered?.(this.state());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStateboxComponent, deps: [{ token: ARD_STATEBOX_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumStateboxComponent, isStandalone: false, selector: "ard-statebox", inputs: { states: { classPropertyName: "states", publicName: "states", isSignal: true, isRequired: false, transformFunction: null }, clickStrategy: { classPropertyName: "clickStrategy", publicName: "clickStrategy", isSignal: true, isRequired: false, transformFunction: null }, wrapperClasses: { classPropertyName: "wrapperClasses", publicName: "wrapperClasses", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ArdiumStarButtonComponent),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0, template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-statebox\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [style]=\"ngStyle()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  @if (internalState().keepFrame) {\r\n    <div class=\"ard-statebox-frame\"></div>\r\n  }\r\n  <div [class]=\"internalState().displayAsIcon ? 'ard-statebox-icon' : 'ard-statebox-character'\">\r\n    {{ internalState().display }}\r\n  </div>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStateboxComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'ard-statebox', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ArdiumStarButtonComponent),
-                            multi: true,
-                        },
-                    ], template: "<button\r\n  #focusableElement\r\n  type=\"button\"\r\n  class=\"ard-statebox\"\r\n  [ngClass]=\"ngClasses()\"\r\n  [tabindex]=\"tabIndex()\"\r\n  (click)=\"onClick()\"\r\n  (focus)=\"onFocus($event)\"\r\n  (blur)=\"onBlur($event)\"\r\n  [style]=\"ngStyle()\"\r\n>\r\n  <div class=\"ard-hitbox\"></div>\r\n  <div class=\"ard-focus-overlay\"></div>\r\n  @if (internalState().keepFrame) {\r\n    <div class=\"ard-statebox-frame\"></div>\r\n  }\r\n  <div [class]=\"internalState().displayAsIcon ? 'ard-statebox-icon' : 'ard-statebox-character'\">\r\n    {{ internalState().display }}\r\n  </div>\r\n</button>\r\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ARD_STATEBOX_DEFAULTS]
-                }] }] });
-
-class ArdiumStateboxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStateboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStateboxModule, declarations: [ArdiumStateboxComponent], imports: [CommonModule], exports: [ArdiumStateboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStateboxModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumStateboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ArdiumStateboxComponent],
-                    imports: [CommonModule],
-                    exports: [ArdiumStateboxComponent],
-                }]
-        }] });
-
 const CheckboxListAlignType = {
     LeftClumped: 'left-clumped',
     LeftSplit: 'left-split',
@@ -15847,8 +15744,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+const ArdDividerVariant = {
+    Full: 'full',
+    Middle: 'middle',
+};
+
 const _dividerDefaults = {
     vertical: false,
+    variant: ArdDividerVariant.Full,
+    flexItem: false,
+    textAlign: OneAxisAlignmentOrientational.Center,
 };
 const ARD_DIVIDER_DEFAULTS = new InjectionToken('ard-divider-defaults', {
     factory: () => ({
@@ -15859,32 +15764,70 @@ function provideDividerDefaults(config) {
     return { provide: ARD_DIVIDER_DEFAULTS, useValue: { ..._dividerDefaults, ...config } };
 }
 
-class ArdiumDividerComponent {
+class ArdiumDividerDirective {
     constructor() {
         this._DEFAULTS = inject(ARD_DIVIDER_DEFAULTS);
         this.vertical = input(this._DEFAULTS.vertical, { transform: v => coerceBooleanProperty(v) });
+        this.flexItem = input(this._DEFAULTS.flexItem, { transform: v => coerceBooleanProperty(v) });
+        this.textAlign = input(this._DEFAULTS.textAlign);
+        this.variant = input(this._DEFAULTS.variant);
+        this.ngClasses = computed(() => [
+            'ard-divider',
+            this.vertical() ? 'ard-divider__vertical' : 'ard-divider__horizontal',
+            this.flexItem() ? 'ard-divider__flex-item' : '',
+            `ard-divider__text-align-${this.textAlign()}`,
+            `ard-divider__${this.variant()}`,
+        ].join(' '));
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumDividerDirective, isStandalone: false, selector: "[ard-divider]", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, flexItem: { classPropertyName: "flexItem", publicName: "flexItem", isSignal: true, isRequired: false, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator" }, properties: { "class": "ngClasses()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ard-divider]',
+                    standalone: false,
+                    host: {
+                        role: 'separator',
+                        '[class]': 'ngClasses()',
+                    },
+                }]
+        }] });
+class ArdiumDividerDirectiveStandalone extends ArdiumDividerDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerDirectiveStandalone, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: ArdiumDividerDirectiveStandalone, isStandalone: true, host: { attributes: { "role": "separator" }, properties: { "class": "ngClasses()" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerDirectiveStandalone, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    host: {
+                        role: 'separator',
+                        '[class]': 'ngClasses()',
+                    },
+                }]
+        }] });
+
+class ArdiumDividerComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ArdiumDividerComponent, isStandalone: false, selector: "ard-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ard-divider-vertical": "vertical()" } }, ngImport: i0, template: '', isInline: true, styles: ["ard-divider{display:block}ard-divider:not(.ard-divider-vertical){width:100%;height:0}ard-divider.ard-divider-vertical{width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ArdiumDividerComponent, isStandalone: false, selector: "ard-divider", hostDirectives: [{ directive: ArdiumDividerDirectiveStandalone, inputs: ["vertical", "vertical", "flexItem", "flexItem", "textAlign", "textAlign", "variant", "variant"] }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["ard-divider{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'ard-divider', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[class.ard-divider-vertical]': 'vertical()',
-                    }, styles: ["ard-divider{display:block}ard-divider:not(.ard-divider-vertical){width:100%;height:0}ard-divider.ard-divider-vertical{width:0}\n"] }]
+            args: [{ standalone: false, selector: 'ard-divider', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: ArdiumDividerDirectiveStandalone, inputs: ['vertical', 'flexItem', 'textAlign', 'variant'] }], styles: ["ard-divider{display:block}\n"] }]
         }] });
 
 class ArdiumDividerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerModule, declarations: [ArdiumDividerComponent], imports: [CommonModule], exports: [ArdiumDividerComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerModule, declarations: [ArdiumDividerComponent, ArdiumDividerDirective], imports: [CommonModule], exports: [ArdiumDividerComponent, ArdiumDividerDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumDividerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ArdiumDividerComponent],
+                    declarations: [ArdiumDividerComponent, ArdiumDividerDirective],
                     imports: [CommonModule],
-                    exports: [ArdiumDividerComponent],
+                    exports: [ArdiumDividerComponent, ArdiumDividerDirective],
                 }]
         }] });
 
@@ -17277,5 +17220,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ARD_BADGE_DEFAULTS, ARD_BREAKPOINTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_ERROR_MAP, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_CONTROL, ARD_FORM_FIELD_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_GRID_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_STATEBOX_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ArdAddCustomTemplateDirective, ArdAutocompleteInputLoadingTemplateDirective, ArdAutocompleteInputPlaceholderTemplateDirective, ArdAutocompleteInputPrefixTemplateDirective, ArdAutocompleteInputSuffixTemplateDirective, ArdAutocompleteInputSuggestionTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDateRangeInputAcceptButtonsTemplateDirective, ArdDateRangeInputCalendarIconTemplateDirective, ArdDateRangeInputDayTemplateDirective, ArdDateRangeInputDaysViewHeaderTemplateDirective, ArdDateRangeInputFloatingMonthTemplateDirective, ArdDateRangeInputMonthTemplateDirective, ArdDateRangeInputMonthsViewHeaderTemplateDirective, ArdDateRangeInputPrefixTemplateDirective, ArdDateRangeInputSuffixTemplateDirective, ArdDateRangeInputValueTemplateDirective, ArdDateRangeInputWeekdayTemplateDirective, ArdDateRangeInputYearTemplateDirective, ArdDateRangeInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdGridAlign, ArdGridDirection, ArdGridJustify, ArdGridSize, ArdGridWrap, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdMultiCalendarLocation, ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, ArdMultipageDateRangeInputCalendarIconTemplateDirective, ArdMultipageDateRangeInputDayTemplateDirective, ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, ArdMultipageDateRangeInputFloatingMonthTemplateDirective, ArdMultipageDateRangeInputMonthTemplateDirective, ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, ArdMultipageDateRangeInputPrefixTemplateDirective, ArdMultipageDateRangeInputSuffixTemplateDirective, ArdMultipageDateRangeInputValueTemplateDirective, ArdMultipageDateRangeInputWeekdayTemplateDirective, ArdMultipageDateRangeInputYearTemplateDirective, ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdNumberInputPrefixTemplateDirective, ArdNumberInputSuffixTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRangeCalendarDayTemplateDirective, ArdRangeCalendarDaysViewHeaderTemplateDirective, ArdRangeCalendarFloatingMonthTemplateDirective, ArdRangeCalendarMonthTemplateDirective, ArdRangeCalendarMonthsViewHeaderTemplateDirective, ArdRangeCalendarWeekdayTemplateDirective, ArdRangeCalendarYearTemplateDirective, ArdRangeCalendarYearsViewHeaderTemplateDirective, ArdRangeSelectionBehavior, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutoErrorComponent, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumBreakpointService, ArdiumButtonComponent, ArdiumButtonDirective, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDateRangeInputComponent, ArdiumDateRangeInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumGridComponent, ArdiumGridModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumMultipageDateRangeInputComponent, ArdiumMultipageDateRangeInputModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeCalendarComponent, ArdiumRangeCalendarModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumStateboxComponent, ArdiumStateboxModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ComponentColor, DateRange, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, isArdGridAlign, isArdGridDirection, isArdGridJustify, isArdGridSize, isArdGridWrap, isDateRange, isYearRange, provideBadgeDefaults, provideBreakpoints, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideErrorMap, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideGridDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideStateboxDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
+export { ARD_BADGE_DEFAULTS, ARD_BREAKPOINTS, ARD_BUTTON_DEFAULTS, ARD_CALENDAR_DEFAULTS, ARD_CARD_DEFAULTS, ARD_CHECKBOX_DEFAULTS, ARD_CHECKBOX_LIST_DEFAULTS, ARD_CHIP_DEFAULTS, ARD_DATE_INPUT_DEFAULTS, ARD_DELETABLE_CHIP_DEFAULTS, ARD_DIALOG_DEFAULTS, ARD_DIGIT_INPUT_DEFAULTS, ARD_DIVIDER_DEFAULTS, ARD_DROPDOWN_PANEL_DEFAULTS, ARD_ERROR_MAP, ARD_FAB_DEFAULTS, ARD_FILE_DROP_AREA_DEFAULTS, ARD_FILE_INPUT_DEFAULTS, ARD_FORM_FIELD_CONTROL, ARD_FORM_FIELD_DEFAULTS, ARD_FORM_FIELD_FRAME_DEFAULTS, ARD_GRID_DEFAULTS, ARD_HEX_INPUT_DEFAULTS, ARD_ICON_BUTTON_DEFAULTS, ARD_ICON_DEFAULTS, ARD_KBD_DEFAULTS, ARD_KBD_SHORTCUT_DEFAULTS, ARD_MODAL_DEFAULTS, ARD_NUMBER_INPUT_DEFAULTS, ARD_PASSWORD_INPUT_DEFAULTS, ARD_PROGRESS_BAR_DEFAULTS, ARD_PROGRESS_CIRCLE_DEFAULTS, ARD_RADIO_DEFAULTS, ARD_RATING_DISPLAY_DEFAULTS, ARD_RATING_INPUT_DEFAULTS, ARD_SEGMENT_DEFAULTS, ARD_SELECTABLE_CHIP_DEFAULTS, ARD_SELECT_DEFAULTS, ARD_SIMPLE_INPUT_DEFAULTS, ARD_SLIDER_DEFAULTS, ARD_SLIDE_TOGGLE_DEFAULTS, ARD_SNACKBAR_ANIMATION_LENGTH, ARD_SNACKBAR_DATA, ARD_SNACKBAR_DEFAULTS, ARD_SPINNER_DEFAULTS, ARD_STAR_BUTTON_DEFAULTS, ARD_STAR_DEFAULTS, ARD_TABBER_DEFAULTS, ARD_TABLE_DEFAULTS, ARD_TABLE_FROM_CSV_DEFAULTS, ARD_TABLE_PAGINATION_DEFAULTS, ArdAddCustomTemplateDirective, ArdAutocompleteInputLoadingTemplateDirective, ArdAutocompleteInputPlaceholderTemplateDirective, ArdAutocompleteInputPrefixTemplateDirective, ArdAutocompleteInputSuffixTemplateDirective, ArdAutocompleteInputSuggestionTemplateDirective, ArdCalendarDayTemplateDirective, ArdCalendarDaysViewHeaderTemplateDirective, ArdCalendarFloatingMonthTemplateDirective, ArdCalendarMonthTemplateDirective, ArdCalendarMonthsViewHeaderTemplateDirective, ArdCalendarView, ArdCalendarWeekdayTemplateDirective, ArdCalendarYearTemplateDirective, ArdCalendarYearsViewHeaderTemplateDirective, ArdCheckboxListCheckboxTemplateDirective, ArdCheckboxListLabelTemplateDirective, ArdCheckboxTemplateDirective, ArdDateInputAcceptButtonsTemplateDirective, ArdDateInputCalendarIconTemplateDirective, ArdDateInputDayTemplateDirective, ArdDateInputDaysViewHeaderTemplateDirective, ArdDateInputFloatingMonthTemplateDirective, ArdDateInputMinMaxStrategy, ArdDateInputMonthTemplateDirective, ArdDateInputMonthsViewHeaderTemplateDirective, ArdDateInputPrefixTemplateDirective, ArdDateInputSuffixTemplateDirective, ArdDateInputValueTemplateDirective, ArdDateInputWeekdayTemplateDirective, ArdDateInputYearTemplateDirective, ArdDateInputYearsViewHeaderTemplateDirective, ArdDateRangeInputAcceptButtonsTemplateDirective, ArdDateRangeInputCalendarIconTemplateDirective, ArdDateRangeInputDayTemplateDirective, ArdDateRangeInputDaysViewHeaderTemplateDirective, ArdDateRangeInputFloatingMonthTemplateDirective, ArdDateRangeInputMonthTemplateDirective, ArdDateRangeInputMonthsViewHeaderTemplateDirective, ArdDateRangeInputPrefixTemplateDirective, ArdDateRangeInputSuffixTemplateDirective, ArdDateRangeInputValueTemplateDirective, ArdDateRangeInputWeekdayTemplateDirective, ArdDateRangeInputYearTemplateDirective, ArdDateRangeInputYearsViewHeaderTemplateDirective, ArdDialogActionType, ArdDialogButtonsTemplateDirective, ArdDialogCloseIconTemplateDirective, ArdDialogResult, ArdDividerVariant, ArdDropdownFooterTemplateDirective, ArdDropdownHeaderTemplateDirective, ArdFileInputPlaceholderTemplateDirective, ArdFileInputPrefixTemplateDirective, ArdFileInputSuffixTemplateDirective, ArdFormFieldPrefixTemplateDirective, ArdFormFieldSuffixTemplateDirective, ArdGridAlign, ArdGridDirection, ArdGridJustify, ArdGridSize, ArdGridWrap, ArdHexInputPlaceholderTemplateDirective, ArdHexInputPrefixTemplateDirective, ArdHexInputSuffixTemplateDirective, ArdInputPlaceholderTemplateDirective, ArdInputPrefixTemplateDirective, ArdInputSuffixTemplateDirective, ArdItemDisplayLimitTemplateDirective, ArdItemLimitReachedTemplateDirective, ArdLoadingPlaceholderTemplateDirective, ArdLoadingSpinnerTemplateDirective, ArdModalCloseIconTemplateDirective, ArdMultiCalendarLocation, ArdMultipageDateRangeInputAcceptButtonsTemplateDirective, ArdMultipageDateRangeInputCalendarIconTemplateDirective, ArdMultipageDateRangeInputDayTemplateDirective, ArdMultipageDateRangeInputDaysViewHeaderTemplateDirective, ArdMultipageDateRangeInputFloatingMonthTemplateDirective, ArdMultipageDateRangeInputMonthTemplateDirective, ArdMultipageDateRangeInputMonthsViewHeaderTemplateDirective, ArdMultipageDateRangeInputPrefixTemplateDirective, ArdMultipageDateRangeInputSuffixTemplateDirective, ArdMultipageDateRangeInputValueTemplateDirective, ArdMultipageDateRangeInputWeekdayTemplateDirective, ArdMultipageDateRangeInputYearTemplateDirective, ArdMultipageDateRangeInputYearsViewHeaderTemplateDirective, ArdNoItemsFoundTemplateDirective, ArdNumberInputPlaceholderTemplateDirective, ArdNumberInputPrefixTemplateDirective, ArdNumberInputSuffixTemplateDirective, ArdOptgroupTemplateDirective, ArdOptionTemplateDirective, ArdPanelPosition, ArdPasswordInputPlaceholderTemplateDirective, ArdPasswordInputPrefixTemplateDirective, ArdPasswordInputRevealButtonTemplateDirective, ArdPasswordInputSuffixTemplateDirective, ArdProgressBarValueTemplateDirective, ArdProgressCircleValueTemplateDirective, ArdRangeCalendarDayTemplateDirective, ArdRangeCalendarDaysViewHeaderTemplateDirective, ArdRangeCalendarFloatingMonthTemplateDirective, ArdRangeCalendarMonthTemplateDirective, ArdRangeCalendarMonthsViewHeaderTemplateDirective, ArdRangeCalendarWeekdayTemplateDirective, ArdRangeCalendarYearTemplateDirective, ArdRangeCalendarYearsViewHeaderTemplateDirective, ArdRangeSelectionBehavior, ArdRatingDisplayStarTemplateDirective, ArdRatingInputStarButtonTemplateDirective, searchFunctions as ArdSearchFunction, ArdSegmentOptionTemplateDirective, ArdSelectDropdownArrowTemplateDirective, ArdSelectPlaceholderTemplateDirective, ArdSelectPrefixTemplateDirective, ArdSelectSuffixTemplateDirective, ArdSlideToggleAppearance, ArdSliderTooltipDirective, ArdSnackbarAlignment, ArdSnackbarOriginRelation, ArdSnackbarQueueHandling, ArdSnackbarRef, ArdSnackbarType, ArdStarButtonStarTemplateDirective, ArdStarIconTemplateDirective, ArdTabberLabelTemplateDirective, ArdValueChipTemplateDirective, ArdValueTemplateDirective, ArdiumAutoErrorComponent, ArdiumAutocompleteInputComponent, ArdiumAutocompleteInputModule, ArdiumBadgeDirective, ArdiumBadgeModule, ArdiumBreakpointService, ArdiumButtonComponent, ArdiumButtonDirective, ArdiumButtonModule, ArdiumCalendarComponent, ArdiumCalendarModule, ArdiumCardActionButtonsDirective, ArdiumCardAvatarDirective, ArdiumCardComponent, ArdiumCardContentDirective, ArdiumCardDirective, ArdiumCardFooterDirective, ArdiumCardHeaderComponent, ArdiumCardImageDirective, ArdiumCardModule, ArdiumCardSubtitleDirective, ArdiumCardTitleDirective, ArdiumCheckboxComponent, ArdiumCheckboxListComponent, ArdiumCheckboxListModule, ArdiumCheckboxModule, ArdiumChipComponent, ArdiumChipModule, ArdiumDateInputComponent, ArdiumDateInputModule, ArdiumDateRangeInputComponent, ArdiumDateRangeInputModule, ArdiumDeletableChipComponent, ArdiumDialogComponent, ArdiumDialogModule, ArdiumDigitInputComponent, ArdiumDigitInputModule, ArdiumDividerComponent, ArdiumDividerDirective, ArdiumDividerDirectiveStandalone, ArdiumDividerModule, ArdiumDropdownPanelComponent, ArdiumDropdownPanelModule, ArdiumErrorComponent, ArdiumErrorDirective, ArdiumFabComponent, ArdiumFabModule, ArdiumFileDropAreaComponent, ArdiumFileDropAreaDragoverContentTemplateDirective, ArdiumFileDropAreaIdleContentTemplateDirective, ArdiumFileDropAreaModule, ArdiumFileDropAreaUploadedContentTemplateDirective, ArdiumFileInputComponent, ArdiumFileInputDragoverContentTemplateDirective, ArdiumFileInputFolderIconTemplateDirective, ArdiumFileInputIdleContentTemplateDirective, ArdiumFileInputModule, ArdiumFileInputUploadedContentTemplateDirective, ArdiumFormFieldComponent, ArdiumFormFieldFrameComponent, ArdiumFormFieldFrameModule, ArdiumFormFieldModule, ArdiumFormFieldNativeInputAdapterDirective, ArdiumGridComponent, ArdiumGridModule, ArdiumHexInputComponent, ArdiumHexInputModule, ArdiumHintComponent, ArdiumHintDirective, ArdiumHintErrorComponent, ArdiumHintErrorDirective, ArdiumHorizontalFormFieldComponent, ArdiumIconButtonComponent, ArdiumIconButtonModule, ArdiumIconComponent, ArdiumIconModule, ArdiumIconPipe, ArdiumInputComponent, ArdiumInputModule, ArdiumKbdComponent, ArdiumKbdDirective, ArdiumKbdModule, ArdiumKbdPipe, ArdiumKbdShortcutComponent, ArdiumKbdShortcutModule, ArdiumLabelComponent, ArdiumModalComponent, ArdiumModalModule, ArdiumMultipageDateRangeInputComponent, ArdiumMultipageDateRangeInputModule, ArdiumNumberInputComponent, ArdiumNumberInputModule, ArdiumOptionComponent, ArdiumOptionModule, ArdiumPasswordInputComponent, ArdiumPasswordInputModule, ArdiumProgressBarComponent, ArdiumProgressBarModule, ArdiumProgressCircleComponent, ArdiumProgressCircleModule, ArdiumRadioComponent, ArdiumRadioGroupComponent, ArdiumRadioModule, ArdiumRangeCalendarComponent, ArdiumRangeCalendarModule, ArdiumRangeSliderComponent, ArdiumRangeSliderModule, ArdiumRatingDisplayComponent, ArdiumRatingDisplayModule, ArdiumRatingInputComponent, ArdiumRatingInputModule, ArdiumSegmentComponent, ArdiumSegmentModule, ArdiumSelectComponent, ArdiumSelectModule, ArdiumSelectableChipComponent, ArdiumSlideToggleComponent, ArdiumSlideToggleModule, ArdiumSliderComponent, ArdiumSliderModule, ArdiumSnackbarService, ArdiumSpinnerComponent, ArdiumSpinnerModule, ArdiumStarButtonComponent, ArdiumStarButtonModule, ArdiumStarComponent, ArdiumStarModule, ArdiumTabComponent, ArdiumTabberComponent, ArdiumTabberModule, ArdiumTableCaptionTemplateDirective, ArdiumTableCheckboxTemplateDirective, ArdiumTableComponent, ArdiumTableFromCsvComponent, ArdiumTableFromCsvModule, ArdiumTableHeaderCheckboxTemplateDirective, ArdiumTableModule, ArdiumTablePaginationComponent, ArdiumTablePaginationModule, ArdiumTablePaginationTemplateDirective, ArdiumTableTemplateDirective, ArdiumTextListComponent, ArdiumTextListModule, ArdiumTextListPipe, BadgePosition, BadgeSize, ButtonAppearance, ButtonVariant, CardAppearance, CardVariant, CheckboxListAlignType, CheckboxState, ClickStrategy, ComponentColor, DateRange, DecorationElementAppearance, DigitInputPrimitiveOption, DigitInputShape, DropdownPanelAppearance, DropdownPanelVariant, FabSize, FormElementAppearance, FormElementVariant, OneAxisAlignment, OneAxisAlignmentOrientational, OutlinedAppearance, PaginationAlign, PanelAppearance, PanelVariant, ProgressBarAppearance, ProgressBarMode, ProgressBarSize, ProgressBarVariant, ProgressCircleAppearance, ProgressCircleVariant, SegmentAppearance, SegmentVariant, SimpleComponentColor, SimpleOneAxisAlignment, SliderDecorationPosition, SliderTooltipBehavior, SortType, StarColor, StarFillMode, TableAlignType, TableAppearance, TablePaginationStrategy, TableVariant, TransformType, _chipDefaults, _modalDefaults, isArdGridAlign, isArdGridDirection, isArdGridJustify, isArdGridSize, isArdGridWrap, isDateRange, isYearRange, provideBadgeDefaults, provideBreakpoints, provideButtonDefaults, provideCalendarDefaults, provideCardDefaults, provideCheckboxDefaults, provideCheckboxListDefaults, provideChipDefaults, provideDateInputDefaults, provideDeletableChipDefaults, provideDialogDefaults, provideDigitInputDefaults, provideDividerDefaults, provideDropdownPanelDefaults, provideErrorMap, provideFabDefaults, provideFileDropAreaDefaults, provideFileInputDefaults, provideFormFieldDefaults, provideFormFieldFrameDefaults, provideGridDefaults, provideHexInputDefaults, provideIconButtonDefaults, provideIconDefaults, provideInputDefaults, provideKbdDefaults, provideKbdShortcutDefaults, provideModalDefaults, provideNumberInputDefaults, providePasswordInputDefaults, provideProgressBarDefaults, provideProgressCircleDefaults, provideRadioDefaults, provideRatingDisplayDefaults, provideRatingInputDefaults, provideSegmentDefaults, provideSelectDefaults, provideSelectableChipDefaults, provideSlideToggleDefaults, provideSliderDefaults, provideSnackbarDefaults, provideSpinnerDefaults, provideStarButtonDefaults, provideStarDefaults, provideTabberDefaults, provideTableDefaults, provideTableFromCsvDefaults, provideTablePaginationDefaults, searchInString };
 //# sourceMappingURL=ardium-ui-ui.mjs.map