@cloudscape-design/components-themeable 3.0.350 → 3.0.352

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 (48) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/app-layout/constants.scss +3 -8
  3. package/lib/internal/scss/app-layout/drawer/styles.scss +26 -35
  4. package/lib/internal/scss/app-layout/mobile-toolbar/styles.scss +9 -22
  5. package/lib/internal/scss/app-layout/toggles/styles.scss +18 -0
  6. package/lib/internal/template/app-layout/drawer/index.js +6 -5
  7. package/lib/internal/template/app-layout/drawer/index.js.map +1 -1
  8. package/lib/internal/template/app-layout/drawer/interfaces.d.ts +6 -3
  9. package/lib/internal/template/app-layout/drawer/interfaces.d.ts.map +1 -1
  10. package/lib/internal/template/app-layout/drawer/interfaces.js.map +1 -1
  11. package/lib/internal/template/app-layout/drawer/styles.css.js +10 -10
  12. package/lib/internal/template/app-layout/drawer/styles.scoped.css +32 -35
  13. package/lib/internal/template/app-layout/drawer/styles.selectors.js +10 -10
  14. package/lib/internal/template/app-layout/mobile-toolbar/index.d.ts.map +1 -1
  15. package/lib/internal/template/app-layout/mobile-toolbar/index.js +6 -5
  16. package/lib/internal/template/app-layout/mobile-toolbar/index.js.map +1 -1
  17. package/lib/internal/template/app-layout/mobile-toolbar/styles.css.js +8 -6
  18. package/lib/internal/template/app-layout/mobile-toolbar/styles.scoped.css +11 -23
  19. package/lib/internal/template/app-layout/mobile-toolbar/styles.selectors.js +8 -6
  20. package/lib/internal/template/app-layout/toggles/index.d.ts +3 -1
  21. package/lib/internal/template/app-layout/toggles/index.d.ts.map +1 -1
  22. package/lib/internal/template/app-layout/toggles/index.js +6 -3
  23. package/lib/internal/template/app-layout/toggles/index.js.map +1 -1
  24. package/lib/internal/template/app-layout/toggles/interfaces.d.ts +3 -2
  25. package/lib/internal/template/app-layout/toggles/interfaces.d.ts.map +1 -1
  26. package/lib/internal/template/app-layout/toggles/interfaces.js.map +1 -1
  27. package/lib/internal/template/app-layout/toggles/styles.css.js +2 -1
  28. package/lib/internal/template/app-layout/toggles/styles.scoped.css +31 -1
  29. package/lib/internal/template/app-layout/toggles/styles.selectors.js +2 -1
  30. package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map +1 -1
  31. package/lib/internal/template/app-layout/visual-refresh/drawers.js +2 -2
  32. package/lib/internal/template/app-layout/visual-refresh/drawers.js.map +1 -1
  33. package/lib/internal/template/app-layout/visual-refresh/trigger-button.d.ts +1 -0
  34. package/lib/internal/template/app-layout/visual-refresh/trigger-button.d.ts.map +1 -1
  35. package/lib/internal/template/app-layout/visual-refresh/trigger-button.js +2 -2
  36. package/lib/internal/template/app-layout/visual-refresh/trigger-button.js.map +1 -1
  37. package/lib/internal/template/internal/base-component/styles.scoped.css +0 -11
  38. package/lib/internal/template/internal/environment.js +1 -1
  39. package/lib/internal/template/internal/generated/theming/index.cjs +0 -27
  40. package/lib/internal/template/internal/generated/theming/index.js +0 -27
  41. package/lib/internal/template/test-utils/dom/app-layout/index.d.ts +1 -0
  42. package/lib/internal/template/test-utils/dom/app-layout/index.js +3 -0
  43. package/lib/internal/template/test-utils/dom/app-layout/index.js.map +1 -1
  44. package/lib/internal/template/test-utils/selectors/app-layout/index.d.ts +1 -0
  45. package/lib/internal/template/test-utils/selectors/app-layout/index.js +3 -0
  46. package/lib/internal/template/test-utils/selectors/app-layout/index.js.map +1 -1
  47. package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
  48. package/package.json +1 -1
package/lib/internal/template/app-layout/mobile-toolbar/styles.css.js CHANGED
@@ -1,11 +1,13 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "block-body-scroll": "awsui_block-body-scroll_19d8l_ldjmq_97",
5
- "mobile-bar": "awsui_mobile-bar_19d8l_ldjmq_101",
6
- "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_ldjmq_115",
7
- "mobile-trigger-with-drawers": "awsui_mobile-trigger-with-drawers_19d8l_ldjmq_122",
8
- "mobile-toggle": "awsui_mobile-toggle_19d8l_ldjmq_128",
9
- "mobile-toggle-with-drawers": "awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138"
4
+ "block-body-scroll": "awsui_block-body-scroll_19d8l_1363s_97",
5
+ "mobile-bar": "awsui_mobile-bar_19d8l_1363s_101",
6
+ "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1363s_114",
7
+ "mobile-toggle": "awsui_mobile-toggle_19d8l_1363s_121",
8
+ "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_1363s_129",
9
+ "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_1363s_132",
10
+ "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_1363s_132",
11
+ "drawers-container": "awsui_drawers-container_19d8l_1363s_139"
10
12
  };
11
13
 
package/lib/internal/template/app-layout/mobile-toolbar/styles.scoped.css CHANGED
@@ -94,12 +94,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
94
94
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
95
95
  SPDX-License-Identifier: Apache-2.0
96
96
  */
