@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/organisms/ComboboxPanel/ComboboxPanel.test.ts

@@ -0,0 +1,524 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick } from 'vue'
+import ComboboxPanel from './ComboboxPanel.vue'
+import type { NexxtComboboxGroup } from './combobox-types'
+
+const stubs = {
+  NexxtIcon: { template: '<span :data-name="name" />', props: ['name'] },
+}
+
+const STRING_OPTIONS = ['Amsterdam', 'Rotterdam', 'Utrecht', 'Den Haag']
+const OBJECT_OPTIONS = [
+  { label: 'Amsterdam', value: 'AMS' },
+  { label: 'Rotterdam', value: 'RTM' },
+  { label: 'Utrecht', value: 'UTC' },
+]
+
+const mountPanel = (props = {}, modelValue: (string | number)[] = []) =>
+  mount(ComboboxPanel, {
+    props: {
+      options: STRING_OPTIONS,
+      'onUpdate:modelValue': (v: (string | number)[]) => wrapper.setProps({ modelValue: v }),
+      modelValue,
+      ...props,
+    },
+    global: { stubs },
+    attachTo: document.body,
+  })
+
+let wrapper: ReturnType<typeof mountPanel>
+
+describe('ComboboxPanel', () => {
+  describe('rendering', () => {
+    it('renders the search input', () => {
+      wrapper = mountPanel()
+      expect(wrapper.find('input').exists()).toBe(true)
+    })
+
+    // Same attribute set as before groups existed: nothing internal may leak onto an option
+    it.each([true, false])(
+      'renders options with only role, aria-selected and class (floating: %s)',
+      async (floating) => {
+        wrapper = mountPanel({ floating, singleSelect: true }, ['Amsterdam'])
+        if (floating) await wrapper.find('input').trigger('focus')
+        const options = wrapper.findAll('[role="option"]')
+        expect(options).toHaveLength(STRING_OPTIONS.length)
+        for (const option of options) {
+          expect(option.element.getAttributeNames().sort()).toEqual([
+            'aria-selected',
+            'class',
+            'role',
+          ])
+        }
+      },
+    )
+
+    it('renders all options', () => {
+      wrapper = mountPanel()
+      expect(wrapper.findAll('[role="option"]')).toHaveLength(STRING_OPTIONS.length)
+    })
+
+    it('renders object options using their label', () => {
+      wrapper = mountPanel({ options: OBJECT_OPTIONS })
+      expect(wrapper.text()).toContain('Amsterdam')
+      expect(wrapper.text()).toContain('Rotterdam')
+    })
+
+    it('uses a custom placeholder', () => {
+      wrapper = mountPanel({ placeholder: 'Type here...' })
+      expect(wrapper.find('input').attributes('placeholder')).toBe('Type here...')
+    })
+  })
+
+  describe('search / filtering', () => {
+    it('filters options based on search input', async () => {
+      wrapper = mountPanel()
+      await wrapper.find('input').setValue('Amst')
+      await nextTick()
+      const options = wrapper.findAll('[role="option"]')
+      expect(options).toHaveLength(1)
+      expect(options[0].text()).toContain('Amsterdam')
+    })
+
+    it('shows all options when search is cleared', async () => {
+      wrapper = mountPanel()
+      await wrapper.find('input').setValue('dam')
+      await wrapper.find('input').setValue('')
+      await nextTick()
+      expect(wrapper.findAll('[role="option"]')).toHaveLength(STRING_OPTIONS.length)
+    })
+
+    it('is case-insensitive', async () => {
+      wrapper = mountPanel()
+      await wrapper.find('input').setValue('AMSTERDAM')
+      await nextTick()
+      expect(wrapper.findAll('[role="option"]')).toHaveLength(1)
+    })
+  })
+
+  describe('selecting options', () => {
+    it('emits modelValue when an option is clicked', async () => {
+      wrapper = mountPanel()
+      await wrapper.find('[role="option"]').trigger('click')
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['Amsterdam']])
+    })
+
+    it('removes a selected option from the list', async () => {
+      wrapper = mountPanel({}, ['Amsterdam'])
+      const options = wrapper.findAll('[role="option"]')
+      expect(options.map((o) => o.text())).not.toContain('Amsterdam')
+    })
+
+    it('clears search after selecting an option', async () => {
+      wrapper = mountPanel()
+      await wrapper.find('input').setValue('dam')
+      await wrapper.find('[role="option"]').trigger('click')
+      await nextTick()
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('')
+    })
+  })
+
+  // Both in one host, so one app: an array default shared between instances would show here.
+  it('keeps the selection of an uncontrolled instance to itself', async () => {
+    const host = mount(
+      defineComponent({
+        components: { ComboboxPanel },
+        setup: () => ({ options: STRING_OPTIONS }),
+        template:
+          '<div><ComboboxPanel :options="options" /><ComboboxPanel :options="options" /></div>',
+      }),
+      { global: { stubs }, attachTo: document.body },
+    )
+    const [first, second] = host.findAllComponents(ComboboxPanel)
+
+    await first.find('[role="option"]').trigger('click')
+
+    expect(first.emitted('update:modelValue')).toEqual([[['Amsterdam']]])
+    expect(first.findAll('[role="option"]').map((o) => o.text())).not.toContain('Amsterdam')
+    expect(second.emitted('update:modelValue')).toBeUndefined()
+    expect(second.findAll('[role="option"]')).toHaveLength(STRING_OPTIONS.length)
+    host.unmount()
+  })
+
+  describe('chip removal', () => {
+    it('shows chips for selected values', async () => {
+      wrapper = mountPanel({}, ['Amsterdam', 'Rotterdam'])
+      expect(wrapper.text()).toContain('Amsterdam')
+      expect(wrapper.text()).toContain('Rotterdam')
+    })
+
+    it('removes a value when its chip is clicked', async () => {
+      wrapper = mountPanel({}, ['Amsterdam', 'Rotterdam'])
+      await wrapper.find('button[aria-label]').trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      const lastEmit = emitted![emitted!.length - 1][0] as (string | number)[]
+      expect(lastEmit).not.toContain('Amsterdam')
+    })
+
+    it('chip buttons have descriptive aria-labels', () => {
+      wrapper = mountPanel({}, ['Amsterdam'])
+      expect(wrapper.find('button[aria-label]').attributes('aria-label')).toContain('Amsterdam')
+    })
+  })
+
+  describe('allowNew', () => {
+    it('shows add hint when search has no matching options', async () => {
+      wrapper = mountPanel({ allowNew: true })
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(true)
+    })
+
+    it('does not show add hint when allowNew is false', async () => {
+      wrapper = mountPanel()
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(false)
+    })
+
+    it('does not show add hint when search matches an existing option label', async () => {
+      wrapper = mountPanel({ allowNew: true })
+      await wrapper.find('input').setValue('Amsterdam')
+      await nextTick()
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(false)
+    })
+
+    it('does not show add hint when search matches a custom item already added', async () => {
+      wrapper = mountPanel({ allowNew: true })
+      await wrapper.find('input').setValue('Groningen')
+      await wrapper.find('[data-name="plus"]').trigger('click')
+      await nextTick()
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      expect(wrapper.find('[data-name="plus"]').exists()).toBe(false)
+    })
+
+    it('adds a new custom item when clicking the add hint', async () => {
+      wrapper = mountPanel({ allowNew: true })
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      await wrapper.find('[data-name="plus"]').trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![emitted!.length - 1][0] as string[]).includes('Groningen')).toBe(true)
+    })
+
+    it('does not add the same custom item twice via Enter', async () => {
+      wrapper = mountPanel({ allowNew: true })
+      await wrapper.find('input').setValue('Groningen')
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      await wrapper.setProps({ modelValue: ['Groningen'] })
+      await wrapper.find('input').setValue('Groningen')
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      const emitted = wrapper.emitted('update:modelValue')
+      const lastEmit = emitted![emitted!.length - 1][0] as string[]
+      expect(lastEmit.filter((v) => v === 'Groningen')).toHaveLength(1)
+    })
+  })
+
+  describe('enter key behaviour', () => {
+    it('selects the single remaining option on Enter', async () => {
+      wrapper = mountPanel()
+      await wrapper.find('input').setValue('Amst')
+      await nextTick()
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![0][0] as string[]).includes('Amsterdam')).toBe(true)
+    })
+
+    it('adds new item on Enter when no options match', async () => {
+      wrapper = mountPanel({ allowNew: true })
+      await wrapper.find('input').setValue('Groningen')
+      await nextTick()
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![0][0] as string[]).includes('Groningen')).toBe(true)
+    })
+  })
+
+  describe('expose', () => {
+    it('exposes a focus() method', () => {
+      wrapper = mountPanel()
+      expect(typeof (wrapper.vm as unknown as { focus: () => void }).focus).toBe('function')
+    })
+  })
+
+  describe('showChips', () => {
+    it('shows chips by default', () => {
+      wrapper = mountPanel({}, ['Amsterdam'])
+      expect(wrapper.find('button[aria-label]').exists()).toBe(true)
+    })
+
+    it('hides chips when showChips is false', () => {
+      wrapper = mountPanel({ showChips: false }, ['Amsterdam'])
+      expect(wrapper.find('button[aria-label]').exists()).toBe(false)
+    })
+
+    it('hides chips by default when singleSelect is true', () => {
+      wrapper = mountPanel({ singleSelect: true }, ['Amsterdam'])
+      expect(wrapper.find('button[aria-label]').exists()).toBe(false)
+    })
+  })
+
+  describe('grouped options', () => {
+    const GROUPS: NexxtComboboxGroup[] = [
+      { label: 'Noord', options: ['Groningen', 'Leeuwarden'] },
+      {
+        label: 'Randstad',
+        options: [
+          { label: 'Amsterdam', value: 'AMS' },
+          { label: 'Rotterdam', value: 'RTM' },
+        ],
+      },
+    ]
+
+    // `floating` has to be passed explicitly: Vue casts an absent boolean prop to `false`
+    const mountGrouped = async (floating: boolean, props = {}, modelValue: string[] = []) => {
+      wrapper = mountPanel({ options: GROUPS, floating, ...props }, modelValue)
+      if (floating) await wrapper.find('input').trigger('focus')
+      return wrapper
+    }
+
+    const optionTexts = () => wrapper.findAll('[role="option"]').map((o) => o.text())
+    const groupNames = () =>
+      wrapper.findAll('[role="group"]').map((group) => {
+        const heading = document.getElementById(group.attributes('aria-labelledby')!)
+        return heading?.textContent
+      })
+
+    describe.each([true, false])('floating: %s', (floating) => {
+      it('renders each group inside the listbox, named by its heading', async () => {
+        await mountGrouped(floating)
+        const groups = wrapper.findAll('[role="listbox"] [role="group"]')
+        expect(groups).toHaveLength(2)
+        expect(groupNames()).toEqual(['Noord', 'Randstad'])
+        expect(groups[1].findAll('[role="option"]').map((o) => o.text())).toEqual([
+          'Amsterdam',
+          'Rotterdam',
+        ])
+      })
+
+      it('indents grouped options past their heading, and leaves flat options as they were', async () => {
+        await mountGrouped(floating)
+        const heading = wrapper.find('[role="group"] > [role="presentation"]')
+        expect(heading.classes()).toContain('px-6')
+        for (const option of wrapper.findAll('[role="option"]')) {
+          expect(option.classes()).toEqual(expect.arrayContaining(['pl-9', 'pr-6']))
+          expect(option.classes()).not.toContain('px-6')
+        }
+
+        wrapper = mountPanel({ options: STRING_OPTIONS, floating })
+        if (floating) await wrapper.find('input').trigger('focus')
+        for (const option of wrapper.findAll('[role="option"]')) {
+          expect(option.classes()).toContain('px-6')
+          expect(option.classes()).not.toContain('pl-9')
+        }
+      })
+
+      it('renders the heading as presentation, not as an option', async () => {
+        await mountGrouped(floating)
+        const heading = wrapper.find('[role="group"] > [role="presentation"]')
+        expect(heading.text()).toBe('Noord')
+        expect(optionTexts()).not.toContain('Noord')
+      })
+
+      it('filters within groups and drops a group without matches, heading included', async () => {
+        await mountGrouped(floating)
+        await wrapper.find('input').setValue('dam')
+        expect(groupNames()).toEqual(['Randstad'])
+        expect(optionTexts()).toEqual(['Amsterdam', 'Rotterdam'])
+        expect(wrapper.text()).not.toContain('Noord')
+      })
+
+      it('matches on the option label, not on the group label', async () => {
+        await mountGrouped(floating)
+        await wrapper.find('input').setValue('Randstad')
+        expect(optionTexts()).toEqual([])
+      })
+
+      it('shows the same empty state as flat options when nothing matches', async () => {
+        // Floating: the whole suggestion card is gone. Inline: an empty listbox stays
+        const listbox = () => {
+          const found = wrapper.find('[role="listbox"]')
+          return found.exists() ? found.html() : null
+        }
+        await mountGrouped(floating)
+        await wrapper.find('input').setValue('Zwolle')
+        const grouped = listbox()
+
+        wrapper = mountPanel({ options: ['Groningen'], floating })
+        if (floating) await wrapper.find('input').trigger('focus')
+        await wrapper.find('input').setValue('Zwolle')
+        expect(grouped).toBe(listbox())
+        expect(wrapper.find('[role="option"]').exists()).toBe(false)
+      })
+    })
+
+    it('gives every group a heading id unique to its component instance', () => {
+      // useId is unique per app, so both panels have to live in the same one
+      const host = mount(
+        {
+          components: { ComboboxPanel },
+          setup: () => ({ GROUPS }),
+          template: `
+            <ComboboxPanel :options="GROUPS" :floating="false" />
+            <ComboboxPanel :options="GROUPS" :floating="false" />
+          `,
+        },
+        { global: { stubs } },
+      )
+      const ids = host.findAll('[role="group"]').map((group) => group.attributes('aria-labelledby'))
+      expect(ids).toHaveLength(4)
+      expect(new Set(ids).size).toBe(4)
+    })
+
+    it('keeps the heading id while searching', async () => {
+      await mountGrouped(false)
+      const before = wrapper.findAll('[role="group"]')[1].attributes('aria-labelledby')
+      await wrapper.find('input').setValue('dam')
+      expect(wrapper.find('[role="group"]').attributes('aria-labelledby')).toBe(before)
+    })
+
+    it('shows the label of a selected object option from a group on its chip', async () => {
+      await mountGrouped(false, {}, ['AMS'])
+      expect(wrapper.find('button[aria-label]').attributes('aria-label')).toBe(
+        'Verwijder Amsterdam',
+      )
+    })
+
+    it('removes a selected option from its group in multi-select', async () => {
+      await mountGrouped(false, {}, ['Groningen'])
+      expect(optionTexts()).toEqual(['Leeuwarden', 'Amsterdam', 'Rotterdam'])
+    })
+
+    describe('singleSelect', () => {
+      it('selects on click and emits select', async () => {
+        await mountGrouped(false, { singleSelect: true })
+        const rotterdam = wrapper.findAll('[role="option"]').find((o) => o.text() === 'Rotterdam')!
+        await rotterdam.trigger('click')
+        expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([['RTM']])
+        expect(wrapper.emitted('select')).toHaveLength(1)
+      })
+
+      it('selects the first visible option across groups on Enter', async () => {
+        await mountGrouped(true, { singleSelect: true })
+        // The first group has no match, so the first visible option sits in the second group
+        await wrapper.find('input').setValue('rot')
+        await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+        expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([['RTM']])
+        expect(wrapper.emitted('select')).toHaveLength(1)
+      })
+
+      it('selects the first option of the first group on Enter without a search', async () => {
+        await mountGrouped(false, { singleSelect: true })
+        await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+        expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([['Groningen']])
+      })
+
+      it('marks the selected option inside its group', async () => {
+        await mountGrouped(false, { singleSelect: true }, ['AMS'])
+        const amsterdam = wrapper.findAll('[role="option"]').find((o) => o.text() === 'Amsterdam')!
+        expect(amsterdam.attributes('aria-selected')).toBe('true')
+        expect(amsterdam.find('[data-name="check"]').exists()).toBe(true)
+      })
+    })
+
+    // Type-level: vue-tsc fails on an unused @ts-expect-error, and the valid twin pins the
+    // error on allowNew rather than on the groups themselves
+    it('does not accept allowNew together with groups', () => {
+      type PanelProps = InstanceType<typeof ComboboxPanel>['$props']
+      const valid: PanelProps = { options: GROUPS, allowNew: undefined }
+      // @ts-expect-error -- groups have no room for free-text entries
+      const invalid: PanelProps = { options: GROUPS, allowNew: true }
+      expect([valid.options, invalid.options]).toEqual([GROUPS, GROUPS])
+    })
+  })
+
+  describe('singleSelect', () => {
+    it('keeps selected options visible in the list', () => {
+      wrapper = mountPanel({ singleSelect: true }, ['Amsterdam'])
+      expect(wrapper.findAll('[role="option"]').map((o) => o.text())).toContain('Amsterdam')
+    })
+
+    it('replaces the selection when a different option is clicked', async () => {
+      wrapper = mountPanel({ singleSelect: true }, ['Amsterdam'])
+      const rotterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Rotterdam'))!
+      await rotterdam.trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      const last = emitted![emitted!.length - 1][0] as (string | number)[]
+      expect(last).toEqual(['Rotterdam'])
+    })
+
+    it('deselects when the selected option is clicked again', async () => {
+      wrapper = mountPanel({ singleSelect: true }, ['Amsterdam'])
+      const amsterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Amsterdam'))!
+      await amsterdam.trigger('click')
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      const last = emitted![emitted!.length - 1][0] as (string | number)[]
+      expect(last).toHaveLength(0)
+    })
+
+    it('shows a check icon on the selected option', () => {
+      wrapper = mountPanel({ singleSelect: true }, ['Amsterdam'])
+      const amsterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Amsterdam'))!
+      expect(amsterdam.find('[data-name="check"]').exists()).toBe(true)
+    })
+
+    it('does not show a check icon on unselected options', () => {
+      wrapper = mountPanel({ singleSelect: true }, ['Amsterdam'])
+      const rotterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Rotterdam'))!
+      expect(rotterdam.find('[data-name="check"]').exists()).toBe(false)
+    })
+
+    it('applies selected highlight class to the active option', () => {
+      wrapper = mountPanel({ singleSelect: true }, ['Amsterdam'])
+      const amsterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Amsterdam'))!
+      expect(amsterdam.classes()).toContain('text-cornflower-blue-600')
+    })
+
+    it('sets aria-selected="true" on the selected option', () => {
+      wrapper = mountPanel({ singleSelect: true }, ['Amsterdam'])
+      const amsterdam = wrapper
+        .findAll('[role="option"]')
+        .find((o) => o.text().includes('Amsterdam'))!
+      expect(amsterdam.attributes('aria-selected')).toBe('true')
+    })
+
+    it('emits select event after picking an option', async () => {
+      wrapper = mountPanel({ singleSelect: true })
+      await wrapper.find('[role="option"]').trigger('click')
+      expect(wrapper.emitted('select')).toBeTruthy()
+    })
+
+    it('selects the first matching option on Enter', async () => {
+      wrapper = mountPanel({ singleSelect: true })
+      await wrapper.find('input').setValue('Amst')
+      await nextTick()
+      await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+      await nextTick()
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted).toBeTruthy()
+      expect((emitted![0][0] as string[]).includes('Amsterdam')).toBe(true)
+    })
+  })
+})

