@scalar/components 0.14.13 → 0.14.14

package/dist/components/ScalarButton/ScalarButton.stories.d.ts

@@ -14,7 +14,7 @@ declare const meta: {
             type?: "button" | "submit" | "reset";
         }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
             size: "sm" | "md";
-            variant: string;
+            variant: "solid" | "outlined" | "ghost" | "danger";
             fullWidth: boolean;
             type: "button" | "submit" | "reset";
         }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -33,7 +33,7 @@ declare const meta: {
             type?: "button" | "submit" | "reset";
         }> & Readonly<{}>, {}, {}, {}, {}, {
             size: "sm" | "md";
-            variant: string;
+            variant: "solid" | "outlined" | "ghost" | "danger";
             fullWidth: boolean;
             type: "button" | "submit" | "reset";
         }>;
@@ -49,7 +49,7 @@ declare const meta: {
         type?: "button" | "submit" | "reset";
     }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         size: "sm" | "md";
-        variant: string;
+        variant: "solid" | "outlined" | "ghost" | "danger";
         fullWidth: boolean;
         type: "button" | "submit" | "reset";
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
@@ -87,7 +87,7 @@ declare const meta: {
             type?: "button" | "submit" | "reset";
         }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
             size: "sm" | "md";
-            variant: string;
+            variant: "solid" | "outlined" | "ghost" | "danger";
             fullWidth: boolean;
             type: "button" | "submit" | "reset";
         }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -106,7 +106,7 @@ declare const meta: {
             type?: "button" | "submit" | "reset";
         }> & Readonly<{}>, {}, {}, {}, {}, {
             size: "sm" | "md";
-            variant: string;
+            variant: "solid" | "outlined" | "ghost" | "danger";
             fullWidth: boolean;
             type: "button" | "submit" | "reset";
         }>;
@@ -122,7 +122,7 @@ declare const meta: {
         type?: "button" | "submit" | "reset";
     }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
         size: "sm" | "md";
-        variant: string;
+        variant: "solid" | "outlined" | "ghost" | "danger";
         fullWidth: boolean;
         type: "button" | "submit" | "reset";
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
@@ -143,7 +143,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -162,7 +162,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }>;
@@ -178,7 +178,7 @@ declare const meta: {
                 type?: "button" | "submit" | "reset";
             }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 size: "sm" | "md";
-                variant: string;
+                variant: "solid" | "outlined" | "ghost" | "danger";
                 fullWidth: boolean;
                 type: "button" | "submit" | "reset";
             }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
@@ -200,7 +200,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -219,7 +219,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }>;
@@ -235,7 +235,7 @@ declare const meta: {
                 type?: "button" | "submit" | "reset";
             }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 size: "sm" | "md";
-                variant: string;
+                variant: "solid" | "outlined" | "ghost" | "danger";
                 fullWidth: boolean;
                 type: "button" | "submit" | "reset";
             }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/dist/components/ScalarButton/ScalarButton.vue.d.ts

@@ -24,7 +24,7 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     size: "sm" | "md";
-    variant: string;
+    variant: "solid" | "outlined" | "ghost" | "danger";
     fullWidth: boolean;
     type: "button" | "submit" | "reset";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/ScalarButton/variants.d.ts

@@ -1,10 +1,15 @@
 import type { VariantProps } from 'cva';
