srcdev-nuxt-components 9.5.5 → 9.5.7

package/app/assets/styles/setup/06.utility-classes/animations/_entry-exit-blur.css

@@ -1,7 +1,9 @@
 @media (prefers-reduced-motion: no-preference) {
-  .entry-exit-blur {
-    animation: entryExitBlurAnimation linear both;
-    animation-timeline: view();
+  @supports (animation-timeline: view()) {
+    .entry-exit-blur {
+      animation: entryExitBlurAnimation linear both;
+      animation-timeline: view();
+    }
   }
 }
 @keyframes entryExitBlurAnimation {

package/app/assets/styles/setup/06.utility-classes/animations/_entry-slide-in.css

@@ -8,8 +8,10 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .entry-slide-in {
-    animation: entrySlideInAnimation forwards;
-    animation-timeline: view(70% 5%);
+  @supports (animation-timeline: view()) {
+    .entry-slide-in {
+      animation: entrySlideInAnimation forwards;
+      animation-timeline: view(70% 5%);
+    }
   }
 }

package/app/assets/styles/setup/06.utility-classes/animations/_entry-zoom-reveal.css

@@ -10,8 +10,10 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .entry-zoom-reveal {
-    animation: entryZoomRevealAnimation both;
-    animation-timeline: view(70% 5%);
+  @supports (animation-timeline: view()) {
+    .entry-zoom-reveal {
+      animation: entryZoomRevealAnimation both;
+      animation-timeline: view(70% 5%);
+    }
   }
 }

package/app/components/01.atoms/animations/entry/CONSUMER-STYLING.md

@@ -31,8 +31,12 @@ any passthrough classes.
 ## Motion
 
 - All three classes only animate inside `@media (prefers-reduced-motion: no-preference)`.
-- They use `animation-timeline: view(...)` (scroll-driven). In a browser without scroll-driven
-  animation support the animation completes immediately, so the content just appears in place.
+- They use `animation-timeline: view(...)` (scroll-driven), inside an
+  `@supports (animation-timeline: view())` guard, so a browser without scroll-driven animations
+  (Safari before 26, Firefox) shows the content in place with no animation.
+
+> Changed 2026-10-05: the guard is new. Before it, an unsupported browser ran the animation with a
+> zero duration and kept its end keyframe, which for `entry-exit-blur` left the content blurred.
 
 ---
 

package/app/components/01.atoms/display-tooltip/CONSUMER-STYLING.md

@@ -17,6 +17,8 @@
 | `--display-tooltip-popover-width` | `30rem` | Popover panel width |
 | `--display-tooltip-popover-padding` | `1.2rem` | Popover panel content padding |
 | `--display-tooltip-popover-content-gap` | `1.2rem` | Gap between stacked children in the `tooltipContent` slot |
+| `--display-tooltip-popover-font-size` | `1.4rem` | Popover text size (`DisplayTooltipDefined` sets its own per-element sizes) |
+| `--display-tooltip-popover-line-height` | `1.4` | Popover text line height |
 | `--display-tooltip-popover-outline-width` | `0.1rem` | Popover panel outline (border) width |
 | `--display-tooltip-popover-outline-colour` | `var(--slate-02)` | Popover panel outline (border) colour |
 | `--display-tooltip-popover-text-colour` | `var(--slate-09)` | Popover panel text colour |
@@ -24,6 +26,7 @@
 | `--display-tooltip-popover-border-radius` | `0.8rem` | Popover panel corner radius |
 | `--display-tooltip-popover-shadow` | `0 0.4rem 1.6rem rgba(0,0,0,.12)` | Popover panel elevation shadow |
 | `--display-tooltip-popover-offset` | `0.1rem` | Gap between the trigger and the popover panel |
+| `--display-tooltip-popover-z-index` | `999999` | Panel stacking order in browsers without CSS anchor positioning. Ignored where the panel renders in the top layer |
 | `--display-tooltip-close-button-colour` | `var(--slate-09)` | Close button text colour (used by `DisplayTooltipDefined`) |
 | `--display-tooltip-close-button-border-width` | `0.1rem` | Close button border width |
 | `--display-tooltip-close-button-border-colour` | `var(--slate-03)` | Close button border colour |
@@ -61,13 +64,22 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ## Notes
 
+- Direct children of the `tooltipContent` slot have their block margins reset to `0` (inside
+  `:where()`, so any margin you set on them still wins): the gap token is the only spacing between
+  them. Before 2026-10-05 a slotted `<p>` kept its browser `1em` margins on top of the padding.
+
 - The trigger button is vertically centred on the first line of `triggerContent` text, using
   `--display-tooltip-trigger-icon-box-size`, `-padding` and `-border-width` to work out its height.
   Give `--display-tooltip-trigger-padding` a single length (e.g. `0.4rem`): a two-value shorthand
   breaks that calculation, and the button is square anyway.
-- Built on the native Popover API (`popover`/`popovertarget`) and CSS anchor-positioning
-  (`anchor-name`/`position-anchor`/`anchor()`) — check current browser support before relying on
-  it where broad support is a hard requirement.
+- Built on the native Popover API and CSS anchor positioning, with fallbacks: without anchor
+  positioning (e.g. Safari 17–18) the panel is placed with `position: fixed` from the trigger's
+  measured position and flips left (`.display-tooltip-popover[data-placement="left"]`) when there's
+  no room on the right. Without the Popover API (Safari 16) it opens and closes in JS, shows via
+  `.display-tooltip-popover-open` (style it in a separate rule from `:popover-open`: a selector list
+  containing `:popover-open` is dropped whole where unsupported), isn't in the top layer (so the
+  z-index token applies), and an ancestor with `transform`, `filter` or `contain` can misplace it.
+  The trigger's `aria-expanded` tracks the open state in every browser.
 - The `.display-tooltip-close-button` styled here is rendered by `DisplayTooltipDefined`, not this
   component directly — `DisplayTooltip` only provides the `tooltipContent` slot, so a plain
   `DisplayTooltip` usage supplies its own close affordance if it wants one (give it

package/app/components/01.atoms/display-tooltip/DisplayTooltip.vue

@@ -1,20 +1,38 @@
 <template>
-  <div class="display-tooltip-core" :class="[elementClasses]" :style="{ '--_anchor-name': tooltipAnchorName }">
+  <div
+    ref="rootRef"
+    class="display-tooltip-core"
+    :class="[elementClasses]"
+    :style="{ '--_anchor-name': tooltipAnchorName }"
+  >
     <div class="display-tooltip-trigger-wrapper body-md">
       <slot v-if="$slots.triggerContent" name="triggerContent"></slot>
       <button
+        ref="triggerRef"
         :popovertarget="tooltipId"
         popovertargetaction="toggle"
         class="display-tooltip-trigger-button"
         :class="{ hide: hideTrigger }"
         :aria-label="triggerAriaLabel"
+        :aria-expanded="isOpen"
+        @click="handleTriggerClick"
       >
         <Icon name="fa7-solid:circle-question" class="display-tooltip-trigger-icon" aria-hidden="true" />
       </button>
     </div>
-    <div :id="tooltipId" popover class="display-tooltip-popover">
+    <div
+      :id="tooltipId"
+      ref="popoverRef"
+      popover
+      class="display-tooltip-popover"
+      :class="{ 'display-tooltip-popover-open': usesFallbackPopover && isOpen }"
+      :style="positionStyle"
+      :data-placement="popoverPlacement"
+      @beforetoggle="handleBeforeToggle"
+      @toggle="handleToggle"
+    >
       <div class="display-tooltip-popover-content">
-        <slot name="tooltipContent"></slot>
+        <slot name="tooltipContent" :close="hide"></slot>
       </div>
     </div>
   </div>
@@ -39,6 +57,21 @@ const props = withDefaults(defineProps<Props>(), {
 const tooltipId = computed(() => (props.tooltipId.length ? props.tooltipId : `nuxt-tooltip-${useId()}`));
 const tooltipAnchorName = `--tooltip-anchor-${useId()}`;
 
+const rootRef = ref<HTMLElement | null>(null);
+const triggerRef = ref<HTMLElement | null>(null);
+const popoverRef = ref<HTMLElement | null>(null);
+
+const {
+  isOpen,
+  usesFallbackPopover,
+  positionStyle,
+  popoverPlacement,
+  hide,
+  handleTriggerClick,
+  handleBeforeToggle,
+  handleToggle,
+} = useAnchoredPopover({ rootRef, triggerRef, popoverRef, side: "right" });
+
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
@@ -141,6 +174,13 @@ watch(
         display: flex;
         flex-direction: column;
         gap: var(--display-tooltip-popover-content-gap, 1.2rem);
+        font-size: var(--display-tooltip-popover-font-size, 1.4rem);
+        line-height: var(--display-tooltip-popover-line-height, 1.4);
+
+        /* Gap is the only spacing between slotted elements; :where keeps consumer margins winning. */
+        > :where(*) {
+          margin-block: 0;
+        }
 
         .display-tooltip-close-button {
           all: unset;
@@ -174,6 +214,25 @@ watch(
           opacity: 0;
         }
       }
+
+      /* Kept apart from :popover-open, which would invalidate a shared selector list where unsupported. */
+      &.display-tooltip-popover-open {
+        display: flex;
+        opacity: 1;
+        flex-direction: column;
+      }
+
+      @supports not (anchor-name: --a) {
+        position: fixed;
+        top: var(--_anchor-top, 0px);
+        left: calc(var(--_anchor-right, 0px) + var(--display-tooltip-popover-offset, 0.1rem));
+        z-index: var(--display-tooltip-popover-z-index, 999999);
+
+        &[data-placement="left"] {
+          left: auto;
+          right: calc(var(--_anchor-left-inverse, 0px) + var(--display-tooltip-popover-offset, 0.1rem));
+        }
+      }
     }
   }
 }

package/app/components/01.atoms/display-tooltip/tests/DisplayTooltip.spec.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import DisplayTooltip from "../DisplayTooltip.vue";
 
@@ -72,4 +72,39 @@ describe("DisplayTooltip", () => {
     expect(wrapper.classes()).not.toContain("initial-class");
     expect(wrapper.classes()).toContain("updated-class");
   });
+
+  describe("without the Popover API", () => {
+    beforeEach(() => {
+      Object.defineProperty(HTMLElement.prototype, "showPopover", { value: undefined, writable: true, configurable: true });
+    });
+
+    afterEach(() => {
+      delete (HTMLElement.prototype as unknown as Record<string, unknown>)["showPopover"];
+    });
+
+    it("opens and closes from the trigger", async () => {
+      const wrapper = await mountSuspended(DisplayTooltip);
+      const trigger = wrapper.find(".display-tooltip-trigger-button");
+      const popover = wrapper.find(".display-tooltip-popover");
+
+      await trigger.trigger("click");
+      expect(popover.classes()).toContain("display-tooltip-popover-open");
+      expect(trigger.attributes("aria-expanded")).toBe("true");
+
+      await trigger.trigger("click");
+      expect(popover.classes()).not.toContain("display-tooltip-popover-open");
+      expect(trigger.attributes("aria-expanded")).toBe("false");
+    });
+
+    it("passes a close function to the tooltipContent slot", async () => {
+      const wrapper = await mountSuspended(DisplayTooltip, {
+        slots: {
+          tooltipContent: `<template #tooltipContent="{ close }"><button class="custom-close" @click="close">Done</button></template>`,
+        },
+      });
+      await wrapper.find(".display-tooltip-trigger-button").trigger("click");
+      await wrapper.find(".custom-close").trigger("click");
+      expect(wrapper.find(".display-tooltip-popover").classes()).not.toContain("display-tooltip-popover-open");
+    });
+  });
 });

