@strands.gg/accui 2.11.5 → 2.11.6

package/dist/index.es.js

@@ -92,8 +92,8 @@ const _hoisted_4$G = {
   viewBox: "0 0 20 20",
   "aria-hidden": "true"
 };
-const _hoisted_5$B = ["d"];
-const _hoisted_6$v = { class: "alert-text-container" };
+const _hoisted_5$A = ["d"];
+const _hoisted_6$u = { class: "alert-text-container" };
 const _hoisted_7$s = {
   key: 0,
   class: "alert-dismiss-container"
@@ -146,10 +146,10 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
                   "fill-rule": "evenodd",
                   d: iconPath.value,
                   "clip-rule": "evenodd"
-                }, null, 8, _hoisted_5$B)
+                }, null, 8, _hoisted_5$A)
               ]))
             ]),
-            createElementVNode("div", _hoisted_6$v, [
+            createElementVNode("div", _hoisted_6$u, [
               _ctx.title ? (openBlock(), createElementBlock("h3", {
                 key: 0,
                 class: normalizeClass(titleClasses.value)
@@ -197,8 +197,8 @@ const _hoisted_1$S = {
 const _hoisted_2$K = ["width", "height"];
 const _hoisted_3$H = ["d"];
 const _hoisted_4$F = ["stroke-width"];
-const _hoisted_5$A = ["stroke-width"];
-const _hoisted_6$u = ["width", "height"];
+const _hoisted_5$z = ["stroke-width"];
+const _hoisted_6$t = ["width", "height"];
 const _hoisted_7$r = {
   key: 3,
   class: "loader-text"
@@ -266,7 +266,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               "stroke-linejoin": "round",
               class: "loader-animated-path"
-            }, null, 8, _hoisted_5$A)
+            }, null, 8, _hoisted_5$z)
           ], 8, _hoisted_2$K))
         ])) : _ctx.variant === "circle" ? (openBlock(), createElementBlock("div", {
           key: 1,
@@ -288,7 +288,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
               "stroke-linecap": "round",
               class: "loader-circle-path"
             }, null, -1)
-          ])], 8, _hoisted_6$u))
+          ])], 8, _hoisted_6$t))
         ], 4)) : _ctx.variant === "bar" ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "loader-bar",
@@ -796,7 +796,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-5844ab0f"]]);
+const StrandsUiButton = /* @__PURE__ */ _export_sfc(_sfc_main$V, [["__scopeId", "data-v-8817cc57"]]);
 const CompoundUiButton = StrandsUiButton;
 CompoundUiButton.Content = UiButtonContent;
 CompoundUiButton.Anchor = _sfc_main$Y;
@@ -818,11 +818,11 @@ const _hoisted_4$D = {
   key: 0,
   class: "ui-card-subtitle"
 };
