@scalar/components 0.14.12 → 0.14.14

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

@@ -1,79 +1,19 @@
-import type { ScalarIconWeight } from '@scalar/icons/types';
-import type { VariantProps } from 'cva';
-import type { Component } from 'vue';
-import { type Icon } from '../ScalarIcon';
-type Variants = VariantProps<typeof variants>;
-type __VLS_Props = {
-    label: string;
-    icon: Icon | Component;
-    disabled?: boolean;
-    variant?: Variants['variant'];
-    size?: Variants['size'];
-    thickness?: string;
-    weight?: ScalarIconWeight;
-};
-declare const variants: (props?: ({
-    size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
-    disabled?: boolean | undefined;
-    variant?: string | 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;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined;
-    className?: never;
-} | {
-    class?: never;
-    className?: 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;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined;
-})) | undefined) => string;
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: "xs" | "sm" | "md" | "full" | "xxs";
-    variant: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import type { ScalarIconButtonProps } from './types';
+/**
+ * Scalar icon button component
+ *
+ * Should be used in conjunction with an icon from `@scalar/icons`
+ *
+ * @example
+ * import { ScalarIconAcorn } from '@scalar/icons'
+ * ...
+ * <ScalarIconButton
+ *   :icon="ScalarIconAcorn"
+ *   label="It's an acorn"
+ * />
+ */
+declare const _default: import("vue").DefineComponent<ScalarIconButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ScalarIconButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
+    ref: HTMLButtonElement;
+}, any>;
 export default _default;
 //# sourceMappingURL=ScalarIconButton.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAG3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAE7C,KAAK,WAAW,GAAG;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,GAAG,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B,CAAC;AAYJ,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAeZ,CACD;;;;;AAoED,wBAOG"}
+{"version":3,"file":"ScalarIconButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/ScalarIconButton.vue"],"names":[],"mappings":"AAqEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAKpD;;;;;;;;;;;;GAYG;;;;AACH,wBAoGC"}

package/dist/components/ScalarIconButton/ScalarIconButton.vue.js

