@cloudscape-design/components 3.0.851 → 3.0.853

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/calendar/internal.js +1 -1
  2. package/calendar/internal.js.map +1 -1
  3. package/internal/environment.js +1 -1
  4. package/internal/environment.json +1 -1
  5. package/internal/manifest.json +1 -1
  6. package/package.json +1 -1
  7. package/tabs/scroll-utils.js +1 -1
  8. package/tabs/scroll-utils.js.map +1 -1
  9. package/tabs/styles.css.js +28 -28
  10. package/tabs/styles.scoped.css +53 -49
  11. package/tabs/styles.selectors.js +28 -28
package/calendar/internal.js CHANGED
@@ -31,7 +31,7 @@ export default function Calendar(_a) {
31
31
  const focusedDateCache = useDateCache();
32
32
  // Set displayed date to value if defined or to current date otherwise.
33
33
  const parsedValue = value && value.length >= 4 ? parseDate(value) : null;
34
- const memoizedValue = parsedValue ? valueDateCache(parsedValue) : null;
34
+ const memoizedValue = parsedValue && !isNaN(parsedValue.getDate()) ? valueDateCache(parsedValue) : null;
35
35
  const defaultDisplayedDate = memoizedValue !== null && memoizedValue !== void 0 ? memoizedValue : new Date();
36
36
  const [displayedDate, setDisplayedDate] = useState(defaultDisplayedDate);
37
37
  const headingId = useUniqueId('calendar-heading');
package/calendar/internal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/calendar/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, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { addMonths, addYears, isSameDay, isSameMonth, isSameYear } from 'date-fns';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport checkControlled from '../internal/hooks/check-controlled/index.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useDateCache } from '../internal/hooks/use-date-cache/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index.js';\nimport { formatDate, parseDate } from '../internal/utils/date-time';\nimport { normalizeLocale } from '../internal/utils/locale';\nimport Grid from './grid';\nimport CalendarGridHeader from './grid/calendar-grid-header';\nimport useCalendarGridKeyboardNavigation from './grid/use-calendar-grid-keyboard-navigation';\nimport useCalendarGridRows from './grid/use-calendar-grid-rows';\nimport CalendarHeader from './header';\nimport { CalendarProps } from './interfaces.js';\nimport useCalendarLabels from './use-calendar-labels';\nimport { getBaseDay } from './utils/navigation-day';\nimport { getBaseMonth } from './utils/navigation-month';\n\nimport styles from './styles.css.js';\n\nexport default function Calendar({\n value,\n locale = '',\n startOfWeek,\n isDateEnabled = () => true,\n dateDisabledReason = () => '',\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n onChange,\n __internalRootRef,\n i18nStrings,\n granularity = 'day',\n previousMonthAriaLabel,\n nextMonthAriaLabel,\n todayAriaLabel,\n ...rest\n}: CalendarProps & InternalBaseComponentProps) {\n checkControlled('Calendar', 'value', value, 'onChange', onChange);\n\n const baseProps = getBaseProps(rest);\n const normalizedLocale = normalizeLocale('Calendar', locale);\n\n const gridWrapperRef = useRef<HTMLDivElement>(null);\n const [focusedDate, setFocusedDate] = useState<Date | null>(null);\n\n const valueDateCache = useDateCache();\n const focusedDateCache = useDateCache();\n\n // Set displayed date to value if defined or to current date otherwise.\n const parsedValue = value && value.length >= 4 ? parseDate(value) : null;\n const memoizedValue = parsedValue ? valueDateCache(parsedValue) : null;\n const defaultDisplayedDate = memoizedValue ?? new Date();\n const [displayedDate, setDisplayedDate] = useState(defaultDisplayedDate);\n\n const headingId = useUniqueId('calendar-heading');\n\n const isMonthPicker = granularity === 'month';\n\n const isDateFocusable = (date: Date) => isDateEnabled(date) || (!isDateEnabled(date) && !!dateDisabledReason(date));\n\n const baseDate = isMonthPicker\n ? getBaseMonth(displayedDate, isDateEnabled)\n : getBaseDay(displayedDate, isDateEnabled);\n\n const isSameDate = isMonthPicker ? isSameMonth : isSameDay;\n const isSamePage = isMonthPicker ? isSameYear : isSameMonth;\n const isCurrentPage = (date: Date) => isMonthPicker || isSameMonth(date, baseDate);\n\n const { previousButtonLabel, nextButtonLabel, renderDate, renderDateAnnouncement, renderHeaderText } =\n useCalendarLabels({\n granularity,\n i18nStrings,\n locale: normalizedLocale,\n previousMonthAriaLabel,\n nextMonthAriaLabel,\n todayAriaLabel,\n });\n\n const gridRows = useCalendarGridRows({ baseDate, granularity, startOfWeek, locale: normalizedLocale });\n\n // Update displayed date if value changes.\n useEffect(() => {\n memoizedValue && setDisplayedDate(prev => (prev.getTime() !== memoizedValue.getTime() ? memoizedValue : prev));\n }, [memoizedValue]);\n\n const selectFocusedDate = (selected: Date | null, baseDate: Date): Date | null => {\n if (selected && isDateFocusable(selected) && isSamePage(selected, baseDate)) {\n return selected;\n }\n const today = new Date();\n if (isDateFocusable(today) && isSamePage(today, baseDate)) {\n return today;\n }\n if (isDateFocusable(baseDate)) {\n return baseDate;\n }\n return null;\n };\n\n const focusableDate = focusedDate || selectFocusedDate(memoizedValue, baseDate);\n\n const onHeaderChangePageHandler = (amount: number) => {\n const movePage = isMonthPicker ? addYears : addMonths;\n const newDate = movePage(baseDate, amount);\n onChangePageHandler(newDate);\n };\n\n const onChangePageHandler = (newDate: Date) => {\n setDisplayedDate(newDate);\n setFocusedDate(null);\n };\n\n const onGridFocusDateHandler = (date: null | Date) => {\n if (date) {\n setFocusedDate(date ? focusedDateCache(date) : null);\n }\n };\n\n const onGridSelectDateHandler = (date: Date) => {\n fireNonCancelableEvent(onChange, { value: formatDate(date, granularity) });\n setFocusedDate(null);\n };\n\n const onGridBlur = (event: React.FocusEvent) => {\n const newFocusTargetIsInGrid = event.relatedTarget && gridWrapperRef.current?.contains(event.relatedTarget as Node);\n if (!newFocusTargetIsInGrid) {\n setFocusedDate(null);\n }\n };\n\n const onGridKeyDownHandler = useCalendarGridKeyboardNavigation({\n baseDate,\n focusableDate,\n granularity,\n isDateEnabled,\n isDateFocusable,\n onChangePage: onChangePageHandler,\n onFocusDate: onGridFocusDateHandler,\n onSelectDate: onGridSelectDateHandler,\n });\n\n const headerText = renderHeaderText(baseDate);\n\n return (\n <div\n ref={__internalRootRef}\n {...baseProps}\n role=\"group\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n className={clsx(styles.root, styles.calendar, baseProps.className)}\n >\n <div className={styles['calendar-inner']}>\n <CalendarHeader\n formattedDate={headerText}\n onChange={onHeaderChangePageHandler}\n previousLabel={previousButtonLabel}\n nextLabel={nextButtonLabel}\n headingId={headingId}\n />\n <div onBlur={onGridBlur} ref={gridWrapperRef}>\n <Grid\n isDateEnabled={isDateEnabled}\n dateDisabledReason={dateDisabledReason}\n focusedDate={focusedDate}\n focusableDate={focusableDate}\n onSelectDate={onGridSelectDateHandler}\n onFocusDate={onGridFocusDateHandler}\n onChangePage={onChangePageHandler}\n selectedDate={memoizedValue}\n ariaLabelledby={headingId}\n header={isMonthPicker ? null : <CalendarGridHeader locale={normalizedLocale} rows={gridRows} />}\n rows={gridRows}\n isCurrentPage={isCurrentPage}\n renderDate={renderDate}\n renderDateAnnouncement={renderDateAnnouncement}\n isSameDate={isSameDate}\n onGridKeyDownHandler={onGridKeyDownHandler}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/calendar/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, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport { addMonths, addYears, isSameDay, isSameMonth, isSameYear } from 'date-fns';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport checkControlled from '../internal/hooks/check-controlled/index.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useDateCache } from '../internal/hooks/use-date-cache/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index.js';\nimport { formatDate, parseDate } from '../internal/utils/date-time';\nimport { normalizeLocale } from '../internal/utils/locale';\nimport Grid from './grid';\nimport CalendarGridHeader from './grid/calendar-grid-header';\nimport useCalendarGridKeyboardNavigation from './grid/use-calendar-grid-keyboard-navigation';\nimport useCalendarGridRows from './grid/use-calendar-grid-rows';\nimport CalendarHeader from './header';\nimport { CalendarProps } from './interfaces.js';\nimport useCalendarLabels from './use-calendar-labels';\nimport { getBaseDay } from './utils/navigation-day';\nimport { getBaseMonth } from './utils/navigation-month';\n\nimport styles from './styles.css.js';\n\nexport default function Calendar({\n value,\n locale = '',\n startOfWeek,\n isDateEnabled = () => true,\n dateDisabledReason = () => '',\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n onChange,\n __internalRootRef,\n i18nStrings,\n granularity = 'day',\n previousMonthAriaLabel,\n nextMonthAriaLabel,\n todayAriaLabel,\n ...rest\n}: CalendarProps & InternalBaseComponentProps) {\n checkControlled('Calendar', 'value', value, 'onChange', onChange);\n\n const baseProps = getBaseProps(rest);\n const normalizedLocale = normalizeLocale('Calendar', locale);\n\n const gridWrapperRef = useRef<HTMLDivElement>(null);\n const [focusedDate, setFocusedDate] = useState<Date | null>(null);\n\n const valueDateCache = useDateCache();\n const focusedDateCache = useDateCache();\n\n // Set displayed date to value if defined or to current date otherwise.\n const parsedValue = value && value.length >= 4 ? parseDate(value) : null;\n const memoizedValue = parsedValue && !isNaN(parsedValue.getDate()) ? valueDateCache(parsedValue) : null;\n const defaultDisplayedDate = memoizedValue ?? new Date();\n const [displayedDate, setDisplayedDate] = useState(defaultDisplayedDate);\n\n const headingId = useUniqueId('calendar-heading');\n\n const isMonthPicker = granularity === 'month';\n\n const isDateFocusable = (date: Date) => isDateEnabled(date) || (!isDateEnabled(date) && !!dateDisabledReason(date));\n\n const baseDate = isMonthPicker\n ? getBaseMonth(displayedDate, isDateEnabled)\n : getBaseDay(displayedDate, isDateEnabled);\n\n const isSameDate = isMonthPicker ? isSameMonth : isSameDay;\n const isSamePage = isMonthPicker ? isSameYear : isSameMonth;\n const isCurrentPage = (date: Date) => isMonthPicker || isSameMonth(date, baseDate);\n\n const { previousButtonLabel, nextButtonLabel, renderDate, renderDateAnnouncement, renderHeaderText } =\n useCalendarLabels({\n granularity,\n i18nStrings,\n locale: normalizedLocale,\n previousMonthAriaLabel,\n nextMonthAriaLabel,\n todayAriaLabel,\n });\n\n const gridRows = useCalendarGridRows({ baseDate, granularity, startOfWeek, locale: normalizedLocale });\n\n // Update displayed date if value changes.\n useEffect(() => {\n memoizedValue && setDisplayedDate(prev => (prev.getTime() !== memoizedValue.getTime() ? memoizedValue : prev));\n }, [memoizedValue]);\n\n const selectFocusedDate = (selected: Date | null, baseDate: Date): Date | null => {\n if (selected && isDateFocusable(selected) && isSamePage(selected, baseDate)) {\n return selected;\n }\n const today = new Date();\n if (isDateFocusable(today) && isSamePage(today, baseDate)) {\n return today;\n }\n if (isDateFocusable(baseDate)) {\n return baseDate;\n }\n return null;\n };\n\n const focusableDate = focusedDate || selectFocusedDate(memoizedValue, baseDate);\n\n const onHeaderChangePageHandler = (amount: number) => {\n const movePage = isMonthPicker ? addYears : addMonths;\n const newDate = movePage(baseDate, amount);\n onChangePageHandler(newDate);\n };\n\n const onChangePageHandler = (newDate: Date) => {\n setDisplayedDate(newDate);\n setFocusedDate(null);\n };\n\n const onGridFocusDateHandler = (date: null | Date) => {\n if (date) {\n setFocusedDate(date ? focusedDateCache(date) : null);\n }\n };\n\n const onGridSelectDateHandler = (date: Date) => {\n fireNonCancelableEvent(onChange, { value: formatDate(date, granularity) });\n setFocusedDate(null);\n };\n\n const onGridBlur = (event: React.FocusEvent) => {\n const newFocusTargetIsInGrid = event.relatedTarget && gridWrapperRef.current?.contains(event.relatedTarget as Node);\n if (!newFocusTargetIsInGrid) {\n setFocusedDate(null);\n }\n };\n\n const onGridKeyDownHandler = useCalendarGridKeyboardNavigation({\n baseDate,\n focusableDate,\n granularity,\n isDateEnabled,\n isDateFocusable,\n onChangePage: onChangePageHandler,\n onFocusDate: onGridFocusDateHandler,\n onSelectDate: onGridSelectDateHandler,\n });\n\n const headerText = renderHeaderText(baseDate);\n\n return (\n <div\n ref={__internalRootRef}\n {...baseProps}\n role=\"group\"\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n className={clsx(styles.root, styles.calendar, baseProps.className)}\n >\n <div className={styles['calendar-inner']}>\n <CalendarHeader\n formattedDate={headerText}\n onChange={onHeaderChangePageHandler}\n previousLabel={previousButtonLabel}\n nextLabel={nextButtonLabel}\n headingId={headingId}\n />\n <div onBlur={onGridBlur} ref={gridWrapperRef}>\n <Grid\n isDateEnabled={isDateEnabled}\n dateDisabledReason={dateDisabledReason}\n focusedDate={focusedDate}\n focusableDate={focusableDate}\n onSelectDate={onGridSelectDateHandler}\n onFocusDate={onGridFocusDateHandler}\n onChangePage={onChangePageHandler}\n selectedDate={memoizedValue}\n ariaLabelledby={headingId}\n header={isMonthPicker ? null : <CalendarGridHeader locale={normalizedLocale} rows={gridRows} />}\n rows={gridRows}\n isCurrentPage={isCurrentPage}\n renderDate={renderDate}\n renderDateAnnouncement={renderDateAnnouncement}\n isSameDate={isSameDate}\n onGridKeyDownHandler={onGridKeyDownHandler}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}
package/internal/environment.js CHANGED
@@ -1,4 +1,4 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (3bf2183a)";
2
+ export var PACKAGE_VERSION = "3.0.0 (6310acad)";
3
3
  export var THEME = "open-source-visual-refresh";
4
4
  export var ALWAYS_VISUAL_REFRESH = true;
package/internal/environment.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (3bf2183a)",
3
+ "PACKAGE_VERSION": "3.0.0 (6310acad)",
4
4
  "THEME": "default",
5
5
  "ALWAYS_VISUAL_REFRESH": false
6
6
  }
