@indielayer/ui 0.0.0-dev-20240125104319 → 0.0.0-dev-20240129122517

package/lib/common/icons.d.ts

@@ -11,7 +11,8 @@ export declare const dotsIcon = "<path d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1
 export declare const prevIcon = "<path d=\"M15 19l-7-7 7-7\" />";
 export declare const nextIcon = "<path d=\"M9 5l7 7-7 7\" />";
 export declare const checkIcon = "<path d=\"M5 13l4 4L19 7\" />";
-export declare const chevronDownIcon = "<path d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\" />";
+export declare const selectIcon = "<path d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\" />";
 export declare const externalIcon = "<line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\" /><polyline points=\"7 7 17 7 17 17\" />";
 export declare const stepperPristineIcon = "<path d=\"M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01\"/>";
 export declare const stepperIncompleteIcon = "<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" fill=\"currentColor\" viewBox=\"0 0 32 32\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z\"></path></svg>";
+export declare const chevronDownIcon = "<path d=\"M19 9l-7 7-7-7\" />";

package/lib/common/icons.js

@@ -1,8 +1,8 @@
-const t = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', c = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />', o = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', n = '<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />', a = '<path d="M6 18L18 6M6 6l12 12" />', M = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />', e = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />', s = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />', h = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />', l = '<path d="M15 19l-7-7 7-7" />', p = '<path d="M9 5l7 7-7 7" />', v = '<path d="M5 13l4 4L19 7" />', d = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />', m = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />', r = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>', I = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>';
+const t = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', c = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />', o = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', n = '<path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />', a = '<path d="M6 18L18 6M6 6l12 12" />', M = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />', e = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />', s = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />', h = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />', l = '<path d="M15 19l-7-7 7-7" />', p = '<path d="M9 5l7 7-7 7" />', v = '<path d="M5 13l4 4L19 7" />', d = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />', m = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />', r = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>', I = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>', i = '<path d="M19 9l-7 7-7-7" />';
 export {
   M as avatarIcon,
   v as checkIcon,
-  d as chevronDownIcon,
+  i as chevronDownIcon,
   a as closeIcon,
   h as dotsIcon,
   o as errorIcon,
@@ -12,6 +12,7 @@ export {
   t as infoIcon,
   p as nextIcon,
   l as prevIcon,
+  d as selectIcon,
   I as stepperIncompleteIcon,
   r as stepperPristineIcon,
   c as successIcon,

package/lib/components/icon/theme/Icon.carbon.theme.js

@@ -1,8 +1,11 @@
-const e = {
+const t = {
   classes: {
-    wrapper: "inline shrink-0 h-4 w-4"
+    wrapper: ({ props: s }) => {
+      const e = "inline shrink-0";
+      return s.size === "xs" ? e + " h-3 w-3" : s.size === "lg" ? e + " h-5 w-5" : s.size === "xl" ? e + " h-8 w-8" : e + " h-4 w-4";
+    }
   }
-}, s = e;
+}, n = t;
 export {
-  s as default
+  n as default
 };

package/lib/components/index.js

@@ -49,7 +49,7 @@ import { default as ze } from "./spacer/Spacer.js";
 import { default as Je } from "./spinner/Spinner.vue.js";
 import { default as Oe } from "./table/TableBody.js";
 import { default as Ue } from "./table/TableCell.vue.js";
-import { default as We } from "./table/TableHead.js";
+import { default as We } from "./table/TableHead.vue.js";
 import { default as Ze } from "./table/TableHeader.vue.js";
 import { default as $e } from "./table/TableRow.vue.js";
 import { default as oo } from "./tag/Tag.vue.js";

package/lib/components/link/Link.vue.js

@@ -3,7 +3,7 @@ import o from "./Link.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, m = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-170b7443"]]);
+}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-37edea5a"]]);
 export {
-  m as default
+  c as default
 };

package/lib/components/link/Link.vue2.js

