@cloudscape-design/components-themeable 3.0.1383 → 3.0.1385

package/lib/internal/template/internal/components/button-trigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../../icon/internal';\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { BaseKeyDetail, CancelableEventHandler } from '../../../types/events';\nimport { getBaseProps } from '../../base-component';\nimport { GroupedControlPosition } from '../../context/control-group-context';\nimport { fireCancelableEvent, fireKeyboardEvent } from '../../events';\nimport {\n  GeneratedAnalyticsMetadataButtonTriggerCollapse,\n  GeneratedAnalyticsMetadataButtonTriggerExpand,\n} from './analytics-metadata/interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface ButtonTriggerProps extends BaseComponentProps {\n  children?: React.ReactNode;\n  pressed?: boolean;\n  hideCaret?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  inFilteringToken?: 'root' | 'nested';\n  inlineTokens?: boolean;\n  ariaHasPopup?: 'true' | 'listbox' | 'dialog';\n  ariaControls?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onKeyUp?: CancelableEventHandler<BaseKeyDetail>;\n  onMouseDown?: CancelableEventHandler;\n  onClick?: CancelableEventHandler;\n  onFocus?: CancelableEventHandler;\n  onBlur?: CancelableEventHandler<{ relatedTarget: Node | null }>;\n  hasCustomContent?: boolean;\n  autoFocus?: boolean;\n  groupedControlPosition?: GroupedControlPosition | null;\n}\n\nconst ButtonTrigger = (\n  {\n    children,\n    pressed,\n    hideCaret = false,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    warning = false,\n    inlineTokens,\n    inFilteringToken,\n    ariaHasPopup,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaControls,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onClick,\n    onFocus,\n    onBlur,\n    hasCustomContent = false,\n    autoFocus,\n    groupedControlPosition = null,\n    ...restProps\n  }: ButtonTriggerProps,\n  ref: React.Ref<HTMLButtonElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  let attributes: ButtonHTMLAttributes<HTMLButtonElement> = {\n    ...baseProps,\n    type: 'button',\n    className: clsx(\n      styles['button-trigger'],\n      analyticsSelectors['button-trigger'],\n      baseProps.className,\n      pressed && styles.pressed,\n      disabled && styles.disabled,\n      invalid && styles.invalid,\n      warning && !invalid && styles.warning,\n      !hideCaret && styles['has-caret'],\n      readOnly && styles.readonly,\n      inFilteringToken && styles['in-filtering-token'],\n      inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`],\n      inlineTokens && styles['inline-tokens'],\n      groupedControlPosition && styles.grouped,\n      groupedControlPosition && styles[`grouped-${groupedControlPosition}`],\n      !!hasCustomContent && styles['custom-option']\n    ),\n    disabled: disabled,\n    'aria-expanded': pressed,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    'aria-haspopup': ariaHasPopup ?? 'listbox',\n    'aria-controls': ariaControls,\n    'aria-disabled': readOnly && !disabled ? 'true' : undefined,\n    autoFocus,\n  };\n\n  if (!readOnly) {\n    attributes = {\n      ...attributes,\n      onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n      onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n      onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)),\n      onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)),\n      onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)),\n      onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)),\n    };\n  }\n\n  if (invalid) {\n    attributes['aria-invalid'] = invalid;\n  }\n\n  const analyticsMetadata:\n    | GeneratedAnalyticsMetadataButtonTriggerExpand\n    | GeneratedAnalyticsMetadataButtonTriggerCollapse = {\n    action: !pressed ? 'expand' : 'collapse',\n    detail: {\n      label: { root: 'self' },\n    },\n  };\n\n  return (\n    <button\n      ref={ref}\n      {...attributes}\n      data-awsui-motion-trigger=\"hover\"\n      {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n    >\n      {children}\n      {!hideCaret && (\n        <span className={styles.arrow}>\n          <InternalIcon\n            name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n            size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal'}\n            variant={disabled || readOnly ? 'disabled' : 'normal'}\n            nativeAttributes={{ 'data-awsui-motion-target': '' }}\n          />\n        </span>\n      )}\n    </button>\n  );\n};\n\nexport namespace ButtonTriggerProps {\n  export interface Ref {\n    focus(): void;\n  }\n}\n\nexport default React.forwardRef(ButtonTrigger);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../../icon/internal';\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { BaseKeyDetail, CancelableEventHandler } from '../../../types/events';\nimport { getBaseProps } from '../../base-component';\nimport { GroupedControlContextProps } from '../../context/control-group-context';\nimport { fireCancelableEvent, fireKeyboardEvent } from '../../events';\nimport { getGroupedControlClassNames } from '../control-group/grouped-control-styles';\nimport {\n  GeneratedAnalyticsMetadataButtonTriggerCollapse,\n  GeneratedAnalyticsMetadataButtonTriggerExpand,\n} from './analytics-metadata/interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface ButtonTriggerProps extends BaseComponentProps {\n  children?: React.ReactNode;\n  pressed?: boolean;\n  hideCaret?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  warning?: boolean;\n  inFilteringToken?: 'root' | 'nested';\n  inlineTokens?: boolean;\n  ariaHasPopup?: 'true' | 'listbox' | 'dialog';\n  ariaControls?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onKeyUp?: CancelableEventHandler<BaseKeyDetail>;\n  onMouseDown?: CancelableEventHandler;\n  onClick?: CancelableEventHandler;\n  onFocus?: CancelableEventHandler;\n  onBlur?: CancelableEventHandler<{ relatedTarget: Node | null }>;\n  hasCustomContent?: boolean;\n  autoFocus?: boolean;\n  groupedControlProps?: GroupedControlContextProps;\n}\n\nconst ButtonTrigger = (\n  {\n    children,\n    pressed,\n    hideCaret = false,\n    disabled = false,\n    readOnly = false,\n    invalid = false,\n    warning = false,\n    inlineTokens,\n    inFilteringToken,\n    ariaHasPopup,\n    ariaLabelledby,\n    ariaDescribedby,\n    ariaControls,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onClick,\n    onFocus,\n    onBlur,\n    hasCustomContent = false,\n    autoFocus,\n    groupedControlProps = { position: null, direction: 'horizontal' },\n    ...restProps\n  }: ButtonTriggerProps,\n  ref: React.Ref<HTMLButtonElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n\n  let attributes: ButtonHTMLAttributes<HTMLButtonElement> = {\n    ...baseProps,\n    type: 'button',\n    className: clsx(\n      styles['button-trigger'],\n      analyticsSelectors['button-trigger'],\n      baseProps.className,\n      pressed && styles.pressed,\n      disabled && styles.disabled,\n      invalid && styles.invalid,\n      warning && !invalid && styles.warning,\n      !hideCaret && styles['has-caret'],\n      readOnly && styles.readonly,\n      inFilteringToken && styles['in-filtering-token'],\n      inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`],\n      inlineTokens && styles['inline-tokens'],\n      ...getGroupedControlClassNames(styles, groupedControlProps),\n      !!hasCustomContent && styles['custom-option']\n    ),\n    disabled: disabled,\n    'aria-expanded': pressed,\n    'aria-labelledby': ariaLabelledby,\n    'aria-describedby': ariaDescribedby,\n    'aria-haspopup': ariaHasPopup ?? 'listbox',\n    'aria-controls': ariaControls,\n    'aria-disabled': readOnly && !disabled ? 'true' : undefined,\n    autoFocus,\n  };\n\n  if (!readOnly) {\n    attributes = {\n      ...attributes,\n      onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n      onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n      onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)),\n      onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)),\n      onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)),\n      onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)),\n    };\n  }\n\n  if (invalid) {\n    attributes['aria-invalid'] = invalid;\n  }\n\n  const analyticsMetadata:\n    | GeneratedAnalyticsMetadataButtonTriggerExpand\n    | GeneratedAnalyticsMetadataButtonTriggerCollapse = {\n    action: !pressed ? 'expand' : 'collapse',\n    detail: {\n      label: { root: 'self' },\n    },\n  };\n\n  return (\n    <button\n      ref={ref}\n      {...attributes}\n      data-awsui-motion-trigger=\"hover\"\n      {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n    >\n      {children}\n      {!hideCaret && (\n        <span className={styles.arrow}>\n          <InternalIcon\n            name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n            size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal'}\n            variant={disabled || readOnly ? 'disabled' : 'normal'}\n            nativeAttributes={{ 'data-awsui-motion-target': '' }}\n          />\n        </span>\n      )}\n    </button>\n  );\n};\n\nexport namespace ButtonTriggerProps {\n  export interface Ref {\n    focus(): void;\n  }\n}\n\nexport default React.forwardRef(ButtonTrigger);\n"]}

