srcdev-nuxt-components 9.6.13 → 9.6.15

package/.claude/skills/testing-add-unit-test.md

@@ -396,6 +396,31 @@ afterEach(() => {
 The `as unknown as Record<string, unknown>` double-cast is required because TypeScript's
 `HTMLElement` type has no index signature — cast through `unknown` first.
 
+## A mount helper that keeps `v-model` in sync
+
+To test a `v-model` component through clicks and keys, feed `update:modelValue` back into the
+props. The handler needs the wrapper it's creating, so hold it in a `const` object: a self-referencing
+`const wrapper` is an implicit `any` under strict mode, and `let wrapper` assigned once fails
+ESLint's `prefer-const`.
+
+```ts
+const mountToggle = async (props: Record<string, unknown> = {}) => {
+  const holder: { current?: Awaited<ReturnType<typeof mountSuspended>> } = {};
+  const onUpdate = (value: string | number) => {
+    void holder.current?.setProps({ modelValue: value });
+  };
+  const wrapper = await mountSuspended(SlidingToggle, {
+    props: { modelValue: "monthly", "onUpdate:modelValue": onUpdate, ...props },
+  });
+  holder.current = wrapper;
+  mounted.push(wrapper);
+  return wrapper;
+};
+```
+
+Type the handler's `value` as the model's full type (`string | number` for a generic model), not
+the narrower one a test happens to use.
+
 ## Describe section conventions
 
 Use these section names consistently so tests are easy to scan:

package/.claude/skills/theming-component-token-pattern.md

@@ -129,6 +129,24 @@ Prefer this over a prop: line count is presentation, and CSS handles it without
   layout around it.
 - Document it in `CONSUMER-STYLING.md` with its default and the `1`/`none` options.
 
+## Corner shape tokens
+
+`corner-shape` (CSS Borders 4: `squircle`, `superellipse(n)`, `bevel`, `scoop`, `notch`, default
+`round`) reshapes the curve that `border-radius` draws. Give a component that wants it one public
+token, `--<component>-corner-shape`, defaulting to `round`, and read it on every element that has a
+radius so they stay in step:
+
+```css
+.sliding-toggle,
+.sliding-toggle-option {
+  corner-shape: var(--sliding-toggle-corner-shape, round);
+}
+```
+
+It's a progressive enhancement (Chromium 139+ when added on 2026-10-19): other browsers drop the
+declaration and keep the `border-radius` corners, so never rely on it for layout or meaning. Label
+it as Chromium-only in `CONSUMER-STYLING.md`. `SlidingToggle` is the first user.
+
 ## Text over an image: scrim tokens
 
 Any component that puts text over a photo (a header in a picture, a card title on its image) gets

package/.vscode/srcdev-component-display-qr-code.code-snippets

@@ -15,8 +15,19 @@
       "  aria-label=\"$2\"",
       "  black-color=\"${3:currentColor}\"",
       "  :radius=\"${4:0.5}\"",
-      "  :variant=\"{ inner: '${5|default,circle,rounded,dots,classy,classy-rounded|}', marker: '${6|default,circle,rounded,dots,classy,classy-rounded|}', pixel: '${7|default,circle,rounded,dots,classy,classy-rounded|}' }\"",
+      "  :variant=\"{ inner: '${5|default,circle,rounded,dots,pixelated|}', marker: '${6|default,circle,rounded,dots,pixelated|}', pixel: '${7|default,circle,rounded,dots,pixelated|}' }\"",
       "/>"
     ]
+  },
+  "SRCDEV DisplayQrCode Fallback": {
+    "description": "DisplayQrCode with a fallback for values too long to encode",
+    "scope": "vue,html",
+    "body": [
+      "<DisplayQrCode :qr-value=\"${1:url}\" aria-label=\"${2:QR code}\" @error=\"${3:onQrError}\">",
+      "  <template #fallback>",
+      "    $0",
+      "  </template>",
+      "</DisplayQrCode>"
+    ]
   }
 }

package/.vscode/srcdev-component-hero-text.code-snippets

