@histoire/controls 0.4.6 → 0.5.0

package/dist/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { pushScopeId, popScopeId, defineComponent, nextTick, openBlock, createBlock, withScopeId, resolveComponent, createElementBlock, normalizeClass, normalizeStyle, withKeys, createElementVNode, Fragment, renderSlot, createCommentVNode, mergeProps, withCtx, createVNode, ref, createApp, h, toDisplayString, withDirectives, createTextVNode, unref, computed, watch, withModifiers, onUnmounted, isRef, vModelText, renderList, getCurrentScope, onScopeDispose } from "vue";
+import { defineComponent, pushScopeId, popScopeId, nextTick, openBlock, createBlock, createElementBlock, mergeProps, renderSlot, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, normalizeClass, normalizeStyle, withKeys, createElementVNode, Fragment, createCommentVNode, withCtx, createVNode, ref, createApp, h, toDisplayString, withDirectives, createTextVNode, unref, computed, watch, withModifiers, onUnmounted, isRef, vModelText, renderList, getCurrentScope, onScopeDispose } from "vue";
 function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
@@ -1495,8 +1495,8 @@ var PrivatePopper = () => defineComponent({
       return (_a2 = this[PROVIDE_KEY]) == null ? void 0 : _a2.parentPopper;
     },
     hasPopperShowTriggerHover() {
-      var _a2, _b2;
-      return ((_a2 = this.popperTriggers) == null ? void 0 : _a2.includes("hover")) || ((_b2 = this.popperShowTriggers) == null ? void 0 : _b2.includes("hover"));
+      var _a2, _b;
+      return ((_a2 = this.popperTriggers) == null ? void 0 : _a2.includes("hover")) || ((_b = this.popperShowTriggers) == null ? void 0 : _b.includes("hover"));
     }
   },
   watch: __spreadValues2(__spreadValues2({
@@ -1561,12 +1561,12 @@ var PrivatePopper = () => defineComponent({
   },
   methods: {
     show({ event = null, skipDelay = false, force = false } = {}) {
-      var _a2, _b2;
+      var _a2, _b;
       if (((_a2 = this.parentPopper) == null ? void 0 : _a2.lockedChild) && this.parentPopper.lockedChild !== this)
         return;
       this.$_pendingHide = false;
       if (force || !this.disabled) {
-        if (((_b2 = this.parentPopper) == null ? void 0 : _b2.lockedChild) === this) {
+        if (((_b = this.parentPopper) == null ? void 0 : _b.lockedChild) === this) {
           this.parentPopper.lockedChild = null;
         }
         this.$_scheduleShow(event, skipDelay);
@@ -2164,6 +2164,29 @@ function lineIntersectsLine(x1, y1, x2, y2, x3, y3, x4, y4) {
   const uB = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1));
   return uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1;
 }
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$6$1 = {
+  extends: PrivatePopper()
+};
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", mergeProps({
+    ref: "reference",
+    class: "v-popper"
+  }, _ctx.$attrs, {
+    class: {
+      "v-popper--shown": _ctx.slotData.isShown
+    }
+  }), [
+    renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.slotData)))
+  ], 16);
+}
+var Popper$1 = /* @__PURE__ */ _export_sfc(_sfc_main$6$1, [["render", _sfc_render$3]]);
 function getInternetExplorerVersion() {
   var ua = window.navigator.userAgent;
   var msie = ua.indexOf("MSIE ");
@@ -2283,13 +2306,6 @@ var PrivateThemeClass = (prop = "theme") => ({
     }
   }
 });
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
 const _sfc_main$5$1 = defineComponent({
   name: "VPopperContent",
   components: {
@@ -2328,10 +2344,10 @@ const _hoisted_2$1$1 = {
   class: "v-popper__inner"
 };
 const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
-const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
+const _hoisted_4$5 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
 const _hoisted_5$3 = [
   _hoisted_3$6,
-  _hoisted_4$4
+  _hoisted_4$5
 ];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
@@ -2414,14 +2430,13 @@ var PrivatePopperMethods = {
 const _sfc_main$4$1 = defineComponent({
   name: "VPopperWrapper",
   components: {
-    Popper: PrivatePopper(),
+    Popper: Popper$1,
     PopperContent: PrivatePopperContent
   },
   mixins: [
     PrivatePopperMethods,
     PrivateThemeClass("finalTheme")
   ],
-  inheritAttrs: false,
   props: {
     theme: {
       type: String,
@@ -2432,29 +2447,27 @@ const _sfc_main$4$1 = defineComponent({
     finalTheme() {
       var _a2;
       return (_a2 = this.theme) != null ? _a2 : this.$options.vPopperTheme;
-    },
-    popperAttrs() {
-      const result = __spreadValues2({}, this.$attrs);
-      delete result.class;
-      delete result.style;
-      return result;
     }
   },
   methods: {
     getTargetNodes() {
-      return Array.from(this.$refs.reference.children).filter((node) => node !== this.$refs.popperContent.$el);
+      return Array.from(this.$refs.popper.$el.children).filter((node) => node !== this.$refs.popperContent.$el);
     }
   }
 });
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
   const _component_Popper = resolveComponent("Popper");
-  return openBlock(), createBlock(_component_Popper, mergeProps({ ref: "popper" }, _ctx.popperAttrs, {
+  return openBlock(), createBlock(_component_Popper, {
+    ref: "popper",
     theme: _ctx.finalTheme,
     "target-nodes": _ctx.getTargetNodes,
-    "reference-node": () => _ctx.$refs.reference,
-    "popper-node": () => _ctx.$refs.popperContent.$el
-  }), {
+    "reference-node": () => _ctx.$refs.popper.$el,
+    "popper-node": () => _ctx.$refs.popperContent.$el,
+    class: normalizeClass([
+      _ctx.themeClass
+    ])
+  }, {
     default: withCtx(({
       popperId,
       isShown,
@@ -2466,53 +2479,38 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       handleResize,
       onResize,
       classes,
-      result,
-      attrs
+      result
     }) => [
-      createElementVNode("div", mergeProps({
-        ref: "reference",
-        class: "v-popper"
-      }, attrs, {
-        class: [
-          _ctx.$attrs.class,
-          _ctx.themeClass,
-          {
-            "v-popper--shown": isShown
-          }
-        ],
-        style: _ctx.$attrs.style
-      }), [
-        renderSlot(_ctx.$slots, "default", {
-          shown: isShown,
-          show,
-          hide
-        }),
-        createVNode(_component_PopperContent, {
-          ref: "popperContent",
-          "popper-id": popperId,
-          theme: _ctx.finalTheme,
-          shown: isShown,
-          mounted: shouldMountContent,
-          "skip-transition": skipTransition,
-          "auto-hide": autoHide,
-          "handle-resize": handleResize,
-          classes,
-          result,
-          onHide: hide,
-          onResize
-        }, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "popper", {
-              shown: isShown,
-              hide
-            })
-          ]),
-          _: 2
-        }, 1032, ["popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
-      ], 16)
+      renderSlot(_ctx.$slots, "default", {
+        shown: isShown,
+        show,
+        hide
+      }),
+      createVNode(_component_PopperContent, {
+        ref: "popperContent",
+        "popper-id": popperId,
+        theme: _ctx.finalTheme,
+        shown: isShown,
+        mounted: shouldMountContent,
+        "skip-transition": skipTransition,
+        "auto-hide": autoHide,
+        "handle-resize": handleResize,
+        classes,
+        result,
+        onHide: hide,
+        onResize
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "popper", {
+            shown: isShown,
+            hide
+          })
+        ]),
+        _: 2
+      }, 1032, ["popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
     ]),
     _: 3
-  }, 16, ["theme", "target-nodes", "reference-node", "popper-node"]);
+  }, 8, ["theme", "target-nodes", "reference-node", "popper-node", "class"]);
 }
 var PrivatePopperWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$4$1, [["render", _sfc_render$1]]);
 const _sfc_main$3$1 = defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
@@ -2801,7 +2799,8 @@ const VTooltip = PrivateVTooltip;
 const Dropdown = _sfc_main$3$1;
 const _hoisted_1$7 = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" };
 const _hoisted_2$5 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
-const _hoisted_3$5 = { class: "htw-block htw-grow" };
+const _hoisted_3$5 = { class: "htw-grow htw-flex htw-items-center htw-gap-1" };
+const _hoisted_4$4 = { class: "htw-block htw-grow" };
 const __default__$a = {
   name: "HstWrapper"
 };
@@ -2822,7 +2821,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           }]
         ]),
         createElementVNode("span", _hoisted_3$5, [
-          renderSlot(_ctx.$slots, "default")
+          createElementVNode("span", _hoisted_4$4, [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          renderSlot(_ctx.$slots, "actions")
         ])
       ]);
     };
