luxen-ui 0.3.0 → 0.5.0

package/cdn/styles/elements/divider.css

@@ -52,6 +52,13 @@
     padding-inline: var(--spacing-2, 0.5rem);
   }
 
+  /* Compact form when slotted into <l-dropdown>: bleed to panel edges, tighten spacing. */
+  l-dropdown l-divider:not([orientation='vertical']) {
+    margin-block: var(--padding, 0.25rem);
+    margin-inline: calc(var(--padding, 0.25rem) * -1);
+    width: auto;
+  }
+
   /*
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    vertical

package/cdn/styles/elements/select.css

@@ -1,6 +1,6 @@
 @layer components {
   .l-select {
-    --radius: 4px;
+    --border-radius: 4px;
     --border-color: light-dark(var(--color-gray-200), var(--color-gray-800));
 
     &,
@@ -14,7 +14,7 @@
 
     &::picker(select) {
       border: 1px solid var(--border-color);
-      border-radius: var(--radius);
+      border-radius: var(--border-radius);
       min-width: 180px;
       margin-block-start: 0.25rem;
       padding: 4px;
@@ -50,7 +50,7 @@
     padding-block: 6px;
     isolation: isolate;
     cursor: pointer;
-    border-radius: var(--radius);
+    border-radius: var(--border-radius);
 
     &::checkmark {
       background-color: currentColor;

package/cdn/styles/elements/stories.css

@@ -0,0 +1,63 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆂🆃🅾🆁🅸🅴🆂  (the row)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-stories {
+    /* Per-appearance defaults — each appearance overrides these below. */
+    --size: 80px;
+    --aspect-ratio: 1;
+    --radius: var(--radius-full);
+    --gap: 1rem;
+
+    --ring-color: var(--l-color-bg-fill-brand);
+    /* Same as `--ring-color` by default — no visual distinction for "seen" stories. Override `--ring-color-seen` (e.g. `color-mix(in oklab, var(--ring-color), transparent 65%)`) to fade viewed thumbnails Instagram-style. */
+    --ring-color-seen: var(--ring-color);
+    --ring-width: 2px;
+    /* Default 3 px gap between the image and the ring — matches the Instagram Stories pattern that consumers expect from this widget. Filled with `--ring-offset-color` (defaults to the page surface color). For pages with a non-default background, override `--ring-offset-color` to match. */
+    --ring-offset: 3px;
+    --ring-offset-color: var(--l-color-surface);
+    --label-color: var(--l-color-text-primary);
+
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--gap);
+    /* The row itself has no overflow viewport — items stay flush at the edges and the focus ring is free to extend into the surrounding container's padding. Consumers wrap in a scroll container if they need horizontal scrolling. */
+
+    /* Squared appearance — no ring, no offset, image edge-to-edge. */
+    &[appearance='squared'] {
+      --size: 100px;
+      --radius: 0.75rem;
+      --ring-color: transparent;
+      --ring-width: 0;
+      --ring-offset: 0px;
+    }
+
+    /* Portrait card appearance (Image #19) — no ring, no offset. */
+    &[appearance='portrait'] {
+      --size: 160px;
+      --aspect-ratio: 9 / 16;
+      --radius: 1rem;
+      --ring-color: transparent;
+      --ring-width: 0;
+      --ring-offset: 0px;
+    }
+
+    /* Landscape appearance — no ring, no offset. */
+    &[appearance='landscape'] {
+      --size: 200px;
+      --aspect-ratio: 16 / 9;
+      --radius: 0.75rem;
+      --ring-color: transparent;
+      --ring-width: 0;
+      --ring-offset: 0px;
+    }
+  }
+
+  /* Hide labels when the row opts out. */
+  l-stories[with-labels='false'] l-story .l-story-label {
+    display: none;
+  }
+}

package/cdn/styles/elements/story.css

