@mittwald/flow-react-components 1.5.0-next.9 → 1.5.0

package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport {\n  overlayTriggersTunneledTo,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n  PropsWithClassName &\n  RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n  \"SectionHeader\",\n  (props) => {\n    const { children, className, ref } = props;\n\n    const rootClassName = clsx(styles.sectionHeader, className);\n\n    const actionsTunnel = {\n      id: \"actions\",\n      component: \"SectionHeader\",\n    } as const;\n\n    const propsContext: PropsContext = {\n      ...overlayTriggersTunneledTo(actionsTunnel),\n      Switch: {\n        labelPosition: \"leading\",\n        tunnel: actionsTunnel,\n      },\n      Button: {\n        size: \"s\",\n        tunnel: actionsTunnel,\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n        tunnel: actionsTunnel,\n        Button: {\n          tunnel: null,\n        },\n        Switch: {\n          tunnel: null,\n        },\n        Link: {\n          size: \"m\",\n          tunnel: null,\n        },\n      },\n      FileField: {\n        tunnel: actionsTunnel,\n        Button: { size: \"s\" },\n      },\n      Action: {\n        tunnel: actionsTunnel,\n        Button: {\n          tunnel: null,\n        },\n      },\n      Heading: {\n        level: 2,\n      },\n      Link: {\n        tunnel: actionsTunnel,\n      },\n    };\n\n    return (\n      <header ref={ref} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n          <div className={styles.actions}>\n            <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n          </div>\n        </PropsContextProvider>\n      </header>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default SectionHeader;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,QAAQ;CAErC,MAAM,gBAAgB,KAAK,6BAAO,eAAe,SAAS;CAE1D,MAAM,gBAAgB;EACpB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,aAAa;EAC1C,QAAQ;GACN,eAAe;GACf,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,QAAQ;EACV;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;GACA,QAAQ,EACN,QAAQ,KACV;GACA,MAAM;IACJ,MAAM;IACN,QAAQ;GACV;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;EACA,SAAS,EACP,OAAO,EACT;EACA,MAAM,EACJ,QAAQ,cACV;CACF;CAEA,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW;EAC3B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,OAAD;IAAK,WAAW,6BAAO;IACrB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAU,WAAU;IAAiB,CAAA;GAC5D,CAAA,CACe;;CAChB,CAAA;AAEZ,GACA,EACE,MAAM,SACR,CACF"}
+{"version":3,"file":"SectionHeader.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport {\n  overlayTriggersTunneledTo,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n  PropsWithClassName &\n  RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = flowComponent(\n  \"SectionHeader\",\n  (props) => {\n    const { children, className, ref } = props;\n\n    const rootClassName = clsx(styles.sectionHeader, className);\n\n    const actionsTunnel = {\n      id: \"actions\",\n      component: \"SectionHeader\",\n    } as const;\n\n    const propsContext: PropsContext = {\n      ...overlayTriggersTunneledTo(actionsTunnel),\n      Switch: {\n        labelPosition: \"leading\",\n        tunnel: actionsTunnel,\n      },\n      Button: {\n        size: \"s\",\n        tunnel: actionsTunnel,\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n        tunnel: actionsTunnel,\n        Button: {\n          tunnel: null,\n        },\n        Switch: {\n          tunnel: null,\n        },\n        Link: {\n          size: \"m\",\n          tunnel: null,\n        },\n      },\n      FileField: {\n        tunnel: actionsTunnel,\n        Button: { size: \"s\" },\n      },\n      Action: {\n        tunnel: actionsTunnel,\n        Button: {\n          tunnel: null,\n        },\n      },\n      Heading: {\n        level: 2,\n      },\n      Link: {\n        tunnel: actionsTunnel,\n      },\n    };\n\n    return (\n      <header ref={ref} className={rootClassName}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n          <div className={styles.actions}>\n            <UiComponentTunnelExit id=\"actions\" component=\"SectionHeader\" />\n          </div>\n        </PropsContextProvider>\n      </header>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default SectionHeader;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gBAAwC,cACnD,kBACC,UAAU;CACT,MAAM,EAAE,UAAU,WAAW,QAAQ;CAErC,MAAM,gBAAgB,KAAKA,6BAAO,eAAe,SAAS;CAE1D,MAAM,gBAAgB;EACpB,IAAI;EACJ,WAAW;CACb;CAEA,MAAM,eAA6B;EACjC,GAAG,0BAA0B,aAAa;EAC1C,QAAQ;GACN,eAAe;GACf,QAAQ;EACV;EACA,QAAQ;GACN,MAAM;GACN,QAAQ;EACV;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;GACA,QAAQ,EACN,QAAQ,KACV;GACA,MAAM;IACJ,MAAM;IACN,QAAQ;GACV;EACF;EACA,WAAW;GACT,QAAQ;GACR,QAAQ,EAAE,MAAM,IAAI;EACtB;EACA,QAAQ;GACN,QAAQ;GACR,QAAQ,EACN,QAAQ,KACV;EACF;EACA,SAAS,EACP,OAAO,EACT;EACA,MAAM,EACJ,QAAQ,cACV;CACF;CAEA,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW;EAC3B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,OAAD;IAAK,WAAWA,6BAAO;IACrB,UAAA,oBAAC,uBAAD;KAAuB,IAAG;KAAU,WAAU;IAAiB,CAAA;GAC5D,CAAA,CACe;;CAChB,CAAA;AAEZ,GACA,EACE,MAAM,SACR,CACF"}

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

