angular-tailwind-components 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-tailwind-components",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "files": [
     "fesm2022",
     "types",

package/styles/tailwind.css

@@ -114,6 +114,79 @@
   --color-info-800: var(--color-sky-800);
   --color-info-900: var(--color-sky-900);
 
+  /*
+   * Foreground on semantic backgrounds (`text-on-success-600`, …).
+   * `defineTheme` may set `--color-on-<semantic>-<shade>` when colors use `{ shades, on }`.
+   * String palettes inherit these defaults (tuned for default Tailwind scales).
+   */
+  --color-on-primary-50: var(--color-neutral-900);
+  --color-on-primary-100: var(--color-neutral-900);
+  --color-on-primary-200: var(--color-neutral-900);
+  --color-on-primary-300: var(--color-neutral-900);
+  --color-on-primary-400: var(--color-neutral-900);
+  --color-on-primary-500: #ffffff;
+  --color-on-primary-600: #ffffff;
+  --color-on-primary-700: #ffffff;
+  --color-on-primary-800: #ffffff;
+  --color-on-primary-900: #ffffff;
+  --color-on-primary-950: #ffffff;
+
+  --color-on-neutral-50: var(--color-neutral-900);
+  --color-on-neutral-100: var(--color-neutral-900);
+  --color-on-neutral-200: var(--color-neutral-900);
+  --color-on-neutral-300: var(--color-neutral-900);
+  --color-on-neutral-400: var(--color-neutral-900);
+  --color-on-neutral-500: var(--color-neutral-900);
+  --color-on-neutral-600: #ffffff;
+  --color-on-neutral-700: #ffffff;
+  --color-on-neutral-800: #ffffff;
+  --color-on-neutral-900: #ffffff;
+  --color-on-neutral-950: #ffffff;
+
+  --color-on-success-50: var(--color-neutral-900);
+  --color-on-success-100: var(--color-neutral-900);
+  --color-on-success-200: var(--color-neutral-900);
+  --color-on-success-300: var(--color-neutral-900);
+  --color-on-success-400: var(--color-neutral-900);
+  --color-on-success-500: #ffffff;
+  --color-on-success-600: #ffffff;
+  --color-on-success-700: #ffffff;
+  --color-on-success-800: #ffffff;
+  --color-on-success-900: #ffffff;
+
+  --color-on-warning-50: var(--color-neutral-900);
+  --color-on-warning-100: var(--color-neutral-900);
+  --color-on-warning-200: var(--color-neutral-900);
+  --color-on-warning-300: var(--color-neutral-900);
+  --color-on-warning-400: var(--color-neutral-900);
+  --color-on-warning-500: var(--color-neutral-900);
+  --color-on-warning-600: #ffffff;
+  --color-on-warning-700: #ffffff;
+  --color-on-warning-800: #ffffff;
+  --color-on-warning-900: #ffffff;
+
+  --color-on-danger-50: var(--color-neutral-900);
+  --color-on-danger-100: var(--color-neutral-900);
+  --color-on-danger-200: var(--color-neutral-900);
+  --color-on-danger-300: var(--color-neutral-900);
+  --color-on-danger-400: var(--color-neutral-900);
+  --color-on-danger-500: #ffffff;
+  --color-on-danger-600: #ffffff;
+  --color-on-danger-700: #ffffff;
+  --color-on-danger-800: #ffffff;
+  --color-on-danger-900: #ffffff;
+
+  --color-on-info-50: var(--color-neutral-900);
+  --color-on-info-100: var(--color-neutral-900);
+  --color-on-info-200: var(--color-neutral-900);
+  --color-on-info-300: var(--color-neutral-900);
+  --color-on-info-400: var(--color-neutral-900);
+  --color-on-info-500: #ffffff;
+  --color-on-info-600: #ffffff;
+  --color-on-info-700: #ffffff;
+  --color-on-info-800: #ffffff;
+  --color-on-info-900: #ffffff;
+
   /* ===== Typography ===== */
   --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

package/types/angular-tailwind-components.d.ts

@@ -8,7 +8,7 @@ type TailwindSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /** Color variants for buttons and interactive elements */
 type TailwindColor = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'info';
 /** Button kinds */
-type TailwindButtonKind = 'solid' | 'outlined' | 'ghost' | 'text';
+type TailwindButtonKind = 'solid' | 'flat' | 'outlined' | 'ghost' | 'text';
 /** Alert/feedback color variants */
 type TailwindSeverity = 'success' | 'warning' | 'danger' | 'info';
 /** Position variants for overlays */