-const _hoisted_5$z = {
+const _hoisted_5$y = {
   key: 1,
   class: "ui-card-content"
 };
-const _hoisted_6$t = {
+const _hoisted_6$s = {
   key: 2,
   class: "ui-card-footer"
 };
@@ -866,10 +866,10 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "actions", {}, void 0, true)
           ], true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5$z, [
+        _ctx.$slots["default"] ? (openBlock(), createElementBlock("div", _hoisted_5$y, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_6$t, [
+        _ctx.$slots["footer"] ? (openBlock(), createElementBlock("div", _hoisted_6$s, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
@@ -1443,7 +1443,7 @@ const _hoisted_4$C = {
   key: 2,
   class: "input-trailing-icon"
 };
-const _hoisted_5$y = {
+const _hoisted_5$x = {
   key: 3,
   class: "input-trailing-icon"
 };
@@ -1592,7 +1592,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["tabindex"])
-        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$y, [
+        ])) : hasTrailingIcon.value ? (openBlock(), createElementBlock("div", _hoisted_5$x, [
           renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 2);
@@ -1923,11 +1923,11 @@ const _hoisted_4$B = {
   key: 0,
   class: "input-select-text"
 };
-const _hoisted_5$x = {
+const _hoisted_5$w = {
   key: 1,
   class: "input-select-placeholder"
 };
-const _hoisted_6$s = {
+const _hoisted_6$r = {
   key: 1,
   class: "input-trailing-icon"
 };
@@ -2282,7 +2282,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
             "aria-controls": dropdownId.value
           }, [
             createElementVNode("div", _hoisted_3$C, [
-              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$B, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$x, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
+              displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$B, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$w, toDisplayString(_ctx.placeholder || "Select an option..."), 1))
             ]),
             createElementVNode("div", {
               class: normalizeClass(["input-select-arrow", { "input-select-arrow-open": dropdownState.value.isOpen }])
@@ -2290,7 +2290,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
               createVNode(unref(ChevronDown))
             ], 2)
           ], 42, _hoisted_2$F),
-          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_6$s, [
+          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_6$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 2),
@@ -2369,11 +2369,11 @@ const _hoisted_1$K = { class: "input-leading-icon" };
 const _hoisted_2$E = ["src"];
 const _hoisted_3$B = ["id", "accept", "multiple", "disabled", "required"];
 const _hoisted_4$A = { class: "input-file-content" };
-const _hoisted_5$w = {
+const _hoisted_5$v = {
   key: 0,
   class: "input-file-prompt"
 };
-const _hoisted_6$r = { class: "input-file-prompt-text" };
+const _hoisted_6$q = { class: "input-file-prompt-text" };
 const _hoisted_7$p = {
   key: 0,
   class: "input-file-accept-text"
@@ -2611,8 +2611,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
             onFocus: handleFocus
           }, null, 40, _hoisted_3$B),
           createElementVNode("div", _hoisted_4$A, [
-            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$w, [
-              createElementVNode("div", _hoisted_6$r, toDisplayString(_ctx.dragDropText || "Click to select or drag and drop"), 1),
+            selectedFiles.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_5$v, [
+              createElementVNode("div", _hoisted_6$q, toDisplayString(_ctx.dragDropText || "Click to select or drag and drop"), 1),
               _ctx.accept ? (openBlock(), createElementBlock("div", _hoisted_7$p, toDisplayString(_ctx.accept), 1)) : createCommentVNode("", true)
             ])) : (openBlock(), createElementBlock("div", _hoisted_8$n, [
               createElementVNode("div", _hoisted_9$m, toDisplayString(_ctx.selectedText || `${selectedFiles.value.length} file(s) selected`), 1),
@@ -2657,7 +2657,7 @@ const _hoisted_4$z = {
   key: 1,
   class: "tabs-after"
 };
-const _hoisted_5$v = ["aria-labelledby"];
+const _hoisted_5$u = ["aria-labelledby"];
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "UiTabs",
   props: {
@@ -3042,7 +3042,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
           id: "tabpanel"
         }, [
           renderSlot(_ctx.$slots, "content", { activeTab: activeTab.value }, void 0, true)
-        ], 10, _hoisted_5$v)) : createCommentVNode("", true)
+        ], 10, _hoisted_5$u)) : createCommentVNode("", true)
       ], 2);
     };
   }
@@ -3123,11 +3123,11 @@ const _hoisted_4$y = {
   key: 0,
   class: "datetime-picker-value"
 };
