angular-tailwind-components 1.5.0 → 1.6.1

package/README.md

@@ -1,5 +1,9 @@
 # Angular Tailwind Components
 
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/giuseppemorale/angular-tailwind-components?startScript=stackblitz&title=Angular%20Tailwind%20Components%20%E2%80%94%20Storybook)
+
+Apri la demo live su StackBlitz: avvia **Storybook** (tutti i componenti, stesso sorgente del repo).
+
 A comprehensive Angular component library built entirely with **Tailwind CSS v4** — zero additional UI dependencies.
 
 ## Features
@@ -63,7 +67,7 @@ export class ExampleComponent {
 
 ## Application configuration (`defineTheme`)
 
-Use **`defineTheme`** from `angular-tailwind-components` as the single app-level entry: it registers **`EnvironmentProviders`** for optional **injection tokens** (`iconSize`, `datetimeLanguage`, `componentsSize`, `paginationSummary`) and, when you pass **`colors`**, an app initializer that applies semantic CSS variables on `document.documentElement` in the browser. Add **one** entry to `providers` without spreading.
+Use **`defineTheme`** from `angular-tailwind-components` as the single app-level entry: it registers **`EnvironmentProviders`** for optional **injection tokens** (`iconSize`, `datetimeLanguage`, `componentsSize`, `buttonKind`, `paginationSummary`) and, when you pass **`colors`**, an app initializer that applies semantic CSS variables on `document.documentElement` in the browser. Add **one** entry to `providers` without spreading.
 
 `TailwindDefineThemeConfig` extends **`TailwindComponentsConfig`** with an optional **`colors`** field.
 
@@ -79,6 +83,7 @@ export const appConfig: ApplicationConfig = {
       iconSize: 20,
       datetimeLanguage: 'it',
       componentsSize: 'md',
+      buttonKind: 'flat',
       paginationSummary: 'Visualizzati {start}-{end} di {total}',
       colors: {
         primary: 'violet', // Forma oggetto: { 600: '#4f46e5', 700: '#4338ca' }
@@ -132,6 +137,7 @@ You can omit **`colors`** if you only need token defaults, or omit token keys if
 | `iconSize` | `TAILWIND_ICON_SIZE` |
 | `datetimeLanguage` | `TAILWIND_DATETIME_LANGUAGE` |
 | `componentsSize` | `TAILWIND_COMPONENTS_SIZE` |
+| `buttonKind` | `TAILWIND_BUTTON_KIND` |
 | `paginationSummary` | `TAILWIND_PAGINATION_SUMMARY` |
 
 **`provideTailwindComponents`** is still exported for backward compatibility (token providers only, same implementation as the token slice of `defineTheme`). It is **deprecated**; prefer **`defineTheme`**.
@@ -142,25 +148,44 @@ The optional **`colors`** object remaps semantic design tokens (`primary`, `neut
 
 | `colors` key | CSS variables | Default palette in `tailwind.css` |
 | --- | --- | --- |
-| `primary` | `--color-primary-*` | Tailwind `blue` |
-| `neutral` | `--color-neutral-*` | Tailwind `slate` |
-| `success` | `--color-success-*` | Tailwind `green` |
-| `warning` | `--color-warning-*` | Tailwind `amber` |
-| `danger` | `--color-danger-*` | Tailwind `red` |
+| `primary` | `--color-primary-*`, `--color-on-primary-*` | Tailwind `blue` |
+| `neutral` | `--color-neutral-*`, `--color-on-neutral-*` | Tailwind `slate` |
+| `success` | `--color-success-*`, `--color-on-success-*` | Tailwind `green` |
+| `warning` | `--color-warning-*`, `--color-on-warning-*` | Tailwind `amber` |
+| `danger` | `--color-danger-*`, `--color-on-danger-*` | Tailwind `red` |
 | `error` | Same as `danger` if `danger` is omitted | — |
-| `info` | `--color-info-*` | Tailwind `sky` |
+| `info` | `--color-info-*`, `--color-on-info-*` | Tailwind `sky` |
 
 ### `TailwindThemeSeverityColor`
 
-Each `colors.*` field uses the exported type **`TailwindThemeSeverityColor`**. It can be either of the following:
+Each `colors.*` field uses the exported type **`TailwindThemeSeverityColor`**. It can be any of the following:
 
 1. **A string — Tailwind palette name**  
    Use the lowercase **family name** only (the segment between the utility prefix and the shade), e.g. `bg-indigo-600` → `'indigo'`, `text-slate-500` → `'slate'`.  
    The full list of built-in names and swatches is in the official **[Tailwind CSS color reference](https://tailwindcss.com/docs/colors)** — pick any name from that page for the string form.  
-   For each configured shade, `defineTheme` sets `--color-<semantic>-<shade>` to `var(--color-<that-name>-<shade>)`.
-
-2. **A partial object — per-shade CSS**  
-   Keys are optional shade steps: `'50'`, `'100'`, …, `'950'`. Values are any valid CSS color (`#hex`, `rgb()`, `oklch()`, `var(--color-fuchsia-600)`, etc.). Only the keys you pass are overridden.
+   For each configured shade, `defineTheme` sets `--color-<semantic>-<shade>` to `var(--color-<that-name>-<shade>)`.  
+   **Foreground / contrast:** built-in components that sit on saturated semantic backgrounds (solid buttons, tags, semantic toolbar) use utilities like `text-on-success-600`, backed by **`--color-on-<semantic>-<shade>`** defaults in the library `@theme`. With a **palette string**, you usually do **not** need to set `on` yourself — Tailwind’s scales stay internally consistent.
+
+2. **A partial object — per-shade CSS (legacy flat form)**  
+   Keys are optional shade steps: `'50'`, `'100'`, …, `'950'`. Values are any valid CSS color (`#hex`, `rgb()`, `oklch()`, `var(--color-fuchsia-600)`, etc.). Only the keys you pass are written to `--color-<semantic>-<shade>`.  
+   **Optional `on`:** if you override background shades with custom values, set matching foreground tokens by using the structured form below so text stays readable.
+
+3. **A structured object — `{ shades, on? }`**  
+   - **`shades`**: same as the flat object: maps to `--color-<semantic>-<shade>`.  
+   - **`on`**: optional partial map of the same shade keys → CSS colors for **`--color-on-<semantic>-<shade>`** (recommended foreground on that semantic background). Solid `tailwind-button` / `tailwind-tag` / semantic `tailwind-toolbar` read these via `text-on-*` utilities.
+
+   Example:
+
+   ```typescript
+   defineTheme({
+     colors: {
+       success: {
+         shades: { 600: '#14532d', 700: '#0f3d21' },
+         on: { 600: '#ecfdf5', 700: '#ecfdf5' }
+       }
+     }
+   });
+   ```
 
    When you use a **string**, shade coverage matches the library tokens: `primary` and `neutral` include `950`; `success`, `warning`, `danger`, and `info` stop at `900`.
 
@@ -254,8 +279,11 @@ You can still override any token in your own CSS, for example:
 # Build the library
 ng build angular-tailwind-components
 
-# Start Storybook
+# Start Storybook (locale)
 npm run storybook
+
+# Storybook per StackBlitz (CI, host 0.0.0.0, porta 6006)
+npm run stackblitz
 ```
 
 ### Component Conventions

package/fesm2022/angular-tailwind-components.mjs

@@ -579,6 +579,8 @@ const TAILWIND_MODAL_DATA = new InjectionToken('TAILWIND_MODAL_DATA');
 const TAILWIND_ICON_SIZE = new InjectionToken('TAILWIND_ICON_SIZE');
 const TAILWIND_DATETIME_LANGUAGE = new InjectionToken('TAILWIND_DATETIME_LANGUAGE');
 const TAILWIND_COMPONENTS_SIZE = new InjectionToken('TAILWIND_COMPONENTS_SIZE');
+/** Default `kind` for `tailwind-button` when the `kind` input is omitted. */
+const TAILWIND_BUTTON_KIND = new InjectionToken('TAILWIND_BUTTON_KIND');
 /**
  * Default template for `tailwind-pagination` **summary** when the `summary` input is omitted.
  * Use placeholders `{start}`, `{end}`, `{total}` (same rules as the `summary` input).
@@ -703,17 +705,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], ctorParameters: () => [], propDecorators: { sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: true }] }] } });
 
 class TailwindButton extends TailwindComponent {
+    defaultKind = inject(TAILWIND_BUTTON_KIND, { optional: true });
     /** Visual color */
     color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
-    /** Visual kind: `ghost` = transparent with hover tint; `text` = text color only, no hover background */
-    kind = input('solid', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual kind: `flat` = filled like `solid` without border or shadow;
+     * `ghost` = transparent with hover tint; `text` = text color only, no hover background.
+     * Default from {@link TAILWIND_BUTTON_KIND} or `'solid'`.
+     */
+    kind = input(this.defaultKind ?? 'solid', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
     /** Size of the button */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Whether the button is disabled */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     /** HTML button type attribute */
     type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    /** Emitted when the button is clicked (not disabled/loading) */
+    /** Emitted when the button is clicked (not disabled). */
     onClick = output();
     /** Computed Tailwind classes based on color, kind, size, and state */
     computedClasses = computed(() => {
@@ -727,12 +734,21 @@ class TailwindButton extends TailwindComponent {
             'border'
         ];
         const solidMap = {
-            primary: 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 border-transparent focus-visible:outline-primary-600 shadow-sm',
+            primary: 'bg-primary-600 text-on-primary-600 hover:bg-primary-700 hover:text-on-primary-700 active:bg-primary-800 active:text-on-primary-800 border-transparent focus-visible:outline-primary-600 shadow-sm',
             secondary: 'bg-neutral-100 text-neutral-800 hover:bg-neutral-200 active:bg-neutral-300 border-neutral-300 focus-visible:outline-neutral-500 shadow-sm',
-            danger: 'bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800 border-transparent focus-visible:outline-danger-600 shadow-sm',
-            success: 'bg-success-600 text-white hover:bg-success-700 active:bg-success-800 border-transparent focus-visible:outline-success-600 shadow-sm',
-            warning: 'bg-warning-500 text-neutral-900 hover:bg-warning-600 active:bg-warning-700 border-transparent focus-visible:outline-warning-500 shadow-sm',
-            info: 'bg-info-600 text-white hover:bg-info-700 active:bg-info-800 border-transparent focus-visible:outline-info-600 shadow-sm'
+            danger: 'bg-danger-600 text-on-danger-600 hover:bg-danger-700 hover:text-on-danger-700 active:bg-danger-800 active:text-on-danger-800 border-transparent focus-visible:outline-danger-600 shadow-sm',
+            success: 'bg-success-600 text-on-success-600 hover:bg-success-700 hover:text-on-success-700 active:bg-success-800 active:text-on-success-800 border-transparent focus-visible:outline-success-600 shadow-sm',
+            warning: 'bg-warning-500 text-on-warning-500 hover:bg-warning-600 hover:text-on-warning-600 active:bg-warning-700 active:text-on-warning-700 border-transparent focus-visible:outline-warning-500 shadow-sm',
+            info: 'bg-info-600 text-on-info-600 hover:bg-info-700 hover:text-on-info-700 active:bg-info-800 active:text-on-info-800 border-transparent focus-visible:outline-info-600 shadow-sm'
+        };
+        /** Filled surface like `solid`, without box shadow or visible border. */
+        const flatMap = {
+            primary: 'bg-primary-600 text-on-primary-600 hover:bg-primary-700 hover:text-on-primary-700 active:bg-primary-800 active:text-on-primary-800 border-0 shadow-none focus-visible:outline-primary-600',
+            secondary: 'bg-neutral-100 text-neutral-800 hover:bg-neutral-200 active:bg-neutral-300 border-0 shadow-none focus-visible:outline-neutral-500',
+            danger: 'bg-danger-600 text-on-danger-600 hover:bg-danger-700 hover:text-on-danger-700 active:bg-danger-800 active:text-on-danger-800 border-0 shadow-none focus-visible:outline-danger-600',
+            success: 'bg-success-600 text-on-success-600 hover:bg-success-700 hover:text-on-success-700 active:bg-success-800 active:text-on-success-800 border-0 shadow-none focus-visible:outline-success-600',
+            warning: 'bg-warning-500 text-on-warning-500 hover:bg-warning-600 hover:text-on-warning-600 active:bg-warning-700 active:text-on-warning-700 border-0 shadow-none focus-visible:outline-warning-500',
+            info: 'bg-info-600 text-on-info-600 hover:bg-info-700 hover:text-on-info-700 active:bg-info-800 active:text-on-info-800 border-0 shadow-none focus-visible:outline-info-600'
         };
         const outlinedMap = {
             primary: 'bg-transparent text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
@@ -762,6 +778,7 @@ class TailwindButton extends TailwindComponent {
         };
         const styleMap = {
             solid: solidMap,
+            flat: flatMap,
             outlined: outlinedMap,
             ghost: ghostMap,
             text: textMap
@@ -2623,12 +2640,12 @@ class TailwindTag extends TailwindComponent {
     variant = input('neutral', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     computedClasses = computed(() => {
         const variantMap = {
-            primary: 'bg-primary-600 text-white',
-            neutral: 'bg-neutral-600 text-white',
-            success: 'bg-success-600 text-white',
-            warning: 'bg-warning-500 text-neutral-900',
-            danger: 'bg-danger-600 text-white',
-            info: 'bg-info-600 text-white'
+            primary: 'bg-primary-600 text-on-primary-600',
+            neutral: 'bg-neutral-600 text-on-neutral-600',
+            success: 'bg-success-600 text-on-success-600',
+            warning: 'bg-warning-500 text-on-warning-500',
+            danger: 'bg-danger-600 text-on-danger-600',
+            info: 'bg-info-600 text-on-info-600'
         };
         return `inline-flex items-center text-[11px] font-semibold uppercase tracking-wider px-2 py-0.5 rounded ${variantMap[this.variant()]}`;
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
@@ -3500,6 +3517,11 @@ class TailwindToolbar extends TailwindComponent {
     width = input('full', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     /** Applies a stronger drop shadow. */
     elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
+    /**
+     * Colore di superficie della barra: `default` mantiene sfondo bianco;
+     * i valori `TailwindSeverity` applicano tinte semantiche (come alert/notification).
+     */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** `horizontal` for a top app bar; `vertical` for a side rail (logo → menu → end). */
     orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** Navigation / actions rendered between logo and end slots. */
@@ -3509,9 +3531,47 @@ class TailwindToolbar extends TailwindComponent {
     menuContainerClasses = computed(() => this.orientation() === 'horizontal'
         ? 'min-w-0 flex-1 flex flex-row flex-wrap items-center gap-1'
         : 'min-w-0 flex-1 flex flex-col gap-1.5 overflow-y-auto min-h-0', ...(ngDevMode ? [{ debugName: "menuContainerClasses" }] : /* istanbul ignore next */ []));
-    menuItemButtonClasses = computed(() => this.orientation() === 'horizontal'
-        ? 'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent'
-        : 'inline-flex w-full items-center gap-2 rounded-md px-3 py-3 text-left text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent', ...(ngDevMode ? [{ debugName: "menuItemButtonClasses" }] : /* istanbul ignore next */ []));
+    /** Foreground on semantic surface (`text-on-*`), aligned with solid toolbar shade per variant. */
+    variantContrastTextClass = computed(() => {
+        const v = this.variant();
+        if (v === 'default') {
+            return null;
+        }
+        const map = {
+            success: 'text-on-success-600',
+            warning: 'text-on-warning-500',
+            danger: 'text-on-danger-600',
+            info: 'text-on-info-600'
+        };
+        return map[v];
+    }, ...(ngDevMode ? [{ debugName: "variantContrastTextClass" }] : /* istanbul ignore next */ []));
+    /** Heroicons are `<img>`; on light-on-color variants tint SVG strokes to match `text-on-*`. */
+    menuItemIconClasses = computed(() => this.variant() !== 'default' && this.variant() !== 'warning' ? 'toolbar-menu-icon-on-light' : '', ...(ngDevMode ? [{ debugName: "menuItemIconClasses" }] : /* istanbul ignore next */ []));
+    menuItemToneClasses = computed(() => {
+        const contrast = this.variantContrastTextClass();
+        if (!contrast) {
+            return 'text-neutral-700 hover:bg-neutral-100 hover:text-neutral-900';
+        }
+        return `${contrast} hover:bg-white/12`;
+    }, ...(ngDevMode ? [{ debugName: "menuItemToneClasses" }] : /* istanbul ignore next */ []));
+    menuItemButtonClasses = computed(() => {
+        const horizontal = this.orientation() === 'horizontal';
+        const layout = horizontal
+            ? 'inline-flex shrink-0 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium'
+            : 'inline-flex w-full items-center gap-2 rounded-md px-3 py-3 text-left text-sm font-medium';
+        const rest = 'disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent';
+        return [layout, this.menuItemToneClasses(), rest].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "menuItemButtonClasses" }] : /* istanbul ignore next */ []));
+    mobileMenuToggleClasses = computed(() => [
+        'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-2 transition-colors',
+        this.menuItemToneClasses()
+    ].join(' '), ...(ngDevMode ? [{ debugName: "mobileMenuToggleClasses" }] : /* istanbul ignore next */ []));
+    menuDividerLineClasses = computed(() => this.variant() === 'default'
+        ? 'mx-0.5 h-5 w-px shrink-0 self-center bg-neutral-200'
+        : 'mx-0.5 h-5 w-px shrink-0 self-center bg-white/30', ...(ngDevMode ? [{ debugName: "menuDividerLineClasses" }] : /* istanbul ignore next */ []));
+    menuDividerRuleClasses = computed(() => this.variant() === 'default'
+        ? 'my-1 w-full border-0 border-t border-neutral-100'
+        : 'my-1 w-full border-0 border-t border-white/25', ...(ngDevMode ? [{ debugName: "menuDividerRuleClasses" }] : /* istanbul ignore next */ []));
     rootClasses = computed(() => {
         const horizontal = this.orientation() === 'horizontal';
         const sizeClasses = horizontal
@@ -3519,8 +3579,17 @@ class TailwindToolbar extends TailwindComponent {
                 ? 'w-full h-16'
                 : 'container mx-auto h-16'
             : 'h-full w-full';
+        const variant = this.variant();
+        const surfaceMap = {
+            default: 'bg-white border border-neutral-200',
+            success: 'bg-success-600 border border-white/20',
+            warning: 'bg-warning-500 border border-white/20',
+            danger: 'bg-danger-600 border border-white/20',
+            info: 'bg-info-600 border border-white/20'
+        };
         const base = [
-            'bg-white border border-neutral-200',
+            surfaceMap[variant] ?? surfaceMap.default,
+            this.variantContrastTextClass() ?? '',
             'flex',
             sizeClasses,
             this.rounded() ? 'rounded-xl' : 'rounded-none',
@@ -3532,7 +3601,7 @@ class TailwindToolbar extends TailwindComponent {
         else {
             base.push('flex-col items-stretch gap-3 px-3 py-4 min-h-0');
         }
-        return base.join(' ');
+        return base.filter(Boolean).join(' ');
     }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     selectMenuItem(item) {
         if (item.divider || item.disabled) {
@@ -3557,12 +3626,12 @@ class TailwindToolbar extends TailwindComponent {
         return item.value ?? item.label ?? String(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToolbar, isStandalone: true, selector: "tailwind-toolbar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuSelect: "onMenuSelect" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"rootClasses()\">\r\n  <div class=\"shrink-0\">\r\n    <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n  </div>\r\n  @if (orientation() === 'horizontal') {\r\n    <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @if (menu().length) {\r\n        <div class=\"flex shrink-0 items-center md:hidden\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-2 text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900\"\r\n            [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\r\n            aria-haspopup=\"menu\"\r\n            aria-label=\"Open navigation menu\"\r\n            (click)=\"mobileToolbarMenu.toggle($event)\">\r\n            <tailwind-icon icon=\"bars-3\" [size]=\"22\" />\r\n          </button>\r\n          <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\r\n        </div>\r\n      }\r\n      <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\r\n        @for (item of menu(); track menuTrackKey($index, item)) {\r\n          @if (item.divider) {\r\n            <span class=\"mx-0.5 h-5 w-px shrink-0 self-center bg-neutral-200\" aria-hidden=\"true\"></span>\r\n          } @else {\r\n            <button\r\n              type=\"button\"\r\n              [disabled]=\"!!item.disabled\"\r\n              [class]=\"menuItemButtonClasses()\"\r\n              [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n              (click)=\"selectMenuItem(item)\">\r\n              @if (item.icon) {\r\n                <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" />\r\n              }\r\n              @if (menuItemHasVisibleLabel(item)) {\r\n                {{ item.label }}\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </nav>\r\n  } @else {\r\n    <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @for (item of menu(); track menuTrackKey($index, item)) {\r\n        @if (item.divider) {\r\n          <hr class=\"my-1 w-full border-0 border-t border-neutral-100\" />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [disabled]=\"!!item.disabled\"\r\n            [class]=\"menuItemButtonClasses()\"\r\n            [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\r\n            [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n            (click)=\"selectMenuItem(item)\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" />\r\n            }\r\n            @if (menuItemHasVisibleLabel(item)) {\r\n              {{ item.label }}\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n  <div\r\n    class=\"flex flex-wrap items-center gap-2 shrink-0\"\r\n    [class.justify-end]=\"orientation() === 'horizontal'\"\r\n    [class.mt-auto]=\"orientation() === 'vertical'\">\r\n    <ng-content select=\"[tailwind-toolbar-end]\" />\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindMenu, selector: "tailwind-menu", inputs: ["items", "align"], outputs: ["onSelect"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindToolbar, isStandalone: true, selector: "tailwind-toolbar", inputs: { rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onMenuSelect: "onMenuSelect" }, usesInheritance: true, ngImport: i0, template: "<div [class]=\"rootClasses()\">\r\n  <div class=\"shrink-0\">\r\n    <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n  </div>\r\n  @if (orientation() === 'horizontal') {\r\n    <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @if (menu().length) {\r\n        <div class=\"flex shrink-0 items-center md:hidden\">\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"mobileMenuToggleClasses()\"\r\n            [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\r\n            aria-haspopup=\"menu\"\r\n            aria-label=\"Open navigation menu\"\r\n            (click)=\"mobileToolbarMenu.toggle($event)\">\r\n            <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\r\n          </button>\r\n          <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\r\n        </div>\r\n      }\r\n      <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\r\n        @for (item of menu(); track menuTrackKey($index, item)) {\r\n          @if (item.divider) {\r\n            <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\r\n          } @else {\r\n            <button\r\n              type=\"button\"\r\n              [disabled]=\"!!item.disabled\"\r\n              [class]=\"menuItemButtonClasses()\"\r\n              [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n              (click)=\"selectMenuItem(item)\">\r\n              @if (item.icon) {\r\n                <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\r\n              }\r\n              @if (menuItemHasVisibleLabel(item)) {\r\n                {{ item.label }}\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </nav>\r\n  } @else {\r\n    <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @for (item of menu(); track menuTrackKey($index, item)) {\r\n        @if (item.divider) {\r\n          <hr [class]=\"menuDividerRuleClasses()\" />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [disabled]=\"!!item.disabled\"\r\n            [class]=\"menuItemButtonClasses()\"\r\n            [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\r\n            [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n            (click)=\"selectMenuItem(item)\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\r\n            }\r\n            @if (menuItemHasVisibleLabel(item)) {\r\n              {{ item.label }}\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n  <div\r\n    class=\"flex flex-wrap items-center gap-2 shrink-0\"\r\n    [class.justify-end]=\"orientation() === 'horizontal'\"\r\n    [class.mt-auto]=\"orientation() === 'vertical'\">\r\n    <ng-content select=\"[tailwind-toolbar-end]\" />\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light img{filter:brightness(0) invert(1)}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindMenu, selector: "tailwind-menu", inputs: ["items", "align"], outputs: ["onSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToolbar, decorators: [{
             type: Component,
-            args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', template: "<div [class]=\"rootClasses()\">\r\n  <div class=\"shrink-0\">\r\n    <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n  </div>\r\n  @if (orientation() === 'horizontal') {\r\n    <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @if (menu().length) {\r\n        <div class=\"flex shrink-0 items-center md:hidden\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-2 text-neutral-700 transition-colors hover:bg-neutral-100 hover:text-neutral-900\"\r\n            [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\r\n            aria-haspopup=\"menu\"\r\n            aria-label=\"Open navigation menu\"\r\n            (click)=\"mobileToolbarMenu.toggle($event)\">\r\n            <tailwind-icon icon=\"bars-3\" [size]=\"22\" />\r\n          </button>\r\n          <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\r\n        </div>\r\n      }\r\n      <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\r\n        @for (item of menu(); track menuTrackKey($index, item)) {\r\n          @if (item.divider) {\r\n            <span class=\"mx-0.5 h-5 w-px shrink-0 self-center bg-neutral-200\" aria-hidden=\"true\"></span>\r\n          } @else {\r\n            <button\r\n              type=\"button\"\r\n              [disabled]=\"!!item.disabled\"\r\n              [class]=\"menuItemButtonClasses()\"\r\n              [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n              (click)=\"selectMenuItem(item)\">\r\n              @if (item.icon) {\r\n                <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" />\r\n              }\r\n              @if (menuItemHasVisibleLabel(item)) {\r\n                {{ item.label }}\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </nav>\r\n  } @else {\r\n    <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @for (item of menu(); track menuTrackKey($index, item)) {\r\n        @if (item.divider) {\r\n          <hr class=\"my-1 w-full border-0 border-t border-neutral-100\" />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [disabled]=\"!!item.disabled\"\r\n            [class]=\"menuItemButtonClasses()\"\r\n            [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\r\n            [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n            (click)=\"selectMenuItem(item)\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" />\r\n            }\r\n            @if (menuItemHasVisibleLabel(item)) {\r\n              {{ item.label }}\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n  <div\r\n    class=\"flex flex-wrap items-center gap-2 shrink-0\"\r\n    [class.justify-end]=\"orientation() === 'horizontal'\"\r\n    [class.mt-auto]=\"orientation() === 'vertical'\">\r\n    <ng-content select=\"[tailwind-toolbar-end]\" />\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }], onMenuSelect: [{ type: i0.Output, args: ["onMenuSelect"] }] } });
+            args: [{ imports: [TailwindIcon, TailwindMenu], selector: 'tailwind-toolbar', template: "<div [class]=\"rootClasses()\">\r\n  <div class=\"shrink-0\">\r\n    <ng-content select=\"[tailwind-toolbar-logo]\" />\r\n  </div>\r\n  @if (orientation() === 'horizontal') {\r\n    <nav class=\"min-w-0 flex flex-1 flex-row flex-wrap items-center gap-1\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @if (menu().length) {\r\n        <div class=\"flex shrink-0 items-center md:hidden\">\r\n          <button\r\n            type=\"button\"\r\n            [class]=\"mobileMenuToggleClasses()\"\r\n            [attr.aria-expanded]=\"mobileToolbarMenu.isOpen()\"\r\n            aria-haspopup=\"menu\"\r\n            aria-label=\"Open navigation menu\"\r\n            (click)=\"mobileToolbarMenu.toggle($event)\">\r\n            <tailwind-icon icon=\"bars-3\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\r\n          </button>\r\n          <tailwind-menu #mobileToolbarMenu [items]=\"menu()\" align=\"left\" (onSelect)=\"selectMenuItem($event)\" />\r\n        </div>\r\n      }\r\n      <div class=\"hidden min-w-0 flex-1 flex-row flex-wrap items-center gap-1 md:flex\">\r\n        @for (item of menu(); track menuTrackKey($index, item)) {\r\n          @if (item.divider) {\r\n            <span [class]=\"menuDividerLineClasses()\" aria-hidden=\"true\"></span>\r\n          } @else {\r\n            <button\r\n              type=\"button\"\r\n              [disabled]=\"!!item.disabled\"\r\n              [class]=\"menuItemButtonClasses()\"\r\n              [class.px-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [class.py-2]=\"!!item.icon && !menuItemHasVisibleLabel(item)\"\r\n              [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n              (click)=\"selectMenuItem(item)\">\r\n              @if (item.icon) {\r\n                <tailwind-icon [icon]=\"item.icon\" [size]=\"20\" [class]=\"menuItemIconClasses()\" />\r\n              }\r\n              @if (menuItemHasVisibleLabel(item)) {\r\n                {{ item.label }}\r\n              }\r\n            </button>\r\n          }\r\n        }\r\n      </div>\r\n    </nav>\r\n  } @else {\r\n    <nav [class]=\"menuContainerClasses()\" [attr.aria-label]=\"'Toolbar menu'\">\r\n      @for (item of menu(); track menuTrackKey($index, item)) {\r\n        @if (item.divider) {\r\n          <hr [class]=\"menuDividerRuleClasses()\" />\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            [disabled]=\"!!item.disabled\"\r\n            [class]=\"menuItemButtonClasses()\"\r\n            [class.justify-center]=\"!menuItemHasVisibleLabel(item)\"\r\n            [attr.aria-label]=\"menuItemAriaLabel(item)\"\r\n            (click)=\"selectMenuItem(item)\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"22\" [class]=\"menuItemIconClasses()\" />\r\n            }\r\n            @if (menuItemHasVisibleLabel(item)) {\r\n              {{ item.label }}\r\n            }\r\n          </button>\r\n        }\r\n      }\r\n    </nav>\r\n  }\r\n  <div\r\n    class=\"flex flex-wrap items-center gap-2 shrink-0\"\r\n    [class.justify-end]=\"orientation() === 'horizontal'\"\r\n    [class.mt-auto]=\"orientation() === 'vertical'\">\r\n    <ng-content select=\"[tailwind-toolbar-end]\" />\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}:host .toolbar-menu-icon-on-light img{filter:brightness(0) invert(1)}\n"] }]
+        }], propDecorators: { rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: false }] }], onMenuSelect: [{ type: i0.Output, args: ["onMenuSelect"] }] } });
 
 class TailwindDivider extends TailwindComponent {
     /** Rule direction */
@@ -3969,6 +4038,9 @@ function providersFromTailwindComponentsConfig(config) {
     if (config.componentsSize !== undefined) {
         providers.push({ provide: TAILWIND_COMPONENTS_SIZE, useValue: config.componentsSize });
     }
+    if (config.buttonKind !== undefined) {
+        providers.push({ provide: TAILWIND_BUTTON_KIND, useValue: config.buttonKind });
+    }
     if (config.paginationSummary !== undefined) {
         providers.push({ provide: TAILWIND_PAGINATION_SUMMARY, useValue: config.paginationSummary });
     }
@@ -3996,8 +4068,51 @@ function shadesForSemantic(semantic) {
             return SHADES_WITH_950;
     }
 }
-function isShadeRecord(value) {
-    return typeof value === 'object' && value !== null;
+function isValidShadeKey(key) {
+    return (key === '50' ||
+        key === '100' ||
+        key === '200' ||
+        key === '300' ||
+        key === '400' ||
+        key === '500' ||
+        key === '600' ||
+        key === '700' ||
+        key === '800' ||
+        key === '900' ||
+        key === '950');
+}
+function isSemanticPaletteObject(value) {
+    return ('shades' in value &&
+        typeof value.shades === 'object' &&
+        value.shades !== null);
+}
+/**
+ * Normalizes object `colors` values: legacy flat shade map vs `{ shades, on? }`.
+ */
+function normalizeSemanticColorObject(value) {
+    if (isSemanticPaletteObject(value)) {
+        return { shades: value.shades, on: value.on };
+    }
+    return { shades: value };
+}
+function pushShadeVariables(semantic, shades, entries) {
+    for (const [shade, color] of Object.entries(shades)) {
+        if (!isValidShadeKey(shade) || color === undefined || color === '') {
+            continue;
+        }
+        entries.push([`--color-${semantic}-${shade}`, color]);
+    }
+}
+function pushOnShadeVariables(semantic, on, entries) {
+    if (!on) {
+        return;
+    }
+    for (const [shade, color] of Object.entries(on)) {
+        if (!isValidShadeKey(shade) || color === undefined || color === '') {
+            continue;
+        }
+        entries.push([`--color-on-${semantic}-${shade}`, color]);
+    }
 }
 /**
  * Builds `[CSS custom property name, value]` pairs for {@link defineTheme}.
@@ -4031,12 +4146,10 @@ function buildTailwindThemeVariableEntries(config) {
                 entries.push([`--color-${semantic}-${shade}`, `var(--color-${palette}-${shade})`]);
             }
         }
-        else if (isShadeRecord(value)) {
-            for (const [shade, color] of Object.entries(value)) {
-                if (color !== undefined && color !== '') {
-                    entries.push([`--color-${semantic}-${shade}`, color]);
-                }
-            }
+        else {
+            const { shades, on } = normalizeSemanticColorObject(value);
+            pushShadeVariables(semantic, shades, entries);
+            pushOnShadeVariables(semantic, on, entries);
         }
     }
     return entries;
@@ -4078,5 +4191,5 @@ function defineTheme(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, defineTheme, provideTailwindComponents };
+export { TAILWIND_BUTTON_KIND, TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_HEROICON_NAMES, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_PAGINATION_SUMMARY, TW_TABLE_SORT_DIR_ATTR, TW_TABLE_SORT_KEY_ATTR, TailwindAccordion, TailwindAccordionItem, TailwindAlert, TailwindBadge, TailwindBreadcrumb, TailwindButton, TailwindCard, TailwindCheckbox, TailwindDatePicker, TailwindDateTimePicker, TailwindDivider, TailwindDrawer, TailwindIcon, TailwindInput, TailwindInputOtp, TailwindMenu, TailwindMessage, TailwindMeter, TailwindModal, TailwindModalRef, TailwindModalService, TailwindNotification, TailwindPagination, TailwindProgressBar, TailwindRadioGroup, TailwindSelect, TailwindSkeleton, TailwindSlider, TailwindSortHeaderDirective, TailwindSpinner, TailwindStep, TailwindStepper, TailwindTab, TailwindTabGroup, TailwindTable, TailwindTableRowDirective, TailwindTableRowDirective as TailwindTableRowTemplateDirective, TailwindTag, TailwindTextarea, TailwindTimePicker, TailwindTitle, TailwindToast, TailwindToastService, TailwindToggle, TailwindToolbar, TailwindTooltip, TailwindTooltipDirective, TailwindUpload, buildTailwindThemeVariableEntries, defineTheme, provideTailwindComponents };
 //# sourceMappingURL=angular-tailwind-components.mjs.map