bitboss-ui 2.1.35 → 2.1.37

package/dist/index119.js

@@ -1,4 +1,4 @@
-import { defineComponent as ee, ref as n, computed as $, getCurrentInstance as te, watch as b, nextTick as le, onMounted as ae, createElementBlock as p, openBlock as f, normalizeClass as T, unref as ie, createElementVNode as h, renderSlot as k, normalizeProps as U, guardReactiveProps as W, normalizeStyle as se, Fragment as K, renderList as O, createVNode as J, withCtx as I, toDisplayString as re, createBlock as ne, Transition as oe, createCommentVNode as ue } from "vue";
+import { defineComponent as ee, ref as r, computed as $, getCurrentInstance as te, watch as b, nextTick as le, onMounted as ae, createElementBlock as p, openBlock as f, normalizeClass as T, unref as ie, createElementVNode as h, renderSlot as k, normalizeProps as U, guardReactiveProps as W, normalizeStyle as se, Fragment as K, renderList as O, createVNode as J, withCtx as I, toDisplayString as ne, createBlock as re, Transition as oe, createCommentVNode as ue } from "vue";
 import { useId as de } from "./index8.js";
 import { useRoute as ce } from "./index145.js";
 import { useRouter as be } from "./index146.js";
@@ -25,11 +25,11 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
   emits: ["update:modelValue"],
   setup(M, { expose: j, emit: G }) {
     var A, H;
-    const t = M, Q = G, d = ce(), q = be(), S = n(), L = t.id ?? de().id.value, g = `bb-tab_${L}`, c = n(), { isScrolling: X, arrivedState: V } = he(c), B = $(() => ({
+    const t = M, Q = G, d = ce(), q = be(), S = r(), L = t.id ?? de().id.value, g = `bb-tab_${L}`, c = r(), { isScrolling: X, arrivedState: V } = he(c), B = $(() => ({
       isScrolling: X.value,
       left: V.left,
       right: V.right
-    })), C = !!((H = (A = te()) == null ? void 0 : A.proxy) != null && H.$inertia), i = n(null), o = $(
+    })), C = !!((H = (A = te()) == null ? void 0 : A.proxy) != null && H.$inertia), i = r(null), o = $(
       () => t.items.findIndex((e) => e.key === i.value)
     ), _ = $(() => o.value === 0), w = $(() => o.value === t.items.length - 1);
     t.items.forEach((e) => {
@@ -37,9 +37,9 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
         throw console.error("A tab item has no key", e), new Error("A tab item has no key " + JSON.stringify(e));
     });
     const R = () => {
-      var e, a, l, r, s;
+      var e, a, l, n, s;
       if (t.navigation && ((a = (e = d.value) == null ? void 0 : e.query) != null && a[t.querykey]))
-        i.value = (r = (l = d.value) == null ? void 0 : l.query) == null ? void 0 : r[t.querykey];
+        i.value = (n = (l = d.value) == null ? void 0 : l.query) == null ? void 0 : n[t.querykey];
       else if (t.navigation && C && ((s = globalThis == null ? void 0 : globalThis.location) != null && s.href) && new URL(globalThis.location.href).searchParams.get(t.querykey))
         i.value = new URL(globalThis.location.href).searchParams.get(
           t.querykey
@@ -58,8 +58,8 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
     };
     R();
     const y = async (e, a = !1) => {
-      var l, r, s, m;
-      if (t.navigation && d.value && ((r = (l = d.value) == null ? void 0 : l.query) == null ? void 0 : r[t.querykey]) !== e)
+      var l, n, s, m;
+      if (t.navigation && d.value && ((n = (l = d.value) == null ? void 0 : l.query) == null ? void 0 : n[t.querykey]) !== e)
         q == null || q.push({
           ...d,
           query: { ...(s = d.value) == null ? void 0 : s.query, [t.querykey]: e },
@@ -101,10 +101,10 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
       if (a === null)
         throw new Error("Could not navigate to next tab");
       if (t.items[a].disabled) return;
-      const l = t.items[a].key, r = document.querySelector(
+      const l = t.items[a].key, n = document.querySelector(
         `#${g}_tab_${l}`
       );
-      r == null || r.focus(), y(l, t.replace);
+      n == null || n.focus(), y(l, t.replace);
     }, Y = (e) => {
       if (!t.disabled)
         if (e.key === "ArrowRight")
@@ -147,18 +147,18 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
       },
       { flush: "post" }
     );
-    const P = n("right");
+    const P = r("right");
     b(
       i,
       (e, a) => {
         if (e && a) {
-          const l = t.items.findIndex((s) => s.key === e), r = t.items.findIndex((s) => s.key === a);
-          P.value = l > r ? "right" : "left";
+          const l = t.items.findIndex((s) => s.key === e), n = t.items.findIndex((s) => s.key === a);
+          P.value = l > n ? "right" : "left";
         }
       },
       { flush: "sync" }
     );
-    const E = n(0), z = n(0), D = n(0), F = n(0), N = n(0), x = () => {
+    const E = r(0), z = r(0), D = r(0), F = r(0), N = r(0), x = () => {
       if (!c.value)
         return;
       const e = c.value.querySelector(
@@ -189,7 +189,7 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
       ref: S,
       class: T(["bb-tab", {
         [`bb-tab--${e.direction}`]: !0,
-        "bb-tab--disabled": !0
+        "bb-tab--disabled": e.disabled
       }])
     }, [
       h("div", ke, [
@@ -220,7 +220,7 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
               disabled: l.disabled || e.disabled,
               role: "tab",
               tabindex: i.value === l.key ? 0 : -1,
-              onClick: (r) => y(l.key, t.replace),
+              onClick: (n) => y(l.key, t.replace),
               onKeydown: Y
             }, {
               default: I(() => [
@@ -246,7 +246,7 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
                     text: l.label,
                     value: l.key
                   }, () => [
-                    h("span", ge, re(l.label), 1)
+                    h("span", ge, ne(l.label), 1)
                   ])
                 ])
               ]),
@@ -261,7 +261,7 @@ const pe = ["id"], ke = { class: "bb-tab__label-boundary" }, ge = { class: "bb-t
       h("div", _e, [
         J(ve, null, {
           default: I(() => [
-            (f(!0), p(K, null, O(e.items, (l) => (f(), ne(oe, {
+            (f(!0), p(K, null, O(e.items, (l) => (f(), re(oe, {
               key: l.key,
               css: e.animate,
               name: `tab-slide-${P.value}`

package/dist/index121.js

@@ -1,21 +1,21 @@
 import { defineComponent as ue, ref as K, computed as h, toRef as O, watch as D, reactive as pe, createBlock as Q, openBlock as n, resolveDynamicComponent as me, normalizeClass as p, unref as v, withCtx as fe, createElementBlock as d, createCommentVNode as g, createElementVNode as o, toDisplayString as m, renderSlot as f, Fragment as A, renderList as B, createVNode as X, createTextVNode as ye, mergeProps as he } from "vue";
-import { add as ve } from "./index280.js";
+import { add as ve } from "./index279.js";
 import { clamp as ke } from "./index214.js";
-import { isNil as T } from "./index252.js";
+import { isNil as T } from "./index239.js";
 import { useId as _e } from "./index8.js";
-import { useItemValue as ge } from "./index278.js";
-import { when as Ce } from "./index247.js";
+import { useItemValue as ge } from "./index280.js";
+import { when as Ce } from "./index236.js";
 import Y from "./index17.js";
 /* empty css        */
 import we from "./index31.js";
 /* empty css        */
-import { hash as E } from "./index222.js";
-import { useItemsGetter as Ie } from "./index233.js";
-import { usePrefill as Ve } from "./index238.js";
-import { useIndexById as Ae } from "./index234.js";
-import { useBaseOptions as Be } from "./index235.js";
-import { useHashedWatcher as Te } from "./index237.js";
-import { useLocale as $e } from "./index230.js";
+import { hash as E } from "./index256.js";
+import { useItemsGetter as Ie } from "./index267.js";
+import { usePrefill as Ve } from "./index270.js";
+import { useIndexById as Ae } from "./index243.js";
+import { useBaseOptions as Be } from "./index242.js";
+import { useHashedWatcher as Te } from "./index269.js";
+import { useLocale as $e } from "./index217.js";
 const xe = {
   key: 0,
   class: "sr-only"

package/dist/index129.js

@@ -1,6 +1,6 @@
 import { defineComponent as a, createElementBlock as o, openBlock as e, normalizeClass as c, createVNode as l, TransitionGroup as m, withCtx as i, Fragment as p, renderList as u, unref as r, createBlock as f, mergeProps as _ } from "vue";
 import { useToast as d, state as k } from "./index11.js";
-import b from "./index281.js";
+import b from "./index286.js";
 const $ = /* @__PURE__ */ a({
   __name: "BbToast",
   props: {

package/dist/index13.js

@@ -1,5 +1,5 @@
 import { defineComponent as m, getCurrentInstance as h, computed as r, createBlock as i, openBlock as u, mergeProps as c, withCtx as d, renderSlot as p, createTextVNode as f, toDisplayString as v, resolveDynamicComponent as C } from "vue";
-import S from "./index239.js";
+import S from "./index234.js";
 const A = /* @__PURE__ */ m({
   __name: "BaseButton",
   props: {

package/dist/index131.js

@@ -1,15 +1,15 @@
 import { defineComponent as S, mergeModels as z, ref as k, computed as d, useTemplateRef as F, useModel as N, createElementBlock as W, openBlock as B, Fragment as A, renderSlot as C, createVNode as U, normalizeProps as H, guardReactiveProps as I, unref as l, mergeProps as j, withCtx as E, createElementVNode as m, normalizeStyle as q, createBlock as x, createCommentVNode as G } from "vue";
-import { throttle as p } from "./index276.js";
+import { throttle as p } from "./index278.js";
 import { useId as J } from "./index8.js";
-import { useLocale as K } from "./index230.js";
-import { useUntil as Q } from "./index250.js";
+import { useLocale as K } from "./index217.js";
+import { useUntil as Q } from "./index249.js";
 import X from "./index13.js";
 /* empty css        */
-import Y from "./index244.js";
+import Y from "./index223.js";
 /* empty css         */
 import { useElementSize as Z } from "./index140.js";
-import { extractDomContainer as c } from "./index272.js";
-import { parseWidthString as _ } from "./index273.js";
+import { extractDomContainer as c } from "./index252.js";
+import { parseWidthString as _ } from "./index253.js";
 const pe = /* @__PURE__ */ S({
   inheritAttrs: !1,
   __name: "BbTooltip",

package/dist/index133.js

@@ -1,5 +1,5 @@
 import { defineComponent as $, computed as g, resolveComponent as y, createElementBlock as f, openBlock 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 "./index282.js";
+import { flattenTree as T } from "./index281.js";
 const w = { class: "bb-tree-row" }, E = { class: "bb-tree-main-content" }, N = /* @__PURE__ */ $({
   __name: "BbTree",
   props: {

package/dist/index135.js

@@ -5,8 +5,8 @@ import u from "./index85.js";
 /* empty css        */
 import h from "./index113.js";
 /* empty css         */
-import v from "./index283.js";
-import B from "./index284.js";
+import v from "./index282.js";
+import B from "./index283.js";
 /* empty css         */
 const E = { class: "bb-common-input-inner-container__prefix" }, I = { class: "bb-common-input-inner-container__suffix" }, R = /* @__PURE__ */ k({
   __name: "CommonInputInnerContainer",

package/dist/index142.js

@@ -1,5 +1,5 @@
-import { isArray as p } from "./index286.js";
-import { isPlainObject as i } from "./index287.js";
+import { isArray as p } from "./index287.js";
+import { isPlainObject as i } from "./index288.js";
 function f(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,15 +1,15 @@
 import { defineComponent as H, ref as s, computed as D, createBlock as E, openBlock as I, normalizeClass as L, withCtx as l, createVNode as d, unref as u, withDirectives as M, createElementVNode as p, mergeProps as _, renderSlot as r, withModifiers as q, normalizeStyle as N } from "vue";
-import { isHex as z } from "./index240.js";
+import { isHex as z } from "./index219.js";
 import { isNotNil as F } from "./index143.js";
 import { useId as S } from "./index8.js";
-import { useLocale as U } from "./index230.js";
-import { vMaska as A } from "./index241.js";
-import K from "./index242.js";
+import { useLocale as U } from "./index217.js";
+import { vMaska as A } from "./index220.js";
+import K from "./index221.js";
 /* empty css         */
 import O from "./index135.js";
 /* empty css         */
 import P from "./index137.js";
-import T from "./index244.js";
+import T from "./index223.js";
 /* empty css         */
 const j = ["id", "aria-describedby", "aria-invalid", "autocomplete", "autofocus", "disabled", "name", "placeholder", "readonly", "required", "value"], G = ["aria-label"], J = { class: "bb-common-input-inner-container__suffix" }, re = /* @__PURE__ */ H({
   __name: "BaseColorInput",

package/dist/index17.js

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

package/dist/index19.js

@@ -1,15 +1,15 @@
 import { defineComponent as j, ref as k, toRef as d, createBlock as z, openBlock as G, unref as B, withCtx as s, renderSlot as l, normalizeProps as b, guardReactiveProps as v, createVNode as R, mergeProps as T } from "vue";
 import W from "./index17.js";
 /* empty css        */
-import K from "./index231.js";
+import K from "./index265.js";
 /* empty css         */
-import { useItemsGetter as N } from "./index233.js";
-import { useIndexById as w } from "./index234.js";
-import { useBaseOptions as U } from "./index235.js";
-import { useCoherence as q } from "./index236.js";
-import { hash as J } from "./index222.js";
-import { useHashedWatcher as C } from "./index237.js";
-import { usePrefill as Q } from "./index238.js";
+import { useItemsGetter as N } from "./index267.js";
+import { useIndexById as w } from "./index243.js";
+import { useBaseOptions as U } from "./index242.js";
+import { useCoherence as q } from "./index268.js";
+import { hash as J } from "./index256.js";
+import { useHashedWatcher as C } from "./index269.js";
+import { usePrefill as Q } from "./index270.js";
 const de = /* @__PURE__ */ j({
   __name: "BaseCheckboxGroup",
   props: {

package/dist/index21.js

@@ -5,22 +5,22 @@ import { _config as C } from "./index4.js";
 import { useId as F } from "./index8.js";
 import f from "./index13.js";
 /* empty css        */
-import s from "./index215.js";
-import G from "./index216.js";
-import J from "./index217.js";
-import K from "./index218.js";
-import Q from "./index219.js";
-import X from "./index220.js";
-import ee from "./index221.js";
-import { hash as M } from "./index222.js";
-import { last as ae } from "./index223.js";
-import { useLogger as te } from "./index224.js";
-import oe from "./index225.js";
-import le from "./index226.js";
-import re from "./index227.js";
-import B from "./index228.js";
-import se from "./index229.js";
-import { useLocale as de } from "./index230.js";
+import s from "./index225.js";
+import G from "./index228.js";
+import J from "./index229.js";
+import K from "./index230.js";
+import Q from "./index227.js";
+import X from "./index254.js";
+import ee from "./index255.js";
+import { hash as M } from "./index256.js";
+import { last as ae } from "./index233.js";
+import { useLogger as te } from "./index257.js";
+import oe from "./index258.js";
+import le from "./index259.js";
+import re from "./index260.js";
+import B from "./index261.js";
+import se from "./index262.js";
+import { useLocale as de } from "./index217.js";
 const ie = { class: "bb-base-date-picker" }, ne = { class: "bb-base-date-picker__body" }, ue = { class: "bb-base-date-picker__controls" }, me = { class: "sr-only" }, pe = { class: "sr-only" }, ce = { class: "sr-only" }, fe = {
   style: { transform: "rotate(180deg)" },
   viewBox: "0 0 24 24",

package/dist/index215.js

@@ -1,7 +1,12 @@
-import { getDefaultExportFromCjs as r } from "./index315.js";
-import { __require as o } from "./index288.js";
-var t = o();
-const s = /* @__PURE__ */ r(t);
+const o = (t, r) => {
+  const e = {};
+  for (const c in t)
+    if (Object.prototype.hasOwnProperty.call(t, c)) {
+      const n = t[c];
+      r(n, c, t) && (e[c] = n);
+    }
+  return e;
+};
 export {
-  s as default
+  o as pickBy
 };

package/dist/index216.js

@@ -1,7 +1,5 @@
-import { getDefaultExportFromCjs as r } from "./index315.js";
-import { __require as e } from "./index290.js";
-var t = e();
-const m = /* @__PURE__ */ r(t);
+const o = () => {
+};
 export {
-  m as default
+  o as noop
 };

package/dist/index217.js

@@ -1,7 +1,15 @@
-import { getDefaultExportFromCjs as r } from "./index315.js";
-import { __require as e } from "./index292.js";
-var o = e();
-const m = /* @__PURE__ */ r(o);
+import { locales as t } from "./index289.js";
+import { _config as m } from "./index4.js";
+import { get as c } from "./index272.js";
+import { readonly as l, computed as n } from "vue";
+const p = (o, ...r) => l(
+  n(() => c(t[m.locale], o).replace(
+    /\{(\d+)\}/g,
+    (a, e) => r[e]
+  ))
+), d = () => ({
+  t: p
+});
 export {
-  m as default
+  d as useLocale
 };

package/dist/index218.js

@@ -1,7 +1,5 @@
-import { getDefaultExportFromCjs as r } from "./index315.js";
-import { __require as t } from "./index294.js";
-var o = t();
-const a = /* @__PURE__ */ r(o);
+import r from "./index290.js";
+const t = r;
 export {
-  a as default
+  t as deburr
 };

package/dist/index219.js

@@ -1,7 +1,6 @@
-import { getDefaultExportFromCjs as r } from "./index315.js";
-import { __require as e } from "./index296.js";
-var o = e();
-const m = /* @__PURE__ */ r(o);
+function x(e) {
+  return /^#([A-Fa-f0-9]{6})$/.test(e);
+}
 export {
-  m as default
+  x as isHex
 };

package/dist/index220.js

@@ -1,7 +1,22 @@
-import { getDefaultExportFromCjs as e } from "./index315.js";
-import { __require as r } from "./index298.js";
-var o = r();
-const p = /* @__PURE__ */ e(o);
+import { MaskInput as r } from "./index263.js";
+const u = /* @__PURE__ */ new WeakMap(), p = (a, n) => {
+  if (a.arg == null || a.instance == null) return;
+  const s = "setup" in a.instance.$.type;
+  a.arg in a.instance ? a.instance[a.arg] = n : s && console.warn("Maska: please expose `%s` using defineExpose", a.arg);
+}, k = (a, n) => {
+  var s;
+  const t = a instanceof HTMLInputElement ? a : a.querySelector("input");
+  if (t == null || (t == null ? void 0 : t.type) === "file") return;
+  let e = {};
+  if (n.value != null && (e = typeof n.value == "string" ? { mask: n.value } : { ...n.value }), n.arg != null) {
+    const l = (o) => {
+      const i = n.modifiers.unmasked ? o.unmasked : n.modifiers.completed ? o.completed : o.masked;
+      p(n, i);
+    };
+    e.onMaska = e.onMaska == null ? l : Array.isArray(e.onMaska) ? [...e.onMaska, l] : [e.onMaska, l];
+  }
+  u.has(t) ? (s = u.get(t)) == null || s.update(e) : u.set(t, new r(t, e));
+};
 export {
-  p as default
+  k as vMaska
 };

package/dist/index221.js

@@ -1,7 +1,199 @@
-import { getDefaultExportFromCjs as e } from "./index315.js";
-import { __require as r } from "./index300.js";
-var o = r();
-const f = /* @__PURE__ */ e(o);
+import { defineComponent as j, ref as c, onMounted as J, watch as Q, createElementBlock as S, openBlock as _, createElementVNode as w, createTextVNode as A, createCommentVNode as E, toDisplayString as C, unref as x } from "vue";
+import { hexToRgb as B } from "./index338.js";
+import { getHueFromRGB as K } from "./index339.js";
+import { hslToHex as y } from "./index340.js";
+import { useLocale as Z } from "./index217.js";
+const ee = {
+  id: "mainCanvasDesc",
+  "aria-live": "polite",
+  class: "sr-only"
+}, te = { key: 0 }, ae = {
+  id: "hueCanvasDesc",
+  "aria-live": "polite",
+  class: "sr-only"
+}, ne = { key: 0 }, ce = /* @__PURE__ */ j({
+  __name: "ColorPallette",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(F, { emit: N }) {
+    const R = F, f = N, { t: h } = Z(), o = c(R.modelValue), d = c(
+      y(K(...B(o.value ?? "#ff0000")), 100, 50)
+    ), O = c(null), s = c(null), r = c(null), l = c({ x: 0, y: 0 }), u = c({ x: 0 }), b = c(!1), k = c(!1), T = () => {
+      const e = s.value, t = r.value;
+      !e || !t || (e.width = e.offsetWidth, e.height = e.offsetHeight, t.width = t.offsetWidth, t.height = t.offsetHeight, v(), m());
+    }, D = () => {
+      const e = s.value;
+      return e ? e.getContext("2d", { willReadFrequently: !0 }) : null;
+    }, v = () => {
+      const e = s.value;
+      if (!e) return;
+      const t = D();
+      if (!t) return;
+      t.clearRect(0, 0, e.width, e.height);
+      const a = t.createLinearGradient(0, 0, e.width, 0);
+      a.addColorStop(0, d.value), a.addColorStop(1, "#ffffff");
+      const n = t.createLinearGradient(0, 0, 0, e.height);
+      n.addColorStop(0, "transparent"), n.addColorStop(1, "#000000"), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height), t.fillStyle = n, t.globalCompositeOperation = "multiply", t.fillRect(0, 0, e.width, e.height), t.globalCompositeOperation = "source-over", t.fillStyle = "#000000", t.strokeStyle = "#000000", t.lineWidth = 1;
+    }, p = () => {
+      const e = D();
+      e && (e.beginPath(), e.arc(
+        l.value.x,
+        l.value.y,
+        8,
+        0,
+        2 * Math.PI
+      ), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), e.beginPath(), e.arc(
+        l.value.x,
+        l.value.y,
+        7,
+        0,
+        2 * Math.PI
+      ), e.strokeStyle = "#000000", e.lineWidth = 1, e.stroke(), e.globalCompositeOperation = "source-over");
+    }, P = () => {
+      const e = r.value;
+      return e ? e.getContext("2d", { willReadFrequently: !0 }) : null;
+    }, m = () => {
+      const e = r.value;
+      if (!e) return;
+      const t = P();
+      if (!t) return;
+      const a = t.createLinearGradient(0, 0, e.width, 0);
+      for (let n = 0; n <= 360; n += 60)
+        a.addColorStop(n / 360, `hsl(${n}, 100%, 50%)`);
+      a.addColorStop(1, "hsl(360, 100%, 50%)"), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height), H(), t.fillStyle = "#000000", t.strokeStyle = "#000000", t.lineWidth = 1;
+    }, H = () => {
+      const e = r.value;
+      if (!e) return;
+      const t = P();
+      if (!t) return;
+      const a = 10, n = 16, i = u.value.x - a / 2, M = e.height / 2 - n / 2;
+      t.beginPath(), t.roundRect(i, M, a, n, 2), t.strokeStyle = "lightgray", t.stroke(), t.fillStyle = "#ffffff", t.fill();
+    }, q = (e) => {
+      s.value && (window.addEventListener("pointermove", L), window.addEventListener("pointerup", G), b.value = !0, I(e));
+    }, U = (e) => {
+      r.value && (window.addEventListener("pointermove", L), window.addEventListener("pointerup", G), k.value = !0, V(e));
+    }, I = (e) => {
+      const t = s.value;
+      if (!t) return;
+      const a = t.getBoundingClientRect(), n = Math.max(0, Math.min(t.width, e.clientX - a.left)), i = Math.max(0, Math.min(t.height, e.clientY - a.top));
+      l.value = { x: n, y: i }, v(), p(), o.value = g(), f("update:modelValue", o.value);
+    }, V = (e) => {
+      const t = r.value;
+      if (!t) return;
+      const a = t.getBoundingClientRect(), n = Math.max(0, Math.min(t.width, e.clientX - a.left));
+      u.value = { x: n };
+      const i = n / t.width * 360;
+      d.value = y(i, 100, 50), m(), v(), p(), o.value = g(), f("update:modelValue", o.value);
+    }, L = (e) => {
+      b.value ? I(e) : k.value && V(e);
+    }, G = () => {
+      b.value = !1, k.value = !1;
+    }, X = (e) => {
+      var a, n;
+      switch (e.key) {
+        case "ArrowUp":
+          l.value.y = Math.max(0, l.value.y - 5);
+          break;
+        case "ArrowDown":
+          l.value.y = Math.min(
+            ((a = s.value) == null ? void 0 : a.height) ?? 0,
+            l.value.y + 5
+          );
+          break;
+        case "ArrowLeft":
+          l.value.x = Math.max(0, l.value.x - 5);
+          break;
+        case "ArrowRight":
+          l.value.x = Math.min(
+            ((n = s.value) == null ? void 0 : n.width) ?? 0,
+            l.value.x + 5
+          );
+          break;
+        default:
+          return;
+      }
+      v(), p(), o.value = g(), f("update:modelValue", o.value), e.preventDefault();
+    }, $ = (e) => {
+      var n, i;
+      switch (e.key) {
+        case "ArrowLeft":
+          u.value.x = Math.max(0, u.value.x - 5);
+          break;
+        case "ArrowRight":
+          u.value.x = Math.min(
+            ((n = r.value) == null ? void 0 : n.width) ?? 0,
+            u.value.x + 5
+          );
+          break;
+        default:
+          return;
+      }
+      const a = u.value.x / (((i = r.value) == null ? void 0 : i.width) ?? 1) * 360;
+      d.value = y(a, 100, 50), m(), H(), v(), p(), o.value = g(), f("update:modelValue", o.value), e.preventDefault();
+    };
+    J(() => {
+      T(), W(o.value ?? "#ff0000");
+    }), Q(
+      () => R.modelValue,
+      (e) => {
+        !e || e === o.value || (o.value = e, W(e), m(), v());
+      }
+    );
+    const g = () => {
+      const e = s.value;
+      if (!e) return "#ffffff";
+      const t = e.getContext("2d");
+      if (!t) return "#ffffff";
+      const { x: a, y: n } = l.value, i = t.getImageData(a, n, 1, 1).data, [M, z, Y] = i;
+      return `#${((1 << 24) + (M << 16) + (z << 8) + Y).toString(16).slice(1)}`;
+    };
+    function W(e) {
+      var a;
+      const t = K(...B(e));
+      d.value = y(t, 100, 50), u.value.x = t / 360 * (((a = r.value) == null ? void 0 : a.width) ?? 0);
+    }
+    return (e, t) => (_(), S("span", {
+      ref_key: "paletteRef",
+      ref: O,
+      "aria-label": "Color Picker",
+      class: "bb-color-palette",
+      role: "application"
+    }, [
+      w("canvas", {
+        ref_key: "mainCanvasRef",
+        ref: s,
+        "aria-describedby": "mainCanvasDesc",
+        "aria-label": "Main Color Selection",
+        class: "bb-color-palette__canvas",
+        role: "application",
+        tabindex: "0",
+        onKeydown: X,
+        onPointerdown: q
+      }, null, 544),
+      w("span", ee, [
+        A(C(x(h)("colorInput.mainCanvasDesc")) + " ", 1),
+        o.value ? (_(), S("span", te, C(x(h)("colorInput.mainCanvasSelectedColor", o.value)), 1)) : E("", !0)
+      ]),
+      w("canvas", {
+        ref_key: "hueCanvasRef",
+        ref: r,
+        "aria-describedby": "hueCanvasDesc",
+        "aria-label": "Hue Selection",
+        class: "bb-color-palette__hue-canvas",
+        role: "application",
+        tabindex: "0",
+        onKeydown: $,
+        onPointerdown: U
+      }, null, 544),
+      w("span", ae, [
+        A(C(x(h)("colorInput.hueCanvasDesc")) + " ", 1),
+        d.value ? (_(), S("span", ne, C(x(h)("colorInput.hueCanvasSelectedHue", d.value)), 1)) : E("", !0)
+      ])
+    ], 512));
+  }
+});
 export {
-  f as default
+  ce as default
 };