angular-tailwind-components 1.3.1 → 1.5.0

package/fesm2022/angular-tailwind-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, TemplateRef, Renderer2, effect, output, InjectionToken, model, forwardRef, viewChildren, contentChildren, contentChild, ApplicationRef, EnvironmentInjector, Injector, createComponent, Injectable, booleanAttribute } from '@angular/core';
+import { input, Directive, signal, inject, NgZone, ElementRef, viewChild, computed, Component, ViewContainerRef, HostListener, Input, TemplateRef, InjectionToken, Renderer2, ApplicationRef, EnvironmentInjector, Injector, DestroyRef, afterNextRender, createComponent, output, model, forwardRef, viewChildren, effect, contentChildren, contentChild, Injectable, booleanAttribute, makeEnvironmentProviders, provideAppInitializer, PLATFORM_ID } from '@angular/core';
 import * as i1 from '@angular/common';
-import { DOCUMENT, NgClass, NgTemplateOutlet, formatDate, CommonModule } from '@angular/common';
+import { DOCUMENT, NgClass, NgTemplateOutlet, formatDate, CommonModule, isPlatformBrowser } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -11,1246 +11,336 @@ import { RouterLink } from '@angular/router';
 /** Common types used across all components */
 
 /**
- * Solar Line Duotone icon names (kebab-case). SVG assets in `public/tailwind-icons/`.
+ * Heroicons outline icon names (kebab-case). SVG assets in `public/tailwind-icons/`.
  * Generated by scripts/copy-icons.js sync — do not edit manually.
  *
- * Icons: Solar Icons (480 Design), CC BY 4.0.
+ * Icons: Heroicons (Tailwind Labs), MIT — https://heroicons.com/
  */
-const TAILWIND_SOLAR_ICON_NAMES = [
-    '4k',
-    'accessibility',
-    'accumulator',
-    'add-circle',
-    'add-folder',
-    'add-square',
-    'adhesive-plaster',
-    'adhesive-plaster-2',
-    'airbuds',
-    'airbuds-case',
-    'airbuds-case-charge',
-    'airbuds-case-minimalistic',
-    'airbuds-case-open',
-    'airbuds-charge',
-    'airbuds-check',
-    'airbuds-left',
-    'airbuds-remove',
-    'airbuds-right',
-    'alarm',
-    'alarm-add',
-    'alarm-pause',
-    'alarm-play',
-    'alarm-remove',
-    'alarm-sleep',
-    'alarm-turn-off',
-    'album',
-    'align-bottom',
-    'align-horizonta-spacing',
-    'align-horizontal-center',
-    'align-left',
-    'align-right',
-    'align-top',
-    'align-vertical-center',
-    'align-vertical-spacing',
-    'alt-arrow-down',
-    'alt-arrow-left',
-    'alt-arrow-right',
-    'alt-arrow-up',
-    'archive',
-    'archive-check',
-    'archive-down',
-    'archive-down-minimlistic',
-    'archive-minimalistic',
-    'archive-up',
-    'archive-up-minimlistic',
-    'armchair',
-    'armchair-2',
+const TAILWIND_HEROICON_NAMES = [
+    'academic-cap',
+    'adjustments-horizontal',
+    'adjustments-vertical',
+    'archive-box',
+    'archive-box-arrow-down',
+    'archive-box-x-mark',
     'arrow-down',
+    'arrow-down-circle',
+    'arrow-down-left',
+    'arrow-down-on-square',
+    'arrow-down-on-square-stack',
+    'arrow-down-right',
+    'arrow-down-tray',
     'arrow-left',
-    'arrow-left-down',
-    'arrow-left-up',
+    'arrow-left-circle',
+    'arrow-left-end-on-rectangle',
+    'arrow-left-on-rectangle',
+    'arrow-left-start-on-rectangle',
+    'arrow-long-down',
+    'arrow-long-left',
+    'arrow-long-right',
+    'arrow-long-up',
+    'arrow-path',
+    'arrow-path-rounded-square',
     'arrow-right',
-    'arrow-right-down',
-    'arrow-right-up',
-    'arrow-to-down-left',
-    'arrow-to-down-right',
-    'arrow-to-top-left',
-    'arrow-to-top-right',
+    'arrow-right-circle',
+    'arrow-right-end-on-rectangle',
+    'arrow-right-on-rectangle',
+    'arrow-right-start-on-rectangle',
+    'arrow-small-down',
+    'arrow-small-left',
+    'arrow-small-right',
+    'arrow-small-up',
+    'arrow-top-right-on-square',
+    'arrow-trending-down',
+    'arrow-trending-up',
+    'arrow-turn-down-left',
+    'arrow-turn-down-right',
+    'arrow-turn-left-down',
+    'arrow-turn-left-up',
+    'arrow-turn-right-down',
+    'arrow-turn-right-up',
+    'arrow-turn-up-left',
+    'arrow-turn-up-right',
     'arrow-up',
-    'asteroid',
-    'atom',
-    'augmented-reality',
-    'backpack',
+    'arrow-up-circle',
+    'arrow-up-left',
+    'arrow-up-on-square',
+    'arrow-up-on-square-stack',
+    'arrow-up-right',
+    'arrow-up-tray',
+    'arrow-uturn-down',
+    'arrow-uturn-left',
+    'arrow-uturn-right',
+    'arrow-uturn-up',
+    'arrows-pointing-in',
+    'arrows-pointing-out',
+    'arrows-right-left',
+    'arrows-up-down',
+    'at-symbol',
     'backspace',
-    'bacteria',
-    'bag',
-    'bag-2',
-    'bag-3',
-    'bag-4',
-    'bag-5',
-    'bag-check',
-    'bag-cross',
-    'bag-heart',
-    'bag-music',
-    'bag-music-2',
-    'bag-smile',
-    'balloon',
-    'balls',
-    'banknote',
-    'banknote-2',
-    'bar-chair',
-    'basketball',
-    'bath',
-    'battery-charge',
-    'battery-charge-minimalistic',
-    'battery-full',
-    'battery-full-minimalistic',
-    'battery-half',
-    'battery-half-minimalistic',
-    'battery-low',
-    'battery-low-minimalistic',
-    'bed',
-    'bedside-table',
-    'bedside-table-2',
-    'bedside-table-3',
-    'bedside-table-4',
+    'backward',
+    'banknotes',
+    'bars-2',
+    'bars-3',
+    'bars-3-bottom-left',
+    'bars-3-bottom-right',
+    'bars-3-center-left',
+    'bars-4',
+    'bars-arrow-down',
+    'bars-arrow-up',
+    'battery-0',
+    'battery-100',
+    'battery-50',
+    'beaker',
     'bell',
-    'bell-bing',
-    'bell-off',
-    'benzene-ring',
-    'bicycling',
-    'bicycling-round',
-    'bill',
-    'bill-check',
-    'bill-cross',
-    'bill-list',
-    'black-hole',
-    'black-hole-2',
-    'black-hole-3',
-    'bluetooth',
-    'bluetooth-circle',
-    'bluetooth-square',
-    'bluetooth-wave',
-    'body',
-    'body-shape',
-    'body-shape-minimalistic',
+    'bell-alert',
+    'bell-slash',
+    'bell-snooze',
+    'bold',
     'bolt',
-    'bolt-circle',
-    'bomb',
-    'bomb-emoji',
-    'bomb-minimalistic',
-    'bone',
-    'bone-broken',
-    'bone-crack',
-    'bones',
-    'bonfire',
-    'book',
-    'book-2',
-    'book-bookmark',
-    'book-bookmark-minimalistic',
-    'book-minimalistic',
+    'bolt-slash',
+    'book-open',
     'bookmark',
-    'bookmark-circle',
-    'bookmark-opened',
+    'bookmark-slash',
     'bookmark-square',
-    'bookmark-square-minimalistic',
-    'boombox',
-    'bottle',
-    'bowling',
-    'box',
-    'box-minimalistic',
-    'branching-paths-down',
-    'branching-paths-up',
-    'broom',
-    'bug',
-    'bug-minimalistic',
-    'buildings',
-    'buildings-2',
-    'buildings-3',
-    'bus',
+    'briefcase',
+    'bug-ant',
+    'building-library',
+    'building-office',
+    'building-office-2',
+    'building-storefront',
+    'cake',
     'calculator',
-    'calculator-minimalistic',
     'calendar',
-    'calendar-add',
-    'calendar-date',
-    'calendar-mark',
-    'calendar-minimalistic',
-    'calendar-search',
-    'call-cancel',
-    'call-cancel-rounded',
-    'call-chat',
-    'call-chat-rounded',
-    'call-dropped',
-    'call-dropped-rounded',
-    'call-medicine',
-    'call-medicine-rounded',
+    'calendar-date-range',
+    'calendar-days',
     'camera',
-    'camera-add',
-    'camera-minimalistic',
-    'camera-rotate',
-    'camera-square',
-    'card',
-    'card-2',
-    'card-recive',
-    'card-search',
-    'card-send',
-    'card-transfer',
-    'cardholder',
-    'cart',
-    'cart-2',
-    'cart-3',
-    'cart-4',
-    'cart-5',
-    'cart-check',
-    'cart-cross',
-    'cart-large',
-    'cart-large-2',
-    'cart-large-3',
-    'cart-large-4',
-    'cart-large-minimalistic',
-    'cart-plus',
-    'case',
-    'case-minimalistic',
-    'case-round',
-    'case-round-minimalistic',
-    'cash-out',
-    'cassette',
-    'cassette-2',
-    'cat',
-    'chair',
-    'chair-2',
-    'chandelier',
-    'chart',
-    'chart-2',
-    'chart-square',
-    'chat-dots',
-    'chat-line',
-    'chat-round',
-    'chat-round-call',
-    'chat-round-check',
-    'chat-round-dots',
-    'chat-round-like',
-    'chat-round-line',
-    'chat-round-money',
-    'chat-round-unread',
-    'chat-round-video',
-    'chat-square',
-    'chat-square-2',
-    'chat-square-arrow',
-    'chat-square-call',
-    'chat-square-check',
-    'chat-square-code',
-    'chat-square-like',
-    'chat-unread',
+    'chart-bar',
+    'chart-bar-square',
+    'chart-pie',
+    'chat-bubble-bottom-center',
+    'chat-bubble-bottom-center-text',
+    'chat-bubble-left',
+    'chat-bubble-left-ellipsis',
+    'chat-bubble-left-right',
+    'chat-bubble-oval-left',
+    'chat-bubble-oval-left-ellipsis',
+    'check',
+    'check-badge',
     'check-circle',
-    'check-read',
-    'check-square',
-    'checklist',
-    'checklist-minimalistic',
-    'chef-hat',
-    'chef-hat-heart',
-    'chef-hat-minimalistic',
-    'circle-bottom-down',
-    'circle-bottom-up',
-    'circle-top-down',
-    'circle-top-up',
-    'city',
-    'clapperboard',
-    'clapperboard-edit',
-    'clapperboard-open',
-    'clapperboard-open-play',
-    'clapperboard-play',
-    'clapperboard-text',
+    'chevron-double-down',
+    'chevron-double-left',
+    'chevron-double-right',
+    'chevron-double-up',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'chevron-up-down',
+    'circle-stack',
     'clipboard',
-    'clipboard-add',
-    'clipboard-check',
-    'clipboard-heart',
-    'clipboard-list',
-    'clipboard-remove',
-    'clipboard-text',
-    'clock-circle',
-    'clock-square',
-    'close-circle',
-    'close-square',
-    'closet',
-    'closet-2',
+    'clipboard-document',
+    'clipboard-document-check',
+    'clipboard-document-list',
+    'clock',
     'cloud',
-    'cloud-bolt',
-    'cloud-bolt-minimalistic',
-    'cloud-check',
-    'cloud-cross',
-    'cloud-download',
-    'cloud-file',
-    'cloud-minus',
-    'cloud-plus',
-    'cloud-rain',
-    'cloud-snowfall',
-    'cloud-snowfall-minimalistic',
-    'cloud-storage',
-    'cloud-storm',
-    'cloud-sun',
-    'cloud-sun-2',
-    'cloud-upload',
-    'cloud-waterdrop',
-    'cloud-waterdrops',
-    'clouds',
-    'cloudy-moon',
-    'code',
-    'code-2',
-    'code-circle',
-    'code-file',
-    'code-scan',
-    'code-square',
-    'colour-tuneing',
-    'command',
-    'compass',
-    'compass-big',
-    'compass-square',
-    'condicioner',
-    'condicioner-2',
-    'confetti',
-    'confetti-minimalistic',
-    'confounded-circle',
-    'confounded-square',
-    'copy',
-    'copyright',
-    'corkscrew',
-    'cosmetic',
-    'course-down',
-    'course-up',
-    'cpu',
-    'cpu-bolt',
-    'creative-commons',
-    'crop',
-    'crop-minimalistic',
-    'crown',
-    'crown-line',
-    'crown-minimalistic',
-    'crown-star',
-    'cup',
-    'cup-first',
-    'cup-hot',
-    'cup-music',
-    'cup-paper',
-    'cup-star',
-    'cursor',
-    'cursor-square',
-    'danger',
-    'danger-circle',
-    'danger-square',
-    'danger-triangle',
-    'database',
-    'delivery',
-    'devices',
-    'diagram-down',
-    'diagram-up',
-    'dialog',
-    'dialog-2',
-    'diploma',
-    'diploma-verified',
-    'diskette',
-    'dislike',
-    'display',
-    'dna',
+    'cloud-arrow-down',
+    'cloud-arrow-up',
+    'code-bracket',
+    'code-bracket-square',
+    'cog',
+    'cog-6-tooth',
+    'cog-8-tooth',
+    'command-line',
+    'computer-desktop',
+    'cpu-chip',
+    'credit-card',
+    'cube',
+    'cube-transparent',
+    'currency-bangladeshi',
+    'currency-dollar',
+    'currency-euro',
+    'currency-pound',
+    'currency-rupee',
+    'currency-yen',
+    'cursor-arrow-rays',
+    'cursor-arrow-ripple',
+    'device-phone-mobile',
+    'device-tablet',
+    'divide',
     'document',
-    'document-add',
-    'document-medicine',
+    'document-arrow-down',
+    'document-arrow-up',
+    'document-chart-bar',
+    'document-check',
+    'document-currency-bangladeshi',
+    'document-currency-dollar',
+    'document-currency-euro',
+    'document-currency-pound',
+    'document-currency-rupee',
+    'document-currency-yen',
+    'document-duplicate',
+    'document-magnifying-glass',
+    'document-minus',
+    'document-plus',
     'document-text',
-    'documents',
-    'documents-minimalistic',
-    'dollar',
-    'dollar-minimalistic',
-    'donut',
-    'donut-bitten',
-    'double-alt-arrow-down',
-    'double-alt-arrow-left',
-    'double-alt-arrow-right',
-    'double-alt-arrow-up',
-    'download',
-    'download-minimalistic',
-    'download-square',
-    'download-twice-square',
-    'dropper',
-    'dropper-2',
-    'dropper-3',
-    'dropper-minimalistic',
-    'dropper-minimalistic-2',
-    'dumbbell',
-    'dumbbell-large',
-    'dumbbell-large-minimalistic',
-    'dumbbell-small',
-    'dumbbells',
-    'dumbbells-2',
-    'earth',
-    'electric-refueling',
-    'emoji-funny-circle',
-    'emoji-funny-square',
-    'end-call',
-    'end-call-rounded',
-    'eraser',
-    'eraser-circle',
-    'eraser-square',
-    'euro',
-    'exit',
-    'explicit',
-    'export',
-    'expressionless-circle',
-    'expressionless-square',
+    'ellipsis-horizontal',
+    'ellipsis-horizontal-circle',
+    'ellipsis-vertical',
+    'envelope',
+    'envelope-open',
+    'equals',
+    'exclamation-circle',
+    'exclamation-triangle',
     'eye',
-    'eye-closed',
-    'eye-scan',
-    'face-scan-circle',
-    'face-scan-square',
-    'facemask-circle',
-    'facemask-square',
-    'feed',
-    'ferris-wheel',
-    'figma',
-    'figma-file',
-    'file',
-    'file-check',
-    'file-corrupted',
-    'file-download',
-    'file-favourite',
-    'file-left',
-    'file-remove',
-    'file-right',
-    'file-send',
-    'file-smile',
-    'file-text',
-    'filter',
-    'filters',
+    'eye-dropper',
+    'eye-slash',
+    'face-frown',
+    'face-smile',
+    'film',
+    'finger-print',
     'fire',
-    'fire-minimalistic',
-    'fire-square',
     'flag',
-    'flag-2',
-    'flame',
-    'flash-drive',
-    'flashlight',
-    'flashlight-on',
-    'flip-horizontal',
-    'flip-vertical',
-    'floor-lamp',
-    'floor-lamp-minimalistic',
-    'fog',
     'folder',
-    'folder-2',
-    'folder-check',
-    'folder-cloud',
-    'folder-error',
-    'folder-favourite-bookmark',
-    'folder-favourite-star',
+    'folder-arrow-down',
+    'folder-minus',
     'folder-open',
-    'folder-path-connect',
-    'folder-security',
-    'folder-with-files',
-    'football',
-    'forbidden',
-    'forbidden-circle',
+    'folder-plus',
     'forward',
-    'forward-2',
-    'fridge',
-    'fuel',
-    'full-screen',
-    'full-screen-circle',
-    'full-screen-square',
-    'gallery',
-    'gallery-add',
-    'gallery-check',
-    'gallery-circle',
-    'gallery-download',
-    'gallery-edit',
-    'gallery-favourite',
-    'gallery-minimalistic',
-    'gallery-remove',
-    'gallery-round',
-    'gallery-send',
-    'gallery-wide',
-    'gameboy',
-    'gamepad',
-    'gamepad-charge',
-    'gamepad-minimalistic',
-    'gamepad-no-charge',
-    'gamepad-old',
-    'garage',
-    'gas-station',
-    'ghost',
-    'ghost-smile',
+    'funnel',
+    'gif',
     'gift',
-    'glasses',
-    'global',
-    'globus',
-    'golf',
-    'gps',
-    'graph',
-    'graph-down',
-    'graph-down-new',
-    'graph-new',
-    'graph-new-up',
-    'graph-up',
-    'hamburger-menu',
-    'hand-heart',
-    'hand-money',
-    'hand-pills',
-    'hand-shake',
-    'hand-stars',
-    'hanger',
-    'hanger-2',
+    'gift-top',
+    'globe-alt',
+    'globe-americas',
+    'globe-asia-australia',
+    'globe-europe-africa',
+    'h1',
+    'h2',
+    'h3',
+    'hand-raised',
+    'hand-thumb-down',
+    'hand-thumb-up',
     'hashtag',
-    'hashtag-chat',
-    'hashtag-circle',
-    'hashtag-square',
-    'headphones-round',
-    'headphones-round-sound',
-    'headphones-square',
-    'headphones-square-sound',
-    'health',
     'heart',
-    'heart-angle',
-    'heart-broken',
-    'heart-lock',
-    'heart-pulse',
-    'heart-pulse-2',
-    'heart-shine',
-    'heart-unlock',
-    'hearts',
-    'help',
-    'high-definition',
-    'high-quality',
-    'hiking',
-    'hiking-minimalistic',
-    'hiking-round',
-    'history',
-    'history-2',
-    'history-3',
     'home',
-    'home-2',
-    'home-add',
-    'home-add-angle',
-    'home-angle',
-    'home-angle-2',
-    'home-smile',
-    'home-smile-angle',
-    'home-wifi',
-    'home-wifi-angle',
-    'hospital',
-    'hourglass',
-    'hourglass-line',
-    'import',
+    'home-modern',
+    'identification',
     'inbox',
-    'inbox-archive',
-    'inbox-in',
-    'inbox-line',
-    'inbox-out',
-    'inbox-unread',
-    'incognito',
-    'incoming-call',
-    'incoming-call-rounded',
-    'infinity',
-    'info-circle',
-    'info-square',
-    'iphone',
-    'jar-of-pills',
-    'jar-of-pills-2',
+    'inbox-arrow-down',
+    'inbox-stack',
+    'information-circle',
+    'italic',
     'key',
-    'key-minimalistic',
-    'key-minimalistic-2',
-    'key-minimalistic-square',
-    'key-minimalistic-square-2',
-    'key-minimalistic-square-3',
-    'key-square',
-    'key-square-2',
-    'keyboard',
-    'kick-scooter',
-    'ladle',
-    'lamp',
-    'laptop',
-    'laptop-2',
-    'laptop-3',
-    'laptop-minimalistic',
-    'layers',
-    'layers-minimalistic',
-    'leaf',
-    'letter',
-    'letter-opened',
-    'letter-unread',
-    'library',
-    'lightbulb',
-    'lightbulb-bolt',
-    'lightbulb-minimalistic',
-    'lightning',
-    'like',
+    'language',
+    'lifebuoy',
+    'light-bulb',
     'link',
-    'link-broken',
-    'link-broken-minimalistic',
-    'link-circle',
-    'link-minimalistic',
-    'link-minimalistic-2',
-    'link-round',
-    'link-round-angle',
-    'link-square',
-    'list',
-    'list-arrow-down',
-    'list-arrow-down-minimalistic',
-    'list-arrow-up',
-    'list-arrow-up-minimalistic',
-    'list-check',
-    'list-check-minimalistic',
-    'list-cross',
-    'list-cross-minimalistic',
-    'list-down',
-    'list-down-minimalistic',
-    'list-heart',
-    'list-heart-minimalistic',
-    'list-up',
-    'list-up-minimalistic',
-    'lock',
-    'lock-keyhole',
-    'lock-keyhole-minimalistic',
-    'lock-keyhole-minimalistic-unlocked',
-    'lock-keyhole-unlocked',
-    'lock-password',
-    'lock-password-unlocked',
-    'lock-unlocked',
-    'login',
-    'login-2',
-    'login-3',
-    'logout',
-    'logout-2',
-    'logout-3',
-    'magic-stick',
-    'magic-stick-2',
-    'magic-stick-3',
-    'magnet',
-    'magnet-wave',
-    'magnifer',
-    'magnifer-bug',
-    'magnifer-zoom-in',
-    'magnifer-zoom-out',
-    'mailbox',
+    'link-slash',
+    'list-bullet',
+    'lock-closed',
+    'lock-open',
+    'magnifying-glass',
+    'magnifying-glass-circle',
+    'magnifying-glass-minus',
+    'magnifying-glass-plus',
     'map',
-    'map-arrow-down',
-    'map-arrow-left',
-    'map-arrow-right',
-    'map-arrow-square',
-    'map-arrow-up',
-    'map-point',
-    'map-point-add',
-    'map-point-favourite',
-    'map-point-hospital',
-    'map-point-remove',
-    'map-point-rotate',
-    'map-point-school',
-    'map-point-search',
-    'map-point-wave',
-    'mask-happly',
-    'mask-sad',
-    'masks',
-    'maximize',
-    'maximize-square',
-    'maximize-square-2',
-    'maximize-square-3',
-    'maximize-square-minimalistic',
-    'medal-ribbon',
-    'medal-ribbon-star',
-    'medal-ribbons-star',
-    'medal-star',
-    'medal-star-circle',
-    'medal-star-square',
-    'medical-kit',
-    'meditation',
-    'meditation-round',
-    'men',
-    'mention-circle',
-    'mention-square',
-    'menu-dots',
-    'menu-dots-circle',
-    'menu-dots-square',
+    'map-pin',
+    'megaphone',
     'microphone',
-    'microphone-2',
-    'microphone-3',
-    'microphone-large',
-    'minimalistic-magnifer',
-    'minimalistic-magnifer-bug',
-    'minimalistic-magnifer-zoom-in',
-    'minimalistic-magnifer-zoom-out',
-    'minimize',
-    'minimize-square',
-    'minimize-square-2',
-    'minimize-square-3',
-    'minimize-square-minimalistic',
+    'minus',
     'minus-circle',
-    'minus-square',
-    'mirror',
-    'mirror-left',
-    'mirror-right',
-    'money-bag',
-    'monitor',
-    'monitor-camera',
-    'monitor-smartphone',
+    'minus-small',
     'moon',
-    'moon-fog',
-    'moon-sleep',
-    'moon-stars',
-    'mouse',
-    'mouse-circle',
-    'mouse-minimalistic',
-    'move-to-folder',
-    'multiple-forward-left',
-    'multiple-forward-right',
-    'music-library',
-    'music-library-2',
-    'music-note',
-    'music-note-2',
-    'music-note-3',
-    'music-note-4',
-    'music-note-slider',
-    'music-note-slider-2',
-    'music-notes',
-    'muted',
-    'notebook',
-    'notebook-bookmark',
-    'notebook-minimalistic',
-    'notebook-square',
-    'notes',
-    'notes-minimalistic',
-    'notification-lines-remove',
-    'notification-remove',
-    'notification-unread',
-    'notification-unread-lines',
-    'object-scan',
-    'outgoing-call',
-    'outgoing-call-rounded',
-    'oven-mitts',
-    'oven-mitts-minimalistic',
-    'paint-roller',
-    'palette',
-    'palette-round',
-    'pallete-2',
-    'panorama',
-    'paper-bin',
-    'paperclip',
-    'paperclip-2',
-    'paperclip-rounded',
-    'paperclip-rounded-2',
-    'paragraph-spacing',
-    'passport',
-    'passport-minimalistic',
-    'password',
-    'password-minimalistic',
-    'password-minimalistic-input',
+    'musical-note',
+    'newspaper',
+    'no-symbol',
+    'numbered-list',
+    'paint-brush',
+    'paper-airplane',
+    'paper-clip',
     'pause',
     'pause-circle',
-    'paw',
-    'pen',
-    'pen-2',
-    'pen-new-round',
-    'pen-new-square',
-    'people-nearby',
-    'perfume',
+    'pencil',
+    'pencil-square',
+    'percent-badge',
     'phone',
-    'phone-calling',
-    'phone-calling-rounded',
-    'phone-rounded',
-    'pie-chart',
-    'pie-chart-2',
-    'pie-chart-3',
-    'pill',
-    'pills',
-    'pills-2',
-    'pills-3',
-    'pin',
-    'pin-circle',
-    'pin-list',
-    'pip',
-    'pip-2',
-    'pipette',
-    'plaaylist-minimalistic',
-    'plain',
-    'plain-2',
-    'plain-3',
-    'planet',
-    'planet-2',
-    'planet-3',
-    'planet-4',
-    'plate',
+    'phone-arrow-down-left',
+    'phone-arrow-up-right',
+    'phone-x-mark',
+    'photo',
     'play',
     'play-circle',
-    'play-stream',
-    'playback-speed',
-    'playlist',
-    'playlist-2',
-    'playlist-minimalistic-2',
-    'playlist-minimalistic-3',
-    'plug-circle',
-    'plus-minus',
-    'podcast',
-    'point-on-map',
-    'point-on-map-perspective',
-    'posts-carousel-horizontal',
-    'posts-carousel-vertical',
+    'play-pause',
+    'plus',
+    'plus-circle',
+    'plus-small',
     'power',
-    'presentation-graph',
+    'presentation-chart-bar',
+    'presentation-chart-line',
     'printer',
-    'printer-2',
-    'printer-minimalistic',
-    'programming',
-    'projector',
-    'pulse',
-    'pulse-2',
+    'puzzle-piece',
     'qr-code',
-    'question-circle',
-    'question-square',
-    'quit-full-screen',
-    'quit-full-screen-circle',
-    'quit-full-screen-square',
-    'quit-pip',
-    'radar',
-    'radar-2',
-    'radial-blur',
+    'question-mark-circle',
+    'queue-list',
     'radio',
-    'radio-minimalistic',
-    'ranking',
-    'recive-square',
-    'recive-twice-square',
-    'record',
-    'record-circle',
-    'record-minimalistic',
-    'record-square',
-    'reel',
-    'reel-2',
-    'refresh',
-    'refresh-circle',
-    'refresh-square',
-    'remote-controller',
-    'remote-controller-2',
-    'remote-controller-minimalistic',
-    'remove-folder',
-    'reorder',
-    'repeat',
-    'repeat-one',
-    'repeat-one-minimalistic',
-    'reply',
-    'reply-2',
-    'restart',
-    'restart-circle',
-    'restart-square',
-    'revote',
-    'rewind-10-seconds-back',
-    'rewind-10-seconds-forward',
-    'rewind-15-seconds-back',
-    'rewind-15-seconds-forward',
-    'rewind-5-seconds-back',
-    'rewind-5-seconds-forward',
-    'rewind-back',
-    'rewind-back-circle',
-    'rewind-forward',
-    'rewind-forward-circle',
-    'rocket',
-    'rocket-2',
-    'rolling-pin',
-    'round-alt-arrow-down',
-    'round-alt-arrow-left',
-    'round-alt-arrow-right',
-    'round-alt-arrow-up',
-    'round-arrow-down',
-    'round-arrow-left',
-    'round-arrow-left-down',
-    'round-arrow-left-up',
-    'round-arrow-right',
-    'round-arrow-right-down',
-    'round-arrow-right-up',
-    'round-arrow-up',
-    'round-double-alt-arrow-down',
-    'round-double-alt-arrow-left',
-    'round-double-alt-arrow-right',
-    'round-double-alt-arrow-up',
-    'round-graph',
-    'round-sort-horizontal',
-    'round-sort-vertical',
-    'round-transfer-diagonal',
-    'round-transfer-horizontal',
-    'round-transfer-vertical',
-    'rounded-magnifer',
-    'rounded-magnifer-bug',
-    'rounded-magnifer-zoom-in',
-    'rounded-magnifer-zoom-out',
-    'route',
-    'routing',
-    'routing-2',
-    'routing-3',
-    'ruble',
-    'rugby',
-    'ruler',
-    'ruler-angular',
-    'ruler-cross-pen',
-    'ruler-pen',
-    'running',
-    'running-2',
-    'running-round',
-    'sad-circle',
-    'sad-square',
-    'safe-2',
-    'safe-circle',
-    'safe-square',
-    'sale',
-    'sale-square',
-    'satellite',
+    'receipt-percent',
+    'receipt-refund',
+    'rectangle-group',
+    'rectangle-stack',
+    'rocket-launch',
+    'rss',
     'scale',
-    'scanner',
-    'scanner-2',
     'scissors',
-    'scissors-square',
-    'scooter',
-    'screen-share',
-    'screencast',
-    'screencast-2',
-    'sd-card',
-    'send-square',
-    'send-twice-square',
     'server',
-    'server-2',
-    'server-minimalistic',
-    'server-path',
-    'server-square',
-    'server-square-cloud',
-    'server-square-update',
-    'settings',
-    'settings-minimalistic',
+    'server-stack',
     'share',
-    'share-circle',
-    'shield',
     'shield-check',
-    'shield-cross',
-    'shield-keyhole',
-    'shield-keyhole-minimalistic',
-    'shield-minimalistic',
-    'shield-minus',
-    'shield-network',
-    'shield-plus',
-    'shield-star',
-    'shield-up',
-    'shield-user',
-    'shield-warning',
-    'shock-absorber',
-    'shop',
-    'shop-2',
-    'shop-minimalistic',
-    'shuffle',
-    'sidebar-code',
-    'sidebar-minimalistic',
-    'siderbar',
-    'signpost',
-    'signpost-2',
-    'sim-card',
-    'sim-card-minimalistic',
-    'sim-cards',
-    'siren',
-    'siren-rounded',
-    'skateboard',
-    'skateboarding',
-    'skateboarding-round',
-    'skip-next',
-    'skip-previous',
-    'skirt',
-    'slash-circle',
-    'slash-square',
-    'sledgehammer',
-    'sleeping',
-    'sleeping-circle',
-    'sleeping-square',
-    'slider-horizontal',
-    'slider-minimalistic-horizontal',
-    'slider-vertical',
-    'slider-vertical-minimalistic',
-    'smart-home',
-    'smart-home-angle',
-    'smart-speaker',
-    'smart-speaker-2',
-    'smart-speaker-minimalistic',
-    'smart-vacuum-cleaner',
-    'smart-vacuum-cleaner-2',
-    'smartphone',
-    'smartphone-2',
-    'smartphone-rotate-2',
-    'smartphone-rotate-angle',
-    'smartphone-rotate-orientation',
-    'smartphone-update',
-    'smartphone-vibration',
-    'smile-circle',
-    'smile-square',
-    'snowflake',
-    'socket',
-    'sofa',
-    'sofa-2',
-    'sofa-3',
-    'sort',
-    'sort-by-alphabet',
-    'sort-by-time',
-    'sort-from-bottom-to-top',
-    'sort-from-top-to-bottom',
-    'sort-horizontal',
-    'sort-vertical',
-    'soundwave',
-    'soundwave-circle',
-    'soundwave-square',
-    'speaker',
-    'speaker-minimalistic',
-    'special-effects',
-    'spedometer-low',
-    'spedometer-max',
-    'spedometer-middle',
-    'square-academic-cap',
-    'square-academic-cap-2',
-    'square-alt-arrow-down',
-    'square-alt-arrow-left',
-    'square-alt-arrow-right',
-    'square-alt-arrow-up',
-    'square-arrow-down',
-    'square-arrow-left',
-    'square-arrow-left-down',
-    'square-arrow-left-up',
-    'square-arrow-right',
-    'square-arrow-right-down',
-    'square-arrow-right-up',
-    'square-arrow-up',
-    'square-bottom-down',
-    'square-bottom-up',
-    'square-double-alt-arrow-down',
-    'square-double-alt-arrow-left',
-    'square-double-alt-arrow-right',
-    'square-double-alt-arrow-up',
-    'square-forward',
-    'square-share-line',
-    'square-sort-horizontal',
-    'square-sort-vertical',
-    'square-top-down',
-    'square-top-up',
-    'square-transfer-horizontal',
-    'square-transfer-vertical',
-    'ssd-round',
-    'ssd-square',
+    'shield-exclamation',
+    'shopping-bag',
+    'shopping-cart',
+    'signal',
+    'signal-slash',
+    'slash',
+    'sparkles',
+    'speaker-wave',
+    'speaker-x-mark',
+    'square-2-stack',
+    'square-3-stack-3d',
+    'squares-2x2',
+    'squares-plus',
     'star',
-    'star-angle',
-    'star-circle',
-    'star-fall',
-    'star-fall-2',
-    'star-fall-minimalistic',
-    'star-fall-minimalistic-2',
-    'star-rainbow',
-    'star-ring',
-    'star-rings',
-    'star-shine',
-    'stars',
-    'stars-line',
-    'stars-minimalistic',
-    'station',
-    'station-minimalistic',
-    'stethoscope',
-    'sticker-circle',
-    'sticker-smile-circle',
-    'sticker-smile-circle-2',
-    'sticker-smile-square',
-    'sticker-square',
     'stop',
     'stop-circle',
-    'stopwatch',
-    'stopwatch-pause',
-    'stopwatch-play',
-    'stream',
-    'streets',
-    'streets-map-point',
-    'streets-navigation',
-    'stretching',
-    'stretching-round',
-    'structure',
-    'subtitles',
-    'suitcase',
-    'suitcase-lines',
-    'suitcase-tag',
+    'strikethrough',
     'sun',
-    'sun-2',
-    'sun-fog',
-    'sunrise',
-    'sunset',
-    'suspension',
-    'suspension-bolt',
-    'suspension-cross',
-    'swimming',
-    'syringe',
-    't-shirt',
-    'tablet',
+    'swatch',
+    'table-cells',
     'tag',
-    'tag-horizontal',
-    'tag-price',
-    'target',
-    'tea-cup',
-    'telescope',
-    'temperature',
-    'tennis',
-    'tennis-2',
-    'test-tube',
-    'test-tube-minimalistic',
-    'text',
-    'text-bold',
-    'text-bold-circle',
-    'text-bold-square',
-    'text-circle',
-    'text-cross',
-    'text-cross-circle',
-    'text-cross-square',
-    'text-field',
-    'text-field-focus',
-    'text-italic',
-    'text-italic-circle',
-    'text-italic-square',
-    'text-selection',
-    'text-square',
-    'text-square-2',
-    'text-underline',
-    'text-underline-circle',
-    'text-underline-cross',
-    'thermometer',
-    'three-squares',
-    'ticker-star',
     'ticket',
-    'ticket-sale',
-    'to-pip',
-    'tornado',
-    'tornado-small',
-    'traffic',
-    'traffic-economy',
-    'tram',
-    'transfer-horizontal',
-    'transfer-vertical',
-    'translation',
-    'translation-2',
-    'transmission',
-    'transmission-circle',
-    'transmission-square',
-    'trash-bin-2',
-    'trash-bin-minimalistic',
-    'trash-bin-minimalistic-2',
-    'trash-bin-trash',
-    'treadmill',
-    'treadmill-round',
-    'trellis',
-    'tuning',
-    'tuning-2',
-    'tuning-3',
-    'tuning-4',
-    'tuning-square',
-    'tuning-square-2',
-    'turntable',
-    'turntable-minimalistic',
-    'turntable-music-note',
+    'trash',
+    'trophy',
+    'truck',
     'tv',
-    'ufo',
-    'ufo-2',
-    'ufo-3',
-    'umbrella',
-    'undo-left',
-    'undo-left-round',
-    'undo-left-round-square',
-    'undo-left-square',
-    'undo-right',
-    'undo-right-round',
-    'undo-right-round-square',
-    'undo-right-square',
-    'unread',
-    'upload',
-    'upload-minimalistic',
-    'upload-square',
-    'upload-track',
-    'upload-track-2',
-    'upload-twice-square',
-    'usb',
-    'usb-circle',
-    'usb-square',
+    'underline',
     'user',
-    'user-block',
-    'user-block-rounded',
-    'user-check',
-    'user-check-rounded',
     'user-circle',
-    'user-cross',
-    'user-cross-rounded',
-    'user-hand-up',
-    'user-hands',
-    'user-heart',
-    'user-heart-rounded',
-    'user-id',
+    'user-group',
     'user-minus',
-    'user-minus-rounded',
     'user-plus',
-    'user-plus-rounded',
-    'user-rounded',
-    'user-speak',
-    'user-speak-rounded',
-    'users-group-rounded',
-    'users-group-two-rounded',
-    'verified-check',
-    'video-frame',
-    'video-frame-2',
-    'video-frame-cut',
-    'video-frame-cut-2',
-    'video-frame-play-horizontal',
-    'video-frame-play-vertical',
-    'video-frame-replace',
-    'video-library',
-    'videocamera',
-    'videocamera-add',
-    'videocamera-record',
-    'vinyl',
-    'vinyl-record',
-    'virus',
-    'volleyball',
-    'volleyball-2',
-    'volume',
-    'volume-cross',
-    'volume-knob',
-    'volume-loud',
-    'volume-small',
-    'wad-of-money',
-    'walking',
-    'walking-round',
+    'users',
+    'variable',
+    'video-camera',
+    'video-camera-slash',
+    'view-columns',
+    'viewfinder-circle',
     'wallet',
-    'wallet-2',
-    'wallet-money',
-    'wallpaper',
-    'washing-machine',
-    'washing-machine-minimalistic',
-    'watch-round',
-    'watch-square',
-    'watch-square-minimalistic',
-    'watch-square-minimalistic-charge',
-    'water',
-    'water-sun',
-    'waterdrop',
-    'waterdrops',
-    'weigher',
-    'wheel',
-    'wheel-angle',
-    'whisk',
-    'wi-fi-router',
-    'wi-fi-router-minimalistic',
-    'wi-fi-router-round',
-    'widget',
-    'widget-2',
-    'widget-3',
-    'widget-4',
-    'widget-5',
-    'widget-6',
-    'widget-add',
-    'wind',
-    'window-frame',
-    'wineglass',
-    'wineglass-triangle',
-    'winrar',
-    'wireless-charge',
-    'women',
-    'xxx',
-    'zip-file',
+    'wifi',
+    'window',
+    'wrench',
+    'wrench-screwdriver',
+    'x-circle',
+    'x-mark',
 ];
 
 class TailwindComponent {
@@ -1288,7 +378,7 @@ class TailwindTooltip extends TailwindComponent {
     tooltipClasses = computed(() => {
         const base = [
             'fixed z-[1070] px-3 py-1.5',
-            'text-xs font-medium text-white bg-surface-900 rounded-lg',
+            'text-xs font-medium text-white bg-neutral-900 rounded-lg',
             'shadow-lg whitespace-nowrap pointer-events-none',
             'transition-opacity duration-150',
             this.isVisible() ? 'opacity-100' : 'opacity-0'
@@ -1296,7 +386,7 @@ class TailwindTooltip extends TailwindComponent {
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "tooltipClasses" }] : /* istanbul ignore next */ []));
     arrowClasses = computed(() => {
-        const base = 'absolute w-2 h-2 bg-surface-900 rotate-45';
+        const base = 'absolute w-2 h-2 bg-neutral-900 rotate-45';
         const posMap = {
             top: 'top-full left-1/2 -translate-x-1/2 -mt-1',
             bottom: 'bottom-full left-1/2 -translate-x-1/2 -mb-1',
@@ -1484,9 +574,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                 }]
         }] });
 
