cerxos-ui 0.0.20 → 0.0.22

package/README.md

@@ -28,17 +28,9 @@ This command will compile your project, and the build artifacts will be placed i
 
 ### Publishing the Library
 
-Once the project is built, you can publish your library by following these steps:
-
-1. Navigate to the `dist` directory:
-   ```bash
-   cd dist/cerxos-ui
-   ```
-
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+Publishing is triggered by a maintainer-pushed version tag. Follow the
+[workspace release instructions](https://github.com/nurakmaljalil91/cerxos-ui-workspace#publishing-cerxos-ui) for the
+version, tag, npm trusted publisher setup, and verification steps.
 
 ## Running unit tests
 

package/fesm2022/cerxos-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, inject, ContentChild, HostBinding, signal, Injectable, Pipe } from '@angular/core';
+import { Component, EventEmitter, ElementRef, HostListener, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, Directive, ContentChildren, inject, ChangeDetectorRef, ContentChild, HostBinding, signal, Injectable, Pipe } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
@@ -434,7 +434,7 @@ const VARIANT_CLASSES$8 = {
     danger: 'border-[var(--cxs-color-danger)] bg-[var(--cxs-color-surface)] ' +
         'text-[var(--cxs-color-danger)]'
 };
-const SIZE_CLASSES$8 = {
+const SIZE_CLASSES$9 = {
     sm: 'text-[11px]',
     md: 'text-xs'
 };
@@ -442,7 +442,7 @@ class CxsBadgeComponent {
     variant = 'primary';
     size = 'md';
     get badgeClass() {
-        return [BASE_CLASSES$a, VARIANT_CLASSES$8[this.variant], SIZE_CLASSES$8[this.size]].join(' ');
+        return [BASE_CLASSES$a, VARIANT_CLASSES$8[this.variant], SIZE_CLASSES$9[this.size]].join(' ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\n  <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -459,7 +459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 const BASE_CLASSES$9 = 'inline-flex items-center justify-center overflow-hidden border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-primary-ghost)] text-[var(--cxs-color-primary)] font-semibold uppercase ' +
     'select-none';
-const SIZE_CLASSES$7 = {
+const SIZE_CLASSES$8 = {
     sm: 'h-8 w-8 text-[11px]',
     md: 'h-10 w-10 text-xs',
     lg: 'h-14 w-14 text-sm'
@@ -490,7 +490,7 @@ class CxsAvatarComponent {
         this.hostClass = hostClass;
     }
     get avatarClass() {
-        return [BASE_CLASSES$9, SIZE_CLASSES$7[this.size], SHAPE_CLASSES[this.shape], this.hostClass]
+        return [BASE_CLASSES$9, SIZE_CLASSES$8[this.size], SHAPE_CLASSES[this.shape], this.hostClass]
             .filter(Boolean)
             .join(' ');
     }
@@ -566,7 +566,7 @@ const LINK_BASE_CLASSES = 'rounded-[var(--cxs-radius-md)] transition-colors focu
 const NON_LINK_CLASSES = 'text-[var(--cxs-color-on-surface-muted)]';
 const SEPARATOR_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] select-none';
 const DISABLED_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] opacity-60';
-const SIZE_CLASSES$6 = {
+const SIZE_CLASSES$7 = {
     sm: 'text-xs',
     md: 'text-sm',
     lg: 'text-base'
@@ -587,7 +587,7 @@ class CxsBreadcrumbComponent {
     variant = 'default';
     disabled = false;
     get listClass() {
-        return [BASE_CLASSES$8, SIZE_CLASSES$6[this.size], this.disabled ? 'opacity-60' : '']
+        return [BASE_CLASSES$8, SIZE_CLASSES$7[this.size], this.disabled ? 'opacity-60' : '']
             .filter(Boolean)
             .join(' ');
     }
@@ -649,7 +649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
             }] } });
 
 const BASE_CLASSES$7 = 'inline-block shrink-0';
