@cloudscape-design/components-themeable 3.0.1077 → 3.0.1078

package/lib/internal/template/split-panel/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/split-panel/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 SplitPanelProps extends BaseComponentProps {\n  /**\n   * Header of the split panel.\n   */\n  header: string;\n  children: React.ReactNode;\n  /**\n   * Determines whether the split panel collapses or hides completely when closed.\n   */\n  closeBehavior?: 'collapse' | 'hide';\n  /**\n   * When set to `true`, the preferences button is not displayed.\n   */\n  hidePreferencesButton?: boolean;\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `closeButtonAriaLabel` - The text of the panel close button aria label.\n   * - `openButtonAriaLabel` - The text of the panel open button aria label.\n   * - `preferencesTitle` - The text of the preferences modal header.\n   * - `preferencesPositionLabel` - The text of the position preference label.\n   * - `preferencesPositionDescription` - The text of the position preference description.\n   * - `preferencesPositionSide` - The text of the side position preference label.\n   * - `preferencesPositionBottom` - The text of the bottom position preference label.\n   * - `preferencesConfirm` - The text of the preference modal confirm button.\n   * - `preferencesCancel` - The text of the preference modal cancel button.\n   * - `resizeHandleAriaLabel` - The label of the resize handle aria label.\n   * @i18n\n   */\n  i18nStrings?: SplitPanelProps.I18nStrings;\n}\n\nexport namespace SplitPanelProps {\n  export interface I18nStrings {\n    closeButtonAriaLabel?: string;\n    openButtonAriaLabel?: string;\n    preferencesTitle?: string;\n    preferencesPositionLabel?: string;\n    preferencesPositionDescription?: string;\n    preferencesPositionSide?: string;\n    preferencesPositionBottom?: string;\n    preferencesConfirm?: string;\n    preferencesCancel?: string;\n    preferencesCloseAriaLabel?: string;\n    resizeHandleAriaLabel?: string;\n    resizeHandleTooltipText?: string;\n  }\n}\n\nexport interface SplitPanelContentProps {\n  style: React.CSSProperties;\n  baseProps: BaseComponentProps;\n  isOpen?: boolean;\n  splitPanelRef?: React.Ref<any>;\n  cappedSize: number;\n  panelHeaderId: string;\n  resizeHandle: React.ReactNode;\n  header: React.ReactNode;\n  children: React.ReactNode;\n  onToggle: () => void;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/split-panel/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 SplitPanelProps extends BaseComponentProps {\n  /**\n   * Header text of the split panel.\n   */\n  header?: string;\n  children: React.ReactNode;\n  /**\n   * Determines whether the split panel collapses or hides completely when closed.\n   */\n  closeBehavior?: 'collapse' | 'hide';\n  /**\n   * When set to `true`, the preferences button is not displayed.\n   */\n  hidePreferencesButton?: boolean;\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `closeButtonAriaLabel` - The text of the panel close button aria label.\n   * - `openButtonAriaLabel` - The text of the panel open button aria label.\n   * - `preferencesTitle` - The text of the preferences modal header.\n   * - `preferencesPositionLabel` - The text of the position preference label.\n   * - `preferencesPositionDescription` - The text of the position preference description.\n   * - `preferencesPositionSide` - The text of the side position preference label.\n   * - `preferencesPositionBottom` - The text of the bottom position preference label.\n   * - `preferencesConfirm` - The text of the preference modal confirm button.\n   * - `preferencesCancel` - The text of the preference modal cancel button.\n   * - `resizeHandleAriaLabel` - The label of the resize handle aria label.\n   * @i18n\n   */\n  i18nStrings?: SplitPanelProps.I18nStrings;\n\n  /**\n   * ARIA label for the panel. Use this if the value passed in the `header` property is not descriptive as a label for the panel.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Actions for the header.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Supplementary text below the heading.\n   */\n  headerDescription?: React.ReactNode;\n\n  /**\n   * The area next to the heading, used to display an Info link.\n   */\n  headerInfo?: React.ReactNode;\n\n  /**\n   * Content displayed before the header text.\n   */\n  headerBefore?: React.ReactNode;\n}\n\nexport namespace SplitPanelProps {\n  export interface I18nStrings {\n    closeButtonAriaLabel?: string;\n    openButtonAriaLabel?: string;\n    preferencesTitle?: string;\n    preferencesPositionLabel?: string;\n    preferencesPositionDescription?: string;\n    preferencesPositionSide?: string;\n    preferencesPositionBottom?: string;\n    preferencesConfirm?: string;\n    preferencesCancel?: string;\n    preferencesCloseAriaLabel?: string;\n    resizeHandleAriaLabel?: string;\n    resizeHandleTooltipText?: string;\n  }\n}\n\nexport interface SplitPanelContentProps {\n  style: React.CSSProperties;\n  baseProps: BaseComponentProps;\n  isOpen?: boolean;\n  splitPanelRef?: React.Ref<any>;\n  cappedSize: number;\n  panelHeaderId?: string;\n  ariaLabel?: string;\n  resizeHandle: React.ReactNode;\n  header: React.ReactNode;\n  children: React.ReactNode;\n  onToggle: () => void;\n}\n"]}

package/lib/internal/template/split-panel/side.d.ts

@@ -6,6 +6,6 @@ interface SplitPanelContentSideProps extends SplitPanelContentProps {
     openButtonAriaLabel?: string;
     toggleRef: React.RefObject<ButtonProps.Ref>;
 }
-export declare function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, closeBehavior, }: SplitPanelContentSideProps): JSX.Element;
+export declare function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, ariaLabel, onToggle, closeBehavior, }: SplitPanelContentSideProps): JSX.Element;
 export {};
 //# sourceMappingURL=side.d.ts.map

package/lib/internal/template/split-panel/side.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMvE,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,aAAa,GACd,EAAE,0BAA0B,eAyD5B"}
+{"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMvE,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,QAAQ,EACR,aAAa,GACd,EAAE,0BAA0B,eA0D5B"}

package/lib/internal/template/split-panel/side.js