@@ -0,0 +1,192 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆂🆃🅾🆁🆈  (a single thumbnail)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-story {
+    display: inline-flex;
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+
+    /* Inherit row tokens; these can also be set directly per-story. */
+    --size: inherit;
+    --aspect-ratio: inherit;
+    --radius: inherit;
+  }
+
+  /* Slot-marked children of l-story are data (cta, header) carried by the story for the viewer to pick up. They must not render in the row. */
+  l-story > [slot] {
+    display: none;
+  }
+
+  .l-story-trigger {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    /* `--size` is the outer thumbnail diameter (image + ring + offset gap). The image inside is `--size − 2×(--ring-width + --ring-offset)`. Matches the convention of avatar/badge libraries: layout footprint stays fixed regardless of ring config. */
+    width: var(--size);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    text-align: center;
+    outline: none;
+  }
+
+  .l-story-thumb {
+    position: relative;
+    display: block;
+    width: 100%;
+    aspect-ratio: var(--aspect-ratio);
+    border-radius: var(--radius);
+    /* Multi-layer background composition (no pseudo-element):
+       - border-box layer: ring color (solid, linear-gradient, conic-gradient, image…)
+       - padding-box layer: gap color (a `linear-gradient` wrapper on the offset color so it's a valid background-image and works in non-final layers)
+       The image fills content-box and covers the inner area. */
+    border: var(--ring-width) solid transparent;
+    padding: var(--ring-offset);
+    box-sizing: border-box;
+    background:
+      linear-gradient(var(--ring-offset-color), var(--ring-offset-color)) padding-box,
+      var(--ring-color) border-box;
+    transition: transform 150ms cubic-bezier(0.44, 0.36, 0.04, 1);
+    isolation: isolate;
+  }
+
+  l-story[seen] .l-story-thumb {
+    --ring-color: var(--ring-color-seen);
+  }
+
+  /* Focus ring hugs the thumbnail shape (circle, portrait, etc.) — label stays outside the ring. */
+  .l-story-trigger:focus-visible .l-story-thumb {
+    outline: 2px solid var(--l-focus-ring);
+    outline-offset: 3px;
+  }
+
+  .l-story-trigger:hover .l-story-thumb {
+    transform: scale(1.03);
+  }
+
+  .l-story-thumb img,
+  .l-story-thumb video {
+    position: absolute;
+    /* Inset by the offset to position the image in the thumb's content-box, leaving the padding visible as the gap. */
+    inset: var(--ring-offset);
+    width: calc(100% - 2 * var(--ring-offset));
+    height: calc(100% - 2 * var(--ring-offset));
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  .l-story-play {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+
+    & l-icon {
+      display: grid;
+      place-items: center;
+      width: clamp(24px, 28%, 36px);
+      aspect-ratio: 1;
+      border-radius: 999px;
+      background: rgb(0 0 0 / 35%);
+      color: white;
+      font-size: clamp(14px, 18%, 22px);
+    }
+  }
+
+  .l-story-label {
+    display: block;
+    width: 100%;
+    color: var(--label-color);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.2;
+    /* Wrap onto multiple lines, centered. `text-wrap: balance` evens out the line lengths (e.g. "Questions / fréquentes" instead of "Questions fréquentes / "). */
+    text-align: center;
+    text-wrap: balance;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅿🆄🅻🆂🅴  (attention halo + breathing scale on the thumbnail)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-story[pulse] {
+    /* Local pulse customization knobs. */
+    --pulse-color: var(--l-color-bg-fill-brand);
+    --pulse-spread: 12px;
+    --pulse-duration: 1.6s;
+  }
+
+  l-story[pulse] .l-story-thumb {
+    animation: l-story-pulse-thumb var(--pulse-duration) ease-in-out infinite;
+  }
+
+  /* Halo expands outward and fades. Matches the thumb shape via inherited radius. */
+  l-story[pulse] .l-story-thumb::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    animation: l-story-pulse-halo var(--pulse-duration) cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  /* On hover, freeze the breathing animation and use the regular hover scale so the two motions don't compound. */
+  l-story[pulse] .l-story-trigger:hover .l-story-thumb {
+    animation-play-state: paused;
+    transform: scale(1.05);
+  }
+  l-story[pulse] .l-story-trigger:hover .l-story-thumb::after {
+    animation-play-state: paused;
+    box-shadow: none;
+  }
+
+  @keyframes l-story-pulse-thumb {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.04);
+    }
+  }
+
+  @keyframes l-story-pulse-halo {
+    0% {
+      box-shadow: 0 0 0 0 var(--pulse-color);
+      opacity: 1;
+    }
+    70% {
+      box-shadow: 0 0 0 var(--pulse-spread) var(--pulse-color);
+      opacity: 0;
+    }
+    100% {
+      box-shadow: 0 0 0 var(--pulse-spread) var(--pulse-color);
+      opacity: 0;
+    }
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .l-story-thumb {
+      transition: none;
+    }
+    .l-story-trigger:hover .l-story-thumb {
+      transform: none;
+    }
+    l-story[pulse] .l-story-thumb,
+    l-story[pulse] .l-story-thumb::after {
+      animation: none;
+    }
+  }
+}

