srcdev-nuxt-components 9.6.8 → 9.6.9

package/app/components/05.forms/input-number/CONSUMER-STYLING.md

@@ -7,11 +7,11 @@ to override just this component; leave it unset and it inherits the shared `--th
 `--theme-*` token every other themed component also falls back to. See
 `theming-component-token-pattern.md` for why this two-tier shape exists.
 
-This shape mirrors `InputTextCore`'s token set (see its own CONSUMER-STYLING.md) — `InputNumber`
-is a native `<input type="number">` sibling to the text-based `InputTextAsNumberWithLabel` variant,
+This shape mirrors `InputText`'s token set (see its own CONSUMER-STYLING.md) — `InputNumber`
+is a native `<input type="number">` sibling to the text-based `InputTextAsNumberField` variant,
 and both are meant to look and behave the same way. Border colour also doubles as the divider
 colour between the input and an embedded left/right `InputButton` — there's no separate divider
-token, same as `InputTextCore`.
+token, same as `InputText`.
 
 | Token | Falls back to | Controls |
 |---|---|---|
@@ -27,6 +27,10 @@ Geometry (`--input-padding-block`, `--input-padding-inline`, `--input-min-height
 `--form-input-border-radius`, `--input-font-size`, etc.) is shared across every `05.forms`
 component and untouched by this — see `theming-form-geometry-tokens.md`.
 
+Private (not public API): `--_surface`, `--_border` and `--_border-focus` (each resolved once and
+read in several places) and `--_min-width` (the input's minimum width, worked out from `min`, `max`
+and `step` and capped at `12em`).
+
 ---
 
 ## State hooks
@@ -62,8 +66,8 @@ Inner elements: `.input-number-slot` (both slot holders), `.input-number-slot-le
 ## Input variant
 
 `:input-variant="'normal' | 'outlined' | 'underlined'"` (default `"normal"`) — same prop as
-`InputTextCore`. Only `normal` (bordered box, with hover/focus outline) and `underlined`
-(bottom-border only) have CSS today; `outlined` has no styling in `InputTextCore` either, so passing it renders with no border/outline at all — a
+`InputText`. Only `normal` (bordered box, with hover/focus outline) and `underlined`
+(bottom-border only) have CSS today; `outlined` has no styling in `InputText` either, so passing it renders with no border/outline at all — a
 pre-existing gap in the type, not something specific to `InputNumber`. Declared for prop-shape
 consistency with the rest of `05.forms`.
 

package/app/components/05.forms/input-number/InputNumber.vue

@@ -100,8 +100,8 @@ const inputmode = computed(() => {
 
     /* Public --input-number-* tokens, inline-fallback to the shared --theme-* tokens (see
      theming-component-token-pattern.md) — overriding one here doesn't touch every other themed
-     input/control that also reads --theme-input-surface/--theme-border. Mirrors InputTextCore's
-     token shape so a native number input and the text-based InputTextAsNumberWithLabel variant
+     input/control that also reads --theme-input-surface/--theme-border. Mirrors InputText's
+     token shape so a native number input and the text-based InputTextAsNumberField variant
      look and behave the same way (see input-number.md's "Fixed 2026-09-22" note). */
     --_surface: var(--input-number-surface, var(--theme-input-surface));
     --_border: var(--input-number-border, var(--theme-border));

package/app/components/05.forms/input-select/CONSUMER-STYLING.md

@@ -1,4 +1,7 @@
-# InputSelectCore — Consumer Styling Guide
+# InputSelect — Consumer Styling Guide
+
+> **Renamed 2026-10-16**: `InputSelectCore` → `InputSelect`, `InputSelectWithLabel` →
+> `InputSelectField`. Class changes are listed under "State hooks" below.
 
 ## Public token API
 
@@ -7,23 +10,73 @@ to override just this component; leave it unset and it inherits the shared `--th
 `--theme-*` token every other themed component also falls back to. See
 `theming-component-token-pattern.md` for why this two-tier shape exists.
 
-(Before 2026-08-25 this component used a private `--_input-select-*` naming scheme presented as a
-"local override path" — that's gone. A private, underscore-prefixed custom property was never a
-real override point; renaming it public with a real fallback is the actual fix, not a second
-documented path to reach for.)
+### Control
 