-const _hoisted_5$u = {
+const _hoisted_5$t = {
   key: 1,
   class: "datetime-picker-placeholder"
 };
-const _hoisted_6$q = {
+const _hoisted_6$p = {
   key: 1,
   class: "datetime-picker-trailing-icon"
 };
@@ -3502,7 +3502,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             _ctx.type === "date" ? (openBlock(), createBlock(unref(Calendar), { key: 0 })) : _ctx.type === "time" ? (openBlock(), createBlock(unref(Clock), { key: 1 })) : (openBlock(), createBlock(unref(CalendarClock), { key: 2 }))
           ]),
           createElementVNode("div", _hoisted_3$z, [
-            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$y, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$u, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
+            displayValue.value ? (openBlock(), createElementBlock("span", _hoisted_4$y, toDisplayString(displayValue.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$t, toDisplayString(_ctx.placeholder || getDefaultPlaceholder()), 1))
           ]),
           _ctx.modelValue && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -3510,7 +3510,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             onClick: withModifiers(clearValue, ["stop"])
           }, [
             createVNode(unref(X))
-          ])) : (openBlock(), createElementBlock("div", _hoisted_6$q, [
+          ])) : (openBlock(), createElementBlock("div", _hoisted_6$p, [
             createVNode(unref(ChevronDown))
           ]))
         ], 2),
@@ -24845,8 +24845,8 @@ const _hoisted_1$G = { class: "input-richtext-toolbar" };
 const _hoisted_2$B = { class: "input-richtext-group" };
 const _hoisted_3$y = { class: "input-richtext-group" };
 const _hoisted_4$x = { class: "input-richtext-group" };
-const _hoisted_5$t = { class: "input-richtext-group" };
-const _hoisted_6$p = { class: "input-richtext-group" };
+const _hoisted_5$s = { class: "input-richtext-group" };
+const _hoisted_6$o = { class: "input-richtext-group" };
 const _hoisted_7$n = { class: "input-richtext-editor-wrapper" };
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   __name: "UiInput.RichText",
@@ -25096,7 +25096,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_5$t, [
+          createElementVNode("div", _hoisted_5$s, [
             createVNode(StrandsUiButton, {
               color: unref(editor)?.isActive("bulletList") ? "primary" : "secondary",
               size: "sm",
@@ -25159,7 +25159,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
             spacing: "28px",
             margin: "4px"
           }),
-          createElementVNode("div", _hoisted_6$p, [
+          createElementVNode("div", _hoisted_6$o, [
             createVNode(StrandsUiButton, {
               color: "secondary",
               size: "sm",
@@ -25226,7 +25226,7 @@ const _hoisted_4$w = {
   key: 1,
   class: "pincode-divider"
 };
-const _hoisted_5$s = {
+const _hoisted_5$r = {
   key: 1,
   class: "pincode-icon pincode-icon-trailing"
 };
@@ -25447,7 +25447,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
               }, dividerProps.value, { class: "pincode-custom-divider" }), null, 16)) : shouldShowDivider(index) ? (openBlock(), createElementBlock("span", _hoisted_4$w, toDisplayString(dividerCharacter.value), 1)) : createCommentVNode("", true)
             ], 64);
           }), 128)),