package/lib/internal/template/internal/components/button-trigger/styles.css.js

@@ -1,24 +1,26 @@
 
     import './styles.scoped.css';
     export default {
-  "button-trigger": "awsui_button-trigger_18eso_l1qzl_17",
-  "arrow": "awsui_arrow_18eso_l1qzl_17",
-  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_l1qzl_77",
-  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_l1qzl_77",
-  "has-caret": "awsui_has-caret_18eso_l1qzl_113",
-  "placeholder": "awsui_placeholder_18eso_l1qzl_116",
-  "pressed": "awsui_pressed_18eso_l1qzl_129",
-  "disabled": "awsui_disabled_18eso_l1qzl_132",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_l1qzl_77",
-  "readonly": "awsui_readonly_18eso_l1qzl_153",
-  "invalid": "awsui_invalid_18eso_l1qzl_174",
-  "warning": "awsui_warning_18eso_l1qzl_183",
-  "custom-option": "awsui_custom-option_18eso_l1qzl_192",
-  "inline-tokens": "awsui_inline-tokens_18eso_l1qzl_197",
-  "grouped": "awsui_grouped_18eso_l1qzl_200",
-  "grouped-first": "awsui_grouped-first_18eso_l1qzl_200",
-  "grouped-middle": "awsui_grouped-middle_18eso_l1qzl_206",
-  "grouped-last": "awsui_grouped-last_18eso_l1qzl_212",
-  "grouped-only": "awsui_grouped-only_18eso_l1qzl_218"
+  "button-trigger": "awsui_button-trigger_18eso_15t5f_17",
+  "arrow": "awsui_arrow_18eso_15t5f_17",
+  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_15t5f_77",
+  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_15t5f_77",
+  "has-caret": "awsui_has-caret_18eso_15t5f_113",
+  "placeholder": "awsui_placeholder_18eso_15t5f_116",
+  "pressed": "awsui_pressed_18eso_15t5f_129",
+  "disabled": "awsui_disabled_18eso_15t5f_132",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_15t5f_77",
+  "readonly": "awsui_readonly_18eso_15t5f_153",
+  "invalid": "awsui_invalid_18eso_15t5f_174",
+  "warning": "awsui_warning_18eso_15t5f_183",
+  "custom-option": "awsui_custom-option_18eso_15t5f_192",
+  "inline-tokens": "awsui_inline-tokens_18eso_15t5f_197",
+  "grouped": "awsui_grouped_18eso_15t5f_200",
+  "grouped-horizontal-first": "awsui_grouped-horizontal-first_18eso_15t5f_206",
+  "grouped-horizontal-middle": "awsui_grouped-horizontal-middle_18eso_15t5f_210",
+  "grouped-horizontal-last": "awsui_grouped-horizontal-last_18eso_15t5f_216",
+  "grouped-vertical-first": "awsui_grouped-vertical-first_18eso_15t5f_220",
+  "grouped-vertical-middle": "awsui_grouped-vertical-middle_18eso_15t5f_224",
+  "grouped-vertical-last": "awsui_grouped-vertical-last_18eso_15t5f_230"
 };
   