-| Token | Falls back to | Controls |
+| Token | Default | Controls |
 |---|---|---|
 | `--input-select-surface` | `var(--theme-input-surface)` | Wrapper/select background |
-| `--input-select-surface-hover` | `var(--theme-input-surface-hover)` | Option row background on hover |
-| `--input-select-border` | `var(--theme-border)` | Border colour (`.normal`/`.underlined`/open picker, resting) |
+| `--input-select-text-color` | `var(--theme-input-text-color-normal)` | Select text colour (added 2026-10-16; it inherited the page colour before) |
+| `--input-select-border` | `var(--theme-border)` | Border colour (`normal`/`underlined` variants and the open picker, resting) |
 | `--input-select-border-hover` | `var(--theme-border-focus)` | Outline colour on hover (mouse) |
-| `--input-select-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (keyboard/assistive) |
+| `--input-select-border-focus` | `var(--theme-border-focus)` | Outline colour on `:focus-visible` (keyboard/assistive), and the open picker's outline |
+
+### Options
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-select-surface-hover` | `var(--theme-input-surface-hover)` | Option row background on hover |
+| `--input-select-option-gap` | `1.5rem` | Gap between an option's icon and its label |
+| `--input-select-option-icon-size` | `1.5rem` | Option icon width and height |
 
 Geometry (`--input-padding-*`, `--input-min-height`, `--input-select-option-min-height`,
 `--form-element-*`, etc.) is shared across every `05.forms` component and untouched by this — see
 `theming-form-geometry-tokens.md`.
 
+Private (not public API): `--_border` and `--_border-focus`, each resolved once and read in several
+places.
+
+Option rows (`--input-select-surface-hover`, the gap and the icon) and the open picker's border are
+only styled where the browser supports `appearance: base-select`. Elsewhere the native dropdown
+shows and ignores them.
+
+---
+
+## State hooks
+
+| Attribute | On | When |
+|---|---|---|
+| `data-input-variant="normal" \| "outlined" \| "underlined"` | `.input-select-wrapper`, `.input-select-field` | Always, mirrors `input-variant` |
+| `data-theme` | `.input-select-wrapper`, `.input-select-field` | Always. The Field's own is the `theme` prop; the inner wrapper's switches to `error` while `field-has-error` is set |
+| `data-invalid` | `.input-select-wrapper`, `.input-select-field` | `field-has-error` |
+| `data-dirty` | `.input-select-wrapper` | The value has changed (the `is-dirty` model) |
+| `data-active` | `.input-select-wrapper` | The select has focus (the `is-active` model) |
+
+Inner elements: `.input-select` (the native select), `.input-select-option` (each option),
+`.input-select-option-placeholder` (the placeholder option), `.input-select-option-icon`,
+`.input-select-label` (the Field's `InputLabel`), `.input-text-description` (the Field's
+`InputDescription`, shared with the other Field components).
+
+`outlined` has no CSS of its own: the control renders with no border or outline. In the Field it
+moves the description after the control and error.
+
+> **Changed 2026-10-16**: state used to be bare classes, which collide with common consumer CSS
+> (an unlayered `.error` or `.normal` rule would restyle the field). Select on the attributes
+> above instead:
+>
+> - `.input-select-wrapper.normal` / `.underlined` / `.outlined` → `[data-input-variant="…"]`
+> - `.input-select-wrapper.dirty` / `.active` / `.error` → `[data-dirty]` / `[data-active]` /
+>   `[data-invalid]`
+> - `.input-select-core` → `.input-select`; `.input-select-core-option` → `.input-select-option`;
+>   `option.placeholder` → `.input-select-option-placeholder`;
+>   `.input-select-core-option-decorator-icon` → `.input-select-option-icon`
+> - `.input-select-with-label` → `.input-select-field`, which is now the root (it used to sit
+>   inside an unclassed `<div>`); its `.error`, variant, `dirty` and `active` classes are gone, use
+>   `[data-invalid]` / `[data-input-variant]`, or the inner wrapper's attributes
+> - the Field's default `data-testid` is `input-select-field` (was `input-select-with-label`)
+>
+> Also: long label, description and error copy now wraps (`overflow-wrap: anywhere` on
+> `.input-select-field`), and long option labels wrap in the open picker.
+
 ---
 
 ## Global theming
