atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/dropdown/dropdown.css

@@ -33,12 +33,12 @@
   --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-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);
   /* Trigger border-radius tokens */
@@ -46,6 +46,24 @@
   --dd-radius-md: 10px;
 }
 
+/* Dark mode overrides */
+.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;
@@ -134,6 +152,30 @@
 }
 
 /* Sizes */
+.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;
@@ -158,6 +200,30 @@
   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;
+}
+
 /* Shapes */
 .dropdown-shape-square .dropdown-trigger,
 .dropdown-shape-square .dropdown-menu {
@@ -332,6 +398,8 @@
   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 {
@@ -348,9 +416,16 @@
     transform: translateY(0) scale(1);
   }
 }
-.dropdown-menu-top {
+.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);
 }
 
@@ -573,6 +648,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   flex-shrink: 0;
 }
 
@@ -844,9 +920,16 @@
   justify-content: center;
   transition: var(--dd-transition);
 }
-.dropdown-select-all .dropdown-checkbox.checked {
+.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;
 }
 
 /* Skeleton State */
@@ -931,6 +1014,16 @@
   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;
 }

package/dist/collection/components/dropdown/dropdown.js

@@ -155,7 +155,9 @@ export class Dropdown {
     searchDebounce;
     menuElement;
     rafId = null;
+    deferredPositionRafId = null;
     isPortaled = false;
+    lastWheelTimestamp = 0;
     handleDocumentClick = (event) => {
         if (!this.isOpen)
             return;
@@ -251,20 +253,19 @@ export class Dropdown {
         }
     }
     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);
@@ -487,9 +488,19 @@ export class Dropdown {
             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)
@@ -548,11 +559,35 @@ export class Dropdown {
         };
         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;
@@ -563,6 +598,20 @@ export class Dropdown {
             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 {};
@@ -596,12 +645,20 @@ export class Dropdown {
         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) {
@@ -610,15 +667,7 @@ export class Dropdown {
                 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',
@@ -649,11 +698,13 @@ export class Dropdown {
         }
         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);
@@ -663,16 +714,27 @@ export class Dropdown {
             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) {
@@ -692,7 +754,7 @@ export class Dropdown {
             this.menuLeft = nextLeft;
             this.menuTop = nextTop;
             this.computedMenuWidth = triggerWidth;
-            this.dropdownPosition = finalPlacement;
+            this.dropdownPosition = (finalPlacement === 'top' ? 'top' : 'bottom');
             this.menuMaxHeight = nextMaxHeight;
         }
     }
@@ -955,7 +1017,7 @@ export class Dropdown {
                 '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 => {
@@ -1023,14 +1085,18 @@ export class Dropdown {
     }
     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);

package/dist/collection/components/empty-state/empty-state.js

@@ -372,7 +372,7 @@ export class EmptyState {
             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 is() { return "ui-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/fab/fab.css

@@ -168,11 +168,11 @@
 }
 
 /* Directions */
-:host(.dir-up) .fab-wrapper {
+:host(.dir-top) .fab-wrapper {
   flex-direction: column-reverse;
 }
 
-:host(.dir-down) .fab-wrapper {
+:host(.dir-bottom) .fab-wrapper {
   flex-direction: column;
 }
 
@@ -280,12 +280,12 @@
   position: relative;
 }
 
-:host(.dir-up) .fab-actions {
+:host(.dir-top) .fab-actions {
   flex-direction: column-reverse;
   margin-block-end: -16px;
 }
 
-:host(.dir-down) .fab-actions {
+:host(.dir-bottom) .fab-actions {
   flex-direction: column;
   margin-block-start: -16px;
 }
@@ -314,12 +314,13 @@
   visibility: visible;
 }
 
-/* Animations handled generically with scaled opacity */
+/* Base action animation state */
 ::slotted(ui-fab-item) {
   opacity: 0;
   transform: scale(0.5);
-  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  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) {
@@ -334,6 +335,7 @@
   inset-block-start: -20px;
   /* half of action size to center */
   inset-inline-start: -20px;
+  transform: translate(0, 0) scale(0.5);
 }
 
 :host(.dir-radial.is-open) ::slotted(ui-fab-item) {
@@ -366,50 +368,120 @@
 }
 
 /* Alternative Animations */
+: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);
+  transform: translateY(20px) scale(0.92);
 }
 
 :host(.is-open.anim-slide-up) ::slotted(ui-fab-item) {
-  transform: translateY(0);
+  transform: translateY(0) scale(1);
 }
 
 :host(.anim-slide-down) ::slotted(ui-fab-item) {
-  transform: translateY(-20px);
+  transform: translateY(-20px) scale(0.92);
 }
 
 :host(.is-open.anim-slide-down) ::slotted(ui-fab-item) {
-  transform: translateY(0);
+  transform: translateY(0) scale(1);
 }
 
 :host(.anim-slide-left) ::slotted(ui-fab-item) {
-  transform: translateX(20px);
+  transform: translateX(20px) scale(0.92);
 }
 
 :host(.is-open.anim-slide-left) ::slotted(ui-fab-item) {
-  transform: translateX(0);
+  transform: translateX(0) scale(1);
 }
 
 :host(.anim-slide-right) ::slotted(ui-fab-item) {
-  transform: translateX(-20px);
+  transform: translateX(-20px) scale(0.92);
 }
 
 :host(.is-open.anim-slide-right) ::slotted(ui-fab-item) {
-  transform: translateX(0);
+  transform: translateX(0) scale(1);
 }
 
 :host(.anim-rotate) ::slotted(ui-fab-item) {
-  transform: rotate(45deg) scale(0.5);
+  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 */
 .spinner {
   width: 24px;

package/dist/collection/components/fab/fab.js

@@ -244,14 +244,14 @@ export class Fab {
             '--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 is() { return "ui-fab"; }
     static get encapsulation() { return "shadow"; }
@@ -372,7 +372,7 @@ export class Fab {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",

package/dist/collection/components/fab-item/fab-item.js

@@ -22,7 +22,7 @@ export class FabItem {
     //   }
     // }
     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" }))));
     }
     static get is() { return "ui-fab-item"; }
     static get encapsulation() { return "shadow"; }