@@ -9,7 +9,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import sharedStyles from '../app-layout/resize/styles.css.js';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
-export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, closeBehavior, }) {
+export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, ariaLabel, onToggle, closeBehavior, }) {
     const { topOffset, bottomOffset, animationDisabled } = useSplitPanelContext();
     const isRefresh = useVisualRefresh();
     const isToolbar = useAppLayoutToolbarDesignEnabled();
@@ -24,7 +24,7 @@ export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleR
         React.createElement("div", { className: styles['drawer-content-side'], style: {
                 top: topOffset,
                 bottom: bottomOffset,
-            }, onClick: () => !isOpen && onToggle(), "aria-labelledby": panelHeaderId, role: "region" },
+            }, onClick: () => !isOpen && onToggle(), "aria-labelledby": panelHeaderId, "aria-label": ariaLabel, role: "region" },
             isOpen ? (React.createElement("div", { className: clsx(styles['slider-wrapper-side'], isToolbar && styles['with-toolbar']) }, resizeHandle)) : closeBehavior === 'hide' ? null : (React.createElement(InternalButton, { className: clsx(testUtilStyles['open-button'], styles['open-button-side']), iconName: "angle-left", variant: "icon", formAction: "none", ariaLabel: openButtonAriaLabel, ariaExpanded: isOpen, 
                 //toggleRef should only be assigned when there is no other trigger-buttons
                 ref: isRefresh || isToolbar ? null : toggleRef })),

package/lib/internal/template/split-panel/side.js.map

