@cloudscape-design/components-themeable 3.0.1299 → 3.0.1301

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -548,6 +548,8 @@
     --color-icon-action-card-hover-6f6epc:var(--color-primary-900-fp8i41);
     --color-icon-action-card-active-lvras4:var(--color-primary-900-fp8i41);
     --color-icon-action-card-disabled-pby6he:var(--color-neutral-400-nr06g4);
+    --color-background-skeleton-ggsbkh:var(--color-neutral-250-hdfqdx);
+    --color-background-skeleton-wave-huwveo:var(--color-neutral-150-8fqber);
     --font-button-letter-spacing-9h7rbb:0.25px;
     --font-chart-detail-size-drm2a6:var(--font-size-body-m-vv54cm);
     --font-display-label-weight-ise9n2:400;
@@ -672,6 +674,7 @@
     --border-width-action-card-hover-v5f1fk:1px;
     --border-width-action-card-active-qw9sq5:1px;
     --border-width-action-card-disabled-8qg2x7:1px;
+    --border-radius-skeleton-r8data:8px;
     --motion-duration-extra-slow-j8l6m4:270ms;
     --motion-duration-fast-okdxjh:90ms;
     --motion-duration-moderate-24bai8:135ms;
@@ -1129,6 +1132,8 @@
       --color-icon-action-card-hover-6f6epc:var(--color-primary-300-jwvz31);
       --color-icon-action-card-active-lvras4:var(--color-primary-300-jwvz31);
       --color-icon-action-card-disabled-pby6he:var(--color-neutral-600-boivn8);
+      --color-background-skeleton-ggsbkh:var(--color-neutral-750-gjawa6);
+      --color-background-skeleton-wave-huwveo:var(--color-neutral-700-heh17v);
       --shadow-container-3fh0j3:0 1px 1px 0 rgba(0, 0, 0, 0.3), 1px 1px 1px 0 rgba(0, 0, 0, 0.3), -1px 1px 1px 0 rgba(0, 0, 0, 0.3);
       --shadow-dropup-44quix:0 -1px 1px 0 rgba(0, 0, 0, 0.3), 1px -1px 1px 0 rgba(0, 0, 0, 0.3), -1px -1px 1px 0 rgba(0, 0, 0, 0.3);
       --shadow-split-bottom-0ncj9i:0 -2px 1px -1px rgba(0, 0, 0, 0.3), 0 -1px 1px -1px rgba(0, 0, 0, 0.3);
@@ -1419,6 +1424,8 @@
     --color-icon-action-card-hover-6f6epc:var(--color-primary-300-jwvz31);
     --color-icon-action-card-active-lvras4:var(--color-primary-300-jwvz31);
     --color-icon-action-card-disabled-pby6he:var(--color-neutral-600-boivn8);
+    --color-background-skeleton-ggsbkh:var(--color-neutral-750-gjawa6);
+    --color-background-skeleton-wave-huwveo:var(--color-neutral-700-heh17v);
     --color-text-direction-button-disabled-596cgx:var(--color-text-interactive-disabled-xwt2jl);
     --color-background-code-editor-gutter-active-line-error-oqzpvs:var(--color-text-status-error-aknuvu);
     --color-background-code-editor-loading-nj9xm5:var(--color-background-code-editor-status-bar-hv1hb6);
@@ -2129,6 +2136,7 @@
     --color-text-action-card-disabled-3cdrhk:var(--color-neutral-500-h8gwav);
     --color-icon-action-card-default-g1tv20:var(--color-primary-600-be1v6a);
     --color-icon-action-card-disabled-pby6he:var(--color-neutral-400-nr06g4);
+    --color-background-skeleton-ggsbkh:var(--color-neutral-250-hdfqdx);
     --font-family-display-kvzztp:var(--font-family-base-8x5ngf);
     --font-family-heading-gnchto:var(--font-family-base-8x5ngf);
     --border-radius-card-default-45b7vy:var(--border-radius-container-l30zxy);
@@ -2309,6 +2317,7 @@
       --color-background-action-card-disabled-f0sl41:var(--color-neutral-850-m3u7h5);
       --color-icon-action-card-default-g1tv20:var(--color-primary-400-i8y8uk);
       --color-icon-action-card-disabled-pby6he:var(--color-neutral-600-boivn8);
+      --color-background-skeleton-ggsbkh:var(--color-neutral-750-gjawa6);
       --shadow-container-3fh0j3:0px 1px 8px 2px rgba(0, 7, 22, 0.6);
       --shadow-container-active-hawm65:0px 1px 1px 1px #192534, 0px 6px 36px #00040c;
       --shadow-dropdown-skxpuu:0px 4px 20px 1px rgba(0, 4, 12, 1);
@@ -2645,6 +2654,7 @@
     --color-background-action-card-disabled-f0sl41:var(--color-neutral-850-m3u7h5);
     --color-icon-action-card-default-g1tv20:var(--color-primary-400-i8y8uk);
     --color-icon-action-card-disabled-pby6he:var(--color-neutral-600-boivn8);