97
- .awsui_block-body-scroll_19d8l_ldjmq_97:not(#\9) {
97
+ .awsui_block-body-scroll_19d8l_1363s_97:not(#\9) {
98
98
  overflow: hidden;
99
99
  }
100
100
 
101
- .awsui_mobile-bar_19d8l_ldjmq_101:not(#\9) {
102
- /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
101
+ .awsui_mobile-bar_19d8l_1363s_101:not(#\9) {
103
102
  position: sticky;
104
103
  display: flex;
105
104
  align-items: center;
@@ -112,43 +111,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
112
111
  height: calc(2 * var(--space-m-2wfcpy, 16px) + var(--space-scaled-xs-sg3tfb, 8px));
113
112
  }
114
113
 
115
- .awsui_mobile-bar-breadcrumbs_19d8l_ldjmq_115:not(#\9) {
114
+ .awsui_mobile-bar-breadcrumbs_19d8l_1363s_114:not(#\9) {
116
115
  min-width: 0;
117
116
  flex: 1;
118
117
  margin-left: var(--space-m-2wfcpy, 16px);
119
118
  margin-right: var(--space-m-2wfcpy, 16px);
120
119
  }
121
120
 
122
- .awsui_mobile-trigger-with-drawers_19d8l_ldjmq_122:not(#\9) {
123
- width: 40px;
124
- display: flex;
125
- justify-content: center;
126
- }
127
-
128
- .awsui_mobile-toggle_19d8l_ldjmq_128:not(#\9) {
121
+ .awsui_mobile-toggle_19d8l_1363s_121:not(#\9) {
129
122
  box-sizing: border-box;
130
123
  cursor: pointer;
131
124
  z-index: 1;
132
125
  padding: var(--space-xxs-xx079q, 4px) 7px;
133
126
  width: 40px;
127
+ color: var(--color-text-interactive-default-9x433a, #545b64);
134
128
  }
135
- .awsui_mobile-toggle_19d8l_ldjmq_128:not(#\9):first-child {
129
+ .awsui_mobile-toggle-type-navigation_19d8l_1363s_129:not(#\9) {
136
130
  border-right: 1px solid var(--color-border-layout-rmnayj, #d5dbdb);
137
131
  }
138
- .awsui_mobile-toggle_19d8l_ldjmq_128:not(#\9):last-child:not(.awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138) {
132
+ .awsui_mobile-toggle-type-tools_19d8l_1363s_132:not(#\9), .awsui_mobile-toggle-type-drawer_19d8l_1363s_132:not(#\9) {
139
133
  border-left: 1px solid var(--color-border-layout-rmnayj, #d5dbdb);
140
134
  }
141
- .awsui_mobile-toggle_19d8l_ldjmq_128:not(#\9):hover:not(.awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138) {
135
+ .awsui_mobile-toggle_19d8l_1363s_121:not(#\9):hover {
142
136
  background: var(--color-background-layout-panel-hover-yn48lk, #eaeded);
143
137
  }
144
- .awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138:not(#\9) {
145
- display: flex;
146
- width: auto;
147
- padding: 0;
148
- height: 100%;
149
- }
150
- .awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138 > .awsui_mobile-trigger-with-drawers_19d8l_ldjmq_122:not(#\9) {
151
- border-left: 1px solid var(--color-border-layout-rmnayj, #d5dbdb);
138
+
139
+ .awsui_drawers-container_19d8l_1363s_139:not(#\9) {
152
140
  display: flex;
153
- align-items: center;
141
+ align-items: stretch;
154
142
  }
package/lib/internal/template/app-layout/mobile-toolbar/styles.selectors.js CHANGED
@@ -2,11 +2,13 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "block-body-scroll": "awsui_block-body-scroll_19d8l_ldjmq_97",
6
- "mobile-bar": "awsui_mobile-bar_19d8l_ldjmq_101",
7
- "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_ldjmq_115",
8
- "mobile-trigger-with-drawers": "awsui_mobile-trigger-with-drawers_19d8l_ldjmq_122",
9
- "mobile-toggle": "awsui_mobile-toggle_19d8l_ldjmq_128",
10
- "mobile-toggle-with-drawers": "awsui_mobile-toggle-with-drawers_19d8l_ldjmq_138"
5
+ "block-body-scroll": "awsui_block-body-scroll_19d8l_1363s_97",
6
+ "mobile-bar": "awsui_mobile-bar_19d8l_1363s_101",
7
+ "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1363s_114",
8
+ "mobile-toggle": "awsui_mobile-toggle_19d8l_1363s_121",
9
+ "mobile-toggle-type-navigation": "awsui_mobile-toggle-type-navigation_19d8l_1363s_129",
10
+ "mobile-toggle-type-tools": "awsui_mobile-toggle-type-tools_19d8l_1363s_132",
11
+ "mobile-toggle-type-drawer": "awsui_mobile-toggle-type-drawer_19d8l_1363s_132",
12
+ "drawers-container": "awsui_drawers-container_19d8l_1363s_139"
11
13
  };
12
14
 
package/lib/internal/template/app-layout/toggles/index.d.ts CHANGED
@@ -22,7 +22,9 @@ export declare const togglesConfig: {
22
22
  };
23
23
  };
24
24
  };
25
- export declare const AppLayoutButton: React.ForwardRefExoticComponent<AppLayoutButtonProps & React.RefAttributes<ButtonProps.Ref>>;
25
+ export declare const ToggleButton: React.ForwardRefExoticComponent<AppLayoutButtonProps & React.RefAttributes<{
26
+ focus(): void;
27
+ }>>;
26
28
  interface CloseButtonProps {
27
29
  className?: string;
28
30
  ariaLabel: string | undefined;
package/lib/internal/template/app-layout/toggles/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,eAAe,8FAqB3B,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FAevB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,YAAY;aAGK,IAAI;GAkBjC,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FAgBvB,CAAC"}
package/lib/internal/template/app-layout/toggles/index.js CHANGED
@@ -1,7 +1,9 @@
1
1
  // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2
2
  // SPDX-License-Identifier: Apache-2.0
3
+ import clsx from 'clsx';
3
4
  import React from 'react';
4
5
  import { InternalButton } from '../../button/internal';
6
+ import InternalIcon from '../../icon/internal';
5
7
  import styles from './styles.css.js';
6
8
  export const togglesConfig = {
7
9
  navigation: {
@@ -23,11 +25,12 @@ export const togglesConfig = {
23
25
  }),
24
26
  },
25
27
  };
26
- export const AppLayoutButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, onClick }, ref) => {
27
- return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, iconSvg: iconSvg, disabled: disabled, ariaExpanded: ariaExpanded ? undefined : false, __nativeAttributes: { 'aria-haspopup': ariaExpanded ? undefined : true } }));
28
+ export const ToggleButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick }, ref) => {
29
+ return (React.createElement("button", { ref: ref, className: clsx(className, styles['toggle-button']), "aria-label": ariaLabel, type: "button", onClick: onClick, disabled: disabled, "aria-expanded": ariaExpanded ? undefined : false, "aria-haspopup": ariaExpanded ? undefined : true, "data-testid": testId },
30
+ React.createElement(InternalIcon, { svg: iconSvg, name: iconName })));
28
31
  });
29
32
  export const CloseButton = React.forwardRef(({ className, ariaLabel, onClick }, ref) => {
30
33
  return (React.createElement("span", { className: styles['close-button'] },
31
- React.createElement(AppLayoutButton, { ref: ref, className: className, ariaExpanded: true, ariaLabel: ariaLabel, iconName: "close", onClick: onClick })));
34
+ React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", iconName: "close", onClick: onClick })));
32
35
  });
33
36
  //# sourceMappingURL=index.js.map
package/lib/internal/template/app-layout/toggles/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;YAClC,UAAU,EAAE,MAAM,CAAC,eAAe;SACnC,CAAC;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,KAAK;YACvB,SAAS,EAAE,MAAM,CAAC,WAAW;YAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC;KACH;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAwB,EAClG,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC9C,kBAAkB,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GACxE,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n navigation: {\n TagName: 'nav',\n iconName: 'menu',\n getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n mainLabel: labels.navigation,\n openLabel: labels.navigationToggle,\n closeLabel: labels.navigationClose,\n }),\n },\n tools: {\n TagName: 'aside',\n iconName: 'status-info',\n getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n mainLabel: labels.tools,\n openLabel: labels.toolsToggle,\n closeLabel: labels.toolsClose,\n }),\n },\n} as const;\n\nexport const AppLayoutButton = React.forwardRef(\n (\n { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, onClick }: AppLayoutButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n return (\n <InternalButton\n ref={ref}\n className={className}\n ariaLabel={ariaLabel}\n variant=\"icon\"\n formAction=\"none\"\n onClick={onClick}\n iconName={iconName}\n iconSvg={iconSvg}\n disabled={disabled}\n ariaExpanded={ariaExpanded ? undefined : false}\n __nativeAttributes={{ 'aria-haspopup': ariaExpanded ? undefined : true }}\n />\n );\n }\n);\n\ninterface CloseButtonProps {\n className?: string;\n ariaLabel: string | undefined;\n onClick: () => void;\n}\n\nexport const CloseButton = React.forwardRef(\n ({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n return (\n <span className={styles['close-button']}>\n <AppLayoutButton\n ref={ref}\n className={className}\n ariaExpanded={true}\n ariaLabel={ariaLabel}\n iconName=\"close\"\n onClick={onClick}\n />\n </span>\n );\n }\n);\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAG/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;YAClC,UAAU,EAAE,MAAM,CAAC,eAAe;SACnC,CAAC;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,KAAK;YACvB,SAAS,EAAE,MAAM,CAAC,WAAW;YAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC;KACH;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAwB,EAC1G,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,gCACE,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,gBACvC,SAAS,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,mBACH,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,mBAChC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,iBACjC,MAAM;QAEnB,oBAAC,YAAY,IAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,GAAI,CACvC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport InternalIcon from '../../icon/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n navigation: {\n TagName: 'nav',\n iconName: 'menu',\n getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n mainLabel: labels.navigation,\n openLabel: labels.navigationToggle,\n closeLabel: labels.navigationClose,\n }),\n },\n tools: {\n TagName: 'aside',\n iconName: 'status-info',\n getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n mainLabel: labels.tools,\n openLabel: labels.toolsToggle,\n closeLabel: labels.toolsClose,\n }),\n },\n} as const;\n\nexport const ToggleButton = React.forwardRef(\n (\n { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick }: AppLayoutButtonProps,\n ref: React.Ref<{ focus(): void }>\n ) => {\n return (\n <button\n ref={ref as React.Ref<HTMLButtonElement>}\n className={clsx(className, styles['toggle-button'])}\n aria-label={ariaLabel}\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n aria-expanded={ariaExpanded ? undefined : false}\n aria-haspopup={ariaExpanded ? undefined : true}\n data-testid={testId}\n >\n <InternalIcon svg={iconSvg} name={iconName} />\n </button>\n );\n }\n);\n\ninterface CloseButtonProps {\n className?: string;\n ariaLabel: string | undefined;\n onClick: () => void;\n}\n\nexport const CloseButton = React.forwardRef(\n ({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n return (\n <span className={styles['close-button']}>\n <InternalButton\n ref={ref}\n className={className}\n ariaLabel={ariaLabel}\n variant=\"icon\"\n formAction=\"none\"\n iconName=\"close\"\n onClick={onClick}\n />\n </span>\n );\n }\n);\n"]}
package/lib/internal/template/app-layout/toggles/interfaces.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { IconProps } from '../../icon/interfaces';
3
3
  export interface AppLayoutButtonProps {
4
4
  className?: string;
@@ -6,7 +6,8 @@ export interface AppLayoutButtonProps {
6
6
  ariaExpanded?: boolean;
7
7
  iconName?: IconProps.Name;
8
8
  iconSvg?: React.ReactNode;
9
- onClick: () => void;
9
+ onClick?: () => void;
10
10
  disabled?: boolean;
11
+ testId?: string;
11
12
  }
12
13
  //# sourceMappingURL=interfaces.d.ts.map
package/lib/internal/template/app-layout/toggles/interfaces.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
1
+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
package/lib/internal/template/app-layout/toggles/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n className?: string;\n ariaLabel: string | undefined;\n ariaExpanded?: boolean;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n onClick: () => void;\n disabled?: boolean;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n className?: string;\n ariaLabel: string | undefined;\n ariaExpanded?: boolean;\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n onClick?: () => void;\n disabled?: boolean;\n testId?: string;\n}\n"]}
package/lib/internal/template/app-layout/toggles/styles.css.js CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "close-button": "awsui_close-button_16w0h_ln6p9_93"
4
+ "toggle-button": "awsui_toggle-button_16w0h_pbc0z_93",
5
+ "close-button": "awsui_close-button_16w0h_pbc0z_123"
5
6
  };
