atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/meter-group/meter-group.css

@@ -22,6 +22,11 @@
   border-width: 0 !important;
 }
 
+:host {
+  display: block;
+  width: 100%;
+}
+
 .meter-group {
   display: flex;
   flex-direction: column;

package/dist/collection/components/meter-group/meter-group.js

@@ -134,7 +134,8 @@ export class MeterGroup {
             const percentage = this.getPercentage(item.value);
             const color = item.color || this.getDefaultColor(index);
             return (h("div", { class: "meter-segment", style: {
-                    [this.orientation === 'horizontal' ? 'width' : 'height']: `${percentage}%`,
+                    width: this.orientation === 'horizontal' ? `${percentage}%` : undefined,
+                    height: this.orientation === 'vertical' ? `${percentage}%` : undefined,
                     background: (() => {
                         const isColorObject = typeof item.color === 'object' && item.color !== null;
                         if (item.gradient || isColorObject) {
@@ -147,7 +148,7 @@ export class MeterGroup {
                     cursor: this.interactive ? 'pointer' : 'default',
                     transition: this.animated ? 'width 0.5s ease, height 0.5s ease' : 'none',
                 }, title: `${item.label}: ${item.value}`, onClick: () => this.handleSegmentClick(item) }, this.showValues && (h("span", { class: "meter-value" }, item.value))));
-        }))), (this.showLabels || this.showLegend) && (h("div", { key: '646404cbc3ac39fcf2956d292bd34d5c68162ff6', class: "meter-legend" }, values.map((item, index) => {
+        }))), (this.showLabels || this.showLegend) && (h("div", { key: 'b171d4c53a8154a0ca13b84c4e73d699b5c612bc', class: "meter-legend" }, values.map((item, index) => {
             const color = item.color || this.getDefaultColor(index);
             const percentage = ((item.value / total) * 100).toFixed(1);
             return (h("div", { class: "legend-item", onClick: () => this.handleSegmentClick(item), style: { cursor: this.interactive ? 'pointer' : 'default' } }, h("span", { class: "legend-color", style: { backgroundColor: typeof color === 'object' && color !== null ? color.from : color } }), item.icon && (h("span", { class: "legend-icon", style: { marginRight: '6px' } }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.1em" }))), h("span", { class: "legend-label" }, item.label), this.showValues && (h("span", { class: "legend-value" }, item.value, " (", percentage, "%)"))));

package/dist/collection/components/my-step/my-step.js

@@ -13,7 +13,7 @@ export class MyStep {
         return h("slot", null);
     }
     render() {
-        return h("slot", { key: '6b62a13aaa9111709fb6683ad93320b3970a6454' });
+        return h("slot", { key: '07c09e3d2857a1d05a6e96a4b1d8aede882ea1f5' });
     }
     static get is() { return "my-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/nav-bar/nav-bar.css

@@ -33,10 +33,10 @@
   --nav-bg: #0f172a;
   --nav-text: #f8fafc;
   --nav-text-muted: #94a3b8;
-  --nav-accent: #3b82f6;
-  --nav-accent-glow: rgba(59, 130, 246, 0.4);
+  --nav-accent: var(--color-primary, #3b82f6);
+  --nav-accent-glow: var(--color-primary-subtle, rgba(59, 130, 246, 0.4));
   --nav-hover-bg: rgba(255, 255, 255, 0.05);
-  --nav-active-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
+  --nav-active-bg: linear-gradient(135deg, var(--color-primary-subtle, rgba(59, 130, 246, 0.2)) 0%, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1) 100%);
   --nav-border: rgba(255, 255, 255, 0.08);
   --nav-width-expanded: 280px;
   --nav-width-collapsed: 80px;
@@ -265,7 +265,7 @@
 .active > .nav-item-link {
   background: var(--nav-active-bg);
   color: var(--nav-accent);
-  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3);
+  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.3);
 }
 
 .active > .nav-item-link::after {

package/dist/collection/components/nav-bar/nav-bar.js

@@ -203,12 +203,12 @@ export class NavBar {
     connectedCallback() {
     }
     render() {
-        return (h(Host, { key: '0a615eb525f4bc7ac076501ce2350727fa9510fb', collapsed: this.collapsed }, h("nav", { key: 'f89f766c305662a8dbafd34f6e45f241d4975e2e', class: `nav-bar ${this.collapsed ? 'collapsed' : 'expanded'}` }, h("div", { key: '066f83d3bc8df75a31b56aa87a92c33cff9d6cee', class: "nav-header" }, this.logoUrl && (h("img", { key: '40057cb53b7dd751b0a90413894197aa4266f690', src: this.logoUrl, alt: this.logoAlt, class: "nav-logo" })), this.appTitle && (h("span", { key: '4f7a597a93ca681d0532474b0ab45b9ad8953b26', class: "nav-title" }, this.appTitle)), this.showHamburger && (h("button", { key: 'bf2d1388044b5d5228a8ec1e549adf8d2b645abd', class: "nav-hamburger", onClick: this.handleHamburgerClick, "aria-label": this.collapsed ? 'Expand navigation' : 'Collapse navigation' }, this.collapsed ? (h("ui-icon", { name: "menu", library: this.iconLibrary, size: "1.5rem" })) : (h("ui-icon", { name: "x", library: this.iconLibrary, size: "1.5rem" }))))), this.showSearch && !this.collapsed && (h("div", { key: 'c998229e3925b92db73584169ae1f0f21d5dc88c', class: "nav-search" }, h("input", { key: '49f4c5c425460348ef34fb2885bd488f8adb408f', type: "text", class: "nav-search-input", placeholder: this.searchPlaceholder, onInput: this.handleSearchInput }))), h("div", { key: '7d4d939b8c9ca8a58008dc3d651b18b5371bae5b', class: "nav-content" }, this.renderSection(this.topItems, 'nav-section-top')), this.hoveredIcon && (h("div", { key: 'ec91c193a7881e597f6ee9934922751f2f197dad', class: "nav-tooltip visible", style: {
+        return (h(Host, { key: '1ca084a87b49b22d83f87e90cd0cadffbc311eae', collapsed: this.collapsed }, h("nav", { key: 'bcc0a9d86c7191111ed9997c40eef0a0b5c236e4', class: `nav-bar ${this.collapsed ? 'collapsed' : 'expanded'}` }, h("div", { key: 'c18e36e8919eb471554111e7d5ee690f044519d3', class: "nav-header" }, this.logoUrl && (h("img", { key: '3ef3c38c0a156bbda0890bba01df49a06afdb0b9', src: this.logoUrl, alt: this.logoAlt, class: "nav-logo" })), this.appTitle && (h("span", { key: '4140fce5cca693439044369924ba42f80bfd3148', class: "nav-title" }, this.appTitle)), this.showHamburger && (h("button", { key: '58f7a102b5185528ac328c47318fa4caf83ae154', class: "nav-hamburger", onClick: this.handleHamburgerClick, "aria-label": this.collapsed ? 'Expand navigation' : 'Collapse navigation' }, this.collapsed ? (h("ui-icon", { name: "menu", library: this.iconLibrary, size: "1.5rem" })) : (h("ui-icon", { name: "x", library: this.iconLibrary, size: "1.5rem" }))))), this.showSearch && !this.collapsed && (h("div", { key: '8145564546ad325086238964931b4a48e81ee805', class: "nav-search" }, h("input", { key: '61a66f0f1ef1e759205994c1dc0139b4c89f8dac', type: "text", class: "nav-search-input", placeholder: this.searchPlaceholder, onInput: this.handleSearchInput }))), h("div", { key: 'aab420232ec9816e08926d1ca7b057741e5dc2f6', class: "nav-content" }, this.renderSection(this.topItems, 'nav-section-top')), this.hoveredIcon && (h("div", { key: 'f1cd79267d143e1b4f2ade642da7199b380741d8', class: "nav-tooltip visible", style: {
                 top: `${this.tooltipPos.top}px`,
                 left: `${this.tooltipPos.left}px`
             } }, [...this.topItems, ...this.bottomItems, ...this.bottomItemsSecondary]
             .flatMap(i => [i, ...(i.children || [])])
-            .find(i => i.id === this.hoveredIcon)?.label)), h("div", { key: 'a5c8a38cf7ecb5feb91a21ccc95ddf333cec0eeb', class: "nav-footer" }, this.renderSection(this.bottomItems, 'nav-section-bottom'), this.renderSection(this.bottomItemsSecondary, 'nav-section-bottom-secondary')))));
+            .find(i => i.id === this.hoveredIcon)?.label)), h("div", { key: '993ce0f63b1ad5acf1226741f65437208d6bd3b9', class: "nav-footer" }, this.renderSection(this.bottomItems, 'nav-section-bottom'), this.renderSection(this.bottomItemsSecondary, 'nav-section-bottom-secondary')))));
     }
     renderSection(items, sectionClass) {
         if (!items || items.length === 0)
@@ -257,7 +257,7 @@ export class NavBar {
                     "references": {
                         "NavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/nav-bar/nav-bar.tsx",
+                            "path": "C:/Naveen/PersonalRepo/atomicUILibrary/library/src/components/nav-bar/nav-bar.tsx",
                             "id": "src/components/nav-bar/nav-bar.tsx::NavItem"
                         }
                     }
@@ -281,7 +281,7 @@ export class NavBar {
                     "references": {
                         "NavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/nav-bar/nav-bar.tsx",
+                            "path": "C:/Naveen/PersonalRepo/atomicUILibrary/library/src/components/nav-bar/nav-bar.tsx",
                             "id": "src/components/nav-bar/nav-bar.tsx::NavItem"
                         }
                     }
@@ -305,7 +305,7 @@ export class NavBar {
                     "references": {
                         "NavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/nav-bar/nav-bar.tsx",
+                            "path": "C:/Naveen/PersonalRepo/atomicUILibrary/library/src/components/nav-bar/nav-bar.tsx",
                             "id": "src/components/nav-bar/nav-bar.tsx::NavItem"
                         }
                     }
@@ -528,7 +528,7 @@ export class NavBar {
                     "references": {
                         "NavItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/nav-bar/nav-bar.tsx",
+                            "path": "C:/Naveen/PersonalRepo/atomicUILibrary/library/src/components/nav-bar/nav-bar.tsx",
                             "id": "src/components/nav-bar/nav-bar.tsx::NavItem"
                         }
                     }

package/dist/collection/components/number-input/number-input.js

@@ -127,6 +127,10 @@ export class NumberInput {
             this.decrement();
     };
     handleKeyDown = (e) => {
+        // ui-input already handles ArrowUp/Down for type="number" via stepValue()
+        // and calls preventDefault() — bail out here to avoid double-stepping.
+        if (e.defaultPrevented)
+            return;
         if (e.key === 'ArrowUp') {
             e.preventDefault();
             this.increment();
@@ -139,7 +143,7 @@ export class NumberInput {
     render() {
         const isError = !!this.errorText;
         const isRight = this.stepperLayout === 'right';
-        return (h(Host, { key: '34a35f828baa751fbaab05db0ea6d7e4eb42281e', class: { 'full-width': this.fullWidth } }, this.label && h("label", { key: '756934f01225ddbdd8235fc9081177dedc004531', class: "ni-label" }, this.label), h("div", { key: '822ac22167cb75cdcb16274d4a5fa95291875cc9', class: {
+        return (h(Host, { key: '7d6621c867480c767237c3ceaffcf830a27263e8', class: { 'full-width': this.fullWidth } }, this.label && h("label", { key: 'fc320df3b4d7cfd4606ea5a806409a8ac006f9bb', class: "ni-label" }, this.label), h("div", { key: '1d35868e9fbfc0b619b7908f91720eb219f2d3cf', class: {
                 'ni-wrapper': true,
                 [`ni-${this.size}`]: true,
                 'ni-error': isError,
@@ -148,7 +152,7 @@ export class NumberInput {
                 'ni-right': isRight,
                 'ni-rtl': this.rtl,
                 'ni-plain': this.variant === 'plain',
-            }, dir: this.rtl ? 'rtl' : 'ltr' }, this.showStepper && this.stepperLayout === 'sides' && (h("ui-button", { key: '714881b359dfc953c8b6f93fb0295c0ae2f134ea', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "minus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' })), this.renderPrefix(), h("ui-input", { key: 'b2d56228f500995d4f6fbd78c639e6383c36bd3e', class: "ni-input", type: "number", value: this.inputValue, min: this.min === -Infinity ? undefined : this.min, max: this.max === Infinity ? undefined : this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, onInputChange: this.handleInput, onInputBlur: this.handleBlur, onFocusInternal: () => (this.isFocused = true), onWheel: (e) => this.handleWheel(e), onInputKeydown: (e) => this.handleKeyDown(e.detail), fullWidth: true, size: this.size, variant: "plain", showTypeIcon: false }), this.renderSuffix(), this.showStepper && isRight && (h("div", { key: 'e400b4eea2656a85a5c5df3487ead9f45367100b', class: "ni-stacker" }, h("ui-button", { key: '9cd89756bc4792dccc9657ca39b6d6cff2a9e819', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "chevron-up", iconLibrary: "lucide", iconOnly: true, size: "xxs" }), h("ui-button", { key: '42248f0ccc65d42c903775f8e5fcbd97f76e04e7', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "chevron-down", iconLibrary: "lucide", iconOnly: true, size: "xxs" }))), this.showStepper && this.stepperLayout === 'sides' && (h("ui-button", { key: 'dbf5c5d29bf6945baaaa96a46915440088f2509f', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "plus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' }))), (this.helperText || this.errorText) && (h("div", { key: 'f4f1e6ff10c5ddbbc4e49c7e2325e103537e9e08', class: { 'ni-helper': true, 'ni-helper-error': isError } }, isError ? this.errorText : this.helperText))));
+            }, dir: this.rtl ? 'rtl' : 'ltr' }, this.showStepper && this.stepperLayout === 'sides' && (h("ui-button", { key: '7fe957464bd26a0aee2c36fc0ab7c4a16a69d9e6', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "minus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' })), this.renderPrefix(), h("ui-input", { key: '520c1bfb3d2a283788e0833bd3c4683f7d0f9991', class: "ni-input", type: "number", value: this.inputValue, min: this.min === -Infinity ? undefined : this.min, max: this.max === Infinity ? undefined : this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, onInputChange: this.handleInput, onInputBlur: this.handleBlur, onFocusInternal: () => (this.isFocused = true), onWheel: (e) => this.handleWheel(e), onInputKeydown: (e) => this.handleKeyDown(e.detail), fullWidth: true, size: this.size, variant: "plain", showTypeIcon: false }), this.renderSuffix(), this.showStepper && isRight && (h("div", { key: '43e78c6e315cb773a7e72e72f12fc67b7652d443', class: "ni-stacker" }, h("ui-button", { key: 'bff9e2be12324bf23ba904c230ed34aca476573e', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "chevron-up", iconLibrary: "lucide", iconOnly: true, size: "xxs" }), h("ui-button", { key: 'a6a5dcaeac986df1028882fa605f41bef9979bae', variant: "ghost", onMouseDown: () => this.startStepping('dec'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('dec'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value <= this.min, tabIndex: -1, ariaLabel: "Decrease", icon: "chevron-down", iconLibrary: "lucide", iconOnly: true, size: "xxs" }))), this.showStepper && this.stepperLayout === 'sides' && (h("ui-button", { key: '36d111a0bed7715ffee7fd6b5cd41f1d18ca33a4', variant: "ghost", onMouseDown: () => this.startStepping('inc'), onMouseUp: this.stopStepping, onMouseLeave: this.stopStepping, onTouchStart: () => this.startStepping('inc'), onTouchEnd: this.stopStepping, onClick: (e) => e.preventDefault(), disabled: this.disabled || this.value >= this.max, tabIndex: -1, ariaLabel: "Increase", icon: "plus", iconLibrary: "lucide", iconOnly: true, size: this.size === 'sm' || this.size === 'xs' ? 'sm' : 'md' }))), (this.helperText || this.errorText) && (h("div", { key: '75f9167fa983543f97efbfbf4eae8e66e71a6635', class: { 'ni-helper': true, 'ni-helper-error': isError } }, isError ? this.errorText : this.helperText))));
     }
     renderPrefix() {
         const hasPrefix = this.prefixText || this.prefixIcon;

package/dist/collection/components/otp-input/otp-input.css

@@ -69,6 +69,16 @@
   outline: none;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   caret-color: var(--primary-color, var(--color-success, #3dcd58));
+  /* Reset inner ui-input container layout details to prevent clipping */
+  --ui-input-padding: 0px !important;
+  --ui-input-padding-x: 0px !important;
+  --input-padding-vertical: 0px !important;
+  --input-padding-horizontal: 0px !important;
+  --input-height: 100% !important;
+  --ui-input-text-align: center;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
 }
 .otp-input-field:hover:not(:disabled) {
   border-color: var(--border-hover, #bbb);

package/dist/collection/components/otp-input/otp-input.js

@@ -214,14 +214,14 @@ export class OtpInput {
             'otp-input-invalid': isInvalid,
             'otp-input-skeleton': this.skeleton,
         };
-        return (h("div", { key: '8fe5324ea7e186d84beea09373bf235f93921708', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && h("label", { key: 'baa571a85ef85c818b191b46160b42a50b465585', class: "otp-label" }, this.label), h("div", { key: '48cb77b47f529d79d9ffcc84af84307f1ecc8a1a', class: "otp-inputs-container" }, this.otpValues.map((val, index) => {
+        return (h("div", { key: '927ec2b491c04d013470a0449dea64d4aaaffc76', class: containerClasses, dir: this.rtl ? 'rtl' : 'ltr' }, this.label && h("label", { key: '043dfca110af5012d56b444d7427eb647f851e1b', class: "otp-label" }, this.label), h("div", { key: 'e2e7ab669e26d49206f85afd1f48c9ea7614f591', class: "otp-inputs-container" }, this.otpValues.map((val, index) => {
             const showDivider = this.groupSize > 0 && (index + 1) % this.groupSize === 0 && index !== this.length - 1;
-            return (h(Fragment, null, h("ui-input", { ref: el => (this.inputRefs[index] = el), type: this.secure ? 'password' : 'text', inputMode: this.type === 'number' || this.type === 'numeric' ? 'numeric' : 'text', pattern: this.type === 'number' || this.type === 'numeric' ? '[0-9]*' : undefined, maxLength: 1, class: {
+            return (h(Fragment, null, h("ui-input", { ref: el => (this.inputRefs[index] = el), type: this.secure ? 'password' : 'text', variant: "plain", inputMode: this.type === 'number' || this.type === 'numeric' ? 'numeric' : 'text', pattern: this.type === 'number' || this.type === 'numeric' ? '[0-9]*' : undefined, maxLength: 1, class: {
                     'otp-input-field': true,
                     'focused': this.focusedIndex === index,
                     'filled': !!val,
                 }, value: val, placeholder: this.placeholder, disabled: this.disabled || this.skeleton, readonly: this.readonly, onInputChange: e => this.handleInput(e, index), onInputKeydown: e => this.handleKeyDown(e.detail, index), onPasteInternal: e => (index === 0 ? this.handlePaste(e.detail) : e.detail.preventDefault()), onFocusInternal: () => this.handleFocus(index), onInputBlur: this.handleBlur, ariaLabel: `Digit ${index + 1}`, size: this.size, align: "center" }), showDivider && h("div", { class: "otp-divider" })));
-        })), isInvalid && currentErrorText && (h("div", { key: 'eb635e42e20010b8ca86e84ea3f3a7d9c077a5fa', class: "error-text" }, h("ui-icon", { key: '50163f7f1957e40f76d80c4b93548b0cf308b3bf', name: "exclamation-circle", library: "fontawesome" }), currentErrorText)), !isInvalid && this.helperText && h("div", { key: '0665d1b8ed1e46af72017732bcf59fa4b2ad1e14', class: "helper-text" }, this.helperText), h("div", { key: '2d6a7e0c414b396e6a859ebcc5adbd5838cdabf5', class: "otp-resend-container" }, h("ui-button", { key: '8f93b95638c39ce06cd1b5bf55172ca3b4045580', variant: "ghost", size: "sm", onClick: this.handleResend, disabled: this.resendTimer > 0 || this.disabled, label: `${this.resendLabel} ${this.resendTimer > 0 ? `(${this.resendTimer}s)` : ''}` }))));
+        })), isInvalid && currentErrorText && (h("div", { key: '251b384b6cf48e4f0dfa1e64fd128674fb6cfbbb', class: "error-text" }, h("ui-icon", { key: '0c0f65b8e1748e546737710d373ed9ae2cef07cc', name: "exclamation-circle", library: "fontawesome" }), currentErrorText)), !isInvalid && this.helperText && h("div", { key: '740959aeb1bff5f5f20829d953fab02303f83b35', class: "helper-text" }, this.helperText), h("div", { key: 'baeee4149c7086ed794b30957e00cb0d68986368', class: "otp-resend-container" }, h("ui-button", { key: '6ed86116570e10766b3510ab4e024dc4b8933321', variant: "ghost", size: "sm", onClick: this.handleResend, disabled: this.resendTimer > 0 || this.disabled, label: `${this.resendLabel} ${this.resendTimer > 0 ? `(${this.resendTimer}s)` : ''}` }))));
     }
     static get is() { return "ui-otp-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.js

@@ -958,7 +958,7 @@ export class Pagination {
                 "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/pattern-input/pattern-input.css

@@ -56,7 +56,6 @@
   display: flex;
   align-items: center;
   background: var(--bg-primary, #ffffff);
-  border: 2px solid var(--border-strong, #d1d5db);
   border-radius: 8px;
   transition: all 0.2s ease;
   padding: 0 12px;

package/dist/collection/components/pattern-input/pattern-input.js

@@ -102,15 +102,47 @@ export class UIPatternInput {
         for (let i = 0; i < this.pattern.length && rawIndex < raw.length; i++) {
             const patternChar = this.pattern[i];
             if (patternChar === this.maskChar) {
+                // Primary mask slot (#) — consume one raw character
+                formatted += raw[rawIndex];
+                rawIndex++;
+            }
+            else if (patternChar === 'A' && this.maskChar !== 'A') {
+                // Secondary mask slot (A) for alphanumeric — consume one raw character
                 formatted += raw[rawIndex];
                 rawIndex++;
             }
             else {
+                // Literal separator — insert as-is without consuming input
                 formatted += patternChar;
             }
         }
         return formatted;
     }
+    /**
+     * Builds a structural completion regex from the pattern.
+     * maskChar (#) → \d  |  A → [A-Za-z0-9]  |  other chars → escaped literals.
+     * Used as the fallback when no validationRegex prop is supplied.
+     */
+    generateFallbackRegex() {
+        if (!this.pattern || !this.autoFormat)
+            return null;
+        let regexStr = '^';
+        for (const char of this.pattern) {
+            if (char === this.maskChar) {
+                regexStr += '\\d';
+            }
+            else if (char === 'A' && this.maskChar !== 'A') {
+                // Conventional secondary mask char for alphanumeric slots
+                regexStr += '[A-Za-z0-9]';
+            }
+            else {
+                // Literal separator — escape regex special characters
+                regexStr += char.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            }
+        }
+        regexStr += '$';
+        return new RegExp(regexStr);
+    }
     validateInput(value) {
         if (!value && !this.required) {
             this.isValid = true;
@@ -120,20 +152,23 @@ export class UIPatternInput {
             this.isValid = false;
             return false;
         }
+        let regex = null;
         if (this.validationRegex) {
+            // Custom regex provided — use it for semantic validation
             try {
-                const regex = new RegExp(this.validationRegex);
-                const rawValue = this.extractRawValue(value);
-                this.isValid = regex.test(rawValue);
+                regex = new RegExp(this.validationRegex);
             }
             catch (e) {
                 console.error('Invalid validation regex:', e);
                 this.isValid = false;
+                return false;
             }
         }
         else {
-            this.isValid = true;
+            // No custom regex — fall back to pattern-completion check
+            regex = this.generateFallbackRegex();
         }
+        this.isValid = regex ? regex.test(value) : true;
         return this.isValid;
     }
     handleInput = (event) => {
@@ -233,26 +268,26 @@ export class UIPatternInput {
         const charCount = this.getCharCount();
         const showError = this.isTouched && !this.isValid && this.showValidation;
         const showSuccess = this.isTouched && this.isValid && this.value && this.showValidation;
-        return (h(Host, { key: 'e6cafe1df0d19d9aa631bb08d2396af558b95673', class: {
+        return (h(Host, { key: 'a18925eb76dddc52e1a0172c878ff1051ed7c01f', class: {
                 'pattern-input-host': true,
                 'pattern-input-disabled': this.disabled,
                 'pattern-input-focused': this.isFocused,
                 'pattern-input-error': showError,
                 'pattern-input-success': showSuccess,
-            } }, h("div", { key: '9c5996bb1d80efc3ddedc692f3a2161acddd93f7', class: "pattern-input-wrapper", dir: this.rtl ? 'rtl' : 'ltr' }, this.label && (h("label", { key: 'ea22f82e44ce4631d82fbe3d6a9bbce3a68b848b', class: "pattern-input-label" }, this.label, this.required && h("span", { key: '71ee8e5c5d50ad9e1fe81df81385813cf157b911', class: "pattern-input-required" }, "*"))), h("div", { key: 'a4e05ef18befa44931881b5baa3f91b983017456', class: {
+            } }, h("div", { key: 'd0e1971bb1a1d298f5991e368c2f419d0bc7186d', class: "pattern-input-wrapper", dir: this.rtl ? 'rtl' : 'ltr' }, this.label && (h("label", { key: '1297f7081e5f6e70bcb76ecf34774e37eff34000', class: "pattern-input-label" }, this.label, this.required && h("span", { key: 'e7ca7ed1fc824e659f8d73647b52adf7bad25329', class: "pattern-input-required" }, "*"))), h("div", { key: 'd110aa1601cda33f1a626939aa3dcd2a79597d09', class: {
                 'pattern-input-container': true,
                 [`pattern-input-${this.size}`]: true,
                 'pattern-input-container-focused': this.isFocused,
                 'pattern-input-container-error': showError,
                 'pattern-input-container-success': showSuccess,
-            } }, h("slot", { key: 'a498a913a37bf11470bad5c9043caa196f2b860f', name: "prefix" }), h("ui-input", { key: 'e8b7202121a6a5a1c27f2e2f26783d11c6fa1013', ref: el => (this.inputElement = el), type: "text", class: "pattern-input-field", value: this.value, placeholder: this.placeholder || this.pattern, disabled: this.disabled, required: this.required, name: this.name, maxLength: this.pattern?.length || this.maxLength, onInputChange: this.handleInput, onInputKeydown: (e) => this.handleKeyPress(e.detail), onPasteInternal: (e) => this.handlePaste(e.detail), onFocusInternal: this.handleFocus, onInputBlur: this.handleBlur, ariaInvalid: showError, ariaRequired: this.required, fullWidth: true, size: this.size }), this.showValidation && (h("span", { key: 'fce03bbf3acc80f7cc48e011725d07a4381a9c1b', class: "pattern-input-status" }, showError && h("ui-icon", { key: 'e2fb5bb51afc46e381ee29c071564d4226826bd6', name: "x-circle", library: "lucide", size: "1.2em", class: "status-icon status-error" }), showSuccess && h("ui-icon", { key: 'ec772884ed89b461b0659acd66bf7d5816200e20', name: "check-circle", library: "lucide", size: "1.2em", class: "status-icon status-success" }))), this.clearable && this.value && !this.disabled && (h("ui-button", { key: 'f461b44289a9f0bd6a6f215288746ef4697efb6d', variant: "ghost", class: "pattern-input-clear", onClick: () => {
+            } }, h("slot", { key: '7d7543e141f99b9d7dca424f47439cfe14a2b1d1', name: "prefix" }), h("ui-input", { key: '693bf0fa1782b1488053c3b69a3b05bee906dea2', ref: el => (this.inputElement = el), type: "text", class: "pattern-input-field", value: this.value, placeholder: this.placeholder || this.pattern, disabled: this.disabled, required: this.required, name: this.name, maxLength: this.pattern?.length || this.maxLength, onInputChange: this.handleInput, onInputKeydown: (e) => this.handleKeyPress(e.detail), onPasteInternal: (e) => this.handlePaste(e.detail), onFocusInternal: this.handleFocus, onInputBlur: this.handleBlur, ariaInvalid: showError, ariaRequired: this.required, fullWidth: true, size: this.size }), this.showValidation && (h("span", { key: 'f7a2d45bdec22db724fba2e0af8f4683fd67a853', class: "pattern-input-status" }, showError && h("ui-icon", { key: '8d0639eae5b2f0754fe81e5172495e9aafc2989b', name: "x-circle", library: "lucide", size: "1.2em", class: "status-icon status-error" }), showSuccess && h("ui-icon", { key: '2b1b920a941c74db303fbba9e125036a716de009', name: "check-circle", library: "lucide", size: "1.2em", class: "status-icon status-success" }))), this.clearable && this.value && !this.disabled && (h("ui-button", { key: 'edfded0699f5b20612d5548f5c2987acf8ac1d00', variant: "ghost", class: "pattern-input-clear", onClick: () => {
                 this.value = '';
                 this.patternInputChange.emit({ value: '', formatted: '', isValid: this.required ? false : true });
-            }, ariaLabel: "Clear input", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("slot", { key: '453ce5f34c6384272b66d88a03e0ad897da4eada', name: "suffix" })), h("div", { key: 'dc815745573df1a2edbaae6971543642e20e74ed', class: "pattern-input-footer" }, h("div", { key: '58e39b130ffb2b694e462dca3909a1b0d8e2ebee', class: "pattern-input-messages" }, this.helperText && !validationMsg && (h("span", { key: 'a0fb4ffbcc587ff0a5bab578e299df3653a2a19d', class: "helper-text" }, this.helperText)), validationMsg && (h("span", { key: '286eff6417e271b6a92423eb2c08a2247b96d6fb', class: {
+            }, ariaLabel: "Clear input", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("slot", { key: '307ce5045f89a48d0be327e107373f54d5934ea2', name: "suffix" })), h("div", { key: '6e791a83f674dbe235545a48c3ee25eeac1e985a', class: "pattern-input-footer" }, h("div", { key: 'e70f47484112f7fd0c0ce1248fca88ae0b5bbd27', class: "pattern-input-messages" }, this.helperText && !validationMsg && (h("span", { key: '564e18bfd03a8e057efc00bff2eab356b3ae1ab3', class: "helper-text" }, this.helperText)), validationMsg && (h("span", { key: 'c33cb23221b97daced7a1787ea4fe2e3dacb97e0', class: {
                 'validation-message': true,
                 'validation-error': showError,
                 'validation-success': showSuccess,
-            } }, validationMsg))), this.showCounter && (h("span", { key: '99d1593a2012cb8c20d86c7de3cc4be8319c3aca', class: "char-counter" }, charCount.current, charCount.max && ` / ${charCount.max}`))))));
+            } }, validationMsg))), this.showCounter && (h("span", { key: '1dd7787679337def8caf5cae36f547423feb202d', class: "char-counter" }, charCount.current, charCount.max && ` / ${charCount.max}`))))));
     }
     static get is() { return "ui-pattern-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/popover/popover.css

@@ -72,6 +72,10 @@
   word-wrap: break-word;
   overflow-wrap: break-word;
   overflow: visible; /* allow arrow tip to show outside panel */
+  isolation: isolate;
+  margin: 0;
+  bottom: auto;
+  right: auto;
 }
 
 .popover-visible {
@@ -89,6 +93,7 @@
   overflow: hidden; /* stops body content from escaping panel   */
   border-radius: inherit; /* rounded corners still clip the content   */
   max-height: inherit; /* inherit FloatingUI size-middleware limit  */
+  background: var(--popover-surface-bg, var(--popover-bg, var(--bg-primary, #ffffff)));
 }
 
 /* ── Header ────────────────────────────────────────────────── */
@@ -100,6 +105,7 @@
   padding-block: 12px;
   padding-inline: 16px;
   border-block-end: 1px solid var(--popover-border, var(--border-default, #e5e7eb));
+  background: var(--popover-header-bg, var(--popover-surface-bg, var(--popover-bg, var(--bg-primary, #ffffff))));
 }
 
 .popover-title {
@@ -137,6 +143,7 @@
   color: var(--popover-text-secondary, var(--text-muted, #6b7280));
   line-height: 1.6;
   overflow-y: auto;
+  background: var(--popover-body-bg, var(--popover-surface-bg, var(--popover-bg, var(--bg-primary, #ffffff))));
   /* Thin custom scrollbar */
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
@@ -166,15 +173,36 @@
 
 /* ── Variants ──────────────────────────────────────────────── */
 .popover-dark {
-  --popover-bg: var(--bg-primary, #1f2937);
-  --popover-border: var(--border-default, #374151);
-  --popover-text-primary: var(--bg-primary, #f3f4f6);
-  --popover-text-secondary: var(--bg-secondary, #d1d5db);
-  --popover-footer-bg: rgba(255,255,255,0.04);
+  --popover-bg: var(--ghost-popover-bg, #0f172a);
+  --popover-border: var(--ghost-popover-border, rgba(148, 163, 184, 0.28));
+  --popover-text-primary: var(--ghost-popover-text-primary, #f8fafc);
+  --popover-text-secondary: var(--ghost-popover-text-secondary, #cbd5e1);
+  --popover-footer-bg: var(--ghost-popover-footer-bg, rgba(255,255,255,0.04));
+  --popover-surface-bg: var(--ghost-popover-surface-bg, var(--ghost-popover-bg, #0f172a));
+  --popover-header-bg: var(--ghost-popover-header-bg, var(--ghost-popover-surface-bg, var(--ghost-popover-bg, #0f172a)));
+  --popover-body-bg: var(--ghost-popover-body-bg, var(--ghost-popover-surface-bg, var(--ghost-popover-bg, #0f172a)));
+  color-scheme: dark;
+  background: var(--popover-bg);
+  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.42), 0 10px 18px rgba(15, 23, 42, 0.26);
+  isolation: isolate;
+}
+.popover-dark .popover-inner,
+.popover-dark .popover-header,
+.popover-dark .popover-body {
+  background: var(--popover-surface-bg, var(--popover-bg));
+  opacity: 1;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
 }
 .popover-dark .popover-arrow {
-  --popover-bg: var(--bg-primary, #1f2937);
-  --popover-border: var(--border-default, #374151);
+  --popover-bg: #0f172a;
+  --popover-border: rgba(148, 163, 184, 0.28);
+}
+
+.popover-light {
+  --popover-surface-bg: var(--ghost-popover-surface-bg, var(--popover-bg, var(--bg-primary, #ffffff)));
+  --popover-header-bg: var(--ghost-popover-header-bg, var(--popover-surface-bg));
+  --popover-body-bg: var(--ghost-popover-body-bg, var(--popover-surface-bg));
 }
 
 .popover-success {

package/dist/collection/components/popover/popover.js

@@ -123,6 +123,8 @@ export class Popover {
     resizeObserver;
     latestSizeData = { width: '', maxWidth: '', maxHeight: '' };
     updateRetries = 0;
+    /** Guard flag: true for the brief window after a trigger click, prevents outside-click from firing on the same event */
+    _justOpened = false;
     componentWillLoad() {
         this.currentPlacement = this.placement;
     }
@@ -174,6 +176,13 @@ export class Popover {
         if (!this.targetElement) {
             this.setupTrigger();
         }
+        this.popoverStyles = {
+            position: this.strategy,
+            left: '0px',
+            top: '0px',
+            visibility: 'hidden',
+            opacity: '0'
+        };
         this.popoverContent = this.element.shadowRoot?.querySelector('.popover');
         this.arrowElement = this.element.shadowRoot?.querySelector('.popover-arrow');
         if (this.popoverContent && !this.resizeObserver) {
@@ -184,14 +193,20 @@ export class Popover {
             this.resizeObserver.observe(this.popoverContent);
         }
         requestAnimationFrame(() => {
+            this.cleanup();
+            this.targetElement = undefined;
+            this.setupTrigger();
             this.startAutoUpdate();
             this.updateAriaAttributes(true);
-            // Add outside click listener only when open
+            // Add outside click listener only when open.
+            // Use a flag + slightly longer timeout to ensure the click that *opened*
+            // the popover cannot immediately trigger an outside-click close.
             if (this.closeOnOutsideClick) {
-                // Use a sm timeout to avoid capturing the same click that opened it
+                this._justOpened = true;
                 setTimeout(() => {
+                    this._justOpened = false;
                     document.addEventListener('click', this.handleOutsideClick);
-                }, 10);
+                }, 50);
             }
             if (this.backdrop || this.showCloseButton || this.trigger === 'click') {
                 requestAnimationFrame(() => {
@@ -208,6 +223,13 @@ export class Popover {
             this.cleanupAutoUpdate();
             this.cleanupAutoUpdate = undefined;
         }
+        this.popoverStyles = {
+            position: this.strategy,
+            left: '0px',
+            top: '0px',
+            visibility: 'hidden',
+            opacity: '0'
+        };
         document.removeEventListener('click', this.handleOutsideClick);
         if (this.focusTrap) {
             this.focusTrap.deactivate();
@@ -233,6 +255,21 @@ export class Popover {
             });
         }
     }
+    getLayoutAnchor() {
+        let anchor = this.targetElement;
+        while (anchor) {
+            const style = window.getComputedStyle(anchor);
+            if (style && style.display === 'contents') {
+                const shadowChild = Array.from(anchor.shadowRoot?.children || []).find((c) => c.tagName !== 'STYLE' && c.tagName !== 'SCRIPT' && c.tagName !== 'SLOT');
+                if (shadowChild) {
+                    anchor = shadowChild;
+                    continue;
+                }
+            }
+            break;
+        }
+        return anchor || this.targetElement || this.element;
+    }
     setupTrigger() {
         // 1. Check for external target via selector or reference
         if (this.target) {
@@ -316,6 +353,18 @@ export class Popover {
         this.hide();
     };
     handleOutsideClick = (event) => {
+        if (this._justOpened && event.isTrusted)
+            return;
+        // Use composedPath() to correctly detect clicks inside Shadow DOM subtrees
+        // (e.g. a ui-button inside a slot="trigger" wrapper, or inside the popover panel)
+        const path = event.composedPath ? event.composedPath() : [];
+        // Check if click was inside the host element (includes trigger slot children)
+        if (path.includes(this.element))
+            return;
+        // Check if click was inside the floating panel
+        if (this.popoverContent && path.includes(this.popoverContent))
+            return;
+        // Legacy fallback for browsers without composedPath
         if (this.targetElement?.contains(event.target))
             return;
         if (this.popoverContent?.contains(event.target))
@@ -365,7 +414,9 @@ export class Popover {
         }
         if (!this.targetElement || !this.popoverContent)
             return;
-        this.cleanupAutoUpdate = autoUpdate(this.targetElement, this.popoverContent, () => this.updatePosition(), { animationFrame: true });
+        // Dynamically retrieve the layout anchor to avoid race conditions with display:contents styles
+        const anchorEl = this.getLayoutAnchor();
+        this.cleanupAutoUpdate = autoUpdate(anchorEl, this.popoverContent, () => this.updatePosition(), { animationFrame: true });
     }
     async updatePosition() {
         // Always re-query the panel and arrow in case they were null during initial mount
@@ -386,13 +437,17 @@ export class Popover {
             return;
         }
         this.updateRetries = 0;
-        const { left, top, placement, availableHeight, availableWidth, arrowX, arrowY } = calculateUniversalPlacement(this.targetElement, {
+        // Dynamically retrieve the layout anchor to avoid race conditions with display:contents styles
+        const anchorEl = this.getLayoutAnchor();
+        const { left, top, placement, availableHeight, availableWidth, arrowX, arrowY } = calculateUniversalPlacement(anchorEl, {
             menuWidth: this.popoverContent.offsetWidth,
             menuHeight: this.popoverContent.offsetHeight,
             gap: this.offset,
             placement: this.autoPlacement ? 'auto' : this.placement.split('-')[0],
             align: this.placement.includes('start') ? 'start' : (this.placement.includes('end') ? 'end' : 'center'),
-            padding: this.padding
+            padding: this.padding,
+            flip: this.flip,
+            shift: this.shift
         });
         this.currentPlacement = placement;
         // Constrain size based on available space
@@ -406,7 +461,7 @@ export class Popover {
             position: this.strategy,
             left: `${left}px`,
             top: `${top}px`,
-            width: this.matchTriggerWidth ? `${this.targetElement.offsetWidth}px` : (sizeData.width || this.width),
+            width: this.matchTriggerWidth ? `${anchorEl.offsetWidth}px` : (sizeData.width || this.width),
             minWidth: '160px',
             maxWidth: sizeData.maxWidth,
             maxHeight: sizeData.maxHeight,
@@ -485,7 +540,7 @@ export class Popover {
             ...this.getPopoverStyle(),
             ...this.popoverStyles
         };
-        return (h("div", { key: '0f7778a7317e7842be132860b1dc61b611fa247d', class: "popover-wrapper" }, h("div", { key: '2df4f3624d7335dbb9149b169778dfe288c4ff57', class: "popover-trigger" }, h("slot", { key: 'e0058a8f0c58e229df36e2ef47a402e4cf9e81dd', name: "trigger" }), h("slot", { key: '49c41549a41f352f0b94e6ae4dbde48435742ebc' })), this.backdrop && this.open && (h("div", { key: '51851882bc67bd5a1a88d7a9f8bd44df99e3dee6', class: "popover-backdrop", onClick: () => this.hide() })), this.open && (h("div", { key: 'bd82cf9d153a7b228ac7696e407bb8a0d36ae942', class: popoverClasses, style: finalPopoverStyle, onMouseEnter: () => this.handlePopoverMouseEnter(), onMouseLeave: () => this.handlePopoverMouseLeave(), role: this.popoverRole, "aria-modal": this.backdrop ? 'true' : 'false', "aria-label": this.heading || undefined }, this.showArrow && h("div", { key: '545cb01f513e171e3d79a664ea57c5cbee6b5d07', class: "popover-arrow", style: this.arrowStyles }), h("div", { key: 'bc8a9f93d49c2d1c201203728e731ef5a2850602', class: "popover-inner" }, (this.heading || this.showCloseButton) && (h("div", { key: '9dee577314cc88f1bad7372006e593f34fa1a3fc', class: "popover-header" }, this.heading && h("div", { key: '7b0b3be1e8f6b0949969172eb74702034c661f6a', class: "popover-title" }, this.heading), this.showCloseButton && (h("ui-button", { key: 'd6dcc9b87b330797f6e29bf711df0504b386f5cb', variant: "ghost", size: "xxs", iconOnly: true, class: "popover-close", onClick: () => this.hide(), ariaLabel: "Close", icon: "x", iconLibrary: "lucide", iconSize: "14px" })))), h("div", { key: '3639ca2119db19c98ce70fd11afe8ba4451cad2c', class: "popover-body", style: { maxHeight: this.maxHeight, overflowY: this.maxHeight !== 'none' ? 'auto' : undefined } }, h("slot", { key: '43b5f442af61f83b9342a8a704a625155aabb0d3', name: "content" }), this.content && h("div", { key: '1bd964f0709f66c335bfaaafe1bbe268554be279', innerHTML: sanitizeHTML(this.content) })), h("slot", { key: 'da80a35ef26a42ab2830e84ac81cdca2aef348f2', name: "footer" }))))));
+        return (h("div", { key: '8c9a3985b10f389cb2fa730830e3872957358435', class: "popover-wrapper" }, h("div", { key: '6b0c31365ecd79e280001c112cd33978d92393aa', class: "popover-trigger" }, h("slot", { key: '0fb48c0444ccd3ce6e7b1a68d12e6fd4b546c654', name: "trigger" }), h("slot", { key: 'e8f8f885ebf70a16b6554b9471ab234bf426d478' })), this.backdrop && this.open && (h("div", { key: '3412a54d36ddceed9ca90bf587db0d7c4c53240a', class: "popover-backdrop", onClick: () => this.hide() })), this.open && (h("div", { key: '8cbc42fedae9130dc5d453366b95ff2b9865a9a2', class: popoverClasses, style: finalPopoverStyle, onMouseEnter: () => this.handlePopoverMouseEnter(), onMouseLeave: () => this.handlePopoverMouseLeave(), role: this.popoverRole, "aria-modal": this.backdrop ? 'true' : 'false', "aria-label": this.heading || undefined }, this.showArrow && h("div", { key: '39c3c7db5436a07e8f39e594e8517e08392f8f50', class: "popover-arrow", style: this.arrowStyles }), h("div", { key: 'caaedac530b821964d6301309b984aefcae798db', class: "popover-inner" }, (this.heading || this.showCloseButton) && (h("div", { key: 'cb939a32a38e56e72c14dcebfada947c19f22ea9', class: "popover-header" }, this.heading && h("div", { key: '55080c2e755a2f4bc9cd45110b2262f57471fde7', class: "popover-title" }, this.heading), this.showCloseButton && (h("ui-button", { key: 'bd92a337a7029d19fa3b4b1e3aa211f12ca38f71', variant: "ghost", size: "xxs", iconOnly: true, class: "popover-close", onClick: () => this.hide(), ariaLabel: "Close", icon: "x", iconLibrary: "lucide", iconSize: "14px" })))), h("div", { key: 'dedbb7ecd61056c89d5c006a442ff83d6de76390', class: "popover-body", style: { maxHeight: this.maxHeight, overflowY: this.maxHeight !== 'none' ? 'auto' : undefined } }, h("slot", { key: 'b838ffbe1fdd208cbe2ca2c8f2e85f290ebfb946', name: "content" }), this.content && h("div", { key: 'e179798f83b9be0ddd68f5d80c1c8df7ff893075', innerHTML: sanitizeHTML(this.content) })), h("slot", { key: '8f235de9f318e3ed6aa386522052bfb6a7c45da3', name: "footer" }))))));
     }
     static get is() { return "ui-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -770,7 +825,7 @@ export class Popover {
                 "mutable": false,
                 "complexType": {
                     "original": "'light' | 'dark' | StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"dark\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"light\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"dark\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"light\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",