+    --color-background-skeleton-ggsbkh:var(--color-neutral-750-gjawa6);
     --color-background-button-primary-default-3w82vy:var(--color-border-button-normal-default-5aez2l);
     --color-background-button-primary-hover-o7mzaq:var(--color-border-button-normal-hover-3y34o0);
     --color-text-direction-button-disabled-596cgx:var(--color-text-interactive-disabled-xwt2jl);
@@ -2911,6 +2921,8 @@
     --color-icon-action-card-hover-6f6epc:var(--color-primary-300-jwvz31);
     --color-icon-action-card-active-lvras4:var(--color-primary-300-jwvz31);
     --color-icon-action-card-disabled-pby6he:var(--color-neutral-600-boivn8);
+    --color-background-skeleton-ggsbkh:var(--color-neutral-750-gjawa6);
+    --color-background-skeleton-wave-huwveo:var(--color-neutral-700-heh17v);
     --shadow-container-3fh0j3:0px 1px 8px 2px rgba(0, 7, 22, 0.6);
     --shadow-container-active-hawm65:0px 1px 1px 1px #192534, 0px 6px 36px #00040c;
     --shadow-dropdown-skxpuu:0px 4px 20px 1px rgba(0, 4, 12, 1);
@@ -3407,6 +3419,8 @@
     --color-icon-action-card-hover-6f6epc:var(--color-primary-300-jwvz31);
     --color-icon-action-card-active-lvras4:var(--color-primary-300-jwvz31);
     --color-icon-action-card-disabled-pby6he:var(--color-neutral-600-boivn8);
+    --color-background-skeleton-ggsbkh:var(--color-neutral-750-gjawa6);
+    --color-background-skeleton-wave-huwveo:var(--color-neutral-700-heh17v);
     --color-background-button-primary-default-3w82vy:var(--color-border-button-normal-default-5aez2l);
     --color-background-button-primary-hover-o7mzaq:var(--color-border-button-normal-hover-3y34o0);
     --color-text-direction-button-disabled-596cgx:var(--color-text-interactive-disabled-xwt2jl);
@@ -3663,5 +3677,5 @@
   }
 }
 :root {
-  --awsui-version-info-6f1df813: true;
+  --awsui-version-info-be984ac7: true;
 }

package/lib/internal/template/internal/components/focus-lock/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAO7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAyED,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAQ7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AA0ED,wBAA2C"}

package/lib/internal/template/internal/components/focus-lock/index.js

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import TabTrap from '../tab-trap/index';
 import { getFirstFocusable, getLastFocusable } from './utils';
@@ -56,10 +57,11 @@ function FocusLock({ className, disabled, autoFocus, restoreFocus, children }, r
     }, [restoreFocus]);
     useImperativeHandle(ref, () => ({ focusFirst }));
     const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);