@@ -52,6 +105,23 @@ Set the tokens above on an element you own (a page or section class, or a class
 ### One instance
 
 ```vue
-<InputSelectCore id="country" name="country" style="--input-select-border-focus: var(--gold-04);" />
+<InputSelectField
+  v-model="country"
+  v-model:field-data="countries"
+  name="country"
+  label="Country"
+  :error-message="errors.country"
+  style="--input-select-border-focus: var(--gold-04);"
+/>
 ```
 
+---
+
+## Class passthrough
+
+`InputSelect`'s `:style-class-passthrough` lands on the native `<select class="input-select">`.
+`InputSelectField`'s lands on its root `.input-select-field` only.
+
+> **Changed 2026-10-16**: `InputSelectWithLabel` forwarded its passthrough classes to the inner
+> select instead of its own root. If you styled the select through the Field's passthrough, select
+> `.your-class .input-select` instead.

package/app/components/05.forms/input-select/InputSelect.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="input-select-wrapper"
+    :data-theme="theme"
+    :data-input-variant="inputVariant"
+    :data-invalid="fieldHasError ? '' : null"
+    :data-dirty="isDirty ? '' : null"
+    :data-active="isActive ? '' : null"
+  >
+    <select
+      :id
+      v-model="modelValue"
+      :aria-invalid="fieldHasError ? 'true' : undefined"
+      :class="['input-select', elementClasses]"
+      :name
+      :title
+      :required
+      :aria-describedby="ariaDescribedby || undefined"
+      @focusin="isActive = true"
+      @focusout="isActive = false"
+      @change="isDirty = true"
+    >
+      <option
+        v-if="placeholder"
+        value=""
+        disabled
+        :selected="isEmpty"
+        class="input-select-option input-select-option-placeholder"
+      >
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="item in fieldData.data"
+        :key="item.id"
+        :value="item.value"
+        :selected="String(item.value) === String(modelValue)"
+        class="input-select-option"
+      >
+        <Icon
+          v-if="item.icon"
+          :name="item.icon"
+          class="input-select-option-icon"
+          aria-hidden="true"
+          focusable="false"
+        />
+        {{ item.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IFormMultipleOptions, FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  id: string;
+  name: string;
+  placeholder?: string;
+  title?: string;
+  required?: boolean;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+  ariaDescribedby?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "",
+  title: "Please select an option",
+  required: false,
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+  ariaDescribedby: "",
+});
+
+const modelValue = defineModel<string | number | readonly number[]>({ required: true });
+const isDirty = defineModel<boolean>("isDirty");
+const isActive = defineModel<boolean>("isActive");
+const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
+
+const isEmpty = computed(() => modelValue.value === "" || modelValue.value == null);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-select-wrapper {
+    --_border: var(--input-select-border, var(--theme-border));
+    --_border-focus: var(--input-select-border-focus, var(--theme-border-focus));
+
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    background-color: var(--input-select-surface, var(--theme-input-surface));
+    overflow: hidden;
+
+    z-index: 2;
+    position: relative;
+    transition: all var(--theme-form-transition-duration) ease-in-out;
+
+    &[data-input-variant="normal"] {
+      border: var(--form-element-border-width) solid var(--_border);
+      border-radius: var(--form-input-border-radius);
+      outline: var(--form-element-outline-width) solid transparent;
+    }
+
+    &[data-input-variant="underlined"] {
+      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
+    }
+
+    &:has(:hover) {
+      outline: var(--form-element-outline-width-focus) solid
+        var(--input-select-border-hover, var(--theme-border-focus));
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    &:has(select:focus-visible) {
+      outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
+      outline-offset: var(--form-element-outline-offset-focus);
+    }
+
+    .input-select {
+      appearance: none;
+      background-color: transparent;
+      color: var(--input-select-text-color, var(--theme-input-text-color-normal));
+      display: flex;
+      align-items: center;
+
+      &,
+      &::picker(select) {
+        appearance: base-select;
+      }
+
+      &::picker(select) {
+        transition:
+          display allow-discrete var(--theme-form-transition-duration),
+          opacity var(--theme-form-transition-duration),
+          overlay var(--theme-form-transition-duration) allow-discrete;
+      }
+
+      &:not(:open)::picker(select) {
+        opacity: 0;
+      }
+
+      &:open::picker(select) {
+        opacity: 1;
+        border: var(--form-element-border-width) solid var(--_border);
+        outline: var(--form-element-outline-width) solid var(--_border-focus);
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+
+      border: none;
+      outline: none;
+      border-radius: 0;
+      width: 100%;
+      min-inline-size: 0;
+
+      font-family: var(--font-family);
+      font-size: var(--input-font-size);
+      padding-block: var(--input-padding-block);
+      padding-inline: var(--input-padding-inline);
+      min-height: var(--input-min-height);
+
+      .input-select-option {
+        min-height: var(--input-select-option-min-height);
+        gap: var(--input-select-option-gap, 1.5rem);
+        overflow-wrap: anywhere;
+        white-space: normal;
+        transition: all var(--theme-form-transition-duration) ease-in-out;
+
+        &:hover {
+          background-color: var(--input-select-surface-hover, var(--theme-input-surface-hover));
+        }
+
+        .input-select-option-icon {
+          display: inline-block;
+          flex-shrink: 0;
+          width: var(--input-select-option-icon-size, 1.5rem);
+          height: var(--input-select-option-icon-size, 1.5rem);
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/05.forms/input-select/InputSelectField.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    class="input-select-field"
+    :class="elementClasses"
+    :data-testid
+    :data-theme="theme"
+    :data-input-variant="inputVariant"
+    :data-invalid="fieldHasError ? '' : null"
+  >
+    <InputLabel
+      :id
+      :required
+      :input-variant
+      :field-has-error
+      :style-class-passthrough="['input-select-label']"
+    >
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
+    <InputDescription
+      v-if="inputVariant !== 'outlined'"
+      :description-id
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
+
+    <InputSelect
+      :id
+      v-model="modelValue"
+      v-model:field-data="fieldData"
+      v-model:is-dirty="isDirty"
+      v-model:is-active="isActive"
+      :name
+      :placeholder
+      :title
+      :field-has-error
+      :required
+      :theme="selectTheme"
+      :aria-describedby="ariaDescribedby()"
+      :input-variant
+    />
+
+    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="false" :input-variant />
+
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
+      :description-id
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant, IFormMultipleOptions } from "~/types/forms/types.forms";
+
+interface Props {
+  dataTestid?: string;
+  name: string;
+  label: string;
+  placeholder?: string;
+  title?: string;
+  errorMessage: object | string;
+  required?: boolean;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dataTestid: "input-select-field",
+  placeholder: "",
+  title: "Please select an option",
+  required: false,
+  fieldHasError: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+
+const selectTheme = computed(() => (props.fieldHasError ? "error" : props.theme));
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+const modelValue = defineModel<string | number | readonly number[]>({ required: true });
+const isDirty = defineModel<boolean>("isDirty");
+const isActive = defineModel<boolean>("isActive");
+const fieldData = defineModel<IFormMultipleOptions>("fieldData", { required: true });
+</script>
+
+<style lang="css">
+@layer components {
+  .input-select-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+}
+</style>

package/app/components/05.forms/input-select/stories/InputSelect.stories.ts

@@ -0,0 +1,184 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputSelect from "../InputSelect.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme, IFormMultipleOptions, IOptionsConfig, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: string | number;
+  id: string;
+  name: string;
+  placeholder: string;
+  title: string;
+  required: boolean;
+  fieldHasError: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  options: IOptionsConfig[];
+}
+
+const colourOptions: IOptionsConfig[] = [
+  { id: "1", name: "red", value: "red", label: "Red" },
+  { id: "2", name: "blue", value: "blue", label: "Blue" },
+  { id: "3", name: "green", value: "green", label: "Green" },
+];
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Select/InputSelect",
+  component: InputSelect,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    title: { control: "text", description: "Native tooltip; pass translated copy", table: { category: "Accessibility" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    fieldHasError: { control: "boolean", table: { category: "States" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    options: {
+      control: "object",
+      description: "Story-only: the `data` array of `v-model:field-data`",
+      table: { category: "Model" },
+    },
+  },
+  args: {
+    modelValue: "",
+    id: "select-default",
+    name: "selectDefault",
+    placeholder: "Choose a colour",
+    title: "Please select an option",
+    required: false,
+    fieldHasError: false,
+    theme: "default",
+    inputVariant: "normal",
+    options: colourOptions,
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Bare native `<select>` for the `05.forms` select family: no label, description or error (use `InputSelectField` for those). Options come from `v-model:field-data` (`{ data: IOptionsConfig[] }`), each with an optional decorative `icon`. `placeholder` adds a disabled first option. Where the browser supports `appearance: base-select` the open picker is styled too; elsewhere the native dropdown shows. State is exposed as `data-input-variant`, `data-invalid`, `data-dirty` and `data-active` on `.input-select-wrapper`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputSelect },
+  setup() {
+    const fieldData = computed<IFormMultipleOptions>(() => ({
+      data: args.options,
+      total: args.options.length,
+      skip: 0,
+      limit: args.options.length,
+    }));
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, options: _options, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs, fieldData };
+  },
+  template: `
+    <InputSelect v-model="args.modelValue" :field-data="fieldData" v-bind="componentArgs" />
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithIcons: Story = {
+  args: {
+    options: [
+      { id: "1", name: "email", value: "email", label: "Email", icon: "mdi:email-outline" },
+      { id: "2", name: "phone", value: "phone", label: "Phone", icon: "mdi:phone-outline" },
+      { id: "3", name: "post", value: "post", label: "Post", icon: "mdi:mailbox-outline" },
+    ],
+    placeholder: "Contact preference",
+  },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: "Options with an `icon`. The icon only shows in browsers that support `appearance: base-select`; the native dropdown shows the label alone.",
+      },
+    },
+  },
+};
+
+export const ErrorState: Story = { args: { fieldHasError: true, theme: "error" }, render };
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    modelValue: "0",
+    placeholder: "Bitte wählen Sie die gewünschte Zustellungsart für Ihre Bestellung aus der folgenden Liste aus",
+    title: "Bitteeineoptionauswählenundanschließendbestätigen",
+    fieldHasError: true,
+    theme: "error",
+    options: [
+      { id: "0", name: "zero", value: "0", label: "0 (falsy-looking value)" },
+      {
+        id: "1",
+        name: "long",
+        value: "long",
+        label: "Expresszustellungmitsendungsverfolgungundversicherungbiszueinemwarenwertvonzehntausendeuro",
+      },
+      { id: "2", name: "url", value: "url", label: "https://example.com/a/very/long/unbroken/url/that/never/wraps/anywhere" },
+      { id: "3", name: "emoji", value: "emoji", label: "🚚 Delivery 📦", icon: "mdi:truck-outline" },
+      { id: "4", name: "html", value: "html", label: "<b>not bold</b> <script>alert(1)</script>" },
+      { id: "5", name: "rtl", value: "rtl", label: "التوصيل السريع إلى باب المنزل" },
+      { id: "6", name: "one", value: "x", label: "x" },
+      { id: "7", name: "empty", value: "empty", label: "" },
+      ...Array.from({ length: 30 }, (_, index) => ({
+        id: `n${index}`,
+        name: `n${index}`,
+        value: `n${index}`,
+        label: `Option ${index + 1}`,
+      })),
+    ],
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "520px" },
+      description: {
+        story:
+          "38 options: a `0` value (selected on load, not the placeholder), long unbroken German and URL labels, emoji, HTML-like text (must render as text), right-to-left text, a single character and an empty label, plus a very long placeholder. Check at every canvas width: the closed select stays inside the dashed outline, and in a `base-select` browser the open picker's long labels wrap instead of running off screen. The empty label renders as a blank row; that's the data, not a bug.",
+      },
+    },
+  },
+};