@sentropic/design-system-vue 0.33.0 → 0.35.0

package/dist/SkeletonText.js

@@ -3,22 +3,37 @@ import { classNames } from "./classNames.js";
 export const SkeletonText = defineComponent({
     name: "SkeletonText",
     props: {
-        lines: { type: Number, default: 3 },
-        label: { type: String, default: "Loading" },
+        lines: { type: Number, default: 1 },
+        width: { type: String, default: undefined },
+        heading: { type: Boolean, default: false },
+        paragraph: { type: Boolean, default: false },
         class: { type: String, default: undefined },
     },
     setup(props, { attrs }) {
-        return () => h("div", {
-            ...attrs,
-            class: classNames("st-skeleton", props.class),
-            "aria-label": props.label,
-        }, [
-            h("span", { class: "st-visually-hidden" }, props.label),
-            ...Array.from({ length: props.lines ?? 3 }, (_, index) => h("span", {
-                key: index,
-                class: classNames("st-skeleton__line", index === 0 && "st-skeleton__line--heading"),
-            })),
-        ]);
+        return () => {
+            const lineCount = props.paragraph ? Math.max(props.lines ?? 1, 3) : props.lines ?? 1;
+            const lineWidth = (index) => {
+                if (props.width && index === 0)
+                    return props.width;
+                if (props.paragraph && index === lineCount - 1)
+                    return "60%";
+                return undefined;
+            };
+            return h("div", {
+                ...attrs,
+                class: classNames("st-skeleton", props.class),
+                role: "status",
+                "aria-label": "Loading…",
+                "aria-busy": "true",
+            }, Array.from({ length: lineCount }, (_, index) => {
+                const w = lineWidth(index);
+                return h("span", {
+                    key: index,
+                    class: classNames("st-skeleton__line", props.heading && "st-skeleton__line--heading"),
+                    style: w ? `width:${w}` : undefined,
+                });
+            }));
+        };
     },
 });
 //# sourceMappingURL=SkeletonText.js.map

package/dist/SkeletonText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../src/SkeletonText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQ7C,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE;QACnC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE,CACV,CAAC,CACC,KAAK,EACL;YACE,GAAG,KAAK;YACR,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC;YAC7C,YAAY,EAAE,KAAK,CAAC,KAAK;SAC1B,EACD;YACE,CAAC,CACC,MAAM,EACN,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAC/B,KAAK,CAAC,KAAK,CACZ;YACD,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CACvD,CAAC,CAAC,MAAM,EAAE;gBACR,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,UAAU,CACf,mBAAmB,EACnB,KAAK,KAAK,CAAC,IAAI,4BAA4B,CAC5C;aACF,CAAC,CACH;SACF,CACF,CAAC;IACN,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../src/SkeletonText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAU7C,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE;QACnC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC1C,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC5C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,GAAG,EAAE;YACV,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;YACrF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAsB,EAAE;gBACtD,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC;oBAAE,OAAO,KAAK,CAAC,KAAK,CAAC;gBACnD,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,KAAK,SAAS,GAAG,CAAC;oBAAE,OAAO,KAAK,CAAC;gBAC7D,OAAO,SAAS,CAAC;YACnB,CAAC,CAAC;YACF,OAAO,CAAC,CACN,KAAK,EACL;gBACE,GAAG,KAAK;gBACR,KAAK,EAAE,UAAU,CAAC,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC;gBAC7C,IAAI,EAAE,QAAQ;gBACd,YAAY,EAAE,UAAU;gBACxB,WAAW,EAAE,MAAM;aACpB,EACD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;gBAC7C,MAAM,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;gBAC3B,OAAO,CAAC,CAAC,MAAM,EAAE;oBACf,GAAG,EAAE,KAAK;oBACV,KAAK,EAAE,UAAU,CACf,mBAAmB,EACnB,KAAK,CAAC,OAAO,IAAI,4BAA4B,CAC9C;oBACD,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;iBACpC,CAAC,CAAC;YACL,CAAC,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

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

