sit-onyx 1.4.0-dev-20251118111042 → 1.4.0

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

@@ -1,21 +1,28 @@
-import { SliderMode } from '../OnyxSlider/types.js';
-import { OnyxSliderControlProps } from './types.js';
 /**
  * @experimental
  * @deprecated This component is still under active development and its API might change in patch releases.
  */
-declare const _default: <TSliderMode extends SliderMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((value: number) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & OnyxSliderControlProps & Partial<{}>> & import('vue').PublicProps;
-    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {};
-    emit: (evt: "update:modelValue", value: number) => void;
-}>) => import('vue').VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
+declare const _default: import('vue').DefineComponent<(import('../../composables/density.js', { with: { "resolution-mode": "import" } }).DensityProp & import('./types.js', { with: { "resolution-mode": "import" } }).OnyxSliderControlValueProps & {
+    modelValue: number;
+    disabled?: boolean;
+}) | (import('../../composables/density.js', { with: { "resolution-mode": "import" } }).DensityProp & import('./types.js', { with: { "resolution-mode": "import" } }).OnyxSliderControlIconProps & {
+    modelValue: number;
+    disabled?: boolean;
+}) | (import('../../composables/density.js', { with: { "resolution-mode": "import" } }).DensityProp & import('./types.js', { with: { "resolution-mode": "import" } }).OnyxSliderControlInputProps & {
+    modelValue: number;
+    disabled?: boolean;
+}), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<(import('../../composables/density.js', { with: { "resolution-mode": "import" } }).DensityProp & import('./types.js', { with: { "resolution-mode": "import" } }).OnyxSliderControlValueProps & {
+    modelValue: number;
+    disabled?: boolean;
+}) | (import('../../composables/density.js', { with: { "resolution-mode": "import" } }).DensityProp & import('./types.js', { with: { "resolution-mode": "import" } }).OnyxSliderControlIconProps & {
+    modelValue: number;
+    disabled?: boolean;
+}) | (import('../../composables/density.js', { with: { "resolution-mode": "import" } }).DensityProp & import('./types.js', { with: { "resolution-mode": "import" } }).OnyxSliderControlInputProps & {
+    modelValue: number;
+    disabled?: boolean;
+})> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -1,48 +1,40 @@
 import { DensityProp } from '../../composables/density.js';
 export declare const SLIDER_CONTROLS: readonly ["icon", "value", "input"];
 export type SliderControl = (typeof SLIDER_CONTROLS)[number];
-export type OnyxSliderControlSharedProps = {
-    /**
-     * The type of control to render.
-     *
-     * - `value`: Renders a read-only display of the provided slider value.
-     * - `icon`: Renders an icon button for increasing or decreasing the slider value.
-     * - `input`: Renders an `<OnyxStepper />` component for direct value entry.
-     */
-    control: SliderControl;
-    /**
-     * Slider control model value
-     */
-    modelValue?: number;
-    /**
-     * The direction the icon button represents.
-     *
-     * - `decrease`: Decreases the slider value and renders a "minus" icon.
-     * - `increase`: Increases the slider value and renders a "plus" icon.
-     */
-    direction?: "increase" | "decrease";
-    /**
-     * `shiftStep` of associated slider. Used to determine the amount to increase/decrease the value by when the icon button is clicked.
-     */
-    shiftStep?: number;
-    /**
-     * Indicates whether the control is disabled.
-     */
-    disabled?: boolean;
-};
 export type OnyxSliderControlValueProps = {
     control: "value";
-    modelValue: number;
+    step?: never;
+    min?: never;
+    max?: never;
 };
 export type OnyxSliderControlIconProps = {
     control: "icon";
-    direction: "increase" | "decrease";
-    shiftStep: number;
-    disabled?: boolean;
+    direction: SliderControlDirection;
+    /**
+     * Step size to change value when clicking the icon button.
+     */
+    step: number;
+    min?: never;
+    max?: never;
 };
 export type OnyxSliderControlInputProps = {
     control: "input";
-    disabled?: boolean;
+    direction?: SliderControlDirection;
+    /**
+     * Step size to use for the stepper.
+     */
+    step: number;
+    min: number;
+    max: number;
+};
+export type SliderControlDirection = "increase" | "decrease";
+export type OnyxSliderControlProps = DensityProp & (OnyxSliderControlValueProps | OnyxSliderControlIconProps | OnyxSliderControlInputProps) & {
+    /**
+     * Current control value.
+     */
     modelValue: number;
+    /**
+     * Whether the control is disabled.
+     */
+    disabled?: boolean;
 };
