@cloudscape-design/components-themeable 3.0.1280 → 3.0.1281

package/lib/internal/template/drawer/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/drawer/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';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface DrawerProps extends BaseComponentProps {\n  /**\n   * Header of the drawer.\n   *\n   * It should contain the only `h2` used in the drawer.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the drawer.\n   *\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Renders the drawer in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the drawer content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: I18nStrings;\n\n  /**\n   * Actions for the header. Available only if you specify the `header` property.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Sticky footer content that remains visible at the bottom during scroll.\n   *\n   * Automatically becomes non-sticky when scrollable content area is too small\n   * to ensure content remains accessible (not covered by the footer).\n   */\n  footer?: React.ReactNode;\n}\n\ninterface I18nStrings {\n  /**\n    Specifies the text that's displayed when the panel is in a loading state.\n   */\n  loadingText?: string;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/drawer/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface DrawerProps extends BaseComponentProps {\n  /**\n   * Header of the drawer.\n   *\n   * It should contain the only `h2` used in the drawer.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the drawer.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Renders the drawer in a loading state. We recommend that you also set a `i18nStrings.loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Determines whether the drawer content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `loadingText` - The text that's displayed when the drawer is in a loading state.\n   * @i18n\n   */\n  i18nStrings?: DrawerProps.I18nStrings;\n\n  /**\n   * Actions for the header. Available only if you specify the `header` property.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Sticky footer content that remains visible at the bottom during scroll.\n   *\n   * Automatically becomes non-sticky when scrollable content area is too small\n   * to ensure content remains accessible (not covered by the footer).\n   */\n  footer?: React.ReactNode;\n}\n\nexport namespace DrawerProps {\n  export interface I18nStrings {\n    loadingText?: string;\n  }\n}\n\n// Props for a future release\nexport interface NextDrawerProps extends DrawerProps {\n  /**\n   * Specifies the CSS positioning mode of the drawer, and supports the following options:\n   * * `static` (default) - The drawer is positioned in the normal document flow.\n   * * `sticky` - The drawer sticks to its nearest scrolling ancestor. Only meaningful with `placement=\"top\"` or `placement=\"bottom\"`. Using `sticky` with `placement=\"start\"` or `placement=\"end\"` falls back to `static`.\n   * * `absolute` - The drawer is positioned relative to its nearest positioned ancestor.\n   * * `fixed` - The drawer is positioned relative to the viewport.\n   *\n   * @awsuiSystem core\n   */\n  position?: NextDrawerProps.Position;\n\n  /**\n   * Specifies which edge of its container the drawer is anchored to, and supports these options:\n   * * `start` - Anchored to the inline-start edge.\n   * * `end` - (default) Anchored to the inline-end edge.\n   * * `top` - Anchored to the top edge.\n   * * `bottom` - Anchored to the bottom edge.\n   *\n   * @awsuiSystem core\n   */\n  placement?: NextDrawerProps.Placement;\n\n  /**\n   * Specifies the distance in pixels between the drawer and the edges of its container.\n   * Applicable when using `position=\"absolute\"` or `position=\"fixed\"`.\n   * Supported properties:\n   * * `start` - Distance from the inline-start edge. Not applicable when `placement` is `\"end\"`.\n   * * `end` - Distance from the inline-end edge. Not applicable when `placement` is `\"start\"`.\n   * * `top` - Distance from the top edge. Not applicable when `placement` is `\"bottom\"`.\n   * * `bottom` - Distance from the bottom edge. Not applicable when `placement` is `\"top\"`.\n   *\n   * @awsuiSystem core\n   */\n  offset?: NextDrawerProps.Offset;\n\n  /**\n   * Specifies the distance in pixels from the top or bottom edge of the scrolling container\n   * at which the drawer sticks. Applicable only when using `position=\"sticky\"` with `placement=\"top\"` or `placement=\"bottom\"`.\n   * * Supported properties:\n   * * `top` - Distance from the top of the scrolling container.\n   * * `bottom` - Distance from the bottom of the scrolling container.\n   *\n   * @awsuiSystem core\n   */\n  stickyOffset?: NextDrawerProps.StickyOffset;\n\n  /**\n   * Sets the CSS `z-index` of the drawer. Use this to control stacking order when the drawer\n   * overlaps other positioned elements on the page.\n   *\n   * Applicable when using `position=\"sticky\"`, `position=\"absolute\"`, or `position=\"fixed\"`.\n   *\n   * @awsuiSystem core\n   */\n  zIndex?: number;\n}\n\nexport namespace NextDrawerProps {\n  export type Position = 'static' | 'sticky' | 'absolute' | 'fixed';\n\n  export type Placement = 'start' | 'end' | 'top' | 'bottom';\n\n  export interface Offset {\n    start?: number;\n    end?: number;\n    top?: number;\n    bottom?: number;\n  }\n\n  export interface StickyOffset {\n    top?: number;\n    bottom?: number;\n  }\n}\n"]}

