angular-tailwind-components 1.8.1 → 1.8.3-RC1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-tailwind-components",
-  "version": "1.8.1",
+  "version": "1.8.3-RC1",
   "files": [
     "fesm2022",
     "types",

package/styles/tailwind.css

@@ -81,27 +81,29 @@
   --color-success-800: var(--color-green-800);
   --color-success-900: var(--color-green-900);
 
+  /* Warning: amber (1:1). Golden/yellow tone; 500–600 use dark on-* for AA on filled surfaces. */
   --color-warning-50: var(--color-amber-50);
   --color-warning-100: var(--color-amber-100);
-  --color-warning-200: var(--color-amber-300);
-  --color-warning-300: var(--color-amber-400);
-  --color-warning-400: var(--color-amber-500);
-  --color-warning-500: var(--color-amber-600);
-  --color-warning-600: var(--color-amber-700);
-  --color-warning-700: var(--color-amber-800);
-  --color-warning-800: var(--color-amber-900);
+  --color-warning-200: var(--color-amber-200);
+  --color-warning-300: var(--color-amber-300);
+  --color-warning-400: var(--color-amber-400);
+  --color-warning-500: var(--color-amber-500);
+  --color-warning-600: var(--color-amber-600);
+  --color-warning-700: var(--color-amber-700);
+  --color-warning-800: var(--color-amber-800);
   --color-warning-900: var(--color-amber-900);
 
+  /* Danger: red shifted one step darker than 1:1 so it stays distinct from amber warning. */
   --color-danger-50: var(--color-red-50);
   --color-danger-100: var(--color-red-100);
   --color-danger-200: var(--color-red-200);
   --color-danger-300: var(--color-red-300);
   --color-danger-400: var(--color-red-400);
-  --color-danger-500: var(--color-red-500);
-  --color-danger-600: var(--color-red-600);
-  --color-danger-700: var(--color-red-700);
-  --color-danger-800: var(--color-red-800);
-  --color-danger-900: var(--color-red-900);
+  --color-danger-500: var(--color-red-600);
+  --color-danger-600: var(--color-red-700);
+  --color-danger-700: var(--color-red-800);
+  --color-danger-800: var(--color-red-900);
+  --color-danger-900: var(--color-red-950);
 
   --color-info-50: var(--color-sky-50);
   --color-info-100: var(--color-sky-100);
@@ -159,8 +161,8 @@
   --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: #ffffff;
-  --color-on-warning-600: #ffffff;
+  --color-on-warning-500: var(--color-neutral-900);
+  --color-on-warning-600: var(--color-neutral-900);
   --color-on-warning-700: #ffffff;
   --color-on-warning-800: #ffffff;
   --color-on-warning-900: #ffffff;

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

@@ -40,6 +40,7 @@ interface TailwindMenuItem {
     disabled?: boolean;
     divider?: boolean;
     value?: string;
+    items?: TailwindMenuItem[];
 }
 
 /**
@@ -144,7 +145,7 @@ declare class TailwindButton extends TailwindComponent {
     /** Whether the button is disabled */
     readonly disabled: _angular_core.InputSignal<boolean>;
     /** HTML button type attribute */
-    readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
     /** ARIA role attribute */
     readonly role: _angular_core.InputSignal<TailwindButtonRole>;
     /** Optional Heroicons outline icon inside the button */
@@ -227,7 +228,7 @@ declare class TailwindTextarea extends TailwindComponent implements ControlValue
     /** Maximum character length (HTML maxlength) */
     readonly maxlength: _angular_core.InputSignal<number | undefined>;
     /** Resize behavior */
-    readonly resize: _angular_core.InputSignal<"vertical" | "none" | "both" | "horizontal">;
+    readonly resize: _angular_core.InputSignal<"none" | "horizontal" | "vertical" | "both">;
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Whether the textarea is readonly */
@@ -417,7 +418,7 @@ declare class TailwindRadioGroup<T = unknown> extends TailwindComponent implemen
     /** Size variant */
     readonly size: _angular_core.InputSignal<TailwindSize>;
     /** Layout orientation */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Currently selected value */
     readonly value: _angular_core.ModelSignal<T | null>;
     /** Internal disabled state */
@@ -446,6 +447,8 @@ declare class TailwindSelect<T = unknown> extends TailwindComponent implements C
     private outsideSub;
     /** Label text */
     readonly label: _angular_core.InputSignal<string>;
+    /** Accessible name for the combobox when `label` is omitted */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Placeholder text */
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Available options */
@@ -470,6 +473,8 @@ declare class TailwindSelect<T = unknown> extends TailwindComponent implements C
     readonly activeIndex: _angular_core.WritableSignal<number>;
     /** The currently selected option object (single mode only) */
     readonly selectedOption: _angular_core.Signal<TailwindOption<T> | null>;
+    /** Accessible name for the combobox when there is no visible `label` */
+    readonly comboboxAriaLabel: _angular_core.Signal<string | null>;
     /** Selected option objects in `options()` order (multiple mode only) */
     readonly selectedOptions: _angular_core.Signal<TailwindOption<T>[]>;
     /** Classes for the trigger button */
@@ -492,7 +497,7 @@ declare class TailwindSelect<T = unknown> extends TailwindComponent implements C
     selectOption(option: TailwindOption<T>): void;
     onKeydown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindSelect<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindSelect<any>, "tailwind-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindSelect<any>, "tailwind-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /** Context passed to the `#item` ng-template. */
@@ -684,7 +689,7 @@ declare class TailwindSpinner extends TailwindComponent {
     /** Aria label for accessibility */
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Layout orientation */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     readonly containerClasses: _angular_core.Signal<string>;
     readonly iconPixelSize: _angular_core.Signal<number>;
     readonly iconClasses: _angular_core.Signal<string>;
@@ -804,6 +809,8 @@ declare class TailwindMenu extends TailwindComponent implements OnDestroy, OnIni
     private readonly onScrollReposition;
     readonly items: _angular_core.InputSignal<TailwindMenuItem[]>;
     readonly align: _angular_core.InputSignal<"left" | "right">;
+    /** `bottom` opens under the anchor; `right` opens beside it (e.g. vertical toolbar rail). */
+    readonly placement: _angular_core.InputSignal<"bottom" | "right">;
     readonly onSelect: _angular_core.OutputEmitterRef<TailwindMenuItem>;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
     /** Popover box in coordinates relative to the `position: fixed` containing block (often viewport, not under transformed Docs wrappers). */
@@ -837,7 +844,7 @@ declare class TailwindMenu extends TailwindComponent implements OnDestroy, OnIni
     private createsFixedContainingBlock;
     private getFixedPositioningContainingBlock;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindMenu, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindMenu, "tailwind-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TailwindMenu, "tailwind-menu", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, { "onSelect": "onSelect"; }, never, never, true, never>;
 }
 
 declare class TailwindDrawer extends TailwindComponent {
@@ -903,6 +910,7 @@ declare class TailwindPagination extends TailwindComponent {
     readonly visiblePages: _angular_core.Signal<number[]>;
     readonly summaryText: _angular_core.Signal<string>;
     goToPage(page: number): void;
+    pageButtonAriaLabel(page: number): string;
     onPageSizeValueChange(value: number | number[] | null): void;
     setPageSize(size: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TailwindPagination, never>;
@@ -1242,11 +1250,16 @@ declare class TailwindToolbar extends TailwindComponent {
      */
     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">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Navigation / actions rendered between logo and end slots. */
     readonly menu: _angular_core.InputSignal<TailwindMenuItem[]>;
     /** Emitted when a non-disabled, non-divider menu entry is activated. */
     readonly onMenuSelect: _angular_core.OutputEmitterRef<TailwindMenuItem>;
+    /** Flat list for the mobile hamburger (submenu children promoted one level). */
+    readonly mobileMenuItems: _angular_core.Signal<TailwindMenuItem[]>;
+    readonly submenuPlacement: _angular_core.Signal<"bottom" | "right">;
+    readonly submenuChevronIcon: _angular_core.Signal<"chevron-down" | "chevron-right">;
+    readonly menuItemWithSubmenuClasses: _angular_core.Signal<"relative inline-flex shrink-0" | "relative w-full">;
     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">;
     /** Foreground on semantic surface (`text-on-*`), aligned with solid toolbar shade per variant. */
     readonly variantContrastTextClass: _angular_core.Signal<string | null>;
@@ -1258,7 +1271,9 @@ declare class TailwindToolbar extends TailwindComponent {
     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>;
+    hasSubmenu(item: TailwindMenuItem): boolean;
     selectMenuItem(item: TailwindMenuItem): void;
+    private flattenMenuItems;
     /** True when `label` is a non-empty string after trim (icon-only entries omit or blank `label`). */
     menuItemHasVisibleLabel(item: TailwindMenuItem): boolean;
     /** Accessible name when there is no visible label (`value`, trimmed). */
@@ -1270,7 +1285,7 @@ declare class TailwindToolbar extends TailwindComponent {
 
 declare class TailwindDivider extends TailwindComponent {
     /** Rule direction */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Adds horizontal margin to the rule (horizontal orientation only). */
     readonly inset: _angular_core.InputSignal<boolean>;
     /** Border style for the rule */
@@ -1337,7 +1352,7 @@ declare class TailwindSlider extends TailwindComponent implements ControlValueAc
     /** Two-thumb range mode */
     readonly range: _angular_core.InputSignal<boolean>;
     /** Layout */
-    readonly orientation: _angular_core.InputSignal<"vertical" | "horizontal">;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
     /** Tick marks at each step */
     readonly showTicks: _angular_core.InputSignal<boolean>;
     /** Control size */