@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/accordion/fesm2022/accordion.mjs

@@ -12,10 +12,10 @@ class HlmAccordion {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     _computedClass = computed(() => hlm('tw:flex', this._brn.orientation() === 'horizontal' ? 'tw:flex-row' : 'tw:flex-col', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmAccordion, isStandalone: true, selector: "[hlmAccordion], hlm-accordion", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordion, inputs: ["type", "type", "orientation", "orientation"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmAccordion, isStandalone: true, selector: "[hlmAccordion], hlm-accordion", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordion, inputs: ["type", "type", "orientation", "orientation"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordion, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmAccordion], hlm-accordion',
@@ -33,8 +33,8 @@ class HlmAccordionContent extends BrnAccordionContent {
         return hlm('tw:grid tw:text-sm tw:transition-all', gridRows, this.userClass());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: HlmAccordionContent, isStandalone: true, selector: "hlm-accordion-content", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionContent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmAccordionContent, isStandalone: true, selector: "hlm-accordion-content", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, usesInheritance: true, ngImport: i0, template: `
     <div [attr.inert]="_inert()" style="tw:overflow:hidden">
       <div class="tw:flex tw:flex-col tw:gap-4 tw:text-balance tw:pb-4 tw:pt-0">
         <ng-content />
@@ -42,7 +42,7 @@ class HlmAccordionContent extends BrnAccordionContent {
     </div>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionContent, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-accordion-content',
@@ -65,10 +65,10 @@ class HlmAccordionIcon {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     _computedClass = computed(() => hlm('tw:text-muted-foreground tw:pointer-events-none tw:size-4 tw:shrink-0 tw:translate-y-0.5 tw:transition-transform tw:duration-200', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmAccordionIcon, isStandalone: true, selector: "ng-icon[egAccordionIcon], ng-icon[hlmAccIcon]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronDown }), provideHlmIconConfig({ size: 'sm' })], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmAccordionIcon, isStandalone: true, selector: "ng-icon[egAccordionIcon], ng-icon[hlmAccIcon]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, providers: [provideIcons({ lucideChevronDown }), provideHlmIconConfig({ size: 'sm' })], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-icon[egAccordionIcon], ng-icon[hlmAccIcon]',
@@ -83,10 +83,10 @@ class HlmAccordionItem {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     _computedClass = computed(() => hlm('tw:border-border tw:flex tw:flex-1 tw:flex-col tw:border-b', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmAccordionItem, isStandalone: true, selector: "[hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordionItem, inputs: ["isOpened", "isOpened"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmAccordionItem, isStandalone: true, selector: "[hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordionItem, inputs: ["isOpened", "isOpened"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item',
@@ -106,10 +106,10 @@ class HlmAccordionTrigger {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     _computedClass = computed(() => hlm('tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:flex tw:flex-1 tw:items-start tw:justify-between tw:gap-4 tw:rounded-md tw:py-4 tw:text-left tw:text-sm tw:font-medium tw:outline-none tw:transition-all tw:hover:underline tw:focus-visible:ring-[3px] tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:[&[data-state=open]>[egAccIcon]]:rotate-180', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmAccordionTrigger, isStandalone: true, selector: "[hlmAccordionTrigger]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--tw-ring-offset-shadow": "\"0 0 #000\"", "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordionTrigger }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmAccordionTrigger, isStandalone: true, selector: "[hlmAccordionTrigger]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--tw-ring-offset-shadow": "\"0 0 #000\"", "class": "_computedClass()" } }, hostDirectives: [{ directive: i1.BrnAccordionTrigger }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmAccordionTrigger]',
@@ -132,8 +132,8 @@ const HlmAccordionImports = [
     HlmAccordionContent,
 ];
 class HlmAccordionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionModule, imports: [HlmAccordion,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionModule, imports: [HlmAccordion,
             HlmAccordionItem,
             HlmAccordionTrigger,
             HlmAccordionIcon,
@@ -142,9 +142,9 @@ class HlmAccordionModule {
             HlmAccordionTrigger,
             HlmAccordionIcon,
             HlmAccordionContent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmAccordionImports],
@@ -157,4 +157,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmAccordion, HlmAccordionContent, HlmAccordionIcon, HlmAccordionImports, HlmAccordionItem, HlmAccordionModule, HlmAccordionTrigger };
-//# sourceMappingURL=accordion.mjs.map
+

package/alert/README.md

@@ -1,64 +1,373 @@
-# Alert
+# Alert (`@egose/shadcn-theme-ng/alert`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.2.0.
+A non-modal status banner in the shadcn/ui Alert style: an icon, a title, and a description
+arranged in a bordered, tone-colored box. Use it for inline feedback (success confirmations,
+warnings, informational hints) that stays visible in the page flow.
 
-## Code scaffolding
+This is a **pure styling layer — no brain primitive underneath**. `HlmAlert` and its pieces are
+plain attribute directives that compute shadcn classes with `cva` + `hlm()` from
+`@egose/shadcn-theme-ng/utils`. The host gets `role="alert"` automatically. `HlmAlertIcon` only
+applies the `sm` icon-size config (`provideHlmIconConfig`); pair it with an `ng-icon`.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+> **Ships as:** `@egose/shadcn-theme-ng/alert` and `@egose/shadcn-theme-ng-tw/alert`
+> (the `tw:`-prefixed Tailwind variant). Both expose the identical TypeScript surface; only the
+> emitted Tailwind class strings differ. See the [package README](../../README.md) for install
+> steps, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng generate component component-name
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# tw:-prefixed Tailwind variant
+npm install @egose/shadcn-theme-ng-tw
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+Peer dependencies (Angular, `@spartan-ng/brain`, `@ng-icons/*`, `rxjs`, …) are documented in the
+[package README](../../README.md#peer-dependencies). This subpath additionally relies at runtime on
+`@egose/shadcn-theme-ng/utils` (`hlm()`) and `@egose/shadcn-theme-ng/icon`
+(`provideHlmIconConfig`).
 
-```bash
-ng generate --help
+## Imports
+
+All symbols are exported from the subpath root (`projects/alert/src/public-api.ts`):
+
+```ts
+import {
+  HlmAlert,
+  HlmAlertTitle,
+  HlmAlertDescription,
+  HlmAlertIcon,
+  HlmAlertImports,
+  HlmAlertModule,
+  type AlertVariants,
+  type VariantType,
+  type AppearanceType,
+} from '@egose/shadcn-theme-ng/alert';
+// tw variant: replace with '@egose/shadcn-theme-ng-tw/alert'
 ```
 
-## Building
+Standalone component — spread the `*Imports` array:
 
-To build the library, run:
+```ts
+import { Component } from '@angular/core';
+import { HlmAlertImports } from '@egose/shadcn-theme-ng/alert';
 
-```bash
-ng build alert
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmAlertImports],
+  template: `...`,
+})
+export class DemoComponent {}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+NgModule-based consumer — import the module:
 
-### Publishing the Library
+```ts
+import { NgModule } from '@angular/core';
+import { HlmAlertModule } from '@egose/shadcn-theme-ng/alert';
 
-Once the project is built, you can publish your library by following these steps:
+@NgModule({ imports: [HlmAlertModule] })
+export class DemoModule {}
+```
 
-1. Navigate to the `dist` directory:
+## Anatomy / Structure
 
-   ```bash
-   cd dist/alert
-   ```
+```html
+<div hlmAlert variant="info" appearance="solid">
+  <ng-icon hlm hlmAlertIcon name="lucideInfo" />
+  <h4 hlmAlertTitle>Heads up</h4>
+  <p hlmAlertDescription>Detail text goes here.</p>
+</div>
+```
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+Real selectors (from source):
 
-## Running unit tests
+| Class                 | Selector(s)                             | Kind      |
+| --------------------- | --------------------------------------- | --------- |
+| `HlmAlert`            | `[hlmAlert]`                            | Directive |
+| `HlmAlertTitle`       | `[hlmAlertTitle]`                       | Directive |
+| `HlmAlertDescription` | `[hlmAlertDesc], [hlmAlertDescription]` | Directive |
+| `HlmAlertIcon`        | `[hlmAlertIcon]`                        | Directive |
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+When an `[hlmAlertIcon]` child is present, the host switches to a two-column grid
+(`grid-cols-[calc(theme(spacing.1)*4)_1fr]`) with the title/description placed in column 2 —
+no extra markup needed.
 
-```bash
-ng test
+## API reference
+
+### `HlmAlert` — `[hlmAlert]`
+
+| Input        | Type                                   | Default     | Description                                                      |
+| ------------ | -------------------------------------- | ----------- | ---------------------------------------------------------------- |
+| `variant`    | `AlertVariants['variant']` (see below) | `'primary'` | Color tone.                                                      |
+| `appearance` | `AlertVariants['appearance']`          | `'solid'`   | `'solid'` (saturated fill) or `'light'` (tinted `bg-*/20` fill). |
+| `class`      | `ClassValue`                           | `''`        | Extra classes merged via `hlm()`.                                |
+
+`variant` values: `primary` · `secondary` · `success` · `warning` · `danger` · `info` ·
+`light` · `dark` · `accent` · `destructive` · `muted` · `link` · `ghost`.
+
+`appearance` values: `solid` · `light`. Every `variant × light` pair has a dedicated
+`compoundVariants` entry (e.g. `warning + light` → `bg-warning/20 text-warning`).
+
+Exported helper types: `AlertVariants` (`VariantProps<typeof alertVariants>`), `VariantType`,
+`AppearanceType`.
+
+### `HlmAlertTitle` — `[hlmAlertTitle]`
+
+| Input   | Type         | Default | Description                       |
+| ------- | ------------ | ------- | --------------------------------- |
+| `class` | `ClassValue` | `''`    | Extra classes merged via `hlm()`. |
+
+Renders semibold, tracking-tight, single-line-clamped title text in grid column 2.
+
+### `HlmAlertDescription` — `[hlmAlertDesc], [hlmAlertDescription]`
+
+| Input   | Type         | Default | Description                       |
+| ------- | ------------ | ------- | --------------------------------- |
+| `class` | `ClassValue` | `''`    | Extra classes merged via `hlm()`. |
+
+Small relaxed-leading body text in grid column 2. Both selector spellings are equivalent.
+
+### `HlmAlertIcon` — `[hlmAlertIcon]`
+
+Size-only directive: provides `provideHlmIconConfig({ size: 'sm' })` so the decorated `ng-icon`
+renders small. It declares **no inputs** and adds no classes of its own — the parent `HlmAlert`
+stylesheet sizes/positions it (`size-4`, `translate-y-0.5`, `text-current`).
+
+## Examples
+
+### 1. Basic alert with icon, title, and description
+
+```ts
+import { Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideInfo } from '@ng-icons/lucide';
+import { HlmAlertImports } from '@egose/shadcn-theme-ng/alert';
+import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
+
+@Component({
+  selector: 'app-alert-basic',
+  standalone: true,
+  imports: [...HlmAlertImports, NgIcon, HlmIcon],
+  providers: [provideIcons({ lucideInfo })],
+  template: `
+    <div hlmAlert variant="info">
+      <ng-icon hlm hlmAlertIcon name="lucideInfo" />
+      <h4 hlmAlertTitle>Heads up</h4>
+      <p hlmAlertDescription>Your trial ends in 3 days. Upgrade to keep your data.</p>
+    </div>
+  `,
+})
+export class AlertBasicComponent {}
+```
+
+```html
+<app-alert-basic />
 ```
 
-## Running end-to-end tests
+### 2. All variants (solid)
 
-For end-to-end (e2e) testing, run:
+```ts
+import { Component } from '@angular/core';
+import { HlmAlertImports, type VariantType } from '@egose/shadcn-theme-ng/alert';
 
-```bash
-ng e2e
+@Component({
+  selector: 'app-alert-variants',
+  standalone: true,
+  imports: [...HlmAlertImports],
+  template: `
+    @for (v of variants; track v) {
+      <div hlmAlert [variant]="v" class="tw:mb-3">
+        <h4 hlmAlertTitle class="tw:capitalize">{{ v }}</h4>
+        <p hlmAlertDescription>This is the {{ v }} tone in solid appearance.</p>
+      </div>
+    }
+  `,
+})
+export class AlertVariantsComponent {
+  readonly variants: VariantType[] = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'light',
+    'dark',
+    'accent',
+    'destructive',
+    'muted',
+    'link',
+    'ghost',
+  ];
+}
+```
+
+### 3. Light appearance + semantic states
+
+```ts
+import { Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCircleCheck, lucideCircleAlert, lucideInfo } from '@ng-icons/lucide';
+import { HlmAlertImports } from '@egose/shadcn-theme-ng/alert';
+import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
+
+@Component({
+  selector: 'app-alert-states',
+  standalone: true,
+  imports: [...HlmAlertImports, NgIcon, HlmIcon],
+  providers: [provideIcons({ lucideCircleCheck, lucideCircleAlert, lucideInfo })],
+  template: `
+    <div hlmAlert variant="success" appearance="light" class="tw:mb-3">
+      <ng-icon hlm hlmAlertIcon name="lucideCircleCheck" />
+      <h4 hlmAlertTitle>Payment confirmed</h4>
+      <p hlmAlertDescription>Receipt #INV-2041 was emailed to you.</p>
+    </div>
+    <div hlmAlert variant="warning" appearance="light" class="tw:mb-3">
+      <ng-icon hlm hlmAlertIcon name="lucideCircleAlert" />
+      <h4 hlmAlertTitle>Storage almost full</h4>
+      <p hlmAlertDescription>You have used 9.2 of 10 GB.</p>
+    </div>
+    <div hlmAlert variant="destructive" appearance="light">
+      <ng-icon hlm hlmAlertIcon name="lucideCircleAlert" />
+      <h4 hlmAlertTitle>Deployment failed</h4>
+      <p hlmAlertDescription>Unit tests failed on step 4. See the logs.</p>
+    </div>
+  `,
+})
+export class AlertStatesComponent {}
+```
+
+### 4. Conditional alert driven by a signal (form error pattern)
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { HlmAlertImports, type VariantType } from '@egose/shadcn-theme-ng/alert';
+
+@Component({
+  selector: 'app-alert-conditional',
+  standalone: true,
+  imports: [...HlmAlertImports],
+  template: `
+    @if (tone(); as t) {
+      <div hlmAlert [variant]="t">
+        <h4 hlmAlertTitle>{{ title() }}</h4>
+        <p hlmAlertDescription>{{ message() }}</p>
+      </div>
+    }
+    <div class="tw:mt-3 tw:flex tw:gap-2">
+      <button (click)="show('success')">Succeed</button>
+      <button (click)="show('destructive')">Fail</button>
+      <button (click)="clear()">Clear</button>
+    </div>
+  `,
+})
+export class AlertConditionalComponent {
+  private readonly _tone = signal<VariantType | null>(null);
+  readonly tone = this._tone.asReadonly();
+  readonly title = computed(() => (this._tone() === 'success' ? 'Saved' : 'Something went wrong'));
+  readonly message = computed(() =>
+    this._tone() === 'success' ? 'Your changes were saved.' : 'Please fix the highlighted fields.',
+  );
+
+  show(t: VariantType) {
+    this._tone.set(t);
+  }
+  clear() {
+    this._tone.set(null);
+  }
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+### 5. Title-only and description-only compositions
+
+The title and description are independent directives — use either alone:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmAlertImports } from '@egose/shadcn-theme-ng/alert';
+
+@Component({
+  selector: 'app-alert-minimal',
+  standalone: true,
+  imports: [...HlmAlertImports],
+  template: `
+    <!-- title only -->
+    <div hlmAlert variant="muted" class="tw:mb-3">
+      <h4 hlmAlertTitle>Maintenance window: Sunday 02:00–04:00 UTC</h4>
+    </div>
+    <!-- description only, short spelling -->
+    <div hlmAlert variant="ghost">
+      <p hlmAlertDesc>Cookies help us improve. No action required.</p>
+    </div>
+  `,
+})
+export class AlertMinimalComponent {}
+```
+
+### 6. Dismissible alert + composition with a button
+
+```ts
+import { Component, signal } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideInfo, lucideX } from '@ng-icons/lucide';
+import { HlmAlertImports } from '@egose/shadcn-theme-ng/alert';
+import { HlmButtonImports } from '@egose/shadcn-theme-ng/button';
+import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
+
+@Component({
+  selector: 'app-alert-dismissible',
+  standalone: true,
+  imports: [...HlmAlertImports, ...HlmButtonImports, NgIcon, HlmIcon],
+  providers: [provideIcons({ lucideInfo, lucideX })],
+  template: `
+    @if (visible()) {
+      <div hlmAlert variant="info" class="tw:relative tw:pr-12">
+        <ng-icon hlm hlmAlertIcon name="lucideInfo" />
+        <h4 hlmAlertTitle>New version available</h4>
+        <p hlmAlertDescription>Restart the app to apply v2.4.1.</p>
+        <button
+          hlmBtn
+          variant="ghost"
+          size="icon-sm"
+          class="tw:absolute tw:top-2 tw:right-2"
+          (click)="visible.set(false)"
+          aria-label="Dismiss"
+        >
+          <ng-icon hlm name="lucideX" size="sm" />
+        </button>
+      </div>
+    }
+  `,
+})
+export class AlertDismissibleComponent {
+  readonly visible = signal(true);
+}
+```
+
+## Accessibility notes
+
+- The host carries `role="alert"`, so assistive technology announces content injected dynamically
+  (e.g. after a failed save). For purely decorative/informational banners that should not
+  interrupt, prefer `variant="muted"` copy and consider whether a `role="status"` wrapper of your
+  own is more appropriate — the role is baked into the directive and cannot be switched off.
+- Keep the title short and the description actionable; screen readers read both in DOM order
+  (icon → title → description).
+- Do not put interactive controls other than a dismiss button inside an `role="alert"` region;
+  links and buttons inside the description are allowed but keep them minimal.
+
+## Theming / CSS variables
+
+Class-based theming via `cva` variants (`bg-*/text-*` tokens); no component-specific CSS variables.
+Extend with `class` on any piece. The `link` and `ghost` variants are intentionally low-chrome for
+embedding alerts in prose or cards.
 
-## Additional Resources
+## Related subpaths
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- `@egose/shadcn-theme-ng/basic-alert` — ready-made `EgBasicAlert` (icon + title + description in one tag)
+- `@egose/shadcn-theme-ng/badge` — inline status chips for compact labeling
+- `@egose/shadcn-theme-ng/button` — dismiss/action buttons inside alerts
+- `@egose/shadcn-theme-ng/icon` — `HlmIcon` sizing and `provideHlmIconConfig`

package/alert/fesm2022/alert.mjs

@@ -68,7 +68,7 @@ const alertVariants = cva('tw:relative tw:w-full tw:items-start tw:gap-y-0.5 tw:
             class: 'tw:bg-dark/20 tw:text-dark tw:[&>[hlmAlertDescription]]:text-dark',
         },
         {
-            variant: 'accent',
+            variant: "tw:accent",
             appearance: 'light',
             class: 'tw:bg-accent/20 tw:text-accent tw:[&>[hlmAlertDescription]]:text-accent',
         },
@@ -109,10 +109,10 @@ class HlmAlert {
         appearance: this.appearance(),
     }), this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlert, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmAlert, isStandalone: true, selector: "[hlmAlert]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "class": "_computedClass()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlert, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmAlert, isStandalone: true, selector: "[hlmAlert]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlert, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmAlert]',
@@ -127,10 +127,10 @@ class HlmAlertDescription {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     _computedClass = computed(() => hlm('tw:text-current tw:col-start-2 tw:grid tw:justify-items-start tw:gap-1 tw:text-sm tw:[&_p]:leading-relaxed', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmAlertDescription, isStandalone: true, selector: "[hlmAlertDesc],[hlmAlertDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmAlertDescription, isStandalone: true, selector: "[hlmAlertDesc],[hlmAlertDescription]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmAlertDesc],[hlmAlertDescription]',
@@ -141,10 +141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class HlmAlertIcon {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmAlertIcon, isStandalone: true, selector: "[hlmAlertIcon]", providers: [provideHlmIconConfig({ size: 'sm' })], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmAlertIcon, isStandalone: true, selector: "[hlmAlertIcon]", providers: [provideHlmIconConfig({ size: 'sm' })], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmAlertIcon]',
@@ -156,10 +156,10 @@ class HlmAlertTitle {
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     _computedClass = computed(() => hlm('tw:col-start-2 tw:line-clamp-1 tw:min-h-4 tw:text-md tw:font-semibold tw:tracking-tight', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmAlertTitle, isStandalone: true, selector: "[hlmAlertTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmAlertTitle, isStandalone: true, selector: "[hlmAlertTitle]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmAlertTitle]',
@@ -174,11 +174,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmAlertImports = [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertIcon];
 class HlmAlertModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertModule, imports: [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertIcon], exports: [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertIcon] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertModule, imports: [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertIcon], exports: [HlmAlert, HlmAlertTitle, HlmAlertDescription, HlmAlertIcon] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmAlertImports],
@@ -191,4 +191,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmAlert, HlmAlertDescription, HlmAlertIcon, HlmAlertImports, HlmAlertModule, HlmAlertTitle };
-//# sourceMappingURL=alert.mjs.map
+