6
7
 
package/lib/internal/template/app-layout/toggles/styles.scoped.css CHANGED
@@ -90,7 +90,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
90
90
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
91
91
  SPDX-License-Identifier: Apache-2.0
92
92
  */
93
- .awsui_close-button_16w0h_ln6p9_93:not(#\9) {
93
+ .awsui_toggle-button_16w0h_pbc0z_93:not(#\9) {
94
+ cursor: pointer;
95
+ border: 0;
96
+ padding: calc(var(--space-scaled-xxs-gmgwxk, 4px) + 1px) calc(var(--space-xxs-xx079q, 4px) + 1px);
97
+ background: transparent;
98
+ color: currentColor;
99
+ }
100
+ .awsui_toggle-button_16w0h_pbc0z_93:not(#\9):focus {
101
+ outline: none;
102
+ text-decoration: none;
103
+ }
104
+ body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_pbc0z_93:not(#\9):focus {
105
+ position: relative;
106
+ }
107
+ body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_pbc0z_93:not(#\9):focus {
108
+ outline: 2px dotted transparent;
109
+ outline-offset: calc(var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px) - 1px);
110
+ }
111
+ body[data-awsui-focus-visible=true] .awsui_toggle-button_16w0h_pbc0z_93:not(#\9):focus::before {
112
+ content: " ";
113
+ display: block;
114
+ position: absolute;
115
+ left: calc(-1 * var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px));
116
+ top: calc(-1 * var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px));
117
+ width: calc(100% + 2 * var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px));
118
+ height: calc(100% + 2 * var(--space-button-inline-icon-focus-outline-gutter-v7tn85, 3px));
119
+ border-radius: var(--border-radius-control-default-focus-ring-uu8qi4, 2px);
120
+ box-shadow: 0 0 0 2px var(--color-border-item-focused-4clyb1, #0073bb);
121
+ }
122
+
123
+ .awsui_close-button_16w0h_pbc0z_123:not(#\9) {
94
124
  position: absolute;
95
125
  outline: none;
96
126
  right: var(--space-m-2wfcpy, 16px);
package/lib/internal/template/app-layout/toggles/styles.selectors.js CHANGED
@@ -2,6 +2,7 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "close-button": "awsui_close-button_16w0h_ln6p9_93"
5
+ "toggle-button": "awsui_toggle-button_16w0h_pbc0z_93",
6
+ "close-button": "awsui_close-button_16w0h_pbc0z_123"
6
7
  };
