@mittwald/flow-react-components 0.2.0-experimental.776 → 1.0.1

package/dist/js/packages/components/src/components/Slider/Slider.mjs

@@ -1,146 +1,112 @@
 "use client"
 /* */
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import 'react';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import * as Aria from 'react-aria-components';
-import clsx from 'clsx';
-import styles from './Slider.module.scss.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { Button } from '../Button/Button.mjs';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconMinus } from '../Icon/components/icons/IconMinus.mjs';
-import { IconPlus } from '../Icon/components/icons/IconPlus.mjs';
-import locales from '../../../../../_virtual/_.locale.json@a4f13d2de429263796cba13d6ec7a345.mjs';
-import { useLocalizedStringFormatter } from 'react-aria';
-import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
-import { useObjectRef } from '@react-aria/utils';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-
-const Slider = flowComponent("Slider", (props) => {
-  const {
-    className,
-    children,
-    name,
-    isDisabled,
-    defaultValue,
-    showInitialMarker,
-    isReadOnly,
-    ref,
-    step,
-    sliderOnly,
-    ...rest
-  } = props;
-  const rootClassName = clsx(
-    styles.slider,
-    isDisabled && styles.disabled,
-    className
-  );
-  const {
-    FieldErrorView,
-    FieldErrorCaptureContext,
-    fieldPropsContext,
-    fieldProps
-  } = useFieldComponent(props);
-  const stringFormatter = useLocalizedStringFormatter(locales);
-  const objectRef = useObjectRef(ref);
-  const propsContext = {
-    ...fieldPropsContext,
-    Label: {
-      unstyled: true,
-      tunnelId: "label",
-      ...fieldPropsContext.Label,
-      className: styles.label
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { ...fieldProps, children: /* @__PURE__ */ jsx(
-    Aria.Slider,
-    {
-      ...rest,
-      className: rootClassName,
-      isDisabled,
-      defaultValue,
-      step,
-      children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
-        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }),
-        !sliderOnly && /* @__PURE__ */ jsxs("div", { className: styles.text, children: [
-          /* @__PURE__ */ jsx(Aria.SliderOutput, { className: styles.value }),
-          " ",
-          /* @__PURE__ */ jsx(TunnelExit, { id: "label" })
-        ] }),
-        /* @__PURE__ */ jsx(Aria.SliderTrack, { className: styles.track, children: ({ state }) => /* @__PURE__ */ jsxs(
-          PropsContextProvider,
-          {
-            props: {
-              Button: {
-                isPending: false,
-                isFailed: false,
-                isSucceeded: false,
-                isReadOnly,
-                excludeFromTabOrder: true,
-                isDisabled,
-                variant: "plain",
-                color: "secondary"
-              }
-            },
-            children: [
-              !sliderOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    onPress: () => state.decrementThumb(0, step),
-                    "aria-label": stringFormatter.format("slider.decrement"),
-                    className: styles.decrement,
-                    children: /* @__PURE__ */ jsx(IconMinus, {})
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    onPress: () => state.incrementThumb(0, step),
-                    "aria-label": stringFormatter.format("slider.increment"),
-                    className: styles.increment,
-                    children: /* @__PURE__ */ jsx(IconPlus, {})
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: styles.fill,
-                  style: { width: state.getThumbPercent(0) * 100 + "%" }
-                }
-              ),
-              showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: styles.initialMarker,
-                  style: {
-                    left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Aria.SliderThumb,
-                {
-                  inputRef: objectRef,
-                  name,
-                  className: styles.handle,
-                  isDisabled: isReadOnly
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsx(FieldErrorView, {})
-      ] }) })
-    }
-  ) });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { IconMinus } from "../Icon/components/icons/IconMinus.mjs";
+import { IconPlus } from "../Icon/components/icons/IconPlus.mjs";
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { Button } from "../Button/Button.mjs";
+import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import Slider_module_default from "./Slider.module.mjs";
+import __locale_default from "../../../../../_virtual/_18.locale.mjs";
+import clsx from "clsx";
+import "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "@react-aria/utils";
+import * as Aria from "react-aria-components";
+//#region src/components/Slider/Slider.tsx
+/** @flr-generate all */
+var Slider = flowComponent("Slider", (props) => {
+	const { className, children, name, isDisabled, defaultValue, showInitialMarker, isReadOnly, ref, step, sliderOnly, ...rest } = props;
+	const rootClassName = clsx(Slider_module_default.slider, isDisabled && Slider_module_default.disabled, className);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Slider");
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Slider");
+	const objectRef = useObjectRef(ref);
+	const propsContext = {
+		...fieldPropsContext,
+		Label: {
+			tunnel: {
+				id: "label",
+				component: "Slider"
+			},
+			...fieldPropsContext.Label,
+			className: Slider_module_default.label
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...fieldProps,
+		children: /* @__PURE__ */ jsx(Aria.Slider, {
+			...rest,
+			className: rootClassName,
+			isDisabled,
+			defaultValue,
+			step,
+			children: /* @__PURE__ */ jsxs(PropsContextProvider, {
+				props: propsContext,
+				children: [
+					/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }),
+					!sliderOnly && /* @__PURE__ */ jsxs("div", {
+						className: Slider_module_default.text,
+						children: [
+							/* @__PURE__ */ jsx(Aria.SliderOutput, { className: Slider_module_default.value }),
+							" ",
+							/* @__PURE__ */ jsx(UiComponentTunnelExit, {
+								id: "label",
+								component: "Slider"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Aria.SliderTrack, {
+						className: Slider_module_default.track,
+						children: ({ state }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
+							props: { Button: {
+								isPending: false,
+								isFailed: false,
+								isSucceeded: false,
+								isReadOnly,
+								excludeFromTabOrder: true,
+								isDisabled,
+								variant: "plain",
+								color: "secondary",
+								size: "s"
+							} },
+							children: [
+								!sliderOnly && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+									onPress: () => state.decrementThumb(0, step),
+									"aria-label": stringFormatter.format("decrement"),
+									className: Slider_module_default.decrement,
+									children: /* @__PURE__ */ jsx(IconMinus, {})
+								}), /* @__PURE__ */ jsx(Button, {
+									onPress: () => state.incrementThumb(0, step),
+									"aria-label": stringFormatter.format("increment"),
+									className: Slider_module_default.increment,
+									children: /* @__PURE__ */ jsx(IconPlus, {})
+								})] }),
+								/* @__PURE__ */ jsx("div", {
+									className: Slider_module_default.fill,
+									style: { width: state.getThumbPercent(0) * 100 + "%" }
+								}),
+								showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx("div", {
+									className: Slider_module_default.initialMarker,
+									style: { left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)` }
+								}),
+								/* @__PURE__ */ jsx(Aria.SliderThumb, {
+									inputRef: objectRef,
+									name,
+									className: Slider_module_default.handle,
+									isDisabled: isReadOnly
+								})
+							]
+						})
+					}),
+					/* @__PURE__ */ jsx(FieldErrorView, {})
+				]
+			})
+		})
+	});
 });
+//#endregion
+export { Slider, Slider as default };
 
-export { Slider };
-//# sourceMappingURL=Slider.mjs.map
+//# sourceMappingURL=Slider.mjs.map

package/dist/js/packages/components/src/components/Slider/Slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.mjs","sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SliderProps\n  extends\n    FlowComponentProps<HTMLInputElement>,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  /** Whether the marker for the initial value should be visible */\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n  /** Whether the component is invalid. */\n  isInvalid?: boolean;\n  /** Hide Buttons, Label and Value */\n  sliderOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ref,\n    step,\n    sliderOnly,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const objectRef = useObjectRef(ref);\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      unstyled: true,\n      tunnelId: \"label\",\n      ...fieldPropsContext.Label,\n      className: styles.label,\n    },\n  };\n\n  return (\n    <div {...fieldProps}>\n      <Aria.Slider\n        {...rest}\n        className={rootClassName}\n        isDisabled={isDisabled}\n        defaultValue={defaultValue}\n        step={step}\n      >\n        <TunnelProvider>\n          <PropsContextProvider props={propsContext}>\n            <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n            {!sliderOnly && (\n              <div className={styles.text}>\n                <Aria.SliderOutput className={styles.value} />{\" \"}\n                <TunnelExit id=\"label\" />\n              </div>\n            )}\n\n            <Aria.SliderTrack className={styles.track}>\n              {({ state }) => (\n                <PropsContextProvider\n                  props={{\n                    Button: {\n                      isPending: false,\n                      isFailed: false,\n                      isSucceeded: false,\n                      isReadOnly: isReadOnly,\n                      excludeFromTabOrder: true,\n                      isDisabled,\n                      variant: \"plain\",\n                      color: \"secondary\",\n                    },\n                  }}\n                >\n                  {!sliderOnly && (\n                    <>\n                      <Button\n                        onPress={() => state.decrementThumb(0, step)}\n                        aria-label={stringFormatter.format(\"slider.decrement\")}\n                        className={styles.decrement}\n                      >\n                        <IconMinus />\n                      </Button>\n                      <Button\n                        onPress={() => state.incrementThumb(0, step)}\n                        aria-label={stringFormatter.format(\"slider.increment\")}\n                        className={styles.increment}\n                      >\n                        <IconPlus />\n                      </Button>\n                    </>\n                  )}\n\n                  <div\n                    className={styles.fill}\n                    style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n                  />\n\n                  {showInitialMarker &&\n                    defaultValue &&\n                    typeof defaultValue === \"number\" && (\n                      <div\n                        className={styles.initialMarker}\n                        style={{\n                          left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n                        }}\n                      />\n                    )}\n                  <Aria.SliderThumb\n                    inputRef={objectRef}\n                    name={name}\n                    className={styles.handle}\n                    isDisabled={isReadOnly}\n                  />\n                </PropsContextProvider>\n              )}\n            </Aria.SliderTrack>\n            <FieldErrorView />\n          </PropsContextProvider>\n        </TunnelProvider>\n      </Aria.Slider>\n    </div>\n  );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface SliderProps\n  extends\n    FlowComponentProps<HTMLInputElement>,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  /** Whether the marker for the initial value should be visible */\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n  /** Whether the component is invalid. */\n  isInvalid?: boolean;\n  /** Hide Buttons, Label and Value */\n  sliderOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ref,\n    step,\n    sliderOnly,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"Slider\");\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Slider\");\n\n  const objectRef = useObjectRef(ref);\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      tunnel: {\n        id: \"label\",\n        component: \"Slider\",\n      },\n      ...fieldPropsContext.Label,\n      className: styles.label,\n    },\n  };\n\n  return (\n    <div {...fieldProps}>\n      <Aria.Slider\n        {...rest}\n        className={rootClassName}\n        isDisabled={isDisabled}\n        defaultValue={defaultValue}\n        step={step}\n      >\n        <PropsContextProvider props={propsContext}>\n          <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n\n          {!sliderOnly && (\n            <div className={styles.text}>\n              <Aria.SliderOutput className={styles.value} />{\" \"}\n              <UiComponentTunnelExit id=\"label\" component=\"Slider\" />\n            </div>\n          )}\n\n          <Aria.SliderTrack className={styles.track}>\n            {({ state }) => (\n              <PropsContextProvider\n                props={{\n                  Button: {\n                    isPending: false,\n                    isFailed: false,\n                    isSucceeded: false,\n                    isReadOnly: isReadOnly,\n                    excludeFromTabOrder: true,\n                    isDisabled,\n                    variant: \"plain\",\n                    color: \"secondary\",\n                    size: \"s\",\n                  },\n                }}\n              >\n                {!sliderOnly && (\n                  <>\n                    <Button\n                      onPress={() => state.decrementThumb(0, step)}\n                      aria-label={stringFormatter.format(\"decrement\")}\n                      className={styles.decrement}\n                    >\n                      <IconMinus />\n                    </Button>\n                    <Button\n                      onPress={() => state.incrementThumb(0, step)}\n                      aria-label={stringFormatter.format(\"increment\")}\n                      className={styles.increment}\n                    >\n                      <IconPlus />\n                    </Button>\n                  </>\n                )}\n\n                <div\n                  className={styles.fill}\n                  style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n                />\n\n                {showInitialMarker &&\n                  defaultValue &&\n                  typeof defaultValue === \"number\" && (\n                    <div\n                      className={styles.initialMarker}\n                      style={{\n                        left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n                      }}\n                    />\n                  )}\n                <Aria.SliderThumb\n                  inputRef={objectRef}\n                  name={name}\n                  className={styles.handle}\n                  isDisabled={isReadOnly}\n                />\n              </PropsContextProvider>\n            )}\n          </Aria.SliderTrack>\n          <FieldErrorView />\n        </PropsContextProvider>\n      </Aria.Slider>\n    </div>\n  );\n});\n\nexport default Slider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,MACA,YACA,cACA,mBACA,YACA,KACA,MACA,YACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,sBAAO,QACP,cAAc,sBAAO,UACrB,SACF;CAEA,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,kBAAkB,4BAA4B,kBAAS,QAAQ;CAErE,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,GAAG,kBAAkB;GACrB,WAAW,sBAAO;EACpB;CACF;CAEA,OACE,oBAAC,OAAD;EAAK,GAAI;EACP,UAAA,oBAAC,KAAK,QAAN;GACE,GAAI;GACJ,WAAW;GACC;GACE;GACR;GAEN,UAAA,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA;KACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA;KAE7D,CAAC,cACA,qBAAC,OAAD;MAAK,WAAW,sBAAO;MAAvB,UAAA;OACE,oBAAC,KAAK,cAAN,EAAmB,WAAW,sBAAO,MAAQ,CAAA;OAAE;OAC/C,oBAAC,uBAAD;QAAuB,IAAG;QAAQ,WAAU;OAAU,CAAA;MACnD;;KAGP,oBAAC,KAAK,aAAN;MAAkB,WAAW,sBAAO;MAChC,WAAA,EAAE,YACF,qBAAC,sBAAD;OACE,OAAO,EACL,QAAQ;QACN,WAAW;QACX,UAAU;QACV,aAAa;QACD;QACZ,qBAAqB;QACrB;QACA,SAAS;QACT,OAAO;QACP,MAAM;OACR,EACF;OAbF,UAAA;QAeG,CAAC,cACA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAW,sBAAO;SAElB,UAAA,oBAAC,WAAD,CAAY,CAAA;QACN,CAAA,GACR,oBAAC,QAAD;SACE,eAAe,MAAM,eAAe,GAAG,IAAI;SAC3C,cAAY,gBAAgB,OAAO,WAAW;SAC9C,WAAW,sBAAO;SAElB,UAAA,oBAAC,UAAD,CAAW,CAAA;QACL,CAAA,CACR,EAAA,CAAA;QAGJ,oBAAC,OAAD;SACE,WAAW,sBAAO;SAClB,OAAO,EAAE,OAAO,MAAM,gBAAgB,CAAC,IAAI,MAAM,IAAI;QACtD,CAAA;QAEA,qBACC,gBACA,OAAO,iBAAiB,YACtB,oBAAC,OAAD;SACE,WAAW,sBAAO;SAClB,OAAO,EACL,MAAM,QAAQ,MAAM,gBAAgB,YAAY,IAAI,IAAI,UAC1D;QACD,CAAA;QAEL,oBAAC,KAAK,aAAN;SACE,UAAU;SACJ;SACN,WAAW,sBAAO;SAClB,YAAY;QACb,CAAA;OACmB;;KAER,CAAA;KAClB,oBAAC,gBAAD,CAAiB,CAAA;IACG;;EACX,CAAA;CACV,CAAA;AAET,CAAC"}

package/dist/js/packages/components/src/components/Slider/Slider.module.mjs

@@ -0,0 +1,31 @@
+"use client"
+/* */
+//#region src/components/Slider/Slider.module.scss
+var slider = "flow--slider";
+var text = "flow--slider--text";
+var value = "flow--slider--value";
+var label = "flow--slider--label";
+var track = "flow--slider--track";
+var fill = "flow--slider--fill";
+var initialMarker = "flow--slider--initial-marker";
+var handle = "flow--slider--handle";
+var increment = "flow--slider--increment";
+var decrement = "flow--slider--decrement";
+var disabled = "flow--slider--disabled";
+var Slider_module_default = {
+	slider,
+	text,
+	value,
+	label,
+	track,
+	fill,
+	initialMarker,
+	handle,
+	increment,
+	decrement,
+	disabled
+};
+//#endregion
+export { decrement, Slider_module_default as default, disabled, fill, handle, increment, initialMarker, label, slider, text, track, value };
+
+//# sourceMappingURL=Slider.module.mjs.map

package/dist/js/packages/components/src/components/Slider/Slider.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  row-gap: var(--slider--spacing-y);\n\n  --button-size: calc(\n    var(--button--line-height-s) + var(--button--padding-s-y) * 2\n  );\n\n  .text {\n    text-align: center;\n    align-items: end;\n    padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n    padding-top: calc(var(--slider--spacing-y) / 2);\n\n    label {\n      margin: 0;\n    }\n\n    .value {\n      font-size: var(--font-size-text--s);\n      font-weight: var(--slider--value-font-weight);\n    }\n\n    .label {\n      display: inline-flex;\n      column-gap: var(--label--spacing);\n    }\n  }\n\n  .track {\n    grid-area: track;\n    position: relative;\n    height: var(--slider--track-height);\n    background-color: var(--slider--track-color--default);\n    width: 100%;\n    border-radius: var(--slider--corner-radius);\n    border: var(--slider--track-border-width) var(--slider--track-border-style)\n      var(--slider--track-border-color--default);\n  }\n\n  .fill {\n    position: absolute;\n    height: var(--slider--track-height);\n    background-color: var(--slider--color--default);\n    top: calc(50% - var(--slider--track-height) / 2);\n    border-radius: var(--slider--corner-radius);\n  }\n\n  .initialMarker {\n    position: absolute;\n    height: var(--slider--initial-marker-height);\n    width: var(--slider--initial-marker-border-width);\n    background-color: var(--slider--color--default);\n    top: calc(50% - var(--slider--initial-marker-height) / 2);\n    border-radius: var(--slider--corner-radius);\n  }\n\n  .handle {\n    width: var(--slider--handle-size);\n    height: var(--slider--handle-size);\n    border-radius: var(--slider--handle-corner-radius);\n    background-color: var(--slider--handle-fill-color);\n    border: var(--slider--handle-border-width) var(--slider--track-border-style)\n      var(--slider--color--default);\n    forced-color-adjust: none;\n    top: 50%;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    &[data-dragging],\n    &[data-focus-visible] {\n      background-color: var(--slider--color--default);\n    }\n\n    &[data-focus-visible] {\n      @include focus.focus;\n\n      & {\n        outline-offset: var(--size-px--xs);\n      }\n    }\n  }\n\n  .increment,\n  .decrement {\n    position: absolute;\n    top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n  }\n\n  .increment {\n    inset-inline-end: 0;\n  }\n\n  .decrement {\n    inset-inline-start: 0;\n  }\n\n  &.disabled {\n    .track {\n      background-color: var(--slider--track-color--disabled);\n      border-color: var(--slider--track-border-color--disabled);\n    }\n\n    .fill {\n      background-color: var(--slider--color--disabled);\n    }\n\n    .handle {\n      border-color: var(--slider--color--disabled);\n    }\n\n    .text {\n      color: var(--text--color--disabled);\n    }\n  }\n}\n\n/*\n.slider {\n\n\n\n\n\n\n\n\n\n}\n*/\n"],"mappings":""}

package/dist/js/packages/components/src/components/SuspenseTrigger/SuspenseTrigger.mjs

@@ -1,17 +1,15 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import { lazy } from 'react';
-
-const nonResolvingPromise = new Promise(
-  () => {
-  }
-);
-const NonResolvingLazy = lazy(() => nonResolvingPromise);
-const SuspenseTrigger = (props) => {
-  const { show = true } = props;
-  return show ? /* @__PURE__ */ jsx(NonResolvingLazy, {}) : null;
+import { lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SuspenseTrigger/SuspenseTrigger.tsx
+var nonResolvingPromise = new Promise(() => {});
+var NonResolvingLazy = lazy(() => nonResolvingPromise);
+var SuspenseTrigger = (props) => {
+	const { show = true } = props;
+	return show ? /* @__PURE__ */ jsx(NonResolvingLazy, {}) : null;
 };
-
+//#endregion
 export { SuspenseTrigger, SuspenseTrigger as default };
-//# sourceMappingURL=SuspenseTrigger.mjs.map
+
+//# sourceMappingURL=SuspenseTrigger.mjs.map

package/dist/js/packages/components/src/components/SuspenseTrigger/SuspenseTrigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SuspenseTrigger.mjs","sources":["../../../../../../../src/components/SuspenseTrigger/SuspenseTrigger.tsx"],"sourcesContent":["import { lazy, type ComponentType, type FC } from \"react\";\n\nexport interface SuspenseTriggerProps {\n  show?: boolean;\n}\n\nconst nonResolvingPromise = new Promise<{ default: ComponentType<unknown> }>(\n  () => {\n    // no resolve\n  },\n);\n\nconst NonResolvingLazy = lazy(() => nonResolvingPromise);\n\nexport const SuspenseTrigger: FC<SuspenseTriggerProps> = (props) => {\n  const { show = true } = props;\n  return show ? <NonResolvingLazy /> : null;\n};\n\nexport default SuspenseTrigger;\n"],"names":[],"mappings":";;;AAMA,MAAM,sBAAsB,IAAI,OAAA;AAAA,EAC9B,MAAM;AAAA,EAEN;AACF,CAAA;AAEA,MAAM,gBAAA,GAAmB,IAAA,CAAK,MAAM,mBAAmB,CAAA;AAEhD,MAAM,eAAA,GAA4C,CAAC,KAAA,KAAU;AAClE,EAAA,MAAM,EAAE,IAAA,GAAO,IAAA,EAAK,GAAI,KAAA;AACxB,EAAA,OAAO,IAAA,mBAAO,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,GAAK,IAAA;AACvC;;;;"}
+{"version":3,"file":"SuspenseTrigger.mjs","names":[],"sources":["../../../../../../../src/components/SuspenseTrigger/SuspenseTrigger.tsx"],"sourcesContent":["import { lazy, type ComponentType, type FC } from \"react\";\n\nexport interface SuspenseTriggerProps {\n  show?: boolean;\n}\n\nconst nonResolvingPromise = new Promise<{ default: ComponentType<unknown> }>(\n  () => {\n    // no resolve\n  },\n);\n\nconst NonResolvingLazy = lazy(() => nonResolvingPromise);\n\nexport const SuspenseTrigger: FC<SuspenseTriggerProps> = (props) => {\n  const { show = true } = props;\n  return show ? <NonResolvingLazy /> : null;\n};\n\nexport default SuspenseTrigger;\n"],"mappings":";;;;;AAMA,IAAM,sBAAsB,IAAI,cACxB,CAEN,CACF;AAEA,IAAM,mBAAmB,WAAW,mBAAmB;AAEvD,IAAa,mBAA6C,UAAU;CAClE,MAAM,EAAE,OAAO,SAAS;CACxB,OAAO,OAAO,oBAAC,kBAAD,CAAmB,CAAA,IAAI;AACvC"}

package/dist/js/packages/components/src/components/Switch/Switch.mjs

@@ -1,58 +1,55 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'react';
-import * as Aria from 'react-aria-components';
-import styles from './Switch.module.scss.mjs';
-import clsx from 'clsx';
-import '@mittwald/flow-icons';
-import '../Icon/components/IconSetProvider.mjs';
-import '../Icon/Icon.mjs';
-import '../../views/IconView.mjs';
-import { IconCheck } from '../Icon/components/icons/IconCheck.mjs';
-import { IconClose } from '../Icon/components/icons/IconClose.mjs';
-import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-import '../../lib/propsContext/propsContext.mjs';
-import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import styles$1 from '../Label/Label.module.scss.mjs';
-import { useObjectRef } from 'react-aria';
-
-const Switch = flowComponent("Switch", (props) => {
-  const {
-    children,
-    className,
-    labelPosition = "trailing",
-    ref,
-    ...rest
-  } = props;
-  const rootClassName = clsx(
-    styles.switch,
-    className,
-    styles[`label-${labelPosition}`]
-  );
-  const objectRef = useObjectRef(ref);
-  const {
-    FieldErrorView,
-    FieldErrorCaptureContext,
-    fieldPropsContext,
-    fieldProps
-  } = useFieldComponent(props);
-  const propsContext = {
-    ...fieldPropsContext,
-    Label: {
-      ...fieldPropsContext.Label,
-      optional: false
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
-    /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Switch, { ...rest, className: rootClassName, inputRef: objectRef, children: ({ isSelected }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
-      /* @__PURE__ */ jsx("div", { className: styles.track, children: /* @__PURE__ */ jsx("div", { className: styles.handle, children: isSelected ? /* @__PURE__ */ jsx(IconCheck, { size: "s" }) : /* @__PURE__ */ jsx(IconClose, { size: "s" }) }) }),
-      /* @__PURE__ */ jsx("div", { className: styles$1.label, children })
-    ] }) }) }),
-    /* @__PURE__ */ jsx(FieldErrorView, {})
-  ] });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { IconCheck } from "../Icon/components/icons/IconCheck.mjs";
+import { IconClose } from "../Icon/components/icons/IconClose.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import Switch_module_default from "./Switch.module.mjs";
+import Label_module_default from "../Label/Label.module.mjs";
+import clsx from "clsx";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+import { useObjectRef } from "react-aria";
+//#region src/components/Switch/Switch.tsx
+/** @flr-generate all */
+var Switch = flowComponent("Switch", (props) => {
+	const { children, className, labelPosition = "trailing", ref, ...rest } = props;
+	const rootClassName = clsx(Switch_module_default.switch, labelPosition !== "trailing" && Switch_module_default[`label-${labelPosition}`], className);
+	const objectRef = useObjectRef(ref);
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Switch");
+	const propsContext = {
+		...fieldPropsContext,
+		Label: {
+			...fieldPropsContext.Label,
+			optional: false,
+			className: Switch_module_default.label
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...fieldProps,
+		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(Aria.Switch, {
+			...rest,
+			className: rootClassName,
+			inputRef: objectRef,
+			children: ({ isSelected }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
+				props: propsContext,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: Switch_module_default.track,
+					children: /* @__PURE__ */ jsx("div", {
+						className: Switch_module_default.handle,
+						children: isSelected ? /* @__PURE__ */ jsx(IconCheck, { size: "s" }) : /* @__PURE__ */ jsx(IconClose, { size: "s" })
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: Label_module_default.label,
+					children
+				})]
+			})
+		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+	});
 });
+//#endregion
+export { Switch, Switch as default };
 
-export { Switch };
-//# sourceMappingURL=Switch.mjs.map
+//# sourceMappingURL=Switch.mjs.map

package/dist/js/packages/components/src/components/Switch/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"../Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n  extends\n    PropsWithChildren<Omit<Aria.SwitchProps, \"children\" | \"inputRef\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /**\n   * Whether the label should appear before or after the switch. @default\n   * \"trailing\"\n   */\n  labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n  const {\n    children,\n    className,\n    labelPosition = \"trailing\",\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.switch,\n    className,\n    styles[`label-${labelPosition}`],\n  );\n\n  const objectRef = useObjectRef(ref);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      optional: false,\n    },\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorCaptureContext>\n        <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n          {({ isSelected }) => (\n            <PropsContextProvider props={propsContext}>\n              <div className={styles.track}>\n                <div className={styles.handle}>\n                  {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n                </div>\n              </div>\n              <div className={labelStyles.label}>{children}</div>\n            </PropsContextProvider>\n          )}\n        </Aria.Switch>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Switch;\n"],"names":["labelStyles"],"mappings":";;;;;;;;;;;;;;;;;;AAwBO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA,GAAgB,UAAA;AAAA,IAChB,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,MAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAA,MAAA,EAAS,aAAa,CAAA,CAAE;AAAA,GACjC;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAElC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,iBAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,GAAG,iBAAA;AAAA,IACH,KAAA,EAAO;AAAA,MACL,GAAG,iBAAA,CAAkB,KAAA;AAAA,MACrB,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,4BACC,QAAA,kBAAA,GAAA,CAAC,IAAA,CAAK,QAAL,EAAa,GAAG,MAAM,SAAA,EAAW,aAAA,EAAe,QAAA,EAAU,SAAA,EACxD,WAAC,EAAE,UAAA,uBACF,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,KAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,MAAA,EACpB,QAAA,EAAA,UAAA,uBAAc,SAAA,EAAA,EAAU,IAAA,EAAK,KAAI,CAAA,mBAAK,GAAA,CAAC,aAAU,IAAA,EAAK,GAAA,EAAI,GAC7D,CAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWA,QAAA,CAAY,OAAQ,QAAA,EAAS;AAAA,KAAA,EAC/C,GAEJ,CAAA,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Switch.mjs","names":[],"sources":["../../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport labelStyles from \"@/components/Label/Label.module.scss\";\nimport { useObjectRef } from \"react-aria\";\n\nexport interface SwitchProps\n  extends\n    PropsWithChildren<Omit<Aria.SwitchProps, \"children\" | \"inputRef\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /**\n   * Whether the label should appear before or after the switch. @default\n   * \"trailing\"\n   */\n  labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n  const {\n    children,\n    className,\n    labelPosition = \"trailing\",\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.switch,\n    labelPosition !== \"trailing\" && styles[`label-${labelPosition}`],\n    className,\n  );\n\n  const objectRef = useObjectRef(ref);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props, \"Switch\");\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    Label: {\n      ...fieldPropsContext.Label,\n      optional: false,\n      className: styles.label,\n    },\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorCaptureContext>\n        <Aria.Switch {...rest} className={rootClassName} inputRef={objectRef}>\n          {({ isSelected }) => (\n            <PropsContextProvider props={propsContext}>\n              <div className={styles.track}>\n                <div className={styles.handle}>\n                  {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n                </div>\n              </div>\n              <div className={labelStyles.label}>{children}</div>\n            </PropsContextProvider>\n          )}\n        </Aria.Switch>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Switch;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,gBAAgB,YAChB,KACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpB,sBAAO,QACP,kBAAkB,cAAc,sBAAO,SAAS,kBAChD,SACF;CAEA,MAAM,YAAY,aAAa,GAAG;CAElC,MAAM,EACJ,gBACA,0BACA,mBACA,eACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,eAA6B;EACjC,GAAG;EACH,OAAO;GACL,GAAG,kBAAkB;GACrB,UAAU;GACV,WAAW,sBAAO;EACpB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,KAAK,QAAN;GAAa,GAAI;GAAM,WAAW;GAAe,UAAU;GACvD,WAAA,EAAE,iBACF,qBAAC,sBAAD;IAAsB,OAAO;IAA7B,UAAA,CACE,oBAAC,OAAD;KAAK,WAAW,sBAAO;KACrB,UAAA,oBAAC,OAAD;MAAK,WAAW,sBAAO;MACpB,UAAA,aAAa,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA,IAAI,oBAAC,WAAD,EAAW,MAAK,IAAK,CAAA;KACzD,CAAA;IACF,CAAA,GACL,oBAAC,OAAD;KAAK,WAAW,qBAAY;KAAQ;IAAc,CAAA,CAC9B;;EAEb,CAAA,EACW,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CAAC"}

package/dist/js/packages/components/src/components/Switch/Switch.module.mjs

@@ -0,0 +1,17 @@
+"use client"
+/* */
+//#region src/components/Switch/Switch.module.scss
+var track = "flow--switch--track";
+var handle = "flow--switch--handle";
+var label = "flow--switch--label";
+var Switch_module_default = {
+	"switch": "flow--switch",
+	"label-leading": "flow--switch--label-leading",
+	track,
+	handle,
+	label
+};
+//#endregion
+export { Switch_module_default as default, handle, label, track };
+
+//# sourceMappingURL=Switch.module.mjs.map

package/dist/js/packages/components/src/components/Switch/Switch.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.mjs","names":[],"sources":["../../../../../../../src/components/Switch/Switch.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/formControl\";\n\n.switch {\n  @include formControl.formHiddenInputScrollBehaviorFix;\n\n  display: flex;\n  align-items: center;\n  column-gap: var(--switch--label-to-track-spacing);\n\n  &.label-leading {\n    flex-direction: row-reverse;\n  }\n\n  /* Elements */\n  .track {\n    width: var(--switch--track-width);\n    height: var(--switch--track-height);\n    background-color: var(--switch--track-background-color--default);\n    border-radius: var(--switch--track-corner-radius);\n    padding: var(--switch--track-padding);\n    flex-shrink: 0;\n    position: relative;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n    align-self: start;\n\n    @include focus.focus;\n  }\n\n  .handle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: var(--switch--handle-size);\n    height: var(--switch--handle-size);\n    background-color: var(--switch--handle-background-color);\n    border-radius: var(--corner-radius--round);\n    transition-property: transform;\n    transition-duration: var(--transition--duration--default);\n    transform: translateX(0);\n    position: absolute;\n    top: var(--switch--track-padding);\n    inset-inline-start: var(--switch--track-padding);\n  }\n\n  .label {\n    margin: 0;\n  }\n\n  /* States */\n\n  &[data-focus-visible] .track {\n    outline-style: solid;\n  }\n\n  &[data-selected] {\n    .track {\n      background-color: var(--switch--track-background-color--selected);\n    }\n\n    .handle {\n      transform: translate(100%);\n    }\n  }\n\n  &[data-disabled] {\n    .track {\n      background-color: var(--switch--track-background-color--disabled);\n      color: var(--switch--track-background-color--disabled);\n    }\n\n    .handle {\n      color: var(--switch--handle-content-color--disabled);\n    }\n  }\n}\n"],"mappings":""}