-export type OnyxSliderControlProps = OnyxSliderControlSharedProps & DensityProp & (OnyxSliderControlValueProps | OnyxSliderControlIconProps | OnyxSliderControlInputProps);

package/dist/index.esm-bundler.js

@@ -13754,12 +13754,14 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   __name: "OnyxSliderControl",
   props: {
-    control: { type: String, required: true, default: "value" },
-    modelValue: { type: Number, required: false },
+    density: { type: null, required: false },
+    control: { type: String, required: true },
+    step: { type: null, required: false },
+    min: { type: null, required: false },
+    max: { type: null, required: false },
     direction: { type: String, required: false },
-    shiftStep: { type: Number, required: false },
-    disabled: { type: Boolean, required: false },
-    density: { type: null, required: false }
+    modelValue: { type: Number, required: true },
+    disabled: { type: Boolean, required: false }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -13774,16 +13776,16 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       key: "modelValue"
     });
     const handleIconClick = () => {
-      const currentValue = modelValue.value;
-      if (props.control !== "icon" || typeof currentValue !== "number") return;
-      const newValue = props.direction === "increase" ? currentValue + (props.shiftStep ?? 1) : currentValue - (props.shiftStep ?? 1);
-      modelValue.value = newValue;
+      if (props.control !== "icon") return;
+      const offset = props.direction === "increase" ? props.step : -props.step;
+      modelValue.value += offset;
     };
     const handleStepperChange = (value) => {
       if (value == void 0) return;
       modelValue.value = value;
     };
     const stepperLabel = computed(() => {
+      if (props.control !== "input") return t.value("slider.changeValue");
       if (props.direction === "increase") return t.value("slider.changeStartValue");
       else if (props.direction === "decrease") return t.value("slider.changeEndValue");
       return t.value("slider.changeValue");
@@ -13816,8 +13818,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
         ],
         64
         /* STABLE_FRAGMENT */
-      )) : createCommentVNode("v-if", true),
-      $setup.props.control === "icon" ? (openBlock(), createElementBlock(
+      )) : $setup.props.control === "icon" ? (openBlock(), createElementBlock(
         Fragment,
         { key: 1 },
         [
@@ -13825,7 +13826,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             disabled: $setup.props.disabled,
             color: "neutral",
-            label: $setup.t("slider.decreaseValueBy", { n: $setup.props.shiftStep }),
+            label: $setup.t("slider.decreaseValueBy", { n: $setup.props.step }),
             icon: $setup.iconMinusSmall,
             onClick: $setup.handleIconClick
           }, null, 8, ["disabled", "label", "icon"])) : createCommentVNode("v-if", true),
@@ -13833,23 +13834,25 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
             key: 1,
             disabled: $setup.props.disabled,
             color: "neutral",
-            label: $setup.t("slider.increaseValueBy", { n: $setup.props.shiftStep }),
+            label: $setup.t("slider.increaseValueBy", { n: $setup.props.step }),
             icon: $setup.iconPlusSmall,
             onClick: $setup.handleIconClick
           }, null, 8, ["disabled", "label", "icon"])) : createCommentVNode("v-if", true)
         ],
         64
         /* STABLE_FRAGMENT */
-      )) : createCommentVNode("v-if", true),
-      $setup.props.control === "input" ? (openBlock(), createBlock($setup["OnyxStepper"], {
+      )) : $setup.props.control === "input" ? (openBlock(), createBlock($setup["OnyxStepper"], {
         key: 2,
         label: $setup.stepperLabel,
         "hide-label": "",
         "hide-buttons": "",
         disabled: $setup.props.disabled,
         "model-value": $setup.props.modelValue,
+        "step-size": $setup.props.step,
+        min: $setup.props.min,
+        max: $setup.props.max,
         "onUpdate:modelValue": $setup.handleStepperChange
-      }, null, 8, ["label", "disabled", "model-value"])) : createCommentVNode("v-if", true)
+      }, null, 8, ["label", "disabled", "model-value", "step-size", "min", "max"])) : createCommentVNode("v-if", true)
     ],
     2
     /* CLASS */
@@ -13905,7 +13908,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const { min, max, step, label } = toRefs(props);
     const {
       elements: { root, track, thumbContainer, thumbInput, mark, markLabel },
-      state: { normalizedValue, marks, shiftStep },
+      state: { normalizedValue, marks },
       internals: { updateValue }
     } = _unstableCreateSlider({
       value: modelValue,
@@ -13918,13 +13921,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       shiftStep: toRef(props, "shiftStep"),
       onChange: (newValue) => modelValue.value = newValue
     });