package/lib/internal/template/drawer/next.d.ts

@@ -0,0 +1,5 @@
+import { NextDrawerProps } from './interfaces';
+export { NextDrawerProps };
+declare const Drawer: ({ header, headerActions, footer, disableContentPaddings, loading, position, placement, offset, stickyOffset, zIndex, ...props }: NextDrawerProps) => JSX.Element;
+export default Drawer;
+//# sourceMappingURL=next.d.ts.map

package/lib/internal/template/drawer/next.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../../../src/drawer/next.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,MAAM,GAAmB,iIAY5B,eAAe,gBAiCjB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/internal/template/drawer/next.js

@@ -0,0 +1,31 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+// eslint-disable-next-line @cloudscape-design/build-tools/react-server-components-directive
+'use client';
+import React from 'react';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import { InternalDrawer } from './internal';
+const Drawer = function Drawer({ header, headerActions, footer, disableContentPaddings = false, loading = false, position = 'static', placement = 'end', offset, stickyOffset, zIndex, ...props }) {
+    const baseComponentProps = useBaseComponent('Drawer', {
+        props: {
+            disableContentPaddings,
+            loading,
+            placement,
+            position,
+            zIndex,
+        },
+        metadata: {
+            hasHeader: !!header,
+            hasHeaderActions: !!headerActions,
+            hasFooter: !!footer,
+            hasOffset: !!offset,
+            hasStickyOffset: !!stickyOffset,
+        },
+    });
+    return (React.createElement(InternalDrawer, { ...getExternalProps(props), ...baseComponentProps, header: header, headerActions: headerActions, footer: footer, disableContentPaddings: disableContentPaddings, loading: loading, placement: placement, position: position, offset: offset, stickyOffset: stickyOffset, zIndex: zIndex }));
+};
+export default Drawer;
+applyDisplayName(Drawer, 'Drawer');
+//# sourceMappingURL=next.js.map

package/lib/internal/template/drawer/next.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"next.js","sourceRoot":"","sources":["../../../src/drawer/next.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,4FAA4F;AAC5F,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAI5C,MAAM,MAAM,GAAG,SAAS,MAAM,CAAC,EAC7B,MAAM,EACN,aAAa,EACb,MAAM,EACN,sBAAsB,GAAG,KAAK,EAC9B,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,QAAQ,EACnB,SAAS,GAAG,KAAK,EACjB,MAAM,EACN,YAAY,EACZ,MAAM,EACN,GAAG,KAAK,EACQ;IAChB,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,EAAE;QACpD,KAAK,EAAE;YACL,sBAAsB;YACtB,OAAO;YACP,SAAS;YACT,QAAQ;YACR,MAAM;SACP;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,CAAC,CAAC,MAAM;YACnB,gBAAgB,EAAE,CAAC,CAAC,aAAa;YACjC,SAAS,EAAE,CAAC,CAAC,MAAM;YACnB,SAAS,EAAE,CAAC,CAAC,MAAM;YACnB,eAAe,EAAE,CAAC,CAAC,YAAY;SAChC;KACF,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,cAAc,OACT,gBAAgB,CAAC,KAAK,CAAC,KACvB,kBAAkB,EACtB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,sBAAsB,EAAE,sBAAsB,EAC9C,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// eslint-disable-next-line @cloudscape-design/build-tools/react-server-components-directive\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { NextDrawerProps } from './interfaces';\nimport { InternalDrawer } from './internal';\n\nexport { NextDrawerProps };\n\nconst Drawer = function Drawer({\n  header,\n  headerActions,\n  footer,\n  disableContentPaddings = false,\n  loading = false,\n  position = 'static',\n  placement = 'end',\n  offset,\n  stickyOffset,\n  zIndex,\n  ...props\n}: NextDrawerProps) {\n  const baseComponentProps = useBaseComponent('Drawer', {\n    props: {\n      disableContentPaddings,\n      loading,\n      placement,\n      position,\n      zIndex,\n    },\n    metadata: {\n      hasHeader: !!header,\n      hasHeaderActions: !!headerActions,\n      hasFooter: !!footer,\n      hasOffset: !!offset,\n      hasStickyOffset: !!stickyOffset,\n    },\n  });\n  return (\n    <InternalDrawer\n      {...getExternalProps(props)}\n      {...baseComponentProps}\n      header={header}\n      headerActions={headerActions}\n      footer={footer}\n      disableContentPaddings={disableContentPaddings}\n      loading={loading}\n      placement={placement}\n      position={position}\n      offset={offset}\n      stickyOffset={stickyOffset}\n      zIndex={zIndex}\n    />\n  );\n};\n\nexport default Drawer;\n\napplyDisplayName(Drawer, 'Drawer');\n"]}