@@ -1,8 +1,13 @@
-import { defineComponent as a, createElementBlock as o, openBlock as n, mergeProps as r, unref as s, createVNode as l, createElementVNode as d, toDisplayString as c } from "vue";
-import { useBindCx as p, cva as u } from "@scalar/use-hooks/useBindCx";
-import { styles as m } from "../ScalarButton/variants.js";
-import f from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
-const h = ["ariaDisabled"], b = { class: "sr-only" }, y = /* @__PURE__ */ a({
+import { defineComponent as r, useTemplateRef as d, computed as o, createElementBlock as n, openBlock as a, mergeProps as c, unref as i, createVNode as f, createCommentVNode as m, toDisplayString as p } from "vue";
+import { useBindCx as u } from "@scalar/use-hooks/useBindCx";
+import { variants as h } from "./variants.js";
+import { useTooltip as b } from "../ScalarTooltip/useTooltip.js";
+import g from "../ScalarIcon/ScalarIconLegacyAdapter.vue.js";
+const v = ["aria-disabled"], k = {
+  key: 0,
+  class: "sr-only"
+}, y = {}, S = /* @__PURE__ */ r({
+  ...y,
   inheritAttrs: !1,
   __name: "ScalarIconButton",
   props: {
@@ -10,40 +15,34 @@ const h = ["ariaDisabled"], b = { class: "sr-only" }, y = /* @__PURE__ */ a({
     icon: {},
     disabled: { type: Boolean },
     variant: { default: "ghost" },
-    size: { default: "md" },
+    size: {},
     thickness: {},
-    weight: {}
+    weight: {},
+    tooltip: { type: Boolean }
   },
-  setup(g) {
-    const { cx: i } = p(), t = u({
-      base: "scalar-icon-button grid aspect-square cursor-pointer rounded",
-      variants: {
-        size: {
-          xxs: "size-3.5 p-0.5",
-          xs: "size-5 p-1",
-          sm: "size-6 p-1",
-          md: "size-10 p-3",
-          full: "h-full w-full"
-        },
-        disabled: {
-          true: "cursor-not-allowed shadow-none"
-        },
-        variant: m
-      }
-    });
-    return (e, v) => (n(), o("button", r({
-      ariaDisabled: e.disabled || void 0,
+  setup(t) {
+    const { cx: s } = u(), l = d("ref");
+    return b({
+      content: o(() => t.label),
+      offset: o(() => t.variant === "ghost" ? 0 : 4),
+      placement: o(
+        () => typeof t.tooltip == "boolean" ? void 0 : t.tooltip
+      ),
+      targetRef: o(() => t.tooltip ? l.value : void 0)
+    }), (e, B) => (a(), n("button", c({
+      ref: "ref",
+      "aria-disabled": e.disabled,
       type: "button"
-    }, s(i)(s(t)({ size: e.size, variant: e.variant, disabled: e.disabled }))), [
-      l(s(f), {
+    }, i(s)(i(h)({ size: e.size, variant: e.variant, disabled: e.disabled }))), [
+      f(i(g), {
         icon: e.icon,
         thickness: e.thickness,
         weight: e.weight
       }, null, 8, ["icon", "thickness", "weight"]),
-      d("span", b, c(e.label), 1)
-    ], 16, h));
+      e.tooltip ? m("", !0) : (a(), n("span", k, p(e.label), 1))
+    ], 16, v));
   }
 });
 export {
-  y as default
+  S as default
 };

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

@@ -0,0 +1,50 @@
+import type { ScalarIconComponent, ScalarIconWeight } from '@scalar/icons/types';
+import type { Variants } from './variants.js';
+import type { Icon } from '../ScalarIcon';
+import type { ScalarTooltipPlacement } from '../../components/ScalarTooltip';
+export type ScalarIconButtonProps = {
+    /**
+     * An accessible label for the icon button
+     *
+     * If `tooltip` is true, this will be used as the tooltip content
+     */
+    label: string;
+    /**
+     * The icon to display in the icon button
+     *
+     * Use a component from the `@scalar/icons` package to display
+     * an icon. String values are deprecated.
+     */
+    icon: Icon | ScalarIconComponent;
+    /** Whether the icon button is disabled */
+    disabled?: boolean;
+    /**
+     * The variant of the icon button
+     *
+     * @default 'ghost'
+     * @see <ScalarButton>
+     */
+    variant?: Variants['variant'];
+    /**
+     * The size of the icon button
+     *
+     * @default 'md'
+     */
+    size?: Variants['size'];
+    /**
+     * The thickness of the icon
+     *
+     * @deprecated Use the `weight` prop instead
+     */
+    thickness?: string;
+    /** The weight of the icon. */
+    weight?: ScalarIconWeight;
+    /**
+     * Whether to display a tooltip when hovering over the icon button
+     *
+     * If `true`, the `label` will be displayed when hovering over the
+     * icon button. Can also be a specific placement for the tooltip.
+     */
+    tooltip?: boolean | ScalarTooltipPlacement;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAEhF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAA;AAExE,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,IAAI,EAAE,IAAI,GAAG,mBAAmB,CAAA;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,sBAAsB,CAAA;CAC3C,CAAA"}

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

@@ -0,0 +1,62 @@
+import type { VariantProps } from 'cva';
+export declare const variants: (props?: ({
+    size?: "xs" | "sm" | "md" | "full" | "xxs" | undefined;
+    disabled?: boolean | 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;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: 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;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
+export type Variants = VariantProps<typeof variants>;
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarIconButton/variants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AAEvC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA0BnB,CAAA;AAEF,MAAM,MAAM,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA"}

package/dist/components/ScalarIconButton/variants.js

@@ -0,0 +1,32 @@
+import { cva as s } from "@scalar/use-hooks/useBindCx";
+import { styles as a } from "../ScalarButton/variants.js";
+const o = s({
+  base: "scalar-icon-button grid aspect-square cursor-pointer rounded",
+  variants: {
+    size: {
+      xxs: "size-3.5 p-0.5",
+      xs: "size-5 p-1",
+      sm: "size-6 p-1",
+      md: "size-10 p-3",
+      full: "size-full"
+    },
+    disabled: {
+      true: "cursor-not-allowed shadow-none"
+    },
+    variant: a
+  },
+  compoundVariants: [
+    {
+      size: "md",
+      variant: "ghost",
+      class: "size-8 p-2 m-1 -outline-offset-2 rounded-lg"
+    }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "ghost"
+  }
+});
+export {
+  o as variants
+};

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAyGA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,CAAA;AAkCD,iBAAS,cAAc;WA8HT,OAAO,IAA6B;;QA9IhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;QAJP,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;;;EA+IR;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aApLR,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;kFAyLhB,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":"ScalarListbox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarListbox/ScalarListbox.vue"],"names":[],"mappings":"AAwGA,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,mBAAmB,CAAA;AAE1B,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAIrC,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,CAAC,EAAE,KAAK,GAAG,SAAS,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAA;CAClC,CAAA;AAkCD,iBAAS,cAAc;WA0HT,OAAO,IAA6B;;QA1IhD,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;QAJP,4CAA4C;uBAC7B;YACb,yCAAyC;YACzC,IAAI,EAAE,OAAO,CAAA;SACd,GAAG,GAAG;;;;EA2IR;AAiBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;aAhLR,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;aAFL,MAAM,EAAE;SACZ,MAAM;YACH,MAAM;;;kFAqLhB,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/ScalarListbox/ScalarListbox.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as c, createBlock as r, openBlock as o, unref as t, withCtx as l, createCommentVNode as m, createVNode as i, createTextVNode as b, toDisplayString as y, mergeProps as u, renderSlot as V, createElementBlock as p, createElementVNode as g, Fragment as B, renderList as _, normalizeStyle as k } from "vue";
+import { defineComponent as c, createBlock as i, openBlock as o, unref as t, withCtx as l, createCommentVNode as n, createVNode as r, createTextVNode as y, toDisplayString as b, mergeProps as p, renderSlot as V, createElementBlock as d, createElementVNode as B, Fragment as _, renderList as g, normalizeStyle as k } from "vue";
 import { Listbox as x, ListboxLabel as L, ListboxButton as h, ListboxOptions as $ } from "@headlessui/vue";
-import { useBindCx as v } from "@scalar/use-hooks/useBindCx";
-import S from "./ScalarListboxItem.vue.js";
-import C from "../ScalarFloating/ScalarFloating.vue.js";
-import N from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
-const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
+import { useBindCx as S } from "@scalar/use-hooks/useBindCx";
+import C from "./ScalarListboxItem.vue.js";
+import N from "../ScalarFloating/ScalarFloating.vue.js";
+import v from "../ScalarFloating/ScalarFloatingBackdrop.vue.js";
+const w = { class: "custom-scroll min-h-0 flex-1" }, T = /* @__PURE__ */ c({
   inheritAttrs: !1,
   __name: "ScalarListbox",
   props: {
@@ -22,50 +22,49 @@ const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
   },
   emits: ["update:modelValue"],
   setup(z) {
-    const { cx: d } = v();
-    return (e, s) => (o(), r(t(x), {
+    const { cx: u } = S();
+    return (e, m) => (o(), i(t(x), {
       modelValue: e.modelValue,
       multiple: e.multiple,
-      "onUpdate:modelValue": s[0] || (s[0] = (a) => e.$emit("update:modelValue", a))
+      "onUpdate:modelValue": m[0] || (m[0] = (a) => e.$emit("update:modelValue", a))
     }, {
       default: l(({ open: a }) => [
-        e.label ? (o(), r(t(L), {
+        e.label ? (o(), i(t(L), {
           key: 0,
           class: "sr-only"
         }, {
           default: l(() => [
-            b(y(e.label), 1)
+            y(b(e.label), 1)
           ]),
           _: 1
-        })) : m("", !0),
-        i(t(C), u(e.$props, {
+        })) : n("", !0),
+        r(t(N), p(e.$props, {
           placement: e.placement ?? "bottom-start"
         }), {
           floating: l(({ width: f }) => [
-            a ? (o(), p("div", u({
+            a ? (o(), d("div", p({
               key: 0,
               style: { width: f }
-            }, t(d)("relative flex max-h-[inherit] w-40 rounded text-sm")), [
-              g("div", w, [
-                i(t($), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
+            }, t(u)("relative flex max-h-[inherit] w-40 rounded text-sm")), [
+              B("div", w, [
+                r(t($), { class: "flex flex-col gap-0.75 p-0.75 -outline-offset-1" }, {
                   default: l(() => [
-                    (o(!0), p(B, null, _(e.options, (n) => (o(), r(S, {
-                      key: n.id,
-                      option: n,
+                    (o(!0), d(_, null, g(e.options, (s) => (o(), i(C, {
+                      key: s.id,
+                      option: s,
                       style: k(e.multiple ? "checkbox" : "radio")
                     }, null, 8, ["option", "style"]))), 128))
                   ]),
                   _: 1
                 })
               ]),
-              i(t(N))
-            ], 16)) : m("", !0)
+              r(t(v))
+            ], 16)) : n("", !0)
           ]),
           default: l(() => [
-            i(t(h), {
+            r(t(h), {
               id: e.id,
-              as: "template",
-              class: "justify-start focus:outline-none focus-visible:ring-1 focus-visible:ring-c-accent"
+              as: "template"
             }, {
               default: l(() => [
                 V(e.$slots, "default", { open: a })
@@ -81,5 +80,5 @@ const w = { class: "custom-scroll min-h-0 flex-1" }, P = /* @__PURE__ */ c({
   }
 });
 export {
-  P as default
+  T as default
 };

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

@@ -38,7 +38,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, {
@@ -57,7 +57,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";
                 }>;
@@ -73,7 +73,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/ScalarMenu/ScalarMenuLink.vue.d.ts

@@ -1,8 +1,9 @@
+import type { ScalarIconComponent } from '@scalar/icons/types';
 import type { Component } from 'vue';
 import { type Icon } from '../ScalarIcon';
 type __VLS_Props = {
     is?: string | Component;
-    icon?: Icon | Component;
+    icon?: Icon | ScalarIconComponent;
     strong?: boolean;
 };
 declare function __VLS_template(): {

package/dist/components/ScalarMenu/ScalarMenuLink.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AASF,iBAAS,cAAc;WAgET,OAAO,IAA6B;;yBARpB,GAAG;;;;EAahC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAOnB,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":"ScalarMenuLink.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuLink.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,mBAAmB,CAAA;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AASF,iBAAS,cAAc;WAgET,OAAO,IAA6B;;yBARpB,GAAG;;;;EAahC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAOnB,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/ScalarMenu/ScalarMenuProduct.vue.d.ts

@@ -1,9 +1,10 @@
+import type { ScalarIconComponent } from '@scalar/icons/types';
 import type { Component } from 'vue';
 import type { Icon } from '../../index.js';
 type __VLS_Props = {
     is?: string | Component;
     selected?: boolean;
-    icon: Icon | Component;
+    icon: Icon | ScalarIconComponent;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/components/ScalarMenu/ScalarMenuProduct.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarMenuProduct.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuProduct.vue"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAKlC,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,IAAI,GAAG,SAAS,CAAA;CACvB,CAAC;AAsBF,iBAAS,cAAc;WAyCT,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,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":"ScalarMenuProduct.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarMenu/ScalarMenuProduct.vue"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAKlC,KAAK,WAAW,GAAG;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,IAAI,GAAG,mBAAmB,CAAA;CACjC,CAAC;AAsBF,iBAAS,cAAc;WAyCT,OAAO,IAA6B;;yBARrB,GAAG;;;;EAa/B;AAWD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,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/ScalarPopover/ScalarPopover.stories.d.ts

@@ -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 () => {

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.d.ts

@@ -1,7 +1,7 @@
-import type { Component } from 'vue';
+import type { ScalarIconComponent } from '@scalar/icons/types';
 import { type Icon } from '../ScalarIcon';
 type __VLS_Props = {
-    icon?: Icon | Component;
+    icon?: Icon | ScalarIconComponent;
     selected?: boolean;
 };
 declare function __VLS_template(): {

package/dist/components/ScalarSearchResults/ScalarSearchResultItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSearchResultItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"names":[],"mappings":"AA8DA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAWF,iBAAS,cAAc;WAiGT,OAAO,IAA6B;;sBAXxB,GAAG;yBACA,GAAG;uBACL,GAAG;6BACG,GAAG;;;;EAanC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,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":"ScalarSearchResultItem.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchResults/ScalarSearchResultItem.vue"],"names":[],"mappings":"AA6DA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAG9D,OAAO,EAAE,KAAK,IAAI,EAA2B,MAAM,eAAe,CAAA;AAIlE,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,mBAAmB,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAWF,iBAAS,cAAc;WAiGT,OAAO,IAA6B;;sBAXxB,GAAG;yBACA,GAAG;uBACL,GAAG;6BACG,GAAG;;;;EAanC;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,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/ScalarSearchResults/ScalarSearchResults.stories.d.ts

@@ -77,7 +77,7 @@ declare const meta: {
             });
             ScalarSearchResultItem: {
                 new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
-                    icon?: import("../ScalarIcon/index.js").Icon | import("vue").Component;
+                    icon?: import("../ScalarIcon/index.js").Icon | import("@scalar/icons/types").ScalarIconComponent;
                     selected?: boolean;
                 }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
                     P: {};
@@ -87,14 +87,14 @@ declare const meta: {
                     M: {};
                     Defaults: {};
                 }, Readonly<{
-                    icon?: import("../ScalarIcon/index.js").Icon | import("vue").Component;
+                    icon?: import("../ScalarIcon/index.js").Icon | import("@scalar/icons/types").ScalarIconComponent;
                     selected?: boolean;
                 }> & Readonly<{}>, {}, {}, {}, {}, {}>;
                 __isFragment?: never;
                 __isTeleport?: never;
                 __isSuspense?: never;
             } & import("vue").ComponentOptionsBase<Readonly<{
-                icon?: import("../ScalarIcon/index.js").Icon | import("vue").Component;
+                icon?: import("../ScalarIcon/index.js").Icon | import("@scalar/icons/types").ScalarIconComponent;
                 selected?: boolean;
             }> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
                 $slots: {

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

@@ -3,9 +3,8 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
-export declare const WithNavItems: Story;
 export declare const WithNestedGroups: Story;
-export declare const WithFooter: Story;
-export declare const WithSearchInput: Story;
+export declare const WithSections: Story;
+export declare const WithFooterContent: Story;
 export declare const WithSearchButton: Story;
 //# sourceMappingURL=ScalarSidebar.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAWrD,QAAA,MAAM,IAAI,EAAE,IA8BX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,YAAY,EAAE,KAqC1B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAqF9B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAsB9B,CAAA"}
+{"version":3,"file":"ScalarSidebar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAYrD,QAAA,MAAM,IAAI,EAAE,IA0BX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAU,CAAA;AAE7B,eAAO,MAAM,gBAAgB,EAAE,KAkE9B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAqD1B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAgB/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA"}

package/dist/components/ScalarSidebar/ScalarSidebarButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebarButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,wBA8HC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebarButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarButton.vue"],"names":[],"mappings":"AAwFA,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAI7E;;;;;;;;;;;;;;;;;;;;;GAqBG;;AACH,wBA+HC;AAWD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}