srcdev-nuxt-components 9.6.13 → 9.6.14

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>

package/app/components/01.atoms/qr-code/CONSUMER-STYLING.md

@@ -4,7 +4,7 @@
 
 | Token | Default | Controls |
 |---|---|---|
-| `--display-qr-code-size` | the `size` prop (`256px`) | Width of the code; height follows via `aspect-ratio: 1 / 1` |
+| `--display-qr-code-size` | the `size` prop (`256px`) | Width of the code; height follows via `aspect-ratio: 1 / 1`. Capped at `max-inline-size: 100%`, so it never overflows its container |
 
 Module colours are props, not tokens: `black-color` (default `currentColor`) and `white-color`
 (default `transparent`). They're written into the SVG by `nuxt-qrcode`. Because the dark modules
@@ -20,7 +20,19 @@ No private `--_` tokens.
 ## State hooks
 
 The root is the `nuxt-qrcode` SVG with class `.display-qr-code`, `role="img"` and an
-`aria-label` (the `aria-label` prop, default `"QR code"`). There are no state classes.
+`aria-label` (the `aria-label` prop, default `"QR code"`).
+
+When the value is too long to encode, the root is instead a `<span>` with classes
+`.display-qr-code.display-qr-code-fallback` and a `data-error` attribute, holding the `fallback`
+slot. It keeps the same size and passthrough classes, centres its content, and has no role or
+label (the slot content speaks for itself).
+
+| Hook | Meaning |
+|---|---|
+| `.display-qr-code-fallback`, `[data-error]` | The value couldn't be encoded; the `fallback` slot is showing |
+
+> Changed 2026-10-19: the fallback root is new (an over-capacity value used to throw during
+> render), and the code is now capped at its container's width.
 
 ---
 
@@ -45,4 +57,5 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ## Class passthrough
 
-`style-class-passthrough` adds classes to the root SVG. Reactive after mount.
+`style-class-passthrough` adds classes to the root SVG, or to the fallback `<span>` when the value
+can't be encoded. Reactive after mount.

package/app/components/01.atoms/qr-code/DisplayQrCode.vue

@@ -1,5 +1,6 @@
 <template>
   <Qrcode
+    v-if="!hasEncodeError"
     :value="qrValue"
     class="display-qr-code"
     :variant
@@ -10,6 +11,9 @@
     :aria-label="ariaLabel"
     :class="[elementClasses]"
   />
+  <span v-else class="display-qr-code display-qr-code-fallback" :class="[elementClasses]" data-error>
+    <slot name="fallback"></slot>
+  </span>
 </template>
 
 <script setup lang="ts">
@@ -36,6 +40,26 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
+const emit = defineEmits<{
+  error: [error: Error];
+}>();
+
+// The encoder throws while rendering when a value exceeds QR capacity (about 2.9KB).
+const hasEncodeError = ref(false);
+
+onErrorCaptured((error) => {
+  hasEncodeError.value = true;
+  emit("error", error instanceof Error ? error : new Error(String(error)));
+  return false;
+});
+
+watch(
+  () => props.qrValue,
+  () => {
+    hasEncodeError.value = false;
+  }
+);
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -49,6 +73,13 @@ watch(
   .display-qr-code {
     aspect-ratio: 1 / 1;
     width: var(--display-qr-code-size, v-bind(size));
+    max-inline-size: 100%;
+
+    &.display-qr-code-fallback {
+      display: inline-grid;
+      place-items: center;
+      overflow-wrap: anywhere;
+    }
   }
 }
 </style>