@@ -22,7 +22,7 @@ import * as Aria from "react-aria-components";
 var SegmentedControl = flowComponent("SegmentedControl", (props) => {
 	useWarnDeprecation()("The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.");
 	const { children, className, containerBreakpointSize = "m", ref, ...rest } = props;
-	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "SegmentedControl");
+	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext, skeletonProps } = useFieldComponent(props, "SegmentedControl");
 	const rootClassName = clsx(FormField_module_default.formField, SegmentedControl_module_default.segmentedControlContainer, SegmentedControl_module_default[getContainerBreakpointSizeClassName(containerBreakpointSize)], className);
 	const propsContext = {
 		Segment: {
@@ -38,7 +38,9 @@ var SegmentedControl = flowComponent("SegmentedControl", (props) => {
 	useMakeFocusable(objectRef);
 	return /* @__PURE__ */ jsxs(Aria.RadioGroup, {
 		...rest,
-		className: clsx(rootClassName, fieldProps.className),
+		...skeletonProps,
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		ref: objectRef,
 		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			dependencies: ["segment"],

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/**\n * @deprecated Use `Tabs` to switch content, or `RadioGroup` to select a value.\n * @flr-generate all\n */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const warnDeprecation = useWarnDeprecation();\n  warnDeprecation(\n    \"The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.\",\n  );\n\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"SegmentedControl\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnel: {\n        id: \"segments\",\n        component: \"SegmentedControl\",\n      },\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <UiComponentTunnelExit\n                id=\"segments\"\n                component=\"SegmentedControl\"\n              />\n            </div>\n          </div>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAE3E,mBAAA,CAAA,CACE,oLACF;CAEA,MAAM,EACJ,UACA,WACA,0BAA0B,KAC1B,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,OAAO,kBAAkB;CAE/C,MAAM,gBAAgB,KACpB,yBAAgB,WAChB,gCAAO,2BACP,gCAAO,oCAAoC,uBAAuB,IAClE,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAW,gCAAO;EACpB;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,SAAS;EACnD,KAAK;EAHP,UAAA,CAKE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,cAAc,CAAC,SAAS;GAAG,OAAO;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAK,WAAW,gCAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAW,gCAAO;KACrB,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACE,CAAA;GACF,CAAA,GACJ,QACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"SegmentedControl.mjs","names":["formFieldStyles","styles"],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SegmentedControlProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\n    PropsWithContainerBreakpointSize {}\n\n/**\n * @deprecated Use `Tabs` to switch content, or `RadioGroup` to select a value.\n * @flr-generate all\n */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const warnDeprecation = useWarnDeprecation();\n  warnDeprecation(\n    \"The 'SegmentedControl' component is deprecated and will be removed in a future release. Use 'Tabs' instead when it switches content, or 'RadioGroup' instead when it sets a value.\",\n  );\n\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"SegmentedControl\");\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Segment: {\n      tunnel: {\n        id: \"segments\",\n        component: \"SegmentedControl\",\n      },\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      {...skeletonProps}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n      ref={objectRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <UiComponentTunnelExit\n                id=\"segments\"\n                component=\"SegmentedControl\"\n              />\n            </div>\n          </div>\n          {children}\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,IAAa,mBAAmB,cAAc,qBAAqB,UAAU;CAE3E,mBAAA,CAAA,CACE,oLACF;CAEA,MAAM,EACJ,UACA,WACA,0BAA0B,KAC1B,KACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,mBACA,cACA,cACA,0BACA,kBACE,kBAAkB,OAAO,kBAAkB;CAE/C,MAAM,gBAAgB,KACpBA,yBAAgB,WAChBC,gCAAO,2BACPA,gCAAO,oCAAoC,uBAAuB,IAClE,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,QAAQ;IACN,IAAI;IACJ,WAAW;GACb;GACA,WAAWA,gCAAO;EACpB;EACA,GAAG;CACL;CAEA,MAAM,YAAY,aAAa,GAAG;CAClC,iBAAiB,SAAS;CAE1B,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,KAAK;EALP,UAAA,CAOE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,cAAc,CAAC,SAAS;GAAG,OAAO;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAK,WAAWA,gCAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAWA,gCAAO;KACrB,UAAA,oBAAC,uBAAD;MACE,IAAG;MACH,WAAU;KACX,CAAA;IACE,CAAA;GACF,CAAA,GACJ,QACmB;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

@@ -8,13 +8,15 @@ var segment = "flow--segmented-control--segment";
 var SegmentedControl_module_default = {
 	segmentedControl,
 	segments,
+	"skeleton-surface-shimmer": "flow--segmented-control--skeleton-surface-shimmer",
 	segmentedControlContainer,
 	"container-breakpoint-size-xs": "flow--segmented-control--container-breakpoint-size-xs",
 	segment,
 	"container-breakpoint-size-s": "flow--segmented-control--container-breakpoint-size-s",
 	"container-breakpoint-size-m": "flow--segmented-control--container-breakpoint-size-m",
 	"container-breakpoint-size-l": "flow--segmented-control--container-breakpoint-size-l",
-	"container-breakpoint-size-xl": "flow--segmented-control--container-breakpoint-size-xl"
+	"container-breakpoint-size-xl": "flow--segmented-control--container-breakpoint-size-xl",
+	"skeleton-text-shimmer": "flow--segmented-control--skeleton-text-shimmer"
 };
 //#endregion
 export { SegmentedControl_module_default as default, segment, segmentedControl, segmentedControlContainer, segments };

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.module.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.module.scss"],"sourcesContent":["@use \"@/styles/mixins/containerBreakpointSizes\";\n\n.segmentedControl {\n  order: 2;\n  container-type: inline-size;\n  isolation: isolate;\n\n  .segments {\n    display: flex;\n    flex-wrap: nowrap;\n    order: 2;\n  }\n}\n\n.segmentedControlContainer {\n  @include containerBreakpointSizes.containerBreakpointSizes(\n    250,\n    400,\n    550,\n    700,\n    850\n  ) {\n    .segmentedControl {\n      .segments {\n        flex-direction: column;\n      }\n\n      .segment {\n        margin-bottom: -1px; /* Collapse borders */\n        margin-inline-end: 0;\n\n        &:first-of-type {\n          border-start-start-radius: var(--form-control--corner-radius);\n          border-start-end-radius: var(--form-control--corner-radius);\n          border-end-start-radius: 0;\n        }\n\n        &:last-of-type {\n          border-end-end-radius: var(--form-control--corner-radius);\n          border-end-start-radius: var(--form-control--corner-radius);\n          border-start-end-radius: 0;\n          margin: 0;\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SegmentedControl.module.mjs","names":[],"sources":["../../../../../../../src/components/SegmentedControl/SegmentedControl.module.scss"],"sourcesContent":["@use \"@/styles/mixins/containerBreakpointSizes\";\n@use \"@/styles/mixins/formControl\";\n\n.segmentedControl {\n  order: 2;\n  container-type: inline-size;\n  isolation: isolate;\n\n  .segments {\n    display: flex;\n    flex-wrap: nowrap;\n    order: 2;\n\n    /* Skeleton: all segments form one surface */\n    @include formControl.formSkeleton;\n  }\n}\n\n.segmentedControlContainer {\n  @include containerBreakpointSizes.containerBreakpointSizes(\n    250,\n    400,\n    550,\n    700,\n    850\n  ) {\n    .segmentedControl {\n      .segments {\n        flex-direction: column;\n      }\n\n      .segment {\n        margin-bottom: -1px; /* Collapse borders */\n        margin-inline-end: 0;\n\n        &:first-of-type {\n          border-start-start-radius: var(--form-control--corner-radius);\n          border-start-end-radius: var(--form-control--corner-radius);\n          border-end-start-radius: 0;\n        }\n\n        &:last-of-type {\n          border-end-end-radius: var(--form-control--corner-radius);\n          border-end-start-radius: var(--form-control--corner-radius);\n          border-start-end-radius: 0;\n          margin: 0;\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Segment.mjs","names":[],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —\n *   `RadioButton` takes exactly this component's props.\n * @flr-generate all\n */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n  // No deprecation warning here — a Segment only renders inside a\n  // SegmentedControl, which already warns.\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.segment, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {children}\n      <IconCheck className={styles.checkmark} />\n    </Aria.Radio>\n  );\n});\n\nexport default Segment;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,UAAU,cAAc,YAAY,UAAU;CAGzD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,qBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EAArD,UAAA,CACG,UACD,oBAAC,WAAD,EAAW,WAAW,uBAAO,UAAY,CAAA,CAC/B;;AAEhB,CAAC"}
+{"version":3,"file":"Segment.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n  extends\n    PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/**\n * @deprecated Use `Tab` inside `Tabs`, or `RadioButton` inside a `RadioGroup` —\n *   `RadioButton` takes exactly this component's props.\n * @flr-generate all\n */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n  // No deprecation warning here — a Segment only renders inside a\n  // SegmentedControl, which already warns.\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.segment, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {children}\n      <IconCheck className={styles.checkmark} />\n    </Aria.Radio>\n  );\n});\n\nexport default Segment;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,UAAU,cAAc,YAAY,UAAU;CAGzD,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,OACE,qBAAC,KAAK,OAAN;EAAY,GAAI;EAAM,WAAW;EAAoB;EAArD,UAAA,CACG,UACD,oBAAC,WAAD,EAAW,WAAWA,uBAAO,UAAY,CAAA,CAC/B;;AAEhB,CAAC"}

package/dist/js/packages/components/src/components/SegmentedControl/components/Segment/Segment.module.mjs

@@ -7,7 +7,9 @@ var checkmark = "flow--segmented-control--segment--checkmark";
 var Segment_module_default = {
 	segment,
 	readonly,
-	checkmark
+	"skeleton-surface-shimmer": "flow--segmented-control--segment--skeleton-surface-shimmer",
+	checkmark,
+	"skeleton-text-shimmer": "flow--segmented-control--segment--skeleton-text-shimmer"
 };
 //#endregion
 export { checkmark, Segment_module_default as default, readonly, segment };

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

@@ -21,7 +21,7 @@ var Select = flowComponent("Select", (props) => {
 	const { children, className, onChange, onSelectionChange, isReadOnly, ref, ...rest } = props;
 	const warnDeprecation = useWarnDeprecation();
 	if (onSelectionChange !== void 0) warnDeprecation("The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.");
-	const { FieldErrorView, fieldPropsContext, fieldProps, FieldErrorCaptureContext } = useFieldComponent(props, "Select");
+	const { FieldErrorView, fieldPropsContext, wrapperProps, controlProps, FieldErrorCaptureContext, skeletonProps } = useFieldComponent(props, "Select");
 	const rootClassName = clsx(Select_module_default.select, FormField_module_default.formField, className);
 	const propsContext = {
 		Option: { tunnel: getOptionsTunnelProps("Select") },
@@ -31,8 +31,9 @@ var Select = flowComponent("Select", (props) => {
 	const isOpen = controller.useIsOpen();
 	return /* @__PURE__ */ jsxs(Aria.Select, {
 		...rest,
-		...fieldProps,
-		className: clsx(rootClassName, fieldProps.className),
+		...controlProps,
+		...skeletonProps,
+		className: clsx(rootClassName, wrapperProps.className),
 		onChange: (value) => {
 			if (!isReadOnly) {
 				onChange?.(value);

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

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n  extends\n    PropsWithChildren<\n      Omit<\n        Aria.SelectProps<string, \"single\" | \"multiple\">,\n        \"children\" | \"className\" | \"ref\"\n      >\n    >,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | Key[] | null) => void;\n  /** @deprecated Use `onChange` instead. */\n  onSelectionChange?: (value: Key | Key[] | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const warnDeprecation = useWarnDeprecation();\n  if (onSelectionChange !== undefined) {\n    warnDeprecation(\n      \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n    );\n  }\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(props, \"Select\");\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Select\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...fieldProps}\n      className={clsx(rootClassName, fieldProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <Aria.Button\n            data-readonly={isReadOnly}\n            className={styles.toggle}\n            ref={ref}\n          >\n            <Aria.SelectValue>\n              {({ selectedText, isPlaceholder }) =>\n                isPlaceholder || !selectedText ? undefined : selectedText\n              }\n            </Aria.SelectValue>\n            <IconChevronDown />\n          </Aria.Button>\n          {children}\n          <Options controller={controller}>\n            <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n          </Options>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,UACA,mBACA,YACA,KACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,sBAAsB,KAAA,GACxB,gBACE,6GACF;CAGF,MAAM,EACJ,gBACA,mBACA,YACA,6BACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpB,sBAAO,QACP,yBAAgB,WAChB,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,QAAQ,EACxC;EACA,GAAG;CACL;CAEA,MAAM,aAAa,qBAAqB,UAAU,EAChD,4BAA4B,MAC9B,CAAC;CACD,MAAM,SAAS,WAAW,UAAU;CAEpC,OACE,qBAAC,KAAK,QAAN;EACE,GAAI;EACJ,GAAI;EACJ,WAAW,KAAK,eAAe,WAAW,SAAS;EACnD,WAAW,UAAU;GACnB,IAAI,CAAC,YAAY;IACf,WAAW,KAAK;IAChB,oBAAoB,KAAK;GAC3B;EACF;EACA,eAAe,WAAW,CAAC,cAAc,WAAW,QAAQ,MAAM;EAC1D;EACR,iBAAe;EAZjB,UAAA,CAcE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,qBAAC,KAAK,QAAN;KACE,iBAAe;KACf,WAAW,sBAAO;KACb;KAHP,UAAA,CAKE,oBAAC,KAAK,aAAN,EAAA,WACI,EAAE,cAAc,oBAChB,iBAAiB,CAAC,eAAe,KAAA,IAAY,aAE/B,CAAA,GAClB,oBAAC,iBAAD,CAAkB,CAAA,CACP;;IACZ;IACD,oBAAC,SAAD;KAAqB;KACnB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAU,CAAA;IACjD,CAAA;GACW;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACN;;AAEjB,CAAC"}
+{"version":3,"file":"Select.mjs","names":["styles","formFieldStyles"],"sources":["../../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { getOptionsTunnelProps } from \"@/components/Option/optionsTunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { UiComponentTunnelExit } from \"../UiComponentTunnel/UiComponentTunnelExit\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface SelectProps\n  extends\n    PropsWithChildren<\n      Omit<\n        Aria.SelectProps<string, \"single\" | \"multiple\">,\n        \"children\" | \"className\" | \"ref\"\n      >\n    >,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | Key[] | null) => void;\n  /** @deprecated Use `onChange` instead. */\n  onSelectionChange?: (value: Key | Key[] | null) => void;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange,\n    onSelectionChange,\n    isReadOnly,\n    ref,\n    ...rest\n  } = props;\n\n  const warnDeprecation = useWarnDeprecation();\n  if (onSelectionChange !== undefined) {\n    warnDeprecation(\n      \"The 'onSelectionChange' prop is deprecated and will be removed in a future release. Use 'onChange' instead.\",\n    );\n  }\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    wrapperProps,\n    controlProps,\n    FieldErrorCaptureContext,\n    skeletonProps,\n  } = useFieldComponent(props, \"Select\");\n\n  const rootClassName = clsx(\n    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnel: getOptionsTunnelProps(\"Select\"),\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...controlProps}\n      {...skeletonProps}\n      className={clsx(rootClassName, wrapperProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider props={propsContext}>\n          <Aria.Button\n            data-readonly={isReadOnly}\n            className={styles.toggle}\n            ref={ref}\n          >\n            <Aria.SelectValue>\n              {({ selectedText, isPlaceholder }) =>\n                isPlaceholder || !selectedText ? undefined : selectedText\n              }\n            </Aria.SelectValue>\n            <IconChevronDown />\n          </Aria.Button>\n          {children}\n          <Options controller={controller}>\n            <UiComponentTunnelExit id=\"options\" component=\"Select\" />\n          </Options>\n        </PropsContextProvider>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,UACA,WACA,UACA,mBACA,YACA,KACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB;CAC3C,IAAI,sBAAsB,KAAA,GACxB,gBACE,6GACF;CAGF,MAAM,EACJ,gBACA,mBACA,cACA,cACA,0BACA,kBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpBA,sBAAO,QACPC,yBAAgB,WAChB,SACF;CAEA,MAAM,eAA6B;EACjC,QAAQ,EACN,QAAQ,sBAAsB,QAAQ,EACxC;EACA,GAAG;CACL;CAEA,MAAM,aAAa,qBAAqB,UAAU,EAChD,4BAA4B,MAC9B,CAAC;CACD,MAAM,SAAS,WAAW,UAAU;CAEpC,OACE,qBAAC,KAAK,QAAN;EACE,GAAI;EACJ,GAAI;EACJ,GAAI;EACJ,WAAW,KAAK,eAAe,aAAa,SAAS;EACrD,WAAW,UAAU;GACnB,IAAI,CAAC,YAAY;IACf,WAAW,KAAK;IAChB,oBAAoB,KAAK;GAC3B;EACF;EACA,eAAe,WAAW,CAAC,cAAc,WAAW,QAAQ,MAAM;EAC1D;EACR,iBAAe;EAbjB,UAAA,CAeE,oBAAC,0BAAD,EAAA,UACE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACE,qBAAC,KAAK,QAAN;KACE,iBAAe;KACf,WAAWD,sBAAO;KACb;KAHP,UAAA,CAKE,oBAAC,KAAK,aAAN,EAAA,WACI,EAAE,cAAc,oBAChB,iBAAiB,CAAC,eAAe,KAAA,IAAY,aAE/B,CAAA,GAClB,oBAAC,iBAAD,CAAkB,CAAA,CACP;;IACZ;IACD,oBAAC,SAAD;KAAqB;KACnB,UAAA,oBAAC,uBAAD;MAAuB,IAAG;MAAU,WAAU;KAAU,CAAA;IACjD,CAAA;GACW;EACE,CAAA,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACN;;AAEjB,CAAC"}

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

@@ -7,7 +7,9 @@ var readonly = "flow--select--readonly";
 var Select_module_default = {
 	select,
 	toggle,
-	readonly
+	readonly,
+	"skeleton-surface-shimmer": "flow--select--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--select--skeleton-text-shimmer"
 };
 //#endregion
 export { Select_module_default as default, readonly, select, toggle };

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

@@ -1 +1 @@
-{"version":3,"file":"Select.module.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.select {\n  .toggle {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: normal;\n    font-size: var(--font-size-text--m);\n    text-align: start;\n\n    @include formControl.formControl();\n\n    & {\n      padding-inline-end: var(--button--padding-icon-only);\n    }\n\n    :global(.flow--option--check-mark) {\n      display: none;\n    }\n  }\n\n  &[data-invalid] {\n    .toggle {\n      border-color: var(--form-control--border-color--invalid);\n      background-color: var(--form-control--background-color--invalid);\n    }\n  }\n\n  :global(.react-aria-SelectValue) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Select.module.mjs","names":[],"sources":["../../../../../../../src/components/Select/Select.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.select {\n  .toggle {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    font-weight: normal;\n    font-size: var(--font-size-text--m);\n    text-align: start;\n\n    @include formControl.formControl();\n\n    & {\n      padding-inline-end: var(--button--padding-icon-only);\n    }\n\n    :global(.flow--option--check-mark) {\n      display: none;\n    }\n  }\n\n  &[data-invalid] {\n    .toggle {\n      border-color: var(--form-control--border-color--invalid);\n      background-color: var(--form-control--background-color--invalid);\n    }\n  }\n\n  /* Skeleton: as specific as the invalid state above, and after it */\n  &[data-skeleton] .toggle {\n    @include formControl.formSkeletonShape;\n  }\n\n  :global(.react-aria-SelectValue) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.mjs","names":[],"sources":["../../../../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Separator.module.scss\";\nimport * as Aria from \"react-aria-components\";\n\nexport type SeparatorProps = Aria.SeparatorProps;\n\n/** @flr-generate all */\nexport const Separator: FC<SeparatorProps> = (props) => {\n  const { className, orientation = \"horizontal\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.separator,\n    orientation === \"vertical\" && styles.vertical,\n    className,\n  );\n\n  return (\n    <Aria.Separator elementType=\"hr\" className={rootClassName} {...rest} />\n  );\n};\n\nexport default Separator;\n"],"mappings":";;;;;;;;AAQA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,WAAW,cAAc,cAAc,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KACpB,yBAAO,WACP,gBAAgB,cAAc,yBAAO,UACrC,SACF;CAEA,OACE,oBAAC,KAAK,WAAN;EAAgB,aAAY;EAAK,WAAW;EAAe,GAAI;CAAO,CAAA;AAE1E"}
+{"version":3,"file":"Separator.mjs","names":["styles"],"sources":["../../../../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Separator.module.scss\";\nimport * as Aria from \"react-aria-components\";\n\nexport type SeparatorProps = Aria.SeparatorProps;\n\n/** @flr-generate all */\nexport const Separator: FC<SeparatorProps> = (props) => {\n  const { className, orientation = \"horizontal\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.separator,\n    orientation === \"vertical\" && styles.vertical,\n    className,\n  );\n\n  return (\n    <Aria.Separator elementType=\"hr\" className={rootClassName} {...rest} />\n  );\n};\n\nexport default Separator;\n"],"mappings":";;;;;;;;AAQA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,WAAW,cAAc,cAAc,GAAG,SAAS;CAE3D,MAAM,gBAAgB,KACpBA,yBAAO,WACP,gBAAgB,cAAcA,yBAAO,UACrC,SACF;CAEA,OACE,oBAAC,KAAK,WAAN;EAAgB,aAAY;EAAK,WAAW;EAAe,GAAI;CAAO,CAAA;AAE1E"}

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.mjs","names":[],"sources":["../../../../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties, FC } from \"react\";\nimport styles from \"./Skeleton.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface SkeletonProps extends ComponentProps<\"div\"> {\n  /** The width of the skeleton. */\n  width?: CSSProperties[\"width\"];\n  /** The height of the skeleton. */\n  height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Skeleton: FC<SkeletonProps> = (props) => {\n  const { width, height, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.skeleton, className);\n\n  return (\n    <div\n      className={rootClassName}\n      aria-hidden\n      style={{ height, width }}\n      {...rest}\n    />\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;;AAYA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,QAAQ,WAAW,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,wBAAO,UAAU,SAAS;CAErD,OACE,oBAAC,OAAD;EACE,WAAW;EACX,eAAA;EACA,OAAO;GAAE;GAAQ;EAAM;EACvB,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"Skeleton.mjs","names":["styles"],"sources":["../../../../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties, FC } from \"react\";\nimport styles from \"./Skeleton.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface SkeletonProps extends ComponentProps<\"div\"> {\n  /** The width of the skeleton. */\n  width?: CSSProperties[\"width\"];\n  /** The height of the skeleton. */\n  height?: CSSProperties[\"height\"];\n}\n\n/** @flr-generate all */\nexport const Skeleton: FC<SkeletonProps> = (props) => {\n  const { width, height, className, ...rest } = props;\n\n  const rootClassName = clsx(styles.skeleton, className);\n\n  return (\n    <div\n      className={rootClassName}\n      aria-hidden\n      style={{ height, width }}\n      {...rest}\n    />\n  );\n};\n\nexport default Skeleton;\n"],"mappings":";;;;;;;AAYA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,OAAO,QAAQ,WAAW,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,wBAAO,UAAU,SAAS;CAErD,OACE,oBAAC,OAAD;EACE,WAAW;EACX,eAAA;EACA,OAAO;GAAE;GAAQ;EAAM;EACvB,GAAI;CACL,CAAA;AAEL"}

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

@@ -2,12 +2,12 @@
 /* */
 //#region src/components/Skeleton/Skeleton.module.scss
 var skeleton = "flow--skeleton";
-var shimmer = "flow--skeleton--shimmer";
 var Skeleton_module_default = {
 	skeleton,
-	shimmer
+	"skeleton-surface-shimmer": "flow--skeleton--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--skeleton--skeleton-text-shimmer"
 };
 //#endregion
-export { Skeleton_module_default as default, shimmer, skeleton };
+export { Skeleton_module_default as default, skeleton };
 
 //# sourceMappingURL=Skeleton.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.module.mjs","names":[],"sources":["../../../../../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":[".skeleton {\n  position: relative;\n  overflow: hidden;\n  background-color: rgba(183, 201, 219, 0.5);\n  border-radius: var(--corner-radius--m);\n  width: 100%;\n\n  &::before {\n    content: \"-\";\n    visibility: hidden;\n  }\n\n  &::after {\n    position: absolute;\n    inset: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0.4) 60%,\n      rgba(255, 255, 255, 0)\n    );\n    animation: shimmer 3s infinite;\n    content: \"\";\n  }\n}\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Skeleton.module.mjs","names":[],"sources":["../../../../../../../src/components/Skeleton/Skeleton.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeleton {\n  @include skeleton.surface;\n\n  width: 100%;\n\n  &::before {\n    content: \"-\";\n    visibility: hidden;\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -0,0 +1,35 @@
+"use client"
+/* */
+import { skeletonModeContext } from "./skeletonModeContext.mjs";
+import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import __locale_default from "../../../../../_virtual/_32.locale.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/SkeletonMode/SkeletonMode.tsx
+/**
+* @flr-generate all
+* @flowStatus beta, new
+*/
+var SkeletonMode = (props) => {
+	const { children, isEnabled = true } = props;
+	const parent = useContext(skeletonModeContext);
+	const stringFormatter = useLocalizedStringFormatter(__locale_default, "SkeletonMode");
+	const announces = isEnabled && !parent.isAnnounced;
+	const state = {
+		isEnabled,
+		isAnnounced: parent.isAnnounced || isEnabled
+	};
+	const announcement = announces && /* @__PURE__ */ jsx(Aria.VisuallyHidden, {
+		role: "status",
+		children: stringFormatter.format("loading")
+	});
+	return /* @__PURE__ */ jsxs(skeletonModeContext.Provider, {
+		value: state,
+		children: [announcement, children]
+	});
+};
+//#endregion
+export { SkeletonMode, SkeletonMode as default };
+
+//# sourceMappingURL=SkeletonMode.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonMode.mjs","names":["locales"],"sources":["../../../../../../../src/components/SkeletonMode/SkeletonMode.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport locales from \"./locales/*.locale.json\";\nimport {\n  skeletonModeContext,\n  type SkeletonModeState,\n} from \"./skeletonModeContext\";\n\nexport interface SkeletonModeProps extends PropsWithChildren {\n  /**\n   * Whether the components inside render as skeleton. A nested `SkeletonMode`\n   * with `isEnabled={false}` renders its content as real UI.\n   *\n   * @default true\n   */\n  isEnabled?: boolean;\n}\n\n/**\n * @flr-generate all\n * @flowStatus beta, new\n */\nexport const SkeletonMode: FC<SkeletonModeProps> = (props) => {\n  const { children, isEnabled = true } = props;\n\n  const parent = useContext(skeletonModeContext);\n  const stringFormatter = useLocalizedStringFormatter(locales, \"SkeletonMode\");\n\n  const announces = isEnabled && !parent.isAnnounced;\n\n  const state: SkeletonModeState = {\n    isEnabled,\n    isAnnounced: parent.isAnnounced || isEnabled,\n  };\n\n  const announcement = announces && (\n    <Aria.VisuallyHidden role=\"status\">\n      {stringFormatter.format(\"loading\")}\n    </Aria.VisuallyHidden>\n  );\n\n  return (\n    <skeletonModeContext.Provider value={state}>\n      {announcement}\n      {children}\n    </skeletonModeContext.Provider>\n  );\n};\n\nexport default SkeletonMode;\n"],"mappings":";;;;;;;;;;;;;AAuBA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,UAAU,YAAY,SAAS;CAEvC,MAAM,SAAS,WAAW,mBAAmB;CAC7C,MAAM,kBAAkB,4BAA4BA,kBAAS,cAAc;CAE3E,MAAM,YAAY,aAAa,CAAC,OAAO;CAEvC,MAAM,QAA2B;EAC/B;EACA,aAAa,OAAO,eAAe;CACrC;CAEA,MAAM,eAAe,aACnB,oBAAC,KAAK,gBAAN;EAAqB,MAAK;EACvB,UAAA,gBAAgB,OAAO,SAAS;CACd,CAAA;CAGvB,OACE,qBAAC,oBAAoB,UAArB;EAA8B,OAAO;EAArC,UAAA,CACG,cACA,QAC2B;;AAElC"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.mjs

@@ -0,0 +1,24 @@
+"use client"
+/* */
+import { SkeletonModeReset } from "../../skeletonModeContext.mjs";
+import SkeletonIconSurface_module_default from "./SkeletonIconSurface.module.mjs";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.tsx
+/**
+* A round skeleton surface in the size of the icon it wraps. The icon keeps
+* rendering, invisible, so the surface takes its size from the icon's own size
+* rules. `className` places the surface where the icon would sit.
+*/
+var SkeletonIconSurface = (props) => {
+	const { children, className } = props;
+	return /* @__PURE__ */ jsx("span", {
+		className: clsx(SkeletonIconSurface_module_default.skeletonIconSurface, className),
+		inert: true,
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children })
+	});
+};
+//#endregion
+export { SkeletonIconSurface, SkeletonIconSurface as default };
+
+//# sourceMappingURL=SkeletonIconSurface.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonIconSurface.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { SkeletonModeReset } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport styles from \"./SkeletonIconSurface.module.scss\";\n\nexport type SkeletonIconSurfaceProps = PropsWithChildren & PropsWithClassName;\n\n/**\n * A round skeleton surface in the size of the icon it wraps. The icon keeps\n * rendering, invisible, so the surface takes its size from the icon's own size\n * rules. `className` places the surface where the icon would sit.\n */\nexport const SkeletonIconSurface: FC<SkeletonIconSurfaceProps> = (props) => {\n  const { children, className } = props;\n\n  return (\n    <span className={clsx(styles.skeletonIconSurface, className)} inert>\n      <SkeletonModeReset>{children}</SkeletonModeReset>\n    </span>\n  );\n};\n\nexport default SkeletonIconSurface;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EAAE,UAAU,cAAc;CAEhC,OACE,oBAAC,QAAD;EAAM,WAAW,KAAKA,mCAAO,qBAAqB,SAAS;EAAG,OAAA;EAC5D,UAAA,oBAAC,mBAAD,EAAoB,SAA4B,CAAA;CAC5C,CAAA;AAEV"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.module.mjs

@@ -0,0 +1,13 @@
+"use client"
+/* */
+//#region src/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.module.scss
+var skeletonIconSurface = "flow--skeleton-mode--skeleton-icon-surface";
+var SkeletonIconSurface_module_default = {
+	skeletonIconSurface,
+	"skeleton-surface-shimmer": "flow--skeleton-mode--skeleton-icon-surface--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--skeleton-mode--skeleton-icon-surface--skeleton-text-shimmer"
+};
+//#endregion
+export { SkeletonIconSurface_module_default as default, skeletonIconSurface };
+
+//# sourceMappingURL=SkeletonIconSurface.module.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonIconSurface.module.mjs","names":[],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeletonIconSurface {\n  @include skeleton.shape;\n\n  --skeleton-radius: 50%;\n\n  display: inline-flex;\n  flex-shrink: 0;\n\n  /* The icon's size, also as a stretched flex or grid item */\n  width: fit-content;\n  height: fit-content;\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { useSkeletonMode } from "../../skeletonModeContext.mjs";
+import { getTextOfChild, isTextChild } from "../../lib/isTextChild.mjs";
+import { SkeletonTextContent } from "../SkeletonTextContent/SkeletonTextContent.mjs";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.tsx
+/**
+* The text rule for containers: turns raw string and number children into bars
+* and leaves every element child to its own skeleton rendering. Outside an
+* enabled `SkeletonMode` it renders its children unchanged.
+*/
+var SkeletonRawText = (props) => {
+	const { children } = props;
+	if (!useSkeletonMode()) return children;
+	return Children.map(children, (child) => isTextChild(child) && getTextOfChild(child) !== "" ? /* @__PURE__ */ jsx(SkeletonTextContent, {
+		defaultWidth: "8em",
+		children: child
+	}) : child);
+};
+//#endregion
+export { SkeletonRawText, SkeletonRawText as default };
+
+//# sourceMappingURL=SkeletonRawText.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonRawText.mjs","names":[],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonRawText/SkeletonRawText.tsx"],"sourcesContent":["import { Children, type FC, type PropsWithChildren } from \"react\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\nimport {\n  getTextOfChild,\n  isTextChild,\n} from \"@/components/SkeletonMode/lib/isTextChild\";\n\n/**\n * The text rule for containers: turns raw string and number children into bars\n * and leaves every element child to its own skeleton rendering. Outside an\n * enabled `SkeletonMode` it renders its children unchanged.\n */\nexport const SkeletonRawText: FC<PropsWithChildren> = (props) => {\n  const { children } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  if (!isSkeleton) {\n    return children;\n  }\n\n  return Children.map(children, (child) =>\n    isTextChild(child) && getTextOfChild(child) !== \"\" ? (\n      <SkeletonTextContent defaultWidth=\"8em\">{child}</SkeletonTextContent>\n    ) : (\n      child\n    ),\n  );\n};\n\nexport default SkeletonRawText;\n"],"mappings":";;;;;;;;;;;;;AAaA,IAAa,mBAA0C,UAAU;CAC/D,MAAM,EAAE,aAAa;CAIrB,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,OAAO,SAAS,IAAI,WAAW,UAC7B,YAAY,KAAK,KAAK,eAAe,KAAK,MAAM,KAC9C,oBAAC,qBAAD;EAAqB,cAAa;EAAO,UAAA;CAA2B,CAAA,IAEpE,KAEJ;AACF"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs

@@ -0,0 +1,29 @@
+"use client"
+/* */
+import { SkeletonModeReset, useSkeletonMode } from "../../skeletonModeContext.mjs";
+import { SkeletonText } from "../../../SkeletonText/SkeletonText.mjs";
+import { hasContent } from "../../lib/hasContent.mjs";
+import SkeletonTextContent_module_default from "./SkeletonTextContent.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.tsx
+/**
+* The text rule of `SkeletonMode`: content becomes one bar per line in the
+* width of that line, no content becomes a `SkeletonText` in `defaultWidth`.
+* Outside an enabled `SkeletonMode` it renders its children unchanged.
+*/
+var SkeletonTextContent = (props) => {
+	const { children, defaultWidth } = props;
+	if (!useSkeletonMode()) return children;
+	if (!hasContent(children)) return /* @__PURE__ */ jsx(SkeletonText, { width: defaultWidth });
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsx("span", {
+			className: SkeletonTextContent_module_default.skeletonTextContent,
+			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children })
+		})
+	});
+};
+//#endregion
+export { SkeletonTextContent, SkeletonTextContent as default };
+
+//# sourceMappingURL=SkeletonTextContent.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTextContent.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { hasContent } from \"@/components/SkeletonMode/lib/hasContent\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\nimport styles from \"./SkeletonTextContent.module.scss\";\n\nexport interface SkeletonTextContentProps extends PropsWithChildren {\n  /** Width of the bar when there is no content to take the width from. */\n  defaultWidth: CSSProperties[\"width\"];\n}\n\n/**\n * The text rule of `SkeletonMode`: content becomes one bar per line in the\n * width of that line, no content becomes a `SkeletonText` in `defaultWidth`.\n * Outside an enabled `SkeletonMode` it renders its children unchanged.\n */\nexport const SkeletonTextContent: FC<SkeletonTextContentProps> = (props) => {\n  const { children, defaultWidth } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  if (!isSkeleton) {\n    return children;\n  }\n\n  if (!hasContent(children)) {\n    return <SkeletonText width={defaultWidth} />;\n  }\n\n  /* The outer span takes the item role in a flex or grid parent, so the bar\n     stays inline and draws one box per line. */\n  return (\n    <span aria-hidden>\n      <span className={styles.skeletonTextContent}>\n        <SkeletonModeReset>{children}</SkeletonModeReset>\n      </span>\n    </span>\n  );\n};\n\nexport default SkeletonTextContent;\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EAAE,UAAU,iBAAiB;CAInC,IAAI,CAFe,gBAEd,GACH,OAAO;CAGT,IAAI,CAAC,WAAW,QAAQ,GACtB,OAAO,oBAAC,cAAD,EAAc,OAAO,aAAe,CAAA;CAK7C,OACE,oBAAC,QAAD;EAAM,eAAA;EACJ,UAAA,oBAAC,QAAD;GAAM,WAAWA,mCAAO;GACtB,UAAA,oBAAC,mBAAD,EAAoB,SAA4B,CAAA;EAC5C,CAAA;CACF,CAAA;AAEV"}

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.mjs

@@ -0,0 +1,13 @@
+"use client"
+/* */
+//#region src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.scss
+var skeletonTextContent = "flow--skeleton-mode--skeleton-text-content";
+var SkeletonTextContent_module_default = {
+	skeletonTextContent,
+	"skeleton-text-shimmer": "flow--skeleton-mode--skeleton-text-content--skeleton-text-shimmer",
+	"skeleton-surface-shimmer": "flow--skeleton-mode--skeleton-text-content--skeleton-surface-shimmer"
+};
+//#endregion
+export { SkeletonTextContent_module_default as default, skeletonTextContent };
+
+//# sourceMappingURL=SkeletonTextContent.module.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTextContent.module.mjs","names":[],"sources":["../../../../../../../../../src/components/SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeletonTextContent {\n  @include skeleton.text;\n}\n\n/* An ancestor that truncates the text paints its ellipsis in its own color,\n   outside the bar. The bar sits one level deeper when a flex parent needs an\n   outer span. `!important`: the truncation comes from the component, with any\n   specificity. */\n*:has(> .skeletonTextContent),\n*:has(> * > .skeletonTextContent) {\n  text-overflow: clip !important;\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

package/dist/js/packages/components/src/components/SkeletonMode/lib/hasContent.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+import { getTextOfChild } from "./isTextChild.mjs";
+import { Children } from "react";
+//#region src/components/SkeletonMode/lib/hasContent.ts
+/** Whether `children` renders anything — `null`, booleans and empty text do not. */
+var hasContent = (children) => Children.toArray(children).some((child) => getTextOfChild(child) !== "");
+//#endregion
+export { hasContent };
+
+//# sourceMappingURL=hasContent.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/lib/hasContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasContent.mjs","names":[],"sources":["../../../../../../../../src/components/SkeletonMode/lib/hasContent.ts"],"sourcesContent":["import { Children, type ReactNode } from \"react\";\nimport { getTextOfChild } from \"./isTextChild\";\n\n/** Whether `children` renders anything — `null`, booleans and empty text do not. */\nexport const hasContent = (children: ReactNode): boolean =>\n  Children.toArray(children).some((child) => getTextOfChild(child) !== \"\");\n"],"mappings":";;;;;;AAIA,IAAa,cAAc,aACzB,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,UAAU,eAAe,KAAK,MAAM,EAAE"}

package/dist/js/packages/components/src/components/SkeletonMode/lib/isTextChild.mjs

@@ -0,0 +1,19 @@
+"use client"
+/* */
+import { isRemoteTextRenderProps } from "../../../lib/react/remote.mjs";
+import { isValidElement } from "react";
+//#region src/components/SkeletonMode/lib/isTextChild.ts
+/**
+* Whether `child` is a text node — locally a string or number, remotely a
+* `RemoteTextRenderer` element.
+*/
+var isTextChild = (child) => typeof child === "string" || typeof child === "number" || isValidElement(child) && isRemoteTextRenderProps(child.props);
+/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */
+var getTextOfChild = (child) => {
+	if (typeof child === "string" || typeof child === "number") return String(child);
+	return isValidElement(child) && isRemoteTextRenderProps(child.props) ? child.props.remote.data : void 0;
+};
+//#endregion
+export { getTextOfChild, isTextChild };
+
+//# sourceMappingURL=isTextChild.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/lib/isTextChild.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isTextChild.mjs","names":[],"sources":["../../../../../../../../src/components/SkeletonMode/lib/isTextChild.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from \"react\";\nimport { isRemoteTextRenderProps } from \"@/lib/react/remote\";\n\n/**\n * Whether `child` is a text node — locally a string or number, remotely a\n * `RemoteTextRenderer` element.\n */\nexport const isTextChild = (child: ReactNode): boolean =>\n  typeof child === \"string\" ||\n  typeof child === \"number\" ||\n  (isValidElement(child) && isRemoteTextRenderProps(child.props));\n\n/** The text of a text node from {@link isTextChild}, `undefined` otherwise. */\nexport const getTextOfChild = (child: ReactNode): string | undefined => {\n  if (typeof child === \"string\" || typeof child === \"number\") {\n    return String(child);\n  }\n\n  return isValidElement(child) && isRemoteTextRenderProps(child.props)\n    ? child.props.remote.data\n    : undefined;\n};\n"],"mappings":";;;;;;;;;AAOA,IAAa,eAAe,UAC1B,OAAO,UAAU,YACjB,OAAO,UAAU,YAChB,eAAe,KAAK,KAAK,wBAAwB,MAAM,KAAK;;AAG/D,IAAa,kBAAkB,UAAyC;CACtE,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAChD,OAAO,OAAO,KAAK;CAGrB,OAAO,eAAe,KAAK,KAAK,wBAAwB,MAAM,KAAK,IAC/D,MAAM,MAAM,OAAO,OACnB,KAAA;AACN"}

package/dist/js/packages/components/src/components/SkeletonMode/skeletonModeContext.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var skeletonModeContext = createContext({
+	isEnabled: false,
+	isAnnounced: false
+});
+/** Whether the calling component renders as skeleton. */
+var useSkeletonMode = () => useContext(skeletonModeContext).isEnabled;
+var resetState = {
+	isEnabled: false,
+	isAnnounced: true
+};
+/**
+* Renders its children as real UI below a component that already draws the
+* skeleton for them — the Text inside a text bar or a button surface must not
+* draw a second bar on top.
+*/
+var SkeletonModeReset = (props) => /* @__PURE__ */ jsx(skeletonModeContext.Provider, {
+	value: resetState,
+	children: props.children
+});
+//#endregion
+export { SkeletonModeReset, skeletonModeContext, useSkeletonMode };
+
+//# sourceMappingURL=skeletonModeContext.mjs.map

package/dist/js/packages/components/src/components/SkeletonMode/skeletonModeContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeletonModeContext.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonMode/skeletonModeContext.tsx"],"sourcesContent":["import {\n  createContext,\n  type FC,\n  type PropsWithChildren,\n  useContext,\n} from \"react\";\n\nexport interface SkeletonModeState {\n  /** Whether components render as skeleton. */\n  isEnabled: boolean;\n  /** Whether an enabled `SkeletonMode` above already announces the loading. */\n  isAnnounced: boolean;\n}\n\nconst disabledState: SkeletonModeState = {\n  isEnabled: false,\n  isAnnounced: false,\n};\n\nexport const skeletonModeContext =\n  createContext<SkeletonModeState>(disabledState);\n\n/** Whether the calling component renders as skeleton. */\nexport const useSkeletonMode = (): boolean =>\n  useContext(skeletonModeContext).isEnabled;\n\nconst resetState: SkeletonModeState = {\n  isEnabled: false,\n  isAnnounced: true,\n};\n\n/**\n * Renders its children as real UI below a component that already draws the\n * skeleton for them — the Text inside a text bar or a button surface must not\n * draw a second bar on top.\n */\nexport const SkeletonModeReset: FC<PropsWithChildren> = (props) => (\n  <skeletonModeContext.Provider value={resetState}>\n    {props.children}\n  </skeletonModeContext.Provider>\n);\n"],"mappings":";;;;AAmBA,IAAa,sBACX,cAAiC;CALjC,WAAW;CACX,aAAa;AAIoB,CAAa;;AAGhD,IAAa,wBACX,WAAW,mBAAmB,CAAC,CAAC;AAElC,IAAM,aAAgC;CACpC,WAAW;CACX,aAAa;AACf;;;;;;AAOA,IAAa,qBAA4C,UACvD,oBAAC,oBAAoB,UAArB;CAA8B,OAAO;CAClC,UAAA,MAAM;AACqB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties, FC } from \"react\";\nimport styles from \"./SkeletonText.module.scss\";\n\nexport interface SkeletonTextProps extends ComponentProps<\"span\"> {\n  /** The width of the skeleton text. */\n  width?: CSSProperties[\"width\"];\n}\n\n/** @flr-generate all */\nexport const SkeletonText: FC<SkeletonTextProps> = (props) => {\n  const { width, style = {}, ...rest } = props;\n  return (\n    <span\n      aria-hidden\n      className={styles.skeletonText}\n      style={{ width, ...style }}\n      {...rest}\n    />\n  );\n};\n\nexport default SkeletonText;\n"],"mappings":";;;;;;AASA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,OAAO,QAAQ,CAAC,GAAG,GAAG,SAAS;CACvC,OACE,oBAAC,QAAD;EACE,eAAA;EACA,WAAW,4BAAO;EAClB,OAAO;GAAE;GAAO,GAAG;EAAM;EACzB,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"SkeletonText.mjs","names":["styles"],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.tsx"],"sourcesContent":["import type { ComponentProps, CSSProperties, FC } from \"react\";\nimport styles from \"./SkeletonText.module.scss\";\n\nexport interface SkeletonTextProps extends ComponentProps<\"span\"> {\n  /** The width of the skeleton text. */\n  width?: CSSProperties[\"width\"];\n}\n\n/** @flr-generate all */\nexport const SkeletonText: FC<SkeletonTextProps> = (props) => {\n  const { width, style = {}, ...rest } = props;\n  return (\n    <span\n      aria-hidden\n      className={styles.skeletonText}\n      style={{ width, ...style }}\n      {...rest}\n    />\n  );\n};\n\nexport default SkeletonText;\n"],"mappings":";;;;;;AASA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,OAAO,QAAQ,CAAC,GAAG,GAAG,SAAS;CACvC,OACE,oBAAC,QAAD;EACE,eAAA;EACA,WAAWA,4BAAO;EAClB,OAAO;GAAE;GAAO,GAAG;EAAM;EACzB,GAAI;CACL,CAAA;AAEL"}

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

@@ -2,12 +2,12 @@
 /* */
 //#region src/components/SkeletonText/SkeletonText.module.scss
 var skeletonText = "flow--skeleton-text";
-var shimmer = "flow--skeleton-text--shimmer";
 var SkeletonText_module_default = {
 	skeletonText,
-	shimmer
+	"skeleton-surface-shimmer": "flow--skeleton-text--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--skeleton-text--skeleton-text-shimmer"
 };
 //#endregion
-export { SkeletonText_module_default as default, shimmer, skeletonText };
+export { SkeletonText_module_default as default, skeletonText };
 
 //# sourceMappingURL=SkeletonText.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.module.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.module.scss"],"sourcesContent":[".skeletonText {\n  position: relative;\n  overflow: hidden;\n  background-color: rgba(183, 201, 219, 0.5);\n  border-radius: var(--corner-radius--m);\n  width: 100%;\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  height: 1em;\n\n  &::before {\n    content: \"-\";\n    visibility: hidden;\n  }\n\n  &::after {\n    position: absolute;\n    inset: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0.4) 60%,\n      rgba(255, 255, 255, 0)\n    );\n    animation: shimmer 3s infinite;\n    content: \"\";\n  }\n}\n\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SkeletonText.module.mjs","names":[],"sources":["../../../../../../../src/components/SkeletonText/SkeletonText.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.skeletonText {\n  @include skeleton.surface;\n\n  width: 100%;\n  display: inline-block;\n  max-width: 100%;\n  vertical-align: middle;\n  height: 1em;\n\n  &::before {\n    content: \"-\";\n    visibility: hidden;\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -7,6 +7,7 @@ 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 { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import Slider_module_default from "./Slider.module.mjs";
 import __locale_default from "../../../../../_virtual/_19.locale.mjs";
@@ -17,9 +18,9 @@ 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 { className, children, name, isDisabled, defaultValue, showInitialMarker, isReadOnly, ref, step, sliderOnly, "aria-describedby": ignoredAriaDescribedBy, ...rest } = props;
 	const rootClassName = clsx(Slider_module_default.slider, isDisabled && Slider_module_default.disabled, className);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, fieldProps } = useFieldComponent(props, "Slider");
+	const { FieldErrorView, FieldErrorCaptureContext, fieldPropsContext, wrapperProps, controlProps, skeletonProps } = useFieldComponent(props, "Slider");
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Slider");
 	const objectRef = useObjectRef(ref);
 	const propsContext = {
@@ -34,7 +35,8 @@ var Slider = flowComponent("Slider", (props) => {
 		}
 	};
 	return /* @__PURE__ */ jsx("div", {
-		...fieldProps,
+		...skeletonProps,
+		className: wrapperProps.className,
 		children: /* @__PURE__ */ jsx(Aria.Slider, {
 			...rest,
 			className: rootClassName,
@@ -48,7 +50,13 @@ var Slider = flowComponent("Slider", (props) => {
 					!sliderOnly && /* @__PURE__ */ jsxs("div", {
 						className: Slider_module_default.text,
 						children: [
-							/* @__PURE__ */ jsx(Aria.SliderOutput, { className: Slider_module_default.value }),
+							/* @__PURE__ */ jsx(Aria.SliderOutput, {
+								className: Slider_module_default.value,
+								children: ({ defaultChildren }) => /* @__PURE__ */ jsx(SkeletonTextContent, {
+									defaultWidth: "2em",
+									children: defaultChildren
+								})
+							}),
 							" ",
 							/* @__PURE__ */ jsx(UiComponentTunnelExit, {
 								id: "label",
@@ -92,6 +100,7 @@ var Slider = flowComponent("Slider", (props) => {
 								}),
 								/* @__PURE__ */ jsx(Aria.SliderThumb, {
 									inputRef: objectRef,
+									"aria-describedby": controlProps["aria-describedby"],
 									name,
 									className: Slider_module_default.handle,
 									isDisabled: isReadOnly