@@ -115,9 +115,14 @@ declare abstract class TailwindComponent {
 }
 
 declare class TailwindButton extends TailwindComponent {
+    private readonly defaultKind;
     /** Visual color */
     readonly color: _angular_core.InputSignal<TailwindColor>;
-    /** Visual kind: `ghost` = transparent with hover tint; `text` = text color only, no hover background */
+    /**
+     * 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'`.
+     */
     readonly kind: _angular_core.InputSignal<TailwindButtonKind>;
     /** Size of the button */
     readonly size: _angular_core.InputSignal<TailwindSize>;
@@ -125,7 +130,7 @@ declare class TailwindButton extends TailwindComponent {
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** HTML button type attribute */
     readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
-    /** Emitted when the button is clicked (not disabled/loading) */
+    /** Emitted when the button is clicked (not disabled). */
     readonly onClick: _angular_core.OutputEmitterRef<MouseEvent>;
     /** Computed Tailwind classes based on color, kind, size, and state */
     readonly computedClasses: _angular_core.Signal<string>;
@@ -152,7 +157,7 @@ declare class TailwindInput extends TailwindComponent implements ControlValueAcc
     /** Placeholder text */
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Input type */
-    readonly type: _angular_core.InputSignal<"number" | "search" | "text" | "password" | "email" | "tel" | "url">;
+    readonly type: _angular_core.InputSignal<"number" | "text" | "search" | "password" | "email" | "tel" | "url">;
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Whether the input is readonly */
@@ -496,7 +501,7 @@ declare class TailwindToggle extends TailwindComponent implements ControlValueAc
 
 declare class TailwindBadge extends TailwindComponent {
     /** Color variant */
-    readonly variant: _angular_core.InputSignal<"primary" | "neutral" | TailwindSeverity>;
+    readonly variant: _angular_core.InputSignal<"primary" | TailwindSeverity | "neutral">;
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Show a dot indicator */
@@ -784,7 +789,7 @@ declare class TailwindPagination extends TailwindComponent {
 }
 
 declare class TailwindTag extends TailwindComponent {
-    readonly variant: _angular_core.InputSignal<"primary" | "neutral" | TailwindSeverity>;
+    readonly variant: _angular_core.InputSignal<"primary" | TailwindSeverity | "neutral">;
     readonly computedClasses: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindTag, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindTag, "tailwind-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -1108,6 +1113,11 @@ declare class TailwindToolbar extends TailwindComponent {
     readonly width: _angular_core.InputSignal<"full" | "container">;
     /** Applies a stronger drop shadow. */
     readonly elevated: _angular_core.InputSignal<boolean>;
+    /**
+     * Colore di superficie della barra: `default` mantiene sfondo bianco;
+     * i valori `TailwindSeverity` applicano tinte semantiche (come alert/notification).
+     */
+    readonly variant: _angular_core.InputSignal<TailwindSeverity | "default">;
     /** `horizontal` for a top app bar; `vertical` for a side rail (logo → menu → end). */
     readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
     /** Navigation / actions rendered between logo and end slots. */
@@ -1115,7 +1125,15 @@ declare class TailwindToolbar extends TailwindComponent {
     /** Emitted when a non-disabled, non-divider menu entry is activated. */
     readonly onMenuSelect: _angular_core.OutputEmitterRef<TailwindMenuItem>;
     readonly menuContainerClasses: _angular_core.Signal<"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">;
-    readonly menuItemButtonClasses: _angular_core.Signal<"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">;
+    /** Foreground on semantic surface (`text-on-*`), aligned with solid toolbar shade per variant. */
+    readonly variantContrastTextClass: _angular_core.Signal<string | null>;
+    /** Heroicons are `<img>`; on light-on-color variants tint SVG strokes to match `text-on-*`. */
+    readonly menuItemIconClasses: _angular_core.Signal<"" | "toolbar-menu-icon-on-light">;
+    readonly menuItemToneClasses: _angular_core.Signal<string>;
+    readonly menuItemButtonClasses: _angular_core.Signal<string>;
+    readonly mobileMenuToggleClasses: _angular_core.Signal<string>;
+    readonly menuDividerLineClasses: _angular_core.Signal<"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">;
+    readonly menuDividerRuleClasses: _angular_core.Signal<"my-1 w-full border-0 border-t border-neutral-100" | "my-1 w-full border-0 border-t border-white/25">;
     readonly rootClasses: _angular_core.Signal<string>;
     selectMenuItem(item: TailwindMenuItem): void;
     /** True when `label` is a non-empty string after trim (icon-only entries omit or blank `label`). */
@@ -1124,7 +1142,7 @@ declare class TailwindToolbar extends TailwindComponent {
     menuItemAriaLabel(item: TailwindMenuItem): string | null;
     menuTrackKey(index: number, item: TailwindMenuItem): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindToolbar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindToolbar, "tailwind-toolbar", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": false; "isSignal": true; }; }, { "onMenuSelect": "onMenuSelect"; }, never, ["[tailwind-toolbar-logo]", "[tailwind-toolbar-end]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindToolbar, "tailwind-toolbar", never, { "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "menu": { "alias": "menu"; "required": false; "isSignal": true; }; }, { "onMenuSelect": "onMenuSelect"; }, never, ["[tailwind-toolbar-logo]", "[tailwind-toolbar-end]"], true, never>;
 }
 
 declare class TailwindDivider extends TailwindComponent {
@@ -1256,6 +1274,8 @@ declare const TAILWIND_MODAL_DATA: InjectionToken<unknown>;
 declare const TAILWIND_ICON_SIZE: InjectionToken<number>;
 declare const TAILWIND_DATETIME_LANGUAGE: InjectionToken<"it" | "en">;
 declare const TAILWIND_COMPONENTS_SIZE: InjectionToken<TailwindSize>;
+/** Default `kind` for `tailwind-button` when the `kind` input is omitted. */
+declare const TAILWIND_BUTTON_KIND: InjectionToken<TailwindButtonKind>;
 /**
  * Default template for `tailwind-pagination` **summary** when the `summary` input is omitted.
  * Use placeholders `{start}`, `{end}`, `{total}` (same rules as the `summary` input).
@@ -1266,15 +1286,26 @@ declare const TAILWIND_PAGINATION_SUMMARY: InjectionToken<string>;
 type TailwindThemeSemantic = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 /** Shade keys aligned with Tailwind default scales and this library’s `@theme` tokens. */
 type TailwindThemeColorShade = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
+/** Explicit semantic palette shades only (legacy flat object form for `defineTheme` colors). */
+type TailwindThemeSemanticShades = Partial<Record<TailwindThemeColorShade, string>>;
+/**
+ * Structured palette: background `shades` plus optional foreground `on` per shade.
+ * Emitted as `--color-<semantic>-<shade>` and `--color-on-<semantic>-<shade>`.
+ */
+type TailwindThemeSemanticPaletteObject = {
+    shades: TailwindThemeSemanticShades;
+    on?: TailwindThemeSemanticShades;
+};
 /**
  * Values for each `colors` entry in {@link TailwindDefineThemeConfig} (exported type name).
  *
  * - **String:** Tailwind palette family name (lowercase), e.g. `'indigo'` for utilities like `bg-indigo-600`.
  *   See the [Tailwind color reference](https://tailwindcss.com/docs/colors) for all built-in names and previews.
  *   Each semantic shade is mapped to `var(--color-<name>-<shade>)`.
- * - **Object:** `Partial<Record<shade, string>>` with explicit CSS colors per shade (`'50'` … `'950'`).
+ * - **Flat object:** `Partial<Record<shade, string>>` — explicit CSS colors per shade (`'50'` … `'950'`); same as `{ shades: { … } }`.
+ * - **Structured object:** `{ shades, on? }` — optional `on` defines foreground (contrast) per shade; written as `--color-on-<semantic>-<shade>`.
  */
-type TailwindThemeSeverityColor = string | Partial<Record<TailwindThemeColorShade, string>>;
+type TailwindThemeSeverityColor = string | TailwindThemeSemanticPaletteObject | TailwindThemeSemanticShades;
 
 /**
  * Optional app-wide values for library `InjectionToken`s.
@@ -1287,6 +1318,8 @@ interface TailwindComponentsConfig {
     datetimeLanguage?: 'it' | 'en';
     /** Maps to {@link TAILWIND_COMPONENTS_SIZE}. */
     componentsSize?: TailwindSize;
+    /** Maps to {@link TAILWIND_BUTTON_KIND} (default `kind` on `tailwind-button`). */
+    buttonKind?: TailwindButtonKind;
     /** Maps to {@link TAILWIND_PAGINATION_SUMMARY}. */
     paginationSummary?: string;
 }
@@ -1315,6 +1348,11 @@ interface TailwindDefineThemeConfig extends TailwindComponentsConfig {
  * @deprecated Use {@link defineTheme} with the same fields (`iconSize`, `datetimeLanguage`, etc.).
  */
 declare function provideTailwindComponents(config: TailwindComponentsConfig): EnvironmentProviders;
+/**
+ * Builds `[CSS custom property name, value]` pairs for {@link defineTheme}.
+ * Exported for unit tests.
+ */
+declare function buildTailwindThemeVariableEntries(config: TailwindDefineThemeConfig): Array<[string, string]>;
 /**
  * Registers environment-scoped library defaults: optional **injection tokens** from {@link TailwindComponentsConfig}
  * plus an app initializer that applies optional **`colors`** on
@@ -1336,5 +1374,5 @@ declare class TailwindModalRef<R = any> {
     _getResult(): R | undefined;
 }
 
-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 type { Pagination, TailwindBreadcrumbItem, TailwindButtonKind, TailwindColor, TailwindComponentsConfig, TailwindDefineThemeColors, TailwindDefineThemeConfig, TailwindHeroicon, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindTableSortHost, TailwindThemeColorShade, TailwindThemeSemantic, TailwindThemeSeverityColor, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };
+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 };
+export type { Pagination, TailwindBreadcrumbItem, TailwindButtonKind, TailwindColor, TailwindComponentsConfig, TailwindDefineThemeColors, TailwindDefineThemeConfig, TailwindHeroicon, TailwindIconSize, TailwindMenuItem, TailwindMeterSegment, TailwindModalConfig, TailwindOption, TailwindOptionGroup, TailwindPosition, TailwindSeverity, TailwindShape, TailwindSize, TailwindSliderValue, TailwindTableSortHost, TailwindThemeColorShade, TailwindThemeSemantic, TailwindThemeSemanticPaletteObject, TailwindThemeSemanticShades, TailwindThemeSeverityColor, TailwindTitleTag, TailwindToastConfig, TailwindToastItem };