@@ -2859,8 +2861,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const dashoffset = computed(() => (1 - progress.value) * dasharray.value);
     const animationEnabled = ref(false);
     watch(path, (value) => {
-      var _a2, _b2, _c;
-      dasharray.value = (_c = (_b2 = (_a2 = path.value).getTotalLength) == null ? void 0 : _b2.call(_a2)) != null ? _c : 21.21;
+      var _a2, _b, _c;
+      dasharray.value = (_c = (_b = (_a2 = path.value).getTotalLength) == null ? void 0 : _b.call(_a2)) != null ? _c : 21.21;
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$a, {
@@ -2874,6 +2876,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => toggle(), ["prevent"]), ["space"]))
         ]
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$6, [
             createElementVNode("div", {
@@ -2899,7 +2904,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             ]))
           ])
         ]),
-        _: 1
+        _: 3
       }, 8, ["title"]);
     };
   }
@@ -2925,6 +2930,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         style: normalizeStyle(_ctx.$attrs.style),
         onClick: _cache[1] || (_cache[1] = ($event) => input.value.focus())
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           createElementVNode("input", mergeProps({
             ref_key: "input",
@@ -2936,7 +2944,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
           }), null, 16, _hoisted_1$5)
         ]),
-        _: 1
+        _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
@@ -3002,6 +3010,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         onClick: focusAndSelect,
         onMousedown: onMouseDown
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           withDirectives(createElementVNode("input", mergeProps({
             ref_key: "input",
@@ -3021,7 +3032,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             ]
           ])
         ]),
