@cdevhub/ngx-tw 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Iuga Ciprian
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# ngx-tw
+
+An Angular component library for applications built with **Tailwind CSS v4+**
+and **Angular CDK**. The quality bar is [Angular Material](https://material.angular.io/)
+— well-tested, accessible, composable — but styled with Tailwind utility classes
+instead of Material Design tokens.
+
+- **37 components** covering common UI needs (buttons, inputs, overlays,
+  navigation, data display, etc.)
+- **Standalone, signal-based APIs** — Angular v21 idioms throughout (no
+  NgModules, `OnPush`, `input()`/`output()`/`model()`).
+- **Accessible by default** — built on Angular CDK primitives (focus management,
+  overlays, a11y, collections). WCAG AA.
+- **Tailwind v4 native** — no component CSS files; consumers control theming
+  through semantic tokens.
+- **Tree-shakeable secondary entry points** — import only what you use.
+
+## Installation
+
+```bash
+npm install @cdevhub/ngx-tw @angular/cdk tailwindcss tailwind-variants
+```
+
+**Peer requirements**
+
+- Angular `^21.2.0` (`@angular/core`, `@angular/common`)
+- `@angular/cdk` `^21.0.0`
+- `tailwindcss` `^4.0.0`
+- `tailwind-variants` `^0.3.0`
+
+## Setup
+
+### 1. Import the default theme
+
+Tailwind v4 has no JS config file — all customization happens in CSS. Add the
+ngx-tw default theme to your global stylesheet so semantic tokens resolve:
+
+```css
+/* src/styles.css */
+@import 'tailwindcss';
+@import '@cdevhub/ngx-tw/theme/index.css';
+```
+
+The default theme maps semantic roles (`info`, `success`, `warning`, `error`,
+`primary`, `secondary`, `accent`, `neutral`) and structural tokens (`surface`,
+`fg`, `border`) to Tailwind's palette, with dark mode support out of the box.
+
+### 2. Use components
+
+Import from the per-component entry points for best tree-shaking:
+
+```ts
+import { Component } from '@angular/core';
+import { ButtonDirective } from '@cdevhub/ngx-tw/button';
+import { AlertComponent } from '@cdevhub/ngx-tw/alert';
+
+@Component({
+  selector: 'app-root',
+  imports: [ButtonDirective, AlertComponent],
+  template: `
+    <button twButton color="primary">Save</button>
+    <tw-alert color="success">Changes saved.</tw-alert>
+  `,
+})
+export class AppComponent {}
+```
+
+## Customizing the theme
+
+Override any semantic token in your own CSS using Tailwind v4's `@theme` block:
+
+```css
+@import '@cdevhub/ngx-tw/theme/index.css';
+
+@theme {
+  /* Re-brand primary to a custom indigo */
+  --color-primary-500: oklch(0.55 0.2 260);
+  --color-primary-600: oklch(0.48 0.2 260);
+
+  /* Remap "info" to the sky palette */
+  --color-info-50: var(--color-sky-50);
+  --color-info-500: var(--color-sky-500);
+}
+```
+
+Dark mode is handled entirely by the theme layer — swap in your own
+`index.css` equivalent (or extend the ngx-tw one) if you need a different
+dark palette. Components only reference semantic tokens, so they adapt
+automatically.
+
+## Components
+
+All components are exposed as independent secondary entry points:
+
+```
+@cdevhub/ngx-tw/accordion          @cdevhub/ngx-tw/input                @cdevhub/ngx-tw/sort
+@cdevhub/ngx-tw/alert              @cdevhub/ngx-tw/item                 @cdevhub/ngx-tw/spinner
+@cdevhub/ngx-tw/avatar             @cdevhub/ngx-tw/menu                 @cdevhub/ngx-tw/stepper
+@cdevhub/ngx-tw/badge              @cdevhub/ngx-tw/paginator            @cdevhub/ngx-tw/switch
+@cdevhub/ngx-tw/button             @cdevhub/ngx-tw/popover              @cdevhub/ngx-tw/tab-nav
+@cdevhub/ngx-tw/calendar           @cdevhub/ngx-tw/progress-bar         @cdevhub/ngx-tw/table
+@cdevhub/ngx-tw/card               @cdevhub/ngx-tw/radio                @cdevhub/ngx-tw/tabs
+@cdevhub/ngx-tw/checkbox           @cdevhub/ngx-tw/segmented-control    @cdevhub/ngx-tw/time-picker
+@cdevhub/ngx-tw/code-block         @cdevhub/ngx-tw/select               @cdevhub/ngx-tw/toast
+@cdevhub/ngx-tw/collapsible        @cdevhub/ngx-tw/separator            @cdevhub/ngx-tw/tooltip
+@cdevhub/ngx-tw/command-palette    @cdevhub/ngx-tw/skeleton
+@cdevhub/ngx-tw/date-picker        @cdevhub/ngx-tw/slider
+@cdevhub/ngx-tw/dialog             @cdevhub/ngx-tw/form-field
+@cdevhub/ngx-tw/flip-card          @cdevhub/ngx-tw/icon
+```
+
+Shared types (`TwColor`, `TwSize`) live in `@cdevhub/ngx-tw/core`.
+
+A catch-all entry (`@cdevhub/ngx-tw`) re-exports every public API for convenience, but
+per-component imports are preferred for tree-shaking.
+
+## Form controls
+
+Interactive controls (input, select, checkbox, radio, switch, slider,
+date-picker, time-picker, etc.) implement `ControlValueAccessor` and work with
+all three Angular form strategies — template-driven, reactive, and
+signal-based forms.
+
+## Building locally
+
+```bash
+ng build ngx-tw              # build library to dist/ngx-tw
+ng test ngx-tw --no-watch    # run unit tests (Vitest)
+ng serve demo                # run the demo app
+```
+
+## License
+
+[MIT](./LICENSE) © Iuga Ciprian

package/fesm2022/cdevhub-ngx-tw-accordion.mjs

@@ -0,0 +1,108 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { tv } from 'tailwind-variants';
+import { CollapsibleGroupComponent } from '@cdevhub/ngx-tw/collapsible';
+
+// ── tv() config ──
+const accordionVariants = tv({
+    slots: {
+        root: 'block',
+    },
+    variants: {
+        variant: {
+            default: {
+                root: 'rounded-lg overflow-hidden divide-y divide-border',
+            },
+            bordered: {
+                root: 'rounded-lg overflow-hidden divide-y divide-border border border-border',
+            },
+            ghost: {
+                root: '',
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+}, {
+    twMerge: true,
+});
+// ── AccordionComponent ──
+/**
+ * Accordion — single- or multiple-open-panel group built on top of
+ * `<tw-collapsible>` children. Extends `CollapsibleGroupComponent` to inherit
+ * the keyboard navigation, value-sync, and toggle wiring; overrides the
+ * virtual `isAccordionMode()` / `canCollapseSingleMode()` hooks so the
+ * single-mode behaviour is driven from the local `type` + `collapsible`
+ * inputs instead of the parent's `accordion` input. The `hostRole` and
+ * `hostClasses` signals are also overridden so the accordion drops APG's
+ * `role="group"` and renders the variant-driven container classes.
+ *
+ * The `providers` block exposes the accordion instance to its descendant
+ * collapsibles via the `CollapsibleGroupComponent` DI token — Angular DI
+ * uses class identity rather than the prototype chain, so the explicit
+ * `useExisting` is required even though `AccordionComponent extends
+ * CollapsibleGroupComponent`.
+ */
+class AccordionComponent extends CollapsibleGroupComponent {
+    /** Open mode. `'single'` allows one panel open at a time; `'multiple'` allows many. Defaults to `'single'`. */
+    type = input('single', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Visual style of the accordion container. Defaults to `'default'`. */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** In `'single'` mode, whether re-clicking the open panel closes it. Defaults to `true` — accordions are collapsible by definition; opt-out only. */
+    collapsible = input(true, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Accessible name for the accordion. Use when surrounding context doesn't make the purpose obvious. */
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** ID(s) of element(s) that label the accordion. Use instead of `aria-label` when a visible heading is available. */
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    // ── Inherited-binding overrides ──
+    /** @internal APG: accordions don't carry `role="group"`. */
+    hostRole = computed(() => null, ...(ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []));
+    /** @internal Variant-driven container classes; replaces the parent's default group string. */
+    hostClasses = computed(() => accordionVariants({ variant: this.variant() }).root(), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    // ── Virtual-hook overrides ──
+    /** @internal Drive single-open-panel behaviour from `type`, ignoring the inherited `accordion` input. */
+    isAccordionMode() {
+        return this.type() === 'single';
+    }
+    /** @internal Honour the `collapsible` opt-out in single mode. */
+    canCollapseSingleMode() {
+        return this.collapsible();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: AccordionComponent, isStandalone: true, selector: "tw-accordion", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-multiselectable": "type() === 'multiple' ? 'true' : 'false'", "attr.aria-label": "ariaLabel() ?? null", "attr.aria-labelledby": "ariaLabelledby() ?? null" } }, providers: [
+            {
+                provide: CollapsibleGroupComponent,
+                useExisting: forwardRef(() => AccordionComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AccordionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-accordion',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        // `[class]` + `[attr.role]` are inherited from the parent's host metadata
+                        // and read the overridden `hostClasses` / `hostRole` computeds below.
+                        // We only need to add accordion-specific bindings here.
+                        '[attr.aria-multiselectable]': "type() === 'multiple' ? 'true' : 'false'",
+                        '[attr.aria-label]': 'ariaLabel() ?? null',
+                        '[attr.aria-labelledby]': 'ariaLabelledby() ?? null',
+                    },
+                    template: `<ng-content />`,
+                    providers: [
+                        {
+                            provide: CollapsibleGroupComponent,
+                            useExisting: forwardRef(() => AccordionComponent),
+                        },
+                    ],
+                }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionComponent };
+//# sourceMappingURL=cdevhub-ngx-tw-accordion.mjs.map

package/fesm2022/cdevhub-ngx-tw-accordion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-accordion.mjs","sources":["../../../projects/ngx-tw/accordion/accordion.ts","../../../projects/ngx-tw/accordion/cdevhub-ngx-tw-accordion.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport { CollapsibleGroupComponent } from '@cdevhub/ngx-tw/collapsible';\n\n/** Open mode of the accordion. */\nexport type AccordionType = 'single' | 'multiple';\n\n/** Visual style of the accordion container. */\nexport type AccordionVariant = 'default' | 'bordered' | 'ghost';\n\n// ── tv() config ──\n\nconst accordionVariants = tv(\n  {\n    slots: {\n      root: 'block',\n    },\n    variants: {\n      variant: {\n        default: {\n          root: 'rounded-lg overflow-hidden divide-y divide-border',\n        },\n        bordered: {\n          root: 'rounded-lg overflow-hidden divide-y divide-border border border-border',\n        },\n        ghost: {\n          root: '',\n        },\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n  {\n    twMerge: true,\n  },\n);\n\n// ── AccordionComponent ──\n\n/**\n * Accordion — single- or multiple-open-panel group built on top of\n * `<tw-collapsible>` children. Extends `CollapsibleGroupComponent` to inherit\n * the keyboard navigation, value-sync, and toggle wiring; overrides the\n * virtual `isAccordionMode()` / `canCollapseSingleMode()` hooks so the\n * single-mode behaviour is driven from the local `type` + `collapsible`\n * inputs instead of the parent's `accordion` input. The `hostRole` and\n * `hostClasses` signals are also overridden so the accordion drops APG's\n * `role=\"group\"` and renders the variant-driven container classes.\n *\n * The `providers` block exposes the accordion instance to its descendant\n * collapsibles via the `CollapsibleGroupComponent` DI token — Angular DI\n * uses class identity rather than the prototype chain, so the explicit\n * `useExisting` is required even though `AccordionComponent extends\n * CollapsibleGroupComponent`.\n */\n@Component({\n  selector: 'tw-accordion',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // `[class]` + `[attr.role]` are inherited from the parent's host metadata\n    // and read the overridden `hostClasses` / `hostRole` computeds below.\n    // We only need to add accordion-specific bindings here.\n    '[attr.aria-multiselectable]': \"type() === 'multiple' ? 'true' : 'false'\",\n    '[attr.aria-label]': 'ariaLabel() ?? null',\n    '[attr.aria-labelledby]': 'ariaLabelledby() ?? null',\n  },\n  template: `<ng-content />`,\n  providers: [\n    {\n      provide: CollapsibleGroupComponent,\n      useExisting: forwardRef(() => AccordionComponent),\n    },\n  ],\n})\nexport class AccordionComponent extends CollapsibleGroupComponent {\n  /** Open mode. `'single'` allows one panel open at a time; `'multiple'` allows many. Defaults to `'single'`. */\n  readonly type = input<AccordionType>('single');\n\n  /** Visual style of the accordion container. Defaults to `'default'`. */\n  readonly variant = input<AccordionVariant>('default');\n\n  /** In `'single'` mode, whether re-clicking the open panel closes it. Defaults to `true` — accordions are collapsible by definition; opt-out only. */\n  readonly collapsible = input(true, { transform: booleanAttribute });\n\n  /** Accessible name for the accordion. Use when surrounding context doesn't make the purpose obvious. */\n  readonly ariaLabel = input<string | undefined>(undefined, { alias: 'aria-label' });\n\n  /** ID(s) of element(s) that label the accordion. Use instead of `aria-label` when a visible heading is available. */\n  readonly ariaLabelledby = input<string | undefined>(undefined, { alias: 'aria-labelledby' });\n\n  // ── Inherited-binding overrides ──\n\n  /** @internal APG: accordions don't carry `role=\"group\"`. */\n  override readonly hostRole = computed<string | null>(() => null);\n\n  /** @internal Variant-driven container classes; replaces the parent's default group string. */\n  override readonly hostClasses = computed(() =>\n    accordionVariants({ variant: this.variant() }).root(),\n  );\n\n  // ── Virtual-hook overrides ──\n\n  /** @internal Drive single-open-panel behaviour from `type`, ignoring the inherited `accordion` input. */\n  protected override isAccordionMode(): boolean {\n    return this.type() === 'single';\n  }\n\n  /** @internal Honour the `collapsible` opt-out in single mode. */\n  protected override canCollapseSingleMode(): boolean {\n    return this.collapsible();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/cdevhub-ngx-tw-alert.mjs

@@ -0,0 +1,240 @@
+import * as i0 from '@angular/core';
+import { inject, Directive, input, booleanAttribute, output, contentChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { tv } from 'tailwind-variants';
+
+function softSlots(role) {
+    return {
+        root: `bg-${role}-soft text-${role}-soft-fg-muted`,
+        icon: `text-${role}-icon`,
+        title: `text-${role}-soft-fg`,
+        content: `text-${role}-soft-fg-muted`,
+        dismiss: `text-${role}-icon hover:bg-${role}-soft-hover`,
+    };
+}
+function outlineSlots(role) {
+    return {
+        root: `border-${role}-border text-${role}-soft-fg-muted`,
+        icon: `text-${role}-icon`,
+        title: `text-${role}-soft-fg`,
+        content: `text-${role}-soft-fg-muted`,
+        dismiss: `text-${role}-icon hover:bg-${role}-soft`,
+    };
+}
+function solidSlots(role) {
+    return {
+        root: `bg-${role}-solid text-${role}-solid-fg`,
+        icon: `text-${role}-solid-fg`,
+        title: `text-${role}-solid-fg`,
+        content: `text-${role}-solid-fg`,
+        dismiss: `text-${role}-solid-fg/80 hover:bg-${role}-solid-hover`,
+    };
+}
+const ROLES = [
+    'primary', 'secondary', 'accent', 'neutral',
+    'info', 'success', 'warning', 'error',
+];
+const alertVariants = tv({
+    slots: {
+        root: 'relative flex gap-3 rounded-lg p-4 text-sm',
+        icon: 'size-5 shrink-0 mt-0.5',
+        title: 'text-sm font-semibold',
+        content: 'text-sm',
+        actions: 'flex items-center gap-2 mt-2',
+        // size-3.5 inner glyph: half-step decorative — keeps the X visually centred
+        // in the size-6 square-interactive target without dominating the button.
+        dismiss: 'absolute top-2.5 right-2.5 inline-flex items-center justify-center size-6 rounded-md cursor-pointer transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+    },
+    variants: {
+        variant: {
+            solid: { root: '' },
+            outline: { root: 'border' },
+            soft: { root: '' },
+        },
+        color: Object.fromEntries(ROLES.map((r) => [r, {}])),
+    },
+    compoundVariants: ROLES.flatMap((role) => [
+        { variant: 'soft', color: role, class: softSlots(role) },
+        { variant: 'outline', color: role, class: outlineSlots(role) },
+        { variant: 'solid', color: role, class: solidSlots(role) },
+    ]),
+    defaultVariants: {
+        variant: 'soft',
+        color: 'info',
+    },
+}, {
+    twMerge: true,
+});
+class AlertIconDirective {
+    alert = inject(AlertComponent);
+    classes = this.alert.iconClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AlertIconDirective, isStandalone: true, selector: "[twAlertIcon]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twAlertIcon]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+class AlertTitleDirective {
+    alert = inject(AlertComponent);
+    classes = this.alert.titleClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AlertTitleDirective, isStandalone: true, selector: "[twAlertTitle]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twAlertTitle]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+class AlertContentDirective {
+    alert = inject(AlertComponent);
+    classes = this.alert.contentClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AlertContentDirective, isStandalone: true, selector: "[twAlertContent]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twAlertContent]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+class AlertActionsDirective {
+    alert = inject(AlertComponent);
+    classes = this.alert.actionsClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: AlertActionsDirective, isStandalone: true, selector: "[twAlertActions]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twAlertActions]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+class AlertComponent {
+    /** Controls the visual style of the alert. Defaults to `'soft'`. */
+    variant = input('soft', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Sets the semantic color palette. Defaults to `'info'`. */
+    color = input('info', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** When true, renders a dismiss button. Defaults to `false`. */
+    dismissible = input(false, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Sets the ARIA live-region politeness. Maps to the host `role`:
+     * `'assertive'` → `role="alert"`, `'polite'` → `role="status"`,
+     * `'off'` → no role. Use `'off'` to suppress re-announcement when the
+     * alert content updates after initial render — assistive tech treats the
+     * alert as a static region rather than a live region. Defaults to `'polite'`.
+     */
+    politeness = input('polite', ...(ngDevMode ? [{ debugName: "politeness" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the dismiss button. Override for localization. Defaults to `'Dismiss'`. */
+    dismissLabel = input('Dismiss', ...(ngDevMode ? [{ debugName: "dismissLabel" }] : /* istanbul ignore next */ []));
+    /** Fires when the dismiss button is clicked. */
+    dismissed = output();
+    /** @internal */
+    iconDirective = contentChild(AlertIconDirective, ...(ngDevMode ? [{ debugName: "iconDirective" }] : /* istanbul ignore next */ []));
+    hasIcon = computed(() => !!this.iconDirective(), ...(ngDevMode ? [{ debugName: "hasIcon" }] : /* istanbul ignore next */ []));
+    computedRole = computed(() => {
+        switch (this.politeness()) {
+            case 'assertive':
+                return 'alert';
+            case 'polite':
+                return 'status';
+            default:
+                return null;
+        }
+    }, ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => alertVariants({
+        variant: this.variant(),
+        color: this.color(),
+    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => {
+        const base = this.variantResult().root();
+        return this.dismissible() ? `${base} pr-10` : base;
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => this.variantResult().icon(), ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => this.variantResult().title(), ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    contentClasses = computed(() => this.variantResult().content(), ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
+    actionsClasses = computed(() => this.variantResult().actions(), ...(ngDevMode ? [{ debugName: "actionsClasses" }] : /* istanbul ignore next */ []));
+    dismissClasses = computed(() => this.variantResult().dismiss(), ...(ngDevMode ? [{ debugName: "dismissClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AlertComponent, isStandalone: true, selector: "tw-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, politeness: { classPropertyName: "politeness", publicName: "politeness", isSignal: true, isRequired: false, transformFunction: null }, dismissLabel: { classPropertyName: "dismissLabel", publicName: "dismissLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "attr.role": "computedRole()", "class": "rootClasses()", "animate.leave": "\"fade-out\"" } }, queries: [{ propertyName: "iconDirective", first: true, predicate: AlertIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (hasIcon()) {
+      <ng-content select="[twAlertIcon]" />
+    }
+    <div class="min-w-0 flex-1">
+      <ng-content select="[twAlertTitle]" />
+      <ng-content select="[twAlertContent]" />
+      <ng-content />
+      <ng-content select="[twAlertActions]" />
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        [attr.aria-label]="dismissLabel()"
+        [class]="dismissClasses()"
+        (click)="dismissed.emit()"
+      >
+        <!-- size-3.5 (14px) is the half-step between size-3 and size-4 — the only icon size that visually aligns with the alert title's text-sm metric inside the compact xs-density dismiss button. -->
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3.5">
+          <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
+        </svg>
+      </button>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AlertComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-alert',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[attr.role]': 'computedRole()',
+                        '[class]': 'rootClasses()',
+                        '[animate.leave]': '"fade-out"',
+                    },
+                    template: `
+    @if (hasIcon()) {
+      <ng-content select="[twAlertIcon]" />
+    }
+    <div class="min-w-0 flex-1">
+      <ng-content select="[twAlertTitle]" />
+      <ng-content select="[twAlertContent]" />
+      <ng-content />
+      <ng-content select="[twAlertActions]" />
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        [attr.aria-label]="dismissLabel()"
+        [class]="dismissClasses()"
+        (click)="dismissed.emit()"
+      >
+        <!-- size-3.5 (14px) is the half-step between size-3 and size-4 — the only icon size that visually aligns with the alert title's text-sm metric inside the compact xs-density dismiss button. -->
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3.5">
+          <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
+        </svg>
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], politeness: [{ type: i0.Input, args: [{ isSignal: true, alias: "politeness", required: false }] }], dismissLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], iconDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AlertIconDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertActionsDirective, AlertComponent, AlertContentDirective, AlertIconDirective, AlertTitleDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-alert.mjs.map

package/fesm2022/cdevhub-ngx-tw-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdevhub-ngx-tw-alert.mjs","sources":["../../../projects/ngx-tw/alert/alert.ts","../../../projects/ngx-tw/alert/cdevhub-ngx-tw-alert.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  Directive,\n  inject,\n  input,\n  output,\n} from '@angular/core';\nimport { tv } from 'tailwind-variants';\nimport type { TwColor } from '@cdevhub/ngx-tw/core';\n\n/** Visual style of the alert container. */\nexport type AlertVariant = 'solid' | 'outline' | 'soft';\n\n/** ARIA live-region politeness for the alert. Maps to the host `role`. */\nexport type AlertPoliteness = 'polite' | 'assertive' | 'off';\n\n/**\n * Alert variants use the semantic role slot tokens defined in\n * `projects/ngx-tw/theme/_semantic.css` (and redefined per-theme in\n * `_dark.css` / `_high-contrast.css`). The mapping role × variant → slots\n * is the same for every color, so the variant table is expressed as a single\n * function template over the role name — no per-role copy-paste, no shade\n * picks, no `dark:` overrides. Dark / high-contrast contrast is owned by the\n * theme tokens; components only consume slots.\n */\ntype AlertSlotClasses = {\n  root: string;\n  icon: string;\n  title: string;\n  content: string;\n  dismiss: string;\n};\n\nfunction softSlots(role: TwColor): AlertSlotClasses {\n  return {\n    root: `bg-${role}-soft text-${role}-soft-fg-muted`,\n    icon: `text-${role}-icon`,\n    title: `text-${role}-soft-fg`,\n    content: `text-${role}-soft-fg-muted`,\n    dismiss: `text-${role}-icon hover:bg-${role}-soft-hover`,\n  };\n}\n\nfunction outlineSlots(role: TwColor): AlertSlotClasses {\n  return {\n    root: `border-${role}-border text-${role}-soft-fg-muted`,\n    icon: `text-${role}-icon`,\n    title: `text-${role}-soft-fg`,\n    content: `text-${role}-soft-fg-muted`,\n    dismiss: `text-${role}-icon hover:bg-${role}-soft`,\n  };\n}\n\nfunction solidSlots(role: TwColor): AlertSlotClasses {\n  return {\n    root: `bg-${role}-solid text-${role}-solid-fg`,\n    icon: `text-${role}-solid-fg`,\n    title: `text-${role}-solid-fg`,\n    content: `text-${role}-solid-fg`,\n    dismiss: `text-${role}-solid-fg/80 hover:bg-${role}-solid-hover`,\n  };\n}\n\nconst ROLES: readonly TwColor[] = [\n  'primary', 'secondary', 'accent', 'neutral',\n  'info', 'success', 'warning', 'error',\n] as const;\n\nconst alertVariants = tv({\n  slots: {\n    root: 'relative flex gap-3 rounded-lg p-4 text-sm',\n    icon: 'size-5 shrink-0 mt-0.5',\n    title: 'text-sm font-semibold',\n    content: 'text-sm',\n    actions: 'flex items-center gap-2 mt-2',\n    // size-3.5 inner glyph: half-step decorative — keeps the X visually centred\n    // in the size-6 square-interactive target without dominating the button.\n    dismiss:\n      'absolute top-2.5 right-2.5 inline-flex items-center justify-center size-6 rounded-md cursor-pointer transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',\n  },\n  variants: {\n    variant: {\n      solid: { root: '' },\n      outline: { root: 'border' },\n      soft: { root: '' },\n    },\n    color: Object.fromEntries(ROLES.map((r) => [r, {}])) as Record<TwColor, {}>,\n  },\n  compoundVariants: ROLES.flatMap((role) => [\n    { variant: 'soft' as const, color: role, class: softSlots(role) },\n    { variant: 'outline' as const, color: role, class: outlineSlots(role) },\n    { variant: 'solid' as const, color: role, class: solidSlots(role) },\n  ]),\n  defaultVariants: {\n    variant: 'soft',\n    color: 'info',\n  },\n}, {\n  twMerge: true,\n});\n\n@Directive({\n  selector: '[twAlertIcon]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class AlertIconDirective {\n  private readonly alert = inject(AlertComponent);\n  readonly classes = this.alert.iconClasses;\n}\n\n@Directive({\n  selector: '[twAlertTitle]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class AlertTitleDirective {\n  private readonly alert = inject(AlertComponent);\n  readonly classes = this.alert.titleClasses;\n}\n\n@Directive({\n  selector: '[twAlertContent]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class AlertContentDirective {\n  private readonly alert = inject(AlertComponent);\n  readonly classes = this.alert.contentClasses;\n}\n\n@Directive({\n  selector: '[twAlertActions]',\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class AlertActionsDirective {\n  private readonly alert = inject(AlertComponent);\n  readonly classes = this.alert.actionsClasses;\n}\n\n@Component({\n  selector: 'tw-alert',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.role]': 'computedRole()',\n    '[class]': 'rootClasses()',\n    '[animate.leave]': '\"fade-out\"',\n  },\n  template: `\n    @if (hasIcon()) {\n      <ng-content select=\"[twAlertIcon]\" />\n    }\n    <div class=\"min-w-0 flex-1\">\n      <ng-content select=\"[twAlertTitle]\" />\n      <ng-content select=\"[twAlertContent]\" />\n      <ng-content />\n      <ng-content select=\"[twAlertActions]\" />\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        [attr.aria-label]=\"dismissLabel()\"\n        [class]=\"dismissClasses()\"\n        (click)=\"dismissed.emit()\"\n      >\n        <!-- size-3.5 (14px) is the half-step between size-3 and size-4 — the only icon size that visually aligns with the alert title's text-sm metric inside the compact xs-density dismiss button. -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" class=\"size-3.5\">\n          <path d=\"M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z\"/>\n        </svg>\n      </button>\n    }\n  `,\n})\nexport class AlertComponent {\n  /** Controls the visual style of the alert. Defaults to `'soft'`. */\n  readonly variant = input<AlertVariant>('soft');\n\n  /** Sets the semantic color palette. Defaults to `'info'`. */\n  readonly color = input<TwColor>('info');\n\n  /** When true, renders a dismiss button. Defaults to `false`. */\n  readonly dismissible = input(false, { transform: booleanAttribute });\n\n  /**\n   * Sets the ARIA live-region politeness. Maps to the host `role`:\n   * `'assertive'` → `role=\"alert\"`, `'polite'` → `role=\"status\"`,\n   * `'off'` → no role. Use `'off'` to suppress re-announcement when the\n   * alert content updates after initial render — assistive tech treats the\n   * alert as a static region rather than a live region. Defaults to `'polite'`.\n   */\n  readonly politeness = input<AlertPoliteness>('polite');\n\n  /** Accessible label for the dismiss button. Override for localization. Defaults to `'Dismiss'`. */\n  readonly dismissLabel = input<string>('Dismiss');\n\n  /** Fires when the dismiss button is clicked. */\n  readonly dismissed = output<void>();\n\n  /** @internal */\n  readonly iconDirective = contentChild(AlertIconDirective);\n\n  readonly hasIcon = computed(() => !!this.iconDirective());\n\n  readonly computedRole = computed(() => {\n    switch (this.politeness()) {\n      case 'assertive':\n        return 'alert';\n      case 'polite':\n        return 'status';\n      default:\n        return null;\n    }\n  });\n\n  private readonly variantResult = computed(() =>\n    alertVariants({\n      variant: this.variant(),\n      color: this.color(),\n    }),\n  );\n\n  readonly rootClasses = computed(() => {\n    const base = this.variantResult().root();\n    return this.dismissible() ? `${base} pr-10` : base;\n  });\n\n  readonly iconClasses = computed(() => this.variantResult().icon());\n  readonly titleClasses = computed(() => this.variantResult().title());\n  readonly contentClasses = computed(() => this.variantResult().content());\n  readonly actionsClasses = computed(() => this.variantResult().actions());\n  readonly dismissClasses = computed(() => this.variantResult().dismiss());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}