package/cdn/styles/index.css

@@ -767,6 +767,9 @@ In dark mode, mixes the base color with black (default 15% black).
   /* Semi-transparent backdrop behind modals, dialogs, drawers, and any overlay that dims the page content. Darker in dark mode for better contrast against dark surfaces. */
   --l-backdrop: light-dark(oklch(46% 0.01 260 / 33%), oklch(15% 0.01 260 / 60%));
 
+  /* Stronger backdrop for immersive overlays where the underlying page should fade well into the background — media viewers (`<l-stories-viewer>`), lightboxes, and full-screen players. The page stays barely perceptible but visual focus is unambiguously on the foreground. */
+  --l-backdrop-strong: light-dark(oklch(15% 0.01 260 / 78%), oklch(5% 0 0 / 88%));
+
   /* Default border for form controls, secondary buttons, inputs, selects, and any element that needs a thin neutral outline. Visible enough to delimit the element without competing with surrounding content. */
   --l-color-border: light-dark(var(--color-gray-300), var(--color-gray-600));
 

package/dist/css/elements/divider.css

@@ -52,6 +52,13 @@
     padding-inline: var(--spacing-2, 0.5rem);
   }
 
+  /* Compact form when slotted into <l-dropdown>: bleed to panel edges, tighten spacing. */
+  l-dropdown l-divider:not([orientation='vertical']) {
+    margin-block: var(--padding, 0.25rem);
+    margin-inline: calc(var(--padding, 0.25rem) * -1);
+    width: auto;
+  }
+
   /*
   ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    vertical

package/dist/css/elements/select.css

@@ -1,6 +1,6 @@
 @layer components {
   .l-select {
-    --radius: 4px;
+    --border-radius: 4px;
     --border-color: light-dark(var(--color-gray-200), var(--color-gray-800));
 
     &,
@@ -14,7 +14,7 @@
 
     &::picker(select) {
       border: 1px solid var(--border-color);
-      border-radius: var(--radius);
+      border-radius: var(--border-radius);
       min-width: 180px;
       margin-block-start: 0.25rem;
       padding: 4px;
@@ -50,7 +50,7 @@
     padding-block: 6px;
     isolation: isolate;
     cursor: pointer;
-    border-radius: var(--radius);
+    border-radius: var(--border-radius);
 
     &::checkmark {
       background-color: currentColor;

package/dist/css/elements/stories.css

@@ -0,0 +1,63 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆂🆃🅾🆁🅸🅴🆂  (the row)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-stories {
+    /* Per-appearance defaults — each appearance overrides these below. */
+    --size: 80px;
+    --aspect-ratio: 1;
+    --radius: var(--radius-full);
+    --gap: 1rem;
+
+    --ring-color: var(--l-color-bg-fill-brand);
+    /* Same as `--ring-color` by default — no visual distinction for "seen" stories. Override `--ring-color-seen` (e.g. `color-mix(in oklab, var(--ring-color), transparent 65%)`) to fade viewed thumbnails Instagram-style. */
+    --ring-color-seen: var(--ring-color);
+    --ring-width: 2px;
+    /* Default 3 px gap between the image and the ring — matches the Instagram Stories pattern that consumers expect from this widget. Filled with `--ring-offset-color` (defaults to the page surface color). For pages with a non-default background, override `--ring-offset-color` to match. */
+    --ring-offset: 3px;
+    --ring-offset-color: var(--l-color-surface);
+    --label-color: var(--l-color-text-primary);
+
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--gap);
+    /* The row itself has no overflow viewport — items stay flush at the edges and the focus ring is free to extend into the surrounding container's padding. Consumers wrap in a scroll container if they need horizontal scrolling. */
+
+    /* Squared appearance — no ring, no offset, image edge-to-edge. */
+    &[appearance='squared'] {
+      --size: 100px;
+      --radius: 0.75rem;
+      --ring-color: transparent;
+      --ring-width: 0;
+      --ring-offset: 0px;
+    }
+
+    /* Portrait card appearance (Image #19) — no ring, no offset. */
+    &[appearance='portrait'] {
+      --size: 160px;
+      --aspect-ratio: 9 / 16;
+      --radius: 1rem;
+      --ring-color: transparent;
+      --ring-width: 0;
+      --ring-offset: 0px;
+    }
+
+    /* Landscape appearance — no ring, no offset. */
+    &[appearance='landscape'] {
+      --size: 200px;
+      --aspect-ratio: 16 / 9;
+      --radius: 0.75rem;
+      --ring-color: transparent;
+      --ring-width: 0;
+      --ring-offset: 0px;
+    }
+  }
+
+  /* Hide labels when the row opts out. */
+  l-stories[with-labels='false'] l-story .l-story-label {
+    display: none;
+  }
+}