@@ -1 +1 @@
-{"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AAErF,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGrE,OAAO,YAAY,MAAM,oCAAoC,CAAC;AAC9D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAQ1D,MAAM,UAAU,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,aAAa,GACc;IAC3B,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9E,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,SAAS,GAAG,gCAAgC,EAAE,CAAC;IACrD,MAAM,gBAAgB,GAAG,iBAAiB,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC;IACpF,OAAO,CACL,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,cAAc,CAAC,IAAI,EAAE;YAChG,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC,EAAE,CAAC,gBAAgB;YAC3D,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC,EAAE,MAAM;YAC9C,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,MAAM;YAClC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,SAAS;YACnC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS;SAC5B,CAAC,EACF,KAAK,kBACH,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC1D,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACrC,KAAK,GAEV,GAAG,EAAE,aAAa;QAElB,6BACE,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,EACxC,KAAK,EAAE;gBACL,GAAG,EAAE,SAAS;gBACd,MAAM,EAAE,YAAY;aACrB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,QAAQ,EAAE,qBACnB,aAAa,EAC9B,IAAI,EAAC,QAAQ;YAEZ,MAAM,CAAC,CAAC,CAAC,CACR,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,IAAG,YAAY,CAAO,CAC/G,CAAC,CAAC,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpC,oBAAC,cAAc,IACb,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,kBAAkB,CAAC,CAAC,EAC1E,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,mBAAmB,EAC9B,YAAY,EAAE,MAAM;gBACpB,0EAA0E;gBAC1E,GAAG,EAAE,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,GAC9C,CACH;YACD,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,iBAC/D,CAAC,MAAM,EACpB,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE;gBAEhD,6BAAK,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,CAAO;gBAClE,6BAAK,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,IAAG,QAAQ,CAAO,CACjE,CACF,CACF,CACP,CAAC;AACJ,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';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { ButtonProps } from '../button/interfaces';\nimport InternalButton from '../button/internal';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps, SplitPanelProps } from './interfaces';\n\nimport sharedStyles from '../app-layout/resize/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface SplitPanelContentSideProps extends SplitPanelContentProps {\n  closeBehavior: SplitPanelProps['closeBehavior'];\n  openButtonAriaLabel?: string;\n  toggleRef: React.RefObject<ButtonProps.Ref>;\n}\n\nexport function SplitPanelContentSide({\n  style,\n  baseProps,\n  splitPanelRef,\n  toggleRef,\n  header,\n  children,\n  resizeHandle,\n  isOpen,\n  cappedSize,\n  openButtonAriaLabel,\n  panelHeaderId,\n  onToggle,\n  closeBehavior,\n}: SplitPanelContentSideProps) {\n  const { topOffset, bottomOffset, animationDisabled } = useSplitPanelContext();\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const disableAnimation = animationDisabled || (closeBehavior === 'hide' && !isOpen);\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles['position-side'], testUtilStyles.root, {\n        [sharedStyles['with-motion-horizontal']]: !disableAnimation,\n        [testUtilStyles['open-position-side']]: isOpen,\n        [styles['drawer-closed']]: !isOpen,\n        [styles['with-toolbar']]: isToolbar,\n        [styles.refresh]: isRefresh,\n      })}\n      style={{\n        width: isOpen ? cappedSize : isRefresh ? '0px' : undefined,\n        maxWidth: isRefresh ? '100%' : undefined,\n        ...style,\n      }}\n      ref={splitPanelRef}\n    >\n      <div\n        className={styles['drawer-content-side']}\n        style={{\n          top: topOffset,\n          bottom: bottomOffset,\n        }}\n        onClick={() => !isOpen && onToggle()}\n        aria-labelledby={panelHeaderId}\n        role=\"region\"\n      >\n        {isOpen ? (\n          <div className={clsx(styles['slider-wrapper-side'], isToolbar && styles['with-toolbar'])}>{resizeHandle}</div>\n        ) : closeBehavior === 'hide' ? null : (\n          <InternalButton\n            className={clsx(testUtilStyles['open-button'], styles['open-button-side'])}\n            iconName=\"angle-left\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={openButtonAriaLabel}\n            ariaExpanded={isOpen}\n            //toggleRef should only be assigned when there is no other trigger-buttons\n            ref={isRefresh || isToolbar ? null : toggleRef}\n          />\n        )}\n        <div\n          className={clsx(styles['content-side'], isToolbar && styles['with-toolbar'])}\n          aria-hidden={!isOpen}\n          style={{ width: isToolbar ? cappedSize : '0px' }} // to prevent text wrapping upon entering\n        >\n          <div className={styles['pane-header-wrapper-side']}>{header}</div>\n          <div className={styles['pane-content-wrapper-side']}>{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/split-panel/side.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 from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { ButtonProps } from '../button/interfaces';\nimport InternalButton from '../button/internal';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps, SplitPanelProps } from './interfaces';\n\nimport sharedStyles from '../app-layout/resize/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface SplitPanelContentSideProps extends SplitPanelContentProps {\n  closeBehavior: SplitPanelProps['closeBehavior'];\n  openButtonAriaLabel?: string;\n  toggleRef: React.RefObject<ButtonProps.Ref>;\n}\n\nexport function SplitPanelContentSide({\n  style,\n  baseProps,\n  splitPanelRef,\n  toggleRef,\n  header,\n  children,\n  resizeHandle,\n  isOpen,\n  cappedSize,\n  openButtonAriaLabel,\n  panelHeaderId,\n  ariaLabel,\n  onToggle,\n  closeBehavior,\n}: SplitPanelContentSideProps) {\n  const { topOffset, bottomOffset, animationDisabled } = useSplitPanelContext();\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const disableAnimation = animationDisabled || (closeBehavior === 'hide' && !isOpen);\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles['position-side'], testUtilStyles.root, {\n        [sharedStyles['with-motion-horizontal']]: !disableAnimation,\n        [testUtilStyles['open-position-side']]: isOpen,\n        [styles['drawer-closed']]: !isOpen,\n        [styles['with-toolbar']]: isToolbar,\n        [styles.refresh]: isRefresh,\n      })}\n      style={{\n        width: isOpen ? cappedSize : isRefresh ? '0px' : undefined,\n        maxWidth: isRefresh ? '100%' : undefined,\n        ...style,\n      }}\n      ref={splitPanelRef}\n    >\n      <div\n        className={styles['drawer-content-side']}\n        style={{\n          top: topOffset,\n          bottom: bottomOffset,\n        }}\n        onClick={() => !isOpen && onToggle()}\n        aria-labelledby={panelHeaderId}\n        aria-label={ariaLabel}\n        role=\"region\"\n      >\n        {isOpen ? (\n          <div className={clsx(styles['slider-wrapper-side'], isToolbar && styles['with-toolbar'])}>{resizeHandle}</div>\n        ) : closeBehavior === 'hide' ? null : (\n          <InternalButton\n            className={clsx(testUtilStyles['open-button'], styles['open-button-side'])}\n            iconName=\"angle-left\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={openButtonAriaLabel}\n            ariaExpanded={isOpen}\n            //toggleRef should only be assigned when there is no other trigger-buttons\n            ref={isRefresh || isToolbar ? null : toggleRef}\n          />\n        )}\n        <div\n          className={clsx(styles['content-side'], isToolbar && styles['with-toolbar'])}\n          aria-hidden={!isOpen}\n          style={{ width: isToolbar ? cappedSize : '0px' }} // to prevent text wrapping upon entering\n        >\n          <div className={styles['pane-header-wrapper-side']}>{header}</div>\n          <div className={styles['pane-content-wrapper-side']}>{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/split-panel/styles.css.js

@@ -1,32 +1,43 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_1r9lg_7nc4m_153",
-  "drawer-closed": "awsui_drawer-closed_1r9lg_7nc4m_190",
-  "refresh": "awsui_refresh_1r9lg_7nc4m_193",
-  "drawer-content-side": "awsui_drawer-content-side_1r9lg_7nc4m_197",
-  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_7nc4m_213",
-  "position-bottom": "awsui_position-bottom_1r9lg_7nc4m_220",
-  "hidden": "awsui_hidden_1r9lg_7nc4m_228",
-  "position-side": "awsui_position-side_1r9lg_7nc4m_249",
-  "with-toolbar": "awsui_with-toolbar_1r9lg_7nc4m_254",
-  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_7nc4m_258",
-  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_7nc4m_269",
-  "open-button-side": "awsui_open-button-side_1r9lg_7nc4m_283",
-  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_7nc4m_292",
-  "drawer-mobile": "awsui_drawer-mobile_1r9lg_7nc4m_302",
-  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_7nc4m_306",
-  "content-bottom": "awsui_content-bottom_1r9lg_7nc4m_318",
-  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_7nc4m_337",
-  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_7nc4m_342",
-  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_7nc4m_346",
-  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_7nc4m_350",
-  "content-side": "awsui_content-side_1r9lg_7nc4m_355",
-  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_7nc4m_367",
-  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_7nc4m_376",
-  "header": "awsui_header_1r9lg_7nc4m_387",
-  "header-text": "awsui_header-text_1r9lg_7nc4m_400",
-  "header-actions": "awsui_header-actions_1r9lg_7nc4m_414",
-  "divider": "awsui_divider_1r9lg_7nc4m_422"
+  "drawer": "awsui_drawer_1r9lg_1y2ds_153",
+  "drawer-closed": "awsui_drawer-closed_1r9lg_1y2ds_190",
+  "refresh": "awsui_refresh_1r9lg_1y2ds_190",
+  "drawer-content-side": "awsui_drawer-content-side_1r9lg_1y2ds_194",
+  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_1y2ds_210",
+  "position-bottom": "awsui_position-bottom_1r9lg_1y2ds_217",
+  "hidden": "awsui_hidden_1r9lg_1y2ds_225",
+  "drawer-clickable": "awsui_drawer-clickable_1r9lg_1y2ds_236",
+  "position-side": "awsui_position-side_1r9lg_1y2ds_247",
+  "with-toolbar": "awsui_with-toolbar_1r9lg_1y2ds_252",
+  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_1y2ds_256",
+  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_1y2ds_267",
+  "open-button-side": "awsui_open-button-side_1r9lg_1y2ds_281",
+  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_1y2ds_290",
+  "drawer-mobile": "awsui_drawer-mobile_1r9lg_1y2ds_300",
+  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_1y2ds_304",
+  "content-bottom": "awsui_content-bottom_1r9lg_1y2ds_316",
+  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_1y2ds_335",
+  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_1y2ds_340",
+  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_1y2ds_344",
+  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_1y2ds_348",
+  "content-side": "awsui_content-side_1r9lg_1y2ds_353",
+  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_1y2ds_365",
+  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_1y2ds_374",
+  "header": "awsui_header_1r9lg_1y2ds_385",
+  "header-main-row": "awsui_header-main-row_1r9lg_1y2ds_393",
+  "header-main-content": "awsui_header-main-content_1r9lg_1y2ds_393",
+  "header-tag-and-info": "awsui_header-tag-and-info_1r9lg_1y2ds_407",
+  "with-description": "awsui_with-description_1r9lg_1y2ds_412",
+  "header-tag": "awsui_header-tag_1r9lg_1y2ds_407",
+  "with-info": "awsui_with-info_1r9lg_1y2ds_415",
+  "header-text": "awsui_header-text_1r9lg_1y2ds_415",
+  "header-before-slot": "awsui_header-before-slot_1r9lg_1y2ds_421",
+  "with-header-text": "awsui_with-header-text_1r9lg_1y2ds_432",
+  "header-actions-slot": "awsui_header-actions-slot_1r9lg_1y2ds_438",
+  "header-description": "awsui_header-description_1r9lg_1y2ds_444",
+  "header-buttons": "awsui_header-buttons_1r9lg_1y2ds_451",
+  "divider": "awsui_divider_1r9lg_1y2ds_459"
 };
   