-export declare const styles: Record<string, Record<string, any>>;
+export declare const styles: {
+    readonly solid: readonly ["scalar-button-solid", "bg-b-btn text-c-btn shadow-sm focus-visible:border-c-btn active:bg-b-btn active:shadow-none hover:bg-h-btn outline-offset-1"];
+    readonly outlined: readonly ["scalar-button-outlined", "active:bg-btn-1 border border-solid border-border bg-b-1 text-c-1 hover:bg-b-2 shadow"];
+    readonly ghost: readonly ["scalar-button-ghost", "bg-transparent text-c-3 active:text-c-1 hover:text-c-1"];
+    readonly danger: readonly ["scalar-button-danger", "bg-c-danger text-white active:brightness-90 hover:brightness-90"];
+};
 export declare const variants: (props?: ({
     disabled?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | undefined;
-    variant?: string | undefined;
+    variant?: "solid" | "outlined" | "ghost" | "danger" | undefined;
 } & ({
     class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
         [x: string]: any;

package/dist/components/ScalarButton/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarButton/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAIvC,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAWtD,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgBnB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarButton/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAIvC,eAAO,MAAM,MAAM;;;;;CAWT,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAgBnB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA"}

package/dist/components/ScalarCodeBlock/ScalarCodeBlock.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarCodeBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"names":[],"mappings":"AAkJA;;GAEG;AACH,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAC;;UAJO,MAAM;iBACC,OAAO;UAEd,OAAO;;AA4HlB,wBAQG"}
+{"version":3,"file":"ScalarCodeBlock.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/ScalarCodeBlock.vue"],"names":[],"mappings":"AA8IA;;GAEG;AACH,KAAK,WAAW,GAAG;IACf,OAAO,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAC;;UAJO,MAAM;iBACC,OAAO;UAEd,OAAO;;AA4HlB,wBAQG"}

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts

@@ -9,7 +9,9 @@ type __VLS_Props = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<Omit<ComboboxSlots, "default">> & Omit<ComboboxSlots, "default">;
-    refs: {};
+    refs: {
+        input: HTMLInputElement;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
@@ -19,7 +21,9 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onDelete?: ((option: Option) => any) | undefined;
     "onUpdate:modelValue"?: ((v: Option[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    input: HTMLInputElement;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAuMA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,MAAM,EACX,KAAK,WAAW,EAEjB,MAAM,SAAS,CAAA;AAIhB,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AAwHF,iBAAS,cAAc;WAuKT,OAAO,IAA6B;;;;EAKjD;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;kFAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AA4NA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,MAAM,EACX,KAAK,WAAW,EAEjB,MAAM,SAAS,CAAA;AAIhB,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACjC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAC;AA4HF,iBAAS,cAAc;WA0KT,OAAO,IAA6B;;;;;;EAKjD;AAqBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;OAQnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarCombobox/ScalarComboboxOptions.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as K, useId as O, computed as b, ref as D, onMounted as q, watch as F, createElementBlock as y, openBlock as v, Fragment as $, createElementVNode as h, withDirectives as C, createVNode as U, unref as j, withKeys as w, withModifiers as g, vModelText as H, renderSlot as M, renderList as B, createBlock as S, withCtx as x, createCommentVNode as J, normalizeStyle as P, createTextVNode as E, toDisplayString as N, vShow as Q } from "vue";
-import { ScalarIconMagnifyingGlass as R } from "@scalar/icons";
-import W from "./ScalarComboboxOption.vue.js";
-import X from "./ScalarComboboxOptionGroup.vue.js";
+import { defineComponent as O, useId as q, computed as b, ref as C, onMounted as F, watch as R, useTemplateRef as U, nextTick as j, createElementBlock as y, openBlock as c, Fragment as $, createElementVNode as g, withDirectives as M, createVNode as H, unref as J, withKeys as h, withModifiers as x, vModelText as P, renderSlot as B, renderList as S, createBlock as T, withCtx as w, createCommentVNode as Q, normalizeStyle as W, createTextVNode as E, toDisplayString as N, vShow as X } from "vue";
+import { ScalarIconMagnifyingGlass as Y } from "@scalar/icons";
+import Z from "./ScalarComboboxOption.vue.js";
+import _ from "./ScalarComboboxOptionGroup.vue.js";
 import { isGroups as L } from "./types.js";
-const Y = { class: "relative flex" }, Z = ["aria-activedescendant", "placeholder"], _ = ["aria-multiselectable"], ne = /* @__PURE__ */ K({
+const ee = { class: "relative flex" }, te = ["aria-activedescendant", "placeholder"], le = ["aria-multiselectable"], re = /* @__PURE__ */ O({
   inheritAttrs: !1,
   __name: "ScalarComboboxOptions",
   props: {
@@ -14,54 +14,60 @@ const Y = { class: "relative flex" }, Z = ["aria-activedescendant", "placeholder
     isDeletable: { type: Boolean }
   },
   emits: ["update:modelValue", "delete"],
-  setup(T, { emit: z }) {
-    var I;
-    const a = T, A = z, m = `scalar-combobox-items-${O()}`;
+  setup(z, { emit: A }) {
+    var D;
+    const a = z, G = A, m = `scalar-combobox-items-${q()}`;
     function p(e) {
       return `${m}-${e.id}`;
     }
     const f = b(
       () => L(a.options) ? a.options.flatMap((e) => e.options) : a.options
-    ), G = b(
+    ), K = b(
       () => L(a.options) ? a.options : [{ label: "", options: a.options }]
-    ), r = D(""), o = D(
-      ((I = a.modelValue) == null ? void 0 : I[0]) ?? f.value[0]
+    ), r = C(""), o = C(
+      ((D = a.modelValue) == null ? void 0 : D[0]) ?? f.value[0]
     );
-    q(async () => {
+    F(async () => {
       var e;
       r.value = "", o.value = ((e = a.modelValue) == null ? void 0 : e[0]) ?? f.value[0], s.value.length !== 0 && setTimeout(() => {
         var t;
         (t = document == null ? void 0 : document.getElementById(p(s.value[0]))) == null || t.scrollIntoView({ block: "nearest" });
       }, 10);
-    }), F(
+    }), R(
       () => r.value,
-      () => o.value = c.value[0]
+      () => o.value = v.value[0]
     );
-    const c = b(
+    const v = b(
       () => r.value === "" ? f.value : f.value.filter((e) => e.label.toLowerCase().includes(r.value.toLowerCase()))
     ), s = b({
       get: () => a.modelValue ?? [],
-      set: (e) => e && A("update:modelValue", e)
+      set: (e) => e && G("update:modelValue", e)
     });
-    function V(e) {
+    function k(e) {
       a.multiselect ? s.value.some((t) => t.id === e.id) ? s.value = s.value.filter((t) => t.id !== e.id) : s.value = [...s.value, e] : s.value = [e];
     }
-    function k(e) {
+    function V(e) {
       var l;
-      const t = c.value, d = t.findIndex((u) => {
+      const t = v.value, u = t.findIndex((d) => {
         var i;
-        return u.id === ((i = o.value) == null ? void 0 : i.id);
+        return d.id === ((i = o.value) == null ? void 0 : i.id);
       }) + e;
-      d < 0 || d > t.length - 1 || (o.value = t[d], (l = document == null ? void 0 : document.getElementById(p(o.value))) == null || l.scrollIntoView({
+      u < 0 || u > t.length - 1 || (o.value = t[u], (l = document == null ? void 0 : document.getElementById(p(o.value))) == null || l.scrollIntoView({
         behavior: "smooth",
         block: "nearest"
       }));
     }
-    return (e, t) => (v(), y($, null, [
-      h("div", Y, [
-        U(j(R), { class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3 size-4" }),
-        C(h("input", {
+    const I = U("input");
+    return j(() => {
+      var e;
+      return (e = I.value) == null ? void 0 : e.focus();
+    }), (e, t) => (c(), y($, null, [
+      g("div", ee, [
+        H(J(Y), { class: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-c-3 size-4" }),
+        M(g("input", {
           "onUpdate:modelValue": t[0] || (t[0] = (n) => r.value = n),
+          ref_key: "input",
+          ref: I,
           "aria-activedescendant": o.value ? p(o.value) : void 0,
           "aria-autocomplete": "list",
           "aria-controls": m,
@@ -72,70 +78,70 @@ const Y = { class: "relative flex" }, Z = ["aria-activedescendant", "placeholder
           tabindex: "0",
           type: "text",
           onKeydown: [
-            t[1] || (t[1] = w(g((n) => k(1), ["prevent"]), ["down"])),
-            t[2] || (t[2] = w(g((n) => o.value && V(o.value), ["prevent"]), ["enter"])),
-            t[3] || (t[3] = w(g((n) => k(-1), ["prevent"]), ["up"]))
+            t[1] || (t[1] = h(x((n) => V(1), ["prevent"]), ["down"])),
+            t[2] || (t[2] = h(x((n) => o.value && k(o.value), ["prevent"]), ["enter"])),
+            t[3] || (t[3] = h(x((n) => V(-1), ["prevent"]), ["up"]))
           ]
-        }, null, 40, Z), [
-          [H, r.value]
+        }, null, 40, te), [
+          [P, r.value]
         ])
       ]),
-      C(h("ul", {
+      M(g("ul", {
         id: m,
         "aria-multiselectable": e.multiselect,
         class: "border-t p-0.75 custom-scroll overscroll-contain flex-1 min-h-0",
         role: "listbox",
         tabindex: "-1"
       }, [
-        M(e.$slots, "before"),
-        (v(!0), y($, null, B(G.value, (n, d) => (v(), S(X, {
-          id: `${m}-group-${d}`,
-          key: d,
+        B(e.$slots, "before"),
+        (c(!0), y($, null, S(K.value, (n, u) => (c(), T(_, {
+          id: `${m}-group-${u}`,
+          key: u,
           hidden: (
             // Only show the group label if there are some results
-            !n.options.some((l) => c.value.some((u) => u.id === l.id)) || // And it has a label
+            !n.options.some((l) => v.value.some((d) => d.id === l.id)) || // And it has a label
             !n.label
           )
         }, {
-          label: x(() => [
+          label: w(() => [
             E(N(n.label), 1)
           ]),
-          default: x(() => [
-            (v(!0), y($, null, B(c.value, (l) => {
-              var u;
-              return v(), y($, {
+          default: w(() => [
+            (c(!0), y($, null, S(v.value, (l) => {
+              var d;
+              return c(), y($, {
                 key: l.id
               }, [
-                n.options.some((i) => i.id === l.id) ? (v(), S(W, {
+                n.options.some((i) => i.id === l.id) ? (c(), T(Z, {
                   key: 0,
                   id: p(l),
-                  active: ((u = o.value) == null ? void 0 : u.id) === l.id,
+                  active: ((d = o.value) == null ? void 0 : d.id) === l.id,
                   isDeletable: l.isDeletable ?? e.isDeletable,
                   selected: s.value.some((i) => i.id === l.id),
-                  style: P(e.multiselect ? "checkbox" : "radio"),
-                  onClick: (i) => V(l),
+                  style: W(e.multiselect ? "checkbox" : "radio"),
+                  onClick: (i) => k(l),
                   onDelete: (i) => e.$emit("delete", l),
-                  onMousedown: t[4] || (t[4] = g(() => {
+                  onMousedown: t[4] || (t[4] = x(() => {
                   }, ["prevent"])),
                   onMouseenter: (i) => o.value = l
                 }, {
-                  default: x(() => [
+                  default: w(() => [
                     E(N(l.label), 1)
                   ]),
                   _: 2
-                }, 1032, ["id", "active", "isDeletable", "selected", "style", "onClick", "onDelete", "onMouseenter"])) : J("", !0)
+                }, 1032, ["id", "active", "isDeletable", "selected", "style", "onClick", "onDelete", "onMouseenter"])) : Q("", !0)
               ], 64);
             }), 128))
           ]),
           _: 2
         }, 1032, ["id", "hidden"]))), 128)),
-        M(e.$slots, "after")
-      ], 8, _), [
-        [Q, c.value.length || e.$slots.before || e.$slots.after]
+        B(e.$slots, "after")
+      ], 8, le), [
+        [X, v.value.length || e.$slots.before || e.$slots.after]
       ])
     ], 64));
   }
 });
 export {
-  ne as default
+  re as default
 };

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"AAsEA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAgC1D,iBAAS,cAAc;WA0GT,OAAO,IAA6B;;;;;;;;;;;;;;;;0BAnJlD,KA5BG,eA4BH,KA3BE,uBA2BF,KA3B8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmL7B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;oBAzKrB,KA5BG,eA4BH,KA3BE,uBA2BF,KA3B8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8PA2M5B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarComboboxPopover.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxPopover.vue"],"names":[],"mappings":"AAqEA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAgC1D,iBAAS,cAAc;WA0GT,OAAO,IAA6B;;;;;;;;;;;;;;;;0BAnJlD,KA3BG,eA2BH,KA1BE,uBA0BF,KA1B8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkL7B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;oBAzKrB,KA3BG,eA2BH,KA1BE,uBA0BF,KA1B8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8PA0M5B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarCombobox/ScalarComboboxPopover.vue.js

@@ -42,7 +42,6 @@ const z = /* @__PURE__ */ u({
             fn: t(({ width: m }) => [
               r(o(k), B(
                 {
-                  focus: "",
                   style: { width: m }
                 },
                 o(f)("relative flex flex-col max-h-[inherit] w-40 rounded text-sm")

package/dist/components/ScalarContextMenu/ScalarContextMenu.stories.d.ts

@@ -168,7 +168,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -187,7 +187,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }>;
@@ -203,7 +203,7 @@ declare const meta: {
                 type?: "button" | "submit" | "reset";
             }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 size: "sm" | "md";
-                variant: string;
+                variant: "solid" | "outlined" | "ghost" | "danger";
                 fullWidth: boolean;
                 type: "button" | "submit" | "reset";
             }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/dist/components/ScalarDropdown/ScalarDropdown.stories.d.ts

@@ -145,7 +145,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -164,7 +164,7 @@ declare const meta: {
                     type?: "button" | "submit" | "reset";
                 }> & Readonly<{}>, {}, {}, {}, {}, {
                     size: "sm" | "md";
-                    variant: string;
+                    variant: "solid" | "outlined" | "ghost" | "danger";
                     fullWidth: boolean;
                     type: "button" | "submit" | "reset";
                 }>;
@@ -180,7 +180,7 @@ declare const meta: {
                 type?: "button" | "submit" | "reset";
             }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
                 size: "sm" | "md";
-                variant: string;
+                variant: "solid" | "outlined" | "ghost" | "danger";
                 fullWidth: boolean;
                 type: "button" | "submit" | "reset";
             }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/dist/components/ScalarIcon/ScalarIconLegacyAdapter.vue.d.ts

@@ -1,5 +1,4 @@
-import type { ScalarIconProps } from '@scalar/icons/types';
-import type { Component } from 'vue';
+import type { ScalarIconComponent, ScalarIconProps } from '@scalar/icons/types';
 import type { ScalarIconProps as LegacyScalarIconProps } from './types';
 import type { Icon } from './utils/index.js';
 /**
@@ -10,9 +9,9 @@ import type { Icon } from './utils/index.js';
  * while staying backwards compatible with the legacy ScalarIcon component
  */
 declare const _default: import("vue").DefineComponent<{
-    icon: Icon | Component;
+    icon: Icon | ScalarIconComponent;
 } & ScalarIconProps & Omit<LegacyScalarIconProps, "icon">, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    icon: Icon | Component;
+    icon: Icon | ScalarIconComponent;
 } & ScalarIconProps & Omit<LegacyScalarIconProps, "icon">> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
 //# sourceMappingURL=ScalarIconLegacyAdapter.vue.d.ts.map

package/dist/components/ScalarIcon/ScalarIconLegacyAdapter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconLegacyAdapter.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/ScalarIconLegacyAdapter.vue"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,KAAK,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAA;AACvE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAKnC;;;;;;GAMG;;UAQO,IAAI,GAAG,SAAS;;UAAhB,IAAI,GAAG,SAAS;;AAP1B,wBA2FC"}
+{"version":3,"file":"ScalarIconLegacyAdapter.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIcon/ScalarIconLegacyAdapter.vue"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAI/E,OAAO,KAAK,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAA;AACvE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAKnC;;;;;;GAMG;;UAQO,IAAI,GAAG,mBAAmB;;UAA1B,IAAI,GAAG,mBAAmB;;AAPpC,wBA2FC"}

package/dist/components/ScalarIcon/utils/index.d.ts

@@ -1,6 +1,8 @@
 import type { ICONS } from '../icons';
 import type { LOGOS } from '../logos';
+/** @deprecated Use the icons from the `@scalar/icons` package instead. */
 export type Icon = (typeof ICONS)[number];
+/** @deprecated Use the icons from the `@scalar/icons` package instead. */
 export type Logo = (typeof LOGOS)[number];
 /**
  * Generate a Vue component from the icon SVGs

package/dist/components/ScalarIcon/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarIcon/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAErC,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AACzC,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAYzC;;;;GAIG;AACH,eAAO,MAAM,OAAO,SAAU,IAAI,sBASjC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,SAAU,IAAI,sBAQjC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ScalarIcon/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAErC,0EAA0E;AAC1E,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzC,0EAA0E;AAC1E,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAA;AAYzC;;;;GAIG;AACH,eAAO,MAAM,OAAO,SAAU,IAAI,sBASjC,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,OAAO,SAAU,IAAI,sBAQjC,CAAA"}

package/dist/components/ScalarIconButton/ScalarIconButton.stories.d.ts

@@ -3,26 +3,9 @@ import type { StoryObj } from '@storybook/vue3';
  * A helper wrapper around the icon only ScalarButton
  */
 declare const meta: {
-    component: import("vue").DefineComponent<{
-        label: string;
-        icon: import("../ScalarIcon").Icon | import("vue").Component;
-        disabled?: boolean;
-        variant?: string | undefined;
-        size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
-        thickness?: string;
-        weight?: import("@scalar/icons/types").ScalarIconWeight;
-    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-        label: string;
-        icon: import("../ScalarIcon").Icon | import("vue").Component;
-        disabled?: boolean;
-        variant?: string | undefined;
-        size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
-        thickness?: string;
-        weight?: import("@scalar/icons/types").ScalarIconWeight;
-    }> & Readonly<{}>, {
-        size: "xs" | "sm" | "md" | "full" | "xxs";
-        variant: string;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    component: import("vue").DefineComponent<import("./types").ScalarIconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./types").ScalarIconButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+        ref: HTMLButtonElement;
+    }, any>;
     tags: string[];
     argTypes: {
         icon: {
@@ -43,6 +26,10 @@ declare const meta: {
         disabled: {
             control: "boolean";
         };
+        tooltip: {
+            control: "select";
+            options: import("@floating-ui/utils").Placement[];
+        };
         class: {
             control: "text";
         };
@@ -52,5 +39,6 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const Disabled: Story;
+export declare const WithTooltip: Story;
 export declare const CustomClasses: Story;
 //# sourceMappingURL=ScalarIconButton.stories.d.ts.map

package/dist/components/ScalarIconButton/ScalarIconButton.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAKrD;;GAEG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAc+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}
+{"version":3,"file":"ScalarIconButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD;;GAEG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAe+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAElB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA"}