npm - srcdev-nuxt-components - Versions diffs - 9.3.2 → 9.3.4 - Mend

srcdev-nuxt-components 9.3.2 → 9.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/.claude/skills/components/display-dialog.md CHANGED Viewed

@@ -14,9 +14,9 @@ open/close state management.
 |---|---|---|---|
 | `dataDialogId` | `string` | — | **Required.** Unique identifier rendered as `data-dialog-id` attribute. |
 | `variant` | `'dialog' \| 'modal' \| 'confirm' \| 'alert' \| 'fullscreen'` | `'dialog'` | Controls panel sizing and ARIA role. |
-| `theme` | `SemanticTheme` | `undefined` | Optional header accent — `data-theme` on `.header` only; adds a coloured bottom border and tints the close icon. |
+| `theme` | `SemanticTheme` | `undefined` | Optional header accent — `data-theme` on `.display-dialog-header` only; adds a coloured bottom border and tints the close icon. |
 | `v-model` | `boolean` | — | Controls open/closed state. |
-| `allowContentScroll` | `boolean` | `false` | Enables independent scroll on `.dialog-content`. |
+| `allowContentScroll` | `boolean` | `false` | Enables independent scroll on `.display-dialog-content`. |
 | `lockViewport` | `boolean` | `true` | Adds/removes `lock` class on `<body>` on mount/close. |
 | `justifyDialog` | `'start' \| 'center' \| 'end'` | `'center'` | Horizontal position of panel within overlay. |
 | `alignDialog` | `'start' \| 'center' \| 'end'` | `'center'` | Vertical position of panel within overlay. |
@@ -27,12 +27,12 @@ open/close state management.
 | Slot | Renders in |
 |---|---|
-| `#dialogTitle` | `.col-left` in the header (hidden when slot is empty) |
-| `#dialogContent` | `.dialog-content` (hidden when slot is empty) |
-| `#actionButtonLeft` | Left side of `.footer` |
-| `#actionButtonRight` | Right side of `.footer` |
+| `#dialogTitle` | `.display-dialog-col-left` in the header (hidden when slot is empty) |
+| `#dialogContent` | `.display-dialog-content` (hidden when slot is empty) |
+| `#actionButtonLeft` | Left side of `.display-dialog-footer` |
+| `#actionButtonRight` | Right side of `.display-dialog-footer` |
-`.footer` is omitted entirely when neither action button slot is provided.
+`.display-dialog-footer` is omitted entirely when neither action button slot is provided.
 ## Variants

package/.claude/skills/components/display-toast.md CHANGED Viewed