@@ -4,11 +4,27 @@
     "scope": "vue,html",
     "body": [
       "<HeroText",
-      "  tag=\"$1h1\"",
-      "  fontSize=\"$2title\"",
-      "  :textContent=\"[",
-      "    { text: '$3Designing', styleClass: 'normal' },",
-      "    { text: '$4Artistry', styleClass: 'accent' },",
+      "  tag=\"${1|h1,h2,h3,h4,h5,h6|}\"",
+      "  font-size=\"${2|title,display,heading,subheading,label|}\"",
+      "  :text-content=\"[",
+      "    { text: '${3:Designing}', styleClass: 'normal' },",
+      "    { text: '${4:Artistry}', styleClass: 'accent' },",
+      "  ]\"",
+      "/>"
+    ]
+  },
+  "SRCDEV HeroText Vertical With Icon": {
+    "description": "HeroText stacked vertically with a decorative icon",
+    "scope": "vue,html",
+    "body": [
+      "<HeroText",
+      "  tag=\"${1|h2,h1,h3,h4,h5,h6|}\"",
+      "  axis=\"vertical\"",
+      "  icon=\"${2:lucide:sparkles}\"",
+      "  font-size=\"${3|display,title,heading,subheading,label|}\"",
+      "  :text-content=\"[",
+      "    { text: '${4:Modern}', styleClass: 'normal' },",
+      "    { text: '${5:Living}', styleClass: 'accent' },",
       "  ]\"",
       "/>"
     ]

package/.vscode/srcdev-component-link-text.code-snippets

@@ -19,11 +19,11 @@
     "description": "CSS override scaffold for LinkText tokens",
     "scope": "css",
     "body": [
-      ".$1my-page {",
+      ".${1:my-page} {",
       "  --link-text-colour: $2;",
       "  --link-text-colour-hover: $3;",
-      "  --link-text-decoration: $4underline;",
-      "  --link-text-decoration-hover: $5none;",
+      "  --link-text-decoration: ${4:underline};",
+      "  --link-text-decoration-hover: ${5:none};",
       "}"
     ]
   }

package/.vscode/srcdev-component-pop-over.code-snippets

@@ -40,5 +40,33 @@
       "  </template>",
       "</PopOver>"
     ]
+  },
+  "SRCDEV PopOver Localised Close": {
+    "description": "PopOver with a localised close label and a custom close icon",
+    "scope": "vue,html",
+    "body": [
+      "<PopOver close-button-aria-label=\"${1:Close}\" close-icon=\"${2:lucide:x}\">",
+      "  <template #trigger>",
+      "    <span>$3</span>",
+      "  </template>",
+      "  <template #content>",
+      "    <p>$0</p>",
+      "  </template>",
+      "</PopOver>"
+    ]
+  },
+  "SRCDEV PopOver CSS Overrides": {
+    "description": "Unlayered CSS override scaffold for PopOver public tokens",
+    "scope": "css,vue",
+    "body": [
+      ".${1:my-section} {",
+      "  --pop-over-width: ${2:30rem};",
+      "  --pop-over-gap: ${3:1rem};",
+      "  --pop-over-background-colour: ${4:var(--slate-00)};",
+      "  --pop-over-text-colour: ${5:var(--slate-09)};",
+      "  --pop-over-border-colour: ${6:var(--slate-02)};",
+      "  --pop-over-content-padding: ${7:1.6rem};$0",
+      "}"
+    ]
   }
 }

package/.vscode/srcdev-component-sliding-toggle.code-snippets

@@ -0,0 +1,37 @@
+{
+  "SRCDEV SlidingToggle": {
+    "description": "SlidingToggle — single-choice segmented radiogroup with a sliding indicator",
+    "scope": "vue,html",
+    "body": [
+      "<SlidingToggle",
+      "  v-model=\"${1:selected}\"",
+      "  :options=\"[",
+      "    { value: '${2:monthly}', label: '${3:Monthly}' },",
+      "    { value: '${4:yearly}', label: '${5:Yearly}' },",
+      "  ]\"",
+      "  aria-label=\"${6:Billing period}\"",
+      "/>"
+    ]
+  },
+  "SRCDEV SlidingToggle Options Variable": {
+    "description": "SlidingToggle bound to an options array, without hover tracking",
+    "scope": "vue,html",
+    "body": [
+      "<SlidingToggle v-model=\"${1:selected}\" :options=\"${2:options}\" aria-label=\"${3:Label}\"${4: :track-hover=\"false\"} />"
+    ]
+  },
+  "SRCDEV SlidingToggle CSS Override": {
+    "description": "Unlayered CSS override scaffold for SlidingToggle tokens",
+    "scope": "css,vue",
+    "body": [
+      ".${1:my-section} {",
+      "  --sliding-toggle-surface: ${2:var(--theme-surface-subtle)};",
+      "  --sliding-toggle-indicator-surface: ${3:var(--theme-on-surface)};",
+      "  --sliding-toggle-marker-colour: ${4:var(--theme-accent)};",
+      "  --sliding-toggle-option-flex: ${5|0 1 auto,1 1 0|};",
+      "  --sliding-toggle-corner-shape: ${6|round,squircle,superellipse(3),bevel,scoop,notch|};",
+      "  --sliding-toggle-indicator-stretch: ${7|1,0|};$0",
+      "}"
+    ]
+  }
+}