@@ -7,7 +7,7 @@ const C = {
   key: 0,
   class: "inline-flex items-center"
 }, $ = {
-  ...h.props(),
+  ...h.props("primary"),
   tag: {
     type: String,
     default: "a"

package/lib/components/link/theme/Link.base.theme.js

@@ -1,10 +1,10 @@
-const r = {
+const a = {
   classes: {
     wrapper: "transition duration-300 ease-in-out cursor-pointer inline-flex"
   },
-  styles: ({ colors: o, props: t, css: a }) => {
+  styles: ({ colors: o, props: t, css: r }) => {
     const e = o.getPalette(t.color || "gray");
-    return a.variables({
+    return r.variables({
       text: t.color ? e[600] : "",
       hover: {
         text: t.shadow ? "" : e[700]
@@ -19,7 +19,7 @@ const r = {
       }
     });
   }
-}, s = r;
+}, s = a;
 export {
   s as default
 };

package/lib/components/link/theme/Link.carbon.theme.js

@@ -1,5 +1,25 @@
-import e from "./Link.base.theme.js";
-const t = e, o = t;
+const a = {
+  classes: {
+    wrapper: "transition duration-300 ease-in-out cursor-pointer inline-flex text-sm"
+  },
+  styles: ({ colors: o, props: e, css: r }) => {
+    const t = o.getPalette(e.color || "gray");
+    return r.variables({
+      text: e.color ? t[600] : "",
+      hover: {
+        text: e.shadow ? "" : t[700]
+      },
+      shadow: t[100],
+      dark: {
+        text: e.color ? t[400] : "",
+        hover: {
+          text: t[300]
+        },
+        shadow: t[900]
+      }
+    });
+  }
+}, s = a;
 export {
-  o as default
+  s as default
 };

package/lib/components/menu/MenuItem.vue.js

@@ -3,7 +3,7 @@ import o from "./MenuItem.vue3.js";
 import t from "../../_virtual/_plugin-vue_export-helper.js";
 const e = {
   $style: o
-}, c = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-458822a0"]]);
+}, _ = /* @__PURE__ */ t(s, [["__cssModules", e], ["__scopeId", "data-v-8614aac7"]]);
 export {
-  c as default
+  _ as default
 };

package/lib/components/menu/MenuItem.vue2.js

@@ -87,7 +87,7 @@ const V = {
       ref: o
     }, e.value.attrs, {
       to: e.value.to,
-      href: e.value.href,
+      href: e.value.href || e.value.to || "",
       target: e.value.target,
       color: e.value.color,
       style: s(C),

package/lib/components/select/Select.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as ve, ref as A, computed as I, watch as N, nextTick as X, unref as s, openBlock as a, createBlock as c, mergeProps as x, toHandlers as H, withCtx as b, createElementVNode as E, createElementBlock as o, normalizeClass as R, Fragment as p, renderList as z, createTextVNode as C, toDisplayString as m, createVNode as K, withDirectives as pe, vModelSelect as ce, renderSlot as me, createCommentVNode as ye } from "vue";
-import { useEventListener as he } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
+import { defineComponent as ve, ref as A, computed as I, watch as O, nextTick as U, unref as s, openBlock as a, createBlock as c, mergeProps as X, toHandlers as H, withCtx as h, createElementVNode as E, createElementBlock as o, normalizeClass as R, Fragment as p, renderList as z, createTextVNode as C, toDisplayString as m, createVNode as K, withDirectives as pe, vModelSelect as ce, renderSlot as me, createCommentVNode as ye } from "vue";
+import { useEventListener as be } from "../../node_modules/.pnpm/@vueuse_core@10.2.0_vue@3.3.9/node_modules/@vueuse/core/index.js";
 import { useCommon as G } from "../../composables/useCommon.js";
-import { useInputtable as O } from "../../composables/useInputtable.js";
+import { useInputtable as D } from "../../composables/useInputtable.js";
 import { useInteractive as J } from "../../composables/useInteractive.js";
-import { useTheme as be } from "../../composables/useTheme.js";
-import { checkIcon as ke, chevronDownIcon as ge } from "../../common/icons.js";
+import { useTheme as he } from "../../composables/useTheme.js";
+import { checkIcon as ke, selectIcon as ge } from "../../common/icons.js";
 import we from "../label/Label.vue.js";
 import W from "../tag/Tag.vue.js";
 import Ae from "../icon/Icon.vue.js";
@@ -20,19 +20,19 @@ const Ee = { class: "relative" }, ze = {
 }, Ce = {
   key: 0,
   class: "text-gray-400 dark:text-gray-500"
-}, Se = { key: 1 }, De = {
+}, Se = { key: 1 }, Ne = {
   key: 0,
   class: "flex gap-1 flex-wrap"
-}, Ne = {
+}, Oe = {
   key: 0,
   class: "text-gray-400 dark:text-gray-500"
-}, Oe = { key: 1 }, Le = {
+}, De = { key: 1 }, Le = {
   key: 1,
   class: "px-2 text-center text-gray-400"
 }, Be = ["id", "name", "disabled", "multiple", "readonly"], Te = ["value", "disabled"], Fe = {
   ...G.props(),
   ...J.props(),
-  ...O.props(),
+  ...D.props(),
   placeholder: String,
   options: Array,
   multiple: Boolean,
@@ -46,7 +46,7 @@ const Ee = { class: "relative" }, ze = {
 }, il = /* @__PURE__ */ ve({
   ...Pe,
   props: Fe,
-  emits: O.emits(),
+  emits: D.emits(),
   setup(Q, { expose: Y, emit: Z }) {
     const r = Q, V = Z, k = A(null), S = A(null), _ = A(null), f = A(null), u = A(), t = I({
       get() {
@@ -72,10 +72,10 @@ const Ee = { class: "relative" }, ze = {
       var e;
       return (e = f.value) == null ? void 0 : e.isOpen;
     });
-    N(y, (e) => {
+    O(y, (e) => {
       e && (ee(), setTimeout(() => {
         B(u.value || 0);
-      }, 50), (r.multiple || typeof u.value > "u") && D(-1));
+      }, 50), (r.multiple || typeof u.value > "u") && N(-1));
     });
     function ee() {
       if (r.multiple) {
@@ -92,10 +92,10 @@ const Ee = { class: "relative" }, ze = {
       var i;
       _.value && ((i = _.value[e]) == null || i.$el.scrollIntoView({ block: "nearest", inline: "nearest" }));
     }
-    N(u, (e) => {
+    O(u, (e) => {
       typeof e < "u" && _.value && B(e);
     });
-    function D(e, i = "down") {
+    function N(e, i = "down") {
       if (!L.value || L.value.length === 0) {
         u.value = void 0;
         return;
@@ -124,7 +124,7 @@ const Ee = { class: "relative" }, ze = {
             t.value = [e];
         else
           t.value = e;
-        r.native || X(() => {
+        r.native || U(() => {
           var n, v, w;
           (n = k.value) == null || n.dispatchEvent(new Event("input")), (v = k.value) == null || v.dispatchEvent(new Event("change")), (w = S.value) == null || w.$el.focus();
         });
@@ -144,24 +144,24 @@ const Ee = { class: "relative" }, ze = {
       return i ? i.label : "";
     }
     const { focus: q, blur: le } = J(k), {
-      errorInternal: j,
+      errorInternal: x,
       hideFooterInternal: ie,
-      inputListeners: M,
+      inputListeners: j,
       reset: te,
       validate: ne,
       setError: ae,
       isFocused: re,
       isInsideForm: oe
-    } = O(r, { focus: q, emit: V, withListeners: !0 }), se = I(() => {
-      const { focus: e, blur: i } = s(M);
+    } = D(r, { focus: q, emit: V, withListeners: !0 }), se = I(() => {
+      const { focus: e, blur: i } = s(j);
       return {
         focus: e,
         blur: i
       };
     });
     let g = null;
-    N([re, y], ([e, i]) => {
-      e || i ? g || (g = he(document, "keydown", ue)) : g && (g(), g = null);
+    O([re, y], ([e, i]) => {
+      e || i ? g || (g = be(document, "keydown", ue)) : g && (g(), g = null);
     }, {
       immediate: !0
     });
@@ -173,13 +173,13 @@ const Ee = { class: "relative" }, ze = {
             (i = f.value) == null || i.show();
             return;
           }
-          D(u.value, "down");
+          N(u.value, "down");
         } else if (e.code === "ArrowUp") {
           if (e.preventDefault(), !y.value) {
             (l = f.value) == null || l.show();
             return;
           }
-          D(u.value, "up");
+          N(u.value, "up");
         } else if (e.code === "Enter" || e.code === "Space") {
           if (e.preventDefault(), e.stopPropagation(), !y.value) {
             (n = f.value) == null || n.show();
@@ -187,19 +187,19 @@ const Ee = { class: "relative" }, ze = {
           }
           typeof u.value < "u" && (T(d.value[u.value].value), r.multiple || (v = f.value) == null || v.hide());
         } else
-          e.code === "Tab" && y.value && (e.preventDefault(), (w = f.value) == null || w.hide(), r.native || X(() => {
-            var U;
-            (U = S.value) == null || U.$el.focus();
+          e.code === "Tab" && y.value && (e.preventDefault(), (w = f.value) == null || w.hide(), r.native || U(() => {
+            var M;
+            (M = S.value) == null || M.$el.focus();
           }));
     }
-    const { styles: de, classes: h, className: fe } = be("Select", {}, r, { errorInternal: j });
-    return Y({ focus: q, blur: le, reset: te, validate: ne, setError: ae }), (e, i) => (a(), c(we, x({
+    const { styles: de, classes: b, className: fe } = he("Select", {}, r, { errorInternal: x });
+    return Y({ focus: q, blur: le, reset: te, validate: ne, setError: ae }), (e, i) => (a(), c(we, X({
       ref_key: "labelRef",
       ref: S,
       tabindex: "0",
       class: ["group", [
         s(fe),
-        s(h).wrapper
+        s(b).wrapper
       ]],
       style: s(de),
       disabled: e.disabled,
@@ -207,11 +207,11 @@ const Ee = { class: "relative" }, ze = {
       "is-inside-form": s(oe),
       label: e.label
     }, H(se.value)), {
-      default: b(() => [
+      default: h(() => [
         E("div", Ee, [
           e.native && !e.multiple ? (a(), o("div", {
             key: 0,
-            class: R(s(h).box),
+            class: R(s(b).box),
             onClick: i[0] || (i[0] = (l) => {
               var n;
               return (n = k.value) == null ? void 0 : n.click();
@@ -220,13 +220,14 @@ const Ee = { class: "relative" }, ze = {
             e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", ze, [
               (a(!0), o(p, null, z(t.value, (l) => (a(), c(W, {
                 key: l,
-                size: "sm",
+                size: "xs",
+                outlined: "",
                 removable: "",
                 onRemove: (n) => {
                   P(n, l);
                 }
               }, {
-                default: b(() => [
+                default: h(() => [
                   C(m($(l)), 1)
                 ]),
                 _: 2
@@ -245,11 +246,11 @@ const Ee = { class: "relative" }, ze = {
             "dismiss-on-click": !e.multiple,
             align: "left"
           }, {
-            content: b(() => [
+            content: h(() => [
               K(_e, {
-                class: R(s(h).content)
+                class: R(s(b).content)
               }, {
-                default: b(() => [
+                default: h(() => [
                   d.value.length > 0 ? (a(!0), o(p, { key: 0 }, z(d.value, (l, n) => (a(), c(Ie, {
                     key: n,
                     ref_for: !0,
@@ -270,20 +271,21 @@ const Ee = { class: "relative" }, ze = {
                 _: 1
               }, 8, ["class"])
             ]),
-            default: b(() => [
+            default: h(() => [
               E("div", {
-                class: R([s(h).box])
+                class: R([s(b).box])
               }, [
-                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", De, [
+                e.multiple && Array.isArray(t.value) && t.value.length > 0 ? (a(), o("div", Ne, [
                   (a(!0), o(p, null, z(t.value, (l) => (a(), c(W, {
                     key: l,
-                    size: "sm",
+                    size: "xs",
+                    outlined: "",
                     removable: "",
                     onRemove: (n) => {
                       P(n, l);
                     }
                   }, {
-                    default: b(() => [
+                    default: h(() => [
                       C(m($(l)), 1)
                     ]),
                     _: 2
@@ -291,13 +293,13 @@ const Ee = { class: "relative" }, ze = {
                 ])) : !e.multiple && !F(t.value) ? (a(), o(p, { key: 1 }, [
                   C(m($(t.value)), 1)
                 ], 64)) : (a(), o(p, { key: 2 }, [
-                  e.placeholder ? (a(), o("div", Ne, m(e.placeholder), 1)) : (a(), o("div", Oe, " "))
+                  e.placeholder ? (a(), o("div", Oe, m(e.placeholder), 1)) : (a(), o("div", De, " "))
                 ], 64))
               ], 2)
             ]),
             _: 1
           }, 8, ["disabled", "dismiss-on-click"])),
-          pe(E("select", x({
+          pe(E("select", X({
             id: e.id,
             ref_key: "elRef",
             ref: k,
@@ -308,7 +310,7 @@ const Ee = { class: "relative" }, ze = {
             disabled: e.disabled || e.loading,
             multiple: e.multiple,
             readonly: e.readonly
-          }, H(s(M), !0)), [
+          }, H(s(j), !0)), [
             (a(!0), o(p, null, z(e.options, (l, n) => (a(), o("option", {
               key: n,
               value: l.value,
@@ -318,7 +320,7 @@ const Ee = { class: "relative" }, ze = {
             [ce, t.value]
           ]),
           E("div", {
-            class: R(s(h).iconWrapper)
+            class: R(s(b).iconWrapper)
           }, [
             e.loading ? (a(), c(Re, {
               key: 0,
@@ -326,14 +328,14 @@ const Ee = { class: "relative" }, ze = {
             }, null, 8, ["size"])) : me(e.$slots, "icon", { key: 1 }, () => [
               K(Ae, {
                 icon: s(ge),
-                class: R([s(h).icon])
+                class: R([s(b).icon])
               }, null, 8, ["icon", "class"])
             ])
           ], 2)
         ]),
         s(ie) ? ye("", !0) : (a(), c($e, {
           key: 0,
-          error: s(j),
+          error: s(x),
           helper: e.helper
         }, null, 8, ["error", "helper"]))
       ]),

package/lib/components/select/theme/Select.base.theme.js

@@ -1,22 +1,22 @@
-const t = {
+const s = {
   classes: {
     wrapper: "",
-    box: ({ props: e, data: s }) => {
+    box: ({ props: e, data: t }) => {
       const r = ["w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm"];
-      return !s.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-2 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed") : r.push("bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), s.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
+      return !t.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" ? r.push("px-2 py-1 text-xs") : e.size === "sm" ? r.push("px-2 py-2 text-sm") : e.size === "lg" ? r.push("px-4 py-3 text-lg") : e.size === "xl" ? r.push("px-5 py-4 text-xl") : r.push("px-3 py-2"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed") : r.push("bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
-    content: "py-1 max-h-72 overflow-scroll",
+    content: "py-1 max-h-72 overflow-y-auto",
     iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
     icon: ({ props: e }) => {
-      const s = [""];
-      return e.size === "sm" || e.size === "xs" ? s.push("h-3 w-3") : e.size === "lg" ? s.push("h-6 w-6") : e.size === "xl" ? s.push("h-7 w-7") : s.push("h-5 w-5"), e.disabled ? s.push("text-gray-300 dark:text-gray-500") : s.push("text-gray-500 dark:text-gray-400"), s;
+      const t = [""];
+      return e.size === "sm" || e.size === "xs" ? t.push("h-3 w-3") : e.size === "lg" ? t.push("h-6 w-6") : e.size === "xl" ? t.push("h-7 w-7") : t.push("h-5 w-5"), e.disabled ? t.push("text-gray-300 dark:text-gray-500") : t.push("text-gray-500 dark:text-gray-400"), t;
     }
   },
-  styles: ({ colors: e, css: s }) => {
+  styles: ({ colors: e, css: t }) => {
     const r = e.getPalette("primary");
-    return s.get("border", r[500]);
+    return t.get("border", r[500]);
   }
-}, l = t;
+}, a = s;
 export {
-  l as default
+  a as default
 };

package/lib/components/select/theme/Select.carbon.theme.js

@@ -1,11 +1,11 @@
-const s = {
+const a = {
   classes: {
     wrapper: "",
     box: ({ props: e, data: t }) => {
       const r = ["w-full border-b text-sm px-4 border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out"];
       return !t.errorInternal && !e.disabled && r.push("hover:border-gray-400 dark:hover:border-gray-500"), e.size === "xs" || e.size === "sm" ? r.push("py-1.5") : e.size === "lg" || e.size === "xl" ? r.push("py-3.5") : r.push("py-2.5"), e.disabled ? r.push("bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed") : e.readonly ? r.push("bg-white dark:bg-gray-900 text-gray-700") : r.push("bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200"), t.errorInternal ? r.push("border-red-500 dark:border-red-400 group-focus:outline-red-500") : e.disabled || r.push("group-focus:outline-[color:var(--x-select-border)]"), r;
     },
-    content: "py-1 max-h-72 overflow-scroll",
+    content: "py-1 max-h-72 overflow-y-auto",
     iconWrapper: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2",
     icon: ({ props: e }) => {
       const t = ["h-5 w-5"];
@@ -16,7 +16,7 @@ const s = {
     const r = e.getPalette("primary");
     return t.get("border", r[500]);
   }
-}, a = s;
+}, s = a;
 export {
-  a as default
+  s as default
 };

package/lib/components/skeleton/Skeleton.vue.d.ts

@@ -1,10 +1,17 @@
-import type { ExtractPublicPropTypes } from 'vue';
+import type { ExtractPublicPropTypes, PropType } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
+declare const shapes: readonly ["line", "circle"];
+export type SkeletonShape = typeof shapes[number];
 declare const skeletonProps: {
     tag: {
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: SkeletonShape) => boolean;
+    };
 };
 export type SkeletonProps = ExtractPublicPropTypes<typeof skeletonProps>;
 type InternalClasses = 'wrapper';
@@ -15,12 +22,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: "line" | "circle") => boolean;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
     };
+    shape: {
+        type: PropType<"line" | "circle">;
+        default: string;
+        validator: (val: "line" | "circle") => boolean;
+    };
 }>>, {
     tag: string;
+    shape: "line" | "circle";
 }, {}>;
 export default _default;

package/lib/components/skeleton/Skeleton.vue.js

@@ -1,23 +1,33 @@
-import { defineComponent as r, openBlock as c, createBlock as p, resolveDynamicComponent as m, normalizeStyle as i, unref as e, normalizeClass as f, withCtx as u, createTextVNode as _ } from "vue";
-import { useTheme as d } from "../../composables/useTheme.js";
-const y = {
+import { defineComponent as c, openBlock as p, createBlock as i, resolveDynamicComponent as m, normalizeStyle as d, unref as t, normalizeClass as u, withCtx as f, createTextVNode as _ } from "vue";
+import { useTheme as h } from "../../composables/useTheme.js";
+const y = ["line", "circle"], s = {
+  shape: y
+}, k = {
   tag: {
     type: String,
     default: "div"
+  },
+  shape: {
+    type: String,
+    default: "line",
+    validator: (e) => s.shape.includes(e)
   }
-}, k = { name: "XSkeleton" }, h = /* @__PURE__ */ r({
-  ...k,
-  props: y,
-  setup(t) {
-    const s = t, { styles: o, classes: n, className: a } = d("Skeleton", {}, s);
-    return (l, C) => (c(), p(m(l.tag), {
-      style: i(e(o)),
-      class: f([
-        e(a),
-        e(n).wrapper
+}, S = {
+  name: "XSkeleton",
+  validators: s
+}, x = /* @__PURE__ */ c({
+  ...S,
+  props: k,
+  setup(e) {
+    const a = e, { styles: o, classes: n, className: l } = h("Skeleton", {}, a);
+    return (r, g) => (p(), i(m(r.tag), {
+      style: d(t(o)),
+      class: u([
+        t(l),
+        t(n).wrapper
       ])
     }, {
-      default: u(() => [
+      default: f(() => [
         _(" ​ ")
       ]),
       _: 1
@@ -25,5 +35,5 @@ const y = {
   }
 });
 export {
-  h as default
+  x as default
 };

package/lib/components/skeleton/theme/Skeleton.base.theme.js

@@ -1,8 +1,11 @@
-const e = {
+const a = {
   classes: {
-    wrapper: "animate-pulse bg-gray-300 dark:bg-gray-600 rounded-md"
+    wrapper: ({ props: s }) => {
+      const e = ["animate-pulse bg-gray-300 dark:bg-gray-600"];
+      return s.shape === "circle" ? e.push("w-8 h-8 rounded-full") : e.push("rounded-md"), e;
+    }
   }
-}, a = e;
+}, r = a;
 export {
-  a as default
+  r as default
 };