@aleph-alpha/ui-library 1.12.0 → 1.14.0

package/src/primitives/UiField/UiField.stories.ts

@@ -1,1496 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite';
-import {
-  UiField,
-  UiFieldContent,
-  UiFieldDescription,
-  UiFieldError,
-  UiFieldGroup,
-  UiFieldLabel,
-  UiFieldLegend,
-  UiFieldSeparator,
-  UiFieldSet,
-  UiFieldTitle,
-} from '.';
-import { UiCheckbox } from '../UiCheckbox';
-import { UiInput } from '../UiInput';
-import { UiRadioGroup, UiRadioGroupItem } from '../UiRadioGroup';
-import {
-  UiSelect,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectTrigger,
-  UiSelectValue,
-} from '../UiSelect';
-import { UiSwitch } from '../UiSwitch';
-import { UiTextarea } from '../UiTextarea';
-import { UiButton } from '../UiButton';
-import { ref } from 'vue';
-
-/**
- * UiField composes label, description, and error messaging into a consistent form-field layout.
- * Use it to keep spacing, typography, and validation feedback consistent across inputs.
- *
- * @slot default - Content of the field (typically UiFieldLabel and UiFieldContent).
- */
-const meta: Meta<typeof UiField> = {
-  title: 'Primitives/UiField',
-  component: UiField,
-  tags: ['autodocs'],
-  argTypes: {
-    orientation: {
-      control: 'select',
-      options: ['vertical', 'horizontal', 'responsive'],
-      description:
-        'Layout orientation of the field. Use `responsive` to switch layout based on viewport size.',
-    },
-  },
-  args: {
-    orientation: 'vertical',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof UiField>;
-
-const defaultTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldDescription,
-  UiFieldError,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-const errors = ref<string[]>([])
-</script>
-
-<template>
-  <UiField>
-    <UiFieldLabel for="email">Email</UiFieldLabel>
-    <UiFieldContent>
-      <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
-      <UiFieldDescription>We'll never share your email.</UiFieldDescription>
-      <UiFieldError :errors="errors" />
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Basic field composition (label + input + description + error slot).
- * Use this as the default pattern for a single input with optional helper text and validation.
- */
-export const Default: Story = {
-  render: (args) => ({
-    components: {
-      UiField,
-      UiFieldContent,
-      UiFieldDescription,
-      UiFieldError,
-      UiFieldLabel,
-      UiInput,
-    },
-    setup() {
-      const value = ref('');
-      const errors = ref<string[]>([]);
-      return { args, value, errors };
-    },
-    template: `
-      <UiField :orientation="args.orientation">
-        <UiFieldLabel for="email">Email</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
-          <UiFieldDescription>We'll never share your email.</UiFieldDescription>
-          <UiFieldError :errors="errors" />
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    docs: { source: { code: defaultTemplateSource } },
-  },
-};
-
-const withErrorTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldError,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-const errors = ref(['Email is required'])
-</script>
-
-<template>
-  <UiField>
-    <UiFieldLabel for="email">Email</UiFieldLabel>
-    <UiFieldContent>
-      <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
-      <UiFieldError :errors="errors" />
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Field with a validation error.
- * Use this to show how errors are rendered under the input (e.g., form validation failures).
- */
-export const WithError: Story = {
-  render: () => ({
-    components: {
-      UiField,
-      UiFieldContent,
-      UiFieldError,
-      UiFieldLabel,
-      UiInput,
-    },
-    setup() {
-      const value = ref('');
-      const errors = ref(['Email is required']);
-      return { value, errors };
-    },
-    template: `
-      <UiField>
-        <UiFieldLabel for="email">Email</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="email" v-model="value" name="email" placeholder="name@company.com" />
-          <UiFieldError :errors="errors" />
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: withErrorTemplateSource } },
-  },
-};
-
-const groupTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldGroup,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldDescription,
-  UiFieldSeparator,
-  UiFieldSet,
-  UiFieldTitle,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const firstName = ref('')
-const lastName = ref('')
-</script>
-
-<template>
-  <UiFieldGroup>
-    <UiFieldSet>
-      <UiFieldTitle>Profile</UiFieldTitle>
-      <UiFieldDescription>Update your personal information.</UiFieldDescription>
-      <UiFieldSeparator />
-      <UiField>
-        <UiFieldLabel for="firstName">First name</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="firstName" v-model="firstName" name="firstName" />
-        </UiFieldContent>
-      </UiField>
-      <UiField>
-        <UiFieldLabel for="lastName">Last name</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="lastName" v-model="lastName" name="lastName" />
-        </UiFieldContent>
-      </UiField>
-    </UiFieldSet>
-  </UiFieldGroup>
-</template>`;
-
-/**
- * Grouped fields using fieldset semantics (title/description/separator + multiple fields).
- * Use this to present related inputs as a single section (e.g., profile or billing details).
- */
-export const Group: Story = {
-  render: () => ({
-    components: {
-      UiField,
-      UiFieldContent,
-      UiFieldDescription,
-      UiFieldGroup,
-      UiFieldLabel,
-      UiFieldSeparator,
-      UiFieldSet,
-      UiFieldTitle,
-      UiInput,
-    },
-    setup() {
-      const firstName = ref('');
-      const lastName = ref('');
-      return { firstName, lastName };
-    },
-    template: `
-      <UiFieldGroup>
-        <UiFieldSet>
-          <UiFieldTitle>Profile</UiFieldTitle>
-          <UiFieldDescription>Update your personal information.</UiFieldDescription>
-          <UiFieldSeparator />
-          <UiField>
-            <UiFieldLabel for="firstName">First name</UiFieldLabel>
-            <UiFieldContent>
-              <UiInput id="firstName" v-model="firstName" name="firstName" />
-            </UiFieldContent>
-          </UiField>
-          <UiField>
-            <UiFieldLabel for="lastName">Last name</UiFieldLabel>
-            <UiFieldContent>
-              <UiInput id="lastName" v-model="lastName" name="lastName" />
-            </UiFieldContent>
-          </UiField>
-        </UiFieldSet>
-      </UiFieldGroup>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: groupTemplateSource } },
-  },
-};
-
-const horizontalOrientationTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldDescription,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-</script>
-
-<template>
-  <UiField orientation="horizontal">
-    <UiFieldLabel for="username">Username</UiFieldLabel>
-    <UiFieldContent>
-      <UiInput id="username" v-model="value" name="username" placeholder="shadcn" />
-      <UiFieldDescription>This will be visible to other users.</UiFieldDescription>
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Field with horizontal layout.
- * Useful when you want labels aligned on the left and controls on the right.
- */
-export const HorizontalOrientation: Story = {
-  args: { orientation: 'horizontal' },
-  render: (args) => ({
-    components: {
-      UiField,
-      UiFieldContent,
-      UiFieldDescription,
-      UiFieldLabel,
-      UiInput,
-    },
-    setup() {
-      const value = ref('');
-      return { args, value };
-    },
-    template: `
-      <UiField :orientation="args.orientation">
-        <UiFieldLabel for="username">Username</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="username" v-model="value" name="username" placeholder="shadcn" />
-          <UiFieldDescription>This will be visible to other users.</UiFieldDescription>
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    docs: { source: { code: horizontalOrientationTemplateSource } },
-  },
-};
-
-const responsiveOrientationTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldDescription,
-  UiFieldGroup,
-  UiFieldSet,
-  UiFieldTitle,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-</script>
-
-<template>
-  <div class="max-w-xl">
-    <UiFieldGroup>
-      <UiFieldSet>
-        <UiFieldTitle>Account</UiFieldTitle>
-        <UiField orientation="responsive">
-          <UiFieldLabel for="displayName">Display name</UiFieldLabel>
-          <UiFieldContent>
-            <UiInput id="displayName" v-model="value" name="displayName" placeholder="Jane Doe" />
-            <UiFieldDescription>Shown on your profile.</UiFieldDescription>
-          </UiFieldContent>
-        </UiField>
-      </UiFieldSet>
-    </UiFieldGroup>
-  </div>
-</template>`;
-
-/**
- * Responsive orientation switches layout based on the field-group container query.
- * Wrap in `UiFieldGroup` to enable the container query used by the field styles.
- */
-export const ResponsiveOrientation: Story = {
-  render: () => ({
-    components: {
-      UiField,
-      UiFieldContent,
-      UiFieldDescription,
-      UiFieldGroup,
-      UiFieldLabel,
-      UiFieldSet,
-      UiFieldTitle,
-      UiInput,
-    },
-    setup() {
-      const value = ref('');
-      return { value };
-    },
-    template: `
-      <div class="max-w-xl">
-        <UiFieldGroup>
-          <UiFieldSet>
-            <UiFieldTitle>Account</UiFieldTitle>
-            <UiField orientation="responsive">
-              <UiFieldLabel for="displayName">Display name</UiFieldLabel>
-              <UiFieldContent>
-                <UiInput id="displayName" v-model="value" name="displayName" placeholder="Jane Doe" />
-                <UiFieldDescription>Shown on your profile.</UiFieldDescription>
-              </UiFieldContent>
-            </UiField>
-          </UiFieldSet>
-        </UiFieldGroup>
-      </div>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: responsiveOrientationTemplateSource } },
-  },
-};
-
-const multipleErrorsTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldError,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('bad-email')
-const errors = ref([
-  'Must be a valid email address',
-  { message: 'Domain is not allowed' },
-  'Must be a valid email address',
-])
-</script>
-
-<template>
-  <UiField data-invalid="true">
-    <UiFieldLabel for="email">Email</UiFieldLabel>
-    <UiFieldContent>
-      <UiInput id="email" v-model="value" name="email" />
-      <UiFieldError :errors="errors" />
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Field with multiple validation errors.
- * `UiFieldError` deduplicates identical messages and renders a list when there is more than one.
- */
-export const WithMultipleErrors: Story = {
-  render: () => ({
-    components: { UiField, UiFieldContent, UiFieldError, UiFieldLabel, UiInput },
-    setup() {
-      const value = ref('bad-email');
-      const errors = ref([
-        'Must be a valid email address',
-        { message: 'Domain is not allowed' },
-        'Must be a valid email address',
-      ]);
-      return { value, errors };
-    },
-    template: `
-      <UiField data-invalid="true">
-        <UiFieldLabel for="email-multi">Email</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="email-multi" v-model="value" name="email" />
-          <UiFieldError :errors="errors" />
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: multipleErrorsTemplateSource } },
-  },
-};
-
-const customErrorSlotTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldError,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-const errors = ref(['Email is required'])
-</script>
-
-<template>
-  <UiField data-invalid="true">
-    <UiFieldLabel for="email-custom">Email</UiFieldLabel>
-    <UiFieldContent>
-      <UiInput id="email-custom" v-model="value" name="email" />
-      <UiFieldError :errors="errors">
-        <span class="font-medium">Please provide a valid email.</span>
-      </UiFieldError>
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Custom error rendering using the `UiFieldError` slot.
- * Slot content takes precedence over the `errors` prop.
- */
-export const CustomErrorSlot: Story = {
-  render: () => ({
-    components: { UiField, UiFieldContent, UiFieldError, UiFieldLabel, UiInput },
-    setup() {
-      const value = ref('');
-      const errors = ref(['Email is required']);
-      return { value, errors };
-    },
-    template: `
-      <UiField data-invalid="true">
-        <UiFieldLabel for="email-custom">Email</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="email-custom" v-model="value" name="email" />
-          <UiFieldError :errors="errors">
-            <span class="font-medium">Please provide a valid email.</span>
-          </UiFieldError>
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: customErrorSlotTemplateSource } },
-  },
-};
-
-const textareaFieldTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldDescription,
-  UiTextarea,
-} from '@aleph-alpha/ui-library'
-
-const bio = ref('')
-</script>
-
-<template>
-  <UiField>
-    <UiFieldLabel for="bio">Bio</UiFieldLabel>
-    <UiFieldContent>
-      <UiTextarea id="bio" v-model="bio" name="bio" placeholder="Tell us a little about yourself." />
-      <UiFieldDescription>You can write up to 160 characters.</UiFieldDescription>
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Field with a textarea control.
- */
-export const Textarea: Story = {
-  render: () => ({
-    components: { UiField, UiFieldContent, UiFieldDescription, UiFieldLabel, UiTextarea },
-    setup() {
-      const bio = ref('');
-      return { bio };
-    },
-    template: `
-      <UiField>
-        <UiFieldLabel for="bio">Bio</UiFieldLabel>
-        <UiFieldContent>
-          <UiTextarea id="bio" v-model="bio" name="bio" placeholder="Tell us a little about yourself." />
-          <UiFieldDescription>You can write up to 160 characters.</UiFieldDescription>
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: textareaFieldTemplateSource } },
-  },
-};
-
-const selectFieldTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldContent,
-  UiFieldDescription,
-  UiSelect,
-  UiSelectTrigger,
-  UiSelectValue,
-  UiSelectContent,
-  UiSelectItem,
-} from '@aleph-alpha/ui-library'
-
-const value = ref('')
-</script>
-
-<template>
-  <UiField>
-    <UiFieldLabel for="fruit">Favorite fruit</UiFieldLabel>
-    <UiFieldContent>
-      <UiSelect v-model="value">
-        <UiSelectTrigger id="fruit">
-          <UiSelectValue placeholder="Select a fruit" />
-        </UiSelectTrigger>
-        <UiSelectContent>
-          <UiSelectItem value="apple">Apple</UiSelectItem>
-          <UiSelectItem value="banana">Banana</UiSelectItem>
-          <UiSelectItem value="orange">Orange</UiSelectItem>
-        </UiSelectContent>
-      </UiSelect>
-      <UiFieldDescription>This is used to personalize suggestions.</UiFieldDescription>
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Field composed with `UiSelect`.
- */
-export const Select: Story = {
-  render: () => ({
-    components: {
-      UiField,
-      UiFieldContent,
-      UiFieldDescription,
-      UiFieldLabel,
-      UiSelect,
-      UiSelectContent,
-      UiSelectItem,
-      UiSelectTrigger,
-      UiSelectValue,
-    },
-    setup() {
-      const value = ref('');
-      return { value };
-    },
-    template: `
-      <UiField>
-        <UiFieldLabel for="fruit">Favorite fruit</UiFieldLabel>
-        <UiFieldContent>
-          <UiSelect v-model="value">
-            <UiSelectTrigger id="fruit">
-              <UiSelectValue placeholder="Select a fruit" />
-            </UiSelectTrigger>
-            <UiSelectContent>
-              <UiSelectItem value="apple">Apple</UiSelectItem>
-              <UiSelectItem value="banana">Banana</UiSelectItem>
-              <UiSelectItem value="orange">Orange</UiSelectItem>
-            </UiSelectContent>
-          </UiSelect>
-          <UiFieldDescription>This is used to personalize suggestions.</UiFieldDescription>
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: selectFieldTemplateSource } },
-  },
-};
-
-const checkboxFieldTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldContent,
-  UiFieldDescription,
-  UiFieldLabel,
-  UiCheckbox,
-} from '@aleph-alpha/ui-library'
-
-const enabled = ref(true)
-</script>
-
-<template>
-  <UiField orientation="horizontal">
-    <UiCheckbox id="notifications" v-model="enabled" name="notifications" />
-    <UiFieldContent>
-      <UiFieldLabel for="notifications">Enable notifications</UiFieldLabel>
-      <UiFieldDescription>You can change this setting at any time.</UiFieldDescription>
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Checkbox field layout (checkbox + text content).
- * The checkbox is a direct child of `UiField` so the horizontal styles can align it nicely.
- */
-export const Checkbox: Story = {
-  render: () => ({
-    components: { UiCheckbox, UiField, UiFieldContent, UiFieldDescription, UiFieldLabel },
-    setup() {
-      const enabled = ref(true);
-      return { enabled };
-    },
-    template: `
-      <UiField orientation="horizontal">
-        <UiCheckbox id="notifications" v-model="enabled" name="notifications" />
-        <UiFieldContent>
-          <UiFieldLabel for="notifications">Enable notifications</UiFieldLabel>
-          <UiFieldDescription>You can change this setting at any time.</UiFieldDescription>
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: checkboxFieldTemplateSource } },
-  },
-};
-
-const switchFieldTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldContent,
-  UiFieldDescription,
-  UiFieldLabel,
-  UiSwitch,
-} from '@aleph-alpha/ui-library'
-
-const enabled = ref(false)
-</script>
-
-<template>
-  <UiField orientation="horizontal">
-    <UiSwitch id="airplane" v-model="enabled" name="airplane" />
-    <UiFieldContent>
-      <UiFieldLabel for="airplane">Airplane mode</UiFieldLabel>
-      <UiFieldDescription>Disable all wireless connections.</UiFieldDescription>
-    </UiFieldContent>
-  </UiField>
-</template>`;
-
-/**
- * Switch field layout (switch + text content).
- */
-export const Switch: Story = {
-  render: () => ({
-    components: { UiField, UiFieldContent, UiFieldDescription, UiFieldLabel, UiSwitch },
-    setup() {
-      const enabled = ref(false);
-      return { enabled };
-    },
-    template: `
-      <UiField orientation="horizontal">
-        <UiSwitch id="airplane" v-model="enabled" name="airplane" />
-        <UiFieldContent>
-          <UiFieldLabel for="airplane">Airplane mode</UiFieldLabel>
-          <UiFieldDescription>Disable all wireless connections.</UiFieldDescription>
-        </UiFieldContent>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: switchFieldTemplateSource } },
-  },
-};
-
-const radioGroupFieldSetTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldContent,
-  UiFieldDescription,
-  UiFieldGroup,
-  UiFieldLegend,
-  UiFieldSet,
-  UiFieldTitle,
-  UiRadioGroup,
-  UiRadioGroupItem,
-} from '@aleph-alpha/ui-library'
-
-const plan = ref('pro')
-</script>
-
-<template>
-  <UiFieldGroup data-variant="outline" class="max-w-xl">
-    <UiFieldSet>
-      <UiFieldTitle>Plan</UiFieldTitle>
-      <UiFieldLegend variant="label">Choose your plan</UiFieldLegend>
-
-      <UiRadioGroup v-model="plan" name="plan">
-        <UiField orientation="horizontal">
-          <UiRadioGroupItem id="plan-free" value="free" />
-          <UiFieldContent>
-            <label for="plan-free" class="text-sm font-medium">Free</label>
-            <UiFieldDescription>Basic features for personal use.</UiFieldDescription>
-          </UiFieldContent>
-        </UiField>
-
-        <UiField orientation="horizontal">
-          <UiRadioGroupItem id="plan-pro" value="pro" />
-          <UiFieldContent>
-            <label for="plan-pro" class="text-sm font-medium">Pro</label>
-            <UiFieldDescription>Everything you need for work.</UiFieldDescription>
-          </UiFieldContent>
-        </UiField>
-
-        <UiField orientation="horizontal" data-disabled="true">
-          <UiRadioGroupItem id="plan-enterprise" value="enterprise" disabled />
-          <UiFieldContent>
-            <label for="plan-enterprise" class="text-sm font-medium text-muted-foreground">Enterprise</label>
-            <UiFieldDescription>Contact sales for pricing.</UiFieldDescription>
-          </UiFieldContent>
-        </UiField>
-      </UiRadioGroup>
-    </UiFieldSet>
-  </UiFieldGroup>
-</template>`;
-
-/**
- * Radio-group inside a fieldset, using `UiField` rows to align each option with its label/description.
- */
-export const RadioGroupInFieldSet: Story = {
-  render: () => ({
-    components: {
-      UiField,
-      UiFieldContent,
-      UiFieldDescription,
-      UiFieldGroup,
-      UiFieldLegend,
-      UiFieldSet,
-      UiFieldTitle,
-      UiRadioGroup,
-      UiRadioGroupItem,
-    },
-    setup() {
-      const plan = ref('pro');
-      return { plan };
-    },
-    template: `
-      <UiFieldGroup data-variant="outline" class="max-w-xl">
-        <UiFieldSet>
-          <UiFieldTitle>Plan</UiFieldTitle>
-          <UiFieldLegend variant="label">Choose your plan</UiFieldLegend>
-
-          <UiRadioGroup v-model="plan" name="plan">
-            <UiField orientation="horizontal">
-              <UiRadioGroupItem id="plan-free" value="free" />
-              <UiFieldContent>
-                <label for="plan-free" class="text-sm font-medium">Free</label>
-                <UiFieldDescription>Basic features for personal use.</UiFieldDescription>
-              </UiFieldContent>
-            </UiField>
-
-            <UiField orientation="horizontal">
-              <UiRadioGroupItem id="plan-pro" value="pro" />
-              <UiFieldContent>
-                <label for="plan-pro" class="text-sm font-medium">Pro</label>
-                <UiFieldDescription>Everything you need for work.</UiFieldDescription>
-              </UiFieldContent>
-            </UiField>
-
-            <UiField orientation="horizontal" data-disabled="true">
-              <UiRadioGroupItem id="plan-enterprise" value="enterprise" disabled />
-              <UiFieldContent>
-                <label for="plan-enterprise" class="text-sm font-medium text-muted-foreground">Enterprise</label>
-                <UiFieldDescription>Contact sales for pricing.</UiFieldDescription>
-              </UiFieldContent>
-            </UiField>
-          </UiRadioGroup>
-        </UiFieldSet>
-      </UiFieldGroup>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: radioGroupFieldSetTemplateSource } },
-  },
-};
-
-const separatorWithContentTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldContent,
-  UiFieldGroup,
-  UiFieldLabel,
-  UiFieldSeparator,
-  UiFieldSet,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const email = ref('')
-const phone = ref('')
-</script>
-
-<template>
-  <UiFieldGroup class="max-w-xl">
-    <UiFieldSet>
-      <UiField>
-        <UiFieldLabel for="email-2">Email</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="email-2" v-model="email" name="email" />
-        </UiFieldContent>
-      </UiField>
-
-      <UiFieldSeparator>or</UiFieldSeparator>
-
-      <UiField>
-        <UiFieldLabel for="phone">Phone</UiFieldLabel>
-        <UiFieldContent>
-          <UiInput id="phone" v-model="phone" name="phone" />
-        </UiFieldContent>
-      </UiField>
-    </UiFieldSet>
-  </UiFieldGroup>
-</template>`;
-
-/**
- * Separator with content (e.g., “or”) between related fields.
- */
-export const SeparatorWithContent: Story = {
-  render: () => ({
-    components: {
-      UiField,
-      UiFieldContent,
-      UiFieldGroup,
-      UiFieldLabel,
-      UiFieldSeparator,
-      UiFieldSet,
-      UiInput,
-    },
-    setup() {
-      const email = ref('');
-      const phone = ref('');
-      return { email, phone };
-    },
-    template: `
-      <UiFieldGroup class="max-w-xl">
-        <UiFieldSet>
-          <UiField>
-            <UiFieldLabel for="email-2">Email</UiFieldLabel>
-            <UiFieldContent>
-              <UiInput id="email-2" v-model="email" name="email" />
-            </UiFieldContent>
-          </UiField>
-
-          <UiFieldSeparator>or</UiFieldSeparator>
-
-          <UiField>
-            <UiFieldLabel for="phone">Phone</UiFieldLabel>
-            <UiFieldContent>
-              <UiInput id="phone" v-model="phone" name="phone" />
-            </UiFieldContent>
-          </UiField>
-        </UiFieldSet>
-      </UiFieldGroup>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: separatorWithContentTemplateSource } },
-  },
-};
-
-const validationAndErrorsTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiField,
-  UiFieldLabel,
-  UiFieldError,
-  UiInput,
-} from '@aleph-alpha/ui-library'
-
-const email = ref('not-an-email')
-</script>
-
-<template>
-  <UiField data-invalid>
-    <UiFieldLabel for="email-invalid">Email</UiFieldLabel>
-    <UiInput id="email-invalid" v-model="email" name="email" type="email" aria-invalid />
-    <UiFieldError>Enter a valid email address.</UiFieldError>
-  </UiField>
-</template>`;
-
-/**
- * Validation styling + a11y: apply `data-invalid` to the field and `aria-invalid` to the control.
- * Mirrors the “Validation and Errors” section from shadcn-vue field docs.
- */
-export const ValidationAndErrors: Story = {
-  render: () => ({
-    components: { UiField, UiFieldError, UiFieldLabel, UiInput },
-    setup() {
-      const email = ref('not-an-email');
-      return { email };
-    },
-    template: `
-      <UiField data-invalid>
-        <UiFieldLabel for="email-invalid">Email</UiFieldLabel>
-        <UiInput id="email-invalid" v-model="email" name="email" type="email" aria-invalid />
-        <UiFieldError>Enter a valid email address.</UiFieldError>
-      </UiField>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: validationAndErrorsTemplateSource } },
-  },
-};
-
-const checkboxGroupTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiCheckbox,
-  UiField,
-  UiFieldDescription,
-  UiFieldGroup,
-  UiFieldLabel,
-  UiFieldLegend,
-  UiFieldSet,
-} from '@aleph-alpha/ui-library'
-
-const push = ref(true)
-const email = ref(false)
-</script>
-
-<template>
-  <div class="max-w-xl">
-    <UiFieldSet>
-      <UiFieldLegend variant="legend">Tasks</UiFieldLegend>
-      <UiFieldDescription>
-        Get notified when tasks you've created have updates.
-        <a href="#">Manage tasks</a>
-      </UiFieldDescription>
-
-      <UiFieldGroup data-slot="checkbox-group">
-        <UiField orientation="horizontal">
-          <UiCheckbox id="push-tasks" v-model="push" name="push-tasks" />
-          <UiFieldLabel for="push-tasks" class="font-normal">
-            Push notifications
-          </UiFieldLabel>
-        </UiField>
-
-        <UiField orientation="horizontal">
-          <UiCheckbox id="email-tasks" v-model="email" name="email-tasks" />
-          <UiFieldLabel for="email-tasks" class="font-normal">
-            Email notifications
-          </UiFieldLabel>
-        </UiField>
-      </UiFieldGroup>
-    </UiFieldSet>
-  </div>
-</template>`;
-
-/**
- * Checkbox-group fieldset.
- * Mirrors the “Anatomy” example patterns from shadcn-vue field docs (`data-slot="checkbox-group"` for spacing).
- */
-export const CheckboxGroup: Story = {
-  render: () => ({
-    components: {
-      UiCheckbox,
-      UiField,
-      UiFieldDescription,
-      UiFieldGroup,
-      UiFieldLabel,
-      UiFieldLegend,
-      UiFieldSet,
-    },
-    setup() {
-      const push = ref(true);
-      const email = ref(false);
-      return { push, email };
-    },
-    template: `
-      <div class="max-w-xl">
-        <UiFieldSet>
-          <UiFieldLegend variant="legend">Tasks</UiFieldLegend>
-          <UiFieldDescription>
-            Get notified when tasks you've created have updates.
-            <a href="#">Manage tasks</a>
-          </UiFieldDescription>
-
-          <UiFieldGroup data-slot="checkbox-group">
-            <UiField orientation="horizontal">
-              <UiCheckbox id="push-tasks" v-model="push" name="push-tasks" />
-              <UiFieldLabel for="push-tasks" class="font-normal">
-                Push notifications
-              </UiFieldLabel>
-            </UiField>
-
-            <UiField orientation="horizontal">
-              <UiCheckbox id="email-tasks" v-model="email" name="email-tasks" />
-              <UiFieldLabel for="email-tasks" class="font-normal">
-                Email notifications
-              </UiFieldLabel>
-            </UiField>
-          </UiFieldGroup>
-        </UiFieldSet>
-      </div>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: checkboxGroupTemplateSource } },
-  },
-};
-
-const responsiveProfileFormTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiButton,
-  UiField,
-  UiFieldContent,
-  UiFieldDescription,
-  UiFieldGroup,
-  UiFieldLabel,
-  UiFieldLegend,
-  UiFieldSeparator,
-  UiFieldSet,
-  UiInput,
-  UiTextarea,
-} from '@aleph-alpha/ui-library'
-
-const name = ref('')
-const message = ref('')
-</script>
-
-<template>
-  <div class="w-full max-w-4xl">
-    <form>
-      <UiFieldSet>
-        <UiFieldLegend>Profile</UiFieldLegend>
-        <UiFieldDescription>Fill in your profile information.</UiFieldDescription>
-        <UiFieldSeparator />
-        <UiFieldGroup>
-          <UiField orientation="responsive">
-            <UiFieldContent>
-              <UiFieldLabel for="profile-name">Name</UiFieldLabel>
-              <UiFieldDescription>Provide your full name for identification</UiFieldDescription>
-            </UiFieldContent>
-            <UiInput id="profile-name" v-model="name" name="name" placeholder="Evil Rabbit" required />
-          </UiField>
-          <UiFieldSeparator />
-          <UiField orientation="responsive">
-            <UiFieldContent>
-              <UiFieldLabel for="profile-message">Message</UiFieldLabel>
-              <UiFieldDescription>
-                You can write your message here. Keep it short, preferably under 100 characters.
-              </UiFieldDescription>
-            </UiFieldContent>
-            <UiTextarea
-              id="profile-message"
-              v-model="message"
-              name="message"
-              placeholder="Hello, world!"
-              required
-              class="min-h-[100px] resize-none sm:min-w-[300px]"
-            />
-          </UiField>
-          <UiFieldSeparator />
-          <UiField orientation="responsive">
-            <UiButton type="submit">Submit</UiButton>
-            <UiButton type="button" variant="outline">Cancel</UiButton>
-          </UiField>
-        </UiFieldGroup>
-      </UiFieldSet>
-    </form>
-  </div>
-</template>`;
-
-/**
- * Full responsive form layout, mirroring the “Responsive Layout” example from shadcn-vue field docs.
- * Uses `UiFieldContent` as the label/description column and keeps controls aligned responsively.
- */
-export const ResponsiveProfileForm: Story = {
-  render: () => ({
-    components: {
-      UiButton,
-      UiField,
-      UiFieldContent,
-      UiFieldDescription,
-      UiFieldGroup,
-      UiFieldLabel,
-      UiFieldLegend,
-      UiFieldSeparator,
-      UiFieldSet,
-      UiInput,
-      UiTextarea,
-    },
-    setup() {
-      const name = ref('');
-      const message = ref('');
-      return { name, message };
-    },
-    template: `
-      <div class="w-full max-w-4xl">
-        <form>
-          <UiFieldSet>
-            <UiFieldLegend>Profile</UiFieldLegend>
-            <UiFieldDescription>Fill in your profile information.</UiFieldDescription>
-            <UiFieldSeparator />
-            <UiFieldGroup>
-              <UiField orientation="responsive">
-                <UiFieldContent>
-                  <UiFieldLabel for="profile-name">Name</UiFieldLabel>
-                  <UiFieldDescription>Provide your full name for identification</UiFieldDescription>
-                </UiFieldContent>
-                <UiInput id="profile-name" v-model="name" name="name" placeholder="Evil Rabbit" required />
-              </UiField>
-              <UiFieldSeparator />
-              <UiField orientation="responsive">
-                <UiFieldContent>
-                  <UiFieldLabel for="profile-message">Message</UiFieldLabel>
-                  <UiFieldDescription>
-                    You can write your message here. Keep it short, preferably under 100 characters.
-                  </UiFieldDescription>
-                </UiFieldContent>
-                <UiTextarea
-                  id="profile-message"
-                  v-model="message"
-                  name="message"
-                  placeholder="Hello, world!"
-                  required
-                  class="min-h-[100px] resize-none sm:min-w-[300px]"
-                />
-              </UiField>
-              <UiFieldSeparator />
-              <UiField orientation="responsive">
-                <UiButton type="submit">Submit</UiButton>
-                <UiButton type="button" variant="outline">Cancel</UiButton>
-              </UiField>
-            </UiFieldGroup>
-          </UiFieldSet>
-        </form>
-      </div>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: responsiveProfileFormTemplateSource } },
-  },
-};
-
-const checkoutPaymentFormTemplateSource = `<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  UiButton,
-  UiCheckbox,
-  UiField,
-  UiFieldDescription,
-  UiFieldGroup,
-  UiFieldLabel,
-  UiFieldLegend,
-  UiFieldSeparator,
-  UiFieldSet,
-  UiInput,
-  UiSelect,
-  UiSelectContent,
-  UiSelectItem,
-  UiSelectTrigger,
-  UiSelectValue,
-  UiTextarea,
-} from '@aleph-alpha/ui-library'
-
-const cardName = ref('')
-const cardNumber = ref('')
-const cvv = ref('')
-const month = ref('')
-const year = ref('')
-const sameAsShipping = ref(true)
-const comments = ref('')
-</script>
-
-<template>
-  <div class="w-full max-w-md">
-    <form>
-      <UiFieldGroup>
-        <UiFieldSet>
-          <UiFieldLegend>Payment Method</UiFieldLegend>
-          <UiFieldDescription>All transactions are secure and encrypted</UiFieldDescription>
-
-          <UiFieldGroup>
-            <UiField>
-              <UiFieldLabel for="card-name">Name on Card</UiFieldLabel>
-              <UiInput id="card-name" v-model="cardName" name="cardName" placeholder="Evil Rabbit" required />
-            </UiField>
-
-            <UiField>
-              <UiFieldLabel for="card-number">Card Number</UiFieldLabel>
-              <UiInput id="card-number" v-model="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456" required />
-              <UiFieldDescription>Enter your 16-digit card number</UiFieldDescription>
-            </UiField>
-
-            <div class="grid grid-cols-3 gap-4">
-              <UiField>
-                <UiFieldLabel for="exp-month">Month</UiFieldLabel>
-                <UiSelect v-model="month">
-                  <UiSelectTrigger id="exp-month">
-                    <UiSelectValue placeholder="MM" />
-                  </UiSelectTrigger>
-                  <UiSelectContent>
-                    <UiSelectItem value="01">01</UiSelectItem>
-                    <UiSelectItem value="02">02</UiSelectItem>
-                    <UiSelectItem value="03">03</UiSelectItem>
-                    <UiSelectItem value="04">04</UiSelectItem>
-                    <UiSelectItem value="05">05</UiSelectItem>
-                    <UiSelectItem value="06">06</UiSelectItem>
-                    <UiSelectItem value="07">07</UiSelectItem>
-                    <UiSelectItem value="08">08</UiSelectItem>
-                    <UiSelectItem value="09">09</UiSelectItem>
-                    <UiSelectItem value="10">10</UiSelectItem>
-                    <UiSelectItem value="11">11</UiSelectItem>
-                    <UiSelectItem value="12">12</UiSelectItem>
-                  </UiSelectContent>
-                </UiSelect>
-              </UiField>
-
-              <UiField>
-                <UiFieldLabel for="exp-year">Year</UiFieldLabel>
-                <UiSelect v-model="year">
-                  <UiSelectTrigger id="exp-year">
-                    <UiSelectValue placeholder="YYYY" />
-                  </UiSelectTrigger>
-                  <UiSelectContent>
-                    <UiSelectItem value="2026">2026</UiSelectItem>
-                    <UiSelectItem value="2027">2027</UiSelectItem>
-                    <UiSelectItem value="2028">2028</UiSelectItem>
-                    <UiSelectItem value="2029">2029</UiSelectItem>
-                    <UiSelectItem value="2030">2030</UiSelectItem>
-                  </UiSelectContent>
-                </UiSelect>
-              </UiField>
-
-              <UiField>
-                <UiFieldLabel for="cvv">CVV</UiFieldLabel>
-                <UiInput id="cvv" v-model="cvv" name="cvv" placeholder="123" required />
-              </UiField>
-            </div>
-          </UiFieldGroup>
-        </UiFieldSet>
-
-        <UiFieldSeparator />
-
-        <UiFieldSet>
-          <UiFieldLegend>Billing Address</UiFieldLegend>
-          <UiFieldDescription>The billing address associated with your payment method</UiFieldDescription>
-          <UiFieldGroup>
-            <UiField orientation="horizontal">
-              <UiCheckbox id="same-as-shipping" v-model="sameAsShipping" name="same-as-shipping" />
-              <UiFieldLabel for="same-as-shipping" class="font-normal">Same as shipping address</UiFieldLabel>
-            </UiField>
-          </UiFieldGroup>
-        </UiFieldSet>
-
-        <UiFieldSet>
-          <UiFieldGroup>
-            <UiField>
-              <UiFieldLabel for="comments">Comments</UiFieldLabel>
-              <UiTextarea
-                id="comments"
-                v-model="comments"
-                name="comments"
-                placeholder="Add any additional comments"
-                class="resize-none"
-              />
-            </UiField>
-          </UiFieldGroup>
-        </UiFieldSet>
-
-        <UiField orientation="horizontal">
-          <UiButton type="submit">Submit</UiButton>
-          <UiButton variant="outline" type="button">Cancel</UiButton>
-        </UiField>
-      </UiFieldGroup>
-    </form>
-  </div>
-</template>`;
-
-/**
- * Full “checkout” composition (payment method + billing address + actions).
- * Based on the main example in shadcn-vue field docs.
- */
-export const CheckoutPaymentForm: Story = {
-  render: () => ({
-    components: {
-      UiButton,
-      UiCheckbox,
-      UiField,
-      UiFieldDescription,
-      UiFieldGroup,
-      UiFieldLabel,
-      UiFieldLegend,
-      UiFieldSeparator,
-      UiFieldSet,
-      UiInput,
-      UiSelect,
-      UiSelectContent,
-      UiSelectItem,
-      UiSelectTrigger,
-      UiSelectValue,
-      UiTextarea,
-    },
-    setup() {
-      const cardName = ref('');
-      const cardNumber = ref('');
-      const cvv = ref('');
-      const month = ref('');
-      const year = ref('');
-      const sameAsShipping = ref(true);
-      const comments = ref('');
-      return { cardName, cardNumber, cvv, month, year, sameAsShipping, comments };
-    },
-    template: `
-      <div class="w-full max-w-md">
-        <form>
-          <UiFieldGroup>
-            <UiFieldSet>
-              <UiFieldLegend>Payment Method</UiFieldLegend>
-              <UiFieldDescription>All transactions are secure and encrypted</UiFieldDescription>
-
-              <UiFieldGroup>
-                <UiField>
-                  <UiFieldLabel for="card-name">Name on Card</UiFieldLabel>
-                  <UiInput id="card-name" v-model="cardName" name="cardName" placeholder="Evil Rabbit" required />
-                </UiField>
-
-                <UiField>
-                  <UiFieldLabel for="card-number">Card Number</UiFieldLabel>
-                  <UiInput id="card-number" v-model="cardNumber" name="cardNumber" placeholder="1234 5678 9012 3456" required />
-                  <UiFieldDescription>Enter your 16-digit card number</UiFieldDescription>
-                </UiField>
-
-                <div class="grid grid-cols-3 gap-4">
-                  <UiField>
-                    <UiFieldLabel for="exp-month">Month</UiFieldLabel>
-                    <UiSelect v-model="month">
-                      <UiSelectTrigger id="exp-month">
-                        <UiSelectValue placeholder="MM" />
-                      </UiSelectTrigger>
-                      <UiSelectContent>
-                        <UiSelectItem value="01">01</UiSelectItem>
-                        <UiSelectItem value="02">02</UiSelectItem>
-                        <UiSelectItem value="03">03</UiSelectItem>
-                        <UiSelectItem value="04">04</UiSelectItem>
-                        <UiSelectItem value="05">05</UiSelectItem>
-                        <UiSelectItem value="06">06</UiSelectItem>
-                        <UiSelectItem value="07">07</UiSelectItem>
-                        <UiSelectItem value="08">08</UiSelectItem>
-                        <UiSelectItem value="09">09</UiSelectItem>
-                        <UiSelectItem value="10">10</UiSelectItem>
-                        <UiSelectItem value="11">11</UiSelectItem>
-                        <UiSelectItem value="12">12</UiSelectItem>
-                      </UiSelectContent>
-                    </UiSelect>
-                  </UiField>
-
-                  <UiField>
-                    <UiFieldLabel for="exp-year">Year</UiFieldLabel>
-                    <UiSelect v-model="year">
-                      <UiSelectTrigger id="exp-year">
-                        <UiSelectValue placeholder="YYYY" />
-                      </UiSelectTrigger>
-                      <UiSelectContent>
-                        <UiSelectItem value="2026">2026</UiSelectItem>
-                        <UiSelectItem value="2027">2027</UiSelectItem>
-                        <UiSelectItem value="2028">2028</UiSelectItem>
-                        <UiSelectItem value="2029">2029</UiSelectItem>
-                        <UiSelectItem value="2030">2030</UiSelectItem>
-                      </UiSelectContent>
-                    </UiSelect>
-                  </UiField>
-
-                  <UiField>
-                    <UiFieldLabel for="cvv">CVV</UiFieldLabel>
-                    <UiInput id="cvv" v-model="cvv" name="cvv" placeholder="123" required />
-                  </UiField>
-                </div>
-              </UiFieldGroup>
-            </UiFieldSet>
-
-            <UiFieldSeparator />
-
-            <UiFieldSet>
-              <UiFieldLegend>Billing Address</UiFieldLegend>
-              <UiFieldDescription>The billing address associated with your payment method</UiFieldDescription>
-              <UiFieldGroup>
-                <UiField orientation="horizontal">
-                  <UiCheckbox id="same-as-shipping" v-model="sameAsShipping" name="same-as-shipping" />
-                  <UiFieldLabel for="same-as-shipping" class="font-normal">Same as shipping address</UiFieldLabel>
-                </UiField>
-              </UiFieldGroup>
-            </UiFieldSet>
-
-            <UiFieldSet>
-              <UiFieldGroup>
-                <UiField>
-                  <UiFieldLabel for="comments">Comments</UiFieldLabel>
-                  <UiTextarea
-                    id="comments"
-                    v-model="comments"
-                    name="comments"
-                    placeholder="Add any additional comments"
-                    class="resize-none"
-                  />
-                </UiField>
-              </UiFieldGroup>
-            </UiFieldSet>
-
-            <UiField orientation="horizontal">
-              <UiButton type="submit">Submit</UiButton>
-              <UiButton variant="outline" type="button">Cancel</UiButton>
-            </UiField>
-          </UiFieldGroup>
-        </form>
-      </div>
-    `,
-  }),
-  parameters: {
-    controls: { disable: true },
-    docs: { source: { code: checkoutPaymentFormTemplateSource } },
-  },
-};