@plusui/library 0.1.0

package/cdn/components/svg-icon/icons.js

@@ -0,0 +1,31 @@
+import { E } from '../../lit-element-ByzbtpGk.js';
+
+const icons = {
+    xmark: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`,
+    'circle-info': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>`,
+    'circle-check': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>`,
+    'circle-exclamation': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
+    'triangle-exclamation': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>`,
+    'heart-circle-plus': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9l2.6-2.4C267.2 438.6 256 404.6 256 368c0-97.2 78.8-176 176-176c28.3 0 55 6.7 78.7 18.5c.9-6.5 1.3-13 1.3-19.6l0-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1l0 5.8c0 41.5 17.2 81.2 47.6 109.5zM432 512a144 144 0 1 0 0-288 144 144 0 1 0 0 288zm16-208l0 48 48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l48 0 0-48c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>`,
+    'circle-plus': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>`,
+    'chevron-up': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>`,
+    'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
+    'circle-question': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
+    // Password toggle icons
+    eye: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/></svg>`,
+    'eye-slash': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"/></svg>`,
+    // User interface icons
+    user: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/></svg>`,
+    lock: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"/></svg>`,
+    envelope: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>`,
+    check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
+    'angle-right': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>`,
+    minus: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
+    'solid-star': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
+    'regular-star': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>`,
+};
+function getIcon(name) {
+    return icons[name] || E;
+}
+
+export { getIcon, icons };

package/cdn/components/svg-icon/index.js

@@ -0,0 +1,8 @@
+import PlusSvgIcon from './svg-icon.js';
+export { getIcon, icons } from './icons.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-svg-icon', PlusSvgIcon);

package/cdn/components/svg-icon/svg-icon.js

@@ -0,0 +1,31 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, r, E, x } from '../../lit-element-ByzbtpGk.js';
+import { o } from '../../unsafe-html-BhmP6ONc.js';
+import { getIcon } from './icons.js';
+import '../../directive-DZCF8pFJ.js';
+
+class PlusSvgIcon extends r {
+    render() {
+        if (!this.iconName)
+            return E;
+        return x `${o(getIcon(this.iconName))}`;
+    }
+}
+PlusSvgIcon.styles = i `
+    :host {
+      display: inline-block;
+      height: fit-content;
+      width: fit-content;
+    }
+    svg {
+      height: 1em;
+      //   width: 1em;
+      vertical-align: middle;
+      fill: currentColor;
+    }
+  `;
+__decorate([
+    n({ type: String })
+], PlusSvgIcon.prototype, "iconName", void 0);
+
+export { PlusSvgIcon, PlusSvgIcon as default };

package/cdn/components/tab/index.js

@@ -0,0 +1,14 @@
+import PlusTab from './tab.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './styles.js';
+import '../../index-B9iart53.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
+
+// Make sure to set custom elements for auto-registration
+customElements.define('plus-tab', PlusTab);
+
+export { PlusTab };

package/cdn/components/tab/styles.js

@@ -0,0 +1,134 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const tabStyle = ce({
+    slots: {
+        tab: [
+            'plus-ui-element',
+            'tab',
+            'flex items-center gap-2',
+            'font-sans',
+            'cursor-pointer',
+            'border-0',
+            'transition-all duration-200',
+            'focus-visible:outline-none focus-visible:ring-default',
+            'whitespace-nowrap',
+        ],
+        tabHeader: ['flex'],
+        tabGroup: ['flex w-full'],
+        tabPanel: [
+            'w-full',
+            'focus-visible:outline-none focus-visible:ring-default',
+        ],
+        tabDismiss: [
+            'tab-dismiss',
+            'ml-1 p-0.5',
+            'text-color-muted',
+            'hover:text-color-default',
+            'focus:outline-none focus:ring-1 focus:ring-offset-1',
+            'rounded-full',
+            'transition-colors',
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                tab: ['text-sm', 'px-3 py-1.5'],
+            },
+            md: {
+                tab: ['text-base', 'px-4 py-2'],
+            },
+            lg: {
+                tab: ['text-lg', 'px-5 py-2.5'],
+            },
+        },
+        orientation: {
+            vertical: {
+                tabHeader: ['flex-col'],
+                tabGroup: ['flex-row gap-4'],
+                tab: [
+                    'justify-start text-left',
+                    'border-r-2 border-r-transparent',
+                    'hover:bg-color-subtle',
+                ],
+            },
+            horizontal: {
+                tabHeader: ['flex-row'],
+                tabGroup: ['flex-col gap-4'],
+                tab: [
+                    'justify-center text-center',
+                    'border-b-2 border-b-transparent',
+                    'hover:bg-color-subtle',
+                ],
+            },
+        },
+        active: {
+            true: {
+                tab: ['text-color-primary', 'border-color-primary'],
+                tabPanel: ['block'],
+            },
+            false: {
+                tab: ['text-color-default', 'border-color-default'],
+                tabPanel: ['hidden'],
+            },
+        },
+        disabled: {
+            true: {
+                tab: ['cursor-not-allowed', 'opacity-60', 'hover:bg-transparent'],
+            },
+        },
+        truncated: {
+            true: {
+                tab: ['truncate'],
+            },
+        },
+        animated: {
+            true: {
+                tab: [],
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        orientation: 'horizontal',
+        active: false,
+        disabled: false,
+        truncated: false,
+        animated: false,
+    },
+    compoundVariants: [
+        {
+            orientation: 'horizontal',
+            active: true,
+            animated: false,
+            class: {
+                tab: 'border-b-2 border-b-color-primary',
+            },
+        },
+        {
+            orientation: 'vertical',
+            active: true,
+            animated: false,
+            class: {
+                tab: 'border-r-2 border-r-color-primary',
+            },
+        },
+        {
+            orientation: 'horizontal',
+            active: true,
+            animated: true,
+            class: {
+                tab: 'border-b-transparent z-10',
+            },
+        },
+        {
+            orientation: 'vertical',
+            active: true,
+            animated: true,
+            class: {
+                tab: 'border-r-transparent z-10',
+            },
+        },
+    ],
+});
+
+export { tabStyle };

package/cdn/components/tab/tab.js

@@ -0,0 +1,212 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { tabStyle } from './styles.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-tab
+ * @summary Tab component that represents a single tab in a tab group.
+ *
+ * @slot - The default slot for tab content
+ * @slot prefix - Content to be placed before the tab content
+ * @slot suffix - Content to be placed after the tab content
+ *
+ * @csspart tab - The component's base wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the tab
+ * @cssproperty --active-color - Controls the color of the active indicator
+ * @cssproperty --bg-default - Controls the default background color
+ * @cssproperty --bg-hovered - Controls the background color when hovered
+ *
+ * @example
+ * ```html
+ * <plus-tab value="tab1">Tab 1</plus-tab>
+ * ```
+ */
+class PlusTab extends Tailwind {
+    constructor() {
+        super();
+        /**
+         * Sets the value of the tab, used for identification and selection
+         */
+        this.value = '';
+        /**
+         * Indicates if the tab is currently selected
+         * @default false
+         */
+        this.active = false;
+        /**
+         * Sets the size of the tab
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Disables the tab interaction
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Sets the orientation of the tabs
+         * - horizontal: Tabs arranged horizontally
+         * - vertical: Tabs arranged vertically
+         * @default 'horizontal'
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Enables the dismiss button to remove the tab
+         * @default false
+         */
+        this.dismissible = false;
+        /**
+         * Truncates the text if it's too long
+         * @default false
+         */
+        this.truncate = false;
+        /**
+         * Use animated indicator instead of border for active tab
+         * This is controlled by the parent tab-group
+         * @default false
+         */
+        this.animated = false;
+        this.addEventListener('click', this.handleClick);
+    }
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.emit('plus-tab-click', { detail: { value: this.value } });
+    }
+    handleDismiss(e) {
+        e.stopPropagation();
+        this.emit('plus-tab-dismiss', { detail: { value: this.value } });
+    }
+    render() {
+        const { size, active, disabled, orientation, prefixIcon, suffixIcon, dismissible, truncate, animated, } = this;
+        const dynamicStyles = {
+            '--tab-text-color': 'var(--text-color, var(--plus-color-text-default))',
+            '--tab-active-color': 'var(--active-color, var(--plus-color-primary-default))',
+            '--tab-bg-default': 'var(--bg-default, transparent)',
+            '--tab-bg-hovered': 'var(--bg-hovered, var(--plus-color-background-default-hovered))',
+        };
+        // Create tab style properties from component state
+        const tabStyleProps = {
+            size,
+            active,
+            disabled,
+            orientation,
+            truncated: truncate,
+            animated,
+        };
+        const { tab } = tabStyle(tabStyleProps);
+        return x `
+      <div
+        part="tab"
+        class=${tab()}
+        role="tab"
+        aria-selected=${active}
+        aria-disabled=${disabled}
+        tabindex=${disabled ? -1 : active ? 0 : -1}
+        style=${o(dynamicStyles)}
+      >
+        ${prefixIcon
+            ? x `<span class="tab-prefix-icon"
+              ><i class="${prefixIcon}"></i
+            ></span>`
+            : ''}
+        <slot></slot>
+        ${suffixIcon
+            ? x `<span class="tab-suffix-icon"
+              ><i class="${suffixIcon}"></i
+            ></span>`
+            : ''}
+        ${dismissible
+            ? x `<button
+              type="button"
+              class="tab-dismiss-button"
+              aria-label="Dismiss tab"
+              @click=${this.handleDismiss}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 384 512"
+                class="h-3 w-3 fill-current"
+              >
+                <path
+                  d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+                />
+              </svg>
+            </button>`
+            : ''}
+      </div>
+    `;
+    }
+}
+PlusTab.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: inline-block;
+      }
+
+      .tab-prefix-icon,
+      .tab-suffix-icon {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .tab {
+        outline: none;
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusTab.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusTab.prototype, "active", void 0);
+__decorate([
+    n({ type: String })
+], PlusTab.prototype, "size", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value === 'false' ? false : Boolean(value)),
+    })
+], PlusTab.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], PlusTab.prototype, "orientation", void 0);
+__decorate([
+    n({ type: String, attribute: 'prefix-icon' })
+], PlusTab.prototype, "prefixIcon", void 0);
+__decorate([
+    n({ type: String, attribute: 'suffix-icon' })
+], PlusTab.prototype, "suffixIcon", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => (value === 'false' ? false : Boolean(value)),
+    })
+], PlusTab.prototype, "dismissible", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => (value === 'false' ? false : Boolean(value)),
+    })
+], PlusTab.prototype, "truncate", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => (value === 'false' ? false : Boolean(value)),
+    })
+], PlusTab.prototype, "animated", void 0);
+
+export { PlusTab, PlusTab as default };

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

@@ -0,0 +1,15 @@
+import PlusTabGroup from './tab-group.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 '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../tab/styles.js';
+import '../../index-B9iart53.js';
+
+// Define the element
+customElements.define('plus-tab-group', PlusTabGroup);
+
+export { PlusTabGroup };