package/dist/css/elements/story.css

@@ -0,0 +1,192 @@
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆂🆃🅾🆁🆈  (a single thumbnail)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-story {
+    display: inline-flex;
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+
+    /* Inherit row tokens; these can also be set directly per-story. */
+    --size: inherit;
+    --aspect-ratio: inherit;
+    --radius: inherit;
+  }
+
+  /* Slot-marked children of l-story are data (cta, header) carried by the story for the viewer to pick up. They must not render in the row. */
+  l-story > [slot] {
+    display: none;
+  }
+
+  .l-story-trigger {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    /* `--size` is the outer thumbnail diameter (image + ring + offset gap). The image inside is `--size − 2×(--ring-width + --ring-offset)`. Matches the convention of avatar/badge libraries: layout footprint stays fixed regardless of ring config. */
+    width: var(--size);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    text-align: center;
+    outline: none;
+  }
+
+  .l-story-thumb {
+    position: relative;
+    display: block;
+    width: 100%;
+    aspect-ratio: var(--aspect-ratio);
+    border-radius: var(--radius);
+    /* Multi-layer background composition (no pseudo-element):
+       - border-box layer: ring color (solid, linear-gradient, conic-gradient, image…)
+       - padding-box layer: gap color (a `linear-gradient` wrapper on the offset color so it's a valid background-image and works in non-final layers)
+       The image fills content-box and covers the inner area. */
+    border: var(--ring-width) solid transparent;
+    padding: var(--ring-offset);
+    box-sizing: border-box;
+    background:
+      linear-gradient(var(--ring-offset-color), var(--ring-offset-color)) padding-box,
+      var(--ring-color) border-box;
+    transition: transform 150ms cubic-bezier(0.44, 0.36, 0.04, 1);
+    isolation: isolate;
+  }
+
+  l-story[seen] .l-story-thumb {
+    --ring-color: var(--ring-color-seen);
+  }
+
+  /* Focus ring hugs the thumbnail shape (circle, portrait, etc.) — label stays outside the ring. */
+  .l-story-trigger:focus-visible .l-story-thumb {
+    outline: 2px solid var(--l-focus-ring);
+    outline-offset: 3px;
+  }
+
+  .l-story-trigger:hover .l-story-thumb {
+    transform: scale(1.03);
+  }
+
+  .l-story-thumb img,
+  .l-story-thumb video {
+    position: absolute;
+    /* Inset by the offset to position the image in the thumb's content-box, leaving the padding visible as the gap. */
+    inset: var(--ring-offset);
+    width: calc(100% - 2 * var(--ring-offset));
+    height: calc(100% - 2 * var(--ring-offset));
+    object-fit: cover;
+    border-radius: inherit;
+  }
+
+  .l-story-play {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+
+    & l-icon {
+      display: grid;
+      place-items: center;
+      width: clamp(24px, 28%, 36px);
+      aspect-ratio: 1;
+      border-radius: 999px;
+      background: rgb(0 0 0 / 35%);
+      color: white;
+      font-size: clamp(14px, 18%, 22px);
+    }
+  }
+
+  .l-story-label {
+    display: block;
+    width: 100%;
+    color: var(--label-color);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.2;
+    /* Wrap onto multiple lines, centered. `text-wrap: balance` evens out the line lengths (e.g. "Questions / fréquentes" instead of "Questions fréquentes / "). */
+    text-align: center;
+    text-wrap: balance;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅿🆄🅻🆂🅴  (attention halo + breathing scale on the thumbnail)
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-story[pulse] {
+    /* Local pulse customization knobs. */
+    --pulse-color: var(--l-color-bg-fill-brand);
+    --pulse-spread: 12px;
+    --pulse-duration: 1.6s;
+  }
+
+  l-story[pulse] .l-story-thumb {
+    animation: l-story-pulse-thumb var(--pulse-duration) ease-in-out infinite;
+  }
+
+  /* Halo expands outward and fades. Matches the thumb shape via inherited radius. */
+  l-story[pulse] .l-story-thumb::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    animation: l-story-pulse-halo var(--pulse-duration) cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  /* On hover, freeze the breathing animation and use the regular hover scale so the two motions don't compound. */
+  l-story[pulse] .l-story-trigger:hover .l-story-thumb {
+    animation-play-state: paused;
+    transform: scale(1.05);
+  }
+  l-story[pulse] .l-story-trigger:hover .l-story-thumb::after {
+    animation-play-state: paused;
+    box-shadow: none;
+  }
+
+  @keyframes l-story-pulse-thumb {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.04);
+    }
+  }
+
+  @keyframes l-story-pulse-halo {
+    0% {
+      box-shadow: 0 0 0 0 var(--pulse-color);
+      opacity: 1;
+    }
+    70% {
+      box-shadow: 0 0 0 var(--pulse-spread) var(--pulse-color);
+      opacity: 0;
+    }
+    100% {
+      box-shadow: 0 0 0 var(--pulse-spread) var(--pulse-color);
+      opacity: 0;
+    }
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .l-story-thumb {
+      transition: none;
+    }
+    .l-story-trigger:hover .l-story-thumb {
+      transform: none;
+    }
+    l-story[pulse] .l-story-thumb,
+    l-story[pulse] .l-story-thumb::after {
+      animation: none;
+    }
+  }
+}

package/dist/css/index.css

@@ -767,6 +767,9 @@ In dark mode, mixes the base color with black (default 15% black).
   /* Semi-transparent backdrop behind modals, dialogs, drawers, and any overlay that dims the page content. Darker in dark mode for better contrast against dark surfaces. */
   --l-backdrop: light-dark(oklch(46% 0.01 260 / 33%), oklch(15% 0.01 260 / 60%));
 
+  /* Stronger backdrop for immersive overlays where the underlying page should fade well into the background — media viewers (`<l-stories-viewer>`), lightboxes, and full-screen players. The page stays barely perceptible but visual focus is unambiguously on the foreground. */
+  --l-backdrop-strong: light-dark(oklch(15% 0.01 260 / 78%), oklch(5% 0 0 / 88%));
+
   /* Default border for form controls, secondary buttons, inputs, selects, and any element that needs a thin neutral outline. Visible enough to delimit the element without competing with surrounding content. */
   --l-color-border: light-dark(var(--color-gray-300), var(--color-gray-600));