@cloudscape-design/components 3.0.522 → 3.0.523

package/button-dropdown/styles.scoped.css

@@ -90,101 +90,104 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_button-dropdown_sne0l_qvwd2_93:not(#\9) {
+.awsui_button-dropdown_sne0l_swbn4_93:not(#\9) {
   display: inline-block;
 }
 
-.awsui_items-list-container_sne0l_qvwd2_97:not(#\9) {
-  padding: 0;
-  margin: 0;
-  animation: awsui_awsui-motion-fade-in-0_sne0l_qvwd2_1 500ms var(--motion-easing-show-quick-vc5zgd, ease-out);
+.awsui_items-list-container_sne0l_swbn4_97:not(#\9) {
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  animation: awsui_awsui-motion-fade-in-0_sne0l_swbn4_1 500ms var(--motion-easing-show-quick-vc5zgd, ease-out);
   animation-fill-mode: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_items-list-container_sne0l_qvwd2_97:not(#\9) {
+  .awsui_items-list-container_sne0l_swbn4_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_items-list-container_sne0l_qvwd2_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_qvwd2_97:not(#\9) {
+.awsui-motion-disabled .awsui_items-list-container_sne0l_swbn4_97:not(#\9), .awsui-mode-entering .awsui_items-list-container_sne0l_swbn4_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_rotate-up_sne0l_qvwd2_114:not(#\9) {
+.awsui_rotate-up_sne0l_swbn4_116:not(#\9) {
   transform: rotate(-180deg);
   transition: transform var(--motion-duration-rotate-180-dpvl4m, 135ms) var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-up_sne0l_qvwd2_114:not(#\9) {
+  .awsui_rotate-up_sne0l_swbn4_116:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-up_sne0l_qvwd2_114:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_qvwd2_114:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-up_sne0l_swbn4_116:not(#\9), .awsui-mode-entering .awsui_rotate-up_sne0l_swbn4_116:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_rotate-down_sne0l_qvwd2_129:not(#\9) {
+.awsui_rotate-down_sne0l_swbn4_131:not(#\9) {
   transform: rotate(0deg);
   transition: transform var(--motion-duration-rotate-180-dpvl4m, 135ms) var(--motion-easing-rotate-180-e270ko, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_rotate-down_sne0l_qvwd2_129:not(#\9) {
+  .awsui_rotate-down_sne0l_swbn4_131:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_rotate-down_sne0l_qvwd2_129:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_qvwd2_129:not(#\9) {
+.awsui-motion-disabled .awsui_rotate-down_sne0l_swbn4_131:not(#\9), .awsui-mode-entering .awsui_rotate-down_sne0l_swbn4_131:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_header_sne0l_qvwd2_144:not(#\9) {
+.awsui_header_sne0l_swbn4_146:not(#\9) {
   display: flex;
   flex-direction: column;
   list-style: none;
-  padding: var(--space-s-34lx8l, 12px) var(--space-l-t419sm, 20px);
-  border: var(--border-field-width-09w7vk, 2px) solid transparent;
-  border-bottom: var(--border-field-width-09w7vk, 2px) solid var(--color-border-dropdown-group-yakmix, #b6bec9);
+  padding-block: var(--space-s-34lx8l, 12px);
+  padding-inline: var(--space-l-t419sm, 20px);
+  border-block-start: var(--border-field-width-09w7vk, 2px) solid transparent;
+  border-block-end: var(--border-field-width-09w7vk, 2px) solid var(--color-border-dropdown-group-yakmix, #b6bec9);
+  border-inline: var(--border-field-width-09w7vk, 2px) solid transparent;
 }
 
-.awsui_title_sne0l_qvwd2_153:not(#\9),
-.awsui_description_sne0l_qvwd2_154:not(#\9) {
+.awsui_title_sne0l_swbn4_157:not(#\9),
+.awsui_description_sne0l_swbn4_158:not(#\9) {
   color: var(--color-text-dropdown-header-ga95zo, #000716);
 }
 
-.awsui_split-trigger-wrapper_sne0l_qvwd2_158:not(#\9) {
+.awsui_split-trigger-wrapper_sne0l_swbn4_162:not(#\9) {
   display: flex;
 }
-.awsui_split-trigger-wrapper_sne0l_qvwd2_158 > .awsui_trigger-item_sne0l_qvwd2_161 > button:not(#\9):focus {
+.awsui_split-trigger-wrapper_sne0l_swbn4_162 > .awsui_trigger-item_sne0l_swbn4_165 > button:not(#\9):focus {
   z-index: 1;
 }
-.awsui_split-trigger-wrapper_sne0l_qvwd2_158 > .awsui_trigger-item_sne0l_qvwd2_161:not(#\9):not(:last-child) > .awsui_trigger-button_sne0l_qvwd2_164 {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  padding-right: var(--space-m-udix3p, 16px);
-  margin-right: var(--space-xxxs-zbmxqb, 2px);
+.awsui_split-trigger-wrapper_sne0l_swbn4_162 > .awsui_trigger-item_sne0l_swbn4_165:not(#\9):not(:last-child) > .awsui_trigger-button_sne0l_swbn4_168 {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  padding-inline-end: var(--space-m-udix3p, 16px);
+  margin-inline-end: var(--space-xxxs-zbmxqb, 2px);
 }
-.awsui_split-trigger-wrapper_sne0l_qvwd2_158 > .awsui_trigger-item_sne0l_qvwd2_161:not(#\9):not(:first-child) > .awsui_trigger-button_sne0l_qvwd2_164 {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  padding-left: calc(var(--space-xs-zb16t3, 8px) - 2px);
-  padding-right: calc(var(--space-xs-zb16t3, 8px) - 2px);
+.awsui_split-trigger-wrapper_sne0l_swbn4_162 > .awsui_trigger-item_sne0l_swbn4_165:not(#\9):not(:first-child) > .awsui_trigger-button_sne0l_swbn4_168 {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  padding-inline: calc(var(--space-xs-zb16t3, 8px) - 2px);
 }
-.awsui_split-trigger-wrapper_sne0l_qvwd2_158 > .awsui_trigger-item_sne0l_qvwd2_161:not(#\9):not(:first-child).awsui_visual-refresh_sne0l_qvwd2_176 > .awsui_trigger-button_sne0l_qvwd2_164 {
-  padding-right: calc(var(--space-s-34lx8l, 12px) - 2px);
+.awsui_split-trigger-wrapper_sne0l_swbn4_162 > .awsui_trigger-item_sne0l_swbn4_165:not(#\9):not(:first-child).awsui_visual-refresh_sne0l_swbn4_179 > .awsui_trigger-button_sne0l_swbn4_168 {
+  padding-inline-end: calc(var(--space-s-34lx8l, 12px) - 2px);
 }
 
-.awsui_split-trigger_sne0l_qvwd2_158:not(#\9) {
+.awsui_split-trigger_sne0l_swbn4_162:not(#\9) {
   display: contents;
 }
 
-.awsui_dropdown-trigger_sne0l_qvwd2_184:not(#\9) {
+.awsui_dropdown-trigger_sne0l_swbn4_187:not(#\9) {
   display: contents;
 }
 
-.awsui_test-utils-button-trigger_sne0l_qvwd2_188:not(#\9) {
+.awsui_test-utils-button-trigger_sne0l_swbn4_191:not(#\9) {
   /* used in test-utils */
 }

package/button-dropdown/styles.selectors.js

@@ -2,20 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-dropdown": "awsui_button-dropdown_sne0l_qvwd2_93",
-  "items-list-container": "awsui_items-list-container_sne0l_qvwd2_97",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_qvwd2_1",
-  "rotate-up": "awsui_rotate-up_sne0l_qvwd2_114",
-  "rotate-down": "awsui_rotate-down_sne0l_qvwd2_129",
-  "header": "awsui_header_sne0l_qvwd2_144",
-  "title": "awsui_title_sne0l_qvwd2_153",
-  "description": "awsui_description_sne0l_qvwd2_154",
-  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_qvwd2_158",
-  "trigger-item": "awsui_trigger-item_sne0l_qvwd2_161",
-  "trigger-button": "awsui_trigger-button_sne0l_qvwd2_164",
-  "visual-refresh": "awsui_visual-refresh_sne0l_qvwd2_176",
-  "split-trigger": "awsui_split-trigger_sne0l_qvwd2_158",
-  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_qvwd2_184",
-  "test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_qvwd2_188"
+  "button-dropdown": "awsui_button-dropdown_sne0l_swbn4_93",
+  "items-list-container": "awsui_items-list-container_sne0l_swbn4_97",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_sne0l_swbn4_1",
+  "rotate-up": "awsui_rotate-up_sne0l_swbn4_116",
+  "rotate-down": "awsui_rotate-down_sne0l_swbn4_131",
+  "header": "awsui_header_sne0l_swbn4_146",
+  "title": "awsui_title_sne0l_swbn4_157",
+  "description": "awsui_description_sne0l_swbn4_158",
+  "split-trigger-wrapper": "awsui_split-trigger-wrapper_sne0l_swbn4_162",
+  "trigger-item": "awsui_trigger-item_sne0l_swbn4_165",
+  "trigger-button": "awsui_trigger-button_sne0l_swbn4_168",
+  "visual-refresh": "awsui_visual-refresh_sne0l_swbn4_179",
+  "split-trigger": "awsui_split-trigger_sne0l_swbn4_162",
+  "dropdown-trigger": "awsui_dropdown-trigger_sne0l_swbn4_187",
+  "test-utils-button-trigger": "awsui_test-utils-button-trigger_sne0l_swbn4_191"
 };
   

package/calendar/grid/index.js

@@ -81,7 +81,7 @@ export default function Grid({ locale, baseDate, isDateEnabled, focusedDate, foc
             }
             // Screen-reader announcement for the focused day.
             let dayAnnouncement = getDateLabel(locale, date, 'short');
-            if (isDateOnSameDay) {
+            if (isDateOnSameDay && todayAriaLabel) {
                 dayAnnouncement += '. ' + todayAriaLabel;
             }
             return (React.createElement("td", { key: `${weekIndex}:${dateIndex}`, ref: tabIndex === 0 ? focusedDateRef : undefined, tabIndex: tabIndex, "aria-current": isDateOnSameDay ? 'date' : undefined, "aria-selected": isEnabled ? isSelected : undefined, "aria-disabled": !isEnabled, 

package/calendar/grid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/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, { useMemo, useRef } from 'react';\nimport styles from '../styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DayIndex } from '../internal';\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport { getDateLabel, renderDayName } from '../utils/intl';\nimport clsx from 'clsx';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every day is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n  locale: string;\n  baseDate: Date;\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  focusedDate: Date | null;\n  focusableDate: Date | null;\n  onSelectDate: (date: Date) => void;\n  onFocusDate: (date: null | Date) => void;\n  onChangeMonth: (date: Date) => void;\n  startOfWeek: DayIndex;\n  todayAriaLabel?: string;\n  selectedDate: Date | null;\n  ariaLabelledby: string;\n}\n\nexport default function Grid({\n  locale,\n  baseDate,\n  isDateEnabled,\n  focusedDate,\n  focusableDate,\n  onSelectDate,\n  onFocusDate,\n  onChangeMonth,\n  startOfWeek,\n  todayAriaLabel,\n  selectedDate,\n  ariaLabelledby,\n}: GridProps) {\n  const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n  const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n    let updatedFocusDate;\n\n    if (focusableDate === null) {\n      return;\n    }\n\n    switch (event.keyCode) {\n      case KeyCode.space:\n      case KeyCode.enter:\n        event.preventDefault();\n        if (focusableDate) {\n          onFocusDate(null);\n          onSelectDate(focusableDate);\n        }\n        return;\n      case KeyCode.right:\n        event.preventDefault();\n        updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.left:\n        event.preventDefault();\n        updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.up:\n        event.preventDefault();\n        updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.down:\n        event.preventDefault();\n        updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);\n        break;\n      default:\n        return;\n    }\n\n    if (!isSameMonth(updatedFocusDate, baseDate)) {\n      onChangeMonth(updatedFocusDate);\n    }\n    onFocusDate(updatedFocusDate);\n  };\n\n  // The focused date changes as a feedback to keyboard navigation in the grid.\n  // Once changed, the corresponding day button needs to receive the actual focus.\n  useEffectOnUpdate(() => {\n    if (focusedDate && focusedDateRef.current) {\n      (focusedDateRef.current as HTMLDivElement).focus();\n    }\n  }, [focusedDate]);\n\n  const weeks = useMemo<Date[][]>(\n    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n    [baseDate, startOfWeek]\n  );\n  const weekdays = weeks[0].map(date => date.getDay());\n\n  return (\n    <table role=\"grid\" className={styles['calendar-grid']} aria-labelledby={ariaLabelledby}>\n      <thead>\n        <tr>\n          {weekdays.map(dayIndex => (\n            <th\n              key={dayIndex}\n              scope=\"col\"\n              className={clsx(styles['calendar-grid-cell'], styles['calendar-day-header'])}\n            >\n              <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n              <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody onKeyDown={onGridKeyDownHandler}>\n        {weeks.map((week, weekIndex) => (\n          <tr key={weekIndex} className={styles['calendar-week']}>\n            {week.map((date, dateIndex) => {\n              const isFocusable = !!focusableDate && isSameDay(date, focusableDate);\n              const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n              const isEnabled = !isDateEnabled || isDateEnabled(date);\n              const isDateOnSameDay = isSameDay(date, new Date());\n\n              // Can't be focused.\n              let tabIndex = undefined;\n              if (isFocusable && isEnabled) {\n                // Next focus target.\n                tabIndex = 0;\n              } else if (isEnabled) {\n                // Can be focused programmatically.\n                tabIndex = -1;\n              }\n\n              // Screen-reader announcement for the focused day.\n              let dayAnnouncement = getDateLabel(locale, date, 'short');\n              if (isDateOnSameDay) {\n                dayAnnouncement += '. ' + todayAriaLabel;\n              }\n\n              return (\n                <td\n                  key={`${weekIndex}:${dateIndex}`}\n                  ref={tabIndex === 0 ? focusedDateRef : undefined}\n                  tabIndex={tabIndex}\n                  aria-current={isDateOnSameDay ? 'date' : undefined}\n                  aria-selected={isEnabled ? isSelected : undefined}\n                  aria-disabled={!isEnabled}\n                  // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n                  onClick={isEnabled ? () => onSelectDate(date) : undefined}\n                  className={clsx(styles['calendar-grid-cell'], styles['calendar-day'], {\n                    [styles['calendar-day-current-month']]: isSameMonth(date, baseDate),\n                    [styles['calendar-day-enabled']]: isEnabled,\n                    [styles['calendar-day-selected']]: isSelected,\n                    [styles['calendar-day-today']]: isDateOnSameDay,\n                  })}\n                >\n                  <span className={styles['day-inner']} aria-hidden=\"true\">\n                    {date.getDate()}\n                  </span>\n                  <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["calendar/grid/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, { useMemo, useRef } from 'react';\nimport styles from '../styles.css.js';\nimport { KeyCode } from '../../internal/keycode';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { getCalendarMonth } from 'mnth';\nimport { DayIndex } from '../internal';\nimport { DatePickerProps } from '../../date-picker/interfaces';\nimport { getDateLabel, renderDayName } from '../utils/intl';\nimport clsx from 'clsx';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update.js';\nimport ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';\nimport { moveNextDay, movePrevDay, moveNextWeek, movePrevWeek } from '../utils/navigation';\n\n/**\n * Calendar grid supports two mechanisms of keyboard navigation:\n * - Native screen-reader table navigation (semantic table markup);\n * - Keyboard arrow-keys navigation (a custom key-down handler).\n *\n * The implementation largely follows the w3 example (https://www.w3.org/WAI/ARIA/apg/example-index/dialog-modal/datepicker-dialog) and shares the following issues:\n * - (table navigation) Chrome+VO - weekday is announced twice when navigating to the calendar's header;\n * - (table navigation) Safari+VO - \"dimmed\" state is announced twice;\n * - (table navigation) Firefox/Chrome+NVDA - cannot use table navigation if any cell has a focus;\n * - (keyboard navigation) Firefox+NVDA - every day is announced as \"not selected\";\n * - (keyboard navigation) Safari/Chrome+VO - weekdays are not announced;\n * - (keyboard navigation) Safari/Chrome+VO - days are not announced as interactive (clickable or selectable);\n * - (keyboard navigation) Safari/Chrome+VO - day announcements are not interruptive and can be missed if navigating fast.\n */\n\nexport interface GridProps {\n  locale: string;\n  baseDate: Date;\n  isDateEnabled: DatePickerProps.IsDateEnabledFunction;\n  focusedDate: Date | null;\n  focusableDate: Date | null;\n  onSelectDate: (date: Date) => void;\n  onFocusDate: (date: null | Date) => void;\n  onChangeMonth: (date: Date) => void;\n  startOfWeek: DayIndex;\n  todayAriaLabel?: string;\n  selectedDate: Date | null;\n  ariaLabelledby: string;\n}\n\nexport default function Grid({\n  locale,\n  baseDate,\n  isDateEnabled,\n  focusedDate,\n  focusableDate,\n  onSelectDate,\n  onFocusDate,\n  onChangeMonth,\n  startOfWeek,\n  todayAriaLabel,\n  selectedDate,\n  ariaLabelledby,\n}: GridProps) {\n  const focusedDateRef = useRef<HTMLTableCellElement>(null);\n\n  const onGridKeyDownHandler = (event: React.KeyboardEvent) => {\n    let updatedFocusDate;\n\n    if (focusableDate === null) {\n      return;\n    }\n\n    switch (event.keyCode) {\n      case KeyCode.space:\n      case KeyCode.enter:\n        event.preventDefault();\n        if (focusableDate) {\n          onFocusDate(null);\n          onSelectDate(focusableDate);\n        }\n        return;\n      case KeyCode.right:\n        event.preventDefault();\n        updatedFocusDate = moveNextDay(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.left:\n        event.preventDefault();\n        updatedFocusDate = movePrevDay(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.up:\n        event.preventDefault();\n        updatedFocusDate = movePrevWeek(focusableDate, isDateEnabled);\n        break;\n      case KeyCode.down:\n        event.preventDefault();\n        updatedFocusDate = moveNextWeek(focusableDate, isDateEnabled);\n        break;\n      default:\n        return;\n    }\n\n    if (!isSameMonth(updatedFocusDate, baseDate)) {\n      onChangeMonth(updatedFocusDate);\n    }\n    onFocusDate(updatedFocusDate);\n  };\n\n  // The focused date changes as a feedback to keyboard navigation in the grid.\n  // Once changed, the corresponding day button needs to receive the actual focus.\n  useEffectOnUpdate(() => {\n    if (focusedDate && focusedDateRef.current) {\n      (focusedDateRef.current as HTMLDivElement).focus();\n    }\n  }, [focusedDate]);\n\n  const weeks = useMemo<Date[][]>(\n    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),\n    [baseDate, startOfWeek]\n  );\n  const weekdays = weeks[0].map(date => date.getDay());\n\n  return (\n    <table role=\"grid\" className={styles['calendar-grid']} aria-labelledby={ariaLabelledby}>\n      <thead>\n        <tr>\n          {weekdays.map(dayIndex => (\n            <th\n              key={dayIndex}\n              scope=\"col\"\n              className={clsx(styles['calendar-grid-cell'], styles['calendar-day-header'])}\n            >\n              <span aria-hidden=\"true\">{renderDayName(locale, dayIndex, 'short')}</span>\n              <ScreenreaderOnly>{renderDayName(locale, dayIndex, 'long')}</ScreenreaderOnly>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody onKeyDown={onGridKeyDownHandler}>\n        {weeks.map((week, weekIndex) => (\n          <tr key={weekIndex} className={styles['calendar-week']}>\n            {week.map((date, dateIndex) => {\n              const isFocusable = !!focusableDate && isSameDay(date, focusableDate);\n              const isSelected = !!selectedDate && isSameDay(date, selectedDate);\n              const isEnabled = !isDateEnabled || isDateEnabled(date);\n              const isDateOnSameDay = isSameDay(date, new Date());\n\n              // Can't be focused.\n              let tabIndex = undefined;\n              if (isFocusable && isEnabled) {\n                // Next focus target.\n                tabIndex = 0;\n              } else if (isEnabled) {\n                // Can be focused programmatically.\n                tabIndex = -1;\n              }\n\n              // Screen-reader announcement for the focused day.\n              let dayAnnouncement = getDateLabel(locale, date, 'short');\n              if (isDateOnSameDay && todayAriaLabel) {\n                dayAnnouncement += '. ' + todayAriaLabel;\n              }\n\n              return (\n                <td\n                  key={`${weekIndex}:${dateIndex}`}\n                  ref={tabIndex === 0 ? focusedDateRef : undefined}\n                  tabIndex={tabIndex}\n                  aria-current={isDateOnSameDay ? 'date' : undefined}\n                  aria-selected={isEnabled ? isSelected : undefined}\n                  aria-disabled={!isEnabled}\n                  // Do not attach click event when the date is disabled, otherwise VO+safari announces clickable\n                  onClick={isEnabled ? () => onSelectDate(date) : undefined}\n                  className={clsx(styles['calendar-grid-cell'], styles['calendar-day'], {\n                    [styles['calendar-day-current-month']]: isSameMonth(date, baseDate),\n                    [styles['calendar-day-enabled']]: isEnabled,\n                    [styles['calendar-day-selected']]: isSelected,\n                    [styles['calendar-day-today']]: isDateOnSameDay,\n                  })}\n                >\n                  <span className={styles['day-inner']} aria-hidden=\"true\">\n                    {date.getDate()}\n                  </span>\n                  <ScreenreaderOnly>{dayAnnouncement}</ScreenreaderOnly>\n                </td>\n              );\n            })}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n"]}

package/calendar/styles.css.js

@@ -1,23 +1,23 @@
 
     import './styles.scoped.css';
     export default {
-  "calendar": "awsui_calendar_1ykar_h83rg_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_h83rg_1",
-  "root": "awsui_root_1ykar_h83rg_124",
-  "calendar-inner": "awsui_calendar-inner_1ykar_h83rg_165",
-  "calendar-header": "awsui_calendar-header_1ykar_h83rg_168",
-  "calendar-header-month": "awsui_calendar-header-month_1ykar_h83rg_173",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_h83rg_180",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_h83rg_183",
-  "calendar-grid": "awsui_calendar-grid_1ykar_h83rg_186",
-  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_h83rg_190",
-  "calendar-day-header": "awsui_calendar-day-header_1ykar_h83rg_196",
-  "calendar-day": "awsui_calendar-day_1ykar_h83rg_196",
-  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_h83rg_213",
-  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_h83rg_220",
-  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_h83rg_227",
-  "calendar-day-today": "awsui_calendar-day-today_1ykar_h83rg_230",
-  "day-inner": "awsui_day-inner_1ykar_h83rg_245",
-  "calendar-week": "awsui_calendar-week_1ykar_h83rg_316"
+  "calendar": "awsui_calendar_1ykar_1818s_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1818s_1",
+  "root": "awsui_root_1ykar_1818s_124",
+  "calendar-inner": "awsui_calendar-inner_1ykar_1818s_165",
+  "calendar-header": "awsui_calendar-header_1ykar_1818s_169",
+  "calendar-header-month": "awsui_calendar-header-month_1ykar_1818s_174",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1818s_182",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1818s_185",
+  "calendar-grid": "awsui_calendar-grid_1ykar_1818s_188",
+  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1818s_192",
+  "calendar-day-header": "awsui_calendar-day-header_1ykar_1818s_198",
+  "calendar-day": "awsui_calendar-day_1ykar_1818s_198",
+  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1818s_218",
+  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1818s_228",
+  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_1818s_235",
+  "calendar-day-today": "awsui_calendar-day-today_1ykar_1818s_239",
+  "day-inner": "awsui_day-inner_1ykar_1818s_257",
+  "calendar-week": "awsui_calendar-week_1ykar_1818s_332"
 };
   

package/calendar/styles.scoped.css

@@ -90,11 +90,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_calendar_1ykar_h83rg_93:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_1ykar_h83rg_1 var(--motion-duration-show-quick-aq3ump, 135ms) var(--motion-easing-show-quick-vc5zgd, ease-out);
+.awsui_calendar_1ykar_1818s_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_1ykar_1818s_1 var(--motion-duration-show-quick-aq3ump, 135ms) var(--motion-easing-show-quick-vc5zgd, ease-out);
   animation-fill-mode: both;
 }
-@keyframes awsui_awsui-motion-fade-in-0_1ykar_h83rg_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1ykar_1818s_1 {
   from {
     opacity: 0;
   }
@@ -103,12 +103,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_calendar_1ykar_h83rg_93:not(#\9) {
+  .awsui_calendar_1ykar_1818s_93:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_calendar_1ykar_h83rg_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_h83rg_93:not(#\9) {
+.awsui-motion-disabled .awsui_calendar_1ykar_1818s_93:not(#\9), .awsui-mode-entering .awsui_calendar_1ykar_1818s_93:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -121,13 +121,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1ykar_h83rg_124:not(#\9) {
+.awsui_root_1ykar_1818s_124:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_calendar_1ykar_h83rg_93:not(#\9) {
+.awsui_calendar_1ykar_1818s_93:not(#\9) {
   display: block;
-  width: var(--size-calendar-grid-width-lrunz7, 238px);
+  inline-size: var(--size-calendar-grid-width-lrunz7, 238px);
   overflow: auto;
   border-collapse: separate;
   border-spacing: 0;
@@ -163,101 +163,113 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_calendar-inner_1ykar_h83rg_165:not(#\9) {
-  margin: var(--space-xs-zb16t3, 8px);
+.awsui_calendar-inner_1ykar_1818s_165:not(#\9) {
+  margin-block: var(--space-xs-zb16t3, 8px);
+  margin-inline: var(--space-xs-zb16t3, 8px);
 }
-.awsui_calendar-header_1ykar_h83rg_168:not(#\9) {
+.awsui_calendar-header_1ykar_1818s_169:not(#\9) {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.awsui_calendar-header-month_1ykar_h83rg_173:not(#\9) {
+.awsui_calendar-header-month_1ykar_1818s_174:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: 700;
   color: var(--color-text-dropdown-item-default-4o4hes, #000716);
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
-.awsui_calendar-next-month-btn_1ykar_h83rg_180:not(#\9) {
+.awsui_calendar-next-month-btn_1ykar_1818s_182:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-prev-month-btn_1ykar_h83rg_183:not(#\9) {
+.awsui_calendar-prev-month-btn_1ykar_1818s_185:not(#\9) {
   /* used for identifying element */
 }
-.awsui_calendar-grid_1ykar_h83rg_186:not(#\9) {
-  width: 100%;
+.awsui_calendar-grid_1ykar_1818s_188:not(#\9) {
+  inline-size: 100%;
   border-spacing: 0;
 }
-.awsui_calendar-grid-cell_1ykar_h83rg_190:not(#\9) {
-  width: 14.2857142857%;
+.awsui_calendar-grid-cell_1ykar_1818s_192:not(#\9) {
+  inline-size: 14.2857142857%;
   word-break: break-word;
   text-align: center;
   font-weight: unset;
 }
-.awsui_calendar-day-header_1ykar_h83rg_196:not(#\9) {
-  padding: var(--space-s-34lx8l, 12px) 0 var(--space-xxs-p8yyaw, 4px);
+.awsui_calendar-day-header_1ykar_1818s_198:not(#\9) {
+  padding-block-start: var(--space-s-34lx8l, 12px);
+  padding-block-end: var(--space-xxs-p8yyaw, 4px);
+  padding-inline: 0;
   color: var(--color-text-calendar-month-hxx5ey, #5f6b7a);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
   letter-spacing: var(--letter-spacing-body-s-z9jkwp, 0.005em);
 }
-.awsui_calendar-day_1ykar_h83rg_196:not(#\9) {
-  border-bottom: 1px solid var(--color-border-calendar-grid-u86q1u, transparent);
-  border-right: 1px solid var(--color-border-calendar-grid-u86q1u, transparent);
-  padding: var(--space-xxs-p8yyaw, 4px) 0;
+.awsui_calendar-day_1ykar_1818s_198:not(#\9) {
+  border-block-end: 1px solid var(--color-border-calendar-grid-u86q1u, transparent);
+  border-inline-end: 1px solid var(--color-border-calendar-grid-u86q1u, transparent);
+  padding-block: var(--space-xxs-p8yyaw, 4px);
+  padding-inline: 0;
   color: var(--color-text-dropdown-item-disabled-6oq3n6, #9ba7b6);
   position: relative;
 }
-.awsui_calendar-day_1ykar_h83rg_196:not(#\9):first-child {
-  border-left: 1px solid var(--color-border-calendar-grid-u86q1u, transparent);
+.awsui_calendar-day_1ykar_1818s_198:not(#\9):first-child {
+  border-inline-start: 1px solid var(--color-border-calendar-grid-u86q1u, transparent);
 }
-.awsui_calendar-day-enabled_1ykar_h83rg_213:not(#\9) {
+.awsui_calendar-day-enabled_1ykar_1818s_218:not(#\9) {
   cursor: pointer;
   color: var(--color-text-dropdown-item-secondary-jho0ju, #5f6b7a);
 }
-.awsui_calendar-day-enabled_1ykar_h83rg_213:not(#\9)::after {
-  border-radius: var(--border-radius-item-05df9h, 8px);
+.awsui_calendar-day-enabled_1ykar_1818s_218:not(#\9)::after {
+  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
+  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
+  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
+  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
-.awsui_calendar-day-enabled_1ykar_h83rg_213.awsui_calendar-day-current-month_1ykar_h83rg_220:not(#\9) {
+.awsui_calendar-day-enabled_1ykar_1818s_218.awsui_calendar-day-current-month_1ykar_1818s_228:not(#\9) {
   color: var(--color-text-dropdown-item-default-4o4hes, #000716);
 }
-.awsui_calendar-day-enabled_1ykar_h83rg_213.awsui_calendar-day-current-month_1ykar_h83rg_220:not(#\9):hover {
+.awsui_calendar-day-enabled_1ykar_1818s_218.awsui_calendar-day-current-month_1ykar_1818s_228:not(#\9):hover {
   color: var(--color-text-calendar-day-hover-azublp, #000716);
   background-color: var(--color-background-dropdown-item-hover-swsulg, #f4f4f4);
 }
-.awsui_calendar-day-enabled_1ykar_h83rg_213.awsui_calendar-day-current-month_1ykar_h83rg_220:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_h83rg_227)::after {
-  border: var(--border-item-width-yel47s, 2px) solid var(--color-border-dropdown-item-hover-461g78, #7d8998);
+.awsui_calendar-day-enabled_1ykar_1818s_218.awsui_calendar-day-current-month_1ykar_1818s_228:not(#\9):hover:not(.awsui_calendar-day-selected_1ykar_1818s_235)::after {
+  border-block: var(--border-item-width-yel47s, 2px) solid var(--color-border-dropdown-item-hover-461g78, #7d8998);
+  border-inline: var(--border-item-width-yel47s, 2px) solid var(--color-border-dropdown-item-hover-461g78, #7d8998);
 }
-.awsui_calendar-day-today_1ykar_h83rg_230:not(#\9) {
+.awsui_calendar-day-today_1ykar_1818s_239:not(#\9) {
   background-color: var(--color-background-calendar-today-gp14tm, #f4f4f4);
-  border-radius: var(--border-radius-item-05df9h, 8px);
+  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
+  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
+  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
+  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
   font-weight: 700;
 }
-.awsui_calendar-day_1ykar_h83rg_196:not(#\9)::after {
+.awsui_calendar-day_1ykar_1818s_198:not(#\9)::after {
   content: "";
   position: absolute;
   z-index: 1;
-  top: calc(-1 * var(--border-item-width-yel47s, 2px));
-  left: -1px;
-  bottom: -1px;
-  right: calc(-1 * var(--border-item-width-yel47s, 2px));
+  inset-block-start: calc(-1 * var(--border-item-width-yel47s, 2px));
+  inset-block-end: -1px;
+  inset-inline-start: -1px;
+  inset-inline-end: calc(-1 * var(--border-item-width-yel47s, 2px));
   background-color: transparent;
 }
-.awsui_calendar-day_1ykar_h83rg_196 > .awsui_day-inner_1ykar_h83rg_245:not(#\9) {
+.awsui_calendar-day_1ykar_1818s_198 > .awsui_day-inner_1ykar_1818s_257:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_calendar-day_1ykar_h83rg_196:not(#\9):focus {
+.awsui_calendar-day_1ykar_1818s_198:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_h83rg_196:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1818s_198:not(#\9):focus:focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_h83rg_196:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1818s_198:not(#\9):focus:focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-g00bgj, -5px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_h83rg_196:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1818s_198:not(#\9):focus:focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -271,23 +283,23 @@ body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_h83rg_196:not(#\9)
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-545h0w, 3px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_h83rg_196:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day_1ykar_1818s_198:not(#\9):focus:focus::before {
   z-index: 2;
 }
-.awsui_calendar-day-selected_1ykar_h83rg_227:not(#\9) {
+.awsui_calendar-day-selected_1ykar_1818s_235:not(#\9) {
   border-color: transparent;
   position: relative;
   z-index: 2;
   font-weight: 700;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_h83rg_227:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1818s_235:not(#\9):focus:focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_h83rg_227:not(#\9):focus:focus {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1818s_235:not(#\9):focus:focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-calendar-grid-focus-outline-gutter-g00bgj, -5px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_h83rg_227:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1818s_235:not(#\9):focus:focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -301,19 +313,23 @@ body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_h83rg_227
   border-end-end-radius: var(--border-radius-calendar-day-focus-ring-545h0w, 3px);
   box-shadow: 0 0 0 2px var(--color-border-calendar-grid-selected-focus-ring-thqa8y, #fbfbfb);
 }
-body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_h83rg_227:not(#\9):focus:focus::before {
+body[data-awsui-focus-visible=true] .awsui_calendar-day-selected_1ykar_1818s_235:not(#\9):focus:focus::before {
   z-index: 2;
 }
-.awsui_calendar-day-selected_1ykar_h83rg_227:not(#\9)::after {
+.awsui_calendar-day-selected_1ykar_1818s_235:not(#\9)::after {
   background-color: var(--color-background-control-checked-w517i0, #0972d3);
-  border: var(--border-item-width-yel47s, 2px) solid var(--color-background-control-checked-w517i0, #0972d3);
-  border-radius: var(--border-radius-item-05df9h, 8px);
-}
-.awsui_calendar-day-selected_1ykar_h83rg_227 > .awsui_day-inner_1ykar_h83rg_245:not(#\9) {
+  border-block: var(--border-item-width-yel47s, 2px) solid var(--color-background-control-checked-w517i0, #0972d3);
+  border-inline: var(--border-item-width-yel47s, 2px) solid var(--color-background-control-checked-w517i0, #0972d3);
+  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
+  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
+  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
+  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
+}
+.awsui_calendar-day-selected_1ykar_1818s_235 > .awsui_day-inner_1ykar_1818s_257:not(#\9) {
   z-index: 2;
   color: var(--color-background-control-default-qzruqy, #ffffff);
   position: relative;
 }
-.awsui_calendar-week_1ykar_h83rg_316:not(#\9):first-child > .awsui_calendar-day_1ykar_h83rg_196 {
-  border-top: 1px solid var(--color-border-calendar-grid-u86q1u, transparent);
+.awsui_calendar-week_1ykar_1818s_332:not(#\9):first-child > .awsui_calendar-day_1ykar_1818s_198 {
+  border-block-start: 1px solid var(--color-border-calendar-grid-u86q1u, transparent);
 }

package/calendar/styles.selectors.js

@@ -2,23 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "calendar": "awsui_calendar_1ykar_h83rg_93",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_h83rg_1",
-  "root": "awsui_root_1ykar_h83rg_124",
-  "calendar-inner": "awsui_calendar-inner_1ykar_h83rg_165",
-  "calendar-header": "awsui_calendar-header_1ykar_h83rg_168",
-  "calendar-header-month": "awsui_calendar-header-month_1ykar_h83rg_173",
-  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_h83rg_180",
-  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_h83rg_183",
-  "calendar-grid": "awsui_calendar-grid_1ykar_h83rg_186",
-  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_h83rg_190",
-  "calendar-day-header": "awsui_calendar-day-header_1ykar_h83rg_196",
-  "calendar-day": "awsui_calendar-day_1ykar_h83rg_196",
-  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_h83rg_213",
-  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_h83rg_220",
-  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_h83rg_227",
-  "calendar-day-today": "awsui_calendar-day-today_1ykar_h83rg_230",
-  "day-inner": "awsui_day-inner_1ykar_h83rg_245",
-  "calendar-week": "awsui_calendar-week_1ykar_h83rg_316"
+  "calendar": "awsui_calendar_1ykar_1818s_93",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1ykar_1818s_1",
+  "root": "awsui_root_1ykar_1818s_124",
+  "calendar-inner": "awsui_calendar-inner_1ykar_1818s_165",
+  "calendar-header": "awsui_calendar-header_1ykar_1818s_169",
+  "calendar-header-month": "awsui_calendar-header-month_1ykar_1818s_174",
+  "calendar-next-month-btn": "awsui_calendar-next-month-btn_1ykar_1818s_182",
+  "calendar-prev-month-btn": "awsui_calendar-prev-month-btn_1ykar_1818s_185",
+  "calendar-grid": "awsui_calendar-grid_1ykar_1818s_188",
+  "calendar-grid-cell": "awsui_calendar-grid-cell_1ykar_1818s_192",
+  "calendar-day-header": "awsui_calendar-day-header_1ykar_1818s_198",
+  "calendar-day": "awsui_calendar-day_1ykar_1818s_198",
+  "calendar-day-enabled": "awsui_calendar-day-enabled_1ykar_1818s_218",
+  "calendar-day-current-month": "awsui_calendar-day-current-month_1ykar_1818s_228",
+  "calendar-day-selected": "awsui_calendar-day-selected_1ykar_1818s_235",
+  "calendar-day-today": "awsui_calendar-day-today_1ykar_1818s_239",
+  "day-inner": "awsui_day-inner_1ykar_1818s_257",
+  "calendar-week": "awsui_calendar-week_1ykar_1818s_332"
 };