@strands.gg/accui 2.15.12 → 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

@@ -11,9 +11,10 @@ export declare const baseStyles = "\n  :host {\n    /* Typography */\n    --accu
  *
  * @param tagName - The custom element tag name (e.g., 'strands-button')
  * @param component - The Vue component to convert
- * @param additionalStyles - Optional additional CSS to inject
+ * @param dependencyStyles - Optional array of CSS strings from dependent components
+ *                          (injected by the Vite build plugin)
  */
-export declare function registerCustomElement(tagName: string, component: Component, additionalStyles?: string): void;
+export declare function registerCustomElement(tagName: string, component: Component, dependencyStyles?: string[]): void;
 /**
  * Check if a custom element is already registered
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strands.gg/accui",
-  "version": "2.15.12",
+  "version": "2.15.14",
   "description": "Strands Authentication UI Components",
   "type": "module",
   "main": "./dist/index.cjs.js",