7
8
 
package/lib/internal/template/app-layout/visual-refresh/drawers.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAcA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBAuB9B;AA+LD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAuE7B"}
1
+ {"version":3,"file":"drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.tsx"],"names":[],"mappings":";AAcA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,uBAuB9B;AAgMD;;;;;GAKG;AACH,wBAAgB,cAAc,uBAuE7B"}
package/lib/internal/template/app-layout/visual-refresh/drawers.js CHANGED
@@ -103,7 +103,7 @@ function DesktopTriggers() {
103
103
  return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
104
104
  isToolsOpen && handleToolsClick(!isToolsOpen, true);
105
105
  handleDrawersClick(item.id);
106
- }, ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, selected: item.id === activeDrawerId }));
106
+ }, ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, selected: item.id === activeDrawerId, testId: `awsui-app-layout-trigger-${item.id}` }));
107
107
  }),
108
108
  hasSplitPanel && splitPanelToggle.displayed && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggle.ariaLabel, className: clsx(styles['drawers-trigger'], splitPanelStyles['open-button']), iconName: "view-vertical", onClick: () => handleSplitPanelClick(), selected: hasSplitPanel && isSplitPanelOpen, ref: splitPanelRefs.toggle })))));
109
109
  }
@@ -129,7 +129,7 @@ export function MobileTriggers() {
129
129
  !toolsHide && tools && (React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isToolsOpen, className: testutilStyles['tools-toggle'], disabled: hasDrawerViewportOverlay, formAction: "none", iconName: "status-info", onClick: () => handleToolsClick(true), ref: toolsRefs.toggle, variant: "icon", __nativeAttributes: { 'aria-haspopup': true } })),
