@strands.gg/accui 2.15.11 → 2.15.14

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import { _ as _export_sfc, S as StrandsUiButton, U as UiButtonContent, a as _sfc_main$G, b as _sfc_main$H, c as _sfc_main$I, d as createLucideIcon, M as Minus, e as StrandsUiCard, f as UiTooltip, g as UiDivider, u as useFloatingPosition, C as ChevronDown, h as StrandsUiInput, i as StrandsUiLoader, j as StrandsUiTabs, k as StrandsUiLink, l as StrandsUiAlert } from "./StrandsUIPlugin-JP858JzQ.es.js";
-import { m } from "./StrandsUIPlugin-JP858JzQ.es.js";
-import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, renderSlot, Teleport, createCommentVNode, toDisplayString, createTextVNode, ref, reactive, watch, withModifiers, createStaticVNode, createVNode, withDirectives, withCtx, unref, vModelText, nextTick, Fragment, Transition, createSlots, normalizeStyle, renderList, mergeProps, useSlots, inject, resolveDynamicComponent, onBeforeUnmount, withKeys, h, isMemoSame, getCurrentInstance } from "vue";
+import { _ as _export_sfc, S as StrandsUiButton, U as UiButtonContent, a as _sfc_main$G, b as _sfc_main$H, c as _sfc_main$I, d as createLucideIcon, M as Minus, e as StrandsUiCard, f as UiTooltip, g as UiDivider, u as useFloatingPosition, C as ChevronDown, h as StrandsUiInput, i as StrandsUiLoader, j as StrandsUiTabs, k as StrandsUiLink, l as StrandsUiAlert } from "./StrandsUIPlugin-Dws5Nqi_.es.js";
+import { m } from "./StrandsUIPlugin-Dws5Nqi_.es.js";
+import { defineComponent, computed, provide, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, renderSlot, Teleport, createCommentVNode, toDisplayString, ref, watch, createTextVNode, reactive, withModifiers, createStaticVNode, createVNode, withDirectives, withCtx, unref, vModelText, nextTick, Fragment, Transition, createSlots, normalizeStyle, renderList, mergeProps, useSlots, inject, resolveDynamicComponent, onBeforeUnmount, withKeys, h, isMemoSame, getCurrentInstance } from "vue";
 import { u as useStrandsConfig, p as provideStrandsConfig } from "./useStrandsConfig-fRu-OG08.es.js";
 import { s } from "./useStrandsConfig-fRu-OG08.es.js";
 import { u as useStrandsAuth } from "./useStrandsAuth-BCnUxo-R.es.js";