-const SIZE_CLASSES$5 = {
+const SIZE_CLASSES$6 = {
     sm: 'h-4 w-4',
     md: 'h-5 w-5',
     lg: 'h-6 w-6'
@@ -770,7 +770,7 @@ class CxsIconComponent {
         return icon;
     }
     get iconClass() {
-        return [BASE_CLASSES$7, SIZE_CLASSES$5[this.size], this.hostClass].filter(Boolean).join(' ');
+        return [BASE_CLASSES$7, SIZE_CLASSES$6[this.size], this.hostClass].filter(Boolean).join(' ');
     }
     get titleId() {
         return this.label ? `cxs-icon-title-${this.instanceId}` : null;
@@ -809,7 +809,7 @@ const VARIANT_CLASSES$7 = {
         'hover:bg-[var(--cxs-color-primary-ghost)]',
     ghost: 'bg-transparent text-[var(--cxs-color-primary)] hover:bg-[var(--cxs-color-primary-ghost)]'
 };
-const SIZE_CLASSES$4 = {
+const SIZE_CLASSES$5 = {
     sm: 'h-8 px-3 text-sm rounded-[var(--cxs-radius-md)]',
     md: 'h-10 px-4 text-sm rounded-[var(--cxs-radius-md)]',
     lg: 'h-12 px-5 text-base rounded-[var(--cxs-radius-md)]'
@@ -860,7 +860,7 @@ class CxsButtonComponent {
     get buttonClass() {
         return [
             BASE_CLASSES$6,
-            this.iconOnly ? ICON_ONLY_SIZE_CLASSES[this.size] : SIZE_CLASSES$4[this.size],
+            this.iconOnly ? ICON_ONLY_SIZE_CLASSES[this.size] : SIZE_CLASSES$5[this.size],
             VARIANT_CLASSES$7[this.variant],
             this.iconOnly ? 'gap-0' : '',
             this.hostClass
@@ -904,7 +904,7 @@ const VARIANT_CLASSES$6 = {
     muted: 'bg-[var(--cxs-color-surface-hover)]',
     outline: 'bg-transparent'
 };
-const SIZE_CLASSES$3 = {
+const SIZE_CLASSES$4 = {
     sm: 'p-3',
     md: 'p-5',
     lg: 'p-7'
@@ -919,7 +919,7 @@ class CxsCardComponent {
         return [
             BASE_CLASSES$5,
             VARIANT_CLASSES$6[this.variant],
-            SIZE_CLASSES$3[this.size],
+            SIZE_CLASSES$4[this.size],
             this.elevated ? 'shadow-[var(--cxs-shadow-sm)]' : ''
         ]
             .filter(Boolean)
@@ -1269,7 +1269,7 @@ const BODY_ROW_BASE_CLASSES$1 = 'border-b border-[var(--cxs-color-border)] last:
 const BODY_ROW_STRIPED_CLASSES$1 = 'odd:bg-[var(--cxs-color-surface)] even:bg-[var(--cxs-color-surface-hover)]';
 const BODY_CELL_BASE_CLASSES$1 = 'px-3 py-2 align-top';
 const BODY_CELL_COMPACT_CLASSES$1 = 'px-2 py-1.5';
-const ALIGN_CLASSES$1 = {
+const ALIGN_CLASSES$2 = {
     left: 'text-left',
     center: 'text-center',
     right: 'text-right'
@@ -1498,7 +1498,7 @@ class CxsDataTableComponent {
         return [
             HEADER_CELL_BASE_CLASSES$1,
             this.columnBorders ? COLUMN_BORDER_CLASSES : '',
-            ALIGN_CLASSES$1[column.align ?? 'left'],
+            ALIGN_CLASSES$2[column.align ?? 'left'],
             column.headerClass ?? ''
         ]
             .filter(Boolean)
@@ -1515,7 +1515,7 @@ class CxsDataTableComponent {
             BODY_CELL_BASE_CLASSES$1,
             this.compact ? BODY_CELL_COMPACT_CLASSES$1 : '',
             this.columnBorders ? COLUMN_BORDER_CLASSES : '',
-            ALIGN_CLASSES$1[column.align ?? 'left'],
+            ALIGN_CLASSES$2[column.align ?? 'left'],
             column.cellClass ?? ''
         ]
             .filter(Boolean)
@@ -2045,7 +2045,7 @@ const VARIANT_CLASSES$5 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
-const SIZE_CLASSES$2 = {
+const SIZE_CLASSES$3 = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-3 text-sm',
     lg: 'h-12 px-4 text-base'
@@ -2115,7 +2115,7 @@ class CxsDatepickerComponent {
     get inputClass() {
         return [
             BASE_CLASSES$4,
-            SIZE_CLASSES$2[this.size],
+            SIZE_CLASSES$3[this.size],
             VARIANT_CLASSES$5[this.variant],
             this.invalid ? INVALID_CLASSES$4 : ''
         ]
@@ -2633,6 +2633,203 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
+const CONTENT_BASE_CLASSES = 'absolute z-50 w-80 max-w-[calc(100vw-2rem)] rounded-[var(--cxs-radius-md)] ' +
+    'border border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] p-4 ' +
+    'text-sm text-[var(--cxs-color-on-surface)] shadow-[var(--cxs-shadow-sm)]';
+const SIDE_CLASSES = {
+    top: 'bottom-full mb-2',
+    right: 'left-full ml-2',
+    bottom: 'top-full mt-2',
+    left: 'right-full mr-2'
+};
+const ALIGN_CLASSES$1 = {
+    top: { start: 'left-0', center: 'left-1/2 -translate-x-1/2', end: 'right-0' },
+    bottom: { start: 'left-0', center: 'left-1/2 -translate-x-1/2', end: 'right-0' },
+    left: { start: 'top-0', center: 'top-1/2 -translate-y-1/2', end: 'bottom-0' },
+    right: { start: 'top-0', center: 'top-1/2 -translate-y-1/2', end: 'bottom-0' }
+};
+class CxsHoverCardComponent {
+    static nextId = 0;
+    openDelay = 200;
+    closeDelay = 200;
+    trigger;
+    contentId = `cxs-hover-card-${CxsHoverCardComponent.nextId++}`;
+    open = false;
+    host = inject((ElementRef));
+    changeDetector = inject(ChangeDetectorRef);
+    openTimer;
+    closeTimer;
+    pointerInside = false;
+    focusInside = false;
+    suppressFocusOpen = false;
+    onMouseEnter() {
+        this.pointerInside = true;
+        this.scheduleOpen();
+    }
+    onMouseLeave() {
+        this.pointerInside = false;
+        if (!this.focusInside) {
+            this.scheduleClose();
+        }
+    }
+    onFocusIn() {
+        this.focusInside = true;
+        if (this.suppressFocusOpen) {
+            this.suppressFocusOpen = false;
+            return;
+        }
+        this.cancelOpen();
+        this.cancelClose();
+        this.setOpen(true);
+    }
+    onFocusOut(event) {
+        if (event.relatedTarget && this.host.nativeElement.contains(event.relatedTarget)) {
+            return;
+        }
+        this.focusInside = false;
+        this.suppressFocusOpen = false;
+        if (!this.pointerInside) {
+            this.scheduleClose();
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.open) {
+            event.preventDefault();
+            this.cancelOpen();
+            this.cancelClose();
+            this.setOpen(false);
+            const trigger = this.trigger?.element.nativeElement;
+            if (trigger && !trigger.contains(event.target)) {
+                this.suppressFocusOpen = true;
+                trigger.focus();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.cancelOpen();
+        this.cancelClose();
+    }
+    scheduleOpen() {
+        this.cancelClose();
+        if (this.open || this.openTimer) {
+            return;
+        }
+        this.openTimer = setTimeout(() => {
+            this.openTimer = undefined;
+            this.setOpen(true);
+        }, Math.max(0, this.openDelay));
+    }
+    scheduleClose() {
+        this.cancelOpen();
+        if (!this.open || this.closeTimer) {
+            return;
+        }
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = undefined;
+            this.setOpen(false);
+        }, Math.max(0, this.closeDelay));
+    }
+    cancelOpen() {
+        clearTimeout(this.openTimer);
+        this.openTimer = undefined;
+    }
+    cancelClose() {
+        clearTimeout(this.closeTimer);
+        this.closeTimer = undefined;
+    }
+    setOpen(open) {
+        this.open = open;
+        this.changeDetector.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: CxsHoverCardComponent, isStandalone: true, selector: "cxs-hover-card", inputs: { openDelay: "openDelay", closeDelay: "closeDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut($event)", "keydown": "onKeydown($event)" }, classAttribute: "relative inline-flex" }, queries: [{ propertyName: "trigger", first: true, predicate: i0.forwardRef(() => CxsHoverCardTriggerDirective), descendants: true }], ngImport: i0, template: "<ng-content select=\"[cxsHoverCardTrigger]\"></ng-content>\n<ng-content select=\"[cxsHoverCardContent]\"></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-hover-card', standalone: true, host: { class: 'relative inline-flex' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[cxsHoverCardTrigger]\"></ng-content>\n<ng-content select=\"[cxsHoverCardContent]\"></ng-content>\n" }]
+        }], propDecorators: { openDelay: [{
+                type: Input
+            }], closeDelay: [{
+                type: Input
+            }], trigger: [{
+                type: ContentChild,
+                args: [forwardRef(() => CxsHoverCardTriggerDirective)]
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+class CxsHoverCardTriggerDirective {
+    card = inject(CxsHoverCardComponent);
+    element = inject((ElementRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CxsHoverCardTriggerDirective, isStandalone: true, selector: "[cxsHoverCardTrigger]", host: { properties: { "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "card.open", "attr.aria-controls": "card.contentId" }, classAttribute: "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cxsHoverCardTrigger]',
+                    standalone: true,
+                    host: {
+                        class: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+                            'focus-visible:outline-[var(--cxs-color-focus)]',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.aria-expanded]': 'card.open',
+                        '[attr.aria-controls]': 'card.contentId'
+                    }
+                }]
+        }] });
+class CxsHoverCardContentDirective {
+    side = 'bottom';
+    align = 'center';
+    ariaLabel = 'Preview';
+    card = inject(CxsHoverCardComponent);
+    get contentClass() {
+        return [
+            CONTENT_BASE_CLASSES,
+            SIDE_CLASSES[this.side],
+            ALIGN_CLASSES$1[this.side][this.align],
+            this.card.open ? '' : 'hidden'
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: CxsHoverCardContentDirective, isStandalone: true, selector: "[cxsHoverCardContent]", inputs: { side: "side", align: "align", ariaLabel: "ariaLabel" }, host: { properties: { "class": "contentClass", "attr.id": "card.contentId", "attr.role": "\"dialog\"", "attr.aria-label": "ariaLabel", "attr.aria-hidden": "card.open ? null : \"true\"", "attr.hidden": "card.open ? null : \"\"" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsHoverCardContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cxsHoverCardContent]',
+                    standalone: true,
+                    host: {
+                        '[class]': 'contentClass',
+                        '[attr.id]': 'card.contentId',
+                        '[attr.role]': '"dialog"',
+                        '[attr.aria-label]': 'ariaLabel',
+                        '[attr.aria-hidden]': 'card.open ? null : "true"',
+                        '[attr.hidden]': 'card.open ? null : ""'
+                    }
+                }]
+        }], propDecorators: { side: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
 const BASE_CLASSES$3 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
@@ -2647,7 +2844,7 @@ const VARIANT_CLASSES$4 = {
     outline: 'bg-[var(--cxs-color-surface)]',
     filled: 'bg-[var(--cxs-color-surface-hover)]'
 };
-const SIZE_CLASSES$1 = {
+const SIZE_CLASSES$2 = {
     sm: 'h-8 px-3 text-sm',
     md: 'h-10 px-3 text-sm',
     lg: 'h-12 px-4 text-base'
@@ -2695,7 +2892,7 @@ class CxsInputComponent {
     get inputClass() {
         return [
             BASE_CLASSES$3,
-            SIZE_CLASSES$1[this.size],
+            SIZE_CLASSES$2[this.size],
             VARIANT_CLASSES$4[this.variant],
             this.invalid ? INVALID_CLASSES$3 : ''
         ]
@@ -3670,6 +3867,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
                 type: Output
             }] } });
 
+const CHIP_BASE = 'inline-flex items-center gap-2 rounded-[var(--cxs-radius-md)] border ' +
+    'font-medium transition-colors cursor-pointer select-none ' +
+    'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 ' +
+    'peer-focus-visible:outline-[var(--cxs-color-focus)]';
+const TONE_CLASSES = {
+    primary: 'border-[var(--cxs-color-primary)] bg-[var(--cxs-color-primary-ghost)] ' +
+        'text-[var(--cxs-color-primary)]',
+    danger: 'border-[var(--cxs-color-danger)] bg-[var(--cxs-color-danger-surface)] ' +
+        'text-[var(--cxs-color-danger)]',
+    neutral: 'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] ' +
+        'text-[var(--cxs-color-on-surface)]'
+};
+const SELECTED_CLASSES = 'ring-2 ring-offset-2 ring-current';
+const SIZE_CLASSES$1 = {
+    sm: 'min-h-8 px-3 py-1 text-xs',
+    md: 'min-h-10 px-4 py-2 text-sm',
+    lg: 'min-h-12 px-5 py-2.5 text-base'
+};
+class CxsRadioChipGroupComponent {
+    changeDetector;
+    static nextId = 0;
+    label = '';
+    options = [];
+    disabled = false;
+    invalid = false;
+    required = false;
+    size = 'md';
+    valueChange = new EventEmitter();
+    groupId = `cxs-radio-chip-group-${CxsRadioChipGroupComponent.nextId++}`;
+    value = null;
+    disabledFromControl = false;
+    onChange = () => { };
+    onTouched = () => { };
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+    }
+    get isDisabled() {
+        return this.disabled || this.disabledFromControl;
+    }
+    chipClass(option) {
+        return [
+            CHIP_BASE,
+            SIZE_CLASSES$1[this.size],
+            TONE_CLASSES[option.tone],
+            this.value === option.value ? SELECTED_CLASSES : '',
+            this.invalid ? 'outline outline-1 outline-[var(--cxs-color-danger)]' : '',
+            this.isDisabled ? 'cursor-not-allowed opacity-60' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    writeValue(value) {
+        this.value = value ?? null;
+        this.changeDetector.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabledFromControl = disabled;
+        this.changeDetector.markForCheck();
+    }
+    select(value) {
+        if (this.isDisabled)
+            return;
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    markTouched() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsRadioChipGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: CxsRadioChipGroupComponent, isStandalone: true, selector: "cxs-radio-chip-group", inputs: { label: "label", options: "options", disabled: "disabled", invalid: "invalid", required: "required", size: "size" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CxsRadioChipGroupComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<fieldset class=\"min-w-0\" [disabled]=\"isDisabled\" [attr.aria-invalid]=\"invalid ? 'true' : null\">\n  @if (label) {\n    <legend class=\"mb-1 text-sm font-medium text-[var(--cxs-color-on-surface)]\">{{ label }}</legend>\n  }\n  <div class=\"flex flex-wrap gap-3\">\n    @for (option of options; track option.value) {\n      <label class=\"relative inline-flex\">\n        <input\n          class=\"peer sr-only\"\n          type=\"radio\"\n          [name]=\"groupId\"\n          [value]=\"option.value\"\n          [checked]=\"value === option.value\"\n          [disabled]=\"isDisabled\"\n          [required]=\"required\"\n          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n          (change)=\"select(option.value)\"\n          (blur)=\"markTouched()\"\n        />\n        <span [class]=\"chipClass(option)\">\n          @if (value === option.value) {\n            <span aria-hidden=\"true\">&#10003;</span>\n          }\n          {{ option.label }}\n        </span>\n      </label>\n    }\n  </div>\n</fieldset>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CxsRadioChipGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-radio-chip-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CxsRadioChipGroupComponent),
+                            multi: true
+                        }
+                    ], template: "<fieldset class=\"min-w-0\" [disabled]=\"isDisabled\" [attr.aria-invalid]=\"invalid ? 'true' : null\">\n  @if (label) {\n    <legend class=\"mb-1 text-sm font-medium text-[var(--cxs-color-on-surface)]\">{{ label }}</legend>\n  }\n  <div class=\"flex flex-wrap gap-3\">\n    @for (option of options; track option.value) {\n      <label class=\"relative inline-flex\">\n        <input\n          class=\"peer sr-only\"\n          type=\"radio\"\n          [name]=\"groupId\"\n          [value]=\"option.value\"\n          [checked]=\"value === option.value\"\n          [disabled]=\"isDisabled\"\n          [required]=\"required\"\n          [attr.aria-invalid]=\"invalid ? 'true' : null\"\n          (change)=\"select(option.value)\"\n          (blur)=\"markTouched()\"\n        />\n        <span [class]=\"chipClass(option)\">\n          @if (value === option.value) {\n            <span aria-hidden=\"true\">&#10003;</span>\n          }\n          {{ option.label }}\n        </span>\n      </label>\n    }\n  </div>\n</fieldset>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
 const BASE_CLASSES$2 = 'w-full appearance-none rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
@@ -4873,5 +5179,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsHabitGridComponent, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
+export { CXS_USER_PREFERENCE_CHANGED_EVENT, CXS_USER_SESSION_STORAGE_KEY, CerxosUi, CxsAccordionComponent, CxsAccordionItemComponent, CxsActionMenuComponent, CxsAlertComponent, CxsAvatarComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCarouselComponent, CxsCheckboxComponent, CxsCurrencyPipe, CxsDataTableCellDirective, CxsDataTableComponent, CxsDatePipe, CxsDatepickerComponent, CxsDialogComponent, CxsHabitGridComponent, CxsHoverCardComponent, CxsHoverCardContentDirective, CxsHoverCardTriggerDirective, CxsIconComponent, CxsInputComponent, CxsMenubarComponent, CxsMultiSelectComponent, CxsPreferenceFormattingService, CxsProgressBarComponent, CxsRadioChipGroupComponent, CxsRadioComponent, CxsSelectComponent, CxsSkeletonComponent, CxsSliderComponent, CxsTabLabelDirective, CxsTabPanelComponent, CxsTableComponent, CxsTabsComponent, CxsThemeDirective, CxsToastComponent, CxsToggleComponent, CxsTooltipComponent };
 //# sourceMappingURL=cerxos-ui.mjs.map