@mittwald/flow-react-components 1.5.0-next.37 → 1.5.0-next.39

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":[".progressBar {\n  display: grid;\n  grid-template-areas:\n    \"label value\"\n    \"bar bar\";\n  grid-template-columns: 1fr auto;\n  column-gap: var(--progress-bar--spacing-x);\n  width: 100%;\n  font-size: var(--progress-bar--font-size);\n\n  @extend .size-m;\n  @extend .info;\n\n  &:has(.legend) {\n    grid-template-areas:\n      \"label value\"\n      \"bar bar\"\n      \"legend legend\";\n  }\n\n  /* Elements */\n\n  .label {\n    grid-area: label;\n  }\n\n  .value {\n    grid-area: value;\n    font-weight: var(--progress-bar--value-font-weight);\n  }\n\n  .bar {\n    grid-area: bar;\n    border-radius: var(--progress-bar--corner-radius);\n    background-color: var(--progress-bar--background-color);\n    box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n      var(--progress-bar--border-color);\n    overflow: hidden;\n    margin-top: var(--progress-bar--spacing-y);\n  }\n\n  .fill {\n    height: 100%;\n    width: calc(var(--progress-bar--percentage) * 1%);\n    display: flex;\n    animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n  }\n\n  /* Segments share the fill in proportion to their values. */\n  .segment {\n    flex: var(--progress-bar--segment-value) 1 0;\n  }\n\n  .legend {\n    grid-area: legend;\n    margin-top: var(--progress-bar--spacing-bar-to-legend);\n  }\n\n  /* Size */\n\n  &.size-s {\n    font-size: var(--progress-bar--font-size-s);\n  }\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      .bar {\n        height: var(--progress-bar--height--#{$size});\n      }\n    }\n  }\n\n  @include size(s);\n  @include size(m);\n  @include size(l);\n\n  /* Variants */\n\n  @mixin status($status) {\n    &.#{$status} {\n      .fill {\n        background: var(--progress-bar--#{$status}-fill-background-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(danger);\n  @include status(warning);\n}\n\n/* The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n  from {\n    width: 0%;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ProgressBar.module.mjs","names":[],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.progressBar {\n  display: grid;\n  grid-template-areas:\n    \"label value\"\n    \"bar bar\";\n  grid-template-columns: 1fr auto;\n  column-gap: var(--progress-bar--spacing-x);\n  width: 100%;\n  font-size: var(--progress-bar--font-size);\n\n  @extend .size-m;\n  @extend .info;\n\n  &:has(.legend) {\n    grid-template-areas:\n      \"label value\"\n      \"bar bar\"\n      \"legend legend\";\n  }\n\n  /* Elements */\n\n  .label {\n    grid-area: label;\n  }\n\n  .value {\n    grid-area: value;\n    font-weight: var(--progress-bar--value-font-weight);\n  }\n\n  .bar {\n    grid-area: bar;\n    border-radius: var(--progress-bar--corner-radius);\n    background-color: var(--progress-bar--background-color);\n    box-shadow: inset 0 0 0 var(--progress-bar--border-width)\n      var(--progress-bar--border-color);\n    overflow: hidden;\n    margin-top: var(--progress-bar--spacing-y);\n  }\n\n  .fill {\n    height: 100%;\n    width: calc(var(--progress-bar--percentage) * 1%);\n    display: flex;\n    animation: progress-bar-fill var(--progress-bar--transition-duration) ease;\n  }\n\n  /* Segments share the fill in proportion to their values. */\n  .segment {\n    flex: var(--progress-bar--segment-value) 1 0;\n  }\n\n  .legend {\n    grid-area: legend;\n    margin-top: var(--progress-bar--spacing-bar-to-legend);\n  }\n\n  /* Size */\n\n  &.size-s {\n    font-size: var(--progress-bar--font-size-s);\n  }\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      .bar {\n        height: var(--progress-bar--height--#{$size});\n      }\n    }\n  }\n\n  @include size(s);\n  @include size(m);\n  @include size(l);\n\n  /* Variants */\n\n  @mixin status($status) {\n    &.#{$status} {\n      .fill {\n        background: var(--progress-bar--#{$status}-fill-background-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(danger);\n  @include status(warning);\n\n  /* SkeletonMode: the track is a surface, the value stays hidden */\n  &.skeleton {\n    .bar {\n      @include skeleton.surface;\n\n      --skeleton-radius: var(--progress-bar--corner-radius);\n\n      box-shadow: none;\n    }\n\n    .value {\n      visibility: hidden;\n    }\n  }\n}\n\n@include skeleton.keyframes;\n\n/* The implicit \"to\" keyframe picks up the fill's inline width. */\n@keyframes progress-bar-fill {\n  from {\n    width: 0%;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../SkeletonMode/skeletonModeContext.mjs";
 import { isCategoricalColor } from "../../../lib/tokens/isCategoricalColor.mjs";
 import ProgressBar_module_default from "../ProgressBar.module.mjs";
 import { getCategoricalColorByIndex } from "../../../lib/tokens/getCategoricalColorByIndex.mjs";
@@ -7,6 +8,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/ProgressBar/components/ProgressBarBar.tsx
 var ProgressBarBar = (props) => {
 	const { segments, percentage } = props;
+	if (useSkeletonMode()) return /* @__PURE__ */ jsx("div", { className: ProgressBar_module_default.bar });
 	const segmentFill = segments && segments.length > 0 ? segments.map((s, i) => {
 		const backgroundColor = !s.color ? `var(--color--categorical--${getCategoricalColorByIndex(i)})` : isCategoricalColor(s.color) ? `var(--color--categorical--${s.color})` : s.color;
 		return /* @__PURE__ */ jsx("div", {

package/dist/js/packages/components/src/components/ProgressBar/components/ProgressBarBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBarBar.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n  percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n  const { segments, percentage } = props;\n\n  const segmentFill =\n    segments && segments.length > 0\n      ? segments.map((s, i) => {\n          const backgroundColor = !s.color\n            ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n            : isCategoricalColor(s.color)\n              ? `var(--color--categorical--${s.color})`\n              : s.color;\n\n          return (\n            <div\n              key={s.title}\n              aria-hidden\n              className={styles.segment}\n              style={{\n                backgroundColor,\n                \"--progress-bar--segment-value\": s.value,\n              }}\n            />\n          );\n        })\n      : null;\n\n  return (\n    <div className={styles.bar}>\n      <div\n        className={styles.fill}\n        style={{ \"--progress-bar--percentage\": percentage }}\n      >\n        {segmentFill}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;CAEjC,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,WAAWA,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,WAAWA,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAWA,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"ProgressBarBar.mjs","names":["styles"],"sources":["../../../../../../../../src/components/ProgressBar/components/ProgressBarBar.tsx"],"sourcesContent":["import styles from \"@/components/ProgressBar/ProgressBar.module.scss\";\nimport type { FC } from \"react\";\nimport type { ProgressBarProps } from \"@/components/ProgressBar\";\nimport { getCategoricalColorByIndex } from \"@/lib/tokens/getCategoricalColorByIndex\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\ninterface Props extends Pick<ProgressBarProps, \"segments\"> {\n  percentage?: number;\n}\n\nexport const ProgressBarBar: FC<Props> = (props) => {\n  const { segments, percentage } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  /* In the mode, the track stays and shows no value. */\n  if (isSkeleton) {\n    return <div className={styles.bar} />;\n  }\n\n  const segmentFill =\n    segments && segments.length > 0\n      ? segments.map((s, i) => {\n          const backgroundColor = !s.color\n            ? `var(--color--categorical--${getCategoricalColorByIndex(i)})`\n            : isCategoricalColor(s.color)\n              ? `var(--color--categorical--${s.color})`\n              : s.color;\n\n          return (\n            <div\n              key={s.title}\n              aria-hidden\n              className={styles.segment}\n              style={{\n                backgroundColor,\n                \"--progress-bar--segment-value\": s.value,\n              }}\n            />\n          );\n        })\n      : null;\n\n  return (\n    <div className={styles.bar}>\n      <div\n        className={styles.fill}\n        style={{ \"--progress-bar--percentage\": percentage }}\n      >\n        {segmentFill}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAWA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,eAAe;CAKjC,IAHmB,gBAGf,GACF,OAAO,oBAAC,OAAD,EAAK,WAAWA,2BAAO,IAAM,CAAA;CAGtC,MAAM,cACJ,YAAY,SAAS,SAAS,IAC1B,SAAS,KAAK,GAAG,MAAM;EACrB,MAAM,kBAAkB,CAAC,EAAE,QACvB,6BAA6B,2BAA2B,CAAC,EAAE,KAC3D,mBAAmB,EAAE,KAAK,IACxB,6BAA6B,EAAE,MAAM,KACrC,EAAE;EAER,OACE,oBAAC,OAAD;GAEE,eAAA;GACA,WAAWA,2BAAO;GAClB,OAAO;IACL;IACA,iCAAiC,EAAE;GACrC;EACD,GAPM,EAAE,KAOR;CAEL,CAAC,IACD;CAEN,OACE,oBAAC,OAAD;EAAK,WAAWA,2BAAO;EACrB,UAAA,oBAAC,OAAD;GACE,WAAWA,2BAAO;GAClB,OAAO,EAAE,8BAA8B,WAAW;GAEjD,UAAA;EACE,CAAA;CACF,CAAA;AAET"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useMakeFocusable } from "../../lib/hooks/dom/useMakeFocusable.mjs";
@@ -23,7 +24,8 @@ var toSegmentValue = (value) => value === void 0 ? void 0 : Math.round(value).to
 var Rating = flowComponent("Rating", (props) => {
 	const { value, defaultValue, size = "m", maxValue = 5, fill = "cumulative", className, children, ref, iconEmpty, iconFilled, ...rest } = props;
 	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "Rating");
-	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], wrapperProps.className, className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Rating_module_default.rating, Rating_module_default[`size-${size}`], Rating_module_default[`fill-${fill}`], isSkeleton && Rating_module_default.skeleton, wrapperProps.className, className);
 	const localRef = useObjectRef(ref);
 	useMakeFocusable(localRef);
 	const segmentProps = {
@@ -49,6 +51,7 @@ var Rating = flowComponent("Rating", (props) => {
 		value: toSegmentValue(value),
 		defaultValue: toSegmentValue(defaultValue),
 		ref: localRef,
+		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsxs(FieldErrorCaptureContext, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			dependencies: [
@@ -59,7 +62,7 @@ var Rating = flowComponent("Rating", (props) => {
 			children
 		}), /* @__PURE__ */ jsx("div", {
 			className: Rating_module_default.ratingSegments,
-			children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
+			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 				id: segmentsTunnelId,
 				component: "Rating",
 				children: (tunnelChildren) => {
@@ -73,7 +76,7 @@ var Rating = flowComponent("Rating", (props) => {
 						children: segment
 					}, index));
 				}
-			})
+			}) })
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.mjs","names":["styles"],"sources":["../../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { Children, type PropsWithChildren, type ReactElement } from \"react\";\nimport styles from \"./Rating.module.scss\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport { RatingSegment } from \"@/components/Rating/components/RatingSegment\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { RatingSegmentContextProvider } from \"@/components/Rating/context\";\n\nexport interface RatingProps\n  extends\n    FlowComponentProps,\n    PropsWithChildren,\n    Omit<Aria.RadioGroupProps, \"children\" | \"value\" | \"defaultValue\"> {\n  /**\n   * The value sets the amount of filled stars. Decimals are rounded to the\n   * nearest whole star. @default: 0\n   */\n  value?: number;\n  /**\n   * The defaultValue sets the amount of default filled stars. Decimals are\n   * rounded to the nearest whole star. @default: 0\n   */\n  defaultValue?: number;\n  /** The size of the component. @default: \"m\" */\n  size?: \"s\" | \"m\";\n  /**\n   * The number of segments the rating consists of. Ignored when the rating has\n   * `RatingSegment` children — those define the number of segments themselves.\n   *\n   * @default: 5\n   */\n  maxValue?: number;\n  /**\n   * How the segments are filled. `cumulative` fills every segment up to the\n   * value, `single` fills only the selected segment.\n   *\n   * @default: cumulative\n   */\n  fill?: \"cumulative\" | \"single\";\n  /** An alternative icon for the empty state */\n  iconEmpty?: ReactElement;\n  /** An alternative icon for the filled state */\n  iconFilled?: ReactElement;\n}\n\nconst segmentsTunnelId = \"segments\";\n\n// Segment values are whole numbers, so a decimal would match no segment.\nconst toSegmentValue = (value?: number) =>\n  value === undefined ? undefined : Math.round(value).toString();\n\n/**\n * @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const Rating = flowComponent(\"Rating\", (props) => {\n  const {\n    value,\n    defaultValue,\n    size = \"m\",\n    maxValue = 5,\n    fill = \"cumulative\",\n    className,\n    children,\n    ref,\n    iconEmpty,\n    iconFilled,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"Rating\");\n\n  const rootClassName = clsx(\n    styles.rating,\n    styles[`size-${size}`],\n    styles[`fill-${fill}`],\n    wrapperProps.className,\n    className,\n  );\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const segmentProps = { size, iconEmpty, iconFilled };\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    RatingSegment: {\n      ...segmentProps,\n      tunnel: { id: segmentsTunnelId, component: \"Rating\" },\n    },\n  };\n\n  const defaultSegments = Array.from({ length: maxValue }, (_, index) => (\n    <RatingSegment key={index} {...segmentProps} />\n  ));\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      value={toSegmentValue(value)}\n      defaultValue={toSegmentValue(defaultValue)}\n      ref={localRef}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[size, iconEmpty, iconFilled]}\n        >\n          {children}\n        </PropsContextProvider>\n        <div className={styles.ratingSegments}>\n          <UiComponentTunnelExit id={segmentsTunnelId} component=\"Rating\">\n            {(tunnelChildren) => {\n              const tunneledSegments = Children.toArray(tunnelChildren);\n              const segments =\n                tunneledSegments.length > 0\n                  ? tunneledSegments\n                  : defaultSegments;\n\n              return segments.map((segment, index) => (\n                <RatingSegmentContextProvider\n                  key={index}\n                  value={{ value: index + 1, count: segments.length }}\n                >\n                  {segment}\n                </RatingSegmentContextProvider>\n              ));\n            }}\n          </UiComponentTunnelExit>\n        </div>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default Rating;\n"],"mappings":";;;;;;;;;;;;;;;;AAqDA,IAAM,mBAAmB;AAGzB,IAAM,kBAAkB,UACtB,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,MAAM,KAAK,CAAC,CAAC,SAAS;;;;;AAM/D,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,OACA,cACA,OAAO,KACP,WAAW,GACX,OAAO,cACP,WACA,UACA,KACA,WACA,YACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,gBAAgB,KACpBA,sBAAO,QACPA,sBAAO,QAAQ,SACfA,sBAAO,QAAQ,SACf,aAAa,WACb,SACF;CAEA,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,eAAe;EAAE;EAAM;EAAW;CAAW;CAEnD,MAAM,eAA6B;EACjC,GAAG;EACH,eAAe;GACb,GAAG;GACH,QAAQ;IAAE,IAAI;IAAkB,WAAW;GAAS;EACtD;CACF;CAEA,MAAM,kBAAkB,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAC3D,oBAAC,eAAD,EAA2B,GAAI,aAAe,GAA1B,KAA0B,CAC/C;CAED,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;EANP,UAAA,CAQE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,WAAWA,sBAAO;GACrB,UAAA,oBAAC,uBAAD;IAAuB,IAAI;IAAkB,WAAU;IACnD,WAAA,mBAAmB;KACnB,MAAM,mBAAmB,SAAS,QAAQ,cAAc;KACxD,MAAM,WACJ,iBAAiB,SAAS,IACtB,mBACA;KAEN,OAAO,SAAS,KAAK,SAAS,UAC5B,oBAAC,8BAAD;MAEE,OAAO;OAAE,OAAO,QAAQ;OAAG,OAAO,SAAS;MAAO;MAEjD,UAAA;KAC2B,GAJvB,KAIuB,CAC/B;IACH;GACqB,CAAA;EACpB,CAAA,CACmB,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}
+{"version":3,"file":"Rating.mjs","names":["styles"],"sources":["../../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { Children, type PropsWithChildren, type ReactElement } from \"react\";\nimport styles from \"./Rating.module.scss\";\nimport clsx from \"clsx\";\nimport * as Aria from \"react-aria-components\";\nimport { RatingSegment } from \"@/components/Rating/components/RatingSegment\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { RatingSegmentContextProvider } from \"@/components/Rating/context\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface RatingProps\n  extends\n    FlowComponentProps,\n    PropsWithChildren,\n    Omit<Aria.RadioGroupProps, \"children\" | \"value\" | \"defaultValue\"> {\n  /**\n   * The value sets the amount of filled stars. Decimals are rounded to the\n   * nearest whole star. @default: 0\n   */\n  value?: number;\n  /**\n   * The defaultValue sets the amount of default filled stars. Decimals are\n   * rounded to the nearest whole star. @default: 0\n   */\n  defaultValue?: number;\n  /** The size of the component. @default: \"m\" */\n  size?: \"s\" | \"m\";\n  /**\n   * The number of segments the rating consists of. Ignored when the rating has\n   * `RatingSegment` children — those define the number of segments themselves.\n   *\n   * @default: 5\n   */\n  maxValue?: number;\n  /**\n   * How the segments are filled. `cumulative` fills every segment up to the\n   * value, `single` fills only the selected segment.\n   *\n   * @default: cumulative\n   */\n  fill?: \"cumulative\" | \"single\";\n  /** An alternative icon for the empty state */\n  iconEmpty?: ReactElement;\n  /** An alternative icon for the filled state */\n  iconFilled?: ReactElement;\n}\n\nconst segmentsTunnelId = \"segments\";\n\n// Segment values are whole numbers, so a decimal would match no segment.\nconst toSegmentValue = (value?: number) =>\n  value === undefined ? undefined : Math.round(value).toString();\n\n/**\n * @flr-generate all\n * @flr-slot-props iconEmpty, iconFilled\n */\nexport const Rating = flowComponent(\"Rating\", (props) => {\n  const {\n    value,\n    defaultValue,\n    size = \"m\",\n    maxValue = 5,\n    fill = \"cumulative\",\n    className,\n    children,\n    ref,\n    iconEmpty,\n    iconFilled,\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"Rating\");\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.rating,\n    styles[`size-${size}`],\n    styles[`fill-${fill}`],\n    isSkeleton && styles.skeleton,\n    wrapperProps.className,\n    className,\n  );\n\n  const localRef = useObjectRef(ref);\n\n  useMakeFocusable(localRef);\n\n  const segmentProps = { size, iconEmpty, iconFilled };\n\n  const propsContext: PropsContext = {\n    ...fieldPropsContext,\n    RatingSegment: {\n      ...segmentProps,\n      tunnel: { id: segmentsTunnelId, component: \"Rating\" },\n    },\n  };\n\n  const defaultSegments = Array.from({ length: maxValue }, (_, index) => (\n    <RatingSegment key={index} {...segmentProps} />\n  ));\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={rootClassName}\n      value={toSegmentValue(value)}\n      defaultValue={toSegmentValue(defaultValue)}\n      ref={localRef}\n      inert={isSkeleton || undefined}\n    >\n      <FieldErrorCaptureContext>\n        <PropsContextProvider\n          props={propsContext}\n          dependencies={[size, iconEmpty, iconFilled]}\n        >\n          {children}\n        </PropsContextProvider>\n        <div className={styles.ratingSegments}>\n          <SkeletonModeReset>\n            <UiComponentTunnelExit id={segmentsTunnelId} component=\"Rating\">\n              {(tunnelChildren) => {\n                const tunneledSegments = Children.toArray(tunnelChildren);\n                const segments =\n                  tunneledSegments.length > 0\n                    ? tunneledSegments\n                    : defaultSegments;\n\n                return segments.map((segment, index) => (\n                  <RatingSegmentContextProvider\n                    key={index}\n                    value={{ value: index + 1, count: segments.length }}\n                  >\n                    {segment}\n                  </RatingSegmentContextProvider>\n                ));\n              }}\n            </UiComponentTunnelExit>\n          </SkeletonModeReset>\n        </div>\n      </FieldErrorCaptureContext>\n      <FieldErrorView />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default Rating;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyDA,IAAM,mBAAmB;AAGzB,IAAM,kBAAkB,UACtB,UAAU,KAAA,IAAY,KAAA,IAAY,KAAK,MAAM,KAAK,CAAC,CAAC,SAAS;;;;;AAM/D,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,OACA,cACA,OAAO,KACP,WAAW,GACX,OAAO,cACP,WACA,UACA,KACA,WACA,YACA,GAAG,SACD;CAEJ,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,QAAQ;CAErC,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,sBAAO,QACPA,sBAAO,QAAQ,SACfA,sBAAO,QAAQ,SACf,cAAcA,sBAAO,UACrB,aAAa,WACb,SACF;CAEA,MAAM,WAAW,aAAa,GAAG;CAEjC,iBAAiB,QAAQ;CAEzB,MAAM,eAAe;EAAE;EAAM;EAAW;CAAW;CAEnD,MAAM,eAA6B;EACjC,GAAG;EACH,eAAe;GACb,GAAG;GACH,QAAQ;IAAE,IAAI;IAAkB,WAAW;GAAS;EACtD;CACF;CAEA,MAAM,kBAAkB,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAC3D,oBAAC,eAAD,EAA2B,GAAI,aAAe,GAA1B,KAA0B,CAC/C;CAED,OACE,qBAAC,KAAK,YAAN;EACE,GAAI;EACJ,oBAAkB,aAAa;EAC/B,WAAW;EACX,OAAO,eAAe,KAAK;EAC3B,cAAc,eAAe,YAAY;EACzC,KAAK;EACL,OAAO,cAAc,KAAA;EAPvB,UAAA,CASE,qBAAC,0BAAD,EAAA,UAAA,CACE,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc;IAAC;IAAM;IAAW;GAAU;GAEzC;EACmB,CAAA,GACtB,oBAAC,OAAD;GAAK,WAAWA,sBAAO;GACrB,UAAA,oBAAC,mBAAD,EAAA,UACE,oBAAC,uBAAD;IAAuB,IAAI;IAAkB,WAAU;IACnD,WAAA,mBAAmB;KACnB,MAAM,mBAAmB,SAAS,QAAQ,cAAc;KACxD,MAAM,WACJ,iBAAiB,SAAS,IACtB,mBACA;KAEN,OAAO,SAAS,KAAK,SAAS,UAC5B,oBAAC,8BAAD;MAEE,OAAO;OAAE,OAAO,QAAQ;OAAG,OAAO,SAAS;MAAO;MAEjD,UAAA;KAC2B,GAJvB,KAIuB,CAC/B;IACH;GACqB,CAAA,EACN,CAAA;EAChB,CAAA,CACmB,EAAA,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACF;;AAErB,CAAC"}

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

@@ -7,6 +7,7 @@ var ratingSegment = "flow--rating--rating-segment";
 var empty = "flow--rating--empty";
 var filled = "flow--rating--filled";
 var current = "flow--rating--current";
+var skeleton = "flow--rating--skeleton";
 var Rating_module_default = {
 	rating,
 	ratingSegments,
@@ -17,9 +18,12 @@ var Rating_module_default = {
 	current,
 	"fill-single": "flow--rating--fill-single",
 	"size-s": "flow--rating--size-s",
-	"size-m": "flow--rating--size-m"
+	"size-m": "flow--rating--size-m",
+	skeleton,
+	"skeleton-surface-shimmer": "flow--rating--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--rating--skeleton-text-shimmer"
 };
 //#endregion
-export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments };
+export { current, Rating_module_default as default, empty, filled, rating, ratingSegment, ratingSegments, skeleton };
 
 //# sourceMappingURL=Rating.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.module.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n/**\n * Segments render filled by default. The fill rules below empty out every\n * segment that must not appear filled.\n */\n@mixin empty-segment {\n  .empty {\n    opacity: 1;\n  }\n\n  .filled {\n    opacity: 0;\n  }\n}\n\n.rating {\n  .ratingSegments {\n    display: flex;\n    width: fit-content;\n    order: 2;\n  }\n\n  .ratingSegment {\n    display: grid;\n    grid-template-areas: \"star\";\n    border-radius: var(--corner-radius--m);\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xxs) * -1);\n    }\n\n    &[data-focus-visible] {\n      transform: scale(1.2);\n    }\n  }\n\n  .empty,\n  .filled {\n    grid-area: star;\n    transition-property: opacity, transform;\n    transition-duration: var(--transition--duration--fast);\n  }\n\n  :where(.empty) {\n    opacity: 0;\n    color: var(--rating--star-color);\n  }\n\n  :where(.filled) {\n    opacity: 1;\n    color: var(--rating--star-filled-color);\n  }\n\n  &.fill-cumulative {\n    &:not(:has(.ratingSegments:hover)),\n    &[data-readonly] {\n      .ratingSegment.current ~ .ratingSegment {\n        @include empty-segment;\n      }\n\n      &:not(:has(.current)) .ratingSegment {\n        @include empty-segment;\n      }\n    }\n\n    &:not([data-readonly]) {\n      .ratingSegment:hover ~ .ratingSegment {\n        @include empty-segment;\n      }\n    }\n  }\n\n  &.fill-single {\n    &:not(:has(.ratingSegments:hover)),\n    &[data-readonly] {\n      .ratingSegment:not(.current) {\n        @include empty-segment;\n      }\n    }\n\n    &:not([data-readonly]):has(.ratingSegments:hover) {\n      .ratingSegment:not(:hover) {\n        @include empty-segment;\n      }\n    }\n  }\n\n  &:not([data-readonly]) {\n    .ratingSegment:hover {\n      transform: scale(1.2);\n      transform-origin: center;\n    }\n  }\n\n  &:disabled,\n  &[data-disabled],\n  [aria-disabled] & {\n    .ratingSegment {\n      .empty,\n      .filled {\n        color: var(--form-control--border-color--disabled);\n      }\n    }\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} .ratingSegment {\n      padding: var(--rating--spacing--#{$size});\n    }\n  }\n\n  @include size(s);\n  @include size(m);\n}\n"],"mappings":""}
+{"version":3,"file":"Rating.module.mjs","names":[],"sources":["../../../../../../../src/components/Rating/Rating.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n/**\n * Segments render filled by default. The fill rules below empty out every\n * segment that must not appear filled.\n */\n@mixin empty-segment {\n  .empty {\n    opacity: 1;\n  }\n\n  .filled {\n    opacity: 0;\n  }\n}\n\n.rating {\n  .ratingSegments {\n    display: flex;\n    width: fit-content;\n    order: 2;\n  }\n\n  .ratingSegment {\n    display: grid;\n    grid-template-areas: \"star\";\n    border-radius: var(--corner-radius--m);\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xxs) * -1);\n    }\n\n    &[data-focus-visible] {\n      transform: scale(1.2);\n    }\n  }\n\n  .empty,\n  .filled {\n    grid-area: star;\n    transition-property: opacity, transform;\n    transition-duration: var(--transition--duration--fast);\n  }\n\n  :where(.empty) {\n    opacity: 0;\n    color: var(--rating--star-color);\n  }\n\n  :where(.filled) {\n    opacity: 1;\n    color: var(--rating--star-filled-color);\n  }\n\n  &.fill-cumulative {\n    &:not(:has(.ratingSegments:hover)),\n    &[data-readonly] {\n      .ratingSegment.current ~ .ratingSegment {\n        @include empty-segment;\n      }\n\n      &:not(:has(.current)) .ratingSegment {\n        @include empty-segment;\n      }\n    }\n\n    &:not([data-readonly]) {\n      .ratingSegment:hover ~ .ratingSegment {\n        @include empty-segment;\n      }\n    }\n  }\n\n  &.fill-single {\n    &:not(:has(.ratingSegments:hover)),\n    &[data-readonly] {\n      .ratingSegment:not(.current) {\n        @include empty-segment;\n      }\n    }\n\n    &:not([data-readonly]):has(.ratingSegments:hover) {\n      .ratingSegment:not(:hover) {\n        @include empty-segment;\n      }\n    }\n  }\n\n  &:not([data-readonly]) {\n    .ratingSegment:hover {\n      transform: scale(1.2);\n      transform-origin: center;\n    }\n  }\n\n  &:disabled,\n  &[data-disabled],\n  [aria-disabled] & {\n    .ratingSegment {\n      .empty,\n      .filled {\n        color: var(--form-control--border-color--disabled);\n      }\n    }\n  }\n\n  @mixin size($size) {\n    &.size-#{$size} .ratingSegment {\n      padding: var(--rating--spacing--#{$size});\n    }\n  }\n\n  @include size(s);\n  @include size(m);\n\n  /* SkeletonMode: the segments become one surface in their size */\n  &.skeleton .ratingSegments {\n    @include skeleton.shape;\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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/SkeletonTextContent/SkeletonTextContent.mjs

@@ -16,9 +16,11 @@ var SkeletonTextContent = (props) => {
 	if (!useSkeletonMode()) return children;
 	if (!hasContent(children)) return /* @__PURE__ */ jsx(SkeletonText, { width: defaultWidth });
 	return /* @__PURE__ */ jsx("span", {
-		className: SkeletonTextContent_module_default.skeletonTextContent,
 		"aria-hidden": true,
-		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children })
+		children: /* @__PURE__ */ jsx("span", {
+			className: SkeletonTextContent_module_default.skeletonTextContent,
+			children: /* @__PURE__ */ jsx(SkeletonModeReset, { children })
+		})
 	});
 };
 //#endregion

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

@@ -1 +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  return (\n    <span className={styles.skeletonTextContent} aria-hidden>\n      <SkeletonModeReset>{children}</SkeletonModeReset>\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;CAG7C,OACE,oBAAC,QAAD;EAAM,WAAWA,mCAAO;EAAqB,eAAA;EAC3C,UAAA,oBAAC,mBAAD,EAAoB,SAA4B,CAAA;CAC5C,CAAA;AAEV"}
+{"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/TabNavigation/TabNavigation.mjs

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconChevronDown } from "../Icon/components/icons/IconChevronDown.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
@@ -24,6 +25,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var TabNavigation = flowComponent("TabNavigation", (props) => {
 	const { children, className, ref, ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "TabNavigation");
+	const isSkeleton = useSkeletonMode();
 	const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } = useCollapsingItems();
 	const rootClassName = clsx(TabNavigation_module_default.tabNavigation, hasOverflow && TabNavigation_module_default.collapsed, className);
 	const propsContext = { Link: {
@@ -47,6 +49,7 @@ var TabNavigation = flowComponent("TabNavigation", (props) => {
 		}), /* @__PURE__ */ jsx("div", {
 			className: TabNavigation_module_default.more,
 			ref: moreRef,
+			inert: isSkeleton || void 0,
 			children: /* @__PURE__ */ jsxs(ContextMenuTriggerView, { children: [/* @__PURE__ */ jsxs(Button, {
 				unstyled: true,
 				className: clsx(TabNavigation_module_default.moreButton, menuHasCurrentItem && TabNavigation_module_default.current),

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

@@ -1 +1 @@
-{"version":3,"file":"TabNavigation.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul className={styles.list} ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div className={styles.more} ref={moreRef}>\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4BA,kBAAS,eAAe;CAE5E,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpBC,6BAAO,eACP,eAAeA,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,EAAI,WAAWA,6BAAO,KAAO,CAAA;EACvC,WAAWA,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,WAAWA,6BAAO;GAAM,KAAK;GAC/B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GAAK,WAAWA,6BAAO;GAAM,KAAK;GAChC,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACTA,6BAAO,YACP,sBAAsBA,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}
+{"version":3,"file":"TabNavigation.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n  const isSkeleton = useSkeletonMode();\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul className={styles.list} ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div\n        className={styles.more}\n        ref={moreRef}\n        inert={isSkeleton || undefined}\n      >\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4BA,kBAAS,eAAe;CAC5E,MAAM,aAAa,gBAAgB;CAEnC,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpBC,6BAAO,eACP,eAAeA,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,EAAI,WAAWA,6BAAO,KAAO,CAAA;EACvC,WAAWA,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,WAAWA,6BAAO;GAAM,KAAK;GAC/B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GACE,WAAWA,6BAAO;GAClB,KAAK;GACL,OAAO,cAAc,KAAA;GAErB,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACTA,6BAAO,YACP,sBAAsBA,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { IconChevronDown } from "../../../Icon/components/icons/IconChevronDown.mjs";
 import { Button } from "../../../Button/Button.mjs";
 import { UiComponentTunnelExit } from "../../../UiComponentTunnel/UiComponentTunnelExit.mjs";
@@ -17,6 +18,7 @@ import { useMergeRefs } from "use-callback-ref";
 var TabList = (props) => {
 	const { selection, disabledKeys, onContextMenuSelectionChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
 	const titleCollapsedElementId = useId();
+	const isSkeleton = useSkeletonMode();
 	const overflowObserver = useObserveOverflow();
 	const isCollapsed = overflowObserver.isOverflowing;
 	const rootClassName = clsx(TabList_module_default.tabList, isCollapsed && TabList_module_default.collapsed);
@@ -54,11 +56,13 @@ var TabList = (props) => {
 			component: "Tabs"
 		})
 	})] });
+	const showIndicator = !isCollapsed && !isSkeleton && tabIndicator.indicatorStyle;
 	return /* @__PURE__ */ jsxs("div", {
 		className: rootClassName,
 		ref: tabIndicator.rootRef,
+		inert: isSkeleton || void 0,
 		children: [
-			!isCollapsed && tabIndicator.indicatorStyle && /* @__PURE__ */ jsx("div", {
+			showIndicator && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
 				className: clsx(TabList_module_default.activeIndicator, tabIndicator.isAnimated && TabList_module_default.animated),
 				style: tabIndicator.indicatorStyle

package/dist/js/packages/components/src/components/Tabs/components/TabList/TabList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\ninterface Props {\n  selection: Aria.Key | null;\n  onContextMenuSelectionChange: (key: Aria.Key) => void;\n  disabledKeys?: Iterable<Aria.Key>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport const TabList: FC<Props> = (props) => {\n  const {\n    selection,\n    disabledKeys,\n    onContextMenuSelectionChange,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n  } = props;\n\n  const titleCollapsedElementId = useId();\n  const overflowObserver = useObserveOverflow();\n  const isCollapsed = overflowObserver.isOverflowing;\n  const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n  const tabIndicator = useTabIndicator(isCollapsed);\n\n  const setTitlesRef = useMergeRefs<HTMLDivElement>([\n    overflowObserver.ref,\n    tabIndicator.titlesRef,\n  ]);\n\n  const handleContextMenuSelectionChange = (key: Aria.Key) => {\n    onContextMenuSelectionChange(key);\n  };\n\n  const regularTabTitles = (\n    <Aria.TabList\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      className={styles.titles}\n      ref={setTitlesRef}\n    >\n      <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n    </Aria.TabList>\n  );\n\n  const contextMenuWhenCollapsed = isCollapsed && (\n    <ContextMenuTriggerView>\n      <Button\n        variant=\"solid\"\n        className={styles.contextMenuButton}\n        color=\"light\"\n        aria-labelledby={titleCollapsedElementId}\n      >\n        <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n        <IconChevronDown />\n      </Button>\n\n      <ContextMenuView\n        disabledKeys={disabledKeys}\n        selectedKeys={selection ? [selection] : undefined}\n        selectionMode=\"navigation\"\n        onAction={(key) => handleContextMenuSelectionChange(key)}\n      >\n        <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n\n  return (\n    <div className={rootClassName} ref={tabIndicator.rootRef}>\n      {!isCollapsed && tabIndicator.indicatorStyle && (\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            styles.activeIndicator,\n            tabIndicator.isAnimated && styles.animated,\n          )}\n          style={tabIndicator.indicatorStyle}\n        />\n      )}\n      {regularTabTitles}\n      {contextMenuWhenCollapsed}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,0BAA0B,MAAM;CACtC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,eAAeA,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EACE,cAAY;EACZ,mBAAiB;EACjB,WAAWA,uBAAO;EAClB,KAAK;EAEL,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAWA,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAG1B,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,KAAK,aAAa;EAAjD,UAAA;GACG,CAAC,eAAe,aAAa,kBAC5B,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACTA,uBAAO,iBACP,aAAa,cAAcA,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}
+{"version":3,"file":"TabList.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Tabs/components/TabList/TabList.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./TabList.module.scss\";\nimport { useTabIndicator } from \"../../lib/useTabIndicator\";\nimport { useObserveOverflow } from \"@/lib/hooks/dom/useObserveOverflow\";\nimport { Button } from \"@/components/Button\";\nimport clsx from \"clsx\";\nimport { useMergeRefs } from \"use-callback-ref\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\ninterface Props {\n  selection: Aria.Key | null;\n  onContextMenuSelectionChange: (key: Aria.Key) => void;\n  disabledKeys?: Iterable<Aria.Key>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n}\n\nexport const TabList: FC<Props> = (props) => {\n  const {\n    selection,\n    disabledKeys,\n    onContextMenuSelectionChange,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n  } = props;\n\n  const titleCollapsedElementId = useId();\n  const isSkeleton = useSkeletonMode();\n  const overflowObserver = useObserveOverflow();\n  const isCollapsed = overflowObserver.isOverflowing;\n  const rootClassName = clsx(styles.tabList, isCollapsed && styles.collapsed);\n  const tabIndicator = useTabIndicator(isCollapsed);\n\n  const setTitlesRef = useMergeRefs<HTMLDivElement>([\n    overflowObserver.ref,\n    tabIndicator.titlesRef,\n  ]);\n\n  const handleContextMenuSelectionChange = (key: Aria.Key) => {\n    onContextMenuSelectionChange(key);\n  };\n\n  const regularTabTitles = (\n    <Aria.TabList\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      className={styles.titles}\n      ref={setTitlesRef}\n    >\n      <UiComponentTunnelExit id=\"Titles\" component=\"Tabs\" />\n    </Aria.TabList>\n  );\n\n  const contextMenuWhenCollapsed = isCollapsed && (\n    <ContextMenuTriggerView>\n      <Button\n        variant=\"solid\"\n        className={styles.contextMenuButton}\n        color=\"light\"\n        aria-labelledby={titleCollapsedElementId}\n      >\n        <UiComponentTunnelExit id=\"ActiveTitle\" component=\"Tabs\" />\n        <IconChevronDown />\n      </Button>\n\n      <ContextMenuView\n        disabledKeys={disabledKeys}\n        selectedKeys={selection ? [selection] : undefined}\n        selectionMode=\"navigation\"\n        onAction={(key) => handleContextMenuSelectionChange(key)}\n      >\n        <UiComponentTunnelExit id=\"ContextMenuItems\" component=\"Tabs\" />\n      </ContextMenuView>\n    </ContextMenuTriggerView>\n  );\n\n  /* In the mode, no tab shows as selected. */\n  const showIndicator =\n    !isCollapsed && !isSkeleton && tabIndicator.indicatorStyle;\n\n  return (\n    <div\n      className={rootClassName}\n      ref={tabIndicator.rootRef}\n      inert={isSkeleton || undefined}\n    >\n      {showIndicator && (\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            styles.activeIndicator,\n            tabIndicator.isAnimated && styles.animated,\n          )}\n          style={tabIndicator.indicatorStyle}\n        />\n      )}\n      {regularTabTitles}\n      {contextMenuWhenCollapsed}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,IAAa,WAAsB,UAAU;CAC3C,MAAM,EACJ,WACA,cACA,8BACA,cAAc,WACd,mBAAmB,mBACjB;CAEJ,MAAM,0BAA0B,MAAM;CACtC,MAAM,aAAa,gBAAgB;CACnC,MAAM,mBAAmB,mBAAmB;CAC5C,MAAM,cAAc,iBAAiB;CACrC,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,eAAeA,uBAAO,SAAS;CAC1E,MAAM,eAAe,gBAAgB,WAAW;CAEhD,MAAM,eAAe,aAA6B,CAChD,iBAAiB,KACjB,aAAa,SACf,CAAC;CAED,MAAM,oCAAoC,QAAkB;EAC1D,6BAA6B,GAAG;CAClC;CAEA,MAAM,mBACJ,oBAAC,KAAK,SAAN;EACE,cAAY;EACZ,mBAAiB;EACjB,WAAWA,uBAAO;EAClB,KAAK;EAEL,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAS,WAAU;EAAQ,CAAA;CACzC,CAAA;CAGhB,MAAM,2BAA2B,eAC/B,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;EACE,SAAQ;EACR,WAAWA,uBAAO;EAClB,OAAM;EACN,mBAAiB;EAJnB,UAAA,CAME,oBAAC,uBAAD;GAAuB,IAAG;GAAc,WAAU;EAAQ,CAAA,GAC1D,oBAAC,iBAAD,CAAkB,CAAA,CACZ;CAER,CAAA,GAAA,oBAAC,iBAAD;EACgB;EACd,cAAc,YAAY,CAAC,SAAS,IAAI,KAAA;EACxC,eAAc;EACd,WAAW,QAAQ,iCAAiC,GAAG;EAEvD,UAAA,oBAAC,uBAAD;GAAuB,IAAG;GAAmB,WAAU;EAAQ,CAAA;CAChD,CAAA,CACK,EAAA,CAAA;CAI1B,MAAM,gBACJ,CAAC,eAAe,CAAC,cAAc,aAAa;CAE9C,OACE,qBAAC,OAAD;EACE,WAAW;EACX,KAAK,aAAa;EAClB,OAAO,cAAc,KAAA;EAHvB,UAAA;GAKG,iBACC,oBAAC,OAAD;IACE,eAAY;IACZ,WAAW,KACTA,uBAAO,iBACP,aAAa,cAAcA,uBAAO,QACpC;IACA,OAAO,aAAa;GACrB,CAAA;GAEF;GACA;EACE;;AAET"}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { UiComponentTunnelEntry } from "../../../UiComponentTunnel/UiComponentTunnelEntry.mjs";
+import { useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { Text } from "../../../Text/Text.mjs";
 import { MenuItem } from "../../../MenuItem/MenuItem.mjs";
 import TabTitle_module_default from "./TabTitle.module.mjs";
@@ -13,7 +14,8 @@ import * as Aria from "react-aria-components";
 var TabTitle = (props) => {
 	const { children, className, ...rest } = props;
 	const { id } = useTabContext();
-	const titleClassName = clsx(TabTitle_module_default.tabTitle, className);
+	const isSkeleton = useSkeletonMode();
+	const titleClassName = clsx(TabTitle_module_default.tabTitle, isSkeleton && TabTitle_module_default.skeleton, className);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UiComponentTunnelEntry, {
 		id: "Titles",
 		component: "Tabs",

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabTitle.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./TabTitle.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useTabContext } from \"@/components/Tabs/components/Tab/context\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\n\nexport interface TabTitleProps\n  extends\n    Omit<Aria.TabProps, \"children\" | \"id\" | \"isDisabled\">,\n    PropsWithChildren {}\n\n/** @flr-generate all */\nexport const TabTitle: FC<TabTitleProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const { id } = useTabContext();\n\n  const titleClassName = clsx(styles.tabTitle, className);\n\n  return (\n    <>\n      <UiComponentTunnelEntry id=\"Titles\" component=\"Tabs\">\n        <Aria.Tab {...rest} id={id} className={titleClassName}>\n          {(p) => (\n            <>\n              <Text emulateBoldWidth>\n                <span className={styles.text}>{children}</span>\n              </Text>\n              <UiComponentTunnelEntry id=\"ActiveTitle\" component=\"Tabs\">\n                {p.isSelected && children}\n              </UiComponentTunnelEntry>\n            </>\n          )}\n        </Aria.Tab>\n      </UiComponentTunnelEntry>\n\n      <UiComponentTunnelEntry id=\"ContextMenuItems\" component=\"Tabs\">\n        <MenuItem {...rest} className={styles.menuItem} id={id}>\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default TabTitle;\n"],"mappings":";;;;;;;;;;;;AAeA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,EAAE,OAAO,cAAc;CAE7B,MAAM,iBAAiB,KAAKA,wBAAO,UAAU,SAAS;CAEtD,OACE,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,KAAK,KAAN;GAAU,GAAI;GAAU;GAAI,WAAW;GACnC,WAAA,MACA,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,kBAAA;IACJ,UAAA,oBAAC,QAAD;KAAM,WAAWD,wBAAO;KAAO;IAAe,CAAA;GAC1C,CAAA,GACN,oBAAC,wBAAD;IAAwB,IAAG;IAAc,WAAU;IAChD,UAAA,EAAE,cAAc;GACK,CAAA,CACxB,EAAA,CAAA;EAEI,CAAA;CACY,CAAA,GAExB,oBAAC,wBAAD;EAAwB,IAAG;EAAmB,WAAU;EACtD,UAAA,oBAAC,UAAD;GAAU,GAAI;GAAM,WAAWA,wBAAO;GAAc;GACjD;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}
+{"version":3,"file":"TabTitle.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./TabTitle.module.scss\";\nimport { Text } from \"@/components/Text\";\nimport { useTabContext } from \"@/components/Tabs/components/Tab/context\";\nimport { MenuItem } from \"@/components/MenuItem\";\nimport { UiComponentTunnelEntry } from \"@/components/UiComponentTunnel/UiComponentTunnelEntry\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface TabTitleProps\n  extends\n    Omit<Aria.TabProps, \"children\" | \"id\" | \"isDisabled\">,\n    PropsWithChildren {}\n\n/** @flr-generate all */\nexport const TabTitle: FC<TabTitleProps> = (props) => {\n  const { children, className, ...rest } = props;\n\n  const { id } = useTabContext();\n  const isSkeleton = useSkeletonMode();\n\n  const titleClassName = clsx(\n    styles.tabTitle,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  return (\n    <>\n      <UiComponentTunnelEntry id=\"Titles\" component=\"Tabs\">\n        <Aria.Tab {...rest} id={id} className={titleClassName}>\n          {(p) => (\n            <>\n              <Text emulateBoldWidth>\n                <span className={styles.text}>{children}</span>\n              </Text>\n              <UiComponentTunnelEntry id=\"ActiveTitle\" component=\"Tabs\">\n                {p.isSelected && children}\n              </UiComponentTunnelEntry>\n            </>\n          )}\n        </Aria.Tab>\n      </UiComponentTunnelEntry>\n\n      <UiComponentTunnelEntry id=\"ContextMenuItems\" component=\"Tabs\">\n        <MenuItem {...rest} className={styles.menuItem} id={id}>\n          {children}\n        </MenuItem>\n      </UiComponentTunnelEntry>\n    </>\n  );\n};\n\nexport default TabTitle;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,YAA+B,UAAU;CACpD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,aAAa,gBAAgB;CAEnC,MAAM,iBAAiB,KACrBA,wBAAO,UACP,cAAcA,wBAAO,UACrB,SACF;CAEA,OACE,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,wBAAD;EAAwB,IAAG;EAAS,WAAU;EAC5C,UAAA,oBAAC,KAAK,KAAN;GAAU,GAAI;GAAU;GAAI,WAAW;GACnC,WAAA,MACA,qBAAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;IAAM,kBAAA;IACJ,UAAA,oBAAC,QAAD;KAAM,WAAWD,wBAAO;KAAO;IAAe,CAAA;GAC1C,CAAA,GACN,oBAAC,wBAAD;IAAwB,IAAG;IAAc,WAAU;IAChD,UAAA,EAAE,cAAc;GACK,CAAA,CACxB,EAAA,CAAA;EAEI,CAAA;CACY,CAAA,GAExB,oBAAC,wBAAD;EAAwB,IAAG;EAAmB,WAAU;EACtD,UAAA,oBAAC,UAAD;GAAU,GAAI;GAAM,WAAWA,wBAAO;GAAc;GACjD;EACO,CAAA;CACY,CAAA,CACxB,EAAA,CAAA;AAEN"}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs

@@ -3,13 +3,15 @@
 //#region src/components/Tabs/components/TabTitle/TabTitle.module.scss
 var tabTitle = "flow--tabs--tab-title";
 var text = "flow--tabs--tab-title--text";
+var skeleton = "flow--tabs--tab-title--skeleton";
 var menuItem = "flow--tabs--tab-title--menu-item";
 var TabTitle_module_default = {
 	tabTitle,
 	text,
+	skeleton,
 	menuItem
 };
 //#endregion
-export { TabTitle_module_default as default, menuItem, tabTitle, text };
+export { TabTitle_module_default as default, menuItem, skeleton, tabTitle, text };
 
 //# sourceMappingURL=TabTitle.module.mjs.map

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n.menuItem {\n  // The tab's children are the consumer's; a `Text` child renders this span.\n  // stylelint-disable-next-line selector-max-type -- consumer children\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n/* SkeletonMode: no tab shows as selected */\n.tabTitle.skeleton[data-selected] {\n  font-weight: inherit;\n}\n\n.menuItem {\n  // The tab's children are the consumer's; a `Text` child renders this span.\n  // stylelint-disable-next-line selector-max-type -- consumer children\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}

package/dist/types/components/SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from 'react';
+import { PropsWithClassName } from '../../../../lib/types/props';
+export type SkeletonIconSurfaceProps = PropsWithChildren & PropsWithClassName;
+/**
+ * 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.
+ */
+export declare const SkeletonIconSurface: FC<SkeletonIconSurfaceProps>;
+export default SkeletonIconSurface;

package/dist/types/components/SkeletonMode/components/SkeletonIconSurface/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SkeletonIconSurface';
+export { default } from './SkeletonIconSurface';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.5.0-next.37",
+  "version": "1.5.0-next.39",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -84,9 +84,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.5.0-next.37",
+    "@mittwald/flow-icons": "^1.5.0-next.39",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.5.0-next.37",
+    "@mittwald/react-tunnel": "^1.5.0-next.39",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -139,12 +139,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.5.0-next.37",
-    "@mittwald/flow-design-tokens": "1.5.0-next.37",
-    "@mittwald/flow-icons-base": "1.5.0-next.37",
+    "@mittwald/flow-core": "1.5.0-next.39",
+    "@mittwald/flow-design-tokens": "1.5.0-next.39",
+    "@mittwald/flow-icons-base": "1.5.0-next.39",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.5.0-next.37",
+    "@mittwald/typescript-config": "1.5.0-next.39",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -198,7 +198,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.5.0-next.37",
+    "@mittwald/flow-icons-pro": "1.5.0-next.39",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -222,5 +222,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "55a70fecdd275e5beca4858407e6093e050105d0"
+  "gitHead": "005dbedb0e5df10edba25b51b8d67fc4ff6714bf"
 }