-          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_5$s, [
+          _ctx.$slots["trailing-icon"] ? (openBlock(), createElementBlock("div", _hoisted_5$r, [
             renderSlot(_ctx.$slots, "trailing-icon", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ])
@@ -25469,7 +25469,7 @@ const _hoisted_4$v = {
   key: 2,
   class: "input-error-text"
 };
-const _hoisted_5$r = {
+const _hoisted_5$q = {
   key: 3,
   class: "input-help-text"
 };
@@ -25798,7 +25798,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         _ctx.$slots["hint"] ? (openBlock(), createElementBlock("div", _hoisted_3$w, [
           renderSlot(_ctx.$slots, "hint", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_4$v, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$r, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
+        props.error && props.error !== true ? (openBlock(), createElementBlock("p", _hoisted_4$v, toDisplayString(typeof props.error === "string" ? props.error : props.error?.message || String(props.error)), 1)) : props.helpText ? (openBlock(), createElementBlock("p", _hoisted_5$q, toDisplayString(props.helpText), 1)) : createCommentVNode("", true)
       ], 2);
     };
   }
@@ -25990,8 +25990,8 @@ const _hoisted_3$u = {
   class: "editor-container"
 };
 const _hoisted_4$t = { class: "editor-main" };
-const _hoisted_5$q = { class: "canvas-container" };
-const _hoisted_6$o = ["width", "height"];
+const _hoisted_5$p = { class: "canvas-container" };
+const _hoisted_6$n = ["width", "height"];
 const _hoisted_7$m = { class: "crop-overlay" };
 const _hoisted_8$l = { class: "crop-backdrop" };
 const _hoisted_9$k = { class: "crop-svg" };
@@ -26322,7 +26322,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
             createStaticVNode('<div class="upload-content"><svg class="upload-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg><h3 class="upload-title">Upload your photo</h3><p class="upload-subtitle">Drag and drop or click to browse</p><div class="upload-formats"><span class="format-tag">JPG</span><span class="format-tag">PNG</span><span class="format-tag">GIF</span></div></div>', 1)
           ])], 32)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
             createElementVNode("div", _hoisted_4$t, [
-              createElementVNode("div", _hoisted_5$q, [
+              createElementVNode("div", _hoisted_5$p, [
                 createElementVNode("canvas", {
                   ref_key: "canvas",
                   ref: canvas,
@@ -26331,7 +26331,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   class: "canvas",
                   onMousedown: startDrag,
                   onWheel: handleWheel
-                }, null, 40, _hoisted_6$o),
+                }, null, 40, _hoisted_6$n),
                 createElementVNode("div", _hoisted_7$m, [
                   createElementVNode("div", _hoisted_8$l, [
                     (openBlock(), createElementBlock("svg", _hoisted_9$k, [
@@ -26791,8 +26791,8 @@ const _hoisted_1$A = { class: "level-progress-container" };
 const _hoisted_2$v = ["width", "height", "viewBox"];
 const _hoisted_3$t = { key: 0 };
 const _hoisted_4$s = ["r"];
-const _hoisted_5$p = ["y"];
-const _hoisted_6$n = ["d", "stroke-width"];
+const _hoisted_5$o = ["y"];
+const _hoisted_6$m = ["d", "stroke-width"];
 const _hoisted_7$l = ["d", "stroke", "stroke-width"];
 const _hoisted_8$k = ["d"];
 const _hoisted_9$j = ["d", "stroke", "stroke-width"];
@@ -26995,7 +26995,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               "font-weight": "bold",
               fill: "#fff",
               style: { "font-family": "'Montserrat', sans-serif" }
-            }, "Level Up", 8, _hoisted_5$p)
+            }, "Level Up", 8, _hoisted_5$o)
           ])) : createCommentVNode("", true),
           animatedValue.value >= 0 && animatedValue.value < props.max ? (openBlock(), createElementBlock("path", {
             key: 1,
@@ -27004,7 +27004,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
             "stroke-width": thickness.value,
             fill: "none",
             "stroke-linecap": "round"
-          }, null, 8, _hoisted_6$n)) : createCommentVNode("", true),
+          }, null, 8, _hoisted_6$m)) : createCommentVNode("", true),
           createElementVNode("path", {
             d: staticArcPath.value,
             stroke: staticArcGradient.value,
@@ -27282,11 +27282,11 @@ const _hoisted_1$z = {
 const _hoisted_2$u = { class: "ui-modal-header-content" };
 const _hoisted_3$s = { class: "ui-modal-title" };
 const _hoisted_4$r = { key: 0 };
-const _hoisted_5$o = {
+const _hoisted_5$n = {
   key: 1,
   class: "ui-modal-subtitle"
 };
-const _hoisted_6$m = { class: "ui-modal-body-content" };
+const _hoisted_6$l = { class: "ui-modal-body-content" };
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "UiModal",
   props: {
@@ -27463,7 +27463,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                             openModal
                           }, () => [
                             _ctx.$props.title ? (openBlock(), createElementBlock("h2", _hoisted_4$r, toDisplayString(_ctx.$props.title), 1)) : createCommentVNode("", true),
-                            _ctx.$props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_5$o, toDisplayString(_ctx.$props.subtitle), 1)) : createCommentVNode("", true)
+                            _ctx.$props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_5$n, toDisplayString(_ctx.$props.subtitle), 1)) : createCommentVNode("", true)
                           ], true)
                         ]),
                         _ctx.showCloseButton ? (openBlock(), createElementBlock("button", {
@@ -27487,7 +27487,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                       ])
                     ]),
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_6$m, [
+                      createElementVNode("div", _hoisted_6$l, [
                         renderSlot(_ctx.$slots, "default", {}, void 0, true)
                       ])
                     ]),