-        _: 1
+        _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
@@ -3048,6 +3059,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         style: normalizeStyle(_ctx.$attrs.style),
         onClick: _cache[1] || (_cache[1] = ($event) => input.value.focus())
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           createElementVNode("textarea", mergeProps({
             ref_key: "input",
@@ -3058,7 +3072,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
           }), null, 16, _hoisted_1$4)
         ]),
-        _: 1
+        _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
@@ -3148,7 +3162,7 @@ function mergeIconData(icon, alias) {
   }
   return result;
 }
-function getIconData$1(data, name, full = false) {
+function getIconData$1(data, name, full) {
   function getIcon(name2, iteration) {
     if (data.icons[name2] !== void 0) {
       return Object.assign({}, data.icons[name2]);
@@ -3990,7 +4004,7 @@ function storeCallback(callback, icons, pendingSources) {
   });
   return abort;
 }
-function listToIcons(list, validate = true, simpleNames2 = false) {
+function listToIcons(list, validate, simpleNames2 = false) {
   const result = [];
   list.forEach((item) => {
     const icon = typeof item === "string" ? stringToIcon(item, false, simpleNames2) : item;
@@ -4889,7 +4903,7 @@ const _hoisted_4$3 = ["onClick"];
 const __default__$5 = {
   name: "CustomSelect"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
+const _sfc_main$5 = defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
   props: {
     modelValue: null,
     options: null
@@ -4950,7 +4964,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
 const __default__$4 = {
   name: "HstSelect"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+const _sfc_main$4 = defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
   props: {
     title: null,
     modelValue: null,
@@ -4965,6 +4979,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style)
       }, {
+        actions: withCtx(() => [
+          renderSlot(_ctx.$slots, "actions")
+        ]),
         default: withCtx(() => [
           createVNode(_sfc_main$5, {
             options: __props.options,
@@ -4972,7 +4989,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event))
           }, null, 8, ["options", "model-value"])
         ]),
-        _: 1
+        _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
@@ -4984,10 +5001,12 @@ function tryOnScopeDispose(fn) {
   }
   return false;
 }
+var _a;
 const isClient = typeof window !== "undefined";
 const isString = (val) => typeof val === "string";
 const noop = () => {
 };
+isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
 function useTimeoutFn(cb, interval, options = {}) {
   const {
     immediate = true
@@ -5105,8 +5124,6 @@ const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !
 const globalKey = "__vueuse_ssr_handlers__";
 _global[globalKey] = _global[globalKey] || {};
 _global[globalKey];
-var _a, _b;
-isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
 const __default__$3 = {
   name: "HstCopyIcon"
 };

package/dist/style-standalone.css

@@ -28,7 +28,8 @@
 .v-popper__popper{
   z-index:10000;
   top:0;
-  left:0
+  left:0;
+  outline:none
 }
 
 .v-popper__popper.v-popper__popper--hidden{
@@ -437,14 +438,14 @@
   gap:0.5rem
 }
 
-.htw-gap-4{
-  gap:1rem
-}
-
 .htw-gap-1{
   gap:0.25rem
 }
 
+.htw-gap-4{
+  gap:1rem
+}
+
 .htw-overflow-hidden{
   overflow:hidden
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -44,7 +44,7 @@
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
     "floating-vue": "^2.0.0-beta.16",
-    "histoire": "0.4.6",
+    "histoire": "0.5.0",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",

package/src/components/HstWrapper.vue

@@ -24,8 +24,11 @@ const props = defineProps<{
     >
       {{ title }}
     </span>
-    <span class="htw-block htw-grow">
-      <slot />
+    <span class="htw-grow htw-flex htw-items-center htw-gap-1">
+      <span class="htw-block htw-grow">
+        <slot />
+      </span>
+      <slot name="actions" />
     </span>
   </label>
 </template>

package/src/components/checkbox/HstCheckbox.vue

@@ -76,5 +76,9 @@ watch(path, value => {
         />
       </svg>
     </div>
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>

package/src/components/checkbox/__snapshots__/HstCheckbox.test.ts.snap

@@ -9,26 +9,28 @@ exports[`HstCheckbox toggle to checked 1`] = `
   <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
     Label
   </span>
-  <span class="htw-block htw-grow">
-    <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-      <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
-      </div>
-      <svg
-        width="16"
-        height="16"
-        viewbox="0 0 24 24"
-        class="htw-relative htw-z-10"
-      >
-        <path
-          d="m 4 12 l 5 5 l 10 -10"
-          fill="none"
-          class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all"
-          stroke-dasharray="21.21"
-          stroke-dashoffset="21.21"
+  <span class="htw-grow htw-flex htw-items-center htw-gap-1">
+    <span class="htw-block htw-grow">
+      <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-black/25 dark:htw-border-white/25 htw-delay-150">
+        </div>
+        <svg
+          width="16"
+          height="16"
+          viewbox="0 0 24 24"
+          class="htw-relative htw-z-10"
         >
-        </path>
-      </svg>
-    </div>
+          <path
+            d="m 4 12 l 5 5 l 10 -10"
+            fill="none"
+            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all"
+            stroke-dasharray="21.21"
+            stroke-dashoffset="21.21"
+          >
+          </path>
+        </svg>
+      </div>
+    </span>
   </span>
 </label>
 `;
@@ -42,26 +44,28 @@ exports[`HstCheckbox toggle to unchecked 1`] = `
   <span class="htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0 v-popper--has-tooltip">
     Label
   </span>
-  <span class="htw-block htw-grow">
-    <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
-      <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-primary-500 htw-border-8">
-      </div>
-      <svg
-        width="16"
-        height="16"
-        viewbox="0 0 24 24"
-        class="htw-relative htw-z-10"
-      >
-        <path
-          d="m 4 12 l 5 5 l 10 -10"
-          fill="none"
-          class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all htw-delay-150"
-          stroke-dasharray="21.21"
-          stroke-dashoffset="0"
+  <span class="htw-grow htw-flex htw-items-center htw-gap-1">
+    <span class="htw-block htw-grow">
+      <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+        <div class="htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out htw-border-primary-500 htw-border-8">
+        </div>
+        <svg
+          width="16"
+          height="16"
+          viewbox="0 0 24 24"
+          class="htw-relative htw-z-10"
         >
-        </path>
-      </svg>
-    </div>
+          <path
+            d="m 4 12 l 5 5 l 10 -10"
+            fill="none"
+            class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out htw-transition-all htw-delay-150"
+            stroke-dasharray="21.21"
+            stroke-dashoffset="0"
+          >
+          </path>
+        </svg>
+      </div>
+    </span>
   </span>
 </label>
 `;

package/src/components/number/HstNumber.vue

@@ -88,5 +88,9 @@ onUnmounted(() => {
       }"
       class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-pl-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-cursor-ew-resize"
     >
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>

package/src/components/select/HstSelect.vue

@@ -36,5 +36,9 @@ const select = ref<HTMLInputElement>()
       :model-value="modelValue"
       @update:model-value="emits('update:modelValue', $event)"
     />
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>

package/src/components/text/HstText.vue

@@ -36,5 +36,9 @@ const input = ref<HTMLInputElement>()
       class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     >
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>

package/src/components/textarea/HstTextarea.vue

@@ -36,5 +36,9 @@ const input = ref<HTMLInputElement>()
       class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm htw-box-border htw-resize-y htw-min-h-[26px]"
       @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
     />
+
+    <template #actions>
+      <slot name="actions" />
+    </template>
   </HstWrapper>
 </template>