package/.vscode/srcdev-component-tabbed-content.code-snippets

@@ -58,7 +58,7 @@
       "    --tabs-underline-indicator-height: ;",
       "    --tabs-hover-underline-indicator-colour: ;",
       "    --tabs-hover-underline-indicator-height: ;",
-      "    --tabs-hover-indicator-stretch: ;",
+      "    --tabs-indicator-stretch: ;",
       "    --tabs-list-item-opacity: ;",
       "    --tabs-list-item-colour: ;",
       "    --tabs-list-item-colour-selected: ;",

package/app/components/01.atoms/pop-over/CONSUMER-STYLING.md

@@ -7,7 +7,8 @@
 | `--pop-over-gap` | `1rem` | Space between the trigger and the popover panel |
 | `--pop-over-trigger-outline-width` | `0.1rem` | Trigger focus outline width |
 | `--pop-over-trigger-outline-colour-hover` | `var(--theme-ring)` | Trigger outline colour on focus-visible |
-| `--pop-over-width` | `30rem` | Popover panel width |
+| `--pop-over-width` | `30rem` | Popover panel width, capped at the viewport width minus `3.2rem` |
+| `--pop-over-max-block-size` | `calc(100dvh - 3.2rem)` | Popover panel maximum height; taller content scrolls inside the panel |
 | `--pop-over-border-width` | `0.1rem` | Popover panel border width |
 | `--pop-over-border-colour` | `var(--slate-02)` | Popover panel border colour |
 | `--pop-over-border-radius` | `0.8rem` | Popover panel corner radius |
@@ -18,7 +19,7 @@
 | `--pop-over-z-index` | `999999` | Panel stacking order in browsers without CSS anchor positioning. Ignored where the panel renders in the top layer |
 | `--pop-over-content-padding` | `1.6rem` | Padding around the `content` slot |
 | `--pop-over-content-padding-block-start` | `3.2rem` | Extra top padding so content clears the close button |
-| `--pop-over-close-button-offset` | `0.8rem` | Distance of the close button from the panel's top/right edges |
+| `--pop-over-close-button-offset` | `0.8rem` | Distance of the close button from the panel's block-start and inline-end edges (top right in left-to-right text, top left in right-to-left) |
 | `--pop-over-close-button-size` | `2.4rem` | Close button box width/height |
 | `--pop-over-close-button-border-radius` | `50%` | Close button corner radius |
 | `--pop-over-close-button-colour` | `var(--slate-06)` | Close button icon colour |
@@ -27,6 +28,41 @@
 | `--pop-over-close-button-surface-hover` | `var(--slate-01)` | Close button background on hover/focus-visible |
 | `--pop-over-close-button-outline-colour-hover` | `var(--theme-ring)` | Close button outline colour on hover/focus-visible |
 