@@ -28122,8 +28122,8 @@ const _hoisted_1$y = { class: "ui-color-picker" };
 const _hoisted_2$t = { class: "ui-color-picker-main" };
 const _hoisted_3$r = ["viewBox"];
 const _hoisted_4$q = ["d"];
-const _hoisted_5$n = ["d"];
-const _hoisted_6$l = ["d"];
+const _hoisted_5$m = ["d"];
+const _hoisted_6$k = ["d"];
 const _hoisted_7$k = ["d"];
 const _hoisted_8$j = ["d"];
 const _hoisted_9$i = ["d"];
@@ -29822,7 +29822,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                   fill: "url(#redDotsPattern)",
                   "clip-path": "url(#canvasClip)",
                   opacity: "0.4"
-                }, null, 8, _hoisted_5$n)) : createCommentVNode("", true),
+                }, null, 8, _hoisted_5$m)) : createCommentVNode("", true),
                 contrastBoundaryTopCurve.value ? (openBlock(), createElementBlock("path", {
                   key: 2,
                   d: contrastBoundaryTopCurve.value,
@@ -29834,7 +29834,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                   "stroke-dasharray": "6 8",
                   "stroke-opacity": "0.5",
                   "clip-path": "url(#canvasClip)"
-                }, null, 8, _hoisted_6$l)) : createCommentVNode("", true),
+                }, null, 8, _hoisted_6$k)) : createCommentVNode("", true),
                 contrastBoundaryBottomCurve.value ? (openBlock(), createElementBlock("path", {
                   key: 3,
                   d: contrastBoundaryBottomCurve.value,
@@ -30720,8 +30720,8 @@ const _hoisted_2$r = {
 };
 const _hoisted_3$q = ["onDragenter", "onDrop"];
 const _hoisted_4$p = { class: "ui-table-header-content" };
-const _hoisted_5$m = ["onClick"];
-const _hoisted_6$k = ["onDragstart"];
+const _hoisted_5$l = ["onClick"];
+const _hoisted_6$j = ["onDragstart"];
 const _hoisted_7$j = {
   key: 1,
   class: "ui-table-sort-icon"
@@ -31124,7 +31124,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                       onDragend: handleDragEnd
                     }, [
                       createVNode(unref(GripVertical), { size: 14 })
-                    ], 40, _hoisted_6$k)) : createCommentVNode("", true),
+                    ], 40, _hoisted_6$j)) : createCommentVNode("", true),
                     createElementVNode("span", null, toDisplayString(column.label), 1),
                     column.sortable ? (openBlock(), createElementBlock("span", _hoisted_7$j, [
                       sortKey.value === column.key && sortOrder.value === "asc" ? (openBlock(), createBlock(unref(ChevronUp), {
@@ -31138,7 +31138,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                         size: 16
                       }))
                     ])) : createCommentVNode("", true)