@@ -6,7 +6,13 @@ export type SliderProps = {
     defaultValue?: number;
     min?: number;
     max?: number;
+    step?: number;
     modelValue?: number;
+    helperText?: string;
+    errorText?: string;
+    invalid?: boolean;
+    showValue?: boolean;
+    valueFormatter?: (value: number) => string;
     class?: string;
 };
 export declare const Slider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -34,10 +40,34 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
         type: NumberConstructor;
         default: number;
     };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
     modelValue: {
         type: NumberConstructor;
         default: undefined;
     };
+    helperText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueFormatter: {
+        type: () => (value: number) => string;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -69,10 +99,34 @@ export declare const Slider: import("vue").DefineComponent<import("vue").Extract
         type: NumberConstructor;
         default: number;
     };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
     modelValue: {
         type: NumberConstructor;
         default: undefined;
     };
+    helperText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    valueFormatter: {
+        type: () => (value: number) => string;
+        default: undefined;
+    };
     class: {
         type: StringConstructor;
         default: undefined;
@@ -81,13 +135,19 @@ 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;
-    size: SliderSize;
+    invalid: boolean;
     max: number;
     min: number;
     value: number;
+    helperText: string;
     modelValue: number;
+    errorText: string;
+    step: number;
+    showValue: boolean;
     defaultValue: number;
+    valueFormatter: (value: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Slider.d.ts.map

package/dist/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;cAIS,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAhB,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA0C1C,CAAC"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;cAIS,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAWO,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;;;;;;;;;;;;;;;cAXtD,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAWO,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;;;;;;;;;;;;;;;;;;;;;;;;4BAAjB,MAAM,KAAK,MAAM;4EAqFhF,CAAC"}

package/dist/Slider.js

@@ -1,4 +1,4 @@
-import { defineComponent, h } from "vue";
+import { defineComponent, h, ref } from "vue";
 import { classNames } from "./classNames.js";
 export const Slider = defineComponent({
     name: "Slider",
@@ -9,35 +9,85 @@ export const Slider = defineComponent({
         defaultValue: { type: Number, default: undefined },
         min: { type: Number, default: 0 },
         max: { type: Number, default: 100 },
+        step: { type: Number, default: 1 },
         modelValue: { type: Number, default: undefined },
+        helperText: { type: String, default: undefined },
+        errorText: { type: String, default: undefined },
+        invalid: { type: Boolean, default: false },
+        showValue: { type: Boolean, default: true },
+        valueFormatter: { type: Function, default: undefined },
         class: { type: String, default: undefined },
     },
     emits: ["update:modelValue", "change"],
     setup(props, { emit, attrs }) {
+        const seed = props.modelValue ?? props.value ?? props.defaultValue ?? props.min;
+        const internal = ref(Number.isFinite(Number(seed)) ? Number(seed) : props.min);
         return () => {
-            const numeric = props.modelValue ?? props.value ?? props.defaultValue ?? 0;
+            const controlled = props.modelValue !== undefined || props.value !== undefined;
+            const raw = controlled ? (props.modelValue ?? props.value ?? props.min) : internal.value;
+            const min = props.min;
+            const max = props.max;
+            const safe = !Number.isFinite(Number(raw))
+                ? min
+                : Number(raw) < min
+                    ? min
+                    : Number(raw) > max
+                        ? max
+                        : Number(raw);
+            const percent = max === min ? 0 : ((safe - min) / (max - min)) * 100;
+            const formatted = props.valueFormatter ? props.valueFormatter(safe) : String(safe);
+            const isInvalid = props.invalid || Boolean(props.errorText);
             return h("div", {
-                class: classNames("st-slider", `st-slider--${props.size}`, props.class),
+                ...attrs,
+                class: classNames("st-field", props.class),
             }, [
                 h("div", { class: "st-slider__header" }, [
-                    props.label
-                        ? h("label", { class: "st-field__label" }, props.label)
+                    props.label ? h("span", { class: "st-field__label" }, props.label) : null,
+                    props.showValue
+                        ? h("output", { class: "st-slider__value", "aria-live": "polite" }, formatted)
                         : null,
-                    h("span", { class: "st-slider__value" }, String(numeric)),
                 ]),
-                h("input", {
-                    ...attrs,
-                    class: "st-slider__input",
-                    type: "range",
-                    min: props.min,
-                    max: props.max,
-                    value: numeric,
-                    onInput: (event) => {
-                        const val = Number(event.target.value);
-                        emit("update:modelValue", val);
-                        emit("change", event);
-                    },
-                }),
+                h("span", { class: classNames("st-slider", `st-slider--${props.size}`) }, [
+                    h("span", { class: "st-slider__bounds", "aria-hidden": "true" }, String(min)),
+                    h("span", { class: "st-slider__track" }, [
+                        h("span", {
+                            class: "st-slider__fill",
+                            style: `--st-slider-fill: ${percent}%`,
+                        }),
+                        h("span", {
+                            class: "st-slider__thumb",
+                            style: `left: ${percent}%`,
+                            "aria-hidden": "true",
+                        }, props.showValue
+                            ? h("span", { class: "st-slider__tooltip" }, formatted)
+                            : undefined),
+                        h("input", {
+                            class: "st-slider__input",
+                            type: "range",
+                            "aria-label": props.label,
+                            "aria-invalid": isInvalid ? "true" : undefined,
+                            value: safe,
+                            min: props.min,
+                            max: props.max,
+                            step: props.step,
+                            onInput: (event) => {
+                                const val = Number(event.target.value);
+                                if (Number.isFinite(val)) {
+                                    if (!controlled)
+                                        internal.value = val;
+                                    emit("update:modelValue", val);
+                                    emit("change", val);
+                                }
+                            },
+                        }),
+                    ]),
+                    h("span", { class: "st-slider__bounds", "aria-hidden": "true" }, String(max)),
+                ]),
+                props.errorText
+                    ? h("span", { class: "st-field__error" }, props.errorText)
+                    : props.helperText
+                        ? h("span", { class: "st-field__help" }, props.helperText)
+                        : null,
             ]);
         };
     },

package/dist/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAe7C,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,IAAI,EAAE,EAAE,IAAI,EAAE,MAA0B,EAAE,OAAO,EAAE,IAAI,EAAE;QACzD,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,YAAY,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAClD,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE;QACjC,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;QACnC,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAChD,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IACtC,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,OAAO,GAAG,EAAE;YACV,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,IAAI,CAAC,CAAC;YAE3E,OAAO,CAAC,CACN,KAAK,EACL;gBACE,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,cAAc,KAAK,CAAC,IAAI,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC;aACxE,EACD;gBACE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,EAAE;oBACvC,KAAK,CAAC,KAAK;wBACT,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC;wBACvD,CAAC,CAAC,IAAI;oBACR,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;iBAC1D,CAAC;gBACF,CAAC,CAAC,OAAO,EAAE;oBACT,GAAG,KAAK;oBACR,KAAK,EAAE,kBAAkB;oBACzB,IAAI,EAAE,OAAO;oBACb,GAAG,EAAE,KAAK,CAAC,GAAG;oBACd,GAAG,EAAE,KAAK,CAAC,GAAG;oBACd,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,CAAC,KAAY,EAAE,EAAE;wBACxB,MAAM,GAAG,GAAG,MAAM,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;wBAC7D,IAAI,CAAC,mBAAmB,EAAE,GAAG,CAAC,CAAC;wBAC/B,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;oBACxB,CAAC;iBACF,CAAC;aACH,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../src/Slider.ts"],"names":[],"mappings":"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"}

package/dist/Stack.d.ts

@@ -52,10 +52,10 @@ export declare const Stack: import("vue").DefineComponent<import("vue").ExtractP
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    align: FlexAlign;
     class: string;
     justify: FlexJustify;
     gap: number;
     as: string;
-    align: FlexAlign;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Stack.d.ts.map

package/dist/Tag.d.ts

@@ -73,9 +73,9 @@ export declare const Tag: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{
     onDismiss?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: TagSize;
     class: string;
     disabled: boolean;
-    size: TagSize;
     tone: TagTone;
     dismissible: boolean;
     dismissLabel: string;

package/dist/TimePicker.d.ts

@@ -115,12 +115,12 @@ export declare const TimePicker: import("vue").DefineComponent<import("vue").Ext
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: TimePickerSize;
     class: string;
     onChange: (value: string) => void;
     label: string;
     id: string;
     disabled: boolean;
-    size: TimePickerSize;
     max: string;
     min: string;
     format: TimePickerFormat;

package/dist/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../src/TimePicker.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAIhD,MAAM,MAAM,eAAe,GAAG;IAC5B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AA2BF,eAAO,MAAM,UAAU;;;;;;cAKY,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;cAMlC,MAAM,gBAAgB;;;;cACxB,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;cAPb,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;cAMlC,MAAM,gBAAgB;;;;cACxB,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;sBAPC,MAAM,KAAK,IAAI;;;;;;;;;;4EAoS9D,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../src/TimePicker.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAIhD,MAAM,MAAM,eAAe,GAAG;IAC5B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gFAAgF;IAChF,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AA2BF,eAAO,MAAM,UAAU;;;;;;cAKY,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;cAMlC,MAAM,gBAAgB;;;;cACxB,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;cAPb,MAAM,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;cAMlC,MAAM,gBAAgB;;;;cACxB,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;sBAPC,MAAM,KAAK,IAAI;;;;;;;;;4EAoS9D,CAAC"}

package/dist/Toggle.d.ts

@@ -1,6 +1,8 @@
 export type ToggleSize = "sm" | "md";
 export type ToggleProps = {
     label: unknown;
+    labelOn?: string;
+    labelOff?: string;
     helperText?: unknown;
     size?: ToggleSize;
     modelValue?: boolean;
@@ -15,6 +17,14 @@ export declare const Toggle: import("vue").DefineComponent<import("vue").Extract
         type: () => unknown;
         required: true;
     };
+    labelOn: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelOff: {
+        type: StringConstructor;
+        default: string;
+    };
     helperText: {
         type: () => unknown;
         default: undefined;
@@ -54,6 +64,14 @@ export declare const Toggle: import("vue").DefineComponent<import("vue").Extract
         type: () => unknown;
         required: true;
     };
+    labelOn: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelOff: {
+        type: StringConstructor;
+        default: string;
+    };
     helperText: {
         type: () => unknown;
         default: undefined;
@@ -90,13 +108,15 @@ export declare const Toggle: import("vue").DefineComponent<import("vue").Extract
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
+    size: ToggleSize;
     class: string;
     name: string;
     disabled: boolean;
-    size: ToggleSize;
     value: string;
     helperText: undefined;
     modelValue: boolean;
     checked: boolean;
+    labelOn: string;
+    labelOff: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Toggle.d.ts.map

package/dist/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,MAAM;;cAG+B,MAAM,OAAO;;;;cACR,MAAM,OAAO;;;;cACxC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAFM,MAAM,OAAO;;;;cACR,MAAM,OAAO;;;;cACxC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA0D1C,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,MAAM;;cAG+B,MAAM,OAAO;;;;;;;;;;;;cAGR,MAAM,OAAO;;;;cACxC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAJM,MAAM,OAAO;;;;;;;;;;;;cAGR,MAAM,OAAO;;;;cACxC,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAgE1C,CAAC"}

package/dist/Toggle.js

@@ -4,6 +4,8 @@ export const Toggle = defineComponent({
     name: "Toggle",
     props: {
         label: { type: [String, Object], required: true },
+        labelOn: { type: String, default: "On" },
+        labelOff: { type: String, default: "Off" },
         helperText: { type: [String, Object], default: undefined },
         size: { type: String, default: "md" },
         modelValue: { type: Boolean, default: undefined },
@@ -15,35 +17,39 @@ export const Toggle = defineComponent({
     },
     emits: ["update:modelValue", "change"],
     setup(props, { emit, attrs }) {
-        return () => h("label", {
-            class: classNames("st-toggle", `st-toggle--${props.size}`, props.class),
-        }, [
-            h("span", { class: "st-toggle__row" }, [
+        return () => {
+            const isChecked = props.modelValue ?? props.checked ?? false;
+            return h("label", {
+                class: classNames("st-toggle", `st-toggle--${props.size}`, props.class),
+            }, [
                 h("span", { class: "st-toggle__label" }, props.label),
-                h("input", {
-                    ...attrs,
-                    class: "st-toggle__input",
-                    type: "checkbox",
-                    role: "switch",
-                    "aria-checked": props.modelValue ?? props.checked ?? undefined,
-                    checked: props.modelValue ?? props.checked,
-                    disabled: props.disabled,
-                    name: props.name,
-                    value: props.value,
-                    onChange: (event) => {
-                        const checked = event.target.checked;
-                        emit("update:modelValue", checked);
-                        emit("change", event);
-                    },
-                }),
-                h("span", { class: "st-toggle__track" }, [
-                    h("span", { class: "st-toggle__thumb" }),
+                h("span", { class: "st-toggle__row" }, [
+                    h("input", {
+                        ...attrs,
+                        class: "st-toggle__input",
+                        type: "checkbox",
+                        role: "switch",
+                        "aria-checked": isChecked ? "true" : "false",
+                        checked: isChecked,
+                        disabled: props.disabled,
+                        name: props.name,
+                        value: props.value,
+                        onChange: (event) => {
+                            const checked = event.target.checked;
+                            emit("update:modelValue", checked);
+                            emit("change", event);
+                        },
+                    }),
+                    h("span", { class: "st-toggle__track", "aria-hidden": "true" }, [
+                        h("span", { class: "st-toggle__thumb" }),
+                    ]),
+                    h("span", { class: "st-toggle__state", "aria-hidden": "true" }, isChecked ? props.labelOn : props.labelOff),
                 ]),
-            ]),
-            props.helperText
-                ? h("span", { class: "st-toggle__help" }, props.helperText)
-                : null,
-        ]);
+                props.helperText
+                    ? h("span", { class: "st-toggle__help" }, props.helperText)
+                    : null,
+            ]);
+        };
     },
 });
 //# sourceMappingURL=Toggle.js.map

package/dist/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../src/Toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB7C,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA6B,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC7E,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAA6B,EAAE,OAAO,EAAE,SAAS,EAAE;QACtF,IAAI,EAAE,EAAE,IAAI,EAAE,MAA0B,EAAE,OAAO,EAAE,IAAI,EAAE;QACzD,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE;QACjD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE;QAC9C,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE;QAC3C,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC1C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IACtC,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1B,OAAO,GAAG,EAAE,CACV,CAAC,CACC,OAAO,EACP;YACE,KAAK,EAAE,UAAU,CACf,WAAW,EACX,cAAc,KAAK,CAAC,IAAI,EAAE,EAC1B,KAAK,CAAC,KAAK,CACZ;SACF,EACD;YACE,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE;gBACrC,CAAC,CACC,MAAM,EACN,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAC7B,KAAK,CAAC,KAAe,CACtB;gBACD,CAAC,CAAC,OAAO,EAAE;oBACT,GAAG,KAAK;oBACR,KAAK,EAAE,kBAAkB;oBACzB,IAAI,EAAE,UAAU;oBAChB,IAAI,EAAE,QAAQ;oBACd,cAAc,EACZ,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO,IAAI,SAAS;oBAChD,OAAO,EAAE,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO;oBAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBACxB,IAAI,EAAE,KAAK,CAAC,IAAI;oBAChB,KAAK,EAAE,KAAK,CAAC,KAAK;oBAClB,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE;wBACzB,MAAM,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO,CAAC;wBAC3D,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;wBACnC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;oBACxB,CAAC;iBACF,CAAC;gBACF,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE;oBACvC,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,CAAC;iBACzC,CAAC;aACH,CAAC;YACF,KAAK,CAAC,UAAU;gBACd,CAAC,CAAC,CAAC,CACC,MAAM,EACN,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAC5B,KAAK,CAAC,UAAoB,CAC3B;gBACH,CAAC,CAAC,IAAI;SACT,CACF,CAAC;IACN,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../src/Toggle.ts"],"names":[],"mappings":"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"}

package/dist/Typography.d.ts

@@ -74,12 +74,12 @@ export declare const Typography: import("vue").DefineComponent<import("vue").Ext
         default: undefined;
     };
 }>> & Readonly<{}>, {
+    align: TypographyAlign;
     class: string;
     tone: TypographyTone;
     weight: TypographyWeight;
     variant: TypographyVariant;
     as: string;
-    align: TypographyAlign;
     truncate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //# sourceMappingURL=Typography.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-vue",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "Vue 3 components for the Sentropic design system.",
   "type": "module",
   "publishConfig": {