@tedi-design-system/react 17.0.0 → 17.1.0-rc.2

package/src/tedi/components/form/select/select.es.js

@@ -1,163 +1,165 @@
-import { jsx as s, jsxs as h } from "react/jsx-runtime";
-import ge from "../../../../../external/classnames/index.es.js";
-import p, { forwardRef as Se } from "react";
-import Me from "../../../../../external/react-select/dist/react-select.esm.es.js";
-import be from "../../../../../external/react-select/async/dist/react-select-async.esm.es.js";
-import { FeedbackText as Ie } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as Oe } from "../form-label/form-label.es.js";
-import { SelectClearIndicator as Ce } from "./components/select-clear-indicator.es.js";
-import { SelectControl as ve } from "./components/select-control.es.js";
-import { SelectDropDownIndicator as Le } from "./components/select-dropdown-indicator.es.js";
-import { SelectGroup as he } from "./components/select-group.es.js";
-import { SelectGroupHeading as ye } from "./components/select-group-heading.es.js";
-import { SelectIndicatorsContainer as Ne } from "./components/select-indicators-container.es.js";
-import { SelectInput as Ve } from "./components/select-input.es.js";
-import { SelectLoadingIndicator as Re } from "./components/select-loading-indicator.es.js";
-import { SelectMenu as we } from "./components/select-menu.es.js";
-import { SelectMenuList as _e } from "./components/select-menu-list.es.js";
-import { SelectMenuPortal as $e } from "./components/select-menu-portal.es.js";
-import { SelectMultiValue as xe } from "./components/select-multi-value.es.js";
-import { SelectMultiValueRemove as He } from "./components/select-multi-value-remove.es.js";
-import { SelectOption as Pe } from "./components/select-option.es.js";
-import { SelectValueContainer as Te } from "./components/select-value-container.es.js";
+import { jsx as l, jsxs as w } from "react/jsx-runtime";
+import Oe from "../../../../../external/classnames/index.es.js";
+import c, { forwardRef as ve } from "react";
+import Ce from "../../../../../external/react-select/dist/react-select.esm.es.js";
+import Le from "../../../../../external/react-select/async/dist/react-select-async.esm.es.js";
+import { FeedbackText as he } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ye } from "../form-label/form-label.es.js";
+import { useOptionalInputGroup as Ne } from "../input-group/input-group.es.js";
+import { SelectClearIndicator as Ve } from "./components/select-clear-indicator.es.js";
+import { SelectControl as Re } from "./components/select-control.es.js";
+import { SelectDropDownIndicator as we } from "./components/select-dropdown-indicator.es.js";
+import { SelectGroup as _e } from "./components/select-group.es.js";
+import { SelectGroupHeading as $e } from "./components/select-group-heading.es.js";
+import { SelectIndicatorsContainer as xe } from "./components/select-indicators-container.es.js";
+import { SelectInput as He } from "./components/select-input.es.js";
+import { SelectLoadingIndicator as Pe } from "./components/select-loading-indicator.es.js";
+import { SelectMenu as Te } from "./components/select-menu.es.js";
+import { SelectMenuList as De } from "./components/select-menu-list.es.js";
+import { SelectMenuPortal as Fe } from "./components/select-menu-portal.es.js";
+import { SelectMultiValue as je } from "./components/select-multi-value.es.js";
+import { SelectMultiValueRemove as ke } from "./components/select-multi-value-remove.es.js";
+import { SelectOption as Ee } from "./components/select-option.es.js";
+import { SelectValueContainer as Be } from "./components/select-value-container.es.js";
 import o from "./select.module.scss.es.js";