package/app/components/01.atoms/display-tooltip/tests/__snapshots__/DisplayTooltip.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`DisplayTooltip > renders correct HTML structure 1`] = `
 "<div class="display-tooltip-core" style="--_anchor-name: --tooltip-anchor-v-0-0;">
   <div class="display-tooltip-trigger-wrapper body-md">
-    <!--v-if--><button popovertarget="fixed-id" popovertargetaction="toggle" class="display-tooltip-trigger-button" aria-label="Toggle the popover"><span class="iconify i-fa7-solid:circle-question display-tooltip-trigger-icon" aria-hidden="true"></span></button>
+    <!--v-if--><button popovertarget="fixed-id" popovertargetaction="toggle" class="display-tooltip-trigger-button" aria-label="Toggle the popover" aria-expanded="false"><span class="iconify i-fa7-solid:circle-question display-tooltip-trigger-icon" aria-hidden="true"></span></button>
   </div>
   <div id="fixed-id" popover="" class="display-tooltip-popover">
     <div class="display-tooltip-popover-content"></div>

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

@@ -81,7 +81,7 @@ watch(
       color: var(--skip-links-text-colour, white);
       text-decoration: none;
       padding: var(--skip-links-link-padding-block, 0.8rem) var(--skip-links-link-padding-inline, 1.2rem);
-      text-wrap: nowrap;
+      white-space: nowrap;
 
       &:focus-visible {
         outline: var(--skip-links-focus-outline-width, 2px) solid var(--skip-links-focus-outline-colour, white);

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

@@ -15,6 +15,7 @@
 | `--pop-over-text-colour` | `var(--slate-09)` | Popover panel text colour |
 | `--pop-over-shadow` | `0 0.4rem 1.6rem rgba(0,0,0,.12)` | Popover panel elevation shadow |
 | `--pop-over-transition-duration` | `200ms` | Open/close fade duration |
+| `--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 |
@@ -54,9 +55,14 @@ Set the tokens above on an element you own (a page or section class, or a class
 
 ## Notes
 
-- Built on the native Popover API (`popover`/`popovertarget`) and CSS anchor-positioning
-  (`anchor-name`/`position-anchor`/`anchor()`) — check current browser support before relying on
-  it where broad support is a hard requirement.
+- Built on the native Popover API and CSS anchor positioning, with fallbacks: without anchor
+  positioning (e.g. Safari 17–18) the panel is placed with `position: fixed` from the trigger's
+  measured position, and `.pop-over-popover[data-placement]` holds the resolved side (the
+  `placement` prop's side, or its opposite when that has no room). Without the Popover API
+  (Safari 16) it opens and closes in JS and shows via `.pop-over-popover-open` (style it in a
+  separate rule from `:popover-open`: a selector list containing `:popover-open` is dropped whole
+  where unsupported). It isn't in the top layer there, so the z-index token applies, and an
+  ancestor with `transform`, `filter` or `contain` can misplace it.
 - `placement` (`"top" | "right" | "bottom" | "left"`, default `"right"`) picks which side of the
   trigger the panel opens on; each side gets a `position-try-fallbacks` so the browser flips it
   automatically if it would overflow the viewport.

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

@@ -1,6 +1,12 @@
 <template>
   <ClientOnly>
-    <div class="pop-over" :class="[elementClasses]" :style="{ '--_anchor-name': anchorName }" :data-placement="placement">
+    <div
+      ref="rootRef"
+      class="pop-over"
+      :class="[elementClasses]"
+      :style="{ '--_anchor-name': anchorName }"
+      :data-placement="placement"
+    >
       <button
         ref="triggerRef"
         :popovertarget="popoverId"
@@ -8,11 +14,24 @@
         type="button"
         class="pop-over-trigger"
         :aria-label="triggerAriaLabel || undefined"
+        :aria-expanded="isOpen"
+        @click="handleTriggerClick"
       >
         <slot name="trigger"></slot>
       </button>
 
-      <div :id="popoverId" ref="popoverRef" popover class="pop-over-popover" :aria-label="popoverAriaLabel || undefined" @toggle="handleToggle">
+      <div
+        :id="popoverId"
+        ref="popoverRef"
+        popover
+        class="pop-over-popover"
+        :class="{ 'pop-over-popover-open': usesFallbackPopover && isOpen }"
+        :style="positionStyle"
+        :data-placement="popoverPlacement"
+        :aria-label="popoverAriaLabel || undefined"
+        @beforetoggle="handleBeforeToggle"
+        @toggle="handleToggle"
+      >
         <button
           ref="closeButtonRef"
           :popovertarget="popoverId"
@@ -20,6 +39,7 @@
           type="button"
           class="pop-over-close-button"
           :aria-label="closeButtonAriaLabel"
+          @click="hide"
         >
           <Icon name="lucide:x" class="pop-over-close-button-icon" aria-hidden="true" />
         </button>
@@ -55,17 +75,28 @@ const id = useId();
 const popoverId = `pop-over-${id}`;
 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);
 
-/** Move focus into the popover on open; the Popover API restores focus to the trigger on close. */
-const handleToggle = (event: Event) => {
-  const toggleEvent = event as ToggleEvent;
-  if (toggleEvent.newState === "open") {
-    closeButtonRef.value?.focus();
-  }
-};
+// Focus moves to the close button on open; closing returns it to the trigger in every mode.
+const {
+  isOpen,
+  usesFallbackPopover,
+  positionStyle,
+  popoverPlacement,
+  hide,
+  handleTriggerClick,
+  handleBeforeToggle,
+  handleToggle,
+} = useAnchoredPopover({
+  rootRef,
+  triggerRef,
+  popoverRef,
+  side: () => props.placement,
+  onOpen: () => closeButtonRef.value?.focus(),
+});
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
@@ -128,6 +159,12 @@ watch(
         }
       }
 
