srcdev-nuxt-components 9.5.4 → 9.5.6

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