-    const __returned__ = { props, emit, modelValue, vCustomValidity, errorMessages, formElementProps, messages, densityClass, disabled, showError, errorClass, skeleton, min, max, step, label, root, track, thumbContainer, thumbInput, mark, markLabel, normalizedValue, marks, shiftStep, updateValue, OnyxFormElement, OnyxSkeleton, OnyxSliderControl, OnyxTooltip, OnyxVisuallyHidden };
+    const __returned__ = { props, emit, modelValue, vCustomValidity, errorMessages, formElementProps, messages, densityClass, disabled, showError, errorClass, skeleton, min, max, step, label, root, track, thumbContainer, thumbInput, mark, markLabel, normalizedValue, marks, updateValue, OnyxFormElement, OnyxSkeleton, OnyxSliderControl, OnyxTooltip, OnyxVisuallyHidden };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }
 });
 const _hoisted_1$6 = { class: "onyx-slider__container" };
-const _hoisted_2$5 = ["id", "disabled", "aria-label", "autofocus"];
+const _hoisted_2$5 = ["id", "tabindex", "disabled", "aria-label", "autofocus"];
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return $setup.skeleton ? (openBlock(), createElementBlock(
     "div",
@@ -13965,18 +13968,21 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
               key: 1,
               control: "icon",
               direction: "decrease",
-              "shift-step": $setup.shiftStep,
+              step: $setup.props.step,
               "model-value": $setup.normalizedValue[0],
-              disabled: $setup.disabled || ($setup.normalizedValue[0] ?? $setup.props.min) <= $setup.props.min,
+              disabled: $setup.disabled || $setup.normalizedValue[0] <= $setup.props.min,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $setup.updateValue($event, 0))
-            }, null, 8, ["shift-step", "model-value", "disabled"])) : $setup.props.control === "input" && $setup.props.mode === "range" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
+            }, null, 8, ["step", "model-value", "disabled"])) : $setup.props.control === "input" && $setup.props.mode === "range" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
               key: 2,
               control: "input",
               direction: "increase",
+              "model-value": $setup.normalizedValue[0],
               disabled: $setup.disabled,
-              "model-value": $setup.normalizedValue[0] ?? 0,
+              step: $setup.props.step,
+              min: $setup.props.min,
+              max: $setup.props.max,
               "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => $setup.updateValue($event, 0))
-            }, null, 8, ["disabled", "model-value"])) : createCommentVNode("v-if", true),
+            }, null, 8, ["model-value", "disabled", "step", "min", "max"])) : createCommentVNode("v-if", true),
             createElementVNode(
               "span",
               mergeProps({ class: "onyx-slider__root" }, $setup.root),
@@ -14060,7 +14066,8 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                                     default: withCtx(() => [
                                       withDirectives(createElementVNode("input", mergeProps({
                                         id: index === 0 ? inputId : void 0,
-                                        class: "onyx-slider__native"
+                                        class: "onyx-slider__native",
+                                        tabindex: $setup.props.control === "input" ? -1 : void 0
                                       }, { ref_for: true }, $setup.thumbInput({ value, index }), {
                                         disabled: $setup.disabled,
                                         "aria-label": $setup.props.label,
@@ -14103,17 +14110,21 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
               key: 4,
               control: "icon",
               direction: "increase",
-              "shift-step": $setup.shiftStep,
+              step: $setup.props.step,
               "model-value": $setup.normalizedValue[0],
+              disabled: $setup.disabled || $setup.normalizedValue[0] >= $setup.props.max,
               "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => $setup.updateValue($event, 0))
-            }, null, 8, ["shift-step", "model-value"])) : $setup.props.control === "input" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
+            }, null, 8, ["step", "model-value", "disabled"])) : $setup.props.control === "input" ? (openBlock(), createBlock($setup["OnyxSliderControl"], {
               key: 5,
               control: "input",
               direction: $setup.props.mode === "range" ? "decrease" : void 0,
+              "model-value": $setup.normalizedValue[1] ?? $setup.normalizedValue[0],
               disabled: $setup.disabled,
-              "model-value": $setup.normalizedValue[1] ?? $setup.normalizedValue[0] ?? 0,
+              step: $setup.props.step,
+              min: $setup.props.min,
+              max: $setup.props.max,
               "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $setup.updateValue($event, $setup.props.mode === "range" ? 1 : 0))
-            }, null, 8, ["direction", "disabled", "model-value"])) : createCommentVNode("v-if", true)
+            }, null, 8, ["direction", "model-value", "disabled", "step", "min", "max"])) : createCommentVNode("v-if", true)
           ])
         ]),
         _: 1