From a6508e655079b6cd2a69ac6c02397c9e32ed015d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 4 Jun 2026 21:20:27 +0000
Subject: [PATCH 1/2] feat: Add Select component for form inputs

- Add Select component with Select.Option compound sub-component
- Support placeholder, error message, disabled, fullWidth, size (sm/md/lg)
- Reuse component-input tokens for visual consistency with Input
- Forward ref to native <select> element
- Accessible: aria-invalid, aria-describedby for errors
- Add Playwright CT tests
- Add Storybook stories
- Add Docusaurus examples and documentation
---
 .../docusaurus/docs/interaction/Select.mdx    | 122 ++++++++
 .../src/dsExamples/interaction/select.tsx     |  89 ++++++
 .../src/interaction/Select/Select.module.css  | 122 ++++++++
 .../main/src/interaction/Select/Select.tsx    | 153 ++++++++++
 .../main/src/interaction/Select/index.ts      |   1 +
 .../Select/select.utilities.config.cjs        |  76 +++++
 .../main/src/interaction/index.ts             |   3 +
 .../src/interaction/Select.spec.tsx           | 261 ++++++++++++++++
 .../stories/interaction/Select.stories.tsx    | 280 ++++++++++++++++++
 9 files changed, 1107 insertions(+)
 create mode 100644 packages/design-system/docusaurus/docs/interaction/Select.mdx
 create mode 100644 packages/design-system/docusaurus/src/dsExamples/interaction/select.tsx
 create mode 100644 packages/design-system/main/src/interaction/Select/Select.module.css
 create mode 100644 packages/design-system/main/src/interaction/Select/Select.tsx
 create mode 100644 packages/design-system/main/src/interaction/Select/index.ts
 create mode 100644 packages/design-system/main/src/interaction/Select/select.utilities.config.cjs
 create mode 100644 packages/design-system/playwright/src/interaction/Select.spec.tsx
 create mode 100644 packages/design-system/storybook/src/stories/interaction/Select.stories.tsx

