@plusui/library 0.1.11 → 0.1.13

package/cdn/components/segmented-picker/segmented-picker.component.js

@@ -3,7 +3,7 @@ import { x } from '../../lit-element-ByzbtpGk.js';
 import Tailwind from '../base/tailwind-base.js';
 import { o } from '../../query-assigned-elements-B8Evmg7O.js';
 import { segmentedPickerStyle } from './segmented-picker.style.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../base-Cl6v8-BZ.js';
 import '../../index-B9iart53.js';
 
@@ -41,6 +41,31 @@ class PlusSegmentedPicker extends Tailwind {
          */
         this.size = 'md';
         this.groupName = `group-${Math.random().toString(36).substring(2, 11)}`;
+        this.isFirstRender = true;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // Ensure overlay is positioned correctly after the component is fully rendered
+        setTimeout(() => {
+            const selectedItem = this.slots?.find((child) => child.checked && !child.disabled);
+            if (selectedItem) {
+                this.updateOverlay(selectedItem);
+            }
+        }, 0);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (this.isFirstRender && this.slots && this.slots.length > 0) {
+            this.isFirstRender = false;
+            // Initialize overlay position immediately after first render
+            const selectedItem = this.slots.find((child) => child.checked && !child.disabled);
+            if (selectedItem) {
+                // Use requestAnimationFrame to ensure DOM is fully rendered
+                requestAnimationFrame(() => {
+                    this.updateOverlay(selectedItem);
+                });
+            }
+        }
     }
     handleSlotChange() {
         if (this.slots && this.slots.length > 0) {
@@ -74,18 +99,48 @@ class PlusSegmentedPicker extends Tailwind {
                 this.updateOverlay(changedItem);
             });
         });
