@cloudscape-design/components 3.0.664 → 3.0.666

package/app-layout/visual-refresh-toolbar/toolbar/index.js

@@ -0,0 +1,52 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import testutilStyles from '../../test-classes/styles.css.js';
+import { DrawerTriggers } from './drawer-triggers';
+import TriggerButton from './trigger-button';
+import { ToolbarSlot } from '../skeleton/slot-wrappers';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+export function AppLayoutToolbarImplementation({ appLayoutInternals }) {
+    var _a;
+    const { ariaLabels, breadcrumbs, drawers, toolbarRef, verticalOffsets, onNavigationToggle, isMobile, toolbarState, setToolbarState, navigationOpen, navigation, navigationFocusControl, splitPanelToggleConfig, } = appLayoutInternals;
+    // TODO: expose configuration property
+    const pinnedToolbar = false;
+    useEffect(() => {
+        let lastScrollY = window.scrollY;
+        /* istanbul ignore next not testable in JSDOM */
+        const updateScrollDirection = () => {
+            if (pinnedToolbar) {
+                setToolbarState('show');
+                return;
+            }
+            const scrollY = window.scrollY;
+            // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page
+            const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';
+            // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll
+            if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {
+                setToolbarState(direction);
+            }
+            lastScrollY = scrollY > 0 ? scrollY : 0;
+        };
+        window.addEventListener('scroll', updateScrollDirection);
+        return () => {
+            window.removeEventListener('scroll', updateScrollDirection);
+        };
+    }, [pinnedToolbar, setToolbarState, toolbarState]);
+    const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;
+    return (React.createElement(ToolbarSlot, { ref: toolbarRef, className: clsx(styles['universal-toolbar'], {
+            [testutilStyles['mobile-bar']]: isMobile,
+            [styles['toolbar-hidden']]: toolbarHidden,
+        }), style: {
+            insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,
+        } },
+        React.createElement("div", { className: styles['toolbar-container'] },
+            navigation && !navigationOpen && (React.createElement("nav", { "aria-hidden": navigationOpen, className: clsx(styles['universal-toolbar-nav'], { [testutilStyles['drawer-closed']]: !navigationOpen }) },
+                React.createElement(TriggerButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: navigationOpen ? undefined : false, iconName: "menu", className: testutilStyles['navigation-toggle'], onClick: () => onNavigationToggle(!navigationOpen), ref: navigationFocusControl.refs.toggle, selected: navigationOpen }))),
+            breadcrumbs && (React.createElement("div", { className: clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) }, breadcrumbs)),
+            (drawers.length > 0 || splitPanelToggleConfig.displayed) && (React.createElement("span", { className: clsx(styles['universal-toolbar-drawers']) }, React.createElement(DrawerTriggers, { appLayoutInternals: appLayoutInternals }))))));
+}
+export const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);
+//# sourceMappingURL=index.js.map

