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

package/item/README.md

@@ -1,11 +1,391 @@
-# Item
+# Item (`@egose/shadcn-theme-ng/item`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+`Item` is a set of composable row primitives for stacked list content — settings rows, task lists, notification feeds, dropdown-menu content — the shadcn/ui _Item_ equivalent. The `hlmItem` container lays out media, content (title + description), and actions in one wrapping flex row; `hlmItemGroup` stacks rows; header/footer, separator, and cva `variant`/`size` props cover the rest. All styling-only directives except the separator (spartan-ng `BrnSeparator`).
 
-## Building
+> **Ships as:** `@egose/shadcn-theme-ng/item` (plain Tailwind) and `@egose/shadcn-theme-ng-tw/item` (`tw:`-prefixed variant). See the [package README](../../README.md) for installation, peer dependencies, and the Tailwind-variant contract. Do not publish this project directory independently.
 
-To build the library, run:
+## Installation
 
 ```bash
-ng build item
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+Peer dependencies (Angular, CDK, `@spartan-ng/brain`, `rxjs`) are documented in the [package README](../../README.md#peer-dependencies).
+
+```ts
+import { HlmItemImports } from '@egose/shadcn-theme-ng/item';
+// tw variant:
+// import { HlmItemImports } from '@egose/shadcn-theme-ng-tw/item';
+```
+
+## Imports
+
+```ts
+// Standalone component — spread the imports array:
+import { HlmItemImports } from '@egose/shadcn-theme-ng/item';
+
+@Component({
+  standalone: true,
+  imports: [HlmItemImports],
+  template: `
+    <div hlmItemGroup>
+      <div hlmItem>
+        <div hlmItemMedia variant="icon">…</div>
+        <div hlmItemContent>
+          <p hlmItemTitle>Title</p>
+          <p hlmItemDescription>Description</p>
+        </div>
+        <div hlmItemActions>…</div>
+      </div>
+    </div>
+  `,
+})
+export class MyComp {}
+```
+
+```ts
+// NgModule-based — import the module:
+import { HlmItemModule } from '@egose/shadcn-theme-ng/item';
+
+@NgModule({ imports: [HlmItemModule] })
+export class MyModule {}
+```
+
+Exported from `src/public-api.ts`: `HlmItem`, `HlmItemActions`, `HlmItemContent`, `HlmItemDescription`, `HlmItemFooter`, `HlmItemGroup`, `HlmItemHeader`, `HlmItemMedia`, `HlmItemSeparator`, `HlmItemTitle`, the `ItemVariants` / `ItemMediaVariants` types, `HlmItemConfig` / `provideHlmItemConfig` / `injectHlmItemConfig` / `provideHlmItemMediaConfig` / `injectHlmItemMediaConfig` (from `hlm-item-token`), plus `HlmItemImports` and `HlmItemModule`.
+
+## Anatomy / Structure
+
+```html
+<div hlmItemGroup>
+  <article hlmItem variant="outline" size="default">
+    <div hlmItemMedia variant="icon"><!-- icon or avatar --></div>
+
+    <div hlmItemContent>
+      <div hlmItemHeader>
+        <p hlmItemTitle>Row title</p>
+        <!-- trailing meta -->
+      </div>
+      <p hlmItemDescription>Secondary line, clamps to 2 lines.</p>
+      <div hlmItemFooter>
+        <span>Footer meta</span>
+        <div hlmItemActions>
+          <button hlmBtn size="sm">Open</button>
+        </div>
+      </div>
+    </div>
+  </article>
+
+  <div hlmItemSeparator></div>
+
+  <article hlmItem size="sm">…</article>
+</div>
 ```
+
+Real selectors (each works as attribute or element): `[hlmItem]`/`hlm-item`, `[hlmItemGroup]`/`hlm-item-group`, `[hlmItemMedia]`/`hlm-item-media`, `[hlmItemContent]`/`hlm-item-content`, `[hlmItemTitle]`/`hlm-item-title`, `[hlmItemDescription]`/`hlm-item-description`, `[hlmItemHeader]`/`hlm-item-header`, `[hlmItemFooter]`/`hlm-item-footer`, `[hlmItemActions]`/`hlm-item-actions`, `[hlmItemSeparator]`/`hlm-item-separator` (hostDirectives: `BrnSeparator` with `orientation` input).
+
+## API reference
+
+### `[hlmItem]` — `HlmItem`
+
+| Input     | Type                                | Default     | Description                                                                                                                                 |
+| --------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `variant` | `'default' \| 'outline' \| 'muted'` | `'default'` | `default` = transparent border; `outline` = bordered; `muted` = muted fill (reflected as `data-variant`).                                   |
+| `size`    | `'default' \| 'sm' \| 'xs'`         | `'default'` | Density: `default` (gap-3.5, px-4, py-3.5) → `sm` → `xs` (reflected as `data-size`). `xs` also zeroes padding inside dropdown-menu content. |
+
+`ItemVariants` is the cva `VariantProps` type. Defaults come from `injectHlmItemConfig()` — override globally with `provideHlmItemConfig({ variant: 'outline' })`.
+
+### `[hlmItemMedia]` — `HlmItemMedia`
+
+| Input     | Type                             | Default     | Description                                                                                          |
+| --------- | -------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------- |
+| `variant` | `'default' \| 'icon' \| 'image'` | `'default'` | `icon` = icon sizing hook; `image` = fixed `size-10` rounded cover frame (shrinks with item `size`). |
+
+Default from `injectHlmItemMediaConfig()`; override with `provideHlmItemMediaConfig({ variant: 'icon' })`.
+
+### Layout pieces (no inputs/outputs)
+
+| Directive            | `data-slot`        | Role                                                              |
+| -------------------- | ------------------ | ----------------------------------------------------------------- |
+| `HlmItemGroup`       | `item-group`       | Vertical stack (`flex-col`, gap adapts to child `size`).          |
+| `HlmItemContent`     | `item-content`     | Flex-1 column filling the space between media and actions.        |
+| `HlmItemTitle`       | `item-title`       | Medium semibold single-line title (`line-clamp-1`).               |
+| `HlmItemDescription` | `item-description` | Muted two-line secondary text (`line-clamp-2`, links underlined). |
+| `HlmItemHeader`      | `item-header`      | Full-width top row inside content (`justify-between`).            |
+| `HlmItemFooter`      | `item-footer`      | Full-width bottom row inside content (`justify-between`).         |
+| `HlmItemActions`     | `item-actions`     | Right-aligned control cluster.                                    |
+
+### `[hlmItemSeparator]` — `HlmItemSeparator`
+
+`hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }]` + `hlmSeparatorClass` with `tw:my-2`. Accepts `orientation` (`horizontal` default) from the brain separator.
+
+## Examples
+
+### 1. Basic stacked list with all variants
+
+```ts
+import { Component } from '@angular/core';
+import { HlmItemImports } from '@egose/shadcn-theme-ng/item';
+
+@Component({
+  standalone: true,
+  imports: [HlmItemImports],
+  template: `
+    <div hlmItemGroup>
+      <div hlmItem>
+        <div hlmItemContent>
+          <p hlmItemTitle>Default row</p>
+          <p hlmItemDescription>Transparent border, default density.</p>
+        </div>
+      </div>
+      <div hlmItem variant="outline">
+        <div hlmItemContent>
+          <p hlmItemTitle>Outlined row</p>
+          <p hlmItemDescription>Bordered card look.</p>
+        </div>
+      </div>
+      <div hlmItem variant="muted">
+        <div hlmItemContent>
+          <p hlmItemTitle>Muted row</p>
+          <p hlmItemDescription>Soft filled background.</p>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class VariantsExample {}
+```
+
+### 2. Sizes: default / sm / xs
+
+```ts
+import { Component } from '@angular/core';
+import { HlmItemImports } from '@egose/shadcn-theme-ng/item';
+
+@Component({
+  standalone: true,
+  imports: [HlmItemImports],
+  template: `
+    <div hlmItemGroup>
+      <div hlmItem>
+        <div hlmItemContent>
+          <p hlmItemTitle>Default density</p>
+          <p hlmItemDescription>Roomy padding for primary lists.</p>
+        </div>
+      </div>
+      <div hlmItem size="sm">
+        <div hlmItemContent>
+          <p hlmItemTitle>Compact</p>
+          <p hlmItemDescription>Sidebars and secondary lists.</p>
+        </div>
+      </div>
+      <div hlmItem size="xs">
+        <div hlmItemContent>
+          <p hlmItemTitle>Dense</p>
+          <p hlmItemDescription>Dropdowns and menus.</p>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class SizesExample {}
+```
+
+### 3. Media variants: icon, image, avatar
+
+```ts
+import { Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideFolder, lucideBell } from '@ng-icons/lucide';
+import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
+import { HlmItemImports } from '@egose/shadcn-theme-ng/item';
+import { HlmAvatarImports } from '@egose/shadcn-theme-ng/avatar';
+
+@Component({
+  standalone: true,
+  imports: [NgIcon, HlmIcon, HlmItemImports, HlmAvatarImports],
+  providers: [provideIcons({ lucideFolder, lucideBell })],
+  template: `
+    <div hlmItemGroup>
+      <div hlmItem variant="outline">
+        <div hlmItemMedia variant="icon"><ng-icon hlm name="lucideFolder" size="sm" /></div>
+        <div hlmItemContent>
+          <p hlmItemTitle>Design assets</p>
+          <p hlmItemDescription>128 files · updated yesterday</p>
+        </div>
+      </div>
+      <div hlmItem variant="outline">
+        <div hlmItemMedia variant="image">
+          <img src="https://picsum.photos/80" alt="Project thumbnail" />
+        </div>
+        <div hlmItemContent>
+          <p hlmItemTitle>Launch photos</p>
+          <p hlmItemDescription>Cover image crops to a rounded frame.</p>
+        </div>
+      </div>
+      <div hlmItem variant="outline">
+        <div hlmItemMedia>
+          <hlm-avatar size="sm">
+            <span hlmAvatarFallback>JA</span>
+          </hlm-avatar>
+        </div>
+        <div hlmItemContent>
+          <p hlmItemTitle>Jane mentioned you</p>
+          <p hlmItemDescription>Any element works as default media.</p>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class MediaExample {}
+```
+
+### 4. Task row: header + footer + actions + separator
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmItemImports } from '@egose/shadcn-theme-ng/item';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  standalone: true,
+  imports: [HlmItemImports, HlmButton],
+  template: `
+    <div hlmItemGroup>
+      @for (task of tasks(); track task.title; let last = $last) {
+        <article hlmItem variant="outline">
+          <div hlmItemMedia class="tw:h-11 tw:w-11 tw:rounded-2xl tw:bg-slate-900 tw:text-sm tw:text-white">
+            {{ task.initials }}
+          </div>
+          <div hlmItemContent>
+            <div hlmItemHeader>
+              <p hlmItemTitle>{{ task.title }}</p>
+              <span class="tw:text-xs tw:text-slate-500">{{ task.status }}</span>
+            </div>
+            <p hlmItemDescription>{{ task.description }}</p>
+            <div hlmItemFooter>
+              <span class="tw:text-sm tw:text-slate-500">Updated {{ task.updated }}</span>
+              <div hlmItemActions>
+                <button hlmBtn size="sm" variant="secondary" type="button">Review</button>
+                <button hlmBtn size="sm" type="button">Open</button>
+              </div>
+            </div>
+          </div>
+        </article>
+        @if (!last) {
+          <div hlmItemSeparator></div>
+        }
+      }
+    </div>
+  `,
+})
+export class TaskListExample {
+  readonly tasks = signal([
+    {
+      initials: 'DS',
+      title: 'Redesign onboarding',
+      status: 'In review',
+      description: 'Five new steps with progress tracking.',
+      updated: '2h ago',
+    },
+    {
+      initials: 'PL',
+      title: 'Fix checkout total',
+      status: 'Todo',
+      description: 'Tax rounding drifts by one cent.',
+      updated: '1d ago',
+    },
+  ]);
+}
+```
+
+### 5. Link rows (whole-row anchor) + global config
+
+Rows containing an `<a>` get a hover background automatically (`[a]:hover:bg-muted`). Set app-wide defaults with `provideHlmItemConfig`:
+
+```ts
+import { Component } from '@angular/core';
+import { HlmItemImports, provideHlmItemConfig } from '@egose/shadcn-theme-ng/item';
+
+@Component({
+  standalone: true,
+  imports: [HlmItemImports],
+  providers: [provideHlmItemConfig({ variant: 'outline', size: 'sm' })],
+  template: `
+    <div hlmItemGroup>
+      <a hlmItem href="/docs/getting-started">
+        <div hlmItemContent>
+          <p hlmItemTitle>Getting started</p>
+          <p hlmItemDescription>Install and render your first component.</p>
+        </div>
+      </a>
+      <a hlmItem href="/docs/theming">
+        <div hlmItemContent>
+          <p hlmItemTitle>Theming</p>
+          <p hlmItemDescription>CSS variables and dark mode.</p>
+        </div>
+      </a>
+    </div>
+  `,
+})
+export class LinksExample {}
+```
+
+### 6. NgModule usage + `orientation` on the separator
+
+```ts
+import { NgModule, Component } from '@angular/core';
+import { HlmItemModule } from '@egose/shadcn-theme-ng/item';
+
+@Component({
+  selector: 'app-settings-list',
+  template: `
+    <div hlmItemGroup>
+      <div hlmItem variant="outline" size="sm">
+        <div hlmItemContent>
+          <div hlmItemHeader>
+            <p hlmItemTitle>Email notifications</p>
+            <span class="tw:text-xs">On</span>
+          </div>
+          <p hlmItemDescription>Product updates and security alerts.</p>
+        </div>
+      </div>
+      <div hlmItemSeparator orientation="horizontal"></div>
+      <div hlmItem variant="outline" size="sm">
+        <div hlmItemContent>
+          <div hlmItemHeader>
+            <p hlmItemTitle>Weekly digest</p>
+            <span class="tw:text-xs">Off</span>
+          </div>
+          <p hlmItemDescription>A Monday summary of workspace activity.</p>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class SettingsListComponent {}
+
+@NgModule({ declarations: [SettingsListComponent], imports: [HlmItemModule] })
+export class SettingsListModule {}
+```
+
+## Accessibility notes
+
+- Use semantic hosts: `<article>` for feed/task rows, `<li>` inside `<ul>` for plain lists, `<a href>` when the whole row navigates (hover affordance is built in).
+- `hlmItemTitle` renders a `<p>` — if the title should head a section, swap in a real heading (`<h3 hlmItemTitle>`) since the directive is attribute-matched and keeps its classes.
+- Keep action buttons labeled (`Open`, `Review`) — icon-only actions need `aria-label`.
+- The separator is a brain `BrnSeparator` (presentational); it adds no keyboard stops. Status text (`In review`, counts) should be plain text, not color-only.
+
+## Theming / CSS variables
+
+No component-specific CSS variables; surfaces come from the shared tokens (`--border`, `--muted`, `--radius`). App-wide `variant`/`size` defaults via `provideHlmItemConfig` / `provideHlmItemMediaConfig`; per-row tweaks via inputs or `class`.
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/separator` — `hlmSeparatorClass` behind the item separator.
+- `@egose/shadcn-theme-ng/avatar` — typical `hlmItemMedia` content.
+- `@egose/shadcn-theme-ng/button` — row actions.
+- `@egose/shadcn-theme-ng/badge` — status pills inside header/footer rows.

package/item/fesm2022/item.mjs

@@ -28,17 +28,17 @@ function injectHlmItemMediaConfig() {
     return inject(HlmItemMediaConfigToken, { optional: true }) ?? defaultMediaConfig;
 }
 
-const itemVariants = cva('[a]:hover:bg-muted rounded-md border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors', {
+const itemVariants = cva('tw:[a]:hover:bg-muted tw:rounded-md tw:border tw:text-sm tw:group/item tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:flex tw:w-full tw:min-w-0 tw:max-w-full tw:flex-wrap tw:items-center tw:transition-colors tw:duration-100 tw:outline-none tw:focus-visible:ring-[3px] tw:[a]:transition-colors', {
     variants: {
         variant: {
-            default: 'border-transparent',
-            outline: 'border-border',
-            muted: 'bg-muted/50 border-transparent',
+            default: 'tw:border-transparent',
+            outline: 'tw:border-border',
+            muted: 'tw:bg-muted/50 tw:border-transparent',
         },
         size: {
-            default: 'gap-3.5 px-4 py-3.5',
-            sm: 'gap-2.5 px-3 py-2.5',
-            xs: 'gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0',
+            default: 'tw:gap-3.5 tw:px-4 tw:py-3.5',
+            sm: 'tw:gap-2.5 tw:px-3 tw:py-2.5',
+            xs: 'tw:gap-2 tw:px-2.5 tw:py-2 tw:in-data-[slot=dropdown-menu-content]:p-0',
         },
     },
     defaultVariants: {
@@ -55,10 +55,10 @@ class HlmItem {
     constructor() {
         classes(() => itemVariants({ variant: this.variant(), size: this.size() }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmItem, isStandalone: true, selector: "[hlmItem],hlm-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "item" }, properties: { "attr.data-variant": "variant()", "attr.data-size": "size()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmItem, isStandalone: true, selector: "[hlmItem],hlm-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "item" }, properties: { "attr.data-variant": "variant()", "attr.data-size": "size()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItem],hlm-item',
@@ -72,12 +72,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmItemActions {
     constructor() {
-        classes(() => 'gap-2 flex items-center');
+        classes(() => 'tw:gap-2 tw:flex tw:min-w-0 tw:max-w-full tw:flex-wrap tw:items-center');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmItemActions, isStandalone: true, selector: "[hlmItemActions],hlm-item-actions", host: { attributes: { "data-slot": "item-actions" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemActions, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmItemActions, isStandalone: true, selector: "[hlmItemActions],hlm-item-actions", host: { attributes: { "data-slot": "item-actions" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemActions, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemActions],hlm-item-actions',
@@ -87,12 +87,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmItemContent {
     constructor() {
-        classes(() => 'gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
+        classes(() => 'tw:gap-1 tw:group-data-[size=xs]/item:gap-0 tw:flex tw:flex-1 tw:flex-col tw:[&+[data-slot=item-content]]:flex-none');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmItemContent, isStandalone: true, selector: "[hlmItemContent],hlm-item-content", host: { attributes: { "data-slot": "item-content" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmItemContent, isStandalone: true, selector: "[hlmItemContent],hlm-item-content", host: { attributes: { "data-slot": "item-content" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemContent],hlm-item-content',
@@ -102,12 +102,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmItemDescription {
     constructor() {
-        classes(() => 'text-muted-foreground text-start text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4');
+        classes(() => 'tw:text-muted-foreground tw:text-start tw:text-sm tw:leading-normal tw:group-data-[size=xs]/item:text-xs tw:[&>a:hover]:text-primary tw:line-clamp-2 tw:flex tw:font-normal tw:[&>a]:underline tw:[&>a]:underline-offset-4');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmItemDescription, isStandalone: true, selector: "[hlmItemDescription],hlm-item-description", host: { attributes: { "data-slot": "item-description" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmItemDescription, isStandalone: true, selector: "[hlmItemDescription],hlm-item-description", host: { attributes: { "data-slot": "item-description" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemDescription],hlm-item-description',
@@ -117,12 +117,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmItemFooter {
     constructor() {
-        classes(() => 'gap-2 flex basis-full items-center justify-between');
+        classes(() => 'tw:gap-2 tw:flex tw:basis-full tw:min-w-0 tw:flex-wrap tw:items-center tw:justify-between');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmItemFooter, isStandalone: true, selector: "[hlmItemFooter],hlm-item-footer", host: { attributes: { "data-slot": "item-footer" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmItemFooter, isStandalone: true, selector: "[hlmItemFooter],hlm-item-footer", host: { attributes: { "data-slot": "item-footer" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemFooter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemFooter, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemFooter],hlm-item-footer',
@@ -132,12 +132,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmItemGroup {
     constructor() {
-        classes(() => 'gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col');
+        classes(() => 'tw:gap-4 tw:has-data-[size=sm]:gap-2.5 tw:has-data-[size=xs]:gap-2 tw:group/item-group tw:flex tw:w-full tw:flex-col');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmItemGroup, isStandalone: true, selector: "[hlmItemGroup],hlm-item-group", host: { attributes: { "data-slot": "item-group" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmItemGroup, isStandalone: true, selector: "[hlmItemGroup],hlm-item-group", host: { attributes: { "data-slot": "item-group" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemGroup],hlm-item-group',
@@ -147,12 +147,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmItemHeader {
     constructor() {
-        classes(() => 'gap-2 flex basis-full items-center justify-between');
+        classes(() => 'tw:gap-2 tw:flex tw:basis-full tw:items-center tw:justify-between');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmItemHeader, isStandalone: true, selector: "[hlmItemHeader],hlm-item-header", host: { attributes: { "data-slot": "item-header" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmItemHeader, isStandalone: true, selector: "[hlmItemHeader],hlm-item-header", host: { attributes: { "data-slot": "item-header" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemHeader, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemHeader],hlm-item-header',
@@ -160,12 +160,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const itemMediaVariants = cva('gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none', {
+const itemMediaVariants = cva('tw:gap-2 tw:group-has-data-[slot=item-description]/item:translate-y-0.5 tw:group-has-data-[slot=item-description]/item:self-start tw:flex tw:shrink-0 tw:items-center tw:justify-center tw:[&_ng-icon]:pointer-events-none', {
     variants: {
         variant: {
-            default: 'bg-transparent',
-            icon: "[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]",
-            image: 'size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover',
+            default: 'tw:bg-transparent',
+            icon: "tw:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)]",
+            image: 'tw:size-10 tw:overflow-hidden tw:rounded-sm tw:group-data-[size=sm]/item:size-8 tw:group-data-[size=xs]/item:size-6 tw:[&_img]:size-full tw:[&_img]:object-cover',
         },
     },
     defaultVariants: {
@@ -179,10 +179,10 @@ class HlmItemMedia {
     constructor() {
         classes(() => itemMediaVariants({ variant: this.variant() }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmItemMedia, isStandalone: true, selector: "[hlmItemMedia],hlm-item-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "item-media" }, properties: { "attr.data-variant": "variant()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemMedia, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmItemMedia, isStandalone: true, selector: "[hlmItemMedia],hlm-item-media", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "item-media" }, properties: { "attr.data-variant": "variant()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemMedia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemMedia, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemMedia],hlm-item-media',
@@ -195,12 +195,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmItemSeparator {
     constructor() {
-        classes(() => [hlmSeparatorClass, 'my-2']);
+        classes(() => [hlmSeparatorClass, 'tw:my-2']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmItemSeparator, isStandalone: true, selector: "[hlmItemSeparator],hlm-item-separator", host: { attributes: { "data-slot": "item-separator" } }, hostDirectives: [{ directive: i1.BrnSeparator, inputs: ["orientation", "orientation"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmItemSeparator, isStandalone: true, selector: "[hlmItemSeparator],hlm-item-separator", host: { attributes: { "data-slot": "item-separator" } }, hostDirectives: [{ directive: i1.BrnSeparator, inputs: ["orientation", "orientation"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemSeparator],hlm-item-separator',
@@ -211,12 +211,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmItemTitle {
     constructor() {
-        classes(() => 'gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center');
+        classes(() => 'tw:gap-2 tw:text-sm tw:leading-snug tw:font-medium tw:underline-offset-4 tw:line-clamp-1 tw:flex tw:w-fit tw:items-center');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmItemTitle, isStandalone: true, selector: "[hlmItemTitle],hlm-item-title", host: { attributes: { "data-slot": "item-title" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmItemTitle, isStandalone: true, selector: "[hlmItemTitle],hlm-item-title", host: { attributes: { "data-slot": "item-title" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmItemTitle],hlm-item-title',
@@ -240,8 +240,8 @@ const HlmItemImports = [
     HlmItemTitle,
 ];
 class HlmItemModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmItemModule, imports: [HlmItem,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmItemModule, imports: [HlmItem,
             HlmItemActions,
             HlmItemContent,
             HlmItemDescription,
@@ -260,9 +260,9 @@ class HlmItemModule {
             HlmItemMedia,
             HlmItemSeparator,
             HlmItemTitle] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmItemModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmItemModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmItemImports],
@@ -275,4 +275,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmItem, HlmItemActions, HlmItemContent, HlmItemDescription, HlmItemFooter, HlmItemGroup, HlmItemHeader, HlmItemImports, HlmItemMedia, HlmItemModule, HlmItemSeparator, HlmItemTitle, injectHlmItemConfig, injectHlmItemMediaConfig, provideHlmItemConfig, provideHlmItemMediaConfig };
-//# sourceMappingURL=item.mjs.map
+