+        // Update overlay position after slot changes
         const selectedItem = this.slots.find((child) => child.checked && !child.disabled);
         if (selectedItem) {
-            this.updateOverlay(selectedItem);
+            // Use requestAnimationFrame to ensure elements are properly sized
+            requestAnimationFrame(() => {
+                this.updateOverlay(selectedItem);
+            });
         }
     }
     updateOverlay(selectedItem) {
         const overlay = this.shadowRoot?.querySelector('.selection-overlay');
-        const parentRect = this.getBoundingClientRect();
-        const itemRect = selectedItem.getBoundingClientRect();
-        overlay.style.width = `${itemRect.width}px`;
-        overlay.style.height = `${itemRect.height}px`;
-        overlay.style.transform = `translateX(${itemRect.left - parentRect.left - 2}px)`;
+        if (!overlay)
+            return;
+        // Wait for the next frame to ensure all elements are properly rendered and sized
+        requestAnimationFrame(() => {
+            const parentRect = this.getBoundingClientRect();
+            const itemRect = selectedItem.getBoundingClientRect();
+            // If either element has no size, wait and try again
+            if (parentRect.width === 0 || itemRect.width === 0) {
+                setTimeout(() => this.updateOverlay(selectedItem), 10);
+                return;
+            }
+            // Calculate offset relative to the parent's content area (including padding)
+            const parentStyle = getComputedStyle(this);
+            const parentPaddingLeft = parseFloat(parentStyle.paddingLeft) || 4; // Default to 4px (p-1 class)
+            const offsetX = itemRect.left - parentRect.left - parentPaddingLeft;
+            // Set initial position without transition for first render
+            const isInitialRender = !overlay.style.transform;
+            if (isInitialRender) {
+                overlay.style.transition = 'none';
+            }
+            overlay.style.width = `${itemRect.width}px`;
+            overlay.style.height = `${itemRect.height}px`;
+            overlay.style.transform = `translateX(${offsetX}px)`;
+            overlay.style.opacity = '1';
+            // Re-enable transition after initial positioning
+            if (isInitialRender) {
+                requestAnimationFrame(() => {
+                    overlay.style.transition = '';
+                });
+            }
+        });
     }
     render() {
         const { host, animationOverlay } = segmentedPickerStyle({

package/cdn/components/segmented-picker/segmented-picker.style.js

@@ -2,23 +2,14 @@ import { c as ce } from '../../index-B9iart53.js';
 
 const segmentedPickerStyle = ce({
     slots: {
-        host: 'plus-ui-element flex items-center p-0.5 gap-0.5 h-fit w-fit relative bg-color-disabled',
-        animationOverlay: 'selection-overlay absolute p-0.5 transition-all duration-300 ease-out',
+        host: 'plus-ui-element flex items-center p-1 gap-0.5 h-fit w-fit relative bg-color-default-default',
+        animationOverlay: 'selection-overlay absolute transition-all duration-200 ease-out opacity-0 w-0 h-0',
     },
     variants: {
         size: {
-            sm: {
-                // host: 'h-8',
-                animationOverlay: 'h-7',
-            },
-            md: {
-                // host: 'h-10',
-                animationOverlay: 'h-9',
-            },
-            lg: {
-                // host: 'h-12',
-                animationOverlay: 'h-11',
-            },
+            sm: {},
+            md: {},
+            lg: {},
         },
         shape: {
             circle: {

package/cdn/components/segmented-picker-item/index.js

@@ -2,7 +2,7 @@ import PlusSegmentedPickerItem from './segmented-picker-item.component.js';
 import '../../property-DiPQx9S3.js';
 import '../../lit-element-ByzbtpGk.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../state-D1d5Sfj8.js';
 import '../../utils/boolean-converter.js';
 import './segmented-picker-item.style.js';

package/cdn/components/segmented-picker-item/segmented-picker-item.component.js

@@ -4,7 +4,7 @@ import Tailwind from '../base/tailwind-base.js';
 import { r } from '../../state-D1d5Sfj8.js';
 import { booleanConverter } from '../../utils/boolean-converter.js';
 import { segmentedPickerItemStyle } from './segmented-picker-item.style.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 
 /**

package/cdn/components/segmented-picker-item/segmented-picker-item.style.js

@@ -1,12 +1,12 @@
 import { c as ce } from '../../index-B9iart53.js';
 
 const segmentedPickerItemStyle = ce({
-    base: 'plus-ui-element p-2 min-w-9 flex flex-row gap-2 items-center cursor-pointer justify-center font-medium relative text-sm text-color-placeholder select-none',
+    base: 'plus-ui-element min-w-9 flex flex-row gap-2 items-center cursor-pointer justify-center font-medium relative text-sm text-color-default select-none',
     variants: {
         size: {
-            sm: 'h-7 text-sm',
-            md: 'h-9 text-base',
-            lg: 'h-11 text-lg',
+            sm: 'text-sm py-1 px-3',
+            md: 'text-base py-1.5 px-3',
+            lg: 'text-lg py-1.5 px-4',
         },
         status: {
             default: '',

package/cdn/components/select/index.js

@@ -5,7 +5,7 @@ import '../../state-D1d5Sfj8.js';
 import '../../query-assigned-elements-B8Evmg7O.js';
 import '../../base-Cl6v8-BZ.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../floating-ui.dom-OBaMlALa.js';
 import './select.style.js';
 import '../../index-B9iart53.js';

package/cdn/components/select/select.js

@@ -7,7 +7,7 @@ import { c as computePosition, o as offset, s as shift, f as flip, b as autoUpda
 import { selectStyle } from './select.style.js';
 import { booleanConverter } from '../../utils/boolean-converter.js';
 import '../../base-Cl6v8-BZ.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 
 /**

package/cdn/components/select-item/index.js

@@ -2,7 +2,7 @@ import PlusSelectItem from './select-item.js';
 import '../../property-DiPQx9S3.js';
 import '../../lit-element-ByzbtpGk.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../if-defined-D-m3dgRf.js';
 import '../../live-BOAtKRUN.js';
 import '../../directive-DZCF8pFJ.js';

package/cdn/components/select-item/select-item.js

@@ -4,7 +4,7 @@ import { x } from '../../lit-element-ByzbtpGk.js';
 import { o } from '../../if-defined-D-m3dgRf.js';
 import { l } from '../../live-BOAtKRUN.js';
 import { booleanConverter } from '../../utils/boolean-converter.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../directive-DZCF8pFJ.js';
 
 /**

package/cdn/components/service/index.js

@@ -7,7 +7,7 @@ import '../toast-container/toast-container.style.js';
 import '../../index-B9iart53.js';
 import '../../services/toast.service.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../toast/toast.js';
 import '../toast/toast.style.js';
 import '../../controllers/slot-controller.js';

package/cdn/components/service/service.js

@@ -6,7 +6,7 @@ import '../toast-container/toast-container.style.js';
 import '../../index-B9iart53.js';
 import '../../services/toast.service.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../toast/toast.js';
 import '../toast/toast.style.js';
 import '../../controllers/slot-controller.js';

package/cdn/components/tab/index.js

@@ -3,7 +3,7 @@ import '../../property-DiPQx9S3.js';
 import '../../lit-element-ByzbtpGk.js';
 import '../../utils/boolean-converter.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import './styles.js';
 import '../../index-B9iart53.js';
 import '../../style-map-DC_vNus2.js';

package/cdn/components/tab/tab.js

@@ -4,7 +4,7 @@ import { booleanConverter } from '../../utils/boolean-converter.js';
 import Tailwind from '../base/tailwind-base.js';
 import { tabStyle } from './styles.js';
 import { o } from '../../style-map-DC_vNus2.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 import '../../directive-DZCF8pFJ.js';
 

package/cdn/components/tab-group/index.js

@@ -6,7 +6,7 @@ import '../../query-CHb9Ft_d.js';
 import '../../base-Cl6v8-BZ.js';
 import '../../utils/boolean-converter.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../tab/styles.js';
 import '../../index-B9iart53.js';
 

package/cdn/components/tab-group/tab-group.js

@@ -6,7 +6,7 @@ import { booleanConverter } from '../../utils/boolean-converter.js';
 import Tailwind from '../base/tailwind-base.js';
 import { tabStyle } from '../tab/styles.js';
 import '../../base-Cl6v8-BZ.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 
 /**

package/cdn/components/tab-panel/index.js

@@ -3,7 +3,7 @@ import '../../property-DiPQx9S3.js';
 import '../../lit-element-ByzbtpGk.js';
 import '../../utils/boolean-converter.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../tab/styles.js';
 import '../../index-B9iart53.js';
 

package/cdn/components/tab-panel/tab-panel.js

@@ -3,7 +3,7 @@ import { i, x } from '../../lit-element-ByzbtpGk.js';
 import { booleanConverter } from '../../utils/boolean-converter.js';
 import Tailwind from '../base/tailwind-base.js';
 import { tabStyle } from '../tab/styles.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 
 /**

package/cdn/components/tag/index.js

@@ -3,7 +3,7 @@ import '../../property-DiPQx9S3.js';
 import '../../lit-element-ByzbtpGk.js';
 import '../../utils/boolean-converter.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import './tag.style.js';
 import '../../index-B9iart53.js';
 import '../../style-map-DC_vNus2.js';

package/cdn/components/tag/tag.js

@@ -4,7 +4,7 @@ import Tailwind from '../base/tailwind-base.js';
 import { i, x } from '../../lit-element-ByzbtpGk.js';
 import { tagStyle } from './tag.style.js';
 import { o } from '../../style-map-DC_vNus2.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 import '../../directive-DZCF8pFJ.js';
 

package/cdn/components/text/index.js

@@ -2,7 +2,7 @@ import { PlusText } from './text.js';
 import '../../property-DiPQx9S3.js';
 import '../../lit-element-ByzbtpGk.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import './text.style.js';
 import '../../index-B9iart53.js';
 

package/cdn/components/text/text.js

@@ -2,7 +2,7 @@ import { _ as __decorate, n as n$1 } from '../../property-DiPQx9S3.js';
 import { x } from '../../lit-element-ByzbtpGk.js';
 import Tailwind from '../base/tailwind-base.js';
 import { textStyle } from './text.style.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 
 /**

package/cdn/components/textarea/index.js

@@ -6,7 +6,7 @@ import '../../query-CHb9Ft_d.js';
 import '../../base-Cl6v8-BZ.js';
 import '../../utils/boolean-converter.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../if-defined-D-m3dgRf.js';
 import '../../live-BOAtKRUN.js';
 import '../../directive-DZCF8pFJ.js';

package/cdn/components/textarea/textarea.js

@@ -10,7 +10,7 @@ import { textareaStyle } from './textarea.style.js';
 import { labelStyle } from '../label/label.style.js';
 import { captionStyle } from '../caption/caption.style.js';
 import '../../base-Cl6v8-BZ.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../directive-DZCF8pFJ.js';
 import '../../index-B9iart53.js';
 

package/cdn/components/toast/index.js

@@ -4,7 +4,7 @@ import '../../lit-element-ByzbtpGk.js';
 import './toast.style.js';
 import '../../index-B9iart53.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../controllers/slot-controller.js';
 import '../../utils/boolean-converter.js';
 

package/cdn/components/toast/toast.js

@@ -5,7 +5,7 @@ import Tailwind from '../base/tailwind-base.js';
 import { SlotController } from '../../controllers/slot-controller.js';
 import { booleanConverter } from '../../utils/boolean-converter.js';
 import '../../index-B9iart53.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 
 /**
  * @tag plus-toast

package/cdn/components/toast-container/index.js

@@ -6,7 +6,7 @@ import './toast-container.style.js';
 import '../../index-B9iart53.js';
 import '../../services/toast.service.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../toast/toast.js';
 import '../toast/toast.style.js';
 import '../../controllers/slot-controller.js';

package/cdn/components/toast-container/toast-container.js

@@ -6,7 +6,7 @@ import { ToastService } from '../../services/toast.service.js';
 import Tailwind from '../base/tailwind-base.js';
 import '../toast/toast.js';
 import '../../index-B9iart53.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../toast/toast.style.js';
 import '../../controllers/slot-controller.js';
 import '../../utils/boolean-converter.js';

package/cdn/components/toggle/index.js

@@ -7,7 +7,7 @@ import '../../base-Cl6v8-BZ.js';
 import '../../live-BOAtKRUN.js';
 import '../../directive-DZCF8pFJ.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../caption/caption.style.js';
 import '../../index-B9iart53.js';
 import '../label/label.style.js';

package/cdn/components/toggle/toggle.js

@@ -12,7 +12,7 @@ import { o } from '../../style-map-DC_vNus2.js';
 import { booleanConverter } from '../../utils/boolean-converter.js';
 import '../../base-Cl6v8-BZ.js';
 import '../../directive-DZCF8pFJ.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 
 /**

package/cdn/components/tooltip/index.js

@@ -6,7 +6,7 @@ import '../../query-assigned-elements-B8Evmg7O.js';
 import '../../base-Cl6v8-BZ.js';
 import '../../floating-ui.dom-OBaMlALa.js';
 import '../base/tailwind-base.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import './tooltip.style.js';
 import '../../index-B9iart53.js';
 

package/cdn/components/tooltip/tooltip.js

@@ -6,7 +6,7 @@ import { c as computePosition, o as offset, s as shift, f as flip, a as arrow, b
 import Tailwind from '../base/tailwind-base.js';
 import { tooltipStyle } from './tooltip.style.js';
 import '../../base-Cl6v8-BZ.js';
-import '../../global-Dle97gC_.js';
+import '../../global-GTfSG3gU.js';
 import '../../index-B9iart53.js';
 
 /**

package/cdn/factory/tailwind-factory.js

@@ -1,5 +1,5 @@
 import { r, a as r$1, i } from '../lit-element-ByzbtpGk.js';
-import { c as css_248z } from '../global-Dle97gC_.js';
+import { c as css_248z } from '../global-GTfSG3gU.js';
 
 const createTailwind = (customCss) => {
     var _a;