@sentropic/design-system-vue 0.38.1 → 0.41.0-next.1

package/dist/vapor/SideNav.vue.d.ts

@@ -0,0 +1,5 @@
+import type Classic from '../SideNav.vue.js';
+import type { VaporSfc } from './sfc.js';
+declare const component: VaporSfc<typeof Classic>;
+export default component;
+export type * from '../SideNav.vue.js';

package/dist/vapor/SideNav.vue.js

@@ -0,0 +1,42 @@
+import { defineVaporComponent as _defineVaporComponent } from 'vue';
+import { unref as _unref, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, setInsertionState as _setInsertionState, setClass as _setClass, createSlot as _createSlot, toDisplayString as _toDisplayString, setText as _setText, createIf as _createIf, setProp as _setProp, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template(" ");
+const t1 = _template("<a>");
+const t2 = _template("<nav>", 1);
+const k0 = ["aria-label"];
+import { scalarContent } from '../slotContent.js';
+import { classNames } from '../classNames.js';
+export default /*@__PURE__*/ _defineVaporComponent({
+    ...{ name: 'SideNav', inheritAttrs: false },
+    __name: 'SideNav',
+    props: {
+        items: { type: Array, required: true },
+        label: { type: String, required: false, default: 'Navigation' },
+        class: { type: String, required: false, default: undefined }
+    },
+    setup(__props, { attrs: $attrs, slots: $slots }) {
+        const props = __props;
+        const n8 = t2();
+        _renderEffect(() => {
+            const _props = props;
+            _setDynamicProps(n8, [{ ...($attrs), class: (_unref(classNames)('st-sidenav st-sideNav', _props.class)) }, { "aria-label": _props.label }], k0);
+        });
+        _setInsertionState(n8);
+        const n0 = _createFor(() => (props.items), (_for_item0) => {
+            const n7 = t1();
+            _renderEffect(() => _setClass(n7, _unref(classNames)('st-sidenav__link st-sideNav__link', _for_item0.value.active && 'st-sidenav__link--active st-sideNav__link--active')));
+            _setInsertionState(n7);
+            const n2 = _createIf(() => ($slots['item-label']), () => {
+                const n4 = _createSlot("item-label", { item: () => (_for_item0.value) });
+                return n4;
+            }, () => {
+                const n6 = t0();
+                _renderEffect(() => _setText(n6, _toDisplayString(_unref(scalarContent)(_for_item0.value.label))));
+                return n6;
+            }, 265 /* TRUE_SINGLE_ROOT, FALSE_MULTI_ROOT, KEYED_INDEX_0 */);
+            _setProp(n7, "href", _for_item0.value.href);
+            return n7;
+        }, (item) => (item.href), 9 /* FAST_REMOVE, IS_SINGLE_NODE */);
+        return n8;
+    }
+});

package/dist/vapor/SkeletonText.vue.d.ts

@@ -0,0 +1,5 @@
+import type Classic from '../SkeletonText.vue.js';
+import type { VaporSfc } from './sfc.js';
+declare const component: VaporSfc<typeof Classic>;
+export default component;
+export type * from '../SkeletonText.vue.js';

package/dist/vapor/SkeletonText.vue.js

@@ -0,0 +1,48 @@
+import { defineVaporComponent as _defineVaporComponent } from 'vue';
+import { unref as _unref, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, setInsertionState as _setInsertionState, setClass as _setClass, setStyle as _setStyle, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template("<span>");
+const t1 = _template("<div>", 1);
+const k0 = ["aria-label"];
+import { computed } from 'vue';
+import { classNames } from '../classNames.js';
+export default /*@__PURE__*/ _defineVaporComponent({
+    ...{ name: 'SkeletonText', inheritAttrs: false },
+    __name: 'SkeletonText',
+    props: {
+        lines: { type: Number, required: false, default: 1 },
+        width: { type: String, required: false, default: undefined },
+        heading: { type: Boolean, required: false, default: false },
+        paragraph: { type: Boolean, required: false, default: false },
+        locale: { type: String, required: false, default: 'fr-FR' },
+        loadingLabel: { type: String, required: false, default: undefined },
+        class: { type: String, required: false, default: undefined }
+    },
+    setup(__props, { attrs: $attrs }) {
+        const props = __props;
+        const isFr = computed(() => (props.locale ?? 'fr-FR').toLowerCase().startsWith('fr'));
+        const resolvedLoadingLabel = computed(() => props.loadingLabel ?? (isFr.value ? 'Chargement…' : 'Loading…'));
+        const lineCount = computed(() => (props.paragraph ? Math.max(props.lines ?? 1, 3) : props.lines ?? 1));
+        const lineIndices = computed(() => Array.from({ length: lineCount.value }, (_, i) => i));
+        function lineWidth(index) {
+            if (props.width && index === 0)
+                return props.width;
+            if (props.paragraph && index === lineCount.value - 1)
+                return '60%';
+            return undefined;
+        }
+        const n3 = t1();
+        _renderEffect(() => _setDynamicProps(n3, [{ ...($attrs), class: (_unref(classNames)('st-skeleton', props.class)) }, { role: "status", "aria-label": resolvedLoadingLabel.value, "aria-busy": "true" }], k0));
+        _setInsertionState(n3);
+        const n0 = _createFor(() => (lineIndices.value), (_for_item0) => {
+            const n2 = t0();
+            _renderEffect(() => {
+                const _lineWidth = lineWidth;
+                const _index = _for_item0.value;
+                _setClass(n2, _unref(classNames)('st-skeleton__line', props.heading && 'st-skeleton__line--heading'));
+                _setStyle(n2, _lineWidth(_index) ? `width:${_lineWidth(_index)}` : undefined);
+            });
+            return n2;
+        }, (index) => (index), 9 /* FAST_REMOVE, IS_SINGLE_NODE */);
+        return n3;
+    }
+});

package/dist/vapor/SkipLink.vue.d.ts

@@ -0,0 +1,5 @@
+import type Classic from '../SkipLink.vue.js';
+import type { VaporSfc } from './sfc.js';
+declare const component: VaporSfc<typeof Classic>;
+export default component;
+export type * from '../SkipLink.vue.js';

package/dist/vapor/SkipLink.vue.js

@@ -0,0 +1,31 @@
+import { defineVaporComponent as _defineVaporComponent } from 'vue';
+import { unref as _unref, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, setInsertionState as _setInsertionState, createSlot as _createSlot, createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("Skip to content", 2);
+const t1 = _template("<a>", 1);
+const k0 = ["href"];
+import { classNames } from '../classNames.js';
+export default /*@__PURE__*/ _defineVaporComponent({
+    ...{ name: 'SkipLink', inheritAttrs: false },
+    __name: 'SkipLink',
+    props: {
+        href: { type: String, required: false, default: '#main' },
+        class: { type: String, required: false, default: undefined }
+    },
+    setup(__props, { attrs: $attrs, slots: $slots }) {
+        const props = __props;
+        const n5 = t1();
+        _renderEffect(() => {
+            const _props = props;
+            _setDynamicProps(n5, [{ ...($attrs), class: (_unref(classNames)('st-skipLink', _props.class)) }, { href: _props.href }], k0);
+        });
+        _setInsertionState(n5);
+        const n0 = _createIf(() => ($slots.default), () => {
+            const n2 = _createSlot();
+            return n2;
+        }, () => {
+            const n4 = t0();
+            return n4;
+        }, 329 /* TRUE_SINGLE_ROOT, FALSE_MULTI_ROOT, FALSE_NO_SCOPE, KEYED_INDEX_0 */);
+        return n5;
+    }
+});

package/dist/vapor/SlideIndicator.vue.d.ts

@@ -0,0 +1,5 @@
+import type Classic from '../SlideIndicator.vue.js';
+import type { VaporSfc } from './sfc.js';
+declare const component: VaporSfc<typeof Classic>;
+export default component;
+export type * from '../SlideIndicator.vue.js';

package/dist/vapor/SlideIndicator.vue.js

@@ -0,0 +1,92 @@
+import { defineVaporComponent as _defineVaporComponent } from 'vue';
+import { createTemplateRefSetter as _createTemplateRefSetter, unref as _unref, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, setInsertionState as _setInsertionState, createSelector as _createSelector, on as _on, setClass as _setClass, setAttr as _setAttr, setProp as _setProp, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template("<button type=button>");
+const t1 = _template("<div>", 1);
+const k0 = ["aria-label"];
+import { computed, ref } from 'vue';
+import { classNames } from '../classNames.js';
+export default /*@__PURE__*/ _defineVaporComponent({
+    ...{ name: 'SlideIndicator', inheritAttrs: false },
+    __name: 'SlideIndicator',
+    props: {
+        count: { type: Number, required: true },
+        current: { type: Number, required: false, default: 0 },
+        onChange: { type: Function, required: false, default: undefined },
+        size: { type: String, required: false, default: 'md' },
+        variant: { type: String, required: false, default: 'dots' },
+        label: { type: String, required: false, default: 'Diapositive' },
+        class: { type: String, required: false, default: undefined }
+    },
+    emits: ["change", "update:modelValue"],
+    setup(__props, { emit: __emit, attrs: $attrs }) {
+        const props = __props;
+        const emit = __emit;
+        // Refs des boutons pour déplacer le focus DOM programmatiquement (roving).
+        const buttonRefs = ref({});
+        const current = computed(() => props.current ?? 0);
+        const items = computed(() => Array.from({ length: Math.max(0, props.count) }, (_, i) => i));
+        function setButtonRef(el, index) {
+            buttonRefs.value[index] = el;
+        }
+        function select(index) {
+            if (index < 0 || index >= props.count || index === current.value)
+                return;
+            emit('update:modelValue', index);
+            emit('change', index);
+        }
+        function onKeyDown(event, index) {
+            let target = index;
+            switch (event.key) {
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    target = Math.min(props.count - 1, index + 1);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    target = Math.max(0, index - 1);
+                    break;
+                case 'Home':
+                    target = 0;
+                    break;
+                case 'End':
+                    target = props.count - 1;
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            const targetEl = buttonRefs.value[target];
+            if (targetEl)
+                targetEl.focus();
+            select(target);
+        }
+        const _setTemplateRef = _createTemplateRefSetter();
+        const n3 = t1();
+        _renderEffect(() => {
+            const _props = props;
+            _setDynamicProps(n3, [{ ...($attrs), class: (_unref(classNames)('st-slideIndicator', `st-slideIndicator--${_props.size}`, `st-slideIndicator--${_props.variant}`, _props.class)) }, { role: "group", "aria-label": _props.label }], k0);
+        });
+        _setInsertionState(n3);
+        const _selector0 = _createSelector(() => current.value);
+        const n0 = _createFor(() => (items.value), (_for_item0) => {
+            const n2 = t0();
+            _on(n2, "click", () => select(_for_item0.value));
+            _on(n2, "keydown", (event) => onKeyDown(event, _for_item0.value));
+            let _index, _current;
+            _renderEffect(() => {
+                _index = _for_item0.value;
+                _current = current.value;
+                _setClass(n2, _unref(classNames)('st-slideIndicator__dot', _index === _current && 'st-slideIndicator__dot--current'));
+                _setAttr(n2, "aria-current", _index === _current ? 'true' : undefined);
+                _setAttr(n2, "aria-label", `${props.label} ${_index + 1}`);
+                _setTemplateRef(n2, (el) => setButtonRef(el, _index), true);
+            });
+            _selector0(_index, () => {
+                _setProp(n2, "tabindex", _index === _current ? 0 : -1);
+            });
+            return n2;
+        }, (index) => (index), 9 /* FAST_REMOVE, IS_SINGLE_NODE */);
+        n0.onReset(_selector0.reset);
+        return n3;
+    }
+});

package/dist/vapor/Slider.vue.d.ts

@@ -0,0 +1,5 @@
+import type Classic from '../Slider.vue.js';
+import type { VaporSfc } from './sfc.js';
+declare const component: VaporSfc<typeof Classic>;
+export default component;
+export type * from '../Slider.vue.js';

package/dist/vapor/Slider.vue.js

@@ -0,0 +1,128 @@
+import { defineVaporComponent as _defineVaporComponent } from 'vue';
+import { child as _child, unref as _unref, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, setInsertionState as _setInsertionState, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createIf as _createIf, next as _next, setClass as _setClass, setStyle as _setStyle, on as _on, setAttr as _setAttr, setProp as _setProp, setValue as _setValue, template as _template } from 'vue';
+const t0 = _template("<span class=st-field__label> ");
+const t1 = _template("<output class=st-slider__value aria-live=polite> ");
+const t2 = _template("<span class=st-slider__tooltip> ");
+const t3 = _template("<span class=st-field__error> ");
+const t4 = _template("<span class=st-field__help> ");
+const t5 = _template("<div><div class=st-slider__header></div><span><span class=st-slider__bounds aria-hidden=true> </span><span class=st-slider__track><span class=st-slider__fill></span><span class=st-slider__thumb aria-hidden=true></span><input class=st-slider__input type=range></span><span class=st-slider__bounds aria-hidden=true> </span></span>", 1);
+import { computed, ref } from 'vue';
+import { classNames } from '../classNames.js';
+export default /*@__PURE__*/ _defineVaporComponent({
+    ...{ name: 'Slider', inheritAttrs: false },
+    __name: 'Slider',
+    props: {
+        label: { type: String, required: false, default: undefined },
+        size: { type: String, required: false, default: 'md' },
+        value: { type: Number, required: false, default: undefined },
+        defaultValue: { type: Number, required: false, default: undefined },
+        min: { type: Number, required: false, default: 0 },
+        max: { type: Number, required: false, default: 100 },
+        step: { type: Number, required: false, default: 1 },
+        modelValue: { type: Number, required: false, default: undefined },
+        helperText: { type: String, required: false, default: undefined },
+        errorText: { type: String, required: false, default: undefined },
+        invalid: { type: Boolean, required: false, default: false },
+        showValue: { type: Boolean, required: false, default: true },
+        valueFormatter: { type: Function, required: false, default: undefined },
+        disabled: { type: Boolean, required: false, default: false },
+        class: { type: String, required: false, default: undefined }
+    },
+    emits: ["update:modelValue", "change"],
+    setup(__props, { emit: __emit, attrs: $attrs }) {
+        const props = __props;
+        const emit = __emit;
+        const seed = props.modelValue ?? props.value ?? props.defaultValue ?? props.min;
+        const internal = ref(Number.isFinite(Number(seed)) ? Number(seed) : props.min);
+        const controlled = computed(() => props.modelValue !== undefined || props.value !== undefined);
+        const min = computed(() => props.min);
+        const max = computed(() => props.max);
+        const safe = computed(() => {
+            const raw = controlled.value ? (props.modelValue ?? props.value ?? min.value) : internal.value;
+            if (!Number.isFinite(Number(raw)))
+                return min.value;
+            if (Number(raw) < min.value)
+                return min.value;
+            if (Number(raw) > max.value)
+                return max.value;
+            return Number(raw);
+        });
+        const percent = computed(() => (max.value === min.value ? 0 : ((safe.value - min.value) / (max.value - min.value)) * 100));
+        const formatted = computed(() => (props.valueFormatter ? props.valueFormatter(safe.value) : String(safe.value)));
+        const isInvalid = computed(() => props.invalid || Boolean(props.errorText));
+        function onInput(event) {
+            const val = Number(event.target.value);
+            if (Number.isFinite(val)) {
+                if (!controlled.value)
+                    internal.value = val;
+                emit('update:modelValue', val);
+                emit('change', val);
+            }
+        }
+        const n21 = t5();
+        const n6 = _child(n21);
+        const n15 = _next(n6);
+        const n7 = _child(n15);
+        let p0 = _next(n7);
+        const n8 = _child(p0);
+        const n12 = _next(n8);
+        const n13 = _next(n12);
+        const n14 = _next(p0);
+        _renderEffect(() => _setDynamicProps(n21, [{ ...($attrs), class: (_unref(classNames)('st-field', props.class)) }]));
+        _setInsertionState(n6);
+        const n0 = _createIf(() => (props.label), () => {
+            const n2 = t0();
+            const x2 = _txt(n2);
+            _renderEffect(() => _setText(x2, _toDisplayString(props.label)));
+            return n2;
+        });
+        _setInsertionState(n6, 1);
+        const n3 = _createIf(() => (props.showValue), () => {
+            const n5 = t1();
+            const x5 = _txt(n5);
+            _renderEffect(() => _setText(x5, _toDisplayString(formatted.value)));
+            return n5;
+        });
+        const x7 = _txt(n7);
+        _renderEffect(() => {
+            const _percent = percent.value;
+            _setClass(n15, _unref(classNames)('st-slider', `st-slider--${props.size}`));
+            _setText(x7, _toDisplayString(String(min.value)));
+            _setStyle(n8, `--st-slider-fill: ${_percent}%`);
+            _setStyle(n12, `left: ${_percent}%`);
+        });
+        _setInsertionState(n12);
+        const n9 = _createIf(() => (props.showValue), () => {
+            const n11 = t2();
+            const x11 = _txt(n11);
+            _renderEffect(() => _setText(x11, _toDisplayString(formatted.value)));
+            return n11;
+        });
+        _on(n13, "input", onInput);
+        const x14 = _txt(n14);
+        _renderEffect(() => {
+            const _props = props;
+            _setAttr(n13, "aria-label", _props.label);
+            _setAttr(n13, "aria-invalid", isInvalid.value ? 'true' : undefined);
+            _setProp(n13, "min", _props.min);
+            _setProp(n13, "max", _props.max);
+            _setProp(n13, "step", _props.step);
+            _setProp(n13, "disabled", _props.disabled);
+            _setValue(n13, safe.value);
+            _setText(x14, _toDisplayString(String(max.value)));
+        });
+        _setInsertionState(n21, 2);
+        const n16 = _createIf(() => (props.errorText), () => {
+            const n18 = t3();
+            const x18 = _txt(n18);
+            _renderEffect(() => _setText(x18, _toDisplayString(props.errorText)));
+            return n18;
+        }, () => _createIf(() => (props.helperText), () => {
+            const n20 = t4();
+            const x20 = _txt(n20);
+            _renderEffect(() => _setText(x20, _toDisplayString(props.helperText)));
+            return n20;
+        }), 1037 /* TRUE_SINGLE_ROOT, FALSE_ELSE_IF, KEYED_INDEX_3 */);
+        return n21;
+    }
+});

package/dist/vapor/SolidGaugeChart.vue.d.ts

@@ -0,0 +1,5 @@
+import type Classic from '../SolidGaugeChart.vue.js';
+import type { VaporSfc } from './sfc.js';
+declare const component: VaporSfc<typeof Classic>;
+export default component;
+export type * from '../SolidGaugeChart.vue.js';

package/dist/vapor/SolidGaugeChart.vue.js

@@ -0,0 +1,164 @@
+import { defineVaporComponent as _defineVaporComponent } from 'vue';
+import { child as _child, next as _next, unref as _unref, setDynamicProps as _setDynamicProps, setAttr as _setAttr, renderEffect as _renderEffect, setInsertionState as _setInsertionState, setClass as _setClass, createIf as _createIf, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
+const t0 = _template("<path fill=none>", 0, 1);
+const t1 = _template("<text class=st-solidGaugeChart__label text-anchor=middle dominant-baseline=hanging> ", 0, 1);
+const t2 = _template("<li> ");
+const t3 = _template("<ul class=st-chartDataList>");
+const t4 = _template("<div><div class=st-solidGaugeChart__visual role=meter><svg width=100% height=100% focusable=false aria-hidden=true><path class=st-solidGaugeChart__track fill=none></path><!><text class=st-solidGaugeChart__value text-anchor=middle dominant-baseline=auto> </text></div>", 1);
+import { computed } from 'vue';
+import { classNames } from '../classNames.js';
+export default /*@__PURE__*/ _defineVaporComponent({
+    ...{ name: 'SolidGaugeChart', inheritAttrs: false },
+    __name: 'SolidGaugeChart',
+    props: {
+        value: { type: Number, required: true },
+        min: { type: Number, required: false, default: 0 },
+        max: { type: Number, required: false, default: 100 },
+        thresholds: { type: Array, required: false, default: undefined },
+        innerRadius: { type: Number, required: false, default: 0.72 },
+        label: { type: String, required: false, default: undefined },
+        format: { type: String, required: false, default: 'number' },
+        unit: { type: String, required: false, default: undefined },
+        size: { type: Number, required: false, default: 220 },
+        startAngle: { type: Number, required: false, default: 180 },
+        endAngle: { type: Number, required: false, default: 360 },
+        class: { type: String, required: false, default: undefined }
+    },
+    setup(__props, { attrs: $attrs }) {
+        const toRad = (deg) => (deg * Math.PI) / 180;
+        const polar = (radius, angle, centerX, centerY) => [centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle)];
+        const props = __props;
+        const value = computed(() => props.value);
+        const min = computed(() => props.min ?? 0);
+        const max = computed(() => props.max ?? 100);
+        const thresholds = computed(() => props.thresholds);
+        const innerRadius = computed(() => props.innerRadius ?? 0.72);
+        const label = computed(() => props.label);
+        const format = computed(() => props.format ?? 'number');
+        const unit = computed(() => props.unit);
+        const size = computed(() => props.size ?? 220);
+        const startAngle = computed(() => props.startAngle ?? 180);
+        const endAngle = computed(() => props.endAngle ?? 360);
+        const span = computed(() => Math.max(max.value - min.value, 0));
+        const clamped = computed(() => Math.min(Math.max(value.value, min.value), max.value));
+        const frac = computed(() => (span.value > 0 ? (clamped.value - min.value) / span.value : 0));
+        const cx = computed(() => size.value / 2);
+        const r = computed(() => size.value / 2 - 2);
+        const innerR = computed(() => Math.min(Math.max(innerRadius.value, 0), 0.95) * r.value);
+        const thickness = computed(() => Math.max(r.value - innerR.value, 1));
+        const trackR = computed(() => (r.value + innerR.value) / 2);
+        const a0 = computed(() => toRad(startAngle.value));
+        const a1 = computed(() => toRad(endAngle.value));
+        const totalAngle = computed(() => a1.value - a0.value);
+        const geometry = computed(() => {
+            const cyRaw = size.value / 2;
+            const samples = 64;
+            let minY = Infinity;
+            let maxY = -Infinity;
+            for (let i = 0; i <= samples; i++) {
+                const a = a0.value + (totalAngle.value * i) / samples;
+                const yOuter = cyRaw + r.value * Math.sin(a);
+                minY = Math.min(minY, yOuter);
+                maxY = Math.max(maxY, yOuter);
+            }
+            minY = Math.min(minY, cyRaw - r.value);
+            const vbHeightRaw = Math.min(maxY, size.value) - Math.max(minY, 0);
+            return { cy: cyRaw, vbTop: Math.max(minY, 0), vbHeight: Math.max(vbHeightRaw, thickness.value) };
+        });
+        const cy = computed(() => geometry.value.cy);
+        function arcPath(fromFrac, toFrac) {
+            const from = a0.value + totalAngle.value * fromFrac;
+            const to = a0.value + totalAngle.value * toFrac;
+            const [x0, y0] = polar(trackR.value, from, cx.value, cy.value);
+            const [x1, y1] = polar(trackR.value, to, cx.value, cy.value);
+            const large = Math.abs(to - from) > Math.PI ? 1 : 0;
+            const sweep = totalAngle.value >= 0 ? 1 : 0;
+            return `M ${x0} ${y0} A ${trackR.value} ${trackR.value} 0 ${large} ${sweep} ${x1} ${y1}`;
+        }
+        const sortedThresholds = computed(() => thresholds.value && thresholds.value.length > 0 && span.value > 0
+            ? [...thresholds.value].sort((a, b) => a.value - b.value)
+            : []);
+        const activeTone = computed(() => {
+            if (sortedThresholds.value.length === 0)
+                return null;
+            let tone = sortedThresholds.value[0].tone;
+            for (const t of sortedThresholds.value) {
+                if (clamped.value >= t.value)
+                    tone = t.tone;
+            }
+            return tone;
+        });
+        const formatted = computed(() => {
+            if (format.value === 'percent') {
+                const pct = span.value > 0 ? Math.round(frac.value * 100) : 0;
+                return `${pct}%`;
+            }
+            const num = Number.isInteger(clamped.value) ? String(clamped.value) : clamped.value.toFixed(1);
+            return unit.value ? `${num} ${unit.value}` : num;
+        });
+        const ariaValueText = computed(() => (label.value ? `${label.value}: ${formatted.value}` : formatted.value));
+        const dataValueItems = computed(() => [`${label.value ? `${label.value}: ` : ''}${formatted.value} (min ${min.value}, max ${max.value})`]);
+        const progressClass = computed(() => activeTone.value
+            ? `st-solidGaugeChart__progress st-solidGaugeChart__progress--${activeTone.value}`
+            : 'st-solidGaugeChart__progress');
+        const n17 = t4();
+        const n10 = _child(n17);
+        const n9 = _child(n10);
+        const n0 = _child(n9);
+        const n8 = _next(n0);
+        const n4 = _next(n8);
+        _renderEffect(() => {
+            const _geometry = geometry.value;
+            _setDynamicProps(n17, [{ ...($attrs), class: (_unref(classNames)('st-solidGaugeChart', props.class)) }]);
+            _setAttr(n10, "aria-valuenow", clamped.value);
+            _setAttr(n10, "aria-valuemin", min.value);
+            _setAttr(n10, "aria-valuemax", max.value);
+            _setAttr(n10, "aria-valuetext", ariaValueText.value);
+            _setAttr(n10, "aria-label", label.value);
+            _setAttr(n9, "viewBox", `0 ${_geometry.vbTop} ${size.value} ${_geometry.vbHeight}`, true);
+            _setAttr(n0, "d", arcPath(0, 1), true);
+            _setAttr(n0, "stroke-width", thickness.value, true);
+        });
+        _setInsertionState(n9, n8);
+        const n1 = _createIf(() => (frac.value > 0), () => {
+            const n3 = t0();
+            _renderEffect(() => {
+                _setClass(n3, progressClass.value, true);
+                _setAttr(n3, "d", arcPath(0, frac.value), true);
+                _setAttr(n3, "stroke-width", thickness.value, true);
+            });
+            return n3;
+        });
+        const x4 = _txt(n4);
+        _renderEffect(() => {
+            _setAttr(n4, "x", cx.value, true);
+            _setAttr(n4, "y", cy.value - thickness.value * 0.1, true);
+            _setText(x4, _toDisplayString(formatted.value));
+        });
+        _setInsertionState(n9, 3);
+        const n5 = _createIf(() => (label.value), () => {
+            const n7 = t1();
+            const x7 = _txt(n7);
+            _renderEffect(() => {
+                _setAttr(n7, "x", cx.value, true);
+                _setAttr(n7, "y", cy.value + thickness.value * 0.35, true);
+                _setText(x7, _toDisplayString(label.value));
+            });
+            return n7;
+        });
+        _setInsertionState(n17, 1);
+        const n11 = _createIf(() => (dataValueItems.value.length > 0), () => {
+            const n16 = t3();
+            _renderEffect(() => _setAttr(n16, "aria-label", `Data values for ${label.value ?? 'gauge'}`));
+            _setInsertionState(n16);
+            const n13 = _createFor(() => (dataValueItems.value), (_for_item0, _for_key0) => {
+                const n15 = t2();
+                const x15 = _txt(n15);
+                _renderEffect(() => _setText(x15, _toDisplayString(_for_item0.value)));
+                return n15;
+            }, (item, i) => (i), 9 /* FAST_REMOVE, IS_SINGLE_NODE */);
+            return n16;
+        });
+        return n17;
+    }
+});

package/dist/vapor/Sparkline.vue.d.ts

@@ -0,0 +1,5 @@
+import type Classic from '../Sparkline.vue.js';
+import type { VaporSfc } from './sfc.js';
+declare const component: VaporSfc<typeof Classic>;
+export default component;
+export type * from '../Sparkline.vue.js';

package/dist/vapor/Sparkline.vue.js

@@ -0,0 +1,100 @@
+import { defineVaporComponent as _defineVaporComponent } from 'vue';
+import { child as _child, unref as _unref, setDynamicProps as _setDynamicProps, setAttr as _setAttr, renderEffect as _renderEffect, setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue';
+const t0 = _template("<path class=st-sparkline__area>", 0, 1);
+const t1 = _template("<path class=st-sparkline__line fill=none stroke-linecap=round stroke-linejoin=round>", 0, 1);
+const t2 = _template("<span><svg preserveAspectRatio=none focusable=false>", 1);
+const k0 = ["aria-label"];
+import { computed } from 'vue';
+import { classNames } from '../classNames.js';
+const PADDING = 2;
+export default /*@__PURE__*/ _defineVaporComponent({
+    ...{ name: 'Sparkline', inheritAttrs: false },
+    __name: 'Sparkline',
+    props: {
+        data: { type: Array, required: true },
+        width: { type: Number, required: false, default: 120 },
+        height: { type: Number, required: false, default: 28 },
+        tone: { type: String, required: false, default: 'neutral' },
+        strokeWidth: { type: Number, required: false, default: 1.5 },
+        area: { type: Boolean, required: false, default: false },
+        label: { type: String, required: false, default: undefined },
+        class: { type: String, required: false, default: undefined }
+    },
+    setup(__props, { attrs: $attrs }) {
+        const props = __props;
+        const width = computed(() => props.width ?? 120);
+        const height = computed(() => props.height ?? 28);
+        const tone = computed(() => props.tone ?? 'neutral');
+        const strokeWidth = computed(() => props.strokeWidth ?? 1.5);
+        const area = computed(() => props.area ?? false);
+        const label = computed(() => props.label);
+        const line = computed(() => {
+            const data = props.data;
+            if (!data || data.length === 0)
+                return '';
+            const min = Math.min(...data);
+            const max = Math.max(...data);
+            const span = max - min || 1;
+            const innerWidth = Math.max(width.value - PADDING * 2, 1);
+            const innerHeight = Math.max(height.value - PADDING * 2, 1);
+            const step = data.length > 1 ? innerWidth / (data.length - 1) : 0;
+            const pts = data.map((value, index) => {
+                const x = PADDING + step * index;
+                const normalised = (value - min) / span;
+                const y = PADDING + (1 - normalised) * innerHeight;
+                return { x, y };
+            });
+            return pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ');
+        });
+        const areaPath = computed(() => {
+            const data = props.data;
+            if (!data || data.length === 0)
+                return '';
+            const min = Math.min(...data);
+            const max = Math.max(...data);
+            const span = max - min || 1;
+            const innerWidth = Math.max(width.value - PADDING * 2, 1);
+            const innerHeight = Math.max(height.value - PADDING * 2, 1);
+            const step = data.length > 1 ? innerWidth / (data.length - 1) : 0;
+            const pts = data.map((value, index) => {
+                const x = PADDING + step * index;
+                const normalised = (value - min) / span;
+                const y = PADDING + (1 - normalised) * innerHeight;
+                return { x, y };
+            });
+            const baseline = height.value - PADDING;
+            const first = pts[0];
+            const last = pts[pts.length - 1];
+            const l = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(' ');
+            return `${l} L${last.x.toFixed(2)},${baseline.toFixed(2)} L${first.x.toFixed(2)},${baseline.toFixed(2)} Z`;
+        });
+        const n7 = t2();
+        const n6 = _child(n7);
+        _renderEffect(() => {
+            const _label = label.value;
+            const _width = width.value;
+            const _height = height.value;
+            _setDynamicProps(n7, [{ ...($attrs), class: (_unref(classNames)('st-sparkline', `st-sparkline--${tone.value}`, props.class)) }, { role: "img", "aria-label": _label }], k0);
+            _setAttr(n6, "width", _width, true);
+            _setAttr(n6, "height", _height, true);
+            _setAttr(n6, "viewBox", `0 0 ${_width} ${_height}`, true);
+            _setAttr(n6, "aria-hidden", _label ? 'true' : undefined, true);
+        });
+        _setInsertionState(n6);
+        const n0 = _createIf(() => (area.value && areaPath.value), () => {
+            const n2 = t0();
+            _renderEffect(() => _setAttr(n2, "d", areaPath.value, true));
+            return n2;
+        });
+        _setInsertionState(n6, 1);
+        const n3 = _createIf(() => (line.value), () => {
+            const n5 = t1();
+            _renderEffect(() => {
+                _setAttr(n5, "d", line.value, true);
+                _setAttr(n5, "stroke-width", strokeWidth.value, true);
+            });
+            return n5;
+        });
+        return n7;
+    }
+});