package/lib/internal/template/internal/components/button-trigger/styles.scoped.css

@@ -14,21 +14,21 @@ 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_button-trigger_18eso_l1qzl_17 > .awsui_arrow_18eso_l1qzl_17:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
   transition: transform var(--motion-duration-rotate-180-69rh8b, 135ms) var(--motion-easing-rotate-180-nmpsiw, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_button-trigger_18eso_l1qzl_17 > .awsui_arrow_18eso_l1qzl_17:not(#\9) {
+  .awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_button-trigger_18eso_l1qzl_17 > .awsui_arrow_18eso_l1qzl_17:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_l1qzl_17 > .awsui_arrow_18eso_l1qzl_17:not(#\9) {
+.awsui-motion-disabled .awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_button-trigger_18eso_l1qzl_17:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -74,7 +74,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-default-jtkw9d, #687078);
   min-block-size: var(--size-vertical-input-5g8cy5, 32px);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-root_18eso_l1qzl_77:not(#\9), .awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-nested_18eso_l1qzl_77:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-root_18eso_15t5f_77:not(#\9), .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9) {
   padding-block: 0px;
   padding-inline: var(--space-field-horizontal-anki5k, 8px);
   border-block-width: var(--border-width-token-p4a0gu, 1px);
@@ -85,14 +85,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
   min-block-size: unset;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-root_18eso_l1qzl_77:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-nested_18eso_l1qzl_77:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-root_18eso_15t5f_77:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-root_18eso_l1qzl_77:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-nested_18eso_l1qzl_77:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-root_18eso_15t5f_77:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-677p72, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-root_18eso_l1qzl_77:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-nested_18eso_l1qzl_77:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-root_18eso_15t5f_77:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -106,40 +106,40 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17.awsui_i
   border-end-end-radius: var(--border-radius-control-default-focus-ring-akwhsf, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token-nested_18eso_l1qzl_77:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token-nested_18eso_15t5f_77:not(#\9) {
   border-start-start-radius: calc(var(--border-radius-input-k1q34z, 2px) / 2);
   border-end-start-radius: calc(var(--border-radius-input-k1q34z, 2px) / 2);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_has-caret_18eso_l1qzl_113:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_has-caret_18eso_15t5f_113:not(#\9) {
   padding-inline-end: var(--space-field-icon-offset-2wydv9, 32px);
 }
-.awsui_button-trigger_18eso_l1qzl_17 > .awsui_placeholder_18eso_l1qzl_116:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17 > .awsui_placeholder_18eso_15t5f_116:not(#\9) {
   color: var(--color-text-input-placeholder-l6klmg, #687078);
   font-style: italic;
 }
-.awsui_button-trigger_18eso_l1qzl_17 > .awsui_arrow_18eso_l1qzl_17:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-field-horizontal-anki5k, 8px);
   inset-block-start: calc(50% - var(--line-height-body-m-5xw6xo, 22px) / 2);
   color: var(--color-text-button-inline-icon-default-yujzfi, #545b64);
 }
-.awsui_button-trigger_18eso_l1qzl_17:not(#\9):hover > .awsui_arrow_18eso_l1qzl_17 {
+.awsui_button-trigger_18eso_15t5f_17:not(#\9):hover > .awsui_arrow_18eso_15t5f_17 {
   color: var(--color-text-button-inline-icon-hover-kxgkw7, #16191f);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_pressed_18eso_l1qzl_129 > .awsui_arrow_18eso_l1qzl_17:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_pressed_18eso_15t5f_129 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_disabled_18eso_l1qzl_132:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132:not(#\9) {
   background-color: var(--color-background-input-disabled-pyvhb1, #eaeded);
   border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
   color: var(--color-text-input-disabled-s4k7tb, #879596);
   cursor: auto;
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_disabled_18eso_l1qzl_132 > .awsui_arrow_18eso_l1qzl_17:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132 > .awsui_arrow_18eso_15t5f_17:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-yeab6p, #aab7b8);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_disabled_18eso_l1qzl_132.awsui_in-filtering-token_18eso_l1qzl_77:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132.awsui_in-filtering-token_18eso_15t5f_77:not(#\9) {
   background-color: var(--color-background-input-disabled-pyvhb1, #eaeded);
   border-block: var(--border-width-token-p4a0gu, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
   border-inline: var(--border-width-token-p4a0gu, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
@@ -147,78 +147,88 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17.awsui_i
   cursor: auto;
   border-color: var(--color-border-control-disabled-dh8zaw, #d5dbdb);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_disabled_18eso_l1qzl_132 > .awsui_placeholder_18eso_l1qzl_116:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132 > .awsui_placeholder_18eso_15t5f_116:not(#\9) {
   color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_readonly_18eso_l1qzl_153:not(#\9):not(.awsui_button-trigger_18eso_l1qzl_17.awsui_disabled_18eso_l1qzl_132):not(.awsui_button-trigger_18eso_l1qzl_17.awsui_in-filtering-token_18eso_l1qzl_77) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_readonly_18eso_15t5f_153:not(#\9):not(.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132):not(.awsui_button-trigger_18eso_15t5f_17.awsui_in-filtering-token_18eso_15t5f_77) {
   background-color: var(--color-background-input-default-1u0v1p, #ffffff);
   border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-disabled-5m31k6, #eaeded);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_readonly_18eso_l1qzl_153:not(#\9):not(.awsui_button-trigger_18eso_l1qzl_17.awsui_disabled_18eso_l1qzl_132) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_readonly_18eso_15t5f_153:not(#\9):not(.awsui_button-trigger_18eso_15t5f_17.awsui_disabled_18eso_15t5f_132) {
   -webkit-user-select: text;
           user-select: text;
 }
-.awsui_button-trigger_18eso_l1qzl_17:not(#\9):focus {
+.awsui_button-trigger_18eso_15t5f_17:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-focused-ppoq5z, #0073bb);
   border-inline: var(--border-width-field-2365x3, 1px) solid var(--color-border-input-focused-ppoq5z, #0073bb);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-iijyo6, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77):invalid {
+.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77):invalid {
   box-shadow: none;
 }
-.awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77).awsui_invalid_18eso_l1qzl_174, .awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77).awsui_invalid_18eso_l1qzl_174:focus {
+.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_invalid_18eso_15t5f_174, .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_invalid_18eso_15t5f_174:focus {
   color: var(--color-text-status-error-ri38gt, #d13212);
   border-color: var(--color-text-status-error-ri38gt, #d13212);
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
   border-inline-start-width: var(--border-invalid-width-b183os, 4px);
 }
-.awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77).awsui_invalid_18eso_l1qzl_174:focus, .awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77).awsui_invalid_18eso_l1qzl_174:focus:focus {
+.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_invalid_18eso_15t5f_174:focus, .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_invalid_18eso_15t5f_174:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77).awsui_warning_18eso_l1qzl_183, .awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77).awsui_warning_18eso_l1qzl_183:focus {
+.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_warning_18eso_15t5f_183, .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_warning_18eso_15t5f_183:focus {
   color: var(--color-text-status-warning-fabq6h, #906806);
   border-color: var(--color-text-status-warning-fabq6h, #906806);
   padding-inline-start: calc(var(--space-field-horizontal-anki5k, 8px) - (var(--border-invalid-width-b183os, 4px) - var(--border-width-field-2365x3, 1px)));
   border-inline-start-width: var(--border-invalid-width-b183os, 4px);
 }
-.awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77).awsui_warning_18eso_l1qzl_183:focus, .awsui_button-trigger_18eso_l1qzl_17:not(#\9):not(.awsui_in-filtering-token_18eso_l1qzl_77).awsui_warning_18eso_l1qzl_183:focus:focus {
+.awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_warning_18eso_15t5f_183:focus, .awsui_button-trigger_18eso_15t5f_17:not(#\9):not(.awsui_in-filtering-token_18eso_15t5f_77).awsui_warning_18eso_15t5f_183:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-bl5nmx, 1px) var(--color-border-item-focused-sewkzn, #0073bb);
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_custom-option_18eso_l1qzl_192:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_custom-option_18eso_15t5f_192:not(#\9) {
   padding-block: 0;
   padding-inline-start: 0;
   overflow: clip;
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_inline-tokens_18eso_l1qzl_197:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_inline-tokens_18eso_15t5f_197:not(#\9) {
   padding-block: 0;
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_grouped_18eso_l1qzl_200.awsui_grouped-first_18eso_l1qzl_200:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_grouped_18eso_15t5f_200:not(#\9) {
   border-start-start-radius: var(--border-radius-input-k1q34z, 2px);
+  border-start-end-radius: var(--border-radius-input-k1q34z, 2px);
   border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
+  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
+}
+.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-horizontal-first_18eso_15t5f_206:not(#\9) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_grouped_18eso_l1qzl_200.awsui_grouped-middle_18eso_l1qzl_206:not(#\9) {
+.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-horizontal-middle_18eso_15t5f_210:not(#\9) {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_grouped_18eso_l1qzl_200.awsui_grouped-last_18eso_l1qzl_212:not(#\9) {
-  border-start-end-radius: var(--border-radius-input-k1q34z, 2px);
-  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
+.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-horizontal-last_18eso_15t5f_216:not(#\9) {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
-.awsui_button-trigger_18eso_l1qzl_17.awsui_grouped_18eso_l1qzl_200.awsui_grouped-only_18eso_l1qzl_218:not(#\9) {
-  border-start-start-radius: var(--border-radius-input-k1q34z, 2px);
-  border-start-end-radius: var(--border-radius-input-k1q34z, 2px);
-  border-end-start-radius: var(--border-radius-input-k1q34z, 2px);
-  border-end-end-radius: var(--border-radius-input-k1q34z, 2px);
+.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-vertical-first_18eso_15t5f_220:not(#\9) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-vertical-middle_18eso_15t5f_224:not(#\9) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.awsui_button-trigger_18eso_15t5f_17.awsui_grouped-vertical-last_18eso_15t5f_230:not(#\9) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
 }

package/lib/internal/template/internal/components/button-trigger/styles.selectors.js

@@ -2,24 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-trigger": "awsui_button-trigger_18eso_l1qzl_17",
-  "arrow": "awsui_arrow_18eso_l1qzl_17",
-  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_l1qzl_77",
-  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_l1qzl_77",
-  "has-caret": "awsui_has-caret_18eso_l1qzl_113",
-  "placeholder": "awsui_placeholder_18eso_l1qzl_116",
-  "pressed": "awsui_pressed_18eso_l1qzl_129",
-  "disabled": "awsui_disabled_18eso_l1qzl_132",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_l1qzl_77",
-  "readonly": "awsui_readonly_18eso_l1qzl_153",
-  "invalid": "awsui_invalid_18eso_l1qzl_174",
-  "warning": "awsui_warning_18eso_l1qzl_183",
-  "custom-option": "awsui_custom-option_18eso_l1qzl_192",
-  "inline-tokens": "awsui_inline-tokens_18eso_l1qzl_197",
-  "grouped": "awsui_grouped_18eso_l1qzl_200",
-  "grouped-first": "awsui_grouped-first_18eso_l1qzl_200",
-  "grouped-middle": "awsui_grouped-middle_18eso_l1qzl_206",
-  "grouped-last": "awsui_grouped-last_18eso_l1qzl_212",
-  "grouped-only": "awsui_grouped-only_18eso_l1qzl_218"
+  "button-trigger": "awsui_button-trigger_18eso_15t5f_17",
+  "arrow": "awsui_arrow_18eso_15t5f_17",
+  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_15t5f_77",
+  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_15t5f_77",
+  "has-caret": "awsui_has-caret_18eso_15t5f_113",
+  "placeholder": "awsui_placeholder_18eso_15t5f_116",
+  "pressed": "awsui_pressed_18eso_15t5f_129",
+  "disabled": "awsui_disabled_18eso_15t5f_132",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_15t5f_77",
+  "readonly": "awsui_readonly_18eso_15t5f_153",
+  "invalid": "awsui_invalid_18eso_15t5f_174",
+  "warning": "awsui_warning_18eso_15t5f_183",
+  "custom-option": "awsui_custom-option_18eso_15t5f_192",
+  "inline-tokens": "awsui_inline-tokens_18eso_15t5f_197",
+  "grouped": "awsui_grouped_18eso_15t5f_200",
+  "grouped-horizontal-first": "awsui_grouped-horizontal-first_18eso_15t5f_206",
+  "grouped-horizontal-middle": "awsui_grouped-horizontal-middle_18eso_15t5f_210",
+  "grouped-horizontal-last": "awsui_grouped-horizontal-last_18eso_15t5f_216",
+  "grouped-vertical-first": "awsui_grouped-vertical-first_18eso_15t5f_220",
+  "grouped-vertical-middle": "awsui_grouped-vertical-middle_18eso_15t5f_224",
+  "grouped-vertical-last": "awsui_grouped-vertical-last_18eso_15t5f_230"
 };
   

package/lib/internal/template/internal/components/control-group/grouped-control-styles.d.ts

@@ -0,0 +1,10 @@
+import { GroupedControlContextProps } from '../../context/control-group-context';
+/**
+ * Builds the shared grouped-control CSS classes for a consumer.
+ *
+ * Returns an empty list when the control is not in a group (falsy `position`),
+ * otherwise the `grouped` base class plus the position/direction modifier.
+ * Spread the result into `clsx(...)` at the call site.
+ */
+export declare function getGroupedControlClassNames(styles: Record<string, string>, { position, direction }: GroupedControlContextProps): string[];
+//# sourceMappingURL=grouped-control-styles.d.ts.map

package/lib/internal/template/internal/components/control-group/grouped-control-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-control-styles.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/grouped-control-styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AAEjF;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,0BAA0B,GAClD,MAAM,EAAE,CAKV"}

package/lib/internal/template/internal/components/control-group/grouped-control-styles.js

@@ -0,0 +1,14 @@
+/**
+ * Builds the shared grouped-control CSS classes for a consumer.
+ *
+ * Returns an empty list when the control is not in a group (falsy `position`),
+ * otherwise the `grouped` base class plus the position/direction modifier.
+ * Spread the result into `clsx(...)` at the call site.
+ */
+export function getGroupedControlClassNames(styles, { position, direction }) {
+    if (!position) {
+        return [];
+    }
+    return [styles.grouped, styles[`grouped-${direction}-${position}`]];
+}
+//# sourceMappingURL=grouped-control-styles.js.map

package/lib/internal/template/internal/components/control-group/grouped-control-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-control-styles.js","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/grouped-control-styles.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,MAAM,UAAU,2BAA2B,CACzC,MAA8B,EAC9B,EAAE,QAAQ,EAAE,SAAS,EAA8B;IAEnD,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,WAAW,SAAS,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC;AACtE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GroupedControlContextProps } from '../../context/control-group-context';\n\n/**\n * Builds the shared grouped-control CSS classes for a consumer.\n *\n * Returns an empty list when the control is not in a group (falsy `position`),\n * otherwise the `grouped` base class plus the position/direction modifier.\n * Spread the result into `clsx(...)` at the call site.\n */\nexport function getGroupedControlClassNames(\n  styles: Record<string, string>,\n  { position, direction }: GroupedControlContextProps\n): string[] {\n  if (!position) {\n    return [];\n  }\n  return [styles.grouped, styles[`grouped-${direction}-${position}`]];\n}\n"]}

package/lib/internal/template/internal/components/control-group/index.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { BaseComponentProps } from '../../../types/base-component';
+import { GroupedControlDirection } from '../../context/control-group-context';
 export interface InternalControlGroupProps extends BaseComponentProps {
     children?: React.ReactNode;
+    direction?: GroupedControlDirection;
 }
-export default function InternalControlGroup({ children, ...props }: InternalControlGroupProps): JSX.Element;
+export default function InternalControlGroup({ children, direction, ...props }: InternalControlGroupProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/control-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAOnE,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,yBAAyB,eAoB7F"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEnE,OAAO,EAEL,uBAAuB,EAExB,MAAM,qCAAqC,CAAC;AAK7C,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,SAAwB,EACxB,GAAG,KAAK,EACT,EAAE,yBAAyB,eAuB3B"}

package/lib/internal/template/internal/components/control-group/index.js

@@ -3,18 +3,18 @@
 import React from 'react';
 import clsx from 'clsx';
 import { getBaseProps } from '../../base-component';
-import { GroupedControlContext } from '../../context/control-group-context';
+import { GroupedControlContext, } from '../../context/control-group-context';
 import { flattenChildren } from '../../utils/flatten-children';
 import styles from './styles.css.js';
-export default function InternalControlGroup({ children, ...props }) {
+export default function InternalControlGroup({ children, direction = 'horizontal', ...props }) {
     const baseProps = getBaseProps(props);
     const flattenedChildren = flattenChildren(children, 'ControlGroup');
     const controlCount = flattenedChildren.length;
-    return (React.createElement("div", { ...baseProps, role: "group", className: clsx(baseProps.className, styles.root) }, flattenedChildren.map((child, index) => {
+    return (React.createElement("div", { ...baseProps, role: "group", className: clsx(baseProps.className, styles.root, styles[`root-${direction}`]) }, flattenedChildren.map((child, index) => {
         const key = child && typeof child === 'object' ? child.key : undefined;
         const position = controlCount === 1 ? 'only' : index === 0 ? 'first' : index === controlCount - 1 ? 'last' : 'middle';
-        return (React.createElement("div", { key: key ? String(key) : index, className: clsx(styles.control, styles[`control-${position}`]) },
-            React.createElement(GroupedControlContext.Provider, { value: { position } }, child)));
+        return (React.createElement("div", { key: key ? String(key) : index, className: clsx(styles.control, styles[`control-${position}-${direction}`]) },
+            React.createElement(GroupedControlContext.Provider, { value: { position, direction } }, child)));
     })));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/control-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAA0B,MAAM,qCAAqC,CAAC;AACpG,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAA6B;IAC5F,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,iBAAiB,CAAC,MAAM,CAAC;IAE9C,OAAO,CACL,gCAAS,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,IAC/E,iBAAiB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACtC,MAAM,GAAG,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAE,KAAgC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QACnG,MAAM,QAAQ,GACZ,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QACvG,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;YACjG,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAG,KAAK,CAAkC,CACzF,CACP,CAAC;IACJ,CAAC,CAAC,CACE,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 { BaseComponentProps } from '../../../types/base-component';\nimport { getBaseProps } from '../../base-component';\nimport { GroupedControlContext, GroupedControlPosition } from '../../context/control-group-context';\nimport { flattenChildren } from '../../utils/flatten-children';\n\nimport styles from './styles.css.js';\n\nexport interface InternalControlGroupProps extends BaseComponentProps {\n  children?: React.ReactNode;\n}\n\nexport default function InternalControlGroup({ children, ...props }: InternalControlGroupProps) {\n  const baseProps = getBaseProps(props);\n\n  const flattenedChildren = flattenChildren(children, 'ControlGroup');\n  const controlCount = flattenedChildren.length;\n\n  return (\n    <div {...baseProps} role=\"group\" className={clsx(baseProps.className, styles.root)}>\n      {flattenedChildren.map((child, index) => {\n        const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;\n        const position: GroupedControlPosition =\n          controlCount === 1 ? 'only' : index === 0 ? 'first' : index === controlCount - 1 ? 'last' : 'middle';\n        return (\n          <div key={key ? String(key) : index} className={clsx(styles.control, styles[`control-${position}`])}>\n            <GroupedControlContext.Provider value={{ position }}>{child}</GroupedControlContext.Provider>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/control-group/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,qBAAqB,GAGtB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAOrC,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,SAAS,GAAG,YAAY,EACxB,GAAG,KAAK,EACkB;IAC1B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,iBAAiB,CAAC,MAAM,CAAC;IAE9C,OAAO,CACL,gCAAS,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,SAAS,EAAE,CAAC,CAAC,IAC5G,iBAAiB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACtC,MAAM,GAAG,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAE,KAAgC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QACnG,MAAM,QAAQ,GACZ,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QACvG,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,EAC9B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,WAAW,QAAQ,IAAI,SAAS,EAAE,CAAC,CAAC;YAE3E,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAG,KAAK,CAAkC,CACpG,CACP,CAAC;IACJ,CAAC,CAAC,CACE,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 { BaseComponentProps } from '../../../types/base-component';\nimport { getBaseProps } from '../../base-component';\nimport {\n  GroupedControlContext,\n  GroupedControlDirection,\n  GroupedControlPosition,\n} from '../../context/control-group-context';\nimport { flattenChildren } from '../../utils/flatten-children';\n\nimport styles from './styles.css.js';\n\nexport interface InternalControlGroupProps extends BaseComponentProps {\n  children?: React.ReactNode;\n  direction?: GroupedControlDirection;\n}\n\nexport default function InternalControlGroup({\n  children,\n  direction = 'horizontal',\n  ...props\n}: InternalControlGroupProps) {\n  const baseProps = getBaseProps(props);\n\n  const flattenedChildren = flattenChildren(children, 'ControlGroup');\n  const controlCount = flattenedChildren.length;\n\n  return (\n    <div {...baseProps} role=\"group\" className={clsx(baseProps.className, styles.root, styles[`root-${direction}`])}>\n      {flattenedChildren.map((child, index) => {\n        const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;\n        const position: GroupedControlPosition =\n          controlCount === 1 ? 'only' : index === 0 ? 'first' : index === controlCount - 1 ? 'last' : 'middle';\n        return (\n          <div\n            key={key ? String(key) : index}\n            className={clsx(styles.control, styles[`control-${position}-${direction}`])}\n          >\n            <GroupedControlContext.Provider value={{ position, direction }}>{child}</GroupedControlContext.Provider>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/internal/components/control-group/styles.css.js

@@ -1,9 +1,13 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_o08jm_13h8s_9",
-  "control": "awsui_control_o08jm_13h8s_45",
-  "control-middle": "awsui_control-middle_o08jm_13h8s_52",
-  "control-last": "awsui_control-last_o08jm_13h8s_52"
+  "root": "awsui_root_o08jm_35ajp_9",
+  "root-horizontal": "awsui_root-horizontal_o08jm_35ajp_41",
+  "root-vertical": "awsui_root-vertical_o08jm_35ajp_46",
+  "control": "awsui_control_o08jm_35ajp_51",
+  "control-middle-horizontal": "awsui_control-middle-horizontal_o08jm_35ajp_58",
+  "control-last-horizontal": "awsui_control-last-horizontal_o08jm_35ajp_58",
+  "control-middle-vertical": "awsui_control-middle-vertical_o08jm_35ajp_61",
+  "control-last-vertical": "awsui_control-last-vertical_o08jm_35ajp_61"
 };
   

package/lib/internal/template/internal/components/control-group/styles.scoped.css

@@ -6,7 +6,7 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_root_o08jm_13h8s_9:not(#\9) {
+.awsui_root_o08jm_35ajp_9:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -37,18 +37,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
   display: flex;
+}
+.awsui_root-horizontal_o08jm_35ajp_41:not(#\9) {
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: flex-end;
 }
+.awsui_root-vertical_o08jm_35ajp_46:not(#\9) {
+  flex-direction: column;
+  align-items: stretch;
+}
 
-.awsui_control_o08jm_13h8s_45:not(#\9) {
+.awsui_control_o08jm_35ajp_51:not(#\9) {
   min-inline-size: 0;
   isolation: isolate;
 }
-.awsui_control_o08jm_13h8s_45:not(#\9):focus-within {
+.awsui_control_o08jm_35ajp_51:not(#\9):focus-within {
   z-index: 1;
 }
-.awsui_control_o08jm_13h8s_45.awsui_control-middle_o08jm_13h8s_52:not(#\9), .awsui_control_o08jm_13h8s_45.awsui_control-last_o08jm_13h8s_52:not(#\9) {
+.awsui_control-middle-horizontal_o08jm_35ajp_58:not(#\9), .awsui_control-last-horizontal_o08jm_35ajp_58:not(#\9) {
   margin-inline-start: calc(-1 * var(--border-width-field-2365x3, 1px));
+}
+.awsui_control-middle-vertical_o08jm_35ajp_61:not(#\9), .awsui_control-last-vertical_o08jm_35ajp_61:not(#\9) {
+  margin-block-start: calc(-1 * var(--border-width-field-2365x3, 1px));
 }

package/lib/internal/template/internal/components/control-group/styles.selectors.js

@@ -2,9 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_o08jm_13h8s_9",
-  "control": "awsui_control_o08jm_13h8s_45",
-  "control-middle": "awsui_control-middle_o08jm_13h8s_52",
-  "control-last": "awsui_control-last_o08jm_13h8s_52"
+  "root": "awsui_root_o08jm_35ajp_9",
+  "root-horizontal": "awsui_root-horizontal_o08jm_35ajp_41",
+  "root-vertical": "awsui_root-vertical_o08jm_35ajp_46",
+  "control": "awsui_control_o08jm_35ajp_51",
+  "control-middle-horizontal": "awsui_control-middle-horizontal_o08jm_35ajp_58",
+  "control-last-horizontal": "awsui_control-last-horizontal_o08jm_35ajp_58",
+  "control-middle-vertical": "awsui_control-middle-vertical_o08jm_35ajp_61",
+  "control-last-vertical": "awsui_control-last-vertical_o08jm_35ajp_61"
 };
   

package/lib/internal/template/internal/components/focus-lock/index.d.ts

@@ -4,6 +4,12 @@ export interface FocusLockProps {
     disabled?: boolean;
     autoFocus?: boolean;
     restoreFocus?: boolean;
+    /**
+     * Element to focus when `autoFocus` captures focus. Defaults to the first
+     * focusable element in the container. Use this to focus an element that isn't
+     * keyboard-reachable, such as a heading with `tabIndex={-1}`.
+     */
+    autoFocusTarget?: React.RefObject<HTMLElement>;
     children: React.ReactNode;
 }
 export interface FocusLockRef {

package/lib/internal/template/internal/components/focus-lock/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAQ7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AA0ED,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAQ7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AA8ED,wBAA2C"}

package/lib/internal/template/internal/components/focus-lock/index.js

@@ -5,7 +5,7 @@ import { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import TabTrap from '../tab-trap/index';
 import { getFirstFocusable, getLastFocusable } from './utils';
-function FocusLock({ className, disabled, autoFocus, restoreFocus, children }, ref) {
+function FocusLock({ className, disabled, autoFocus, restoreFocus, autoFocusTarget, children }, ref) {
     const restoreFocusTargetRef = useRef(null);
     const containerRef = useRef(null);
     const focusFirst = () => {
@@ -31,9 +31,14 @@ function FocusLock({ className, disabled, autoFocus, restoreFocus, children }, r
         };
         if (autoFocus && !disabled) {
             assignRestoreFocusTarget();
-            focusFirst();
+            if (autoFocusTarget === null || autoFocusTarget === void 0 ? void 0 : autoFocusTarget.current) {
+                autoFocusTarget.current.focus();
+            }
+            else {
+                focusFirst();
+            }
         }
-    }, [autoFocus, disabled]);
+    }, [autoFocus, disabled, autoFocusTarget]);
     // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.
     const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);
     useEffect(() => {