@sentropic/design-system-vue 0.34.0 → 0.36.0

package/dist/MultiSelect.js

@@ -1,34 +1,47 @@
 import { defineComponent, h, ref, computed } from "vue";
-import { ChevronDown } from "lucide-vue-next";
+import { ChevronDown, X } from "lucide-vue-next";
 import { classNames } from "./classNames.js";
-let _msCounter = 0;
-function nextMsId() {
-    return `st-multiSelect-${++_msCounter}`;
-}
 export const MultiSelect = defineComponent({
     name: "MultiSelect",
     props: {
         label: { type: [String, Object], default: undefined },
+        helperText: { type: [String, Object], default: undefined },
+        errorText: { type: [String, Object], default: undefined },
+        invalid: { type: Boolean, default: false },
         options: { type: Array, required: true },
         value: { type: Array, default: undefined },
         values: { type: Array, default: undefined },
+        selected: { type: Array, default: undefined },
         size: { type: String, default: "md" },
         open: { type: Boolean, default: undefined },
+        placeholder: { type: String, default: "Select items" },
+        searchPlaceholder: { type: String, default: "Filter" },
+        noResultsLabel: { type: String, default: "No results" },
+        toggleLabel: { type: String, default: "Toggle options" },
+        removeLabel: { type: String, default: "Remove" },
+        listLabel: { type: String, default: undefined },
+        disabled: { type: Boolean, default: false },
         class: { type: String, default: undefined },
     },
     emits: ["change", "update:open", "update:modelValue"],
     setup(props, { emit, attrs }) {
-        const instanceId = ref(nextMsId());
-        const listId = computed(() => `${instanceId.value}-list`);
         const localOpen = ref(false);
-        const localSelected = ref(props.value ?? props.values ?? []);
+        const localSelected = ref(props.value ?? props.values ?? props.selected ?? []);
+        const query = ref("");
         const isOpen = () => (props.open !== undefined ? props.open : localOpen.value);
         const setOpen = (val) => {
             if (props.open === undefined)
                 localOpen.value = val;
             emit("update:open", val);
         };
-        const getSelected = () => props.value ?? props.values ?? localSelected.value;
+        const getSelected = () => props.value ?? props.values ?? props.selected ?? localSelected.value;
+        const isControlled = () => props.value !== undefined || props.values !== undefined || props.selected !== undefined;
+        const commit = (next) => {
+            if (!isControlled())
+                localSelected.value = next;
+            emit("change", next);
+            emit("update:modelValue", next);
+        };
         const toggleOption = (option) => {
             if (option.disabled)
                 return;
@@ -36,73 +49,119 @@ export const MultiSelect = defineComponent({
             const next = current.includes(option.value)
                 ? current.filter((v) => v !== option.value)
                 : [...current, option.value];
-            if (props.value === undefined && props.values === undefined) {
-                localSelected.value = next;
-            }
-            emit("change", next);
-            emit("update:modelValue", next);
-            setOpen(false);
+            commit(next);
         };
+        const removeOption = (value) => {
+            commit(getSelected().filter((v) => v !== value));
+        };
+        const filtered = computed(() => {
+            const q = query.value.trim().toLowerCase();
+            if (!q)
+                return props.options;
+            return props.options.filter((opt) => String(opt.label).toLowerCase().includes(q));
+        });
         return () => {
             const open = isOpen();
-            const selected = new Set(getSelected());
-            const selectedOptions = props.options.filter((opt) => selected.has(opt.value));
+            const selectedSet = new Set(getSelected());
+            const selectedOptions = getSelected()
+                .map((value) => props.options.find((opt) => opt.value === value))
+                .filter((opt) => Boolean(opt));
+            const isInvalid = props.invalid || Boolean(props.errorText);
             return h("div", {
                 ...attrs,
-                class: classNames("st-multiSelect", `st-multiSelect--${props.size}`, props.class),
+                class: classNames("st-field", props.class),
+                role: "group",
+                "aria-label": props.label ? String(props.label) : undefined,
+                onKeydown: (event) => {
+                    if (event.key === "Escape" && open) {
+                        event.preventDefault();
+                        setOpen(false);
+                    }
+                },
             }, [
                 props.label
                     ? h("span", { class: "st-field__label" }, props.label)
                     : null,
-                h("button", {
-                    type: "button",
-                    class: "st-multiSelect__trigger",
-                    "aria-label": String(props.label) || "Select options",
-                    "aria-haspopup": "listbox",
-                    "aria-expanded": open,
-                    "aria-controls": listId.value,
-                    onClick: () => setOpen(!open),
+                selectedOptions.length > 0
+                    ? h("span", { class: "st-multiSelect__tags" }, selectedOptions.map((option) => h("span", { key: option.value, class: "st-multiSelect__tag" }, [
+                        h("span", { class: "st-multiSelect__tagLabel" }, String(option.label)),
+                        h("button", {
+                            type: "button",
+                            class: "st-multiSelect__tagRemove",
+                            "aria-label": `${props.removeLabel} ${String(option.label)}`,
+                            disabled: props.disabled,
+                            onClick: () => removeOption(option.value),
+                        }, [h(X, { size: 14, strokeWidth: 2.25, "aria-hidden": "true" })]),
+                    ])))
+                    : null,
+                h("span", {
+                    class: classNames("st-multiSelect", `st-multiSelect--${props.size}`),
+                    "data-invalid": isInvalid ? "true" : undefined,
                 }, [
-                    props.label
-                        ? h("span", { class: "st-multiSelect__triggerLabel" }, props.label)
-                        : null,
-                    h("span", { class: "st-multiSelect__tags" }, selectedOptions.length
-                        ? selectedOptions.map((opt) => h("span", { key: opt.value, class: "st-multiSelect__tag" }, [
-                            h("span", { class: "st-multiSelect__tagLabel" }, String(opt.label)),
-                        ]))
-                        : [h("span", { class: "st-multiSelect__placeholder" }, "Select")]),
-                    h("span", { class: "st-multiSelect__caret", "aria-hidden": "true" }, [
-                        h(ChevronDown, {
-                            class: classNames("st-multiSelect__caretIcon", open && "st-multiSelect__caretIcon--open"),
-                            size: 18,
-                            strokeWidth: 2.25,
-                            "aria-hidden": "true",
-                        }),
+                    h("button", {
+                        type: "button",
+                        class: "st-multiSelect__trigger",
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": open,
+                        disabled: props.disabled,
+                        onClick: () => setOpen(!open),
+                    }, [
+                        selectedOptions.length === 0
+                            ? h("span", { class: "st-multiSelect__placeholder" }, props.placeholder)
+                            : h("span", { class: "st-multiSelect__count" }, `${selectedOptions.length} selected`),
+                        h("span", { class: "st-multiSelect__caret", "aria-hidden": "true" }, [
+                            h(ChevronDown, {
+                                class: classNames("st-multiSelect__caretIcon", open && "st-multiSelect__caretIcon--open"),
+                                size: 18,
+                                strokeWidth: 2.25,
+                                "aria-hidden": "true",
+                            }),
+                        ]),
+                        h("span", { class: "st-visually-hidden" }, props.toggleLabel),
                     ]),
                 ]),
                 open
-                    ? h("ul", {
-                        id: listId.value,
-                        class: "st-multiSelect__list",
-                        role: "listbox",
-                        "aria-label": String(props.label) || "Options",
-                        "aria-multiselectable": "true",
-                    }, props.options.map((option) => h("li", {
-                        key: option.value,
-                        class: classNames("st-multiSelect__option", selected.has(option.value) && "st-multiSelect__option--selected"),
-                        role: "option",
-                        "aria-selected": selected.has(option.value),
-                        "aria-disabled": option.disabled ? "true" : undefined,
-                        tabindex: option.disabled ? undefined : 0,
-                        onClick: () => toggleOption(option),
-                        onKeydown: (event) => {
-                            if (event.key === "Enter" || event.key === " ") {
-                                event.preventDefault();
-                                toggleOption(option);
-                            }
-                        },
-                    }, String(option.label))))
+                    ? h("div", { class: "st-multiSelect__panel" }, [
+                        h("input", {
+                            type: "search",
+                            class: "st-multiSelect__search",
+                            placeholder: props.searchPlaceholder,
+                            value: query.value,
+                            "aria-label": props.searchPlaceholder,
+                            onInput: (event) => {
+                                query.value = event.currentTarget.value;
+                            },
+                        }),
+                        h("div", {
+                            class: "st-multiSelect__list",
+                            role: "listbox",
+                            "aria-label": props.listLabel ?? (props.label ? String(props.label) : "Options"),
+                            "aria-multiselectable": "true",
+                        }, filtered.value.length === 0
+                            ? [h("div", { class: "st-multiSelect__empty" }, props.noResultsLabel)]
+                            : filtered.value.map((option) => {
+                                const isSelected = selectedSet.has(option.value);
+                                return h("button", {
+                                    key: option.value,
+                                    class: "st-multiSelect__option",
+                                    type: "button",
+                                    role: "option",
+                                    "aria-selected": isSelected ? "true" : "false",
+                                    "aria-disabled": option.disabled ? "true" : undefined,
+                                    disabled: option.disabled,
+                                    onClick: () => toggleOption(option),
+                                }, [
+                                    h("span", { class: "st-multiSelect__check", "aria-hidden": "true" }, isSelected ? "✓" : ""),
+                                    h("span", String(option.label)),
+                                ]);
+                            })),
+                    ])
                     : null,
+                props.errorText
+                    ? h("span", { class: "st-field__error" }, props.errorText)
+                    : props.helperText
+                        ? h("span", { class: "st-field__help" }, props.helperText)
+                        : null,
             ]);
         };
     },

package/dist/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../src/MultiSelect.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../src/MultiSelect.ts"],"names":[],"mappings":"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"}

package/dist/NumberInput.d.ts

@@ -137,10 +137,10 @@ export declare const NumberInput: import("vue").DefineComponent<import("vue").Ex
     onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: NumberInputSize;
     class: string;
     label: undefined;
     disabled: boolean;
-    size: NumberInputSize;
     max: string | number;
     min: string | number;
     value: string | number | null;

package/dist/PasswordInput.d.ts

@@ -82,10 +82,10 @@ export declare const PasswordInput: import("vue").DefineComponent<import("vue").
     onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: PasswordInputSize;
     class: string;
     label: undefined;
     disabled: boolean;
-    size: PasswordInputSize;
     placeholder: string;
     helperText: undefined;
     modelValue: string;

package/dist/ProgressBar.d.ts

@@ -2,11 +2,14 @@ export type ProgressBarTone = "neutral" | "info" | "success" | "warning" | "erro
 export type ProgressBarSize = "sm" | "md" | "lg";
 export type ProgressBarProps = {
     label?: unknown;
+    helperText?: string;
     value?: number;
     max?: number;
     tone?: ProgressBarTone;
     size?: ProgressBarSize;
     indeterminate?: boolean;
+    showValue?: boolean;
+    valueText?: string;
     class?: string;
 };
 export declare const ProgressBar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -14,6 +17,10 @@ export declare const ProgressBar: import("vue").DefineComponent<import("vue").Ex
         type: () => unknown;
         default: undefined;
     };
+    helperText: {
+        type: StringConstructor;
+        default: undefined;
+    };
     value: {
         type: NumberConstructor;
         default: number;
@@ -34,6 +41,14 @@ export declare const ProgressBar: import("vue").DefineComponent<import("vue").Ex
         type: BooleanConstructor;
         default: boolean;
     };
+    showValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueText: {
+        type: StringConstructor;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -45,6 +60,10 @@ export declare const ProgressBar: import("vue").DefineComponent<import("vue").Ex
         type: () => unknown;
         default: undefined;
     };
+    helperText: {
+        type: StringConstructor;
+        default: undefined;
+    };
     value: {
         type: NumberConstructor;
         default: number;
@@ -65,17 +84,28 @@ export declare const ProgressBar: import("vue").DefineComponent<import("vue").Ex
         type: BooleanConstructor;
         default: boolean;
     };
+    showValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueText: {
+        type: StringConstructor;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    size: ProgressBarSize;
     class: string;
     label: undefined;
-    size: ProgressBarSize;
     max: number;
     tone: ProgressBarTone;
     value: number;
+    helperText: string;
     indeterminate: boolean;
+    showValue: boolean;
+    valueText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=ProgressBar.d.ts.map

package/dist/ProgressBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../src/ProgressBar.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAWF,eAAO,MAAM,WAAW;;cAG0B,MAAM,OAAO;;;;;;;;;;;;cAIzC,MAAM,eAAe;;;;cAIrB,MAAM,eAAe;;;;;;;;;;;;;;;cARO,MAAM,OAAO;;;;;;;;;;;;cAIzC,MAAM,eAAe;;;;cAIrB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;4EA6DzC,CAAC"}
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../src/ProgressBar.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,WAAW;;cAG0B,MAAM,OAAO;;;;;;;;;;;;;;;;cAKzC,MAAM,eAAe;;;;cAIrB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;cATO,MAAM,OAAO;;;;;;;;;;;;;;;;cAKzC,MAAM,eAAe;;;;cAIrB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA6EzC,CAAC"}

package/dist/ProgressBar.js

@@ -1,17 +1,10 @@
 import { defineComponent, h } from "vue";
 import { classNames } from "./classNames.js";
-function clamp(value, min, max) {
-    return Math.min(max, Math.max(min, value));
-}
-function pct(value, min = 0, max = 100) {
-    if (max <= min)
-        return 0;
-    return clamp(((value - min) / (max - min)) * 100, 0, 100);
-}
 export const ProgressBar = defineComponent({
     name: "ProgressBar",
     props: {
         label: { type: [String, Object], default: undefined },
+        helperText: { type: String, default: undefined },
         value: { type: Number, default: 0 },
         max: { type: Number, default: 100 },
         tone: {
@@ -23,38 +16,54 @@ export const ProgressBar = defineComponent({
             default: "md",
         },
         indeterminate: { type: Boolean, default: false },
+        showValue: { type: Boolean, default: false },
+        valueText: { type: String, default: undefined },
         class: { type: String, default: undefined },
     },
     setup(props, { attrs }) {
         return () => {
-            const percent = pct(props.value ?? 0, 0, props.max ?? 100);
+            const max = props.max ?? 100;
+            const value = props.value ?? 0;
+            const clamped = max <= 0 ? 0 : Math.min(Math.max(value, 0), max);
+            const percent = props.indeterminate ? 0 : (clamped / max) * 100;
+            const displayValue = props.valueText
+                ? props.valueText
+                : props.indeterminate
+                    ? ""
+                    : `${Math.round(percent)}%`;
+            const showValueSpan = props.showValue && !props.indeterminate;
             return h("div", {
                 ...attrs,
                 class: classNames("st-progressBar", props.class),
             }, [
-                props.label
-                    ? h("div", { class: "st-progressBar__label" }, props.label)
+                props.label || showValueSpan
+                    ? h("div", { class: "st-progressBar__header" }, [
+                        props.label
+                            ? h("span", { class: "st-progressBar__label" }, props.label)
+                            : null,
+                        showValueSpan
+                            ? h("span", { class: "st-progressBar__value", "aria-hidden": "true" }, displayValue)
+                            : null,
+                    ])
                     : null,
                 h("div", {
-                    class: classNames("st-progressBar__track", `st-progressBar__track--${props.tone}`, `st-progressBar__track--${props.size}`, props.indeterminate &&
+                    class: classNames("st-progressBar__track", `st-progressBar__track--${props.size}`, `st-progressBar__track--${props.tone}`, props.indeterminate &&
                         "st-progressBar__track--indeterminate"),
                     role: "progressbar",
-                    "aria-valuenow": props.indeterminate
-                        ? undefined
-                        : props.value,
-                    "aria-valuemin": 0,
-                    "aria-valuemax": props.max,
+                    "aria-valuemin": props.indeterminate ? undefined : 0,
+                    "aria-valuemax": props.indeterminate ? undefined : max,
+                    "aria-valuenow": props.indeterminate ? undefined : clamped,
+                    "aria-valuetext": props.indeterminate ? undefined : displayValue,
+                    "aria-label": typeof props.label === "string" ? props.label : undefined,
                 }, [
                     h("div", {
                         class: "st-progressBar__fill",
-                        style: {
-                            width: props.indeterminate
-                                ? undefined
-                                : `${percent}%`,
-                        },
+                        style: { "--st-progressBar-pct": `${percent}%` },
                     }),
                 ]),
-                h("span", { class: "st-progressBar__value" }, `${Math.round(percent)}%`),
+                props.helperText
+                    ? h("span", { class: "st-progressBar__help" }, props.helperText)
+                    : null,
             ]);
         };
     },

package/dist/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.ts"],"names":[],"mappings":"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"}

package/dist/RangeSlider.d.ts

@@ -166,11 +166,11 @@ export declare const RangeSlider: import("vue").DefineComponent<import("vue").Ex
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: RangeSliderSize;
     class: string;
     label: string;
     invalid: boolean;
     disabled: boolean;
-    size: RangeSliderSize;
     max: number;
     min: number;
     value: [number, number];
@@ -178,8 +178,8 @@ export declare const RangeSlider: import("vue").DefineComponent<import("vue").Ex
     modelValue: [number, number];
     errorText: string;
     step: number;
-    defaultValue: [number, number];
     showValue: boolean;
+    defaultValue: [number, number];
     valueFormatter: (value: number) => string;
     ariaLabelMin: string;
     ariaLabelMax: string;

package/dist/Rating.d.ts

@@ -97,11 +97,11 @@ export declare const Rating: import("vue").DefineComponent<import("vue").Extract
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: RatingSize;
     class: string;
     name: string;
     onChange: (value: number) => void;
     label: string;
-    size: RatingSize;
     max: number;
     value: number;
     readonly: boolean;

package/dist/Rating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../src/Rating.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAK5C,MAAM,MAAM,WAAW,GAAG;IACxB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiDF,eAAO,MAAM,MAAM;;;;;;;;;;cAMgB,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;cAKpC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;cALT,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;cAKpC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;sBALK,MAAM,KAAK,IAAI;;;;;;;4EAoP9D,CAAC"}
+{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../src/Rating.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAK5C,MAAM,MAAM,WAAW,GAAG;IACxB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiDF,eAAO,MAAM,MAAM;;;;;;;;;;cAMgB,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;cAKpC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;cALT,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;cAKpC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;sBALK,MAAM,KAAK,IAAI;;;;;;4EAoP9D,CAAC"}

package/dist/Row.d.ts

@@ -61,11 +61,11 @@ export declare const Row: import("vue").DefineComponent<import("vue").ExtractPro
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    align: FlexAlign;
     class: string;
     wrap: boolean;
     justify: FlexJustify;
     as: string;
-    align: FlexAlign;
     gutter: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Row.d.ts.map

package/dist/Search.d.ts

@@ -93,11 +93,11 @@ export declare const Search: import("vue").DefineComponent<import("vue").Extract
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: SearchSize;
     class: string;
     label: undefined;
     id: string;
     disabled: boolean;
-    size: SearchSize;
     value: string;
     placeholder: string;
     modelValue: string;

package/dist/Select.d.ts

@@ -95,11 +95,11 @@ export declare const Select: import("vue").DefineComponent<import("vue").Extract
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: SelectSize;
     class: string;
     label: undefined;
     invalid: boolean;
     disabled: boolean;
-    size: SelectSize;
     helperText: undefined;
     modelValue: string;
     options: SelectOption[];

package/dist/SlideIndicator.d.ts

@@ -77,10 +77,10 @@ export declare const SlideIndicator: import("vue").DefineComponent<import("vue")
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: SlideIndicatorSize;
     class: string;
     onChange: (index: number) => void;
     label: string;
-    size: SlideIndicatorSize;
     variant: SlideIndicatorVariant;
     current: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/SlideIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideIndicator.d.ts","sourceRoot":"","sources":["../src/SlideIndicator.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAIpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;cAMQ,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;cAGpC,MAAM,kBAAkB;;;;cACrB,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;cAJvB,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;cAGpC,MAAM,kBAAkB;;;;cACrB,MAAM,qBAAqB;;;;;;;;;;;;;;;;sBAJT,MAAM,KAAK,IAAI;;;;;4EAsF9D,CAAC"}
+{"version":3,"file":"SlideIndicator.d.ts","sourceRoot":"","sources":["../src/SlideIndicator.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAIpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;cAMQ,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;cAGpC,MAAM,kBAAkB;;;;cACrB,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;cAJvB,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;cAGpC,MAAM,kBAAkB;;;;cACrB,MAAM,qBAAqB;;;;;;;;;;;;;;;;;sBAJT,MAAM,KAAK,IAAI;;;;4EAsF9D,CAAC"}

package/dist/Slider.d.ts

@@ -135,10 +135,10 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: SliderSize;
     class: string;
     label: string;
     invalid: boolean;
-    size: SliderSize;
     max: number;
     min: number;
     value: number;
@@ -146,8 +146,8 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
     modelValue: number;
     errorText: string;
     step: number;
-    defaultValue: number;
     showValue: boolean;
+    defaultValue: number;
     valueFormatter: (value: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Slider.d.ts.map