@scalar/components 0.12.20 → 0.12.22

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

@@ -1,10 +1,10 @@
 import type { StoryObj } from '@storybook/vue3';
-import type { Option } from './types';
+import type { Option, OptionGroup } from './types.js';
 declare const meta: {
     component: {
         new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
             options: {
-                type: import("vue").PropType<Option[]>;
+                type: import("vue").PropType<Option[] | OptionGroup[]>;
                 required: true;
             };
             modelValue: {
@@ -31,7 +31,7 @@ declare const meta: {
             "update:modelValue": (v: Option) => void;
         }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
             options: {
-                type: import("vue").PropType<Option[]>;
+                type: import("vue").PropType<Option[] | OptionGroup[]>;
                 required: true;
             };
             modelValue: {
@@ -63,7 +63,7 @@ declare const meta: {
             Defaults: {};
         }, Readonly<import("vue").ExtractPropTypes<{
             options: {
-                type: import("vue").PropType<Option[]>;
+                type: import("vue").PropType<Option[] | OptionGroup[]>;
                 required: true;
             };
             modelValue: {
@@ -92,7 +92,7 @@ declare const meta: {
         __isSuspense?: never;
     } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
         options: {
-            type: import("vue").PropType<Option[]>;
+            type: import("vue").PropType<Option[] | OptionGroup[]>;
             required: true;
         };
         modelValue: {
@@ -136,5 +136,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
+export declare const Groups: Story;
 export declare const Multiselect: Story;
+export declare const MultiselectGroups: Story;
 //# sourceMappingURL=ScalarCombobox.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCombobox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAErC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAY6B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAWlC,eAAO,MAAM,IAAI,EAAE,KA0BlB,CAAA;AACD,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAA"}
+{"version":3,"file":"ScalarCombobox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAMrD,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAElD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAY6B,CAAA;AAEvC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAqClC,eAAO,MAAM,IAAI,EAAE,KA0BlB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA0BpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA0BzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA0B/B,CAAA"}

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

@@ -1,16 +1,16 @@
 import type { FloatingOptions } from '../ScalarFloating';
-import type { Option } from './types';
+import type { Option, OptionGroup } from './types.js';
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<{
-    options: Option[];
+    options: Option[] | OptionGroup[];
     modelValue?: Option;
     placeholder?: string;
 } & Omit<FloatingOptions, "middleware">>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: Option) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    options: Option[];
+    options: Option[] | OptionGroup[];
     modelValue?: Option;
     placeholder?: string;
 } & Omit<FloatingOptions, "middleware">>>> & {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarCombobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAuBrC,iBAAS,cAAc;qBAuDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aA3FR,MAAM,EAAE;iBACJ,MAAM;kBACL,MAAM;;;;aAFX,MAAM,EAAE;iBACJ,MAAM;kBACL,MAAM;;;UAgGtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"ScalarCombobox.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarCombobox.vue"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAuBlD,iBAAS,cAAc;qBAuDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aA3FR,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM;kBACL,MAAM;;;;aAFX,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM;kBACL,MAAM;;;UAgGtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

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

@@ -1,16 +1,192 @@
 import type { FloatingOptions } from '../ScalarFloating';
-import type { Option } from './types';
+import type { Option, OptionGroup } from './types.js';
 declare function __VLS_template(): {
     default?(_: {}): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<{
-    options: Option[];
+    options: Option[] | OptionGroup[];
     modelValue?: Option[];
     placeholder?: string;
-} & Omit<FloatingOptions, "middleware">>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+} & Omit<FloatingOptions, "middleware">>, {
+    comboboxPopoverRef: import("vue").Ref<({
+        new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
+            resize: {
+                type: import("vue").PropType<boolean>;
+            };
+            placement: {
+                type: import("vue").PropType<import("@floating-ui/utils").Placement>;
+            };
+            isOpen: {
+                type: import("vue").PropType<boolean>;
+            };
+            teleport: {
+                type: import("vue").PropType<string | boolean>;
+            };
+        }>>, {
+            popoverButtonRef: import("vue").Ref<import("vue").DefineComponent<{
+                as: {
+                    type: (ObjectConstructor | StringConstructor)[];
+                    default: string;
+                };
+                disabled: {
+                    type: BooleanConstructor[];
+                    default: boolean;
+                };
+                id: {
+                    type: StringConstructor;
+                    default: null;
+                };
+            }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+                as: {
+                    type: (ObjectConstructor | StringConstructor)[];
+                    default: string;
+                };
+                disabled: {
+                    type: BooleanConstructor[];
+                    default: boolean;
+                };
+                id: {
+                    type: StringConstructor;
+                    default: null;
+                };
+            }>>, {
+                id: string;
+                as: string | Record<string, any>;
+                disabled: boolean;
+            }, {}> | null>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+            resize: {
+                type: import("vue").PropType<boolean>;
+            };
+            placement: {
+                type: import("vue").PropType<import("@floating-ui/utils").Placement>;
+            };
+            isOpen: {
+                type: import("vue").PropType<boolean>;
+            };
+            teleport: {
+                type: import("vue").PropType<string | boolean>;
+            };
+        }>>, {}, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import("vue").ExtractPropTypes<{
+            resize: {
+                type: import("vue").PropType<boolean>;
+            };
+            placement: {
+                type: import("vue").PropType<import("@floating-ui/utils").Placement>;
+            };
+            isOpen: {
+                type: import("vue").PropType<boolean>;
+            };
+            teleport: {
+                type: import("vue").PropType<string | boolean>;
+            };
+        }>>, {
+            popoverButtonRef: import("vue").Ref<import("vue").DefineComponent<{
+                as: {
+                    type: (ObjectConstructor | StringConstructor)[];
+                    default: string;
+                };
+                disabled: {
+                    type: BooleanConstructor[];
+                    default: boolean;
+                };
+                id: {
+                    type: StringConstructor;
+                    default: null;
+                };
+            }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+                as: {
+                    type: (ObjectConstructor | StringConstructor)[];
+                    default: string;
+                };
+                disabled: {
+                    type: BooleanConstructor[];
+                    default: boolean;
+                };
+                id: {
+                    type: StringConstructor;
+                    default: null;
+                };
+            }>>, {
+                id: string;
+                as: string | Record<string, any>;
+                disabled: boolean;
+            }, {}> | null>;
+        }, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+        resize: {
+            type: import("vue").PropType<boolean>;
+        };
+        placement: {
+            type: import("vue").PropType<import("@floating-ui/utils").Placement>;
+        };
+        isOpen: {
+            type: import("vue").PropType<boolean>;
+        };
+        teleport: {
+            type: import("vue").PropType<string | boolean>;
+        };
+    }>>, {
+        popoverButtonRef: import("vue").Ref<import("vue").DefineComponent<{
+            as: {
+                type: (ObjectConstructor | StringConstructor)[];
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor[];
+                default: boolean;
+            };
+            id: {
+                type: StringConstructor;
+                default: null;
+            };
+        }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+            as: {
+                type: (ObjectConstructor | StringConstructor)[];
+                default: string;
+            };
+            disabled: {
+                type: BooleanConstructor[];
+                default: boolean;
+            };
+            id: {
+                type: StringConstructor;
+                default: null;
+            };
+        }>>, {
+            id: string;
+            as: string | Record<string, any>;
+            disabled: boolean;
+        }, {}> | null>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+            popover?(_: {
+                close: any;
+                open: any;
+            }): any;
+        };
+    })) | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: Option[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    options: Option[];
+    options: Option[] | OptionGroup[];
     modelValue?: Option[];
     placeholder?: string;
 } & Omit<FloatingOptions, "middleware">>>> & {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAuBrC,iBAAS,cAAc;qBAqDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aAzFR,MAAM,EAAE;iBACJ,MAAM,EAAE;kBACP,MAAM;;;;aAFX,MAAM,EAAE;iBACJ,MAAM,EAAE;kBACP,MAAM;;;UA8FtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"ScalarComboboxMultiselect.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxMultiselect.vue"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AA6BlD,iBAAS,cAAc;qBAuDM,GAAG;EAkB/B;AACD,QAAA,MAAM,eAAe;aAlGR,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM,EAAE;kBACP,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAZxB,KANK,eAML,KANyB,uBAMzB,KANqD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAMrD,KANK,eAML,KANyB,uBAMzB,KANqD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAgBxC,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM,EAAE;kBACP,MAAM;;;UAwGtB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

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

@@ -1,7 +1,7 @@
-import { defineComponent as a, openBlock as r, createBlock as n, withCtx as l, createVNode as m, renderSlot as s } from "vue";
-import i from "./ScalarComboboxOptions.vue.js";
-import d from "./ScalarComboboxPopover.vue.js";
-const B = /* @__PURE__ */ a({
+import { defineComponent as n, ref as m, openBlock as s, createBlock as i, withCtx as t, createVNode as d, renderSlot as u } from "vue";
+import f from "./ScalarComboboxOptions.vue.js";
+import c from "./ScalarComboboxPopover.vue.js";
+const y = /* @__PURE__ */ n({
   __name: "ScalarComboboxMultiselect",
   props: {
     options: {},
@@ -13,30 +13,33 @@ const B = /* @__PURE__ */ a({
     teleport: { type: [Boolean, String] }
   },
   emits: ["update:modelValue"],
-  setup(u) {
-    return (e, o) => (r(), n(d, {
+  setup(V, { expose: p }) {
+    const o = m(null);
+    return p({ comboboxPopoverRef: o }), (e, l) => (s(), i(c, {
+      ref_key: "comboboxPopoverRef",
+      ref: o,
       isOpen: e.isOpen,
       placement: e.placement ?? "bottom-start",
       resize: e.resize,
       teleport: e.teleport
     }, {
-      popover: l(({ open: t }) => [
-        m(i, {
+      popover: t(({ open: r }) => [
+        d(f, {
           modelValue: e.modelValue,
           multiselect: "",
-          open: t,
+          open: r,
           options: e.options,
           placeholder: e.placeholder,
-          "onUpdate:modelValue": o[0] || (o[0] = (p) => e.$emit("update:modelValue", p))
+          "onUpdate:modelValue": l[0] || (l[0] = (a) => e.$emit("update:modelValue", a))
         }, null, 8, ["modelValue", "open", "options", "placeholder"])
       ]),
-      default: l(() => [
-        s(e.$slots, "default")
+      default: t(() => [
+        u(e.$slots, "default")
       ]),
       _: 3
     }, 8, ["isOpen", "placement", "resize", "teleport"]));
   }
 });
 export {
-  B as default
+  y as default
 };

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

@@ -4,9 +4,11 @@ declare function __VLS_template(): {
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     active?: boolean;
     selected?: boolean;
+    style?: "radio" | "checkbox";
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     active?: boolean;
     selected?: boolean;
+    style?: "radio" | "checkbox";
 }>>>, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarComboboxOption.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"names":[],"mappings":"AA2EA,iBAAS,cAAc;qBAkDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aA/FV,OAAO;eACL,OAAO;;aADT,OAAO;eACL,OAAO;aAoGlB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"ScalarComboboxOption.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOption.vue"],"names":[],"mappings":"AA8EA,iBAAS,cAAc;qBAuDM,GAAG;EAiB/B;AACD,QAAA,MAAM,eAAe;aApGV,OAAO;eACL,OAAO;YACV,OAAO,GAAG,UAAU;;aAFnB,OAAO;eACL,OAAO;YACV,OAAO,GAAG,UAAU;aAwG5B,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAAvG,wBAAwG;AAOxG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC;AAEN,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

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

@@ -1,19 +1,19 @@
-import { defineComponent as s, openBlock as n, createElementBlock as c, normalizeClass as r, unref as t, createElementVNode as o, createVNode as l, renderSlot as i } from "vue";
-import { cva as p, cx as m } from "../../cva.js";
-import d from "../ScalarIcon/ScalarIcon.vue.js";
-const u = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, h = /* @__PURE__ */ s({
+import { defineComponent as a, openBlock as n, createElementBlock as c, normalizeClass as r, unref as t, createElementVNode as o, createVNode as l, renderSlot as i } from "vue";
+import { cva as p, cx as d } from "../../cva.js";
+import u from "../ScalarIcon/ScalarIcon.vue.js";
+const m = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, g = /* @__PURE__ */ a({
   __name: "ScalarComboboxOption",
   props: {
     active: { type: Boolean },
-    selected: { type: Boolean }
+    selected: { type: Boolean },
+    style: {}
   },
-  setup(f) {
-    const a = p({
+  setup(b) {
+    const s = p({
       base: [
         // Layout
         "group",
         "flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left",
-        "first-of-type:mt-0.75 last-of-type:mb-0.75",
         // Text / background style
         "truncate bg-transparent text-c-1",
         // Interaction
@@ -24,24 +24,27 @@ const u = { class: "inline-block min-w-0 flex-1 truncate text-c-1" }, h = /* @__
         active: { true: "bg-b-2" }
       }
     });
-    return (e, b) => (n(), c("li", {
-      class: r(t(m)(t(a)({ active: e.active, selected: e.selected })))
+    return (e, f) => (n(), c("li", {
+      class: r(t(d)(t(s)({ active: e.active, selected: e.selected })))
     }, [
       o("div", {
-        class: r(["flex size-4 items-center justify-center rounded-full p-0.75 group-hover:shadow-border", e.selected ? "bg-blue text-b-1" : "text-transparent"])
+        class: r(["flex size-4 items-center justify-center p-0.75 group-hover:shadow-border", [
+          e.selected ? "bg-blue text-b-1" : "text-transparent",
+          e.style === "checkbox" ? "rounded" : "rounded-full"
+        ]])
       }, [
-        l(t(d), {
+        l(t(u), {
           class: "relative top-[0.5px] size-2.5",
           icon: "Checkmark",
           thickness: "2.5"
         })
       ], 2),
-      o("span", u, [
+      o("span", m, [
         i(e.$slots, "default")
       ])
     ], 2));
   }
 });
 export {
-  h as default
+  g as default
 };

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

@@ -1,6 +1,6 @@
-import type { Option } from './types';
+import { type Option, type OptionGroup } from './types.js';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
-    options: Option[];
+    options: Option[] | OptionGroup[];
     modelValue?: Option[];
     placeholder?: string;
     open?: boolean;
@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (v: Option[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    options: Option[];
+    options: Option[] | OptionGroup[];
     modelValue?: Option[];
     placeholder?: string;
     open?: boolean;

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":"AAuHA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;;aAK1B,MAAM,EAAE;iBACJ,MAAM,EAAE;kBACP,MAAM;WACb,OAAO;kBACA,OAAO;;;;aAJZ,MAAM,EAAE;iBACJ,MAAM,EAAE;kBACP,MAAM;WACb,OAAO;kBACA,OAAO;;;;AA4MvB,wBAOG;AAOH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}
+{"version":3,"file":"ScalarComboboxOptions.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCombobox/ScalarComboboxOptions.vue"],"names":[],"mappings":"AAwJA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,WAAW,EAAY,MAAM,SAAS,CAAA;;aAKtD,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM,EAAE;kBACP,MAAM;WACb,OAAO;kBACA,OAAO;;;;aAJZ,MAAM,EAAE,GAAG,WAAW,EAAE;iBACpB,MAAM,EAAE;kBACP,MAAM;WACb,OAAO;kBACA,OAAO;;;;AA8PvB,wBAOG;AAOH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AAC5D,KAAK,uBAAuB,CAAC,CAAC,IAAI;KAChC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACpC;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAC9D;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CACzD,CAAC"}

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

@@ -1,8 +1,12 @@
-import { defineComponent as B, ref as h, watch as y, computed as V, openBlock as u, createElementBlock as g, Fragment as C, createElementVNode as c, createVNode as I, unref as v, withDirectives as k, withKeys as m, withModifiers as p, vModelText as M, renderList as L, createBlock as N, withCtx as A, createTextVNode as D, toDisplayString as E, vShow as K } from "vue";
-import { nanoid as T } from "nanoid";
-import q from "./ScalarComboboxOption.vue.js";
-import z from "../ScalarIcon/ScalarIcon.vue.js";
-const F = { class: "relative flex" }, O = ["aria-controls", "placeholder"], U = ["id"], P = /* @__PURE__ */ B({
+import { defineComponent as E, computed as f, ref as S, watch as M, openBlock as i, createElementBlock as u, Fragment as p, createElementVNode as b, createVNode as K, unref as w, withDirectives as $, withKeys as h, withModifiers as x, vModelText as T, renderList as B, toDisplayString as I, createCommentVNode as _, createBlock as q, normalizeStyle as F, withCtx as G, createTextVNode as O, vShow as U } from "vue";
+import { nanoid as j } from "nanoid";
+import H from "./ScalarComboboxOption.vue.js";
+import { isGroups as N } from "./types.js";
+import J from "../ScalarIcon/ScalarIcon.vue.js";
+const P = { class: "relative flex" }, Q = ["aria-controls", "placeholder"], R = ["id"], W = {
+  key: 0,
+  class: "min-w-0 truncate px-2 py-1.5 text-left text-c-2"
+}, le = /* @__PURE__ */ E({
   inheritAttrs: !1,
   __name: "ScalarComboboxOptions",
   props: {
@@ -13,79 +17,95 @@ const F = { class: "relative flex" }, O = ["aria-controls", "placeholder"], U =
     multiselect: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(S, { emit: _ }) {
-    var b;
-    const o = S, $ = _, f = T(), a = h(""), i = h(((b = o.modelValue) == null ? void 0 : b[0]) ?? o.options[0]);
-    y(
+  setup(L, { emit: z }) {
+    var g;
+    const o = L, A = z, k = j(), y = f(
+      () => N(o.options) ? o.options.flatMap((t) => t.options) : o.options
+    ), D = f(
+      () => N(o.options) ? o.options : [{ label: "", options: o.options }]
+    ), s = S(""), r = S(((g = o.modelValue) == null ? void 0 : g[0]) ?? y.value[0]);
+    M(
       () => o.open,
-      () => a.value = ""
-    ), y(
-      () => a.value,
-      () => i.value = d.value[0]
+      () => s.value = ""
+    ), M(
+      () => s.value,
+      () => r.value = d.value[0]
     );
-    const d = V(
-      () => a.value === "" ? o.options : o.options.filter((t) => t.label.toLowerCase().includes(a.value.toLowerCase()))
-    ), n = V({
+    const d = f(
+      () => s.value === "" ? y.value : y.value.filter((t) => t.label.toLowerCase().includes(s.value.toLowerCase()))
+    ), a = f({
       get: () => o.modelValue ?? [],
-      set: (t) => t && $("update:modelValue", t)
+      set: (t) => t && A("update:modelValue", t)
     });
-    function x(t) {
-      o.multiselect ? n.value.some((e) => e.id === t.id) ? n.value = n.value.filter((e) => e.id !== t.id) : n.value = [...n.value, t] : n.value = [t];
+    function V(t) {
+      o.multiselect ? a.value.some((e) => e.id === t.id) ? a.value = a.value.filter((e) => e.id !== t.id) : a.value = [...a.value, t] : a.value = [t];
     }
-    function w(t) {
-      const e = d.value, r = e.findIndex((s) => s.id === i.value.id) + t;
-      r < 0 || r > e.length - 1 || (i.value = e[r]);
+    function C(t) {
+      const e = d.value, c = e.findIndex((l) => l.id === r.value.id) + t;
+      c < 0 || c > e.length - 1 || (r.value = e[c]);
     }
-    return (t, e) => (u(), g(C, null, [
-      c("div", F, [
-        I(v(z), {
+    return (t, e) => (i(), u(p, null, [
+      b("div", P, [
+        K(w(J), {
           class: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-c-3",
           icon: "Search",
           size: "sm"
         }),
-        k(c("input", {
-          "onUpdate:modelValue": e[0] || (e[0] = (l) => a.value = l),
+        $(b("input", {
+          "onUpdate:modelValue": e[0] || (e[0] = (n) => s.value = n),
           "aria-autocomplete": "list",
-          "aria-controls": v(f),
+          "aria-controls": w(k),
           class: "min-w-0 flex-1 rounded-none border-0 py-2.5 pl-8 pr-3 leading-none text-c-1 outline-none",
+          "data-1p-ignore": "",
           placeholder: t.placeholder,
           role: "combobox",
           tabindex: "0",
           type: "text",
           onKeydown: [
-            e[1] || (e[1] = m(p((l) => w(1), ["prevent"]), ["down"])),
-            e[2] || (e[2] = m(p((l) => x(i.value), ["prevent"]), ["enter"])),
-            e[3] || (e[3] = m(p((l) => w(-1), ["prevent"]), ["up"]))
+            e[1] || (e[1] = h(x((n) => C(1), ["prevent"]), ["down"])),
+            e[2] || (e[2] = h(x((n) => V(r.value), ["prevent"]), ["enter"])),
+            e[3] || (e[3] = h(x((n) => C(-1), ["prevent"]), ["up"]))
           ]
-        }, null, 40, O), [
-          [M, a.value]
+        }, null, 40, Q), [
+          [T, s.value]
         ])
       ]),
-      k(c("ul", {
-        id: v(f),
+      $(b("ul", {
+        id: w(k),
         class: "border-t p-0.75"
       }, [
-        (u(!0), g(C, null, L(d.value, (l) => {
-          var r;
-          return u(), N(q, {
-            key: l.id,
-            active: ((r = i.value) == null ? void 0 : r.id) === l.id,
-            selected: n.value.some((s) => s.id === l.id),
-            onClick: (s) => x(l),
-            onMouseenter: (s) => i.value = l
-          }, {
-            default: A(() => [
-              D(E(l.label), 1)
-            ]),
-            _: 2
-          }, 1032, ["active", "selected", "onClick", "onMouseenter"]);
-        }), 128))
-      ], 8, U), [
-        [K, d.value.length]
+        (i(!0), u(p, null, B(D.value, (n, c) => (i(), u(p, { key: c }, [
+          n.label && // Only show the group label if there are some results
+          n.options.some((l) => d.value.some((m) => m.id === l.id)) ? (i(), u("div", W, I(n.label), 1)) : _("", !0),
+          (i(!0), u(p, null, B(d.value, (l) => {
+            var m;
+            return i(), u(p, {
+              key: l.id
+            }, [
+              n.options.some((v) => v.id === l.id) ? (i(), q(H, {
+                key: 0,
+                active: ((m = r.value) == null ? void 0 : m.id) === l.id,
+                selected: a.value.some((v) => v.id === l.id),
+                style: F(t.multiselect ? "checkbox" : "radio"),
+                onClick: (v) => V(l),
+                onMousedown: e[4] || (e[4] = x(() => {
+                }, ["prevent"])),
+                onMouseenter: (v) => r.value = l
+              }, {
+                default: G(() => [
+                  O(I(l.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["active", "selected", "style", "onClick", "onMouseenter"])) : _("", !0)
+            ], 64);
+          }), 128))
+        ], 64))), 128))
+      ], 8, R), [
+        [U, d.value.length]
       ])
     ], 64));
   }
 });
 export {
-  P as default
+  le as default
 };