docs(storybook): add Select component

src/stories/components/Select.mdx

@@ -0,0 +1,53 @@
+import { Canvas, Controls, Meta, Source } from "@storybook/blocks";
+import * as SelectStories from "./Select.stories";
+
+<Meta of={SelectStories} />
+
+# Select
+
+## Usage notes
+
+> The select component should only be used as a last resort in
+> public-facing services because research shows that some users
+> find selects very difficult to use.
+
+Please also refer to [GOV.UK Design System documentation on
+Select](https://design-system.service.gov.uk/components/select/) for more
+information.
+
+## Example
+
+<Canvas of={SelectStories.Default} />
+<Controls of={SelectStories.Default} />
+
+## Variants
+
+### Medium size
+
+<Canvas of={SelectStories.Medium} />
+
+### Small size
+
+<Canvas of={SelectStories.Small} />
+
+## States
+
+### Disabled
+
+<Canvas of={SelectStories.Disabled} />
+
+### Error
+
+<Canvas of={SelectStories.Error} />
+
+## Implementation notes
+
+- add `ds-Select` as base class to a `select` element
+- combine with one size modifier: `ds-select-small` or `ds-select-medium`
+- note: `options` can't be styled
+
+<Source of={SelectStories.Small} />
+
+Please check out the code on the given examples and otherwise
+refer to [mdn web docs on \<select>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
+for more technical information.

src/stories/components/Select.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/html";
+import { clsx } from "clsx";
+import dedent from "dedent";
+import { htmlAttrs, loremSentences } from "../../../.storybook/utils";
+
+type SelectArgs = {
+  label: string;
+  size?: "default" | "medium" | "small";
+  disabled?: boolean;
+  error?: boolean;
+};
+
+const meta = {
+  title: "Components/Select",
+  render: ({ label, size, disabled, error }, { id }) => {
+    const cssClasses = clsx("ds-select", {
+      "ds-select-medium": size === "medium",
+      "ds-select-small": size === "small",
+      "has-error": error,
+    });
+    const attrs = htmlAttrs({
+      className: cssClasses,
+      disabled,
+      id,
+    });
+
+    return dedent`
+      <div>
+        <label for="${id}">${label}</label>
+        <select ${attrs}>
+          <option value="">Bitte auswählen</option>
+          <option value="1">Option 1</option>
+          <option value="2" disabled>Option 2 (disabled)</option>
+          <option value="3">Option 3</option>
+        </select>
+      </div>
+    `;
+  },
+  argTypes: {
+    label: { control: "text" },
+    size: {
+      options: ["default", "medium", "small"],
+      control: { type: "radio" },
+    },
+    disabled: {
+      description: "Is the select not available for interaction?",
+    },
+    error: {
+      description: "Is the select highlighted as not valid?",
+    },
+  },
+  args: {
+    size: "default",
+    label: loremSentences(1),
+    disabled: false,
+    error: false,
+  },
+} satisfies Meta<SelectArgs>;
+
+export default meta;
+
+type Story = StoryObj<SelectArgs>;
+
+export const Default = {} satisfies Story;
+export const Disabled = { args: { disabled: true } } satisfies Story;
+export const Error = { args: { error: true } } satisfies Story;
+export const Small = { args: { size: "small" } } satisfies Story;
+export const Medium = { args: { size: "medium" } } satisfies Story;