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

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import AlertBadge_module_default from "./AlertBadge.module.mjs";
 import { Text } from "../Text/Text.mjs";
@@ -10,18 +11,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var AlertBadge = flowComponent("AlertBadge", (props) => {
 	const { children, className, status = "info", ref, ...rest } = props;
-	const rootClassName = clsx(AlertBadge_module_default.alertBadge, AlertBadge_module_default[status], className);
-	return /* @__PURE__ */ jsxs("div", {
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(AlertBadge_module_default.alertBadge, AlertBadge_module_default[status], isSkeleton && AlertBadge_module_default.skeleton, className);
+	return /* @__PURE__ */ jsx("div", {
 		className: rootClassName,
 		...rest,
 		ref,
-		children: [/* @__PURE__ */ jsx(AlertIcon, {
+		inert: isSkeleton || void 0,
+		children: /* @__PURE__ */ jsxs(SkeletonModeReset, { children: [/* @__PURE__ */ jsx(AlertIcon, {
 			size: "s",
 			status
 		}), /* @__PURE__ */ jsx(Text, {
 			className: AlertBadge_module_default.text,
 			children
-		})]
+		})] })
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"AlertBadge.mjs","names":["styles"],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./AlertBadge.module.scss\";\nimport clsx from \"clsx\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport { Text } from \"@/components/Text\";\nimport type { PropsWithStatus, PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface AlertBadgeProps\n  extends\n    PropsWithChildren,\n    PropsWithStatus,\n    FlowComponentProps,\n    PropsWithClassName {}\n\n/** @flr-generate all */\nexport const AlertBadge = flowComponent(\"AlertBadge\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.alertBadge, styles[status], className);\n\n  return (\n    <div className={rootClassName} {...rest} ref={ref}>\n      <AlertIcon size=\"s\" status={status} />\n      <Text className={styles.text}>{children}</Text>\n    </div>\n  );\n});\n\nexport default AlertBadge;\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,gBAAgB,KAAKA,0BAAO,YAAYA,0BAAO,SAAS,SAAS;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,GAAI;EAAW;EAA9C,UAAA,CACE,oBAAC,WAAD;GAAW,MAAK;GAAY;EAAS,CAAA,GACrC,oBAAC,MAAD;GAAM,WAAWA,0BAAO;GAAO;EAAe,CAAA,CAC3C;;AAET,CAAC"}
+{"version":3,"file":"AlertBadge.mjs","names":["styles"],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./AlertBadge.module.scss\";\nimport clsx from \"clsx\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport { Text } from \"@/components/Text\";\nimport type { PropsWithStatus, PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertBadgeProps\n  extends\n    PropsWithChildren,\n    PropsWithStatus,\n    FlowComponentProps,\n    PropsWithClassName {}\n\n/** @flr-generate all */\nexport const AlertBadge = flowComponent(\"AlertBadge\", (props) => {\n  const { children, className, status = \"info\", ref, ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.alertBadge,\n    styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  return (\n    <div\n      className={rootClassName}\n      {...rest}\n      ref={ref}\n      inert={isSkeleton || undefined}\n    >\n      <SkeletonModeReset>\n        <AlertIcon size=\"s\" status={status} />\n        <Text className={styles.text}>{children}</Text>\n      </SkeletonModeReset>\n    </div>\n  );\n});\n\nexport default AlertBadge;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,0BAAO,YACPA,0BAAO,SACP,cAAcA,0BAAO,UACrB,SACF;CAEA,OACE,oBAAC,OAAD;EACE,WAAW;EACX,GAAI;EACC;EACL,OAAO,cAAc,KAAA;EAErB,UAAA,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,WAAD;GAAW,MAAK;GAAY;EAAS,CAAA,GACrC,oBAAC,MAAD;GAAM,WAAWA,0BAAO;GAAO;EAAe,CAAA,CAC7B,EAAA,CAAA;CAChB,CAAA;AAET,CAAC"}

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

@@ -8,6 +8,7 @@ var success = "flow--alert-badge--success";
 var warning = "flow--alert-badge--warning";
 var danger = "flow--alert-badge--danger";
 var unavailable = "flow--alert-badge--unavailable";
+var skeleton = "flow--alert-badge--skeleton";
 var AlertBadge_module_default = {
 	alertBadge,
 	text,
@@ -15,9 +16,12 @@ var AlertBadge_module_default = {
 	success,
 	warning,
 	danger,
-	unavailable
+	unavailable,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--alert-badge--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--alert-badge--skeleton-text-shimmer"
 };
 //#endregion
-export { alertBadge, danger, AlertBadge_module_default as default, info, success, text, unavailable, warning };
+export { alertBadge, danger, AlertBadge_module_default as default, info, skeleton, success, text, unavailable, warning };
 
 //# sourceMappingURL=AlertBadge.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"AlertBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n\n.alertBadge {\n  font-size: var(--badge--font-size);\n  font-weight: var(--badge--font-weight);\n  line-height: var(--badge--line-height);\n  border-radius: var(--badge--corner-radius);\n  padding-inline: var(--badge--padding-x);\n  padding-block: calc(var(--badge--padding-y) - (var(--badge--border-width)));\n  display: flex;\n  align-items: center;\n  column-gap: var(--badge--spacing);\n  max-width: fit-content;\n  border-style: var(--badge--border-style);\n  border-width: var(--badge--border-width);\n\n  .text {\n    @include ellipsis.ellipsis();\n  }\n\n  @extend .info;\n\n  /* Status */\n  @mixin status($status) {\n    &.#{$status} {\n      color: var(--alert-badge--#{$status}-content-color);\n      background-color: var(--alert-badge--#{$status}-background-color);\n      border-color: var(--alert-badge--#{$status}-border-color);\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(warning);\n  @include status(danger);\n  @include status(unavailable);\n}\n"],"mappings":""}
+{"version":3,"file":"AlertBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.alertBadge {\n  font-size: var(--badge--font-size);\n  font-weight: var(--badge--font-weight);\n  line-height: var(--badge--line-height);\n  border-radius: var(--badge--corner-radius);\n  padding-inline: var(--badge--padding-x);\n  padding-block: calc(var(--badge--padding-y) - (var(--badge--border-width)));\n  display: flex;\n  align-items: center;\n  column-gap: var(--badge--spacing);\n  max-width: fit-content;\n  border-style: var(--badge--border-style);\n  border-width: var(--badge--border-width);\n\n  .text {\n    @include ellipsis.ellipsis();\n  }\n\n  @extend .info;\n\n  /* Status */\n  @mixin status($status) {\n    &.#{$status} {\n      color: var(--alert-badge--#{$status}-content-color);\n      background-color: var(--alert-badge--#{$status}-background-color);\n      border-color: var(--alert-badge--#{$status}-border-color);\n    }\n  }\n\n  @include status(info);\n  @include status(success);\n  @include status(warning);\n  @include status(danger);\n  @include status(unavailable);\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--badge--corner-radius);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -2,8 +2,8 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
-import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
+import { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import AlertText_module_default from "./AlertText.module.mjs";
 import clsx from "clsx";

package/dist/js/packages/components/src/components/Avatar/Avatar.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 { AlertIcon } from "../AlertIcon/AlertIcon.mjs";
 import Avatar_module_default from "./Avatar.module.mjs";
 import clsx from "clsx";
@@ -10,7 +11,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /** @flr-generate all */
 var Avatar = flowComponent("Avatar", (props) => {
 	const { children, className, color, size = "m", status, label, ref } = props;
-	const rootClassName = clsx(Avatar_module_default.avatar, Avatar_module_default[`size-${size}`], !status && Avatar_module_default[color ?? "blue"], status && Avatar_module_default[status], className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Avatar_module_default.avatar, Avatar_module_default[`size-${size}`], !status && Avatar_module_default[color ?? "blue"], status && Avatar_module_default[status], isSkeleton && Avatar_module_default.skeleton, className);
 	const useDynamicColor = color === void 0 && status === void 0;
 	const propsContext = {
 		Initials: {
@@ -22,11 +24,18 @@ var Avatar = flowComponent("Avatar", (props) => {
 		Image: { "aria-hidden": true }
 	};
 	const isMeaningful = label !== void 0;
+	const isDecorative = !isMeaningful && !status;
+	if (isSkeleton) return /* @__PURE__ */ jsx("div", {
+		className: rootClassName,
+		ref,
+		"aria-hidden": true,
+		inert: true
+	});
 	return /* @__PURE__ */ jsx("div", {
 		className: rootClassName,
 		role: isMeaningful ? "img" : void 0,
 		"aria-label": label,
-		"aria-hidden": !isMeaningful && !status || void 0,
+		"aria-hidden": isDecorative || void 0,
 		ref,
 		children: /* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: propsContext,

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["styles"],"sources":["../../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Avatar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName, Status } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { avatarColors } from \"@/components/Avatar/avatarColors\";\n\nexport type AvatarColors = (typeof avatarColors)[number];\n\nexport interface AvatarProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n  /** The size of the avatar. @default \"m\" */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\";\n  /** The color of icons and initials inside the avatar. */\n  color?: AvatarColors;\n  /**\n   * Adds status icon and color to the avatar. May only be used if the status is\n   * explained by an element (like text or label) nearby.\n   */\n  status?: Status;\n  /**\n   * A descriptive label that assistive technology announces for the avatar\n   * (e.g. the name of the represented person or entity). When set, the avatar\n   * is exposed as a single image with this label. When omitted, the avatar is\n   * treated as purely decorative and hidden from assistive technology.\n   */\n  label?: string;\n}\n\n/** @flr-generate all */\nexport const Avatar = flowComponent(\"Avatar\", (props) => {\n  const { children, className, color, size = \"m\", status, label, ref } = props;\n\n  const rootClassName = clsx(\n    styles.avatar,\n    styles[`size-${size}`],\n    !status && styles[color ?? \"blue\"],\n    status && styles[status],\n    className,\n  );\n\n  const useDynamicColor = color === undefined && status === undefined;\n\n  const propsContext: PropsContext = {\n    Initials: {\n      className: styles.initials,\n      useDynamicColor,\n      \"aria-hidden\": true,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n    Image: {\n      \"aria-hidden\": true,\n    },\n  };\n\n  const isMeaningful = label !== undefined;\n  const isDecorative = !isMeaningful && !status;\n\n  return (\n    <div\n      className={rootClassName}\n      role={isMeaningful ? \"img\" : undefined}\n      aria-label={label}\n      aria-hidden={isDecorative || undefined}\n      ref={ref}\n    >\n      <PropsContextProvider props={propsContext}>\n        {!status && children}\n        {status && <AlertIcon className={styles.icon} status={status} />}\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;AAkCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EAAE,UAAU,WAAW,OAAO,OAAO,KAAK,QAAQ,OAAO,QAAQ;CAEvE,MAAM,gBAAgB,KACpBA,sBAAO,QACPA,sBAAO,QAAQ,SACf,CAAC,UAAUA,sBAAO,SAAS,SAC3B,UAAUA,sBAAO,SACjB,SACF;CAEA,MAAM,kBAAkB,UAAU,KAAA,KAAa,WAAW,KAAA;CAE1D,MAAM,eAA6B;EACjC,UAAU;GACR,WAAWA,sBAAO;GAClB;GACA,eAAe;EACjB;EACA,MAAM,EACJ,WAAWA,sBAAO,KACpB;EACA,OAAO,EACL,eAAe,KACjB;CACF;CAEA,MAAM,eAAe,UAAU,KAAA;CAG/B,OACE,oBAAC,OAAD;EACE,WAAW;EACX,MAAM,eAAe,QAAQ,KAAA;EAC7B,cAAY;EACZ,eAPiB,CAAC,gBAAgB,CAAC,UAON,KAAA;EACxB;EAEL,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,CAAC,UAAU,UACX,UAAU,oBAAC,WAAD;IAAW,WAAWA,sBAAO;IAAc;GAAS,CAAA,CAC3C;;CACnB,CAAA;AAET,CAAC"}
+{"version":3,"file":"Avatar.mjs","names":["styles"],"sources":["../../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Avatar.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName, Status } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport type { avatarColors } from \"@/components/Avatar/avatarColors\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport type AvatarColors = (typeof avatarColors)[number];\n\nexport interface AvatarProps\n  extends PropsWithChildren, PropsWithClassName, FlowComponentProps {\n  /** The size of the avatar. @default \"m\" */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\";\n  /** The color of icons and initials inside the avatar. */\n  color?: AvatarColors;\n  /**\n   * Adds status icon and color to the avatar. May only be used if the status is\n   * explained by an element (like text or label) nearby.\n   */\n  status?: Status;\n  /**\n   * A descriptive label that assistive technology announces for the avatar\n   * (e.g. the name of the represented person or entity). When set, the avatar\n   * is exposed as a single image with this label. When omitted, the avatar is\n   * treated as purely decorative and hidden from assistive technology.\n   */\n  label?: string;\n}\n\n/** @flr-generate all */\nexport const Avatar = flowComponent(\"Avatar\", (props) => {\n  const { children, className, color, size = \"m\", status, label, ref } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.avatar,\n    styles[`size-${size}`],\n    !status && styles[color ?? \"blue\"],\n    status && styles[status],\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const useDynamicColor = color === undefined && status === undefined;\n\n  const propsContext: PropsContext = {\n    Initials: {\n      className: styles.initials,\n      useDynamicColor,\n      \"aria-hidden\": true,\n    },\n    Icon: {\n      className: styles.icon,\n    },\n    Image: {\n      \"aria-hidden\": true,\n    },\n  };\n\n  const isMeaningful = label !== undefined;\n  const isDecorative = !isMeaningful && !status;\n\n  /* The size does not depend on the content, and an `Image` inside would\n     issue its request. */\n  if (isSkeleton) {\n    return <div className={rootClassName} ref={ref} aria-hidden inert />;\n  }\n\n  return (\n    <div\n      className={rootClassName}\n      role={isMeaningful ? \"img\" : undefined}\n      aria-label={label}\n      aria-hidden={isDecorative || undefined}\n      ref={ref}\n    >\n      <PropsContextProvider props={propsContext}>\n        {!status && children}\n        {status && <AlertIcon className={styles.icon} status={status} />}\n      </PropsContextProvider>\n    </div>\n  );\n});\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;AAmCA,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EAAE,UAAU,WAAW,OAAO,OAAO,KAAK,QAAQ,OAAO,QAAQ;CAEvE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,sBAAO,QACPA,sBAAO,QAAQ,SACf,CAAC,UAAUA,sBAAO,SAAS,SAC3B,UAAUA,sBAAO,SACjB,cAAcA,sBAAO,UACrB,SACF;CAEA,MAAM,kBAAkB,UAAU,KAAA,KAAa,WAAW,KAAA;CAE1D,MAAM,eAA6B;EACjC,UAAU;GACR,WAAWA,sBAAO;GAClB;GACA,eAAe;EACjB;EACA,MAAM,EACJ,WAAWA,sBAAO,KACpB;EACA,OAAO,EACL,eAAe,KACjB;CACF;CAEA,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,eAAe,CAAC,gBAAgB,CAAC;CAIvC,IAAI,YACF,OAAO,oBAAC,OAAD;EAAK,WAAW;EAAoB;EAAK,eAAA;EAAY,OAAA;CAAO,CAAA;CAGrE,OACE,oBAAC,OAAD;EACE,WAAW;EACX,MAAM,eAAe,QAAQ,KAAA;EAC7B,cAAY;EACZ,eAAa,gBAAgB,KAAA;EACxB;EAEL,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,CAAC,UAAU,UACX,UAAU,oBAAC,WAAD;IAAW,WAAWA,sBAAO;IAAc;GAAS,CAAA,CAC3C;;CACnB,CAAA;AAET,CAAC"}

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

@@ -14,6 +14,7 @@ var success = "flow--avatar--success";
 var warning = "flow--avatar--warning";
 var danger = "flow--avatar--danger";
 var unavailable = "flow--avatar--unavailable";
+var skeleton = "flow--avatar--skeleton";
 var Avatar_module_default = {
 	avatar,
 	icon,
@@ -31,9 +32,12 @@ var Avatar_module_default = {
 	success,
 	warning,
 	danger,
-	unavailable
+	unavailable,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--avatar--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--avatar--skeleton-text-shimmer"
 };
 //#endregion
-export { avatar, blue, danger, Avatar_module_default as default, green, icon, info, initials, lilac, success, teal, unavailable, violet, warning };
+export { avatar, blue, danger, Avatar_module_default as default, green, icon, info, initials, lilac, skeleton, success, teal, unavailable, violet, warning };
 
 //# sourceMappingURL=Avatar.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":[".avatar {\n  border-radius: var(--corner-radius--round);\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  overflow: hidden;\n  flex-shrink: 0;\n  font-weight: var(--font-weight--bold);\n  font-size: calc(var(--avatar-size) * 0.35);\n  background-color: var(--background-color);\n  color: var(--content-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Elements */\n\n  // The image is a child the consumer passes — Flow `Image` or a bare `<img>`.\n  // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .icon {\n    width: calc(var(--avatar-size) * 0.7);\n    height: calc(var(--avatar-size) * 0.7);\n  }\n\n  .initials {\n    font-size: calc(var(--avatar-size) * 0.4);\n  }\n\n  @extend .size-m;\n  @extend .blue;\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --avatar-size: var(--avatar--size--#{$size});\n    }\n  }\n\n  @include size(m);\n  @include size(xs);\n  @include size(s);\n  @include size(l);\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n    &.#{$color} {\n      --background-color: var(--decorative--#{$color}-background-color);\n      --content-color: var(--decorative--#{$color}-content-color);\n      --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n    }\n  }\n\n  @include color(\"blue\");\n  @include color(\"teal\");\n  @include color(\"green\");\n  @include color(\"violet\");\n  @include color(\"lilac\");\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      --background-color: var(--avatar--#{$status}-status-background-color);\n    }\n  }\n\n  @include status(\"info\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"danger\");\n  @include status(\"unavailable\");\n}\n"],"mappings":""}
+{"version":3,"file":"Avatar.module.mjs","names":[],"sources":["../../../../../../../src/components/Avatar/Avatar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.avatar {\n  border-radius: var(--corner-radius--round);\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  overflow: hidden;\n  flex-shrink: 0;\n  font-weight: var(--font-weight--bold);\n  font-size: calc(var(--avatar-size) * 0.35);\n  background-color: var(--background-color);\n  color: var(--content-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  /* Elements */\n\n  // The image is a child the consumer passes — Flow `Image` or a bare `<img>`.\n  // stylelint-disable-next-line selector-max-type -- bare `<img>` has no class\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .icon {\n    width: calc(var(--avatar-size) * 0.7);\n    height: calc(var(--avatar-size) * 0.7);\n  }\n\n  .initials {\n    font-size: calc(var(--avatar-size) * 0.4);\n  }\n\n  @extend .size-m;\n  @extend .blue;\n\n  /* Sizes */\n\n  @mixin size($size) {\n    &.size-#{$size} {\n      --avatar-size: var(--avatar--size--#{$size});\n    }\n  }\n\n  @include size(m);\n  @include size(xs);\n  @include size(s);\n  @include size(l);\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:has(.initials[data-dynamic-color=\"#{$color}\"]),\n    &.#{$color} {\n      --background-color: var(--decorative--#{$color}-background-color);\n      --content-color: var(--decorative--#{$color}-content-color);\n      --content-accent-color: var(--decorative--#{$color}-content-accent-color);\n    }\n  }\n\n  @include color(\"blue\");\n  @include color(\"teal\");\n  @include color(\"green\");\n  @include color(\"violet\");\n  @include color(\"lilac\");\n\n  /* Status */\n\n  @mixin status($status) {\n    &.#{$status} {\n      --background-color: var(--avatar--#{$status}-status-background-color);\n    }\n  }\n\n  @include status(\"info\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"danger\");\n  @include status(\"unavailable\");\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--corner-radius--round);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -3,6 +3,7 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { alphaColors, isAlphaColor } from "../../lib/types/props.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { Button } from "../Button/Button.mjs";
@@ -21,7 +22,8 @@ var contextualHelpTunnel = {
 var Badge = flowComponent("Badge", (props) => {
 	const { children, className, color = "neutral", ref, onPress, onClose, isDisabled, ...rest } = props;
 	const stringFormatter = useLocalizedStringFormatter(__locale_default, "Badge");
-	const rootClassName = clsx(Badge_module_default.badge, Badge_module_default[color], isDisabled && Badge_module_default.disabled, className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(Badge_module_default.badge, Badge_module_default[color], isDisabled && Badge_module_default.disabled, isSkeleton && Badge_module_default.skeleton, className);
 	const buttonColor = isAlphaColor(color) ? color : "dark";
 	const propsContext = {
 		Label: {
@@ -65,10 +67,11 @@ var Badge = flowComponent("Badge", (props) => {
 	};
 	return /* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsxs("div", {
 			className: rootClassName,
 			...rest,
 			ref,
+			inert: isSkeleton || void 0,
 			children: [
 				!onPress && /* @__PURE__ */ jsx("div", {
 					className: Badge_module_default.content,
@@ -96,7 +99,7 @@ var Badge = flowComponent("Badge", (props) => {
 					children: /* @__PURE__ */ jsx(IconClose, {})
 				})
 			]
-		})
+		}) })
 	});
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  alphaColors,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { ContextualHelpButton } from \"@/components/Badge/components/ContextualHelpButton\";\nimport locales from \"./locales/*.locale.json\";\n\nexport const badgeColors = [\n  \"neutral\",\n  \"blue\",\n  \"navy\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"orange\",\n  \"red\",\n  ...alphaColors,\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n  extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n  /** Handler that is called when the badge is pressed. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when the badges close icon is pressed. */\n  onClose?: (e: PressEvent) => void;\n  /** The color of the badge. @default \"neutral\" */\n  color?: BadgeColors;\n  /** Whether the badge is disabled. */\n  isDisabled?: boolean;\n}\n\nconst contextualHelpTunnel = {\n  id: \"contextualHelp\",\n  component: \"Badge\",\n} as const;\n\n/** @flr-generate all */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n  const {\n    children,\n    className,\n    color = \"neutral\",\n    ref,\n    onPress,\n    onClose,\n    isDisabled,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Badge\");\n\n  const rootClassName = clsx(\n    styles.badge,\n    styles[color],\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const buttonColor = isAlphaColor(color) ? color : \"dark\";\n\n  const propsContext: PropsContext = {\n    Label: {\n      elementType: \"span\",\n      className: styles.scope,\n      unstyled: true,\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.value,\n    },\n    Button: {\n      Label: {\n        elementType: \"span\",\n        className: styles.scope,\n        unstyled: true,\n      },\n      Text: {\n        elementType: \"span\",\n        className: styles.value,\n      },\n    },\n    ContextualHelp: {\n      tunnel: contextualHelpTunnel,\n      wrapWith: (\n        <ContextualHelpButton\n          className={styles.action}\n          color={buttonColor}\n          isDisabled={isDisabled}\n        />\n      ),\n    },\n    // A trigger the consumer wrote brings its own button. It goes to the same\n    // place, styled like the one the badge supplies.\n    ContextualHelpTrigger: {\n      tunnel: contextualHelpTunnel,\n      Button: {\n        className: styles.action,\n        color: buttonColor,\n        variant: \"plain\",\n        size: \"s\",\n        isDisabled,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div className={rootClassName} {...rest} ref={ref}>\n        {!onPress && <div className={styles.content}>{children}</div>}\n        {onPress && (\n          <Button\n            isDisabled={isDisabled}\n            unstyled\n            className={styles.button}\n            onPress={onPress}\n          >\n            {children}\n          </Button>\n        )}\n\n        <UiComponentTunnelExit id={contextualHelpTunnel.id} component=\"Badge\" />\n\n        {onClose && (\n          <Button\n            className={styles.close}\n            size=\"s\"\n            color={buttonColor}\n            variant=\"plain\"\n            onPress={onClose}\n            isDisabled={isDisabled}\n            aria-label={stringFormatter.format(\"remove\")}\n          >\n            <IconClose />\n          </Button>\n        )}\n      </div>\n    </PropsContextProvider>\n  );\n});\n\nexport default Badge;\n"],"mappings":";;;;;;;;;;;;;;AAmB2B,CAUzB,GAAG,WACL;AAeA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AAGA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,KACA,SACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CAEpE,MAAM,gBAAgB,KACpBC,qBAAO,OACPA,qBAAO,QACP,cAAcA,qBAAO,UACrB,SACF;CAEA,MAAM,cAAc,aAAa,KAAK,IAAI,QAAQ;CAElD,MAAM,eAA6B;EACjC,OAAO;GACL,aAAa;GACb,WAAWA,qBAAO;GAClB,UAAU;EACZ;EACA,MAAM;GACJ,aAAa;GACb,WAAWA,qBAAO;EACpB;EACA,QAAQ;GACN,OAAO;IACL,aAAa;IACb,WAAWA,qBAAO;IAClB,UAAU;GACZ;GACA,MAAM;IACJ,aAAa;IACb,WAAWA,qBAAO;GACpB;EACF;EACA,gBAAgB;GACd,QAAQ;GACR,UACE,oBAAC,sBAAD;IACE,WAAWA,qBAAO;IAClB,OAAO;IACK;GACb,CAAA;EAEL;EAGA,uBAAuB;GACrB,QAAQ;GACR,QAAQ;IACN,WAAWA,qBAAO;IAClB,OAAO;IACP,SAAS;IACT,MAAM;IACN;GACF;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAC3B,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,GAAI;GAAW;GAA9C,UAAA;IACG,CAAC,WAAW,oBAAC,OAAD;KAAK,WAAWA,qBAAO;KAAU;IAAc,CAAA;IAC3D,WACC,oBAAC,QAAD;KACc;KACZ,UAAA;KACA,WAAWA,qBAAO;KACT;KAER;IACK,CAAA;IAGV,oBAAC,uBAAD;KAAuB,IAAI,qBAAqB;KAAI,WAAU;IAAS,CAAA;IAEtE,WACC,oBAAC,QAAD;KACE,WAAWA,qBAAO;KAClB,MAAK;KACL,OAAO;KACP,SAAQ;KACR,SAAS;KACG;KACZ,cAAY,gBAAgB,OAAO,QAAQ;KAE3C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA;GAEP;;CACe,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Badge.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport {\n  alphaColors,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { ContextualHelpButton } from \"@/components/Badge/components/ContextualHelpButton\";\nimport locales from \"./locales/*.locale.json\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport const badgeColors = [\n  \"neutral\",\n  \"blue\",\n  \"navy\",\n  \"violet\",\n  \"teal\",\n  \"lilac\",\n  \"green\",\n  \"orange\",\n  \"red\",\n  ...alphaColors,\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n  extends PropsWithChildren, FlowComponentProps, PropsWithClassName {\n  /** Handler that is called when the badge is pressed. */\n  onPress?: (e: PressEvent) => void;\n  /** Handler that is called when the badges close icon is pressed. */\n  onClose?: (e: PressEvent) => void;\n  /** The color of the badge. @default \"neutral\" */\n  color?: BadgeColors;\n  /** Whether the badge is disabled. */\n  isDisabled?: boolean;\n}\n\nconst contextualHelpTunnel = {\n  id: \"contextualHelp\",\n  component: \"Badge\",\n} as const;\n\n/** @flr-generate all */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n  const {\n    children,\n    className,\n    color = \"neutral\",\n    ref,\n    onPress,\n    onClose,\n    isDisabled,\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"Badge\");\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.badge,\n    styles[color],\n    isDisabled && styles.disabled,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  const buttonColor = isAlphaColor(color) ? color : \"dark\";\n\n  const propsContext: PropsContext = {\n    Label: {\n      elementType: \"span\",\n      className: styles.scope,\n      unstyled: true,\n    },\n    Text: {\n      elementType: \"span\",\n      className: styles.value,\n    },\n    Button: {\n      Label: {\n        elementType: \"span\",\n        className: styles.scope,\n        unstyled: true,\n      },\n      Text: {\n        elementType: \"span\",\n        className: styles.value,\n      },\n    },\n    ContextualHelp: {\n      tunnel: contextualHelpTunnel,\n      wrapWith: (\n        <ContextualHelpButton\n          className={styles.action}\n          color={buttonColor}\n          isDisabled={isDisabled}\n        />\n      ),\n    },\n    // A trigger the consumer wrote brings its own button. It goes to the same\n    // place, styled like the one the badge supplies.\n    ContextualHelpTrigger: {\n      tunnel: contextualHelpTunnel,\n      Button: {\n        className: styles.action,\n        color: buttonColor,\n        variant: \"plain\",\n        size: \"s\",\n        isDisabled,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {/* The badge is one skeleton surface, its content draws none. */}\n      <SkeletonModeReset>\n        <div\n          className={rootClassName}\n          {...rest}\n          ref={ref}\n          inert={isSkeleton || undefined}\n        >\n          {!onPress && <div className={styles.content}>{children}</div>}\n          {onPress && (\n            <Button\n              isDisabled={isDisabled}\n              unstyled\n              className={styles.button}\n              onPress={onPress}\n            >\n              {children}\n            </Button>\n          )}\n\n          <UiComponentTunnelExit\n            id={contextualHelpTunnel.id}\n            component=\"Badge\"\n          />\n\n          {onClose && (\n            <Button\n              className={styles.close}\n              size=\"s\"\n              color={buttonColor}\n              variant=\"plain\"\n              onPress={onClose}\n              isDisabled={isDisabled}\n              aria-label={stringFormatter.format(\"remove\")}\n            >\n              <IconClose />\n            </Button>\n          )}\n        </div>\n      </SkeletonModeReset>\n    </PropsContextProvider>\n  );\n});\n\nexport default Badge;\n"],"mappings":";;;;;;;;;;;;;;;AAuB2B,CAUzB,GAAG,WACL;AAeA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AAGA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,KACA,SACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,qBAAO,OACPA,qBAAO,QACP,cAAcA,qBAAO,UACrB,cAAcA,qBAAO,UACrB,SACF;CAEA,MAAM,cAAc,aAAa,KAAK,IAAI,QAAQ;CAElD,MAAM,eAA6B;EACjC,OAAO;GACL,aAAa;GACb,WAAWA,qBAAO;GAClB,UAAU;EACZ;EACA,MAAM;GACJ,aAAa;GACb,WAAWA,qBAAO;EACpB;EACA,QAAQ;GACN,OAAO;IACL,aAAa;IACb,WAAWA,qBAAO;IAClB,UAAU;GACZ;GACA,MAAM;IACJ,aAAa;IACb,WAAWA,qBAAO;GACpB;EACF;EACA,gBAAgB;GACd,QAAQ;GACR,UACE,oBAAC,sBAAD;IACE,WAAWA,qBAAO;IAClB,OAAO;IACK;GACb,CAAA;EAEL;EAGA,uBAAuB;GACrB,QAAQ;GACR,QAAQ;IACN,WAAWA,qBAAO;IAClB,OAAO;IACP,SAAS;IACT,MAAM;IACN;GACF;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,mBAAD,EAAA,UACE,qBAAC,OAAD;GACE,WAAW;GACX,GAAI;GACC;GACL,OAAO,cAAc,KAAA;GAJvB,UAAA;IAMG,CAAC,WAAW,oBAAC,OAAD;KAAK,WAAWA,qBAAO;KAAU;IAAc,CAAA;IAC3D,WACC,oBAAC,QAAD;KACc;KACZ,UAAA;KACA,WAAWA,qBAAO;KACT;KAER;IACK,CAAA;IAGV,oBAAC,uBAAD;KACE,IAAI,qBAAqB;KACzB,WAAU;IACX,CAAA;IAEA,WACC,oBAAC,QAAD;KACE,WAAWA,qBAAO;KAClB,MAAK;KACL,OAAO;KACP,SAAQ;KACR,SAAS;KACG;KACZ,cAAY,gBAAgB,OAAO,QAAQ;KAE3C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA;GAEP;EACY,CAAA,EAAA,CAAA;CACC,CAAA;AAE1B,CAAC"}

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

@@ -20,6 +20,7 @@ var orange = "flow--badge--orange";
 var red = "flow--badge--red";
 var dark = "flow--badge--dark";
 var light = "flow--badge--light";
+var skeleton = "flow--badge--skeleton";
 var Badge_module_default = {
 	badge,
 	content,
@@ -41,9 +42,12 @@ var Badge_module_default = {
 	dark,
 	light,
 	"dark-static": "flow--badge--dark-static",
-	"light-static": "flow--badge--light-static"
+	"light-static": "flow--badge--light-static",
+	skeleton,
+	"skeleton-surface-shimmer": "flow--badge--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--badge--skeleton-text-shimmer"
 };
 //#endregion
-export { action, badge, blue, button, close, content, dark, Badge_module_default as default, disabled, green, light, lilac, navy, neutral, orange, red, scope, teal, value, violet };
+export { action, badge, blue, button, close, content, dark, Badge_module_default as default, disabled, green, light, lilac, navy, neutral, orange, red, scope, skeleton, teal, value, violet };
 
 //# sourceMappingURL=Badge.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.badge {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n\n  --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n  --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n  .content,\n  .button {\n    border-radius: var(--badge--corner-radius);\n    border-width: var(--badge--border-width);\n    border-style: var(--badge--border-style);\n    font-size: var(--badge--font-size);\n    font-weight: var(--badge--font-weight);\n    padding: 0;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    height: var(--badge-size);\n    line-height: var(--content-size);\n    padding-inline: var(--badge--padding-x);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include ellipsis.ellipsis();\n  }\n\n  .button,\n  .action,\n  .close {\n    @include focus.focus;\n  }\n\n  @extend .neutral;\n\n  &:has(.close),\n  &:has(.action) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n    }\n  }\n\n  &:has(.action):has(.close) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n    }\n  }\n\n  &:has(.scope) {\n    .content,\n    .button {\n      padding: 0;\n    }\n\n    .value {\n      padding-inline: var(--badge--spacing) var(--badge--padding-x);\n    }\n\n    .scope {\n      padding-inline: var(--badge--padding-x) var(--badge--spacing);\n      height: 100%;\n      flex-shrink: 0;\n    }\n\n    &:has(.close),\n    &:has(.action) {\n      .button,\n      .content {\n        padding-inline-end: var(--content-size);\n\n        .value {\n          padding-inline-end: var(--badge--spacing);\n        }\n      }\n    }\n\n    &:has(.action):has(.close) {\n      .button,\n      .content {\n        padding-inline-end: calc(var(--content-size) * 2);\n      }\n    }\n  }\n\n  .action,\n  .close {\n    height: var(--content-size);\n    padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n    border-radius: 0;\n    margin-inline-start: calc(\n      (var(--content-size) + var(--badge--border-width)) * -1\n    );\n    margin-top: var(--badge--border-width);\n  }\n\n  /* The trailing button rounds off the badge */\n  .close,\n  &:not(:has(.close)) .action {\n    border-end-end-radius: var(--badge-size);\n    border-start-end-radius: var(--badge-size);\n  }\n\n  &:has(.action):has(.close) {\n    .action {\n      margin-inline-start: calc(\n        (var(--content-size) * 2 + var(--badge--border-width)) * -1\n      );\n    }\n\n    .close {\n      margin-inline-start: 0;\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .content,\n      .button {\n        border-color: var(--badge--#{$color}-border-color);\n        background-color: var(--badge--#{$color}-background-color--default);\n        color: var(--badge--#{$color}-content-color);\n      }\n\n      &:not(.disabled) {\n        .button {\n          &:hover {\n            background-color: var(--badge--#{$color}-background-color--hover);\n          }\n\n          &[data-pressed] {\n            background-color: var(--badge--#{$color}-background-color--pressed);\n          }\n        }\n      }\n\n      .scope {\n        background-color: var(--badge--#{$color}-scope-background-color);\n        color: var(--badge--#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include color(\"neutral\");\n  @include color(\"blue\");\n  @include color(\"navy\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"green\");\n  @include color(\"orange\");\n  @include color(\"red\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  &.disabled {\n    .content,\n    .button {\n      border-color: var(--badge--disabled-border-color);\n      background-color: var(--badge--disabled-background-color);\n      color: var(--badge--disabled-content-color);\n    }\n\n    .action,\n    .close {\n      color: var(--badge--disabled-content-color);\n    }\n\n    .scope {\n      background-color: var(--badge--disabled-scope-background-color);\n      color: var(--badge--disabled-scope-content-color);\n    }\n  }\n\n  /* Alpha Colors Disabled */\n\n  @mixin alphaColor($color) {\n    &.#{$color}.disabled {\n      .content,\n      .button {\n        border-color: var(--badge--disabled-#{$color}-border-color);\n        background-color: var(--badge--disabled-#{$color}-background-color);\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .action,\n      .close {\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .scope {\n        background-color: var(\n          --badge--disabled-#{$color}-scope-background-color\n        );\n        color: var(--badge--disabled-#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include alphaColor(\"dark\");\n  @include alphaColor(\"light\");\n  @include alphaColor(\"dark-static\");\n  @include alphaColor(\"light-static\");\n}\n"],"mappings":""}
+{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.badge {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n\n  --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n  --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n  .content,\n  .button {\n    border-radius: var(--badge--corner-radius);\n    border-width: var(--badge--border-width);\n    border-style: var(--badge--border-style);\n    font-size: var(--badge--font-size);\n    font-weight: var(--badge--font-weight);\n    padding: 0;\n    display: flex;\n    overflow: hidden;\n    align-items: center;\n    height: var(--badge-size);\n    line-height: var(--content-size);\n    padding-inline: var(--badge--padding-x);\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    @include ellipsis.ellipsis();\n  }\n\n  .button,\n  .action,\n  .close {\n    @include focus.focus;\n  }\n\n  @extend .neutral;\n\n  &:has(.close),\n  &:has(.action) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n    }\n  }\n\n  &:has(.action):has(.close) {\n    .button,\n    .content {\n      padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n    }\n  }\n\n  &:has(.scope) {\n    .content,\n    .button {\n      padding: 0;\n    }\n\n    .value {\n      padding-inline: var(--badge--spacing) var(--badge--padding-x);\n    }\n\n    .scope {\n      padding-inline: var(--badge--padding-x) var(--badge--spacing);\n      height: 100%;\n      flex-shrink: 0;\n    }\n\n    &:has(.close),\n    &:has(.action) {\n      .button,\n      .content {\n        padding-inline-end: var(--content-size);\n\n        .value {\n          padding-inline-end: var(--badge--spacing);\n        }\n      }\n    }\n\n    &:has(.action):has(.close) {\n      .button,\n      .content {\n        padding-inline-end: calc(var(--content-size) * 2);\n      }\n    }\n  }\n\n  .action,\n  .close {\n    height: var(--content-size);\n    padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n    border-radius: 0;\n    margin-inline-start: calc(\n      (var(--content-size) + var(--badge--border-width)) * -1\n    );\n    margin-top: var(--badge--border-width);\n  }\n\n  /* The trailing button rounds off the badge */\n  .close,\n  &:not(:has(.close)) .action {\n    border-end-end-radius: var(--badge-size);\n    border-start-end-radius: var(--badge-size);\n  }\n\n  &:has(.action):has(.close) {\n    .action {\n      margin-inline-start: calc(\n        (var(--content-size) * 2 + var(--badge--border-width)) * -1\n      );\n    }\n\n    .close {\n      margin-inline-start: 0;\n    }\n  }\n\n  /* Colors */\n\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      .content,\n      .button {\n        border-color: var(--badge--#{$color}-border-color);\n        background-color: var(--badge--#{$color}-background-color--default);\n        color: var(--badge--#{$color}-content-color);\n      }\n\n      &:not(.disabled) {\n        .button {\n          &:hover {\n            background-color: var(--badge--#{$color}-background-color--hover);\n          }\n\n          &[data-pressed] {\n            background-color: var(--badge--#{$color}-background-color--pressed);\n          }\n        }\n      }\n\n      .scope {\n        background-color: var(--badge--#{$color}-scope-background-color);\n        color: var(--badge--#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include color(\"neutral\");\n  @include color(\"blue\");\n  @include color(\"navy\");\n  @include color(\"violet\");\n  @include color(\"teal\");\n  @include color(\"lilac\");\n  @include color(\"green\");\n  @include color(\"orange\");\n  @include color(\"red\");\n  @include color(\"dark\");\n  @include color(\"light\");\n  @include color(\"dark-static\");\n  @include color(\"light-static\");\n\n  &.disabled {\n    .content,\n    .button {\n      border-color: var(--badge--disabled-border-color);\n      background-color: var(--badge--disabled-background-color);\n      color: var(--badge--disabled-content-color);\n    }\n\n    .action,\n    .close {\n      color: var(--badge--disabled-content-color);\n    }\n\n    .scope {\n      background-color: var(--badge--disabled-scope-background-color);\n      color: var(--badge--disabled-scope-content-color);\n    }\n  }\n\n  /* Alpha Colors Disabled */\n\n  @mixin alphaColor($color) {\n    &.#{$color}.disabled {\n      .content,\n      .button {\n        border-color: var(--badge--disabled-#{$color}-border-color);\n        background-color: var(--badge--disabled-#{$color}-background-color);\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .action,\n      .close {\n        color: var(--badge--disabled-#{$color}-content-color);\n      }\n\n      .scope {\n        background-color: var(\n          --badge--disabled-#{$color}-scope-background-color\n        );\n        color: var(--badge--disabled-#{$color}-scope-content-color);\n      }\n    }\n  }\n\n  @include alphaColor(\"dark\");\n  @include alphaColor(\"light\");\n  @include alphaColor(\"dark-static\");\n  @include alphaColor(\"light-static\");\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--badge--corner-radius);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -5,6 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import Button_module_default from "./Button.module.mjs";
 import { containsTextChild } from "../../lib/react/remote.mjs";
 import { useWarnDeprecation } from "../DeprecationWarningProvider/DeprecationWarningProvider.mjs";
+import { SkeletonModeReset, useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { IconFailed } from "../Icon/components/icons/IconFailed.mjs";
 import { IconSucceeded } from "../Icon/components/icons/IconSucceeded.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
@@ -42,6 +43,7 @@ var Button = flowComponent("Button", (props) => {
 	const muted = isMuted(props);
 	props = disablePendingProps(props);
 	const warnDeprecation = useWarnDeprecation();
+	const isSkeleton = useSkeletonMode();
 	const { color: colorFromProps = "primary", variant = "solid", children, className, size = "m", isPending, isSucceeded, isFailed, "aria-disabled": ariaDisabled, ref, slot: ignoredSlotProp, ariaSlot: slot, unstyled, isReadOnly, elementType, ...restProps } = props;
 	if (colorFromProps === "accent") warnDeprecation("The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.");
 	const color = colorFromProps === "accent" ? "success" : colorFromProps;
@@ -50,7 +52,7 @@ var Button = flowComponent("Button", (props) => {
 	* carries the marker. An explicit `Text` child is matched by `:has(.text)`.
 	*/
 	const hasText = containsTextChild(children);
-	const rootClassName = unstyled ? className : clsx(Button_module_default.button, isPending && Button_module_default.isPending, isSucceeded && Button_module_default.isSucceeded, isFailed && Button_module_default.isFailed, size === "s" && Button_module_default["size-s"], Button_module_default[color], Button_module_default[variant], ariaDisabled && Button_module_default.ariaDisabled, hasText && Button_module_default.hasText, className);
+	const rootClassName = unstyled ? className : clsx(Button_module_default.button, isPending && Button_module_default.isPending, isSucceeded && Button_module_default.isSucceeded, isFailed && Button_module_default.isFailed, size === "s" && Button_module_default["size-s"], Button_module_default[color], Button_module_default[variant], ariaDisabled && Button_module_default.ariaDisabled, hasText && Button_module_default.hasText, isSkeleton && Button_module_default.skeleton, className);
 	useAriaAnnounceActionState(isPending ? "isPending" : isSucceeded ? "isSucceeded" : isFailed ? "isFailed" : "isIdle");
 	const propsContext = {
 		Icon: {
@@ -75,7 +77,7 @@ var Button = flowComponent("Button", (props) => {
 		size,
 		className: Button_module_default.stateIcon
 	}) : void 0;
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
+	const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PropsContextProvider, {
 		props: propsContext,
 		children: /* @__PURE__ */ jsx(Wrap, {
 			if: !unstyled,
@@ -85,10 +87,15 @@ var Button = flowComponent("Button", (props) => {
 			})
 		})
 	}), stateIcon] });
+	const content = /* @__PURE__ */ jsx(Wrap, {
+		if: !unstyled,
+		children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: buttonContent })
+	});
 	if (elementType === "span") {
 		const spanProps = filterDOMProps(restProps, { global: true });
 		return /* @__PURE__ */ jsx("span", {
 			...spanProps,
+			inert: isSkeleton || void 0,
 			"data-disabled": restProps.isDisabled || void 0,
 			className: typeof rootClassName === "string" ? rootClassName : void 0,
 			children: content
@@ -101,6 +108,7 @@ var Button = flowComponent("Button", (props) => {
 		...isReadOnly === true ? { "data-readonly": true } : {},
 		...restProps,
 		"aria-disabled": muted || void 0,
+		inert: isSkeleton || void 0,
 		children: content
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /**\n   * Slot for button placement in action groups: `primary` (at the end),\n   * `secondary` (before the primary action) or `abort` (at the start). Without\n   * a slot, an action group places the colors primary, success and danger in\n   * `primary` and every other color in `abort`. A secondary-colored button that\n   * does not abort therefore needs `slot=\"secondary\"`.\n   */\n  slot?: string;\n  /**\n   * The color of the button.\n   *\n   * @default \"primary\"\n   * @deprecatedValues accent\n   */\n  color?:\n    \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n  /** @internal */\n  elementType?: \"button\" | \"span\";\n}\n\nconst isMuted = (props: ButtonProps) =>\n  !!(\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  );\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (isMuted(props)) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  const muted = isMuted(props);\n  props = disablePendingProps(props);\n\n  const warnDeprecation = useWarnDeprecation();\n\n  const {\n    color: colorFromProps = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    elementType,\n    ...restProps\n  } = props;\n\n  if (colorFromProps === \"accent\") {\n    warnDeprecation(\n      \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n    );\n  }\n\n  const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n  /**\n   * A string child renders no element the CSS could match, so the button itself\n   * carries the marker. An explicit `Text` child is matched by `:has(.text)`.\n   */\n  const hasText = containsTextChild(children);\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        size === \"s\" && styles[\"size-s\"],\n        styles[color],\n        styles[variant],\n        ariaDisabled && styles.ariaDisabled,\n        hasText && styles.hasText,\n        className,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const stateIcon = isSucceeded ? (\n    <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner size={size} className={styles.stateIcon} />\n  ) : undefined;\n\n  const content = (\n    <>\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>{children}</span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </>\n  );\n\n  if (elementType === \"span\") {\n    const spanProps = filterDOMProps(restProps, { global: true });\n\n    return (\n      <span\n        {...spanProps}\n        data-disabled={restProps.isDisabled || undefined}\n        className={\n          typeof rootClassName === \"string\" ? rootClassName : undefined\n        }\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n      aria-disabled={muted || undefined}\n    >\n      {content}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","names":["styles","_Fragment"],"sources":["../../../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Button.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { IconFailed, IconSucceeded } from \"@/components/Icon/components/icons\";\nimport { Wrap } from \"@/components/Wrap\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport LoadingSpinner from \"@/components/LoadingSpinner/LoadingSpinner\";\nimport { useAriaAnnounceActionState } from \"@/components/Action/lib/ariaLive\";\nimport { containsTextChild } from \"@/lib/react/remote\";\nimport type { AlphaColor } from \"@/lib/types/props\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\nimport {\n  SkeletonModeReset,\n  useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface ButtonProps\n  extends\n    PropsWithChildren<Aria.ButtonProps>,\n    FlowComponentProps<HTMLButtonElement> {\n  /**\n   * Slot for button placement in action groups: `primary` (at the end),\n   * `secondary` (before the primary action) or `abort` (at the start). Without\n   * a slot, an action group places the colors primary, success and danger in\n   * `primary` and every other color in `abort`. A secondary-colored button that\n   * does not abort therefore needs `slot=\"secondary\"`.\n   */\n  slot?: string;\n  /**\n   * The color of the button.\n   *\n   * @default \"primary\"\n   * @deprecatedValues accent\n   */\n  color?:\n    \"primary\" | \"success\" | \"secondary\" | \"danger\" | AlphaColor | \"accent\";\n  /** The visual variant of the button. @default \"solid\" */\n  variant?: \"plain\" | \"solid\" | \"soft\" | \"outline\";\n  /** The size of the button. @default \"m\" */\n  size?: \"m\" | \"s\";\n  /** Disables button but keeps it focusable. */\n  \"aria-disabled\"?: boolean;\n  /** Whether the button is in a pending state. */\n  isPending?: boolean;\n  /** Whether the button is in a succeeded state. */\n  isSucceeded?: boolean;\n  /** Whether the button is in a failed state. */\n  isFailed?: boolean;\n  /** Whether the button is in a read only state. */\n  isReadOnly?: boolean;\n  /** @internal */\n  unstyled?: boolean;\n  /** @internal */\n  ariaSlot?: string | null;\n  /** @internal */\n  elementType?: \"button\" | \"span\";\n}\n\nconst isMuted = (props: ButtonProps) =>\n  !!(\n    props.isPending ||\n    props.isSucceeded ||\n    props.isFailed ||\n    props[\"aria-disabled\"] ||\n    props.isReadOnly\n  );\n\nconst disablePendingProps = (props: ButtonProps) => {\n  if (isMuted(props)) {\n    props = { ...props };\n\n    const mutedActionHandler = (e: unknown) => {\n      if (e && typeof e === \"object\") {\n        // stopPropagation is the default behavior in React Aria\n        const isReactAriaEvent =\n          \"continuePropagation\" in e &&\n          typeof e.continuePropagation === \"function\";\n\n        if (\n          !isReactAriaEvent &&\n          \"stopPropagation\" in e &&\n          typeof e.stopPropagation === \"function\"\n        ) {\n          e.stopPropagation();\n        }\n        if (\"preventDefault\" in e && typeof e.preventDefault === \"function\") {\n          e.preventDefault();\n        }\n      }\n\n      return false;\n    };\n\n    props.onClick = mutedActionHandler;\n    props.onPress = mutedActionHandler;\n    props.onPressStart = mutedActionHandler;\n    props.onPressEnd = mutedActionHandler;\n    props.onPressChange = mutedActionHandler;\n    props.onPressUp = mutedActionHandler;\n    props.onKeyDown = mutedActionHandler;\n    props.onKeyUp = mutedActionHandler;\n  }\n\n  return props;\n};\n\n/** @flr-generate all */\nexport const Button = flowComponent(\"Button\", (props) => {\n  const muted = isMuted(props);\n  props = disablePendingProps(props);\n\n  const warnDeprecation = useWarnDeprecation();\n  const isSkeleton = useSkeletonMode();\n\n  const {\n    color: colorFromProps = \"primary\",\n    variant = \"solid\",\n    children,\n    className,\n    size = \"m\",\n    isPending,\n    isSucceeded,\n    isFailed,\n    \"aria-disabled\": ariaDisabled,\n    ref,\n    slot: ignoredSlotProp,\n    ariaSlot: slot,\n    unstyled,\n    isReadOnly,\n    elementType,\n    ...restProps\n  } = props;\n\n  if (colorFromProps === \"accent\") {\n    warnDeprecation(\n      \"The color 'accent' is deprecated and will be removed in a future release. Use 'success' instead.\",\n    );\n  }\n\n  const color = colorFromProps === \"accent\" ? \"success\" : colorFromProps;\n\n  /**\n   * A string child renders no element the CSS could match, so the button itself\n   * carries the marker. An explicit `Text` child is matched by `:has(.text)`.\n   */\n  const hasText = containsTextChild(children);\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.button,\n        isPending && styles.isPending,\n        isSucceeded && styles.isSucceeded,\n        isFailed && styles.isFailed,\n        size === \"s\" && styles[\"size-s\"],\n        styles[color],\n        styles[variant],\n        ariaDisabled && styles.ariaDisabled,\n        hasText && styles.hasText,\n        isSkeleton && styles.skeleton,\n        className,\n      );\n\n  useAriaAnnounceActionState(\n    isPending\n      ? \"isPending\"\n      : isSucceeded\n        ? \"isSucceeded\"\n        : isFailed\n          ? \"isFailed\"\n          : \"isIdle\",\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      className: styles.icon,\n      \"aria-hidden\": true,\n      size,\n    },\n    Text: {\n      className: styles.text,\n    },\n    Avatar: {\n      className: styles.avatar,\n    },\n    CounterBadge: {\n      className: styles.counterBadge,\n    },\n    Image: {\n      className: styles.image,\n    },\n  };\n\n  const stateIcon = isSucceeded ? (\n    <IconSucceeded size={size} className={styles.stateIcon} color=\"success\" />\n  ) : isFailed ? (\n    <IconFailed size={size} className={styles.stateIcon} color=\"danger\" />\n  ) : isPending ? (\n    <LoadingSpinner size={size} className={styles.stateIcon} />\n  ) : undefined;\n\n  const buttonContent = (\n    <>\n      <PropsContextProvider props={propsContext}>\n        <Wrap if={!unstyled}>\n          <span className={styles.content}>{children}</span>\n        </Wrap>\n      </PropsContextProvider>\n      {stateIcon}\n    </>\n  );\n\n  /* A styled button is one skeleton surface, so its content draws no skeleton\n     of its own. An unstyled button draws no surface, so its content does. */\n  const content = (\n    <Wrap if={!unstyled}>\n      <SkeletonModeReset>{buttonContent}</SkeletonModeReset>\n    </Wrap>\n  );\n\n  if (elementType === \"span\") {\n    const spanProps = filterDOMProps(restProps, { global: true });\n\n    return (\n      <span\n        {...spanProps}\n        inert={isSkeleton || undefined}\n        data-disabled={restProps.isDisabled || undefined}\n        className={\n          typeof rootClassName === \"string\" ? rootClassName : undefined\n        }\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <Aria.Button\n      className={rootClassName}\n      ref={ref}\n      slot={slot}\n      {...(isReadOnly === true ? { \"data-readonly\": true } : {})}\n      {...restProps}\n      aria-disabled={muted || undefined}\n      inert={isSkeleton || undefined}\n    >\n      {content}\n    </Aria.Button>\n  );\n});\n\nexport default Button;\n"],"mappings":"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"}

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

@@ -24,6 +24,7 @@ var plain = "flow--button--plain";
 var soft = "flow--button--soft";
 var avatar = "flow--button--avatar";
 var image = "flow--button--image";
+var skeleton = "flow--button--skeleton";
 var Button_module_default = {
 	button,
 	outline,
@@ -51,9 +52,12 @@ var Button_module_default = {
 	plain,
 	soft,
 	avatar,
-	image
+	image,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--button--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--button--skeleton-text-shimmer"
 };
 //#endregion
-export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, hasText, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, soft, solid, stateIcon, success, text };
+export { ariaDisabled, avatar, button, content, counterBadge, danger, dark, Button_module_default as default, hasText, icon, image, isFailed, isPending, isSucceeded, light, outline, plain, primary, secondary, skeleton, soft, solid, stateIcon, success, text };
 
 //# sourceMappingURL=Button.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n\n.button {\n  position: relative;\n  font-family: Inter, sans-serif;\n  font-size: var(--font-size-text--m);\n  font-weight: bold;\n  line-height: var(--line-height);\n  border: none;\n  border-radius: var(--button--corner-radius);\n  padding-block: var(--button--padding-y);\n  padding-inline: var(--button--padding-x);\n  transition-property: color, background-color, transform;\n  transition-duration:\n    var(--transition--duration--default), var(--transition--duration--default),\n    var(--transition--duration--fast);\n  transition-timing-function: ease, ease, ease-out;\n  max-width: 100%;\n  display: grid;\n  align-items: center;\n  grid-template-areas: \"content\";\n  width: fit-content;\n\n  &:where(.outline) {\n    border-width: var(--button--border-width);\n    border-style: var(--button--border-style);\n    padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n    padding-inline: calc(\n      var(--button--padding-x) - var(--button--border-width)\n    );\n  }\n\n  @include focus.focus;\n\n  @extend .primary;\n  @extend .solid;\n\n  /* Elements */\n  .content {\n    display: flex;\n    column-gap: var(--button--spacing);\n    align-items: center;\n    justify-content: center;\n    text-align: start;\n    text-wrap-style: pretty;\n\n    /* Fade the label out when a state icon (pending/success/fail) takes over. */\n    transition-property: opacity;\n    transition-duration: var(--transition--duration--fast);\n  }\n\n  .content,\n  .stateIcon {\n    grid-area: content;\n  }\n\n  .stateIcon {\n    justify-self: center;\n  }\n\n  &:where(:has(.icon):not(:has(.text), .hasText)) {\n    padding: var(--button--padding-icon-only);\n\n    &:where(.outline) {\n      padding: calc(\n        var(--button--padding-icon-only) - var(--button--border-width)\n      );\n    }\n  }\n\n  .counterBadge {\n    position: absolute;\n    top: calc(var(--size-px--xxs) * -1);\n    inset-inline-end: calc(var(--size-px--xxs) * -1);\n  }\n\n  /* States */\n\n  /* Subtle tactile press feedback: a slight inward scale while pressed.\n     A muted button ignores the press, so it does not scale. Overlay triggers\n     keep data-pressed while their overlay is open, so an expanded trigger is\n     excluded. */\n  &[data-pressed]:where(\n      :not([data-readonly], [aria-disabled=\"true\"], [aria-expanded=\"true\"])\n    ) {\n    transform: scale(0.97);\n  }\n\n  &.isPending,\n  &.isFailed,\n  &.isSucceeded {\n    .content {\n      opacity: 0;\n    }\n  }\n\n  &.isPending {\n    .stateIcon {\n      color: var(--button--pending-icon-color);\n    }\n  }\n\n  /* Success/failure icon pops in when it replaces the label. The pending\n     spinner is left alone — it has its own animation. */\n  &.isSucceeded,\n  &.isFailed {\n    .stateIcon {\n      animation: state-icon-pop var(--transition--duration--default)\n        cubic-bezier(0.34, 1.35, 0.5, 1);\n    }\n  }\n\n  /* Size */\n\n  &:where(.size-s) {\n    font-size: var(--button--font-size-s);\n    line-height: var(--button--line-height-s);\n    padding-block: var(--button--padding-s-y);\n    padding-inline: var(--button--padding-s-x);\n    column-gap: var(--button--spacing-s);\n    border-radius: var(--button--corner-radius-s);\n\n    &:where(.outline) {\n      padding-block: calc(\n        var(--button--padding-s-y) - var(--button--border-width)\n      );\n      padding-inline: calc(\n        var(--button--padding-s-x) - var(--button--border-width)\n      );\n    }\n\n    &:where(:has(.icon):not(:has(.text), .hasText)) {\n      padding: var(--button--padding-s-icon-only);\n\n      &:where(.outline) {\n        padding: calc(\n          var(--button--padding-s-icon-only) - var(--button--border-width)\n        );\n      }\n    }\n\n    .content {\n      column-gap: var(--button--spacing-s);\n    }\n  }\n\n  /* Variants */\n\n  @mixin variant($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      background-color: var(\n        --button--#{$color}-#{$variant}-background-color--default\n      );\n      color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n      &:hover:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--hover\n        );\n      }\n\n      &[data-pressed]:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--pressed\n        );\n      }\n\n      &[disabled],\n      &[data-disabled],\n      &.ariaDisabled,\n      &.isPending,\n      &.isFailed,\n      &.isSucceeded {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--disabled\n        );\n        color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n      }\n    }\n  }\n\n  @include variant(primary, solid);\n  @include variant(success, solid);\n  @include variant(danger, solid);\n  @include variant(secondary, solid);\n  @include variant(dark, solid);\n  @include variant(light, solid);\n  @include variant(dark-static, solid);\n  @include variant(light-static, solid);\n  @include variant(primary, plain);\n  @include variant(success, plain);\n  @include variant(danger, plain);\n  @include variant(secondary, plain);\n  @include variant(dark, plain);\n  @include variant(light, plain);\n  @include variant(dark-static, plain);\n  @include variant(light-static, plain);\n  @include variant(primary, soft);\n  @include variant(success, soft);\n  @include variant(danger, soft);\n  @include variant(secondary, soft);\n  @include variant(dark, soft);\n  @include variant(light, soft);\n  @include variant(dark-static, soft);\n  @include variant(light-static, soft);\n  @include variant(primary, outline);\n  @include variant(success, outline);\n  @include variant(danger, outline);\n  @include variant(secondary, outline);\n  @include variant(dark, outline);\n  @include variant(light, outline);\n  @include variant(dark-static, outline);\n  @include variant(light-static, outline);\n\n  /* Outline */\n\n  @mixin outline($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      &.outline {\n        border-color: var(\n          --button--#{$color}-#{$variant}-border-color--default\n        );\n\n        &[disabled],\n        &[data-disabled],\n        &.ariaDisabled,\n        &.isPending,\n        &.isFailed {\n          border-color: var(\n            --button--#{$color}-#{$variant}-border-color--disabled\n          );\n        }\n      }\n    }\n  }\n\n  @include outline(primary, outline);\n  @include outline(success, outline);\n  @include outline(danger, outline);\n  @include outline(secondary, outline);\n  @include outline(dark, outline);\n  @include outline(light, outline);\n  @include outline(dark-static, outline);\n  @include outline(light-static, outline);\n  @include avatarButton.avatarButton();\n\n  &:has(.image) {\n    padding: 0;\n    background: none;\n    height: fit-content;\n\n    &:hover:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--hover);\n      filter: brightness(var(--image-button--brightness--hover));\n    }\n\n    &[data-pressed]:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--pressed);\n      filter: brightness(var(--image-button--brightness--pressed));\n    }\n\n    .image {\n      width: 100%;\n    }\n  }\n}\n\n@keyframes state-icon-pop {\n  from {\n    transform: scale(0.6);\n    opacity: 0;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.mjs","names":[],"sources":["../../../../../../../src/components/Button/Button.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/avatarButton\";\n@use \"@/styles/mixins/skeleton\";\n\n.button {\n  position: relative;\n  font-family: Inter, sans-serif;\n  font-size: var(--font-size-text--m);\n  font-weight: bold;\n  line-height: var(--line-height);\n  border: none;\n  border-radius: var(--button--corner-radius);\n  padding-block: var(--button--padding-y);\n  padding-inline: var(--button--padding-x);\n  transition-property: color, background-color, transform;\n  transition-duration:\n    var(--transition--duration--default), var(--transition--duration--default),\n    var(--transition--duration--fast);\n  transition-timing-function: ease, ease, ease-out;\n  max-width: 100%;\n  display: grid;\n  align-items: center;\n  grid-template-areas: \"content\";\n  width: fit-content;\n\n  &:where(.outline) {\n    border-width: var(--button--border-width);\n    border-style: var(--button--border-style);\n    padding-block: calc(var(--button--padding-y) - var(--button--border-width));\n    padding-inline: calc(\n      var(--button--padding-x) - var(--button--border-width)\n    );\n  }\n\n  @include focus.focus;\n\n  @extend .primary;\n  @extend .solid;\n\n  /* Elements */\n  .content {\n    display: flex;\n    column-gap: var(--button--spacing);\n    align-items: center;\n    justify-content: center;\n    text-align: start;\n    text-wrap-style: pretty;\n\n    /* Fade the label out when a state icon (pending/success/fail) takes over. */\n    transition-property: opacity;\n    transition-duration: var(--transition--duration--fast);\n  }\n\n  .content,\n  .stateIcon {\n    grid-area: content;\n  }\n\n  .stateIcon {\n    justify-self: center;\n  }\n\n  &:where(:has(.icon):not(:has(.text), .hasText)) {\n    padding: var(--button--padding-icon-only);\n\n    &:where(.outline) {\n      padding: calc(\n        var(--button--padding-icon-only) - var(--button--border-width)\n      );\n    }\n  }\n\n  .counterBadge {\n    position: absolute;\n    top: calc(var(--size-px--xxs) * -1);\n    inset-inline-end: calc(var(--size-px--xxs) * -1);\n  }\n\n  /* States */\n\n  /* Subtle tactile press feedback: a slight inward scale while pressed.\n     A muted button ignores the press, so it does not scale. Overlay triggers\n     keep data-pressed while their overlay is open, so an expanded trigger is\n     excluded. */\n  &[data-pressed]:where(\n      :not([data-readonly], [aria-disabled=\"true\"], [aria-expanded=\"true\"])\n    ) {\n    transform: scale(0.97);\n  }\n\n  &.isPending,\n  &.isFailed,\n  &.isSucceeded {\n    .content {\n      opacity: 0;\n    }\n  }\n\n  &.isPending {\n    .stateIcon {\n      color: var(--button--pending-icon-color);\n    }\n  }\n\n  /* Success/failure icon pops in when it replaces the label. The pending\n     spinner is left alone — it has its own animation. */\n  &.isSucceeded,\n  &.isFailed {\n    .stateIcon {\n      animation: state-icon-pop var(--transition--duration--default)\n        cubic-bezier(0.34, 1.35, 0.5, 1);\n    }\n  }\n\n  /* Size */\n\n  &:where(.size-s) {\n    font-size: var(--button--font-size-s);\n    line-height: var(--button--line-height-s);\n    padding-block: var(--button--padding-s-y);\n    padding-inline: var(--button--padding-s-x);\n    column-gap: var(--button--spacing-s);\n    border-radius: var(--button--corner-radius-s);\n\n    &:where(.outline) {\n      padding-block: calc(\n        var(--button--padding-s-y) - var(--button--border-width)\n      );\n      padding-inline: calc(\n        var(--button--padding-s-x) - var(--button--border-width)\n      );\n    }\n\n    &:where(:has(.icon):not(:has(.text), .hasText)) {\n      padding: var(--button--padding-s-icon-only);\n\n      &:where(.outline) {\n        padding: calc(\n          var(--button--padding-s-icon-only) - var(--button--border-width)\n        );\n      }\n    }\n\n    .content {\n      column-gap: var(--button--spacing-s);\n    }\n  }\n\n  /* Variants */\n\n  @mixin variant($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      background-color: var(\n        --button--#{$color}-#{$variant}-background-color--default\n      );\n      color: var(--button--#{$color}-#{$variant}-content-color--default);\n\n      &:hover:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--hover\n        );\n      }\n\n      &[data-pressed]:where(:not([data-readonly])) {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--pressed\n        );\n      }\n\n      &[disabled],\n      &[data-disabled],\n      &.ariaDisabled,\n      &.isPending,\n      &.isFailed,\n      &.isSucceeded {\n        background-color: var(\n          --button--#{$color}-#{$variant}-background-color--disabled\n        );\n        color: var(--button--#{$color}-#{$variant}-content-color--disabled);\n      }\n    }\n  }\n\n  @include variant(primary, solid);\n  @include variant(success, solid);\n  @include variant(danger, solid);\n  @include variant(secondary, solid);\n  @include variant(dark, solid);\n  @include variant(light, solid);\n  @include variant(dark-static, solid);\n  @include variant(light-static, solid);\n  @include variant(primary, plain);\n  @include variant(success, plain);\n  @include variant(danger, plain);\n  @include variant(secondary, plain);\n  @include variant(dark, plain);\n  @include variant(light, plain);\n  @include variant(dark-static, plain);\n  @include variant(light-static, plain);\n  @include variant(primary, soft);\n  @include variant(success, soft);\n  @include variant(danger, soft);\n  @include variant(secondary, soft);\n  @include variant(dark, soft);\n  @include variant(light, soft);\n  @include variant(dark-static, soft);\n  @include variant(light-static, soft);\n  @include variant(primary, outline);\n  @include variant(success, outline);\n  @include variant(danger, outline);\n  @include variant(secondary, outline);\n  @include variant(dark, outline);\n  @include variant(light, outline);\n  @include variant(dark-static, outline);\n  @include variant(light-static, outline);\n\n  /* Outline */\n\n  @mixin outline($color, $variant) {\n    &:where(.#{$color}.#{$variant}) {\n      &.outline {\n        border-color: var(\n          --button--#{$color}-#{$variant}-border-color--default\n        );\n\n        &[disabled],\n        &[data-disabled],\n        &.ariaDisabled,\n        &.isPending,\n        &.isFailed {\n          border-color: var(\n            --button--#{$color}-#{$variant}-border-color--disabled\n          );\n        }\n      }\n    }\n  }\n\n  @include outline(primary, outline);\n  @include outline(success, outline);\n  @include outline(danger, outline);\n  @include outline(secondary, outline);\n  @include outline(dark, outline);\n  @include outline(light, outline);\n  @include outline(dark-static, outline);\n  @include outline(light-static, outline);\n  @include avatarButton.avatarButton();\n\n  &:has(.image) {\n    padding: 0;\n    background: none;\n    height: fit-content;\n\n    &:hover:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--hover);\n      filter: brightness(var(--image-button--brightness--hover));\n    }\n\n    &[data-pressed]:where(:not([data-readonly])) .image {\n      background: var(--button--dark-plain-background-color--pressed);\n      filter: brightness(var(--image-button--brightness--pressed));\n    }\n\n    .image {\n      width: 100%;\n    }\n  }\n\n  /* SkeletonMode — after the variants, so the surface wins over their colors */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: var(--button--corner-radius);\n\n    &:where(.size-s) {\n      --skeleton-radius: var(--button--corner-radius-s);\n    }\n\n    &:where(:has(.avatar)) {\n      --skeleton-radius: var(--corner-radius--round);\n    }\n  }\n}\n\n@include skeleton.keyframes;\n\n@keyframes state-icon-pop {\n  from {\n    transform: scale(0.6);\n    opacity: 0;\n  }\n\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n"],"mappings":""}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import CounterBadge_module_default from "./CounterBadge.module.mjs";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
@@ -8,12 +9,14 @@ import { jsx } from "react/jsx-runtime";
 /** @flr-generate all */
 var CounterBadge = flowComponent("CounterBadge", (props) => {
 	const { className, count, ref, ...rest } = props;
-	const rootClassName = clsx(CounterBadge_module_default.counterBadge, className);
+	const isSkeleton = useSkeletonMode();
+	const rootClassName = clsx(CounterBadge_module_default.counterBadge, isSkeleton && CounterBadge_module_default.skeleton, className);
 	return /* @__PURE__ */ jsx("span", {
 		className: rootClassName,
 		...rest,
 		"aria-hidden": true,
 		ref,
+		inert: isSkeleton || void 0,
 		children: count && count > 99 ? "99+" : count
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.mjs","names":["styles"],"sources":["../../../../../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import type { PropsWithElementType } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CounterBadge.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CounterBadgeProps\n  extends PropsWithElementType<\"span\">, FlowComponentProps {\n  /** The number displayed inside the badge. */\n  count?: number;\n}\n\n/** @flr-generate all */\nexport const CounterBadge = flowComponent(\"CounterBadge\", (props) => {\n  const { className, count, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.counterBadge, className);\n\n  return (\n    <span className={rootClassName} {...rest} aria-hidden ref={ref}>\n      {count && count > 99 ? \"99+\" : count}\n    </span>\n  );\n});\n\nexport default CounterBadge;\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,WAAW,OAAO,KAAK,GAAG,SAAS;CAE3C,MAAM,gBAAgB,KAAKA,4BAAO,cAAc,SAAS;CAEzD,OACE,oBAAC,QAAD;EAAM,WAAW;EAAe,GAAI;EAAM,eAAA;EAAiB;EACxD,UAAA,SAAS,QAAQ,KAAK,QAAQ;CAC3B,CAAA;AAEV,CAAC"}
+{"version":3,"file":"CounterBadge.mjs","names":["styles"],"sources":["../../../../../../../src/components/CounterBadge/CounterBadge.tsx"],"sourcesContent":["import type { PropsWithElementType } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./CounterBadge.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useSkeletonMode } from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface CounterBadgeProps\n  extends PropsWithElementType<\"span\">, FlowComponentProps {\n  /** The number displayed inside the badge. */\n  count?: number;\n}\n\n/** @flr-generate all */\nexport const CounterBadge = flowComponent(\"CounterBadge\", (props) => {\n  const { className, count, ref, ...rest } = props;\n\n  const isSkeleton = useSkeletonMode();\n\n  const rootClassName = clsx(\n    styles.counterBadge,\n    isSkeleton && styles.skeleton,\n    className,\n  );\n\n  return (\n    <span\n      className={rootClassName}\n      {...rest}\n      aria-hidden\n      ref={ref}\n      inert={isSkeleton || undefined}\n    >\n      {count && count > 99 ? \"99+\" : count}\n    </span>\n  );\n});\n\nexport default CounterBadge;\n"],"mappings":";;;;;;;;;AAcA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,WAAW,OAAO,KAAK,GAAG,SAAS;CAE3C,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,4BAAO,cACP,cAAcA,4BAAO,UACrB,SACF;CAEA,OACE,oBAAC,QAAD;EACE,WAAW;EACX,GAAI;EACJ,eAAA;EACK;EACL,OAAO,cAAc,KAAA;EAEpB,UAAA,SAAS,QAAQ,KAAK,QAAQ;CAC3B,CAAA;AAEV,CAAC"}

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

@@ -2,8 +2,14 @@
 /* */
 //#region src/components/CounterBadge/CounterBadge.module.scss
 var counterBadge = "flow--counter-badge";
-var CounterBadge_module_default = { counterBadge };
+var skeleton = "flow--counter-badge--skeleton";
+var CounterBadge_module_default = {
+	counterBadge,
+	skeleton,
+	"skeleton-surface-shimmer": "flow--counter-badge--skeleton-surface-shimmer",
+	"skeleton-text-shimmer": "flow--counter-badge--skeleton-text-shimmer"
+};
 //#endregion
-export { counterBadge, CounterBadge_module_default as default };
+export { counterBadge, CounterBadge_module_default as default, skeleton };
 
 //# sourceMappingURL=CounterBadge.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CounterBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/CounterBadge/CounterBadge.module.scss"],"sourcesContent":[".counterBadge {\n  font-size: var(--counter-badge--font-size);\n  font-weight: var(--counter-badge--font-weight);\n  line-height: 1;\n  color: var(--counter-badge--content-color);\n  background-color: var(--counter-badge--background-color);\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--counter-badge--height);\n  border-radius: calc(var(--counter-badge--height) / 2);\n  border-width: var(--counter-badge--border-width);\n  border-style: var(--counter-badge--border-style);\n  border-color: var(--counter-badge--border-color);\n  padding-inline: var(--counter-badge--padding-inline);\n\n  &:not(:empty) {\n    min-width: var(--counter-badge--height);\n  }\n\n  &:empty {\n    padding: 0;\n    height: var(--counter-badge--height-empty);\n    width: var(--counter-badge--height-empty);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CounterBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/CounterBadge/CounterBadge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.counterBadge {\n  font-size: var(--counter-badge--font-size);\n  font-weight: var(--counter-badge--font-weight);\n  line-height: 1;\n  color: var(--counter-badge--content-color);\n  background-color: var(--counter-badge--background-color);\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: var(--counter-badge--height);\n  border-radius: calc(var(--counter-badge--height) / 2);\n  border-width: var(--counter-badge--border-width);\n  border-style: var(--counter-badge--border-style);\n  border-color: var(--counter-badge--border-color);\n  padding-inline: var(--counter-badge--padding-inline);\n\n  &:not(:empty) {\n    min-width: var(--counter-badge--height);\n  }\n\n  &:empty {\n    padding: 0;\n    height: var(--counter-badge--height-empty);\n    width: var(--counter-badge--height-empty);\n  }\n\n  /* SkeletonMode */\n\n  &.skeleton {\n    @include skeleton.shape;\n\n    --skeleton-radius: calc(var(--counter-badge--height) / 2);\n  }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}

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

@@ -2,9 +2,9 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { styleClassname } from "../../lib/scss/selectors.mjs";
-import { useSkeletonMode } from "../SkeletonMode/skeletonModeContext.mjs";
 import { SkeletonTextContent } from "../SkeletonMode/components/SkeletonTextContent/SkeletonTextContent.mjs";
 import Heading_module_default from "./Heading.module.mjs";
 import clsx from "clsx";