130
130
  drawers.items.map(item => {
131
131
  var _a;
132
- return (React.createElement(InternalButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), disabled: hasDrawerViewportOverlay, formAction: "none", iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => handleDrawersClick(item.id), ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, variant: "icon", __nativeAttributes: { 'aria-haspopup': true } }));
132
+ return (React.createElement(InternalButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), disabled: hasDrawerViewportOverlay, formAction: "none", iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => handleDrawersClick(item.id), ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, variant: "icon", __nativeAttributes: { 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` } }));
133
133
  })));
134
134
  }
135
135
  //# sourceMappingURL=drawers.js.map
package/lib/internal/template/app-layout/visual-refresh/drawers.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n const { disableBodyScroll, drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } =\n useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n if (!drawers) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n <DesktopTriggers />\n </div>\n );\n}\n\n/**\n * The ActiveDrawer component will render either the drawer content that corresponds\n * to the activeDrawerId or the Tools content if it exists and isToolsOpen is true.\n * The aria labels, click handling, and focus handling will be updated dynamically\n * based on the active drawer or tools content.\n */\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n isToolsOpen,\n navigationHide,\n tools,\n toolsRefs,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.items.find((item: any) => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.content : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId && !isToolsOpen;\n const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n\n const size = Math.min(drawersMaxWidth, drawerSize);\n\n return (\n <aside\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, sharedStyles['with-motion'], {\n [styles['is-drawer-open']]: activeDrawerId || isToolsOpen,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsOpen,\n })}\n style={{\n ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n }}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable && resizeHandle}\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n [testutilStyles['tools-close']]: isToolsOpen,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n ref={isToolsOpen ? toolsRefs.close : drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n\n <div className={styles['drawer-content']}>\n {activeDrawerId && activeDrawer?.content}\n {isToolsOpen && tools}\n </div>\n </aside>\n );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n handleToolsClick,\n hasOpenDrawer,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n splitPanel,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n tools,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n if (isMobile) {\n return null;\n }\n\n return (\n <aside\n className={clsx(\n styles['drawers-desktop-triggers-container'],\n testutilStyles['drawers-desktop-triggers-container'],\n {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n }\n )}\n aria-label={drawers?.ariaLabel}\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n >\n {!toolsHide && tools && (\n <TriggerButton\n ariaLabel={ariaLabels?.toolsToggle}\n className={clsx(styles['drawers-trigger'], testutilStyles['tools-toggle'])}\n iconName=\"status-info\"\n onClick={() => {\n activeDrawerId && handleDrawersClick(null, true);\n handleToolsClick(!isToolsOpen);\n }}\n ref={toolsRefs.toggle}\n selected={isToolsOpen}\n />\n )}\n\n {drawers?.items.map(item => (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => {\n isToolsOpen && handleToolsClick(!isToolsOpen, true);\n handleDrawersClick(item.id);\n }}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n selected={item.id === activeDrawerId}\n />\n ))}\n\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n className={clsx(styles['drawers-trigger'], splitPanelStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isToolsOpen,\n tools,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n if (!isMobile || !drawers) {\n return null;\n }\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx(\n styles['drawers-mobile-triggers-container'],\n testutilStyles['drawers-mobile-triggers-container'],\n {\n [styles.unfocusable]: hasDrawerViewportOverlay,\n }\n )}\n aria-label={drawers.ariaLabel}\n >\n {!toolsHide && tools && (\n <InternalButton\n ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n ariaExpanded={isToolsOpen}\n className={testutilStyles['tools-toggle']}\n disabled={hasDrawerViewportOverlay}\n formAction=\"none\"\n iconName=\"status-info\"\n onClick={() => handleToolsClick(true)}\n ref={toolsRefs.toggle}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n )}\n\n {drawers.items.map(item => (\n <InternalButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n disabled={hasDrawerViewportOverlay}\n formAction=\"none\"\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n ))}\n </aside>\n );\n}\n"]}
1
+ {"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { InternalButton } from '../../button/internal';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n const { disableBodyScroll, drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } =\n useAppLayoutInternals();\n\n const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n if (!drawers) {\n return null;\n }\n\n return (\n <div\n className={clsx(styles['drawers-container'], {\n [styles['disable-body-scroll']]: disableBodyScroll,\n [styles['has-open-drawer']]: hasOpenDrawer,\n [styles.unfocusable]: isUnfocusable,\n })}\n >\n <SplitPanel.Side />\n <ActiveDrawer />\n <DesktopTriggers />\n </div>\n );\n}\n\n/**\n * The ActiveDrawer component will render either the drawer content that corresponds\n * to the activeDrawerId or the Tools content if it exists and isToolsOpen is true.\n * The aria labels, click handling, and focus handling will be updated dynamically\n * based on the active drawer or tools content.\n */\nfunction ActiveDrawer() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isNavigationOpen,\n isToolsOpen,\n navigationHide,\n tools,\n toolsRefs,\n loseDrawersFocus,\n resizeHandle,\n drawerSize,\n drawersMaxWidth,\n drawerRef,\n } = useAppLayoutInternals();\n\n const activeDrawer = drawers?.items.find((item: any) => item.id === activeDrawerId) ?? null;\n\n const computedAriaLabels = {\n closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n content: activeDrawerId ? activeDrawer?.ariaLabels?.content : ariaLabels?.tools,\n };\n\n const isHidden = !activeDrawerId && !isToolsOpen;\n const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n\n const size = Math.min(drawersMaxWidth, drawerSize);\n\n return (\n <aside\n aria-hidden={isHidden}\n aria-label={computedAriaLabels.content}\n className={clsx(styles.drawer, sharedStyles['with-motion'], {\n [styles['is-drawer-open']]: activeDrawerId || isToolsOpen,\n [styles.unfocusable]: isUnfocusable,\n [testutilStyles['active-drawer']]: activeDrawerId,\n [testutilStyles.tools]: isToolsOpen,\n })}\n style={{\n ...(!isMobile && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n }}\n ref={drawerRef}\n onBlur={e => {\n if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n loseDrawersFocus();\n }\n }}\n >\n {!isMobile && activeDrawer?.resizable && resizeHandle}\n <div className={clsx(styles['drawer-close-button'])}>\n <InternalButton\n ariaLabel={computedAriaLabels.closeButton}\n className={clsx({\n [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n [testutilStyles['tools-close']]: isToolsOpen,\n })}\n formAction=\"none\"\n iconName={isMobile ? 'close' : 'angle-right'}\n onClick={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n ref={isToolsOpen ? toolsRefs.close : drawersRefs.close}\n variant=\"icon\"\n />\n </div>\n\n <div className={styles['drawer-content']}>\n {activeDrawerId && activeDrawer?.content}\n {isToolsOpen && tools}\n </div>\n </aside>\n );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n drawersTriggerCount,\n handleDrawersClick,\n handleSplitPanelClick,\n handleToolsClick,\n hasOpenDrawer,\n isMobile,\n isSplitPanelOpen,\n isToolsOpen,\n splitPanel,\n splitPanelDisplayed,\n splitPanelPosition,\n splitPanelRefs,\n splitPanelToggle,\n tools,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const hasMultipleTriggers = drawersTriggerCount > 1;\n const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n if (isMobile) {\n return null;\n }\n\n return (\n <aside\n className={clsx(\n styles['drawers-desktop-triggers-container'],\n testutilStyles['drawers-desktop-triggers-container'],\n {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n }\n )}\n aria-label={drawers?.ariaLabel}\n >\n <div\n className={clsx(styles['drawers-trigger-content'], {\n [styles['has-multiple-triggers']]: hasMultipleTriggers,\n [styles['has-open-drawer']]: hasOpenDrawer,\n })}\n >\n {!toolsHide && tools && (\n <TriggerButton\n ariaLabel={ariaLabels?.toolsToggle}\n className={clsx(styles['drawers-trigger'], testutilStyles['tools-toggle'])}\n iconName=\"status-info\"\n onClick={() => {\n activeDrawerId && handleDrawersClick(null, true);\n handleToolsClick(!isToolsOpen);\n }}\n ref={toolsRefs.toggle}\n selected={isToolsOpen}\n />\n )}\n\n {drawers?.items.map(item => (\n <TriggerButton\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => {\n isToolsOpen && handleToolsClick(!isToolsOpen, true);\n handleDrawersClick(item.id);\n }}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n selected={item.id === activeDrawerId}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n ))}\n\n {hasSplitPanel && splitPanelToggle.displayed && (\n <TriggerButton\n ariaLabel={splitPanelToggle.ariaLabel}\n className={clsx(styles['drawers-trigger'], splitPanelStyles['open-button'])}\n iconName=\"view-vertical\"\n onClick={() => handleSplitPanelClick()}\n selected={hasSplitPanel && isSplitPanelOpen}\n ref={splitPanelRefs.toggle}\n />\n )}\n </div>\n </aside>\n );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n const {\n activeDrawerId,\n ariaLabels,\n drawers,\n drawersRefs,\n handleDrawersClick,\n handleToolsClick,\n hasDrawerViewportOverlay,\n isMobile,\n isToolsOpen,\n tools,\n toolsHide,\n toolsRefs,\n } = useAppLayoutInternals();\n\n const previousActiveDrawerId = useRef(activeDrawerId);\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\n\n if (!isMobile || !drawers) {\n return null;\n }\n\n return (\n <aside\n aria-hidden={hasDrawerViewportOverlay}\n className={clsx(\n styles['drawers-mobile-triggers-container'],\n testutilStyles['drawers-mobile-triggers-container'],\n {\n [styles.unfocusable]: hasDrawerViewportOverlay,\n }\n )}\n aria-label={drawers.ariaLabel}\n >\n {!toolsHide && tools && (\n <InternalButton\n ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n ariaExpanded={isToolsOpen}\n className={testutilStyles['tools-toggle']}\n disabled={hasDrawerViewportOverlay}\n formAction=\"none\"\n iconName=\"status-info\"\n onClick={() => handleToolsClick(true)}\n ref={toolsRefs.toggle}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true }}\n />\n )}\n\n {drawers.items.map(item => (\n <InternalButton\n ariaExpanded={item.id === activeDrawerId}\n ariaLabel={item.ariaLabels?.triggerButton}\n className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n disabled={hasDrawerViewportOverlay}\n formAction=\"none\"\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n key={item.id}\n onClick={() => handleDrawersClick(item.id)}\n ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n variant=\"icon\"\n __nativeAttributes={{ 'aria-haspopup': true, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n />\n ))}\n </aside>\n );\n}\n"]}
package/lib/internal/template/app-layout/visual-refresh/trigger-button.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface TriggerButtonProps {
6
6
  className?: string;
7
7
  iconName?: IconProps.Name;
8
8
  iconSvg?: React.ReactNode;
9
+ testId?: string;
9
10
  onClick: React.MouseEventHandler<HTMLButtonElement>;
10
11
  selected?: boolean;
11
12
  }
package/lib/internal/template/app-layout/visual-refresh/trigger-button.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"trigger-button.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,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,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;AA2BD,wBAA+C"}
1
+ {"version":3,"file":"trigger-button.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,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,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;AA4BD,wBAA+C"}
package/lib/internal/template/app-layout/visual-refresh/trigger-button.js CHANGED
@@ -4,10 +4,10 @@ import React from 'react';
4
4
  import clsx from 'clsx';
5
5
  import Icon from '../../icon/internal';
6
6
  import styles from './styles.css.js';
7
- function TriggerButton({ ariaLabel, className, iconName, iconSvg, onClick, selected = false }, ref) {
7
+ function TriggerButton({ ariaLabel, className, iconName, iconSvg, onClick, testId, selected = false }, ref) {
8
8
  return (React.createElement("button", { "aria-expanded": false, "aria-haspopup": true, "aria-label": ariaLabel, className: clsx(styles.trigger, {
9
9
  [styles.selected]: selected,
10
- }, className), onClick: onClick, ref: ref, type: "button" },
10
+ }, className), onClick: onClick, ref: ref, type: "button", "data-testid": testId },
11
11
  React.createElement(Icon, { name: iconName, svg: iconSvg })));
12
12
  }
13
13
  export default React.forwardRef(TriggerButton);
package/lib/internal/template/app-layout/visual-refresh/trigger-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"trigger-button.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAarC,SAAS,aAAa,CACpB,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAsB,EAC1F,GAA+B;IAE/B,OAAO,CACL,iDACiB,KAAK,mBACL,IAAI,gBACP,SAAS,EACrB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;SAC5B,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAmC,EACxC,IAAI,EAAC,QAAQ;QAEb,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CAC/B,CACV,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 onClick: React.MouseEventHandler<HTMLButtonElement>;\n selected?: boolean;\n}\n\nfunction TriggerButton(\n { ariaLabel, className, iconName, iconSvg, onClick, selected = false }: TriggerButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n) {\n return (\n <button\n aria-expanded={false}\n aria-haspopup={true}\n aria-label={ariaLabel}\n className={clsx(\n styles.trigger,\n {\n [styles.selected]: selected,\n },\n className\n )}\n onClick={onClick}\n ref={ref as React.Ref<HTMLButtonElement>}\n type=\"button\"\n >\n <Icon name={iconName} svg={iconSvg} />\n </button>\n );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
1
+ {"version":3,"file":"trigger-button.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/trigger-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAcrC,SAAS,aAAa,CACpB,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAsB,EAClG,GAA+B;IAE/B,OAAO,CACL,iDACiB,KAAK,mBACL,IAAI,gBACP,SAAS,EACrB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;SAC5B,EACD,SAAS,CACV,EACD,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAmC,EACxC,IAAI,EAAC,QAAQ,iBACA,MAAM;QAEnB,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,GAAI,CAC/B,CACV,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 testId?: string;\n onClick: React.MouseEventHandler<HTMLButtonElement>;\n selected?: boolean;\n}\n\nfunction TriggerButton(\n { ariaLabel, className, iconName, iconSvg, onClick, testId, selected = false }: TriggerButtonProps,\n ref: React.Ref<ButtonProps.Ref>\n) {\n return (\n <button\n aria-expanded={false}\n aria-haspopup={true}\n aria-label={ariaLabel}\n className={clsx(\n styles.trigger,\n {\n [styles.selected]: selected,\n },\n className\n )}\n onClick={onClick}\n ref={ref as React.Ref<HTMLButtonElement>}\n type=\"button\"\n data-testid={testId}\n >\n <Icon name={iconName} svg={iconSvg} />\n </button>\n );\n}\n\nexport default React.forwardRef(TriggerButton);\n"]}
package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED
@@ -273,7 +273,6 @@
273
273
  --color-foreground-control-default-nqkae0:#ffffff;
274
274
  --color-foreground-control-disabled-7tx8eg:#ffffff;
275
275
  --color-shadow-default-bkdge5:rgba(0, 28, 36, 0.5);
276
- --color-shadow-layout-toggle-67ezos:#d5dbdb;
277
276
  --color-stroke-chart-line-sahr4b:#879596;
278
277
  --color-text-accent-exu66k:#0073bb;
279
278
  --color-text-body-default-4colr5:#16191f;
@@ -854,7 +853,6 @@
854
853
  --color-border-tutorial-9o8gmz:#879596;
855
854
  --color-foreground-control-disabled-7tx8eg:#687078;
856
855
  --color-shadow-default-bkdge5:rgba(0, 0, 0, 0.5);
857
- --color-shadow-layout-toggle-67ezos:#414750;
858
856
  --color-text-accent-exu66k:#44b9d6;
859
857
  --color-text-body-default-4colr5:#d5dbdb;
860
858
  --color-text-body-secondary-vrqm14:#d5dbdb;
@@ -1137,7 +1135,6 @@
1137
1135
  --color-border-tutorial-9o8gmz:#879596;
1138
1136
  --color-foreground-control-disabled-7tx8eg:#687078;
1139
1137
  --color-shadow-default-bkdge5:rgba(0, 0, 0, 0.5);
1140
- --color-shadow-layout-toggle-67ezos:#414750;
1141
1138
  --color-text-accent-exu66k:#44b9d6;
1142
1139
  --color-text-body-default-4colr5:#d5dbdb;
1143
1140
  --color-text-body-secondary-vrqm14:#d5dbdb;
@@ -1344,7 +1341,6 @@
1344
1341
  --color-border-tiles-disabled-aqjfes:#e9ebed;
1345
1342
  --color-border-tutorial-9o8gmz:#d1d5db;
1346
1343
  --color-shadow-default-bkdge5:rgba(0, 7, 22, 0.12);
1347
- --color-shadow-layout-toggle-67ezos:#d1d5db;
1348
1344
  --color-stroke-chart-line-sahr4b:#7d8998;
1349
1345
  --color-text-accent-exu66k:#0972d3;
1350
1346
  --color-text-body-default-4colr5:#000716;
@@ -1677,7 +1673,6 @@
1677
1673
  --color-foreground-control-default-nqkae0:#000716;
1678
1674
  --color-foreground-control-disabled-7tx8eg:#0f1b2a;
1679
1675
  --color-shadow-default-bkdge5:rgba(0, 7, 22, 1);
1680
- --color-shadow-layout-toggle-67ezos:#354150;
1681
1676
  --color-text-accent-exu66k:#539fe5;
1682
1677
  --color-text-body-default-4colr5:#d1d5db;
1683
1678
  --color-text-body-secondary-vrqm14:#d1d5db;
@@ -1938,7 +1933,6 @@
1938
1933
  --color-foreground-control-default-nqkae0:#000716;
1939
1934
  --color-foreground-control-disabled-7tx8eg:#0f1b2a;
1940
1935
  --color-shadow-default-bkdge5:rgba(0, 7, 22, 1);
1941
- --color-shadow-layout-toggle-67ezos:#354150;
1942
1936
  --color-text-accent-exu66k:#539fe5;
1943
1937
  --color-text-body-default-4colr5:#d1d5db;
1944
1938
  --color-text-body-secondary-vrqm14:#d1d5db;
@@ -2123,7 +2117,6 @@
2123
2117
  --color-foreground-control-default-nqkae0:#000716;
2124
2118
  --color-foreground-control-disabled-7tx8eg:#0f1b2a;
2125
2119
  --color-shadow-default-bkdge5:rgba(0, 7, 22, 1);
2126
- --color-shadow-layout-toggle-67ezos:#354150;
2127
2120
  --color-text-accent-exu66k:#539fe5;
2128
2121
  --color-text-body-default-4colr5:#d1d5db;
2129
2122
  --color-text-body-secondary-vrqm14:#d1d5db;
@@ -2308,7 +2301,6 @@
2308
2301
  --color-foreground-control-default-nqkae0:#000716;
2309
2302
  --color-foreground-control-disabled-7tx8eg:#0f1b2a;
2310
2303
  --color-shadow-default-bkdge5:rgba(0, 7, 22, 1);
2311
- --color-shadow-layout-toggle-67ezos:#354150;
2312
2304
  --color-text-accent-exu66k:#539fe5;
2313
2305
  --color-text-body-default-4colr5:#d1d5db;
2314
2306
  --color-text-body-secondary-vrqm14:#d1d5db;
@@ -2505,7 +2497,6 @@
2505
2497
  --color-foreground-control-default-nqkae0:#000716;
2506
2498
  --color-foreground-control-disabled-7tx8eg:#0f1b2a;
2507
2499
  --color-shadow-default-bkdge5:rgba(0, 7, 22, 1);
2508
- --color-shadow-layout-toggle-67ezos:#354150;
2509
2500
  --color-text-accent-exu66k:#539fe5;
2510
2501
  --color-text-body-default-4colr5:#d1d5db;
2511
2502
  --color-text-body-secondary-vrqm14:#d1d5db;
@@ -2783,7 +2774,6 @@
2783
2774
  --color-foreground-control-default-nqkae0:#000716;
2784
2775
  --color-foreground-control-disabled-7tx8eg:#0f1b2a;
2785
2776
  --color-shadow-default-bkdge5:rgba(0, 7, 22, 1);
2786
- --color-shadow-layout-toggle-67ezos:#354150;
2787
2777
  --color-text-accent-exu66k:#539fe5;
2788
2778
  --color-text-body-default-4colr5:#d1d5db;
2789
2779
  --color-text-body-secondary-vrqm14:#d1d5db;
@@ -2967,7 +2957,6 @@
2967
2957
  --color-foreground-control-default-nqkae0:#000716;
2968
2958
  --color-foreground-control-disabled-7tx8eg:#0f1b2a;
2969
2959
  --color-shadow-default-bkdge5:rgba(0, 7, 22, 1);
2970
- --color-shadow-layout-toggle-67ezos:#354150;
2971
2960
  --color-text-accent-exu66k:#539fe5;
2972
2961
  --color-text-body-default-4colr5:#d1d5db;
2973
2962
  --color-text-body-secondary-vrqm14:#d1d5db;
package/lib/internal/template/internal/environment.js CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  export var PACKAGE_SOURCE = 'components';
3
- export var PACKAGE_VERSION = '3.0.0 (b80535d)';
3
+ export var PACKAGE_VERSION = '3.0.0 (385429b)';
4
4
  export var THEME = 'open-source-visual-refresh';
5
5
  export var ALWAYS_VISUAL_REFRESH = true;
6
6
 
package/lib/internal/template/internal/generated/theming/index.cjs CHANGED
@@ -1216,10 +1216,6 @@ module.exports.preset = {
1216
1216
  "light": "{colorGreyTransparentHeavy}",
1217
1217
  "dark": "{colorGreyTransparentHeavy}"
1218
1218
  },
1219
- "colorShadowLayoutToggle": {
1220
- "light": "{colorGrey300}",
1221
- "dark": "{colorGrey650}"
1222
- },
1223
1219
  "colorShadowMedium": {
1224
1220
  "light": "{colorGreyTransparent}",
1225
1221
  "dark": "{colorGreyTransparent}"
@@ -3233,10 +3229,6 @@ module.exports.preset = {
3233
3229
  "light": "{colorGreyTransparentHeavy}",
3234
3230
  "dark": "{colorGreyTransparentHeavy}"
3235
3231
  },
3236
- "colorShadowLayoutToggle": {
3237
- "light": "{colorGrey650}",
3238
- "dark": "{colorGrey650}"
3239
- },
3240
3232
  "colorShadowMedium": {
3241
3233
  "light": "{colorGreyTransparent}",
3242
3234
  "dark": "{colorGreyTransparent}"
@@ -4235,10 +4227,6 @@ module.exports.preset = {
4235
4227
  "light": "{colorGreyTransparentHeavy}",
4236
4228
  "dark": "{colorGreyTransparentHeavy}"
4237
4229
  },
4238
- "colorShadowLayoutToggle": {
4239
- "light": "{colorGrey650}",
4240
- "dark": "{colorGrey650}"
4241
- },
4242
4230
  "colorShadowMedium": {
4243
4231
  "light": "{colorGreyTransparent}",
4244
4232
  "dark": "{colorGreyTransparent}"
@@ -5169,10 +5157,6 @@ module.exports.preset = {
5169
5157
  "light": "{colorGreyTransparentHeavy}",
5170
5158
  "dark": "{colorGreyTransparentHeavy}"
5171
5159
  },
5172
- "colorShadowLayoutToggle": {
5173
- "light": "{colorGrey300}",
5174
- "dark": "{colorGrey650}"
5175
- },
5176
5160
  "colorShadowMedium": {
5177
5161
  "light": "{colorGreyTransparent}",
5178
5162
  "dark": "{colorGreyTransparent}"
@@ -6103,10 +6087,6 @@ module.exports.preset = {
6103
6087
  "light": "{colorGreyTransparentHeavy}",
6104
6088
  "dark": "{colorGreyTransparentHeavy}"
6105
6089
  },
6106
- "colorShadowLayoutToggle": {
6107
- "light": "{colorGrey300}",
6108
- "dark": "{colorGrey650}"
6109
- },
6110
6090
  "colorShadowMedium": {
6111
6091
  "light": "{colorGreyTransparent}",
6112
6092
  "dark": "{colorGreyTransparent}"
@@ -7037,10 +7017,6 @@ module.exports.preset = {
7037
7017
  "light": "{colorGreyTransparentHeavy}",
7038
7018
  "dark": "{colorGreyTransparentHeavy}"
7039
7019
  },
7040
- "colorShadowLayoutToggle": {
7041
- "light": "{colorGrey650}",
7042
- "dark": "{colorGrey650}"
7043
- },
7044
7020
  "colorShadowMedium": {
7045
7021
  "light": "{colorGreyTransparent}",
7046
7022
  "dark": "{colorGreyTransparent}"
@@ -7736,7 +7712,6 @@ module.exports.preset = {
7736
7712
  "colorForegroundControlDefault": "color",
7737
7713
  "colorForegroundControlDisabled": "color",
7738
7714
  "colorShadowDefault": "color",
7739
- "colorShadowLayoutToggle": "color",
7740
7715
  "colorShadowMedium": "color",
7741
7716
  "colorShadowSide": "color",
7742
7717
  "colorStrokeChartLine": "color",
@@ -8815,7 +8790,6 @@ module.exports.preset = {
8815
8790
  "colorForegroundControlDefault": "color-foreground-control-default",
8816
8791
  "colorForegroundControlDisabled": "color-foreground-control-disabled",
8817
8792
  "colorShadowDefault": "color-shadow-default",
8818
- "colorShadowLayoutToggle": "color-shadow-layout-toggle",
8819
8793
  "colorShadowMedium": "color-shadow-medium",
8820
8794
  "colorShadowSide": "color-shadow-side",
8821
8795
  "colorStrokeChartLine": "color-stroke-chart-line",
@@ -9492,7 +9466,6 @@ module.exports.preset = {
9492
9466
  "colorForegroundControlDefault": "--color-foreground-control-default-rsunm6",
9493
9467
  "colorForegroundControlDisabled": "--color-foreground-control-disabled-f2499o",
9494
9468
  "colorShadowDefault": "--color-shadow-default-ukle9p",
9495
- "colorShadowLayoutToggle": "--color-shadow-layout-toggle-u6bbly",
9496
9469
  "colorShadowMedium": "--color-shadow-medium-ncb0av",
9497
9470
  "colorShadowSide": "--color-shadow-side-priy5p",
9498
9471
  "colorStrokeChartLine": "--color-stroke-chart-line-7sdstd",