+      /* Kept apart from :popover-open, which would invalidate a shared selector list where unsupported. */
+      &.pop-over-popover-open {
+        display: block;
+        opacity: 1;
+      }
+
       .pop-over-close-button {
         all: unset;
         cursor: pointer;
@@ -196,6 +233,30 @@ watch(
       left: anchor(left);
       position-try-fallbacks: flip-block;
     }
+
+    /* After the placement rules above, so the resolved (possibly flipped) side wins over their insets. */
+    @supports not (anchor-name: --a) {
+      .pop-over-popover {
+        position: fixed;
+        z-index: var(--pop-over-z-index, 999999);
+
+        &[data-placement="right"] {
+          inset: var(--_anchor-top, 0px) auto auto calc(var(--_anchor-right, 0px) + var(--pop-over-gap, 1rem));
+        }
+
+        &[data-placement="left"] {
+          inset: var(--_anchor-top, 0px) calc(var(--_anchor-left-inverse, 0px) + var(--pop-over-gap, 1rem)) auto auto;
+        }
+
+        &[data-placement="bottom"] {
+          inset: calc(var(--_anchor-bottom, 0px) + var(--pop-over-gap, 1rem)) auto auto var(--_anchor-left, 0px);
+        }
+
+        &[data-placement="top"] {
+          inset: auto auto calc(var(--_anchor-top-inverse, 0px) + var(--pop-over-gap, 1rem)) var(--_anchor-left, 0px);
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -1,6 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
 import PopOver from "../PopOver.vue";
+import { nextTick } from "vue";
 
 interface PopOverInstance {
   popoverId: string;
@@ -192,4 +193,56 @@ describe("PopOver", () => {
       expect(wrapper.find(".pop-over").classes()).toContain("updated-class");
     });
   });
+
+  describe("Without the Popover API", () => {
+    beforeEach(() => {
+      Object.defineProperty(HTMLElement.prototype, "showPopover", { value: undefined, writable: true, configurable: true });
+    });
+
+    it("opens from the trigger and closes from the close button, returning focus to the trigger", async () => {
+      wrapper = await mountSuspended(PopOver, {
+        slots: { trigger: "<span>Open</span>", content: "<p>Body</p>" },
+        attachTo: document.body,
+      });
+      const trigger = wrapper.find(".pop-over-trigger");
+      const popover = wrapper.find(".pop-over-popover");
+
+      await trigger.trigger("click");
+      await nextTick();
+      expect(popover.classes()).toContain("pop-over-popover-open");
+      expect(trigger.attributes("aria-expanded")).toBe("true");
+      expect(document.activeElement).toBe(wrapper.find(".pop-over-close-button").element);
+
+      await wrapper.find(".pop-over-close-button").trigger("click");
+      expect(popover.classes()).not.toContain("pop-over-popover-open");
+      expect(document.activeElement).toBe(trigger.element);
+    });
+  });
+
+  describe("Without anchor positioning", () => {
+    const originalCSS = globalThis.CSS;
+
+    beforeEach(() => {
+      Object.defineProperty(globalThis, "CSS", { value: { supports: () => false }, writable: true, configurable: true });
+    });
+
+    afterEach(() => {
+      Object.defineProperty(globalThis, "CSS", { value: originalCSS, writable: true, configurable: true });
+    });
+
+    it("places the popover on the current placement prop's side", async () => {
+      wrapper = await createWrapper({ placement: "left" });
+      const vm = wrapper.vm as unknown as PopOverInstance;
+      const popover = wrapper.find(".pop-over-popover");
+
+      vm.handleToggle(Object.assign(new Event("toggle"), { newState: "open" }));
+      await nextTick();
+      expect(popover.attributes("data-placement")).toBe("left");
+
+      await wrapper.setProps({ placement: "top" });
+      vm.handleToggle(Object.assign(new Event("toggle"), { newState: "open" }));
+      await nextTick();
+      expect(popover.attributes("data-placement")).toBe("top");
+    });
+  });
 });

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 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"><span>Open</span></button>
+"<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 class="pop-over-content">
       <p>Details</p>

package/app/components/01.atoms/ui-block-decorated/CONSUMER-STYLING.md

@@ -4,17 +4,25 @@
 
 Each strength level (border 1-6, shadow 1-6, inner shadow 1-4) has its own token, defaulting to a
 built-in elevation/border scale. Only the tokens for the strength levels actually in use need
-overriding.
+overriding. To recolour every level at once, set the colour tokens instead.
+
+The colour tokens are private-wrapped (`--_border-colour`, `--_shadow-colour`, `--_inner-shadow-colour`)
+because each is reused across every strength level; set the public token, not the `--_` one.
 
 | Token | Default | Controls |
 |---|---|---|
-| `--ui-block-decorated-border-1` .. `-6` | `1px` .. `6px solid var(--theme-border)` | Border at each strength level |
-| `--ui-block-decorated-shadow-1` .. `-6` | `0 1px 2px rgba(0,0,0,0.08)` .. `0 24px 32px rgba(0,0,0,0.18)` | Drop shadow at each strength level |
-| `--ui-block-decorated-inner-shadow-1` .. `-4` | `inset 0 1px 2px rgba(0,0,0,0.08)` .. `inset 0 6px 8px rgba(0,0,0,0.14)` | Inset shadow at each strength level |
+| `--ui-block-decorated-border-colour` | `var(--theme-border)` | Border colour for every strength level |
+| `--ui-block-decorated-shadow-colour` | `#000` | Drop shadow colour for every strength level; each level mixes in its own opacity (8% .. 18%) |
+| `--ui-block-decorated-inner-shadow-colour` | `--ui-block-decorated-shadow-colour` | Inner shadow colour for every strength level (8% .. 14% opacity) |
+| `--ui-block-decorated-border-1` .. `-6` | `1px` .. `6px solid` the border colour | Whole border at each strength level |
+| `--ui-block-decorated-shadow-1` .. `-6` | `0 1px 2px` .. `0 24px 32px` in the shadow colour | Whole drop shadow at each strength level |
+| `--ui-block-decorated-inner-shadow-1` .. `-4` | `inset 0 1px 2px` .. `inset 0 6px 8px` in the inner shadow colour | Whole inset shadow at each strength level |
 | `--ui-block-decorated-inner-shadow-highlight` | `inset 0 1px 0 rgba(255,255,255,0.15)` | Highlight layered on top of every inner shadow strength |
 
 ```css
 .my-page {
+  --ui-block-decorated-border-colour: #7c3aed;
+  --ui-block-decorated-shadow-colour: #7c3aed;
   --ui-block-decorated-shadow-3: 0 6px 12px rgba(0, 0, 0, 0.2);
   --ui-block-decorated-border-2: 2px dashed hotpink;
 }

package/app/components/01.atoms/ui-block-decorated/UiBlockDecorated.vue

@@ -43,48 +43,52 @@ watch(
 <style lang="css">
 @layer components {
   .ui-block-decorated {
+    --_border-colour: var(--ui-block-decorated-border-colour, var(--theme-border));
+    --_shadow-colour: var(--ui-block-decorated-shadow-colour, #000);
+    --_inner-shadow-colour: var(--ui-block-decorated-inner-shadow-colour, var(--_shadow-colour));
+
     /*
     * Border strength classes
     */
     &.ui-block-decorated-border-1 {
-      border: var(--ui-block-decorated-border-1, 1px solid var(--theme-border));
+      border: var(--ui-block-decorated-border-1, 1px solid var(--_border-colour));
     }
     &.ui-block-decorated-border-2 {
-      border: var(--ui-block-decorated-border-2, 2px solid var(--theme-border));
+      border: var(--ui-block-decorated-border-2, 2px solid var(--_border-colour));
     }
     &.ui-block-decorated-border-3 {
-      border: var(--ui-block-decorated-border-3, 3px solid var(--theme-border));
+      border: var(--ui-block-decorated-border-3, 3px solid var(--_border-colour));
     }
     &.ui-block-decorated-border-4 {
-      border: var(--ui-block-decorated-border-4, 4px solid var(--theme-border));
+      border: var(--ui-block-decorated-border-4, 4px solid var(--_border-colour));
     }
     &.ui-block-decorated-border-5 {
-      border: var(--ui-block-decorated-border-5, 5px solid var(--theme-border));
+      border: var(--ui-block-decorated-border-5, 5px solid var(--_border-colour));
     }
     &.ui-block-decorated-border-6 {
-      border: var(--ui-block-decorated-border-6, 6px solid var(--theme-border));
+      border: var(--ui-block-decorated-border-6, 6px solid var(--_border-colour));
     }
 
     /*
     * Shadow strength classes
     */
     &.ui-block-decorated-shadow-1 {
-      box-shadow: var(--ui-block-decorated-shadow-1, 0 1px 2px rgba(0, 0, 0, 0.08));
+      box-shadow: var(--ui-block-decorated-shadow-1, 0 1px 2px color-mix(in srgb, var(--_shadow-colour) 8%, transparent));
     }
     &.ui-block-decorated-shadow-2 {
-      box-shadow: var(--ui-block-decorated-shadow-2, 0 2px 4px rgba(0, 0, 0, 0.1));
+      box-shadow: var(--ui-block-decorated-shadow-2, 0 2px 4px color-mix(in srgb, var(--_shadow-colour) 10%, transparent));
     }
     &.ui-block-decorated-shadow-3 {
-      box-shadow: var(--ui-block-decorated-shadow-3, 0 4px 8px rgba(0, 0, 0, 0.12));
+      box-shadow: var(--ui-block-decorated-shadow-3, 0 4px 8px color-mix(in srgb, var(--_shadow-colour) 12%, transparent));
     }
     &.ui-block-decorated-shadow-4 {
-      box-shadow: var(--ui-block-decorated-shadow-4, 0 8px 16px rgba(0, 0, 0, 0.14));
+      box-shadow: var(--ui-block-decorated-shadow-4, 0 8px 16px color-mix(in srgb, var(--_shadow-colour) 14%, transparent));
     }
     &.ui-block-decorated-shadow-5 {
-      box-shadow: var(--ui-block-decorated-shadow-5, 0 16px 24px rgba(0, 0, 0, 0.16));
+      box-shadow: var(--ui-block-decorated-shadow-5, 0 16px 24px color-mix(in srgb, var(--_shadow-colour) 16%, transparent));
     }
     &.ui-block-decorated-shadow-6 {
-      box-shadow: var(--ui-block-decorated-shadow-6, 0 24px 32px rgba(0, 0, 0, 0.18));
+      box-shadow: var(--ui-block-decorated-shadow-6, 0 24px 32px color-mix(in srgb, var(--_shadow-colour) 18%, transparent));
     }
 
     /*
@@ -115,25 +119,25 @@ watch(
 
     &.ui-block-decorated-inner-shadow-1::before {
       box-shadow:
-        var(--ui-block-decorated-inner-shadow-1, inset 0 1px 2px rgba(0, 0, 0, 0.08)),
+        var(--ui-block-decorated-inner-shadow-1, inset 0 1px 2px color-mix(in srgb, var(--_inner-shadow-colour) 8%, transparent)),
         var(--ui-block-decorated-inner-shadow-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.15));
     }
 
     &.ui-block-decorated-inner-shadow-2::before {
       box-shadow:
-        var(--ui-block-decorated-inner-shadow-2, inset 0 2px 4px rgba(0, 0, 0, 0.1)),
+        var(--ui-block-decorated-inner-shadow-2, inset 0 2px 4px color-mix(in srgb, var(--_inner-shadow-colour) 10%, transparent)),
         var(--ui-block-decorated-inner-shadow-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.15));
     }
 
     &.ui-block-decorated-inner-shadow-3::before {
       box-shadow:
-        var(--ui-block-decorated-inner-shadow-3, inset 0 4px 6px rgba(0, 0, 0, 0.12)),
+        var(--ui-block-decorated-inner-shadow-3, inset 0 4px 6px color-mix(in srgb, var(--_inner-shadow-colour) 12%, transparent)),
         var(--ui-block-decorated-inner-shadow-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.15));
     }
 
     &.ui-block-decorated-inner-shadow-4::before {
       box-shadow:
-        var(--ui-block-decorated-inner-shadow-4, inset 0 6px 8px rgba(0, 0, 0, 0.14)),
+        var(--ui-block-decorated-inner-shadow-4, inset 0 6px 8px color-mix(in srgb, var(--_inner-shadow-colour) 14%, transparent)),
         var(--ui-block-decorated-inner-shadow-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.15));
     }
   }