+const TAILWIND_MODAL_DATA = new InjectionToken('TAILWIND_MODAL_DATA');
+/** Default pixel size for `tailwind-icon` when `size` is omitted (typically 16–64). */
+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 template for `tailwind-pagination` **summary** when the `summary` input is omitted.
+ * Use placeholders `{start}`, `{end}`, `{total}` (same rules as the `summary` input).
+ */
+const TAILWIND_PAGINATION_SUMMARY = new InjectionToken('TAILWIND_PAGINATION_SUMMARY');
+
+const clampIconSize = (value) => {
+    if (!Number.isFinite(value))
+        return 24;
+    const rounded = Math.round(value);
+    return Math.min(64, Math.max(16, rounded));
+};
+class TailwindIcon extends TailwindComponent {
+    iconSize = inject(TAILWIND_ICON_SIZE, { optional: true });
+    /** Heroicons outline icon name; SVG path `/tailwind-icons/<name>.svg` */
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Width and height in px (16–64, clamped); default from `TAILWIND_ICON_SIZE` or **24** */
+    size = input(clampIconSize(this.iconSize ?? 24), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    src = computed(() => `/tailwind-icons/${this.icon()}.svg`, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    pixelSize = computed(() => clampIconSize(this.size()), ...(ngDevMode ? [{ debugName: "pixelSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindIcon, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindIcon, isStandalone: true, selector: "tailwind-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex shrink-0 items-center justify-center" }, usesInheritance: true, ngImport: i0, template: "<img\r\n  class=\"block shrink-0\"\r\n  [src]=\"src()\"\r\n  [attr.width]=\"pixelSize()\"\r\n  [attr.height]=\"pixelSize()\"\r\n  [attr.alt]=\"icon()\"\r\n  [attr.aria-hidden]=\"true\"\r\n  decoding=\"async\" />\r\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'tailwind-icon', host: {
+                        class: 'inline-flex shrink-0 items-center justify-center'
+                    }, template: "<img\r\n  class=\"block shrink-0\"\r\n  [src]=\"src()\"\r\n  [attr.width]=\"pixelSize()\"\r\n  [attr.height]=\"pixelSize()\"\r\n  [attr.alt]=\"icon()\"\r\n  [attr.aria-hidden]=\"true\"\r\n  decoding=\"async\" />\r\n" }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 /** Host attributes on `<tailwind-table>`; kept in sync for sort-header observers. */
 const TW_TABLE_SORT_KEY_ATTR = 'data-tw-sort-key';
 const TW_TABLE_SORT_DIR_ATTR = 'data-tw-sort-dir';
+const MAX_TABLE_RESOLVE_ATTEMPTS = 24;
 /**
  * Sortable column header: put on `<th>` (plain header text + directive). Not sortable columns omit this directive.
  * Sorting is handled by the nearest `tailwind-table` host (event delegation); do not pass a table reference.
@@ -1496,75 +622,72 @@ class TailwindSortHeaderDirective {
     sortKey = input.required(...(ngDevMode ? [{ debugName: "sortKey" }] : /* istanbul ignore next */ []));
     host = inject((ElementRef));
     renderer = inject(Renderer2);
-    svg;
+    appRef = inject(ApplicationRef);
+    environmentInjector = inject(EnvironmentInjector);
+    injector = inject(Injector);
+    iconRef;
+    mo;
+    destroyed = false;
     constructor() {
-        effect(onCleanup => {
-            const key = this.sortKey();
-            const tableEl = this.host.nativeElement.closest('tailwind-table');
-            if (!tableEl)
-                return;
-            const sync = () => {
-                const activeKey = tableEl.getAttribute(TW_TABLE_SORT_KEY_ATTR) ?? '';
-                const dirRaw = tableEl.getAttribute(TW_TABLE_SORT_DIR_ATTR) ?? 'asc';
-                const asc = dirRaw === 'asc';
-                const active = activeKey === key;
-                if (!this.svg) {
-                    this.svg = this.createSvg();
-                    this.renderer.appendChild(this.host.nativeElement, this.svg);
-                }
-                this.updateSvg(active, asc);
-                this.renderer.setAttribute(this.host.nativeElement, 'aria-label', active ? `Sorted ${asc ? 'ascending' : 'descending'}, activate to reverse` : `Sort by ${key}`);
-            };
-            sync();
-            const mo = new MutationObserver(() => sync());
-            mo.observe(tableEl, {
-                attributes: true,
-                attributeFilter: [TW_TABLE_SORT_KEY_ATTR, TW_TABLE_SORT_DIR_ATTR]
-            });
-            onCleanup(() => mo.disconnect());
+        inject(DestroyRef).onDestroy(() => {
+            this.destroyed = true;
+            this.mo?.disconnect();
+            this.mo = undefined;
+            this.iconRef?.destroy();
+            this.iconRef = undefined;
         });
+        afterNextRender(() => {
+            if (!this.destroyed) {
+                this.resolveTableAndAttach(0);
+            }
+        }, { injector: this.injector });
     }
-    createSvg() {
-        const svg = this.renderer.createElement('svg', 'svg');
-        this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');
-        this.renderer.setAttribute(svg, 'viewBox', '0 0 20 20');
-        this.renderer.setAttribute(svg, 'fill', 'currentColor');
-        this.renderer.setAttribute(svg, 'aria-hidden', 'true');
-        const ascPath = this.renderer.createElement('path', 'svg');
-        this.renderer.setAttribute(ascPath, 'fill-rule', 'evenodd');
-        this.renderer.setAttribute(ascPath, 'd', 'M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z');
-        this.renderer.setAttribute(ascPath, 'clip-rule', 'evenodd');
-        this.renderer.addClass(ascPath, 'tailwind-sort-header__asc');
-        const descPath = this.renderer.createElement('path', 'svg');
-        this.renderer.setAttribute(descPath, 'fill-rule', 'evenodd');
-        this.renderer.setAttribute(descPath, 'd', 'M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z');
-        this.renderer.setAttribute(descPath, 'clip-rule', 'evenodd');
-        this.renderer.addClass(descPath, 'tailwind-sort-header__desc');
-        this.renderer.appendChild(svg, ascPath);
-        this.renderer.appendChild(svg, descPath);
-        return svg;
-    }
-    updateSvg(active, asc) {
-        if (!this.svg)
+    /**
+     * After first render the projected `<th>` may still not be under `<tailwind-table>` in the DOM
+     * for one frame; retry with `requestAnimationFrame` until `closest` succeeds.
+     */
+    resolveTableAndAttach(attempt) {
+        if (this.destroyed || this.mo)
             return;
-        this.renderer.setAttribute(this.svg, 'class', `inline-block align-middle ml-1 w-3.5 h-3.5 shrink-0 ${active ? 'text-primary-600' : 'text-surface-400'}`);
-        const ascPath = this.svg.querySelector('.tailwind-sort-header__asc');
-        const descPath = this.svg.querySelector('.tailwind-sort-header__desc');
-        const showAsc = active && asc;
-        const showDesc = active ? !asc : true;
-        this.setPathHidden(ascPath, !showAsc);
-        this.setPathHidden(descPath, !showDesc);
-    }
-    setPathHidden(el, hidden) {
-        if (!el)
+        const tableEl = this.host.nativeElement.closest('tailwind-table');
+        if (!tableEl) {
+            if (attempt < MAX_TABLE_RESOLVE_ATTEMPTS) {
+                requestAnimationFrame(() => this.resolveTableAndAttach(attempt + 1));
+            }
             return;
-        if (hidden)
-            this.renderer.addClass(el, 'hidden');
-        else
-            this.renderer.removeClass(el, 'hidden');
+        }
+        const sync = () => {
+            if (this.destroyed || !this.iconRef)
+                return;
+            const columnKey = this.sortKey();
+            const activeKey = tableEl.getAttribute(TW_TABLE_SORT_KEY_ATTR) ?? '';
+            const dirRaw = tableEl.getAttribute(TW_TABLE_SORT_DIR_ATTR) ?? 'asc';
+            const asc = dirRaw === 'asc';
+            const active = activeKey === columnKey;
+            const icon = active ? (asc ? 'chevron-up' : 'chevron-down') : 'chevron-up-down';
+            this.iconRef.setInput('icon', icon);
+            this.iconRef.setInput('size', 14);
+            this.iconRef.setInput('class', active ? 'shrink-0 text-primary-600' : 'shrink-0 text-neutral-400');
+            this.renderer.setAttribute(this.host.nativeElement, 'aria-label', active ? `Sorted ${asc ? 'ascending' : 'descending'}, activate to reverse` : `Sort by ${columnKey}`);
+            this.iconRef.changeDetectorRef.detectChanges();
+        };
+        if (!this.iconRef) {
+            this.iconRef = createComponent(TailwindIcon, {
+                environmentInjector: this.environmentInjector,
+                elementInjector: this.injector
+            });
+            this.renderer.appendChild(this.host.nativeElement, this.iconRef.location.nativeElement);
+            this.appRef.attachView(this.iconRef.hostView);
+        }
+        sync();
+        this.mo = new MutationObserver(() => sync());
+        this.mo.observe(tableEl, {
+            attributes: true,
+            attributeFilter: [TW_TABLE_SORT_KEY_ATTR, TW_TABLE_SORT_DIR_ATTR]
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSortHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSortHeaderDirective, isStandalone: true, selector: "[tailwindSortHeader]", inputs: { sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.tabindex": "0", "attr.data-sort-key": "sortKey()" }, classAttribute: "cursor-pointer hover:text-surface-900 select-none table-cell align-middle whitespace-nowrap text-left" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSortHeaderDirective, isStandalone: true, selector: "[tailwindSortHeader]", inputs: { sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.tabindex": "0", "attr.data-sort-key": "sortKey()" }, classAttribute: "flex cursor-pointer items-center gap-1.5 justify-start whitespace-nowrap text-left select-none hover:text-neutral-900" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSortHeaderDirective, decorators: [{
             type: Directive,
@@ -1572,7 +695,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                     selector: '[tailwindSortHeader]',
                     standalone: true,
                     host: {
-                        class: 'cursor-pointer hover:text-surface-900 select-none table-cell align-middle whitespace-nowrap text-left',
+                        class: 'flex cursor-pointer items-center gap-1.5 justify-start whitespace-nowrap text-left select-none hover:text-neutral-900',
                         '[attr.tabindex]': '0',
                         '[attr.data-sort-key]': 'sortKey()'
                     }
@@ -1605,15 +728,15 @@ class TailwindButton extends TailwindComponent {
         ];
         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',
-            secondary: 'bg-surface-100 text-surface-800 hover:bg-surface-200 active:bg-surface-300 border-surface-300 focus-visible:outline-surface-500 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-surface-900 hover:bg-warning-600 active:bg-warning-700 border-transparent focus-visible:outline-warning-500 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'
         };
         const outlinedMap = {
             primary: 'bg-transparent text-primary-600 border-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
-            secondary: 'bg-transparent text-surface-700 border-surface-300 hover:bg-surface-50 active:bg-surface-100 focus-visible:outline-surface-500',
+            secondary: 'bg-transparent text-neutral-700 border-neutral-300 hover:bg-neutral-50 active:bg-neutral-100 focus-visible:outline-neutral-500',
             danger: 'bg-transparent text-danger-600 border-danger-600 hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
             success: 'bg-transparent text-success-600 border-success-600 hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
             warning: 'bg-transparent text-warning-600 border-warning-500 hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-500',
@@ -1622,7 +745,7 @@ class TailwindButton extends TailwindComponent {
         /** Transparent + hover/active background tint (former `text` look). */
         const ghostMap = {
             primary: 'bg-transparent text-primary-600 border-transparent hover:bg-primary-50 active:bg-primary-100 focus-visible:outline-primary-600',
-            secondary: 'bg-transparent text-surface-700 border-transparent hover:bg-surface-100 active:bg-surface-200 focus-visible:outline-surface-500',
+            secondary: 'bg-transparent text-neutral-700 border-transparent hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-neutral-500',
             danger: 'bg-transparent text-danger-600 border-transparent hover:bg-danger-50 active:bg-danger-100 focus-visible:outline-danger-600',
             success: 'bg-transparent text-success-600 border-transparent hover:bg-success-50 active:bg-success-100 focus-visible:outline-success-600',
             warning: 'bg-transparent text-warning-600 border-transparent hover:bg-warning-50 active:bg-warning-100 focus-visible:outline-warning-500',
@@ -1631,7 +754,7 @@ class TailwindButton extends TailwindComponent {
         /** Text color from severity only; background stays transparent on hover/active. */
         const textMap = {
             primary: 'bg-transparent text-primary-600 border-transparent focus-visible:outline-primary-600',
-            secondary: 'bg-transparent text-surface-700 border-transparent focus-visible:outline-surface-500',
+            secondary: 'bg-transparent text-neutral-700 border-transparent focus-visible:outline-neutral-500',
             danger: 'bg-transparent text-danger-600 border-transparent focus-visible:outline-danger-600',
             success: 'bg-transparent text-success-600 border-transparent focus-visible:outline-success-600',
             warning: 'bg-transparent text-warning-600 border-transparent focus-visible:outline-warning-500',
@@ -1672,36 +795,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
             args: [{ selector: 'tailwind-button', imports: [NgClass], template: "<button\n  [ngClass]=\"computedClasses()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.aria-disabled]=\"disabled() || null\"\n  (click)=\"handleClick($event)\">\n  <ng-content />\n</button>\n", styles: [":host{display:inline-block}.tailwind-btn-spinner{animation:tailwind-spin 1s linear infinite;width:1em;height:1em}@keyframes tailwind-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
 
-const TAILWIND_MODAL_DATA = new InjectionToken('TAILWIND_MODAL_DATA');
-/** Default pixel size for `tailwind-icon` when `size` is omitted (typically 16–64). */
-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');
-
-const clampIconSize = (value) => {
-    if (!Number.isFinite(value))
-        return 24;
-    const rounded = Math.round(value);
-    return Math.min(64, Math.max(16, rounded));
-};
-class TailwindIcon extends TailwindComponent {
-    iconSize = inject(TAILWIND_ICON_SIZE, { optional: true });
-    /** Solar Line Duotone icon name; SVG path `/tailwind-icons/<name>.svg` */
-    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    /** Width and height in px (16–64, clamped); default from `TAILWIND_ICON_SIZE` or **24** */
-    size = input(clampIconSize(this.iconSize ?? 24), ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    src = computed(() => `/tailwind-icons/${this.icon()}.svg`, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-    pixelSize = computed(() => clampIconSize(this.size()), ...(ngDevMode ? [{ debugName: "pixelSize" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindIcon, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindIcon, isStandalone: true, selector: "tailwind-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex shrink-0 items-center justify-center" }, usesInheritance: true, ngImport: i0, template: "<img\r\n  class=\"block shrink-0\"\r\n  [src]=\"src()\"\r\n  [attr.width]=\"pixelSize()\"\r\n  [attr.height]=\"pixelSize()\"\r\n  [attr.alt]=\"icon()\"\r\n  [attr.aria-hidden]=\"true\"\r\n  decoding=\"async\" />\r\n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindIcon, decorators: [{
-            type: Component,
-            args: [{ selector: 'tailwind-icon', host: {
-                        class: 'inline-flex shrink-0 items-center justify-center'
-                    }, template: "<img\r\n  class=\"block shrink-0\"\r\n  [src]=\"src()\"\r\n  [attr.width]=\"pixelSize()\"\r\n  [attr.height]=\"pixelSize()\"\r\n  [attr.alt]=\"icon()\"\r\n  [attr.aria-hidden]=\"true\"\r\n  decoding=\"async\" />\r\n" }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
 class TailwindInput extends TailwindComponent {
     /** Label text */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -1728,9 +821,9 @@ class TailwindInput extends TailwindComponent {
         const base = [
             'block w-full bg-white',
             'border transition-colors duration-150',
-            'placeholder:text-surface-400',
+            'placeholder:text-neutral-400',
             'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
-            'disabled:bg-surface-50 disabled:text-surface-400 disabled:cursor-not-allowed'
+            'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed'
         ];
         const sizeMap = {
             xs: 'text-xs px-2 py-1 rounded-sm',
@@ -1741,7 +834,7 @@ class TailwindInput extends TailwindComponent {
         };
         const stateClass = this.hasError()
             ? 'border-danger-400 focus:outline-danger-500 text-danger-900'
-            : 'border-surface-300 focus:outline-primary-500 text-surface-900';
+            : 'border-neutral-300 focus:outline-primary-500 text-neutral-900';
         return [...base, sizeMap[this.size()], stateClass].join(' ');
     }, ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
     // CVA
@@ -1774,7 +867,7 @@ class TailwindInput extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindInput),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-surface-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInput, decorators: [{
             type: Component,
@@ -1784,7 +877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindInput),
                             multi: true
                         }
-                    ], template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-surface-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"tailwind-input-wrapper flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <input\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    [type]=\"type()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [readonly]=\"readonly()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [value]=\"value()\"\n    [class]=\"inputClasses()\"\n    (input)=\"onInputChange($event)\"\n    (blur)=\"onBlur()\" />\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\n      {{ helperText() }}\n    </p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\n      {{ errorText() }}\n    </p>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TailwindTextarea extends TailwindComponent {
@@ -1819,9 +912,9 @@ class TailwindTextarea extends TailwindComponent {
         const base = [
             'block w-full bg-white',
             'border transition-colors duration-150',
-            'placeholder:text-surface-400',
+            'placeholder:text-neutral-400',
             'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
-            'disabled:bg-surface-50 disabled:text-surface-400 disabled:cursor-not-allowed'
+            'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed'
         ];
         const sizeMap = {
             xs: 'text-xs px-2 py-1 rounded-sm min-h-[4.5rem]',
@@ -1838,7 +931,7 @@ class TailwindTextarea extends TailwindComponent {
         };
         const stateClass = this.hasError()
             ? 'border-danger-400 focus:outline-danger-500 text-danger-900'
-            : 'border-surface-300 focus:outline-primary-500 text-surface-900';
+            : 'border-neutral-300 focus:outline-primary-500 text-neutral-900';
         return [...base, sizeMap[this.size()], resizeMap[this.resize()], stateClass].join(' ');
     }, ...(ngDevMode ? [{ debugName: "textareaClasses" }] : /* istanbul ignore next */ []));
     onChange = () => { };
@@ -1870,7 +963,7 @@ class TailwindTextarea extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindTextarea),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-neutral-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTextarea, decorators: [{
             type: Component,
@@ -1880,7 +973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindTextarea),
                             multi: true
                         }
-                    ], template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"tailwind-textarea-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"id() ? id() + '-inner' : null\"\r\n      class=\"text-sm font-medium text-neutral-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <textarea\r\n    [attr.id]=\"id() ? id() + '-inner' : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rows]=\"rows()\"\r\n    [attr.cols]=\"cols() ?? null\"\r\n    [attr.maxlength]=\"maxlength() ?? null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n    [value]=\"value()\"\r\n    [class]=\"textareaClasses()\"\r\n    (input)=\"onInputChange($event)\"\r\n    (blur)=\"onBlur()\"></textarea>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TailwindUpload extends TailwindComponent {
@@ -1931,10 +1024,13 @@ class TailwindUpload extends TailwindComponent {
             'transition-colors duration-150 outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2'
         ];
         if (this.isDisabled()) {
-            return [...base, 'cursor-not-allowed opacity-50 bg-surface-50 border-surface-200 text-surface-500'].join(' ');
+            return [...base, 'cursor-not-allowed opacity-50 bg-neutral-50 border-neutral-200 text-neutral-500'].join(' ');
         }
         if (this.isDragOver()) {
-            return [...base, 'cursor-pointer border-primary-500 bg-primary-50/60 text-surface-800 focus-visible:outline-primary-500'].join(' ');
+            return [
+                ...base,
+                'cursor-pointer border-primary-500 bg-primary-50/60 text-neutral-800 focus-visible:outline-primary-500'
+            ].join(' ');
         }
         if (this.hasError()) {
             return [
@@ -1944,7 +1040,7 @@ class TailwindUpload extends TailwindComponent {
         }
         return [
             ...base,
-            'cursor-pointer border-surface-300 bg-surface-50/50 text-surface-800 focus-visible:outline-primary-500',
+            'cursor-pointer border-neutral-300 bg-neutral-50/50 text-neutral-800 focus-visible:outline-primary-500',
             'hover:border-primary-400 hover:bg-primary-50/30'
         ].join(' ');
     }, ...(ngDevMode ? [{ debugName: "areaClasses" }] : /* istanbul ignore next */ []));
@@ -2033,7 +1129,7 @@ class TailwindUpload extends TailwindComponent {
         const max = this.maxFileSizeBytes();
         if (max == null)
             return null;
-        const tooLarge = files.filter((f) => f.size > max);
+        const tooLarge = files.filter(f => f.size > max);
         if (tooLarge.length === 0)
             return null;
         const maxLabel = max >= 1024 * 1024
@@ -2055,9 +1151,9 @@ class TailwindUpload extends TailwindComponent {
             this.validationError.emit(err);
             return;
         }
-        this.selectedNames.set(files.map((f) => f.name));
+        this.selectedNames.set(files.map(f => f.name));
         try {
-            const dataUrls = await Promise.all(files.map((f) => this.readAsDataUrl(f)));
+            const dataUrls = await Promise.all(files.map(f => this.readAsDataUrl(f)));
             this.filesSelected.emit(files);
             const primary = dataUrls[0] ?? '';
             this.value.set(primary);
@@ -2090,7 +1186,7 @@ class TailwindUpload extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindUpload),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"fileInputId()\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-upload\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-surface-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-surface-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type"], outputs: ["onClick"] }] });
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }, { kind: "component", type: TailwindButton, selector: "tailwind-button", inputs: ["color", "kind", "size", "disabled", "type"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindUpload, decorators: [{
             type: Component,
@@ -2100,7 +1196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindUpload),
                             multi: true
                         }
-                    ], template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"fileInputId()\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-upload\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-surface-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-surface-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"tailwind-upload-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"fileInputId()\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <input\r\n    #fileInput\r\n    type=\"file\"\r\n    class=\"sr-only\"\r\n    [attr.id]=\"fileInputId()\"\r\n    [accept]=\"accept() ?? null\"\r\n    [attr.multiple]=\"multiple() ? '' : null\"\r\n    [disabled]=\"isDisabled()\"\r\n    [attr.aria-invalid]=\"hasError() || null\"\r\n    [attr.aria-describedby]=\"helperText() || errorText() ? fileInputId() + '-helper' : null\"\r\n    (change)=\"onNativeChange($event)\"\r\n    (blur)=\"blurHost()\" />\r\n\r\n  @if (variant() === 'button') {\r\n    <div class=\"flex flex-wrap items-center gap-2\">\r\n      <tailwind-button\r\n        type=\"button\"\r\n        color=\"primary\"\r\n        kind=\"solid\"\r\n        [size]=\"size()\"\r\n        [disabled]=\"isDisabled()\"\r\n        (onClick)=\"triggerPicker($event)\">\r\n        {{ buttonLabel() }}\r\n      </tailwind-button>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  } @else {\r\n    <div class=\"flex flex-col gap-2\">\r\n      <div\r\n        role=\"button\"\r\n        tabindex=\"0\"\r\n        [class]=\"areaClasses()\"\r\n        [attr.aria-disabled]=\"isDisabled() || null\"\r\n        (click)=\"triggerPicker($event)\"\r\n        (keydown)=\"onKeydownArea($event)\"\r\n        (dragenter)=\"onDragEnter($event)\"\r\n        (dragleave)=\"onDragLeave($event)\"\r\n        (dragover)=\"onDragOver($event)\"\r\n        (drop)=\"onDrop($event)\">\r\n        <tailwind-icon icon=\"cloud-arrow-up\" [size]=\"40\" />\r\n        <span class=\"text-sm font-medium\">{{ areaTitle() }}</span>\r\n        <span class=\"text-xs text-neutral-500\">{{ areaHint() }}</span>\r\n      </div>\r\n      @if (showClear() && value()) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"self-start text-sm font-medium text-primary-600 underline-offset-2 hover:underline disabled:cursor-not-allowed disabled:opacity-50\"\r\n          [disabled]=\"isDisabled()\"\r\n          (click)=\"clear($event)\">\r\n          {{ clearText() }}\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  @if (selectedNames().length) {\r\n    <p class=\"truncate text-xs text-neutral-600\" [attr.title]=\"selectedNames().join(', ')\">\r\n      {{ selectedNames().join(', ') }}\r\n    </p>\r\n  }\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"fileInputId() + '-helper'\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], areaTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaTitle", required: false }] }], areaHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "areaHint", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSizeBytes: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSizeBytes", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], validationError: [{ type: i0.Output, args: ["validationError"] }] } });
 
 class TailwindInputOtp extends TailwindComponent {
@@ -2145,7 +1241,7 @@ class TailwindInputOtp extends TailwindComponent {
             'block w-10 text-center font-mono tabular-nums bg-white',
             'border transition-colors duration-150',
             'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
-            'disabled:bg-surface-50 disabled:text-surface-400 disabled:cursor-not-allowed'
+            'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed'
         ];
         const sizeMap = {
             xs: 'text-xs px-1 py-1 rounded-sm min-w-7',
@@ -2156,7 +1252,7 @@ class TailwindInputOtp extends TailwindComponent {
         };
         const stateClass = this.hasError()
             ? 'border-danger-400 focus:outline-danger-500 text-danger-900'
-            : 'border-surface-300 focus:outline-primary-500 text-surface-900';
+            : 'border-neutral-300 focus:outline-primary-500 text-neutral-900';
         return [...base, sizeMap[this.size()], stateClass].join(' ');
     }, ...(ngDevMode ? [{ debugName: "cellClasses" }] : /* istanbul ignore next */ []));
     groupAriaLabel = computed(() => this.label() || this.ariaLabel(), ...(ngDevMode ? [{ debugName: "groupAriaLabel" }] : /* istanbul ignore next */ []));
@@ -2323,7 +1419,7 @@ class TailwindInputOtp extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindInputOtp),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpDigit"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"cellId(0)\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-surface-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+        ], viewQueries: [{ propertyName: "otpInputs", predicate: ["otpDigit"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindInputOtp, decorators: [{
             type: Component,
@@ -2333,7 +1429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindInputOtp),
                             multi: true
                         }
-                    ], template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label\r\n      [attr.for]=\"cellId(0)\"\r\n      class=\"text-sm font-medium text-surface-700\"\r\n      [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-surface-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"tailwind-input-otp-wrapper flex flex-col gap-1.5\">\r\n  @if (label()) {\r\n    <label [attr.for]=\"cellId(0)\" class=\"text-sm font-medium text-neutral-700\" [class.text-danger-600]=\"hasError()\">\r\n      {{ label() }}\r\n    </label>\r\n  }\r\n\r\n  <div role=\"group\" [attr.aria-label]=\"groupAriaLabel()\" class=\"flex flex-wrap items-center gap-2\">\r\n    @for (idx of slotIndexes(); track idx) {\r\n      <input\r\n        #otpDigit\r\n        [attr.id]=\"cellId(idx)\"\r\n        [type]=\"inputType()\"\r\n        [attr.inputmode]=\"inputMode()\"\r\n        [attr.autocomplete]=\"autocompleteForSlot(idx)\"\r\n        [attr.aria-label]=\"'Digit ' + (idx + 1) + ' of ' + slotIndexes().length\"\r\n        [disabled]=\"isDisabled()\"\r\n        [readonly]=\"readonly()\"\r\n        [attr.aria-invalid]=\"hasError() || null\"\r\n        [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\r\n        maxlength=\"1\"\r\n        spellcheck=\"false\"\r\n        [class]=\"cellClasses()\"\r\n        [value]=\"digitAt(idx)\"\r\n        (input)=\"onInput($event, idx)\"\r\n        (keydown)=\"onKeydown($event, idx)\"\r\n        (paste)=\"onPaste($event, idx)\"\r\n        (focus)=\"onSlotFocus(idx)\" />\r\n      @if (showSeparatorAfter(idx)) {\r\n        <span class=\"select-none text-neutral-500\" aria-hidden=\"true\">{{ separator() }}</span>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (helperText() && !hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">\r\n      {{ helperText() }}\r\n    </p>\r\n  }\r\n  @if (errorText() && hasError()) {\r\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">\r\n      {{ errorText() }}\r\n    </p>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], integerOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "integerOnly", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorAfterIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorAfterIndex", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], completed: [{ type: i0.Output, args: ["completed"] }], otpInputs: [{ type: i0.ViewChildren, args: ['otpDigit', { isSignal: true }] }] } });
 
 class TailwindCheckbox extends TailwindComponent {
@@ -2387,7 +1483,7 @@ class TailwindCheckbox extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindCheckbox),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"inline-flex items-center gap-2.5 select-none\"\n  [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-surface-300]=\"!checked()\"\n      [class.bg-white]=\"!checked()\"\n      [class.border-primary-600]=\"checked()\"\n      [class.bg-primary-600]=\"checked()\">\n      @if (checked()) {\n        <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M13.5 4.5L6.5 11.5L3 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </div>\n  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800 leading-tight\">{{\n        label()\n      }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-surface-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"inline-flex items-center gap-2.5 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-neutral-300]=\"!checked()\"\n      [class.bg-white]=\"!checked()\"\n      [class.border-primary-600]=\"checked()\"\n      [class.bg-primary-600]=\"checked()\">\n      @if (checked()) {\n        <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M13.5 4.5L6.5 11.5L3 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </div>\n  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800 leading-tight\">{{\n        label()\n      }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-neutral-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCheckbox, decorators: [{
             type: Component,
@@ -2397,7 +1493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindCheckbox),
                             multi: true
                         }
-                    ], template: "<div\n  class=\"inline-flex items-center gap-2.5 select-none\"\n  [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-surface-300]=\"!checked()\"\n      [class.bg-white]=\"!checked()\"\n      [class.border-primary-600]=\"checked()\"\n      [class.bg-primary-600]=\"checked()\">\n      @if (checked()) {\n        <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M13.5 4.5L6.5 11.5L3 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </div>\n  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800 leading-tight\">{{\n        label()\n      }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-surface-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
+                    ], template: "<div class=\"inline-flex items-center gap-2.5 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <label\n    class=\"relative flex items-center justify-center shrink-0\"\n    [class.cursor-pointer]=\"!isDisabled()\"\n    [class.cursor-not-allowed]=\"isDisabled()\"\n    [attr.for]=\"id() ? id() + '-inner' : null\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"checkbox\"\n      class=\"peer sr-only\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-describedby]=\"description() && id() ? id() + '-desc' : null\"\n      [attr.aria-labelledby]=\"label() && id() ? id() + '-label' : null\"\n      (change)=\"onCheckboxChange($event)\" />\n    <div\n      class=\"w-full h-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1\"\n      [class.rounded-sm]=\"size() === 'xs' || size() === 'sm'\"\n      [class.rounded-md]=\"size() !== 'xs' && size() !== 'sm'\"\n      [class.border-neutral-300]=\"!checked()\"\n      [class.bg-white]=\"!checked()\"\n      [class.border-primary-600]=\"checked()\"\n      [class.bg-primary-600]=\"checked()\">\n      @if (checked()) {\n        <svg class=\"w-full h-full text-white p-0.5\" viewBox=\"0 0 16 16\" fill=\"none\">\n          <path\n            d=\"M13.5 4.5L6.5 11.5L3 8\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      }\n    </div>\n  </label>\n\n  <div class=\"flex flex-col gap-0.5 pt-0.5\">\n    @if (label()) {\n      <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800 leading-tight\">{{\n        label()\n      }}</span>\n    }\n    @if (description()) {\n      <span [attr.id]=\"id() ? id() + '-desc' : null\" class=\"text-xs text-neutral-500 leading-snug\">\n        {{ description() }}\n      </span>\n    }\n  </div>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 class TailwindRadioGroup extends TailwindComponent {
@@ -2466,7 +1562,7 @@ class TailwindRadioGroup extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindRadioGroup),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<fieldset\n  class=\"flex gap-3\"\n  [class.flex-col]=\"orientation() === 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"radiogroup\">\n  @if (label()) {\n    <legend class=\"text-sm font-medium text-surface-700 mb-2\">{{ label() }}</legend>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n      [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n      [class.opacity-50]=\"isDisabled() || option.disabled\">\n      <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n        <input\n          type=\"radio\"\n          class=\"peer sr-only\"\n          [name]=\"name()\"\n          [value]=\"option.value\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"onRadioChange(option.value)\" />\n        <div\n          class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n          [class.border-surface-300]=\"value() !== option.value\"\n          [class.border-primary-600]=\"value() === option.value\">\n          @if (value() === option.value) {\n            <div\n              class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n              [class]=\"dotSizeClass()\"></div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-0.5 pt-0.5\">\n        <span class=\"text-sm font-medium text-surface-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-surface-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<fieldset\n  class=\"flex gap-3\"\n  [class.flex-col]=\"orientation() === 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"radiogroup\">\n  @if (label()) {\n    <legend class=\"text-sm font-medium text-neutral-700 mb-2\">{{ label() }}</legend>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n      [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n      [class.opacity-50]=\"isDisabled() || option.disabled\">\n      <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n        <input\n          type=\"radio\"\n          class=\"peer sr-only\"\n          [name]=\"name()\"\n          [value]=\"option.value\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"onRadioChange(option.value)\" />\n        <div\n          class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n          [class.border-neutral-300]=\"value() !== option.value\"\n          [class.border-primary-600]=\"value() === option.value\">\n          @if (value() === option.value) {\n            <div\n              class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n              [class]=\"dotSizeClass()\"></div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-0.5 pt-0.5\">\n        <span class=\"text-sm font-medium text-neutral-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-neutral-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindRadioGroup, decorators: [{
             type: Component,
@@ -2476,7 +1572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindRadioGroup),
                             multi: true
                         }
-                    ], template: "<fieldset\n  class=\"flex gap-3\"\n  [class.flex-col]=\"orientation() === 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"radiogroup\">\n  @if (label()) {\n    <legend class=\"text-sm font-medium text-surface-700 mb-2\">{{ label() }}</legend>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n      [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n      [class.opacity-50]=\"isDisabled() || option.disabled\">\n      <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n        <input\n          type=\"radio\"\n          class=\"peer sr-only\"\n          [name]=\"name()\"\n          [value]=\"option.value\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"onRadioChange(option.value)\" />\n        <div\n          class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n          [class.border-surface-300]=\"value() !== option.value\"\n          [class.border-primary-600]=\"value() === option.value\">\n          @if (value() === option.value) {\n            <div\n              class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n              [class]=\"dotSizeClass()\"></div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-0.5 pt-0.5\">\n        <span class=\"text-sm font-medium text-surface-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-surface-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<fieldset\n  class=\"flex gap-3\"\n  [class.flex-col]=\"orientation() === 'vertical'\"\n  [attr.aria-label]=\"ariaLabel()\"\n  role=\"radiogroup\">\n  @if (label()) {\n    <legend class=\"text-sm font-medium text-neutral-700 mb-2\">{{ label() }}</legend>\n  }\n\n  @for (option of options(); track option.value) {\n    <label\n      class=\"inline-flex items-start gap-2.5 cursor-pointer select-none\"\n      [class.cursor-not-allowed]=\"isDisabled() || option.disabled\"\n      [class.opacity-50]=\"isDisabled() || option.disabled\">\n      <div class=\"relative flex items-center justify-center shrink-0\" [class]=\"radioSizeClass()\">\n        <input\n          type=\"radio\"\n          class=\"peer sr-only\"\n          [name]=\"name()\"\n          [value]=\"option.value\"\n          [checked]=\"value() === option.value\"\n          [disabled]=\"isDisabled() || !!option.disabled\"\n          (change)=\"onRadioChange(option.value)\" />\n        <div\n          class=\"w-full h-full rounded-full border-2 transition-all duration-150 peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500/30 peer-focus-visible:ring-offset-1 flex items-center justify-center\"\n          [class.border-neutral-300]=\"value() !== option.value\"\n          [class.border-primary-600]=\"value() === option.value\">\n          @if (value() === option.value) {\n            <div\n              class=\"rounded-full bg-primary-600 transition-transform duration-150 scale-100\"\n              [class]=\"dotSizeClass()\"></div>\n          }\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-0.5 pt-0.5\">\n        <span class=\"text-sm font-medium text-neutral-800 leading-tight\">{{ option.label }}</span>\n        @if (option.description) {\n          <span class=\"text-xs text-neutral-500 leading-snug\">{{ option.description }}</span>\n        }\n      </div>\n    </label>\n  }\n</fieldset>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TailwindSelect extends TailwindComponent {
@@ -2538,14 +1634,14 @@ class TailwindSelect extends TailwindComponent {
         };
         const stateClass = this.hasError()
             ? 'border-danger-400 focus:outline-danger-500 text-danger-900'
-            : 'border-surface-300 focus:outline-primary-500';
+            : 'border-neutral-300 focus:outline-primary-500';
         const layout = this.multiple() ? 'items-start' : 'items-center';
         return [
             'flex justify-between w-full bg-white border transition-colors duration-150',
             layout,
             'pr-3 cursor-pointer text-left',
             'outline-none focus:outline focus:outline-2 focus:outline-offset-2',
-            'disabled:bg-surface-50 disabled:text-surface-400 disabled:cursor-not-allowed',
+            'disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed',
             sizeMap[this.size()],
             stateClass
         ].join(' ');
@@ -2573,12 +1669,12 @@ class TailwindSelect extends TailwindComponent {
         return [
             'flex items-center justify-between px-3 py-2 text-sm cursor-pointer select-none',
             isDisabled
-                ? 'text-surface-400 cursor-not-allowed'
+                ? 'text-neutral-400 cursor-not-allowed'
                 : isSelected
                     ? 'bg-primary-50 text-primary-700 font-medium'
                     : isActive
-                        ? 'bg-surface-100 text-surface-900'
-                        : 'text-surface-800 hover:bg-surface-50'
+                        ? 'bg-neutral-100 text-neutral-900'
+                        : 'text-neutral-800 hover:bg-neutral-50'
         ].join(' ');
     }
     // CVA
@@ -2763,7 +1859,7 @@ class TailwindSelect extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-surface-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Trigger button -->\n  <button\n    type=\"button\"\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"triggerClasses()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n    @if (multiple()) {\n      <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-surface-400]=\"selectedOptions().length === 0\">\n        @if (selectedOptions().length === 0) {\n          {{ placeholder() }}\n        } @else {\n          @for (opt of selectedOptions(); track opt) {\n            <span class=\"rounded-md bg-surface-100 px-2 py-0.5 text-sm text-surface-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-surface-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <svg\n      class=\"shrink-0 ml-2 w-4 h-4 text-surface-400 transition-transform duration-150\"\n      [class.rotate-180]=\"isOpen()\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </button>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">{{ helperText() }}</p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n  }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n  <ul\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    class=\"w-full bg-white border border-surface-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n    @if (placeholder()) {\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-surface-400 cursor-default select-none\">\n        {{ placeholder() }}\n      </li>\n    }\n    @for (option of options(); track option.value; let i = $index) {\n      <li\n        role=\"option\"\n        [attr.aria-selected]=\"isOptionSelected(option)\"\n        [attr.aria-disabled]=\"option.disabled || null\"\n        [class]=\"optionClasses(i, option)\"\n        (click)=\"selectOption(option)\"\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n        <span>{{ option.label }}</span>\n\n        @if (isOptionSelected(option)) {\n          <svg\n            class=\"w-4 h-4 text-primary-600 shrink-0\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] });
+        ], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Trigger button -->\n  <button\n    type=\"button\"\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"triggerClasses()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n    @if (multiple()) {\n      <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n        @if (selectedOptions().length === 0) {\n          {{ placeholder() }}\n        } @else {\n          @for (opt of selectedOptions(); track opt) {\n            <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-neutral-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <svg\n      class=\"shrink-0 ml-2 w-4 h-4 text-neutral-400 transition-transform duration-150\"\n      [class.rotate-180]=\"isOpen()\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </button>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n  }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n  <ul\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n    @if (placeholder()) {\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n        {{ placeholder() }}\n      </li>\n    }\n    @for (option of options(); track option.value; let i = $index) {\n      <li\n        role=\"option\"\n        [attr.aria-selected]=\"isOptionSelected(option)\"\n        [attr.aria-disabled]=\"option.disabled || null\"\n        [class]=\"optionClasses(i, option)\"\n        (click)=\"selectOption(option)\"\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n        <span>{{ option.label }}</span>\n\n        @if (isOptionSelected(option)) {\n          <svg\n            class=\"w-4 h-4 text-primary-600 shrink-0\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSelect, decorators: [{
             type: Component,
@@ -2773,7 +1869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindSelect),
                             multi: true
                         }
-                    ], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-surface-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Trigger button -->\n  <button\n    type=\"button\"\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"triggerClasses()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n    @if (multiple()) {\n      <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-surface-400]=\"selectedOptions().length === 0\">\n        @if (selectedOptions().length === 0) {\n          {{ placeholder() }}\n        } @else {\n          @for (opt of selectedOptions(); track opt) {\n            <span class=\"rounded-md bg-surface-100 px-2 py-0.5 text-sm text-surface-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-surface-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <svg\n      class=\"shrink-0 ml-2 w-4 h-4 text-surface-400 transition-transform duration-150\"\n      [class.rotate-180]=\"isOpen()\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </button>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-surface-500\">{{ helperText() }}</p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n  }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n  <ul\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    class=\"w-full bg-white border border-surface-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n    @if (placeholder()) {\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-surface-400 cursor-default select-none\">\n        {{ placeholder() }}\n      </li>\n    }\n    @for (option of options(); track option.value; let i = $index) {\n      <li\n        role=\"option\"\n        [attr.aria-selected]=\"isOptionSelected(option)\"\n        [attr.aria-disabled]=\"option.disabled || null\"\n        [class]=\"optionClasses(i, option)\"\n        (click)=\"selectOption(option)\"\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n        <span>{{ option.label }}</span>\n\n        @if (isOptionSelected(option)) {\n          <svg\n            class=\"w-4 h-4 text-primary-600 shrink-0\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+                    ], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label\n      [attr.for]=\"id() ? id() + '-inner' : null\"\n      class=\"text-sm font-medium text-neutral-700\"\n      [class.text-danger-600]=\"hasError()\">\n      {{ label() }}\n    </label>\n  }\n\n  <!-- Trigger button -->\n  <button\n    type=\"button\"\n    [attr.id]=\"id() ? id() + '-inner' : null\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [attr.aria-invalid]=\"hasError() || null\"\n    [attr.aria-describedby]=\"(helperText() || errorText()) && id() ? id() + '-helper' : null\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"triggerClasses()\"\n    (click)=\"toggleDropdown()\"\n    (keydown)=\"onKeydown($event)\">\n    @if (multiple()) {\n      <span class=\"flex flex-wrap gap-1 flex-1 min-w-0 mr-2\" [class.text-neutral-400]=\"selectedOptions().length === 0\">\n        @if (selectedOptions().length === 0) {\n          {{ placeholder() }}\n        } @else {\n          @for (opt of selectedOptions(); track opt) {\n            <span class=\"rounded-md bg-neutral-100 px-2 py-0.5 text-sm text-neutral-800\">{{ opt.label }}</span>\n          }\n        }\n      </span>\n    } @else {\n      <span [class.text-neutral-400]=\"!selectedOption()\">\n        {{ selectedOption()?.label ?? placeholder() }}\n      </span>\n    }\n\n    <svg\n      class=\"shrink-0 ml-2 w-4 h-4 text-neutral-400 transition-transform duration-150\"\n      [class.rotate-180]=\"isOpen()\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </button>\n\n  @if (helperText() && !hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-neutral-500\">{{ helperText() }}</p>\n  }\n  @if (errorText() && hasError()) {\n    <p [attr.id]=\"id() ? id() + '-helper' : null\" class=\"text-xs text-danger-600\">{{ errorText() }}</p>\n  }\n</div>\n\n<!-- Dropdown panel \u2014 rendered via CDK Overlay outside the component DOM -->\n<ng-template #panelTemplate>\n  <ul\n    role=\"listbox\"\n    [attr.aria-multiselectable]=\"multiple() ? true : null\"\n    class=\"w-full bg-white border border-neutral-200 rounded-md shadow-lg py-1 max-h-60 overflow-auto\">\n    @if (placeholder()) {\n      <li role=\"option\" aria-disabled=\"true\" class=\"px-3 py-2 text-sm text-neutral-400 cursor-default select-none\">\n        {{ placeholder() }}\n      </li>\n    }\n    @for (option of options(); track option.value; let i = $index) {\n      <li\n        role=\"option\"\n        [attr.aria-selected]=\"isOptionSelected(option)\"\n        [attr.aria-disabled]=\"option.disabled || null\"\n        [class]=\"optionClasses(i, option)\"\n        (click)=\"selectOption(option)\"\n        (mouseenter)=\"!option.disabled && activeIndex.set(i)\">\n        <span>{{ option.label }}</span>\n\n        @if (isOptionSelected(option)) {\n          <svg\n            class=\"w-4 h-4 text-primary-600 shrink-0\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-hidden=\"true\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TailwindToggle extends TailwindComponent {
@@ -2803,7 +1899,7 @@ class TailwindToggle extends TailwindComponent {
             'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600',
             'cursor-pointer disabled:cursor-not-allowed'
         ];