package/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "3bf2183a2a61273415f5d164000d9fb076dcca17"
2
+ "commit": "6310acad7f9a4d098632d54d5f3cdb03280b3e56"
3
3
  }
package/package.json CHANGED
@@ -131,7 +131,7 @@
131
131
  "./internal/base-component/index.js",
132
132
  "./internal/base-component/styles.css.js"
133
133
  ],
134
- "version": "3.0.851",
134
+ "version": "3.0.853",
135
135
  "repository": {
136
136
  "type": "git",
137
137
  "url": "https://github.com/cloudscape-design/components.git"
package/tabs/scroll-utils.js CHANGED
@@ -39,7 +39,7 @@ export const scrollIntoView = (tabHeader, headerBar, smooth = true) => {
39
39
  // Anchor tab to left of scroll parent
40
40
  updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);
41
41
  // Anchor tab to right of scroll parent
42
- updatedLeftScroll = Math.max(updatedLeftScroll, tabHeader.offsetLeft + tabHeader.offsetWidth - headerBar.offsetWidth + margin);
42
+ updatedLeftScroll = Math.max(updatedLeftScroll, tabHeader.offsetLeft + tabHeader.offsetWidth / 2 - headerBar.offsetWidth / 2 + margin);
43
43
  if (smooth) {
44
44
  smoothScroll(headerBar, updatedLeftScroll);
45
45
  }
package/tabs/scroll-utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"scroll-utils.js","sourceRoot":"","sources":["../../../src/tabs/scroll-utils.ts"],"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 { getIsRtl, getScrollInlineStart } from '@cloudscape-design/component-toolkit/internal';\n\nimport smoothScroll from './smooth-scroll';\n\nexport const onPaginationClick = (\n headerBarRef: React.RefObject<HTMLUListElement>,\n direction: 'forward' | 'backward'\n): void => {\n if (!headerBarRef?.current) {\n return;\n }\n const element = headerBarRef.current;\n const { scrollLeft, scrollWidth, offsetWidth } = element;\n\n // Scroll each paginated section by 75% of what is already visible\n const paginatedSectionSize = Math.ceil(element.clientWidth * 0.75);\n\n const scrollDistance =\n direction === 'forward'\n ? Math.min(Math.abs(scrollLeft) + paginatedSectionSize, scrollWidth - offsetWidth)\n : Math.max(Math.abs(scrollLeft) - paginatedSectionSize, 0);\n\n // scroll destination needs to be a negative number if the direction is RTL\n const scrollTo = getIsRtl(element) ? scrollDistance * -1 : scrollDistance;\n\n smoothScroll(element, scrollTo);\n};\n\nexport const hasHorizontalOverflow = (\n headerBar: HTMLElement,\n inlineStartOverflowButton: React.RefObject<HTMLElement>\n): boolean => {\n const { offsetWidth, scrollWidth } = headerBar;\n\n // Need to account for pagination button width when deciding if there would be overflow without them\n const paginationButtonsWidth = inlineStartOverflowButton.current && 2 * inlineStartOverflowButton.current.offsetWidth;\n return paginationButtonsWidth ? scrollWidth > offsetWidth + paginationButtonsWidth : scrollWidth > offsetWidth;\n};\n\nexport const hasInlineStartOverflow = (headerBar: HTMLElement): boolean => {\n return getScrollInlineStart(headerBar) > 0;\n};\n\nexport const hasInlineEndOverflow = (headerBar: HTMLElement): boolean => {\n return Math.ceil(getScrollInlineStart(headerBar)) < headerBar.scrollWidth - headerBar.offsetWidth;\n};\n\nexport const scrollIntoView = (tabHeader: HTMLElement, headerBar: HTMLElement, smooth = true): void => {\n if (!tabHeader || !headerBar) {\n return;\n }\n // Extra left and right margin to always make the focus ring visible\n const margin = 2;\n let updatedLeftScroll = headerBar.scrollLeft;\n\n // Anchor tab to left of scroll parent\n updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);\n // Anchor tab to right of scroll parent\n updatedLeftScroll = Math.max(\n updatedLeftScroll,\n tabHeader.offsetLeft + tabHeader.offsetWidth - headerBar.offsetWidth + margin\n );\n if (smooth) {\n smoothScroll(headerBar, updatedLeftScroll);\n } else {\n headerBar.scrollLeft = updatedLeftScroll;\n }\n};\n"]}
1
+ {"version":3,"file":"scroll-utils.js","sourceRoot":"","sources":["../../../src/tabs/scroll-utils.ts"],"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 { getIsRtl, getScrollInlineStart } from '@cloudscape-design/component-toolkit/internal';\n\nimport smoothScroll from './smooth-scroll';\n\nexport const onPaginationClick = (\n headerBarRef: React.RefObject<HTMLUListElement>,\n direction: 'forward' | 'backward'\n): void => {\n if (!headerBarRef?.current) {\n return;\n }\n const element = headerBarRef.current;\n const { scrollLeft, scrollWidth, offsetWidth } = element;\n\n // Scroll each paginated section by 75% of what is already visible\n const paginatedSectionSize = Math.ceil(element.clientWidth * 0.75);\n\n const scrollDistance =\n direction === 'forward'\n ? Math.min(Math.abs(scrollLeft) + paginatedSectionSize, scrollWidth - offsetWidth)\n : Math.max(Math.abs(scrollLeft) - paginatedSectionSize, 0);\n\n // scroll destination needs to be a negative number if the direction is RTL\n const scrollTo = getIsRtl(element) ? scrollDistance * -1 : scrollDistance;\n\n smoothScroll(element, scrollTo);\n};\n\nexport const hasHorizontalOverflow = (\n headerBar: HTMLElement,\n inlineStartOverflowButton: React.RefObject<HTMLElement>\n): boolean => {\n const { offsetWidth, scrollWidth } = headerBar;\n\n // Need to account for pagination button width when deciding if there would be overflow without them\n const paginationButtonsWidth = inlineStartOverflowButton.current && 2 * inlineStartOverflowButton.current.offsetWidth;\n return paginationButtonsWidth ? scrollWidth > offsetWidth + paginationButtonsWidth : scrollWidth > offsetWidth;\n};\n\nexport const hasInlineStartOverflow = (headerBar: HTMLElement): boolean => {\n return getScrollInlineStart(headerBar) > 0;\n};\n\nexport const hasInlineEndOverflow = (headerBar: HTMLElement): boolean => {\n return Math.ceil(getScrollInlineStart(headerBar)) < headerBar.scrollWidth - headerBar.offsetWidth;\n};\n\nexport const scrollIntoView = (tabHeader: HTMLElement, headerBar: HTMLElement, smooth = true): void => {\n if (!tabHeader || !headerBar) {\n return;\n }\n // Extra left and right margin to always make the focus ring visible\n const margin = 2;\n let updatedLeftScroll = headerBar.scrollLeft;\n\n // Anchor tab to left of scroll parent\n updatedLeftScroll = Math.min(updatedLeftScroll, tabHeader.offsetLeft - margin);\n // Anchor tab to right of scroll parent\n updatedLeftScroll = Math.max(\n updatedLeftScroll,\n tabHeader.offsetLeft + tabHeader.offsetWidth / 2 - headerBar.offsetWidth / 2 + margin\n );\n if (smooth) {\n smoothScroll(headerBar, updatedLeftScroll);\n } else {\n headerBar.scrollLeft = updatedLeftScroll;\n }\n};\n"]}
package/tabs/styles.css.js CHANGED
@@ -1,33 +1,33 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "tabs-header": "awsui_tabs-header_14rmt_ji2br_290",
5
- "tabs-header-list": "awsui_tabs-header-list_14rmt_ji2br_298",
6
- "pagination-button": "awsui_pagination-button_14rmt_ji2br_315",
7
- "pagination-button-left": "awsui_pagination-button-left_14rmt_ji2br_322",
8
- "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_ji2br_325",
9
- "pagination-button-right": "awsui_pagination-button-right_14rmt_ji2br_329",
10
- "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_ji2br_332",
11
- "tabs-tab": "awsui_tabs-tab_14rmt_ji2br_337",
12
- "tabs-tab-label": "awsui_tabs-tab-label_14rmt_ji2br_346",
13
- "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_ji2br_357",
14
- "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_ji2br_368",
15
- "tabs-tab-action": "awsui_tabs-tab-action_14rmt_ji2br_368",
16
- "refresh": "awsui_refresh_14rmt_ji2br_372",
17
- "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_ji2br_376",
18
- "tabs-tab-link": "awsui_tabs-tab-link_14rmt_ji2br_418",
19
- "tabs-tab-active": "awsui_tabs-tab-active_14rmt_ji2br_494",
20
- "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_ji2br_501",
21
- "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_ji2br_505",
22
- "root": "awsui_root_14rmt_ji2br_509",
23
- "tabs": "awsui_tabs_14rmt_ji2br_290",
24
- "tabs-content": "awsui_tabs-content_14rmt_ji2br_547",
25
- "fit-height": "awsui_fit-height_14rmt_ji2br_551",
26
- "tabs-content-active": "awsui_tabs-content-active_14rmt_ji2br_557",
27
- "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_ji2br_571",
28
- "with-paddings": "awsui_with-paddings_14rmt_ji2br_571",
29
- "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_ji2br_582",
30
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_ji2br_593",
31
- "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_ji2br_597"
4
+ "tabs-header": "awsui_tabs-header_14rmt_1xftp_290",
5
+ "tabs-header-list": "awsui_tabs-header-list_14rmt_1xftp_298",
6
+ "pagination-button": "awsui_pagination-button_14rmt_1xftp_316",
7
+ "pagination-button-left": "awsui_pagination-button-left_14rmt_1xftp_323",
8
+ "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1xftp_326",
9
+ "pagination-button-right": "awsui_pagination-button-right_14rmt_1xftp_330",
10
+ "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1xftp_333",
11
+ "tabs-tab": "awsui_tabs-tab_14rmt_1xftp_338",
12
+ "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1xftp_348",
13
+ "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1xftp_359",
14
+ "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1xftp_370",
15
+ "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1xftp_370",
16
+ "refresh": "awsui_refresh_14rmt_1xftp_374",
17
+ "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1xftp_378",
18
+ "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1xftp_420",
19
+ "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1xftp_498",
20
+ "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1xftp_505",
21
+ "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1xftp_509",
22
+ "root": "awsui_root_14rmt_1xftp_513",
23
+ "tabs": "awsui_tabs_14rmt_1xftp_290",
24
+ "tabs-content": "awsui_tabs-content_14rmt_1xftp_551",
25
+ "fit-height": "awsui_fit-height_14rmt_1xftp_555",
26
+ "tabs-content-active": "awsui_tabs-content-active_14rmt_1xftp_561",
27
+ "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1xftp_575",
28
+ "with-paddings": "awsui_with-paddings_14rmt_1xftp_575",
29
+ "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1xftp_586",
30
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1xftp_597",
31
+ "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1xftp_601"
32
32
  };