@@ -218,6 +218,10 @@ Override tokens via an unscoped style block scoped to a page or layout class:
 }
 ```
+Stacking order: `--display-toast-z-index` / `--display-toast-provider-z-index`, both default
+`999999` (matches `DisplayDialog`'s own default) — see `CONSUMER-STYLING.md` if a toast is
+appearing behind a consumer's own sticky header.
 ### Masked variant
 Setting `appearance.masked: true` swaps `AlertContent` for `AlertMaskedContent`, which uses an SVG-based border and a semi-transparent background (`rgba(0,0,0,0.3)`) so page content is faintly visible beneath the toast.

package/app/components/01.atoms/display-dialog/CONSUMER-STYLING.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # DisplayDialog — Consumer Styling Guide
+## Structural class names (2026-08-22)
+`DisplayDialog` renders `<dialog>` inline in the component tree, not via `<Teleport>` — so it's a
+genuine descendant of wherever it's used in the page, and any ancestor's CSS selectors reach it.
+Before 2026-08-22 its internal sections used bare generic class names (`.inner`, `.header`,
+`.footer`, `.col-left`, `.col-right`, `.dialog-content`) — a consumer app with its own `.header`/
+`.footer` layout classes (extremely common names) had its unlayered site CSS silently override the
+dialog's own footer layout (button alignment, padding) purely by class-name collision, since
+unlayered CSS always beats `@layer components` regardless of specificity. All six renamed to
+`.display-dialog-*` prefixed variants (`.display-dialog-inner`, `.display-dialog-header`, etc.) —
+update any consumer overrides written against the old names.
 ## Public token API
 All `--display-dialog-*` tokens are the stable override surface. Because dialogs are site-wide UI
@@ -75,11 +87,11 @@ on `:root`. This applies to every `DisplayDialog` across the site.
 The `fullscreen` variant bypasses `--_inner-border-radius`, `--_inner-border`, and
 `--_inner-outline` directly (setting them to `0`/`none`). To restyle the fullscreen panel,
-target the private tokens on `.inner.fullscreen`:
+target the private tokens on `.display-dialog-inner.fullscreen`:
 ```css
 .display-dialog {
-  .inner {
+  .display-dialog-inner {
     &.confirm {
       /* e.g. constrain confirm panel width further */
       max-width: 40rem;
@@ -101,19 +113,19 @@ target the private tokens on `.inner.fullscreen`:
 ## Section targeting
-Target `.header`, `.dialog-content`, and `.footer` directly to adjust layout within the panel:
+Target `.display-dialog-header`, `.display-dialog-content`, and `.display-dialog-footer` directly to adjust layout within the panel:
 ```css
 .display-dialog {
-  .header {
+  .display-dialog-header {
     border-bottom: 0.1rem solid var(--brand-border);
   }
-  .dialog-content {
+  .display-dialog-content {
     /* content area uses --display-dialog-content-padding */
   }
-  .footer {
+  .display-dialog-footer {
     border-top: 0.1rem solid var(--brand-border);
     justify-content: space-between; /* override default flex-end */
   }
@@ -134,7 +146,7 @@ you can scope overrides to a specific page without affecting the rest of the sit
     --display-dialog-inner-border-radius: 0;
     --display-dialog-backdrop-background: rgba(0, 0, 0, 0.8);
-    .footer {
+    .display-dialog-footer {
       justify-content: stretch;
     }
   }
@@ -156,7 +168,7 @@ needs a different look, pass a modifier class and target it alongside `.display-
 .display-dialog.danger-dialog {
   --display-dialog-backdrop-background: rgba(180, 0, 0, 0.4);
-  .inner {
+  .display-dialog-inner {
     --display-dialog-inner-border: 0.2rem solid var(--color-danger);
   }
 }

package/app/components/01.atoms/display-dialog/DisplayDialog.vue CHANGED Viewed

@@ -16,13 +16,13 @@
       :click-outside-deactivates="!isAlert"
       @deactivate="closeDialog()"
     >
-      <div class="inner" :class="[resolved.variant]">
-        <div class="header" :data-theme="resolved.theme">
-          <div v-if="hasTitle" :id="dialogTitleId" class="col-left">
+      <div class="display-dialog-inner" :class="[resolved.variant]">
+        <div class="display-dialog-header" :data-theme="resolved.theme">
+          <div v-if="hasTitle" :id="dialogTitleId" class="display-dialog-col-left">
             <slot name="dialogTitle"></slot>
           </div>
-          <div class="col-right">
+          <div class="display-dialog-col-right">
             <button
               data-test-id="display-dialog-header-close"
               class="display-dialog-close"
@@ -35,13 +35,13 @@
         </div>
         <div
           v-if="hasContent"
-          class="dialog-content"
+          class="display-dialog-content"
           :class="[{ 'allow-content-scroll': resolved.allowContentScroll }]"
           :tabindex="resolved.allowContentScroll ? 0 : undefined"
         >
           <slot name="dialogContent"></slot>
         </div>
-        <div v-if="hasFooter" class="footer">
+        <div v-if="hasFooter" class="display-dialog-footer">
           <slot name="actionButtonLeft"></slot>
           <slot name="actionButtonRight"></slot>
         </div>
@@ -216,7 +216,7 @@ onUnmounted(() => {
       align-items: flex-end;
     }
-    .inner {
+    .display-dialog-inner {
       display: grid;
       grid-template-rows: auto 1fr auto;
       border-radius: var(--_inner-border-radius);
@@ -232,7 +232,11 @@ onUnmounted(() => {
       }
       &.confirm {
-        width: initial;
+        /* Matches .alert's cap. Plain `width: initial` (== auto) makes this a shrink-to-fit flex
+           item with no wrapping constraint, so a long confirm sentence renders as one unbroken
+           line and drags the whole dialog (and its footer buttons) out to that width instead of
+           wrapping normally — visible once a real confirm message runs more than a few words. */
+        width: min(90%, 48rem);
       }
       &.dialog {
@@ -252,7 +256,7 @@ onUnmounted(() => {
         width: initial;
       }
-      .header {
+      .display-dialog-header {
         display: flex;
         align-items: center;
         padding: var(--_header-padding);
@@ -265,11 +269,11 @@ onUnmounted(() => {
           }
         }
-        .col-left {
+        .display-dialog-col-left {
           flex: 1;
         }
-        .col-right {
+        .display-dialog-col-right {
           margin-inline-start: auto;
           .display-dialog-close {
@@ -303,7 +307,7 @@ onUnmounted(() => {
         }
       }
-      .dialog-content {
+      .display-dialog-content {
         overflow: hidden;
         padding: var(--_content-padding);
@@ -315,7 +319,7 @@ onUnmounted(() => {
         }
       }
-      .footer {
+      .display-dialog-footer {
         display: flex;
         gap: var(--_footer-gap);
         justify-content: flex-end;

package/app/components/01.atoms/display-dialog/tests/DisplayDialog.spec.ts CHANGED Viewed

@@ -116,81 +116,81 @@ describe("DisplayDialog", () => {
     expect(wrapper.attributes("role")).toBe("alertdialog");
   });
-  // ─── Variant class on .inner ──────────────────────────────────────────────
+  // ─── Variant class on .display-dialog-inner ──────────────────────────────────────────────
-  it("applies 'dialog' class to .inner by default", async () => {
+  it("applies 'dialog' class to .display-dialog-inner by default", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
     });
-    expect(wrapper.find(".inner").classes()).toContain("dialog");
+    expect(wrapper.find(".display-dialog-inner").classes()).toContain("dialog");
   });
   it.each(["dialog", "modal", "confirm", "alert", "fullscreen"] as const)(
-    "applies '%s' class to .inner",
+    "applies '%s' class to .display-dialog-inner",
     async (variant) => {
       const wrapper = await mountSuspended(DisplayDialog, {
         props: { dataDialogId: "test", variant },
       });
-      expect(wrapper.find(".inner").classes()).toContain(variant);
+      expect(wrapper.find(".display-dialog-inner").classes()).toContain(variant);
     }
   );
   // ─── Slots ────────────────────────────────────────────────────────────────
-  it("renders dialogTitle slot in .col-left", async () => {
+  it("renders dialogTitle slot in .display-dialog-col-left", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
       slots: { dialogTitle: "<p>My Title</p>" },
     });
-    expect(wrapper.find(".col-left").text()).toBe("My Title");
+    expect(wrapper.find(".display-dialog-col-left").text()).toBe("My Title");
   });
-  it("omits .col-left when dialogTitle slot is not provided", async () => {
+  it("omits .display-dialog-col-left when dialogTitle slot is not provided", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
     });
-    expect(wrapper.find(".col-left").exists()).toBe(false);
+    expect(wrapper.find(".display-dialog-col-left").exists()).toBe(false);
   });
-  it("renders dialogContent slot in .dialog-content", async () => {
+  it("renders dialogContent slot in .display-dialog-content", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
       slots: { dialogContent: "<p>Content</p>" },
     });
-    expect(wrapper.find(".dialog-content").text()).toBe("Content");
+    expect(wrapper.find(".display-dialog-content").text()).toBe("Content");
   });
-  it("omits .dialog-content when dialogContent slot is not provided", async () => {
+  it("omits .display-dialog-content when dialogContent slot is not provided", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
     });
-    expect(wrapper.find(".dialog-content").exists()).toBe(false);
+    expect(wrapper.find(".display-dialog-content").exists()).toBe(false);
   });
-  it("renders .footer when actionButtonLeft slot is provided", async () => {
+  it("renders .display-dialog-footer when actionButtonLeft slot is provided", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
       slots: { actionButtonLeft: "<button>Cancel</button>" },
     });
-    expect(wrapper.find(".footer").exists()).toBe(true);
+    expect(wrapper.find(".display-dialog-footer").exists()).toBe(true);
   });
-  it("renders .footer when actionButtonRight slot is provided", async () => {
+  it("renders .display-dialog-footer when actionButtonRight slot is provided", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
       slots: { actionButtonRight: "<button>Confirm</button>" },
     });
-    expect(wrapper.find(".footer").exists()).toBe(true);
+    expect(wrapper.find(".display-dialog-footer").exists()).toBe(true);
   });
-  it("omits .footer when neither action button slot is provided", async () => {
+  it("omits .display-dialog-footer when neither action button slot is provided", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
     });
-    expect(wrapper.find(".footer").exists()).toBe(false);
+    expect(wrapper.find(".display-dialog-footer").exists()).toBe(false);
   });
-  it("renders both action button slots inside .footer", async () => {
+  it("renders both action button slots inside .display-dialog-footer", async () => {
     const wrapper = await mountSuspended(DisplayDialog, {
       props: { dataDialogId: "test" },
       slots: {
@@ -198,8 +198,8 @@ describe("DisplayDialog", () => {
         actionButtonRight: "<button>Confirm</button>",
       },
     });
-    expect(wrapper.find(".footer").text()).toContain("Cancel");
-    expect(wrapper.find(".footer").text()).toContain("Confirm");
+    expect(wrapper.find(".display-dialog-footer").text()).toContain("Cancel");
+    expect(wrapper.find(".display-dialog-footer").text()).toContain("Confirm");
   });
   // ─── allowContentScroll ───────────────────────────────────────────────────
@@ -209,7 +209,7 @@ describe("DisplayDialog", () => {
       props: { dataDialogId: "test" },
       slots: { dialogContent: "<p>Content</p>" },
     });
-    expect(wrapper.find(".dialog-content").classes()).not.toContain("allow-content-scroll");
+    expect(wrapper.find(".display-dialog-content").classes()).not.toContain("allow-content-scroll");
   });
   it("applies allow-content-scroll class when allowContentScroll=true", async () => {
@@ -217,7 +217,7 @@ describe("DisplayDialog", () => {
       props: { dataDialogId: "test", allowContentScroll: true },
       slots: { dialogContent: "<p>Content</p>" },
     });
-    expect(wrapper.find(".dialog-content").classes()).toContain("allow-content-scroll");
+    expect(wrapper.find(".display-dialog-content").classes()).toContain("allow-content-scroll");
   });
   // ─── Close button ─────────────────────────────────────────────────────────
@@ -312,12 +312,12 @@ describe("DisplayDialog", () => {
         props: { dataDialogId: "test" },
         slots: { dialogContent: "<p>Content</p>" },
       });
-      expect(wrapper.find(".inner").classes()).toContain("dialog");
+      expect(wrapper.find(".display-dialog-inner").classes()).toContain("dialog");
       expect(wrapper.attributes("align-dialog")).toBe("center");
       expect(wrapper.attributes("justify-dialog")).toBe("center");
       expect(document.body.classList.contains("lock")).toBe(true);
-      expect(wrapper.find(".dialog-content").classes()).not.toContain("allow-content-scroll");
-      expect(wrapper.find(".header").attributes("data-theme")).toBeUndefined();
+      expect(wrapper.find(".display-dialog-content").classes()).not.toContain("allow-content-scroll");
+      expect(wrapper.find(".display-dialog-header").attributes("data-theme")).toBeUndefined();
       expect(iconName(wrapper)).toContain("bitcoin-icons:cross-filled");
     });
@@ -340,12 +340,12 @@ describe("DisplayDialog", () => {
         props: { dataDialogId: "test" },
         slots: { dialogContent: "<p>Content</p>" },
       });
-      expect(wrapper.find(".inner").classes()).toContain("modal");
+      expect(wrapper.find(".display-dialog-inner").classes()).toContain("modal");
       expect(wrapper.attributes("align-dialog")).toBe("end");
       expect(wrapper.attributes("justify-dialog")).toBe("start");
       expect(document.body.classList.contains("lock")).toBe(false);
-      expect(wrapper.find(".dialog-content").classes()).toContain("allow-content-scroll");
-      expect(wrapper.find(".header").attributes("data-theme")).toBe("info");
+      expect(wrapper.find(".display-dialog-content").classes()).toContain("allow-content-scroll");
+      expect(wrapper.find(".display-dialog-header").attributes("data-theme")).toBe("info");
       expect(iconName(wrapper)).toContain("heroicons:x-mark");
     });
@@ -377,12 +377,12 @@ describe("DisplayDialog", () => {
         },
         slots: { dialogContent: "<p>Content</p>" },
       });
-      expect(wrapper.find(".inner").classes()).toContain("fullscreen");
+      expect(wrapper.find(".display-dialog-inner").classes()).toContain("fullscreen");
       expect(wrapper.attributes("align-dialog")).toBe("start");
       expect(wrapper.attributes("justify-dialog")).toBe("end");
       expect(document.body.classList.contains("lock")).toBe(true);
-      expect(wrapper.find(".dialog-content").classes()).not.toContain("allow-content-scroll");
-      expect(wrapper.find(".header").attributes("data-theme")).toBe("error");
+      expect(wrapper.find(".display-dialog-content").classes()).not.toContain("allow-content-scroll");
+      expect(wrapper.find(".display-dialog-header").attributes("data-theme")).toBe("error");
       expect(iconName(wrapper)).toContain("material-symbols:close");
     });

package/app/components/01.atoms/display-dialog/tests/__snapshots__/DisplayDialog.spec.ts.snap CHANGED Viewed

@@ -2,17 +2,17 @@
 exports[`DisplayDialog > renders correct HTML structure with all slots 1`] = `
 "<dialog class="display-dialog" aria-modal="true" aria-labelledby="v-0-0" align-dialog="center" justify-dialog="center" open="" data-dialog-id="test">
-  <div class="inner dialog">
-    <div class="header">
-      <div id="v-0-0" class="col-left">
+  <div class="display-dialog-inner dialog">
+    <div class="display-dialog-header">
+      <div id="v-0-0" class="display-dialog-col-left">
         <p>Title</p>
       </div>
-      <div class="col-right"><button data-test-id="display-dialog-header-close" class="display-dialog-close"><span class="iconify undefinedbitcoin-icons:cross-filled icon"></span><span class="sr-only">Close</span></button></div>
+      <div class="display-dialog-col-right"><button data-test-id="display-dialog-header-close" class="display-dialog-close"><span class="iconify undefinedbitcoin-icons:cross-filled icon"></span><span class="sr-only">Close</span></button></div>
     </div>
-    <div class="dialog-content">
+    <div class="display-dialog-content">
       <p>Content</p>
     </div>
-    <div class="footer"><button>Cancel</button><button>Confirm</button></div>
+    <div class="display-dialog-footer"><button>Cancel</button><button>Confirm</button></div>
   </div>
 </dialog>"
 `;

package/app/components/01.atoms/toast/CONSUMER-STYLING.md ADDED Viewed

@@ -0,0 +1,27 @@
+# DisplayToast / DisplayToastProvider — Consumer Styling Guide
+## Stacking order
+```css
+--display-toast-z-index: 999999;          /* DisplayToast (standalone) */
+--display-toast-provider-z-index: 999999; /* DisplayToastProvider (queue) */
+```
+Both default to `999999`, matching `DisplayDialog`'s own `--display-dialog-z-index` default — a
+toast is meant to float above ordinary page chrome (headers, sticky nav), so it needs to clear
+whatever z-index a consumer's own layout uses for that. If a toast appears behind your site
+header, your header's z-index is at or above `999999`; either raise the toast's token to match/
+exceed it, or (more robust) lower the header's z-index to something more ordinary — very few
+elements legitimately need to sit above a `dialog`/`alertdialog`.
+If a `DisplayDialog` and a toast happen to be visible at the same time, the two tie on DOM/paint
+order at equal z-index — an acceptable edge case for a transient notification, not worth resolving
+with a strict priority order between them.
+```css
+/* Global override, e.g. assets/styles/setup/07.components/display-toast.css */
+:root {
+  --display-toast-z-index: 1000000;
+  --display-toast-provider-z-index: 1000000;
+}
+```

package/app/components/01.atoms/toast/DisplayToast.vue CHANGED Viewed

@@ -228,13 +228,16 @@ onBeforeRouteLeave(() => {
       --_toast-gutter: 24px;
     }
+    /* See the matching comment in DisplayToastProvider.vue — same fix, same rationale. */
+    --_z-index: var(--display-toast-z-index, 999999);
     display: block;
     overflow: hidden;
     position: fixed;
     margin: 0;
     opacity: 0;
-    z-index: 100;
+    z-index: var(--_z-index);
     /* Focus styles for accessibility */
     &:focus {

package/app/components/01.atoms/toast/DisplayToastProvider.vue CHANGED Viewed

@@ -220,11 +220,18 @@ onUnmounted(() => {
       --_gutter: 24px;
     }
+    /* No public token before 2026-08-22 and hardcoded far below DisplayDialog's own
+       --display-dialog-z-index default (999999) — a toast is meant to float above ordinary page
+       chrome, but 100 loses to any consumer's sticky header. Matches DisplayDialog's default so
+       toasts also clear a modal's own overlay; the two ties on DOM/paint order if both happen to
+       be visible at once, which is an acceptable edge case for a transient notification. */
+    --_z-index: var(--display-toast-provider-z-index, 999999);
     position: fixed;
     display: flex;
     flex-direction: column;
     gap: 8px;
-    z-index: 100;
+    z-index: var(--_z-index);
     inset-inline: var(--_gutter);
     margin-inline: auto;

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.3.2",
+  "version": "9.3.4",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",