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

package/dist/js/packages/components/src/components/Alert/Alert.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 { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import Alert_module_default from "./Alert.module.mjs";
 import clsx from "clsx";
@@ -11,7 +12,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var Alert = flowComponent("Alert", (props) => {
 	const { children, className, status = "info", ref, ...rest } = props;
-	const rootClassName = clsx(Alert_module_default.alert, Alert_module_default[status], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Alert_module_default.alert, Alert_module_default[status], isSkeleton && Alert_module_default.skeleton, className);
 	const propsContext = {
 		Heading: {
 			className: Alert_module_default.heading,

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Alert.module.scss\";\n\nexport interface AlertProps\n  extends\n    PropsWithChildren<ComponentProps<\"aside\">>,\n    PropsWithStatus,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Alert = flowComponent(\"Alert\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.alert, styles[status], className);\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 3,\n      size: \"s\",\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Content: {\n      className: styles.content,\n      Button: {\n        size: \"s\",\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n      },\n    },\n  };\n\n  return (\n    <aside {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext} dependencies={[status]}>\n        {children}\n      </PropsContextProvider>\n    </aside>\n  );\n});\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;AAiBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,gBAAgB,KAAKA,qBAAO,OAAOA,qBAAO,SAAS,SAAS;CAElE,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,qBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UACjB,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWD,qBAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,SAAS;GACP,WAAWA,qBAAO;GAClB,QAAQ,EACN,MAAM,IACR;GACA,aAAa;IACX,eAAe;IACf,MAAM;GACR;EACF;CACF;CAEA,OACE,oBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAAc,cAAc,CAAC,MAAM;GAC7D;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}
+{"version":3,"file":"Alert.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Alert.module.scss\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertProps\n  extends\n    PropsWithChildren<ComponentProps<\"aside\">>,\n    PropsWithStatus,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Alert = flowComponent(\"Alert\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.alert,\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 3,\n      size: \"s\",\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Content: {\n      className: styles.content,\n      Button: {\n        size: \"s\",\n      },\n      ActionGroup: {\n        preserveOrder: true,\n        size: \"s\",\n      },\n    },\n  };\n\n  return (\n    <aside {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext} dependencies={[status]}>\n        {children}\n      </PropsContextProvider>\n    </aside>\n  );\n});\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,qBAAO,OACPA,qBAAO,SACP,cAAcA,qBAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,qBAAO;GAClB,OAAO;GACP,MAAM;GACN,UAAU,SAAS,UACjB,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWD,qBAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,SAAS;GACP,WAAWA,qBAAO;GAClB,QAAQ,EACN,MAAM,IACR;GACA,aAAa;IACX,eAAe;IACf,MAAM;GACR;EACF;CACF;CAEA,OACE,oBAAC,SAAD;EAAO,GAAI;EAAM,WAAW;EAAoB;EAC9C,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAAc,cAAc,CAAC,MAAM;GAC7D;EACmB,CAAA;CACjB,CAAA;AAEX,CAAC"}

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

@@ -10,6 +10,7 @@ var warning = "flow--alert--warning";
 var danger = "flow--alert--danger";
 var success = "flow--alert--success";
 var unavailable = "flow--alert--unavailable";
+var skeleton = "flow--alert--skeleton";
 var Alert_module_default = {
 	alert,
 	icon,
@@ -19,9 +20,10 @@ var Alert_module_default = {
 	warning,
 	danger,
 	success,
-	unavailable
+	unavailable,
+	skeleton
 };
 //#endregion
-export { alert, content, danger, Alert_module_default as default, heading, icon, info, success, unavailable, warning };
+export { alert, content, danger, Alert_module_default as default, heading, icon, info, skeleton, success, unavailable, warning };
 
 //# sourceMappingURL=Alert.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.module.mjs","names":[],"sources":["../../../../../../../src/components/Alert/Alert.module.scss"],"sourcesContent":[".alert {\n  border-radius: var(--alert--corner-radius);\n  border-width: var(--alert--border-width);\n  border-style: var(--alert--border-style);\n  border-inline-start-width: var(--alert--border-x-start-width);\n  padding: var(--alert--padding);\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--alert--heading-to-content-spacing);\n  width: 100%;\n\n  .icon {\n    height: var(--heading-line-height);\n    width: var(--heading-line-height);\n    vertical-align: bottom;\n    display: inline-block;\n    margin-inline-end: var(--heading--icon-to-text-spacing);\n  }\n\n  @extend .info;\n\n  /* Elements */\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: var(--alert--spacing);\n  }\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      border-color: var(--alert--#{$status}-border-color);\n\n      .heading {\n        color: var(--alert--#{$status}-heading-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(warning);\n  @include status(danger);\n  @include status(success);\n  @include status(unavailable);\n\n  /* Layout */\n\n  + :global(.flow--section) {\n    margin-block-start: var(--section--section-to-section-spacing);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Alert.module.mjs","names":[],"sources":["../../../../../../../src/components/Alert/Alert.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.alert {\n  border-radius: var(--alert--corner-radius);\n  border-width: var(--alert--border-width);\n  border-style: var(--alert--border-style);\n  border-inline-start-width: var(--alert--border-x-start-width);\n  padding: var(--alert--padding);\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--alert--heading-to-content-spacing);\n  width: 100%;\n\n  .icon {\n    height: var(--heading-line-height);\n    width: var(--heading-line-height);\n    vertical-align: bottom;\n    display: inline-block;\n    margin-inline-end: var(--heading--icon-to-text-spacing);\n  }\n\n  @extend .info;\n\n  /* Elements */\n\n  .content {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    row-gap: var(--alert--spacing);\n  }\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      border-color: var(--alert--#{$status}-border-color);\n\n      .heading {\n        color: var(--alert--#{$status}-heading-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(warning);\n  @include status(danger);\n  @include status(success);\n  @include status(unavailable);\n\n  /* SkeletonMode: no status color while the content loads */\n  &.skeleton {\n    border-color: skeleton.$background-color;\n  }\n\n  /* Layout */\n\n  + :global(.flow--section) {\n    margin-block-start: var(--section--section-to-section-spacing);\n  }\n}\n"],"mappings":""}

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

@@ -1,10 +1,12 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconDanger } from "../Icon/components/icons/IconDanger.mjs";
 import { IconInfo } from "../Icon/components/icons/IconInfo.mjs";
 import { IconSuccess } from "../Icon/components/icons/IconSuccess.mjs";
 import { IconUnavailable } from "../Icon/components/icons/IconUnavailable.mjs";
 import { IconWarning } from "../Icon/components/icons/IconWarning.mjs";
+import { SkeletonIconSurface } from "../SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import __locale_default from "../../../../../_virtual/_2.locale.mjs";
 import { jsx } from "react/jsx-runtime";
@@ -20,12 +22,20 @@ var icons = {
 var AlertIcon = (props) => {
 	const { status = "info", ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "AlertIcon");
+	const isSkeleton = useSkeletonMode();
 	const Icon = icons[status];
 	const iconProps = {
 		color: status,
 		"aria-label": stringFormatter.format(`status.${status}`),
 		...rest
 	};
+	if (isSkeleton) {
+		const { className, ...iconPropsWithoutClassName } = iconProps;
+		return /* @__PURE__ */ jsx(SkeletonIconSurface, {
+			className,
+			children: /* @__PURE__ */ jsx(Icon, { ...iconPropsWithoutClassName })
+		});
+	}
 	return /* @__PURE__ */ jsx(Icon, { ...iconProps });
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"AlertIcon.mjs","names":["locales"],"sources":["../../../../../../../src/components/AlertIcon/AlertIcon.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport {\n  IconDanger,\n  IconInfo,\n  IconSuccess,\n  IconUnavailable,\n  IconWarning,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithStatus, Status } from \"@/lib/types/props\";\nimport type { IconProps } from \"@/components/Icon\";\n\nexport type AlertIconProps = Omit<IconProps, \"status\"> & PropsWithStatus;\n\nconst icons: Record<Status, ComponentType> = {\n  danger: IconDanger,\n  info: IconInfo,\n  success: IconSuccess,\n  warning: IconWarning,\n  unavailable: IconUnavailable,\n};\n\n/** @flr-generate all */\nexport const AlertIcon: FC<AlertIconProps> = (props) => {\n  const { status = \"info\", ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"AlertIcon\");\n\n  const Icon = icons[status];\n\n  const iconProps: IconProps = {\n    color: status,\n    \"aria-label\": stringFormatter.format(`status.${status}`),\n    ...rest,\n  };\n\n  return <Icon {...iconProps} />;\n};\n\nexport default AlertIcon;\n"],"mappings":";;;;;;;;;;;AAeA,IAAM,QAAuC;CAC3C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;AACf;;AAGA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,SAAS,QAAQ,GAAG,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CAExE,MAAM,OAAO,MAAM;CAEnB,MAAM,YAAuB;EAC3B,OAAO;EACP,cAAc,gBAAgB,OAAO,UAAU,QAAQ;EACvD,GAAG;CACL;CAEA,OAAO,oBAAC,MAAD,EAAM,GAAI,UAAY,CAAA;AAC/B"}
+{"version":3,"file":"AlertIcon.mjs","names":["locales"],"sources":["../../../../../../../src/components/AlertIcon/AlertIcon.tsx"],"sourcesContent":["import type { ComponentType, FC } from \"react\";\nimport {\n  IconDanger,\n  IconInfo,\n  IconSuccess,\n  IconUnavailable,\n  IconWarning,\n} from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithStatus, Status } from \"@/lib/types/props\";\nimport type { IconProps } from \"@/components/Icon\";\nimport { SkeletonIconSurface } from \"@/components/SkeletonMode/components/SkeletonIconSurface\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport type AlertIconProps = Omit<IconProps, \"status\"> & PropsWithStatus;\n\nconst icons: Record<Status, ComponentType> = {\n  danger: IconDanger,\n  info: IconInfo,\n  success: IconSuccess,\n  warning: IconWarning,\n  unavailable: IconUnavailable,\n};\n\n/** @flr-generate all */\nexport const AlertIcon: FC<AlertIconProps> = (props) => {\n  const { status = \"info\", ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"AlertIcon\");\n  const isSkeleton = useSkeletonMode();\n\n  const Icon = icons[status];\n\n  const iconProps: IconProps = {\n    color: status,\n    \"aria-label\": stringFormatter.format(`status.${status}`),\n    ...rest,\n  };\n\n  if (isSkeleton) {\n    const { className, ...iconPropsWithoutClassName } = iconProps;\n    return (\n      <SkeletonIconSurface className={className}>\n        <Icon {...iconPropsWithoutClassName} />\n      </SkeletonIconSurface>\n    );\n  }\n\n  return <Icon {...iconProps} />;\n};\n\nexport default AlertIcon;\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAM,QAAuC;CAC3C,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,aAAa;AACf;;AAGA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,SAAS,QAAQ,GAAG,SAAS;CAErC,MAAM,kBAAkB,4BAA4BA,kBAAS,WAAW;CACxE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,OAAO,MAAM;CAEnB,MAAM,YAAuB;EAC3B,OAAO;EACP,cAAc,gBAAgB,OAAO,UAAU,QAAQ;EACvD,GAAG;CACL;CAEA,IAAI,YAAY;EACd,MAAM,EAAE,WAAW,GAAG,8BAA8B;EACpD,OACE,oBAAC,qBAAD;GAAgC;GAC9B,UAAA,oBAAC,MAAD,EAAM,GAAI,0BAA4B,CAAA;EACnB,CAAA;CAEzB;CAEA,OAAO,oBAAC,MAAD,EAAM,GAAI,UAAY,CAAA;AAC/B"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import Breadcrumb_module_default from "./Breadcrumb.module.mjs";
 import { BreadcrumbItem } from "./components/BreadcrumbItem/BreadcrumbItem.mjs";
 import clsx from "clsx";
@@ -11,7 +12,8 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var Breadcrumb = (props) => {
 	const { children, className, color = "default", size = "m", ...rest } = props;
-	const rootClassName = clsx(Breadcrumb_module_default.breadcrumb, isAlphaColor(color) && Breadcrumb_module_default[color], size === "s" && Breadcrumb_module_default["size-s"], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Breadcrumb_module_default.breadcrumb, isAlphaColor(color) && Breadcrumb_module_default[color], size === "s" && Breadcrumb_module_default["size-s"], isSkeleton && Breadcrumb_module_default.skeleton, className);
 	const propsContext = { Link: {
 		unstyled: true,
 		className: Breadcrumb_module_default.link,

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.mjs","names":["styles"],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\n\nexport interface BreadcrumbProps\n  extends\n    Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n    PropsWithChildren {\n  /** The color of the breadcrumb. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n  const { children, className, color = \"default\", size = \"m\", ...rest } = props;\n\n  const rootClassName = clsx(\n    styles.breadcrumb,\n    isAlphaColor(color) && styles[color],\n    size === \"s\" && styles[\"size-s\"],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      unstyled: true,\n      className: styles.link,\n      wrapWith: <BreadcrumbItem />,\n    },\n  };\n\n  return (\n    <Aria.Breadcrumbs {...rest} className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Breadcrumbs>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,KAAK,GAAG,SAAS;CAExE,MAAM,gBAAgB,KACpBA,0BAAO,YACP,aAAa,KAAK,KAAKA,0BAAO,QAC9B,SAAS,OAAOA,0BAAO,WACvB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU;EACV,WAAWA,0BAAO;EAClB,UAAU,oBAAC,gBAAD,CAAiB,CAAA;CAC7B,EACF;CAEA,OACE,oBAAC,KAAK,aAAN;EAAkB,GAAI;EAAM,WAAW;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACN,CAAA;AAEtB"}
+{"version":3,"file":"Breadcrumb.mjs","names":["styles"],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Breadcrumb.module.scss\";\nimport clsx from \"clsx\";\nimport type { BreadcrumbItemProps } from \"./components/BreadcrumbItem\";\nimport { BreadcrumbItem } from \"./components/BreadcrumbItem\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface BreadcrumbProps\n  extends\n    Omit<Aria.BreadcrumbsProps<BreadcrumbItemProps>, \"children\">,\n    PropsWithChildren {\n  /** The color of the breadcrumb. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const Breadcrumb: FC<BreadcrumbProps> = (props) => {\n  const { children, className, color = \"default\", size = \"m\", ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.breadcrumb,\n    isAlphaColor(color) && styles[color],\n    size === \"s\" && styles[\"size-s\"],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      unstyled: true,\n      className: styles.link,\n      wrapWith: <BreadcrumbItem />,\n    },\n  };\n\n  return (\n    <Aria.Breadcrumbs {...rest} className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Aria.Breadcrumbs>\n  );\n};\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,WAAW,QAAQ,WAAW,OAAO,KAAK,GAAG,SAAS;CAExE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,0BAAO,YACP,aAAa,KAAK,KAAKA,0BAAO,QAC9B,SAAS,OAAOA,0BAAO,WACvB,cAAcA,0BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU;EACV,WAAWA,0BAAO;EAClB,UAAU,oBAAC,gBAAD,CAAiB,CAAA;CAC7B,EACF;CAEA,OACE,oBAAC,KAAK,aAAN;EAAkB,GAAI;EAAM,WAAW;EACrC,UAAA,oBAAC,sBAAD;GAAsB,OAAO;GAC1B;EACmB,CAAA;CACN,CAAA;AAEtB"}

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

@@ -5,6 +5,7 @@ var breadcrumb = "flow--breadcrumb";
 var link = "flow--breadcrumb--link";
 var breadcrumbItem = "flow--breadcrumb--breadcrumb-item";
 var icon = "flow--breadcrumb--icon";
+var skeleton = "flow--breadcrumb--skeleton";
 var dark = "flow--breadcrumb--dark";
 var light = "flow--breadcrumb--light";
 var Breadcrumb_module_default = {
@@ -12,6 +13,7 @@ var Breadcrumb_module_default = {
 	link,
 	breadcrumbItem,
 	icon,
+	skeleton,
 	"size-s": "flow--breadcrumb--size-s",
 	dark,
 	light,
@@ -19,6 +21,6 @@ var Breadcrumb_module_default = {
 	"light-static": "flow--breadcrumb--light-static"
 };
 //#endregion
-export { breadcrumb, breadcrumbItem, dark, Breadcrumb_module_default as default, icon, light, link };
+export { breadcrumb, breadcrumbItem, dark, Breadcrumb_module_default as default, icon, light, link, skeleton };
 
 //# sourceMappingURL=Breadcrumb.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.module.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.breadcrumb {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  align-items: center;\n\n  .link {\n    padding-inline: var(--breadcrumb--spacing);\n    font-weight: var(--breadcrumb--font-weight--default);\n    text-decoration: underline;\n    cursor: pointer;\n\n    @include focus.focus;\n\n    & {\n      @include ellipsis.ellipsis;\n    }\n  }\n\n  .breadcrumbItem {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    color: var(--breadcrumb--color--default);\n\n    &:last-child {\n      .icon {\n        display: none;\n      }\n\n      .link {\n        text-decoration: none;\n        font-weight: var(--breadcrumb--font-weight--current);\n      }\n    }\n\n    &:first-child .link {\n      padding-inline-start: 0;\n    }\n\n    &[data-disabled=\"true\"] {\n      .link {\n        cursor: unset;\n      }\n    }\n\n    &:not([data-disabled=\"true\"]) {\n      .link {\n        &:hover {\n          color: var(--breadcrumb--color--hover);\n        }\n\n        &[data-pressed] {\n          color: var(--breadcrumb--color--pressed);\n        }\n      }\n    }\n  }\n\n  /* Size s */\n\n  &.size-s {\n    .link {\n      font-size: var(--font-size-text--s);\n    }\n\n    .icon {\n      width: var(--font-size-text--s);\n      height: var(--font-size-text--s);\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .breadcrumbItem {\n        color: var(--breadcrumb--color-#{$color}--default);\n\n        &:not([data-disabled=\"true\"]) {\n          .link {\n            &:hover {\n              color: var(--breadcrumb--color-#{$color}--hover);\n            }\n\n            &[data-pressed] {\n              color: var(--breadcrumb--color-#{$color}--pressed);\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}
+{"version":3,"file":"Breadcrumb.module.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.breadcrumb {\n  display: flex;\n  list-style: none;\n  padding: 0;\n  align-items: center;\n\n  .link {\n    padding-inline: var(--breadcrumb--spacing);\n    font-weight: var(--breadcrumb--font-weight--default);\n    text-decoration: underline;\n    cursor: pointer;\n\n    @include focus.focus;\n\n    & {\n      @include ellipsis.ellipsis;\n    }\n  }\n\n  .breadcrumbItem {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n    color: var(--breadcrumb--color--default);\n\n    &:last-child {\n      .icon {\n        display: none;\n      }\n\n      .link {\n        text-decoration: none;\n        font-weight: var(--breadcrumb--font-weight--current);\n      }\n    }\n\n    &:first-child .link {\n      padding-inline-start: 0;\n    }\n\n    &[data-disabled=\"true\"] {\n      .link {\n        cursor: unset;\n      }\n    }\n\n    &:not([data-disabled=\"true\"]) {\n      .link {\n        &:hover {\n          color: var(--breadcrumb--color--hover);\n        }\n\n        &[data-pressed] {\n          color: var(--breadcrumb--color--pressed);\n        }\n      }\n    }\n  }\n\n  /* SkeletonMode: no underline over the bars, no current item */\n  &.skeleton .breadcrumbItem .link {\n    text-decoration: none;\n    font-weight: var(--breadcrumb--font-weight--default);\n  }\n\n  /* Size s */\n\n  &.size-s {\n    .link {\n      font-size: var(--font-size-text--s);\n    }\n\n    .icon {\n      width: var(--font-size-text--s);\n      height: var(--font-size-text--s);\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .breadcrumbItem {\n        color: var(--breadcrumb--color-#{$color}--default);\n\n        &:not([data-disabled=\"true\"]) {\n          .link {\n            &:hover {\n              color: var(--breadcrumb--color-#{$color}--hover);\n            }\n\n            &[data-pressed] {\n              color: var(--breadcrumb--color-#{$color}--pressed);\n            }\n          }\n        }\n      }\n    }\n  }\n\n  @include color(dark);\n  @include color(light);\n  @include color(dark-static);\n  @include color(light-static);\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Legend/components/LegendItem/LegendItem.mjs

@@ -1,5 +1,6 @@
 "use client"
 /* */
+import { useSkeletonMode } from "../../../SkeletonMode/skeletonModeContext.mjs";
 import { Text } from "../../../Text/Text.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
 import LegendItem_module_default from "./LegendItem.module.mjs";
@@ -8,12 +9,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Legend/components/LegendItem/LegendItem.tsx
 var LegendItem = (props) => {
 	const { children, color: colorFromProps } = props;
+	const isSkeleton = useSkeletonMode();
 	const color = colorFromProps ? isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps : void 0;
 	return /* @__PURE__ */ jsxs("li", {
 		className: LegendItem_module_default.legendItem,
+		inert: isSkeleton || void 0,
 		children: [/* @__PURE__ */ jsx("div", {
-			style: colorFromProps ? { backgroundColor: color } : void 0,
-			className: clsx(LegendItem_module_default.colorSquare)
+			style: colorFromProps && !isSkeleton ? { backgroundColor: color } : void 0,
+			className: clsx(LegendItem_module_default.colorSquare, isSkeleton && LegendItem_module_default.skeleton)
 		}), /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("small", { children }) })]
 	});
 };

package/dist/js/packages/components/src/components/Legend/components/LegendItem/LegendItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegendItem.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.tsx"],"sourcesContent":["import Text from \"@/components/Text\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./LegendItem.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport clsx from \"clsx\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\n\nexport interface LegendItemProps extends PropsWithChildren {\n  color?: CategoricalWithCustomColor;\n}\n\nexport const LegendItem: FC<LegendItemProps> = (props) => {\n  const { children, color: colorFromProps } = props;\n\n  const color = colorFromProps\n    ? isCategoricalColor(colorFromProps)\n      ? `var(--color--categorical--${colorFromProps})`\n      : colorFromProps\n    : undefined;\n\n  return (\n    <li className={styles.legendItem}>\n      <div\n        style={colorFromProps ? { backgroundColor: color } : undefined}\n        className={clsx(styles.colorSquare)}\n      />\n      <Text>\n        <small>{children}</small>\n      </Text>\n    </li>\n  );\n};\n\nexport default LegendItem;\n"],"mappings":";;;;;;;;AAWA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,OAAO,mBAAmB;CAE5C,MAAM,QAAQ,iBACV,mBAAmB,cAAc,IAC/B,6BAA6B,eAAe,KAC5C,iBACF,KAAA;CAEJ,OACE,qBAAC,MAAD;EAAI,WAAWA,0BAAO;EAAtB,UAAA,CACE,oBAAC,OAAD;GACE,OAAO,iBAAiB,EAAE,iBAAiB,MAAM,IAAI,KAAA;GACrD,WAAW,KAAKA,0BAAO,WAAW;EACnC,CAAA,GACD,oBAAC,MAAD,EAAA,UACE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,EACpB,CAAA,CACJ;;AAER"}
+{"version":3,"file":"LegendItem.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.tsx"],"sourcesContent":["import Text from \"@/components/Text\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./LegendItem.module.scss\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport clsx from \"clsx\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LegendItemProps extends PropsWithChildren {\n  color?: CategoricalWithCustomColor;\n}\n\nexport const LegendItem: FC<LegendItemProps> = (props) => {\n  const { children, color: colorFromProps } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const color = colorFromProps\n    ? isCategoricalColor(colorFromProps)\n      ? `var(--color--categorical--${colorFromProps})`\n      : colorFromProps\n    : undefined;\n\n  return (\n    <li className={styles.legendItem} inert={isSkeleton || undefined}>\n      <div\n        style={\n          colorFromProps && !isSkeleton ? { backgroundColor: color } : undefined\n        }\n        className={clsx(styles.colorSquare, isSkeleton && styles.skeleton)}\n      />\n      <Text>\n        <small>{children}</small>\n      </Text>\n    </li>\n  );\n};\n\nexport default LegendItem;\n"],"mappings":";;;;;;;;;AAYA,IAAa,cAAmC,UAAU;CACxD,MAAM,EAAE,UAAU,OAAO,mBAAmB;CAE5C,MAAM,aAAa,gBAAgB;CAEnC,MAAM,QAAQ,iBACV,mBAAmB,cAAc,IAC/B,6BAA6B,eAAe,KAC5C,iBACF,KAAA;CAEJ,OACE,qBAAC,MAAD;EAAI,WAAWA,0BAAO;EAAY,OAAO,cAAc,KAAA;EAAvD,UAAA,CACE,oBAAC,OAAD;GACE,OACE,kBAAkB,CAAC,aAAa,EAAE,iBAAiB,MAAM,IAAI,KAAA;GAE/D,WAAW,KAAKA,0BAAO,aAAa,cAAcA,0BAAO,QAAQ;EAClE,CAAA,GACD,oBAAC,MAAD,EAAA,UACE,oBAAC,SAAD,EAAQ,SAAgB,CAAA,EACpB,CAAA,CACJ;;AAER"}

package/dist/js/packages/components/src/components/Legend/components/LegendItem/LegendItem.module.mjs

@@ -3,11 +3,15 @@
 //#region src/components/Legend/components/LegendItem/LegendItem.module.scss
 var legendItem = "flow--legend--legend-item";
 var colorSquare = "flow--legend--legend-item--color-square";
+var skeleton = "flow--legend--legend-item--skeleton";
 var LegendItem_module_default = {
 	legendItem,
-	colorSquare
+	colorSquare,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--legend--legend-item--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--legend--legend-item--skeleton-text-shimmer"
 };
 //#endregion
-export { colorSquare, LegendItem_module_default as default, legendItem };
+export { colorSquare, LegendItem_module_default as default, legendItem, skeleton };
 
 //# sourceMappingURL=LegendItem.module.mjs.map

package/dist/js/packages/components/src/components/Legend/components/LegendItem/LegendItem.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LegendItem.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.module.scss"],"sourcesContent":[".legendItem {\n  display: flex;\n  flex-direction: row;\n  gap: var(--legend-item--spacing);\n  align-items: center;\n\n  .colorSquare {\n    height: var(--legend-item--marker--size);\n    width: var(--legend-item--marker--size);\n    border-radius: var(--legend-item--marker--corner-radius);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"LegendItem.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Legend/components/LegendItem/LegendItem.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.legendItem {\n  display: flex;\n  flex-direction: row;\n  gap: var(--legend-item--spacing);\n  align-items: center;\n\n  .colorSquare {\n    height: var(--legend-item--marker--size);\n    width: var(--legend-item--marker--size);\n    border-radius: var(--legend-item--marker--corner-radius);\n\n    /* SkeletonMode: a surface instead of the color */\n    &.skeleton {\n      @include skeleton.surface;\n\n      --skeleton-radius: var(--legend-item--marker--corner-radius);\n    }\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -1,9 +1,11 @@
 "use client"
 /* */
 import { isAlphaColor } from "../../lib/types/props.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconPending } from "../Icon/components/icons/IconPending.mjs";
 import LoadingSpinner_module_default from "./LoadingSpinner.module.mjs";
 import { useDesignTokens } from "../../lib/theming/hooks/useDesignTokens.mjs";
+import { SkeletonIconSurface } from "../SkeletonMode/components/SkeletonIconSurface/SkeletonIconSurface.mjs";
 import clsx from "clsx";
 import "react";
 import { jsx } from "react/jsx-runtime";
@@ -14,9 +16,14 @@ var globalSpinnerTime = performance.now();
 var LoadingSpinner = (props) => {
 	const { className, color = "default", ...rest } = props;
 	const preferReducedMotion = useReducedMotion();
+	const isSkeleton = useSkeletonMode();
 	const loadingSpinnerTokens = useDesignTokens()["loading-spinner"];
 	const animationDurationMs = preferReducedMotion ? parseInt(loadingSpinnerTokens["transition-duration-slow"].value) : parseInt(loadingSpinnerTokens["transition-duration"].value);
 	const rootClassName = clsx(LoadingSpinner_module_default.loadingSpinner, isAlphaColor(color) && LoadingSpinner_module_default[color], className);
+	if (isSkeleton) return /* @__PURE__ */ jsx(SkeletonIconSurface, {
+		className,
+		children: /* @__PURE__ */ jsx(IconPending, { ...rest })
+	});
 	return /* @__PURE__ */ jsx(IconPending, {
 		className: rootClassName,
 		ref: (element) => {

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner.mjs","names":["styles"],"sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n  /** The color of the loading spinner. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\nconst globalSpinnerTime = performance.now();\n\n/** @flr-generate all */\nexport const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {\n  const { className, color = \"default\", ...rest } = props;\n\n  const preferReducedMotion = useReducedMotion();\n\n  const designTokens = useDesignTokens();\n  const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n  const animationDurationMs = preferReducedMotion\n    ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n    : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n  const rootClassName = clsx(\n    styles.loadingSpinner,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  return (\n    <IconPending\n      className={rootClassName}\n      ref={(element) => {\n        if (element) {\n          const elapsedMs = performance.now() - globalSpinnerTime;\n          const phaseMs = elapsedMs % animationDurationMs;\n\n          element.style.setProperty(\"--animation-delay\", `${-phaseMs}ms`);\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n\nexport default LoadingSpinner;\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,oBAAoB,YAAY,IAAI;;AAG1C,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,WAAW,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,sBAAsB,iBAAiB;CAG7C,MAAM,uBADe,gBACQ,CAAA,CAAa;CAE1C,MAAM,sBAAsB,sBACxB,SAAS,qBAAqB,2BAA2B,CAAC,KAAK,IAC/D,SAAS,qBAAqB,sBAAsB,CAAC,KAAK;CAE9D,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,aAAa,KAAK,KAAKA,8BAAO,QAC9B,SACF;CAEA,OACE,oBAAC,aAAD;EACE,WAAW;EACX,MAAM,YAAY;GAChB,IAAI,SAAS;IAEX,MAAM,WADY,YAAY,IAAI,IAAI,qBACV;IAE5B,QAAQ,MAAM,YAAY,qBAAqB,GAAG,CAAC,QAAQ,GAAG;GAChE;EACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"LoadingSpinner.mjs","names":["styles"],"sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\nimport { SkeletonIconSurface } from \"@/components/SkeletonMode/components/SkeletonIconSurface\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n  /** The color of the loading spinner. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\nconst globalSpinnerTime = performance.now();\n\n/** @flr-generate all */\nexport const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {\n  const { className, color = \"default\", ...rest } = props;\n\n  const preferReducedMotion = useReducedMotion();\n  const isSkeleton = useSkeletonMode();\n\n  const designTokens = useDesignTokens();\n  const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n  const animationDurationMs = preferReducedMotion\n    ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n    : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n  const rootClassName = clsx(\n    styles.loadingSpinner,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  /* A round surface in the spinner's size, without the spinning. */\n  if (isSkeleton) {\n    return (\n      <SkeletonIconSurface className={className}>\n        <IconPending {...rest} />\n      </SkeletonIconSurface>\n    );\n  }\n\n  return (\n    <IconPending\n      className={rootClassName}\n      ref={(element) => {\n        if (element) {\n          const elapsedMs = performance.now() - globalSpinnerTime;\n          const phaseMs = elapsedMs % animationDurationMs;\n\n          element.style.setProperty(\"--animation-delay\", `${-phaseMs}ms`);\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n\nexport default LoadingSpinner;\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAM,oBAAoB,YAAY,IAAI;;AAG1C,IAAa,kBAA2C,UAAU;CAChE,MAAM,EAAE,WAAW,QAAQ,WAAW,GAAG,SAAS;CAElD,MAAM,sBAAsB,iBAAiB;CAC7C,MAAM,aAAa,gBAAgB;CAGnC,MAAM,uBADe,gBACQ,CAAA,CAAa;CAE1C,MAAM,sBAAsB,sBACxB,SAAS,qBAAqB,2BAA2B,CAAC,KAAK,IAC/D,SAAS,qBAAqB,sBAAsB,CAAC,KAAK;CAE9D,MAAM,gBAAgB,KACpBA,8BAAO,gBACP,aAAa,KAAK,KAAKA,8BAAO,QAC9B,SACF;CAGA,IAAI,YACF,OACE,oBAAC,qBAAD;EAAgC;EAC9B,UAAA,oBAAC,aAAD,EAAa,GAAI,KAAO,CAAA;CACL,CAAA;CAIzB,OACE,oBAAC,aAAD;EACE,WAAW;EACX,MAAM,YAAY;GAChB,IAAI,SAAS;IAEX,MAAM,WADY,YAAY,IAAI,IAAI,qBACV;IAE5B,QAAQ,MAAM,YAAY,qBAAqB,GAAG,CAAC,QAAQ,GAAG;GAChE;EACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -6,6 +6,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { IconContextMenu } from "../Icon/components/icons/IconContextMenu.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { SkeletonRawText } from "../SkeletonMode/components/SkeletonRawText/SkeletonRawText.mjs";
 import Message_module_default from "./Message.module.mjs";
 import __locale_default from "../../../../../_virtual/_26.locale.mjs";
 import clsx from "clsx";
@@ -38,7 +39,7 @@ var Message = flowComponent("Message", (props) => {
 						className: Message_module_default.tip,
 						"aria-hidden": true
 					}),
-					props.children
+					/* @__PURE__ */ jsx(SkeletonRawText, { children: props.children })
 				] });
 			})
 		},

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

@@ -1 +1 @@
-{"version":3,"file":"Message.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport * as Aria from \"react-aria-components\";\n\nexport interface MessageProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps,\n    PropsWithElementType<\"article\" | \"li\"> {\n  /** Determines the color and orientation of the message. @default \"responder\" */\n  type?: \"responder\" | \"sender\";\n  /** A custom background color of the message as a CSS color value. */\n  color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n  const {\n    type = \"responder\",\n    children,\n    className,\n    color,\n    elementType = \"article\",\n  } = props;\n\n  const Element = elementType;\n\n  const rootClassName = clsx(styles.message, styles[type], className);\n\n  const style: CSSProperties | undefined = color\n    ? { \"--message-background\": color }\n    : undefined;\n\n  const formatter = useLocalizedStringFormatter(locales, \"Message\");\n\n  const senderContext: PropsContext[\"Combine\"] = {\n    wrapWith: <ClearPropsContext />,\n    className: styles.user,\n    Avatar: { Initials: { \"aria-hidden\": true } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      className: styles.content,\n      children: dynamic((props) => {\n        return (\n          <>\n            <div className={styles.tipBorder} aria-hidden />\n            <div className={styles.tip} aria-hidden />\n            {props.children}\n          </>\n        );\n      }),\n    },\n    Header: {\n      className: styles.header,\n      Button: {\n        className: styles.headerAction,\n        size: \"s\",\n        variant: \"plain\",\n        color: \"secondary\",\n      },\n      ContextMenuTrigger: {\n        Button: {\n          className: styles.headerAction,\n          size: \"s\",\n          variant: \"plain\",\n          color: \"secondary\",\n          children: <IconContextMenu />,\n          \"aria-label\": formatter.format(\"options\"),\n        },\n      },\n      Text: { className: styles.date },\n      Combine: senderContext,\n      // Deprecated alias of Combine — keep it arranged the same way.\n      Align: senderContext,\n      children: dynamic((props) => (\n        <>\n          <Aria.VisuallyHidden>\n            {formatter.format(\"headerLabel\")}\n          </Aria.VisuallyHidden>\n          {props.children}\n        </>\n      )),\n    },\n\n    Button: {\n      size: \"s\",\n      className: styles.action,\n    },\n    ActionGroup: {\n      preserveOrder: true,\n      size: \"s\",\n      className: styles.actionGroup,\n      Button: {\n        className: styles.actionGroupAction,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} style={style}>\n        {children}\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,OAAO,aACP,UACA,WACA,OACA,cAAc,cACZ;CAEJ,MAAM,UAAU;CAEhB,MAAM,gBAAgB,KAAKA,uBAAO,SAASA,uBAAO,OAAO,SAAS;CAElE,MAAM,QAAmC,QACrC,EAAE,wBAAwB,MAAM,IAChC,KAAA;CAEJ,MAAM,YAAY,4BAA4BC,kBAAS,SAAS;CAEhE,MAAM,gBAAyC;EAC7C,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAC9B,WAAWD,uBAAO;EAClB,QAAQ,EAAE,UAAU,EAAE,eAAe,KAAK,EAAE;CAC9C;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,uBAAO;GAClB,UAAU,SAAS,UAAU;IAC3B,OACE,qBAAAE,YAAA,EAAA,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWF,uBAAO;MAAW,eAAA;KAAa,CAAA;KAC/C,oBAAC,OAAD;MAAK,WAAWA,uBAAO;MAAK,eAAA;KAAa,CAAA;KACxC,MAAM;IACP,EAAA,CAAA;GAEN,CAAC;EACH;EACA,QAAQ;GACN,WAAWA,uBAAO;GAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;GACT;GACA,oBAAoB,EAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;IACP,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC5B,cAAc,UAAU,OAAO,SAAS;GAC1C,EACF;GACA,MAAM,EAAE,WAAWA,uBAAO,KAAK;GAC/B,SAAS;GAET,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAE,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,aAAa,EACZ,CAAA,GACpB,MAAM,QACP,EAAA,CAAA,CACH;EACH;EAEA,QAAQ;GACN,MAAM;GACN,WAAWF,uBAAO;EACpB;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,WAAWA,uBAAO;GAClB,QAAQ,EACN,WAAWA,uBAAO,kBACpB;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,SAAD;GAAS,WAAW;GAAsB;GACvC;EACM,CAAA;CACW,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Message.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Message/Message.tsx"],"sourcesContent":["import { type CSSProperties, type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Message.module.scss\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport { IconContextMenu } from \"@/components/Icon/components/icons\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport ClearPropsContext from \"@/lib/propsContext/components/ClearPropsContext\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport * as Aria from \"react-aria-components\";\nimport { SkeletonRawText } from \"@/components/SkeletonMode/components/SkeletonRawText\";\n\nexport interface MessageProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps,\n    PropsWithElementType<\"article\" | \"li\"> {\n  /** Determines the color and orientation of the message. @default \"responder\" */\n  type?: \"responder\" | \"sender\";\n  /** A custom background color of the message as a CSS color value. */\n  color?: string;\n}\n\n/** @flr-generate all */\nexport const Message = flowComponent(\"Message\", (props) => {\n  const {\n    type = \"responder\",\n    children,\n    className,\n    color,\n    elementType = \"article\",\n  } = props;\n\n  const Element = elementType;\n\n  const rootClassName = clsx(styles.message, styles[type], className);\n\n  const style: CSSProperties | undefined = color\n    ? { \"--message-background\": color }\n    : undefined;\n\n  const formatter = useLocalizedStringFormatter(locales, \"Message\");\n\n  const senderContext: PropsContext[\"Combine\"] = {\n    wrapWith: <ClearPropsContext />,\n    className: styles.user,\n    Avatar: { Initials: { \"aria-hidden\": true } },\n  };\n\n  const propsContext: PropsContext = {\n    Content: {\n      className: styles.content,\n      children: dynamic((props) => {\n        return (\n          <>\n            <div className={styles.tipBorder} aria-hidden />\n            <div className={styles.tip} aria-hidden />\n            {/* The fragment hides raw text from `Content`'s own text rule. */}\n            <SkeletonRawText>{props.children}</SkeletonRawText>\n          </>\n        );\n      }),\n    },\n    Header: {\n      className: styles.header,\n      Button: {\n        className: styles.headerAction,\n        size: \"s\",\n        variant: \"plain\",\n        color: \"secondary\",\n      },\n      ContextMenuTrigger: {\n        Button: {\n          className: styles.headerAction,\n          size: \"s\",\n          variant: \"plain\",\n          color: \"secondary\",\n          children: <IconContextMenu />,\n          \"aria-label\": formatter.format(\"options\"),\n        },\n      },\n      Text: { className: styles.date },\n      Combine: senderContext,\n      // Deprecated alias of Combine — keep it arranged the same way.\n      Align: senderContext,\n      children: dynamic((props) => (\n        <>\n          <Aria.VisuallyHidden>\n            {formatter.format(\"headerLabel\")}\n          </Aria.VisuallyHidden>\n          {props.children}\n        </>\n      )),\n    },\n\n    Button: {\n      size: \"s\",\n      className: styles.action,\n    },\n    ActionGroup: {\n      preserveOrder: true,\n      size: \"s\",\n      className: styles.actionGroup,\n      Button: {\n        className: styles.actionGroupAction,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Element className={rootClassName} style={style}>\n        {children}\n      </Element>\n    </PropsContextProvider>\n  );\n});\n\nexport default Message;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,IAAa,UAAU,cAAc,YAAY,UAAU;CACzD,MAAM,EACJ,OAAO,aACP,UACA,WACA,OACA,cAAc,cACZ;CAEJ,MAAM,UAAU;CAEhB,MAAM,gBAAgB,KAAKA,uBAAO,SAASA,uBAAO,OAAO,SAAS;CAElE,MAAM,QAAmC,QACrC,EAAE,wBAAwB,MAAM,IAChC,KAAA;CAEJ,MAAM,YAAY,4BAA4BC,kBAAS,SAAS;CAEhE,MAAM,gBAAyC;EAC7C,UAAU,oBAAC,mBAAD,CAAoB,CAAA;EAC9B,WAAWD,uBAAO;EAClB,QAAQ,EAAE,UAAU,EAAE,eAAe,KAAK,EAAE;CAC9C;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,uBAAO;GAClB,UAAU,SAAS,UAAU;IAC3B,OACE,qBAAAE,YAAA,EAAA,UAAA;KACE,oBAAC,OAAD;MAAK,WAAWF,uBAAO;MAAW,eAAA;KAAa,CAAA;KAC/C,oBAAC,OAAD;MAAK,WAAWA,uBAAO;MAAK,eAAA;KAAa,CAAA;KAEzC,oBAAC,iBAAD,EAAA,UAAkB,MAAM,SAA0B,CAAA;IAClD,EAAA,CAAA;GAEN,CAAC;EACH;EACA,QAAQ;GACN,WAAWA,uBAAO;GAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;GACT;GACA,oBAAoB,EAClB,QAAQ;IACN,WAAWA,uBAAO;IAClB,MAAM;IACN,SAAS;IACT,OAAO;IACP,UAAU,oBAAC,iBAAD,CAAkB,CAAA;IAC5B,cAAc,UAAU,OAAO,SAAS;GAC1C,EACF;GACA,MAAM,EAAE,WAAWA,uBAAO,KAAK;GAC/B,SAAS;GAET,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAE,YAAA,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN,EAAA,UACG,UAAU,OAAO,aAAa,EACZ,CAAA,GACpB,MAAM,QACP,EAAA,CAAA,CACH;EACH;EAEA,QAAQ;GACN,MAAM;GACN,WAAWF,uBAAO;EACpB;EACA,aAAa;GACX,eAAe;GACf,MAAM;GACN,WAAWA,uBAAO;GAClB,QAAQ,EACN,WAAWA,uBAAO,kBACpB;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,oBAAC,SAAD;GAAS,WAAW;GAAsB;GACvC;EACM,CAAA;CACW,CAAA;AAE1B,CAAC"}

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

@@ -4,6 +4,7 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { containsTextChild } from "../../lib/react/remote.mjs";
+import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import Navigation_module_default from "./Navigation.module.mjs";
 import { LinkListTunnelExit } from "./components/LinkListTunnelExit/LinkListTunnelExit.mjs";
 import clsx from "clsx";
@@ -14,7 +15,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * A bare text node is an anonymous flex item that no rule can reach, so give
 * the label an element the item can truncate.
 */
-var wrapTextInLabel = (children) => Children.map(children, (child) => containsTextChild(child) ? /* @__PURE__ */ jsx("span", { children: child }) : child);
+var wrapTextInLabel = (children) => Children.map(children, (child) => {
+	const label = /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SkeletonTextContent, {
+		defaultWidth: "6em",
+		children: child
+	}) });
+	return containsTextChild(child) ? label : child;
+});
 /** @flr-generate all */
 var Navigation = flowComponent("Navigation", (props) => {
 	const { className, children, ref, ...rest } = props;

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface NavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n */\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n  Children.map(children, (child) =>\n    containsTextChild(child) ? <span>{child}</span> : child,\n  );\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n    Icon: {\n      className: styles.icon,\n      size: \"m\",\n    },\n    Badge: { className: styles.badge },\n    AlertBadge: { className: styles.badge },\n    CounterBadge: { className: styles.badge },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnel: {\n            id: \"links\",\n            component: \"Navigation\",\n          },\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n        <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n        {children}\n      </nav>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,UACtB,kBAAkB,KAAK,IAAI,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,IAAI,KACpD;;AAGF,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAWA,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,WAAWA,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAWA,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAWA,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAWA,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Navigation.mjs","names":["styles"],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport { SkeletonTextContent } from \"@/components/SkeletonMode/components/SkeletonTextContent\";\n\nexport interface NavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n */\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n  Children.map(children, (child) => {\n    const label = (\n      <span>\n        <SkeletonTextContent defaultWidth=\"6em\">{child}</SkeletonTextContent>\n      </span>\n    );\n\n    return containsTextChild(child) ? label : child;\n  });\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n    Icon: {\n      className: styles.icon,\n      size: \"m\",\n    },\n    Badge: { className: styles.badge },\n    AlertBadge: { className: styles.badge },\n    CounterBadge: { className: styles.badge },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnel: {\n            id: \"links\",\n            component: \"Navigation\",\n          },\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n        <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n        {children}\n      </nav>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,UAAU;CAChC,MAAM,QACJ,oBAAC,QAAD,EAAA,UACE,oBAAC,qBAAD;EAAqB,cAAa;EAAO,UAAA;CAA2B,CAAA,EAChE,CAAA;CAGR,OAAO,kBAAkB,KAAK,IAAI,QAAQ;AAC5C,CAAC;;AAGH,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAKA,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAWA,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,WAAWA,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAWA,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAWA,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAWA,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { Button } from "../Button/Button.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
@@ -15,8 +16,9 @@ import { useLocalizedStringFormatter } from "react-aria";
 /** @flr-generate all */
 var Notification = (props) => {
 	const { children, className, status = "info", role = "alert", href, onClick, onClose, autoClose: ignoredAutoClose, ...rest } = props;
-	const rootClassName = clsx(Notification_module_default.notification, Notification_module_default[status], (onClick || onClose || href) && Notification_module_default.hasLink, className);
 	const stringFormatter = useLocalizedStringFormatter(__locale_default);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Notification_module_default.notification, Notification_module_default[status], (onClick || onClose || href) && !isSkeleton && Notification_module_default.hasLink, isSkeleton && Notification_module_default.skeleton, className);
 	const propsContext = {
 		Heading: {
 			className: Notification_module_default.heading,
@@ -37,21 +39,27 @@ var Notification = (props) => {
 		"aria-label": stringFormatter.format("notification.close"),
 		children: /* @__PURE__ */ jsx(IconClose, {})
 	});
+	const content = /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: propsContext,
+		children
+	});
+	const skeletonBody = /* @__PURE__ */ jsx("div", {
+		className: Notification_module_default.link,
+		children: content
+	});
+	const linkBody = /* @__PURE__ */ jsx(Link, {
+		unstyled: true,
+		href,
+		className: Notification_module_default.link,
+		onPress: onClick,
+		children: content
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		className: rootClassName,
 		role,
 		"data-react-aria-top-layer": true,
-		children: [/* @__PURE__ */ jsx(Link, {
-			unstyled: true,
-			href,
-			className: Notification_module_default.link,
-			onPress: onClick,
-			children: /* @__PURE__ */ jsx(PropsContextProvider, {
-				props: propsContext,
-				children
-			})
-		}), closeButton]
+		children: [isSkeleton ? skeletonBody : linkBody, closeButton]
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.mjs","names":["styles","locales","_Fragment"],"sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { Link } from \"@/components/Link\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./Notification.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\nexport interface NotificationProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, PropsWithStatus {\n  /** A link that is triggered when clicking the notification. */\n  href?: string;\n  /** Whether the notification should disappear automatically after some time. */\n  autoClose?: boolean;\n  /** Handler that is called when the notification is clicked. */\n  onClick?: () => void;\n  /**\n   * Handler that is called when the close button of the notification is\n   * clicked.\n   */\n  onClose?: () => void;\n}\n\n/** @flr-generate all */\nexport const Notification: FC<NotificationProps> = (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    role = \"alert\",\n    href,\n    onClick,\n    onClose,\n    autoClose: ignoredAutoClose,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.notification,\n    styles[status],\n    (onClick || onClose || href) && styles.hasLink,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 4,\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Text: {\n      className: styles.text,\n    },\n  };\n\n  const closeButton = onClose && (\n    <Button\n      size=\"s\"\n      className={styles.close}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onClose}\n      aria-label={stringFormatter.format(\"notification.close\")}\n    >\n      <IconClose />\n    </Button>\n  );\n\n  return (\n    <div\n      {...rest}\n      className={rootClassName}\n      role={role}\n      // See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useInteractOutside.ts#L126C31-L126C58\n      data-react-aria-top-layer\n    >\n      <Link unstyled href={href} className={styles.link} onPress={onClick}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </Link>\n      {closeButton}\n    </div>\n  );\n};\n\nexport default Notification;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,UACA,WACA,SAAS,QACT,OAAO,SACP,MACA,SACA,SACA,WAAW,kBACX,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,4BAAO,cACPA,4BAAO,UACN,WAAW,WAAW,SAASA,4BAAO,SACvC,SACF;CAEA,MAAM,kBAAkB,4BAA4BC,gBAAO;CAE3D,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWD,4BAAO;GAClB,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAE,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWF,4BAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,MAAM,EACJ,WAAWA,4BAAO,KACpB;CACF;CAEA,MAAM,cAAc,WAClB,oBAAC,QAAD;EACE,MAAK;EACL,WAAWA,4BAAO;EAClB,SAAQ;EACR,OAAM;EACN,SAAS;EACT,cAAY,gBAAgB,OAAO,oBAAoB;EAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;CAGV,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACL;EAEN,6BAAA;EALF,UAAA,CAOE,oBAAC,MAAD;GAAM,UAAA;GAAe;GAAM,WAAWA,4BAAO;GAAM,SAAS;GAC1D,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EAClB,CAAA,GACL,WACE;;AAET"}
+{"version":3,"file":"Notification.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import { AlertIcon } from \"@/components/AlertIcon\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { Link } from \"@/components/Link\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithStatus } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport styles from \"./Notification.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface NotificationProps\n  extends PropsWithChildren<ComponentProps<\"div\">>, PropsWithStatus {\n  /** A link that is triggered when clicking the notification. */\n  href?: string;\n  /** Whether the notification should disappear automatically after some time. */\n  autoClose?: boolean;\n  /** Handler that is called when the notification is clicked. */\n  onClick?: () => void;\n  /**\n   * Handler that is called when the close button of the notification is\n   * clicked.\n   */\n  onClose?: () => void;\n}\n\n/** @flr-generate all */\nexport const Notification: FC<NotificationProps> = (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    role = \"alert\",\n    href,\n    onClick,\n    onClose,\n    autoClose: ignoredAutoClose,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.notification,\n    styles[status],\n    (onClick || onClose || href) && !isSkeleton && styles.hasLink,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Heading: {\n      className: styles.heading,\n      level: 4,\n      children: dynamic((props) => (\n        <>\n          <AlertIcon status={status} className={styles.icon} />\n          {props.children}\n        </>\n      )),\n    },\n    Text: {\n      className: styles.text,\n    },\n  };\n\n  const closeButton = onClose && (\n    <Button\n      size=\"s\"\n      className={styles.close}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onClose}\n      aria-label={stringFormatter.format(\"notification.close\")}\n    >\n      <IconClose />\n    </Button>\n  );\n\n  const content = (\n    <PropsContextProvider props={propsContext}>{children}</PropsContextProvider>\n  );\n\n  /*\n   * In the mode, the content is not wrapped in a link: a link would draw its\n   * whole content as one text bar, and there is nothing to click.\n   */\n  const skeletonBody = <div className={styles.link}>{content}</div>;\n\n  const linkBody = (\n    <Link unstyled href={href} className={styles.link} onPress={onClick}>\n      {content}\n    </Link>\n  );\n\n  return (\n    <div\n      {...rest}\n      className={rootClassName}\n      role={role}\n      // See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useInteractOutside.ts#L126C31-L126C58\n      data-react-aria-top-layer\n    >\n      {isSkeleton ? skeletonBody : linkBody}\n      {closeButton}\n    </div>\n  );\n};\n\nexport default Notification;\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EACJ,UACA,WACA,SAAS,QACT,OAAO,SACP,MACA,SACA,SACA,WAAW,kBACX,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4BA,gBAAO;CAC3D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,4BAAO,cACPA,4BAAO,UACN,WAAW,WAAW,SAAS,CAAC,cAAcA,4BAAO,SACtD,cAAcA,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,SAAS;GACP,WAAWA,4BAAO;GAClB,OAAO;GACP,UAAU,SAAS,UACjB,qBAAAC,UAAA,EAAA,UAAA,CACE,oBAAC,WAAD;IAAmB;IAAQ,WAAWD,4BAAO;GAAO,CAAA,GACnD,MAAM,QACP,EAAA,CAAA,CACH;EACH;EACA,MAAM,EACJ,WAAWA,4BAAO,KACpB;CACF;CAEA,MAAM,cAAc,WAClB,oBAAC,QAAD;EACE,MAAK;EACL,WAAWA,4BAAO;EAClB,SAAQ;EACR,OAAM;EACN,SAAS;EACT,cAAY,gBAAgB,OAAO,oBAAoB;EAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;CACN,CAAA;CAGV,MAAM,UACJ,oBAAC,sBAAD;EAAsB,OAAO;EAAe;CAA+B,CAAA;CAO7E,MAAM,eAAe,oBAAC,OAAD;EAAK,WAAWA,4BAAO;EAAO,UAAA;CAAa,CAAA;CAEhE,MAAM,WACJ,oBAAC,MAAD;EAAM,UAAA;EAAe;EAAM,WAAWA,4BAAO;EAAM,SAAS;EACzD,UAAA;CACG,CAAA;CAGR,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACL;EAEN,6BAAA;EALF,UAAA,CAOG,aAAa,eAAe,UAC5B,WACE;;AAET"}

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

@@ -13,6 +13,7 @@ var warning = "flow--notification--warning";
 var danger = "flow--notification--danger";
 var success = "flow--notification--success";
 var unavailable = "flow--notification--unavailable";
+var skeleton = "flow--notification--skeleton";
 var Notification_module_default = {
 	notification,
 	link,
@@ -25,9 +26,10 @@ var Notification_module_default = {
 	warning,
 	danger,
 	success,
-	unavailable
+	unavailable,
+	skeleton
 };
 //#endregion
-export { close, danger, Notification_module_default as default, hasLink, heading, icon, info, link, notification, success, text, unavailable, warning };
+export { close, danger, Notification_module_default as default, hasLink, heading, icon, info, link, notification, skeleton, success, text, unavailable, warning };
 
 //# sourceMappingURL=Notification.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.notification {\n  border-radius: var(--notification--corner-radius);\n  width: var(--notification--width);\n  max-width: var(--notification--max-width);\n  box-shadow: var(--notification--box-shadow);\n  position: relative;\n  border: var(--notification--border-width) var(--notification--border-style)\n    var(--notification--border-color);\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: var(--notification--border-x-start-width);\n    inset-inline-start: calc(var(--size-px--xxxs) * -1);\n    border-start-start-radius: var(--notification--corner-radius);\n    border-end-start-radius: var(--notification--corner-radius);\n  }\n\n  @extend .info;\n\n  /* Elements */\n\n  .link {\n    padding: var(--notification--padding);\n    padding-inline-start: calc(\n      var(--notification--padding) + var(--notification--border-x-start-width)\n    );\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--notification--heading-to-text-spacing);\n    cursor: default;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n    position: relative;\n    border-radius: calc(var(--notification--corner-radius) - 1px);\n\n    @include focus.focus;\n  }\n\n  .heading {\n    --button-size: calc(\n      var(--button--line-height-s) + 2 * var(--button--padding-s-x)\n    );\n\n    padding-inline-end: calc(\n      var(--button-size) + var(--heading--icon-to-text-spacing)\n    );\n\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .text {\n    font-size: var(--notification--font-size);\n  }\n\n  .close {\n    position: absolute;\n    top: var(--notification--padding);\n    inset-inline-end: var(--notification--padding);\n  }\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      .link {\n        border-color: var(--notification--#{$status}-background-color--default);\n        background-color: var(\n          --notification--#{$status}-background-color--default\n        );\n      }\n\n      &::after {\n        background-color: var(--notification--#{$status}-border-color);\n      }\n\n      &.hasLink {\n        .link {\n          &:hover {\n            background-color: var(\n              --notification--#{$status}-background-color--hover\n            );\n          }\n\n          &[data-pressed] {\n            background-color: var(\n              --notification--#{$status}-background-color--pressed\n            );\n          }\n        }\n      }\n\n      .heading {\n        color: var(--notification--#{$status}-heading-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(warning);\n  @include status(danger);\n  @include status(success);\n  @include status(unavailable);\n}\n"],"mappings":""}
+{"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/skeleton\";\n\n.notification {\n  border-radius: var(--notification--corner-radius);\n  width: var(--notification--width);\n  max-width: var(--notification--max-width);\n  box-shadow: var(--notification--box-shadow);\n  position: relative;\n  border: var(--notification--border-width) var(--notification--border-style)\n    var(--notification--border-color);\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: var(--notification--border-x-start-width);\n    inset-inline-start: calc(var(--size-px--xxxs) * -1);\n    border-start-start-radius: var(--notification--corner-radius);\n    border-end-start-radius: var(--notification--corner-radius);\n  }\n\n  @extend .info;\n\n  /* Elements */\n\n  .link {\n    padding: var(--notification--padding);\n    padding-inline-start: calc(\n      var(--notification--padding) + var(--notification--border-x-start-width)\n    );\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--notification--heading-to-text-spacing);\n    cursor: default;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n    position: relative;\n    border-radius: calc(var(--notification--corner-radius) - 1px);\n\n    @include focus.focus;\n  }\n\n  .heading {\n    --button-size: calc(\n      var(--button--line-height-s) + 2 * var(--button--padding-s-x)\n    );\n\n    padding-inline-end: calc(\n      var(--button-size) + var(--heading--icon-to-text-spacing)\n    );\n\n    .icon {\n      height: var(--heading-line-height);\n      width: var(--heading-line-height);\n      vertical-align: bottom;\n      display: inline-block;\n      margin-inline-end: var(--heading--icon-to-text-spacing);\n    }\n  }\n\n  .text {\n    font-size: var(--notification--font-size);\n  }\n\n  .close {\n    position: absolute;\n    top: var(--notification--padding);\n    inset-inline-end: var(--notification--padding);\n  }\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      .link {\n        border-color: var(--notification--#{$status}-background-color--default);\n        background-color: var(\n          --notification--#{$status}-background-color--default\n        );\n      }\n\n      &::after {\n        background-color: var(--notification--#{$status}-border-color);\n      }\n\n      &.hasLink {\n        .link {\n          &:hover {\n            background-color: var(\n              --notification--#{$status}-background-color--hover\n            );\n          }\n\n          &[data-pressed] {\n            background-color: var(\n              --notification--#{$status}-background-color--pressed\n            );\n          }\n        }\n      }\n\n      .heading {\n        color: var(--notification--#{$status}-heading-color);\n      }\n    }\n  }\n\n  @include status(info);\n  @include status(warning);\n  @include status(danger);\n  @include status(success);\n  @include status(unavailable);\n\n  /* SkeletonMode: no status color while the content loads */\n  &.skeleton::after {\n    background-color: skeleton.$background-color;\n  }\n}\n"],"mappings":""}

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

@@ -2,6 +2,7 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import ProgressBar_module_default from "./ProgressBar.module.mjs";
 import { ProgressBarValue } from "./components/ProgressBarValue.mjs";
 import { ProgressBarBar } from "./components/ProgressBarBar.mjs";
@@ -13,7 +14,8 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var ProgressBar = flowComponent("ProgressBar", (props) => {
 	const { children, className, status = "info", showMaxValue, size = "m", segments, value, formatOptions, showLegend = true, maxValue, valueLabel, ...rest } = props;
-	const rootClassName = clsx(ProgressBar_module_default.progressBar, ProgressBar_module_default[`size-${size}`], ProgressBar_module_default[status], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(ProgressBar_module_default.progressBar, ProgressBar_module_default[`size-${size}`], ProgressBar_module_default[status], isSkeleton && ProgressBar_module_default.skeleton, className);
 	const propsContext = { Label: {
 		className: ProgressBar_module_default.label,
 		unstyled: true
@@ -25,6 +27,7 @@ var ProgressBar = flowComponent("ProgressBar", (props) => {
 		formatOptions,
 		maxValue,
 		...rest,
+		inert: isSkeleton || void 0,
 		children: ({ percentage }) => /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,
 			children: [

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.mjs","names":["styles"],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\n\nexport interface ProgressBarProps\n  extends\n    PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n    FlowComponentProps {\n  /** The status the progress bar is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** Whether the max value should be displayed. */\n  showMaxValue?: boolean;\n  /** The size variant of the progress bar. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Divides the fill of the progress bar into segments */\n  segments?: {\n    value: number;\n    title: string;\n    color?: CategoricalWithCustomColor;\n    valueText?: string;\n  }[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    showMaxValue,\n    size = \"m\",\n    segments,\n    value,\n    formatOptions,\n    showLegend = true,\n    maxValue,\n    valueLabel,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.progressBar,\n    styles[`size-${size}`],\n    styles[status],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      unstyled: true,\n    },\n  };\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={segmentsTotalValue ?? value}\n      formatOptions={formatOptions}\n      maxValue={maxValue}\n      {...rest}\n    >\n      {({ percentage }) => (\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ProgressBarValue\n            showMaxValue={showMaxValue}\n            maxValue={maxValue}\n            formatOptions={formatOptions}\n            value={segmentsTotalValue ?? value}\n            valueLabel={valueLabel}\n          />\n\n          <ProgressBarBar percentage={percentage} segments={segments} />\n\n          <ProgressBarLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        </PropsContextProvider>\n      )}\n    </Aria.ProgressBar>\n  );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;;;AAyCA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,QAAQ,SACfA,2BAAO,SACP,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAWA,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;EAEF,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}
+{"version":3,"file":"ProgressBar.mjs","names":["styles"],"sources":["../../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { PropsWithChildren } from \"react\";\nimport styles from \"./ProgressBar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { ProgressBarValue } from \"@/components/ProgressBar/components/ProgressBarValue\";\nimport { ProgressBarBar } from \"@/components/ProgressBar/components/ProgressBarBar\";\nimport { ProgressBarLegend } from \"@/components/ProgressBar/components/ProgressBarLegend\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { Status } from \"@/lib/types/props\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ProgressBarProps\n  extends\n    PropsWithChildren<Omit<Aria.ProgressBarProps, \"children\">>,\n    FlowComponentProps {\n  /** The status the progress bar is colored by. */\n  status?: Exclude<Status, \"unavailable\">;\n  /** Whether the max value should be displayed. */\n  showMaxValue?: boolean;\n  /** The size variant of the progress bar. @default \"m\" */\n  size?: \"s\" | \"m\" | \"l\";\n  /** Divides the fill of the progress bar into segments */\n  segments?: {\n    value: number;\n    title: string;\n    color?: CategoricalWithCustomColor;\n    valueText?: string;\n  }[];\n  /**\n   * Whether the legend component is shown when segments are used. @default:\n   * true\n   */\n  showLegend?: boolean;\n}\n\n/** @flr-generate all */\nexport const ProgressBar = flowComponent(\"ProgressBar\", (props) => {\n  const {\n    children,\n    className,\n    status = \"info\",\n    showMaxValue,\n    size = \"m\",\n    segments,\n    value,\n    formatOptions,\n    showLegend = true,\n    maxValue,\n    valueLabel,\n    ...rest\n  } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.progressBar,\n    styles[`size-${size}`],\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      unstyled: true,\n    },\n  };\n\n  const segmentsTotalValue = segments\n    ? segments.map((s) => s.value).reduce((a, b) => a + b, 0)\n    : undefined;\n\n  return (\n    <Aria.ProgressBar\n      className={rootClassName}\n      value={segmentsTotalValue ?? value}\n      formatOptions={formatOptions}\n      maxValue={maxValue}\n      {...rest}\n      inert={isSkeleton || undefined}\n    >\n      {({ percentage }) => (\n        <PropsContextProvider props={propsContext}>\n          {children}\n\n          <ProgressBarValue\n            showMaxValue={showMaxValue}\n            maxValue={maxValue}\n            formatOptions={formatOptions}\n            value={segmentsTotalValue ?? value}\n            valueLabel={valueLabel}\n          />\n\n          <ProgressBarBar percentage={percentage} segments={segments} />\n\n          <ProgressBarLegend\n            showLegend={showLegend}\n            segments={segments}\n            formatOptions={formatOptions}\n          />\n        </PropsContextProvider>\n      )}\n    </Aria.ProgressBar>\n  );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CACjE,MAAM,EACJ,UACA,WACA,SAAS,QACT,cACA,OAAO,KACP,UACA,OACA,eACA,aAAa,MACb,UACA,YACA,GAAG,SACD;CAEJ,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,2BAAO,aACPA,2BAAO,QAAQ,SACfA,2BAAO,SACP,cAAcA,2BAAO,UACrB,SACF;CAEA,MAAM,eAA6B,EACjC,OAAO;EACL,WAAWA,2BAAO;EAClB,UAAU;CACZ,EACF;CAEA,MAAM,qBAAqB,WACvB,SAAS,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,IAAI,GAAG,CAAC,IACtD,KAAA;CAEJ,OACE,oBAAC,KAAK,aAAN;EACE,WAAW;EACX,OAAO,sBAAsB;EACd;EACL;EACV,GAAI;EACJ,OAAO,cAAc,KAAA;EAEnB,WAAA,EAAE,iBACF,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA;IACG;IAED,oBAAC,kBAAD;KACgB;KACJ;KACK;KACf,OAAO,sBAAsB;KACjB;IACb,CAAA;IAED,oBAAC,gBAAD;KAA4B;KAAsB;IAAW,CAAA;IAE7D,oBAAC,mBAAD;KACc;KACF;KACK;IAChB,CAAA;GACmB;;CAER,CAAA;AAEtB,CAAC"}

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

@@ -12,6 +12,7 @@ var info = "flow--progress-bar--info";
 var success = "flow--progress-bar--success";
 var danger = "flow--progress-bar--danger";
 var warning = "flow--progress-bar--warning";
+var skeleton = "flow--progress-bar--skeleton";
 var ProgressBar_module_default = {
 	progressBar,
 	legend,
@@ -27,9 +28,12 @@ var ProgressBar_module_default = {
 	info,
 	success,
 	danger,
-	warning
+	warning,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--progress-bar--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--progress-bar--skeleton-text-shimmer"
 };
 //#endregion
-export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, success, value, warning };
+export { bar, danger, ProgressBar_module_default as default, fill, info, label, legend, progressBar, segment, skeleton, success, value, warning };
 
 //# sourceMappingURL=ProgressBar.module.mjs.map