package/app-layout/visual-refresh-toolbar/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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, { useEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport { DrawerTriggers } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\n\ninterface AppLayoutToolbarImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutToolbarImplementation({ appLayoutInternals }: AppLayoutToolbarImplementationProps) {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    drawers,\n    toolbarRef,\n    verticalOffsets,\n    onNavigationToggle,\n    isMobile,\n    toolbarState,\n    setToolbarState,\n    navigationOpen,\n    navigation,\n    navigationFocusControl,\n    splitPanelToggleConfig,\n  } = appLayoutInternals;\n  // TODO: expose configuration property\n  const pinnedToolbar = false;\n\n  useEffect(() => {\n    let lastScrollY = window.scrollY;\n\n    /* istanbul ignore next not testable in JSDOM */\n    const updateScrollDirection = () => {\n      if (pinnedToolbar) {\n        setToolbarState('show');\n        return;\n      }\n      const scrollY = window.scrollY;\n      // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n      const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n      // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n      if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n        setToolbarState(direction);\n      }\n      lastScrollY = scrollY > 0 ? scrollY : 0;\n    };\n\n    window.addEventListener('scroll', updateScrollDirection);\n    return () => {\n      window.removeEventListener('scroll', updateScrollDirection);\n    };\n  }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n  const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n  return (\n    <ToolbarSlot\n      ref={toolbarRef}\n      className={clsx(styles['universal-toolbar'], {\n        [testutilStyles['mobile-bar']]: isMobile,\n        [styles['toolbar-hidden']]: toolbarHidden,\n      })}\n      style={{\n        insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n      }}\n    >\n      <div className={styles['toolbar-container']}>\n        {navigation && !navigationOpen && (\n          <nav\n            aria-hidden={navigationOpen}\n            className={clsx(styles['universal-toolbar-nav'], { [testutilStyles['drawer-closed']]: !navigationOpen })}\n          >\n            <TriggerButton\n              ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n              ariaExpanded={navigationOpen ? undefined : false}\n              iconName=\"menu\"\n              className={testutilStyles['navigation-toggle']}\n              onClick={() => onNavigationToggle(!navigationOpen)}\n              ref={navigationFocusControl.refs.toggle}\n              selected={navigationOpen}\n            />\n          </nav>\n        )}\n        {breadcrumbs && (\n          <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>{breadcrumbs}</div>\n        )}\n        {(drawers.length > 0 || splitPanelToggleConfig.displayed) && (\n          <span className={clsx(styles['universal-toolbar-drawers'])}>\n            {<DrawerTriggers appLayoutInternals={appLayoutInternals} />}\n          </span>\n        )}\n      </div>\n    </ToolbarSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}

package/app-layout/visual-refresh-toolbar/toolbar/styles.css.js

@@ -0,0 +1,17 @@
+
+    import './styles.scoped.css';
+    export default {
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_18urq_97",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_18urq_118",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_18urq_121",
+  "toolbar-container": "awsui_toolbar-container_1kzri_18urq_124",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_18urq_133",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_18urq_137",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_18urq_142",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_18urq_149",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_18urq_193",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_1kzri_18urq_200",
+  "has-open-drawer": "awsui_has-open-drawer_1kzri_18urq_200",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_18urq_193"
+};
+  

package/app-layout/visual-refresh-toolbar/toolbar/styles.scoped.css

@@ -0,0 +1,214 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_universal-toolbar_1kzri_18urq_97:not(#\9) {
+  background-color: var(--color-background-layout-panel-content-t82vgh, #ffffff);
+  border-block-end: 1px solid var(--color-border-divider-panel-bottom-dwyqvg, #b6bec9);
+  box-sizing: border-box;
+  padding-block: 0;
+  padding-inline: var(--space-m-udix3p, 16px);
+  position: sticky;
+  z-index: 840;
+  transition: ease var(--motion-duration-refresh-only-slow-zbvbxt, 250ms);
+  transition-property: inset-block-start, opacity;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_universal-toolbar_1kzri_18urq_97:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_universal-toolbar_1kzri_18urq_97:not(#\9), .awsui-mode-entering .awsui_universal-toolbar_1kzri_18urq_97:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_universal-toolbar_1kzri_18urq_97.awsui_disable-body-scroll_1kzri_18urq_118:not(#\9) {
+  inset-block-start: 0px;
+}
+.awsui_universal-toolbar_1kzri_18urq_97.awsui_toolbar-hidden_1kzri_18urq_121:not(#\9) {
+  opacity: 0;
+}
+.awsui_universal-toolbar_1kzri_18urq_97 > .awsui_toolbar-container_1kzri_18urq_124:not(#\9) {
+  block-size: 48px;
+  align-items: center;
+  display: grid;
+  column-gap: var(--space-static-xs-7sfb63, 8px);
+  inline-size: 100%;
+  grid-template-columns: min-content auto minmax(140px, 1fr);
+  grid-template-rows: 1fr;
+}
+.awsui_universal-toolbar_1kzri_18urq_97 > .awsui_toolbar-container_1kzri_18urq_124 > .awsui_universal-toolbar-nav_1kzri_18urq_133:not(#\9) {
+  grid-column: 1;
+  padding-inline-end: var(--space-static-xxs-82cdfi, 4px);
+}
+.awsui_universal-toolbar_1kzri_18urq_97 > .awsui_toolbar-container_1kzri_18urq_124 > .awsui_universal-toolbar-breadcrumbs_1kzri_18urq_137:not(#\9) {
+  grid-column: 2;
+  background-color: transparent;
+  flex: 1 0;
+}
+.awsui_universal-toolbar_1kzri_18urq_97 > .awsui_toolbar-container_1kzri_18urq_124 > .awsui_universal-toolbar-drawers_1kzri_18urq_142:not(#\9) {
+  grid-column: 3;
+  column-gap: var(--space-static-xs-7sfb63, 8px);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.awsui_drawers-desktop-triggers-container_1kzri_18urq_149:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 400;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  font-size: var(--font-size-body-m-x4okxb, 14px);
+  line-height: var(--line-height-body-m-30ar75, 20px);
+  color: var(--color-text-body-default-at06ol, #000716);
+  font-weight: 400;
+  font-family: var(--font-family-base-dnvic8, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  background-color: transparent;
+  box-sizing: border-box;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  overscroll-behavior-y: contain;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  overscroll-behavior-x: contain;
+  inline-size: 100%;
+}
+
+.awsui_drawers-trigger-content_1kzri_18urq_193:not(#\9) {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--space-xs-zb16t3, 8px);
+  justify-content: flex-end;
+}
+.awsui_drawers-trigger-content_1kzri_18urq_193:not(#\9):not(.awsui_has-multiple-triggers_1kzri_18urq_200).awsui_has-open-drawer_1kzri_18urq_200 {
+  opacity: 0;
+}
+.awsui_drawers-trigger-content_1kzri_18urq_193:not(#\9):not(.awsui_has-multiple-triggers_1kzri_18urq_200):not(.awsui_has-open-drawer_1kzri_18urq_200) {
+  opacity: 1;
+}
+
+@media (max-width: 688px) {
+  .awsui_drawers-trigger_1kzri_18urq_193:not(#\9) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js

@@ -0,0 +1,18 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "universal-toolbar": "awsui_universal-toolbar_1kzri_18urq_97",
+  "disable-body-scroll": "awsui_disable-body-scroll_1kzri_18urq_118",
+  "toolbar-hidden": "awsui_toolbar-hidden_1kzri_18urq_121",
+  "toolbar-container": "awsui_toolbar-container_1kzri_18urq_124",
+  "universal-toolbar-nav": "awsui_universal-toolbar-nav_1kzri_18urq_133",
+  "universal-toolbar-breadcrumbs": "awsui_universal-toolbar-breadcrumbs_1kzri_18urq_137",
+  "universal-toolbar-drawers": "awsui_universal-toolbar-drawers_1kzri_18urq_142",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1kzri_18urq_149",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_1kzri_18urq_193",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_1kzri_18urq_200",
+  "has-open-drawer": "awsui_has-open-drawer_1kzri_18urq_200",
+  "drawers-trigger": "awsui_drawers-trigger_1kzri_18urq_193"
+};
+  

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ButtonProps } from '../../../../button/interfaces';
+import { IconProps } from '../../../../icon/interfaces';
+export interface TriggerButtonProps {
+    ariaLabel?: string;
+    className?: string;
+    iconName?: IconProps.Name;
+    iconSvg?: React.ReactNode;
+    ariaExpanded: boolean | undefined;
+    ariaControls?: string;
+    testId?: string;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    selected?: boolean;
+    badge?: boolean;
+    disabled?: boolean;
+    highContrastHeader?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<TriggerButtonProps & React.RefAttributes<ButtonProps.Ref>>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;;AAiDD,wBAA+C"}

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import Icon from '../../../../icon/internal';
+import styles from './styles.css.js';
+function TriggerButton({ ariaLabel, className, iconName, iconSvg, ariaExpanded, ariaControls, onClick, testId, badge, selected, disabled, }, ref) {
+    return (React.createElement("div", { className: styles['trigger-wrapper'] },
+        React.createElement("button", { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-haspopup": true, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, className: clsx(styles.trigger, {
+                [styles.selected]: selected,
+                [styles.badge]: badge,
+            }, className), onClick: onClick, ref: ref, type: "button", "data-testid": testId },
+            React.createElement("span", { className: clsx(badge && styles['trigger-badge-wrapper']) },
+                React.createElement(Icon, { name: iconName, svg: iconSvg }))),
+        badge && React.createElement("div", { className: styles.dot })));
+}
+export default React.forwardRef(TriggerButton);
+//# sourceMappingURL=index.js.map

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,2BAA2B,CAAC;AAC7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAmBrC,SAAS,aAAa,CACpB,EACE,SAAS,EACT,SAAS,EACT,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,GACW,EACrB,GAA+B;IAE/B,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;QACvC,iDACiB,YAAY,mBACZ,YAAY,mBACZ,IAAI,gBACP,SAAS,mBACN,QAAQ,EACvB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;gBAC3B,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK;aACtB,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAmC,EACxC,IAAI,EAAC,QAAQ,iBACA,MAAM;YAEnB,8BAAM,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAAC;gBAC7D,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CACjC,CACA;QACR,KAAK,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,GAAG,GAAI,CACpC,CACP,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport Icon from '../../../../icon/internal';\nimport styles from './styles.css.js';\nimport { ButtonProps } from '../../../../button/interfaces';\nimport { IconProps } from '../../../../icon/interfaces';\n\nexport interface TriggerButtonProps {\n  ariaLabel?: string;\n  className?: string;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  ariaExpanded: boolean | undefined;\n  ariaControls?: string;\n  testId?: string;\n  onClick: React.MouseEventHandler<HTMLButtonElement>;\n  selected?: boolean;\n  badge?: boolean;\n  disabled?: boolean;\n  highContrastHeader?: boolean;\n}\n\nfunction TriggerButton(\n  {\n    ariaLabel,\n    className,\n    iconName,\n    iconSvg,\n    ariaExpanded,\n    ariaControls,\n    onClick,\n    testId,\n    badge,\n    selected,\n    disabled,\n  }: TriggerButtonProps,\n  ref: React.Ref<ButtonProps.Ref>\n) {\n  return (\n    <div className={styles['trigger-wrapper']}>\n      <button\n        aria-expanded={ariaExpanded}\n        aria-controls={ariaControls}\n        aria-haspopup={true}\n        aria-label={ariaLabel}\n        aria-disabled={disabled}\n        disabled={disabled}\n        className={clsx(\n          styles.trigger,\n          {\n            [styles.selected]: selected,\n            [styles.badge]: badge,\n          },\n          className\n        )}\n        onClick={onClick}\n        ref={ref as React.Ref<HTMLButtonElement>}\n        type=\"button\"\n        data-testid={testId}\n      >\n        <span className={clsx(badge && styles['trigger-badge-wrapper'])}>\n          <Icon name={iconName} svg={iconSvg} />\n        </span>\n      </button>\n      {badge && <div className={styles.dot} />}\n    </div>\n  );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js

@@ -0,0 +1,11 @@
+
+    import './styles.scoped.css';
+    export default {
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_1878d_97",
+  "trigger": "awsui_trigger_lpshu_1878d_97",
+  "selected": "awsui_selected_lpshu_1878d_192",
+  "badge": "awsui_badge_lpshu_1878d_220",
+  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_1878d_224",
+  "dot": "awsui_dot_lpshu_1878d_232"
+};
+  

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scoped.css

@@ -0,0 +1,243 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_trigger-badge-wrapper_lpshu_1878d_97:not(#\9) {
+  background: transparent;
+  color: var(--color-text-interactive-default-lnx6lk, #414d5c);
+  border-block: var(--border-field-width-09w7vk, 2px) solid transparent;
+  border-inline: var(--border-field-width-09w7vk, 2px) solid transparent;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  block-size: var(--space-layout-toggle-diameter-hb85rk, 36px);
+  inline-size: var(--space-layout-toggle-diameter-hb85rk, 36px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  clip-path: path("M34.2193 10.1845C33.3961 10.579 32.4739 10.8 31.5 10.8C28.0206 10.8 25.2 7.97939 25.2 4.5C25.2 3.52614 25.421 2.6039 25.8155 1.78066C23.4518 0.639587 20.8006 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36 27.9411 36 18C36 15.1994 35.3604 12.5482 34.2193 10.1845Z");
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+}
+.awsui_trigger-badge-wrapper_lpshu_1878d_97:not(#\9):hover {
+  background: var(--color-background-input-disabled-ab59a3, #e9ebed);
+  color: var(--color-text-interactive-hover-mj8add, #000716);
+  border-color: var(--color-background-input-disabled-ab59a3, #e9ebed);
+}
+.awsui_trigger-badge-wrapper_lpshu_1878d_97:not(#\9):active {
+  background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+  color: var(--color-text-interactive-hover-mj8add, #000716);
+  border-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+}
+.awsui_trigger-badge-wrapper_lpshu_1878d_97:not(#\9):dir(rtl) {
+  clip-path: path("M1.78066 10.1845C2.6039 10.579 3.52615 10.8 4.5 10.8C7.97939 10.8 10.8 7.97939 10.8 4.5C10.8 3.52614 10.579 2.6039 10.1845 1.78066C12.5482 0.639587 15.1994 0 18 0C27.9411 0 36 8.05887 36 18C36 27.9411 27.9411 36 18 36C8.05887 36 0 27.9411 0 18C0 15.1994 0.639587 12.5482 1.78066 10.1845Z");
+}
+
+/*
+Warning! If these design tokens for width change it will adversely impact 
+the calculation used to determine the Split Panel maximum width in the 
+handleSplitPanelMaxWidth function in the context.
+*/
+.awsui_trigger_lpshu_1878d_97:not(#\9) {
+  background: transparent;
+  color: var(--color-text-interactive-default-lnx6lk, #414d5c);
+  border-block: var(--border-field-width-09w7vk, 2px) solid transparent;
+  border-inline: var(--border-field-width-09w7vk, 2px) solid transparent;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  block-size: var(--space-layout-toggle-diameter-hb85rk, 36px);
+  inline-size: var(--space-layout-toggle-diameter-hb85rk, 36px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.awsui_trigger_lpshu_1878d_97:not(#\9):hover {
+  background: var(--color-background-input-disabled-ab59a3, #e9ebed);
+  color: var(--color-text-interactive-hover-mj8add, #000716);
+  border-color: var(--color-background-input-disabled-ab59a3, #e9ebed);
+}
+.awsui_trigger_lpshu_1878d_97:not(#\9):active {
+  background: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+  color: var(--color-text-interactive-hover-mj8add, #000716);
+  border-color: var(--color-background-control-disabled-pwkvgd, #d1d5db);
+}
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1878d_97:not(#\9):focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1878d_97:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(3px - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_1878d_97:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * 3px);
+  inset-block-start: calc(-1 * 3px);
+  inline-size: calc(100% + 3px + 3px);
+  block-size: calc(100% + 3px + 3px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-b2ntyl, #0972d3);
+}
+.awsui_trigger_lpshu_1878d_97:not(#\9):focus {
+  outline: none;
+}
+.awsui_trigger_lpshu_1878d_97.awsui_selected_lpshu_1878d_192:not(#\9) {
+  background: var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
+  color: var(--color-text-layout-toggle-selected-b93usl, #ffffff);
+  border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
+  border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
+}
+.awsui_trigger_lpshu_1878d_97.awsui_selected_lpshu_1878d_192:not(#\9):hover {
+  background: var(--color-background-layout-toggle-selected-hover-kjak2q, #065299);
+  border-color: var(--color-background-layout-toggle-selected-hover-kjak2q, #065299);
+}
+.awsui_trigger_lpshu_1878d_97.awsui_selected_lpshu_1878d_192:not(#\9):active {
+  background: var(--color-background-layout-toggle-selected-active-xfk480, #0972d3);
+  border-color: var(--color-background-layout-toggle-selected-active-xfk480, #0972d3);
+}
+.awsui_trigger_lpshu_1878d_97.awsui_selected_lpshu_1878d_192 > .awsui_trigger-badge-wrapper_lpshu_1878d_97:not(#\9) {
+  background: var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
+  color: var(--color-text-layout-toggle-selected-b93usl, #ffffff);
+  border-block: var(--border-field-width-09w7vk, 2px) solid var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
+  border-inline: var(--border-field-width-09w7vk, 2px) solid var(--color-background-layout-toggle-selected-default-caco0q, #0972d3);
+}
+.awsui_trigger_lpshu_1878d_97.awsui_selected_lpshu_1878d_192 > .awsui_trigger-badge-wrapper_lpshu_1878d_97:not(#\9):hover {
+  background: var(--color-background-layout-toggle-selected-hover-kjak2q, #065299);
+  border-color: var(--color-background-layout-toggle-selected-hover-kjak2q, #065299);
+}
+.awsui_trigger_lpshu_1878d_97.awsui_selected_lpshu_1878d_192 > .awsui_trigger-badge-wrapper_lpshu_1878d_97:not(#\9):active {
+  background: var(--color-background-layout-toggle-selected-active-xfk480, #0972d3);
+  border-color: var(--color-background-layout-toggle-selected-active-xfk480, #0972d3);
+}
+.awsui_trigger_lpshu_1878d_97.awsui_badge_lpshu_1878d_220:not(#\9), .awsui_trigger_lpshu_1878d_97.awsui_badge_lpshu_1878d_220:not(#\9):hover, .awsui_trigger_lpshu_1878d_97.awsui_badge_lpshu_1878d_220:not(#\9):active {
+  background: transparent;
+}
+
+.awsui_trigger-wrapper_lpshu_1878d_224:not(#\9) {
+  position: relative;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+}
+
+.awsui_dot_lpshu_1878d_232:not(#\9) {
+  position: absolute;
+  inline-size: 9px;
+  block-size: 9px;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  border-end-start-radius: 8px;
+  border-end-end-radius: 8px;
+  background-color: var(--color-background-badge-icon-q1kfox, #d91515);
+  inset-block-start: 1px;
+  inset-inline-end: 1px;
+}

package/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js

@@ -0,0 +1,12 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_1878d_97",
+  "trigger": "awsui_trigger_lpshu_1878d_97",
+  "selected": "awsui_selected_lpshu_1878d_192",
+  "badge": "awsui_badge_lpshu_1878d_220",
+  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_1878d_224",
+  "dot": "awsui_dot_lpshu_1878d_232"
+};
+