-        const stateClass = this.checked() ? 'bg-primary-600' : 'bg-surface-300';
+        const stateClass = this.checked() ? 'bg-primary-600' : 'bg-neutral-300';
         return [...base, sizeMap[this.size()], stateClass].join(' ');
     }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
     /** `aria-label` / `aria-labelledby` for the switch (label text is not a hit target) */
@@ -2870,7 +1966,7 @@ class TailwindToggle extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindToggle),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"inline-flex items-center gap-3 select-none\"\n  [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] });
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"inline-flex items-center gap-3 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindToggle, decorators: [{
             type: Component,
@@ -2880,7 +1976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindToggle),
                             multi: true
                         }
-                    ], template: "<div\n  class=\"inline-flex items-center gap-3 select-none\"\n  [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-surface-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] }]
+                    ], template: "<div class=\"inline-flex items-center gap-3 select-none\" [class.opacity-50]=\"isDisabled()\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked()\"\n    [attr.aria-label]=\"switchAria().label\"\n    [attr.aria-labelledby]=\"switchAria().labelledBy\"\n    [disabled]=\"isDisabled()\"\n    [class]=\"trackClasses()\"\n    (click)=\"toggle()\">\n    <span [class]=\"thumbClasses()\" aria-hidden=\"true\"></span>\n  </button>\n\n  @if (label()) {\n    <span [attr.id]=\"id() ? id() + '-label' : null\" class=\"text-sm font-medium text-neutral-800\">{{ label() }}</span>\n  }\n</div>\n", styles: [":host{display:inline-block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
 
 class TailwindBadge extends TailwindComponent {
@@ -2898,7 +1994,7 @@ class TailwindBadge extends TailwindComponent {
         const base = ['inline-flex items-center gap-1 font-medium', 'leading-none'];
         const variantMap = {
             primary: 'bg-primary-100 text-primary-700',
-            neutral: 'bg-surface-100 text-surface-700',
+            neutral: 'bg-neutral-100 text-neutral-700',
             success: 'bg-success-100 text-success-700',
             warning: 'bg-warning-100 text-warning-800',
             danger: 'bg-danger-100 text-danger-700',
@@ -2925,19 +2021,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
 class TailwindTitle extends TailwindComponent {
     /** Visible title text */
     text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    /** Optional Solar Line Duotone icon name (shown before `text`) */
+    /** Optional Heroicons outline icon name (shown before `text`) */
     icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     /** HTML heading element */
     titleTag = input('h2', ...(ngDevMode ? [{ debugName: "titleTag" }] : /* istanbul ignore next */ []));
     headingClasses = computed(() => {
         const tag = this.titleTag();
         const scale = {
-            h1: 'text-3xl font-bold tracking-tight text-surface-900',
-            h2: 'text-2xl font-semibold tracking-tight text-surface-900',
-            h3: 'text-xl font-semibold tracking-tight text-surface-900',
-            h4: 'text-lg font-normal text-surface-900',
-            h5: 'text-base font-normal text-surface-900',
-            h6: 'text-sm font-normal text-surface-800 uppercase tracking-wide'
+            h1: 'text-3xl font-bold tracking-tight text-neutral-900',
+            h2: 'text-2xl font-semibold tracking-tight text-neutral-900',
+            h3: 'text-xl font-semibold tracking-tight text-neutral-900',
+            h4: 'text-lg font-normal text-neutral-900',
+            h5: 'text-base font-normal text-neutral-900',
+            h6: 'text-sm font-normal text-neutral-800 uppercase tracking-wide'
         };
         const layout = 'inline-flex items-center gap-2 min-w-0';
         const extra = this.class();
@@ -2976,11 +2072,11 @@ class TailwindCard extends TailwindComponent {
     /** Whether the card has a footer */
     hasFooter = input(true, ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"bg-white rounded-xl border border-surface-200 overflow-hidden transition-shadow duration-200\"\n  [class.shadow-sm]=\"!elevated()\"\n  [class.shadow-lg]=\"elevated()\"\n  [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n  [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n  @if (hasHeader()) {\n    <!-- Header slot (always rendered; only visible when content is projected) -->\n    <div class=\"px-6 pt-4 border-b border-surface-100\" [class.bg-surface-50]=\"headerBg()\">\n      <ng-content select=\"[tailwind-card-header]\" />\n    </div>\n  }\n\n  <!-- Image slot -->\n  <ng-content select=\"[tailwind-card-image]\" />\n\n  <!-- Body -->\n  <div class=\"p-6\">\n    <ng-content />\n  </div>\n\n  @if (hasFooter()) {\n    <!-- Footer slot -->\n    <div class=\"px-6 py-4 border-t border-surface-100 bg-surface-50/50\">\n      <ng-content select=\"[tailwind-card-footer]\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindCard, isStandalone: true, selector: "tailwind-card", inputs: { elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, headerBg: { classPropertyName: "headerBg", publicName: "headerBg", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, hasFooter: { classPropertyName: "hasFooter", publicName: "hasFooter", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"bg-white rounded-xl border border-neutral-200 overflow-hidden transition-shadow duration-200\"\n  [class.shadow-sm]=\"!elevated()\"\n  [class.shadow-lg]=\"elevated()\"\n  [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n  [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n  @if (hasHeader()) {\n    <!-- Header slot (always rendered; only visible when content is projected) -->\n    <div class=\"px-6 pt-4 pb-2 border-b border-neutral-100\" [class.bg-neutral-50]=\"headerBg()\">\n      <ng-content select=\"[tailwind-card-header]\" />\n    </div>\n  }\n\n  <!-- Image slot -->\n  <ng-content select=\"[tailwind-card-image]\" />\n\n  <!-- Body -->\n  <div class=\"p-6\">\n    <ng-content />\n  </div>\n\n  @if (hasFooter()) {\n    <!-- Footer slot -->\n    <div class=\"px-6 py-4 border-t border-neutral-100 bg-neutral-50/50\">\n      <ng-content select=\"[tailwind-card-footer]\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindCard, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-card', template: "<div\n  class=\"bg-white rounded-xl border border-surface-200 overflow-hidden transition-shadow duration-200\"\n  [class.shadow-sm]=\"!elevated()\"\n  [class.shadow-lg]=\"elevated()\"\n  [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n  [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n  @if (hasHeader()) {\n    <!-- Header slot (always rendered; only visible when content is projected) -->\n    <div class=\"px-6 pt-4 border-b border-surface-100\" [class.bg-surface-50]=\"headerBg()\">\n      <ng-content select=\"[tailwind-card-header]\" />\n    </div>\n  }\n\n  <!-- Image slot -->\n  <ng-content select=\"[tailwind-card-image]\" />\n\n  <!-- Body -->\n  <div class=\"p-6\">\n    <ng-content />\n  </div>\n\n  @if (hasFooter()) {\n    <!-- Footer slot -->\n    <div class=\"px-6 py-4 border-t border-surface-100 bg-surface-50/50\">\n      <ng-content select=\"[tailwind-card-footer]\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-card', template: "<div\n  class=\"bg-white rounded-xl border border-neutral-200 overflow-hidden transition-shadow duration-200\"\n  [class.shadow-sm]=\"!elevated()\"\n  [class.shadow-lg]=\"elevated()\"\n  [class.hover:shadow-md]=\"hoverable() && !elevated()\"\n  [class.hover:shadow-xl]=\"hoverable() && elevated()\">\n  @if (hasHeader()) {\n    <!-- Header slot (always rendered; only visible when content is projected) -->\n    <div class=\"px-6 pt-4 pb-2 border-b border-neutral-100\" [class.bg-neutral-50]=\"headerBg()\">\n      <ng-content select=\"[tailwind-card-header]\" />\n    </div>\n  }\n\n  <!-- Image slot -->\n  <ng-content select=\"[tailwind-card-image]\" />\n\n  <!-- Body -->\n  <div class=\"p-6\">\n    <ng-content />\n  </div>\n\n  @if (hasFooter()) {\n    <!-- Footer slot -->\n    <div class=\"px-6 py-4 border-t border-neutral-100 bg-neutral-50/50\">\n      <ng-content select=\"[tailwind-card-footer]\" />\n    </div>\n  }\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }], hoverable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverable", required: false }] }], headerBg: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBg", required: false }] }], hasHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasHeader", required: false }] }], hasFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasFooter", required: false }] }] } });
 
 class TailwindAlert extends TailwindComponent {
@@ -3123,11 +2219,11 @@ class TailwindModal extends TailwindComponent {
         }, 200);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindModal, isStandalone: true, selector: "tailwind-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\r\n  <!-- Backdrop -->\r\n  <div\r\n    class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n    [class.opacity-100]=\"isVisible()\"\r\n    [class.opacity-0]=\"!isVisible()\"\r\n    (click)=\"closeOnBackdrop() && close()\"\r\n    aria-hidden=\"true\"></div>\r\n\r\n  <!-- Modal -->\r\n  <div\r\n    role=\"dialog\"\r\n    class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n    [attr.aria-modal]=\"true\"\r\n    (keydown.escape)=\"closeOnEscape() && close()\">\r\n    <div class=\"flex min-h-full items-center justify-center p-4\">\r\n      <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-surface-200\">\r\n          <h2 class=\"text-lg font-semibold text-surface-900 pr-2\">\r\n            <ng-content />\r\n          </h2>\r\n          @if (showCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"p-1.5 -m-1.5 shrink-0 rounded-lg text-surface-400 hover:text-surface-600 hover:bg-surface-100 transition-colors cursor-pointer\"\r\n              aria-label=\"Close\"\r\n              (click)=\"close()\">\r\n              <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                <path\r\n                  d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div class=\"px-6 py-5\">\r\n          <ng-content select=\"[tailwind-modal-content]\" />\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"border-t border-surface-200 px-6 py-4\">\r\n          <ng-content select=\"[tailwind-modal-footer]\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindModal, isStandalone: true, selector: "tailwind-modal", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showCloseButton: { classPropertyName: "showCloseButton", publicName: "showCloseButton", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, viewQueries: [{ propertyName: "modalPanel", first: true, predicate: ["modalPanel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\r\n  <!-- Backdrop -->\r\n  <div\r\n    class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n    [class.opacity-100]=\"isVisible()\"\r\n    [class.opacity-0]=\"!isVisible()\"\r\n    (click)=\"closeOnBackdrop() && close()\"\r\n    aria-hidden=\"true\"></div>\r\n\r\n  <!-- Modal -->\r\n  <div\r\n    role=\"dialog\"\r\n    class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n    [attr.aria-modal]=\"true\"\r\n    (keydown.escape)=\"closeOnEscape() && close()\">\r\n    <div class=\"flex min-h-full items-center justify-center p-4\">\r\n      <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\r\n          <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\r\n            <ng-content />\r\n          </h2>\r\n          @if (showCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"p-1.5 -m-1.5 shrink-0 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors cursor-pointer\"\r\n              aria-label=\"Close\"\r\n              (click)=\"close()\">\r\n              <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                <path\r\n                  d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div class=\"px-6 py-5\">\r\n          <ng-content select=\"[tailwind-modal-content]\" />\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"border-t border-neutral-200 px-6 py-4\">\r\n          <ng-content select=\"[tailwind-modal-footer]\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindModal, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-modal', template: "@if (isOpen()) {\r\n  <!-- Backdrop -->\r\n  <div\r\n    class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n    [class.opacity-100]=\"isVisible()\"\r\n    [class.opacity-0]=\"!isVisible()\"\r\n    (click)=\"closeOnBackdrop() && close()\"\r\n    aria-hidden=\"true\"></div>\r\n\r\n  <!-- Modal -->\r\n  <div\r\n    role=\"dialog\"\r\n    class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n    [attr.aria-modal]=\"true\"\r\n    (keydown.escape)=\"closeOnEscape() && close()\">\r\n    <div class=\"flex min-h-full items-center justify-center p-4\">\r\n      <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-surface-200\">\r\n          <h2 class=\"text-lg font-semibold text-surface-900 pr-2\">\r\n            <ng-content />\r\n          </h2>\r\n          @if (showCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"p-1.5 -m-1.5 shrink-0 rounded-lg text-surface-400 hover:text-surface-600 hover:bg-surface-100 transition-colors cursor-pointer\"\r\n              aria-label=\"Close\"\r\n              (click)=\"close()\">\r\n              <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                <path\r\n                  d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div class=\"px-6 py-5\">\r\n          <ng-content select=\"[tailwind-modal-content]\" />\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"border-t border-surface-200 px-6 py-4\">\r\n          <ng-content select=\"[tailwind-modal-footer]\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'tailwind-modal', template: "@if (isOpen()) {\r\n  <!-- Backdrop -->\r\n  <div\r\n    class=\"fixed inset-0 bg-black/50 backdrop-blur-sm z-1040 transition-opacity duration-200\"\r\n    [class.opacity-100]=\"isVisible()\"\r\n    [class.opacity-0]=\"!isVisible()\"\r\n    (click)=\"closeOnBackdrop() && close()\"\r\n    aria-hidden=\"true\"></div>\r\n\r\n  <!-- Modal -->\r\n  <div\r\n    role=\"dialog\"\r\n    class=\"fixed inset-0 z-1050 overflow-y-auto\"\r\n    [attr.aria-modal]=\"true\"\r\n    (keydown.escape)=\"closeOnEscape() && close()\">\r\n    <div class=\"flex min-h-full items-center justify-center p-4\">\r\n      <div #modalPanel [class]=\"panelClasses()\" tabindex=\"-1\">\r\n        <!-- Header -->\r\n        <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\r\n          <h2 class=\"text-lg font-semibold text-neutral-900 pr-2\">\r\n            <ng-content />\r\n          </h2>\r\n          @if (showCloseButton()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"p-1.5 -m-1.5 shrink-0 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors cursor-pointer\"\r\n              aria-label=\"Close\"\r\n              (click)=\"close()\">\r\n              <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                <path\r\n                  d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\r\n              </svg>\r\n            </button>\r\n          }\r\n        </div>\r\n\r\n        <!-- Body -->\r\n        <div class=\"px-6 py-5\">\r\n          <ng-content select=\"[tailwind-modal-content]\" />\r\n        </div>\r\n\r\n        <!-- Footer -->\r\n        <div class=\"border-t border-neutral-200 px-6 py-4\">\r\n          <ng-content select=\"[tailwind-modal-footer]\" />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], modalPanel: [{ type: i0.ViewChild, args: ['modalPanel', { isSignal: true }] }] } });
 
 class TailwindTab extends TailwindComponent {
@@ -3168,11 +2264,11 @@ class TailwindTabGroup extends TailwindComponent {
         this.activeIndex.set(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTabGroup, isStandalone: true, selector: "tailwind-tab-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TailwindTab, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Tab Headers -->\n<div class=\"border-b border-surface-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n  <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n    @for (tab of tabs(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n        [disabled]=\"tab.disabled()\"\n        class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n        [class.text-primary-600]=\"activeIndex() === i\"\n        [class.text-surface-500]=\"activeIndex() !== i\"\n        [class.hover:text-surface-700]=\"activeIndex() !== i && !tab.disabled()\"\n        [class.opacity-50]=\"tab.disabled()\"\n        [class.cursor-not-allowed]=\"tab.disabled()\"\n        (click)=\"!tab.disabled() && selectTab(i)\">\n        {{ tab.label() }}\n        <!-- Active indicator -->\n        <span\n          class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n          [class.bg-primary-600]=\"activeIndex() === i\"\n          [class.scale-x-100]=\"activeIndex() === i\"\n          [class.scale-x-0]=\"activeIndex() !== i\"></span>\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTabGroup, isStandalone: true, selector: "tailwind-tab-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "tabs", predicate: TailwindTab, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n  <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n    @for (tab of tabs(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n        [disabled]=\"tab.disabled()\"\n        class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n        [class.text-primary-600]=\"activeIndex() === i\"\n        [class.text-neutral-500]=\"activeIndex() !== i\"\n        [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n        [class.opacity-50]=\"tab.disabled()\"\n        [class.cursor-not-allowed]=\"tab.disabled()\"\n        (click)=\"!tab.disabled() && selectTab(i)\">\n        {{ tab.label() }}\n        <!-- Active indicator -->\n        <span\n          class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n          [class.bg-primary-600]=\"activeIndex() === i\"\n          [class.scale-x-100]=\"activeIndex() === i\"\n          [class.scale-x-0]=\"activeIndex() !== i\"></span>\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTabGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-tab-group', template: "<!-- Tab Headers -->\n<div class=\"border-b border-surface-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n  <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n    @for (tab of tabs(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n        [disabled]=\"tab.disabled()\"\n        class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n        [class.text-primary-600]=\"activeIndex() === i\"\n        [class.text-surface-500]=\"activeIndex() !== i\"\n        [class.hover:text-surface-700]=\"activeIndex() !== i && !tab.disabled()\"\n        [class.opacity-50]=\"tab.disabled()\"\n        [class.cursor-not-allowed]=\"tab.disabled()\"\n        (click)=\"!tab.disabled() && selectTab(i)\">\n        {{ tab.label() }}\n        <!-- Active indicator -->\n        <span\n          class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n          [class.bg-primary-600]=\"activeIndex() === i\"\n          [class.scale-x-100]=\"activeIndex() === i\"\n          [class.scale-x-0]=\"activeIndex() !== i\"></span>\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-tab-group', template: "<!-- Tab Headers -->\n<div class=\"border-b border-neutral-200\" role=\"tablist\" [attr.aria-label]=\"ariaLabel()\">\n  <nav class=\"flex -mb-px gap-1\" [class.overflow-x-auto]=\"scrollable()\">\n    @for (tab of tabs(); track $index; let i = $index) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        [attr.id]=\"tab.id() ? 'tab-' + tab.id() : null\"\n        [attr.aria-selected]=\"activeIndex() === i\"\n        [attr.aria-controls]=\"tab.id() ? tab.id() : null\"\n        [disabled]=\"tab.disabled()\"\n        class=\"group relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 focus-visible:rounded-t-lg\"\n        [class.text-primary-600]=\"activeIndex() === i\"\n        [class.text-neutral-500]=\"activeIndex() !== i\"\n        [class.hover:text-neutral-700]=\"activeIndex() !== i && !tab.disabled()\"\n        [class.opacity-50]=\"tab.disabled()\"\n        [class.cursor-not-allowed]=\"tab.disabled()\"\n        (click)=\"!tab.disabled() && selectTab(i)\">\n        {{ tab.label() }}\n        <!-- Active indicator -->\n        <span\n          class=\"absolute bottom-0 left-0 right-0 h-0.5 rounded-full transition-all duration-200\"\n          [class.bg-primary-600]=\"activeIndex() === i\"\n          [class.scale-x-100]=\"activeIndex() === i\"\n          [class.scale-x-0]=\"activeIndex() !== i\"></span>\n      </button>\n    }\n  </nav>\n</div>\n\n<!-- Tab Content -->\n<div class=\"pt-4\">\n  <ng-content />\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindTab), { isSignal: true }] }] } });
 
 class TailwindProgressBar extends TailwindComponent {
@@ -3201,7 +2297,7 @@ class TailwindProgressBar extends TailwindComponent {
             lg: 'h-4',
             xl: 'h-5'
         };
-        return `w-full bg-surface-200 rounded-full overflow-hidden ${sizeMap[this.size()]}`;
+        return `w-full bg-neutral-200 rounded-full overflow-hidden ${sizeMap[this.size()]}`;
     }, ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
     barClasses = computed(() => {
         const variantMap = {
@@ -3224,11 +2320,11 @@ class TailwindProgressBar extends TailwindComponent {
         return base.join(' ');
     }, ...(ngDevMode ? [{ debugName: "barClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindProgressBar, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindProgressBar, isStandalone: true, selector: "tailwind-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full\">\n  @if (showLabel()) {\n    <div class=\"flex justify-between items-center mb-1.5\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-surface-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-surface-600\">{{ clampedValue() }}%</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindProgressBar, isStandalone: true, selector: "tailwind-progress-bar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full\">\n  @if (showLabel()) {\n    <div class=\"flex justify-between items-center mb-1.5\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-neutral-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-neutral-600\">{{ clampedValue() }}%</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindProgressBar, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-progress-bar', template: "<div class=\"w-full\">\n  @if (showLabel()) {\n    <div class=\"flex justify-between items-center mb-1.5\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-surface-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-surface-600\">{{ clampedValue() }}%</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] }]
+            args: [{ selector: 'tailwind-progress-bar', template: "<div class=\"w-full\">\n  @if (showLabel()) {\n    <div class=\"flex justify-between items-center mb-1.5\">\n      @if (label()) {\n        <span class=\"text-sm font-medium text-neutral-700\">{{ label() }}</span>\n      }\n      @if (showValue()) {\n        <span class=\"text-sm font-medium text-neutral-600\">{{ clampedValue() }}%</span>\n      }\n    </div>\n  }\n\n  <div\n    [class]=\"trackClasses()\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"100\"\n    [attr.aria-label]=\"label() || 'Progress'\">\n    <div [class]=\"barClasses()\" [style.width.%]=\"indeterminate() ? 100 : clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}@keyframes tailwind-indeterminate{0%{transform:translate(-100%)}to{transform:translate(200%)}}.tailwind-progress-indeterminate{animation:tailwind-indeterminate 1.5s ease-in-out infinite;width:40%!important}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }] } });
 
 /** Matches previous `min-w-48` floor when the anchor is narrower. */
@@ -3402,11 +2498,11 @@ class TailwindMenu extends TailwindComponent {
         return document.documentElement;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMenu, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMenu, isStandalone: true, selector: "tailwind-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen() && panelLayout(); as layout) {\n  <div\n    #panel\n    role=\"menu\"\n    class=\"fixed z-1000 bg-white rounded-xl border border-surface-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n    [style.top.px]=\"layout.top\"\n    [style.left.px]=\"layout.left ?? null\"\n    [style.right.px]=\"layout.right ?? null\"\n    [style.minWidth.px]=\"layout.minWidth\">\n    @for (item of items(); track $index) {\n      @if (item.divider) {\n        <hr class=\"my-1 border-surface-100\" />\n      } @else {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"!!item.disabled\"\n          class=\"w-full text-left px-4 py-2 text-sm text-surface-700 hover:bg-surface-50 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n          (click)=\"selectItem(item)\">\n          {{ item.label }}\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMenu, isStandalone: true, selector: "tailwind-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (isOpen() && panelLayout(); as layout) {\n  <div\n    #panel\n    role=\"menu\"\n    class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n    [style.top.px]=\"layout.top\"\n    [style.left.px]=\"layout.left ?? null\"\n    [style.right.px]=\"layout.right ?? null\"\n    [style.minWidth.px]=\"layout.minWidth\">\n    @for (item of items(); track $index) {\n      @if (item.divider) {\n        <hr class=\"my-1 border-neutral-100\" />\n      } @else {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"!!item.disabled\"\n          class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n          (click)=\"selectItem(item)\">\n          {{ item.label }}\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-menu', template: "@if (isOpen() && panelLayout(); as layout) {\n  <div\n    #panel\n    role=\"menu\"\n    class=\"fixed z-1000 bg-white rounded-xl border border-surface-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n    [style.top.px]=\"layout.top\"\n    [style.left.px]=\"layout.left ?? null\"\n    [style.right.px]=\"layout.right ?? null\"\n    [style.minWidth.px]=\"layout.minWidth\">\n    @for (item of items(); track $index) {\n      @if (item.divider) {\n        <hr class=\"my-1 border-surface-100\" />\n      } @else {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"!!item.disabled\"\n          class=\"w-full text-left px-4 py-2 text-sm text-surface-700 hover:bg-surface-50 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n          (click)=\"selectItem(item)\">\n          {{ item.label }}\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'tailwind-menu', template: "@if (isOpen() && panelLayout(); as layout) {\n  <div\n    #panel\n    role=\"menu\"\n    class=\"fixed z-1000 bg-white rounded-xl border border-neutral-200 shadow-lg py-1 animate-in fade-in slide-in-from-top-1\"\n    [style.top.px]=\"layout.top\"\n    [style.left.px]=\"layout.left ?? null\"\n    [style.right.px]=\"layout.right ?? null\"\n    [style.minWidth.px]=\"layout.minWidth\">\n    @for (item of items(); track $index) {\n      @if (item.divider) {\n        <hr class=\"my-1 border-neutral-100\" />\n      } @else {\n        <button\n          type=\"button\"\n          role=\"menuitem\"\n          [disabled]=\"!!item.disabled\"\n          class=\"w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer\"\n          (click)=\"selectItem(item)\">\n          {{ item.label }}\n        </button>\n      }\n    }\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onDocumentEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -3465,11 +2561,11 @@ class TailwindDrawer extends TailwindComponent {
         }, 300);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDrawer, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDrawer, isStandalone: true, selector: "tailwind-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Drawer Panel -->\n  <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n    <!-- Header -->\n    <div class=\"flex items-center justify-between px-6 py-4 border-b border-surface-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-surface-900\">{{ title() }}</h2>\n      }\n      <button\n        type=\"button\"\n        class=\"p-1.5 -m-1.5 rounded-lg text-surface-400 hover:text-surface-600 hover:bg-surface-100 transition-colors ml-auto cursor-pointer\"\n        aria-label=\"Close\"\n        (click)=\"close()\">\n        <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    <ng-content select=\"[tailwind-drawer-footer]\" />\n  </div>\n}\n", styles: [":host{display:contents}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDrawer, isStandalone: true, selector: "tailwind-drawer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, usesInheritance: true, ngImport: i0, template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Drawer Panel -->\n  <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n    <!-- Header -->\n    <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-neutral-900\">{{ title() }}</h2>\n      }\n      <button\n        type=\"button\"\n        class=\"p-1.5 -m-1.5 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors ml-auto cursor-pointer\"\n        aria-label=\"Close\"\n        (click)=\"close()\">\n        <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    <ng-content select=\"[tailwind-drawer-footer]\" />\n  </div>\n}\n", styles: [":host{display:contents}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDrawer, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-drawer', template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Drawer Panel -->\n  <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n    <!-- Header -->\n    <div class=\"flex items-center justify-between px-6 py-4 border-b border-surface-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-surface-900\">{{ title() }}</h2>\n      }\n      <button\n        type=\"button\"\n        class=\"p-1.5 -m-1.5 rounded-lg text-surface-400 hover:text-surface-600 hover:bg-surface-100 transition-colors ml-auto cursor-pointer\"\n        aria-label=\"Close\"\n        (click)=\"close()\">\n        <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    <ng-content select=\"[tailwind-drawer-footer]\" />\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'tailwind-drawer', template: "@if (isOpen()) {\n  <!-- Backdrop -->\n  <div\n    class=\"fixed inset-0 bg-black/40 backdrop-blur-sm z-1040 transition-opacity duration-300\"\n    [class.opacity-100]=\"isVisible()\"\n    [class.opacity-0]=\"!isVisible()\"\n    (click)=\"closeOnBackdrop() && close()\"\n    aria-hidden=\"true\"></div>\n\n  <!-- Drawer Panel -->\n  <div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"true\" [attr.aria-label]=\"title()\">\n    <!-- Header -->\n    <div class=\"flex items-center justify-between px-6 py-4 border-b border-neutral-200\">\n      @if (title()) {\n        <h2 class=\"text-lg font-semibold text-neutral-900\">{{ title() }}</h2>\n      }\n      <button\n        type=\"button\"\n        class=\"p-1.5 -m-1.5 rounded-lg text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors ml-auto cursor-pointer\"\n        aria-label=\"Close\"\n        (click)=\"close()\">\n        <svg class=\"w-5 h-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n          <path\n            d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto px-6 py-5\">\n      <ng-content />\n    </div>\n\n    <!-- Footer -->\n    <ng-content select=\"[tailwind-drawer-footer]\" />\n  </div>\n}\n", styles: [":host{display:contents}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }] } });
 
 class TailwindBreadcrumb extends TailwindComponent {
@@ -3477,19 +2573,21 @@ class TailwindBreadcrumb extends TailwindComponent {
     separator = input('>', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBreadcrumb, isStandalone: true, selector: "tailwind-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n  <ol class=\"inline-flex items-center text-sm\">\r\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n      <li class=\"inline-flex items-center\">\r\n        @if (!first) {\r\n          <span class=\"mx-2 text-surface-400\" aria-hidden=\"true\">\r\n            {{ separator() }}\r\n          </span>\r\n        }\r\n        @if (item.link && !last) {\r\n          <a\r\n            [routerLink]=\"item.link\"\r\n            class=\"inline-flex items-center gap-1 text-surface-500 hover:text-primary-600 transition-colors font-medium\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </a>\r\n        } @else {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 font-medium\"\r\n            [class.text-surface-900]=\"last\"\r\n            [class.text-surface-500]=\"!last\"\r\n            [attr.aria-current]=\"last ? 'page' : null\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindBreadcrumb, isStandalone: true, selector: "tailwind-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n  <ol class=\"inline-flex items-center text-sm\">\r\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n      <li class=\"inline-flex items-center\">\r\n        @if (!first) {\r\n          <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\r\n            {{ separator() }}\r\n          </span>\r\n        }\r\n        @if (item.link && !last) {\r\n          <a\r\n            [routerLink]=\"item.link\"\r\n            class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </a>\r\n        } @else {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 font-medium\"\r\n            [class.text-neutral-900]=\"last\"\r\n            [class.text-neutral-500]=\"!last\"\r\n            [attr.aria-current]=\"last ? 'page' : null\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TailwindIcon, selector: "tailwind-icon", inputs: ["icon", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindBreadcrumb, decorators: [{
             type: Component,
-            args: [{ imports: [RouterLink, TailwindIcon], selector: 'tailwind-breadcrumb', template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n  <ol class=\"inline-flex items-center text-sm\">\r\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n      <li class=\"inline-flex items-center\">\r\n        @if (!first) {\r\n          <span class=\"mx-2 text-surface-400\" aria-hidden=\"true\">\r\n            {{ separator() }}\r\n          </span>\r\n        }\r\n        @if (item.link && !last) {\r\n          <a\r\n            [routerLink]=\"item.link\"\r\n            class=\"inline-flex items-center gap-1 text-surface-500 hover:text-primary-600 transition-colors font-medium\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </a>\r\n        } @else {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 font-medium\"\r\n            [class.text-surface-900]=\"last\"\r\n            [class.text-surface-500]=\"!last\"\r\n            [attr.aria-current]=\"last ? 'page' : null\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [RouterLink, TailwindIcon], selector: 'tailwind-breadcrumb', template: "<nav [attr.aria-label]=\"ariaLabel()\" class=\"flex\">\r\n  <ol class=\"inline-flex items-center text-sm\">\r\n    @for (item of items(); track item.label; let last = $last; let first = $first) {\r\n      <li class=\"inline-flex items-center\">\r\n        @if (!first) {\r\n          <span class=\"mx-2 text-neutral-400\" aria-hidden=\"true\">\r\n            {{ separator() }}\r\n          </span>\r\n        }\r\n        @if (item.link && !last) {\r\n          <a\r\n            [routerLink]=\"item.link\"\r\n            class=\"inline-flex items-center gap-1 text-neutral-500 hover:text-primary-600 transition-colors font-medium\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </a>\r\n        } @else {\r\n          <span\r\n            class=\"inline-flex items-center gap-1 font-medium\"\r\n            [class.text-neutral-900]=\"last\"\r\n            [class.text-neutral-500]=\"!last\"\r\n            [attr.aria-current]=\"last ? 'page' : null\">\r\n            @if (item.icon) {\r\n              <tailwind-icon [icon]=\"item.icon\" [size]=\"16\" />\r\n            }\r\n            {{ item.label }}\r\n          </span>\r\n        }\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
 class TailwindPagination extends TailwindComponent {
+    tailwindPaginationSummary = inject(TAILWIND_PAGINATION_SUMMARY, { optional: true });
     totalItems = input.required(...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
     pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
     ariaLabel = input('Pagination', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    summary = input('Showing {start}-{end} of {total}', ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    /** Placeholders `{start}`, `{end}`, `{total}`; default from `TAILWIND_PAGINATION_SUMMARY` or English copy. */
+    summary = input(this.tailwindPaginationSummary ?? 'Showing {start}-{end} of {total}', ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
     onPageChange = output();
     totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     visiblePages = computed(() => {
@@ -3514,11 +2612,11 @@ class TailwindPagination extends TailwindComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindPagination, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindPagination, isStandalone: true, selector: "tailwind-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onPageChange: "onPageChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n  @if (summary()) {\n    <span class=\"text-sm text-surface-700 dark:text-surface-300\">\n      {{ summaryText() }}\n    </span>\n  }\n\n  <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n    <!-- Previous -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() <= 1\"\n      (click)=\"goToPage(currentPage() - 1)\"\n      class=\"p-2 rounded-lg text-surface-500 hover:bg-surface-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n\n    @for (page of visiblePages(); track page) {\n      <button\n        type=\"button\"\n        (click)=\"goToPage(page)\"\n        class=\"min-w-8 h-8 px-2 rounded-lg text-sm font-medium transition-colors cursor-pointer\"\n        [class.bg-primary-600]=\"page === currentPage()\"\n        [class.text-white]=\"page === currentPage()\"\n        [class.text-surface-600]=\"page !== currentPage()\"\n        [class.hover:bg-surface-100]=\"page !== currentPage()\">\n        {{ page }}\n      </button>\n    }\n\n    <!-- Next -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() >= totalPages()\"\n      (click)=\"goToPage(currentPage() + 1)\"\n      class=\"p-2 rounded-lg text-surface-500 hover:bg-surface-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </nav>\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindPagination, isStandalone: true, selector: "tailwind-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onPageChange: "onPageChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n  @if (summary()) {\n    <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n      {{ summaryText() }}\n    </span>\n  }\n\n  <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n    <!-- Previous -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() <= 1\"\n      (click)=\"goToPage(currentPage() - 1)\"\n      class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n\n    @for (page of visiblePages(); track page) {\n      <button\n        type=\"button\"\n        (click)=\"goToPage(page)\"\n        class=\"min-w-8 h-8 px-2 rounded-lg text-sm font-medium transition-colors cursor-pointer\"\n        [class.bg-primary-600]=\"page === currentPage()\"\n        [class.text-white]=\"page === currentPage()\"\n        [class.text-neutral-600]=\"page !== currentPage()\"\n        [class.hover:bg-neutral-100]=\"page !== currentPage()\">\n        {{ page }}\n      </button>\n    }\n\n    <!-- Next -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() >= totalPages()\"\n      (click)=\"goToPage(currentPage() + 1)\"\n      class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </nav>\n</div>\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindPagination, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-pagination', template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n  @if (summary()) {\n    <span class=\"text-sm text-surface-700 dark:text-surface-300\">\n      {{ summaryText() }}\n    </span>\n  }\n\n  <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n    <!-- Previous -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() <= 1\"\n      (click)=\"goToPage(currentPage() - 1)\"\n      class=\"p-2 rounded-lg text-surface-500 hover:bg-surface-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n\n    @for (page of visiblePages(); track page) {\n      <button\n        type=\"button\"\n        (click)=\"goToPage(page)\"\n        class=\"min-w-8 h-8 px-2 rounded-lg text-sm font-medium transition-colors cursor-pointer\"\n        [class.bg-primary-600]=\"page === currentPage()\"\n        [class.text-white]=\"page === currentPage()\"\n        [class.text-surface-600]=\"page !== currentPage()\"\n        [class.hover:bg-surface-100]=\"page !== currentPage()\">\n        {{ page }}\n      </button>\n    }\n\n    <!-- Next -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() >= totalPages()\"\n      (click)=\"goToPage(currentPage() + 1)\"\n      class=\"p-2 rounded-lg text-surface-500 hover:bg-surface-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </nav>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-pagination', template: "<div class=\"flex flex-wrap items-center justify-between gap-4 w-full\">\n  @if (summary()) {\n    <span class=\"text-sm text-neutral-700 dark:text-neutral-300\">\n      {{ summaryText() }}\n    </span>\n  }\n\n  <nav [attr.aria-label]=\"ariaLabel()\" class=\"flex items-center gap-1\">\n    <!-- Previous -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() <= 1\"\n      (click)=\"goToPage(currentPage() - 1)\"\n      class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n\n    @for (page of visiblePages(); track page) {\n      <button\n        type=\"button\"\n        (click)=\"goToPage(page)\"\n        class=\"min-w-8 h-8 px-2 rounded-lg text-sm font-medium transition-colors cursor-pointer\"\n        [class.bg-primary-600]=\"page === currentPage()\"\n        [class.text-white]=\"page === currentPage()\"\n        [class.text-neutral-600]=\"page !== currentPage()\"\n        [class.hover:bg-neutral-100]=\"page !== currentPage()\">\n        {{ page }}\n      </button>\n    }\n\n    <!-- Next -->\n    <button\n      type=\"button\"\n      [disabled]=\"currentPage() >= totalPages()\"\n      (click)=\"goToPage(currentPage() + 1)\"\n      class=\"p-2 rounded-lg text-neutral-500 hover:bg-neutral-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer\">\n      <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n    </button>\n  </nav>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], onPageChange: [{ type: i0.Output, args: ["onPageChange"] }] } });
 
 class TailwindTag extends TailwindComponent {
@@ -3526,9 +2624,9 @@ class TailwindTag extends TailwindComponent {
     computedClasses = computed(() => {
         const variantMap = {
             primary: 'bg-primary-600 text-white',
-            neutral: 'bg-surface-600 text-white',
+            neutral: 'bg-neutral-600 text-white',
             success: 'bg-success-600 text-white',
-            warning: 'bg-warning-500 text-surface-900',
+            warning: 'bg-warning-500 text-neutral-900',
             danger: 'bg-danger-600 text-white',
             info: 'bg-info-600 text-white'
         };
@@ -3543,6 +2641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 class TailwindTable extends TailwindComponent {
+    tailwindPaginationSummary = inject(TAILWIND_PAGINATION_SUMMARY, { optional: true });
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
     striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
@@ -3552,6 +2651,7 @@ class TailwindTable extends TailwindComponent {
     emptyColspan = input(1, ...(ngDevMode ? [{ debugName: "emptyColspan" }] : /* istanbul ignore next */ []));
     paginated = input(true, ...(ngDevMode ? [{ debugName: "paginated" }] : /* istanbul ignore next */ []));
     pagination = input(...(ngDevMode ? [undefined, { debugName: "pagination" }] : /* istanbul ignore next */ []));
+    paginationSummary = computed(() => this.pagination()?.summary ?? this.tailwindPaginationSummary ?? 'Showing {start}-{end} of {total}', ...(ngDevMode ? [{ debugName: "paginationSummary" }] : /* istanbul ignore next */ []));
     onSortChange = output();
     onSelectionChange = output();
     rowTemplate = contentChild.required(TailwindTableRowDirective);
@@ -3653,14 +2753,14 @@ class TailwindTable extends TailwindComponent {
             this.sort(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTable, isStandalone: true, selector: "tailwind-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyColspan: { classPropertyName: "emptyColspan", publicName: "emptyColspan", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSortChange: "onSortChange", onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "onSortZoneClick($event)", "keydown": "onSortZoneKeydown($event)" }, properties: { "attr.data-tw-sort-key": "sortKey()", "attr.data-tw-sort-dir": "sortDir()" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: TailwindTableRowDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-surface-200\">\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-surface-400\">\n      <svg class=\"animate-spin w-6 h-6 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n      </svg>\n      Loading...\n    </div>\n  } @else {\n    <table class=\"w-full text-sm text-left divide-y divide-surface-100\">\n      <ng-content select=\"thead\" />\n      @for (row of displayedData(); track row; let i = $index) {\n        <ng-container\n          *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n      } @empty {\n        <tbody>\n          <tr>\n            <td [attr.colspan]=\"emptyColspan()\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        </tbody>\n      }\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-surface-200 bg-white\">\n        <tailwind-pagination\n          [totalItems]=\"pagination()?.totalItems ?? data().length\"\n          [pageSize]=\"pagination()?.pageSize ?? 10\"\n          [currentPage]=\"currentPage()\"\n          (onPageChange)=\"currentPage.set($event)\"\n          [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n          [summary]=\"pagination()?.summary ?? 'Showing {start}-{end} of {total}'\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host ::ng-deep thead{background-color:var(--color-surface-50);border-bottom:1px solid var(--color-surface-200)}:host ::ng-deep thead th{padding:.75rem 1rem;font-weight:600;color:var(--color-surface-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep tbody td{padding:.75rem 1rem;color:var(--color-surface-700)}:host ::ng-deep tbody td[colspan]{padding:2rem 1rem;text-align:center;color:var(--color-surface-400)}:host ::ng-deep tbody tr{transition-property:background-color,color,border-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host ::ng-deep tbody tr:hover{background-color:color-mix(in oklch,var(--color-surface-50) 50%,transparent)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindPagination, selector: "tailwind-pagination", inputs: ["totalItems", "pageSize", "currentPage", "ariaLabel", "summary"], outputs: ["currentPageChange", "onPageChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTable, isStandalone: true, selector: "tailwind-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyColspan: { classPropertyName: "emptyColspan", publicName: "emptyColspan", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSortChange: "onSortChange", onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "onSortZoneClick($event)", "keydown": "onSortZoneKeydown($event)" }, properties: { "attr.data-tw-sort-key": "sortKey()", "attr.data-tw-sort-dir": "sortDir()" } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: TailwindTableRowDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-neutral-200\">\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-neutral-400\">\n      <svg class=\"animate-spin w-6 h-6 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n      </svg>\n      Loading...\n    </div>\n  } @else {\n    <!-- `table-fixed`: consente `w-*` / `min-w-*` / `max-w-*` sulle celle e sugli `th` proiettati. -->\n    <table class=\"w-full min-w-0 table-fixed text-sm text-left divide-y divide-neutral-100\">\n      <ng-content select=\"thead\" />\n      @for (row of displayedData(); track row; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n      } @empty {\n        <tbody>\n          <tr>\n            <td [attr.colspan]=\"emptyColspan()\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        </tbody>\n      }\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-neutral-200 bg-white\">\n        <tailwind-pagination\n          [totalItems]=\"pagination()?.totalItems ?? data().length\"\n          [pageSize]=\"pagination()?.pageSize ?? 10\"\n          [currentPage]=\"currentPage()\"\n          (onPageChange)=\"currentPage.set($event)\"\n          [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n          [summary]=\"paginationSummary()\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer components{:host{display:block}:host ::ng-deep :where(thead){background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-200)}:host ::ng-deep :where(thead th){padding:.75rem 1rem;font-weight:600;color:var(--color-neutral-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep :where(tbody td){padding:.75rem 1rem;color:var(--color-neutral-700)}:host ::ng-deep :where(tbody td[colspan]){padding:2rem 1rem;text-align:center;color:var(--color-neutral-400)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TailwindPagination, selector: "tailwind-pagination", inputs: ["totalItems", "pageSize", "currentPage", "ariaLabel", "summary"], outputs: ["currentPageChange", "onPageChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTable, decorators: [{
             type: Component,
             args: [{ selector: 'tailwind-table', imports: [NgTemplateOutlet, TailwindPagination], host: {
                         '[attr.data-tw-sort-key]': 'sortKey()',
                         '[attr.data-tw-sort-dir]': 'sortDir()'
-                    }, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-surface-200\">\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-surface-400\">\n      <svg class=\"animate-spin w-6 h-6 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n      </svg>\n      Loading...\n    </div>\n  } @else {\n    <table class=\"w-full text-sm text-left divide-y divide-surface-100\">\n      <ng-content select=\"thead\" />\n      @for (row of displayedData(); track row; let i = $index) {\n        <ng-container\n          *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n      } @empty {\n        <tbody>\n          <tr>\n            <td [attr.colspan]=\"emptyColspan()\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        </tbody>\n      }\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-surface-200 bg-white\">\n        <tailwind-pagination\n          [totalItems]=\"pagination()?.totalItems ?? data().length\"\n          [pageSize]=\"pagination()?.pageSize ?? 10\"\n          [currentPage]=\"currentPage()\"\n          (onPageChange)=\"currentPage.set($event)\"\n          [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n          [summary]=\"pagination()?.summary ?? 'Showing {start}-{end} of {total}'\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block}:host ::ng-deep thead{background-color:var(--color-surface-50);border-bottom:1px solid var(--color-surface-200)}:host ::ng-deep thead th{padding:.75rem 1rem;font-weight:600;color:var(--color-surface-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep tbody td{padding:.75rem 1rem;color:var(--color-surface-700)}:host ::ng-deep tbody td[colspan]{padding:2rem 1rem;text-align:center;color:var(--color-surface-400)}:host ::ng-deep tbody tr{transition-property:background-color,color,border-color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host ::ng-deep tbody tr:hover{background-color:color-mix(in oklch,var(--color-surface-50) 50%,transparent)}\n"] }]
+                    }, template: "<div class=\"w-full overflow-x-auto rounded-lg border border-neutral-200\">\n  @if (loading()) {\n    <div class=\"flex items-center justify-center py-16 text-neutral-400\">\n      <svg class=\"animate-spin w-6 h-6 mr-2\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n      </svg>\n      Loading...\n    </div>\n  } @else {\n    <!-- `table-fixed`: consente `w-*` / `min-w-*` / `max-w-*` sulle celle e sugli `th` proiettati. -->\n    <table class=\"w-full min-w-0 table-fixed text-sm text-left divide-y divide-neutral-100\">\n      <ng-content select=\"thead\" />\n      @for (row of displayedData(); track row; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"rowTemplate().templateRef; context: rowContext(row, i)\" />\n      } @empty {\n        <tbody>\n          <tr>\n            <td [attr.colspan]=\"emptyColspan()\">\n              {{ emptyMessage() }}\n            </td>\n          </tr>\n        </tbody>\n      }\n    </table>\n\n    @if (paginated() && data().length > 0) {\n      <div class=\"px-4 py-3 border-t border-neutral-200 bg-white\">\n        <tailwind-pagination\n          [totalItems]=\"pagination()?.totalItems ?? data().length\"\n          [pageSize]=\"pagination()?.pageSize ?? 10\"\n          [currentPage]=\"currentPage()\"\n          (onPageChange)=\"currentPage.set($event)\"\n          [ariaLabel]=\"pagination()?.ariaLabel ?? 'Pagination'\"\n          [summary]=\"paginationSummary()\">\n        </tailwind-pagination>\n      </div>\n    }\n  }\n</div>\n", styles: ["@layer components{:host{display:block}:host ::ng-deep :where(thead){background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-200)}:host ::ng-deep :where(thead th){padding:.75rem 1rem;font-weight:600;color:var(--color-neutral-700);text-align:left;white-space:nowrap;vertical-align:middle}:host ::ng-deep :where(tbody td){padding:.75rem 1rem;color:var(--color-neutral-700)}:host ::ng-deep :where(tbody td[colspan]){padding:2rem 1rem;text-align:center;color:var(--color-neutral-400)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyColspan: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyColspan", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], onSortChange: [{ type: i0.Output, args: ["onSortChange"] }], onSelectionChange: [{ type: i0.Output, args: ["onSelectionChange"] }], rowTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TailwindTableRowDirective), { isSignal: true }] }], onSortZoneClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
@@ -3808,11 +2908,11 @@ class TailwindDatePicker extends TailwindComponent {
         this.showCalendar.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleCalendar()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </div>\n\n  @if (showCalendar()) {\n    <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-surface-200 shadow-xl p-4 w-72\">\n      <!-- Month/Year nav -->\n      <div class=\"flex items-center justify-between mb-3\">\n        <button\n          type=\"button\"\n          (click)=\"prevMonth()\"\n          class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-surface-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n        <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"nextMonth()\"\n          class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-surface-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n      </div>\n      <!-- Weekdays -->\n      <div class=\"grid grid-cols-7 gap-0 mb-1\">\n        @for (day of weekDays; track $index) {\n          <div class=\"text-center text-xs font-medium text-surface-400 py-1\">{{ day }}</div>\n        }\n      </div>\n      <!-- Days -->\n      <div class=\"grid grid-cols-7 gap-0\">\n        @for (day of calendarDays(); track $index) {\n          @if (day === 0) {\n            <div></div>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"selectDay(day)\"\n              class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-surface-100\"\n              [class.bg-primary-600]=\"isSelected(day)\"\n              [class.text-white]=\"isSelected(day)\"\n              [class.hover:bg-primary-700]=\"isSelected(day)\"\n              [class.text-surface-700]=\"!isSelected(day) && !isToday(day)\"\n              [class.font-semibold]=\"isToday(day)\"\n              [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n              {{ day }}\n            </button>\n          }\n        }\n      </div>\n      <div class=\"mt-2 pt-2 border-t border-surface-100 flex items-center justify-between gap-2\">\n        <button\n          type=\"button\"\n          (click)=\"goToToday()\"\n          [disabled]=\"isDisabled()\"\n          class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n          {{ i18n.today }}\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          [disabled]=\"isDisabled() || !draft()\"\n          class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n          {{ i18n.confirm }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDatePicker, isStandalone: true, selector: "tailwind-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleCalendar()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </div>\n\n  @if (showCalendar()) {\n    <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-neutral-200 shadow-xl p-4 w-72\">\n      <!-- Month/Year nav -->\n      <div class=\"flex items-center justify-between mb-3\">\n        <button\n          type=\"button\"\n          (click)=\"prevMonth()\"\n          class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-neutral-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n        <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"nextMonth()\"\n          class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-neutral-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n      </div>\n      <!-- Weekdays -->\n      <div class=\"grid grid-cols-7 gap-0 mb-1\">\n        @for (day of weekDays; track $index) {\n          <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n        }\n      </div>\n      <!-- Days -->\n      <div class=\"grid grid-cols-7 gap-0\">\n        @for (day of calendarDays(); track $index) {\n          @if (day === 0) {\n            <div></div>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"selectDay(day)\"\n              class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n              [class.bg-primary-600]=\"isSelected(day)\"\n              [class.text-white]=\"isSelected(day)\"\n              [class.hover:bg-primary-700]=\"isSelected(day)\"\n              [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n              [class.font-semibold]=\"isToday(day)\"\n              [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n              {{ day }}\n            </button>\n          }\n        }\n      </div>\n      <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n        <button\n          type=\"button\"\n          (click)=\"goToToday()\"\n          [disabled]=\"isDisabled()\"\n          class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n          {{ i18n.today }}\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          [disabled]=\"isDisabled() || !draft()\"\n          class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n          {{ i18n.confirm }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDatePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleCalendar()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </div>\n\n  @if (showCalendar()) {\n    <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-surface-200 shadow-xl p-4 w-72\">\n      <!-- Month/Year nav -->\n      <div class=\"flex items-center justify-between mb-3\">\n        <button\n          type=\"button\"\n          (click)=\"prevMonth()\"\n          class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-surface-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n        <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"nextMonth()\"\n          class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-surface-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n      </div>\n      <!-- Weekdays -->\n      <div class=\"grid grid-cols-7 gap-0 mb-1\">\n        @for (day of weekDays; track $index) {\n          <div class=\"text-center text-xs font-medium text-surface-400 py-1\">{{ day }}</div>\n        }\n      </div>\n      <!-- Days -->\n      <div class=\"grid grid-cols-7 gap-0\">\n        @for (day of calendarDays(); track $index) {\n          @if (day === 0) {\n            <div></div>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"selectDay(day)\"\n              class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-surface-100\"\n              [class.bg-primary-600]=\"isSelected(day)\"\n              [class.text-white]=\"isSelected(day)\"\n              [class.hover:bg-primary-700]=\"isSelected(day)\"\n              [class.text-surface-700]=\"!isSelected(day) && !isToday(day)\"\n              [class.font-semibold]=\"isToday(day)\"\n              [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n              {{ day }}\n            </button>\n          }\n        }\n      </div>\n      <div class=\"mt-2 pt-2 border-t border-surface-100 flex items-center justify-between gap-2\">\n        <button\n          type=\"button\"\n          (click)=\"goToToday()\"\n          [disabled]=\"isDisabled()\"\n          class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n          {{ i18n.today }}\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          [disabled]=\"isDisabled() || !draft()\"\n          class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n          {{ i18n.confirm }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"] }]
+            args: [{ selector: 'tailwind-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDatePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"toggleCalendar()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n  </div>\n\n  @if (showCalendar()) {\n    <div class=\"absolute z-popover mt-1 bg-white rounded-xl border border-neutral-200 shadow-xl p-4 w-72\">\n      <!-- Month/Year nav -->\n      <div class=\"flex items-center justify-between mb-3\">\n        <button\n          type=\"button\"\n          (click)=\"prevMonth()\"\n          class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-neutral-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n        <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n        <button\n          type=\"button\"\n          (click)=\"nextMonth()\"\n          class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n          <svg\n            class=\"w-4 h-4 text-neutral-600\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\">\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n              clip-rule=\"evenodd\" />\n          </svg>\n        </button>\n      </div>\n      <!-- Weekdays -->\n      <div class=\"grid grid-cols-7 gap-0 mb-1\">\n        @for (day of weekDays; track $index) {\n          <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n        }\n      </div>\n      <!-- Days -->\n      <div class=\"grid grid-cols-7 gap-0\">\n        @for (day of calendarDays(); track $index) {\n          @if (day === 0) {\n            <div></div>\n          } @else {\n            <button\n              type=\"button\"\n              (click)=\"selectDay(day)\"\n              class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n              [class.bg-primary-600]=\"isSelected(day)\"\n              [class.text-white]=\"isSelected(day)\"\n              [class.hover:bg-primary-700]=\"isSelected(day)\"\n              [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n              [class.font-semibold]=\"isToday(day)\"\n              [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n              {{ day }}\n            </button>\n          }\n        }\n      </div>\n      <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n        <button\n          type=\"button\"\n          (click)=\"goToToday()\"\n          [disabled]=\"isDisabled()\"\n          class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n          {{ i18n.today }}\n        </button>\n        <button\n          type=\"button\"\n          (click)=\"apply()\"\n          [disabled]=\"isDisabled() || !draft()\"\n          class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n          {{ i18n.confirm }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;position:relative}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
@@ -3907,11 +3007,11 @@ class TailwindTimePicker extends TailwindComponent {
         this.showPanel.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"i18n.placeholder\"\n      [disabled]=\"isDisabled()\"\n      class=\"block w-full bg-white border border-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-surface-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center gap-2\">\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-surface-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-surface-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToNow()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.now }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n            {{ i18n.apply }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindTimePicker, isStandalone: true, selector: "tailwind-time-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"i18n.placeholder\"\n      [disabled]=\"isDisabled()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center gap-2\">\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToNow()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.now }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n            {{ i18n.apply }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindTimePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-time-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"i18n.placeholder\"\n      [disabled]=\"isDisabled()\"\n      class=\"block w-full bg-white border border-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-surface-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center gap-2\">\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-surface-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-surface-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToNow()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.now }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n            {{ i18n.apply }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-time-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"i18n.placeholder\"\n      [disabled]=\"isDisabled()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-52 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center gap-2\">\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.h ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm shrink-0\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.m ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToNow()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.now }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n            {{ i18n.apply }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onDocumentPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
@@ -4090,11 +3190,11 @@ class TailwindDateTimePicker extends TailwindComponent {
         this.showPanel.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-surface-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <button\n            type=\"button\"\n            (click)=\"prevMonth()\"\n            class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-surface-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n          <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n          <button\n            type=\"button\"\n            (click)=\"nextMonth()\"\n            class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-surface-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n        </div>\n        <div class=\"grid grid-cols-7 gap-0 mb-1\">\n          @for (day of weekDays; track day) {\n            <div class=\"text-center text-xs font-medium text-surface-400 py-1\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0\">\n          @for (day of calendarDays(); track $index) {\n            @if (day === 0) {\n              <div></div>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"selectDay(day)\"\n                class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-surface-100\"\n                [class.bg-primary-600]=\"isSelected(day)\"\n                [class.text-white]=\"isSelected(day)\"\n                [class.hover:bg-primary-700]=\"isSelected(day)\"\n                [class.text-surface-700]=\"!isSelected(day) && !isToday(day)\"\n                [class.font-semibold]=\"isToday(day)\"\n                [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n                {{ day }}\n              </button>\n            }\n          }\n        </div>\n        <div class=\"mt-3 pt-3 border-t border-surface-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-surface-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-surface-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-surface-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToToday()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.today }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled() || !draft()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n            {{ i18n.confirm }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDateTimePicker, isStandalone: true, selector: "tailwind-datetime-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)", "document:keydown": "onDocumentKeydown($event)" } }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <button\n            type=\"button\"\n            (click)=\"prevMonth()\"\n            class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-neutral-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n          <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n          <button\n            type=\"button\"\n            (click)=\"nextMonth()\"\n            class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-neutral-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n        </div>\n        <div class=\"grid grid-cols-7 gap-0 mb-1\">\n          @for (day of weekDays; track day) {\n            <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0\">\n          @for (day of calendarDays(); track $index) {\n            @if (day === 0) {\n              <div></div>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"selectDay(day)\"\n                class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n                [class.bg-primary-600]=\"isSelected(day)\"\n                [class.text-white]=\"isSelected(day)\"\n                [class.hover:bg-primary-700]=\"isSelected(day)\"\n                [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n                [class.font-semibold]=\"isToday(day)\"\n                [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n                {{ day }}\n              </button>\n            }\n          }\n        </div>\n        <div class=\"mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-neutral-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToToday()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.today }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled() || !draft()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n            {{ i18n.confirm }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDateTimePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-datetime-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-surface-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-surface-300 rounded-md px-3 py-2 text-sm text-surface-900 placeholder:text-surface-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-surface-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-surface-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-surface-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <button\n            type=\"button\"\n            (click)=\"prevMonth()\"\n            class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-surface-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n          <span class=\"text-sm font-semibold text-surface-800\">{{ monthYearLabel() }}</span>\n          <button\n            type=\"button\"\n            (click)=\"nextMonth()\"\n            class=\"p-1 rounded-lg hover:bg-surface-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-surface-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n        </div>\n        <div class=\"grid grid-cols-7 gap-0 mb-1\">\n          @for (day of weekDays; track day) {\n            <div class=\"text-center text-xs font-medium text-surface-400 py-1\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0\">\n          @for (day of calendarDays(); track $index) {\n            @if (day === 0) {\n              <div></div>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"selectDay(day)\"\n                class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-surface-100\"\n                [class.bg-primary-600]=\"isSelected(day)\"\n                [class.text-white]=\"isSelected(day)\"\n                [class.hover:bg-primary-700]=\"isSelected(day)\"\n                [class.text-surface-700]=\"!isSelected(day) && !isToday(day)\"\n                [class.font-semibold]=\"isToday(day)\"\n                [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n                {{ day }}\n              </button>\n            }\n          }\n        </div>\n        <div class=\"mt-3 pt-3 border-t border-surface-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-surface-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-surface-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-surface-300 rounded-md px-2 py-1.5 text-sm text-surface-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-surface-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-surface-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToToday()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.today }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled() || !draft()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-surface-200 disabled:text-surface-500 disabled:cursor-not-allowed\">\n            {{ i18n.confirm }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] }]
+            args: [{ selector: 'tailwind-datetime-picker', imports: [], providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TailwindDateTimePicker), multi: true }], template: "<div class=\"flex flex-col gap-1.5\">\n  @if (label()) {\n    <label [attr.for]=\"id() ? id() + '-inner' : null\" class=\"text-sm font-medium text-neutral-700\">{{ label() }}</label>\n  }\n  <div class=\"relative\">\n    <input\n      [attr.id]=\"id() ? id() + '-inner' : null\"\n      type=\"text\"\n      readonly\n      [value]=\"displayValue()\"\n      [placeholder]=\"effectivePlaceholder()\"\n      class=\"block w-full bg-white border border-neutral-300 rounded-md px-3 py-2 text-sm text-neutral-900 placeholder:text-neutral-400 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 cursor-pointer disabled:bg-neutral-50 disabled:cursor-not-allowed pr-10\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"togglePanel()\" />\n    <svg\n      class=\"absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-400 pointer-events-none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\">\n      <path\n        fill-rule=\"evenodd\"\n        d=\"M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z\"\n        clip-rule=\"evenodd\" />\n    </svg>\n\n    @if (showPanel()) {\n      <div\n        class=\"absolute left-0 top-full z-popover mt-1 w-80 max-w-full rounded-xl border border-neutral-200 bg-white p-4 shadow-xl\">\n        <div class=\"flex items-center justify-between mb-3\">\n          <button\n            type=\"button\"\n            (click)=\"prevMonth()\"\n            class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-neutral-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n          <span class=\"text-sm font-semibold text-neutral-800\">{{ monthYearLabel() }}</span>\n          <button\n            type=\"button\"\n            (click)=\"nextMonth()\"\n            class=\"p-1 rounded-lg hover:bg-neutral-100 transition-colors cursor-pointer\">\n            <svg\n              class=\"w-4 h-4 text-neutral-600\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 20 20\"\n              fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          </button>\n        </div>\n        <div class=\"grid grid-cols-7 gap-0 mb-1\">\n          @for (day of weekDays; track day) {\n            <div class=\"text-center text-xs font-medium text-neutral-400 py-1\">{{ day }}</div>\n          }\n        </div>\n        <div class=\"grid grid-cols-7 gap-0\">\n          @for (day of calendarDays(); track $index) {\n            @if (day === 0) {\n              <div></div>\n            } @else {\n              <button\n                type=\"button\"\n                (click)=\"selectDay(day)\"\n                class=\"h-8 w-8 mx-auto rounded-lg text-sm transition-colors cursor-pointer hover:bg-neutral-100\"\n                [class.bg-primary-600]=\"isSelected(day)\"\n                [class.text-white]=\"isSelected(day)\"\n                [class.hover:bg-primary-700]=\"isSelected(day)\"\n                [class.text-neutral-700]=\"!isSelected(day) && !isToday(day)\"\n                [class.font-semibold]=\"isToday(day)\"\n                [class.text-primary-600]=\"isToday(day) && !isSelected(day)\">\n                {{ day }}\n              </button>\n            }\n          }\n        </div>\n        <div class=\"mt-3 pt-3 border-t border-neutral-100 flex items-center gap-2\">\n          <span class=\"text-xs font-medium text-neutral-600 shrink-0\">{{ i18n.time }}</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onHourChange($event)\">\n            @for (h of hours; track h) {\n              <option [value]=\"h\" [selected]=\"h === (draft()?.getHours() ?? 0)\">\n                {{ h.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n          <span class=\"text-neutral-400 text-sm\">:</span>\n          <select\n            class=\"flex-1 min-w-0 block bg-white border border-neutral-300 rounded-md px-2 py-1.5 text-sm text-neutral-900 outline-none focus:outline focus:outline-primary-500 focus:outline-offset-2 disabled:bg-neutral-50 disabled:cursor-not-allowed\"\n            [disabled]=\"isDisabled() || !draft()\"\n            (change)=\"onMinuteChange($event)\">\n            @for (m of minutes; track m) {\n              <option [value]=\"m\" [selected]=\"m === (draft()?.getMinutes() ?? 0)\">\n                {{ m.toString().padStart(2, '0') }}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"mt-2 pt-2 border-t border-neutral-100 flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            (click)=\"goToToday()\"\n            [disabled]=\"isDisabled()\"\n            class=\"text-xs text-primary-600 font-medium hover:underline cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:no-underline\">\n            {{ i18n.today }}\n          </button>\n          <button\n            type=\"button\"\n            (click)=\"apply()\"\n            [disabled]=\"isDisabled() || !draft()\"\n            class=\"px-3 py-1.5 text-xs font-medium rounded-md bg-primary-600 text-white hover:bg-primary-700 cursor-pointer disabled:bg-neutral-200 disabled:text-neutral-500 disabled:cursor-not-allowed\">\n            {{ i18n.confirm }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;position:relative;overflow:visible}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], onDocumentPointerDown: [{
                 type: HostListener,
                 args: ['document:pointerdown', ['$event']]
@@ -4146,11 +3246,11 @@ class TailwindStepper extends TailwindComponent {
             this.activeIndex.update(v => v - 1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindStepper, isStandalone: true, selector: "tailwind-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "steps", predicate: TailwindStep, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n  @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n    <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n      <button\n        type=\"button\"\n        (click)=\"goToStep(i)\"\n        class=\"flex items-center gap-2 cursor-pointer group\"\n        [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n          [class.bg-primary-600]=\"i <= activeIndex()\"\n          [class.border-primary-600]=\"i <= activeIndex()\"\n          [class.text-white]=\"i <= activeIndex()\"\n          [class.border-surface-300]=\"i > activeIndex()\"\n          [class.text-surface-500]=\"i > activeIndex()\">\n          @if (step.completed()) {\n            <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"hidden sm:block\">\n          <p\n            class=\"text-sm font-medium\"\n            [class.text-primary-600]=\"i <= activeIndex()\"\n            [class.text-surface-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-surface-400\">{{ step.description() }}</p>\n          }\n        </div>\n      </button>\n      @if (!last) {\n        <div\n          class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n          [class.bg-primary-600]=\"i < activeIndex()\"\n          [class.bg-surface-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindStepper, isStandalone: true, selector: "tailwind-stepper", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, queries: [{ propertyName: "steps", predicate: TailwindStep, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n  @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n    <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n      <button\n        type=\"button\"\n        (click)=\"goToStep(i)\"\n        class=\"flex items-center gap-2 cursor-pointer group\"\n        [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n          [class.bg-primary-600]=\"i <= activeIndex()\"\n          [class.border-primary-600]=\"i <= activeIndex()\"\n          [class.text-white]=\"i <= activeIndex()\"\n          [class.border-neutral-300]=\"i > activeIndex()\"\n          [class.text-neutral-500]=\"i > activeIndex()\">\n          @if (step.completed()) {\n            <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"hidden sm:block\">\n          <p\n            class=\"text-sm font-medium\"\n            [class.text-primary-600]=\"i <= activeIndex()\"\n            [class.text-neutral-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-neutral-400\">{{ step.description() }}</p>\n          }\n        </div>\n      </button>\n      @if (!last) {\n        <div\n          class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n          [class.bg-primary-600]=\"i < activeIndex()\"\n          [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindStepper, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-stepper', template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n  @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n    <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n      <button\n        type=\"button\"\n        (click)=\"goToStep(i)\"\n        class=\"flex items-center gap-2 cursor-pointer group\"\n        [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n          [class.bg-primary-600]=\"i <= activeIndex()\"\n          [class.border-primary-600]=\"i <= activeIndex()\"\n          [class.text-white]=\"i <= activeIndex()\"\n          [class.border-surface-300]=\"i > activeIndex()\"\n          [class.text-surface-500]=\"i > activeIndex()\">\n          @if (step.completed()) {\n            <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"hidden sm:block\">\n          <p\n            class=\"text-sm font-medium\"\n            [class.text-primary-600]=\"i <= activeIndex()\"\n            [class.text-surface-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-surface-400\">{{ step.description() }}</p>\n          }\n        </div>\n      </button>\n      @if (!last) {\n        <div\n          class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n          [class.bg-primary-600]=\"i < activeIndex()\"\n          [class.bg-surface-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-stepper', template: "<!-- Step indicators -->\n<div class=\"flex items-center mb-6\">\n  @for (step of steps(); track step.label(); let i = $index; let last = $last) {\n    <div class=\"flex items-center\" [class.flex-1]=\"!last\">\n      <button\n        type=\"button\"\n        (click)=\"goToStep(i)\"\n        class=\"flex items-center gap-2 cursor-pointer group\"\n        [attr.aria-current]=\"activeIndex() === i ? 'step' : null\">\n        <div\n          class=\"w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold border-2 transition-all duration-200\"\n          [class.bg-primary-600]=\"i <= activeIndex()\"\n          [class.border-primary-600]=\"i <= activeIndex()\"\n          [class.text-white]=\"i <= activeIndex()\"\n          [class.border-neutral-300]=\"i > activeIndex()\"\n          [class.text-neutral-500]=\"i > activeIndex()\">\n          @if (step.completed()) {\n            <svg class=\"w-4 h-4\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n              <path\n                fill-rule=\"evenodd\"\n                d=\"M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z\"\n                clip-rule=\"evenodd\" />\n            </svg>\n          } @else {\n            {{ i + 1 }}\n          }\n        </div>\n        <div class=\"hidden sm:block\">\n          <p\n            class=\"text-sm font-medium\"\n            [class.text-primary-600]=\"i <= activeIndex()\"\n            [class.text-neutral-500]=\"i > activeIndex()\">\n            {{ step.label() }}\n          </p>\n          @if (step.description()) {\n            <p class=\"text-xs text-neutral-400\">{{ step.description() }}</p>\n          }\n        </div>\n      </button>\n      @if (!last) {\n        <div\n          class=\"flex-1 h-0.5 mx-3 rounded-full transition-colors duration-200\"\n          [class.bg-primary-600]=\"i < activeIndex()\"\n          [class.bg-neutral-200]=\"i >= activeIndex()\"></div>\n      }\n    </div>\n  }\n</div>\n<!-- Step content -->\n<ng-content />\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }, { type: i0.Output, args: ["activeIndexChange"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindStep), { isSignal: true }] }] } });
 
 class TailwindAccordionItem extends TailwindComponent {
@@ -4165,21 +3265,21 @@ class TailwindAccordionItem extends TailwindComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordionItem, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAccordionItem, isStandalone: true, selector: "tailwind-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToggle: "onToggle" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-surface-200 last:border-b-0\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-surface-800 hover:bg-surface-50 transition-colors cursor-pointer\"\r\n    [attr.aria-expanded]=\"isExpanded()\">\r\n    <span>{{ title() }}</span>\r\n    <svg\r\n      class=\"w-4 h-4 text-surface-400 transition-transform duration-200\"\r\n      [class.rotate-180]=\"isExpanded()\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 20 20\"\r\n      fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\r\n        clip-rule=\"evenodd\" />\r\n    </svg>\r\n  </button>\r\n  @if (isExpanded()) {\r\n    <div class=\"px-5 py-4 text-sm text-surface-600\">\r\n      <ng-content />\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindAccordionItem, isStandalone: true, selector: "tailwind-accordion-item", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onToggle: "onToggle" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-neutral-800 hover:bg-neutral-50 transition-colors cursor-pointer\"\r\n    [attr.aria-expanded]=\"isExpanded()\">\r\n    <span>{{ title() }}</span>\r\n    <svg\r\n      class=\"w-4 h-4 text-neutral-400 transition-transform duration-200\"\r\n      [class.rotate-180]=\"isExpanded()\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 20 20\"\r\n      fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\r\n        clip-rule=\"evenodd\" />\r\n    </svg>\r\n  </button>\r\n  @if (isExpanded()) {\r\n    <div class=\"px-5 py-4 text-sm text-neutral-600\">\r\n      <ng-content />\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordionItem, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'tailwind-accordion-item', template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-surface-200 last:border-b-0\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-surface-800 hover:bg-surface-50 transition-colors cursor-pointer\"\r\n    [attr.aria-expanded]=\"isExpanded()\">\r\n    <span>{{ title() }}</span>\r\n    <svg\r\n      class=\"w-4 h-4 text-surface-400 transition-transform duration-200\"\r\n      [class.rotate-180]=\"isExpanded()\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 20 20\"\r\n      fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\r\n        clip-rule=\"evenodd\" />\r\n    </svg>\r\n  </button>\r\n  @if (isExpanded()) {\r\n    <div class=\"px-5 py-4 text-sm text-surface-600\">\r\n      <ng-content />\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [CommonModule], selector: 'tailwind-accordion-item', template: "<div [id]=\"id()\" [ngClass]=\"class()\" class=\"border-b border-neutral-200 last:border-b-0\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"toggle()\"\r\n    class=\"flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-neutral-800 hover:bg-neutral-50 transition-colors cursor-pointer\"\r\n    [attr.aria-expanded]=\"isExpanded()\">\r\n    <span>{{ title() }}</span>\r\n    <svg\r\n      class=\"w-4 h-4 text-neutral-400 transition-transform duration-200\"\r\n      [class.rotate-180]=\"isExpanded()\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 20 20\"\r\n      fill=\"currentColor\">\r\n      <path\r\n        fill-rule=\"evenodd\"\r\n        d=\"M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z\"\r\n        clip-rule=\"evenodd\" />\r\n    </svg>\r\n  </button>\r\n  @if (isExpanded()) {\r\n    <div class=\"px-5 py-4 text-sm text-neutral-600\">\r\n      <ng-content />\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], onToggle: [{ type: i0.Output, args: ["onToggle"] }] } });
 
 class TailwindAccordion extends TailwindComponent {
     items = contentChildren(TailwindAccordionItem, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordion, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TailwindAccordion, isStandalone: true, selector: "tailwind-accordion", queries: [{ propertyName: "items", predicate: TailwindAccordionItem, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  [id]=\"id()\"\r\n  [ngClass]=\"class()\"\r\n  class=\"border border-surface-200 rounded-md overflow-hidden divide-y divide-surface-200\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.12", type: TailwindAccordion, isStandalone: true, selector: "tailwind-accordion", queries: [{ propertyName: "items", predicate: TailwindAccordionItem, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n  [id]=\"id()\"\r\n  [ngClass]=\"class()\"\r\n  class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindAccordion, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'tailwind-accordion', template: "<div\r\n  [id]=\"id()\"\r\n  [ngClass]=\"class()\"\r\n  class=\"border border-surface-200 rounded-md overflow-hidden divide-y divide-surface-200\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ imports: [CommonModule], selector: 'tailwind-accordion', template: "<div\r\n  [id]=\"id()\"\r\n  [ngClass]=\"class()\"\r\n  class=\"border border-neutral-200 rounded-md overflow-hidden divide-y divide-neutral-200\">\r\n  <ng-content />\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TailwindAccordionItem), { isSignal: true }] }] } });
 
 class TailwindModalRef {
@@ -4383,11 +3483,11 @@ class TailwindSkeleton extends TailwindComponent {
         return `${base} ${variantMap[this.variant()]}`;
     }, ...(ngDevMode ? [{ debugName: "computedClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSkeleton, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSkeleton, isStandalone: true, selector: "tailwind-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  [style.width]=\"width()\"\n  [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n  [class]=\"computedClasses()\"\n  aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-surface-200) 25%,var(--color-surface-100) 50%,var(--color-surface-200) 75%);background-size:200% 100%}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.12", type: TailwindSkeleton, isStandalone: true, selector: "tailwind-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  [style.width]=\"width()\"\n  [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n  [class]=\"computedClasses()\"\n  aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSkeleton, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-skeleton', template: "<div\n  [style.width]=\"width()\"\n  [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n  [class]=\"computedClasses()\"\n  aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-surface-200) 25%,var(--color-surface-100) 50%,var(--color-surface-200) 75%);background-size:200% 100%}\n"] }]
+            args: [{ selector: 'tailwind-skeleton', template: "<div\n  [style.width]=\"width()\"\n  [style.height]=\"height() || (variant() === 'circle' ? width() : '1.5rem')\"\n  [class]=\"computedClasses()\"\n  aria-hidden=\"true\"></div>\n", styles: [":host{display:block}@keyframes tailwind-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.tailwind-skeleton-pulse{animation:tailwind-shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,var(--color-neutral-200) 25%,var(--color-neutral-100) 50%,var(--color-neutral-200) 75%);background-size:200% 100%}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 class TailwindToolbar extends TailwindComponent {
@@ -4410,8 +3510,8 @@ class TailwindToolbar extends TailwindComponent {
         ? '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-surface-700 hover:bg-surface-100 hover:text-surface-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-surface-700 hover:bg-surface-100 hover:text-surface-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer border-0 bg-transparent', ...(ngDevMode ? [{ debugName: "menuItemButtonClasses" }] : /* istanbul ignore next */ []));
+        ? '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 */ []));
     rootClasses = computed(() => {
         const horizontal = this.orientation() === 'horizontal';
         const sizeClasses = horizontal
@@ -4420,7 +3520,7 @@ class TailwindToolbar extends TailwindComponent {
                 : 'container mx-auto h-16'
             : 'h-full w-full';
         const base = [
-            'bg-white border border-surface-200',
+            'bg-white border border-neutral-200',
             'flex',
             sizeClasses,
             this.rounded() ? 'rounded-xl' : 'rounded-none',
@@ -4457,11 +3557,11 @@ 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-surface-700 transition-colors hover:bg-surface-100 hover:text-surface-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=\"hamburger-menu\" [size]=\"22\" />\r\n          </button>\r\n          <tailwind-menu\r\n            #mobileToolbarMenu\r\n            [items]=\"menu()\"\r\n            align=\"left\"\r\n            (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-surface-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-surface-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 }, 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"] }] });
 }
 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-surface-700 transition-colors hover:bg-surface-100 hover:text-surface-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=\"hamburger-menu\" [size]=\"22\" />\r\n          </button>\r\n          <tailwind-menu\r\n            #mobileToolbarMenu\r\n            [items]=\"menu()\"\r\n            align=\"left\"\r\n            (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-surface-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-surface-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"] }]
+            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"] }] } });
 
 class TailwindDivider extends TailwindComponent {
@@ -4478,23 +3578,22 @@ class TailwindDivider extends TailwindComponent {
         const inset = this.inset() && this.orientation() === 'horizontal' ? 'mx-4' : '';
         const variant = this.variant() === 'dashed' ? 'border-dashed' : 'border-solid';
         if (this.orientation() === 'vertical') {
-            return ['self-stretch shrink-0 w-px min-h-full border-0 border-l', variant, 'border-surface-200']
-                .join(' ');
+            return ['self-stretch shrink-0 w-px min-h-full border-0 border-l', variant, 'border-neutral-200'].join(' ');
         }
-        return ['w-full border-0 border-t', variant, 'border-surface-200', inset].filter(Boolean).join(' ');
+        return ['w-full border-0 border-t', variant, 'border-neutral-200', 'my-4', inset].filter(Boolean).join(' ');
     }, ...(ngDevMode ? [{ debugName: "ruleClasses" }] : /* istanbul ignore next */ []));
     /** Top rule for labeled horizontal layout */
     ruleLineClass = computed(() => {
         const variant = this.variant() === 'dashed' ? 'border-dashed' : 'border-solid';
-        return ['border-surface-200', variant].join(' ');
+        return ['border-neutral-200', variant].join(' ');
     }, ...(ngDevMode ? [{ debugName: "ruleLineClass" }] : /* istanbul ignore next */ []));
-    labeledRowClass = computed(() => this.inset() ? 'flex items-center gap-3 w-full mx-4' : 'flex items-center gap-3 w-full', ...(ngDevMode ? [{ debugName: "labeledRowClass" }] : /* istanbul ignore next */ []));
+    labeledRowClass = computed(() => ['flex items-center gap-3 w-full my-4', this.inset() ? 'mx-4' : ''].filter(Boolean).join(' '), ...(ngDevMode ? [{ debugName: "labeledRowClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDivider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDivider, isStandalone: true, selector: "tailwind-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isLabeledHorizontal()) {\r\n  <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n    <span class=\"text-xs font-medium text-surface-500 shrink-0\">{{ label() }}</span>\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n  </div>\r\n} @else {\r\n  <div [class]=\"ruleClasses()\" role=\"separator\"></div>\r\n}\r\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindDivider, isStandalone: true, selector: "tailwind-divider", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if (isLabeledHorizontal()) {\r\n  <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n    <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n  </div>\r\n} @else {\r\n  <div [class]=\"ruleClasses()\" role=\"separator\"></div>\r\n}\r\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindDivider, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-divider', template: "@if (isLabeledHorizontal()) {\r\n  <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n    <span class=\"text-xs font-medium text-surface-500 shrink-0\">{{ label() }}</span>\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n  </div>\r\n} @else {\r\n  <div [class]=\"ruleClasses()\" role=\"separator\"></div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-divider', template: "@if (isLabeledHorizontal()) {\r\n  <div [class]=\"labeledRowClass()\" role=\"separator\" [attr.aria-label]=\"label()\">\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n    <span class=\"text-xs font-medium text-neutral-500 shrink-0\">{{ label() }}</span>\r\n    <div class=\"flex-1 border-0 border-t\" [class]=\"ruleLineClass()\"></div>\r\n  </div>\r\n} @else {\r\n  <div [class]=\"ruleClasses()\" role=\"separator\"></div>\r\n}\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
 
 class TailwindMeter extends TailwindComponent {
@@ -4536,7 +3635,7 @@ class TailwindMeter extends TailwindComponent {
             return { ...seg, widthPct: pct, barClass: this.variantToBarClass(variant) };
         });
     }, ...(ngDevMode ? [{ debugName: "segmentLayouts" }] : /* istanbul ignore next */ []));
-    trackContainerClasses = computed(() => `flex w-full overflow-hidden rounded-full bg-surface-200 ${this.trackHeightClass()}`, ...(ngDevMode ? [{ debugName: "trackContainerClasses" }] : /* istanbul ignore next */ []));
+    trackContainerClasses = computed(() => `flex w-full overflow-hidden rounded-full bg-neutral-200 ${this.trackHeightClass()}`, ...(ngDevMode ? [{ debugName: "trackContainerClasses" }] : /* istanbul ignore next */ []));
     legendSwatchClass(variant) {
         return this.variantToBarClass(variant ?? 'primary');
     }
@@ -4551,11 +3650,11 @@ class TailwindMeter extends TailwindComponent {
         return map[variant] ?? map['primary'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMeter, isStandalone: true, selector: "tailwind-meter", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full space-y-2\">\r\n  <div\r\n    [class]=\"trackContainerClasses()\"\r\n    role=\"meter\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"scaleMax()\"\r\n    [attr.aria-valuenow]=\"totalValue()\"\r\n    [attr.aria-label]=\"'Meter'\">\r\n    @for (seg of segmentLayouts(); track $index) {\r\n      @if (seg.widthPct > 0) {\r\n        <div\r\n          class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n          [class]=\"seg.barClass\"\r\n          [style.width.%]=\"seg.widthPct\"\r\n          [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (showLabels()) {\r\n    <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-surface-600\">\r\n      @for (seg of segments(); track $index) {\r\n        <span class=\"inline-flex items-center gap-1.5\">\r\n          <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\r\n          <span>{{ seg.label }}</span>\r\n          <span class=\"text-surface-400\">({{ seg.value }})</span>\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: TailwindMeter, isStandalone: true, selector: "tailwind-meter", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"w-full space-y-2\">\r\n  <div\r\n    [class]=\"trackContainerClasses()\"\r\n    role=\"meter\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"scaleMax()\"\r\n    [attr.aria-valuenow]=\"totalValue()\"\r\n    [attr.aria-label]=\"'Meter'\">\r\n    @for (seg of segmentLayouts(); track $index) {\r\n      @if (seg.widthPct > 0) {\r\n        <div\r\n          class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n          [class]=\"seg.barClass\"\r\n          [style.width.%]=\"seg.widthPct\"\r\n          [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (showLabels()) {\r\n    <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-600\">\r\n      @for (seg of segments(); track $index) {\r\n        <span class=\"inline-flex items-center gap-1.5\">\r\n          <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\r\n          <span>{{ seg.label }}</span>\r\n          <span class=\"text-neutral-400\">({{ seg.value }})</span>\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindMeter, decorators: [{
             type: Component,
-            args: [{ selector: 'tailwind-meter', template: "<div class=\"w-full space-y-2\">\r\n  <div\r\n    [class]=\"trackContainerClasses()\"\r\n    role=\"meter\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"scaleMax()\"\r\n    [attr.aria-valuenow]=\"totalValue()\"\r\n    [attr.aria-label]=\"'Meter'\">\r\n    @for (seg of segmentLayouts(); track $index) {\r\n      @if (seg.widthPct > 0) {\r\n        <div\r\n          class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n          [class]=\"seg.barClass\"\r\n          [style.width.%]=\"seg.widthPct\"\r\n          [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (showLabels()) {\r\n    <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-surface-600\">\r\n      @for (seg of segments(); track $index) {\r\n        <span class=\"inline-flex items-center gap-1.5\">\r\n          <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\r\n          <span>{{ seg.label }}</span>\r\n          <span class=\"text-surface-400\">({{ seg.value }})</span>\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'tailwind-meter', template: "<div class=\"w-full space-y-2\">\r\n  <div\r\n    [class]=\"trackContainerClasses()\"\r\n    role=\"meter\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"scaleMax()\"\r\n    [attr.aria-valuenow]=\"totalValue()\"\r\n    [attr.aria-label]=\"'Meter'\">\r\n    @for (seg of segmentLayouts(); track $index) {\r\n      @if (seg.widthPct > 0) {\r\n        <div\r\n          class=\"h-full min-w-0 transition-all duration-300 ease-out\"\r\n          [class]=\"seg.barClass\"\r\n          [style.width.%]=\"seg.widthPct\"\r\n          [attr.title]=\"seg.label + ': ' + seg.value\"></div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  @if (showLabels()) {\r\n    <div class=\"flex flex-wrap gap-x-4 gap-y-1 text-xs text-neutral-600\">\r\n      @for (seg of segments(); track $index) {\r\n        <span class=\"inline-flex items-center gap-1.5\">\r\n          <span class=\"inline-block size-2 rounded-sm shrink-0\" [class]=\"legendSwatchClass(seg.variant)\"></span>\r\n          <span>{{ seg.label }}</span>\r\n          <span class=\"text-neutral-400\">({{ seg.value }})</span>\r\n        </span>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class TailwindSlider extends TailwindComponent {
@@ -4840,7 +3939,7 @@ class TailwindSlider extends TailwindComponent {
                 useExisting: forwardRef(() => TailwindSlider),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\r\n  <div\r\n    #track\r\n    class=\"relative w-full touch-none select-none py-3\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-6 w-full\">\r\n      <!-- rail -->\r\n      <div\r\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-surface-200\"\r\n        [class]=\"trackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-surface-300\"\r\n            [style.left.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <!-- fill -->\r\n      <div\r\n        class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n        [class]=\"trackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.left.%]=\"fillStartPct()\"\r\n        [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    #track\r\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-full w-full\">\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-surface-200\"\r\n        [class]=\"verticalTrackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-surface-300\"\r\n            [style.bottom.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n        [class]=\"verticalTrackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.bottom.%]=\"fillStartPct()\"\r\n        [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] });
+        ], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["track"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (orientation() === 'horizontal') {\r\n  <div\r\n    #track\r\n    class=\"relative w-full touch-none select-none py-3\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-6 w-full\">\r\n      <!-- rail -->\r\n      <div\r\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\r\n        [class]=\"trackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\r\n            [style.left.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <!-- fill -->\r\n      <div\r\n        class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n        [class]=\"trackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.left.%]=\"fillStartPct()\"\r\n        [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    #track\r\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-full w-full\">\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\r\n        [class]=\"verticalTrackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\r\n            [style.bottom.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n        [class]=\"verticalTrackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.bottom.%]=\"fillStartPct()\"\r\n        [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: TailwindSlider, decorators: [{
             type: Component,
@@ -4850,11 +3949,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
                             useExisting: forwardRef(() => TailwindSlider),
                             multi: true
                         }
-                    ], template: "@if (orientation() === 'horizontal') {\r\n  <div\r\n    #track\r\n    class=\"relative w-full touch-none select-none py-3\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-6 w-full\">\r\n      <!-- rail -->\r\n      <div\r\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-surface-200\"\r\n        [class]=\"trackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-surface-300\"\r\n            [style.left.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <!-- fill -->\r\n      <div\r\n        class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n        [class]=\"trackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.left.%]=\"fillStartPct()\"\r\n        [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    #track\r\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-full w-full\">\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-surface-200\"\r\n        [class]=\"verticalTrackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-surface-300\"\r\n            [style.bottom.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n        [class]=\"verticalTrackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.bottom.%]=\"fillStartPct()\"\r\n        [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] }]
+                    ], template: "@if (orientation() === 'horizontal') {\r\n  <div\r\n    #track\r\n    class=\"relative w-full touch-none select-none py-3\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-6 w-full\">\r\n      <!-- rail -->\r\n      <div\r\n        class=\"pointer-events-none absolute left-0 right-0 top-1/2 -translate-y-1/2 rounded-full bg-neutral-200\"\r\n        [class]=\"trackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-neutral-300\"\r\n            [style.left.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <!-- fill -->\r\n      <div\r\n        class=\"pointer-events-none absolute top-1/2 z-1 -translate-y-1/2 rounded-full\"\r\n        [class]=\"trackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.left.%]=\"fillStartPct()\"\r\n        [style.width.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.left.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n} @else {\r\n  <div\r\n    #track\r\n    class=\"relative mx-auto h-52 w-10 touch-none select-none\"\r\n    [class.opacity-50]=\"isEffectivelyDisabled()\"\r\n    [class.pointer-events-none]=\"isEffectivelyDisabled()\"\r\n    (pointerdown)=\"onTrackPointerDown($event, range() ? null : null)\">\r\n    <div class=\"relative h-full w-full\">\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 top-0 -translate-x-1/2 rounded-full bg-neutral-200\"\r\n        [class]=\"verticalTrackThickness()\"></div>\r\n\r\n      @if (showTicks()) {\r\n        @for (p of tickPositions(); track $index) {\r\n          <div\r\n            class=\"pointer-events-none absolute left-1/2 w-2 h-px -translate-x-1/2 translate-y-1/2 bg-neutral-300\"\r\n            [style.bottom.%]=\"p\"></div>\r\n        }\r\n      }\r\n\r\n      <div\r\n        class=\"pointer-events-none absolute bottom-0 left-1/2 z-1 -translate-x-1/2 rounded-full\"\r\n        [class]=\"verticalTrackThickness()\"\r\n        [style.background-color]=\"accentVars().fill\"\r\n        [style.bottom.%]=\"fillStartPct()\"\r\n        [style.height.%]=\"fillWidthPct()\"></div>\r\n\r\n      @if (range()) {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"lowPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeLow()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"highPct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"rangeHigh()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 1)\"\r\n          (keydown)=\"onKeyDown($event, 1)\"></button>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          [disabled]=\"isEffectivelyDisabled()\"\r\n          class=\"tailwind-slider-thumb absolute left-1/2 z-10 -translate-x-1/2 translate-y-1/2 rounded-full border-2 border-white shadow focus:outline-none\"\r\n          [class]=\"thumbSizeClass()\"\r\n          [style.background-color]=\"accentVars().thumb\"\r\n          [style.--slider-ring]=\"accentVars().ring\"\r\n          [style.bottom.%]=\"singlePct()\"\r\n          role=\"slider\"\r\n          [attr.aria-valuemin]=\"min()\"\r\n          [attr.aria-valuemax]=\"max()\"\r\n          [attr.aria-valuenow]=\"singleValue()\"\r\n          [attr.aria-disabled]=\"isEffectivelyDisabled()\"\r\n          (pointerdown)=\"onThumbPointerDown($event, 0)\"\r\n          (keydown)=\"onKeyDown($event, 0)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{display:block}.tailwind-slider-thumb{cursor:pointer}.tailwind-slider-thumb:focus-visible{outline:2px solid var(--slider-ring);outline-offset:2px}.tailwind-slider-thumb:focus:not(:focus-visible){outline:none}.tailwind-slider-thumb:disabled{cursor:not-allowed}\n"] }]
         }], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], trackRef: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], hostDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
 // Batch 1 — Foundation
 
+/**
+ * Builds `Provider` entries for each set field on `config`.
+ * Used by {@link defineTheme} and {@link provideTailwindComponents}.
+ */
+function providersFromTailwindComponentsConfig(config) {
+    const providers = [];
+    if (config.iconSize !== undefined) {
+        providers.push({ provide: TAILWIND_ICON_SIZE, useValue: config.iconSize });
+    }
+    if (config.datetimeLanguage !== undefined) {
+        providers.push({ provide: TAILWIND_DATETIME_LANGUAGE, useValue: config.datetimeLanguage });
+    }
+    if (config.componentsSize !== undefined) {
+        providers.push({ provide: TAILWIND_COMPONENTS_SIZE, useValue: config.componentsSize });
+    }
+    if (config.paginationSummary !== undefined) {
+        providers.push({ provide: TAILWIND_PAGINATION_SUMMARY, useValue: config.paginationSummary });
+    }
+    return providers;
+}
+/**
+ * Registers environment-scoped providers for library injection tokens only (no theme `colors`).
+ * Prefer {@link defineTheme}, which registers the same tokens when set plus optional CSS variables.
+ *
+ * @deprecated Use {@link defineTheme} with the same fields (`iconSize`, `datetimeLanguage`, etc.).
+ */
+function provideTailwindComponents(config) {
+    return makeEnvironmentProviders(providersFromTailwindComponentsConfig(config));
+}
+const SHADES_WITH_950 = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+const SHADES_TO_900 = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+function shadesForSemantic(semantic) {
+    switch (semantic) {
+        case 'success':
+        case 'warning':
+        case 'danger':
+        case 'info':
+            return SHADES_TO_900;
+        default:
+            return SHADES_WITH_950;
+    }
+}
+function isShadeRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+/**
+ * Builds `[CSS custom property name, value]` pairs for {@link defineTheme}.
+ * Exported for unit tests.
+ */
+function buildTailwindThemeVariableEntries(config) {
+    const colors = config.colors;
+    if (!colors) {
+        return [];
+    }
+    const entries = [];
+    const dangerOrError = colors.danger ?? colors.error;
+    const pairs = [
+        ['primary', colors.primary],
+        ['neutral', colors.neutral],
+        ['success', colors.success],
+        ['warning', colors.warning],
+        ['danger', dangerOrError],
+        ['info', colors.info]
+    ];
+    for (const [semantic, value] of pairs) {
+        if (value === undefined) {
+            continue;
+        }
+        if (typeof value === 'string') {
+            const palette = value.trim();
+            if (!palette) {
+                continue;
+            }
+            for (const shade of shadesForSemantic(semantic)) {
+                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]);
+                }
+            }
+        }
+    }
+    return entries;
+}
+function applyTailwindThemeToElement(element, config) {
+    for (const [prop, val] of buildTailwindThemeVariableEntries(config)) {
+        element.style.setProperty(prop, val);
+    }
+}
+/**
+ * Registers environment-scoped library defaults: optional **injection tokens** from {@link TailwindComponentsConfig}
+ * plus an app initializer that applies optional **`colors`** on
+ * `document.documentElement` in the browser. Add as a single entry in `providers` (no spread).
+ *
+ * Palette **strings** (e.g. `'indigo'`) rely on `--color-indigo-*` existing in the CSS bundle; the
+ * library stylesheet safelists Tailwind’s default palette names for that reason.
+ */
+function defineTheme(config) {
+    const tokenProviders = providersFromTailwindComponentsConfig(config);
+    return makeEnvironmentProviders([
+        ...tokenProviders,
+        provideAppInitializer(() => {
+            const platformId = inject(PLATFORM_ID);
+            if (!isPlatformBrowser(platformId)) {
+                return;
+            }
+            const doc = inject(DOCUMENT);
+            applyTailwindThemeToElement(doc.documentElement, config);
+        })
+    ]);
+}
+
 /*
  * Public API Surface of angular-tailwind-components
  */
@@ -4864,5 +4078,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TAILWIND_COMPONENTS_SIZE, TAILWIND_DATETIME_LANGUAGE, TAILWIND_ICON_SIZE, TAILWIND_MODAL_DATA, TAILWIND_SOLAR_ICON_NAMES, 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 };
+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 };
 //# sourceMappingURL=angular-tailwind-components.mjs.map