package/lib/internal/template/drawer/styles.css.js

@@ -1,17 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_1sxt8_t1bin_189",
-  "with-footer": "awsui_with-footer_1sxt8_t1bin_221",
-  "content": "awsui_content_1sxt8_t1bin_226",
-  "header": "awsui_header_1sxt8_t1bin_230",
-  "with-additional-action": "awsui_with-additional-action_1sxt8_t1bin_247",
-  "with-runtime-context": "awsui_with-runtime-context_1sxt8_t1bin_255",
-  "with-toolbar": "awsui_with-toolbar_1sxt8_t1bin_258",
-  "header-actions": "awsui_header-actions_1sxt8_t1bin_277",
-  "content-with-paddings": "awsui_content-with-paddings_1sxt8_t1bin_283",
-  "footer": "awsui_footer_1sxt8_t1bin_290",
-  "is-sticky": "awsui_is-sticky_1sxt8_t1bin_296",
-  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_t1bin_304"
+  "drawer": "awsui_drawer_1sxt8_19ouv_189",
+  "position-absolute": "awsui_position-absolute_1sxt8_19ouv_222",
+  "position-sticky": "awsui_position-sticky_1sxt8_19ouv_222",
+  "position-fixed": "awsui_position-fixed_1sxt8_19ouv_222",
+  "with-footer": "awsui_with-footer_1sxt8_19ouv_225",
+  "position-static": "awsui_position-static_1sxt8_19ouv_229",
+  "content": "awsui_content_1sxt8_19ouv_232",
+  "header": "awsui_header_1sxt8_19ouv_236",
+  "with-additional-action": "awsui_with-additional-action_1sxt8_19ouv_253",
+  "with-runtime-context": "awsui_with-runtime-context_1sxt8_19ouv_261",
+  "with-toolbar": "awsui_with-toolbar_1sxt8_19ouv_264",
+  "header-actions": "awsui_header-actions_1sxt8_19ouv_283",
+  "content-with-paddings": "awsui_content-with-paddings_1sxt8_19ouv_289",
+  "footer": "awsui_footer_1sxt8_19ouv_296",
+  "is-sticky": "awsui_is-sticky_1sxt8_19ouv_302",
+  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_19ouv_310"
 };
   

package/lib/internal/template/drawer/styles.scoped.css