+Private tokens (not public API): `--_anchor-name` (the generated CSS anchor name), and `--_anchor-top`, `--_anchor-right`, `--_anchor-bottom`, `--_anchor-left`, and their `-inverse` forms (measured trigger edges, set by `useAnchoredPopover` only where CSS anchor positioning is unsupported).
+
+---
+
+## State hooks
+
+| Hook | Where | Meaning |
+|---|---|---|
+| `[data-placement]` | `.pop-over` root | The `placement` prop: `top`, `right`, `bottom` or `left` |
+| `[data-placement]` | `.pop-over-popover` | The resolved side, which can be the opposite of the prop when there is no room (only set where CSS anchor positioning is unsupported) |
+| `:popover-open` | `.pop-over-popover` | Panel open, where the Popover API exists |
+| `.pop-over-popover-open` | `.pop-over-popover` | Panel open on Safari 16 (no Popover API). Style it in a separate rule from `:popover-open` |
+| `[role="dialog"]` | `.pop-over-popover` | Present only when `popoverAriaLabel` is set |
+
+Inner class names: `.pop-over-trigger` (the trigger `<button>`), `.pop-over-popover` (the panel),
+`.pop-over-close-button` (an `InputButton variant="inline"`, so also `.input-button`),
+`.pop-over-close-button-icon`, `.pop-over-content` (wraps the `content` slot).
+
+> Changed 2026-10-19: the close button is now an `InputButton` (`variant="inline"`, icon-only, with
+> the `closeButtonAriaLabel` text visually hidden) instead of a raw `<button>`, and sits at the
+> inline end, so it moves to the left in right-to-left text. The panel now caps at the viewport
+> width and height and wraps unbroken strings.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+### Page or section
+
 ```css
 .my-page {
   --pop-over-background-colour: #1a1a1a;
@@ -35,7 +71,7 @@
 }
 ```
 