33
33
 
package/tabs/styles.scoped.css CHANGED
@@ -287,7 +287,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
287
287
  SPDX-License-Identifier: Apache-2.0
288
288
  */
289
289
  /* stylelint-disable selector-max-type */
290
- .awsui_tabs-header_14rmt_ji2br_290:not(#\9) {
290
+ .awsui_tabs-header_14rmt_1xftp_290:not(#\9) {
291
291
  margin-block: 0;
292
292
  margin-inline: 0;
293
293
  padding-block: 0;
@@ -295,7 +295,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
295
295
  display: flex;
296
296
  }
297
297
 
298
- .awsui_tabs-header-list_14rmt_ji2br_298:not(#\9) {
298
+ .awsui_tabs-header-list_14rmt_1xftp_298:not(#\9) {
299
299
  margin-block: 0;
300
300
  margin-inline: 0;
301
301
  padding-block: 0;
@@ -305,45 +305,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
305
305
  overflow-y: hidden;
306
306
  position: relative;
307
307
  inline-size: 100%;
308
+ scroll-snap-type: inline proximity;
308
309
  -ms-overflow-style: none; /* Internet Explorer 10+ */
309
310
  scrollbar-width: none; /* Firefox */
310
311
  }
311
- .awsui_tabs-header-list_14rmt_ji2br_298:not(#\9)::-webkit-scrollbar {
312
+ .awsui_tabs-header-list_14rmt_1xftp_298:not(#\9)::-webkit-scrollbar {
312
313
  display: none; /* Safari and Chrome */
313
314
  }
314
315
 
315
- .awsui_pagination-button_14rmt_ji2br_315:not(#\9) {
316
+ .awsui_pagination-button_14rmt_1xftp_316:not(#\9) {
316
317
  margin-block: var(--space-scaled-s-aqzyko, 12px);
317
318
  margin-inline: 0;
318
319
  padding-block: 0;
319
320
  padding-inline: var(--space-xxs-p8yyaw, 4px);
320
321
  display: flex;
321
322
  }
322
- .awsui_pagination-button-left_14rmt_ji2br_322:not(#\9) {
323
+ .awsui_pagination-button-left_14rmt_1xftp_323:not(#\9) {
323
324
  border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-qc5csz, #dedee3);
324
325
  }
325
- .awsui_pagination-button-left-scrollable_14rmt_ji2br_325:not(#\9) {
326
+ .awsui_pagination-button-left-scrollable_14rmt_1xftp_326:not(#\9) {
326
327
  z-index: 1;
327
328
  box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12)), 1px 0px 0px 0px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12));
328
329
  }
329
- .awsui_pagination-button-right_14rmt_ji2br_329:not(#\9) {
330
+ .awsui_pagination-button-right_14rmt_1xftp_330:not(#\9) {
330
331
  border-inline-start: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-control-disabled-qc5csz, #dedee3);
331
332
  }
332
- .awsui_pagination-button-right-scrollable_14rmt_ji2br_332:not(#\9) {
333
+ .awsui_pagination-button-right-scrollable_14rmt_1xftp_333:not(#\9) {
333
334
  z-index: 1;
334
335
  box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12)), -1px 0px 0px 0 var(--color-border-tabs-shadow-enjrr2, rgba(15, 20, 26, 0.12));
335
336
  }
336
337
 
337
- .awsui_tabs-tab_14rmt_ji2br_337:not(#\9) {
338
+ .awsui_tabs-tab_14rmt_1xftp_338:not(#\9) {
338
339
  list-style: none;
339
340
  padding-block: 0;
340
341
  padding-inline: 0;
341
342
  flex-shrink: 0;
342
343
  display: flex;
343
344
  max-inline-size: calc(90% - var(--space-l-t419sm, 20px));
345
+ scroll-snap-align: start;
344
346
  }
345
347
 
346
- .awsui_tabs-tab-label_14rmt_ji2br_346:not(#\9) {
348
+ .awsui_tabs-tab-label_14rmt_1xftp_348:not(#\9) {
347
349
  display: flex;
348
350
  align-items: center;
349
351
  padding-inline: var(--space-xs-zb16t3, 8px);
@@ -354,7 +356,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
354
356
  word-break: break-word;
355
357
  }
356
358
 
357
- .awsui_tabs-tab-header-container_14rmt_ji2br_357:not(#\9) {
359
+ .awsui_tabs-tab-header-container_14rmt_1xftp_359:not(#\9) {
358
360
  position: relative;
359
361
  border-block: var(--border-divider-section-width-1061zr, 1px) solid transparent;
360
362
  border-inline: var(--border-divider-section-width-1061zr, 1px) solid transparent;
@@ -362,18 +364,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
362
364
  display: flex;
363
365
  align-items: stretch;
364
366
  }
365
- .awsui_tabs-tab-header-container_14rmt_ji2br_357:not(#\9), .awsui_tabs-tab-header-container_14rmt_ji2br_357 > button:not(#\9) {
367
+ .awsui_tabs-tab-header-container_14rmt_1xftp_359:not(#\9), .awsui_tabs-tab-header-container_14rmt_1xftp_359 > button:not(#\9) {
366
368
  background-color: transparent;
367
369
  }
368
- .awsui_tabs-tab-header-container_14rmt_ji2br_357 > .awsui_tabs-tab-dismiss_14rmt_ji2br_368:not(#\9), .awsui_tabs-tab-header-container_14rmt_ji2br_357 > .awsui_tabs-tab-action_14rmt_ji2br_368:not(#\9) {
370
+ .awsui_tabs-tab-header-container_14rmt_1xftp_359 > .awsui_tabs-tab-dismiss_14rmt_1xftp_370:not(#\9), .awsui_tabs-tab-header-container_14rmt_1xftp_359 > .awsui_tabs-tab-action_14rmt_1xftp_370:not(#\9) {
369
371
  display: flex;
370
372
  align-items: center;
371
373
  }
372
- .awsui_tabs-tab-header-container_14rmt_ji2br_357.awsui_refresh_14rmt_ji2br_372 > span:not(#\9):first-of-type {
374
+ .awsui_tabs-tab-header-container_14rmt_1xftp_359.awsui_refresh_14rmt_1xftp_374 > span:not(#\9):first-of-type {
373
375
  margin-inline-start: calc(-1 * var(--space-scaled-xs-26e2du, 8px));
374
376
  }
375
377
 
376
- .awsui_tabs-tab-header-container_14rmt_ji2br_357:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ji2br_376):after {
378
+ .awsui_tabs-tab-header-container_14rmt_1xftp_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1xftp_378):after {
377
379
  content: "";
378
380
  position: absolute;
379
381
  inset-inline-start: 0;
@@ -387,35 +389,35 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
387
389
  background: var(--color-border-tabs-underline-a5fmhd, #006ce0);
388
390
  opacity: 0;
389
391
  }
390
- .awsui_tabs-tab-header-container_14rmt_ji2br_357:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ji2br_376).awsui_refresh_14rmt_ji2br_372:after {
392
+ .awsui_tabs-tab-header-container_14rmt_1xftp_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1xftp_378).awsui_refresh_14rmt_1xftp_374:after {
391
393
  transition: opacity var(--motion-duration-refresh-only-medium-nf6485, 165ms) var(--motion-easing-refresh-only-c-vg1m9h, cubic-bezier(0.84, 0, 0.16, 1));
392
394
  }
393
395
  @media (prefers-reduced-motion: reduce) {
394
- .awsui_tabs-tab-header-container_14rmt_ji2br_357:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ji2br_376).awsui_refresh_14rmt_ji2br_372:after {
396
+ .awsui_tabs-tab-header-container_14rmt_1xftp_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1xftp_378).awsui_refresh_14rmt_1xftp_374:after {
395
397
  animation: none;
396
398
  transition: none;
397
399
  }
398
400
  }
399
- .awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_ji2br_357:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ji2br_376).awsui_refresh_14rmt_ji2br_372:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_ji2br_357:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ji2br_376).awsui_refresh_14rmt_ji2br_372:after {
401
+ .awsui-motion-disabled .awsui_tabs-tab-header-container_14rmt_1xftp_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1xftp_378).awsui_refresh_14rmt_1xftp_374:after, .awsui-mode-entering .awsui_tabs-tab-header-container_14rmt_1xftp_359:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1xftp_378).awsui_refresh_14rmt_1xftp_374:after {
400
402
  animation: none;
401
403
  transition: none;
402
404
  }
403
405
 
404
- .awsui_tabs-tab_14rmt_ji2br_337:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_ji2br_357 {
406
+ .awsui_tabs-tab_14rmt_1xftp_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1xftp_359 {
405
407
  margin-inline-end: calc(-1 * var(--border-divider-section-width-1061zr, 1px));
406
408
  }
407
- .awsui_tabs-tab_14rmt_ji2br_337:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_ji2br_357:before {
409
+ .awsui_tabs-tab_14rmt_1xftp_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1xftp_359:before {
408
410
  content: "";
409
411
  position: absolute;
410
412
  border-inline-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-djfdfj, #c6c6cd);
411
413
  inset: var(--space-scaled-s-aqzyko, 12px) 0;
412
414
  opacity: 1;
413
415
  }
414
- .awsui_tabs-tab_14rmt_ji2br_337:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_ji2br_357.awsui_refresh_14rmt_ji2br_372:before {
416
+ .awsui_tabs-tab_14rmt_1xftp_338:not(#\9):not(:last-child) > .awsui_tabs-tab-header-container_14rmt_1xftp_359.awsui_refresh_14rmt_1xftp_374:before {
415
417
  inset: calc(var(--space-static-s-n2eb28, 12px) - var(--border-active-width-9dmqf4, 4px)) 0;
416
418
  }
417
419
 
418
- .awsui_tabs-tab-link_14rmt_ji2br_418:not(#\9) {
420
+ .awsui_tabs-tab-link_14rmt_1xftp_420:not(#\9) {
419
421
  position: relative;
420
422
  display: flex;
421
423
  align-items: stretch;
@@ -436,27 +438,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
436
438
  -webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
437
439
  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
438
440
  }
439
- .awsui_tabs-tab-link_14rmt_ji2br_418.awsui_refresh_14rmt_ji2br_372:not(#\9) {
441
+ .awsui_tabs-tab-link_14rmt_1xftp_420.awsui_refresh_14rmt_1xftp_374:not(#\9) {
440
442
  padding-block-start: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
441
443
  padding-block-end: calc(var(--space-static-xs-7sfb63, 8px) - 1px);
442
444
  margin-block-start: 0;
443
445
  }
444
- .awsui_tabs-tab-link_14rmt_ji2br_418:not(#\9):hover {
446
+ .awsui_tabs-tab-link_14rmt_1xftp_420:not(#\9):hover {
445
447
  color: var(--color-text-accent-fptgkc, #006ce0);
446
448
  }
447
- .awsui_tabs-tab-link_14rmt_ji2br_418:not(#\9):focus {
449
+ .awsui_tabs-tab-link_14rmt_1xftp_420:not(#\9):focus {
448
450
  outline: none;
449
451
  }
450
- body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_ji2br_418:not(#\9):focus {
452
+ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1xftp_420:not(#\9):focus {
451
453
  z-index: 1;
452
454
  border-inline-end-color: transparent;
453
455
  position: relative;
454
456
  }
455
- body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_ji2br_418:not(#\9):focus {
457
+ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1xftp_420:not(#\9):focus {
456
458
  outline: 2px dotted transparent;
457
459
  outline-offset: calc(var(--space-tabs-focus-outline-gutter-xm37ly, -8px) - 1px);
458
460
  }
459
- body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_ji2br_418:not(#\9):focus::before {
461
+ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_1xftp_420:not(#\9):focus::before {
460
462
  content: " ";
461
463
  display: block;
462
464
  position: absolute;
@@ -471,46 +473,48 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_ji2br_418:not(#\9
471
473
  box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
472
474
  }
473
475
 
474
- .awsui_tabs-tab_14rmt_ji2br_337:not(#\9):first-child {
476
+ .awsui_tabs-tab_14rmt_1xftp_338:not(#\9):first-child {
475
477
  margin-inline-start: 1px;
478
+ scroll-margin-inline-start: 1px;
476
479
  }
477
- .awsui_tabs-tab_14rmt_ji2br_337:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_ji2br_357 {
480
+ .awsui_tabs-tab_14rmt_1xftp_338:not(#\9):first-child > .awsui_tabs-tab-header-container_14rmt_1xftp_359 {
478
481
  padding-inline-start: calc(var(--space-xs-zb16t3, 8px) - 1px);
479
482
  }
480
483
 
481
- .awsui_tabs-tab_14rmt_ji2br_337:not(#\9):last-child {
484
+ .awsui_tabs-tab_14rmt_1xftp_338:not(#\9):last-child {
482
485
  margin-inline-end: 1px;
486
+ scroll-margin-inline-end: 1px;
483
487
  }
484
- .awsui_tabs-tab_14rmt_ji2br_337:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_ji2br_357 {
488
+ .awsui_tabs-tab_14rmt_1xftp_338:not(#\9):last-child > .awsui_tabs-tab-header-container_14rmt_1xftp_359 {
485
489
  padding-inline-end: calc(var(--space-xs-zb16t3, 8px) - 1px);
486
490
  }
487
491
 
488
- .awsui_tabs-tab-disabled_14rmt_ji2br_376:not(#\9), .awsui_tabs-tab-disabled_14rmt_ji2br_376:not(#\9):hover {
492
+ .awsui_tabs-tab-disabled_14rmt_1xftp_378:not(#\9), .awsui_tabs-tab-disabled_14rmt_1xftp_378:not(#\9):hover {
489
493
  cursor: default;
490
494
  color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
491
495
  font-weight: var(--font-tabs-disabled-weight-1xcs5l, 700);
492
496
  }
493
497
 
494
- .awsui_tabs-tab-active_14rmt_ji2br_494:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ji2br_376) {
498
+ .awsui_tabs-tab-active_14rmt_1xftp_498:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1xftp_378) {
495
499
  color: var(--color-text-accent-fptgkc, #006ce0);
496
500
  }
497
- .awsui_tabs-tab-active_14rmt_ji2br_494:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ji2br_376):after {
501
+ .awsui_tabs-tab-active_14rmt_1xftp_498:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_1xftp_378):after {
498
502
  opacity: 1;
499
503
  }
500
504
 
501
- .awsui_tabs-header-with-divider_14rmt_ji2br_501:not(#\9) {
505
+ .awsui_tabs-header-with-divider_14rmt_1xftp_505:not(#\9) {
502
506
  border-block-end: var(--border-divider-section-width-1061zr, 1px) solid var(--color-border-tabs-divider-djfdfj, #c6c6cd);
503
507
  }
504
508
 
505
- .awsui_tabs-tab-focusable_14rmt_ji2br_505:not(#\9) {
509
+ .awsui_tabs-tab-focusable_14rmt_1xftp_509:not(#\9) {
506
510
  /* used to manage focusable logic */
507
511
  }
508
512
 
509
- .awsui_root_14rmt_ji2br_509:not(#\9) {
513
+ .awsui_root_14rmt_1xftp_513:not(#\9) {
510
514
  /* used in test-utils or tests */
511
515
  }
512
516
 
513
- .awsui_tabs_14rmt_ji2br_290:not(#\9) {
517
+ .awsui_tabs_14rmt_1xftp_290:not(#\9) {
514
518
  border-collapse: separate;
515
519
  border-spacing: 0;
516
520
  box-sizing: border-box;
@@ -545,21 +549,21 @@ body[data-awsui-focus-visible=true] .awsui_tabs-tab-link_14rmt_ji2br_418:not(#\9
545
549
  inline-size: 100%;
546
550
  }
547
551
 
548
- .awsui_tabs-content_14rmt_ji2br_547:not(#\9) {
552
+ .awsui_tabs-content_14rmt_1xftp_551:not(#\9) {
549
553
  display: none;
550
554
  }
551
555
 
552
- .awsui_fit-height_14rmt_ji2br_551:not(#\9) {
556
+ .awsui_fit-height_14rmt_1xftp_555:not(#\9) {
553
557
  display: flex;
554
558
  flex-direction: column;
555
559
  block-size: 100%;
556
560
  }
557
561
 
558
- .awsui_tabs-content-active_14rmt_ji2br_557:not(#\9) {
562
+ .awsui_tabs-content-active_14rmt_1xftp_561:not(#\9) {
559
563
  display: block;
560
564
  flex: 1;
561
565
  }
562
- body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_ji2br_557:not(#\9):focus {
566
+ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_1xftp_561:not(#\9):focus {
563
567
  outline: 2px dotted transparent;
564
568
  outline-offset: 2px;
565
569
  border-start-start-radius: var(--border-radius-container-wqv1zi, 16px);
@@ -569,32 +573,32 @@ body[data-awsui-focus-visible=true] .awsui_tabs-content-active_14rmt_ji2br_557:n
569
573
  box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
570
574
  }
571
575
 
572
- .awsui_tabs-content-wrapper_14rmt_ji2br_571.awsui_with-paddings_14rmt_ji2br_571 > .awsui_tabs-content_14rmt_ji2br_547:not(#\9) {
576
+ .awsui_tabs-content-wrapper_14rmt_1xftp_575.awsui_with-paddings_14rmt_1xftp_575 > .awsui_tabs-content_14rmt_1xftp_551:not(#\9) {
573
577
  padding-block: var(--space-scaled-m-mo5yse, 16px);
574
578
  padding-inline: 0;
575
579
  }
576
- .awsui_fit-height_14rmt_ji2br_551 > .awsui_tabs-content-wrapper_14rmt_ji2br_571:not(#\9) {
580
+ .awsui_fit-height_14rmt_1xftp_555 > .awsui_tabs-content-wrapper_14rmt_1xftp_575:not(#\9) {
577
581
  flex: 1;
578
582
  display: flex;
579
583
  flex-direction: column;
580
584
  overflow: auto;
581
585
  }
582
586
 
583
- .awsui_fit-height_14rmt_ji2br_551 > .awsui_tabs-content-wrapper_14rmt_ji2br_571 > .awsui_tabs-container-content-wrapper_14rmt_ji2br_582:not(#\9) {
587
+ .awsui_fit-height_14rmt_1xftp_555 > .awsui_tabs-content-wrapper_14rmt_1xftp_575 > .awsui_tabs-container-content-wrapper_14rmt_1xftp_586:not(#\9) {
584
588
  block-size: 100%;
585
589
  display: flex;
586
590
  flex-direction: column;
587
591
  }
588
- .awsui_tabs-container-content-wrapper_14rmt_ji2br_582.awsui_with-paddings_14rmt_ji2br_571 > .awsui_tabs-content_14rmt_ji2br_547:not(#\9) {
592
+ .awsui_tabs-container-content-wrapper_14rmt_1xftp_586.awsui_with-paddings_14rmt_1xftp_575 > .awsui_tabs-content_14rmt_1xftp_551:not(#\9) {
589
593
  padding-block-start: var(--space-tabs-content-top-dedu0k, 12px);
590
594
  padding-block-end: var(--space-scaled-l-0hpmd7, 20px);
591
595
  padding-inline: var(--space-container-horizontal-wfukh3, 20px);
592
596
  }
593
597
 
594
- .awsui_disabled-reason-tooltip_14rmt_ji2br_593:not(#\9) {
598
+ .awsui_disabled-reason-tooltip_14rmt_1xftp_597:not(#\9) {
595
599
  /* used in test-utils or tests */
596
600
  }
597
601
 
598
- .awsui_tabs-tab-focused_14rmt_ji2br_597:not(#\9) {
602
+ .awsui_tabs-tab-focused_14rmt_1xftp_601:not(#\9) {
599
603
  /* used to manage focusable state for disabled with reason tabs */
600
604
  }
package/tabs/styles.selectors.js CHANGED
@@ -2,33 +2,33 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "tabs-header": "awsui_tabs-header_14rmt_ji2br_290",
6
- "tabs-header-list": "awsui_tabs-header-list_14rmt_ji2br_298",
7
- "pagination-button": "awsui_pagination-button_14rmt_ji2br_315",
8
- "pagination-button-left": "awsui_pagination-button-left_14rmt_ji2br_322",
9
- "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_ji2br_325",
10
- "pagination-button-right": "awsui_pagination-button-right_14rmt_ji2br_329",
11
- "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_ji2br_332",
12
- "tabs-tab": "awsui_tabs-tab_14rmt_ji2br_337",
13
- "tabs-tab-label": "awsui_tabs-tab-label_14rmt_ji2br_346",
14
- "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_ji2br_357",
15
- "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_ji2br_368",
16
- "tabs-tab-action": "awsui_tabs-tab-action_14rmt_ji2br_368",
17
- "refresh": "awsui_refresh_14rmt_ji2br_372",
18
- "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_ji2br_376",
19
- "tabs-tab-link": "awsui_tabs-tab-link_14rmt_ji2br_418",
20
- "tabs-tab-active": "awsui_tabs-tab-active_14rmt_ji2br_494",
21
- "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_ji2br_501",
22
- "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_ji2br_505",
23
- "root": "awsui_root_14rmt_ji2br_509",
24
- "tabs": "awsui_tabs_14rmt_ji2br_290",
25
- "tabs-content": "awsui_tabs-content_14rmt_ji2br_547",
26
- "fit-height": "awsui_fit-height_14rmt_ji2br_551",
27
- "tabs-content-active": "awsui_tabs-content-active_14rmt_ji2br_557",
28
- "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_ji2br_571",
29
- "with-paddings": "awsui_with-paddings_14rmt_ji2br_571",
30
- "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_ji2br_582",
31
- "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_ji2br_593",
32
- "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_ji2br_597"
5
+ "tabs-header": "awsui_tabs-header_14rmt_1xftp_290",
6
+ "tabs-header-list": "awsui_tabs-header-list_14rmt_1xftp_298",
7
+ "pagination-button": "awsui_pagination-button_14rmt_1xftp_316",
8
+ "pagination-button-left": "awsui_pagination-button-left_14rmt_1xftp_323",
9
+ "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1xftp_326",
10
+ "pagination-button-right": "awsui_pagination-button-right_14rmt_1xftp_330",
11
+ "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1xftp_333",
12
+ "tabs-tab": "awsui_tabs-tab_14rmt_1xftp_338",
13
+ "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1xftp_348",
14
+ "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1xftp_359",
15
+ "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1xftp_370",
16
+ "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1xftp_370",
17
+ "refresh": "awsui_refresh_14rmt_1xftp_374",
18
+ "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1xftp_378",
19
+ "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1xftp_420",
20
+ "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1xftp_498",
21
+ "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1xftp_505",
22
+ "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1xftp_509",
23
+ "root": "awsui_root_14rmt_1xftp_513",
24
+ "tabs": "awsui_tabs_14rmt_1xftp_290",
25
+ "tabs-content": "awsui_tabs-content_14rmt_1xftp_551",
26
+ "fit-height": "awsui_fit-height_14rmt_1xftp_555",
27
+ "tabs-content-active": "awsui_tabs-content-active_14rmt_1xftp_561",
28
+ "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1xftp_575",
29
+ "with-paddings": "awsui_with-paddings_14rmt_1xftp_575",
30
+ "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1xftp_586",
31
+ "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1xftp_597",
32
+ "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1xftp_601"
33
33
  };
34
34