-import { useLabels as De } from "../../../providers/label-provider/use-labels.es.js";
-const Fe = Se(
-  (y, N) => {
+import { useLabels as Ge } from "../../../providers/label-provider/use-labels.es.js";
+const qe = ve(
+  (g, _) => {
+    var R;
     const {
-      options: V,
-      defaultOptions: R,
-      id: a,
-      name: w,
-      iconName: _ = "arrow_drop_down",
-      label: $,
-      required: f,
-      value: x,
-      defaultValue: H,
-      tagsDirection: g = "row",
-      onChange: c,
-      onInputChange: P,
-      inputValue: T,
-      loadOptions: D,
-      isLoading: F,
+      options: $,
+      defaultOptions: x,
+      id: S,
+      name: H,
+      iconName: P = "arrow_drop_down",
+      label: T,
+      required: b,
+      value: D,
+      defaultValue: F,
+      tagsDirection: M = "row",
+      onChange: d,
+      onInputChange: j,
+      inputValue: k,
+      loadOptions: E,
+      isLoading: B,
       openMenuOnFocus: G = !1,
-      openMenuOnClick: j = !0,
-      tabSelectsValue: k = !1,
-      disabled: S = !1,
-      className: B,
-      hideLabel: E = !1,
+      openMenuOnClick: q = !0,
+      tabSelectsValue: z = !1,
+      disabled: I = !1,
+      className: O,
+      hideLabel: A = !1,
       helper: t,
-      placeholder: q,
-      invalid: z,
-      valid: A,
-      size: d,
-      async: W = !1,
-      renderOption: J,
-      renderMessageListFooter: M,
-      noOptionsMessage: K,
-      loadingMessage: Q,
-      multiple: m = !1,
-      closeMenuOnSelect: U = !m,
-      blurInputOnSelect: b = !1,
-      autoFocus: X = !1,
-      isClearable: Y = !0,
-      isClearIndicatorVisible: Z = !1,
-      isSearchable: I = !0,
-      menuIsOpen: ee,
-      onMenuClose: te,
-      onMenuOpen: oe,
-      onBlur: ae,
-      inputIsHidden: re,
-      isTagRemovable: O = !1,
-      optionGroupHeadingText: ie = { modifiers: "small", color: "tertiary" },
-      cacheOptions: ne = !0,
-      showRadioButtons: le = !1,
-      renderWithoutLabel: se,
-      tooltip: ce,
-      classNames: C
-    } = y, v = t ? (t == null ? void 0 : t.id) ?? `${a}-helper` : void 0, i = p.useRef(null), { getLabel: L } = De();
-    p.useImperativeHandle(
-      N,
-      () => i.current
+      placeholder: W,
+      invalid: J,
+      valid: K,
+      size: m,
+      async: Q = !1,
+      renderOption: U,
+      renderMessageListFooter: v,
+      noOptionsMessage: X,
+      loadingMessage: Y,
+      multiple: u = !1,
+      closeMenuOnSelect: Z = !u,
+      blurInputOnSelect: C = !1,
+      autoFocus: ee = !1,
+      isClearable: te = !0,
+      isClearIndicatorVisible: oe = !1,
+      isSearchable: L = !0,
+      menuIsOpen: ae,
+      onMenuClose: ne,
+      onMenuOpen: re,
+      onBlur: ie,
+      inputIsHidden: se,
+      isTagRemovable: h = !1,
+      optionGroupHeadingText: le = { modifiers: "small", color: "tertiary" },
+      cacheOptions: ce = !0,
+      showRadioButtons: de = !1,
+      renderWithoutLabel: me,
+      tooltip: ue,
+      classNames: y
+    } = g, a = (R = Ne) == null ? void 0 : R(), pe = c.useId(), fe = a == null ? void 0 : a.hasExternalLabel, p = g.id ?? (a == null ? void 0 : a.inputId) ?? pe, N = t ? (t == null ? void 0 : t.id) ?? `${p}-helper` : void 0, r = c.useRef(null), { getLabel: V } = Ge();
+    c.useImperativeHandle(
+      _,
+      () => r.current
     );
-    const de = (r) => {
-      c == null || c(r), !b && i.current && setTimeout(() => {
-        var n, l;
-        return (l = (n = i.current) == null ? void 0 : n.inputRef) == null ? void 0 : l.focus();
+    const ge = (n) => {
+      d == null || d(n), !C && r.current && setTimeout(() => {
+        var i, s;
+        return (s = (i = r.current) == null ? void 0 : i.inputRef) == null ? void 0 : s.focus();
       }, 0);
-    }, me = p.useCallback(
-      (r) => /* @__PURE__ */ s(_e, { ...r, renderMessageListFooter: M }),
-      [M]
-    ), ue = () => {
-      const r = {
-        ClearIndicator: (e) => Ce({ isClearIndicatorVisible: Z, ...e }),
-        DropdownIndicator: () => Le({ iconName: _ }),
+    }, Se = c.useCallback(
+      (n) => /* @__PURE__ */ l(De, { ...n, renderMessageListFooter: v }),
+      [v]
+    ), be = () => {
+      const n = {
+        ClearIndicator: (e) => Ve({ isClearIndicatorVisible: oe, ...e }),
+        DropdownIndicator: () => we({ iconName: P }),
         IndicatorSeparator: () => null,
-        MenuPortal: $e,
-        Menu: we,
-        MenuList: me,
-        Option: (e) => Pe({ renderOption: J, multiple: m, showRadioButtons: le, ...e }),
-        Control: ve,
-        Input: Ve,
-        MultiValue: (e) => xe({ isTagRemovable: O, ...e }),
-        MultiValueRemove: He,
-        Group: he,
-        GroupHeading: (e) => ye({ optionGroupHeadingText: ie, ...e }),
-        IndicatorsContainer: Ne,
-        ValueContainer: Te,
-        LoadingIndicator: Re
-      }, n = W ? be : Me, l = () => L("select.no-options"), fe = () => L("select.loading");
-      return /* @__PURE__ */ s(
-        n,
+        MenuPortal: Fe,
+        Menu: Te,
+        MenuList: Se,
+        Option: (e) => Ee({ renderOption: U, multiple: u, showRadioButtons: de, ...e }),
+        Control: (e) => Re({ ...e, className: O }),
+        Input: He,
+        MultiValue: (e) => je({ isTagRemovable: h, ...e }),
+        MultiValueRemove: ke,
+        Group: _e,
+        GroupHeading: (e) => $e({ optionGroupHeadingText: le, ...e }),
+        IndicatorsContainer: xe,
+        ValueContainer: Be,
+        LoadingIndicator: Pe
+      }, i = Q ? Le : Ce, s = () => V("select.no-options"), Ie = () => V("select.loading");
+      return /* @__PURE__ */ l(
+        i,
         {
-          id: a,
-          "aria-describedby": v,
-          autoFocus: X,
-          ref: i,
-          instanceId: a,
+          id: p,
+          "aria-describedby": N,
+          autoFocus: ee,
+          ref: r,
+          instanceId: S,
           className: "tedi-select__wrapper",
-          name: w,
-          options: V,
-          defaultOptions: R,
-          value: x,
-          defaultValue: H,
-          cacheOptions: ne,
-          onChange: de,
-          onInputChange: P,
-          onBlur: ae,
-          inputValue: T,
-          inputId: `${a}-input`,
-          loadOptions: D,
-          isLoading: F,
-          noOptionsMessage: K || l,
-          loadingMessage: Q || fe,
+          name: H,
+          options: $,
+          defaultOptions: x,
+          value: D,
+          defaultValue: F,
+          cacheOptions: ce,
+          onChange: ge,
+          onInputChange: j,
+          onBlur: ie,
+          inputValue: k,
+          inputId: `${S}-input`,
+          loadOptions: E,
+          isLoading: B,
+          noOptionsMessage: X || s,
+          loadingMessage: Y || Ie,
           classNamePrefix: "select",
-          components: r,
-          isDisabled: S,
-          isSearchable: I,
-          menuIsOpen: ee,
+          components: n,
+          isDisabled: I,
+          isSearchable: L,
+          menuIsOpen: ae,
           openMenuOnFocus: G,
-          openMenuOnClick: j,
-          tabSelectsValue: k,
-          onMenuClose: te,
-          onMenuOpen: oe,
-          placeholder: q || "",
-          isClearable: Y,
-          backspaceRemovesValue: O,
+          openMenuOnClick: q,
+          tabSelectsValue: z,
+          onMenuClose: ne,
+          onMenuOpen: re,
+          placeholder: W || "",
+          isClearable: te,
+          backspaceRemovesValue: h,
           menuShouldScrollIntoView: !0,
-          isMulti: m,
+          isMulti: u,
           hideSelectedOptions: !1,
-          closeMenuOnSelect: U,
-          blurInputOnSelect: b,
+          closeMenuOnSelect: Z,
+          blurInputOnSelect: C,
           menuPlacement: "auto",
-          inputIsHidden: re,
-          required: f,
+          inputIsHidden: se,
+          required: b,
           menuPortalTarget: document.body,
           menuPosition: "absolute",
-          classNames: C ? Object.fromEntries(
-            Object.entries(C).map(([e, u]) => [
+          classNames: y ? Object.fromEntries(
+            Object.entries(y).map(([e, f]) => [
               e,
-              typeof u == "string" ? () => u : u
+              typeof f == "string" ? () => f : f
             ])
           ) : void 0,
           theme: (e) => ({
@@ -177,37 +179,37 @@ const Fe = Se(
           }
         }
       );
-    }, pe = ge(
+    }, Me = Oe(
       o["tedi-select"],
-      B,
-      { [o["tedi-select--invalid"]]: z || (t == null ? void 0 : t.type) === "error" },
-      { [o["tedi-select--valid"]]: A || (t == null ? void 0 : t.type) === "valid" },
-      { [o[`tedi-select--${d}`]]: d },
-      { [o[`tedi-select--tags-${g}`]]: g },
-      { [o["tedi-select--searchable"]]: I },
-      { [o["tedi-select--disabled"]]: S }
+      O,
+      { [o["tedi-select--invalid"]]: J || (t == null ? void 0 : t.type) === "error" },
+      { [o["tedi-select--valid"]]: K || (t == null ? void 0 : t.type) === "valid" },
+      { [o[`tedi-select--${m}`]]: m },
+      { [o[`tedi-select--tags-${M}`]]: M },
+      { [o["tedi-select--searchable"]]: L },
+      { [o["tedi-select--disabled"]]: I }
     );
-    return /* @__PURE__ */ h("div", { "data-name": "select", className: pe, children: [
-      /* @__PURE__ */ h("div", { className: o["tedi-select__inner"], children: [
-        /* @__PURE__ */ s(
-          Oe,
+    return /* @__PURE__ */ w("div", { "data-name": "select", className: Me, children: [
+      /* @__PURE__ */ w("div", { className: o["tedi-select__inner"], children: [
+        !fe && /* @__PURE__ */ l(
+          ye,
           {
-            id: `${a}-input`,
-            label: $,
-            required: f,
-            hideLabel: E,
-            size: d,
-            renderWithoutLabel: se,
-            tooltip: ce
+            id: `${p}-input`,
+            label: T,
+            required: b,
+            hideLabel: A,
+            size: m,
+            renderWithoutLabel: me,
+            tooltip: ue
           }
         ),
-        ue()
+        be()
       ] }),
-      t && /* @__PURE__ */ s(Ie, { ...t, id: v })
+      t && /* @__PURE__ */ l(he, { ...t, id: N })
     ] });
   }
 );
-Fe.displayName = "Select";
+qe.displayName = "Select";
 export {
-  Fe as Select
+  qe as Select
 };

package/src/tedi/components/form/slider/slider.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("../../../../../external/classnames/index.cjs.js"),e=require("react"),ne=require("../../overlays/tooltip/tooltip.cjs.js"),de=require("../../overlays/tooltip/tooltip-content.cjs.js"),oe=require("../../overlays/tooltip/tooltip-trigger.cjs.js"),ue=require("../feedback-text/feedback-text.cjs.js"),ce=require("../form-label/form-label.cjs.js"),t=require("./slider.module.scss.cjs.js"),fe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=e.forwardRef((h,M)=>{const{getCurrentBreakpointProps:V}=fe.useBreakpointProps(h.defaultServerBreakpoint),{id:E,name:P,label:x,hideLabel:R,required:_,min:l=0,max:d=100,step:D=1,value:c,defaultValue:$,onChange:o,disabled:s=!1,invalid:H=!1,minLabel:f,maxLabel:O,showCurrentValue:p=!1,valueFormatter:k,tooltip:U=!0,addonRight:j,helper:r,className:z,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J}=V(h),K=e.useId(),b=E??`tedi-slider-${K}`,w=r?r.id??`${b}-helper`:void 0,[Q,W]=e.useState($??l),u=Math.min(d,Math.max(l,c??Q)),[X,L]=e.useState(!1),[Y,N]=e.useState(!1),[i,C]=e.useState(!1),S=!!U&&!s,Z=S&&(X||Y||i),ee=e.useCallback(()=>L(!0),[]),ae=e.useCallback(()=>L(!1),[]),te=e.useCallback(()=>N(!0),[]),re=e.useCallback(()=>N(!1),[]),T=e.useRef(null),n=e.useCallback(()=>{T.current=null,C(!1)},[]);e.useEffect(()=>{if(i)return window.addEventListener("pointerup",n),window.addEventListener("pointercancel",n),()=>{window.removeEventListener("pointerup",n),window.removeEventListener("pointercancel",n)}},[i,n]);const le=e.useCallback(g=>{s||(T.current=g.pointerId,C(!0))},[s]),se=e.useCallback(g=>{const B=Number(g.target.value);c===void 0&&W(B),o==null||o(B)},[o,c]),q=H||(r==null?void 0:r.type)==="error",I=d===l?0:(u-l)/(d-l)*100,y=k?k(u):u,v=p?y:O,ie=m.default(t.default["tedi-slider"],{[t.default["tedi-slider--disabled"]]:s,[t.default["tedi-slider--invalid"]]:q,[t.default["tedi-slider--dragging"]]:i&&!s},z);return a.jsxs("div",{"data-name":"slider",className:ie,children:[x&&a.jsx(ce.FormLabel,{id:b,label:x,required:_,hideLabel:R}),a.jsxs("div",{className:t.default["tedi-slider__container"],children:[a.jsxs("div",{className:t.default["tedi-slider__track-row"],children:[f!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":"true",children:f}),a.jsxs("div",{className:t.default["tedi-slider__track"],style:{"--tedi-slider-progress":`${I}%`,"--tedi-slider-progress-ratio":`${I/100}`},children:[a.jsx("input",{ref:M,id:b,name:P,type:"range",min:l,max:d,step:D,value:u,disabled:s,required:_,"aria-invalid":q?"true":void 0,"aria-describedby":w,"aria-label":A,"aria-labelledby":G,"aria-valuetext":J,onChange:se,onMouseEnter:ee,onMouseLeave:ae,onPointerDown:le,onFocus:te,onBlur:re,className:m.default(t.default["tedi-slider__input"],{[t.default["tedi-slider__input--dragging"]]:i})}),S&&a.jsxs(ne.Tooltip,{open:Z,onToggle:()=>{},focusManager:{returnFocus:!1,initialFocus:-1},placement:"top",trackReferencePosition:!0,children:[a.jsx(oe.TooltipTrigger,{children:a.jsx("span",{className:t.default["tedi-slider__thumb-anchor"],"aria-hidden":"true",tabIndex:-1})}),a.jsx(de.TooltipContent,{children:y})]})]}),v!=null&&a.jsx("span",{className:t.default["tedi-slider__range-label"],"aria-hidden":p?void 0:"true","aria-live":p?"polite":void 0,children:v})]}),j&&a.jsx("div",{className:t.default["tedi-slider__addon"],children:j})]}),r&&a.jsx(ue.FeedbackText,{...r,id:w,className:m.default(t.default["tedi-slider__feedback"],r.className)})]})});F.displayName="Slider";exports.Slider=F;

package/src/tedi/components/form/slider/slider.d.ts

@@ -0,0 +1,116 @@
+import { default as React } from 'react';
+import { BreakpointSupport } from '../../../helpers';
+import { FeedbackTextProps } from '../feedback-text/feedback-text';
+type SliderBreakpointProps = {
+    /**
+     * Text/element rendered to the left of the track (e.g. the minimum value).
+     */
+    minLabel?: React.ReactNode;
+    /**
+     * Text/element rendered to the right of the track (e.g. the maximum value).
+     * Ignored when `showCurrentValue` is `true`.
+     */
+    maxLabel?: React.ReactNode;
+    /**
+     * When `true`, renders the current value to the right of the track instead of `maxLabel`.
+     * @default false
+     */
+    showCurrentValue?: boolean;
+    /**
+     * Formats the current value, used by both the thumb tooltip and the `showCurrentValue` label.
+     * @default (value) => value
+     */
+    valueFormatter?: (value: number) => React.ReactNode;
+    /**
+     * Renders a tooltip above the thumb showing the current value. Shown only while the slider is
+     * hovered, focused, or being dragged. Value is formatted via `valueFormatter`.
+     * @default true
+     */
+    tooltip?: boolean;
+    /**
+     * Node rendered to the right of the slider, typically a NumberField used to edit the same value.
+     */
+    addonRight?: React.ReactNode;
+    /**
+     * Helper text rendered below the slider.
+     */
+    helper?: FeedbackTextProps;
+    /**
+     * Additional class name(s) applied to the root element.
+     */
+    className?: string;
+};
+export interface SliderProps extends BreakpointSupport<SliderBreakpointProps> {
+    /**
+     * Unique identifier for the underlying input element.
+     * Generated automatically if not provided.
+     */
+    id?: string;
+    /**
+     * Name attribute of the underlying input element.
+     */
+    name?: string;
+    /**
+     * Label text rendered above the slider.
+     */
+    label?: React.ReactNode;
+    /**
+     * Controls the visibility of the label. Pass `true` to hide it visually while keeping it
+     * available to assistive technology, or `'keep-space'` to reserve the vertical space.
+     */
+    hideLabel?: boolean | 'keep-space';
+    /**
+     * Marks the field as required.
+     */
+    required?: boolean;
+    /**
+     * Minimum allowed value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowed value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step size.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Controlled value. Use together with `onChange`.
+     */
+    value?: number;
+    /**
+     * Default value for uncontrolled usage.
+     * @default min
+     */
+    defaultValue?: number;
+    /**
+     * Callback fired when the value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Disables the slider.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the slider as invalid for validation purposes.
+     */
+    invalid?: boolean;
+    /**
+     * Accessible label used when no visible `label` is provided.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of an element that labels the slider, used when no visible `label` is provided.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Human-readable text alternative of the current value.
+     */
+    'aria-valuetext'?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
+export default Slider;

package/src/tedi/components/form/slider/slider.es.js

@@ -0,0 +1,145 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import _ from "../../../../../external/classnames/index.es.js";
+import { forwardRef as oe, useId as de, useState as m, useCallback as i, useRef as ce, useEffect as ue } from "react";
+import { Tooltip as me } from "../../overlays/tooltip/tooltip.es.js";
+import { TooltipContent as pe } from "../../overlays/tooltip/tooltip-content.es.js";
+import { TooltipTrigger as fe } from "../../overlays/tooltip/tooltip-trigger.es.js";
+import { FeedbackText as ve } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as ge } from "../form-label/form-label.es.js";
+import e from "./slider.module.scss.es.js";
+import { useBreakpointProps as he } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+const be = oe((N, S) => {
+  const { getCurrentBreakpointProps: D } = he(N.defaultServerBreakpoint), {
+    id: R,
+    name: $,
+    label: w,
+    hideLabel: j,
+    required: L,
+    min: t = 0,
+    max: d = 100,
+    step: H = 1,
+    value: p,
+    defaultValue: q,
+    onChange: c,
+    disabled: n = !1,
+    invalid: O = !1,
+    minLabel: f,
+    maxLabel: U,
+    showCurrentValue: v = !1,
+    valueFormatter: x,
+    tooltip: z = !0,
+    addonRight: I,
+    helper: a,
+    className: A,
+    "aria-label": G,
+    "aria-labelledby": J,
+    "aria-valuetext": K
+  } = D(N), Q = de(), g = R ?? `tedi-slider-${Q}`, k = a ? a.id ?? `${g}-helper` : void 0, [W, X] = m(q ?? t), u = Math.min(d, Math.max(t, p ?? W)), [Y, y] = m(!1), [Z, F] = m(!1), [l, T] = m(!1), V = !!z && !n, ee = V && (Y || Z || l), re = i(() => y(!0), []), ae = i(() => y(!1), []), ie = i(() => F(!0), []), te = i(() => F(!1), []), B = ce(null), s = i(() => {
+    B.current = null, T(!1);
+  }, []);
+  ue(() => {
+    if (l)
+      return window.addEventListener("pointerup", s), window.addEventListener("pointercancel", s), () => {
+        window.removeEventListener("pointerup", s), window.removeEventListener("pointercancel", s);
+      };
+  }, [l, s]);
+  const ne = i(
+    (b) => {
+      n || (B.current = b.pointerId, T(!0));
+    },
+    [n]
+  ), le = i(
+    (b) => {
+      const P = Number(b.target.value);
+      p === void 0 && X(P), c == null || c(P);
+    },
+    [c, p]
+  ), E = O || (a == null ? void 0 : a.type) === "error", M = d === t ? 0 : (u - t) / (d - t) * 100, C = x ? x(u) : u, h = v ? C : U, se = _(
+    e["tedi-slider"],
+    {
+      [e["tedi-slider--disabled"]]: n,
+      [e["tedi-slider--invalid"]]: E,
+      [e["tedi-slider--dragging"]]: l && !n
+    },
+    A
+  );
+  return /* @__PURE__ */ o("div", { "data-name": "slider", className: se, children: [
+    w && /* @__PURE__ */ r(ge, { id: g, label: w, required: L, hideLabel: j }),
+    /* @__PURE__ */ o("div", { className: e["tedi-slider__container"], children: [
+      /* @__PURE__ */ o("div", { className: e["tedi-slider__track-row"], children: [
+        f != null && /* @__PURE__ */ r("span", { className: e["tedi-slider__range-label"], "aria-hidden": "true", children: f }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: e["tedi-slider__track"],
+            style: {
+              "--tedi-slider-progress": `${M}%`,
+              "--tedi-slider-progress-ratio": `${M / 100}`
+            },
+            children: [
+              /* @__PURE__ */ r(
+                "input",
+                {
+                  ref: S,
+                  id: g,
+                  name: $,
+                  type: "range",
+                  min: t,
+                  max: d,
+                  step: H,
+                  value: u,
+                  disabled: n,
+                  required: L,
+                  "aria-invalid": E ? "true" : void 0,
+                  "aria-describedby": k,
+                  "aria-label": G,
+                  "aria-labelledby": J,
+                  "aria-valuetext": K,
+                  onChange: le,
+                  onMouseEnter: re,
+                  onMouseLeave: ae,
+                  onPointerDown: ne,
+                  onFocus: ie,
+                  onBlur: te,
+                  className: _(e["tedi-slider__input"], {
+                    [e["tedi-slider__input--dragging"]]: l
+                  })
+                }
+              ),
+              V && /* @__PURE__ */ o(
+                me,
+                {
+                  open: ee,
+                  onToggle: () => {
+                  },
+                  focusManager: { returnFocus: !1, initialFocus: -1 },
+                  placement: "top",
+                  trackReferencePosition: !0,
+                  children: [
+                    /* @__PURE__ */ r(fe, { children: /* @__PURE__ */ r("span", { className: e["tedi-slider__thumb-anchor"], "aria-hidden": "true", tabIndex: -1 }) }),
+                    /* @__PURE__ */ r(pe, { children: C })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        h != null && /* @__PURE__ */ r(
+          "span",
+          {
+            className: e["tedi-slider__range-label"],
+            "aria-hidden": v ? void 0 : "true",
+            "aria-live": v ? "polite" : void 0,
+            children: h
+          }
+        )
+      ] }),
+      I && /* @__PURE__ */ r("div", { className: e["tedi-slider__addon"], children: I })
+    ] }),
+    a && /* @__PURE__ */ r(ve, { ...a, id: k, className: _(e["tedi-slider__feedback"], a.className) })
+  ] });
+});
+be.displayName = "Slider";
+export {
+  be as Slider
+};

package/src/tedi/components/form/slider/slider.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-slider":"tedi-slider-90e24e7d","tedi-slider__container":"tedi-slider__container-525c4b64","tedi-slider__track-row":"tedi-slider__track-row-95e9c2d5","tedi-slider__range-label":"tedi-slider__range-label-a2a6a43b","tedi-slider__track":"tedi-slider__track-a7afc8d6","tedi-slider__thumb-anchor":"tedi-slider__thumb-anchor-7e282370","tedi-slider__input":"tedi-slider__input-b2d1c042","tedi-slider__input--dragging":"tedi-slider__input--dragging-6a2f5f85","tedi-slider__addon":"tedi-slider__addon-6b259d81","tedi-slider__feedback":"tedi-slider__feedback-dad1545e","tedi-slider--disabled":"tedi-slider--disabled-d1da914a","tedi-slider--dragging":"tedi-slider--dragging-c82f4f25","tedi-slider--invalid":"tedi-slider--invalid-e5adda94"};exports.default=e;