+    const isFocusInside = (event) => nodeBelongs(containerRef.current, event.relatedTarget);
     return (React.createElement(React.Fragment, null,
-        React.createElement(TabTrap, { disabled: disabled, focusNextCallback: focusLast }),
+        React.createElement(TabTrap, { disabled: disabled, focusNextCallback: event => (isFocusInside(event) ? focusLast() : focusFirst()) }),
         React.createElement("div", { className: className, ref: mergedRef }, children),
-        React.createElement(TabTrap, { disabled: disabled, focusNextCallback: focusFirst })));
+        React.createElement(TabTrap, { disabled: disabled, focusNextCallback: event => (isFocusInside(event) ? focusFirst() : focusLast()) })));
 }
 export default React.forwardRef(FocusLock);
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/focus-lock/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n  className?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n  /**\n   * Focuses the first element in the component.\n   */\n  focusFirst(): void;\n}\n\nfunction FocusLock(\n  { className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,\n  ref: React.Ref<FocusLockRef>\n) {\n  const restoreFocusTargetRef = useRef<HTMLOrSVGElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const focusFirst = () => {\n    if (containerRef.current) {\n      getFirstFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  const focusLast = () => {\n    if (containerRef.current) {\n      getLastFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  // Captures focus when `autoFocus` is set, and the component is mounted or\n  // `disabled` changes from true to false.\n  useEffect(() => {\n    const assignRestoreFocusTarget = () => {\n      if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) {\n        restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;\n      }\n    };\n    if (autoFocus && !disabled) {\n      assignRestoreFocusTarget();\n      focusFirst();\n    }\n  }, [autoFocus, disabled]);\n\n  // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.\n  const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);\n  useEffect(() => {\n    if (previouslyDisabled !== !!disabled) {\n      setPreviouslyDisabled(!!disabled);\n      if (restoreFocus && disabled) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    }\n  }, [previouslyDisabled, disabled, restoreFocus]);\n\n  // Restore focus if `restoreFocus` is set and the component is unmounted.\n  // Using a callback ref for this is safer than using useEffect cleanups.\n  const restoreFocusHandler = useCallback(\n    (elem: HTMLDivElement | null) => {\n      if (elem === null && restoreFocus) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    },\n    [restoreFocus]\n  );\n\n  useImperativeHandle(ref, () => ({ focusFirst }));\n  const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n  return (\n    <>\n      <TabTrap disabled={disabled} focusNextCallback={focusLast} />\n      <div className={className} ref={mergedRef}>\n        {children}\n      </div>\n      <TabTrap disabled={disabled} focusNextCallback={focusFirst} />\n    </>\n  );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n  className?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  restoreFocus?: boolean;\n  children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n  /**\n   * Focuses the first element in the component.\n   */\n  focusFirst(): void;\n}\n\nfunction FocusLock(\n  { className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,\n  ref: React.Ref<FocusLockRef>\n) {\n  const restoreFocusTargetRef = useRef<HTMLOrSVGElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const focusFirst = () => {\n    if (containerRef.current) {\n      getFirstFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  const focusLast = () => {\n    if (containerRef.current) {\n      getLastFocusable(containerRef.current)?.focus();\n    }\n  };\n\n  // Captures focus when `autoFocus` is set, and the component is mounted or\n  // `disabled` changes from true to false.\n  useEffect(() => {\n    const assignRestoreFocusTarget = () => {\n      if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) {\n        restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;\n      }\n    };\n    if (autoFocus && !disabled) {\n      assignRestoreFocusTarget();\n      focusFirst();\n    }\n  }, [autoFocus, disabled]);\n\n  // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.\n  const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);\n  useEffect(() => {\n    if (previouslyDisabled !== !!disabled) {\n      setPreviouslyDisabled(!!disabled);\n      if (restoreFocus && disabled) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    }\n  }, [previouslyDisabled, disabled, restoreFocus]);\n\n  // Restore focus if `restoreFocus` is set and the component is unmounted.\n  // Using a callback ref for this is safer than using useEffect cleanups.\n  const restoreFocusHandler = useCallback(\n    (elem: HTMLDivElement | null) => {\n      if (elem === null && restoreFocus) {\n        restoreFocusTargetRef.current?.focus();\n        restoreFocusTargetRef.current = null;\n      }\n    },\n    [restoreFocus]\n  );\n\n  useImperativeHandle(ref, () => ({ focusFirst }));\n  const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n  const isFocusInside = (event: React.FocusEvent) => nodeBelongs(containerRef.current, event.relatedTarget);\n  return (\n    <>\n      <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusLast() : focusFirst())} />\n      <div className={className} ref={mergedRef}>\n        {children}\n      </div>\n      <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusFirst() : focusLast())} />\n    </>\n  );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (6f1df813)";
-export var GIT_SHA = "6f1df813";
+export var PACKAGE_VERSION = "3.0.0 (be984ac7)";
+export var GIT_SHA = "be984ac7";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (6f1df813)",
-  "GIT_SHA": "6f1df813",
+  "PACKAGE_VERSION": "3.0.0 (be984ac7)",
+  "GIT_SHA": "be984ac7",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

package/lib/internal/template/internal/generated/styles/tokens.d.ts

@@ -588,6 +588,8 @@ export const colorIconActionCardDefault: string;
 export const colorIconActionCardHover: string;
 export const colorIconActionCardActive: string;
 export const colorIconActionCardDisabled: string;
+export const colorBackgroundSkeleton: string;
+export const colorBackgroundSkeletonWave: string;
 export const fontBoxValueLargeWeight: string;
 export const fontButtonLetterSpacing: string;
 export const fontChartDetailSize: string;
@@ -714,6 +716,7 @@ export const borderWidthActionCardDefault: string;
 export const borderWidthActionCardHover: string;
 export const borderWidthActionCardActive: string;
 export const borderWidthActionCardDisabled: string;
+export const borderRadiusSkeleton: string;
 export const motionDurationExtraFast: string;
 export const motionDurationExtraSlow: string;
 export const motionDurationFast: string;

package/lib/internal/template/internal/generated/styles/tokens.js

@@ -588,6 +588,8 @@ export var colorIconActionCardDefault = "var(--color-icon-action-card-default-an
 export var colorIconActionCardHover = "var(--color-icon-action-card-hover-qxq4pp, #002b66)";
 export var colorIconActionCardActive = "var(--color-icon-action-card-active-rhp94s, #002b66)";
 export var colorIconActionCardDisabled = "var(--color-icon-action-card-disabled-wm3kyf, #b4b4bb)";
+export var colorBackgroundSkeleton = "var(--color-background-skeleton-sjxg4n, #ebebf0)";
+export var colorBackgroundSkeletonWave = "var(--color-background-skeleton-wave-1dy97d, #f6f6f9)";
 export var fontBoxValueLargeWeight = "var(--font-box-value-large-weight-wr00sw, 700)";
 export var fontButtonLetterSpacing = "var(--font-button-letter-spacing-ufowe3, 0.005em)";
 export var fontChartDetailSize = "var(--font-chart-detail-size-9qr25q, 12px)";
@@ -714,6 +716,7 @@ export var borderWidthActionCardDefault = "var(--border-width-action-card-defaul
 export var borderWidthActionCardHover = "var(--border-width-action-card-hover-02l6fg, 1px)";
 export var borderWidthActionCardActive = "var(--border-width-action-card-active-pwtgzu, 1px)";
 export var borderWidthActionCardDisabled = "var(--border-width-action-card-disabled-rdvlbc, 1px)";
+export var borderRadiusSkeleton = "var(--border-radius-skeleton-9lkvfi, 8px)";
 export var motionDurationExtraFast = "var(--motion-duration-extra-fast-l4w48j, 45ms)";
 export var motionDurationExtraSlow = "var(--motion-duration-extra-slow-29bqym, 270ms)";
 export var motionDurationFast = "var(--motion-duration-fast-unntf6, 90ms)";

package/lib/internal/template/internal/generated/theming/index.cjs

@@ -2399,6 +2399,14 @@ module.exports.preset = {
         "light": "{colorNeutral400}",
         "dark": "{colorNeutral600}"
       },
+      "colorBackgroundSkeleton": {
+        "light": "{colorNeutral250}",
+        "dark": "{colorNeutral750}"
+      },
+      "colorBackgroundSkeletonWave": {
+        "light": "{colorNeutral150}",
+        "dark": "{colorNeutral700}"
+      },
       "fontBoxValueLargeWeight": "700",
       "fontButtonLetterSpacing": "0.005em",
       "fontChartDetailSize": "{fontSizeBodyS}",
@@ -2525,6 +2533,7 @@ module.exports.preset = {
       "borderWidthActionCardHover": "{borderWidthCard}",
       "borderWidthActionCardActive": "{borderWidthCard}",
       "borderWidthActionCardDisabled": "{borderWidthCard}",
+      "borderRadiusSkeleton": "8px",
       "motionDurationExtraFast": {
         "default": "45ms",
         "disabled": "0ms"
@@ -5033,6 +5042,14 @@ module.exports.preset = {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorPrimary50": "#f0fbff",
           "colorPrimary100": "#d1f1ff",
           "colorPrimary200": "#b8e7ff",
@@ -6502,6 +6519,14 @@ module.exports.preset = {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorPrimary50": "#f0fbff",
           "colorPrimary100": "#d1f1ff",
           "colorPrimary200": "#b8e7ff",
@@ -7898,6 +7923,14 @@ module.exports.preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -9180,6 +9213,14 @@ module.exports.preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -10463,6 +10504,14 @@ module.exports.preset = {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
+          },
           "fontExpandableHeadingSize": "14px",
           "borderDividerSectionWidth": "1px"
         }
@@ -11746,6 +11795,14 @@ module.exports.preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -12351,6 +12408,8 @@ module.exports.preset = {
       "colorIconActionCardHover": "color",
       "colorIconActionCardActive": "color",
       "colorIconActionCardDisabled": "color",
+      "colorBackgroundSkeleton": "color",
+      "colorBackgroundSkeletonWave": "color",
       "motionDurationExtraFast": "motion",
       "motionDurationExtraSlow": "motion",
       "motionDurationFast": "motion",
@@ -14208,6 +14267,8 @@ module.exports.preset = {
     "colorIconActionCardHover": "color-icon-action-card-hover",
     "colorIconActionCardActive": "color-icon-action-card-active",
     "colorIconActionCardDisabled": "color-icon-action-card-disabled",
+    "colorBackgroundSkeleton": "color-background-skeleton",
+    "colorBackgroundSkeletonWave": "color-background-skeleton-wave",
     "fontBoxValueLargeWeight": "font-box-value-large-weight",
     "fontButtonLetterSpacing": "font-button-letter-spacing",
     "fontChartDetailSize": "font-chart-detail-size",
@@ -14334,6 +14395,7 @@ module.exports.preset = {
     "borderWidthActionCardHover": "border-width-action-card-hover",
     "borderWidthActionCardActive": "border-width-action-card-active",
     "borderWidthActionCardDisabled": "border-width-action-card-disabled",
+    "borderRadiusSkeleton": "border-radius-skeleton",
     "motionDurationExtraFast": "motion-duration-extra-fast",
     "motionDurationExtraSlow": "motion-duration-extra-slow",
     "motionDurationFast": "motion-duration-fast",
@@ -15112,6 +15174,8 @@ module.exports.preset = {
     "colorIconActionCardHover": "--color-icon-action-card-hover-qxq4pp",
     "colorIconActionCardActive": "--color-icon-action-card-active-rhp94s",
     "colorIconActionCardDisabled": "--color-icon-action-card-disabled-wm3kyf",
+    "colorBackgroundSkeleton": "--color-background-skeleton-sjxg4n",
+    "colorBackgroundSkeletonWave": "--color-background-skeleton-wave-1dy97d",
     "fontBoxValueLargeWeight": "--font-box-value-large-weight-wr00sw",
     "fontButtonLetterSpacing": "--font-button-letter-spacing-ufowe3",
     "fontChartDetailSize": "--font-chart-detail-size-9qr25q",
@@ -15238,6 +15302,7 @@ module.exports.preset = {
     "borderWidthActionCardHover": "--border-width-action-card-hover-02l6fg",
     "borderWidthActionCardActive": "--border-width-action-card-active-pwtgzu",
     "borderWidthActionCardDisabled": "--border-width-action-card-disabled-rdvlbc",
+    "borderRadiusSkeleton": "--border-radius-skeleton-9lkvfi",
     "motionDurationExtraFast": "--motion-duration-extra-fast-l4w48j",
     "motionDurationExtraSlow": "--motion-duration-extra-slow-29bqym",
     "motionDurationFast": "--motion-duration-fast-unntf6",

package/lib/internal/template/internal/generated/theming/index.js

@@ -2399,6 +2399,14 @@ export var preset = {
         "light": "{colorNeutral400}",
         "dark": "{colorNeutral600}"
       },
+      "colorBackgroundSkeleton": {
+        "light": "{colorNeutral250}",
+        "dark": "{colorNeutral750}"
+      },
+      "colorBackgroundSkeletonWave": {
+        "light": "{colorNeutral150}",
+        "dark": "{colorNeutral700}"
+      },
       "fontBoxValueLargeWeight": "700",
       "fontButtonLetterSpacing": "0.005em",
       "fontChartDetailSize": "{fontSizeBodyS}",
@@ -2525,6 +2533,7 @@ export var preset = {
       "borderWidthActionCardHover": "{borderWidthCard}",
       "borderWidthActionCardActive": "{borderWidthCard}",
       "borderWidthActionCardDisabled": "{borderWidthCard}",
+      "borderRadiusSkeleton": "8px",
       "motionDurationExtraFast": {
         "default": "45ms",
         "disabled": "0ms"
@@ -5033,6 +5042,14 @@ export var preset = {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorPrimary50": "#f0fbff",
           "colorPrimary100": "#d1f1ff",
           "colorPrimary200": "#b8e7ff",
@@ -6502,6 +6519,14 @@ export var preset = {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
+          },
           "colorPrimary50": "#f0fbff",
           "colorPrimary100": "#d1f1ff",
           "colorPrimary200": "#b8e7ff",
@@ -7898,6 +7923,14 @@ export var preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -9180,6 +9213,14 @@ export var preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -10463,6 +10504,14 @@ export var preset = {
             "light": "{colorNeutral400}",
             "dark": "{colorNeutral600}"
           },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral250}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral150}",
+            "dark": "{colorNeutral700}"
+          },
           "fontExpandableHeadingSize": "14px",
           "borderDividerSectionWidth": "1px"
         }
@@ -11746,6 +11795,14 @@ export var preset = {
           "colorIconActionCardDisabled": {
             "light": "{colorNeutral600}",
             "dark": "{colorNeutral600}"
+          },
+          "colorBackgroundSkeleton": {
+            "light": "{colorNeutral750}",
+            "dark": "{colorNeutral750}"
+          },
+          "colorBackgroundSkeletonWave": {
+            "light": "{colorNeutral700}",
+            "dark": "{colorNeutral700}"
           }
         }
       },
@@ -12351,6 +12408,8 @@ export var preset = {
       "colorIconActionCardHover": "color",
       "colorIconActionCardActive": "color",
       "colorIconActionCardDisabled": "color",
+      "colorBackgroundSkeleton": "color",
+      "colorBackgroundSkeletonWave": "color",
       "motionDurationExtraFast": "motion",
       "motionDurationExtraSlow": "motion",
       "motionDurationFast": "motion",
@@ -14208,6 +14267,8 @@ export var preset = {
     "colorIconActionCardHover": "color-icon-action-card-hover",
     "colorIconActionCardActive": "color-icon-action-card-active",
     "colorIconActionCardDisabled": "color-icon-action-card-disabled",
+    "colorBackgroundSkeleton": "color-background-skeleton",
+    "colorBackgroundSkeletonWave": "color-background-skeleton-wave",
     "fontBoxValueLargeWeight": "font-box-value-large-weight",
     "fontButtonLetterSpacing": "font-button-letter-spacing",
     "fontChartDetailSize": "font-chart-detail-size",
@@ -14334,6 +14395,7 @@ export var preset = {
     "borderWidthActionCardHover": "border-width-action-card-hover",
     "borderWidthActionCardActive": "border-width-action-card-active",
     "borderWidthActionCardDisabled": "border-width-action-card-disabled",
+    "borderRadiusSkeleton": "border-radius-skeleton",
     "motionDurationExtraFast": "motion-duration-extra-fast",
     "motionDurationExtraSlow": "motion-duration-extra-slow",
     "motionDurationFast": "motion-duration-fast",
@@ -15112,6 +15174,8 @@ export var preset = {
     "colorIconActionCardHover": "--color-icon-action-card-hover-qxq4pp",
     "colorIconActionCardActive": "--color-icon-action-card-active-rhp94s",
     "colorIconActionCardDisabled": "--color-icon-action-card-disabled-wm3kyf",
+    "colorBackgroundSkeleton": "--color-background-skeleton-sjxg4n",
+    "colorBackgroundSkeletonWave": "--color-background-skeleton-wave-1dy97d",
     "fontBoxValueLargeWeight": "--font-box-value-large-weight-wr00sw",
     "fontButtonLetterSpacing": "--font-button-letter-spacing-ufowe3",
     "fontChartDetailSize": "--font-chart-detail-size-9qr25q",
@@ -15238,6 +15302,7 @@ export var preset = {
     "borderWidthActionCardHover": "--border-width-action-card-hover-02l6fg",
     "borderWidthActionCardActive": "--border-width-action-card-active-pwtgzu",
     "borderWidthActionCardDisabled": "--border-width-action-card-disabled-rdvlbc",
+    "borderRadiusSkeleton": "--border-radius-skeleton-9lkvfi",
     "motionDurationExtraFast": "--motion-duration-extra-fast-l4w48j",
     "motionDurationExtraSlow": "--motion-duration-extra-slow-29bqym",
     "motionDurationFast": "--motion-duration-fast-unntf6",

package/lib/internal/template/live-region/internal.d.ts

@@ -8,6 +8,11 @@ interface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegion
      * interrupted by other actions (like text entry in text filtering).
      */
     delay?: number;
+    /**
+     * By default, the live region will announce the message immediately on mount.
+     * This attribute prevents that.
+     */
+    preventInitialAnnouncement?: boolean;
     /**
      * Use a list of strings and/or refs to existing elements for building the
      * announcement text. If this property is set, `children` and `message` will

package/lib/internal/template/live-region/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAMtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,UAAU,uBAAwB,SAAQ,0BAA0B,EAAE,eAAe;IACnF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;;;;OAOG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAED,wBAyEG;AAcH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAU5D"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAMtE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,UAAU,uBAAwB,SAAQ,0BAA0B,EAAE,eAAe;IACnF;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,0BAA0B,CAAC,EAAE,OAAO,CAAC;IAErC;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC,CAAC;CAC5E;AAED,MAAM,WAAW,qBAAqB;IACpC;;;;;;;OAOG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AAED,wBAmFG;AAcH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAU5D"}

package/lib/internal/template/live-region/internal.js

@@ -7,7 +7,7 @@ import { getBaseProps } from '../internal/base-component';
 import { LiveRegionController } from './controller';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
-export default React.forwardRef(function InternalLiveRegion({ assertive = false, hidden = false, tagName: TagName = 'div', delay, sources, children, __internalRootRef, className, ...restProps }, ref) {
+export default React.forwardRef(function InternalLiveRegion({ assertive = false, hidden = false, tagName: TagName = 'div', delay, sources, preventInitialAnnouncement, children, __internalRootRef, className, ...restProps }, ref) {
     const baseProps = getBaseProps(restProps);
     const childrenRef = useRef(null);
     const mergedRef = useMergeRefs(childrenRef, __internalRootRef);
@@ -41,11 +41,19 @@ export default React.forwardRef(function InternalLiveRegion({ assertive = false,
             return extractTextContent(childrenRef.current);
         }
     };
+    const initialAnnouncementContent = useRef();
     // Call the controller on every render. The controller will deduplicate the
     // message against the previous announcement internally.
     useEffect(() => {
         var _a;
-        (_a = liveRegionControllerRef.current) === null || _a === void 0 ? void 0 : _a.announce({ message: getContent() });
+        const message = getContent();
+        if (initialAnnouncementContent.current === undefined) {
+            initialAnnouncementContent.current = message;
+        }
+        if (preventInitialAnnouncement && initialAnnouncementContent.current === message) {
+            return;
+        }
+        (_a = liveRegionControllerRef.current) === null || _a === void 0 ? void 0 : _a.announce({ message });
     });
     useImperativeHandle(ref, () => ({
         reannounce() {

package/lib/internal/template/live-region/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { LiveRegionController } from './controller';\nimport { LiveRegionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegionProps {\n  /**\n   * The delay between each announcement from this live region. You should\n   * leave this set to the default unless this live region is commonly\n   * interrupted by other actions (like text entry in text filtering).\n   */\n  delay?: number;\n\n  /**\n   * Use a list of strings and/or refs to existing elements for building the\n   * announcement text. If this property is set, `children` and `message` will\n   * be ignored.\n   */\n  sources?: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>;\n}\n\nexport interface InternalLiveRegionRef {\n  /**\n   * Force the live region to announce the message, even if it's the same as\n   * the previously announced message.\n   *\n   * This is useful when making status updates after a change (e.g. filtering)\n   * where the new message might be the same as the old one, but the announcement\n   * also serves to tell screen reader users that the action was performed.\n   */\n  reannounce(): void;\n}\n\nexport default React.forwardRef(function InternalLiveRegion(\n  {\n    assertive = false,\n    hidden = false,\n    tagName: TagName = 'div',\n    delay,\n    sources,\n    children,\n    __internalRootRef,\n    className,\n    ...restProps\n  }: InternalLiveRegionProps,\n  ref: React.Ref<InternalLiveRegionRef>\n) {\n  const baseProps = getBaseProps(restProps);\n  const childrenRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(childrenRef, __internalRootRef);\n\n  useEffect(() => {\n    // We have to do this because `inert` isn't properly supported until\n    // React 19 and this seems much more maintainable than version detection.\n    // `inert` is better than `hidden` because it also blocks pointer and\n    // focus events as well as hiding the contents from screen readers.\n    // https://github.com/facebook/react/issues/17157\n    if (childrenRef.current) {\n      childrenRef.current.inert = hidden;\n    }\n  }, [hidden]);\n\n  // Initialize the live region controller inside an effect. We have to do this\n  // because the controller depends on DOM elements, which aren't available on the\n  // server.\n  const liveRegionControllerRef = useRef<LiveRegionController | undefined>();\n  useEffect(() => {\n    const liveRegionController = new LiveRegionController(assertive ? 'assertive' : 'polite', delay);\n    liveRegionControllerRef.current = liveRegionController;\n    return () => {\n      liveRegionController.destroy();\n      liveRegionControllerRef.current = undefined;\n    };\n  }, [assertive, delay]);\n\n  const getContent = () => {\n    if (sources) {\n      return getSourceContent(sources);\n    }\n    if (childrenRef.current) {\n      return extractTextContent(childrenRef.current);\n    }\n  };\n\n  // Call the controller on every render. The controller will deduplicate the\n  // message against the previous announcement internally.\n  useEffect(() => {\n    liveRegionControllerRef.current?.announce({ message: getContent() });\n  });\n\n  useImperativeHandle(ref, () => ({\n    reannounce() {\n      liveRegionControllerRef.current?.announce({ message: getContent(), forceReannounce: true });\n    },\n  }));\n\n  return (\n    <TagName\n      ref={mergedRef}\n      {...baseProps}\n      className={clsx(styles.root, testUtilStyles.root, className)}\n      hidden={hidden}\n    >\n      {children}\n    </TagName>\n  );\n});\n\nconst processNode = (childNode: Node): string => {\n  if (childNode.nodeType === Node.TEXT_NODE) {\n    return childNode.textContent || '';\n  }\n\n  if (childNode.nodeType === Node.ELEMENT_NODE) {\n    return extractTextContent(childNode as HTMLElement);\n  }\n\n  return '';\n};\n\nexport function extractTextContent(node: HTMLElement): string {\n  // We use the text content of the node as the announcement text.\n  // This only extracts text content from the node including all its children which is enough for now.\n  // To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n  // ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\n  if (!node || !node?.childNodes?.length) {\n    return '';\n  }\n\n  return Array.from(node.childNodes, processNode).join(' ').replace(/\\s+/g, ' ').trim();\n}\n\nfunction getSourceContent(source: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>): string {\n  return source\n    .map(item => {\n      if (!item || typeof item === 'string') {\n        return item;\n      }\n      if (item.current) {\n        return extractTextContent(item.current);\n      }\n    })\n    .filter(Boolean)\n    .join(' ');\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/live-region/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { LiveRegionController } from './controller';\nimport { LiveRegionProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface InternalLiveRegionProps extends InternalBaseComponentProps, LiveRegionProps {\n  /**\n   * The delay between each announcement from this live region. You should\n   * leave this set to the default unless this live region is commonly\n   * interrupted by other actions (like text entry in text filtering).\n   */\n  delay?: number;\n\n  /**\n   * By default, the live region will announce the message immediately on mount.\n   * This attribute prevents that.\n   */\n  preventInitialAnnouncement?: boolean;\n\n  /**\n   * Use a list of strings and/or refs to existing elements for building the\n   * announcement text. If this property is set, `children` and `message` will\n   * be ignored.\n   */\n  sources?: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>;\n}\n\nexport interface InternalLiveRegionRef {\n  /**\n   * Force the live region to announce the message, even if it's the same as\n   * the previously announced message.\n   *\n   * This is useful when making status updates after a change (e.g. filtering)\n   * where the new message might be the same as the old one, but the announcement\n   * also serves to tell screen reader users that the action was performed.\n   */\n  reannounce(): void;\n}\n\nexport default React.forwardRef(function InternalLiveRegion(\n  {\n    assertive = false,\n    hidden = false,\n    tagName: TagName = 'div',\n    delay,\n    sources,\n    preventInitialAnnouncement,\n    children,\n    __internalRootRef,\n    className,\n    ...restProps\n  }: InternalLiveRegionProps,\n  ref: React.Ref<InternalLiveRegionRef>\n) {\n  const baseProps = getBaseProps(restProps);\n  const childrenRef = useRef<HTMLSpanElement & HTMLDivElement>(null);\n  const mergedRef = useMergeRefs(childrenRef, __internalRootRef);\n\n  useEffect(() => {\n    // We have to do this because `inert` isn't properly supported until\n    // React 19 and this seems much more maintainable than version detection.\n    // `inert` is better than `hidden` because it also blocks pointer and\n    // focus events as well as hiding the contents from screen readers.\n    // https://github.com/facebook/react/issues/17157\n    if (childrenRef.current) {\n      childrenRef.current.inert = hidden;\n    }\n  }, [hidden]);\n\n  // Initialize the live region controller inside an effect. We have to do this\n  // because the controller depends on DOM elements, which aren't available on the\n  // server.\n  const liveRegionControllerRef = useRef<LiveRegionController | undefined>();\n  useEffect(() => {\n    const liveRegionController = new LiveRegionController(assertive ? 'assertive' : 'polite', delay);\n    liveRegionControllerRef.current = liveRegionController;\n    return () => {\n      liveRegionController.destroy();\n      liveRegionControllerRef.current = undefined;\n    };\n  }, [assertive, delay]);\n\n  const getContent = () => {\n    if (sources) {\n      return getSourceContent(sources);\n    }\n    if (childrenRef.current) {\n      return extractTextContent(childrenRef.current);\n    }\n  };\n\n  const initialAnnouncementContent = useRef<string | undefined>();\n\n  // Call the controller on every render. The controller will deduplicate the\n  // message against the previous announcement internally.\n  useEffect(() => {\n    const message = getContent();\n    if (initialAnnouncementContent.current === undefined) {\n      initialAnnouncementContent.current = message;\n    }\n    if (preventInitialAnnouncement && initialAnnouncementContent.current === message) {\n      return;\n    }\n    liveRegionControllerRef.current?.announce({ message });\n  });\n\n  useImperativeHandle(ref, () => ({\n    reannounce() {\n      liveRegionControllerRef.current?.announce({ message: getContent(), forceReannounce: true });\n    },\n  }));\n\n  return (\n    <TagName\n      ref={mergedRef}\n      {...baseProps}\n      className={clsx(styles.root, testUtilStyles.root, className)}\n      hidden={hidden}\n    >\n      {children}\n    </TagName>\n  );\n});\n\nconst processNode = (childNode: Node): string => {\n  if (childNode.nodeType === Node.TEXT_NODE) {\n    return childNode.textContent || '';\n  }\n\n  if (childNode.nodeType === Node.ELEMENT_NODE) {\n    return extractTextContent(childNode as HTMLElement);\n  }\n\n  return '';\n};\n\nexport function extractTextContent(node: HTMLElement): string {\n  // We use the text content of the node as the announcement text.\n  // This only extracts text content from the node including all its children which is enough for now.\n  // To make it more powerful, it is possible to create a more sophisticated extractor with respect to\n  // ARIA properties to ignore aria-hidden nodes and read ARIA labels from the live content.\n  if (!node || !node?.childNodes?.length) {\n    return '';\n  }\n\n  return Array.from(node.childNodes, processNode).join(' ').replace(/\\s+/g, ' ').trim();\n}\n\nfunction getSourceContent(source: ReadonlyArray<string | React.RefObject<HTMLElement> | undefined>): string {\n  return source\n    .map(item => {\n      if (!item || typeof item === 'string') {\n        return item;\n      }\n      if (item.current) {\n        return extractTextContent(item.current);\n      }\n    })\n    .filter(Boolean)\n    .join(' ');\n}\n"]}

package/lib/internal/template/package.json

@@ -102,6 +102,7 @@
     "./segmented-control": "./segmented-control/index.js",
     "./select": "./select/index.js",
     "./side-navigation": "./side-navigation/index.js",
+    "./skeleton": "./skeleton/index.js",
     "./slider": "./slider/index.js",
     "./space-between": "./space-between/index.js",
     "./spinner": "./spinner/index.js",

package/lib/internal/template/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonProps } from './interfaces';
+export { SkeletonProps };
+export default function Skeleton({ variant, display, tagOverride, height, width, ...restProps }: SkeletonProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/skeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/skeleton/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,OAAmB,EACnB,OAAiB,EACjB,WAAmB,EACnB,MAAM,EACN,KAAK,EACL,GAAG,SAAS,EACb,EAAE,aAAa,eAqBf"}