diff --git a/packages/design-system/docusaurus/docs/interaction/Select.mdx b/packages/design-system/docusaurus/docs/interaction/Select.mdx
new file mode 100644
index 00000000..04174de4
--- /dev/null
+++ b/packages/design-system/docusaurus/docs/interaction/Select.mdx
@@ -0,0 +1,122 @@
+---
+id: select
+title: Select
+sidebar_label: Select
+description: Native select dropdown for form inputs with design system styling.
+sidebar_position: 9
+---
+
+import { Label, Select } from '@grasdouble/lufa_design-system';
+
+import { DarkModeCompatible } from '../../src/components/DarkModeCompatible';
+import { LiveDemoSection } from '../../src/components/LiveDemoSection';
+import { DisabledDemo, ErrorDemo, FullWidthDemo, LiveDemo, SizesDemo } from '../../src/dsExamples/interaction/select';
+
+# Select
+
+<DarkModeCompatible />
+
+## Overview
+
+**Select** is a native dropdown component for form inputs. It matches the visual design of **Input** and supports placeholder text, error messages, disabled state, full width layout, and three size variants.
+
+### Live Demo
+
+<LiveDemoSection
+  tabs={[
+    { id: 'default', label: 'Default', content: <LiveDemo /> },
+    { id: 'error', label: 'Error', content: <ErrorDemo /> },
+    { id: 'disabled', label: 'Disabled', content: <DisabledDemo /> },
+    { id: 'full', label: 'Full width', content: <FullWidthDemo /> },
+    { id: 'sizes', label: 'Sizes', content: <SizesDemo /> },
+  ]}
+/>
+
+## Anatomy
+
+- **Root**: A `<div>` wrapper containing the `<select>` element and optional error message.
+- **Select**: The native `<select>` element with design token styling.
+- **Option**: The `Select.Option` sub-component, which renders a native `<option>` element.
+- **Error message**: An accessible `<span>` shown below the select when `error` is provided.
+
+## Usage
+
+```tsx
+import { Label, Select } from '@grasdouble/lufa_design-system';
+
+export function Example() {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <>
+      <Label htmlFor="model">AI Model</Label>
+      <Select
+        id="model"
+        value={value}
+        onChange={setValue}
+        placeholder="Select a model"
+        defaultValue=""
+      >
+        <Select.Option value="gpt-4">GPT-4</Select.Option>
+        <Select.Option value="gpt-3.5">GPT-3.5 Turbo</Select.Option>
+        <Select.Option value="claude-3">Claude 3</Select.Option>
+      </Select>
+    </>
+  );
+}
+```
+
+## Props
+
+### Select
+
+| Prop          | Type                        | Default     | Description                                                        |
+| ------------- | --------------------------- | ----------- | ------------------------------------------------------------------ |
+| `onChange`    | `(value: string) => void`   | `undefined` | Callback fired when the selected value changes.                    |
+| `placeholder` | `string`                    | `undefined` | Placeholder text shown as a disabled empty option.                 |
+| `error`       | `string`                    | `undefined` | Error message. Applies error styling and displays the message.     |
+| `disabled`    | `boolean`                   | `false`     | Disables interaction and applies disabled styling.                 |
+| `fullWidth`   | `boolean`                   | `false`     | Stretches the select to 100% of container width.                   |
+| `size`        | `'sm' \| 'md' \| 'lg'`     | `'md'`      | Size variant.                                                      |
+| `className`   | `string`                    | `undefined` | Additional CSS classes applied to the select element.              |
+| `...props`    | `SelectHTMLAttributes`      | -           | All standard select attributes (value, defaultValue, name, etc.). |
+
+### Select.Option
+
+| Prop       | Type     | Default     | Description                                |
+| ---------- | -------- | ----------- | ------------------------------------------ |
+| `value`    | `string` | -           | The option value.                          |
+| `...props` | `OptionHTMLAttributes` | - | All standard option attributes.          |
+
+## Accessibility
+
+- Always associate a `<Label>` with the select using `htmlFor` and `id`.
+- When `error` is provided, the select receives `aria-invalid="true"` and `aria-describedby` pointing to the error message element.
+- Keyboard navigation (arrow keys, Enter, Escape) is handled natively by the browser.
+
+## Theming & Tokens
+
+Select reuses the Input component tokens for visual consistency. These tokens are theme‑aware.
+
+| Token                                       | Usage              |
+| ------------------------------------------- | ------------------ |
+| `--lufa-component-input-background-default` | Background         |
+| `--lufa-component-input-border-default`     | Border             |
+| `--lufa-component-input-border-focus`       | Focus border       |
+| `--lufa-component-input-border-error`       | Error border       |
+| `--lufa-component-input-text-default`       | Text color         |
+
+## Do / Don't
+
+:::tip Do
+Use **Select** with **Label** for accessible form fields. Show an error message when validation fails.
+:::
+
+:::warning Don't
+Avoid using **Select** for very long option lists—consider a searchable autocomplete instead.
+:::
+
+## Related Components
+
+- [Input](/docs/interaction/input)
+- [Label](/docs/interaction/label)
diff --git a/packages/design-system/docusaurus/src/dsExamples/interaction/select.tsx b/packages/design-system/docusaurus/src/dsExamples/interaction/select.tsx
new file mode 100644
index 00000000..1c5d9b47
--- /dev/null
+++ b/packages/design-system/docusaurus/src/dsExamples/interaction/select.tsx
@@ -0,0 +1,89 @@
+/**
+ * Live examples for Select component documentation
+ */
+
+import React, { useState } from 'react';
+
+import { Label, Select } from '@grasdouble/lufa_design-system';
+
+export function LiveDemo() {
+  const [value, setValue] = useState('');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      <Label htmlFor="demo-model">AI Model</Label>
+      <Select id="demo-model" value={value} onChange={setValue} placeholder="Select a model">
+        <Select.Option value="gpt-4">GPT-4</Select.Option>
+        <Select.Option value="gpt-3.5">GPT-3.5 Turbo</Select.Option>
+        <Select.Option value="claude-3">Claude 3</Select.Option>
+        <Select.Option value="mistral">Mistral</Select.Option>
+      </Select>
+      {value && <span style={{ fontSize: '14px' }}>Selected: {value}</span>}
+    </div>
+  );
+}
+
+export function DisabledDemo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <div>
+        <Label htmlFor="demo-disabled">Disabled</Label>
+        <Select id="demo-disabled" disabled>
+          <Select.Option value="option1">Option 1</Select.Option>
+        </Select>
+      </div>
+    </div>
+  );
+}
+
+export function FullWidthDemo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Label htmlFor="demo-full">Full width</Label>
+      <Select id="demo-full" fullWidth>
+        <Select.Option value="option1">Option 1</Select.Option>
+        <Select.Option value="option2">Option 2</Select.Option>
+      </Select>
+    </div>
+  );
+}
+
+export function ErrorDemo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Label htmlFor="demo-error">Category</Label>
+      <Select id="demo-error" error="Please select a category">
+        <Select.Option value="a">Category A</Select.Option>
+        <Select.Option value="b">Category B</Select.Option>
+      </Select>
+    </div>
+  );
+}
+
+export function SizesDemo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div>
+        <Label htmlFor="demo-sm">Small (sm)</Label>
+        <Select id="demo-sm" size="sm">
+          <Select.Option value="a">Option A</Select.Option>
+          <Select.Option value="b">Option B</Select.Option>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor="demo-md">Medium (md)</Label>
+        <Select id="demo-md" size="md">
+          <Select.Option value="a">Option A</Select.Option>
+          <Select.Option value="b">Option B</Select.Option>
+        </Select>
+      </div>
+      <div>
+        <Label htmlFor="demo-lg">Large (lg)</Label>
+        <Select id="demo-lg" size="lg">
+          <Select.Option value="a">Option A</Select.Option>
+          <Select.Option value="b">Option B</Select.Option>
+        </Select>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/design-system/main/src/interaction/Select/Select.module.css b/packages/design-system/main/src/interaction/Select/Select.module.css
new file mode 100644
index 00000000..fd3a96c1
--- /dev/null
+++ b/packages/design-system/main/src/interaction/Select/Select.module.css
@@ -0,0 +1,122 @@
+/**
+ * Select Component - CSS Module
+ *
+ * Uses component input tokens for visual consistency with the Input component,
+ * and semantic tokens for size variants (matching Button sizing).
+ */
+
+/* ========================================== */
+/* WRAPPER */
+/* ========================================== */
+
+/* Wrapper to support error message display and full-width layout */
+.wrapper {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--lufa-component-input-label-spacing);
+}
+
+.wrapper.fullWidth {
+  display: flex;
+  width: 100%;
+}
+
+/* ========================================== */
+/* BASE CLASS */
+/* ========================================== */
+
+/* Base Select class */
+.select {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  padding-block: var(--lufa-component-input-padding-md-block);
+  padding-inline: var(--lufa-component-input-padding-md-inline);
+  font-family: inherit;
+  font-size: var(--lufa-component-input-font-size-md);
+  line-height: var(--lufa-core-typography-body-line-height);
+  color: var(--lufa-component-input-text-default);
+  background-color: var(--lufa-component-input-background-default);
+  border: var(--lufa-component-input-border-width) solid var(--lufa-component-input-border-default);
+  border-radius: var(--lufa-component-input-border-radius);
+  transition:
+    border-color var(--lufa-semantic-ui-transition-duration-fast),
+    box-shadow var(--lufa-semantic-ui-transition-duration-fast);
+  outline: none;
+  cursor: pointer;
+  appearance: auto;
+}
+
+/* ========================================== */
+/* SIZE */
+/* ========================================== */
+
+.size-sm {
+  padding-block: var(--lufa-component-input-padding-sm-block);
+  padding-inline: var(--lufa-component-input-padding-sm-inline);
+  font-size: var(--lufa-component-input-font-size-sm);
+}
+
+.size-md {
+  padding-block: var(--lufa-component-input-padding-md-block);
+  padding-inline: var(--lufa-component-input-padding-md-inline);
+  font-size: var(--lufa-component-input-font-size-md);
+}
+
+.size-lg {
+  padding-block: var(--lufa-component-input-padding-lg-block);
+  padding-inline: var(--lufa-component-input-padding-lg-inline);
+  font-size: var(--lufa-component-input-font-size-lg);
+}
+
+/* ========================================== */
+/* ERROR */
+/* ========================================== */
+
+.error {
+  border-color: var(--lufa-component-input-border-error);
+}
+
+/* ========================================== */
+/* DISABLED */
+/* ========================================== */
+
+.disabled {
+  background-color: var(--lufa-component-input-background-disabled);
+  color: var(--lufa-component-input-text-disabled);
+  border-color: var(--lufa-component-input-border-disabled);
+  cursor: var(--lufa-component-input-state-disabled-cursor);
+}
+
+/* ========================================== */
+/* FULLWIDTH */
+/* ========================================== */
+
+.fullWidth {
+  width: 100%;
+  display: block;
+}
+
+/* ========================================== */
+/* ERROR MESSAGE */
+/* ========================================== */
+
+.errorMessage {
+  font-size: var(--lufa-component-input-helper-text-font-size);
+  color: var(--lufa-component-input-helper-text-color-error);
+}
+
+/* ========================================== */
+/* STANDALONE SELECTORS */
+/* ========================================== */
+
+/* Focus ring (keyboard navigation) */
+.select:focus-visible {
+  border-color: var(--lufa-component-input-border-focus);
+  box-shadow: 0 0 0 var(--lufa-component-shared-focus-outline-width) var(--lufa-component-shared-focus-outline-color);
+}
+
+/* Error + Focus — red focus ring */
+.select.error:focus-visible {
+  box-shadow: 0 0 0 var(--lufa-component-shared-focus-outline-width) var(--lufa-component-input-border-error);
+}
diff --git a/packages/design-system/main/src/interaction/Select/Select.tsx b/packages/design-system/main/src/interaction/Select/Select.tsx
new file mode 100644
index 00000000..1faf7b44
--- /dev/null
+++ b/packages/design-system/main/src/interaction/Select/Select.tsx
@@ -0,0 +1,153 @@
+import type { ChangeEvent, ComponentPropsWithoutRef } from 'react';
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+
+import styles from './Select.module.css';
+
+/**
+ * SelectOption sub-component
+ *
+ * Renders a native `<option>` element inside a Select.
+ *
+ * @example
+ * ```tsx
+ * <Select.Option value="option1">Option 1</Select.Option>
+ * ```
+ */
+const SelectOption = (props: ComponentPropsWithoutRef<'option'>) => <option {...props} />;
+SelectOption.displayName = 'Select.Option';
+
+/**
+ * Select Component - Native Select Dropdown for Forms
+ *
+ * A native select component consistent with Input styling and design tokens.
+ * Supports placeholder, error message, disabled state, full width, and three sizes.
+ *
+ * @example
+ * ```tsx
+ * // Basic select
+ * <Select id="model" value={value} onChange={(v) => setValue(v)}>
+ *   <Select.Option value="option1">Option 1</Select.Option>
+ *   <Select.Option value="option2">Option 2</Select.Option>
+ * </Select>
+ *
+ * // Select with placeholder and error
+ * <Select
+ *   id="model"
+ *   placeholder="Select an option"
+ *   error="Please select a value"
+ *   fullWidth
+ * >
+ *   <Select.Option value="option1">Option 1</Select.Option>
+ * </Select>
+ *
+ * // Disabled select
+ * <Select disabled value="option1">
+ *   <Select.Option value="option1">Option 1</Select.Option>
+ * </Select>
+ * ```
+ */
+
+export type SizeValue = 'sm' | 'md' | 'lg';
+
+export type SelectProps = {
+  /**
+   * Callback fired when the selected value changes.
+   * Receives the new string value (not a ChangeEvent).
+   */
+  onChange?: (value: string) => void;
+
+  /**
+   * Placeholder text shown when no value is selected.
+   * Rendered as a disabled empty option.
+   */
+  placeholder?: string;
+
+  /**
+   * Error message. When provided, applies error styling and displays the message below the select.
+   */
+  error?: string;
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * Full width select
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Size variant
+   * @default 'md'
+   */
+  size?: SizeValue;
+
+  /**
+   * Additional CSS classes applied to the select element
+   */
+  className?: string;
+} & Omit<ComponentPropsWithoutRef<'select'>, 'onChange' | 'size'>;
+
+const SelectImpl = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, error, fullWidth, disabled, size = 'md', placeholder, onChange, id, children, ...props }, ref) => {
+    const errorId = id ? `${id}-error` : undefined;
+
+    const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
+      onChange?.(e.target.value);
+    };
+
+    return (
+      <div className={clsx(styles.wrapper, fullWidth && styles.fullWidth)}>
+        <select
+          ref={ref}
+          id={id}
+          disabled={disabled}
+          aria-invalid={error ? true : undefined}
+          aria-describedby={error && errorId ? errorId : undefined}
+          onChange={handleChange}
+          className={clsx(
+            styles.select,
+            styles[`size-${size}`],
+            error && styles.error,
+            fullWidth && styles.fullWidth,
+            disabled && styles.disabled,
+            className
+          )}
+          {...props}
+        >
+          {placeholder !== undefined && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {children}
+        </select>
+        {error && (
+          <span id={errorId} className={styles.errorMessage} role="alert">
+            {error}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+SelectImpl.displayName = 'Select';
+
+/**
+ * Select — Compound component with Option sub-component.
+ *
+ * Usage:
+ * ```tsx
+ * <Select id="my-select" value={val} onChange={setVal}>
+ *   <Select.Option value="a">Option A</Select.Option>
+ * </Select>
+ * ```
+ */
+export const Select = Object.assign(SelectImpl, {
+  Option: SelectOption,
+});
diff --git a/packages/design-system/main/src/interaction/Select/index.ts b/packages/design-system/main/src/interaction/Select/index.ts
new file mode 100644
index 00000000..7868ecba
--- /dev/null
+++ b/packages/design-system/main/src/interaction/Select/index.ts
@@ -0,0 +1 @@
+export * from './Select';
diff --git a/packages/design-system/main/src/interaction/Select/select.utilities.config.cjs b/packages/design-system/main/src/interaction/Select/select.utilities.config.cjs
new file mode 100644
index 00000000..1aeeb00d
--- /dev/null
+++ b/packages/design-system/main/src/interaction/Select/select.utilities.config.cjs
@@ -0,0 +1,76 @@
+/**
+ * Select Component - Utilities Generator Config
+ *
+ * Source of truth for Select.module.css size and state utilities.
+ * Run `pnpm generate:utilities Select` to regenerate the CSS file.
+ */
+
+module.exports = {
+  component: 'Select',
+  outputFile: 'Select.module.css',
+
+  base: {
+    display: 'inline-block',
+    'box-sizing': 'border-box',
+    width: '100%',
+    'padding-block': 'var(--lufa-component-input-padding-md-block)',
+    'padding-inline': 'var(--lufa-component-input-padding-md-inline)',
+    'font-family': 'inherit',
+    'font-size': 'var(--lufa-component-input-font-size-md)',
+    'line-height': 'var(--lufa-core-typography-body-line-height)',
+    color: 'var(--lufa-component-input-text-default)',
+    'background-color': 'var(--lufa-component-input-background-default)',
+    border: 'var(--lufa-component-input-border-width) solid var(--lufa-component-input-border-default)',
+    'border-radius': 'var(--lufa-component-input-border-radius)',
+    transition:
+      'border-color var(--lufa-semantic-ui-transition-duration-fast), box-shadow var(--lufa-semantic-ui-transition-duration-fast)',
+    outline: 'none',
+    cursor: 'pointer',
+    appearance: 'auto',
+  },
+
+  utilities: {
+    error: {
+      property: 'border-color',
+      values: {
+        true: 'var(--lufa-component-input-border-error)',
+      },
+    },
+    disabled: {
+      property: ['background-color', 'color', 'border-color', 'cursor'],
+      values: {
+        true: [
+          'var(--lufa-component-input-background-disabled)',
+          'var(--lufa-component-input-text-disabled)',
+          'var(--lufa-component-input-border-disabled)',
+          'var(--lufa-component-input-state-disabled-cursor)',
+        ],
+      },
+    },
+    fullWidth: {
+      property: ['width', 'display'],
+      values: {
+        true: ['100%', 'block'],
+      },
+    },
+  },
+
+  selectors: [
+    {
+      comment: 'Focus ring (keyboard navigation)',
+      selector: '.select:focus-visible',
+      properties: {
+        'border-color': 'var(--lufa-component-input-border-focus)',
+        'box-shadow':
+          '0 0 0 var(--lufa-component-shared-focus-outline-width) var(--lufa-component-shared-focus-outline-color)',
+      },
+    },
+    {
+      comment: 'Error + Focus — red focus ring',
+      selector: '.select.error:focus-visible',
+      properties: {
+        'box-shadow': '0 0 0 var(--lufa-component-shared-focus-outline-width) var(--lufa-component-input-border-error)',
+      },
+    },
+  ],
+};
diff --git a/packages/design-system/main/src/interaction/index.ts b/packages/design-system/main/src/interaction/index.ts
index cce4fb4d..ea667823 100644
--- a/packages/design-system/main/src/interaction/index.ts
+++ b/packages/design-system/main/src/interaction/index.ts
@@ -10,3 +10,6 @@ export type { FormFieldProps } from './FormField';
 
 export { Label } from './Label';
 export type { LabelProps } from './Label';
+
+export { Select } from './Select';
+export type { SelectProps, SizeValue as SelectSizeValue } from './Select';
diff --git a/packages/design-system/playwright/src/interaction/Select.spec.tsx b/packages/design-system/playwright/src/interaction/Select.spec.tsx
new file mode 100644
index 00000000..2ae8e0e9
--- /dev/null
+++ b/packages/design-system/playwright/src/interaction/Select.spec.tsx
@@ -0,0 +1,261 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test } from '@playwright/experimental-ct-react';
+
+import { Select } from '@grasdouble/lufa_design-system';
+
+test.describe('Select', () => {
+  test('should pass a11y checks', async ({ mount, page }) => {
+    await mount(
+      <Select id="a11y-select" aria-label="Select an option">
+        <Select.Option value="option1">Option 1</Select.Option>
+      </Select>
+    );
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .disableRules(['page-has-heading-one', 'landmark-one-main', 'region'])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('should render correctly', async ({ mount }) => {
+    const component = await mount(
+      <Select id="render-select">
+        <Select.Option value="option1">Option 1</Select.Option>
+        <Select.Option value="option2">Option 2</Select.Option>
+      </Select>
+    );
+    const select = component.locator('select');
+    await expect(select).toBeVisible();
+  });
+
+  test('should render placeholder option when provided', async ({ mount }) => {
+    const component = await mount(
+      <Select id="placeholder-select" placeholder="Choose an option">
+        <Select.Option value="option1">Option 1</Select.Option>
+      </Select>
+    );
+    const placeholder = component.locator('option[value=""]');
+    await expect(placeholder).toHaveText('Choose an option');
+  });
+
+  test('should render children options', async ({ mount }) => {
+    const component = await mount(
+      <Select id="children-select">
+        <Select.Option value="a">Alpha</Select.Option>
+        <Select.Option value="b">Beta</Select.Option>
+      </Select>
+    );
+    await expect(component.locator('option[value="a"]')).toHaveText('Alpha');
+    await expect(component.locator('option[value="b"]')).toHaveText('Beta');
+  });
+
+  test('should apply error state', async ({ mount }) => {
+    const component = await mount(
+      <Select id="error-select" error="This field is required">
+        <Select.Option value="option1">Option 1</Select.Option>
+      </Select>
+    );
+    const select = component.locator('select');
+    await expect(select).toHaveClass(/error/);
+    await expect(select).toHaveAttribute('aria-invalid', 'true');
+    const errorMsg = component.locator('[role="alert"]');
+    await expect(errorMsg).toHaveText('This field is required');
+  });
+
+  test('should apply disabled state', async ({ mount }) => {
+    const component = await mount(
+      <Select id="disabled-select" disabled>
+        <Select.Option value="option1">Option 1</Select.Option>
+      </Select>
+    );
+    const select = component.locator('select');
+    await expect(select).toBeDisabled();
+    await expect(select).toHaveClass(/disabled/);
+  });
+
+  test('should apply fullWidth state', async ({ mount }) => {
+    const component = await mount(
+      <Select id="fullwidth-select" fullWidth>
+        <Select.Option value="option1">Option 1</Select.Option>
+      </Select>
+    );
+    const select = component.locator('select');
+    await expect(select).toHaveClass(/fullWidth/);
+  });
+
+  test('should apply size classes', async ({ mount }) => {
+    const sm = await mount(
+      <Select id="sm-select" size="sm">
+        <Select.Option value="a">A</Select.Option>
+      </Select>
+    );
+    await expect(sm.locator('select')).toHaveClass(/size-sm/);
+
+    const lg = await mount(
+      <Select id="lg-select" size="lg">
+        <Select.Option value="a">A</Select.Option>
+      </Select>
+    );
+    await expect(lg.locator('select')).toHaveClass(/size-lg/);
+  });
+
+  test('should call onChange with the selected value', async ({ mount }) => {
+    let selected = '';
+    const component = await mount(
+      <Select
+        id="change-select"
+        onChange={(value) => {
+          selected = value;
+        }}
+      >
+        <Select.Option value="option1">Option 1</Select.Option>
+        <Select.Option value="option2">Option 2</Select.Option>
+      </Select>
+    );
+    await component.locator('select').selectOption('option2');
+    expect(selected).toBe('option2');
+  });
+
+  test('should associate error message with select via aria-describedby', async ({ mount }) => {
+    const component = await mount(
+      <Select id="aria-select" error="Required field">
+        <Select.Option value="option1">Option 1</Select.Option>
+      </Select>
+    );
+    const select = component.locator('select');
+    await expect(select).toHaveAttribute('aria-describedby', 'aria-select-error');
+    await expect(component.locator('#aria-select-error')).toHaveText('Required field');
+  });
+});
+
+test.describe('Visual Regression', () => {
+  test('should match snapshot for all variants', async ({ mount }) => {
+    const component = await mount(
+      <div style={{ padding: '32px', backgroundColor: 'var(--lufa-semantic-ui-background-page)', width: '600px' }}>
+        <h1
+          style={{
+            marginBottom: '24px',
+            fontSize: '28px',
+            fontWeight: 'bold',
+            color: 'var(--lufa-semantic-ui-text-primary)',
+          }}
+        >
+          Select Component - All Variants
+        </h1>
+
+        {/* Section 1: Default State */}
+        <section style={{ marginBottom: '24px' }}>
+          <h2
+            style={{
+              marginBottom: '16px',
+              fontSize: '20px',
+              fontWeight: '600',
+              color: 'var(--lufa-semantic-ui-text-secondary)',
+            }}
+          >
+            Default
+          </h2>
+          <Select id="default-select">
+            <Select.Option value="option1">Option 1</Select.Option>
+            <Select.Option value="option2">Option 2</Select.Option>
+          </Select>
+        </section>
+
+        {/* Section 2: With Placeholder */}
+        <section style={{ marginBottom: '24px' }}>
+          <h2
+            style={{
+              marginBottom: '16px',
+              fontSize: '20px',
+              fontWeight: '600',
+              color: 'var(--lufa-semantic-ui-text-secondary)',
+            }}
+          >
+            With Placeholder
+          </h2>
+          <Select id="placeholder-select" placeholder="Select an option" defaultValue="">
+            <Select.Option value="option1">Option 1</Select.Option>
+            <Select.Option value="option2">Option 2</Select.Option>
+          </Select>
+        </section>
+
+        {/* Section 3: Error State */}
+        <section style={{ marginBottom: '24px' }}>
+          <h2
+            style={{
+              marginBottom: '16px',
+              fontSize: '20px',
+              fontWeight: '600',
+              color: 'var(--lufa-semantic-ui-text-secondary)',
+            }}
+          >
+            Error State
+          </h2>
+          <Select id="error-select" error="Please select a valid option">
+            <Select.Option value="option1">Option 1</Select.Option>
+          </Select>
+        </section>
+
+        {/* Section 4: Disabled State */}
+        <section style={{ marginBottom: '24px' }}>
+          <h2
+            style={{
+              marginBottom: '16px',
+              fontSize: '20px',
+              fontWeight: '600',
+              color: 'var(--lufa-semantic-ui-text-secondary)',
+            }}
+          >
+            Disabled
+          </h2>
+          <Select id="disabled-select" disabled>
+            <Select.Option value="option1">Option 1</Select.Option>
+          </Select>
+        </section>
+
+        {/* Section 5: Full Width */}
+        <section style={{ marginBottom: '24px' }}>
+          <h2
+            style={{
+              marginBottom: '16px',
+              fontSize: '20px',
+              fontWeight: '600',
+              color: 'var(--lufa-semantic-ui-text-secondary)',
+            }}
+          >
+            Full Width
+          </h2>
+          <Select id="fullwidth-select" fullWidth>
+            <Select.Option value="option1">Option 1</Select.Option>
+            <Select.Option value="option2">Option 2</Select.Option>
+          </Select>
+        </section>
+
+        {/* Section 6: Sizes */}
+        <section>
+          <h2
+            style={{
+              marginBottom: '16px',
+              fontSize: '20px',
+              fontWeight: '600',
+              color: 'var(--lufa-semantic-ui-text-secondary)',
+            }}
+          >
+            Sizes
+          </h2>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+            <Select id="sm-select" size="sm">
+              <Select.Option value="a">Small (sm)</Select.Option>
+            </Select>
+            <Select id="md-select" size="md">
+              <Select.Option value="a">Medium (md)</Select.Option>
+            </Select>
+            <Select id="lg-select" size="lg">
+              <Select.Option value="a">Large (lg)</Select.Option>
+            </Select>
+          </div>
+        </section>
+      </div>
+    );
+    await expect(component).toHaveScreenshot('select-all-variants.png');
+  });
+});
diff --git a/packages/design-system/storybook/src/stories/interaction/Select.stories.tsx b/packages/design-system/storybook/src/stories/interaction/Select.stories.tsx
new file mode 100644
index 00000000..4836cbc6
--- /dev/null
+++ b/packages/design-system/storybook/src/stories/interaction/Select.stories.tsx
@@ -0,0 +1,280 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Select } from '@grasdouble/lufa_design-system';
+
+import { CodeBlock, PropCard, StoryContainer } from '../../components/helpers';
+import { STORY_COLORS } from '../../constants/storyColors';
+
+/**
+ * Select Component - Native Select Dropdown
+ *
+ * A native select component for form inputs, consistent with the Input component styling.
+ * Supports placeholder, error messages, disabled state, full width, and three sizes.
+ *
+ * ## Features
+ * - ✅ States: Default, Focus, Error, Disabled
+ * - ✅ Semantic token usage for borders and backgrounds
+ * - ✅ Layout options: Full width or default
+ * - ✅ Accessible focus rings
+ * - ✅ Error message display with aria-describedby
+ * - ✅ Three sizes: sm, md, lg
+ * - ✅ Compound component: Select.Option
+ */
+const meta = {
+  title: '6. Interaction/Select',
+  component: Select,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text shown when no value is selected',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message (also applies error styling)',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Stretch to container width',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Select size',
+    },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================
+// DEFAULT STORY
+// ============================================
+
+export const Default: Story = {
+  render: () => {
+    return (
+      <StoryContainer>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+          <PropCard label="Default Select">
+            {/*
+              💡 TOKEN EDUCATION:
+              Background: var(--lufa-component-input-background-default)
+              Text: var(--lufa-component-input-text-default)
+              Border: var(--lufa-component-input-border-default)
+              Focus Border: var(--lufa-component-input-border-focus)
+              Border Radius: var(--lufa-component-input-border-radius)
+            */}
+            <Select id="default">
+              <Select.Option value="option1">Option 1</Select.Option>
+              <Select.Option value="option2">Option 2</Select.Option>
+              <Select.Option value="option3">Option 3</Select.Option>
+            </Select>
+          </PropCard>
+
+          <CodeBlock
+            code={`<Select id="model">
+  <Select.Option value="option1">Option 1</Select.Option>
+  <Select.Option value="option2">Option 2</Select.Option>
+  <Select.Option value="option3">Option 3</Select.Option>
+</Select>`}
+            language="jsx"
+            title="JSX"
+          />
+        </div>
+      </StoryContainer>
+    );
+  },
+};
+
+// ============================================
+// PROP: PLACEHOLDER
+// ============================================
+
+export const Placeholder: Story = {
+  name: 'Prop: placeholder',
+  render: () => {
+    return (
+      <StoryContainer>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+          <PropCard label='placeholder="Select an option"'>
+            <Select id="placeholder" placeholder="Select an option" defaultValue="">
+              <Select.Option value="option1">Option 1</Select.Option>
+              <Select.Option value="option2">Option 2</Select.Option>
+            </Select>
+          </PropCard>
+
+          <CodeBlock
+            code={`<Select id="model" placeholder="Select an option" defaultValue="">
+  <Select.Option value="option1">Option 1</Select.Option>
+  <Select.Option value="option2">Option 2</Select.Option>
+</Select>`}
+            language="jsx"
+            title="JSX"
+          />
+        </div>
+      </StoryContainer>
+    );
+  },
+};
+
+// ============================================
+// PROP: STATES
+// ============================================
+
+export const States: Story = {
+  name: 'States (Error / Disabled)',
+  render: () => {
+    return (
+      <StoryContainer>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
+          {/* Error State */}
+          <div>
+            <h3
+              style={{
+                fontSize: '14px',
+                fontWeight: 600,
+                color: STORY_COLORS.themed.text.primary,
+                textTransform: 'uppercase',
+                marginBottom: '16px',
+              }}
+            >
+              Error State
+            </h3>
+            <PropCard label='error="Please select a valid option"'>
+              <Select id="error" error="Please select a valid option">
+                <Select.Option value="option1">Option 1</Select.Option>
+                <Select.Option value="option2">Option 2</Select.Option>
+              </Select>
+            </PropCard>
+          </div>
+
+          {/* Disabled State */}
+          <div>
+            <h3
+              style={{
+                fontSize: '14px',
+                fontWeight: 600,
+                color: STORY_COLORS.themed.text.primary,
+                textTransform: 'uppercase',
+                marginBottom: '16px',
+              }}
+            >
+              Disabled State
+            </h3>
+            <PropCard label="disabled={true}">
+              <Select id="disabled" disabled>
+                <Select.Option value="option1">Option 1</Select.Option>
+              </Select>
+            </PropCard>
+          </div>
+
+          <CodeBlock
+            code={`{/* Error state */}
+<Select id="model" error="Please select a valid option">
+  <Select.Option value="option1">Option 1</Select.Option>
+</Select>
+
+{/* Disabled state */}
+<Select id="model" disabled>
+  <Select.Option value="option1">Option 1</Select.Option>
+</Select>`}
+            language="jsx"
+            title="JSX"
+          />
+        </div>
+      </StoryContainer>
+    );
+  },
+};
+
+// ============================================
+// PROP: SIZE
+// ============================================
+
+export const Size: Story = {
+  name: 'Prop: size',
+  render: () => {
+    const sizes = ['sm', 'md', 'lg'] as const;
+
+    return (
+      <StoryContainer>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+          {sizes.map((size) => (
+            <PropCard key={size} label={`size="${size}"`}>
+              <Select id={`size-${size}`} size={size}>
+                <Select.Option value="option1">Option 1</Select.Option>
+                <Select.Option value="option2">Option 2</Select.Option>
+              </Select>
+            </PropCard>
+          ))}
+
+          <CodeBlock
+            code={`<Select id="sm" size="sm">
+  <Select.Option value="option1">Option 1</Select.Option>
+</Select>
+
+<Select id="md" size="md">
+  <Select.Option value="option1">Option 1</Select.Option>
+</Select>
+
+<Select id="lg" size="lg">
+  <Select.Option value="option1">Option 1</Select.Option>
+</Select>`}
+            language="jsx"
+            title="JSX"
+          />
+        </div>
+      </StoryContainer>
+    );
+  },
+};
+
+// ============================================
+// PROP: FULL WIDTH
+// ============================================
+
+export const FullWidth: Story = {
+  name: 'Prop: fullWidth',
+  render: () => {
+    return (
+      <StoryContainer>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+          <PropCard label="fullWidth={true}">
+            <div
+              style={{
+                width: '100%',
+                maxWidth: '500px',
+                border: `1px dashed ${STORY_COLORS.themed.border.default}`,
+                padding: '10px',
+              }}
+            >
+              <Select id="fullwidth" fullWidth>
+                <Select.Option value="option1">Option 1</Select.Option>
+                <Select.Option value="option2">Option 2</Select.Option>
+              </Select>
+            </div>
+          </PropCard>
+
+          <CodeBlock
+            code={`<div style={{ width: '500px' }}>
+  <Select id="model" fullWidth>
+    <Select.Option value="option1">Option 1</Select.Option>
+  </Select>
+</div>`}
+            language="jsx"
+            title="JSX"
+          />
+        </div>
+      </StoryContainer>
+    );
+  },
+};

From f7249ffc1997e65979cd609f6c1816ff726246a9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 4 Jun 2026 21:22:29 +0000
Subject: [PATCH 2/2] fix: Address code review feedback on Select component

- Add `hidden` attribute to placeholder option to prevent re-selection
- Rename SizeValue to SelectSizeValue for consistent naming
- Remove type alias in exports
---
 .../design-system/main/src/interaction/Select/Select.tsx  | 8 ++++----
 packages/design-system/main/src/interaction/index.ts      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/main/src/interaction/Select/Select.tsx b/packages/design-system/main/src/interaction/Select/Select.tsx
index 1faf7b44..2cb50892 100644
--- a/packages/design-system/main/src/interaction/Select/Select.tsx
+++ b/packages/design-system/main/src/interaction/Select/Select.tsx
@@ -48,7 +48,7 @@ SelectOption.displayName = 'Select.Option';
  * ```
  */
 
-export type SizeValue = 'sm' | 'md' | 'lg';
+export type SelectSizeValue = 'sm' | 'md' | 'lg';
 
 export type SelectProps = {
   /**
@@ -59,7 +59,7 @@ export type SelectProps = {
 
   /**
    * Placeholder text shown when no value is selected.
-   * Rendered as a disabled empty option.
+   * Rendered as a hidden disabled option.
    */
   placeholder?: string;
 
@@ -84,7 +84,7 @@ export type SelectProps = {
    * Size variant
    * @default 'md'
    */
-  size?: SizeValue;
+  size?: SelectSizeValue;
 
   /**
    * Additional CSS classes applied to the select element
@@ -120,7 +120,7 @@ const SelectImpl = forwardRef<HTMLSelectElement, SelectProps>(
           {...props}
         >
           {placeholder !== undefined && (
-            <option value="" disabled>
+            <option value="" disabled hidden>
               {placeholder}
             </option>
           )}
diff --git a/packages/design-system/main/src/interaction/index.ts b/packages/design-system/main/src/interaction/index.ts
index ea667823..505b15a5 100644
--- a/packages/design-system/main/src/interaction/index.ts
+++ b/packages/design-system/main/src/interaction/index.ts
@@ -12,4 +12,4 @@ export { Label } from './Label';
 export type { LabelProps } from './Label';
 
 export { Select } from './Select';
-export type { SelectProps, SizeValue as SelectSizeValue } from './Select';
+export type { SelectProps, SelectSizeValue } from './Select';