-Or scope to a single instance via `styleClassPassthrough`:
+### One instance
 
 ```vue
 <PopOver style-class-passthrough="promo-pop-over">...</PopOver>
@@ -43,13 +79,10 @@ Or scope to a single instance via `styleClassPassthrough`:
 
 ---
 
-## Local overrides
+## Class passthrough
 
-Set the tokens above on an element you own (a page or section class, or a class added with
-`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
-`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
-`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
-`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+`style-class-passthrough` adds classes to the `.pop-over` root, which wraps both the trigger and the
+panel, so tokens set on that class reach the panel too.
 
 ---
 

package/app/components/01.atoms/pop-over/PopOver.vue

@@ -28,21 +28,25 @@
         :class="{ 'pop-over-popover-open': usesFallbackPopover && isOpen }"
         :style="positionStyle"
         :data-placement="popoverPlacement"
+        :role="popoverAriaLabel ? 'dialog' : undefined"
         :aria-label="popoverAriaLabel || undefined"
         @beforetoggle="handleBeforeToggle"
         @toggle="handleToggle"
       >
-        <button
-          ref="closeButtonRef"
+        <InputButton
+          type="button"
+          variant="inline"
           :popovertarget="popoverId"
           popovertargetaction="hide"
-          type="button"
-          class="pop-over-close-button"
+          :button-text="closeButtonAriaLabel"
           :aria-label="closeButtonAriaLabel"
+          style-class-passthrough="pop-over-close-button"
           @click="hide"
         >
-          <Icon name="lucide:x" class="pop-over-close-button-icon" aria-hidden="true" />
-        </button>
+          <template #iconOnly>
+            <Icon :name="closeIcon" class="pop-over-close-button-icon" aria-hidden="true" />
+          </template>
+        </InputButton>
         <div class="pop-over-content">
           <slot name="content"></slot>
         </div>
@@ -56,10 +60,12 @@ interface Props {
   placement?: "top" | "right" | "bottom" | "left";
   /** aria-label on the trigger button — set this when the trigger slot is icon-only. */
   triggerAriaLabel?: string;
-  /** aria-label on the popover content region — set this when the content slot has no visible heading. */
+  /** Names the panel and gives it role="dialog"; set this when the content slot has no visible heading. */
   popoverAriaLabel?: string;
   /** aria-label on the close button — override for localisation. */
   closeButtonAriaLabel?: string;
+  /** Iconify name for the close button icon. */
+  closeIcon?: string;
   styleClassPassthrough?: string | string[];
 }
 
@@ -68,6 +74,7 @@ const props = withDefaults(defineProps<Props>(), {
   triggerAriaLabel: "",
   popoverAriaLabel: "",
   closeButtonAriaLabel: "Close",
+  closeIcon: "lucide:x",
   styleClassPassthrough: () => [],
 });
 
@@ -78,7 +85,6 @@ const anchorName = `--pop-over-anchor-${id}`;
 const rootRef = ref<HTMLDivElement | null>(null);
 const triggerRef = ref<HTMLButtonElement | null>(null);
 const popoverRef = ref<HTMLDivElement | null>(null);
-const closeButtonRef = ref<HTMLButtonElement | null>(null);
 
 // Focus moves to the close button on open; closing returns it to the trigger in every mode.
 const {
@@ -95,7 +101,7 @@ const {
   triggerRef,
   popoverRef,
   side: () => props.placement,
-  onOpen: () => closeButtonRef.value?.focus(),
+  onOpen: () => popoverRef.value?.querySelector<HTMLElement>(".pop-over-close-button")?.focus(),
 });
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
@@ -113,11 +119,14 @@ watch(
   .pop-over {
     display: inline-block;
     position: relative;
+    max-inline-size: 100%;
 
     .pop-over-trigger {
       all: unset;
       cursor: pointer;
       anchor-name: var(--_anchor-name);
+      max-inline-size: 100%;
+      overflow-wrap: anywhere;
       outline: var(--pop-over-trigger-outline-width, 0.1rem) solid transparent;
 
       &:focus-visible {
@@ -141,7 +150,10 @@ watch(
         --pop-over-shadow,
         0 0.4rem 1.6rem rgba(0, 0, 0, 0.12)
       );
-      width: var(--pop-over-width, 30rem);
+      width: min(var(--pop-over-width, 30rem), calc(100vw - 3.2rem));
+      max-block-size: var(--pop-over-max-block-size, calc(100dvh - 3.2rem));
+      overflow-y: auto;
+      overflow-wrap: anywhere;
 
       opacity: 0;
       transition:
@@ -169,8 +181,8 @@ watch(
         all: unset;
         cursor: pointer;
         position: absolute;
-        top: var(--pop-over-close-button-offset, 0.8rem);
-        right: var(--pop-over-close-button-offset, 0.8rem);
+        inset-block-start: var(--pop-over-close-button-offset, 0.8rem);
+        inset-inline-end: var(--pop-over-close-button-offset, 0.8rem);
         display: grid;
         place-items: center;
         width: var(--pop-over-close-button-size, 2.4rem);
@@ -186,6 +198,10 @@ watch(
           outline-offset: 0.1rem;
         }
 
+        .input-button-icon {
+          margin: 0;
+        }
+
         .pop-over-close-button-icon {
           width: var(--pop-over-close-button-icon-size, 1.4rem);
           height: var(--pop-over-close-button-icon-size, 1.4rem);

package/app/components/01.atoms/pop-over/stories/PopOver.stories.ts

@@ -18,7 +18,7 @@ const meta: Meta<typeof PopOver> = {
     },
     popoverAriaLabel: {
       control: "text",
-      description: "aria-label on the popover content region — set this when the content slot has no visible heading.",
+      description: "Names the popover panel and gives it role=\"dialog\"; set this when the content slot has no visible heading.",
       table: { category: "Accessibility" },
     },
     closeButtonAriaLabel: {
@@ -26,17 +26,23 @@ const meta: Meta<typeof PopOver> = {
       description: "aria-label on the close button — override for localisation.",
       table: { category: "Accessibility" },
     },
+    closeIcon: {
+      control: "text",
+      description: "Iconify name for the close button icon.",
+      table: { category: "Basic" },
+    },
     styleClassPassthrough: { table: { disable: true } },
   },
   args: {
     placement: "right",
     closeButtonAriaLabel: "Close",
+    closeIcon: "lucide:x",
   },
   parameters: {
     docs: {
       description: {
         component:
-          "A generic anchor-positioned disclosure panel: fully consumer-supplied trigger and content slots, built on the native Popover API and CSS anchor-positioning. See DisplayTooltip for a fixed icon-trigger variant, or ActionMenu for one with menu semantics.",
+          "A generic anchor-positioned disclosure panel built on the native Popover API and CSS anchor positioning, with fallbacks for Safari 16-18. The `trigger` and `content` slots are entirely consumer-supplied; `placement` picks the side the panel opens on (it flips when there is no room), and the close button is labelled by `closeButtonAriaLabel` with its icon set by `closeIcon`. Set `triggerAriaLabel` for an icon-only trigger and `popoverAriaLabel` when the content has no visible heading. See DisplayTooltip for a fixed icon-trigger variant, or ActionMenu for one with menu semantics.",
       },
     },
   },
@@ -46,6 +52,14 @@ export default meta;
 type Story = StoryObj<typeof PopOver>;
 
 export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Plain text trigger and a single paragraph of content. Use the Controls panel to change the placement and labels.",
+      },
+    },
+  },
   render: (args) => ({
     components: { PopOver },
     setup() {
@@ -67,6 +81,14 @@ export const Default: Story = {
 };
 
 export const Placements: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "One instance per `placement` value. Each panel flips to the opposite side when it would overflow the viewport.",
+      },
+    },
+  },
   render: (args) => ({
     components: { PopOver },
     setup() {
@@ -96,6 +118,14 @@ export const Placements: Story = {
 };
 
 export const IconTrigger: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "An icon-only trigger: `triggerAriaLabel` gives the button its accessible name, and `popoverAriaLabel` names the panel because the content has no visible heading.",
+      },
+    },
+  },
   render: (args) => ({
     components: { PopOver },
     setup() {
@@ -117,6 +147,14 @@ export const IconTrigger: Story = {
 };
 
 export const CustomColours: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Overriding the public colour tokens with inline custom properties on the component.",
+      },
+    },
+  },
   render: (args) => ({
     components: { PopOver },
     setup() {
@@ -139,3 +177,77 @@ export const CustomColours: Story = {
     `,
   }),
 };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    triggerAriaLabel: "Weitereinformationenzurlieferunganzeigen 😀",