-                  ], 8, _hoisted_5$m),
+                  ], 8, _hoisted_5$l),
                   createElementVNode("div", _hoisted_8$i, [
                     _ctx.filterable || column.filterable ? (openBlock(), createElementBlock("button", {
                       key: 0,
@@ -31338,11 +31338,11 @@ const _hoisted_4$o = {
   key: 1,
   class: "ui-hero-description"
 };
-const _hoisted_5$l = {
+const _hoisted_5$k = {
   key: 1,
   class: "ui-hero-navigation"
 };
-const _hoisted_6$j = {
+const _hoisted_6$i = {
   key: 2,
   class: "ui-hero-body"
 };
@@ -31436,10 +31436,10 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
                 _ctx.description ? (openBlock(), createElementBlock("p", _hoisted_4$o, toDisplayString(_ctx.description), 1)) : createCommentVNode("", true)
               ], true)
             ])) : createCommentVNode("", true),
-            hasNavigationSlot.value ? (openBlock(), createElementBlock("div", _hoisted_5$l, [
+            hasNavigationSlot.value ? (openBlock(), createElementBlock("div", _hoisted_5$k, [
               renderSlot(_ctx.$slots, "navigation", {}, void 0, true)
             ])) : createCommentVNode("", true),
-            hasDefaultSlot.value ? (openBlock(), createElementBlock("div", _hoisted_6$j, [
+            hasDefaultSlot.value ? (openBlock(), createElementBlock("div", _hoisted_6$i, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ])) : createCommentVNode("", true)
           ]),
@@ -31639,18 +31639,16 @@ function useTheme(fallbackTheme = "auto") {
     themeClass
   };
 }
-const _hoisted_1$t = { class: "accui-component-scope" };
-const _hoisted_2$p = { class: "ui-theme-toggle" };
-const _hoisted_3$o = {
+const _hoisted_1$t = {
   key: 1,
   class: "ui-theme-toggle-dropdown"
 };
-const _hoisted_4$n = ["disabled", "onClick"];
-const _hoisted_5$k = {
+const _hoisted_2$p = ["disabled", "onClick"];
+const _hoisted_3$o = {
   key: 0,
   class: "ui-theme-toggle-option-indicator"
 };
-const _hoisted_6$i = {
+const _hoisted_4$n = {
   key: 2,
   class: "ui-theme-toggle-segmented",
   role: "group",
@@ -31660,7 +31658,9 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "UiThemeToggle",
   props: {
     variant: { default: "button" },
-    size: { default: "md" }
+    size: { default: "md" },
+    fullWidth: { type: Boolean, default: false },
+    includeLabel: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
@@ -31706,98 +31706,131 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       document.removeEventListener("click", handleClickOutside);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$t, [
-        createElementVNode("div", _hoisted_2$p, [
-          _ctx.variant === "button" ? (openBlock(), createBlock(StrandsUiButton, {
-            key: 0,
-            icon: true,
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["ui-theme-toggle", { "ui-theme-toggle--full-width": _ctx.fullWidth }])
+      }, [
+        _ctx.variant === "button" ? (openBlock(), createBlock(StrandsUiButton, {
+          key: 0,
+          icon: !_ctx.includeLabel,
+          squircle: true,
+          variant: "ghost",
+          size: _ctx.size,
+          disabled: isDisabled.value,
+          onClick: _cache[0] || (_cache[0] = ($event) => isDisabled.value ? null : toggleTheme),
+          title: isDisabled.value ? "Theme is locked by app settings" : `Switch to ${nextThemeLabel.value.toLowerCase()} theme`,
+          class: normalizeClass(["ui-theme-toggle-button", { "ui-theme-toggle--disabled": isDisabled.value }])
+        }, createSlots({
+          default: withCtx(() => [
+            _ctx.includeLabel ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
+              createTextVNode(toDisplayString(unref(themeLabel)) + toDisplayString(isDisabled.value ? " (Locked)" : ""), 1)
+            ], 64)) : createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          _ctx.includeLabel ? {
+            name: "leading-icon",
+            fn: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(currentIcon.value))))
+            ]),
+            key: "0"
+          } : {
+            name: "icon",
+            fn: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(currentIcon.value))))
+            ]),
+            key: "1"
+          }
+        ]), 1032, ["icon", "size", "disabled", "title", "class"])) : _ctx.variant === "dropdown" ? (openBlock(), createElementBlock("div", _hoisted_1$t, [
+          createVNode(StrandsUiButton, {
             squircle: true,
             variant: "ghost",
             size: _ctx.size,
             disabled: isDisabled.value,
-            onClick: _cache[0] || (_cache[0] = ($event) => isDisabled.value ? null : toggleTheme),
-            title: isDisabled.value ? "Theme is locked by app settings" : `Switch to ${nextThemeLabel.value.toLowerCase()} theme`,
-            class: normalizeClass(["ui-theme-toggle-button", { "ui-theme-toggle--disabled": isDisabled.value }])
+            onClick: _cache[1] || (_cache[1] = ($event) => isDisabled.value ? null : showDropdown.value = !showDropdown.value),
+            class: normalizeClass(["ui-theme-toggle-trigger", { "ui-theme-toggle--disabled": isDisabled.value }]),
+            title: isDisabled.value ? "Theme is locked by app settings" : void 0
           }, {
-            icon: withCtx(() => [
+            "leading-icon": withCtx(() => [
               (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(currentIcon.value))))
             ]),
+            "trailing-icon": withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(showDropdown.value ? "chevron-up" : "chevron-down"))))
+            ]),
+            default: withCtx(() => [
+              createTextVNode(" " + toDisplayString(unref(themeLabel)) + toDisplayString(isDisabled.value ? " (Locked)" : "") + " ", 1)
+            ]),
             _: 1
-          }, 8, ["size", "disabled", "title", "class"])) : _ctx.variant === "dropdown" ? (openBlock(), createElementBlock("div", _hoisted_3$o, [
-            createVNode(StrandsUiButton, {
-              squircle: true,
-              variant: "ghost",
+          }, 8, ["size", "disabled", "class", "title"]),
+          showDropdown.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "ui-theme-toggle-menu",
+            onClick: _cache[2] || (_cache[2] = ($event) => showDropdown.value = false)
+          }, [
+            (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(themeOptions), (option) => {
+              return openBlock(), createElementBlock("button", {
+                key: option.value,
+                class: normalizeClass([
+                  "ui-theme-toggle-option",
+                  {
+                    "ui-theme-toggle-option--active": unref(currentTheme2) === option.value,
+                    "ui-theme-toggle-option--disabled": isDisabled.value
+                  }
+                ]),
+                disabled: isDisabled.value,
+                onClick: ($event) => isDisabled.value ? null : unref(setTheme)(option.value)
+              }, [
+                (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(option.icon)), { class: "ui-theme-toggle-option-icon" })),
+                createElementVNode("span", null, toDisplayString(option.label), 1),
+                unref(currentTheme2) === option.value ? (openBlock(), createElementBlock("div", _hoisted_3$o)) : createCommentVNode("", true)
+              ], 10, _hoisted_2$p);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ])) : _ctx.variant === "segmented" ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
+          (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(themeOptions), (option) => {
+            return openBlock(), createBlock(StrandsUiButton, {
+              key: option.value,
+              variant: unref(currentTheme2) === option.value ? "primary" : "ghost",
               size: _ctx.size,
-              disabled: isDisabled.value,
-              onClick: _cache[1] || (_cache[1] = ($event) => isDisabled.value ? null : showDropdown.value = !showDropdown.value),
-              class: normalizeClass(["ui-theme-toggle-trigger", { "ui-theme-toggle--disabled": isDisabled.value }]),
-              title: isDisabled.value ? "Theme is locked by app settings" : void 0
-            }, {
-              "leading-icon": withCtx(() => [
-                (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(currentIcon.value))))
-              ]),
-              "trailing-icon": withCtx(() => [
-                (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(showDropdown.value ? "chevron-up" : "chevron-down"))))
+              squircle: "",
+              icon: !_ctx.includeLabel,
+              "full-width": "",
+              class: normalizeClass([
+                "ui-theme-toggle-segment",
+                { "ui-theme-toggle-segment--active": unref(currentTheme2) === option.value }
               ]),
+              "aria-pressed": unref(currentTheme2) === option.value,
+              "aria-label": `${option.label} theme`,
+              onClick: ($event) => unref(setTheme)(option.value),
+              title: `Switch to ${option.label.toLowerCase()} theme`
+            }, createSlots({
               default: withCtx(() => [
-                createTextVNode(" " + toDisplayString(unref(themeLabel)) + toDisplayString(isDisabled.value ? " (Locked)" : "") + " ", 1)
+                _ctx.includeLabel ? (openBlock(), createElementBlock(Fragment$1, { key: 0 }, [
+                  createTextVNode(toDisplayString(option.label), 1)
+                ], 64)) : createCommentVNode("", true)
               ]),
-              _: 1
-            }, 8, ["size", "disabled", "class", "title"]),
-            showDropdown.value ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: "ui-theme-toggle-menu",
-              onClick: _cache[2] || (_cache[2] = ($event) => showDropdown.value = false)
+              _: 2
             }, [
-              (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(themeOptions), (option) => {
-                return openBlock(), createElementBlock("button", {
-                  key: option.value,
-                  class: normalizeClass([
-                    "ui-theme-toggle-option",
-                    {
-                      "ui-theme-toggle-option--active": unref(currentTheme2) === option.value,
-                      "ui-theme-toggle-option--disabled": isDisabled.value
-                    }
-                  ]),
-                  disabled: isDisabled.value,
-                  onClick: ($event) => isDisabled.value ? null : unref(setTheme)(option.value)
-                }, [
-                  (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(option.icon)), { class: "ui-theme-toggle-option-icon" })),
-                  createElementVNode("span", null, toDisplayString(option.label), 1),
-                  unref(currentTheme2) === option.value ? (openBlock(), createElementBlock("div", _hoisted_5$k)) : createCommentVNode("", true)
-                ], 10, _hoisted_4$n);
-              }), 128))
-            ])) : createCommentVNode("", true)
-          ])) : _ctx.variant === "segmented" ? (openBlock(), createElementBlock("div", _hoisted_6$i, [
-            (openBlock(true), createElementBlock(Fragment$1, null, renderList(unref(themeOptions), (option) => {
-              return openBlock(), createBlock(StrandsUiButton, {
-                key: option.value,
-                variant: unref(currentTheme2) === option.value ? "primary" : "ghost",
-                icon: true,
-                squircle: true,
-                size: _ctx.size,
-                class: normalizeClass([
-                  "ui-theme-toggle-segment",
-                  { "ui-theme-toggle-segment--active": unref(currentTheme2) === option.value }
+              _ctx.includeLabel ? {
+                name: "leading-icon",
+                fn: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(option.icon))))
                 ]),
-                "aria-pressed": unref(currentTheme2) === option.value,
-                "aria-label": `${option.label} theme`,
-                onClick: ($event) => unref(setTheme)(option.value),
-                title: `Switch to ${option.label.toLowerCase()} theme`
-              }, {
-                icon: withCtx(() => [
+                key: "0"
+              } : {
+                name: "icon",
+                fn: withCtx(() => [
                   (openBlock(), createBlock(resolveDynamicComponent(getIconComponent(option.icon))))
                 ]),
-                _: 2
-              }, 1032, ["variant", "size", "class", "aria-pressed", "aria-label", "onClick", "title"]);
-            }), 128))
-          ])) : createCommentVNode("", true)
-        ])
-      ]);
+                key: "1"
+              }
+            ]), 1032, ["variant", "size", "icon", "class", "aria-pressed", "aria-label", "onClick", "title"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 2);
     };
   }
 });
-const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-42a061c8"]]);
+const UiThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-9feda151"]]);
 const _hoisted_1$s = {
   key: 0,
   class: "slider-header"