srcdev-nuxt-components 9.6.12 → 9.6.14

package/app/components/01.atoms/navigation/skip-links/SkipLinks.vue

@@ -3,8 +3,13 @@
     <div v-if="$slots.homeLink" class="skip-links__home">
       <slot name="homeLink"></slot>
     </div>
-    <nav class="skip-links__nav" :aria-label="ariaLabel">
-      <a v-for="link in links" :key="link.href" :href="link.href" class="skip-links__link">{{ link.label }}</a>
+    <nav v-if="validLinks.length" class="skip-links__nav" :aria-label="ariaLabel">
+      <a
+        v-for="(link, index) in validLinks"
+        :key="`${index}-${link.href}`"
+        :href="link.href"
+        class="skip-links__link"
+      >{{ link.label }}</a>
     </nav>
   </div>
 </template>
@@ -28,6 +33,8 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 })
 
+const validLinks = computed(() => props.links.filter((link) => link.href?.trim() && link.label?.trim()))
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 watch(
@@ -46,22 +53,21 @@ watch(
     .skip-links__nav {
       position: absolute;
       top: 100%;
-      left: 0;
-      z-index: var(--skip-links-z-index, 1000);
+      inset-inline-start: 0;
+      z-index: var(--skip-links-z-index, 999999);
 
       display: flex;
       flex-direction: column;
       gap: var(--skip-links-gap, 0.2rem);
-      background-color: var(--skip-links-background-colour, black);
-      border: var(--skip-links-border-width, 1px) solid var(--skip-links-border-colour, white);
+      inline-size: max-content;
+      max-inline-size: calc(100vw - 3.2rem);
+      background-color: var(--skip-links-background-colour, var(--theme-surface-inverted));
+      border: var(--skip-links-border-width, 1px) solid var(--skip-links-border-colour, var(--theme-on-surface));
       padding: var(--skip-links-padding, 0.2rem);
       margin: 0;
 
-      /* Hidden off-screen via transform — does NOT break keyboard focusability. pointer-events is
-         off in this state too: translateY(-100%) puts this at the same position as .skip-links__home
-         (the homeLink slot), and opacity:0 alone doesn't stop it from catching hover/clicks meant
-         for whatever sits underneath it. Keyboard tab focus doesn't need pointer-events, so this
-         doesn't affect focusability. */
+      /* Hidden by transform, not display, so the links stay focusable; pointer-events stops the
+         invisible panel catching clicks meant for the homeLink slot it overlaps. */
       opacity: 0;
       pointer-events: none;
       transform: translateY(-100%);
@@ -78,13 +84,13 @@ watch(
 
     .skip-links__link {
       display: block;
-      color: var(--skip-links-text-colour, white);
+      color: var(--skip-links-text-colour, var(--theme-on-surface));
       text-decoration: none;
       padding: var(--skip-links-link-padding-block, 0.8rem) var(--skip-links-link-padding-inline, 1.2rem);
-      white-space: nowrap;
+      overflow-wrap: anywhere;
 
       &:focus-visible {
-        outline: var(--skip-links-focus-outline-width, 2px) solid var(--skip-links-focus-outline-colour, white);
+        outline: var(--skip-links-focus-outline-width, 2px) solid var(--skip-links-focus-outline-colour, var(--theme-on-surface));
       }
     }
   }

package/app/components/01.atoms/navigation/skip-links/stories/SkipLinks.stories.ts

@@ -8,11 +8,11 @@ const meta: Meta<typeof SkipLinks> = {
   argTypes: {
     links: {
       control: "object",
-      description: "Ordered list of { href, label } skip targets",
+      description: "Ordered list of { href, label } skip targets. Entries with an empty href or label are skipped.",
     },
     ariaLabel: {
       control: "text",
-      description: "aria-label on the nav landmark — override for localisation",
+      description: "aria-label on the nav landmark (override for localisation)",
     },
     styleClassPassthrough: {
       control: "object",
@@ -27,7 +27,7 @@ const meta: Meta<typeof SkipLinks> = {
     docs: {
       description: {
         component:
-          "An accessibility utility that renders a set of visually-hidden links revealed only on keyboard focus, letting keyboard/screen-reader users jump past repeated navigation straight to main content, the footer, or any other in-page target. The links are placed first in the DOM — consumers should place `<SkipLinks>` at the very top of their page layout.",
+          "Keyboard skip links: a `<nav>` of in-page links that stays hidden until one of them takes focus, letting keyboard and screen-reader users jump past repeated navigation. Place `<SkipLinks>` first in the page layout. Links come from the `links` prop (`{ href, label }[]`, default main content and footer); the optional `homeLink` slot renders a visible item (usually the logo link) that the panel drops down beneath. `ariaLabel` names the landmark. SiteHeader renders this as its branding row: see the [Site Header](?path=/story/organisms-site-header--default) story.",
       },
     },
   },
@@ -36,7 +36,24 @@ const meta: Meta<typeof SkipLinks> = {
 export default meta;
 type Story = StoryObj<typeof SkipLinks>;
 
-// ─── Stories ──────────────────────────────────────────────────────────────────
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const siteHeaderNote = `
+  <p style="${storyNoteStyle}">
+    SiteHeader puts its branding in the <code>homeLink</code> slot and these links beneath it: open the
+    <a href="/?path=/story/organisms-site-header--default" target="_top">Site Header</a> story to see it in a real header.
+  </p>
+`;
+
+const forceOpenStyle = `
+  <style>
+    .skip-links-force-open .skip-links__nav {
+      opacity: 1 !important;
+      pointer-events: auto !important;
+      transform: translateY(0) !important;
+      position: static !important;
+    }
+  </style>
+`;
 
 export const Default: Story = {
   render: (args) => ({
@@ -45,10 +62,10 @@ export const Default: Story = {
       return { args };
     },
     template: `
-      <div>
-        <p style="padding: 2rem; text-align: center;">
-          The skip links below are visually hidden until focused. Click into this preview, then
-          press <kbd>Tab</kbd> to reveal them.
+      <div style="padding: 2rem;">
+        ${siteHeaderNote}
+        <p style="${storyNoteStyle}">
+          The skip links are hidden until focused. Click into this preview, then press <kbd>Tab</kbd> to reveal them.
         </p>
         <SkipLinks v-bind="args" />
       </div>
@@ -71,8 +88,9 @@ export const CustomLinks: Story = {
       return { args };
     },
     template: `
-      <div>
-        <p style="padding: 2rem; text-align: center;">
+      <div style="padding: 2rem;">
+        ${siteHeaderNote}
+        <p style="${storyNoteStyle}">
           Press <kbd>Tab</kbd> after clicking into this preview to reveal three custom skip links.
         </p>
         <SkipLinks v-bind="args" />
@@ -86,7 +104,8 @@ export const AlwaysVisible: Story = {
   parameters: {
     docs: {
       description: {
-        story: "Forces the skip-nav panel open via `:focus-within` emulation so it can be inspected without tabbing — for visual review only, not representative of real usage.",
+        story:
+          "Forces the panel open with story-only CSS so it can be inspected without tabbing. For visual review only: in real use it only shows while a link has focus.",
       },
     },
   },
@@ -96,18 +115,68 @@ export const AlwaysVisible: Story = {
       return { args };
     },
     template: `
-      <div>
-        <style>
-          .always-visible-demo .skip-links__nav {
-            opacity: 1 !important;
-            transform: translateY(0) !important;
-            position: static !important;
-          }
-        </style>
-        <div class="always-visible-demo">
+      <div style="padding: 2rem;">
+        ${forceOpenStyle}
+        ${siteHeaderNote}
+        <div class="skip-links-force-open">
           <SkipLinks v-bind="args" />
         </div>
       </div>
     `,
   }),
 };
+
+const stressLinks: SkipLink[] = [
+  { href: "#main-content", label: "Zumhauptinhaltspringenundnavigationüberspringen" },
+  { href: "#main-content", label: "😀 Same target, second label" },
+  { href: "#search", label: "<b>not bold</b> renders as text" },
+  { href: "#footer-content", label: "انتقل إلى التذييل" },
+  { href: "#x", label: "X" },
+  { href: "", label: "Dropped: empty href" },
+  { href: "#dropped", label: "   " },
+  ...Array.from({ length: 6 }, (_, index) => ({ href: `#section-${index + 1}`, label: `Skip to section ${index + 1}` })),
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    links: stressLinks,
+    ariaLabel: "Navigationsübersprunglinksfürtastaturnutzerinnenundnutzer 😀",
+  },
+  render: (args) => ({
+    components: { SkipLinks },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div style="display: grid; gap: 2.4rem; padding: 2rem; font-size: 1.4rem;">
+        ${forceOpenStyle}
+        <p style="margin: 0;">Forced open in a narrow column: long unbroken, emoji, HTML-like and right-to-left labels wrap inside the panel, two links share a target, and the two entries with an empty href or label are dropped (11 links show, not 13).</p>
+        <div class="skip-links-force-open" style="inline-size: 18rem; outline: 0.1rem dashed currentColor;">
+          <SkipLinks v-bind="args" />
+        </div>
+
+        <p style="margin: 0;">The real behaviour with the same data: press <kbd>Tab</kbd> from here. The panel drops down under the logo, stays inside the viewport and shows each link's focus ring.</p>
+        <SkipLinks v-bind="args">
+          <template #homeLink>
+            <a href="#" style="display: inline-block; padding: 0.8rem;">Logo</a>
+          </template>
+        </SkipLinks>
+
+        <p style="margin: 0;">No usable links (an empty array): nothing renders, not even an empty <code>&lt;nav&gt;</code> landmark.</p>
+        <div class="skip-links-force-open" style="outline: 0.1rem dashed currentColor; min-block-size: 2rem;">
+          <SkipLinks :links="[]" />
+        </div>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      story: { inline: false, height: "900px" },
+      description: {
+        story:
+          "Worst-case `links`. Check: labels wrap instead of running off-screen, the panel is never wider than the viewport, links that share an href both render, entries with an empty href or label are dropped, HTML-like text renders as text, and an empty list leaves no landmark behind. Tab through the second instance to check the reveal and focus rings. The long `ariaLabel` only names the landmark, so it never shows on screen.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/navigation/skip-links/tests/SkipLinks.spec.ts

@@ -1,21 +1,34 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import SkipLinks from "../SkipLinks.vue";
 import type { SkipLink } from "~/types/components";
 
+const mounted: { unmount: () => void }[] = [];
+
+const mountSkipLinks = async (options: Parameters<typeof mountSuspended<typeof SkipLinks>>[1] = {}) => {
+  const wrapper = await mountSuspended(SkipLinks, options);
+  mounted.push(wrapper);
+  return wrapper;
+};
+
 describe("SkipLinks", () => {
+  afterEach(() => {
+    mounted.splice(0).forEach((wrapper) => wrapper.unmount());
+    vi.restoreAllMocks();
+  });
+
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     expect(wrapper.vm).toBeTruthy();
   });
 
   it("renders correct HTML structure (default props)", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure (all props set)", async () => {
-    const wrapper = await mountSuspended(SkipLinks, {
+    const wrapper = await mountSkipLinks({
       props: {
         links: [{ href: "#content", label: "Skip to content" }],
         ariaLabel: "Custom skip nav",
@@ -25,7 +38,7 @@ describe("SkipLinks", () => {
   });
 
   it("renders the default main-content and footer links", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     const links = wrapper.findAll(".skip-links__link");
     expect(links).toHaveLength(2);
     expect(links[0]!.attributes("href")).toBe("#main-content");
@@ -40,29 +53,76 @@ describe("SkipLinks", () => {
       { href: "#search", label: "Skip to search" },
       { href: "#content", label: "Skip to content" },
     ];
-    const wrapper = await mountSuspended(SkipLinks, { props: { links: customLinks } });
+    const wrapper = await mountSkipLinks({ props: { links: customLinks } });
     const links = wrapper.findAll(".skip-links__link");
     expect(links).toHaveLength(3);
     expect(links.map((link) => link.text())).toEqual(["Skip to navigation", "Skip to search", "Skip to content"]);
   });
 
+  it("drops links with an empty or whitespace-only href or label", async () => {
+    const wrapper = await mountSkipLinks({
+      props: {
+        links: [
+          { href: "#a", label: "Keep" },
+          { href: "", label: "No target" },
+          { href: "#b", label: "   " },
+          { href: "#c", label: "Also keep" },
+        ],
+      },
+    });
+    expect(wrapper.findAll(".skip-links__link").map((link) => link.text())).toEqual(["Keep", "Also keep"]);
+  });
+
+  it("keeps the right links when two share an href and the list is reordered", async () => {
+    const wrapper = await mountSkipLinks({
+      props: {
+        links: [
+          { href: "#nav", label: "Skip to navigation" },
+          { href: "#main", label: "Skip to content" },
+          { href: "#main", label: "Skip to article" },
+          { href: "#footer", label: "Skip to footer" },
+        ],
+      },
+    });
+    expect(wrapper.findAll(".skip-links__link")).toHaveLength(4);
+    await wrapper.setProps({
+      links: [
+        { href: "#footer", label: "Skip to footer" },
+        { href: "#main", label: "Skip to content" },
+        { href: "#main", label: "Skip to article" },
+        { href: "#nav", label: "Skip to navigation" },
+      ],
+    });
+    expect(wrapper.findAll(".skip-links__link").map((link) => link.text())).toEqual([
+      "Skip to footer",
+      "Skip to content",
+      "Skip to article",
+      "Skip to navigation",
+    ]);
+  });
+
+  it("omits the nav landmark entirely when there are no usable links", async () => {
+    const wrapper = await mountSkipLinks({ props: { links: [{ href: "", label: "" }] } });
+    expect(wrapper.find("nav").exists()).toBe(false);
+  });
+
   it("defaults the nav aria-label to 'Skip navigation'", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     expect(wrapper.find(".skip-links__nav").attributes("aria-label")).toBe("Skip navigation");
   });
 
   it("uses a custom ariaLabel when provided", async () => {
-    const wrapper = await mountSuspended(SkipLinks, { props: { ariaLabel: "Custom skip nav" } });
+    const wrapper = await mountSkipLinks({ props: { ariaLabel: "Custom skip nav" } });
     expect(wrapper.find(".skip-links__nav").attributes("aria-label")).toBe("Custom skip nav");
   });
 
   it("does not render the home-link slot wrapper when the slot is unused", async () => {
-    const wrapper = await mountSuspended(SkipLinks);
+    const wrapper = await mountSkipLinks();
     expect(wrapper.find(".skip-links__home").exists()).toBe(false);
   });
 
   it("renders the homeLink slot content when provided", async () => {
-    const wrapper = await mountSuspended(SkipLinks, {
+    const wrapper = await mountSkipLinks({
       slots: { homeLink: "<a href='/' class='logo-link'>Home</a>" },
     });
     expect(wrapper.find(".skip-links__home").exists()).toBe(true);

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);