vvaliyev · Oct 29, 2026
@@ -0,0 +1,78 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import clsx from 'clsx';
+
+import { Autosuggest, AutosuggestProps, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+import { getInputFieldClassNames } from '../style-api/input-field';
+
+import styles from './style-api-v2.scss';
+
+const options: AutosuggestProps.Options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'apricot', label: 'Apricot' },
+  { value: 'avocado', label: 'Avocado', disabled: true },
+];
+
+type StyledAutosuggestProps = Omit<AutosuggestProps, 'value'> & { value?: string };
+
+// The `input` slot forwards to the whole Input style API; the shared helper maps the owned states (invalid,
+// warning, disabled, read-only) to classes. The dropdown forwards to Dropdown and opens on focus.
+function StyledAutosuggest({
+  value: initialValue = '',
+  invalid,
+  warning,
+  disabled,
+  readOnly,
+  ...rest
+}: StyledAutosuggestProps) {
+  const [value, setValue] = useState(initialValue);
+  const fieldClassNames = getInputFieldClassNames({ invalid, warning, disabled, readOnly });
+  return (
+    <Autosuggest
+      ariaLabel="Autosuggest field"
+      placeholder="Search fruits"
+      enteredTextLabel={text => `Use: "${text}"`}
+      {...rest}
+      options={options}
+      value={value}
+      onChange={({ detail }) => setValue(detail.value)}
+      invalid={invalid}
+      warning={warning}
+      disabled={disabled}
+      readOnly={readOnly}
+      {...{
+        styleClassNames: {
+          input: {
+            ...fieldClassNames,
+            input: clsx(fieldClassNames.input, styles['input-input-search']),
+            searchIcon: clsx(styles['input-search-icon'], disabled && styles['input-search-icon-disabled']),
+            clearButton: styles['input-clear-button'],
+          },
+          dropdown: { container: styles.dropdown },
+        },
+      }}
+    />
+  );
+}
+
+export default function () {
+  return (
+    <SimplePage title="Autosuggest - Style API v2" screenshotArea={{ disableAnimations: true }} i18n={{}}>
+      <SpaceBetween size="m" direction="horizontal">
+        <StyledAutosuggest value="Apple" />
+        <StyledAutosuggest />
+        <StyledAutosuggest value="Banana" invalid={true} />
+        <StyledAutosuggest value="Apricot" warning={true} />
+      </SpaceBetween>
+      <SpaceBetween size="m" direction="horizontal">
+        <StyledAutosuggest value="Apple" disabled={true} />
+        <StyledAutosuggest disabled={true} />
+        <StyledAutosuggest value="Apple" readOnly={true} />
+        <StyledAutosuggest value="Ap" autoFocus={true} />
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
@@ -0,0 +1,46 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~components/styling/input';
+@use '~components/styling/button';
+@use '~components/styling/dropdown';
+@use '../style-api/palette' as palette;
+
+// The field is a search input: the inline padding replaces the room the component reserves for the search icon
+// and the clear button, so it is set with that room included, in every state. Added to the shared input class.
+.input-input-search,
+.input-input-search:placeholder-shown {
+  @include input.input($padding-inline: 40px);
+}
+
+// Search icon (Input.searchIcon): the disabled state is a class.
+.input-search-icon {
+  @include input.searchIcon($color: palette.$accent);
+}
+
+.input-search-icon-disabled {
+  @include input.searchIcon($color: palette.$text-disabled);
+}
+
+// Clear button (Input.clearButton) forwards to Button.root.
+.input-clear-button {
+  @include button.root($color: palette.$accent, $focus-ring-color: palette.$accent);
+
+  &:hover,
+  &:focus {
+    @include button.root($color: palette.$accent-hover);
+  }
+}
+
+// Dropdown forwards to Dropdown.container.
+.dropdown {
+  @include dropdown.container(
+    $background: palette.$surface-alt,
+    $border-radius: 12px,
+    $box-shadow: 0 4px 12px palette.$subtle-active,
+    $outline-color: palette.$accent,
+    $outline-width: 2px
+  );
+}
@@ -0,0 +1,101 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+
+import { Select, SelectProps, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-api-v2.scss';
+
+const options: SelectProps.Options = [
+  { value: '1', label: 'Option 1', description: 'The first option' },
+  { value: '2', label: 'Option 2', description: 'The second option' },
+  { value: '3', label: 'Option 3', description: 'The third option', disabled: true },
+];
+
+type StyledSelectProps = Omit<SelectProps, 'selectedOption' | 'options'> & { selectedOption?: SelectProps.Option };
+
+// Owned states (invalid, warning, disabled, read-only) are passed as a different class; the interaction states
+// (:hover, :focus, :focus-within) are handled by selectors in the stylesheet.
+function StyledSelect({
+  selectedOption: initialSelectedOption,
+  invalid,
+  warning,
+  disabled,
+  readOnly,
+  ...rest
+}: StyledSelectProps) {
+  const [selectedOption, setSelectedOption] = useState<SelectProps.Option | null>(initialSelectedOption ?? null);
+  const triggerClassName = clsx({
+    [styles['trigger-invalid']]: invalid,
+    [styles['trigger-warning']]: warning && !invalid,
+    [styles['trigger-disabled']]: disabled && !invalid && !warning,
+    [styles['trigger-readonly']]: readOnly && !disabled && !invalid && !warning,
+    [styles.trigger]: !invalid && !warning && !disabled && !readOnly,
+  });
+  return (
+    <Select
+      ariaLabel="Select field"
+      placeholder="Choose an option"
+      filteringAriaLabel="Filter options"
+      {...rest}
+      options={options}
+      selectedOption={selectedOption}
+      onChange={({ detail }) => setSelectedOption(detail.selectedOption)}
+      invalid={invalid}
+      warning={warning}
+      disabled={disabled}
+      readOnly={readOnly}
+      {...{
+        styleClassNames: {
+          trigger: triggerClassName,
+          inlineLabel: clsx(styles['inline-label'], disabled && styles['inline-label-disabled']),
+          filter: { root: styles['filter-root'], input: styles['filter-input'] },
+          dropdown: { container: styles.dropdown },
+        },
+      }}
+    />
+  );
+}
+
+// Opens the dropdown on mount so the filter and dropdown slots are visible.
+function OpenStyledSelect(props: StyledSelectProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    ref.current?.querySelector('button')?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+  }, []);
+  return (
+    <div ref={ref}>
+      <StyledSelect {...props} />
+    </div>
+  );
+}
+
+export default function () {
+  return (
+    <SimplePage title="Select - Style API v2" screenshotArea={{ disableAnimations: true }} i18n={{}}>
+      <SpaceBetween size="m" direction="horizontal">
+        <StyledSelect selectedOption={options[0]} />
+        <StyledSelect />
+        <StyledSelect selectedOption={options[0]} inlineLabelText="Option" />
+      </SpaceBetween>
+      <SpaceBetween size="m" direction="horizontal">
+        <StyledSelect selectedOption={options[0]} invalid={true} />
+        <StyledSelect selectedOption={options[0]} warning={true} />
+        <StyledSelect selectedOption={options[0]} readOnly={true} />
+      </SpaceBetween>
+      <SpaceBetween size="m" direction="horizontal">
+        <StyledSelect selectedOption={options[0]} disabled={true} />
+        <StyledSelect disabled={true} />
+        <StyledSelect selectedOption={options[0]} inlineLabelText="Option" disabled={true} />
+      </SpaceBetween>
+      <SpaceBetween size="m" direction="horizontal">
+        <StyledSelect selectedOption={options[0]} triggerVariant="option" />
+        <StyledSelect selectedOption={options[0]} disabled={true} triggerVariant="option" />
+        <OpenStyledSelect selectedOption={options[0]} filteringType="auto" />
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
@@ -0,0 +1,128 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~components/styling/select';
+@use '~components/styling/input';
+@use '~components/styling/dropdown';
+@use '../style-api/palette' as palette;
+
+// Trigger button, which is also the field box. One class per owned state (invalid, warning, disabled, read-only);
+// `:hover` and `:focus` for the interaction states. The inline end padding keeps the room the caret needs.
+@mixin field {
+  @include select.trigger(
+    $color: palette.$text,
+    $background: palette.$surface,
+    $border-width: 2px,
+    $border-radius: 12px,
+    $box-shadow: 0 2px 4px palette.$subtle,
+    $padding-block: 10px,
+    $padding-inline: 16px 40px,
+    $font-family: monospace,
+    $font-size: 15px,
+    $font-weight: 600,
+    $placeholder-color: palette.$accent
+  );
+}
+
+.trigger {
+  @include field;
+  @include select.trigger($border-color: palette.$border);
+
+  &:hover {
+    @include select.trigger($background: palette.$surface-alt, $border-color: palette.$border-accent);
+  }
+
+  &:focus {
+    @include select.trigger(
+      $color: palette.$accent,
+      $border-color: palette.$accent,
+      $box-shadow: 0 0 0 3px palette.$accent-active
+    );
+  }
+}
+
+.trigger-invalid {
+  @include field;
+  @include select.trigger($background: palette.$error-surface, $border-color: palette.$error);
+
+  &:focus {
+    @include select.trigger($box-shadow: 0 0 0 3px palette.$error-hover);
+  }
+}
+
+.trigger-warning {
+  @include field;
+  @include select.trigger($background: palette.$warning-surface, $border-color: palette.$warning);
+
+  &:focus {
+    @include select.trigger($box-shadow: 0 0 0 3px palette.$warning);
+  }
+}
+
+.trigger-disabled {
+  @include field;
+  @include select.trigger(
+    $color: palette.$text-disabled,
+    $background: palette.$control-bg-disabled,
+    $border-color: palette.$border-disabled,
+    $box-shadow: none,
+    $placeholder-color: palette.$text-disabled
+  );
+}
+
+.trigger-readonly {
+  @include field;
+  @include select.trigger($background: palette.$surface-alt, $border-color: palette.$border);
+
+  &:focus {
+    @include select.trigger($border-color: palette.$accent, $box-shadow: 0 0 0 3px palette.$accent-active);
+  }
+}
+
+// Inline label: the disabled state is a class.
+.inline-label {
+  @include select.inlineLabel(
+    $color: palette.$text-on-accent,
+    $background: palette.$accent,
+    $font-family: monospace,
+    $font-size: 11px,
+    $font-weight: 700
+  );
+}
+
+.inline-label-disabled {
+  @include select.inlineLabel($color: palette.$control-fg-disabled, $background: palette.$control-bg-disabled);
+}
+
+// Filter forwards to Input: the field box and the native input.
+.filter-root {
+  @include input.root($background: palette.$surface, $border-color: palette.$border, $border-width: 2px);
+
+  &:focus-within {
+    @include input.root($border-color: palette.$accent, $box-shadow: 0 0 0 3px palette.$accent-active);
+  }
+}
+
+.filter-input {
+  @include input.input(
+    $color: palette.$text,
+    $padding-inline: 40px,
+    $font-family: monospace,
+    $font-size: 15px,
+    $font-weight: 600,
+    $placeholder-color: palette.$accent
+  );
+}
+
+// Dropdown forwards to Dropdown.container.
+.dropdown {
+  @include dropdown.container(
+    $background: palette.$surface-alt,
+    $border-radius: 12px,
+    $box-shadow: 0 4px 12px palette.$subtle-active,
+    $outline-color: palette.$accent,
+    $outline-width: 2px
+  );
+}