srcdev-nuxt-components 9.3.3 → 9.3.5

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 (11) hide show
  1. package/.claude/skills/components/display-toast.md +4 -0
  2. package/app/components/01.atoms/toast/CONSUMER-STYLING.md +27 -0
  3. package/app/components/01.atoms/toast/DisplayToast.vue +4 -1
  4. package/app/components/01.atoms/toast/DisplayToastProvider.vue +8 -1
  5. package/app/components/02.molecules/expandable/accordian/tests/__snapshots__/AccordianCore.spec.ts.snap +5 -5
  6. package/app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue +1 -1
  7. package/app/components/02.molecules/expandable/expanding-panel/tests/__snapshots__/ExpandingPanel.spec.ts.snap +3 -3
  8. package/app/components/02.molecules/expandable/expanding-panel-classic/ExpandingPanelClassic.vue +1 -1
  9. package/app/components/02.molecules/expandable/expanding-panel-classic/tests/__snapshots__/ExpandingPanelClassic.spec.ts.snap +3 -3
  10. package/app/components/display-details/DisplayDetailsCore.vue +1 -1
  11. package/package.json +1 -1
package/.claude/skills/components/display-toast.md CHANGED
@@ -218,6 +218,10 @@ Override tokens via an unscoped style block scoped to a page or layout class:
218
218
  }