@@ -186,7 +186,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_drawer_1sxt8_t1bin_189:not(#\9) {
+.awsui_drawer_1sxt8_19ouv_189:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -217,17 +217,23 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   word-wrap: break-word;
+  background-color: var(--color-background-drawer-v79o7e, #ffffff);
 }
-.awsui_drawer_1sxt8_t1bin_189.awsui_with-footer_1sxt8_t1bin_221:not(#\9) {
+.awsui_drawer_1sxt8_19ouv_189.awsui_position-absolute_1sxt8_19ouv_222:not(#\9), .awsui_drawer_1sxt8_19ouv_189.awsui_position-sticky_1sxt8_19ouv_222:not(#\9), .awsui_drawer_1sxt8_19ouv_189.awsui_position-fixed_1sxt8_19ouv_222:not(#\9) {
+  box-shadow: var(--shadow-panel-ywy40s, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+}
+.awsui_drawer_1sxt8_19ouv_189.awsui_with-footer_1sxt8_19ouv_225:not(#\9) {
   display: flex;
   flex-direction: column;
+}
+.awsui_drawer_1sxt8_19ouv_189.awsui_with-footer_1sxt8_19ouv_225.awsui_position-static_1sxt8_19ouv_229:not(#\9) {
   min-block-size: 100%;
 }
-.awsui_drawer_1sxt8_t1bin_189.awsui_with-footer_1sxt8_t1bin_221 > .awsui_content_1sxt8_t1bin_226:not(#\9) {
+.awsui_drawer_1sxt8_19ouv_189.awsui_with-footer_1sxt8_19ouv_225 > .awsui_content_1sxt8_19ouv_232:not(#\9) {
   flex: 1;
 }
 
-.awsui_header_1sxt8_t1bin_230:not(#\9) {
+.awsui_header_1sxt8_19ouv_236:not(#\9) {
   font-size: var(--font-panel-header-size-i1j838, 18px);
   letter-spacing: var(--letter-spacing-heading-m-93y02s, normal);
   line-height: var(--font-panel-header-line-height-z3wpa5, 22px);
@@ -244,7 +250,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 @media (min-width: 689px) {
-  .awsui_header_1sxt8_t1bin_230.awsui_with-additional-action_1sxt8_t1bin_247:not(#\9) {
+  .awsui_header_1sxt8_19ouv_236.awsui_with-additional-action_1sxt8_19ouv_253:not(#\9) {
     /*
       this padding is needed when the drawer renders inside a runtime drawer and the runtime drawer has an additional action
       on the right (or left in rtl). in this case this padding ensures that the drawer's content does not overlap with runtime actions
@@ -252,18 +258,18 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     padding-inline: var(--space-panel-side-left-07kpj4, 32px) calc(var(--space-xxxl-qhelse, 40px) + var(--space-scaled-xxl-9ur2is, 32px));
   }
 }
-.awsui_header_1sxt8_t1bin_230.awsui_with-runtime-context_1sxt8_t1bin_255:not(#\9) {
+.awsui_header_1sxt8_19ouv_236.awsui_with-runtime-context_1sxt8_19ouv_261:not(#\9) {
   padding-block: 14px;
 }
-.awsui_with-toolbar_1sxt8_t1bin_258 > .awsui_header_1sxt8_t1bin_230:not(#\9) {
+.awsui_with-toolbar_1sxt8_19ouv_264 > .awsui_header_1sxt8_19ouv_236:not(#\9) {
   border-color: transparent;
   margin-block-end: 0px;
 }
-.awsui_header_1sxt8_t1bin_230 h2:not(#\9),
-.awsui_header_1sxt8_t1bin_230 h3:not(#\9),
-.awsui_header_1sxt8_t1bin_230 h4:not(#\9),
-.awsui_header_1sxt8_t1bin_230 h5:not(#\9),
-.awsui_header_1sxt8_t1bin_230 h6:not(#\9) {
+.awsui_header_1sxt8_19ouv_236 h2:not(#\9),
+.awsui_header_1sxt8_19ouv_236 h3:not(#\9),
+.awsui_header_1sxt8_19ouv_236 h4:not(#\9),
+.awsui_header_1sxt8_19ouv_236 h5:not(#\9),
+.awsui_header_1sxt8_19ouv_236 h6:not(#\9) {
   font-size: var(--font-panel-header-size-i1j838, 18px);
   letter-spacing: var(--letter-spacing-heading-m-93y02s, normal);
   line-height: var(--font-panel-header-line-height-z3wpa5, 22px);
@@ -274,26 +280,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block: 0;
 }
 
-.awsui_header-actions_1sxt8_t1bin_277:not(#\9) {
+.awsui_header-actions_1sxt8_19ouv_283:not(#\9) {
   display: inline-flex;
   align-items: flex-start;
   z-index: 1;
 }
 
-.awsui_content-with-paddings_1sxt8_t1bin_283:not(#\9):not(:empty) {
+.awsui_content-with-paddings_1sxt8_19ouv_289:not(#\9):not(:empty) {
   padding-block-start: var(--space-panel-content-top-s8rcdz, 20px);
   padding-inline-start: var(--space-panel-side-left-07kpj4, 32px);
   padding-inline-end: var(--space-panel-side-right-b77xx0, 32px);
   padding-block-end: var(--space-panel-content-bottom-igtxf0, 40px);
 }
 
-.awsui_footer_1sxt8_t1bin_290:not(#\9) {
+.awsui_footer_1sxt8_19ouv_296:not(#\9) {
   background-color: var(--color-background-container-content-aemn43, #ffffff);
   border-block-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-panel-header-iffljr, #eaeded);
   padding-block: var(--space-panel-content-top-s8rcdz, 20px);
   padding-inline: var(--space-panel-side-left-07kpj4, 32px) var(--space-panel-side-right-b77xx0, 32px);
 }
-.awsui_footer_1sxt8_t1bin_290.awsui_is-sticky_1sxt8_t1bin_296:not(#\9) {
+.awsui_footer_1sxt8_19ouv_296.awsui_is-sticky_1sxt8_19ouv_302:not(#\9) {
   position: sticky;
   inset-block-end: 0;
   inset-inline-start: 0;
@@ -301,6 +307,6 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 810;
 }
 
-.awsui_test-utils-drawer-content_1sxt8_t1bin_304:not(#\9) {
+.awsui_test-utils-drawer-content_1sxt8_19ouv_310:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/drawer/styles.selectors.js

@@ -2,17 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer": "awsui_drawer_1sxt8_t1bin_189",
-  "with-footer": "awsui_with-footer_1sxt8_t1bin_221",
-  "content": "awsui_content_1sxt8_t1bin_226",
-  "header": "awsui_header_1sxt8_t1bin_230",
-  "with-additional-action": "awsui_with-additional-action_1sxt8_t1bin_247",
-  "with-runtime-context": "awsui_with-runtime-context_1sxt8_t1bin_255",
-  "with-toolbar": "awsui_with-toolbar_1sxt8_t1bin_258",
-  "header-actions": "awsui_header-actions_1sxt8_t1bin_277",
-  "content-with-paddings": "awsui_content-with-paddings_1sxt8_t1bin_283",
-  "footer": "awsui_footer_1sxt8_t1bin_290",
-  "is-sticky": "awsui_is-sticky_1sxt8_t1bin_296",
-  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_t1bin_304"
+  "drawer": "awsui_drawer_1sxt8_19ouv_189",
+  "position-absolute": "awsui_position-absolute_1sxt8_19ouv_222",
+  "position-sticky": "awsui_position-sticky_1sxt8_19ouv_222",
+  "position-fixed": "awsui_position-fixed_1sxt8_19ouv_222",
+  "with-footer": "awsui_with-footer_1sxt8_19ouv_225",
+  "position-static": "awsui_position-static_1sxt8_19ouv_229",
+  "content": "awsui_content_1sxt8_19ouv_232",
+  "header": "awsui_header_1sxt8_19ouv_236",
+  "with-additional-action": "awsui_with-additional-action_1sxt8_19ouv_253",
+  "with-runtime-context": "awsui_with-runtime-context_1sxt8_19ouv_261",
+  "with-toolbar": "awsui_with-toolbar_1sxt8_19ouv_264",
+  "header-actions": "awsui_header-actions_1sxt8_19ouv_283",
+  "content-with-paddings": "awsui_content-with-paddings_1sxt8_19ouv_289",
+  "footer": "awsui_footer_1sxt8_19ouv_296",
+  "is-sticky": "awsui_is-sticky_1sxt8_19ouv_302",
+  "test-utils-drawer-content": "awsui_test-utils-drawer-content_1sxt8_19ouv_310"
 };
   

package/lib/internal/template/drawer/utils.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NextDrawerProps } from './interfaces';
+type PositionProps = Pick<NextDrawerProps, 'position' | 'placement' | 'offset' | 'stickyOffset' | 'zIndex'>;
+export declare function getPositionStyles({ position, zIndex, ...props }: PositionProps): {
+    className: string;
+    style: React.CSSProperties;
+};
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/lib/internal/template/drawer/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/drawer/utils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI/C,KAAK,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,QAAQ,CAAC,CAAC;AAE5G,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,GAAG;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B,CAmBA"}

package/lib/internal/template/drawer/utils.js

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import styles from './styles.css.js';
+export function getPositionStyles({ position, zIndex, ...props }) {
+    if (position === 'sticky' && (props.placement === 'start' || props.placement === 'end')) {
+        warnOnce('Drawer', `position="sticky" is not supported with placement="${props.placement}" and falls back to position="static".`);
+        position = 'static';
+    }
+    switch (position) {
+        case 'absolute':
+            return getStyles(position, { position: 'absolute', zIndex, ...computeAbsoluteOffsets(props) });
+        case 'sticky':
+            return getStyles(position, { position: 'sticky', zIndex, ...computeStickyOffsets(props) });
+        case 'fixed':
+            return getStyles(position, { position: 'fixed', zIndex, ...computeAbsoluteOffsets(props) });
+        case 'static':
+        default:
+            return getStyles(position);
+    }
+}
+function getStyles(position = 'static', style = {}) {
+    return { className: styles[`position-${position}`], style };
+}
+function computeAbsoluteOffsets({ placement, offset: { top, bottom, start, end } = {}, }) {
+    const style = {};
+    const offset = { top: top !== null && top !== void 0 ? top : 0, bottom: bottom !== null && bottom !== void 0 ? bottom : 0, start: start !== null && start !== void 0 ? start : 0, end: end !== null && end !== void 0 ? end : 0 };
+    switch (placement) {
+        case 'top':
+            style.insetBlockStart = offset.top;
+            style.insetInlineStart = offset.start;
+            style.insetInlineEnd = offset.end;
+            break;
+        case 'bottom':
+            style.insetBlockEnd = offset.bottom;
+            style.insetInlineStart = offset.start;
+            style.insetInlineEnd = offset.end;
+            break;
+        case 'start':
+            style.insetInlineStart = offset.start;
+            style.insetBlockStart = offset.top;
+            style.insetBlockEnd = offset.bottom;
+            break;
+        case 'end':
+            style.insetInlineEnd = offset.end;
+            style.insetBlockStart = offset.top;
+            style.insetBlockEnd = offset.bottom;
+            break;
+    }
+    return style;
+}
+function computeStickyOffsets({ placement, offset: { top, bottom, start, end } = {}, stickyOffset: { top: stickyTop, bottom: stickyBottom } = {}, }) {
+    const style = {};
+    const offset = { top: top !== null && top !== void 0 ? top : 0, bottom: bottom !== null && bottom !== void 0 ? bottom : 0, start: start !== null && start !== void 0 ? start : 0, end: end !== null && end !== void 0 ? end : 0 };
+    const stickyOffset = { top: stickyTop !== null && stickyTop !== void 0 ? stickyTop : 0, bottom: stickyBottom !== null && stickyBottom !== void 0 ? stickyBottom : 0 };
+    switch (placement) {
+        case 'top':
+            style.insetBlockStart = stickyOffset.top;
+            style.marginBlockStart = offset.top;
+            style.marginInlineStart = offset.start;
+            style.marginInlineEnd = offset.end;
+            style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;
+            break;
+        case 'bottom':
+            style.insetBlockEnd = stickyOffset.bottom;
+            style.marginBlockEnd = offset.bottom;
+            style.marginInlineStart = offset.start;
+            style.marginInlineEnd = offset.end;
+            style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;
+            break;
+    }
+    return style;
+}
+//# sourceMappingURL=utils.js.map

package/lib/internal/template/drawer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/drawer/utils.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { NextDrawerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype PositionProps = Pick<NextDrawerProps, 'position' | 'placement' | 'offset' | 'stickyOffset' | 'zIndex'>;\n\nexport function getPositionStyles({ position, zIndex, ...props }: PositionProps): {\n  className: string;\n  style: React.CSSProperties;\n} {\n  if (position === 'sticky' && (props.placement === 'start' || props.placement === 'end')) {\n    warnOnce(\n      'Drawer',\n      `position=\"sticky\" is not supported with placement=\"${props.placement}\" and falls back to position=\"static\".`\n    );\n    position = 'static';\n  }\n  switch (position) {\n    case 'absolute':\n      return getStyles(position, { position: 'absolute', zIndex, ...computeAbsoluteOffsets(props) });\n    case 'sticky':\n      return getStyles(position, { position: 'sticky', zIndex, ...computeStickyOffsets(props) });\n    case 'fixed':\n      return getStyles(position, { position: 'fixed', zIndex, ...computeAbsoluteOffsets(props) });\n    case 'static':\n    default:\n      return getStyles(position);\n  }\n}\n\nfunction getStyles(position: NextDrawerProps.Position = 'static', style: React.CSSProperties = {}) {\n  return { className: styles[`position-${position}`], style };\n}\n\nfunction computeAbsoluteOffsets({\n  placement,\n  offset: { top, bottom, start, end } = {},\n}: Pick<NextDrawerProps, 'placement' | 'offset'>) {\n  const style: React.CSSProperties = {};\n  const offset = { top: top ?? 0, bottom: bottom ?? 0, start: start ?? 0, end: end ?? 0 };\n  switch (placement) {\n    case 'top':\n      style.insetBlockStart = offset.top;\n      style.insetInlineStart = offset.start;\n      style.insetInlineEnd = offset.end;\n      break;\n    case 'bottom':\n      style.insetBlockEnd = offset.bottom;\n      style.insetInlineStart = offset.start;\n      style.insetInlineEnd = offset.end;\n      break;\n    case 'start':\n      style.insetInlineStart = offset.start;\n      style.insetBlockStart = offset.top;\n      style.insetBlockEnd = offset.bottom;\n      break;\n    case 'end':\n      style.insetInlineEnd = offset.end;\n      style.insetBlockStart = offset.top;\n      style.insetBlockEnd = offset.bottom;\n      break;\n  }\n  return style;\n}\n\nfunction computeStickyOffsets({\n  placement,\n  offset: { top, bottom, start, end } = {},\n  stickyOffset: { top: stickyTop, bottom: stickyBottom } = {},\n}: Pick<NextDrawerProps, 'placement' | 'offset' | 'stickyOffset'>) {\n  const style: React.CSSProperties = {};\n  const offset = { top: top ?? 0, bottom: bottom ?? 0, start: start ?? 0, end: end ?? 0 };\n  const stickyOffset = { top: stickyTop ?? 0, bottom: stickyBottom ?? 0 };\n  switch (placement) {\n    case 'top':\n      style.insetBlockStart = stickyOffset.top;\n      style.marginBlockStart = offset.top;\n      style.marginInlineStart = offset.start;\n      style.marginInlineEnd = offset.end;\n      style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;\n      break;\n    case 'bottom':\n      style.insetBlockEnd = stickyOffset.bottom;\n      style.marginBlockEnd = offset.bottom;\n      style.marginInlineStart = offset.start;\n      style.marginInlineEnd = offset.end;\n      style.inlineSize = `calc(100% - ${offset.start + offset.end}px)`;\n      break;\n  }\n  return style;\n}\n"]}

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

@@ -287,6 +287,7 @@ body {
   --color-background-input-disabled-4vlau3:var(--color-neutral-250-hdfqdx);
   --color-background-item-selected-v20q4r:var(--color-primary-50-k00bx1);
   --color-background-layout-main-05m5y6:var(--color-neutral-200-z3mmn9);
+  --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-mobile-panel-20j5lz:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
   --color-background-layout-panel-hover-5jdzo1:var(--color-neutral-250-hdfqdx);
@@ -1410,6 +1411,7 @@ body {
   --color-background-card-39vmsz:var(--color-background-container-content-aemn43);
   --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
   --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
+  --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-mobile-panel-20j5lz:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
   --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
@@ -2467,6 +2469,7 @@ body {
   --color-background-action-card-disabled-f0sl41:var(--color-neutral-850-m3u7h5);
   --color-background-card-39vmsz:var(--color-background-container-content-aemn43);
   --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
+  --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
   --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
   --color-background-segment-disabled-etp65k:var(--color-background-button-normal-disabled-rd09ns);
@@ -2657,6 +2660,7 @@ body {
   --color-background-card-39vmsz:var(--color-background-container-content-aemn43);
   --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
   --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
+  --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
   --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
   --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
@@ -2927,6 +2931,7 @@ body {
   --color-background-card-39vmsz:var(--color-background-container-content-aemn43);
   --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
   --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
+  --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
   --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
   --color-background-segment-hover-bakufl:var(--color-background-button-normal-hover-r7x40d);
@@ -3196,6 +3201,7 @@ body {
   --color-background-card-39vmsz:var(--color-background-container-content-aemn43);
   --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
   --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
+  --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
   --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
   --color-background-segment-hover-bakufl:var(--color-background-button-normal-hover-r7x40d);
@@ -3674,6 +3680,7 @@ body {
   --color-background-card-39vmsz:var(--color-background-container-content-aemn43);
   --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
   --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
+  --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
   --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
   --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
@@ -3931,6 +3938,7 @@ body {
   --color-background-card-39vmsz:var(--color-background-container-content-aemn43);
   --color-background-item-card-st2hxn:var(--color-background-card-39vmsz);
   --color-background-dropdown-item-selected-1c9k0x:var(--color-background-item-selected-v20q4r);
+  --color-background-drawer-v79o7e:var(--color-background-layout-panel-content-9tbx75);
   --color-background-layout-panel-content-9tbx75:var(--color-background-container-content-aemn43);
   --color-background-modal-overlay-i6vork:var(--color-grey-opaque-70-ueherc);
   --color-background-segment-default-zwi7m6:var(--color-background-button-normal-default-odgg8b);
@@ -4174,5 +4182,5 @@ body {
   }
 }
 :root {
-  --awsui-version-info-52ff00f9: true;
+  --awsui-version-info-9d03c896: true;
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (52ff00f9)",
-  "GIT_SHA": "52ff00f9",
+  "PACKAGE_VERSION": "3.0.0 (9d03c896)",
+  "GIT_SHA": "9d03c896",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

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

@@ -325,6 +325,7 @@ export const colorBackgroundInputDefault: string;
 export const colorBackgroundInputDisabled: string;
 export const colorBackgroundItemSelected: string;
 export const colorBackgroundLayoutMain: string;
+export const colorBackgroundDrawer: string;
 export const colorBackgroundLayoutMobilePanel: string;
 export const colorBackgroundLayoutPanelContent: string;
 export const colorBackgroundLayoutPanelHover: string;

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

@@ -325,6 +325,7 @@ export var colorBackgroundInputDefault = "var(--color-background-input-default-i
 export var colorBackgroundInputDisabled = "var(--color-background-input-disabled-dihaja, #ebebf0)";
 export var colorBackgroundItemSelected = "var(--color-background-item-selected-9gppru, #f0fbff)";
 export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwcb, #ffffff)";
+export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";
 export var colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel-ed0ava, #0f141a)";
 export var colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content-xto15e, #ffffff)";
 export var colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover-tguulw, #ebebf0)";

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

@@ -1347,6 +1347,10 @@ module.exports.preset = {
         "light": "{colorWhite}",
         "dark": "{colorNeutral850}"
       },
+      "colorBackgroundDrawer": {
+        "light": "{colorBackgroundLayoutPanelContent}",
+        "dark": "{colorBackgroundLayoutPanelContent}"
+      },
       "colorBackgroundLayoutMobilePanel": {
         "light": "{colorNeutral950}",
         "dark": "{colorNeutral950}"
@@ -3921,6 +3925,10 @@ module.exports.preset = {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -5366,6 +5374,10 @@ module.exports.preset = {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -6739,6 +6751,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -7997,6 +8013,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -9255,6 +9275,10 @@ module.exports.preset = {
             "light": "{colorWhite}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -10515,6 +10539,10 @@ module.exports.preset = {
             "light": "{colorNeutral850}",
             "dark": "{colorNeutral850}"
           },
+          "colorBackgroundDrawer": {
+            "light": "{colorBackgroundLayoutPanelContent}",
+            "dark": "{colorBackgroundLayoutPanelContent}"
+          },
           "colorBackgroundLayoutMobilePanel": {
             "light": "{colorNeutral950}",
             "dark": "{colorNeutral950}"
@@ -11884,6 +11912,7 @@ module.exports.preset = {
       "colorBackgroundInputDisabled": "color",
       "colorBackgroundItemSelected": "color",
       "colorBackgroundLayoutMain": "color",
+      "colorBackgroundDrawer": "color",
       "colorBackgroundLayoutMobilePanel": "color",
       "colorBackgroundLayoutPanelContent": "color",
       "colorBackgroundLayoutPanelHover": "color",
@@ -13664,6 +13693,7 @@ module.exports.preset = {
     "colorBackgroundInputDisabled": "color-background-input-disabled",
     "colorBackgroundItemSelected": "color-background-item-selected",
     "colorBackgroundLayoutMain": "color-background-layout-main",
+    "colorBackgroundDrawer": "color-background-drawer",
     "colorBackgroundLayoutMobilePanel": "color-background-layout-mobile-panel",
     "colorBackgroundLayoutPanelContent": "color-background-layout-panel-content",
     "colorBackgroundLayoutPanelHover": "color-background-layout-panel-hover",
@@ -14554,6 +14584,7 @@ module.exports.preset = {
     "colorBackgroundInputDisabled": "--color-background-input-disabled-dihaja",
     "colorBackgroundItemSelected": "--color-background-item-selected-9gppru",
     "colorBackgroundLayoutMain": "--color-background-layout-main-5ilwcb",
+    "colorBackgroundDrawer": "--color-background-drawer-5hs0eh",
     "colorBackgroundLayoutMobilePanel": "--color-background-layout-mobile-panel-ed0ava",
     "colorBackgroundLayoutPanelContent": "--color-background-layout-panel-content-xto15e",
     "colorBackgroundLayoutPanelHover": "--color-background-layout-panel-hover-tguulw",