package/lib/internal/template/split-panel/styles.scoped.css

@@ -150,7 +150,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_1r9lg_7nc4m_153:not(#\9) {
+.awsui_drawer_1r9lg_1y2ds_153:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -187,37 +187,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--color-background-layout-panel-content-9tbx75, #ffffff);
   z-index: 840;
 }
-.awsui_drawer-closed_1r9lg_7nc4m_190:not(#\9) {
-  cursor: pointer;
-}
-.awsui_drawer-closed_1r9lg_7nc4m_190:not(#\9):not(.awsui_refresh_1r9lg_7nc4m_193) {
+.awsui_drawer-closed_1r9lg_1y2ds_190:not(#\9):not(.awsui_refresh_1r9lg_1y2ds_190) {
   min-inline-size: 40px;
 }
 
-.awsui_drawer-content-side_1r9lg_7nc4m_197:not(#\9) {
+.awsui_drawer-content-side_1r9lg_1y2ds_194:not(#\9) {
   display: flex;
   align-items: center;
   block-size: 100%;
   overflow: auto;
 }
-.awsui_drawer-content-side_1r9lg_7nc4m_197 > [aria-hidden=true]:not(#\9), .awsui_drawer-closed_1r9lg_7nc4m_190.awsui_refresh_1r9lg_7nc4m_193 > .awsui_drawer-content-side_1r9lg_7nc4m_197:not(#\9) {
+.awsui_drawer-content-side_1r9lg_1y2ds_194 > [aria-hidden=true]:not(#\9), .awsui_drawer-closed_1r9lg_1y2ds_190.awsui_refresh_1r9lg_1y2ds_190 > .awsui_drawer-content-side_1r9lg_1y2ds_194:not(#\9) {
   display: none;
 }
-.awsui_drawer-closed_1r9lg_7nc4m_190:not(#\9):not(.awsui_refresh_1r9lg_7nc4m_193) > .awsui_drawer-content-side_1r9lg_7nc4m_197 {
+.awsui_drawer-closed_1r9lg_1y2ds_190:not(#\9):not(.awsui_refresh_1r9lg_1y2ds_190) > .awsui_drawer-content-side_1r9lg_1y2ds_194 {
   inline-size: 40px;
 }
-.awsui_drawer-closed_1r9lg_7nc4m_190:not(#\9):not(.awsui_refresh_1r9lg_7nc4m_193) > .awsui_drawer-content-side_1r9lg_7nc4m_197:hover {
+.awsui_drawer-closed_1r9lg_1y2ds_190:not(#\9):not(.awsui_refresh_1r9lg_1y2ds_190) > .awsui_drawer-content-side_1r9lg_1y2ds_194:hover {
   background: var(--color-background-layout-panel-hover-5jdzo1, #eaeded);
 }
 
-:not(#\9):not(.awsui_drawer-closed_1r9lg_7nc4m_190) > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 {
+:not(#\9):not(.awsui_drawer-closed_1r9lg_1y2ds_190) > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 {
   overflow-y: auto;
   position: absolute;
   inset: 0;
   clip-path: border-box;
 }
 
-.awsui_position-bottom_1r9lg_7nc4m_220:not(#\9) {
+.awsui_position-bottom_1r9lg_1y2ds_217:not(#\9) {
   position: fixed;
   overflow-y: auto;
   /*
@@ -225,37 +222,38 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   SplitPanel is no longer in fixed position in the DOM.
   */
 }
-.awsui_position-bottom_1r9lg_7nc4m_220:not(#\9):not(.awsui_hidden_1r9lg_7nc4m_228) {
+.awsui_position-bottom_1r9lg_1y2ds_217:not(#\9):not(.awsui_hidden_1r9lg_1y2ds_225) {
   border-block-start: var(--border-panel-top-width-a8j764, 0px) solid var(--color-border-divider-panel-bottom-x9b7bd, rgba(0, 28, 36, 0.15));
 }
-.awsui_position-bottom_1r9lg_7nc4m_220:not(#\9):not(.awsui_refresh_1r9lg_7nc4m_193) {
+.awsui_position-bottom_1r9lg_1y2ds_217:not(#\9):not(.awsui_refresh_1r9lg_1y2ds_190) {
   box-shadow: var(--shadow-split-bottom-0ncj9i, 0 -2px 1px -1px rgba(0, 28, 36, 0.15), 0 -1px 1px -1px rgba(0, 28, 36, 0.3));
   border-inline-start: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-panel-bottom-x9b7bd, rgba(0, 28, 36, 0.15));
   border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-panel-bottom-x9b7bd, rgba(0, 28, 36, 0.15));
 }
-.awsui_position-bottom_1r9lg_7nc4m_220.awsui_drawer-closed_1r9lg_7nc4m_190:not(#\9) {
+.awsui_position-bottom_1r9lg_1y2ds_217.awsui_drawer-closed_1r9lg_1y2ds_190:not(#\9) {
   overflow: hidden;
 }
-.awsui_position-bottom_1r9lg_7nc4m_220.awsui_drawer-closed_1r9lg_7nc4m_190:not(#\9):hover {
+.awsui_position-bottom_1r9lg_1y2ds_217.awsui_drawer-closed_1r9lg_1y2ds_190.awsui_drawer-clickable_1r9lg_1y2ds_236:not(#\9):hover {
+  cursor: pointer;
   background: var(--color-background-layout-panel-hover-5jdzo1, #eaeded);
 }
-.awsui_position-bottom_1r9lg_7nc4m_220 > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 > [aria-hidden=true]:not(#\9) {
+.awsui_position-bottom_1r9lg_1y2ds_217 > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 > [aria-hidden=true]:not(#\9) {
   display: none;
 }
-.awsui_position-bottom_1r9lg_7nc4m_220.awsui_refresh_1r9lg_7nc4m_193:not(#\9) {
+.awsui_position-bottom_1r9lg_1y2ds_217.awsui_refresh_1r9lg_1y2ds_190:not(#\9) {
   position: relative;
 }
 
-.awsui_position-side_1r9lg_7nc4m_249:not(#\9) {
+.awsui_position-side_1r9lg_1y2ds_247:not(#\9) {
   border-block-start: none;
   box-shadow: var(--shadow-split-side-wm3dcf, 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));
   block-size: 100%;
 }
-.awsui_position-side_1r9lg_7nc4m_249.awsui_with-toolbar_1r9lg_7nc4m_254:not(#\9) {
+.awsui_position-side_1r9lg_1y2ds_247.awsui_with-toolbar_1r9lg_1y2ds_252:not(#\9) {
   box-shadow: none;
 }
 
-.awsui_slider-wrapper-bottom_1r9lg_7nc4m_258:not(#\9) {
+.awsui_slider-wrapper-bottom_1r9lg_1y2ds_256:not(#\9) {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -266,7 +264,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 2;
 }
 
-.awsui_slider-wrapper-side_1r9lg_7nc4m_269:not(#\9) {
+.awsui_slider-wrapper-side_1r9lg_1y2ds_267:not(#\9) {
   position: absolute;
   inset-inline-start: 0;
   inset-block-start: 0;
@@ -276,11 +274,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: center;
   z-index: 1;
 }
-.awsui_slider-wrapper-side_1r9lg_7nc4m_269.awsui_with-toolbar_1r9lg_7nc4m_254:not(#\9) {
+.awsui_slider-wrapper-side_1r9lg_1y2ds_267.awsui_with-toolbar_1r9lg_1y2ds_252:not(#\9) {
   position: unset;
 }
 
-.awsui_open-button-side_1r9lg_7nc4m_283:not(#\9) {
+.awsui_open-button-side_1r9lg_1y2ds_281:not(#\9) {
   flex: 0 0 auto;
   align-self: flex-start;
   box-sizing: border-box;
@@ -289,7 +287,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: auto;
 }
 
-.awsui_pane-header-wrapper-bottom_1r9lg_7nc4m_292:not(#\9) {
+.awsui_pane-header-wrapper-bottom_1r9lg_1y2ds_290:not(#\9) {
   position: sticky;
   inset-block-start: 0;
   display: flex;
@@ -299,60 +297,60 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: 0;
   padding-inline: var(--space-layout-content-horizontal-q3zhej, 40px);
 }
-.awsui_drawer-mobile_1r9lg_7nc4m_302 > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 > .awsui_pane-header-wrapper-bottom_1r9lg_7nc4m_292:not(#\9) {
+.awsui_drawer-mobile_1r9lg_1y2ds_300 > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 > .awsui_pane-header-wrapper-bottom_1r9lg_1y2ds_290:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-3cws6j, 20px);
 }
-.awsui_drawer-disable-content-paddings_1r9lg_7nc4m_306 > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 > .awsui_pane-header-wrapper-bottom_1r9lg_7nc4m_292:not(#\9) {
+.awsui_drawer-disable-content-paddings_1r9lg_1y2ds_304 > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 > .awsui_pane-header-wrapper-bottom_1r9lg_1y2ds_290:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-3cws6j, 20px);
 }
-:not(#\9):not(.awsui_drawer-closed_1r9lg_7nc4m_190) > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 > .awsui_pane-header-wrapper-bottom_1r9lg_7nc4m_292 {
+:not(#\9):not(.awsui_drawer-closed_1r9lg_1y2ds_190) > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 > .awsui_pane-header-wrapper-bottom_1r9lg_1y2ds_290 {
   background-color: var(--color-background-layout-panel-content-9tbx75, #ffffff);
   border-block-end: var(--border-panel-header-width-r62i4a, 0px) solid var(--color-border-panel-header-iffljr, #eaeded);
 }
-.awsui_with-toolbar_1r9lg_7nc4m_254:not(#\9):not(.awsui_drawer-closed_1r9lg_7nc4m_190) > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 > .awsui_pane-header-wrapper-bottom_1r9lg_7nc4m_292 {
+.awsui_with-toolbar_1r9lg_1y2ds_252:not(#\9):not(.awsui_drawer-closed_1r9lg_1y2ds_190) > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 > .awsui_pane-header-wrapper-bottom_1r9lg_1y2ds_290 {
   border-color: transparent;
 }
 
-.awsui_content-bottom_1r9lg_7nc4m_318:not(#\9) {
+.awsui_content-bottom_1r9lg_1y2ds_316:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-layout-content-horizontal-q3zhej, 40px);
   margin-block-start: var(--space-panel-split-top-q9gv78, 0px);
   position: relative;
   z-index: 0;
 }
-.awsui_with-toolbar_1r9lg_7nc4m_254 > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 > .awsui_content-bottom_1r9lg_7nc4m_318:not(#\9) {
+.awsui_with-toolbar_1r9lg_1y2ds_252 > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 > .awsui_content-bottom_1r9lg_1y2ds_316:not(#\9) {
   margin-block-start: 0px;
 }
-.awsui_drawer-mobile_1r9lg_7nc4m_302 > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 > .awsui_content-bottom_1r9lg_7nc4m_318:not(#\9) {
+.awsui_drawer-mobile_1r9lg_1y2ds_300 > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 > .awsui_content-bottom_1r9lg_1y2ds_316:not(#\9) {
   padding-block: 0;
   padding-inline: var(--space-l-3cws6j, 20px);
 }
-.awsui_drawer-disable-content-paddings_1r9lg_7nc4m_306 > .awsui_drawer-content-bottom_1r9lg_7nc4m_213 > .awsui_content-bottom_1r9lg_7nc4m_318:not(#\9) {
+.awsui_drawer-disable-content-paddings_1r9lg_1y2ds_304 > .awsui_drawer-content-bottom_1r9lg_1y2ds_210 > .awsui_content-bottom_1r9lg_1y2ds_316:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
 }
 
-.awsui_pane-bottom-center-align_1r9lg_7nc4m_337:not(#\9) {
+.awsui_pane-bottom-center-align_1r9lg_1y2ds_335:not(#\9) {
   display: flex;
   justify-content: center;
 }
 
-.awsui_pane-bottom-content-nav-padding_1r9lg_7nc4m_342:not(#\9) {
+.awsui_pane-bottom-content-nav-padding_1r9lg_1y2ds_340:not(#\9) {
   padding-inline-start: calc(var(--space-layout-toggle-diameter-vount6, 36px) + 2 * var(--space-layout-toggle-padding-quc8b2, 12px));
 }
 
-.awsui_pane-bottom-content-tools-padding_1r9lg_7nc4m_346:not(#\9) {
+.awsui_pane-bottom-content-tools-padding_1r9lg_1y2ds_344:not(#\9) {
   padding-inline-end: calc(var(--space-layout-toggle-diameter-vount6, 36px) + 2 * var(--space-layout-toggle-padding-quc8b2, 12px));
 }
 
-.awsui_content-bottom-max-width_1r9lg_7nc4m_350:not(#\9) {
+.awsui_content-bottom-max-width_1r9lg_1y2ds_348:not(#\9) {
   flex-grow: 1;
   max-inline-size: 100%;
 }
 
-.awsui_content-side_1r9lg_7nc4m_355:not(#\9) {
+.awsui_content-side_1r9lg_1y2ds_353:not(#\9) {
   flex: auto;
   align-self: flex-start;
   box-sizing: border-box;
@@ -361,57 +359,96 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline: 0;
   block-size: 100%;
 }
-.awsui_content-side_1r9lg_7nc4m_355.awsui_with-toolbar_1r9lg_7nc4m_254:not(#\9) {
+.awsui_content-side_1r9lg_1y2ds_353.awsui_with-toolbar_1r9lg_1y2ds_252:not(#\9) {
   position: absolute;
 }
-.awsui_content-side_1r9lg_7nc4m_355 > .awsui_pane-header-wrapper-side_1r9lg_7nc4m_367:not(#\9) {
+.awsui_content-side_1r9lg_1y2ds_353 > .awsui_pane-header-wrapper-side_1r9lg_1y2ds_365:not(#\9) {
   padding-block: 0;
   padding-inline-end: var(--space-m-n2lypl, 16px);
   padding-inline-start: var(--space-panel-side-left-07kpj4, 32px);
   border-block-end: var(--border-panel-header-width-r62i4a, 0px) solid var(--color-border-panel-header-iffljr, #eaeded);
 }
-.awsui_content-side_1r9lg_7nc4m_355.awsui_with-toolbar_1r9lg_7nc4m_254 > .awsui_pane-header-wrapper-side_1r9lg_7nc4m_367:not(#\9) {
+.awsui_content-side_1r9lg_1y2ds_353.awsui_with-toolbar_1r9lg_1y2ds_252 > .awsui_pane-header-wrapper-side_1r9lg_1y2ds_365:not(#\9) {
   border-color: transparent;
 }
-.awsui_content-side_1r9lg_7nc4m_355 > .awsui_pane-content-wrapper-side_1r9lg_7nc4m_376:not(#\9) {
+.awsui_content-side_1r9lg_1y2ds_353 > .awsui_pane-content-wrapper-side_1r9lg_1y2ds_374:not(#\9) {
   padding-block: 0;
   padding-inline-start: var(--space-panel-side-left-07kpj4, 32px);
   padding-inline-end: var(--space-panel-side-right-b77xx0, 32px);
   margin-block-start: var(--space-panel-split-top-q9gv78, 0px);
   margin-block-end: var(--space-panel-split-bottom-wmd8np, 20px);
 }
-.awsui_content-side_1r9lg_7nc4m_355.awsui_with-toolbar_1r9lg_7nc4m_254 > .awsui_pane-content-wrapper-side_1r9lg_7nc4m_376:not(#\9) {
+.awsui_content-side_1r9lg_1y2ds_353.awsui_with-toolbar_1r9lg_1y2ds_252 > .awsui_pane-content-wrapper-side_1r9lg_1y2ds_374:not(#\9) {
   margin-block-start: 0px;
 }
 
-.awsui_header_1r9lg_7nc4m_387:not(#\9) {
-  display: flex;
-  flex: auto;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: space-between;
+.awsui_header_1r9lg_1y2ds_385:not(#\9) {
   inline-size: 100%;
   margin-block: var(--size-vertical-panel-icon-offset-1tiizm, 15px);
   margin-inline: 0;
 }
-.awsui_header_1r9lg_7nc4m_387.awsui_with-toolbar_1r9lg_7nc4m_254:not(#\9) {
+.awsui_header_1r9lg_1y2ds_385.awsui_with-toolbar_1r9lg_1y2ds_252:not(#\9) {
   margin-block: 14px;
 }
-.awsui_header-text_1r9lg_7nc4m_400:not(#\9) {
+.awsui_header-main-row_1r9lg_1y2ds_393:not(#\9), .awsui_header-main-content_1r9lg_1y2ds_393:not(#\9) {
+  display: flex;
+}
+.awsui_header-main-row_1r9lg_1y2ds_393:not(#\9) {
+  align-items: flex-start;
+}
+.awsui_header-main-content_1r9lg_1y2ds_393:not(#\9) {
+  flex: auto;
+  flex-direction: row;
+  column-gap: var(--space-scaled-xs-sppte9, 8px);
+  row-gap: var(--space-scaled-xxs-jatbiv, 4px);
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.awsui_header-tag-and-info_1r9lg_1y2ds_407:not(#\9) {
+  flex-grow: 1;
+  margin-block-start: calc(var(--space-scaled-xxs-jatbiv, 4px) + 1px);
+  line-height: var(--line-height-body-s-otgtsr, 16px);
+}
+.awsui_header-tag-and-info_1r9lg_1y2ds_407.awsui_with-description_1r9lg_1y2ds_412:not(#\9) {
+  margin-block-end: var(--space-scaled-xxxs-prgw5k, 2px);
+}
+.awsui_header-tag_1r9lg_1y2ds_407.awsui_with-info_1r9lg_1y2ds_415:not(#\9), .awsui_header-text_1r9lg_1y2ds_415:not(#\9) {
+  display: inline;
+}
+.awsui_header-tag_1r9lg_1y2ds_407:not(#\9) {
+  margin-block: 0;
+}
+.awsui_header-before-slot_1r9lg_1y2ds_421:not(#\9), .awsui_header-text_1r9lg_1y2ds_415: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);
   font-weight: var(--font-weight-heading-l-zqsb7y, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
-  padding-block: 0;
-  padding-inline: 0;
+}
+.awsui_header-before-slot_1r9lg_1y2ds_421:not(#\9) {
+  margin-block-start: calc(-1 * calc(var(--space-scaled-xxs-jatbiv, 4px) + 1px));
+}
+.awsui_header-tag_1r9lg_1y2ds_407.awsui_with-info_1r9lg_1y2ds_415 > .awsui_header-before-slot_1r9lg_1y2ds_421:not(#\9), .awsui_header-before-slot_1r9lg_1y2ds_421.awsui_with-header-text_1r9lg_1y2ds_432:not(#\9) {
+  display: inline-block;
+}
+.awsui_header-before-slot_1r9lg_1y2ds_421.awsui_with-header-text_1r9lg_1y2ds_432:not(#\9), .awsui_header-tag_1r9lg_1y2ds_407.awsui_with-info_1r9lg_1y2ds_415:not(#\9) {
+  margin-inline-end: var(--space-scaled-xs-sppte9, 8px);
+}
+.awsui_header-actions-slot_1r9lg_1y2ds_438:not(#\9) {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  min-block-size: calc(var(--font-panel-header-line-height-z3wpa5, 22px) + 2 * calc(var(--space-scaled-xxs-jatbiv, 4px) + 1px));
+}
+.awsui_header-description_1r9lg_1y2ds_444:not(#\9) {
+  color: var(--color-text-heading-secondary-26seqv, #545b64);
+  font-size: var(--font-size-body-m-vv54cm, 14px);
+  line-height: var(--line-height-body-m-bedeoh, 22px);
   margin-block: 0;
-  margin-inline: 0;
-  margin-block-start: calc(var(--space-scaled-xxs-jatbiv, 4px) + 1px);
 }
 
-.awsui_header-actions_1r9lg_7nc4m_414:not(#\9) {
+.awsui_header-buttons_1r9lg_1y2ds_451:not(#\9) {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -419,7 +456,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline-start: var(--space-xs-kw7k3v, 8px);
 }
 
-.awsui_divider_1r9lg_7nc4m_422:not(#\9) {
+.awsui_divider_1r9lg_1y2ds_459:not(#\9) {
   border-inline-end: var(--border-divider-section-width-sznrdy, 1px) solid var(--color-border-divider-default-ipvpev, #eaeded);
   margin-block: var(--space-scaled-xxs-jatbiv, 4px);
   margin-inline: var(--space-scaled-xs-sppte9, 8px);

package/lib/internal/template/split-panel/styles.selectors.js

@@ -2,32 +2,43 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "drawer": "awsui_drawer_1r9lg_7nc4m_153",
-  "drawer-closed": "awsui_drawer-closed_1r9lg_7nc4m_190",
-  "refresh": "awsui_refresh_1r9lg_7nc4m_193",
-  "drawer-content-side": "awsui_drawer-content-side_1r9lg_7nc4m_197",
-  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_7nc4m_213",
-  "position-bottom": "awsui_position-bottom_1r9lg_7nc4m_220",
-  "hidden": "awsui_hidden_1r9lg_7nc4m_228",
-  "position-side": "awsui_position-side_1r9lg_7nc4m_249",
-  "with-toolbar": "awsui_with-toolbar_1r9lg_7nc4m_254",
-  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_7nc4m_258",
-  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_7nc4m_269",
-  "open-button-side": "awsui_open-button-side_1r9lg_7nc4m_283",
-  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_7nc4m_292",
-  "drawer-mobile": "awsui_drawer-mobile_1r9lg_7nc4m_302",
-  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_7nc4m_306",
-  "content-bottom": "awsui_content-bottom_1r9lg_7nc4m_318",
-  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_7nc4m_337",
-  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_7nc4m_342",
-  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_7nc4m_346",
-  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_7nc4m_350",
-  "content-side": "awsui_content-side_1r9lg_7nc4m_355",
-  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_7nc4m_367",
-  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_7nc4m_376",
-  "header": "awsui_header_1r9lg_7nc4m_387",
-  "header-text": "awsui_header-text_1r9lg_7nc4m_400",
-  "header-actions": "awsui_header-actions_1r9lg_7nc4m_414",
-  "divider": "awsui_divider_1r9lg_7nc4m_422"
+  "drawer": "awsui_drawer_1r9lg_1y2ds_153",
+  "drawer-closed": "awsui_drawer-closed_1r9lg_1y2ds_190",
+  "refresh": "awsui_refresh_1r9lg_1y2ds_190",
+  "drawer-content-side": "awsui_drawer-content-side_1r9lg_1y2ds_194",
+  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_1y2ds_210",
+  "position-bottom": "awsui_position-bottom_1r9lg_1y2ds_217",
+  "hidden": "awsui_hidden_1r9lg_1y2ds_225",
+  "drawer-clickable": "awsui_drawer-clickable_1r9lg_1y2ds_236",
+  "position-side": "awsui_position-side_1r9lg_1y2ds_247",
+  "with-toolbar": "awsui_with-toolbar_1r9lg_1y2ds_252",
+  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_1y2ds_256",
+  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_1y2ds_267",
+  "open-button-side": "awsui_open-button-side_1r9lg_1y2ds_281",
+  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_1y2ds_290",
+  "drawer-mobile": "awsui_drawer-mobile_1r9lg_1y2ds_300",
+  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_1y2ds_304",
+  "content-bottom": "awsui_content-bottom_1r9lg_1y2ds_316",
+  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_1y2ds_335",
+  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_1y2ds_340",
+  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_1y2ds_344",
+  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_1y2ds_348",
+  "content-side": "awsui_content-side_1r9lg_1y2ds_353",
+  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_1y2ds_365",
+  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_1y2ds_374",
+  "header": "awsui_header_1r9lg_1y2ds_385",
+  "header-main-row": "awsui_header-main-row_1r9lg_1y2ds_393",
+  "header-main-content": "awsui_header-main-content_1r9lg_1y2ds_393",
+  "header-tag-and-info": "awsui_header-tag-and-info_1r9lg_1y2ds_407",
+  "with-description": "awsui_with-description_1r9lg_1y2ds_412",
+  "header-tag": "awsui_header-tag_1r9lg_1y2ds_407",
+  "with-info": "awsui_with-info_1r9lg_1y2ds_415",
+  "header-text": "awsui_header-text_1r9lg_1y2ds_415",
+  "header-before-slot": "awsui_header-before-slot_1r9lg_1y2ds_421",
+  "with-header-text": "awsui_with-header-text_1r9lg_1y2ds_432",
+  "header-actions-slot": "awsui_header-actions-slot_1r9lg_1y2ds_438",
+  "header-description": "awsui_header-description_1r9lg_1y2ds_444",
+  "header-buttons": "awsui_header-buttons_1r9lg_1y2ds_451",
+  "divider": "awsui_divider_1r9lg_1y2ds_459"
 };
   

package/lib/internal/template/split-panel/test-classes/styles.css.js

@@ -1,13 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_rjqu5_zu8o5_5",
-  "header-text": "awsui_header-text_rjqu5_zu8o5_6",
-  "open-button": "awsui_open-button_rjqu5_zu8o5_7",
-  "close-button": "awsui_close-button_rjqu5_zu8o5_8",
-  "preferences-button": "awsui_preferences-button_rjqu5_zu8o5_9",
-  "slider": "awsui_slider_rjqu5_zu8o5_10",
-  "open-position-bottom": "awsui_open-position-bottom_rjqu5_zu8o5_11",
-  "open-position-side": "awsui_open-position-side_rjqu5_zu8o5_12"
+  "root": "awsui_root_rjqu5_1kbym_5",
+  "header-actions": "awsui_header-actions_rjqu5_1kbym_6",
+  "header-before": "awsui_header-before_rjqu5_1kbym_7",
+  "header-description": "awsui_header-description_rjqu5_1kbym_8",
+  "header-info": "awsui_header-info_rjqu5_1kbym_9",
+  "header-text": "awsui_header-text_rjqu5_1kbym_10",
+  "open-button": "awsui_open-button_rjqu5_1kbym_11",
+  "close-button": "awsui_close-button_rjqu5_1kbym_12",
+  "preferences-button": "awsui_preferences-button_rjqu5_1kbym_13",
+  "slider": "awsui_slider_rjqu5_1kbym_14",
+  "open-position-bottom": "awsui_open-position-bottom_rjqu5_1kbym_15",
+  "open-position-side": "awsui_open-position-side_rjqu5_1kbym_16"
 };
   

package/lib/internal/template/split-panel/test-classes/styles.scoped.css

@@ -2,13 +2,17 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_rjqu5_zu8o5_5:not(#\9),
-.awsui_header-text_rjqu5_zu8o5_6:not(#\9),
-.awsui_open-button_rjqu5_zu8o5_7:not(#\9),
-.awsui_close-button_rjqu5_zu8o5_8:not(#\9),
-.awsui_preferences-button_rjqu5_zu8o5_9:not(#\9),
-.awsui_slider_rjqu5_zu8o5_10:not(#\9),
-.awsui_open-position-bottom_rjqu5_zu8o5_11:not(#\9),
-.awsui_open-position-side_rjqu5_zu8o5_12:not(#\9) {
+.awsui_root_rjqu5_1kbym_5:not(#\9),
+.awsui_header-actions_rjqu5_1kbym_6:not(#\9),
+.awsui_header-before_rjqu5_1kbym_7:not(#\9),
+.awsui_header-description_rjqu5_1kbym_8:not(#\9),
+.awsui_header-info_rjqu5_1kbym_9:not(#\9),
+.awsui_header-text_rjqu5_1kbym_10:not(#\9),
+.awsui_open-button_rjqu5_1kbym_11:not(#\9),
+.awsui_close-button_rjqu5_1kbym_12:not(#\9),
+.awsui_preferences-button_rjqu5_1kbym_13:not(#\9),
+.awsui_slider_rjqu5_1kbym_14:not(#\9),
+.awsui_open-position-bottom_rjqu5_1kbym_15:not(#\9),
+.awsui_open-position-side_rjqu5_1kbym_16:not(#\9) {
   /* used in test-utils */
 }