219
219
  ```
220
220
 
221
+ Stacking order: `--display-toast-z-index` / `--display-toast-provider-z-index`, both default
222
+ `999999` (matches `DisplayDialog`'s own default) — see `CONSUMER-STYLING.md` if a toast is
223
+ appearing behind a consumer's own sticky header.
224
+
221
225
  ### Masked variant
222
226
 
223
227
  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/toast/CONSUMER-STYLING.md ADDED
@@ -0,0 +1,27 @@
1
+ # DisplayToast / DisplayToastProvider — Consumer Styling Guide
2
+
3
+ ## Stacking order
4
+
5
+ ```css
6
+ --display-toast-z-index: 999999; /* DisplayToast (standalone) */
7
+ --display-toast-provider-z-index: 999999; /* DisplayToastProvider (queue) */
8
+ ```
9
+
10
+ Both default to `999999`, matching `DisplayDialog`'s own `--display-dialog-z-index` default — a
11
+ toast is meant to float above ordinary page chrome (headers, sticky nav), so it needs to clear
12
+ whatever z-index a consumer's own layout uses for that. If a toast appears behind your site
13
+ header, your header's z-index is at or above `999999`; either raise the toast's token to match/
14
+ exceed it, or (more robust) lower the header's z-index to something more ordinary — very few
15
+ elements legitimately need to sit above a `dialog`/`alertdialog`.
16
+
17
+ If a `DisplayDialog` and a toast happen to be visible at the same time, the two tie on DOM/paint
18
+ order at equal z-index — an acceptable edge case for a transient notification, not worth resolving
19
+ with a strict priority order between them.
20
+
21
+ ```css
22
+ /* Global override, e.g. assets/styles/setup/07.components/display-toast.css */
23
+ :root {
24
+ --display-toast-z-index: 1000000;
25
+ --display-toast-provider-z-index: 1000000;
26
+ }
27
+ ```
package/app/components/01.atoms/toast/DisplayToast.vue CHANGED
@@ -228,13 +228,16 @@ onBeforeRouteLeave(() => {
228
228
  --_toast-gutter: 24px;
229
229
  }
230
230
 
231
+ /* See the matching comment in DisplayToastProvider.vue — same fix, same rationale. */
232
+ --_z-index: var(--display-toast-z-index, 999999);
233
+
231
234
  display: block;
232
235
  overflow: hidden;
233
236
  position: fixed;
234
237
  margin: 0;
235
238
  opacity: 0;
236
239
 
237
- z-index: 100;
240
+ z-index: var(--_z-index);
238
241
 
239
242
  /* Focus styles for accessibility */
240
243
  &:focus {
package/app/components/01.atoms/toast/DisplayToastProvider.vue CHANGED
@@ -220,11 +220,18 @@ onUnmounted(() => {
220
220
  --_gutter: 24px;
221
221
  }
222
222
 
223
+ /* No public token before 2026-08-22 and hardcoded far below DisplayDialog's own
224
+ --display-dialog-z-index default (999999) — a toast is meant to float above ordinary page
225
+ chrome, but 100 loses to any consumer's sticky header. Matches DisplayDialog's default so
226
+ toasts also clear a modal's own overlay; the two ties on DOM/paint order if both happen to
227
+ be visible at once, which is an acceptable edge case for a transient notification. */
228
+ --_z-index: var(--display-toast-provider-z-index, 999999);
229
+
223
230
  position: fixed;
224
231
  display: flex;
225
232
  flex-direction: column;
226
233
  gap: 8px;
227
- z-index: 100;
234
+ z-index: var(--_z-index);
228
235
 
229
236
  inset-inline: var(--_gutter);
230
237
  margin-inline: auto;
package/app/components/02.molecules/expandable/accordian/tests/__snapshots__/AccordianCore.spec.ts.snap CHANGED
@@ -6,7 +6,7 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
6
6
  <details class="expanding-panel-details" name="snapshot-accordian">
7
7
  <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
8
8
  <div class="label-wrapper"></div>
9
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
9
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
10
10
  </summary>
11
11
  <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"></div>
12
12
  </details>
@@ -15,7 +15,7 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
15
15
  <details class="expanding-panel-details" name="snapshot-accordian">
16
16
  <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
17
17
  <div class="label-wrapper"></div>
18
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
18
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
19
19
  </summary>
20
20
  <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"></div>
21
21
  </details>
@@ -24,7 +24,7 @@ exports[`AccordianCore > renders correct HTML structure with all props set 1`] =
24
24
  <details class="expanding-panel-details" name="snapshot-accordian">
25
25
  <summary id="id-snapshot-accordian-trigger" class="expanding-panel-summary" aria-controls="id-snapshot-accordian-content" aria-expanded="false">
26
26
  <div class="label-wrapper"></div>
27
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
27
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
28
28
  </summary>
29
29
  <div id="id-snapshot-accordian-content" class="expanding-panel-content" aria-labelledby="id-snapshot-accordian-trigger" role="region"></div>
30
30
  </details>
@@ -38,7 +38,7 @@ exports[`AccordianCore > renders correct HTML structure with default props 1`] =
38
38
  <details class="expanding-panel-details" name="v-0-0-0">
39
39
  <summary id="id-v-0-0-0-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-0-content" aria-expanded="false">
40
40
  <div class="label-wrapper"></div>
41
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
41
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
42
42
  </summary>
43
43
  <div id="id-v-0-0-0-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-0-trigger" role="region"></div>
44
44
  </details>
@@ -47,7 +47,7 @@ exports[`AccordianCore > renders correct HTML structure with default props 1`] =
47
47
  <details class="expanding-panel-details" name="v-0-0-1">
48
48
  <summary id="id-v-0-0-1-trigger" class="expanding-panel-summary" aria-controls="id-v-0-0-1-content" aria-expanded="false">
49
49
  <div class="label-wrapper"></div>
50
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
50
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
51
51
  </summary>
52
52
  <div id="id-v-0-0-1-content" class="expanding-panel-content" aria-labelledby="id-v-0-0-1-trigger" role="region"></div>
53
53
  </details>
package/app/components/02.molecules/expandable/expanding-panel/ExpandingPanel.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  </div>
14
14
  <div class="icon-wrapper" :class="{ 'icon-wrapper--hidden': forceOpened }">
15
15
  <slot name="icon">
16
- <Icon name="bi:caret-down-fill" class="icon mi-12" />
16
+ <Icon name="bi:caret-down-fill" class="icon" />
17
17
  </slot>
18
18
  </div>
19
19
  </summary>
package/app/components/02.molecules/expandable/expanding-panel/tests/__snapshots__/ExpandingPanel.spec.ts.snap CHANGED
@@ -5,7 +5,7 @@ exports[`ExpandingPanel > renders correct HTML structure with all props set 1`]
5
5
  <details class="expanding-panel-details" name="snap-all" open="">
6
6
  <summary id="id-snap-all-trigger" class="expanding-panel-summary" aria-controls="id-snap-all-content" aria-expanded="true">
7
7
  <div class="label-wrapper"></div>
8
- <div class="icon-wrapper icon-wrapper--hidden"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
8
+ <div class="icon-wrapper icon-wrapper--hidden"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
9
9
  </summary>
10
10
  <div id="id-snap-all-content" class="expanding-panel-content" aria-labelledby="id-snap-all-trigger" role="region"></div>
11
11
  </details>
@@ -17,7 +17,7 @@ exports[`ExpandingPanel > renders correct HTML structure with contentIsOnTop tru
17
17
  <details class="expanding-panel-details" name="snap-content-on-top">