@@ -216,34 +216,60 @@ const _hoisted_4$u = ["id", "aria-pressed", "aria-labelledby"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "UiToggle",
   props: {
-    modelValue: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: void 0 },
+    checked: { type: [Boolean, String], default: void 0 },
     disabled: { type: Boolean, default: false },
     id: {},
     label: {},
     required: { type: Boolean }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "change"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const internalValue = ref(false);
+    const isChecked = computed(() => {
+      if (props.modelValue !== void 0) {
+        return Boolean(props.modelValue);
+      }
+      if (props.checked !== void 0) {
+        if (typeof props.checked === "string") {
+          return props.checked === "" || props.checked === "true";
+        }
+        return Boolean(props.checked);
+      }
+      return internalValue.value;
+    });
+    watch(() => props.checked, (newVal) => {
+      if (newVal !== void 0) {
+        if (typeof newVal === "string") {
+          internalValue.value = newVal === "" || newVal === "true";
+        } else {
+          internalValue.value = Boolean(newVal);
+        }
+      }
+    }, { immediate: true });
     const toggleId = computed(() => props.id || `ui-toggle-${Math.random().toString(36).substr(2, 9)}`);
     const toggleClasses = computed(() => [
       "ui-toggle",
       {
-        "ui-toggle--on": props.modelValue,
-        "ui-toggle--off": !props.modelValue,
+        "ui-toggle--on": isChecked.value,
+        "ui-toggle--off": !isChecked.value,
         "ui-toggle--disabled": props.disabled
       }
     ]);
     const thumbClasses = computed(() => [
       {
-        "ui-toggle-thumb--on": props.modelValue,
-        "ui-toggle-thumb--off": !props.modelValue
+        "ui-toggle-thumb--on": isChecked.value,
+        "ui-toggle-thumb--off": !isChecked.value
       }
     ]);
     const handleToggle = () => {
       if (props.disabled) return;
-      emit("update:modelValue", !props.modelValue);
+      const newValue = !isChecked.value;
+      internalValue.value = newValue;
+      emit("update:modelValue", newValue);
+      emit("change", newValue);
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$B, [
@@ -259,7 +285,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
           id: toggleId.value,
           type: "button",
           class: normalizeClass(toggleClasses.value),
-          "aria-pressed": _ctx.modelValue,
+          "aria-pressed": isChecked.value,
           "aria-labelledby": _ctx.label ? `${toggleId.value}-label` : void 0,
           onClick: handleToggle
         }, [
@@ -271,7 +297,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-ba05b9e3"]]);
+const UiToggle = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-aefb58fe"]]);
 const _hoisted_1$A = { class: "accui-component-scope" };
 const _hoisted_2$v = { class: "avatar-editor-simple" };
 const _hoisted_3$u = {
@@ -6029,7 +6055,8 @@ const _hoisted_14$f = {
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "UiSlider",
   props: {
-    modelValue: { default: 0 },
+    modelValue: { default: void 0 },
+    value: { default: void 0 },
     min: { default: 0 },
     max: { default: 100 },
     step: { default: 1 },
@@ -6048,7 +6075,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     color: { default: "primary" },
     inputId: {}
   },
-  emits: ["update:modelValue", "change", "focus", "blur"],
+  emits: ["update:modelValue", "change", "input", "focus", "blur"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -6056,13 +6083,33 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     const isDragging = ref(false);
     const inputCount = ref(0);
     const dragTimeout = ref(null);
+    const internalValue = ref(0);
+    const currentValue = computed(() => {
+      if (props.modelValue !== void 0) {
+        return Number(props.modelValue);
+      }
+      if (props.value !== void 0) {
+        return Number(props.value);
+      }
+      return internalValue.value;
+    });
+    watch(() => props.value, (newVal) => {
+      if (newVal !== void 0) {
+        internalValue.value = Number(newVal);
+      }
+    }, { immediate: true });
+    watch(() => props.modelValue, (newVal) => {
+      if (newVal !== void 0) {
+        internalValue.value = Number(newVal);
+      }
+    }, { immediate: true });
     const progressPercentage = computed(() => {
       const range = props.max - props.min;
-      const value = (props.modelValue - props.min) / range * 100;
+      const value = (currentValue.value - props.min) / range * 100;
       return Math.max(0, Math.min(100, value));
     });
     const displayValue = computed(() => {
-      return props.modelValue?.toFixed(props.step < 1 ? 1 : 0) || "0";
+      return currentValue.value?.toFixed(props.step < 1 ? 1 : 0) || "0";
     });
     const sizeClasses = computed(() => {
       return `slider-size-${props.size}`;
@@ -6100,7 +6147,9 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
           inputCount.value = 0;
         }, 100);
       }
+      internalValue.value = value;
       emit("update:modelValue", value);
+      emit("input", value);
     };
     const handleChange = (event) => {
       const target = event.target;
@@ -6156,7 +6205,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
               ref_key: "sliderRef",
               ref: sliderRef,
               type: "range",
-              value: _ctx.modelValue,
+              value: currentValue.value,
               min: _ctx.min,
               max: _ctx.max,
               step: _ctx.step,
@@ -6204,7 +6253,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-c27d9054"]]);
+const UiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-db4748a0"]]);
 const _hoisted_1$r = {
   key: 0,
   class: "radio-group-label"

package/dist/vite.cjs.js

@@ -1 +1 @@
-"use strict";function n(n={}){const{styles:s=1,accentColor:r="#EA00A8",useSquircle:t=1,...i}=n;let c;return{name:"@strands.gg/accui:vite-plugin",enforce:"pre",config:(n,{command:s})=>(c={accentColor:r,useSquircle:t,...i},{define:{t:JSON.stringify(c)}}),transformIndexHtml:{order:"pre",handler(n){if(r&&"#EA00A8"!==r){const s=`<style data-strands-accent>\n    :root {\n      --strands-accent: ${r};\n      --accui-strands-accent: ${r};\n      --accui-strands-50: color-mix(in srgb, ${r} 10%, white);\n      --accui-strands-100: color-mix(in srgb, ${r} 20%, white);\n      --accui-strands-200: color-mix(in srgb, ${r} 30%, white);\n      --accui-strands-300: color-mix(in srgb, ${r} 40%, white);\n      --accui-strands-400: color-mix(in srgb, ${r} 70%, white);\n      --accui-strands-500: ${r};\n      --accui-strands-600: color-mix(in srgb, ${r} 85%, black);\n      --accui-strands-700: color-mix(in srgb, ${r} 70%, black);\n      --accui-strands-800: color-mix(in srgb, ${r} 55%, black);\n      --accui-strands-900: color-mix(in srgb, ${r} 40%, black);\n      --accui-strands-950: color-mix(in srgb, ${r} 25%, black);\n    }</style>`;return n.replace("</head>",`  ${s}\n  </head>`)}return n}},transform:async(n,r)=>(s&&r.endsWith("main.ts")||r.endsWith("main.js"))&&!n.includes("@strands.gg/accui/style.css")?{code:`import '@strands.gg/accui/style.css'\n${n}`,map:null}:!r.endsWith("main.ts")&&!r.endsWith("main.js")||n.includes("setStrandsConfig")||n.includes("__STRANDS_INJECTED__")?null:{code:`\n// Auto-injected by @strands.gg/accui Vite plugin\nimport { setStrandsConfig } from '@strands.gg/accui'\n\nif (typeof window !== 'undefined') {\n  const strandsConfig = ${JSON.stringify(c)}\n  setStrandsConfig(strandsConfig)\n  window.__STRANDS_CONFIG__ = strandsConfig\n  window.__STRANDS_INJECTED__ = true\n}\n\n${n}`,map:null}}}Object.defineProperties(exports,{i:{value:1},[Symbol.toStringTag]:{value:"Module"}}),exports.StrandsAuth=n,exports.StrandsAuthVitePlugin=n,exports.createStrandsAuth=function(n={}){return{install(s){Promise.resolve().then(()=>require("./StrandsUIPlugin-DSCUXdBp.cjs.js")).then(n=>n.StrandsUIPlugin$1).then(n=>{const r=n.default;s.use(r)}),Promise.resolve().then(()=>require("./useStrandsConfig-Sr6NG90B.cjs.js")).then(n=>n.useStrandsConfig$1).then(s=>{const{setStrandsConfig:r}=s;r(n),"undefined"!=typeof window&&(window.t=n)})}}},exports.default=n,exports.strandsAuth=n;
+"use strict";function n(n={}){const{styles:s=1,accentColor:r="#EA00A8",useSquircle:t=1,...i}=n;let c;return{name:"@strands.gg/accui:vite-plugin",enforce:"pre",config:(n,{command:s})=>(c={accentColor:r,useSquircle:t,...i},{define:{t:JSON.stringify(c)}}),transformIndexHtml:{order:"pre",handler(n){if(r&&"#EA00A8"!==r){const s=`<style data-strands-accent>\n    :root {\n      --strands-accent: ${r};\n      --accui-strands-accent: ${r};\n      --accui-strands-50: color-mix(in srgb, ${r} 10%, white);\n      --accui-strands-100: color-mix(in srgb, ${r} 20%, white);\n      --accui-strands-200: color-mix(in srgb, ${r} 30%, white);\n      --accui-strands-300: color-mix(in srgb, ${r} 40%, white);\n      --accui-strands-400: color-mix(in srgb, ${r} 70%, white);\n      --accui-strands-500: ${r};\n      --accui-strands-600: color-mix(in srgb, ${r} 85%, black);\n      --accui-strands-700: color-mix(in srgb, ${r} 70%, black);\n      --accui-strands-800: color-mix(in srgb, ${r} 55%, black);\n      --accui-strands-900: color-mix(in srgb, ${r} 40%, black);\n      --accui-strands-950: color-mix(in srgb, ${r} 25%, black);\n    }</style>`;return n.replace("</head>",`  ${s}\n  </head>`)}return n}},transform:async(n,r)=>(s&&r.endsWith("main.ts")||r.endsWith("main.js"))&&!n.includes("@strands.gg/accui/style.css")?{code:`import '@strands.gg/accui/style.css'\n${n}`,map:null}:!r.endsWith("main.ts")&&!r.endsWith("main.js")||n.includes("setStrandsConfig")||n.includes("__STRANDS_INJECTED__")?null:{code:`\n// Auto-injected by @strands.gg/accui Vite plugin\nimport { setStrandsConfig } from '@strands.gg/accui'\n\nif (typeof window !== 'undefined') {\n  const strandsConfig = ${JSON.stringify(c)}\n  setStrandsConfig(strandsConfig)\n  window.__STRANDS_CONFIG__ = strandsConfig\n  window.__STRANDS_INJECTED__ = true\n}\n\n${n}`,map:null}}}Object.defineProperties(exports,{i:{value:1},[Symbol.toStringTag]:{value:"Module"}}),exports.StrandsAuth=n,exports.StrandsAuthVitePlugin=n,exports.createStrandsAuth=function(n={}){return{install(s){Promise.resolve().then(()=>require("./StrandsUIPlugin-D9RVai-I.cjs.js")).then(n=>n.StrandsUIPlugin$1).then(n=>{const r=n.default;s.use(r)}),Promise.resolve().then(()=>require("./useStrandsConfig-Sr6NG90B.cjs.js")).then(n=>n.useStrandsConfig$1).then(s=>{const{setStrandsConfig:r}=s;r(n),"undefined"!=typeof window&&(window.t=n)})}}},exports.default=n,exports.strandsAuth=n;

package/dist/vite.es.js

@@ -86,7 +86,7 @@ ${code}`,
 function createStrandsAuth(config = {}) {
   return {
     install(app) {
-      import("./StrandsUIPlugin-JP858JzQ.es.js").then((n) => n.n).then((module) => {
+      import("./StrandsUIPlugin-Dws5Nqi_.es.js").then((n) => n.n).then((module) => {
         const StrandsUIPlugin = module.default;
         app.use(StrandsUIPlugin);
       });

package/dist/webcomponents/define-element.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Utility for converting Vue components to Web Components
+ *
+ * This module provides helpers for registering Vue components as custom elements
+ * with proper style handling and Shadow DOM integration.
+ */
+import { type Component } from 'vue';
+export declare const baseStyles = "\n  :host {\n    /* Typography */\n    --accui-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif;\n    --accui-font-mono: \"Courier New\", Courier, ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\n\n    /* Brand Colors - inherit from document or use defaults */\n    --strands-accent: var(--strands-custom-accent, #EA00A8);\n    --accui-strands-accent: var(--strands-custom-accent, #EA00A8);\n    --accui-strands-50: var(--strands-custom-50, color-mix(in srgb, var(--strands-accent) 10%, white));\n    --accui-strands-100: var(--strands-custom-100, color-mix(in srgb, var(--strands-accent) 20%, white));\n    --accui-strands-200: var(--strands-custom-200, color-mix(in srgb, var(--strands-accent) 30%, white));\n    --accui-strands-300: var(--strands-custom-300, color-mix(in srgb, var(--strands-accent) 40%, white));\n    --accui-strands-400: var(--strands-custom-400, color-mix(in srgb, var(--strands-accent) 70%, white));\n    --accui-strands-500: var(--strands-custom-500, var(--strands-accent));\n    --accui-strands-600: var(--strands-custom-600, color-mix(in srgb, var(--strands-accent) 85%, black));\n    --accui-strands-700: var(--strands-custom-700, color-mix(in srgb, var(--strands-accent) 70%, black));\n    --accui-strands-800: var(--strands-custom-800, color-mix(in srgb, var(--strands-accent) 55%, black));\n    --accui-strands-900: var(--strands-custom-900, color-mix(in srgb, var(--strands-accent) 40%, black));\n    --accui-strands-950: var(--strands-custom-950, color-mix(in srgb, var(--strands-accent) 25%, black));\n\n    /* Neutral Colors */\n    --accui-neutral-50: #fafafa;\n    --accui-neutral-100: #f5f5f5;\n    --accui-neutral-200: #e5e5e5;\n    --accui-neutral-300: #d4d4d4;\n    --accui-neutral-400: #a3a3a3;\n    --accui-neutral-500: #737373;\n    --accui-neutral-600: #525252;\n    --accui-neutral-700: #404040;\n    --accui-neutral-800: #262626;\n    --accui-neutral-900: #171717;\n    --accui-neutral-950: #0a0a0a;\n\n    /* Gray Colors */\n    --accui-gray-50: #f9fafb;\n    --accui-gray-100: #f3f4f6;\n    --accui-gray-200: #e5e7eb;\n    --accui-gray-300: #d1d5db;\n    --accui-gray-400: #9ca3af;\n    --accui-gray-500: #6b7280;\n    --accui-gray-600: #4b5563;\n    --accui-gray-700: #374151;\n    --accui-gray-800: #1f2937;\n    --accui-gray-900: #111827;\n    --accui-gray-950: #030712;\n\n    /* Status Colors */\n    --accui-red-500: #ef4444;\n    --accui-red-600: #dc2626;\n    --accui-green-500: #22c55e;\n    --accui-green-600: #16a34a;\n    --accui-yellow-500: #f97316;\n    --accui-yellow-600: #ea580c;\n\n    /* Spacing Scale */\n    --accui-space-0: 0;\n    --accui-space-1: 0.25rem;\n    --accui-space-2: 0.5rem;\n    --accui-space-3: 0.75rem;\n    --accui-space-4: 1rem;\n    --accui-space-5: 1.25rem;\n    --accui-space-6: 1.5rem;\n    --accui-space-8: 2rem;\n\n    /* Border Radius */\n    --accui-radius-none: 0;\n    --accui-radius-sm: 0.125rem;\n    --accui-radius-md: 0.375rem;\n    --accui-radius-lg: 0.5rem;\n    --accui-radius-xl: 0.75rem;\n    --accui-radius-2xl: 1rem;\n    --accui-radius-full: 9999px;\n\n    /* Transition Timings */\n    --accui-transition-fast: 0.15s;\n    --accui-transition-duration: 0.25s;\n    --animation-duration: 0.25s;\n\n    /* Theme Colors (Light Mode Default) */\n    --accui-bg-primary: #ffffff;\n    --accui-bg-secondary: #f9fafb;\n    --accui-bg-tertiary: #f3f4f6;\n    --accui-text-primary: #111827;\n    --accui-text-secondary: #6b7280;\n    --accui-text-tertiary: #9ca3af;\n    --accui-border-primary: #e5e7eb;\n    --accui-border-secondary: #d1d5db;\n    --accui-border-tertiary: #9ca3af;\n\n    /* Button Variables */\n    --accui-button-primary-background: var(--accui-strands-500);\n    --accui-button-primary-background-hover: var(--accui-strands-600);\n    --accui-button-primary-text: #ffffff;\n    --accui-button-primary-border: transparent;\n\n    --accui-button-secondary-background: #f0f0f0;\n    --accui-button-secondary-background-hover: #e2e2e2;\n    --accui-button-secondary-text: #000000;\n    --accui-button-secondary-border: #f0f0f0;\n\n    --accui-button-ghost-background: transparent;\n    --accui-button-ghost-background-hover: var(--accui-bg-secondary);\n    --accui-button-ghost-text: var(--accui-text-primary);\n    --accui-button-ghost-border: transparent;\n\n    --accui-button-outline-background: transparent;\n    --accui-button-outline-background-hover: var(--accui-strands-50);\n    --accui-button-outline-text: var(--accui-strands-500);\n    --accui-button-outline-border: var(--accui-strands-500);\n\n    /* Input Variables */\n    --accui-input-background: var(--accui-bg-primary);\n    --accui-input-background-focus: var(--accui-bg-primary);\n    --accui-input-text: var(--accui-text-primary);\n    --accui-input-placeholder: var(--accui-text-tertiary);\n    --accui-input-border: var(--accui-border-primary);\n    --accui-input-border-focus: var(--strands-accent, #EA00A8);\n    --accui-input-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--strands-accent, #EA00A8) 10%, transparent);\n\n    /* Card Variables */\n    --accui-card-background: var(--accui-bg-primary);\n    --accui-card-border: var(--accui-border-primary);\n    --accui-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n\n    /* Alert Variables */\n    --accui-alert-success-background: #f0fdf4;\n    --accui-alert-success-text: #15803d;\n    --accui-alert-success-border: #bbf7d0;\n\n    --accui-alert-error-background: #fef2f2;\n    --accui-alert-error-text: #dc2626;\n    --accui-alert-error-border: #fecaca;\n\n    --accui-alert-warning-background: #fefce8;\n    --accui-alert-warning-text: #ca8a04;\n    --accui-alert-warning-border: #fde047;\n\n    --accui-alert-info-background: #eff6ff;\n    --accui-alert-info-text: #2563eb;\n    --accui-alert-info-border: #bfdbfe;\n\n    /* Toggle Variables */\n    --accui-toggle-background: var(--accui-border-secondary);\n    --accui-toggle-background-active: var(--accui-strands-500);\n    --accui-toggle-thumb: #ffffff;\n\n    /* Tabs Variables */\n    --accui-tabs-background: var(--accui-bg-secondary);\n    --accui-tabs-border: var(--accui-border-primary);\n    --accui-tabs-button-text: var(--accui-text-secondary);\n    --accui-tabs-button-text-active: var(--accui-text-primary);\n    --accui-tabs-button-background: var(--accui-bg-primary);\n    --accui-tabs-button-background-hover: var(--accui-bg-secondary);\n    --accui-tabs-indicator: var(--accui-strands-500);\n\n    /* Divider Variables */\n    --accui-divider-color: var(--accui-border-primary);\n    --accui-divider-text: var(--accui-text-secondary);\n\n    /* Display as inline-block by default */\n    display: inline-block;\n  }\n\n  /* Dark mode support - detect from document */\n  :host-context([data-theme=\"dark\"]) {\n    --accui-bg-primary: #0f172a;\n    --accui-bg-secondary: #1e293b;\n    --accui-bg-tertiary: #334155;\n    --accui-text-primary: #f8fafc;\n    --accui-text-secondary: #cbd5e1;\n    --accui-text-tertiary: #94a3b8;\n    --accui-border-primary: #334155;\n    --accui-border-secondary: #475569;\n    --accui-border-tertiary: #64748b;\n\n    --accui-button-secondary-background: var(--accui-bg-secondary);\n    --accui-button-secondary-background-hover: var(--accui-bg-tertiary);\n    --accui-button-secondary-text: var(--accui-text-primary);\n    --accui-button-secondary-border: var(--accui-bg-secondary);\n\n    --accui-button-ghost-background-hover: var(--accui-bg-tertiary);\n\n    --accui-button-outline-background-hover: var(--accui-strands-950);\n    --accui-button-outline-text: var(--accui-strands-400);\n    --accui-button-outline-border: var(--accui-strands-400);\n\n    --accui-alert-success-background: #0f2a1a;\n    --accui-alert-success-text: #4ade80;\n    --accui-alert-success-border: #16a34a;\n\n    --accui-alert-error-background: #2a0f0f;\n    --accui-alert-error-text: #f87171;\n    --accui-alert-error-border: #dc2626;\n\n    --accui-alert-warning-background: #2a2508;\n    --accui-alert-warning-text: #fbbf24;\n    --accui-alert-warning-border: #eab308;\n\n    --accui-alert-info-background: #0f1a2a;\n    --accui-alert-info-text: #60a5fa;\n    --accui-alert-info-border: #3b82f6;\n\n    --accui-toggle-background: var(--accui-border-tertiary);\n\n    --accui-tabs-background: var(--accui-bg-tertiary);\n    --accui-tabs-button-background: var(--accui-bg-secondary);\n    --accui-tabs-button-background-hover: var(--accui-bg-primary);\n  }\n\n  /* Base reset for Shadow DOM content */\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n";
+/**
+ * Creates and registers a custom element from a Vue component
+ *
+ * @param tagName - The custom element tag name (e.g., 'strands-button')
+ * @param component - The Vue component to convert
+ * @param dependencyStyles - Optional array of CSS strings from dependent components
+ *                          (injected by the Vite build plugin)
+ */
+export declare function registerCustomElement(tagName: string, component: Component, dependencyStyles?: string[]): void;
+/**
+ * Check if a custom element is already registered
+ */
+export declare function isElementRegistered(tagName: string): boolean;
+/**
+ * Wait for a custom element to be defined
+ */
+export declare function whenDefined(tagName: string): Promise<CustomElementConstructor>;

package/dist/webcomponents/entries/strands-alert.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Strands Alert Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-alert variant="success" title="Success!">
+ *   Operation completed successfully.
+ * </strands-alert>
+ * ```
+ */
+import UiAlert from '../../vue/ui/UiAlert.vue';
+export { UiAlert };

package/dist/webcomponents/entries/strands-button.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Strands Button Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-button variant="primary" size="md">
+ *   Click Me
+ * </strands-button>
+ * ```
+ */
+import UiButton from '../../vue/ui/UiButton.vue';
+export { UiButton };

package/dist/webcomponents/entries/strands-card.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Strands Card Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-card>
+ *   Card content goes here
+ * </strands-card>
+ * ```
+ */
+import UiCard from '../../vue/ui/UiCard.vue';
+export { UiCard };

package/dist/webcomponents/entries/strands-checkbox-group.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Strands Checkbox Group Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-checkbox-group name="choices" options='[{"value":"a","label":"Option A"},{"value":"b","label":"Option B"}]'>
+ * </strands-checkbox-group>
+ * ```
+ */
+import UiCheckboxGroup from '../../vue/ui/UiCheckboxGroup.vue';
+export { UiCheckboxGroup };

package/dist/webcomponents/entries/strands-divider.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Strands Divider Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-divider></strands-divider>
+ * <strands-divider orientation="vertical"></strands-divider>
+ * <strands-divider>Or</strands-divider>
+ * ```
+ */
+import UiDivider from '../../vue/ui/UiDivider.vue';
+export { UiDivider };

package/dist/webcomponents/entries/strands-input.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Strands Input Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-input
+ *   type="email"
+ *   label="Email"
+ *   placeholder="Enter your email"
+ * ></strands-input>
+ * ```
+ */
+import UiInput from '../../vue/ui/UiInput.vue';
+export { UiInput };

package/dist/webcomponents/entries/strands-link.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Strands Link Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-link href="https://example.com" external>
+ *   Visit Example
+ * </strands-link>
+ * ```
+ */
+import UiLink from '../../vue/ui/UiLink.vue';
+export { UiLink };

package/dist/webcomponents/entries/strands-loader-spinner.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Strands Loader Spinner Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-loader-spinner size="md"></strands-loader-spinner>
+ * ```
+ */
+import UiLoader from '../../vue/ui/UiLoader.vue';
+export { UiLoader };

package/dist/webcomponents/entries/strands-modal.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Strands Modal Web Component
+ *
+ * Note: Modals in web components have limitations due to Shadow DOM.
+ * The modal will render within its shadow root, which may affect
+ * positioning and overlay behaviour.
+ *
+ * Usage:
+ * ```html
+ * <strands-modal open title="Modal Title">
+ *   Modal content here
+ * </strands-modal>
+ * ```
+ */
+import UiModal from '../../vue/ui/UiModal.vue';
+export { UiModal };

package/dist/webcomponents/entries/strands-pill.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Strands Pill Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-pill variant="filled" color="primary">Badge</strands-pill>
+ * <strands-pill variant="dot" color="success">Active</strands-pill>
+ * ```
+ */
+import UiPill from '../../vue/ui/UiPill.vue';
+export { UiPill };

package/dist/webcomponents/entries/strands-radio-group.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Strands Radio Group Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-radio-group name="choice" options='[{"value":"a","label":"Option A"},{"value":"b","label":"Option B"}]'>
+ * </strands-radio-group>
+ * ```
+ */
+import UiRadioGroup from '../../vue/ui/UiRadioGroup.vue';
+export { UiRadioGroup };

package/dist/webcomponents/entries/strands-slider.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Strands Slider Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-slider min="0" max="100" value="50"></strands-slider>
+ * ```
+ */
+import UiSlider from '../../vue/ui/UiSlider.vue';
+export { UiSlider };

package/dist/webcomponents/entries/strands-table.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Strands Table Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-table
+ *   columns='[{"key":"name","label":"Name"},{"key":"email","label":"Email"}]'
+ *   data='[{"name":"John","email":"john@example.com"}]'
+ * ></strands-table>
+ * ```
+ */
+import UiTable from '../../vue/ui/UiTable.vue';
+export { UiTable };

package/dist/webcomponents/entries/strands-tabs.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Strands Tabs Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-tabs>
+ *   <!-- Tab content via slots -->
+ * </strands-tabs>
+ * ```
+ */
+import UiTabs from '../../vue/ui/UiTabs.vue';
+export { UiTabs };

package/dist/webcomponents/entries/strands-theme-toggle.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Strands Theme Toggle Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-theme-toggle></strands-theme-toggle>
+ * ```
+ */
+import UiThemeToggle from '../../vue/ui/UiThemeToggle.vue';
+export { UiThemeToggle };

package/dist/webcomponents/entries/strands-toggle.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Strands Toggle Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-toggle label="Enable notifications"></strands-toggle>
+ * ```
+ */
+import UiToggle from '../../vue/ui/UiToggle.vue';
+export { UiToggle };

package/dist/webcomponents/entries/strands-tooltip.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Strands Tooltip Web Component
+ *
+ * Usage:
+ * ```html
+ * <strands-tooltip content="Helpful information" position="top">
+ *   <button>Hover me</button>
+ * </strands-tooltip>
+ * ```
+ */
+import UiTooltip from '../../vue/ui/UiTooltip.vue';
+export { UiTooltip };

package/dist/webcomponents/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Strands UI Web Components
+ *
+ * This module exports all web component functionality for the Strands UI library.
+ */
+export * from './loader';
+export * from './registry';
+export * from './define-element';

package/dist/webcomponents/loader.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Strands UI Web Components Loader
+ *
+ * A custom element that lazy-loads Strands UI components on demand.
+ *
+ * Usage:
+ * ```html
+ * <script src="https://use.strandsui.com/loader.js"></script>
+ * <strands-loader components="button,alert,input"></strands-loader>
+ * ```
+ *
+ * Events:
+ * - 'strands:ready' - Dispatched when all requested components are loaded
+ * - 'strands:error' - Dispatched if any component fails to load
+ * - 'strands:progress' - Dispatched as each component loads
+ */
+import { type ComponentInfo } from './registry';
+declare const loadedComponents: Set<string>;
+/**
+ * Load a single component with deduplication
+ */
+declare function loadComponent(shortName: string): Promise<void>;
+/**
+ * Load multiple components in parallel
+ */
+declare function loadComponents(shortNames: string[], onProgress?: (loaded: number, total: number, componentName: string) => void): Promise<{
+    loaded: string[];
+    failed: Array<{
+        name: string;
+        error: Error;
+    }>;
+}>;
+/**
+ * StrandsLoader Custom Element
+ *
+ * Attributes:
+ * - components: Comma-separated list of component names to load
+ * - base-url: Override the base URL for component files
+ * - show-loading: Show a loading indicator whilst components load
+ */
+declare class StrandsLoader extends HTMLElement {
+    private _connected;
+    private _loadPromise;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private _render;
+    private _updateStatus;
+    private _loadComponents;
+    private _dispatchEvent;
+    /**
+     * Programmatically load additional components
+     */
+    load(componentNames: string | string[]): Promise<{
+        loaded: string[];
+        failed: string[];
+    }>;
+    /**
+     * Check if a component is loaded
+     */
+    isLoaded(componentName: string): boolean;
+    /**
+     * Get list of all available components
+     */
+    static get availableComponents(): string[];
+    /**
+     * Get component info
+     */
+    static getComponentInfo(name: string): ComponentInfo | undefined;
+}
+export { StrandsLoader, loadComponent, loadComponents, loadedComponents };

package/dist/webcomponents/registry.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Component Registry
+ *
+ * Maps component short names to their module paths for dynamic loading.
+ * This allows the loader to dynamically import only the requested components.
+ */
+export interface ComponentInfo {
+    /** The custom element tag name */
+    tagName: string;
+    /** The short name used in the loader (e.g., 'button' for strands-button) */
+    shortName: string;
+    /** Description of the component */
+    description: string;
+}
+/**
+ * Registry of all available components
+ */
+export declare const componentRegistry: Record<string, ComponentInfo>;
+/**
+ * Get component info by short name
+ */
+export declare function getComponentInfo(shortName: string): ComponentInfo | undefined;
+/**
+ * Get all available component short names
+ */
+export declare function getAvailableComponents(): string[];
+/**
+ * Check if a component exists in the registry
+ */
+export declare function isValidComponent(shortName: string): boolean;
+/**
+ * Parse a comma-separated list of component names
+ */
+export declare function parseComponentList(componentString: string): string[];
+/**
+ * Validate a list of component names and return invalid ones
+ */
+export declare function validateComponentList(components: string[]): {
+    valid: string[];
+    invalid: string[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.15.11",
+  "version": "2.15.14",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/index.cjs.js",
@@ -65,8 +65,10 @@
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly",
     "build-demo": "vite build --config vite.demo.config.ts",
+    "build-webcomponents": "vite build --config vite.webcomponents.config.ts",
     "serve": "vite",
     "serve-demo": "vite --config vite.demo.config.ts",
+    "serve-webcomponents": "serve -c serve.webcomponents.json -l 3002 dist-webcomponents",
     "dev": "vite build --watch",
     "preview": "vite preview",
     "preview-demo": "vite preview --config vite.demo.config.ts",