package/src/components/organisms/ComboboxPanel/ComboboxPanel.vue

@@ -22,7 +22,7 @@ const { icon = 'tag', placeholder = 'Zoeken...', floating = true } = props
 
 const emit = defineEmits<{ select: [] }>()
 
-const selected = defineModel<(string | number)[]>({ default: [] })
+const selected = defineModel<(string | number)[]>({ default: () => [] })
 
 const inputFieldRef = useTemplateRef<InstanceType<typeof NexxtInputField>>('inputFieldRef')
 const wrapperRef = useTemplateRef('wrapperRef')

package/src/components/organisms/CountrySelect/CountrySelect.stories.ts

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, within } from 'storybook/test'
+import NexxtCountrySelect from './CountrySelect.vue'
+
+export default {
+  title: 'Components/Organisms/CountrySelect',
+  component: NexxtCountrySelect,
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 350px; padding: 16px; display: flex; justify-content: center;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof NexxtCountrySelect>
+
+type Story = StoryObj<typeof NexxtCountrySelect>
+
+const render = (args: Story['args']) => ({
+  components: { NexxtCountrySelect },
+  setup() {
+    return { args }
+  },
+  template: `
+    <NexxtCountrySelect
+      v-bind="args"
+      :modelValue="args.modelValue"
+      @update:modelValue="args.modelValue = $event"
+    />
+  `,
+})
+
+export const Default: Story = {
+  render,
+  args: {
+    modelValue: null,
+  },
+}
+
+export const WithLabel: Story = {
+  render,
+  args: {
+    label: 'Land',
+    modelValue: null,
+  },
+}
+
+export const WithValue: Story = {
+  render,
+  args: {
+    label: 'Land',
+    modelValue: 'Nederland',
+  },
+}
+
+export const Required: Story = {
+  render,
+  args: {
+    label: 'Land',
+    required: true,
+    modelValue: null,
+  },
+}
+
+export const WithPinnedCountries: Story = {
+  render,
+  args: {
+    label: 'Land',
+    pinnedCountries: ['nl', 'be', 'de'],
+    modelValue: null,
+  },
+}
+
+export const Error: Story = {
+  render,
+  args: {
+    label: 'Land',
+    error: true,
+    errorMessage: 'Selecteer een land',
+    modelValue: null,
+  },
+}
+
+/**
+ * Narrow fields. Without a width of its own the select is 240px wide, also
+ * inside a shrink-to-fit wrapper (`w-fit`, or `absolute` without a width), but
+ * never wider than its container: in a 200px column it is 200px, with or
+ * without `w-full`. A width class of your own (`w-48`) just works; no `min-w-0`
+ * needed. A country name that does not fit is cut off with an ellipsis, and the chevron
+ * stays inside the ring.
+ */
+export const Narrow: Story = {
+  render: (args) => ({
+    components: { NexxtCountrySelect },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="position: relative; display: flex; flex-direction: column; gap: 24px; padding-bottom: 64px;">
+        <NexxtCountrySelect v-bind="args" class="w-60" />
+        <NexxtCountrySelect v-bind="args" class="w-48" />
+        <div style="width: 200px;">
+          <NexxtCountrySelect v-bind="args" class="w-full" />
+        </div>
+        <div style="width: 200px;">
+          <NexxtCountrySelect v-bind="args" />
+        </div>
+        <div class="w-fit">
+          <NexxtCountrySelect v-bind="args" />
+        </div>
+        <div style="position: absolute; bottom: 0; left: 0;">
+          <NexxtCountrySelect v-bind="args" />
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    modelValue: 'Saint Vincent en de Grenadines',
+  },
+  play: async ({ canvasElement }) => {
+    // In render order. The field has no accessible name to select by (its
+    // <label> cannot label a div).
+    const triggers = within(canvasElement).getAllByRole('combobox')
+    const expected = [240, 192, 200, 200, 240, 240]
+
+    for (const [index, trigger] of triggers.entries()) {
+      const width = expected[index]
+      // offsetWidth, not the rect: the test canvas is zoomed.
+      await expect(trigger.offsetWidth).toBe(width)
+
+      const chevron = trigger.lastElementChild as HTMLElement
+      const ring = trigger.getBoundingClientRect()
+      await expect(chevron.getBoundingClientRect().right).toBeLessThanOrEqual(ring.right)
+
+      const text = within(trigger).getByText('Saint Vincent en de Grenadines')
+      await expect(text.scrollWidth).toBeGreaterThan(text.clientWidth)
+      await expect(getComputedStyle(text).textOverflow).toBe('ellipsis')
+    }
+  },
+}