@cloudscape-design/components-themeable 3.0.1382 → 3.0.1384

package/lib/internal/template/segmented-control/internal.js

@@ -4,12 +4,15 @@ import React from 'react';
 import clsx from 'clsx';
 import InternalFormField from '../form-field/internal';
 import { getBaseProps } from '../internal/base-component';
+import { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';
+import { useGroupedControlContext } from '../internal/context/control-group-context';
 import { fireNonCancelableEvent } from '../internal/events';
 import InternalSelect from '../select/internal';
 import InternalSegmentedControlComponent from './internal-segmented-control';
 import styles from './styles.css.js';
 export default function InternalSegmentedControl({ selectedId, options, label, ariaLabelledby, onChange, __internalRootRef, style, ...props }) {
     const baseProps = getBaseProps(props);
+    const groupedControlProps = useGroupedControlContext();
     const selectOptions = (options || []).map(option => {
         const label = option.text || option.iconAlt;
         return { ...option, label, value: option.id };
@@ -25,8 +28,8 @@ export default function InternalSegmentedControl({ selectedId, options, label, a
         onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value }),
     };
     return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.root), ref: __internalRootRef },
-        React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange, style: style }),
-        React.createElement("div", { className: styles.select },
+        React.createElement(InternalSegmentedControlComponent, { selectedId: selectedId, options: options, label: label, ariaLabelledby: ariaLabelledby, onChange: onChange, style: style, groupedControlProps: groupedControlProps }),
+        React.createElement("div", { className: clsx(styles.select, ...getGroupedControlClassNames(styles, groupedControlProps)) },
             ariaLabelledby && React.createElement(InternalSelect, { ...selectProps, ariaLabelledby: ariaLabelledby }),
             !ariaLabelledby && label && (React.createElement(InternalFormField, { label: label, stretch: true },
                 React.createElement(InternalSelect, { ...selectProps }))),

package/lib/internal/template/segmented-control/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,cAAuC,MAAM,oBAAoB,CAAC;AAEzE,OAAO,iCAAiC,MAAM,8BAA8B,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACsB;IAC9B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,aAAa,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;QAC5C,OAAO,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACpD,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,aAAa;QACtB,cAAc,EAAE,qBAAqB;QACrC,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,KAAM,EAAE,CAAC;KACxG,CAAC;IAEF,OAAO,CACL,gCAAS,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC3F,oBAAC,iCAAiC,IAChC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ;QACF,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC1B,cAAc,IAAI,oBAAC,cAAc,OAAK,WAAW,EAAE,cAAc,EAAE,cAAc,GAAI;YACrF,CAAC,cAAc,IAAI,KAAK,IAAI,CAC3B,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI;gBAC5C,oBAAC,cAAc,OAAK,WAAW,GAAI,CACjB,CACrB;YACA,CAAC,cAAc,IAAI,CAAC,KAAK,IAAI,oBAAC,cAAc,OAAK,WAAW,GAAI,CAC7D,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 InternalFormField from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalSelect, { InternalSelectProps } from '../select/internal';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControlComponent from './internal-segmented-control';\n\nimport styles from './styles.css.js';\n\ntype InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n  __internalRootRef,\n  style,\n  ...props\n}: InternalSegmentedControlProps) {\n  const baseProps = getBaseProps(props);\n\n  const selectOptions = (options || []).map(option => {\n    const label = option.text || option.iconAlt;\n    return { ...option, label, value: option.id };\n  });\n\n  const selectedOptions = selectOptions.filter(option => {\n    return option.value === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n\n  const selectProps: InternalSelectProps = {\n    options: selectOptions,\n    selectedOption: currentSelectedOption,\n    triggerVariant: 'option',\n    onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value! }),\n  };\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalSegmentedControlComponent\n        selectedId={selectedId}\n        options={options}\n        label={label}\n        ariaLabelledby={ariaLabelledby}\n        onChange={onChange}\n        style={style}\n      />\n      <div className={styles.select}>\n        {ariaLabelledby && <InternalSelect {...selectProps} ariaLabelledby={ariaLabelledby} />}\n        {!ariaLabelledby && label && (\n          <InternalFormField label={label} stretch={true}>\n            <InternalSelect {...selectProps} />\n          </InternalFormField>\n        )}\n        {!ariaLabelledby && !label && <InternalSelect {...selectProps} />}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/segmented-control/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,6DAA6D,CAAC;AAC1G,OAAO,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AACrF,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,cAAuC,MAAM,oBAAoB,CAAC;AAEzE,OAAO,iCAAiC,MAAM,8BAA8B,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,UAAU,EACV,OAAO,EACP,KAAK,EACL,cAAc,EACd,QAAQ,EACR,iBAAiB,EACjB,KAAK,EACL,GAAG,KAAK,EACsB;IAC9B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,mBAAmB,GAAG,wBAAwB,EAAE,CAAC;IAEvD,MAAM,aAAa,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACjD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,OAAO,CAAC;QAC5C,OAAO,EAAE,GAAG,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE;QACpD,OAAO,MAAM,CAAC,KAAK,KAAK,UAAU,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,qBAAqB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,MAAM,WAAW,GAAwB;QACvC,OAAO,EAAE,aAAa;QACtB,cAAc,EAAE,qBAAqB;QACrC,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,QAAQ,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,KAAM,EAAE,CAAC;KACxG,CAAC;IAEF,OAAO,CACL,gCAAS,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QAC3F,oBAAC,iCAAiC,IAChC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,mBAAmB,EAAE,mBAAmB,GACxC;QACF,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,2BAA2B,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;YAC7F,cAAc,IAAI,oBAAC,cAAc,OAAK,WAAW,EAAE,cAAc,EAAE,cAAc,GAAI;YACrF,CAAC,cAAc,IAAI,KAAK,IAAI,CAC3B,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI;gBAC5C,oBAAC,cAAc,OAAK,WAAW,GAAI,CACjB,CACrB;YACA,CAAC,cAAc,IAAI,CAAC,KAAK,IAAI,oBAAC,cAAc,OAAK,WAAW,GAAI,CAC7D,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 InternalFormField from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { getGroupedControlClassNames } from '../internal/components/control-group/grouped-control-styles';\nimport { useGroupedControlContext } from '../internal/context/control-group-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport InternalSelect, { InternalSelectProps } from '../select/internal';\nimport { SegmentedControlProps } from './interfaces';\nimport InternalSegmentedControlComponent from './internal-segmented-control';\n\nimport styles from './styles.css.js';\n\ntype InternalSegmentedControlProps = SegmentedControlProps & InternalBaseComponentProps;\n\nexport default function InternalSegmentedControl({\n  selectedId,\n  options,\n  label,\n  ariaLabelledby,\n  onChange,\n  __internalRootRef,\n  style,\n  ...props\n}: InternalSegmentedControlProps) {\n  const baseProps = getBaseProps(props);\n  const groupedControlProps = useGroupedControlContext();\n\n  const selectOptions = (options || []).map(option => {\n    const label = option.text || option.iconAlt;\n    return { ...option, label, value: option.id };\n  });\n\n  const selectedOptions = selectOptions.filter(option => {\n    return option.value === selectedId;\n  });\n  const currentSelectedOption = selectedOptions.length ? selectedOptions[0] : null;\n\n  const selectProps: InternalSelectProps = {\n    options: selectOptions,\n    selectedOption: currentSelectedOption,\n    triggerVariant: 'option',\n    onChange: event => fireNonCancelableEvent(onChange, { selectedId: event.detail.selectedOption.value! }),\n  };\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalSegmentedControlComponent\n        selectedId={selectedId}\n        options={options}\n        label={label}\n        ariaLabelledby={ariaLabelledby}\n        onChange={onChange}\n        style={style}\n        groupedControlProps={groupedControlProps}\n      />\n      <div className={clsx(styles.select, ...getGroupedControlClassNames(styles, groupedControlProps))}>\n        {ariaLabelledby && <InternalSelect {...selectProps} ariaLabelledby={ariaLabelledby} />}\n        {!ariaLabelledby && label && (\n          <InternalFormField label={label} stretch={true}>\n            <InternalSelect {...selectProps} />\n          </InternalFormField>\n        )}\n        {!ariaLabelledby && !label && <InternalSelect {...selectProps} />}\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/segmented-control/segment.d.ts

@@ -6,6 +6,7 @@ interface SegmentProps extends SegmentedControlProps.Option {
     isActive: boolean;
     tabIndex: number;
     style: SegmentedControlProps['style'];
+    fullWidth?: boolean;
 }
 export declare const Segment: React.ForwardRefExoticComponent<SegmentProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/lib/internal/template/segmented-control/segment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,UAAU,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,OAAO,wFAiFnB,CAAC"}
+{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,UAAU,YAAa,SAAQ,qBAAqB,CAAC,MAAM;IACzD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,wFAmFnB,CAAC"}

package/lib/internal/template/segmented-control/segment.js

@@ -9,13 +9,13 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import Tooltip from '../tooltip/internal.js';
 import { getSegmentedControlSegmentStyles } from './style';
 import styles from './styles.css.js';
-export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, style, }, ref) => {
+export const Segment = React.forwardRef(({ disabled, disabledReason, text, iconName, iconAlt, iconUrl, iconSvg, isActive, onClick, onKeyDown, tabIndex, id, style, fullWidth, }, ref) => {
     const buttonRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
     const isDisabledWithReason = disabled && !!disabledReason;
     const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
     const isVisualRefresh = useVisualRefresh();
-    return (React.createElement("button", { className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }, { [styles.refresh]: isVisualRefresh }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined, ...(isDisabledWithReason ? targetProps : {}), "data-testid": id, "data-awsui-motion-trigger": "hover", "data-awsui-motion-target": "", style: getSegmentedControlSegmentStyles(style) },
+    return (React.createElement("button", { className: clsx(styles.segment, { [styles.disabled]: !!disabled }, { [styles.selected]: isActive }, { [styles.refresh]: isVisualRefresh }, { [styles['full-width']]: fullWidth }), ref: useMergeRefs(ref, buttonRef), onClick: onClick, onKeyDown: onKeyDown, disabled: disabled && !disabledReason, "aria-disabled": isDisabledWithReason ? 'true' : undefined, type: "button", tabIndex: tabIndex, "aria-pressed": isActive ? 'true' : 'false', "aria-label": !text ? iconAlt : undefined, onFocus: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onBlur: isDisabledWithReason ? () => setShowTooltip(false) : undefined, onMouseEnter: isDisabledWithReason ? () => setShowTooltip(true) : undefined, onMouseLeave: isDisabledWithReason ? () => setShowTooltip(false) : undefined, ...(isDisabledWithReason ? targetProps : {}), "data-testid": id, "data-awsui-motion-trigger": "hover", "data-awsui-motion-target": "", style: getSegmentedControlSegmentStyles(style) },
         (iconName || iconUrl || iconSvg) && (React.createElement(InternalIcon, { className: clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text']), name: iconName, url: iconUrl, svg: iconSvg, alt: iconAlt, variant: disabled ? 'disabled' : 'normal' })),
         React.createElement("span", null, text),
         isDisabledWithReason && (React.createElement(React.Fragment, null,

package/lib/internal/template/segmented-control/segment.js.map

@@ -1 +1 @@
-{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../icon/internal';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport Tooltip from '../tooltip/internal.js';\nimport { SegmentedControlProps } from './interfaces';\nimport { getSegmentedControlSegmentStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface SegmentProps extends SegmentedControlProps.Option {\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isActive: boolean;\n  tabIndex: number;\n  style: SegmentedControlProps['style'];\n}\n\nexport const Segment = React.forwardRef(\n  (\n    {\n      disabled,\n      disabledReason,\n      text,\n      iconName,\n      iconAlt,\n      iconUrl,\n      iconSvg,\n      isActive,\n      onClick,\n      onKeyDown,\n      tabIndex,\n      id,\n      style,\n    }: SegmentProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const buttonRef = useRef<HTMLElement>(null);\n    const [showTooltip, setShowTooltip] = useState(false);\n    const isDisabledWithReason = disabled && !!disabledReason;\n\n    const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n    const isVisualRefresh = useVisualRefresh();\n\n    return (\n      <button\n        className={clsx(\n          styles.segment,\n          { [styles.disabled]: !!disabled },\n          { [styles.selected]: isActive },\n          { [styles.refresh]: isVisualRefresh }\n        )}\n        ref={useMergeRefs(ref, buttonRef)}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        disabled={disabled && !disabledReason}\n        aria-disabled={isDisabledWithReason ? 'true' : undefined}\n        type=\"button\"\n        tabIndex={tabIndex}\n        aria-pressed={isActive ? 'true' : 'false'}\n        aria-label={!text ? iconAlt : undefined}\n        onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        {...(isDisabledWithReason ? targetProps : {})}\n        data-testid={id}\n        data-awsui-motion-trigger=\"hover\"\n        data-awsui-motion-target=\"\"\n        style={getSegmentedControlSegmentStyles(style)}\n      >\n        {(iconName || iconUrl || iconSvg) && (\n          <InternalIcon\n            className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n            name={iconName}\n            url={iconUrl}\n            svg={iconSvg}\n            alt={iconAlt}\n            variant={disabled ? 'disabled' : 'normal'}\n          />\n        )}\n        <span>{text}</span>\n\n        {isDisabledWithReason && (\n          <>\n            {descriptionEl}\n            {showTooltip && (\n              <Tooltip\n                className={styles['disabled-reason-tooltip']}\n                getTrack={() => buttonRef.current}\n                content={disabledReason!}\n                onEscape={() => setShowTooltip(false)}\n              />\n            )}\n          </>\n        )}\n      </button>\n    );\n  }\n);\n"]}
+{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../icon/internal';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport Tooltip from '../tooltip/internal.js';\nimport { SegmentedControlProps } from './interfaces';\nimport { getSegmentedControlSegmentStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface SegmentProps extends SegmentedControlProps.Option {\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isActive: boolean;\n  tabIndex: number;\n  style: SegmentedControlProps['style'];\n  fullWidth?: boolean;\n}\n\nexport const Segment = React.forwardRef(\n  (\n    {\n      disabled,\n      disabledReason,\n      text,\n      iconName,\n      iconAlt,\n      iconUrl,\n      iconSvg,\n      isActive,\n      onClick,\n      onKeyDown,\n      tabIndex,\n      id,\n      style,\n      fullWidth,\n    }: SegmentProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const buttonRef = useRef<HTMLElement>(null);\n    const [showTooltip, setShowTooltip] = useState(false);\n    const isDisabledWithReason = disabled && !!disabledReason;\n\n    const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n    const isVisualRefresh = useVisualRefresh();\n\n    return (\n      <button\n        className={clsx(\n          styles.segment,\n          { [styles.disabled]: !!disabled },\n          { [styles.selected]: isActive },\n          { [styles.refresh]: isVisualRefresh },\n          { [styles['full-width']]: fullWidth }\n        )}\n        ref={useMergeRefs(ref, buttonRef)}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        disabled={disabled && !disabledReason}\n        aria-disabled={isDisabledWithReason ? 'true' : undefined}\n        type=\"button\"\n        tabIndex={tabIndex}\n        aria-pressed={isActive ? 'true' : 'false'}\n        aria-label={!text ? iconAlt : undefined}\n        onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        {...(isDisabledWithReason ? targetProps : {})}\n        data-testid={id}\n        data-awsui-motion-trigger=\"hover\"\n        data-awsui-motion-target=\"\"\n        style={getSegmentedControlSegmentStyles(style)}\n      >\n        {(iconName || iconUrl || iconSvg) && (\n          <InternalIcon\n            className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n            name={iconName}\n            url={iconUrl}\n            svg={iconSvg}\n            alt={iconAlt}\n            variant={disabled ? 'disabled' : 'normal'}\n          />\n        )}\n        <span>{text}</span>\n\n        {isDisabledWithReason && (\n          <>\n            {descriptionEl}\n            {showTooltip && (\n              <Tooltip\n                className={styles['disabled-reason-tooltip']}\n                getTrack={() => buttonRef.current}\n                content={disabledReason!}\n                onEscape={() => setShowTooltip(false)}\n              />\n            )}\n          </>\n        )}\n      </button>\n    );\n  }\n);\n"]}

package/lib/internal/template/segmented-control/styles.css.js

@@ -1,21 +1,31 @@
 
     import './styles.scoped.css';
     export default {
-  "segment": "awsui_segment_8cbea_17mt7_17",
-  "refresh": "awsui_refresh_8cbea_17mt7_44",
-  "disabled": "awsui_disabled_8cbea_17mt7_50",
-  "selected": "awsui_selected_8cbea_17mt7_107",
-  "icon": "awsui_icon_8cbea_17mt7_117",
-  "with-text": "awsui_with-text_8cbea_17mt7_121",
-  "with-no-text": "awsui_with-no-text_8cbea_17mt7_127",
-  "root": "awsui_root_8cbea_17mt7_132",
-  "segment-part": "awsui_segment-part_8cbea_17mt7_164",
-  "select": "awsui_select_8cbea_17mt7_107",
-  "segment-count-2": "awsui_segment-count-2_8cbea_17mt7_199",
-  "segment-count-3": "awsui_segment-count-3_8cbea_17mt7_203",
-  "segment-count-4": "awsui_segment-count-4_8cbea_17mt7_207",
-  "segment-count-5": "awsui_segment-count-5_8cbea_17mt7_211",
-  "segment-count-6": "awsui_segment-count-6_8cbea_17mt7_215",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_17mt7_219"
+  "segment": "awsui_segment_8cbea_19w97_17",
+  "full-width": "awsui_full-width_8cbea_19w97_44",
+  "refresh": "awsui_refresh_8cbea_19w97_47",
+  "disabled": "awsui_disabled_8cbea_19w97_53",
+  "selected": "awsui_selected_8cbea_19w97_110",
+  "icon": "awsui_icon_8cbea_19w97_120",
+  "with-text": "awsui_with-text_8cbea_19w97_124",
+  "with-no-text": "awsui_with-no-text_8cbea_19w97_130",
+  "root": "awsui_root_8cbea_19w97_135",
+  "segment-part": "awsui_segment-part_8cbea_19w97_167",
+  "grouped": "awsui_grouped_8cbea_19w97_188",
+  "grouped-only": "awsui_grouped-only_8cbea_19w97_188",
+  "grouped-vertical": "awsui_grouped-vertical_8cbea_19w97_192",
+  "grouped-horizontal-first": "awsui_grouped-horizontal-first_8cbea_19w97_203",
+  "grouped-horizontal-middle": "awsui_grouped-horizontal-middle_8cbea_19w97_207",
+  "grouped-horizontal-last": "awsui_grouped-horizontal-last_8cbea_19w97_213",
+  "grouped-vertical-first": "awsui_grouped-vertical-first_8cbea_19w97_217",
+  "grouped-vertical-middle": "awsui_grouped-vertical-middle_8cbea_19w97_221",
+  "grouped-vertical-last": "awsui_grouped-vertical-last_8cbea_19w97_227",
+  "select": "awsui_select_8cbea_19w97_110",
+  "segment-count-2": "awsui_segment-count-2_8cbea_19w97_244",
+  "segment-count-3": "awsui_segment-count-3_8cbea_19w97_251",
+  "segment-count-4": "awsui_segment-count-4_8cbea_19w97_258",
+  "segment-count-5": "awsui_segment-count-5_8cbea_19w97_265",
+  "segment-count-6": "awsui_segment-count-6_8cbea_19w97_272",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_19w97_279"
 };
   

package/lib/internal/template/segmented-control/styles.scoped.css

@@ -14,7 +14,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_segment_8cbea_17mt7_17:not(#\9) {
+.awsui_segment_8cbea_19w97_17:not(#\9) {
   font-size: var(--font-size-body-m-tq5a14, 14px);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
   word-wrap: break-word;
@@ -26,8 +26,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: 0.25px;
   padding-block: calc(var(--space-field-vertical-77df8s, 4px) - var(--border-width-field-2365x3, 1px));
   padding-inline: calc(var(--space-button-horizontal-ojp1rq, 20px) - var(--space-static-xxs-vzto3j, 4px));
-  background: var(--awsui-style-background-default-66120l, var(--color-background-segment-default-6rgn11, #ffffff));
-  color: var(--awsui-style-color-default-66120l, var(--color-text-segment-default-nk7mbi, #545b64));
+  background: var(--awsui-style-background-default-ka4djm, var(--color-background-segment-default-6rgn11, #ffffff));
+  color: var(--awsui-style-color-default-ka4djm, var(--color-text-segment-default-nk7mbi, #545b64));
   overflow: visible;
   border-start-start-radius: calc(var(--border-radius-button-9k0hrl, 2px) - (var(--border-width-field-2365x3, 1px) + var(--border-width-button-lffd4t, 1px)));
   border-start-end-radius: calc(var(--border-radius-button-9k0hrl, 2px) - (var(--border-width-field-2365x3, 1px) + var(--border-width-button-lffd4t, 1px)));
@@ -39,26 +39,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: center;
   border-inline: none;
   border-block: none;
-  --awsui-style-focus-ring-box-shadow-66120l: 0 0 0 var(--awsui-style-focus-ring-border-width-66120l, 2px) var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #0073bb));
+  --awsui-style-focus-ring-box-shadow-ka4djm: 0 0 0 var(--awsui-style-focus-ring-border-width-ka4djm, 2px) var(--awsui-style-focus-ring-border-color-ka4djm, var(--color-border-item-focused-sewkzn, #0073bb));
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):not(.awsui_refresh_8cbea_17mt7_44) {
+.awsui_segment_8cbea_19w97_17.awsui_full-width_8cbea_19w97_44:not(#\9) {
+  justify-content: center;
+}
+.awsui_segment_8cbea_19w97_17:not(#\9):not(.awsui_refresh_8cbea_19w97_47) {
   block-size: calc(100% - var(--space-static-xxs-vzto3j, 4px) - 2 * var(--border-width-field-2365x3, 1px));
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):focus {
+.awsui_segment_8cbea_19w97_17:not(#\9):focus {
   outline: none;
 }
-.awsui_segment_8cbea_17mt7_17.awsui_disabled_8cbea_17mt7_50:not(#\9) {
-  background: var(--awsui-style-background-disabled-66120l, var(--color-background-segment-disabled-mjubn7, #ffffff));
-  color: var(--awsui-style-color-disabled-66120l, var(--color-text-interactive-disabled-tuxgxq, #aab7b8));
+.awsui_segment_8cbea_19w97_17.awsui_disabled_8cbea_19w97_53:not(#\9) {
+  background: var(--awsui-style-background-disabled-ka4djm, var(--color-background-segment-disabled-mjubn7, #ffffff));
+  color: var(--awsui-style-color-disabled-ka4djm, var(--color-text-interactive-disabled-tuxgxq, #aab7b8));
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19w97_17:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19w97_17:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_19w97_17:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -66,14 +69,14 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus
   inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px));
   inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px) + var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px));
   block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px) + var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px));
-  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-66120l);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-ka4djm, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-ka4djm, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-ka4djm, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-ka4djm, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-ka4djm);
   z-index: 1;
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):not(:last-child)::after {
+.awsui_segment_8cbea_19w97_17:not(#\9):not(:last-child)::after {
   content: "";
   position: absolute;
   inset-inline-end: calc(-1 * (var(--space-static-xxs-vzto3j, 4px) + 1px));
@@ -83,53 +86,53 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus
   background: var(--color-border-segment-divider-mq01bu, #687078);
   z-index: 1;
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):not(.awsui_refresh_8cbea_17mt7_44):not(:last-child)::after {
+.awsui_segment_8cbea_19w97_17:not(#\9):not(.awsui_refresh_8cbea_19w97_47):not(:last-child)::after {
   inset-inline-end: calc(-1 * var(--space-static-xxs-vzto3j, 4px));
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(1) {
+.awsui_segment_8cbea_19w97_17:not(#\9):nth-child(1) {
   grid-column: 1;
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(2) {
+.awsui_segment_8cbea_19w97_17:not(#\9):nth-child(2) {
   grid-column: 2;
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(3) {
+.awsui_segment_8cbea_19w97_17:not(#\9):nth-child(3) {
   grid-column: 3;
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(4) {
+.awsui_segment_8cbea_19w97_17:not(#\9):nth-child(4) {
   grid-column: 4;
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(5) {
+.awsui_segment_8cbea_19w97_17:not(#\9):nth-child(5) {
   grid-column: 5;
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(6) {
+.awsui_segment_8cbea_19w97_17:not(#\9):nth-child(6) {
   grid-column: 6;
 }
-.awsui_segment_8cbea_17mt7_17.awsui_selected_8cbea_17mt7_107:not(#\9) {
-  background: var(--awsui-style-background-active-66120l, var(--color-background-segment-active-ns5rt6, #0073bb));
-  color: var(--awsui-style-color-active-66120l, var(--color-text-segment-active-hbbf1h, #ffffff));
+.awsui_segment_8cbea_19w97_17.awsui_selected_8cbea_19w97_110:not(#\9) {
+  background: var(--awsui-style-background-active-ka4djm, var(--color-background-segment-active-ns5rt6, #0073bb));
+  color: var(--awsui-style-color-active-ka4djm, var(--color-text-segment-active-hbbf1h, #ffffff));
 }
-.awsui_segment_8cbea_17mt7_17:not(#\9):hover:not(.awsui_selected_8cbea_17mt7_107):not(.awsui_disabled_8cbea_17mt7_50):not(:focus) {
-  background: var(--awsui-style-background-hover-66120l, var(--color-background-segment-hover-el4hte, #fafafa));
-  color: var(--awsui-style-color-hover-66120l, var(--color-text-segment-hover-qq2b2e, #16191f));
+.awsui_segment_8cbea_19w97_17:not(#\9):hover:not(.awsui_selected_8cbea_19w97_110):not(.awsui_disabled_8cbea_19w97_53):not(:focus) {
+  background: var(--awsui-style-background-hover-ka4djm, var(--color-background-segment-hover-el4hte, #fafafa));
+  color: var(--awsui-style-color-hover-ka4djm, var(--color-text-segment-hover-qq2b2e, #16191f));
   cursor: pointer;
 }
 
-.awsui_icon_8cbea_17mt7_117:not(#\9) {
+.awsui_icon_8cbea_19w97_120:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_with-text_8cbea_17mt7_121:not(#\9) {
+.awsui_with-text_8cbea_19w97_124:not(#\9) {
   position: relative;
   inset-inline-start: calc(-1 * var(--space-xxs-3o1yoq, 4px));
   margin-inline-end: var(--space-xxs-3o1yoq, 4px);
 }
 
-.awsui_with-no-text_8cbea_17mt7_127:not(#\9) {
+.awsui_with-no-text_8cbea_19w97_130:not(#\9) {
   margin-inline: auto;
   inset-inline: 0;
 }
 
-.awsui_root_8cbea_17mt7_132:not(#\9) {
+.awsui_root_8cbea_19w97_135:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -161,7 +164,7 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_segment-part_8cbea_17mt7_164:not(#\9) {
+.awsui_segment-part_8cbea_19w97_167:not(#\9) {
   display: inline-grid;
   border-inline: solid var(--border-width-field-2365x3, 1px) var(--color-border-segment-wrapper-ofstpm, #687078);
   border-block: solid var(--border-width-field-2365x3, 1px) var(--color-border-segment-wrapper-ofstpm, #687078);
@@ -176,46 +179,103 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus
   padding-inline: calc(var(--space-static-xxs-vzto3j, 4px) - var(--border-width-field-2365x3, 1px));
   gap: calc(var(--space-static-xxs-vzto3j, 4px) * 2 + 1px);
 }
-.awsui_segment-part_8cbea_17mt7_164:not(#\9):not(.awsui_refresh_8cbea_17mt7_44) {
+.awsui_segment-part_8cbea_19w97_167:not(#\9):not(.awsui_refresh_8cbea_19w97_47) {
   padding-inline: calc(var(--space-static-xxxs-opeihl, 2px) + var(--border-width-field-2365x3, 1px));
   padding-block: 0;
   gap: calc(var(--space-static-xxs-vzto3j, 4px) * 2 - 1px);
 }
 @media (max-width: 688px) {
-  .awsui_segment-part_8cbea_17mt7_164:not(#\9) {
+  .awsui_segment-part_8cbea_19w97_167:not(#\9):not(.awsui_grouped_8cbea_19w97_188), .awsui_segment-part_8cbea_19w97_167.awsui_grouped-only_8cbea_19w97_188:not(#\9) {
     display: none;
   }
 }
+.awsui_segment-part_8cbea_19w97_167.awsui_grouped_8cbea_19w97_188.awsui_grouped-vertical_8cbea_19w97_192:not(#\9) {
+  inline-size: 100%;
+  box-sizing: border-box;
+}
 
-.awsui_select_8cbea_17mt7_107:not(#\9) {
+.awsui_grouped_8cbea_19w97_188: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_grouped-horizontal-first_8cbea_19w97_203:not(#\9) {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+.awsui_grouped-horizontal-middle_8cbea_19w97_207:not(#\9) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.awsui_grouped-horizontal-last_8cbea_19w97_213:not(#\9) {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
+.awsui_grouped-vertical-first_8cbea_19w97_217:not(#\9) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.awsui_grouped-vertical-middle_8cbea_19w97_221:not(#\9) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+.awsui_grouped-vertical-last_8cbea_19w97_227:not(#\9) {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+.awsui_grouped_8cbea_19w97_188.awsui_grouped-horizontal-middle_8cbea_19w97_207:not(#\9), .awsui_grouped_8cbea_19w97_188.awsui_grouped-horizontal-last_8cbea_19w97_213:not(#\9) {
+  border-inline-start: none;
+}
+
+.awsui_select_8cbea_19w97_110:not(#\9) {
   display: none;
 }
 @media (max-width: 688px) {
-  .awsui_select_8cbea_17mt7_107:not(#\9) {
+  .awsui_select_8cbea_19w97_110:not(#\9):not(.awsui_grouped_8cbea_19w97_188), .awsui_select_8cbea_19w97_110.awsui_grouped-only_8cbea_19w97_188:not(#\9) {
     display: block;
   }
 }
 
-.awsui_segment-count-2_8cbea_17mt7_199:not(#\9) {
+.awsui_segment-count-2_8cbea_19w97_244:not(#\9) {
   grid-template-columns: repeat(2, auto);
 }
+.awsui_segment-count-2_8cbea_19w97_244.awsui_grouped_8cbea_19w97_188.awsui_grouped-vertical_8cbea_19w97_192:not(#\9) {
+  grid-template-columns: repeat(2, 1fr);
+}
 
-.awsui_segment-count-3_8cbea_17mt7_203:not(#\9) {
+.awsui_segment-count-3_8cbea_19w97_251:not(#\9) {
   grid-template-columns: repeat(3, auto);
 }
+.awsui_segment-count-3_8cbea_19w97_251.awsui_grouped_8cbea_19w97_188.awsui_grouped-vertical_8cbea_19w97_192:not(#\9) {
+  grid-template-columns: repeat(3, 1fr);
+}
 
-.awsui_segment-count-4_8cbea_17mt7_207:not(#\9) {
+.awsui_segment-count-4_8cbea_19w97_258:not(#\9) {
   grid-template-columns: repeat(4, auto);
 }
+.awsui_segment-count-4_8cbea_19w97_258.awsui_grouped_8cbea_19w97_188.awsui_grouped-vertical_8cbea_19w97_192:not(#\9) {
+  grid-template-columns: repeat(4, 1fr);
+}
 
-.awsui_segment-count-5_8cbea_17mt7_211:not(#\9) {
+.awsui_segment-count-5_8cbea_19w97_265:not(#\9) {
   grid-template-columns: repeat(5, auto);
 }
+.awsui_segment-count-5_8cbea_19w97_265.awsui_grouped_8cbea_19w97_188.awsui_grouped-vertical_8cbea_19w97_192:not(#\9) {
+  grid-template-columns: repeat(5, 1fr);
+}
 
-.awsui_segment-count-6_8cbea_17mt7_215:not(#\9) {
+.awsui_segment-count-6_8cbea_19w97_272:not(#\9) {
   grid-template-columns: repeat(6, auto);
 }
+.awsui_segment-count-6_8cbea_19w97_272.awsui_grouped_8cbea_19w97_188.awsui_grouped-vertical_8cbea_19w97_192:not(#\9) {
+  grid-template-columns: repeat(6, 1fr);
+}
 
-.awsui_disabled-reason-tooltip_8cbea_17mt7_219:not(#\9) {
+.awsui_disabled-reason-tooltip_8cbea_19w97_279:not(#\9) {
   /* used in test-utils or tests */
 }

package/lib/internal/template/segmented-control/styles.selectors.js

@@ -2,21 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment": "awsui_segment_8cbea_17mt7_17",
-  "refresh": "awsui_refresh_8cbea_17mt7_44",
-  "disabled": "awsui_disabled_8cbea_17mt7_50",
-  "selected": "awsui_selected_8cbea_17mt7_107",
-  "icon": "awsui_icon_8cbea_17mt7_117",
-  "with-text": "awsui_with-text_8cbea_17mt7_121",
-  "with-no-text": "awsui_with-no-text_8cbea_17mt7_127",
-  "root": "awsui_root_8cbea_17mt7_132",
-  "segment-part": "awsui_segment-part_8cbea_17mt7_164",
-  "select": "awsui_select_8cbea_17mt7_107",
-  "segment-count-2": "awsui_segment-count-2_8cbea_17mt7_199",
-  "segment-count-3": "awsui_segment-count-3_8cbea_17mt7_203",
-  "segment-count-4": "awsui_segment-count-4_8cbea_17mt7_207",
-  "segment-count-5": "awsui_segment-count-5_8cbea_17mt7_211",
-  "segment-count-6": "awsui_segment-count-6_8cbea_17mt7_215",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_17mt7_219"
+  "segment": "awsui_segment_8cbea_19w97_17",
+  "full-width": "awsui_full-width_8cbea_19w97_44",
+  "refresh": "awsui_refresh_8cbea_19w97_47",
+  "disabled": "awsui_disabled_8cbea_19w97_53",
+  "selected": "awsui_selected_8cbea_19w97_110",
+  "icon": "awsui_icon_8cbea_19w97_120",
+  "with-text": "awsui_with-text_8cbea_19w97_124",
+  "with-no-text": "awsui_with-no-text_8cbea_19w97_130",
+  "root": "awsui_root_8cbea_19w97_135",
+  "segment-part": "awsui_segment-part_8cbea_19w97_167",
+  "grouped": "awsui_grouped_8cbea_19w97_188",
+  "grouped-only": "awsui_grouped-only_8cbea_19w97_188",
+  "grouped-vertical": "awsui_grouped-vertical_8cbea_19w97_192",
+  "grouped-horizontal-first": "awsui_grouped-horizontal-first_8cbea_19w97_203",
+  "grouped-horizontal-middle": "awsui_grouped-horizontal-middle_8cbea_19w97_207",
+  "grouped-horizontal-last": "awsui_grouped-horizontal-last_8cbea_19w97_213",
+  "grouped-vertical-first": "awsui_grouped-vertical-first_8cbea_19w97_217",
+  "grouped-vertical-middle": "awsui_grouped-vertical-middle_8cbea_19w97_221",
+  "grouped-vertical-last": "awsui_grouped-vertical-last_8cbea_19w97_227",
+  "select": "awsui_select_8cbea_19w97_110",
+  "segment-count-2": "awsui_segment-count-2_8cbea_19w97_244",
+  "segment-count-3": "awsui_segment-count-3_8cbea_19w97_251",
+  "segment-count-4": "awsui_segment-count-4_8cbea_19w97_258",
+  "segment-count-5": "awsui_segment-count-5_8cbea_19w97_265",
+  "segment-count-6": "awsui_segment-count-6_8cbea_19w97_272",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_19w97_279"
 };
   

package/lib/internal/template/select/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/select/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAe3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAc3C,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IAC3G,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACxC;AAED,QAAA,MAAM,cAAc,6FA4RnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/select/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAgB3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAIjD,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAc3C,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,0BAA0B;IAC3G,kBAAkB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CACxC;AAED,QAAA,MAAM,cAAc,6FAgSnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/internal/template/select/internal.js

@@ -10,6 +10,7 @@ import { getBreakpointValue } from '../internal/breakpoints';
 import DropdownFooter from '../internal/components/dropdown-footer';
 import { useDropdownStatus } from '../internal/components/dropdown-status';
 import { prepareOptions } from '../internal/components/option/utils/prepare-options.js';
+import { ResetGroupedControlContext, useGroupedControlContext } from '../internal/context/control-group-context';
 import { useFormFieldContext } from '../internal/context/form-field-context';
 import { fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
@@ -30,6 +31,7 @@ const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filt
     var _a;
     const baseProps = getBaseProps(restProps);
     const formFieldContext = useFormFieldContext(restProps);
+    const groupedControlProps = useGroupedControlContext();
     const i18n = useInternalI18n('select');
     const errorIconAriaLabel = i18n('errorIconAriaLabel', restProps.errorIconAriaLabel);
     const selectedAriaLabel = i18n('selectedAriaLabel', restProps.selectedAriaLabel);
@@ -82,7 +84,7 @@ const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filt
     const customDropdownHeader = renderDropdownHeader === null || renderDropdownHeader === void 0 ? void 0 : renderDropdownHeader(dropdownContentProps);
     const customDropdownFooter = renderDropdownFooter === null || renderDropdownFooter === void 0 ? void 0 : renderDropdownFooter(dropdownContentProps);
     const filter = (React.createElement(Filter, { clearAriaLabel: filteringClearAriaLabel, filteringType: filteringType, placeholder: filteringPlaceholder, ariaLabel: filteringAriaLabel, ariaRequired: ariaRequired, value: filteringValue, ...getFilterProps() }));
-    const trigger = (React.createElement(Trigger, { renderOption: renderOption, ref: triggerRef, placeholder: placeholder, disabled: disabled, readOnly: readOnly, triggerVariant: triggerVariant, triggerProps: getTriggerProps(disabled, autoFocus), selectedOption: selectedOption, isOpen: isOpen, inFilteringToken: __inFilteringToken, inlineLabelText: inlineLabelText, ...formFieldContext, controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, selectAriaLabelId) }));
+    const trigger = (React.createElement(Trigger, { renderOption: renderOption, ref: triggerRef, placeholder: placeholder, disabled: disabled, readOnly: readOnly, triggerVariant: triggerVariant, triggerProps: getTriggerProps(disabled, autoFocus), selectedOption: selectedOption, isOpen: isOpen, inFilteringToken: __inFilteringToken, groupedControlProps: groupedControlProps, inlineLabelText: inlineLabelText, ...formFieldContext, controlId: controlId, ariaLabelledby: joinStrings(formFieldContext.ariaLabelledby, selectAriaLabelId) }));
     const isEmpty = !options || options.length === 0;
     const isNoMatch = filteredOptions && filteredOptions.length === 0;
     const isFiltered = filteringType !== 'none' && filteringValue.length > 0 && filteredOptions && filteredOptions.length > 0;
@@ -140,13 +142,14 @@ const InternalSelect = React.forwardRef(({ options, filteringType = 'none', filt
     const dropdownProps = getDropdownProps();
     const hasOptions = useRef(options.length > 0);
     hasOptions.current = hasOptions.current || options.length > 0;
-    return (React.createElement("div", { ...baseProps, ref: mergedRef, className: clsx(styles.root, baseProps.className), onKeyDown: handleNativeSearch },
-        React.createElement(Dropdown, { ...dropdownProps, ariaLabelledby: dropdownProps.ariaRole ? joinStrings(selectAriaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.ariaRole
-                ? joinStrings(dropdownStatus.content ? footerId : undefined, dropdownAriaDescribedby)
-                : undefined, open: isOpen, stretchTriggerHeight: !!__inFilteringToken, minWidth: getDropdownMinWidth({ expandToViewport, triggerWidth }), maxWidth: getBreakpointValue('xxs'), trigger: trigger, header: dropdownHeader, onMouseDown: handleMouseDown, footer: dropdownFooter, expandToViewport: expandToViewport, 
-            // Forces dropdown position recalculation when new options are loaded
-            contentKey: hasOptions.current.toString(), content: React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, renderOption: renderOption, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, screenReaderContent: announcement, highlightType: highlightType }) }),
-        React.createElement("div", { hidden: true, id: selectAriaLabelId }, ariaLabel || inlineLabelText)));
+    return (React.createElement(ResetGroupedControlContext, null,
+        React.createElement("div", { ...baseProps, ref: mergedRef, className: clsx(styles.root, baseProps.className), onKeyDown: handleNativeSearch },
+            React.createElement(Dropdown, { ...dropdownProps, ariaLabelledby: dropdownProps.ariaRole ? joinStrings(selectAriaLabelId, controlId) : undefined, ariaDescribedby: dropdownProps.ariaRole
+                    ? joinStrings(dropdownStatus.content ? footerId : undefined, dropdownAriaDescribedby)
+                    : undefined, open: isOpen, stretchTriggerHeight: !!__inFilteringToken, minWidth: getDropdownMinWidth({ expandToViewport, triggerWidth }), maxWidth: getBreakpointValue('xxs'), trigger: trigger, header: dropdownHeader, onMouseDown: handleMouseDown, footer: dropdownFooter, expandToViewport: expandToViewport, 
+                // Forces dropdown position recalculation when new options are loaded
+                contentKey: hasOptions.current.toString(), content: React.createElement(ListComponent, { listBottom: !dropdownStatus.isSticky ? (React.createElement(DropdownFooter, { content: isOpen ? dropdownStatus.content : null, id: footerId })) : null, renderOption: renderOption, menuProps: menuProps, getOptionProps: getOptionProps, filteredOptions: filteredOptions, filteringValue: filteringValue, ref: scrollToIndex, hasDropdownStatus: dropdownStatus.content !== null, screenReaderContent: announcement, highlightType: highlightType }) }),
+            React.createElement("div", { hidden: true, id: selectAriaLabelId }, ariaLabel || inlineLabelText))));
 });
 export default InternalSelect;
 //# sourceMappingURL=internal.js.map