18
18
  <summary id="id-snap-content-on-top-trigger" class="expanding-panel-summary" aria-controls="id-snap-content-on-top-content" aria-expanded="false">
19
19
  <div class="label-wrapper"></div>
20
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
20
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
21
21
  </summary>
22
22
  <div id="id-snap-content-on-top-content" class="expanding-panel-content" aria-labelledby="id-snap-content-on-top-trigger" role="region"></div>
23
23
  </details>
@@ -29,7 +29,7 @@ exports[`ExpandingPanel > renders correct HTML structure with default props 1`]
29
29
  <details class="expanding-panel-details" name="snap-default">
30
30
  <summary id="id-snap-default-trigger" class="expanding-panel-summary" aria-controls="id-snap-default-content" aria-expanded="false">
31
31
  <div class="label-wrapper"></div>
32
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
32
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
33
33
  </summary>
34
34
  <div id="id-snap-default-content" class="expanding-panel-content" aria-labelledby="id-snap-default-trigger" role="region"></div>
35
35
  </details>
package/app/components/02.molecules/expandable/expanding-panel-classic/ExpandingPanelClassic.vue CHANGED
@@ -13,7 +13,7 @@
13
13
  </div>
14
14
  <div class="icon-wrapper" :class="{ 'icon-wrapper--hidden': forceOpened }">
15
15
  <slot name="icon">
16
- <Icon name="bi:caret-down-fill" class="icon mi-12" />
16
+ <Icon name="bi:caret-down-fill" class="icon" />
17
17
  </slot>
18
18
  </div>
19
19
  </summary>
package/app/components/02.molecules/expandable/expanding-panel-classic/tests/__snapshots__/ExpandingPanelClassic.spec.ts.snap CHANGED
@@ -5,7 +5,7 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with all props s
5
5
  <details class="expanding-panel-classic-details" name="snap-all" open="">
6
6
  <summary id="id-snap-all-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-all-content" aria-expanded="true">
7
7
  <div class="label-wrapper"></div>
8
- <div class="icon-wrapper icon-wrapper--hidden"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
8
+ <div class="icon-wrapper icon-wrapper--hidden"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
9
9
  </summary>
10
10
  </details>
11
11
  <div id="id-snap-all-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-all-trigger" role="region">
@@ -19,7 +19,7 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with contentIsOn
19
19
  <details class="expanding-panel-classic-details" name="snap-content-on-top">
20
20
  <summary id="id-snap-content-on-top-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-content-on-top-content" aria-expanded="false">
21
21
  <div class="label-wrapper"></div>
22
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
22
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
23
23
  </summary>
24
24
  </details>
25
25
  <div id="id-snap-content-on-top-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-content-on-top-trigger" role="region">
@@ -33,7 +33,7 @@ exports[`ExpandingPanelClassic > renders correct HTML structure with default pro
33
33
  <details class="expanding-panel-classic-details" name="snap-default">
34
34
  <summary id="id-snap-default-trigger" class="expanding-panel-classic-summary" aria-controls="id-snap-default-content" aria-expanded="false">
35
35
  <div class="label-wrapper"></div>
36
- <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon mi-12" aria-hidden="true"></span></div>
36
+ <div class="icon-wrapper"><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></div>
37
37
  </summary>
38
38
  </details>
39
39
  <div id="id-snap-default-content" class="expanding-panel-classic-content" aria-labelledby="id-snap-default-trigger" role="region">
package/app/components/display-details/DisplayDetailsCore.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <slot name="summary"></slot>
6
6
  </span>
7
7
  <slot name="summaryIcon">
8
- <Icon name="bi:caret-down-fill" class="icon mi-12" :class="iconSize" />
8
+ <Icon name="bi:caret-down-fill" class="icon" :class="iconSize" />
9
9
  </slot>
10
10
  </summary>
11
11
  <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "9.3.3",
4
+ "version": "9.3.5",
5
5
  "main": "nuxt.config.ts",
6
6
  "types": "types.d.ts",
7
7
  "license": "MIT",