+    popoverAriaLabel: "Lieferbedingungenundrückgaberichtlinien",
+    closeButtonAriaLabel: "Schließenundzurückzurbestellübersicht",
+  },
+  render: (args) => ({
+    components: { PopOver },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 2.4rem; padding: 2.4rem; font-size: 1.4rem;">
+        <p style="margin: 0;">Long unbroken trigger text and worst-case content inside an 18rem column.</p>
+        <div style="inline-size: 18rem; outline: 0.1rem dashed currentColor;">
+          <PopOver v-bind="args">
+            <template #trigger>
+              <span>😀 Lieferkostenundversandbedingungenfürallebestellungen</span>
+            </template>
+            <template #content>
+              <h3 style="margin-block-end: 0.8rem;">Kostenloselieferungfürallebestellungenübereinemmindestbestellwert</h3>
+              <p>https://example.invalid/a/very/long/unbroken/url/that/never/offers/a/break/opportunity/anywhere/at/all</p>
+              <p>&lt;b&gt;not bold&lt;/b&gt; Bestellungen über fünfzig Pfund qualifizieren sich für die kostenlose Standardlieferung innerhalb des Vereinigten Königreichs, ausgenommen sind Inseln und abgelegene Regionen.</p>
+            </template>
+          </PopOver>
+        </div>
+
+        <p style="margin: 0;">An oversized <code>--pop-over-width</code> (80rem): the panel stays inside the viewport.</p>
+        <PopOver placement="bottom" style="--pop-over-width: 80rem;">
+          <template #trigger><span>Very wide panel</span></template>
+          <template #content><p>The panel is capped at the viewport width minus 3.2rem.</p></template>
+        </PopOver>
+
+        <p style="margin: 0;">Very tall content: the panel caps at the viewport height and scrolls.</p>
+        <PopOver placement="bottom">
+          <template #trigger><span>Very tall panel</span></template>
+          <template #content>
+            <p v-for="n in 30" :key="n">Paragraph {{ n }} of thirty.</p>
+          </template>
+        </PopOver>
+
+        <p style="margin: 0;">Empty content slot, and single characters in the trigger and content.</p>
+        <div style="display: flex; gap: 2.4rem;">
+          <PopOver placement="bottom">
+            <template #trigger><span>Empty content</span></template>
+          </PopOver>
+          <PopOver placement="bottom" trigger-aria-label="X">
+            <template #trigger><span>X</span></template>
+            <template #content><p>Y</p></template>
+          </PopOver>
+        </div>
+
+        <p style="margin: 0;">Right-to-left content at the right edge: the panel flips left and the close button sits at the inline end.</p>
+        <div dir="rtl" style="display: flex; justify-content: flex-start;">
+          <PopOver placement="right" close-button-aria-label="إغلاق">
+            <template #trigger><span>التوصيل المجاني</span></template>
+            <template #content><p>الطلبات التي تزيد عن خمسين جنيهًا مؤهلة للتوصيل المجاني.</p></template>
+          </PopOver>
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      story: { inline: false, height: "900px" },
+      description: {
+        story:
+          "Worst-case content. Open each popover and check: unbroken trigger text wraps inside the dashed column; unbroken heading, URL and German copy wrap inside the panel; HTML-like text renders as text; an oversized `--pop-over-width` never makes the panel wider than the viewport; very tall content scrolls inside a panel no taller than the viewport; an empty content slot leaves just the close button; right-to-left content puts the close button at the inline end and flips the panel when there is no room.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/pop-over/tests/PopOver.spec.ts

@@ -104,6 +104,16 @@ describe("PopOver", () => {
       expect(wrapper.find(".pop-over-popover").attributes("aria-label")).toBe("Filter options");
     });
 
+    it("has no role without popoverAriaLabel", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-popover").attributes("role")).toBeUndefined();
+    });
+
+    it("has role='dialog' when popoverAriaLabel is given", async () => {
+      wrapper = await createWrapper({ popoverAriaLabel: "Filter options" });
+      expect(wrapper.find(".pop-over-popover").attributes("role")).toBe("dialog");
+    });
+
     it("sets data-placement on the root element", async () => {
       wrapper = await createWrapper({ placement: "top" });
       expect(wrapper.find(".pop-over").attributes("data-placement")).toBe("top");
@@ -133,6 +143,31 @@ describe("PopOver", () => {
       expect(closeButton.attributes("popovertargetaction")).toBe("hide");
       expect(closeButton.attributes("popovertarget")).toBe(vm.popoverId);
     });
+
+    it("is an inline InputButton with type='button'", async () => {
+      wrapper = await createWrapper();
+      const closeButton = wrapper.find(".pop-over-close-button");
+      expect(closeButton.classes()).toContain("input-button");
+      expect(closeButton.attributes("data-variant")).toBe("inline");
+      expect(closeButton.attributes("type")).toBe("button");
+    });
+
+    it("renders the close label as visually hidden button text", async () => {
+      wrapper = await createWrapper({ closeButtonAriaLabel: "Dismiss" });
+      const text = wrapper.find(".pop-over-close-button .input-button-text");
+      expect(text.text()).toBe("Dismiss");
+      expect(text.classes()).toContain("sr-only");
+    });
+
+    it("uses lucide:x as the default close icon", async () => {
+      wrapper = await createWrapper();
+      expect(wrapper.find(".pop-over-close-button-icon").classes().join(" ")).toContain("lucide:x");
+    });
+
+    it("uses a custom closeIcon", async () => {
+      wrapper = await createWrapper({ closeIcon: "mdi:close" });
+      expect(wrapper.find(".pop-over-close-button-icon").classes().join(" ")).toContain("mdi:close");
+    });
   });
 
   describe("handleToggle focus management", () => {

package/app/components/01.atoms/pop-over/tests/__snapshots__/PopOver.spec.ts.snap

@@ -2,7 +2,11 @@
 
 exports[`PopOver > renders correct HTML structure 1`] = `
 "<div class="pop-over" style="--_anchor-name: --pop-over-anchor-v-0-0;" data-placement="right"><button popovertarget="pop-over-v-0-0" popovertargetaction="toggle" type="button" class="pop-over-trigger" aria-expanded="false"><span>Open</span></button>
-  <div id="pop-over-v-0-0" popover="" class="pop-over-popover"><button popovertarget="pop-over-v-0-0" popovertargetaction="hide" type="button" class="pop-over-close-button" aria-label="Close"><span class="iconify i-lucide:x pop-over-close-button-icon" aria-hidden="true"></span></button>
+  <div id="pop-over-v-0-0" popover="" class="pop-over-popover"><button type="button" data-testid="input-button" data-theme="default" data-variant="inline" data-icon-only="" class="input-button pop-over-close-button" popovertarget="pop-over-v-0-0" popovertargetaction="hide" aria-label="Close">
+      <!--v-if-->
+      <!--v-if--><span class="input-button-text sr-only">Close</span>
+      <!--v-if--><span class="input-button-icon" data-slot="icon-only"><span class="iconify i-lucide:x pop-over-close-button-icon" aria-hidden="true"></span></span>
+    </button>
     <div class="pop-over-content">
       <p>Details</p>
     </div>