bitboss-ui 2.0.116 → 2.0.117

package/dist/index115.js

@@ -1,4 +1,4 @@
-import { defineComponent as f, ref as y, computed as w, openBlock as v, createBlock as B, withCtx as a, renderSlot as r, normalizeProps as p, guardReactiveProps as d, createVNode as g, mergeProps as $ } from "vue";
+import { defineComponent as f, ref as y, computed as w, openBlock as v, createBlock as B, withCtx as a, renderSlot as r, normalizeProps as i, guardReactiveProps as d, createVNode as g, mergeProps as $ } from "vue";
 import k from "./index27.js";
 /* empty css        */
 import V from "./index47.js";
@@ -10,6 +10,7 @@ const G = /* @__PURE__ */ f({
     autocomplete: {},
     autofocus: {},
     autoGrow: { type: Boolean },
+    clearable: { type: Boolean },
     compact: { type: Boolean },
     direction: {},
     disabled: { type: Boolean },
@@ -33,14 +34,14 @@ const G = /* @__PURE__ */ f({
   },
   emits: ["blur", "change", "click", "focus", "input", "keydown", "mousedown", "mouseup", "update:modelValue"],
   setup(t, { emit: u }) {
-    const n = t, o = u, l = y(!1), m = w(() => n.persistentHint || l.value), c = {
+    const l = t, o = u, n = y(!1), m = w(() => l.persistentHint || n.value), c = {
       onBlur: (e) => {
-        l.value = !1, o("blur", e);
+        n.value = !1, o("blur", e);
       },
       onChange: (e) => o("change", e),
       onClick: (e) => o("click", e),
       onFocus: (e) => {
-        l.value = !0, o("focus", e);
+        n.value = !0, o("focus", e);
       },
       onInput: (e) => o("input", e),
       onKeydown: (e) => o("keydown", e),
@@ -65,23 +66,24 @@ const G = /* @__PURE__ */ f({
       "show-hint": m.value
     }, {
       label: a((s) => [
-        r(e.$slots, "label", p(d(s)))
+        r(e.$slots, "label", i(d(s)))
       ]),
-      input: a(({ id: s, hasErrors: h, ariaDescribedby: b }) => [
+      input: a(({ id: s, hasErrors: b, ariaDescribedby: h }) => [
         g(V, $({
           id: s,
-          "append:icon": n["append:icon"],
-          "aria-describedby": b,
+          "append:icon": l["append:icon"],
+          "aria-describedby": h,
           "auto-grow": e.autoGrow,
           autofocus: e.autofocus,
+          clearable: e.clearable,
           compact: e.compact,
           disabled: e.disabled,
-          "has-errors": h,
+          "has-errors": b,
           loading: e.loading,
           "model-value": e.modelValue,
           name: e.name,
           placeholder: e.placeholder,
-          "prepend:icon": n["prepend:icon"],
+          "prepend:icon": l["prepend:icon"],
           readonly: e.readonly,
           required: e.required,
           rows: e.rows
@@ -98,14 +100,14 @@ const G = /* @__PURE__ */ f({
           "prepend-outer": a(() => [
             r(e.$slots, "prepend-outer")
           ]),
-          prefix: a((i) => [
-            r(e.$slots, "prefix", p(d(i)))
+          prefix: a((p) => [
+            r(e.$slots, "prefix", i(d(p)))
           ]),
-          suffix: a((i) => [
-            r(e.$slots, "suffix", p(d(i)))
+          suffix: a((p) => [
+            r(e.$slots, "suffix", i(d(p)))
           ]),
           _: 2
-        }, 1040, ["id", "append:icon", "aria-describedby", "auto-grow", "autofocus", "compact", "disabled", "has-errors", "loading", "model-value", "name", "placeholder", "prepend:icon", "readonly", "required", "rows"])
+        }, 1040, ["id", "append:icon", "aria-describedby", "auto-grow", "autofocus", "clearable", "compact", "disabled", "has-errors", "loading", "model-value", "name", "placeholder", "prepend:icon", "readonly", "required", "rows"])
       ]),
       _: 3
     }, 8, ["id", "compact", "direction", "errors", "has-errors", "hide-label", "hint", "label", "label-position", "model-value", "name", "reverse", "show-hint"]));

package/dist/index117.js

@@ -1,4 +1,4 @@
-import { defineComponent as c, ref as h, computed as b, openBlock as f, createBlock as y, withCtx as a, renderSlot as n, normalizeProps as v, guardReactiveProps as B, createVNode as w, mergeProps as g } from "vue";
+import { defineComponent as c, ref as b, computed as h, openBlock as f, createBlock as y, withCtx as a, renderSlot as l, normalizeProps as v, guardReactiveProps as B, createVNode as w, mergeProps as g } from "vue";
 import $ from "./index27.js";
 /* empty css        */
 import k from "./index49.js";
@@ -9,6 +9,7 @@ const E = /* @__PURE__ */ c({
     "append:icon": {},
     autocomplete: {},
     autofocus: {},
+    clearable: { type: Boolean },
     compact: { type: Boolean },
     direction: {},
     disabled: { type: Boolean },
@@ -32,14 +33,14 @@ const E = /* @__PURE__ */ c({
   },
   emits: ["blur", "change", "click", "focus", "input", "keydown", "mousedown", "mouseup", "update:modelValue"],
   setup(s, { emit: i }) {
-    const r = s, o = i, l = h(!1), d = b(() => r.persistentHint || l.value), t = {
+    const r = s, o = i, n = b(!1), d = h(() => r.persistentHint || n.value), t = {
       onBlur: (e) => {
-        l.value = !1, o("blur", e);
+        n.value = !1, o("blur", e);
       },
       onChange: (e) => o("change", e),
       onClick: (e) => o("click", e),
       onFocus: (e) => {
-        l.value = !0, o("focus", e);
+        n.value = !0, o("focus", e);
       },
       onInput: (e) => o("input", e),
       onKeydown: (e) => o("keydown", e),
@@ -64,7 +65,7 @@ const E = /* @__PURE__ */ c({
       "show-hint": d.value
     }, {
       label: a((p) => [
-        n(e.$slots, "label", v(B(p)))
+        l(e.$slots, "label", v(B(p)))
       ]),
       input: a(({ id: p, hasErrors: u, ariaDescribedby: m }) => [
         w(k, g({
@@ -73,6 +74,7 @@ const E = /* @__PURE__ */ c({
           "aria-describedby": m,
           autocomplete: e.autocomplete,
           autofocus: e.autofocus,
+          clearable: e.clearable,
           compact: e.compact,
           disabled: e.disabled,
           "has-errors": u,
@@ -86,25 +88,25 @@ const E = /* @__PURE__ */ c({
           type: e.type
         }, t), {
           "append-outer": a(() => [
-            n(e.$slots, "append-outer")
+            l(e.$slots, "append-outer")
           ]),
           append: a(() => [
-            n(e.$slots, "append")
+            l(e.$slots, "append")
           ]),
           prefix: a(() => [
-            n(e.$slots, "prefix")
+            l(e.$slots, "prefix")
           ]),
           suffix: a(() => [
-            n(e.$slots, "suffix")
+            l(e.$slots, "suffix")
           ]),
           prepend: a(() => [
-            n(e.$slots, "prepend")
+            l(e.$slots, "prepend")
           ]),
           "prepend-outer": a(() => [
-            n(e.$slots, "prepend-outer")
+            l(e.$slots, "prepend-outer")
           ]),
           _: 2
-        }, 1040, ["id", "append:icon", "aria-describedby", "autocomplete", "autofocus", "compact", "disabled", "has-errors", "loading", "model-value", "name", "placeholder", "prepend:icon", "readonly", "required", "type"])
+        }, 1040, ["id", "append:icon", "aria-describedby", "autocomplete", "autofocus", "clearable", "compact", "disabled", "has-errors", "loading", "model-value", "name", "placeholder", "prepend:icon", "readonly", "required", "type"])
       ]),
       _: 3
     }, 8, ["id", "compact", "direction", "errors", "has-errors", "hide-label", "hint", "label", "label-position", "model-value", "name", "reverse", "show-hint"]));

package/dist/index119.js

@@ -1,7 +1,7 @@
 import { defineComponent as l, openBlock as e, createBlock as o, withCtx as r, createElementVNode as c, normalizeClass as m, createVNode as i, TransitionGroup as u, createElementBlock as p, Fragment as f, renderList as _, unref as n, mergeProps as d } from "vue";
 import { state as k, useToast as b } from "./index11.js";
-import C from "./index235.js";
-import B from "./index311.js";
+import C from "./index225.js";
+import B from "./index315.js";
 const V = /* @__PURE__ */ l({
   __name: "BbToast",
   props: {

package/dist/index121.js

@@ -1,16 +1,16 @@
-import { defineComponent as V, ref as a, watch as H, computed as z, openBlock as B, createElementBlock as I, mergeProps as R, createElementVNode as c, renderSlot as E, normalizeProps as S, guardReactiveProps as U, unref as u, createVNode as W, withCtx as C, createBlock as j, createCommentVNode as q } from "vue";
-import { useFloating as A, arrow as G } from "./index222.js";
-import { useId as J } from "./index8.js";
+import { defineComponent as H, ref as o, watch as I, computed as z, openBlock as E, createElementBlock as R, mergeProps as S, createElementVNode as p, renderSlot as B, normalizeProps as U, guardReactiveProps as W, unref as u, createVNode as j, withCtx as C, createBlock as q, createCommentVNode as A } from "vue";
+import { useFloating as G, arrow as J } from "./index214.js";
+import { useId as K } from "./index8.js";
 import { wait as L } from "./index130.js";
-import K from "./index13.js";
+import Q from "./index13.js";
 /* empty css        */
-import { throttle as m } from "./index246.js";
-import { waitFor as Q } from "./index234.js";
-import X from "./index263.js";
+import { throttle as v } from "./index249.js";
+import { waitFor as X } from "./index224.js";
+import Y from "./index266.js";
 /* empty css         */
-import { useLocale as Y } from "./index232.js";
-import { autoUpdate as Z, flip as x, shift as ee, hide as te } from "./index237.js";
-const me = /* @__PURE__ */ V({
+import { useLocale as Z } from "./index212.js";
+import { autoUpdate as x, flip as ee, shift as te, hide as oe } from "./index228.js";
+const ae = { class: "bb-tooltip__content" }, be = /* @__PURE__ */ H({
   __name: "BbTooltip",
   props: {
     arrowPadding: { default: 10 },
@@ -26,79 +26,81 @@ const me = /* @__PURE__ */ V({
     theme: { default: "default" },
     transitionDuration: { default: 250 }
   },
-  setup(D) {
-    const t = D, { t: _ } = Y(), v = `bb_${t.id ?? J().id.value}`, s = a(), d = a(), M = a(), { placement: b, middlewareData: P } = A(s, d, {
+  setup(_) {
+    const t = _, { t: D } = Z(), c = `bb_${t.id ?? K().id.value}`, l = o(), M = o(), P = o(), { placement: b, middlewareData: T } = G(l, M, {
       placement: t.placement,
-      whileElementsMounted: Z,
+      whileElementsMounted: x,
       middleware: [
-        x(),
-        ee({ padding: t.padding }),
-        G({
-          element: M,
+        ee(),
+        te({ padding: t.padding }),
+        J({
+          element: P,
           padding: t.arrowPadding
         }),
-        te()
+        oe()
       ]
     });
-    let w = () => {
+    let g = () => {
     };
-    const g = a(!0), n = a(!1), r = a(!1), l = a(!1), p = a(!0), h = () => {
-      r.value || n.value || t.disabled || (F(), document.addEventListener("mouseover", k, { passive: !0 }), document.addEventListener("keydown", y, { passive: !0 }));
-    }, T = h, k = m((e) => {
-      const o = e.target;
-      if (o && o instanceof HTMLElement) {
-        let f = !0;
-        s.value && s.value.contains(o) && (f = !1), d.value && d.value.contains(o) && (f = !1), f && i();
+    const w = o(!0), n = o(!1), r = o(!1), s = o(!1), d = o(!0), h = () => {
+      r.value || n.value || t.disabled || (N(), document.addEventListener("mouseover", k, { passive: !0 }), document.addEventListener("keydown", y, { passive: !0 }));
+    }, $ = h;
+    let f = null;
+    const k = v((e) => {
+      const a = e.target;
+      if (a && a instanceof HTMLElement) {
+        let m = !0;
+        l.value && l.value.contains(a) && (m = !1), f ?? (f = document.getElementById(c)), f && f.contains(a) && (m = !1), m && i();
       }
     }, t.transitionDuration), y = (e) => {
       r.value && e.key === "Escape" && i();
-    }, $ = () => {
-      g.value = !1, i();
-    }, O = a(!1), F = m(async () => {
-      g.value && (O.value = !0, p.value = !1, l.value = !1, n.value = !0, await L(50), r.value = !0, n.value = !1, w = H(
+    }, O = () => {
+      w.value = !1, i();
+    }, F = o(!1), N = v(async () => {
+      w.value && (F.value = !0, d.value = !1, s.value = !1, n.value = !0, await L(50), r.value = !0, n.value = !1, g = I(
         () => {
           var e;
-          return (e = P.value.hide) == null ? void 0 : e.referenceHidden;
+          return (e = T.value.hide) == null ? void 0 : e.referenceHidden;
         },
         async (e) => {
-          !l.value && !p.value && e && await i();
+          !s.value && !d.value && e && await i();
         }
       ));
-    }, t.transitionDuration), i = m(async () => {
-      await Q(() => !n.value), document.removeEventListener("mouseover", k), document.removeEventListener("keydown", y), r.value = !1, n.value = !1, l.value = !0, await L(t.transitionDuration), l.value = !1, p.value = !0, w();
-    }, t.transitionDuration), N = z(() => ({
+    }, t.transitionDuration), i = v(async () => {
+      await X(() => !n.value), document.removeEventListener("mouseover", k), document.removeEventListener("keydown", y), r.value = !1, n.value = !1, s.value = !0, await L(t.transitionDuration), s.value = !1, d.value = !0, g();
+    }, t.transitionDuration), V = z(() => ({
       class: {
         "bb-tooltip--block": t.block,
         [`bb-tooltip--${t.theme}`]: t.theme
       }
     }));
-    return (e, o) => (B(), I("span", R({ class: "bb-tooltip" }, N.value), [
-      c("span", {
+    return (e, a) => (E(), R("span", S({ class: "bb-tooltip" }, V.value), [
+      p("span", {
         ref_key: "wrapper",
-        ref: s,
+        ref: l,
         class: "bb-tooltip__wrapper"
       }, [
-        E(e.$slots, "activator", S(U({
+        B(e.$slots, "activator", U(W({
           props: {
-            "aria-describedby": v,
+            "aria-describedby": c,
             onMouseenter: h,
-            onFocus: u(T),
+            onFocus: u($),
             onBlur: u(i),
             disabled: e.disabled
           },
-          closed: p.value,
-          closing: l.value,
+          closed: d.value,
+          closing: s.value,
           disabled: e.disabled,
           open: r.value,
           opening: n.value,
           placement: u(b)
         })))
       ], 512),
-      W(X, {
+      j(Y, {
         "arrow-padding": e.arrowPadding,
         "base-class": "bb-tooltip",
         "container-attributes": {
-          id: v
+          id: c
         },
         eager: e.eager,
         offset: e.offset,
@@ -108,29 +110,25 @@ const me = /* @__PURE__ */ V({
         "teleport-target": e.teleportTarget,
         theme: e.theme,
         "transition-duration": e.transitionDuration,
-        wrapper: s.value
+        wrapper: l.value
       }, {
         default: C(() => [
-          c("span", {
-            ref_key: "content",
-            ref: d,
-            class: "bb-tooltip__content"
-          }, [
-            e.showClose ? (B(), j(K, {
+          p("span", ae, [
+            e.showClose ? (E(), q(Q, {
               key: 0,
               "aria-hidden": "true",
-              "aria-label": u(_)("common.closeLabel").value,
+              "aria-label": u(D)("common.closeLabel").value,
               class: "bb-tooltip__close",
               tabindex: "-1",
-              onClick: $
+              onClick: O
             }, {
-              default: C(() => o[0] || (o[0] = [
-                c("svg", {
+              default: C(() => a[0] || (a[0] = [
+                p("svg", {
                   fill: "none",
                   viewBox: "0 0 24 24",
                   xmlns: "http://www.w3.org/2000/svg"
                 }, [
-                  c("path", {
+                  p("path", {
                     d: "M23 23L1 1M23 1L1 23",
                     stroke: "currentColor",
                     "stroke-linecap": "round",
@@ -139,9 +137,9 @@ const me = /* @__PURE__ */ V({
                 ], -1)
               ])),
               _: 1
-            }, 8, ["aria-label"])) : q("", !0),
-            E(e.$slots, "default")
-          ], 512)
+            }, 8, ["aria-label"])) : A("", !0),
+            B(e.$slots, "default")
+          ])
         ]),
         _: 3
       }, 8, ["arrow-padding", "container-attributes", "eager", "offset", "open", "padding", "placement", "teleport-target", "theme", "transition-duration", "wrapper"])
@@ -149,5 +147,5 @@ const me = /* @__PURE__ */ V({
   }
 });
 export {
-  me as default
+  be as default
 };

package/dist/index123.js

@@ -1,5 +1,5 @@
 import { defineComponent as $, computed as g, resolveComponent as y, openBlock as f, createElementBlock as i, Fragment as k, renderList as h, normalizeClass as b, createElementVNode as s, renderSlot as t, createVNode as v, createSlots as B, withCtx as _, mergeProps as C } from "vue";
-import { flattenTree as T } from "./index312.js";
+import { flattenTree as T } from "./index314.js";
 const w = { class: "bb-tree-row" }, E = { class: "bb-tree-main-content" }, N = /* @__PURE__ */ $({
   __name: "BbTree",
   props: {

package/dist/index125.js

@@ -1,5 +1,5 @@
 import { defineComponent as i, openBlock as o, createElementBlock as a, createElementVNode as t, renderSlot as p, createTextVNode as b, toDisplayString as m, unref as u, withModifiers as d, createCommentVNode as _ } from "vue";
-import { useLocale as f } from "./index232.js";
+import { useLocale as f } from "./index212.js";
 const h = { class: "bb-chip" }, L = { class: "bb-chip__content" }, k = ["aria-label"], B = /* @__PURE__ */ i({
   __name: "BbChip",
   props: {

package/dist/index127.js

@@ -1,5 +1,5 @@
 import { defineComponent as v, ref as p, getCurrentInstance as c, onServerPrefetch as w, onBeforeMount as z, inject as _, watch as b, computed as f, openBlock as h, createElementBlock as $, mergeProps as g } from "vue";
-import { isCssColor as I } from "./index210.js";
+import { isCssColor as I } from "./index238.js";
 const B = ["innerHTML"], k = /* @__PURE__ */ v({
   __name: "BbIcon",
   props: {

package/dist/index128.js

@@ -1,5 +1,5 @@
 import { defineComponent as v, ref as r, onMounted as p, onBeforeUnmount as h, openBlock as i, createBlock as l, resolveDynamicComponent as u, normalizeStyle as m, withCtx as f, renderSlot as d } from "vue";
-import { throttle as g } from "./index246.js";
+import { throttle as g } from "./index249.js";
 const O = /* @__PURE__ */ v({
   __name: "BbSmoothHeight",
   props: {

package/dist/index129.js

@@ -1,5 +1,5 @@
 import { defineComponent as p, computed as s, openBlock as b, createElementBlock as a, normalizeProps as _, guardReactiveProps as x, createStaticVNode as m } from "vue";
-import { isCssColor as u } from "./index210.js";
+import { isCssColor as u } from "./index238.js";
 const f = /* @__PURE__ */ p({
   __name: "BbSpinner",
   props: {

package/dist/index13.js

@@ -1,7 +1,7 @@
 import { defineComponent as C, getCurrentInstance as d, shallowRef as x, watch as S, computed as f, openBlock as L, createBlock as B, resolveDynamicComponent as N, unref as $, mergeProps as F, withCtx as w, renderSlot as A, createTextVNode as P, toDisplayString as _, resolveComponent as m } from "vue";
 import { _config as o } from "./index4.js";
-import { useLogger as v } from "./index240.js";
-import { hash as g } from "./index219.js";
+import { useLogger as v } from "./index243.js";
+import { hash as g } from "./index235.js";
 const I = /* @__PURE__ */ C({
   __name: "BaseButton",
   props: {

package/dist/index131.js

@@ -1,4 +1,4 @@
-import { clamp as o } from "./index205.js";
+import { clamp as o } from "./index206.js";
 const r = (t, e) => t * 100 / e, p = (t, e) => t / 100 * e, l = (t, e, n) => r(t - e, n - e), P = ({
   value: t = 0,
   originalBounds: e,

package/dist/index132.js

@@ -1,5 +1,5 @@
-import { toValue as O, tryOnScopeDispose as R, notNullish as $, noop as W, useDebounceFn as q, useThrottleFn as G, tryOnMounted as X, isObject as J, isClient as K } from "./index249.js";
-import { bypassFilter as ve, createFilterWrapper as de, debounceFilter as pe, debouncedWatch as he, getLifeCycleTarget as me, throttleFilter as be, debouncedWatch as ge, watchWithFilter as ye } from "./index249.js";
+import { toValue as O, tryOnScopeDispose as R, notNullish as $, noop as W, useDebounceFn as q, useThrottleFn as G, tryOnMounted as X, isObject as J, isClient as K } from "./index205.js";
+import { bypassFilter as ve, createFilterWrapper as de, debounceFilter as pe, debouncedWatch as he, getLifeCycleTarget as me, throttleFilter as be, debouncedWatch as ge, watchWithFilter as ye } from "./index205.js";
 import { computed as w, watch as z, ref as S, reactive as k, getCurrentInstance as U, onMounted as Z, watchEffect as ee } from "vue";
 function L(l) {
   var o;

package/dist/index133.js

@@ -1,5 +1,5 @@
-import { isArray as p } from "./index317.js";
-import { isPlainObject as c } from "./index318.js";
+import { isArray as p } from "./index323.js";
+import { isPlainObject as c } from "./index324.js";
 function i(e, n, u, l, r) {
   const o = {}.propertyIsEnumerable.call(l, n) ? "enumerable" : "nonenumerable";
   o === "enumerable" && (e[n] = u), r && o === "nonenumerable" && Object.defineProperty(e, n, {

package/dist/index15.js

@@ -1,17 +1,19 @@
-import { defineComponent as v, ref as h, computed as g, watchPostEffect as C, openBlock as w, createElementBlock as B, Fragment as V, createVNode as t, normalizeClass as H, withCtx as n, renderSlot as l, createElementVNode as s, normalizeStyle as E, withModifiers as q, withDirectives as I, mergeProps as $, unref as d } from "vue";
+import { defineComponent as v, ref as h, computed as C, watchPostEffect as g, openBlock as V, createElementBlock as B, Fragment as w, createVNode as d, normalizeClass as H, withCtx as n, renderSlot as r, unref as t, createElementVNode as s, normalizeStyle as $, withModifiers as E, withDirectives as q, mergeProps as I } from "vue";
 import M from "./index207.js";
 /* empty css         */
 import L from "./index209.js";
-import { vMaska as z } from "./index233.js";
-import { isHex as D } from "./index248.js";
-import { useLocale as F } from "./index232.js";
-const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus", "disabled", "name", "placeholder", "readonly", "required", "value"], N = ["aria-invalid", "aria-label", "disabled", "required"], J = /* @__PURE__ */ v({
+import { vMaska as N } from "./index210.js";
+import { isHex as z } from "./index211.js";
+import { useLocale as D } from "./index212.js";
+import { isNotNil as F } from "./index134.js";
+const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus", "disabled", "name", "placeholder", "readonly", "required", "value"], S = ["aria-invalid", "aria-label", "disabled", "required"], U = /* @__PURE__ */ v({
   __name: "BaseColorInput",
   props: {
     "append:icon": {},
     ariaDescribedby: {},
     autocomplete: {},
     autofocus: {},
+    clearable: { type: Boolean },
     compact: { type: Boolean },
     disabled: { type: Boolean },
     hasErrors: { type: Boolean },
@@ -26,7 +28,7 @@ const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
   },
   emits: ["blur", "change", "click", "focus", "input", "keydown", "mousedown", "mouseup", "update:modelValue"],
   setup(p, { emit: u }) {
-    const a = p, o = u, { t: c } = F(), i = h(), m = g(() => ({
+    const a = p, o = u, { t: c } = D(), i = h(), m = C(() => ({
       "bb-base-color-input": !0,
       "bb-base-color-input--disabled": a.disabled,
       "bb-base-color-input--errors": a.hasErrors,
@@ -45,57 +47,59 @@ const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
       onMousedown: (e) => o("mousedown", e),
       onMouseup: (e) => o("mouseup", e),
       onMaska: (e) => {
-        const r = e.detail;
-        D(r.masked) ? o("update:modelValue", r.masked) : r.masked === "" && o("update:modelValue", null);
+        const l = e.detail;
+        z(l.masked) ? o("update:modelValue", l.masked) : l.masked === "" && o("update:modelValue", null);
       }
     }, f = () => {
       var e;
       (e = i.value) == null || e.click();
-    }, k = {
+    }, y = {
       mask: "!#HHHHHH",
       tokens: {
         H: { pattern: /[0-9a-fA-F]/ }
       },
       eager: !0
-    }, y = (e) => {
+    }, k = (e) => {
       e.target instanceof HTMLInputElement && o("update:modelValue", e.target.value);
     };
-    return C(() => {
+    return g(() => {
       i.value && (i.value.value = a.modelValue ?? "");
-    }), (e, r) => (w(), B(V, null, [
-      t(L, {
+    }), (e, l) => (V(), B(w, null, [
+      d(L, {
         class: H(m.value)
       }, {
         "prepend-outer": n(() => [
-          l(e.$slots, "prepend-outer")
+          r(e.$slots, "prepend-outer")
         ]),
         "append-outer": n(() => [
-          l(e.$slots, "append-outer")
+          r(e.$slots, "append-outer")
         ]),
         default: n(() => [
-          t(M, {
+          d(M, {
             "append:icon": a["append:icon"],
-            "prepend:icon": a["prepend:icon"]
+            clearable: e.clearable && t(F)(e.modelValue),
+            "prepend:icon": a["prepend:icon"],
+            "onClick:clear": l[0] || (l[0] = (A) => e.$emit("update:modelValue", null))
           }, {
             prepend: n(() => [
-              l(e.$slots, "prepend")
+              r(e.$slots, "prepend")
             ]),
             prefix: n(() => [
-              l(e.$slots, "prefix")
+              r(e.$slots, "prefix")
             ]),
             append: n(() => [
               s("span", {
                 class: "bb-base-color-input__indicator",
-                style: E({ backgroundColor: a.modelValue ?? void 0 }),
-                onClick: q(f, ["stop"])
+                style: $({ backgroundColor: a.modelValue ?? void 0 }),
+                onClick: E(f, ["stop"])
               }, null, 4),
-              l(e.$slots, "append")
+              r(e.$slots, "append")
             ]),
             suffix: n(() => [
-              l(e.$slots, "suffix")
+              r(e.$slots, "suffix")
             ]),
             default: n(() => [
-              I(s("input", $(b, {
+              q(s("input", I(b, {
                 id: e.id,
                 ref: "input",
                 "aria-describedby": e.ariaDescribedby,
@@ -109,33 +113,34 @@ const P = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus"
                 readonly: e.readonly,
                 required: e.required,
                 size: "1",
+                type: "text",
                 value: e.modelValue
               }), null, 16, P), [
-                [d(z), k]
+                [t(N), y]
               ]),
               s("input", {
                 ref_key: "picker",
                 ref: i,
                 "aria-hidden": "true",
                 "aria-invalid": e.hasErrors ? !0 : void 0,
-                "aria-label": d(c)("colorInput.paletteLabel").value,
+                "aria-label": t(c)("colorInput.paletteLabel").value,
                 class: "bb-base-color-input__picker",
                 disabled: e.disabled || e.readonly,
                 required: e.required,
                 tabindex: "-1",
                 type: "color",
-                onInput: y
-              }, null, 40, N)
+                onInput: k
+              }, null, 40, S)
             ]),
             _: 3
-          }, 8, ["append:icon", "prepend:icon"])
+          }, 8, ["append:icon", "clearable", "prepend:icon"])
         ]),
         _: 3
       }, 8, ["class"]),
-      r[0] || (r[0] = s("span", null, null, -1))
+      l[1] || (l[1] = s("span", null, null, -1))
     ], 64));
   }
 });
 export {
-  J as default
+  U as default
 };

package/dist/index17.js

@@ -1,7 +1,7 @@
 import { defineComponent as E, ref as m, computed as n, watch as _, openBlock as p, createElementBlock as h, normalizeProps as i, guardReactiveProps as f, mergeProps as k, createCommentVNode as I, createElementVNode as l, renderSlot as F } from "vue";
-import { isCssColor as y } from "./index210.js";
-import { when as N } from "./index211.js";
-import { booleanishToBoolean as S } from "./index212.js";
+import { isCssColor as y } from "./index238.js";
+import { when as N } from "./index239.js";
+import { booleanishToBoolean as S } from "./index240.js";
 const A = {
   "aria-hidden": "true",
   class: "bb-base-checkbox-container"