@plusui/library 0.1.3 → 0.1.5

package/cdn/components/popconfirm/popconfirm.js

@@ -1,12 +1,13 @@
-import { _ as __decorate, n } from '../../property-Dz31PgR6.js';
-import { E, x } from '../../lit-element-BNK__jO-.js';
-import { r } from '../../state-BRspp5eU.js';
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { E, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
 import { o } from '../../query-assigned-elements-B8Evmg7O.js';
-import { c as computePosition, o as offset, f as flip, s as shift, a as arrow, b as autoUpdate } from '../../floating-ui.dom-BpzIshEG.js';
+import { c as computePosition, o as offset, f as flip, s as shift, a as arrow, b as autoUpdate } from '../../floating-ui.dom-OBaMlALa.js';
+import { booleanConverter } from '../../utils/boolean-converter.js';
 import Tailwind from '../base/tailwind-base.js';
 import { popconfirmStyle } from './popconfirm.style.js';
 import '../../base-Cl6v8-BZ.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import '../../index-B9iart53.js';
 
 var PopconfirmTrigger;
@@ -147,9 +148,6 @@ class PlusPopconfirm extends Tailwind {
         /**
          * Determines whether a status icon should be displayed in the popconfirm.
          *
-         * - `true` (default) - An icon representing the status will be displayed.
-         * - `false` - No icon will be displayed.
-         *
          * @type {boolean}
          * @default true
          */
@@ -157,9 +155,6 @@ class PlusPopconfirm extends Tailwind {
         /**
          * Determines whether the arrow should be displayed.
          *
-         * - `true` (default) - Arrow will be displayed.
-         * - `false` - Arrow will be hidden.
-         *
          * @type {boolean}
          * @default true
          */
@@ -369,10 +364,10 @@ class PlusPopconfirm extends Tailwind {
             <div class=${headerLeft()}>
               <slot name="icon">
                 ${this.statusIcon
-            ? x `<plus-svg-icon
+            ? x `<plus-icon
                       class="flex"
-                      iconName=${statusIconMap[this.status]}
-                    ></plus-svg-icon>`
+                      icon-name=${statusIconMap[this.status]}
+                    ></plus-icon>`
             : E}
               </slot>
 
@@ -383,13 +378,13 @@ class PlusPopconfirm extends Tailwind {
 
             <div class=${headerRight()} part="close">
               <slot name="actions">
-                <plus-svg-icon
-                  iconName="xmark"
+                <plus-icon
+                  icon-name="xmark"
                   @click=${this.closePopconfirm}
                   role="button"
                   tabindex="0"
                   aria-label="Close popconfirm"
-                ></plus-svg-icon>
+                ></plus-icon>
               </slot>
             </div>
           </header>
@@ -458,15 +453,17 @@ __decorate([
 __decorate([
     n({
         type: Boolean,
-        converter: (value) => value !== 'false',
+        converter: booleanConverter,
         attribute: 'status-icon',
+        reflect: true,
     })
 ], PlusPopconfirm.prototype, "statusIcon", void 0);
 __decorate([
     n({
         type: Boolean,
-        converter: (value) => value !== 'false',
+        converter: booleanConverter,
         attribute: 'show-arrow',
+        reflect: true,
     })
 ], PlusPopconfirm.prototype, "showArrow", void 0);
 __decorate([

package/cdn/components/popover/index.js

@@ -1,12 +1,13 @@
 import PlusPopover from './popover.js';
-import '../../property-Dz31PgR6.js';
-import '../../lit-element-BNK__jO-.js';
-import '../../state-BRspp5eU.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
 import '../../query-assigned-elements-B8Evmg7O.js';
 import '../../base-Cl6v8-BZ.js';
-import '../../floating-ui.dom-BpzIshEG.js';
+import '../../floating-ui.dom-OBaMlALa.js';
+import '../../utils/boolean-converter.js';
 import '../base/tailwind-base.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import './popover.style.js';
 import '../../index-B9iart53.js';
 

package/cdn/components/popover/popover.js

@@ -1,12 +1,13 @@
-import { _ as __decorate, n } from '../../property-Dz31PgR6.js';
-import { E, x } from '../../lit-element-BNK__jO-.js';
-import { r } from '../../state-BRspp5eU.js';
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { E, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
 import { o } from '../../query-assigned-elements-B8Evmg7O.js';
-import { c as computePosition, o as offset, f as flip, s as shift, a as arrow, b as autoUpdate } from '../../floating-ui.dom-BpzIshEG.js';
+import { c as computePosition, o as offset, f as flip, s as shift, a as arrow, b as autoUpdate } from '../../floating-ui.dom-OBaMlALa.js';
+import { booleanConverter } from '../../utils/boolean-converter.js';
 import Tailwind from '../base/tailwind-base.js';
 import { popoverStyle } from './popover.style.js';
 import '../../base-Cl6v8-BZ.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import '../../index-B9iart53.js';
 
 var PopoverTrigger;
@@ -347,9 +348,9 @@ class PlusPopover extends Tailwind {
           <div class=${headerLeft()}>
             <slot name="icon">
               ${this.statusIcon
-            ? x `<plus-svg-icon
-                    iconName=${statusIconMap[this.status]}
-                  ></plus-svg-icon>`
+            ? x `<plus-icon
+                    icon-name=${statusIconMap[this.status]}
+                  ></plus-icon>`
             : E}
             </slot>
             <div class="${title()}" part="title" id="popover-title">
@@ -360,13 +361,13 @@ class PlusPopover extends Tailwind {
           <div class=${headerRight()} part="close">
             <slot name="actions">
               ${this.dismissable &&
-            x `<plus-svg-icon
-                iconName="xmark"
+            x `<plus-icon
+                icon-name="xmark"
                 @click=${() => this.closePopover(true)}
                 role="button"
                 tabindex="0"
                 aria-label="Close popover"
-              ></plus-svg-icon>`}
+              ></plus-icon>`}
             </slot>
           </div>
         </header>
@@ -402,13 +403,27 @@ __decorate([
     n({ type: String })
 ], PlusPopover.prototype, "status", void 0);
 __decorate([
-    n({ type: Boolean, converter: (value) => value !== 'false' })
+    n({
+        type: Boolean,
+        converter: booleanConverter,
+        reflect: true,
+    })
 ], PlusPopover.prototype, "dismissable", void 0);
 __decorate([
-    n({ type: Boolean, converter: (value) => value !== 'false' })
+    n({
+        type: Boolean,
+        converter: booleanConverter,
+        attribute: 'status-icon',
+        reflect: true,
+    })
 ], PlusPopover.prototype, "statusIcon", void 0);
 __decorate([
-    n({ type: Boolean, converter: (value) => value !== 'false' })
+    n({
+        type: Boolean,
+        converter: booleanConverter,
+        attribute: 'show-arrow',
+        reflect: true,
+    })
 ], PlusPopover.prototype, "showArrow", void 0);
 __decorate([
     r()

package/cdn/components/radio/index.js

@@ -1,14 +1,15 @@
 import PlusRadio from './radio.js';
-import '../../property-Dz31PgR6.js';
-import '../../lit-element-BNK__jO-.js';
-import '../../state-BRspp5eU.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
 import '../../query-CHb9Ft_d.js';
 import '../../base-Cl6v8-BZ.js';
+import '../../utils/boolean-converter.js';
 import '../base/tailwind-base.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import './radio.style.js';
 import '../../index-B9iart53.js';
-import '../../style-map-Cgr6kXUm.js';
+import '../../style-map-DC_vNus2.js';
 import '../../directive-DZCF8pFJ.js';
 
 customElements.define('plus-radio', PlusRadio);

package/cdn/components/radio/radio.js

@@ -1,12 +1,13 @@
-import { _ as __decorate, n } from '../../property-Dz31PgR6.js';
-import { x } from '../../lit-element-BNK__jO-.js';
-import { r } from '../../state-BRspp5eU.js';
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
 import { e } from '../../query-CHb9Ft_d.js';
+import { booleanConverter } from '../../utils/boolean-converter.js';
 import Tailwind from '../base/tailwind-base.js';
 import { radioStyle } from './radio.style.js';
-import { o } from '../../style-map-Cgr6kXUm.js';
+import { o } from '../../style-map-DC_vNus2.js';
 import '../../base-Cl6v8-BZ.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import '../../index-B9iart53.js';
 import '../../directive-DZCF8pFJ.js';
 
@@ -37,37 +38,19 @@ class PlusRadio extends Tailwind {
          * @default 'md'
          */
         this.size = 'md';
-        /**
-         * Indicates whether the radio button is checked
-         * @default false
-         */
+        /** Whether the radio is checked. */
         this.checked = false;
-        /**
-         * Indicates if the radio button is in an error state
-         * @default false
-         */
+        /** Whether the radio is in an error state. */
         this.error = false;
-        /**
-         * Disables the radio button interaction
-         * @default false
-         */
+        /** Whether the radio is disabled. */
         this.disabled = false;
-        /**
-         * Makes the radio button readonly (non-interactive but not disabled)
-         * @default false
-         */
+        /** Whether the radio is readonly. */
         this.readonly = false;
-        /**
-         * The name of the radio button, used for form submission and radio grouping
-         */
+        /** The radio's name attribute. */
         this.name = '';
-        /**
-         * Indicates if the radio input is required
-         */
+        /** Whether the radio is required. */
         this.required = false;
-        /**
-         * The value associated with the radio button
-         */
+        /** The radio's value attribute. */
         this.value = '';
         /**
          * Internal state to track if the radio button has focus
@@ -208,22 +191,22 @@ __decorate([
     n({ type: String })
 ], PlusRadio.prototype, "text", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({ type: Boolean, reflect: true, converter: booleanConverter })
 ], PlusRadio.prototype, "checked", void 0);
 __decorate([
-    n({ type: Boolean })
+    n({ type: Boolean, converter: booleanConverter, reflect: true })
 ], PlusRadio.prototype, "error", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({ type: Boolean, reflect: true, converter: booleanConverter })
 ], PlusRadio.prototype, "disabled", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({ type: Boolean, reflect: true, converter: booleanConverter })
 ], PlusRadio.prototype, "readonly", void 0);
 __decorate([
     n()
 ], PlusRadio.prototype, "name", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({ type: Boolean, reflect: true, converter: booleanConverter })
 ], PlusRadio.prototype, "required", void 0);
 __decorate([
     n()

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

@@ -1,8 +1,9 @@
 import PlusRadioGroup from './radio-group.js';
-import '../../property-Dz31PgR6.js';
-import '../../lit-element-BNK__jO-.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../utils/boolean-converter.js';
 import '../base/tailwind-base.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import './radio-group.style.js';
 import '../../index-B9iart53.js';
 

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

@@ -1,8 +1,9 @@
-import { _ as __decorate, n } from '../../property-Dz31PgR6.js';
-import { x } from '../../lit-element-BNK__jO-.js';
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { booleanConverter } from '../../utils/boolean-converter.js';
 import Tailwind from '../base/tailwind-base.js';
 import { radioGroupStyle } from './radio-group.style.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import '../../index-B9iart53.js';
 
 class PlusRadioGroup extends Tailwind {
@@ -10,7 +11,9 @@ class PlusRadioGroup extends Tailwind {
         super();
         this.name = '';
         this.value = '';
+        /** Disables all radio buttons in the group. */
         this.disabled = false;
+        /** Makes the radio group required for form submission. */
         this.required = false;
         /**
          * The size of all radio buttons in the group
@@ -20,9 +23,7 @@ class PlusRadioGroup extends Tailwind {
          * @default 'md'
          */
         this.size = 'md';
-        /**
-         * Shows error styling on the radio group
-         */
+        /** Displays the radio buttons in an error state. */
         this.error = false;
         /**
          * Orientation of the radio buttons
@@ -124,16 +125,16 @@ __decorate([
     n()
 ], PlusRadioGroup.prototype, "value", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({ type: Boolean, reflect: true, converter: booleanConverter })
 ], PlusRadioGroup.prototype, "disabled", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({ type: Boolean, reflect: true, converter: booleanConverter })
 ], PlusRadioGroup.prototype, "required", void 0);
 __decorate([
     n({ type: String })
 ], PlusRadioGroup.prototype, "size", void 0);
 __decorate([
-    n({ type: Boolean })
+    n({ type: Boolean, converter: booleanConverter, reflect: true })
 ], PlusRadioGroup.prototype, "error", void 0);
 __decorate([
     n()

package/cdn/components/rating/index.js

@@ -1,19 +1,17 @@
 import PlusRating from './rating.js';
-import '../../property-Dz31PgR6.js';
-import '../../lit-element-BNK__jO-.js';
-import '../../state-BRspp5eU.js';
-import '../../style-map-Cgr6kXUm.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../style-map-DC_vNus2.js';
 import '../../directive-DZCF8pFJ.js';
-import '../../if-defined-DpyZ37D-.js';
+import '../../if-defined-D-m3dgRf.js';
 import './rating.style.js';
 import '../../index-B9iart53.js';
 import '../label/label.style.js';
 import '../caption/caption.style.js';
 import '../base/tailwind-base.js';
-import '../../global-CvNEUQeA.js';
-import '../svg-icon/svg-icon.js';
-import '../../unsafe-html-BXTWMFA8.js';
-import '../svg-icon/icons.js';
+import '../../global-CFlb4NrK.js';
+import '../../utils/boolean-converter.js';
 
 customElements.define('plus-rating', PlusRating);
 

package/cdn/components/rating/rating.js

@@ -1,18 +1,16 @@
-import { _ as __decorate, n } from '../../property-Dz31PgR6.js';
-import { E, x } from '../../lit-element-BNK__jO-.js';
-import { r } from '../../state-BRspp5eU.js';
-import { o as o$1 } from '../../style-map-Cgr6kXUm.js';
-import { o } from '../../if-defined-DpyZ37D-.js';
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { E, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { o as o$1 } from '../../style-map-DC_vNus2.js';
+import { o } from '../../if-defined-D-m3dgRf.js';
 import { ratingStyle } from './rating.style.js';
 import Tailwind from '../base/tailwind-base.js';
-import '../svg-icon/svg-icon.js';
+import { booleanConverter } from '../../utils/boolean-converter.js';
 import { labelStyle } from '../label/label.style.js';
 import { captionStyle } from '../caption/caption.style.js';
 import '../../directive-DZCF8pFJ.js';
 import '../../index-B9iart53.js';
-import '../../global-CvNEUQeA.js';
-import '../../unsafe-html-BXTWMFA8.js';
-import '../svg-icon/icons.js';
+import '../../global-CFlb4NrK.js';
 
 /**
  * @tag plus-rating
@@ -226,7 +224,7 @@ class PlusRating extends Tailwind {
               >
                 <!-- Background Star -->
                 <span class="${styles.starIcon()} ${currentIconColorClass}">
-                  <plus-svg-icon iconName=${currentIconName}></plus-svg-icon>
+                  <plus-icon icon-name=${currentIconName}></plus-icon>
                 </span>
 
                 <!-- Foreground Partial Star -->
@@ -236,9 +234,7 @@ class PlusRating extends Tailwind {
                         class="${styles.starPartial()} ${styles.starIcon()} text-color-primary"
                         style=${o$1({ width: partialWidth })}
                       >
-                        <plus-svg-icon
-                          iconName=${this.filledIconName}
-                        ></plus-svg-icon>
+                        <plus-icon icon-name=${this.filledIconName}></plus-icon>
                       </span>
                     `
                 : E}
@@ -262,10 +258,10 @@ __decorate([
     n({ type: Number })
 ], PlusRating.prototype, "precision", void 0);
 __decorate([
-    n({ type: Boolean })
+    n({ type: Boolean, converter: booleanConverter, reflect: true })
 ], PlusRating.prototype, "readonly", void 0);
 __decorate([
-    n({ type: Boolean })
+    n({ type: Boolean, converter: booleanConverter, reflect: true })
 ], PlusRating.prototype, "disabled", void 0);
 __decorate([
     n({ type: String })
@@ -286,7 +282,7 @@ __decorate([
     n({ type: String })
 ], PlusRating.prototype, "caption", void 0);
 __decorate([
-    n({ type: Boolean })
+    n({ type: Boolean, converter: booleanConverter, reflect: true })
 ], PlusRating.prototype, "required", void 0);
 __decorate([
     r()

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

@@ -1,8 +1,8 @@
 import PlusSegmentedPicker from './segmented-picker.component.js';
-import '../../property-Dz31PgR6.js';
-import '../../lit-element-BNK__jO-.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
 import '../base/tailwind-base.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import '../../query-assigned-elements-B8Evmg7O.js';
 import '../../base-Cl6v8-BZ.js';
 import './segmented-picker.style.js';

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

@@ -1,9 +1,9 @@
-import { _ as __decorate, n } from '../../property-Dz31PgR6.js';
-import { x } from '../../lit-element-BNK__jO-.js';
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+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-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import '../../base-Cl6v8-BZ.js';
 import '../../index-B9iart53.js';
 

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

@@ -1,9 +1,10 @@
 import PlusSegmentedPickerItem from './segmented-picker-item.component.js';
-import '../../property-Dz31PgR6.js';
-import '../../lit-element-BNK__jO-.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
 import '../base/tailwind-base.js';
-import '../../global-CvNEUQeA.js';
-import '../../state-BRspp5eU.js';
+import '../../global-CFlb4NrK.js';
+import '../../state-D1d5Sfj8.js';
+import '../../utils/boolean-converter.js';
 import './segmented-picker-item.style.js';
 import '../../index-B9iart53.js';
 

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

@@ -1,9 +1,10 @@
-import { _ as __decorate, n } from '../../property-Dz31PgR6.js';
-import { x } from '../../lit-element-BNK__jO-.js';
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
 import Tailwind from '../base/tailwind-base.js';
-import { r } from '../../state-BRspp5eU.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { booleanConverter } from '../../utils/boolean-converter.js';
 import { segmentedPickerItemStyle } from './segmented-picker-item.style.js';
-import '../../global-CvNEUQeA.js';
+import '../../global-CFlb4NrK.js';
 import '../../index-B9iart53.js';
 
 /**
@@ -14,15 +15,12 @@ import '../../index-B9iart53.js';
  *
  * @csspart label - The label element.
  * @csspart input - The input element.
+ * @cssproperty --active-color - Color of the active indicator
  */
 class PlusSegmentedPickerItem extends Tailwind {
     constructor() {
         super(...arguments);
-        /**
-         * Whether the item is checked.
-         * @type {boolean}
-         * @default false
-         */
+        /** The value associated with the item. */
         this.checked = false;
         /**
          * The status of the item.
@@ -30,11 +28,7 @@ class PlusSegmentedPickerItem extends Tailwind {
          * @default 'default'
          */
         this.status = 'default';
-        /**
-         * Whether the item is disabled.
-         * @type {boolean}
-         * @default false
-         */
+        /** Disables the item, making it non-interactive. */
         this.disabled = false;
         /**
          * The shape of the item.
@@ -113,13 +107,13 @@ class PlusSegmentedPickerItem extends Tailwind {
     }
 }
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({ type: Boolean, reflect: true, converter: booleanConverter })
 ], PlusSegmentedPickerItem.prototype, "checked", void 0);
 __decorate([
     n({ type: String, reflect: true })
 ], PlusSegmentedPickerItem.prototype, "status", void 0);
 __decorate([
-    n({ type: Boolean, reflect: true })
+    n({ type: Boolean, reflect: true, converter: booleanConverter })
 ], PlusSegmentedPickerItem.prototype, "disabled", void 0);
 __decorate([
     n({ type: String, reflect: true })

package/cdn/components/select/index.js

@@ -1,14 +1,15 @@
 import PlusSelect from './select.js';
-import '../../property-Dz31PgR6.js';
-import '../../lit-element-BNK__jO-.js';
-import '../../state-BRspp5eU.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
 import '../../query-assigned-elements-B8Evmg7O.js';
 import '../../base-Cl6v8-BZ.js';
 import '../base/tailwind-base.js';
-import '../../global-CvNEUQeA.js';
-import '../../floating-ui.dom-BpzIshEG.js';
+import '../../global-CFlb4NrK.js';
+import '../../floating-ui.dom-OBaMlALa.js';
 import './select.style.js';
 import '../../index-B9iart53.js';
+import '../../utils/boolean-converter.js';
 
 customElements.define('plus-select', PlusSelect);