atomicuilibrary 0.1.0 → 0.1.3

package/dist/esm/ui-dropdown_2.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DUsoYu9r.js';
-import { c as calculateUniversalPlacement } from './dom-BMFah5q3.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Dqu2zaH1.js';
+import { c as calculateUniversalPlacement } from './dom-DFBTWhGw.js';
 
 /**
  * Utility for managing ARIA live regions to announce dynamic content to screen readers.
@@ -62,7 +62,7 @@ class AriaLiveManager {
 }
 const ariaLive = new AriaLiveManager();
 
-const dropdownCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:root{--dd-primary:var(--color-primary, #2563eb);--dd-border:var(--border-default, #cfd8e3);--dd-border-strong:var(--border-strong, #b4c1d1);--dd-focus:var(--color-primary-hover, #2563eb);--dd-text:var(--label-color, var(--text-primary, var(--color-on-surface, #10213a)));--dd-muted:var(--label-subtitle-color, var(--text-secondary, var(--color-on-surface-muted, #62748a)));--dd-bg:var(--bg-primary, #ffffff);--dd-panel:rgba(255, 255, 255, 0.98);--dd-panel-solid:var(--bg-primary, #ffffff);--dd-hover:var(--bg-primary, #f3f8ff);--dd-selected:var(--dropdown-selected-bg, var(--color-success-light, #ecfdf5));--dd-selected-bg:var(--dropdown-selected-bg, var(--color-success-light, #ecfdf5));--dd-selected-text:var(--dropdown-selected-text, var(--color-success, var(--color-on-primary, #059669)));--dd-selected-icon:var(--dropdown-selected-icon, var(--color-success, var(--color-on-primary, #059669)));--dd-selected-border:var(--dropdown-selected-border, var(--color-success-border, var(--color-on-primary-border, #a7f3d0)));--dd-transition:all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);--dd-error:var(--color-danger, #ef4444);--dd-radius-sm:8px;--dd-radius-md:10px}.dropdown-label{display:block;font-size:11px;font-weight:700;color:var(--dd-text);margin-bottom:8px;letter-spacing:0.08em;text-transform:uppercase;opacity:0.65;cursor:default}.dropdown-container{position:relative;display:inline-flex;flex-direction:column;width:max-content;min-width:50px;vertical-align:middle}.dropdown-full-width{width:100%;display:block;}.dropdown-fit-content{width:max-content;min-width:unset}.dropdown-fit-content .ui-dropdown-menu{width:max-content;min-width:100%;white-space:nowrap}.dropdown-fit-content .dropdown-trigger{width:max-content}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--bg-primary, #ffffff);border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);cursor:pointer;transition:var(--dd-transition);-webkit-user-select:none;user-select:none;gap:12px;padding:0 16px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);color:var(--dd-text);font-weight:500;line-height:normal;box-sizing:border-box}.dropdown-trigger:hover{border-color:var(--dd-border-strong);box-shadow:0 10px 22px rgba(var(--color-primary-rgb, 37, 99, 235), 0.08)}.dropdown-open .dropdown-trigger{border-color:var(--dd-focus);background:var(--dd-bg);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.dropdown-disabled .dropdown-trigger{background:var(--bg-secondary, #f1f5f9);cursor:not-allowed;opacity:0.7;border-color:var(--dd-border);box-shadow:none}.dropdown-disabled .dropdown-trigger:hover{background:var(--bg-secondary, #f1f5f9)}.dropdown-sm .dropdown-trigger{padding:0 12px;font-size:13px;min-height:32px;height:32px;border-radius:var(--dd-radius-sm)}.dropdown-md .dropdown-trigger{padding:0 16px;font-size:14px;min-height:40px;height:40px;border-radius:var(--dd-radius-md)}.dropdown-lg .dropdown-trigger{padding:0 20px;font-size:15px;min-height:44px;height:44px;border-radius:var(--dd-radius-md)}.dropdown-shape-square .dropdown-trigger,.dropdown-shape-square .dropdown-menu{border-radius:0 !important}.dropdown-shape-rounded .dropdown-trigger,.dropdown-shape-rounded .dropdown-menu{border-radius:20px !important}.dropdown-shape-pill .dropdown-trigger{border-radius:999px !important}.dropdown-shape-pill .dropdown-menu{border-radius:28px !important}.dropdown-appearance-button .dropdown-trigger{background:var(--dd-primary);border-color:var(--dd-primary);color:var(--color-primary-text, var(--dd-text, #ffffff));box-shadow:0 4px 14px 0 rgba(var(--color-primary-rgb, 37, 99, 235), 0.39)}.dropdown-appearance-button .dropdown-trigger:hover{background:var(--color-primary, #1d4ed8);border-color:var(--color-primary, #1d4ed8);transform:translateY(-1px);box-shadow:0 6px 20px rgba(var(--color-primary-rgb, 37, 99, 235), 0.23)}.dropdown-appearance-button .dropdown-trigger:active{transform:translateY(0)}.variant-glass .dropdown-trigger{background:rgba(255, 255, 255, 0.08);backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.12);color:var(--text-standard, #ffffff);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.07)}.variant-glass .dropdown-trigger:hover{background:rgba(255, 255, 255, 0.12);border-color:rgba(255, 255, 255, 0.2)}.variant-glass .dropdown-display,.variant-glass .dropdown-placeholder{color:var(--text-standard, #ffffff)}.variant-glass.dropdown-open .dropdown-trigger{background:rgba(255, 255, 255, 0.15);border-color:var(--dd-focus)}.variant-toggle{min-width:unset !important}.variant-toggle .dropdown-trigger{background:transparent;border-color:transparent;padding:0 !important;min-height:unset !important;height:auto !important;box-shadow:none;gap:4px}.variant-toggle .dropdown-trigger:hover{background:var(--dd-hover);border-color:var(--dd-border)}.variant-toggle.dropdown-open .dropdown-trigger{background:var(--dd-hover);border-color:var(--dd-focus);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.variant-toggle .dropdown-display{padding:2px}.dropdown-appearance-button .dropdown-display{color:var(--color-primary-text, var(--dd-text, #ffffff))}.dropdown-appearance-button .dropdown-clear,.dropdown-appearance-button .dropdown-arrow{color:var(--color-primary-text, var(--dd-text, #ffffff))}.dropdown-display{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}.dropdown-has-chips .dropdown-trigger{height:auto;min-height:48px;padding:6px 16px}.dropdown-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0;width:100%}.dropdown-placeholder{color:var(--label-subtitle-color, #91a0b4);font-weight:400}.dropdown-icons{display:flex;align-items:center;gap:8px;flex-shrink:0}.dropdown-clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--bg-primary, #eef4fb);color:var(--dd-muted);transition:var(--dd-transition)}.dropdown-clear:hover{background:var(--bg-primary, #e2ecf8);color:var(--dd-text)}.dropdown-arrow{display:flex;align-items:center;color:var(--dd-muted);transition:transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)}.dropdown-arrow.open{transform:rotate(180deg);color:var(--dd-focus)}.ui-dropdown-menu{position:fixed;display:flex !important;flex-direction:column !important;gap:0;background:var(--bg-primary, #ffffff) !important;border:1px solid rgba(0, 0, 0, 0.08);border-radius:16px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1);z-index:10001;overflow:hidden;animation:dropdownPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);width:auto;min-width:0}.ui-dropdown-menu--local{position:absolute}@keyframes dropdownPop{from{opacity:0;transform:translateY(12px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-top{top:auto;bottom:calc(100% + 8px);animation:dropdownPopTop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)}@keyframes dropdownPopTop{from{opacity:0;transform:translateY(-4px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-search{padding:12px;border-bottom:1px solid var(--border-subtle, #edf2f7);background:var(--dd-panel)}.dropdown-search-container{position:relative;display:flex;align-items:center}.dropdown-search-icon{position:absolute;left:12px;color:var(--dd-muted);pointer-events:none}.dropdown-search-input{width:100%;padding:11px 13px 11px 36px;background:var(--bg-primary, #f9fbfe);border:1px solid var(--border-default, #d4deea);border-radius:12px;font-size:14px;color:var(--dd-text);outline:none;transition:var(--dd-transition)}.dropdown-search-input::placeholder{color:var(--dd-muted);opacity:0.8}.dropdown-search-input:focus{background:var(--bg-primary, #ffffff);border-color:var(--dd-focus);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.dropdown-options{flex:1;min-height:0;overflow-y:auto;padding:8px;background:var(--dd-panel-solid)}.dropdown-menu-sm{border-radius:12px;--dd-option-min-height:28px;--dd-option-padding-y:8px;--dd-option-padding-x:12px;--dd-option-gap:10px;--dd-option-spacing-y:2px}.dropdown-menu-sm .dropdown-search{padding:8px}.dropdown-menu-sm .dropdown-search-input{min-height:34px;font-size:13px;padding:8px 12px 8px 34px}.dropdown-menu-sm .dropdown-options{padding:6px}.dropdown-menu-sm .dropdown-option-label{font-size:13px}.dropdown-menu-sm .dropdown-option-subtitle,.dropdown-menu-sm .dropdown-empty,.dropdown-menu-sm .dropdown-group-header,.dropdown-menu-sm .dropdown-bulk-actions,.dropdown-menu-sm .dropdown-select-all,.dropdown-menu-sm .dropdown-clear-all{font-size:12px}.dropdown-menu-md{border-radius:16px;--dd-option-min-height:30px;--dd-option-padding-y:10px;--dd-option-padding-x:16px;--dd-option-gap:12px;--dd-option-spacing-y:4px}.dropdown-menu-lg{border-radius:18px;--dd-option-min-height:32px;--dd-option-padding-y:12px;--dd-option-padding-x:18px;--dd-option-gap:14px;--dd-option-spacing-y:6px}.dropdown-menu-lg .dropdown-search{padding:14px}.dropdown-menu-lg .dropdown-search-input{min-height:46px;font-size:15px;padding:12px 14px 12px 40px}.dropdown-menu-lg .dropdown-options{padding:10px}.dropdown-menu-lg .dropdown-option-label{font-size:15px}.dropdown-menu-lg .dropdown-option-subtitle,.dropdown-menu-lg .dropdown-empty,.dropdown-menu-lg .dropdown-group-header,.dropdown-menu-lg .dropdown-bulk-actions,.dropdown-menu-lg .dropdown-select-all,.dropdown-menu-lg .dropdown-clear-all{font-size:14px}.dropdown-options::-webkit-scrollbar{width:5px}.dropdown-options::-webkit-scrollbar-track{background:transparent}.dropdown-options::-webkit-scrollbar-thumb{background:var(--color-primary, #cbd5e1);border-radius:10px}.dropdown-options::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #94a3b8)}.dropdown-option-wrapper{position:relative}.ui-dropdown-option,.dropdowndata{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center;gap:var(--dd-option-gap, 12px);background-color:transparent;transition:var(--dd-transition);border-radius:12px;margin:var(--dd-option-spacing-y, 4px) 0;padding:var(--dd-option-padding-y, 10px) var(--dd-option-padding-x, 16px);min-height:var(--dd-option-min-height, 48px);width:100%;box-sizing:border-box}.dropdown-menu-sm .ui-dropdown-option,.dropdown-menu-sm .dropdowndata{border-radius:10px}.dropdown-menu-lg .ui-dropdown-option,.dropdown-menu-lg .dropdowndata{border-radius:14px}.ui-dropdown-option:hover,.dropdowndata:hover,.dropdown-option-highlighted{background:var(--dd-hover);border-color:var(--color-primary, #d7e7ff);box-shadow:0 10px 24px rgba(var(--color-primary-rgb, 37, 99, 235), 0.08);transform:translateY(-1px)}.ui-dropdown-option-selected{background:var(--dd-selected-bg) !important;color:var(--dd-selected-text) !important;font-weight:600;border-radius:12px;margin:4px 0;box-shadow:none !important}.ui-dropdown-option-selected .dropdown-option-label{color:var(--dd-selected-text) !important;font-weight:600 !important}.dropdown-option-disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.dropdown-option-parent{font-weight:600;letter-spacing:-0.01em}.dropdown-option-left{display:flex;align-items:center;justify-content:center;flex-shrink:0}.dropdown-option-icon{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--dd-muted);line-height:1}.dropdown-option-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;overflow:hidden;line-height:normal;padding:4px 0}.dropdown-option-text .dropdown-option-content{width:100%;min-width:0;overflow:hidden}.dropdown-option-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font-size:14px;font-weight:500;color:var(--dd-text, var(--color-on-surface, #10213a))}.dropdown-option-subtitle{font-size:12px;color:var(--dd-muted, var(--color-on-surface-muted, #62748a));font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.dropdown-option-description{font-size:12px;color:var(--dd-muted, var(--color-on-surface-muted, #62748a));font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.dropdown-option-right{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center;justify-content:flex-end;flex-shrink:0;margin-left:auto;gap:8px}.dropdown-option-right:empty{display:none}.dropdown-option-tag{flex-shrink:0}.dropdown-option-right-icon{display:flex;align-items:center;justify-content:center;color:var(--dd-muted);opacity:0.8}.ui-dropdown-selected-marker{display:inline-flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;animation:checkPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)}.ui-dropdown-selected-marker-wrap{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.ui-dropdown-selected-marker-label{font-size:11px;font-weight:500;color:var(--dd-selected-text);white-space:nowrap;animation:checkPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)}@keyframes checkPop{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}.dropdown-checkbox{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid var(--color-primary, #cbd5e1);border-radius:5px;flex-shrink:0;transition:var(--dd-transition);background:var(--bg-primary, #ffffff);line-height:1}.dropdown-checkbox ui-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--text-standard, #ffffff)}.dropdown-option-selected .dropdown-checkbox,.dropdown-checkbox.checked,.dropdown-checkbox.dropdown-checkbox-selected{background:var(--dd-primary);border-color:var(--dd-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 37, 99, 235), 0.2)}.dropdown-expand-icon{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);color:var(--dd-muted);opacity:0.6}.dropdown-expand-icon.expanded{transform:rotate(90deg);color:var(--dd-primary);opacity:1}.dropdown-children{margin-left:20px;padding-left:12px;border-left:1px solid var(--dd-border);margin-top:-1px;margin-bottom:4px}.dropdown-empty{padding:32px 16px;font-size:14px}.dropdown-helper-text{margin-top:6px;font-size:12px;color:var(--dd-muted);display:flex;align-items:center;gap:6px;padding:0 4px}.dropdown-error-text{color:var(--dd-error);font-weight:500;animation:dropdownShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.dropdown-invalid .dropdown-trigger{border-color:var(--dd-error)}.dropdown-invalid .dropdown-trigger:hover{box-shadow:0 0 0 4px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}@keyframes dropdownShake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}.dropdown-spinner{display:flex;animation:dropdownSpin 1s linear infinite;color:var(--dd-primary)}@keyframes dropdownSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.dropdown-group-header{padding:12px 14px 6px;font-size:11px;font-weight:700;color:var(--dd-muted);text-transform:uppercase;letter-spacing:0.05em;background:var(--dd-panel-solid)}.dropdown-select-all{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-weight:600;font-size:14px;color:var(--dd-primary);background:transparent;transition:var(--dd-transition);border-bottom:none;border-radius:10px;min-height:36px;flex:1;justify-content:flex-start}.dropdown-select-all.dropdown-select-all-with-clear{border-bottom:1px solid var(--dd-border)}.dropdown-select-all:hover{background:rgba(var(--color-primary-rgb, 37, 99, 235), 0.08)}.dropdown-select-all .dropdown-checkbox{width:18px;height:18px;border:1px solid var(--dd-border-strong);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:var(--dd-transition)}.dropdown-select-all .dropdown-checkbox.checked{background-color:var(--dd-primary);border-color:var(--dd-primary)}.dropdown-skeleton{pointer-events:none}.dropdown-skeleton .dropdown-trigger{background:var(--bg-secondary, #f1f5f9);border-color:var(--border-subtle, #e2e8f0);box-shadow:none}.dropdown-skeleton .dropdown-skeleton-text{width:60%;height:14px;background:linear-gradient(90deg, var(--bg-primary, #e2e8f0) 25%, var(--bg-primary, #f8fafc) 50%, var(--bg-primary, #e2e8f0) 75%);background-size:200% 100%;animation:dropdownShimmer 1.5s infinite;border-radius:4px}.dropdown-skeleton .dropdown-skeleton-icon{width:16px;height:16px;background:var(--bg-primary, #e2e8f0);border-radius:4px}@keyframes dropdownShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.dropdown-separator{height:1px;background-color:var(--dd-border);margin:6px 10px;pointer-events:none}.dropdown-search-highlight{background-color:var(--bg-primary, #fef08a);color:var(--color-danger, #854d0e);border-radius:2px;padding:0 1px;font-weight:600}.dropdown-bulk-actions{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--dd-border);background:linear-gradient(180deg, var(--bg-primary, #fbfdff) 0%, var(--bg-primary, #f8fafc) 100%);font-size:13px;gap:12px}.dropdown-clear-all{display:flex;align-items:center;gap:8px;color:var(--color-danger, #ef4444);cursor:pointer;padding:8px 10px;border-radius:10px;transition:all 0.2s;font-weight:500;min-height:36px;justify-content:center;white-space:nowrap}.dropdown-clear-all:hover{background-color:var(--bg-primary, #fef2f2);color:var(--color-danger-hover, #dc2626)}.dropdown-menu-variant-nested-menu{overflow:visible}.dropdown-menu-variant-nested-menu .dropdown-options{overflow:visible;padding:6px}.dropdown-nested-columns{display:flex;align-items:stretch;min-width:max-content}.dropdown-nested-panel{min-width:210px;max-width:280px;padding:2px}.dropdown-nested-panel+.dropdown-nested-panel{border-left:1px solid var(--dd-border);margin-left:4px;padding-left:10px}.dropdown-menu-sm .dropdown-nested-panel{min-width:180px}.dropdown-menu-lg .dropdown-nested-panel{min-width:240px}.dropdown-nested-option{margin:2px 0}.dropdown-nested-option-active{background:var(--dd-hover);border-color:var(--dd-border-strong)}.variant-detailed .dropdown-trigger{border-color:var(--dd-border);border-radius:14px;min-height:48px;background:linear-gradient(180deg, var(--bg-primary, #ffffff) 0%, var(--bg-primary, #f8fbff) 100%);box-shadow:0 2px 8px rgba(15, 23, 42, 0.04);font-weight:500}.variant-detailed .dropdown-trigger:hover{border-color:var(--dd-border-strong);box-shadow:0 10px 22px rgba(var(--color-primary-rgb, 37, 99, 235), 0.08)}.variant-detailed.dropdown-open .dropdown-trigger{border-color:var(--dd-focus);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 37, 99, 235), 0.14), 0 16px 32px rgba(var(--color-primary-rgb, 37, 99, 235), 0.14)}.variant-detailed .dropdown-menu{border-radius:20px !important;padding:6px !important;background:rgba(255, 255, 255, 0.98) !important;backdrop-filter:blur(20px) !important;box-shadow:0 20px 50px rgba(15, 23, 42, 0.22) !important}.variant-detailed .dropdown-options{padding:4px !important}.variant-detailed .ui-dropdown-option,.variant-detailed .dropdowndata{padding:12px 14px !important;border-radius:16px !important;margin:4px 0 !important;gap:14px !important;border:1px solid transparent !important;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important}.variant-detailed .ui-dropdown-option:hover,.variant-detailed .ui-dropdown-option.dropdown-option-highlighted,.variant-detailed .dropdowndata:hover,.variant-detailed .dropdowndata.dropdown-option-highlighted{background:var(--bg-primary, #f0f7ff) !important;border-color:var(--border-subtle, #dbeafe) !important;transform:translateY(-1.5px) !important;box-shadow:0 8px 16px rgba(var(--color-primary-rgb, 37, 99, 235), 0.08) !important}.variant-detailed .ui-dropdown-option.ui-dropdown-option-selected,.variant-detailed .dropdowndata.ui-dropdown-option-selected{background:var(--dd-selected-bg) !important;border-color:var(--dd-selected-border) !important;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5) !important}.variant-detailed .ui-dropdown-option.ui-dropdown-option-selected .dropdown-option-label,.variant-detailed .dropdowndata.ui-dropdown-option-selected .dropdown-option-label{color:var(--dd-selected-text) !important;font-weight:700 !important}.variant-detailed .dropdown-option-label{font-size:14px !important;font-weight:600 !important;color:var(--text-primary, #1e293b) !important;margin-bottom:2px !important}.variant-detailed .dropdown-option-subtitle{font-size:11px !important;color:var(--text-muted, #64748b) !important;font-weight:500 !important;text-transform:uppercase !important;letter-spacing:0.02em !important}.variant-detailed .dropdown-option-tag{font-size:10px !important;font-weight:700 !important;letter-spacing:0.05em !important;padding:4px 10px !important;border-radius:999px !important;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05) !important}.variant-detailed .dropdown-option-icon,.variant-detailed .dropdown-option-right-icon{font-size:20px !important;display:flex !important;align-items:center !important;justify-content:center !important}.variant-detailed .dropdown-option-right-icon{color:var(--color-primary, #cbd5e1) !important;transition:all 0.2s !important}.variant-detailed .dropdown-option-right-icon:hover{color:var(--color-warning, #f59e0b) !important;transform:scale(1.1) !important}.variant-detailed .ui-dropdown-selected-marker{display:inline-flex !important;align-items:center !important;justify-content:center !important;color:var(--dd-primary) !important;background:var(--bg-primary, #dbeafe) !important;padding:4px !important;border-radius:50% !important;flex-shrink:0 !important}.variant-detailed .dropdown-trigger-content{display:flex !important;align-items:center !important;gap:10px !important}.variant-detailed .dropdown-trigger-icon{color:var(--dd-primary, var(--color-primary, #10b981)) !important;font-size:18px !important;flex-shrink:0 !important}.variant-detailed .dropdown-trigger-label{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}.variant-detailed .dropdown-expand-group{display:flex !important;align-items:center !important;gap:8px !important}.variant-detailed .dropdown-badge{background:var(--dd-primary, var(--color-primary, #10b981)) !important;color:var(--text-standard, #ffffff) !important;font-size:10px !important;font-weight:800 !important;height:18px !important;min-width:18px !important;padding:0 5px !important;border-radius:9px !important;display:flex !important;align-items:center !important;justify-content:center !important;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3) !important;animation:badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important}@keyframes badgePop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}.dropdown-option:active{transform:scale(0.98);transition:transform 0.1s ease}.dropdown-option-selected.dropdowndata{position:relative;overflow:hidden}.dropdown-option-selected.dropdowndata::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1) 0%, transparent 70%);pointer-events:none}`;
+const dropdownCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:root{--dd-primary:var(--color-primary, #2563eb);--dd-border:var(--border-default, #cfd8e3);--dd-border-strong:var(--border-strong, #b4c1d1);--dd-focus:var(--color-primary-hover, #2563eb);--dd-text:var(--label-color, var(--text-primary, var(--color-on-surface, #10213a)));--dd-muted:var(--label-subtitle-color, var(--text-secondary, var(--color-on-surface-muted, #62748a)));--dd-bg:var(--bg-primary, #ffffff);--dd-panel:rgba(255, 255, 255, 0.98);--dd-panel-solid:var(--bg-primary, #ffffff);--dd-hover:var(--bg-hover, var(--bg-secondary, #f3f8ff));--dd-selected:var(--dropdown-selected-bg, var(--bg-selected, var(--color-primary-subtle, rgba(37, 99, 235, 0.1))));--dd-selected-bg:var(--dropdown-selected-bg, var(--bg-selected, var(--color-primary-subtle, rgba(37, 99, 235, 0.1))));--dd-selected-text:var(--dropdown-selected-text, var(--color-primary, var(--text-primary, #2563eb)));--dd-selected-icon:var(--dropdown-selected-icon, var(--color-primary, var(--text-primary, #2563eb)));--dd-selected-border:var(--dropdown-selected-border, var(--color-primary-subtle, var(--border-strong, #3b82f6)));--dd-transition:all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);--dd-error:var(--color-danger, #ef4444);--dd-radius-sm:8px;--dd-radius-md:10px}.dark,[data-theme=dark],[data-theme=violet],[data-theme=pink],[data-theme=blue],[data-theme=green],[data-theme=yellow]{--dd-text:var(--label-color, #f1f5f9);--dd-muted:var(--label-subtitle-color, #cbd5e1);--dd-bg:var(--bg-primary, #1e293b);--dd-panel:rgba(30, 41, 59, 0.98);--dd-panel-solid:var(--bg-primary, #1e293b);--dd-hover:var(--bg-hover, #334155);--dd-border:var(--border-default, #334155);--dd-border-strong:var(--border-strong, #475569)}.dropdown-label{display:block;font-size:11px;font-weight:700;color:var(--dd-text);margin-bottom:8px;letter-spacing:0.08em;text-transform:uppercase;opacity:0.65;cursor:default}.dropdown-container{position:relative;display:inline-flex;flex-direction:column;width:max-content;min-width:50px;vertical-align:middle}.dropdown-full-width{width:100%;display:block;}.dropdown-fit-content{width:max-content;min-width:unset}.dropdown-fit-content .ui-dropdown-menu{width:max-content;min-width:100%;white-space:nowrap}.dropdown-fit-content .dropdown-trigger{width:max-content}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--bg-primary, #ffffff);border:1px solid var(--dd-border);border-radius:var(--dd-radius-md);cursor:pointer;transition:var(--dd-transition);-webkit-user-select:none;user-select:none;gap:12px;padding:0 16px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);color:var(--dd-text);font-weight:500;line-height:normal;box-sizing:border-box}.dropdown-trigger:hover{border-color:var(--dd-border-strong);box-shadow:0 10px 22px rgba(var(--color-primary-rgb, 37, 99, 235), 0.08)}.dropdown-open .dropdown-trigger{border-color:var(--dd-focus);background:var(--dd-bg);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.dropdown-disabled .dropdown-trigger{background:var(--bg-secondary, #f1f5f9);cursor:not-allowed;opacity:0.7;border-color:var(--dd-border);box-shadow:none}.dropdown-disabled .dropdown-trigger:hover{background:var(--bg-secondary, #f1f5f9)}.dropdown-xxxs .dropdown-trigger{padding:0 6px;font-size:11px;min-height:20px;height:20px;border-radius:var(--dd-radius-sm)}.dropdown-xxs .dropdown-trigger{padding:0 8px;font-size:12px;min-height:24px;height:24px;border-radius:var(--dd-radius-sm)}.dropdown-xs .dropdown-trigger{padding:0 10px;font-size:13px;min-height:28px;height:28px;border-radius:var(--dd-radius-sm)}.dropdown-sm .dropdown-trigger{padding:0 12px;font-size:13px;min-height:32px;height:32px;border-radius:var(--dd-radius-sm)}.dropdown-md .dropdown-trigger{padding:0 16px;font-size:14px;min-height:40px;height:40px;border-radius:var(--dd-radius-md)}.dropdown-lg .dropdown-trigger{padding:0 20px;font-size:15px;min-height:44px;height:44px;border-radius:var(--dd-radius-md)}.dropdown-xl .dropdown-trigger{padding:0 24px;font-size:16px;min-height:48px;height:48px;border-radius:var(--dd-radius-md)}.dropdown-xxl .dropdown-trigger{padding:0 28px;font-size:18px;min-height:54px;height:54px;border-radius:12px}.dropdown-xxxl .dropdown-trigger{padding:0 32px;font-size:20px;min-height:64px;height:64px;border-radius:14px}.dropdown-shape-square .dropdown-trigger,.dropdown-shape-square .dropdown-menu{border-radius:0 !important}.dropdown-shape-rounded .dropdown-trigger,.dropdown-shape-rounded .dropdown-menu{border-radius:20px !important}.dropdown-shape-pill .dropdown-trigger{border-radius:999px !important}.dropdown-shape-pill .dropdown-menu{border-radius:28px !important}.dropdown-appearance-button .dropdown-trigger{background:var(--dd-primary);border-color:var(--dd-primary);color:var(--color-primary-text, var(--dd-text, #ffffff));box-shadow:0 4px 14px 0 rgba(var(--color-primary-rgb, 37, 99, 235), 0.39)}.dropdown-appearance-button .dropdown-trigger:hover{background:var(--color-primary, #1d4ed8);border-color:var(--color-primary, #1d4ed8);transform:translateY(-1px);box-shadow:0 6px 20px rgba(var(--color-primary-rgb, 37, 99, 235), 0.23)}.dropdown-appearance-button .dropdown-trigger:active{transform:translateY(0)}.variant-glass .dropdown-trigger{background:rgba(255, 255, 255, 0.08);backdrop-filter:blur(12px) saturate(180%);border:1px solid rgba(255, 255, 255, 0.12);color:var(--text-standard, #ffffff);box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.07)}.variant-glass .dropdown-trigger:hover{background:rgba(255, 255, 255, 0.12);border-color:rgba(255, 255, 255, 0.2)}.variant-glass .dropdown-display,.variant-glass .dropdown-placeholder{color:var(--text-standard, #ffffff)}.variant-glass.dropdown-open .dropdown-trigger{background:rgba(255, 255, 255, 0.15);border-color:var(--dd-focus)}.variant-toggle{min-width:unset !important}.variant-toggle .dropdown-trigger{background:transparent;border-color:transparent;padding:0 !important;min-height:unset !important;height:auto !important;box-shadow:none;gap:4px}.variant-toggle .dropdown-trigger:hover{background:var(--dd-hover);border-color:var(--dd-border)}.variant-toggle.dropdown-open .dropdown-trigger{background:var(--dd-hover);border-color:var(--dd-focus);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.variant-toggle .dropdown-display{padding:2px}.dropdown-appearance-button .dropdown-display{color:var(--color-primary-text, var(--dd-text, #ffffff))}.dropdown-appearance-button .dropdown-clear,.dropdown-appearance-button .dropdown-arrow{color:var(--color-primary-text, var(--dd-text, #ffffff))}.dropdown-display{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}.dropdown-has-chips .dropdown-trigger{height:auto;min-height:48px;padding:6px 16px}.dropdown-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0;width:100%}.dropdown-placeholder{color:var(--label-subtitle-color, #91a0b4);font-weight:400}.dropdown-icons{display:flex;align-items:center;gap:8px;flex-shrink:0}.dropdown-clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--bg-primary, #eef4fb);color:var(--dd-muted);transition:var(--dd-transition)}.dropdown-clear:hover{background:var(--bg-primary, #e2ecf8);color:var(--dd-text)}.dropdown-arrow{display:flex;align-items:center;color:var(--dd-muted);transition:transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)}.dropdown-arrow.open{transform:rotate(180deg);color:var(--dd-focus)}.ui-dropdown-menu{position:fixed;display:flex !important;flex-direction:column !important;gap:0;background:var(--bg-primary, #ffffff) !important;border:1px solid rgba(0, 0, 0, 0.08);border-radius:16px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.1);z-index:10001;overflow:hidden;animation:dropdownPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);width:auto;min-width:0;container-type:inline-size;container-name:dropdown-menu}.ui-dropdown-menu--local{position:absolute}@keyframes dropdownPop{from{opacity:0;transform:translateY(12px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}.ui-dropdown-menu.dropdown-menu-top{bottom:auto}.ui-dropdown-menu--local.dropdown-menu-top{top:auto;bottom:calc(100% + 8px)}.dropdown-menu-top{animation:dropdownPopTop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)}@keyframes dropdownPopTop{from{opacity:0;transform:translateY(-4px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-search{padding:12px;border-bottom:1px solid var(--border-subtle, #edf2f7);background:var(--dd-panel)}.dropdown-search-container{position:relative;display:flex;align-items:center}.dropdown-search-icon{position:absolute;left:12px;color:var(--dd-muted);pointer-events:none}.dropdown-search-input{width:100%;padding:11px 13px 11px 36px;background:var(--bg-primary, #f9fbfe);border:1px solid var(--border-default, #d4deea);border-radius:12px;font-size:14px;color:var(--dd-text);outline:none;transition:var(--dd-transition)}.dropdown-search-input::placeholder{color:var(--dd-muted);opacity:0.8}.dropdown-search-input:focus{background:var(--bg-primary, #ffffff);border-color:var(--dd-focus);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.dropdown-options{flex:1;min-height:0;overflow-y:auto;padding:8px;background:var(--dd-panel-solid)}.dropdown-menu-sm{border-radius:12px;--dd-option-min-height:28px;--dd-option-padding-y:8px;--dd-option-padding-x:12px;--dd-option-gap:10px;--dd-option-spacing-y:2px}.dropdown-menu-sm .dropdown-search{padding:8px}.dropdown-menu-sm .dropdown-search-input{min-height:34px;font-size:13px;padding:8px 12px 8px 34px}.dropdown-menu-sm .dropdown-options{padding:6px}.dropdown-menu-sm .dropdown-option-label{font-size:13px}.dropdown-menu-sm .dropdown-option-subtitle,.dropdown-menu-sm .dropdown-empty,.dropdown-menu-sm .dropdown-group-header,.dropdown-menu-sm .dropdown-bulk-actions,.dropdown-menu-sm .dropdown-select-all,.dropdown-menu-sm .dropdown-clear-all{font-size:12px}.dropdown-menu-md{border-radius:16px;--dd-option-min-height:30px;--dd-option-padding-y:10px;--dd-option-padding-x:16px;--dd-option-gap:12px;--dd-option-spacing-y:4px}.dropdown-menu-lg{border-radius:18px;--dd-option-min-height:32px;--dd-option-padding-y:12px;--dd-option-padding-x:18px;--dd-option-gap:14px;--dd-option-spacing-y:6px}.dropdown-menu-lg .dropdown-search{padding:14px}.dropdown-menu-lg .dropdown-search-input{min-height:46px;font-size:15px;padding:12px 14px 12px 40px}.dropdown-menu-lg .dropdown-options{padding:10px}.dropdown-menu-lg .dropdown-option-label{font-size:15px}.dropdown-menu-lg .dropdown-option-subtitle,.dropdown-menu-lg .dropdown-empty,.dropdown-menu-lg .dropdown-group-header,.dropdown-menu-lg .dropdown-bulk-actions,.dropdown-menu-lg .dropdown-select-all,.dropdown-menu-lg .dropdown-clear-all{font-size:14px}.dropdown-options::-webkit-scrollbar{width:5px}.dropdown-options::-webkit-scrollbar-track{background:transparent}.dropdown-options::-webkit-scrollbar-thumb{background:var(--color-primary, #cbd5e1);border-radius:10px}.dropdown-options::-webkit-scrollbar-thumb:hover{background:var(--color-primary, #94a3b8)}.dropdown-option-wrapper{position:relative}.ui-dropdown-option,.dropdowndata{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center;gap:var(--dd-option-gap, 12px);background-color:transparent;transition:var(--dd-transition);border-radius:12px;margin:var(--dd-option-spacing-y, 4px) 0;padding:var(--dd-option-padding-y, 10px) var(--dd-option-padding-x, 16px);min-height:var(--dd-option-min-height, 48px);width:100%;box-sizing:border-box}.dropdown-menu-sm .ui-dropdown-option,.dropdown-menu-sm .dropdowndata{border-radius:10px}.dropdown-menu-lg .ui-dropdown-option,.dropdown-menu-lg .dropdowndata{border-radius:14px}.ui-dropdown-option:hover,.dropdowndata:hover,.dropdown-option-highlighted{background:var(--dd-hover);border-color:var(--color-primary, #d7e7ff);box-shadow:0 10px 24px rgba(var(--color-primary-rgb, 37, 99, 235), 0.08);transform:translateY(-1px)}.ui-dropdown-option-selected{background:var(--dd-selected-bg) !important;color:var(--dd-selected-text) !important;font-weight:600;border-radius:12px;margin:4px 0;box-shadow:none !important}.ui-dropdown-option-selected .dropdown-option-label{color:var(--dd-selected-text) !important;font-weight:600 !important}.dropdown-option-disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.dropdown-option-parent{font-weight:600;letter-spacing:-0.01em}.dropdown-option-left{display:flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0}.dropdown-option-icon{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--dd-muted);line-height:1}.dropdown-option-text{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;overflow:hidden;line-height:normal;padding:4px 0}.dropdown-option-text .dropdown-option-content{width:100%;min-width:0;overflow:hidden}.dropdown-option-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font-size:14px;font-weight:500;color:var(--dd-text, var(--color-on-surface, #10213a))}.dropdown-option-subtitle{font-size:12px;color:var(--dd-muted, var(--color-on-surface-muted, #62748a));font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.dropdown-option-description{font-size:12px;color:var(--dd-muted, var(--color-on-surface-muted, #62748a));font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.dropdown-option-right{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center;justify-content:flex-end;flex-shrink:0;margin-left:auto;gap:8px}.dropdown-option-right:empty{display:none}.dropdown-option-tag{flex-shrink:0}.dropdown-option-right-icon{display:flex;align-items:center;justify-content:center;color:var(--dd-muted);opacity:0.8}.ui-dropdown-selected-marker{display:inline-flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;animation:checkPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)}.ui-dropdown-selected-marker-wrap{display:inline-flex;align-items:center;gap:4px;flex-shrink:0}.ui-dropdown-selected-marker-label{font-size:11px;font-weight:500;color:var(--dd-selected-text);white-space:nowrap;animation:checkPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)}@keyframes checkPop{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}.dropdown-checkbox{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:2px solid var(--color-primary, #cbd5e1);border-radius:5px;flex-shrink:0;transition:var(--dd-transition);background:var(--bg-primary, #ffffff);line-height:1}.dropdown-checkbox ui-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--text-standard, #ffffff)}.dropdown-option-selected .dropdown-checkbox,.dropdown-checkbox.checked,.dropdown-checkbox.dropdown-checkbox-selected{background:var(--dd-primary);border-color:var(--dd-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb, 37, 99, 235), 0.2)}.dropdown-expand-icon{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);color:var(--dd-muted);opacity:0.6}.dropdown-expand-icon.expanded{transform:rotate(90deg);color:var(--dd-primary);opacity:1}.dropdown-children{margin-left:20px;padding-left:12px;border-left:1px solid var(--dd-border);margin-top:-1px;margin-bottom:4px}.dropdown-empty{padding:32px 16px;font-size:14px}.dropdown-helper-text{margin-top:6px;font-size:12px;color:var(--dd-muted);display:flex;align-items:center;gap:6px;padding:0 4px}.dropdown-error-text{color:var(--dd-error);font-weight:500;animation:dropdownShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.dropdown-invalid .dropdown-trigger{border-color:var(--dd-error)}.dropdown-invalid .dropdown-trigger:hover{box-shadow:0 0 0 4px rgba(var(--color-danger-rgb, 239, 68, 68), 0.1)}@keyframes dropdownShake{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}.dropdown-spinner{display:flex;animation:dropdownSpin 1s linear infinite;color:var(--dd-primary)}@keyframes dropdownSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.dropdown-group-header{padding:12px 14px 6px;font-size:11px;font-weight:700;color:var(--dd-muted);text-transform:uppercase;letter-spacing:0.05em;background:var(--dd-panel-solid)}.dropdown-select-all{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;font-weight:600;font-size:14px;color:var(--dd-primary);background:transparent;transition:var(--dd-transition);border-bottom:none;border-radius:10px;min-height:36px;flex:1;justify-content:flex-start}.dropdown-select-all.dropdown-select-all-with-clear{border-bottom:1px solid var(--dd-border)}.dropdown-select-all:hover{background:rgba(var(--color-primary-rgb, 37, 99, 235), 0.08)}.dropdown-select-all .dropdown-checkbox{width:18px;height:18px;border:1px solid var(--dd-border-strong);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:var(--dd-transition)}.dropdown-select-all .dropdown-checkbox.dropdown-checkbox-selected{background-color:var(--dd-primary);border-color:var(--dd-primary);color:#fff}.dropdown-select-all .dropdown-checkbox.dropdown-checkbox-indeterminate{background-color:var(--dd-primary);border-color:var(--dd-primary);color:#fff;opacity:0.7}.dropdown-skeleton{pointer-events:none}.dropdown-skeleton .dropdown-trigger{background:var(--bg-secondary, #f1f5f9);border-color:var(--border-subtle, #e2e8f0);box-shadow:none}.dropdown-skeleton .dropdown-skeleton-text{width:60%;height:14px;background:linear-gradient(90deg, var(--bg-primary, #e2e8f0) 25%, var(--bg-primary, #f8fafc) 50%, var(--bg-primary, #e2e8f0) 75%);background-size:200% 100%;animation:dropdownShimmer 1.5s infinite;border-radius:4px}.dropdown-skeleton .dropdown-skeleton-icon{width:16px;height:16px;background:var(--bg-primary, #e2e8f0);border-radius:4px}@keyframes dropdownShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.dropdown-separator{height:1px;background-color:var(--dd-border);margin:6px 10px;pointer-events:none}.dropdown-search-highlight{background-color:var(--bg-primary, #fef08a);color:var(--color-danger, #854d0e);border-radius:2px;padding:0 1px;font-weight:600}.dropdown-bulk-actions{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--dd-border);background:linear-gradient(180deg, var(--bg-primary, #fbfdff) 0%, var(--bg-primary, #f8fafc) 100%);font-size:13px;gap:12px}.dropdown-clear-all{display:flex;align-items:center;gap:8px;color:var(--color-danger, #ef4444);cursor:pointer;padding:8px 10px;border-radius:10px;transition:all 0.2s;font-weight:500;min-height:36px;justify-content:center;white-space:nowrap}.dropdown-clear-all:hover{background-color:var(--bg-primary, #fef2f2);color:var(--color-danger-hover, #dc2626)}@container dropdown-menu (max-width: 220px){.dropdown-clear-all{padding:8px;gap:0;border-radius:8px}.dropdown-clear-all span{display:none}}.dropdown-menu-variant-nested-menu{overflow:visible}.dropdown-menu-variant-nested-menu .dropdown-options{overflow:visible;padding:6px}.dropdown-nested-columns{display:flex;align-items:stretch;min-width:max-content}.dropdown-nested-panel{min-width:210px;max-width:280px;padding:2px}.dropdown-nested-panel+.dropdown-nested-panel{border-left:1px solid var(--dd-border);margin-left:4px;padding-left:10px}.dropdown-menu-sm .dropdown-nested-panel{min-width:180px}.dropdown-menu-lg .dropdown-nested-panel{min-width:240px}.dropdown-nested-option{margin:2px 0}.dropdown-nested-option-active{background:var(--dd-hover);border-color:var(--dd-border-strong)}.variant-detailed .dropdown-trigger{border-color:var(--dd-border);border-radius:14px;min-height:48px;background:linear-gradient(180deg, var(--bg-primary, #ffffff) 0%, var(--bg-primary, #f8fbff) 100%);box-shadow:0 2px 8px rgba(15, 23, 42, 0.04);font-weight:500}.variant-detailed .dropdown-trigger:hover{border-color:var(--dd-border-strong);box-shadow:0 10px 22px rgba(var(--color-primary-rgb, 37, 99, 235), 0.08)}.variant-detailed.dropdown-open .dropdown-trigger{border-color:var(--dd-focus);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 37, 99, 235), 0.14), 0 16px 32px rgba(var(--color-primary-rgb, 37, 99, 235), 0.14)}.variant-detailed .dropdown-menu{border-radius:20px !important;padding:6px !important;background:rgba(255, 255, 255, 0.98) !important;backdrop-filter:blur(20px) !important;box-shadow:0 20px 50px rgba(15, 23, 42, 0.22) !important}.variant-detailed .dropdown-options{padding:4px !important}.variant-detailed .ui-dropdown-option,.variant-detailed .dropdowndata{padding:12px 14px !important;border-radius:16px !important;margin:4px 0 !important;gap:14px !important;border:1px solid transparent !important;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important}.variant-detailed .ui-dropdown-option:hover,.variant-detailed .ui-dropdown-option.dropdown-option-highlighted,.variant-detailed .dropdowndata:hover,.variant-detailed .dropdowndata.dropdown-option-highlighted{background:var(--bg-primary, #f0f7ff) !important;border-color:var(--border-subtle, #dbeafe) !important;transform:translateY(-1.5px) !important;box-shadow:0 8px 16px rgba(var(--color-primary-rgb, 37, 99, 235), 0.08) !important}.variant-detailed .ui-dropdown-option.ui-dropdown-option-selected,.variant-detailed .dropdowndata.ui-dropdown-option-selected{background:var(--dd-selected-bg) !important;border-color:var(--dd-selected-border) !important;box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5) !important}.variant-detailed .ui-dropdown-option.ui-dropdown-option-selected .dropdown-option-label,.variant-detailed .dropdowndata.ui-dropdown-option-selected .dropdown-option-label{color:var(--dd-selected-text) !important;font-weight:700 !important}.variant-detailed .dropdown-option-label{font-size:14px !important;font-weight:600 !important;color:var(--text-primary, #1e293b) !important;margin-bottom:2px !important}.variant-detailed .dropdown-option-subtitle{font-size:11px !important;color:var(--text-muted, #64748b) !important;font-weight:500 !important;text-transform:uppercase !important;letter-spacing:0.02em !important}.variant-detailed .dropdown-option-tag{font-size:10px !important;font-weight:700 !important;letter-spacing:0.05em !important;padding:4px 10px !important;border-radius:999px !important;box-shadow:0 1px 2px rgba(0, 0, 0, 0.05) !important}.variant-detailed .dropdown-option-icon,.variant-detailed .dropdown-option-right-icon{font-size:20px !important;display:flex !important;align-items:center !important;justify-content:center !important}.variant-detailed .dropdown-option-right-icon{color:var(--color-primary, #cbd5e1) !important;transition:all 0.2s !important}.variant-detailed .dropdown-option-right-icon:hover{color:var(--color-warning, #f59e0b) !important;transform:scale(1.1) !important}.variant-detailed .ui-dropdown-selected-marker{display:inline-flex !important;align-items:center !important;justify-content:center !important;color:var(--dd-primary) !important;background:var(--bg-primary, #dbeafe) !important;padding:4px !important;border-radius:50% !important;flex-shrink:0 !important}.variant-detailed .dropdown-trigger-content{display:flex !important;align-items:center !important;gap:10px !important}.variant-detailed .dropdown-trigger-icon{color:var(--dd-primary, var(--color-primary, #10b981)) !important;font-size:18px !important;flex-shrink:0 !important}.variant-detailed .dropdown-trigger-label{overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important}.variant-detailed .dropdown-expand-group{display:flex !important;align-items:center !important;gap:8px !important}.variant-detailed .dropdown-badge{background:var(--dd-primary, var(--color-primary, #10b981)) !important;color:var(--text-standard, #ffffff) !important;font-size:10px !important;font-weight:800 !important;height:18px !important;min-width:18px !important;padding:0 5px !important;border-radius:9px !important;display:flex !important;align-items:center !important;justify-content:center !important;box-shadow:0 4px 10px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3) !important;animation:badgePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important}@keyframes badgePop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}.dropdown-option:active{transform:scale(0.98);transition:transform 0.1s ease}.dropdown-option-selected.dropdowndata{position:relative;overflow:hidden}.dropdown-option-selected.dropdowndata::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1) 0%, transparent 70%);pointer-events:none}`;
 
 const Dropdown = class {
     constructor(hostRef) {
@@ -224,7 +224,9 @@ const Dropdown = class {
     searchDebounce;
     menuElement;
     rafId = null;
+    deferredPositionRafId = null;
     isPortaled = false;
+    lastWheelTimestamp = 0;
     handleDocumentClick = (event) => {
         if (!this.isOpen)
             return;
@@ -320,20 +322,19 @@ const Dropdown = class {
         }
     }
     componentDidUpdate() {
-        if (this.isOpen && this.menuElement) {
-            this.calculateDropdownPosition();
-        }
+        this.deferPositionRecalculation();
     }
     connectedCallback() {
         this.handleViewportChange = this.handleViewportChange.bind(this);
-        window.addEventListener('scroll', this.handleViewportChange, true);
+        this.handleScrollChange = this.handleScrollChange.bind(this);
+        window.addEventListener('scroll', this.handleScrollChange, true);
         window.addEventListener('resize', this.handleViewportChange);
         document.addEventListener('click', this.handleDocumentClick, true);
         window.addEventListener('popstate', this.closeDropdown);
         window.addEventListener('hashchange', this.closeDropdown);
     }
     disconnectedCallback() {
-        window.removeEventListener('scroll', this.handleViewportChange, true);
+        window.removeEventListener('scroll', this.handleScrollChange, true);
         window.removeEventListener('resize', this.handleViewportChange);
         document.removeEventListener('click', this.handleDocumentClick, true);
         window.removeEventListener('popstate', this.closeDropdown);
@@ -556,9 +557,19 @@ const Dropdown = class {
             this.selectedValues = new Set([valueString]);
         }
     }
-    toggleDropdown = () => {
+    handleTriggerWheel = () => {
+        this.lastWheelTimestamp = performance.now();
+    };
+    toggleDropdown = (event) => {
         if (this.disabled)
             return;
+        if (!this.isOpen && event) {
+            // Ignore non-primary mouse clicks and accidental clicks right after wheel scrolling.
+            if (event.button !== 0)
+                return;
+            if (performance.now() - this.lastWheelTimestamp < 180)
+                return;
+        }
         // Only open if trigger is visible
         const trigger = (this.hostElement.shadowRoot?.querySelector('.dropdown-trigger') || this.hostElement.querySelector('.dropdown-trigger'));
         if (!trigger)
@@ -617,11 +628,35 @@ const Dropdown = class {
         };
         this.rafId = requestAnimationFrame(update);
     }
+    deferPositionRecalculation() {
+        if (!this.isOpen || !this.menuElement) {
+            if (this.deferredPositionRafId !== null) {
+                cancelAnimationFrame(this.deferredPositionRafId);
+                this.deferredPositionRafId = null;
+            }
+            return;
+        }
+        // Defer until after the current render frame to avoid Stencil's
+        // "changed during rendering" warning when menu content changes while open.
+        if (this.deferredPositionRafId !== null) {
+            cancelAnimationFrame(this.deferredPositionRafId);
+        }
+        this.deferredPositionRafId = requestAnimationFrame(() => {
+            this.deferredPositionRafId = null;
+            if (this.isOpen && this.menuElement) {
+                this.calculateDropdownPosition();
+            }
+        });
+    }
     cleanupPortal() {
         if (this.rafId !== null) {
             cancelAnimationFrame(this.rafId);
             this.rafId = null;
         }
+        if (this.deferredPositionRafId !== null) {
+            cancelAnimationFrame(this.deferredPositionRafId);
+            this.deferredPositionRafId = null;
+        }
         if (this.isPortaled && this.menuElement && this.menuElement.parentElement === document.body) {
             this.hostElement.appendChild(this.menuElement);
             this.isPortaled = false;
@@ -632,6 +667,20 @@ const Dropdown = class {
             this.calculateDropdownPosition();
         }
     }
+    handleScrollChange(e) {
+        if (!this.isOpen)
+            return;
+        const target = e.target;
+        // Don't do anything if scrolling happens inside the menu or host component.
+        if (target instanceof Node && this.menuElement && (target === this.menuElement || this.menuElement.contains(target))) {
+            return;
+        }
+        if (target instanceof Node && this.hostElement && (target === this.hostElement || this.hostElement.contains(target))) {
+            return;
+        }
+        // Keep the dropdown open while scrolling and just update its position.
+        this.calculateDropdownPosition();
+    }
     parseConfiguredMenuWidth() {
         if (this.menuWidth === undefined || this.menuWidth === null) {
             return {};
@@ -665,12 +714,20 @@ const Dropdown = class {
         const configuredWidth = this.parseConfiguredMenuWidth();
         const measuredWidth = this.computedMenuWidth > 0 ? `${this.computedMenuWidth}px` : undefined;
         const effectiveMaxHeight = this.menuMaxHeight > 0 ? this.menuMaxHeight : (this.maxHeight || 300);
+        // Dynamically calculate high-fidelity z-index when inside a dialog/modal container
+        const parentDialog = this.hostElement.closest('ui-dialog-box');
+        let zIndex = 10001; // stable fallback above base dialog backdrops
+        if (parentDialog) {
+            const dialogZ = parentDialog.zIndex || 10000;
+            zIndex = dialogZ + 20; // overlay cleanly above dialogue content overlays
+        }
         const baseStyles = {
             left: `${this.menuLeft}px`,
             maxWidth: 'calc(100vw - 16px)',
             maxHeight: `${effectiveMaxHeight}px`,
             visibility: usesLocalMenuPosition ? 'visible' : (this.menuLeft === 0 && this.menuTop === 0 ? 'hidden' : 'visible'),
             top: `${this.menuTop}px`,
+            zIndex: `${zIndex}`,
         };
         // User explicitly set a width via menuWidth prop — honour it exactly.
         if (configuredWidth.cssWidth) {
@@ -679,15 +736,7 @@ const Dropdown = class {
                 width: configuredWidth.cssWidth,
             };
         }
-        // fullWidth — stretch to 100% of the container/viewport.
-        if (this.fullWidth) {
-            return {
-                ...baseStyles,
-                width: measuredWidth,
-                minWidth: measuredWidth,
-            };
-        }
-        // All other cases: size to content (widest option + reserved tick space).
+        // All cases: size to widest option but never narrower than trigger.
         return {
             ...baseStyles,
             width: 'max-content',
@@ -718,11 +767,13 @@ const Dropdown = class {
         }
         const configuredWidth = this.parseConfiguredMenuWidth();
         const triggerWidth = trigger.offsetWidth || rect.width;
-        const placementWidth = !this.fitContent && configuredWidth.pixelWidth
+        // Use the larger of trigger width or rendered menu width (content may be wider than trigger).
+        const renderedMenuWidth = this.menuElement ? (this.menuElement.offsetWidth || 0) : 0;
+        const placementWidth = configuredWidth.pixelWidth
             ? configuredWidth.pixelWidth
             : this.isNestedMenuVariant()
                 ? Math.max(triggerWidth, this.getNestedMenuEstimatedWidth())
-                : triggerWidth;
+                : Math.max(triggerWidth, renderedMenuWidth);
         const shouldPortal = this.shouldPortalMenu();
         if (shouldPortal && this.menuElement.parentElement !== document.body) {
             document.body.appendChild(this.menuElement);
@@ -732,16 +783,27 @@ const Dropdown = class {
             this.cleanupPortal();
         }
         const gap = 4;
+        const viewportPadding = 8;
+        const desiredMenuHeight = this.maxHeight || 300;
+        const renderedMenuHeight = this.menuElement.offsetHeight || desiredMenuHeight;
+        const spaceBelow = window.innerHeight - rect.bottom - gap - viewportPadding;
+        const spaceAbove = rect.top - gap - viewportPadding;
+        const preferredPlacement = spaceBelow < Math.min(desiredMenuHeight, renderedMenuHeight) && spaceAbove > spaceBelow
+            ? 'top'
+            : 'bottom';
         const { left, top, placement: finalPlacement, availableHeight: spaceHeight } = calculateUniversalPlacement(trigger, {
             menuWidth: placementWidth,
-            menuHeight: this.maxHeight || 300,
+            menuHeight: desiredMenuHeight,
+            actualMenuHeight: Math.min(renderedMenuHeight, desiredMenuHeight),
+            actualMenuWidth: this.menuElement ? this.menuElement.offsetWidth : undefined,
             gap,
-            placement: 'auto',
+            placement: preferredPlacement,
             useTransformedAncestorOffset: shouldPortal ? !this.ignoreParentPosition : true,
         });
         // Compute how much vertical space is actually available so the options list
         // can be constrained and will show a scrollbar instead of overflowing.
-        const nextMaxHeight = Math.max(80, Math.min(this.maxHeight || 300, spaceHeight));
+        const fallbackSpaceHeight = preferredPlacement === 'top' ? spaceAbove : spaceBelow;
+        const nextMaxHeight = Math.max(80, Math.min(desiredMenuHeight, spaceHeight || fallbackSpaceHeight));
         let nextLeft = left;
         let nextTop = top;
         if (!shouldPortal) {
@@ -761,7 +823,7 @@ const Dropdown = class {
             this.menuLeft = nextLeft;
             this.menuTop = nextTop;
             this.computedMenuWidth = triggerWidth;
-            this.dropdownPosition = finalPlacement;
+            this.dropdownPosition = (finalPlacement === 'top' ? 'top' : 'bottom');
             this.menuMaxHeight = nextMaxHeight;
         }
     }
@@ -1024,7 +1086,7 @@ const Dropdown = class {
                 'dropdown-has-chips': this.chipView && this.multiSelect && hasSelection,
                 'dropdown-rtl': this.rtl,
                 [`dropdown-shape-${this.shape}`]: this.shape !== 'default',
-            }, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && h("label", { class: "dropdown-label" }, this.label), h("div", { class: "dropdown-trigger", onClick: this.toggleDropdown, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": "dropdown-list", "aria-label": this.placeholder, "aria-activedescendant": activeDescendantId }, h("slot", { name: "prefix" }), h("div", { class: {
+            }, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && h("label", { class: "dropdown-label" }, this.label), h("div", { class: "dropdown-trigger", onClick: (event) => this.toggleDropdown(event), onWheel: this.handleTriggerWheel, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": "dropdown-list", "aria-label": this.placeholder, "aria-activedescendant": activeDescendantId }, h("slot", { name: "prefix" }), h("div", { class: {
                 'dropdown-display': true,
                 'dropdown-placeholder': !hasSelection,
             }, style: displayStyle }, this.getDisplayText()), h("div", { class: "dropdown-icons" }, this.loading && h("span", { class: "dropdown-spinner" }, h("ui-icon", { name: "loader-2", library: "lucide", spin: true, size: "16px" })), hasSelection && effectiveClearable && !this.disabled && (h("span", { class: "dropdown-clear", onClick: this.handleClear, tabIndex: 0, role: "button", "aria-label": "Clear selection", onKeyDown: e => {
@@ -1092,14 +1154,18 @@ const Dropdown = class {
     }
     renderBulkActions(filteredOptions) {
         if (!this.multiSelect || this.searchQuery)
-            return null; // Only show bulk actions for multi-select when not searching
-        const allSelected = this.isAllSelected(filteredOptions);
+            return null;
         const hasAnySelection = this.selectedValues.size > 0;
-        const showSelectAllAction = this.showSelectAll && filteredOptions.length > 0;
-        if (!showSelectAllAction && !hasAnySelection) {
+        // Only render when at least one item is selected
+        if (!hasAnySelection)
             return null;
-        }
-        return (h("div", { class: "dropdown-bulk-actions" }, showSelectAllAction && (h("div", { class: { 'dropdown-select-all': true, 'dropdown-select-all-with-clear': hasAnySelection }, onClick: e => { e.stopPropagation(); this.toggleSelectAll(filteredOptions); } }, h("div", { class: { 'dropdown-checkbox': true, 'dropdown-checkbox-selected': allSelected } }, allSelected && h("ui-icon", { name: "check", library: "lucide", size: "12px" })), h("span", null, this.selectAllLabel))), hasAnySelection && (h("div", { class: "dropdown-clear-all", onClick: e => { e.stopPropagation(); this.clearAllSelections(); } }, h("ui-icon", { name: "trash-2", library: "lucide", size: "14px" }), h("span", null, "Clear All")))));
+        const allSelected = this.isAllSelected(filteredOptions);
+        const isIndeterminate = !allSelected; // hasAnySelection already confirmed above
+        return (h("div", { class: "dropdown-bulk-actions" }, this.showSelectAll && filteredOptions.length > 0 && (h("div", { class: "dropdown-select-all", onClick: e => { e.stopPropagation(); this.toggleSelectAll(filteredOptions); } }, h("div", { class: {
+                'dropdown-checkbox': true,
+                'dropdown-checkbox-selected': allSelected,
+                'dropdown-checkbox-indeterminate': isIndeterminate,
+            } }, allSelected && h("ui-icon", { name: "check", library: "lucide", size: "12px" }), isIndeterminate && h("ui-icon", { name: "minus", library: "lucide", size: "12px" })), h("span", null, this.selectAllLabel))), h("div", { class: "dropdown-clear-all", onClick: e => { e.stopPropagation(); this.clearAllSelections(); } }, h("ui-icon", { name: "trash-2", library: "lucide", size: "14px" }), h("span", null, "Clear All"))));
     }
     renderNestedMenuContents(options, indexObj) {
         const levels = this.getNestedMenuLevels(options);
@@ -1164,7 +1230,7 @@ const Dropdown = class {
 };
 Dropdown.style = dropdownCss();
 
-const toggleGroupCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--toggle-group-gap:16px;--toggle-group-border:var(--border-subtle, #e2e8f0);--toggle-group-text:var(--text-primary, #1e293b);--toggle-group-muted:var(--color-primary, #64748b);--toggle-group-primary:var(--color-primary-hover, #2563eb);--toggle-group-danger:var(--color-danger, #ef4444)}.toggle-group-host{display:flex;flex-direction:column}.toggle-group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.toggle-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--toggle-group-text);display:flex;align-items:center}.toggle-group-label .required{color:var(--toggle-group-danger);margin-left:4px}.collapse-btn{background:transparent;border:none;cursor:pointer;padding:4px;border-radius:4px;color:var(--toggle-group-muted);transition:all 0.2s}.collapse-btn:hover{background:var(--bg-secondary, #f1f5f9);color:var(--toggle-group-text)}.search-container{position:relative;margin-bottom:16px}.search-container .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--toggle-group-muted)}.search-container .search-input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--toggle-group-border);border-radius:8px;font-size:14px;transition:all 0.2s;outline:none}.search-container .search-input:focus{border-color:var(--toggle-group-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.group-controls{display:flex;gap:12px;align-items:center;margin-bottom:16px}.group-controls .control-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-primary, #ffffff);border:1px solid var(--toggle-group-border);border-radius:6px;font-size:13px;font-weight:600;color:var(--toggle-group-muted);cursor:pointer;transition:all 0.2s}.group-controls .control-btn ui-icon{color:var(--toggle-group-muted)}.group-controls .control-btn:hover{background:var(--bg-primary, #f8fafc);border-color:var(--color-primary, #cbd5e1);transform:translateY(-1px);color:var(--toggle-group-text)}.max-badge{font-size:11px;background:var(--bg-secondary, #f1f5f9);color:var(--toggle-group-muted);padding:2px 8px;border-radius:9999px;font-weight:600}.group-compact{gap:8px}.group-compact .toggle-list{gap:8px}.group-compact .layout-vertical{gap:4px}.group-compact .toggle-group-header{margin-bottom:4px}.toggle-list{display:flex;gap:var(--toggle-group-gap)}.toggle-list.layout-horizontal{flex-direction:row;flex-wrap:wrap}.toggle-list.layout-vertical{flex-direction:column;gap:8px}.toggle-list.layout-grid{display:grid;gap:16px}.toggle-list{}.toggle-list.is-segmented{position:relative;background:var(--bg-secondary, #f1f5f9);padding:6px;border-radius:16px;display:inline-flex;width:fit-content;gap:0;border:none;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05)}.toggle-list.is-segmented .toggle-item-wrapper{position:relative;z-index:2;padding:10px 24px;border-radius:12px;background:transparent !important;border:none !important;box-shadow:none !important;transform:none !important;flex:1;justify-content:center;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);min-width:120px;font-weight:700}.toggle-list.is-segmented .toggle-item-wrapper ui-switch{transition:color 0.3s ease;--switch-track-bg:transparent;--switch-thumb-bg:transparent;--switch-glow:none;pointer-events:none;width:100%;display:flex;justify-content:center}.toggle-list.is-segmented .toggle-item-wrapper ui-switch::part(track){opacity:0;visibility:hidden;display:none}.toggle-list.is-segmented .toggle-item-wrapper ui-switch::part(thumb){opacity:0;visibility:hidden;display:none}.toggle-list.is-segmented .toggle-item-wrapper ui-switch::part(container){margin:0;width:100%;display:flex;justify-content:center}.toggle-list.is-segmented .toggle-item-wrapper ui-switch::part(label){margin:0;width:100%;text-align:center;justify-content:center;align-items:center}.toggle-list.is-segmented .toggle-item-wrapper.is-active ui-switch::part(label){color:#ffffff !important;font-weight:700;text-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}.toggle-list.is-segmented .toggle-item-wrapper:hover:not(.is-active){background:rgba(0, 0, 0, 0.03) !important}.toggle-list.is-segmented .segmented-indicator{position:absolute;top:6px;left:6px;bottom:6px;border-radius:12px;transition:transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.4s ease, background-color 0.4s ease;box-shadow:0 4px 12px rgba(0, 0, 0, 0.12);z-index:1}.toggle-item-wrapper{display:flex;align-items:center;gap:12px;padding:6px 12px;border-radius:12px;border:1px solid transparent;transition:background-color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, border-color 0.2s ease;cursor:pointer}.toggle-item-wrapper:hover{background:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.03);transform:translateY(-2px);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05)}.toggle-item-wrapper:active{transform:scale(0.96);background:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.06)}.toggle-item-wrapper:focus-within{background:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.05);border-color:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.4);box-shadow:0 0 0 3px rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.15)}.toggle-item-wrapper.is-dragging{opacity:0.5;transform:scale(0.98);background:var(--bg-secondary, #f1f5f9);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1)}.toggle-item-wrapper.is-drag-over{border-top:2px solid var(--toggle-group-primary);padding-top:2px}.toggle-item-wrapper.is-focused{background:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.05)}.drag-handle{cursor:grab;color:var(--toggle-group-muted);opacity:0.4}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.error-message{margin-top:8px;font-size:13px;color:var(--toggle-group-danger);display:flex;align-items:center;gap:6px}.helper-text{margin-top:8px;font-size:13px;color:var(--toggle-group-muted)}.skeleton-container{display:flex;flex-direction:inherit;gap:16px}.skeleton-item{display:flex;align-items:center;gap:12px}.skeleton-item .skeleton-switch{width:44px;height:24px;border-radius:12px;background:var(--bg-secondary, #f1f5f9)}.skeleton-item .skeleton-text{width:120px;height:16px;border-radius:4px;background:var(--bg-secondary, #f1f5f9)}.skeleton-item{animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{opacity:0.6}50%{opacity:1}100%{opacity:0.6}}.group-disabled{opacity:0.5;pointer-events:none}.group-collapsed .toggle-list{display:none}`;
+const toggleGroupCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--toggle-group-gap:16px;--toggle-group-border:var(--border-subtle, #e2e8f0);--toggle-group-text:var(--text-primary, #1e293b);--toggle-group-muted:var(--color-primary, #64748b);--toggle-group-primary:var(--color-primary-hover, #2563eb);--toggle-group-danger:var(--color-danger, #ef4444)}.toggle-group-host{display:flex;flex-direction:column}.toggle-group-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.toggle-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.65;color:var(--toggle-group-text);display:flex;align-items:center}.toggle-group-label .required{color:var(--toggle-group-danger);margin-left:4px}.collapse-btn{background:transparent;border:none;cursor:pointer;padding:4px;border-radius:4px;color:var(--toggle-group-muted);transition:all 0.2s}.collapse-btn:hover{background:var(--bg-secondary, #f1f5f9);color:var(--toggle-group-text)}.search-container{position:relative;margin-bottom:16px}.search-container .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--toggle-group-muted)}.search-container .search-input{width:100%;padding:8px 12px 8px 36px;border:1px solid var(--toggle-group-border);border-radius:8px;font-size:14px;transition:all 0.2s;outline:none}.search-container .search-input:focus{border-color:var(--toggle-group-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 37, 99, 235), 0.1)}.group-controls{display:flex;gap:12px;align-items:center;margin-bottom:16px}.group-controls .control-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-primary, #ffffff);border:1px solid var(--toggle-group-border);border-radius:6px;font-size:13px;font-weight:600;color:var(--toggle-group-muted);cursor:pointer;transition:all 0.2s}.group-controls .control-btn ui-icon{color:var(--toggle-group-muted)}.group-controls .control-btn:hover{background:var(--bg-primary, #f8fafc);border-color:var(--color-primary, #cbd5e1);transform:translateY(-1px);color:var(--toggle-group-text)}.max-badge{font-size:11px;background:var(--bg-secondary, #f1f5f9);color:var(--toggle-group-muted);padding:2px 8px;border-radius:9999px;font-weight:600}.group-compact{gap:8px}.group-compact .toggle-list{gap:8px}.group-compact .layout-vertical{gap:4px}.group-compact .toggle-group-header{margin-bottom:4px}.toggle-list{display:flex;gap:var(--toggle-group-gap)}.toggle-list.layout-horizontal{flex-direction:row;flex-wrap:wrap}.toggle-list.layout-vertical{flex-direction:column;gap:8px}.toggle-list.layout-grid{display:grid;gap:16px}.toggle-list{}.toggle-list.is-segmented{position:relative;background:var(--bg-secondary, #f1f5f9);padding:6px;border-radius:16px;display:inline-flex;width:fit-content;gap:0;border:none;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05)}.toggle-list.is-segmented .toggle-item-wrapper{position:relative;z-index:2;padding:10px 24px;border-radius:12px;background:transparent !important;border:none !important;box-shadow:none !important;transform:none !important;flex:1;justify-content:center;transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);min-width:120px;font-weight:700}.toggle-list.is-segmented .toggle-item-wrapper ui-switch{transition:color 0.3s ease;--switch-track-bg:transparent;--switch-thumb-bg:transparent;--switch-glow:none;pointer-events:none;width:100%;display:flex;justify-content:center}.toggle-list.is-segmented .toggle-item-wrapper ui-switch::part(track){opacity:0;visibility:hidden;display:none}.toggle-list.is-segmented .toggle-item-wrapper ui-switch::part(thumb){opacity:0;visibility:hidden;display:none}.toggle-list.is-segmented .toggle-item-wrapper ui-switch::part(container){margin:0;width:100%;display:flex;justify-content:center}.toggle-list.is-segmented .toggle-item-wrapper ui-switch::part(label){margin:0;width:100%;text-align:center;justify-content:center;align-items:center}.toggle-list.is-segmented .toggle-item-wrapper.is-active ui-switch::part(label){color:#ffffff !important;font-weight:700;text-shadow:0 1px 2px rgba(0, 0, 0, 0.1)}.toggle-list.is-segmented .toggle-item-wrapper:hover:not(.is-active){background:rgba(0, 0, 0, 0.03) !important}.toggle-list.is-segmented .segmented-indicator{position:absolute;top:0px;left:0px;bottom:6px;border-radius:12px;transition:transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.4s ease, background-color 0.4s ease;box-shadow:0 4px 12px rgba(0, 0, 0, 0.12)}.toggle-list.is-segmented.is-multiple .toggle-item-wrapper.is-active{background:var(--active-bg, var(--toggle-group-primary)) !important;border-radius:12px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.12)}.toggle-item-wrapper{display:flex;align-items:center;gap:12px;padding:6px 12px;border-radius:12px;border:1px solid transparent;transition:background-color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, border-color 0.2s ease;cursor:pointer}.toggle-item-wrapper:hover{background:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.03);transform:translateY(-2px);box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.05)}.toggle-item-wrapper:active{transform:scale(0.96);background:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.06)}.toggle-item-wrapper:focus-within{background:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.05);border-color:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.4);box-shadow:0 0 0 3px rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.15)}.toggle-item-wrapper.is-dragging{opacity:0.5;transform:scale(0.98);background:var(--bg-secondary, #f1f5f9);box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1)}.toggle-item-wrapper.is-drag-over{border-top:2px solid var(--toggle-group-primary);padding-top:2px}.toggle-item-wrapper.is-focused{background:rgba(var(--toggle-group-primary-rgb, 37, 99, 235), 0.05)}.drag-handle{cursor:grab;color:var(--toggle-group-muted);opacity:0.4}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.error-message{margin-top:8px;font-size:13px;color:var(--toggle-group-danger);display:flex;align-items:center;gap:6px}.helper-text{margin-top:8px;font-size:13px;color:var(--toggle-group-muted)}.skeleton-container{display:flex;flex-direction:inherit;gap:16px}.skeleton-item{display:flex;align-items:center;gap:12px}.skeleton-item .skeleton-switch{width:44px;height:24px;border-radius:12px;background:var(--bg-secondary, #f1f5f9)}.skeleton-item .skeleton-text{width:120px;height:16px;border-radius:4px;background:var(--bg-secondary, #f1f5f9)}.skeleton-item{animation:pulse 1.5s infinite ease-in-out}@keyframes pulse{0%{opacity:0.6}50%{opacity:1}100%{opacity:0.6}}.group-disabled{opacity:0.5;pointer-events:none}.group-collapsed .toggle-list{display:none}`;
 
 const UIToggleGroup = class {
     constructor(hostRef) {
@@ -1519,8 +1585,12 @@ const UIToggleGroup = class {
             }, onKeyDown: this.handleKeyDown }, this.renderLabel(), this.renderSearch(), this.renderControls(), (this.loading || this.showSkeleton) ? this.renderLoading() : (!this.isCollapsed && (h("div", { class: {
                 'toggle-list': true,
                 [`layout-${this.layout}`]: true,
-                'is-segmented': this.variant === 'segmented'
-            }, style: this.layout === 'grid' ? { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } : {}, ref: (el) => this.listEl = el }, this.variant === 'segmented' && (h("div", { class: "segmented-indicator", style: {
+                'is-segmented': this.variant === 'segmented',
+                'is-multiple': this.selectionMode === 'multiple'
+            }, style: {
+                ...(this.layout === 'grid' ? { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } : {}),
+                '--active-bg': `var(--toggle-group-${this.color})`
+            }, ref: (el) => this.listEl = el }, this.variant === 'segmented' && (h("div", { class: "segmented-indicator", style: {
                 transform: `translate3d(${this.indicatorRect.left}px, ${this.indicatorRect.top}px, 0)`,
                 width: `${this.indicatorRect.width}px`,
                 height: `${this.indicatorRect.height}px`,

package/dist/esm/ui-empty-state.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Dqu2zaH1.js';
 
 const emptyStateCss = () => `@charset "UTF-8";.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:100%}.empty-state-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;box-sizing:border-box}.empty-state-container.full-height{min-height:100vh}.empty-state-container.variant-default{background:transparent}.empty-state-container.variant-outlined{border:2px dashed var(--border-strong, #d1d5db);border-radius:12px}.empty-state-container.variant-filled{background:var(--bg-primary, #f9fafb);border-radius:12px}.empty-state-container.variant-minimal{padding:24px}.empty-state-container.variant-glass{background:rgba(var(--ui-color-surface-rgb, 255, 255, 255), 0.4);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(var(--ui-color-surface-rgb, 255, 255, 255), 0.3);border-radius:20px;box-shadow:0 12px 40px rgba(0, 0, 0, 0.1)}.empty-state-container.variant-glass .empty-state-title{color:var(--ui-color-text, var(--text-primary, #111827))}.empty-state-container.variant-glass .empty-state-title{color:var(--text-primary, #1a1a1a);text-shadow:0 1px 2px rgba(255, 255, 255, 0.5)}.empty-state-container.rounded{border-radius:16px}.empty-state-container.elevated{box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}.empty-state-container.compact{padding:16px}.empty-state-container.compact .empty-state-icon{margin-bottom:12px}.empty-state-container.compact .empty-state-title{font-size:1.1rem;margin-bottom:4px}.empty-state-container.compact .empty-state-message{font-size:0.85rem;margin-bottom:16px}.empty-state-container.compact .empty-state-actions{margin-bottom:0;gap:8px}.empty-state-container.compact .action-button{padding:6px 12px;font-size:0.8rem}.empty-state-container.size-sm{padding:24px 16px}.empty-state-container.size-sm .empty-state-icon i{font-size:48px}.empty-state-container.size-sm .empty-state-title{font-size:1.25rem}.empty-state-container.size-sm .empty-state-message{font-size:0.875rem}.empty-state-container.size-md{padding:48px 24px}.empty-state-container.size-md .empty-state-icon i{font-size:64px}.empty-state-container.size-md .empty-state-title{font-size:1.5rem}.empty-state-container.size-md .empty-state-message{font-size:1rem}.empty-state-container.size-lg{padding:64px 32px}.empty-state-container.size-lg .empty-state-icon i{font-size:96px}.empty-state-container.size-lg .empty-state-title{font-size:2rem}.empty-state-container.size-lg .empty-state-message{font-size:1.125rem}.empty-state-container.align-left{align-items:flex-start;text-align:left}.empty-state-container.align-left .empty-state-content{align-items:flex-start}.empty-state-container.align-center{align-items:center;text-align:center}.empty-state-container.align-center .empty-state-content{align-items:center}.empty-state-container.align-right{align-items:flex-end;text-align:right}.empty-state-container.align-right .empty-state-content{align-items:flex-end}.empty-state-container.animated .empty-state-icon,.empty-state-container.animated .empty-state-image,.empty-state-container.animated .empty-state-illustration{animation:fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1), bob 4s ease-in-out infinite 0.8s}.empty-state-container.animated .empty-state-title{animation:fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both}.empty-state-container.animated .empty-state-message{animation:fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both}.empty-state-container.animated .empty-state-actions{animation:fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both}.empty-state-container:hover .empty-state-icon i,.empty-state-container:hover .empty-state-illustration ui-icon{transform:scale(1.05) translateY(-5px);filter:drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))}.empty-state-content{display:flex;flex-direction:column;align-items:center;max-width:100%;width:100%}.empty-state-icon{margin-bottom:24px}.empty-state-icon i{font-size:64px;color:var(--text-muted, #9ca3af);transition:color 0.3s ease}.type-error .empty-state-icon i{color:var(--color-danger, #ef4444)}.type-401 .empty-state-icon i{color:var(--color-primary, #8b5cf6);animation:fadeIn 1s ease-in-out infinite alternate}.type-403 .empty-state-icon i{color:var(--color-danger, #f43f5e)}.type-404 .empty-state-icon i{color:var(--color-warning, #f59e0b);animation:glitch 2.5s linear infinite alternate}.type-offline .empty-state-icon i{color:var(--text-muted, #64748b);animation:pulse-signal 2s ease-in-out infinite}.type-500 .empty-state-icon i{color:var(--color-danger, #ef4444);animation:glitch 0.5s linear infinite alternate;animation-delay:2s}.type-no-results .empty-state-icon i{color:var(--text-muted, #6b7280)}.type-coming-soon .empty-state-icon i{color:var(--color-success, #3dcd58)}.type-maintenance .empty-state-icon i{color:var(--color-warning, #f59e0b);animation:rotate-slow 6s linear infinite}.type-onboarding .empty-state-icon i{color:var(--color-primary, #10b981);animation:fadeInUp 1s ease-out}.type-accomplishment .empty-state-icon i,.type-success .empty-state-icon i{color:var(--color-success, #10b981);animation:popOut 1.5s ease-out infinite alternate}.type-paywall .empty-state-icon i{color:var(--color-warning-hover, #d97706);animation:bounce 2s infinite}.type-no-messages .empty-state-icon i{color:var(--color-danger, #ec4899)}.type-no-notifications .empty-state-icon i{color:var(--color-danger, #f43f5e)}.type-no-favorites .empty-state-icon i{color:var(--color-danger, #ef4444)}.type-429 .empty-state-icon i{color:var(--color-primary, #6366f1);animation:pulse-signal 2s infinite}.type-418 .empty-state-icon i{color:var(--color-primary, #7c3aed)}.empty-state-image{margin-bottom:24px;max-width:300px}.empty-state-image img{width:100%;height:auto;object-fit:contain;border-radius:8px}.size-lg .empty-state-image{max-width:400px}.empty-state-illustration{margin-bottom:24px;position:relative;display:flex;justify-content:center;align-items:center}.empty-state-illustration .illustration-placeholder{width:120px;height:120px;background:linear-gradient(135deg, rgba(var(--color-success-rgb, 61, 205, 88), 0.1), rgba(var(--color-primary-rgb, 59, 130, 246), 0.1));border-radius:30% 70% 70% 30%/30% 30% 70% 70%;display:flex;align-items:center;justify-content:center;animation:morph 8s ease-in-out infinite;position:relative;overflow:hidden}.empty-state-illustration .illustration-placeholder i{font-size:48px;color:var(--primary-color, var(--color-primary, #10b981));z-index:2}.empty-state-illustration .illustration-placeholder .illustration-glow{position:absolute;width:100%;height:100%;background:radial-gradient(circle, rgba(var(--color-success-rgb, 61, 205, 88), 0.2) 0%, transparent 70%);animation:pulse 4s ease-in-out infinite}.empty-state-illustration img{max-width:100%;height:auto;border-radius:12px;animation:float 6s ease-in-out infinite}.empty-state-title{margin:0 0 12px 0;font-size:1.5rem;font-weight:600;color:var(--empty-state-title-color, var(--text-primary, #111827));line-height:1.3}.empty-state-message{margin:0 0 32px 0;font-size:1rem;color:var(--empty-state-message-color, var(--text-muted, #6b7280));line-height:1.6;max-width:100%}.empty-state-actions{display:flex;flex-direction:column;gap:16px;width:100%;max-width:400px;margin-bottom:24px}.empty-state-actions .simple-actions,.empty-state-actions .complex-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.empty-state-search{display:flex;align-items:center;gap:12px;background:var(--ui-color-surface-soft, rgba(0, 0, 0, 0.03));border:1px solid var(--ui-color-border, var(--border-default, #e5e7eb));padding:8px 16px;border-radius:12px;margin-bottom:8px;width:100%;transition:all 0.2s}.empty-state-search:focus-within{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);background:var(--bg-primary, #ffffff)}.empty-state-search ui-icon{color:var(--text-muted, #6b7280)}.empty-state-search input{border:none;background:transparent;outline:none;font-size:0.9375rem;flex:1;color:inherit}.empty-state-timer{margin-bottom:16px;width:100%;text-align:center}.empty-state-timer .timer-text{font-size:0.85rem;color:var(--text-muted, #6b7280);font-weight:500;display:block;margin-bottom:8px}.empty-state-timer .timer-progress{height:4px;background:var(--bg-secondary, #f3f4f6);border-radius:2px;overflow:hidden}.empty-state-timer .timer-progress-bar{height:100%;background:var(--color-primary, #10b981);transition:width 1s linear}.empty-state-description{margin:-16px 0 32px 0;font-size:0.875rem;color:var(--text-muted, #9ca3af);max-width:80%;line-height:1.5}.action-button{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:8px;font-size:0.9375rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;white-space:nowrap}.action-button i{font-size:1rem}.action-button.primary{background:var(--color-primary, #10b981);color:var(--text-standard, #ffffff)}.action-button.primary:hover{background:var(--color-primary-hover, #2563eb);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3)}.action-button.primary:active{transform:translateY(0)}.action-button.primary.is-loading{opacity:0.8;cursor:wait;pointer-events:none}.action-button.primary.is-loading i{margin-right:8px}.action-button.secondary{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151);border:1px solid var(--border-default, #e5e7eb)}.action-button.secondary:hover{background:var(--bg-primary, #e5e7eb);border-color:var(--border-strong, #d1d5db)}.action-button.secondary:active{background:var(--bg-secondary, #d1d5db)}.action-button.text{background:transparent;color:var(--color-success, #3dcd58);padding:8px 16px}.action-button.text:hover{background:rgba(var(--color-success-rgb, 61, 205, 88), 0.1)}.action-button.text:active{background:rgba(var(--color-primary-rgb, 59, 130, 246), 0.15)}.size-sm .action-button{padding:8px 16px;font-size:0.875rem}.size-lg .action-button{padding:14px 28px;font-size:1rem}.empty-state-items{margin-bottom:24px;width:100%;max-width:400px}.items-title{margin:0 0 12px 0;font-size:0.875rem;font-weight:600;color:var(--text-muted, #6b7280);text-transform:uppercase;letter-spacing:0.05em}.items-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-primary, #f9fafb);border:1px solid var(--border-default, #e5e7eb);border-radius:8px;cursor:pointer;transition:all 0.2s ease}.item i{font-size:1rem;color:var(--text-muted, #6b7280);flex-shrink:0}.item span{font-size:0.9375rem;color:var(--text-secondary, #374151);flex:1}.item:hover{background:var(--bg-secondary, #f3f4f6);border-color:var(--border-strong, #d1d5db);transform:translateX(4px)}.item:active{background:var(--bg-primary, #e5e7eb)}.empty-state-back{align-self:flex-start;margin-bottom:24px}.back-button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:transparent;border:none;border-radius:6px;color:var(--text-muted, #6b7280);font-size:0.9375rem;cursor:pointer;transition:all 0.2s ease}.back-button i{font-size:0.875rem}.back-button:hover{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151)}.back-button:active{background:var(--bg-primary, #e5e7eb)}@keyframes fadeInUp{from{opacity:0;transform:translateY(40px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes glitch{0%{transform:translate(0)}2%{transform:translate(-2px, 1.5px)}4%{transform:translate(-2px, -1.5px)}6%{transform:translate(2px, 1.5px)}8%{transform:translate(2px, -1.5px)}10%{transform:translate(0)}100%{transform:translate(0)}}@keyframes pulse-signal{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.92)}}@keyframes rotate-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes morph{0%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}50%{border-radius:50% 50% 20% 80%/25% 80% 20% 75%}100%{border-radius:30% 70% 70% 30%/30% 30% 70% 70%}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes pulse{0%,100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.2);opacity:0.8}}.confetti-active{position:relative;overflow:hidden}.confetti-active::before,.confetti-active::after{content:"🎉";position:absolute;font-size:2rem;animation:popOut 1s ease-out forwards;pointer-events:none;z-index:10}.confetti-active::before{left:10%;top:20%;animation-delay:0.1s}.confetti-active::after{right:10%;top:30%;animation-delay:0.3s}@keyframes popOut{0%{transform:scale(0) rotate(0deg);opacity:0}50%{transform:scale(1.5) rotate(15deg);opacity:1}100%{transform:scale(1.2) rotate(0deg);opacity:0;transform:translateY(-50px)}}::slotted([slot=custom-content]){margin:16px 0}::slotted([slot=footer]){margin-top:24px}@media (max-width: 640px){.empty-state-container{padding:32px 16px}.empty-state-container.size-lg{padding:48px 20px}.empty-state-icon i{font-size:48px !important}.empty-state-image{max-width:200px !important}.empty-state-title{font-size:1.25rem !important}.empty-state-message{font-size:0.875rem !important}.action-button{width:100%;justify-content:center}.simple-actions,.complex-actions{flex-direction:column;width:100%}}`;
 
@@ -383,7 +383,7 @@ const EmptyState = class {
             padding: this.padding || undefined,
             maxWidth: this.maxWidth || undefined,
         };
-        return (h(Host, { key: '0f7a224ca36c6e2fcda778b134ed8d8d4396d9b6' }, h("div", { key: '6ac5efd99135e6484d84139250e84e8e22b7fedd', class: containerClasses, style: containerStyle }, this.renderBackButton(), h("div", { key: 'c8ab7670d312a8ea4e5e69b2331db1b6374476c4', class: "empty-state-content" }, this.renderIcon(), h("slot", { key: '11d5618957f52edc36c6db9370b630bf02ef58fc', name: "heading" }, headingToShow && h("h2", { key: '786051e59375b5e04cad426320fc768a0622cf82', class: "empty-state-title" }, headingToShow)), h("slot", { key: '11a7eb49b8e3eb457942125ad1512bfaf062228b', name: "message" }, messageToShow && h("p", { key: '7c74c4c3721f562ae616ee1992ab0782f81f6b3d', class: "empty-state-message" }, messageToShow)), this.description && (h("p", { key: 'a49d0e45e660f30a3af67c6db480cf2ce2a5717e', class: "empty-state-description" }, this.description)), h("slot", { key: '31d8ea03a88a1032c02fa6ae1bb511d1a239cd62', name: "custom-content" }), this.renderItems(), this.renderActions(), h("slot", { key: '20d487b415fe17ba94746fafd2bbf97dfa033b0d', name: "footer" })))));
+        return (h(Host, { key: 'b4aba509d0fe262be1254d1c1f06095408711739' }, h("div", { key: '747641713fd40e4ddadfb5fcfb2e2df24bd9e0b0', class: containerClasses, style: containerStyle }, this.renderBackButton(), h("div", { key: '566cc5184652308e834deb2b1866247c979fa4f7', class: "empty-state-content" }, this.renderIcon(), h("slot", { key: '35a6d4f00def6f8549084ad484ac212097256679', name: "heading" }, headingToShow && h("h2", { key: 'a7b7aafd7a02a02042540d52bd2d3e2eecbdfcf4', class: "empty-state-title" }, headingToShow)), h("slot", { key: 'a53e7b77686f392eaf0d9eb2569fc896f9e5b216', name: "message" }, messageToShow && h("p", { key: '1f84852f31494063d0bcdb9eb3e025ffda729e0a', class: "empty-state-message" }, messageToShow)), this.description && (h("p", { key: '96ef197c70889b83be57c26f7e174fcceba5d44c', class: "empty-state-description" }, this.description)), h("slot", { key: '2707adbdaaca80e83c6318c1bab0b9fdaaa5f4cd', name: "custom-content" }), this.renderItems(), this.renderActions(), h("slot", { key: 'fb8dfa1d372bffb367967f13e711954334ec304a', name: "footer" })))));
     }
     static get watchers() { return {
         "retryDelay": [{

package/dist/esm/ui-fab-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Dqu2zaH1.js';
 
 const fabItemCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:flex;align-items:center;position:relative}.fab-item-trigger{width:var(--ui-fab-action-size, 40px);height:var(--ui-fab-action-size, 40px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);outline:none;z-index:2}.fab-item-trigger:hover{transform:scale(1.1)}.fab-item-trigger:active{transform:scale(0.95)}:host(.is-disabled) .fab-item-trigger{opacity:0.5;cursor:not-allowed;pointer-events:none}.fab-item-label{position:absolute;background:rgba(0, 0, 0, 0.8);color:var(--text-standard, #ffffff);padding:4px 10px;border-radius:6px;font-size:13px;font-weight:500;white-space:nowrap;pointer-events:none;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);right:calc(100% + 12px);opacity:1;transition:opacity 0.2s}:host-context(ui-fab.pos-bottom-left) .fab-item-label,:host-context(ui-fab.pos-top-left) .fab-item-label{right:auto;left:calc(100% + 12px)}.spinner{width:20px;height:20px;animation:rotate 2s linear infinite}.spinner .spinner-circle{stroke-dasharray:1, 200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}`;
 
@@ -29,7 +29,7 @@ const FabItem = class {
     //   }
     // }
     render() {
-        return (h(Host, { key: '7551f6761b90f6ead01bdd37d5f07f6277c867cc', class: { 'is-disabled': this.disabled, 'is-loading': this.loading } }, this.label && h("div", { key: 'fe90271cf5bb4443b54c01b82274c6e60686766a', class: "fab-item-label", "aria-hidden": "true" }, this.label), h("ui-button", { key: 'da7aef396488d1c527dce3ec6559e36b78df0505', variant: "primary", shape: "circle", class: "fab-item-trigger", disabled: this.disabled || this.loading, loading: this.loading, onClick: this.handleClick, ariaLabel: this.tooltip || this.label || this.icon, title: this.tooltip, icon: this.icon, iconOnly: true, size: "sm" }, !this.icon && h("slot", { key: 'a59d4c4a925bcb81ab54d305c7310095a24160a2', name: "icon" }))));
+        return (h(Host, { key: '54c62f80c138da459a191d66095f74ca208dd4be', class: { 'is-disabled': this.disabled, 'is-loading': this.loading } }, this.label && h("div", { key: 'a5a06749f3368721f8f81a37f965509a29cc8cb2', class: "fab-item-label", "aria-hidden": "true" }, this.label), h("ui-button", { key: '03acbcd688a921458b0a524c4c9df0def0a9dabf', variant: "primary", shape: "circle", class: "fab-item-trigger", disabled: this.disabled || this.loading, loading: this.loading, onClick: this.handleClick, ariaLabel: this.tooltip || this.label || this.icon, title: this.tooltip, icon: this.icon, iconOnly: true, size: "sm" }, !this.icon && h("slot", { key: '2c39c767a078482a292e0ab6ca394896f491a03c', name: "icon" }))));
     }
 };
 FabItem.style = fabItemCss();

package/dist/esm/ui-fab.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DUsoYu9r.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Dqu2zaH1.js';
 
-const fabCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{--ui-fab-bg:var(--ui-primary, var(--color-success, #3dcd58));--ui-fab-color:var(--text-standard, #ffffff);--ui-fab-hover-bg:var(--ui-primary-hover, #2ebd4a);--ui-fab-size:56px;--ui-fab-radius:50%;--ui-fab-shadow:0 4px 12px rgba(0, 0, 0, 0.15);--ui-fab-zindex:1000;--ui-fab-gap:16px;--ui-fab-action-size:40px;--ui-fab-transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);position:fixed;z-index:var(--ui-fab-zindex);display:flex;transition:transform 0.3s ease, opacity 0.3s ease;pointer-events:none;}:host(.is-hidden){opacity:0;transform:scale(0.8);pointer-events:none}:host(.pos-bottom-right){inset-block-end:var(--fab-offset-y);inset-inline-end:var(--fab-offset-x)}:host(.pos-bottom-left){inset-block-end:var(--fab-offset-y);inset-inline-start:var(--fab-offset-x)}:host(.pos-top-right){inset-block-start:var(--fab-offset-y);inset-inline-end:var(--fab-offset-x)}:host(.pos-top-left){inset-block-start:var(--fab-offset-y);inset-inline-start:var(--fab-offset-x)}:host(.pos-bottom-center){inset-block-end:var(--fab-offset-y);inset-inline-start:50%;transform:translateX(-50%)}:host(.pos-top-center){inset-block-start:var(--fab-offset-y);inset-inline-start:50%;transform:translateX(-50%)}:host(.pos-center-right){inset-block-start:50%;inset-inline-end:var(--fab-offset-x);transform:translateY(-50%)}:host(.pos-center-left){inset-block-start:50%;inset-inline-start:var(--fab-offset-x);transform:translateY(-50%)}:host(.size-mini){--ui-fab-size:40px}:host(.size-sm){--ui-fab-size:48px}:host(.size-md){--ui-fab-size:56px}:host(.size-lg){--ui-fab-size:64px}:host(.is-extended){--ui-fab-radius:28px}:host(.is-extended) .fab-trigger{width:auto;padding-inline:20px}:host(.variant-secondary){--ui-fab-bg:var(--color-primary, #6b7280);--ui-fab-hover-bg:var(--color-primary, #4b5563)}:host(.variant-tertiary){--ui-fab-bg:var(--bg-primary, #1f2937);--ui-fab-hover-bg:var(--bg-secondary, #111827)}:host(.variant-surface){--ui-fab-bg:var(--bg-primary, var(--text-standard, #ffffff));--ui-fab-color:var(--bg-secondary, var(--text-primary, #111827));--ui-fab-hover-bg:var(--bg-primary, #f9fafb)}:host(.variant-success){--ui-fab-bg:var(--color-success, #10b981);--ui-fab-hover-bg:var(--color-success-hover, #059669)}:host(.variant-danger){--ui-fab-bg:var(--color-danger, #ef4444);--ui-fab-hover-bg:var(--color-danger-hover, #dc2626)}:host(.variant-warning){--ui-fab-bg:var(--color-warning, #f59e0b);--ui-fab-hover-bg:var(--color-warning-hover, #d97706)}:host(.variant-info){--ui-fab-bg:var(--color-primary, #10b981);--ui-fab-hover-bg:var(--color-primary-hover, #2563eb)}.fab-wrapper{display:flex;pointer-events:auto;align-items:center;justify-content:center;position:relative}:host(.dir-up) .fab-wrapper{flex-direction:column-reverse}:host(.dir-down) .fab-wrapper{flex-direction:column}:host(.dir-left) .fab-wrapper{flex-direction:row-reverse}:host(.dir-right) .fab-wrapper{flex-direction:row}:host(.dir-radial) .fab-wrapper{flex-direction:column;}.fab-trigger{width:var(--ui-fab-size);height:var(--ui-fab-size);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:var(--ui-fab-transition);outline:none;z-index:2;font-family:inherit}.fab-trigger:hover{transform:translateY(-2px)}.fab-trigger:active{transform:translateY(0) scale(0.95)}:host(.is-disabled) .fab-trigger{opacity:0.6;cursor:not-allowed;pointer-events:none}.fab-content{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;height:100%}.fab-icon{transition:transform 0.3s ease, opacity 0.3s ease;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.close-icon{opacity:0;transform:translate(-50%, -50%) rotate(-90deg)}:host(.is-open) .primary-icon{opacity:0;transform:translate(-50%, -50%) rotate(90deg)}:host(.is-open) .close-icon{opacity:1;transform:translate(-50%, -50%) rotate(0deg)}.fab-label{font-weight:500;font-size:14px;letter-spacing:0.5px;white-space:nowrap}:host(.is-extended) .fab-icon{position:relative;transform:none;top:0;left:0}:host(.is-extended.is-open) .primary-icon{transform:rotate(90deg)}.fab-actions{display:flex;gap:12px;visibility:hidden;z-index:1;padding:var(--ui-fab-gap);position:relative}:host(.dir-up) .fab-actions{flex-direction:column-reverse;margin-block-end:-16px}:host(.dir-down) .fab-actions{flex-direction:column;margin-block-start:-16px}:host(.dir-left) .fab-actions{flex-direction:row-reverse;margin-inline-end:-16px}:host(.dir-right) .fab-actions{flex-direction:row;margin-inline-start:-16px}:host(.dir-radial) .fab-actions{display:block;position:absolute;left:50%;top:50%;width:0;height:0;padding:0}:host(.is-open) .fab-actions{visibility:visible}::slotted(ui-fab-item){opacity:0;transform:scale(0.5);transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);pointer-events:none}:host(.is-open) ::slotted(ui-fab-item){opacity:1;transform:scale(1);pointer-events:auto}:host(.dir-radial) ::slotted(ui-fab-item){position:absolute;inset-block-start:-20px;inset-inline-start:-20px}:host(.dir-radial.is-open) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) scale(1) !important}:host(.is-open) ::slotted(ui-fab-item:nth-child(1)){transition-delay:40ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(2)){transition-delay:80ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(3)){transition-delay:120ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(4)){transition-delay:160ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(5)){transition-delay:200ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(6)){transition-delay:240ms}:host(.anim-fade) ::slotted(ui-fab-item){transform:scale(1)}:host(.anim-slide-up) ::slotted(ui-fab-item){transform:translateY(20px)}:host(.is-open.anim-slide-up) ::slotted(ui-fab-item){transform:translateY(0)}:host(.anim-slide-down) ::slotted(ui-fab-item){transform:translateY(-20px)}:host(.is-open.anim-slide-down) ::slotted(ui-fab-item){transform:translateY(0)}:host(.anim-slide-left) ::slotted(ui-fab-item){transform:translateX(20px)}:host(.is-open.anim-slide-left) ::slotted(ui-fab-item){transform:translateX(0)}:host(.anim-slide-right) ::slotted(ui-fab-item){transform:translateX(-20px)}:host(.is-open.anim-slide-right) ::slotted(ui-fab-item){transform:translateX(0)}:host(.anim-rotate) ::slotted(ui-fab-item){transform:rotate(45deg) scale(0.5)}:host(.is-open.anim-rotate) ::slotted(ui-fab-item){transform:rotate(0deg) scale(1)}.spinner{width:24px;height:24px;animation:rotate 2s linear infinite}.spinner-circle{stroke-dasharray:1, 200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}.fab-backdrop{position:fixed;inset:0;background:rgba(255, 255, 255, 0.7);backdrop-filter:blur(4px);z-index:0;pointer-events:auto}.fab-panel{position:absolute;background:var(--ui-surface, var(--bg-primary, #ffffff));border-radius:16px;box-shadow:0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);display:flex;flex-direction:column;min-width:200px;opacity:0;pointer-events:none;transform:scale(0.95);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);z-index:10;overflow:hidden;border:1px solid rgba(255, 255, 255, 0.1);backdrop-filter:blur(8px)}.fab-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(0, 0, 0, 0.05);background:rgba(0, 0, 0, 0.02)}.fab-panel-title{font-weight:700;font-size:14px;color:var(--text-primary, #1e293b);letter-spacing:-0.01em}.fab-panel-close{background:transparent;border:none;padding:4px;cursor:pointer;color:var(--text-muted, #64748b);display:flex;align-items:center;border-radius:6px;transition:all 0.2s}.fab-panel-close:hover{background:rgba(0, 0, 0, 0.05);color:var(--color-danger, #ef4444)}.fab-panel-body{flex:1;padding:16px;overflow-y:auto;min-height:0;scrollbar-width:thin}.fab-panel-body::-webkit-scrollbar{width:6px}.fab-panel-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;background:rgba(0, 0, 0, 0.015);border-top:1px solid rgba(0, 0, 0, 0.05)}:host(.is-open) .fab-panel{opacity:1;pointer-events:auto;transform:scale(1)}:host(.pos-bottom-right) .fab-panel{inset-block-end:calc(100% + 12px);inset-inline-end:0;transform-origin:bottom right}:host(.pos-bottom-left) .fab-panel{inset-block-end:calc(100% + 12px);inset-inline-start:0;transform-origin:bottom left}:host(.pos-bottom-center) .fab-panel{inset-block-end:calc(100% + 12px);inset-inline-start:50%;transform:translateX(-50%) scale(0.95);transform-origin:bottom center}:host(.pos-bottom-center.is-open) .fab-panel{transform:translateX(-50%) scale(1)}:host(.pos-top-right) .fab-panel{inset-block-start:calc(100% + 12px);inset-inline-end:0;transform-origin:top right}:host(.pos-top-left) .fab-panel{inset-block-start:calc(100% + 12px);inset-inline-start:0;transform-origin:top left}:host(.pos-top-center) .fab-panel{inset-block-start:calc(100% + 12px);inset-inline-start:50%;transform:translateX(-50%) scale(0.95);transform-origin:top center}:host(.pos-top-center.is-open) .fab-panel{transform:translateX(-50%) scale(1)}:host(.pos-center-right) .fab-panel{inset-inline-end:calc(100% + 12px);inset-block-start:50%;transform:translateY(-50%) scale(0.95);transform-origin:center right}:host(.pos-center-right.is-open) .fab-panel{transform:translateY(-50%) scale(1)}:host(.pos-center-left) .fab-panel{inset-inline-start:calc(100% + 12px);inset-block-start:50%;transform:translateY(-50%) scale(0.95);transform-origin:center left}:host(.pos-center-left.is-open) .fab-panel{transform:translateY(-50%) scale(1)}`;
+const fabCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{--ui-fab-bg:var(--ui-primary, var(--color-success, #3dcd58));--ui-fab-color:var(--text-standard, #ffffff);--ui-fab-hover-bg:var(--ui-primary-hover, #2ebd4a);--ui-fab-size:56px;--ui-fab-radius:50%;--ui-fab-shadow:0 4px 12px rgba(0, 0, 0, 0.15);--ui-fab-zindex:1000;--ui-fab-gap:16px;--ui-fab-action-size:40px;--ui-fab-transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);position:fixed;z-index:var(--ui-fab-zindex);display:flex;transition:transform 0.3s ease, opacity 0.3s ease;pointer-events:none;}:host(.is-hidden){opacity:0;transform:scale(0.8);pointer-events:none}:host(.pos-bottom-right){inset-block-end:var(--fab-offset-y);inset-inline-end:var(--fab-offset-x)}:host(.pos-bottom-left){inset-block-end:var(--fab-offset-y);inset-inline-start:var(--fab-offset-x)}:host(.pos-top-right){inset-block-start:var(--fab-offset-y);inset-inline-end:var(--fab-offset-x)}:host(.pos-top-left){inset-block-start:var(--fab-offset-y);inset-inline-start:var(--fab-offset-x)}:host(.pos-bottom-center){inset-block-end:var(--fab-offset-y);inset-inline-start:50%;transform:translateX(-50%)}:host(.pos-top-center){inset-block-start:var(--fab-offset-y);inset-inline-start:50%;transform:translateX(-50%)}:host(.pos-center-right){inset-block-start:50%;inset-inline-end:var(--fab-offset-x);transform:translateY(-50%)}:host(.pos-center-left){inset-block-start:50%;inset-inline-start:var(--fab-offset-x);transform:translateY(-50%)}:host(.size-mini){--ui-fab-size:40px}:host(.size-sm){--ui-fab-size:48px}:host(.size-md){--ui-fab-size:56px}:host(.size-lg){--ui-fab-size:64px}:host(.is-extended){--ui-fab-radius:28px}:host(.is-extended) .fab-trigger{width:auto;padding-inline:20px}:host(.variant-secondary){--ui-fab-bg:var(--color-primary, #6b7280);--ui-fab-hover-bg:var(--color-primary, #4b5563)}:host(.variant-tertiary){--ui-fab-bg:var(--bg-primary, #1f2937);--ui-fab-hover-bg:var(--bg-secondary, #111827)}:host(.variant-surface){--ui-fab-bg:var(--bg-primary, var(--text-standard, #ffffff));--ui-fab-color:var(--bg-secondary, var(--text-primary, #111827));--ui-fab-hover-bg:var(--bg-primary, #f9fafb)}:host(.variant-success){--ui-fab-bg:var(--color-success, #10b981);--ui-fab-hover-bg:var(--color-success-hover, #059669)}:host(.variant-danger){--ui-fab-bg:var(--color-danger, #ef4444);--ui-fab-hover-bg:var(--color-danger-hover, #dc2626)}:host(.variant-warning){--ui-fab-bg:var(--color-warning, #f59e0b);--ui-fab-hover-bg:var(--color-warning-hover, #d97706)}:host(.variant-info){--ui-fab-bg:var(--color-primary, #10b981);--ui-fab-hover-bg:var(--color-primary-hover, #2563eb)}.fab-wrapper{display:flex;pointer-events:auto;align-items:center;justify-content:center;position:relative}:host(.dir-top) .fab-wrapper{flex-direction:column-reverse}:host(.dir-bottom) .fab-wrapper{flex-direction:column}:host(.dir-left) .fab-wrapper{flex-direction:row-reverse}:host(.dir-right) .fab-wrapper{flex-direction:row}:host(.dir-radial) .fab-wrapper{flex-direction:column;}.fab-trigger{width:var(--ui-fab-size);height:var(--ui-fab-size);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:var(--ui-fab-transition);outline:none;z-index:2;font-family:inherit}.fab-trigger:hover{transform:translateY(-2px)}.fab-trigger:active{transform:translateY(0) scale(0.95)}:host(.is-disabled) .fab-trigger{opacity:0.6;cursor:not-allowed;pointer-events:none}.fab-content{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;height:100%}.fab-icon{transition:transform 0.3s ease, opacity 0.3s ease;display:flex;align-items:center;justify-content:center;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.close-icon{opacity:0;transform:translate(-50%, -50%) rotate(-90deg)}:host(.is-open) .primary-icon{opacity:0;transform:translate(-50%, -50%) rotate(90deg)}:host(.is-open) .close-icon{opacity:1;transform:translate(-50%, -50%) rotate(0deg)}.fab-label{font-weight:500;font-size:14px;letter-spacing:0.5px;white-space:nowrap}:host(.is-extended) .fab-icon{position:relative;transform:none;top:0;left:0}:host(.is-extended.is-open) .primary-icon{transform:rotate(90deg)}.fab-actions{display:flex;gap:12px;visibility:hidden;z-index:1;padding:var(--ui-fab-gap);position:relative}:host(.dir-top) .fab-actions{flex-direction:column-reverse;margin-block-end:-16px}:host(.dir-bottom) .fab-actions{flex-direction:column;margin-block-start:-16px}:host(.dir-left) .fab-actions{flex-direction:row-reverse;margin-inline-end:-16px}:host(.dir-right) .fab-actions{flex-direction:row;margin-inline-start:-16px}:host(.dir-radial) .fab-actions{display:block;position:absolute;left:50%;top:50%;width:0;height:0;padding:0}:host(.is-open) .fab-actions{visibility:visible}::slotted(ui-fab-item){opacity:0;transform:scale(0.5);transition:transform 0.24s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s ease;pointer-events:none;transform-origin:center}:host(.is-open) ::slotted(ui-fab-item){opacity:1;transform:scale(1);pointer-events:auto}:host(.dir-radial) ::slotted(ui-fab-item){position:absolute;inset-block-start:-20px;inset-inline-start:-20px;transform:translate(0, 0) scale(0.5)}:host(.dir-radial.is-open) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) scale(1) !important}:host(.is-open) ::slotted(ui-fab-item:nth-child(1)){transition-delay:40ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(2)){transition-delay:80ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(3)){transition-delay:120ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(4)){transition-delay:160ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(5)){transition-delay:200ms}:host(.is-open) ::slotted(ui-fab-item:nth-child(6)){transition-delay:240ms}:host(.anim-scale) ::slotted(ui-fab-item){transform:scale(0.35)}:host(.is-open.anim-scale) ::slotted(ui-fab-item){transform:scale(1)}:host(.anim-fade) ::slotted(ui-fab-item){transform:scale(1);opacity:0}:host(.is-open.anim-fade) ::slotted(ui-fab-item){transform:scale(1);opacity:1}:host(.anim-slide-up) ::slotted(ui-fab-item){transform:translateY(20px) scale(0.92)}:host(.is-open.anim-slide-up) ::slotted(ui-fab-item){transform:translateY(0) scale(1)}:host(.anim-slide-down) ::slotted(ui-fab-item){transform:translateY(-20px) scale(0.92)}:host(.is-open.anim-slide-down) ::slotted(ui-fab-item){transform:translateY(0) scale(1)}:host(.anim-slide-left) ::slotted(ui-fab-item){transform:translateX(20px) scale(0.92)}:host(.is-open.anim-slide-left) ::slotted(ui-fab-item){transform:translateX(0) scale(1)}:host(.anim-slide-right) ::slotted(ui-fab-item){transform:translateX(-20px) scale(0.92)}:host(.is-open.anim-slide-right) ::slotted(ui-fab-item){transform:translateX(0) scale(1)}:host(.anim-rotate) ::slotted(ui-fab-item){transform:rotate(-135deg) scale(0.35)}:host(.is-open.anim-rotate) ::slotted(ui-fab-item){transform:rotate(0deg) scale(1)}:host(.dir-radial.anim-fade) ::slotted(ui-fab-item){transform:translate(0, 0) scale(1)}:host(.dir-radial.is-open.anim-fade) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) scale(1) !important}:host(.dir-radial.anim-scale) ::slotted(ui-fab-item){transform:translate(calc(var(--radial-x, 0) * 0.45), calc(var(--radial-y, 0) * 0.45)) scale(0.35)}:host(.dir-radial.is-open.anim-scale) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) scale(1) !important}:host(.dir-radial.anim-slide-up) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), calc(var(--radial-y, 0) + 20px)) scale(0.92)}:host(.dir-radial.is-open.anim-slide-up) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) scale(1) !important}:host(.dir-radial.anim-slide-down) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), calc(var(--radial-y, 0) - 20px)) scale(0.92)}:host(.dir-radial.is-open.anim-slide-down) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) scale(1) !important}:host(.dir-radial.anim-slide-left) ::slotted(ui-fab-item){transform:translate(calc(var(--radial-x, 0) + 20px), var(--radial-y, 0)) scale(0.92)}:host(.dir-radial.is-open.anim-slide-left) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) scale(1) !important}:host(.dir-radial.anim-slide-right) ::slotted(ui-fab-item){transform:translate(calc(var(--radial-x, 0) - 20px), var(--radial-y, 0)) scale(0.92)}:host(.dir-radial.is-open.anim-slide-right) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) scale(1) !important}:host(.dir-radial.anim-rotate) ::slotted(ui-fab-item){transform:translate(calc(var(--radial-x, 0) * 0.65), calc(var(--radial-y, 0) * 0.65)) rotate(-135deg) scale(0.35)}:host(.dir-radial.is-open.anim-rotate) ::slotted(ui-fab-item){transform:translate(var(--radial-x, 0), var(--radial-y, 0)) rotate(0deg) scale(1) !important}.spinner{width:24px;height:24px;animation:rotate 2s linear infinite}.spinner-circle{stroke-dasharray:1, 200;stroke-dashoffset:0;animation:dash 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}.fab-backdrop{position:fixed;inset:0;background:rgba(255, 255, 255, 0.7);backdrop-filter:blur(4px);z-index:0;pointer-events:auto}.fab-panel{position:absolute;background:var(--ui-surface, var(--bg-primary, #ffffff));border-radius:16px;box-shadow:0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);display:flex;flex-direction:column;min-width:200px;opacity:0;pointer-events:none;transform:scale(0.95);transition:opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);z-index:10;overflow:hidden;border:1px solid rgba(255, 255, 255, 0.1);backdrop-filter:blur(8px)}.fab-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(0, 0, 0, 0.05);background:rgba(0, 0, 0, 0.02)}.fab-panel-title{font-weight:700;font-size:14px;color:var(--text-primary, #1e293b);letter-spacing:-0.01em}.fab-panel-close{background:transparent;border:none;padding:4px;cursor:pointer;color:var(--text-muted, #64748b);display:flex;align-items:center;border-radius:6px;transition:all 0.2s}.fab-panel-close:hover{background:rgba(0, 0, 0, 0.05);color:var(--color-danger, #ef4444)}.fab-panel-body{flex:1;padding:16px;overflow-y:auto;min-height:0;scrollbar-width:thin}.fab-panel-body::-webkit-scrollbar{width:6px}.fab-panel-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;background:rgba(0, 0, 0, 0.015);border-top:1px solid rgba(0, 0, 0, 0.05)}:host(.is-open) .fab-panel{opacity:1;pointer-events:auto;transform:scale(1)}:host(.pos-bottom-right) .fab-panel{inset-block-end:calc(100% + 12px);inset-inline-end:0;transform-origin:bottom right}:host(.pos-bottom-left) .fab-panel{inset-block-end:calc(100% + 12px);inset-inline-start:0;transform-origin:bottom left}:host(.pos-bottom-center) .fab-panel{inset-block-end:calc(100% + 12px);inset-inline-start:50%;transform:translateX(-50%) scale(0.95);transform-origin:bottom center}:host(.pos-bottom-center.is-open) .fab-panel{transform:translateX(-50%) scale(1)}:host(.pos-top-right) .fab-panel{inset-block-start:calc(100% + 12px);inset-inline-end:0;transform-origin:top right}:host(.pos-top-left) .fab-panel{inset-block-start:calc(100% + 12px);inset-inline-start:0;transform-origin:top left}:host(.pos-top-center) .fab-panel{inset-block-start:calc(100% + 12px);inset-inline-start:50%;transform:translateX(-50%) scale(0.95);transform-origin:top center}:host(.pos-top-center.is-open) .fab-panel{transform:translateX(-50%) scale(1)}:host(.pos-center-right) .fab-panel{inset-inline-end:calc(100% + 12px);inset-block-start:50%;transform:translateY(-50%) scale(0.95);transform-origin:center right}:host(.pos-center-right.is-open) .fab-panel{transform:translateY(-50%) scale(1)}:host(.pos-center-left) .fab-panel{inset-inline-start:calc(100% + 12px);inset-block-start:50%;transform:translateY(-50%) scale(0.95);transform-origin:center left}:host(.pos-center-left.is-open) .fab-panel{transform:translateY(-50%) scale(1)}`;
 
 const Fab = class {
     constructor(hostRef) {
@@ -255,14 +255,14 @@ const Fab = class {
             '--fab-offset-y': `${this.currentY}px`,
             'z-index': this.zIndex.toString()
         };
-        return (h(Host, { key: '7e6f5d73427366ff17f1f5e65bd17f6835098b63', class: hostClasses, style: hostStyles }, this.backdrop && this.internalOpen && (h("div", { key: 'f1256c22cd5f454ca9d17c3ebd30c0cdf541b491', class: "fab-backdrop", onClick: this.handleBackdropClick })), h("div", { key: 'c6772712b949c61127a52722a7e0d2a85ec09f06', class: "fab-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, isSpeedDial && (h("div", { key: '0398eb0d055bb156268bcb3af06ca48c89b894a3', class: "fab-actions", "aria-hidden": !this.internalOpen ? 'true' : 'false' }, h("slot", { key: '5cd5d9f5bc34719f89645cda401eb6d85db11449', name: "actions" }))), this.panel && (h("div", { key: 'd9075d5a11d5c4d0394e4d637f09f24dc03870af', class: {
+        return (h(Host, { key: '2056e5c41d3a6ebe204bbca982113ec8ae5c0dfa', class: hostClasses, style: hostStyles }, this.backdrop && this.internalOpen && (h("div", { key: 'd0993a33075927b666a925757291856f63d71eb1', class: "fab-backdrop", onClick: this.handleBackdropClick })), h("div", { key: '1d69ed0fc6c04e402b7dfd341baff775223f9128', class: "fab-wrapper", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, isSpeedDial && (h("div", { key: '717016c38e78d1ef9c94aef1315282283444498c', class: "fab-actions", "aria-hidden": !this.internalOpen ? 'true' : 'false' }, h("slot", { key: 'b717c5c2675a521c69d5cdcb11fe1cfd9cec06b0', name: "actions" }))), this.panel && (h("div", { key: 'adfc6178e7902576e516ba90b0c1edad89156d50', class: {
                 'fab-panel': true,
                 'has-header': !!this.panelTitle
             }, role: "dialog", "aria-hidden": !this.internalOpen ? 'true' : 'false', style: {
                 width: this.panelWidth,
                 height: this.panelHeight,
                 maxHeight: this.panelMaxHeight
-            } }, this.panelTitle && (h("div", { key: '3becbad472d14e38d2b3ab20e2ff4c34e0269e0f', class: "fab-panel-header" }, h("span", { key: 'b140b40024a609232de0a763654d03dd0f225a9b', class: "fab-panel-title" }, this.panelTitle), h("ui-button", { key: 'e72642cfa211273ef540eab5e293e950c0180415', variant: "ghost", class: "fab-panel-close", onClick: () => this.closeFab(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" }))), h("div", { key: 'f8006eb878ba30e0711f74633b4cd6e85c9f41bb', class: "fab-panel-body" }, h("slot", { key: '35933e69377366b5405245f7f32df3201390066d', name: "panel" })), h("div", { key: '4332e87ae404c1cd4d4a5799f1f25d8a430df709', class: "fab-panel-footer" }, h("slot", { key: '7dbbc44576c425495dd7cd8ba53f93a9b7ff1d6a', name: "panel-footer" })))), h("ui-button", { key: 'e0459872b67bac7714d6eef306cf232253f3bfd1', variant: this.variant, shape: this.type === 'extended' || (this.label && this.type !== 'speed-dial') ? 'rounded' : 'circle', class: "fab-trigger", disabled: this.disabled || this.loading, loading: this.loading, ariaLabel: this.label || 'Floating Action Button', onClick: this.handleClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, label: isExtended && this.label ? this.label : undefined, icon: this.icon, iconOnly: !isExtended, size: this.size === 'mini' ? 'sm' : (this.size === 'lg' ? 'lg' : 'md') }, isSpeedDial && this.toggle && this.internalOpen && (h("ui-icon", { key: 'c001fc5d8906bb8aadab821856f181fa204e994a', slot: "icon", class: "fab-icon close-icon", name: "x", size: this.size === 'mini' ? '18' : '24' })), !this.icon && !isExtended && h("slot", { key: '73458b1312ff61bcf62fb97bf076c0684389cc57', name: "trigger" })))));
+            } }, this.panelTitle && (h("div", { key: 'd0b056953d16bd6dcce7ac78d9153602687a6497', class: "fab-panel-header" }, h("span", { key: '0b390c0ce66e4d34a197d432e152314e3116412c', class: "fab-panel-title" }, this.panelTitle), h("ui-button", { key: 'f364d10c53e88e80362f275d971e105cfa627d4e', variant: "ghost", class: "fab-panel-close", onClick: () => this.closeFab(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" }))), h("div", { key: 'eca3d32bee8cdec393515d22987467c199f719ba', class: "fab-panel-body" }, h("slot", { key: '4232e7d5a218c75adc0db989f77751461ad0e2b4', name: "panel" })), h("div", { key: 'f072a59999d57c18ab911b6c845403771ca50a85', class: "fab-panel-footer" }, h("slot", { key: 'e952417e54ec61d9fe7e061bdafe0ffcf58d9a34', name: "panel-footer" })))), h("ui-button", { key: '0356b74a36eaf2cd3352bf430ce62077a7f3f0fa', variant: this.variant, shape: this.type === 'extended' || (this.label && this.type !== 'speed-dial') ? 'rounded' : 'circle', class: "fab-trigger", disabled: this.disabled || this.loading, loading: this.loading, ariaLabel: this.label || 'Floating Action Button', onClick: this.handleClick, onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerUp, label: isExtended && this.label ? this.label : undefined, icon: this.icon, iconOnly: !isExtended, size: this.size === 'mini' ? 'sm' : (this.size === 'lg' ? 'lg' : 'md') }, isSpeedDial && this.toggle && this.internalOpen && (h("ui-icon", { key: 'e5362af2ca1dfa33b0a87b598dc45ac70ccc5316', slot: "icon", class: "fab-icon close-icon", name: "x", size: this.size === 'mini' ? '18' : '24' })), !this.icon && !isExtended && h("slot", { key: '4e4f5c1eff9645abf60baba9a26e5564d6532741', name: "trigger" })))));
     }
     static get watchers() { return {
         "isExpanded": [{