ngx-com 0.0.19 → 0.0.20

package/fesm2022/ngx-com-components-alert.mjs

@@ -0,0 +1,346 @@
+import * as i0 from '@angular/core';
+import { Directive, input, booleanAttribute, output, contentChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ComIcon } from 'ngx-com/components/icon';
+import { cva } from 'class-variance-authority';
+import { mergeClasses } from 'ngx-com/utils';
+
+/**
+ * CVA variants for the alert container.
+ *
+ * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-success-subtle`, `--color-success-subtle-foreground`,
+ *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`,
+ *         `--radius-card`
+ */
+const alertVariants = cva([
+    'relative',
+    'flex',
+    'w-full',
+    'items-start',
+    'gap-3',
+    'rounded-card',
+    'border',
+    'p-4',
+    'text-sm',
+], {
+    variants: {
+        variant: {
+            info: 'bg-primary-subtle text-primary-subtle-foreground border-primary/20',
+            success: 'bg-success-subtle text-success-subtle-foreground border-success/20',
+            warning: 'bg-warn-subtle text-warn-subtle-foreground border-warn/20',
+            destructive: 'bg-warn text-warn-foreground border-warn',
+        },
+    },
+    defaultVariants: {
+        variant: 'info',
+    },
+});
+/**
+ * CVA variants for the alert close button.
+ *
+ * @tokens `--color-ring`, `--radius-card`
+ */
+const alertCloseButtonVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'shrink-0',
+    'rounded-card',
+    'p-0.5',
+    'transition-colors',
+    'outline-none',
+    'focus-visible:outline-2',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-[--color-ring]',
+], {
+    variants: {
+        variant: {
+            info: 'text-primary-subtle-foreground/60 hover:text-primary-subtle-foreground hover:bg-primary-subtle-foreground/10',
+            success: 'text-success-subtle-foreground/60 hover:text-success-subtle-foreground hover:bg-success-subtle-foreground/10',
+            warning: 'text-warn-subtle-foreground/60 hover:text-warn-subtle-foreground hover:bg-warn-subtle-foreground/10',
+            destructive: 'text-warn-foreground/60 hover:text-warn-foreground hover:bg-warn-foreground/10',
+        },
+    },
+    defaultVariants: {
+        variant: 'info',
+    },
+});
+
+/** Default Lucide icon names per alert variant. */
+const DEFAULT_ALERT_ICONS = {
+    info: 'info',
+    success: 'circle-check',
+    warning: 'triangle-alert',
+    destructive: 'circle-x',
+};
+
+/**
+ * Custom icon slot for `com-alert`.
+ *
+ * When present, the alert suppresses the default auto-mapped icon
+ * and renders this projected content instead.
+ *
+ * @example
+ * ```html
+ * <com-alert variant="success">
+ *   <com-icon comAlertIcon name="party-popper" size="md" aria-hidden="true" />
+ *   <h4 comAlertTitle>Congratulations!</h4>
+ * </com-alert>
+ * ```
+ */
+class ComAlertIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComAlertIcon, isStandalone: true, selector: "[comAlertIcon]", host: { classAttribute: "shrink-0 mt-0.5" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comAlertIcon]',
+                    host: {
+                        class: 'shrink-0 mt-0.5',
+                    },
+                }]
+        }] });
+
+/**
+ * Inline alert component for displaying contextual messages.
+ *
+ * Unlike toasts (ephemeral overlays), alerts are embedded in the page flow
+ * and persist until dismissed or the condition changes.
+ *
+ * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-success-subtle`, `--color-success-subtle-foreground`,
+ *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`,
+ *         `--radius-card`, `--color-ring`
+ *
+ * @example Info alert with title and description
+ * ```html
+ * <com-alert>
+ *   <h4 comAlertTitle>Heads up</h4>
+ *   <p comAlertDescription>You can add components using the CLI.</p>
+ * </com-alert>
+ * ```
+ *
+ * @example Dismissible warning
+ * ```html
+ * <com-alert variant="warning" dismissible (dismissed)="onDismissed()">
+ *   <h4 comAlertTitle>Storage almost full</h4>
+ *   <p comAlertDescription>You have used 90% of your storage quota.</p>
+ * </com-alert>
+ * ```
+ */
+class ComAlertComponent {
+    /** Semantic color variant. */
+    variant = input('info', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Shows a dismiss button when true. */
+    dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : {}), transform: booleanAttribute });
+    /** Consumer CSS classes — merged with variant classes. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Emitted when the dismiss button is clicked. */
+    dismissed = output();
+    /** @internal Detects whether a custom icon directive is projected. */
+    customIcon = contentChild(ComAlertIcon, ...(ngDevMode ? [{ debugName: "customIcon" }] : []));
+    /** @internal Controls visibility for dismiss animation. */
+    visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    /** @internal Tracks exit animation state. */
+    animatingOut = signal(false, ...(ngDevMode ? [{ debugName: "animatingOut" }] : []));
+    /** Default icon name auto-mapped from variant. */
+    defaultIconName = computed(() => DEFAULT_ALERT_ICONS[this.variant()], ...(ngDevMode ? [{ debugName: "defaultIconName" }] : []));
+    /** ARIA role based on variant. */
+    ariaRole = computed(() => {
+        const v = this.variant();
+        return v === 'warning' || v === 'destructive' ? 'alert' : 'status';
+    }, ...(ngDevMode ? [{ debugName: "ariaRole" }] : []));
+    /** ARIA live region politeness. */
+    ariaLive = computed(() => {
+        const v = this.variant();
+        return v === 'warning' || v === 'destructive' ? 'assertive' : 'polite';
+    }, ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
+    /** Computed alert container classes. */
+    alertClasses = computed(() => mergeClasses(alertVariants({ variant: this.variant() }), this.animatingOut()
+        ? 'animate-out fade-out-0'
+        : 'animate-in fade-in-0', this.userClass()), ...(ngDevMode ? [{ debugName: "alertClasses" }] : []));
+    /** Computed close button classes. */
+    closeButtonClasses = computed(() => mergeClasses(alertCloseButtonVariants({ variant: this.variant() })), ...(ngDevMode ? [{ debugName: "closeButtonClasses" }] : []));
+    /** @internal Triggers dismiss animation, then removes from DOM. */
+    dismiss() {
+        this.animatingOut.set(true);
+        this.dismissed.emit();
+    }
+    /** @internal Removes element after exit animation completes. */
+    onAnimationEnd() {
+        if (this.animatingOut()) {
+            this.visible.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComAlertComponent, isStandalone: true, selector: "com-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, queries: [{ propertyName: "customIcon", first: true, predicate: ComAlertIcon, descendants: true, isSignal: true }], exportAs: ["comAlert"], ngImport: i0, template: `
+    @if (visible()) {
+      <div
+        [class]="alertClasses()"
+        [attr.role]="ariaRole()"
+        [attr.aria-live]="ariaLive()"
+        [attr.data-state]="animatingOut() ? 'closed' : 'open'"
+        (animationend)="onAnimationEnd()"
+      >
+        @if (customIcon()) {
+          <ng-content select="[comAlertIcon]" />
+        } @else {
+          <com-icon
+            [name]="defaultIconName()"
+            size="md"
+            class="mt-0.5 shrink-0"
+            aria-hidden="true"
+          />
+        }
+        <div class="flex-1 min-w-0">
+          <ng-content />
+        </div>
+        @if (dismissible()) {
+          <button
+            type="button"
+            [class]="closeButtonClasses()"
+            aria-label="Dismiss"
+            (click)="dismiss()"
+          >
+            <com-icon name="x" size="sm" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block}[data-state=open]{--tw-enter-opacity: 0;--tw-enter-translate-y: 0}[data-state=closed]{--tw-exit-opacity: 0;--tw-exit-translate-y: 0}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"], dependencies: [{ kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-alert', exportAs: 'comAlert', template: `
+    @if (visible()) {
+      <div
+        [class]="alertClasses()"
+        [attr.role]="ariaRole()"
+        [attr.aria-live]="ariaLive()"
+        [attr.data-state]="animatingOut() ? 'closed' : 'open'"
+        (animationend)="onAnimationEnd()"
+      >
+        @if (customIcon()) {
+          <ng-content select="[comAlertIcon]" />
+        } @else {
+          <com-icon
+            [name]="defaultIconName()"
+            size="md"
+            class="mt-0.5 shrink-0"
+            aria-hidden="true"
+          />
+        }
+        <div class="flex-1 min-w-0">
+          <ng-content />
+        </div>
+        @if (dismissible()) {
+          <button
+            type="button"
+            [class]="closeButtonClasses()"
+            aria-label="Dismiss"
+            (click)="dismiss()"
+          >
+            <com-icon name="x" size="sm" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    }
+  `, imports: [ComIcon], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [":host{display:block}[data-state=open]{--tw-enter-opacity: 0;--tw-enter-translate-y: 0}[data-state=closed]{--tw-exit-opacity: 0;--tw-exit-translate-y: 0}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], customIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ComAlertIcon), { isSignal: true }] }] } });
+
+/**
+ * Title slot for `com-alert`.
+ *
+ * Apply to any heading element. Consumer picks the semantic level (h3, h4, etc.).
+ *
+ * @example
+ * ```html
+ * <com-alert>
+ *   <h4 comAlertTitle>Heads up</h4>
+ * </com-alert>
+ * ```
+ *
+ * @tokens `--color-foreground`
+ */
+class ComAlertTitle {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComAlertTitle, isStandalone: true, selector: "[comAlertTitle]", host: { classAttribute: "text-sm font-semibold leading-tight" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comAlertTitle]',
+                    host: {
+                        class: 'text-sm font-semibold leading-tight',
+                    },
+                }]
+        }] });
+
+/**
+ * Description slot for `com-alert`.
+ *
+ * Inherits text color from the parent alert variant.
+ *
+ * @example
+ * ```html
+ * <com-alert>
+ *   <p comAlertDescription>Your session will expire in 5 minutes.</p>
+ * </com-alert>
+ * ```
+ */
+class ComAlertDescription {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComAlertDescription, isStandalone: true, selector: "[comAlertDescription]", host: { classAttribute: "text-sm" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comAlertDescription]',
+                    host: {
+                        class: 'text-sm',
+                    },
+                }]
+        }] });
+
+/**
+ * Actions slot for `com-alert`.
+ *
+ * Container for action buttons. Place buttons inside.
+ *
+ * @example
+ * ```html
+ * <com-alert variant="destructive">
+ *   <h4 comAlertTitle>Account suspended</h4>
+ *   <p comAlertDescription>Contact support to restore access.</p>
+ *   <div comAlertActions>
+ *     <button comButton variant="outline" size="sm">Contact Support</button>
+ *   </div>
+ * </com-alert>
+ * ```
+ */
+class ComAlertActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: ComAlertActions, isStandalone: true, selector: "[comAlertActions]", host: { classAttribute: "mt-3 flex items-center gap-2" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComAlertActions, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[comAlertActions]',
+                    host: {
+                        class: 'mt-3 flex items-center gap-2',
+                    },
+                }]
+        }] });
+
+// Public API for the alert component
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComAlertActions, ComAlertComponent, ComAlertDescription, ComAlertIcon, ComAlertTitle, alertCloseButtonVariants, alertVariants };
+//# sourceMappingURL=ngx-com-components-alert.mjs.map

package/fesm2022/ngx-com-components-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-com-components-alert.mjs","sources":["../../../projects/com/components/alert/alert.variants.ts","../../../projects/com/components/alert/alert.utils.ts","../../../projects/com/components/alert/alert-icon.directive.ts","../../../projects/com/components/alert/alert.component.ts","../../../projects/com/components/alert/alert-title.directive.ts","../../../projects/com/components/alert/alert-description.directive.ts","../../../projects/com/components/alert/alert-actions.directive.ts","../../../projects/com/components/alert/index.ts","../../../projects/com/components/alert/ngx-com-components-alert.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport type { VariantProps } from 'class-variance-authority';\n\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'destructive';\n\n/**\n * CVA variants for the alert container.\n *\n * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,\n *         `--color-success-subtle`, `--color-success-subtle-foreground`,\n *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,\n *         `--color-warn`, `--color-warn-foreground`,\n *         `--radius-card`\n */\nexport const alertVariants: (props?: {\n  variant?: AlertVariant;\n}) => string = cva(\n  [\n    'relative',\n    'flex',\n    'w-full',\n    'items-start',\n    'gap-3',\n    'rounded-card',\n    'border',\n    'p-4',\n    'text-sm',\n  ],\n  {\n    variants: {\n      variant: {\n        info: 'bg-primary-subtle text-primary-subtle-foreground border-primary/20',\n        success: 'bg-success-subtle text-success-subtle-foreground border-success/20',\n        warning: 'bg-warn-subtle text-warn-subtle-foreground border-warn/20',\n        destructive: 'bg-warn text-warn-foreground border-warn',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n);\n\n/**\n * CVA variants for the alert close button.\n *\n * @tokens `--color-ring`, `--radius-card`\n */\nexport const alertCloseButtonVariants: (props?: {\n  variant?: AlertVariant;\n}) => string = cva(\n  [\n    'inline-flex',\n    'items-center',\n    'justify-center',\n    'shrink-0',\n    'rounded-card',\n    'p-0.5',\n    'transition-colors',\n    'outline-none',\n    'focus-visible:outline-2',\n    'focus-visible:outline-offset-2',\n    'focus-visible:outline-[--color-ring]',\n  ],\n  {\n    variants: {\n      variant: {\n        info: 'text-primary-subtle-foreground/60 hover:text-primary-subtle-foreground hover:bg-primary-subtle-foreground/10',\n        success: 'text-success-subtle-foreground/60 hover:text-success-subtle-foreground hover:bg-success-subtle-foreground/10',\n        warning: 'text-warn-subtle-foreground/60 hover:text-warn-subtle-foreground hover:bg-warn-subtle-foreground/10',\n        destructive: 'text-warn-foreground/60 hover:text-warn-foreground hover:bg-warn-foreground/10',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n);\n\nexport type AlertVariants = VariantProps<typeof alertVariants>;\n","export { mergeClasses } from 'ngx-com/utils';\n\nimport type { AlertVariant } from './alert.variants';\n\n/** Default Lucide icon names per alert variant. */\nexport const DEFAULT_ALERT_ICONS: Record<AlertVariant, string> = {\n  info: 'info',\n  success: 'circle-check',\n  warning: 'triangle-alert',\n  destructive: 'circle-x',\n};\n","import { Directive } from '@angular/core';\n\n/**\n * Custom icon slot for `com-alert`.\n *\n * When present, the alert suppresses the default auto-mapped icon\n * and renders this projected content instead.\n *\n * @example\n * ```html\n * <com-alert variant=\"success\">\n *   <com-icon comAlertIcon name=\"party-popper\" size=\"md\" aria-hidden=\"true\" />\n *   <h4 comAlertTitle>Congratulations!</h4>\n * </com-alert>\n * ```\n */\n@Directive({\n  selector: '[comAlertIcon]',\n  host: {\n    class: 'shrink-0 mt-0.5',\n  },\n})\nexport class ComAlertIcon {}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type {\n  InputSignal,\n  InputSignalWithTransform,\n  OutputEmitterRef,\n  Signal,\n  WritableSignal,\n} from '@angular/core';\nimport { ComIcon } from 'ngx-com/components/icon';\nimport { alertVariants, alertCloseButtonVariants } from './alert.variants';\nimport type { AlertVariant } from './alert.variants';\nimport { mergeClasses, DEFAULT_ALERT_ICONS } from './alert.utils';\nimport { ComAlertIcon } from './alert-icon.directive';\n\n/**\n * Inline alert component for displaying contextual messages.\n *\n * Unlike toasts (ephemeral overlays), alerts are embedded in the page flow\n * and persist until dismissed or the condition changes.\n *\n * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`,\n *         `--color-success-subtle`, `--color-success-subtle-foreground`,\n *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,\n *         `--color-warn`, `--color-warn-foreground`,\n *         `--radius-card`, `--color-ring`\n *\n * @example Info alert with title and description\n * ```html\n * <com-alert>\n *   <h4 comAlertTitle>Heads up</h4>\n *   <p comAlertDescription>You can add components using the CLI.</p>\n * </com-alert>\n * ```\n *\n * @example Dismissible warning\n * ```html\n * <com-alert variant=\"warning\" dismissible (dismissed)=\"onDismissed()\">\n *   <h4 comAlertTitle>Storage almost full</h4>\n *   <p comAlertDescription>You have used 90% of your storage quota.</p>\n * </com-alert>\n * ```\n */\n@Component({\n  selector: 'com-alert',\n  exportAs: 'comAlert',\n  template: `\n    @if (visible()) {\n      <div\n        [class]=\"alertClasses()\"\n        [attr.role]=\"ariaRole()\"\n        [attr.aria-live]=\"ariaLive()\"\n        [attr.data-state]=\"animatingOut() ? 'closed' : 'open'\"\n        (animationend)=\"onAnimationEnd()\"\n      >\n        @if (customIcon()) {\n          <ng-content select=\"[comAlertIcon]\" />\n        } @else {\n          <com-icon\n            [name]=\"defaultIconName()\"\n            size=\"md\"\n            class=\"mt-0.5 shrink-0\"\n            aria-hidden=\"true\"\n          />\n        }\n        <div class=\"flex-1 min-w-0\">\n          <ng-content />\n        </div>\n        @if (dismissible()) {\n          <button\n            type=\"button\"\n            [class]=\"closeButtonClasses()\"\n            aria-label=\"Dismiss\"\n            (click)=\"dismiss()\"\n          >\n            <com-icon name=\"x\" size=\"sm\" aria-hidden=\"true\" />\n          </button>\n        }\n      </div>\n    }\n  `,\n  styles: `\n    :host {\n      display: block;\n    }\n\n    [data-state='open'] {\n      --tw-enter-opacity: 0;\n      --tw-enter-translate-y: 0;\n    }\n\n    [data-state='closed'] {\n      --tw-exit-opacity: 0;\n      --tw-exit-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      [data-state='open'],\n      [data-state='closed'] {\n        animation: none;\n      }\n    }\n  `,\n  imports: [ComIcon],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ComAlertComponent {\n  /** Semantic color variant. */\n  readonly variant: InputSignal<AlertVariant> = input<AlertVariant>('info');\n\n  /** Shows a dismiss button when true. */\n  readonly dismissible: InputSignalWithTransform<boolean, unknown> = input(false, {\n    transform: booleanAttribute,\n  });\n\n  /** Consumer CSS classes — merged with variant classes. */\n  readonly userClass: InputSignal<string> = input<string>('', { alias: 'class' });\n\n  /** Emitted when the dismiss button is clicked. */\n  readonly dismissed: OutputEmitterRef<void> = output<void>();\n\n  /** @internal Detects whether a custom icon directive is projected. */\n  protected readonly customIcon: Signal<ComAlertIcon | undefined> =\n    contentChild<ComAlertIcon>(ComAlertIcon);\n\n  /** @internal Controls visibility for dismiss animation. */\n  protected readonly visible: WritableSignal<boolean> = signal(true);\n\n  /** @internal Tracks exit animation state. */\n  protected readonly animatingOut: WritableSignal<boolean> = signal(false);\n\n  /** Default icon name auto-mapped from variant. */\n  protected readonly defaultIconName: Signal<string> = computed(\n    () => DEFAULT_ALERT_ICONS[this.variant()],\n  );\n\n  /** ARIA role based on variant. */\n  protected readonly ariaRole: Signal<string> = computed(() => {\n    const v = this.variant();\n    return v === 'warning' || v === 'destructive' ? 'alert' : 'status';\n  });\n\n  /** ARIA live region politeness. */\n  protected readonly ariaLive: Signal<string> = computed(() => {\n    const v = this.variant();\n    return v === 'warning' || v === 'destructive' ? 'assertive' : 'polite';\n  });\n\n  /** Computed alert container classes. */\n  protected readonly alertClasses: Signal<string> = computed(() =>\n    mergeClasses(\n      alertVariants({ variant: this.variant() }),\n      this.animatingOut()\n        ? 'animate-out fade-out-0'\n        : 'animate-in fade-in-0',\n      this.userClass(),\n    ),\n  );\n\n  /** Computed close button classes. */\n  protected readonly closeButtonClasses: Signal<string> = computed(() =>\n    mergeClasses(alertCloseButtonVariants({ variant: this.variant() })),\n  );\n\n  /** @internal Triggers dismiss animation, then removes from DOM. */\n  protected dismiss(): void {\n    this.animatingOut.set(true);\n    this.dismissed.emit();\n  }\n\n  /** @internal Removes element after exit animation completes. */\n  protected onAnimationEnd(): void {\n    if (this.animatingOut()) {\n      this.visible.set(false);\n    }\n  }\n}\n","import { Directive } from '@angular/core';\n\n/**\n * Title slot for `com-alert`.\n *\n * Apply to any heading element. Consumer picks the semantic level (h3, h4, etc.).\n *\n * @example\n * ```html\n * <com-alert>\n *   <h4 comAlertTitle>Heads up</h4>\n * </com-alert>\n * ```\n *\n * @tokens `--color-foreground`\n */\n@Directive({\n  selector: '[comAlertTitle]',\n  host: {\n    class: 'text-sm font-semibold leading-tight',\n  },\n})\nexport class ComAlertTitle {}\n","import { Directive } from '@angular/core';\n\n/**\n * Description slot for `com-alert`.\n *\n * Inherits text color from the parent alert variant.\n *\n * @example\n * ```html\n * <com-alert>\n *   <p comAlertDescription>Your session will expire in 5 minutes.</p>\n * </com-alert>\n * ```\n */\n@Directive({\n  selector: '[comAlertDescription]',\n  host: {\n    class: 'text-sm',\n  },\n})\nexport class ComAlertDescription {}\n","import { Directive } from '@angular/core';\n\n/**\n * Actions slot for `com-alert`.\n *\n * Container for action buttons. Place buttons inside.\n *\n * @example\n * ```html\n * <com-alert variant=\"destructive\">\n *   <h4 comAlertTitle>Account suspended</h4>\n *   <p comAlertDescription>Contact support to restore access.</p>\n *   <div comAlertActions>\n *     <button comButton variant=\"outline\" size=\"sm\">Contact Support</button>\n *   </div>\n * </com-alert>\n * ```\n */\n@Directive({\n  selector: '[comAlertActions]',\n  host: {\n    class: 'mt-3 flex items-center gap-2',\n  },\n})\nexport class ComAlertActions {}\n","// Public API for the alert component\n\n// Main component\nexport { ComAlertComponent } from './alert.component';\n\n// Content projection directives\nexport { ComAlertIcon } from './alert-icon.directive';\nexport { ComAlertTitle } from './alert-title.directive';\nexport { ComAlertDescription } from './alert-description.directive';\nexport { ComAlertActions } from './alert-actions.directive';\n\n// Variants (for advanced customization)\nexport { alertVariants, alertCloseButtonVariants } from './alert.variants';\n\nexport type {\n  AlertVariant,\n  AlertVariants,\n} from './alert.variants';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-com-components-button.mjs

@@ -7,7 +7,7 @@ const buttonVariants = cva([
     'inline-flex items-center justify-center',
     'font-medium whitespace-nowrap select-none',
     'transition-colors duration-150',
-    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+    'focus-visible:outline-[1px] focus-visible:outline-offset-2 focus-visible:outline-ring',
     'disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground',
     'aria-disabled:pointer-events-none aria-disabled:bg-disabled aria-disabled:text-disabled-foreground',
 ], {

package/fesm2022/ngx-com-components-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-com-components-button.mjs","sources":["../../../projects/com/components/button/button.variants.ts","../../../projects/com/components/button/button.directive.ts","../../../projects/com/components/button/ngx-com-components-button.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';\nexport type ButtonColor = 'primary' | 'accent' | 'warn' | 'muted';\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';\n\nexport const buttonVariants: (props?: {\n  variant?: ButtonVariant;\n  color?: ButtonColor;\n  size?: ButtonSize;\n  fullWidth?: boolean;\n}) => string = cva(\n  [\n    'inline-flex items-center justify-center',\n    'font-medium whitespace-nowrap select-none',\n    'transition-colors duration-150',\n    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n    'disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground',\n    'aria-disabled:pointer-events-none aria-disabled:bg-disabled aria-disabled:text-disabled-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        solid: '',\n        outline: 'border bg-transparent',\n        ghost: 'bg-transparent',\n        link: 'bg-transparent underline-offset-4 hover:underline',\n      },\n      color: {\n        primary: '',\n        accent: '',\n        warn: '',\n        muted: '',\n      },\n      size: {\n        sm: 'h-8 px-3 text-sm rounded-control-sm gap-1.5',\n        md: 'h-10 px-4 text-sm rounded-control gap-2',\n        lg: 'h-12 px-6 text-base rounded-control gap-2.5',\n        icon: 'h-10 w-10 rounded-control',\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // Solid variants\n      { variant: 'solid', color: 'primary', class: 'bg-primary text-primary-foreground hover:bg-primary-hover' },\n      { variant: 'solid', color: 'accent', class: 'bg-accent text-accent-foreground hover:bg-accent-hover' },\n      { variant: 'solid', color: 'warn', class: 'bg-warn text-warn-foreground hover:bg-warn-hover' },\n      { variant: 'solid', color: 'muted', class: 'bg-muted text-muted-foreground hover:bg-muted-hover' },\n\n      // Outline variants\n      { variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary-subtle' },\n      { variant: 'outline', color: 'accent', class: 'border-accent text-accent hover:bg-accent-subtle' },\n      { variant: 'outline', color: 'warn', class: 'border-warn text-warn hover:bg-warn-subtle' },\n      { variant: 'outline', color: 'muted', class: 'border-border text-muted-foreground hover:bg-muted' },\n\n      // Ghost variants\n      { variant: 'ghost', color: 'primary', class: 'text-primary hover:bg-primary-subtle' },\n      { variant: 'ghost', color: 'accent', class: 'text-accent hover:bg-accent-subtle' },\n      { variant: 'ghost', color: 'warn', class: 'text-warn hover:bg-warn-subtle' },\n      { variant: 'ghost', color: 'muted', class: 'text-muted-foreground hover:bg-muted' },\n\n      // Link variants\n      { variant: 'link', color: 'primary', class: 'text-primary' },\n      { variant: 'link', color: 'accent', class: 'text-accent' },\n      { variant: 'link', color: 'warn', class: 'text-warn' },\n      { variant: 'link', color: 'muted', class: 'text-muted-foreground' },\n\n      // Link size override — remove height/padding constraints\n      { variant: 'link', size: 'sm', class: 'h-auto px-0' },\n      { variant: 'link', size: 'md', class: 'h-auto px-0' },\n      { variant: 'link', size: 'lg', class: 'h-auto px-0' },\n      { variant: 'link', size: 'icon', class: 'h-auto w-auto px-0' },\n    ],\n    defaultVariants: {\n      variant: 'solid',\n      color: 'primary',\n      size: 'md',\n      fullWidth: false,\n    },\n  }\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n","import { booleanAttribute, computed, Directive, input } from '@angular/core';\nimport type { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';\nimport { mergeClasses } from './button.utils';\nimport { buttonVariants, type ButtonVariant, type ButtonColor, type ButtonSize } from './button.variants';\n\n/**\n * Button directive — applies styled button classes to native `<button>` and `<a>` elements.\n *\n * Using a directive on native elements preserves:\n * - Full control over native attributes (`type=\"submit\"`, `routerLink`, `download`, etc.)\n * - Native accessibility (keyboard handling, focus, ARIA)\n * - No wrapper elements in the DOM\n *\n * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`, `--color-primary-subtle`,\n *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`, `--color-accent-subtle`,\n *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`, `--color-warn-subtle`,\n *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,\n *         `--color-disabled`, `--color-disabled-foreground`,\n *         `--color-border`, `--color-ring`\n *\n * @example Basic usage\n * ```html\n * <button comButton>Save</button>\n * <button comButton variant=\"outline\" color=\"accent\">Cancel</button>\n * ```\n *\n * @example Link button\n * ```html\n * <a comButton variant=\"link\" href=\"/docs\">Documentation</a>\n * <a comButton variant=\"outline\" routerLink=\"/dashboard\">Dashboard</a>\n * ```\n *\n * @example Icon button\n * ```html\n * <button comButton variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">\n *   <svg>...</svg>\n * </button>\n * ```\n *\n * @example Full width\n * ```html\n * <button comButton fullWidth>Submit Application</button>\n * ```\n */\n@Directive({\n  selector: 'button[comButton], a[comButton]',\n  exportAs: 'comButton',\n  host: {\n    '[class]': 'computedClass()',\n    '[attr.aria-disabled]': 'ariaDisabled()',\n  },\n})\nexport class ComButton {\n  readonly variant: InputSignal<ButtonVariant> = input<ButtonVariant>('solid');\n  readonly color: InputSignal<ButtonColor> = input<ButtonColor>('primary');\n  readonly size: InputSignal<ButtonSize> = input<ButtonSize>('md');\n  readonly fullWidth: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n  readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n  readonly userClass: InputSignal<string> = input('', { alias: 'class' });\n\n  protected readonly ariaDisabled: Signal<'true' | null> = computed(() =>\n    this.disabled() ? 'true' : null\n  );\n\n  protected readonly computedClass: Signal<string> = computed(() =>\n    mergeClasses(\n      buttonVariants({\n        variant: this.variant(),\n        color: this.color(),\n        size: this.size(),\n        fullWidth: this.fullWidth(),\n      }),\n      this.disabled() && 'pointer-events-none',\n      this.userClass()\n    )\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-com-components-button.mjs","sources":["../../../projects/com/components/button/button.variants.ts","../../../projects/com/components/button/button.directive.ts","../../../projects/com/components/button/ngx-com-components-button.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';\nexport type ButtonColor = 'primary' | 'accent' | 'warn' | 'muted';\nexport type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';\n\nexport const buttonVariants: (props?: {\n  variant?: ButtonVariant;\n  color?: ButtonColor;\n  size?: ButtonSize;\n  fullWidth?: boolean;\n}) => string = cva(\n  [\n    'inline-flex items-center justify-center',\n    'font-medium whitespace-nowrap select-none',\n    'transition-colors duration-150',\n    'focus-visible:outline-[1px] focus-visible:outline-offset-2 focus-visible:outline-ring',\n    'disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground',\n    'aria-disabled:pointer-events-none aria-disabled:bg-disabled aria-disabled:text-disabled-foreground',\n  ],\n  {\n    variants: {\n      variant: {\n        solid: '',\n        outline: 'border bg-transparent',\n        ghost: 'bg-transparent',\n        link: 'bg-transparent underline-offset-4 hover:underline',\n      },\n      color: {\n        primary: '',\n        accent: '',\n        warn: '',\n        muted: '',\n      },\n      size: {\n        sm: 'h-8 px-3 text-sm rounded-control-sm gap-1.5',\n        md: 'h-10 px-4 text-sm rounded-control gap-2',\n        lg: 'h-12 px-6 text-base rounded-control gap-2.5',\n        icon: 'h-10 w-10 rounded-control',\n      },\n      fullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      // Solid variants\n      { variant: 'solid', color: 'primary', class: 'bg-primary text-primary-foreground hover:bg-primary-hover' },\n      { variant: 'solid', color: 'accent', class: 'bg-accent text-accent-foreground hover:bg-accent-hover' },\n      { variant: 'solid', color: 'warn', class: 'bg-warn text-warn-foreground hover:bg-warn-hover' },\n      { variant: 'solid', color: 'muted', class: 'bg-muted text-muted-foreground hover:bg-muted-hover' },\n\n      // Outline variants\n      { variant: 'outline', color: 'primary', class: 'border-primary text-primary hover:bg-primary-subtle' },\n      { variant: 'outline', color: 'accent', class: 'border-accent text-accent hover:bg-accent-subtle' },\n      { variant: 'outline', color: 'warn', class: 'border-warn text-warn hover:bg-warn-subtle' },\n      { variant: 'outline', color: 'muted', class: 'border-border text-muted-foreground hover:bg-muted' },\n\n      // Ghost variants\n      { variant: 'ghost', color: 'primary', class: 'text-primary hover:bg-primary-subtle' },\n      { variant: 'ghost', color: 'accent', class: 'text-accent hover:bg-accent-subtle' },\n      { variant: 'ghost', color: 'warn', class: 'text-warn hover:bg-warn-subtle' },\n      { variant: 'ghost', color: 'muted', class: 'text-muted-foreground hover:bg-muted' },\n\n      // Link variants\n      { variant: 'link', color: 'primary', class: 'text-primary' },\n      { variant: 'link', color: 'accent', class: 'text-accent' },\n      { variant: 'link', color: 'warn', class: 'text-warn' },\n      { variant: 'link', color: 'muted', class: 'text-muted-foreground' },\n\n      // Link size override — remove height/padding constraints\n      { variant: 'link', size: 'sm', class: 'h-auto px-0' },\n      { variant: 'link', size: 'md', class: 'h-auto px-0' },\n      { variant: 'link', size: 'lg', class: 'h-auto px-0' },\n      { variant: 'link', size: 'icon', class: 'h-auto w-auto px-0' },\n    ],\n    defaultVariants: {\n      variant: 'solid',\n      color: 'primary',\n      size: 'md',\n      fullWidth: false,\n    },\n  }\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n","import { booleanAttribute, computed, Directive, input } from '@angular/core';\nimport type { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';\nimport { mergeClasses } from './button.utils';\nimport { buttonVariants, type ButtonVariant, type ButtonColor, type ButtonSize } from './button.variants';\n\n/**\n * Button directive — applies styled button classes to native `<button>` and `<a>` elements.\n *\n * Using a directive on native elements preserves:\n * - Full control over native attributes (`type=\"submit\"`, `routerLink`, `download`, etc.)\n * - Native accessibility (keyboard handling, focus, ARIA)\n * - No wrapper elements in the DOM\n *\n * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`, `--color-primary-subtle`,\n *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`, `--color-accent-subtle`,\n *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`, `--color-warn-subtle`,\n *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,\n *         `--color-disabled`, `--color-disabled-foreground`,\n *         `--color-border`, `--color-ring`\n *\n * @example Basic usage\n * ```html\n * <button comButton>Save</button>\n * <button comButton variant=\"outline\" color=\"accent\">Cancel</button>\n * ```\n *\n * @example Link button\n * ```html\n * <a comButton variant=\"link\" href=\"/docs\">Documentation</a>\n * <a comButton variant=\"outline\" routerLink=\"/dashboard\">Dashboard</a>\n * ```\n *\n * @example Icon button\n * ```html\n * <button comButton variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">\n *   <svg>...</svg>\n * </button>\n * ```\n *\n * @example Full width\n * ```html\n * <button comButton fullWidth>Submit Application</button>\n * ```\n */\n@Directive({\n  selector: 'button[comButton], a[comButton]',\n  exportAs: 'comButton',\n  host: {\n    '[class]': 'computedClass()',\n    '[attr.aria-disabled]': 'ariaDisabled()',\n  },\n})\nexport class ComButton {\n  readonly variant: InputSignal<ButtonVariant> = input<ButtonVariant>('solid');\n  readonly color: InputSignal<ButtonColor> = input<ButtonColor>('primary');\n  readonly size: InputSignal<ButtonSize> = input<ButtonSize>('md');\n  readonly fullWidth: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n  readonly disabled: InputSignalWithTransform<boolean, unknown> = input(false, { transform: booleanAttribute });\n  readonly userClass: InputSignal<string> = input('', { alias: 'class' });\n\n  protected readonly ariaDisabled: Signal<'true' | null> = computed(() =>\n    this.disabled() ? 'true' : null\n  );\n\n  protected readonly computedClass: Signal<string> = computed(() =>\n    mergeClasses(\n      buttonVariants({\n        variant: this.variant(),\n        color: this.color(),\n        size: this.size(),\n        fullWidth: this.fullWidth(),\n      }),\n      this.disabled() && 'pointer-events-none',\n      this.userClass()\n    )\n  );\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-com-components-calendar.mjs

@@ -340,10 +340,9 @@ const calendarCellVariants = cva(
     'select-none',
     'transition-colors',
     'duration-150',
-    'outline-none',
-    'focus-visible:ring-2',
-    'focus-visible:ring-offset-2',
-    'focus-visible:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
 ], {
     variants: {
         view: {
@@ -483,11 +482,10 @@ const calendarHeaderButtonVariants = cva([
     'select-none',
     'transition-colors',
     'duration-150',
-    'outline-none',
     'text-foreground',
-    'focus-visible:ring-2',
-    'focus-visible:ring-offset-2',
-    'focus-visible:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
     'disabled:cursor-not-allowed',
     'disabled:text-disabled-foreground',
 ], {
@@ -3118,14 +3116,12 @@ const datepickerTriggerVariants = cva([
     'border',
     'bg-input-background',
     'text-input-foreground',
-    'ring-offset-background',
     'transition-colors',
     'duration-150',
     'placeholder:text-input-placeholder',
-    'focus-within:outline-none',
-    'focus-within:ring-2',
-    'focus-within:ring-offset-2',
-    'focus-within:ring-ring',
+    'focus-within:outline-[1px]',
+    'focus-within:outline-offset-2',
+    'focus-within:outline-ring',
     'cursor-pointer',
 ], {
     variants: {
@@ -3159,15 +3155,15 @@ const datepickerTriggerVariants = cva([
             default: [],
             error: [
                 'border-warn',
-                'focus-within:ring-warn',
+                'focus-within:outline-warn',
             ],
             success: [
                 'border-success',
-                'focus-within:ring-success',
+                'focus-within:outline-success',
             ],
         },
         open: {
-            true: ['ring-2', 'ring-ring', 'border-primary'],
+            true: ['outline-[1px]', 'outline-ring', 'border-primary'],
             false: [],
         },
     },
@@ -3240,9 +3236,9 @@ const datepickerIconVariants = cva([
     'text-muted-foreground',
     'transition-colors',
     'hover:text-foreground',
-    'focus:outline-none',
-    'focus:ring-1',
-    'focus:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
     'rounded-interactive-sm',
 ], {
     variants: {
@@ -3269,9 +3265,9 @@ const datepickerClearVariants = cva([
     'text-muted-foreground',
     'transition-colors',
     'hover:text-foreground',
-    'focus:outline-none',
-    'focus:ring-1',
-    'focus:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
     'shrink-0',
 ], {
     variants: {
@@ -3350,10 +3346,9 @@ const datepickerFooterButtonVariants = cva([
     'rounded-control-sm',
     'font-medium',
     'transition-colors',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-ring',
-    'focus:ring-offset-2',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
 ], {
     variants: {
         size: {
@@ -3424,11 +3419,9 @@ const timepickerContainerVariants = cva([
                 'border-input-border',
                 'bg-input-background',
                 'text-input-foreground',
-                'ring-offset-background',
-                'focus-within:outline-none',
-                'focus-within:ring-2',
-                'focus-within:ring-offset-2',
-                'focus-within:ring-ring',
+                'focus-within:outline-[1px]',
+                'focus-within:outline-offset-2',
+                'focus-within:outline-ring',
             ],
             embedded: [
                 'border-transparent',
@@ -3445,11 +3438,11 @@ const timepickerContainerVariants = cva([
             default: [],
             error: [
                 'border-warn',
-                'focus-within:ring-warn',
+                'focus-within:outline-warn',
             ],
             success: [
                 'border-success',
-                'focus-within:ring-success',
+                'focus-within:outline-success',
             ],
         },
     },
@@ -3547,9 +3540,9 @@ const timepickerPeriodVariants = cva([
     'bg-muted',
     'text-muted-foreground',
     'hover:bg-muted-hover',
-    'focus:outline-none',
-    'focus:ring-1',
-    'focus:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
 ], {
     variants: {
         size: {