@olives/devos 2.1.0

package/.agents/skills/modern-web-guidance/guides/user-experience/declarative-dialog-popover-control.md

@@ -0,0 +1,238 @@
+# Overview
+
+Use the Invoker Commands API to toggle the visibility of `<dialog>` and `[popover]` elements directly from HTML buttons, eliminating the need for custom JavaScript event listeners.
+
+By applying the `commandfor` (target ID) and `command` (action) attributes to a `<button>`, the browser automatically handles open/close state changes, focus management, and accessibility bindings (such as `aria-expanded`). This declarative approach is recommended because it removes brittle boilerplate code, ensures interactions are functional immediately upon HTML parsing, and guarantees a robust, natively accessible user experience.
+
+## Implementing Declarative Popovers
+
+Popovers can be toggled open and closed using a single button.
+
+```html
+<!-- MANDATORY: The commandfor attribute links the invoker to the ID of the target element so the browser knows what to control. -->
+<!-- MANDATORY: The command attribute specifies the action to perform. Use 'toggle-popover' to handle both open and close states automatically. -->
+<button commandfor="my-popover" command="toggle-popover">
+  Toggle Popover
+</button>
+
+<!-- MANDATORY: The target element must have the popover attribute to be controlled as a popover. -->
+<div id="my-popover" popover>
+  <p>Popover content goes here.</p>
+</div>
+```
+
+If you need to control opening and closing with separate buttons, you can use the `show-popover` and `hide-popover` commands.
+
+```html
+<!-- MANDATORY: Use 'show-popover' to explicitly open the popover. It will not close the popover if clicked again. -->
+<button commandfor="my-explicit-popover" command="show-popover">
+  Show Popover
+</button>
+
+<div id="my-explicit-popover" popover="manual">
+  <p>This popover is explicitly opened and closed by separate buttons.</p>
+
+  <!-- MANDATORY: Use 'hide-popover' to explicitly close the targeted popover. -->
+  <button commandfor="my-explicit-popover" command="hide-popover">
+    Hide Popover
+  </button>
+</div>
+```
+
+## Implementing Declarative Modal Dialogs
+
+Unlike popovers, modal dialogs typically use separate buttons for opening and closing. Use the `show-modal` command specifically when you need to open a dialog as a modal.
+
+```html
+<!-- MANDATORY: Use command="show-modal" to trigger the dialog as a modal, trapping focus and preventing interaction with the rest of the page. -->
+<!-- MANDATORY: The commandfor attribute connects this button to the dialog ID. -->
+<button commandfor="confirm-dialog" command="show-modal">
+  Open Confirmation
+</button>
+
+<dialog id="confirm-dialog">
+  <p>Are you sure you want to proceed?</p>
+
+  <!-- MANDATORY: Use command="close" to dismiss the dialog safely. -->
+  <button commandfor="confirm-dialog" command="close">
+    Cancel
+  </button>
+</dialog>
+```
+
+## Fallback strategies
+
+Baseline status for Invoker commands: Newly available. It's been Baseline since 2025-12-12.
+Supported by: Chrome 135 (Apr 2025), Edge 135 (Apr 2025), Firefox 144 (Oct 2025), and Safari 26.2 (Dec 2025).
+Baseline status for Popover: Newly available. It's been Baseline since 2025-01-27.
+Supported by: Chrome 116 (Aug 2023), Edge 116 (Aug 2023), Firefox 125 (Apr 2024), Safari 17 (Sep 2023), and Safari iOS 18.3 (Jan 2025).
+
+Because Invoker Commands and Popovers are not yet universally supported, you MUST use polyfills as fallbacks for older browsers.
+
+### Polyfilling Invoker Commands
+
+MANDATORY: Feature detect support by checking for the `commandForElement` property on the `HTMLButtonElement` prototype. Do NOT check the window or document object. You MUST dynamically import the polyfill only when the native feature is missing. DO NOT unconditionally load the polyfill.
+Mandatory: Listen for the 'command' event directly on the target element because the native 'command' event does not bubble.
+
+**Option 1: Using a bundler**
+Install the polyfill via npm (`npm install invokers-polyfill`). This approach is for projects using a bundler (like Vite or Webpack) or import maps. For all other setups, use the CDN option below.
+
+```javascript
+// MANDATORY: Feature detect 'commandForElement' on HTMLButtonElement.prototype.
+// Conditionally load the invokers-polyfill only in browsers lacking native support.
+if (!('commandForElement' in HTMLButtonElement.prototype)) {
+  import('invokers-polyfill');
+}
+```
+
+**Option 2: Using a CDN**
+For projects without a bundler, dynamically import the polyfill directly from a CDN inside a `<script type="module">`.
+
+```html
+<script type="module">
+  // MANDATORY: Feature detect 'commandForElement' on HTMLButtonElement.prototype.
+  // Conditionally load the invokers-polyfill from a CDN only in browsers lacking native support.
+  if (!('commandForElement' in HTMLButtonElement.prototype)) {
+    import('https://esm.run/invokers-polyfill');
+  }
+</script>
+```
+
+**Invokers Polyfill Limitations**
+MANDATORY: This polyfill does not handle the ARIA states (e.g., `aria-expanded`) of the command button the way native browsers do. You are strongly encouraged to handle these states yourself to ensure your site is fully accessible.
+
+Baseline status for Invoker commands: Newly available. It's been Baseline since 2025-12-12.
+Supported by: Chrome 135 (Apr 2025), Edge 135 (Apr 2025), Firefox 144 (Oct 2025), and Safari 26.2 (Dec 2025).
+
+If the Invoker Commands API is not supported, the `command` event will not fire. For full support across all modern browsers, it is recommended to use the invokers-polyfill from https://github.com/keithamus/invokers-polyfill via `npm install` or CDN.
+
+This polyfill fully supports custom actions (starting with `--`) and dispatches the `command` event exactly like the native API.
+
+### Dynamic Import (Performance Optimization)
+
+For the best performance, you should only load the polyfill if the browser doesn't support the API natively. This saves bandwidth and reduces script execution time for users on modern browsers.
+
+**NOTE:** This polyfill does not manage ARIA states (like `aria-pressed` or `aria-expanded`) for custom commands. You must manually synchronize these states in your event listener to ensure your site is accessible.
+
+```javascript
+// 1. Conditionally load the polyfill
+const hasNativeSupport = 'commandForElement' in HTMLButtonElement.prototype;
+
+if (!hasNativeSupport) {
+  // Wrap in an async IIFE to avoid top-level await issues in older browsers
+  (async () => {
+    try {
+      await import('https://esm.run/invokers-polyfill');
+    } catch (err) {
+      console.error('Error loading fallback:', err);
+    }
+  })();
+}
+
+// 2. Manually manage ARIA states in your listener
+document.getElementById('action-target').addEventListener('command', (event) => {
+  const command = event.command;
+  const target = event.target;
+  const source = event.source; // The button that triggered the command
+
+  if (command === '--spin') {
+    const isSpun = target.classList.toggle('is-spun');
+    
+    // Polyfill tip: Manually update ARIA to match the new state
+    source?.setAttribute('aria-pressed', isSpun);
+  }
+});
+```
+
+### Manual fallback (Traditional pattern)
+
+If you prefer not to use a polyfill, you can use a combination of **event delegation** to dispatch events and a **command registry** to handle the actions. This is a common architectural pattern in traditional JavaScript development that remains highly efficient and scalable.
+
+```javascript
+// 1. **Optional:** Define a registry of requested actions for cleaner logic
+const commandRegistry = {
+  '--spin': (target) => target.classList.toggle('is-spun'),
+  '--grow': (target) => target.classList.toggle('is-grown'),
+  '--reset': (target) => target.classList.remove('is-spun', 'is-grown'),
+};
+
+// 2. If CommandEvent doesn't exist, we assume no native support and provide the fallback
+if (!globalThis.CommandEvent) {
+  globalThis.CommandEvent = class CommandEvent extends Event {
+    constructor(type, { source, command, ...options } = {}) {
+      super(type, options);
+      this.source = source;
+      this.command = command;
+    }
+  }
+}
+
+// 3. The fallback: Dispatch events manually if native support is missing
+  document.addEventListener('click', (event) => {
+    const button = event.composedPath().find((el) => el.matches?.("button[commandfor]"));
+    if (!button) return;
+
+    const target = document.getElementById(button.getAttribute('commandfor'));
+    const command = button.getAttribute('command');
+
+    if (target && command) {
+      target.dispatchEvent(new CommandEvent('command', { 
+        command, 
+        source: button,
+      }));
+    }
+  });
+
+// 4. **Mandatory:** Register the unified listener directly on the target element
+document.getElementById('action-target').addEventListener('command', (event) => {
+  const command = event.command;
+  const target = event.target;
+  const action = commandRegistry[command];
+
+  if (action) {
+    action(target);
+  }
+ });
+```
+
+### Polyfilling the Popover Attribute
+
+To support the `popover` attribute in older browsers, use the `@oddbird/popover-polyfill`.
+
+MANDATORY: Feature detect popover support by checking for the `popover` property on the `HTMLElement` prototype. Conditionally initialize the polyfill only if native support is missing.
+
+**Option 1: Using a bundler**
+Install the package via npm (`npm install @oddbird/popover-polyfill`). This method requires a bundler or import maps to resolve the module path.
+
+```javascript
+// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
+if (!('popover' in HTMLElement.prototype)) {
+  import('@oddbird/popover-polyfill/fn').then(({ apply }) => {
+    apply();
+  });
+}
+```
+
+**Option 2: Using a CDN**
+For projects without a bundler, dynamically import the polyfill directly from a CDN inside a `<script type="module">`.
+
+```html
+<script type="module">
+  // MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
+  // Conditionally load the popover-polyfill from a CDN only in browsers lacking native support.
+  if (!('popover' in HTMLElement.prototype)) {
+    import('https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover-fn.js').then(({ apply }) => {
+      apply();
+    });
+  }
+</script>
+```
+
+**Popover Polyfill Limitations & Styling Caveats**
+MANDATORY: Use `:is()` or `:where()` to combine `:popover-open` with the corresponding polyfill class, otherwise browsers that do not support `:popover-open` will throw away the entire rule.
+
+```css
+[popover]:is(:popover-open, .\:popover-open) {
+  display: block;
+}
+```

package/.agents/skills/modern-web-guidance/guides/user-experience/deliver-optimized-decorative-images.md

@@ -0,0 +1,49 @@
+Delivering optimized decorative images via CSS improves perceived performance without sacrificing visual quality. By using the `image-set()` CSS function, you can provide the browser with multiple options for a single background or mask image. You can specify modern formats (like AVIF or WebP) alongside different resolutions (like `1x` and `2x`). The browser will dynamically select the smallest compatible image that provides the appropriate pixel density for the user's device.
+
+**CAUTION**: If the image is likely to be the Largest Contentful Paint (LCP) element (e.g., a large hero banner), be aware that images referenced in CSS via image-set() are not discoverable by the browser's preload scanner. This can significantly delay image loading and harm LCP. For LCP candidates, consider using a standard HTML `<img>` or `<picture>` tag instead or alternatively, preloading the image as well using `<link rel=preload>` option with a `media` attribute.
+
+### Implementation
+
+The `image-set()` function is used anywhere CSS expects an `<image>` value, most commonly in `background-image`, `content`, or `mask-image`. Note that while providing both the image format via `type()` and the resolution (like `1x` or `2x`) yields the best results, both of these arguments are optional. 
+
+```css
+.gallery-item {
+  /* Provide multiple resolutions and formats using image-set() */
+  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
+     The browser will stop at the first supported format. */
+  background-image: image-set(
+    url("gallery.avif") type("image/avif") 1x,
+    url("gallery-2x.avif") type("image/avif") 2x,
+    url("gallery.webp") type("image/webp") 1x,
+    url("gallery-2x.webp") type("image/webp") 2x,
+    url("gallery.jpg") type("image/jpeg") 1x,
+    url("gallery-2x.jpg") type("image/jpeg") 2x
+  );
+  
+  /* Standard decorative properties */
+  background-size: cover;
+  background-position: center;
+}
+```
+
+### Fallback strategies
+
+Baseline status for image-set(): Widely available. It's been Baseline since 2023-09-18.
+Supported by: Chrome 113 (May 2023), Edge 113 (May 2023), Firefox 89 (Jun 2021), and Safari 17 (Sep 2023).
+
+For older browsers that do not support the `image-set()` function, you **MUST** provide a standard image declaration *before* the `image-set()` rule. This progressive enhancement strategy relies on CSS's cascading nature: unsupported rules are ignored.
+
+```css
+.gallery-item {
+  /* MANDATORY: Fallback for browsers that do not support image-set() */
+  background-image: url("gallery.jpg");
+  
+  /* Modern browsers will apply this and override the fallback */
+  background-image: image-set(
+    url("gallery.avif") type("image/avif") 1x,
+    url("gallery-2x.avif") type("image/avif") 2x,
+    url("gallery.jpg") type("image/jpeg") 1x,
+    url("gallery-2x.jpg") type("image/jpeg") 2x
+  );
+}
+```

package/.agents/skills/modern-web-guidance/guides/user-experience/design-token-reactivity.md

@@ -0,0 +1,174 @@
+## Background & Overview
+
+Often an author will need to make contextual changes to the design of a component. Historically authors would need to use selectors to apply such changes. This often meant that while many of their design tokens could exist as custom properties, higher-order design tokens could only be encoded as a selector pattern (i.e. using a class name or attribute convention) or as props/context in a JavaScript framework.
+
+**Container style queries** allow authors to style elements based on the computed custom property value of an ancestor element. This means authors can write meaningful design token values within their stylesheets rather than relying on markup or JavaScript for presentation.
+
+## How to implement
+
+Implementing a reactive design token using a container style query is quite straightforward:
+
+1. Set the higher-order design token as a custom property on a container. This does not need to be a registered custom property.
+2. Use the `@container style()` rule to query the value of that custom property.
+3. Apply the appropriate styles to a descendant element within the container.
+
+A few things to keep in mind:
+
+- The container being queried with a style query does not need to have a `container-type` or `container-name` set, however, a `container-name` can allow for more specific querying.
+- The container itself cannot be styled by the container style query.
+
+The following is a basic example of the above implementation steps.
+
+```html
+<div class="features">
+  <div class="card"></div>
+  <div class="card"></div>
+</div>
+<div class="bugs">
+  <div class="card"></div>
+  <div class="card"></div>
+  <div class="card"></div>
+  <div class="card"></div>
+</div>
+```
+
+```css
+.features {
+  --density: spacious;
+}
+
+.bugs {
+  --density: compact;
+}
+
+@container style(--density: compact) {
+  .card {
+    padding: 8px;
+  }
+}
+
+@container style(--density: spacious) {
+  .card {
+    padding: 24px;
+  }
+}
+```
+
+## Fallback strategies
+
+Baseline status for Container style queries: Newly available. It's been Baseline since 2026-05-19.
+Supported by: Chrome 111 (Mar 2023), Edge 111 (Mar 2023), Firefox 151 (May 2026), and Safari 18 (Sep 2024).
+
+Until there is Baseline support for container style queries it is NOT RECOMMENDED that they be used for core features that must be available across all browsers, since it is not simple to create a fallback for them that does not take away from their benefits or that have their own limitations. For example, if a UI density user preference is not deemed to be a core feature that must be available across all experiences, then container style queries can be use to implement the feature without a fallback.
+
+### Using selectors instead
+
+For core features, an alternate approach using selectors should be used. This example uses a `data-density` attribute to encode the density design token in the markup rather than as a custom property:
+
+```html
+<div class="features" data-density="spacious">
+  <div class="card"></div>
+  <div class="card"></div>
+</div>
+<div class="bugs" data-density="compact">
+  <div class="card"></div>
+  <div class="card"></div>
+  <div class="card"></div>
+  <div class="card"></div>
+</div>
+```
+
+```css
+/* This example uses `:where()` to avoid increasing specificity */
+:where([data-density="compact"]) .card {
+  padding: var(--card-padding-compact);
+}
+
+:where([data-density="spacious"]) .card {
+  padding: var(--card-padding-spacious);
+}
+```
+
+A major limitation of this fallback approach is that it does not support nesting elements with the `data-density` attribute set, since the selector specificity is the same, order of appearance will be used to determine the styles (i.e. `[data-density="spacious"]` will always take precendence over `[data-density="compact"]`).
+
+### Using style queries as a progressive enhancement
+
+While it’s NOT RECOMMENDED, if you want to use style queries as a progressive enhancement for a core feature, then to avoid duplication you can create some custom properties, then include the style queries after. Make sure the fallback approach uses `:where()` when selecting the container elements to avoid increasing the specificity.
+
+```css
+.card {
+  --card-padding-compact: 8px;
+  --card-padding-spacious: 24px;
+}
+
+:where([data-density="compact"]) .card {
+  padding: var(--card-padding-compact);
+}
+
+:where([data-density="spacious"]) .card {
+  padding: var(--card-padding-spacious);
+}
+
+/* Use style queries as a progressive enhancement: same specificity, so order of appearance is used */
+
+@container style(--density: compact) {
+  .card {
+    padding: var(--card-padding-compact);
+  }
+}
+
+@container style(--density: spacious) {
+  .card {
+    padding: var(--card-padding-spacious);
+  }
+}
+```
+
+### Feature-checking with just CSS
+
+If you need to feature check container style queries to conditionally display some UI that relies on it, you can use a style query to do so:
+
+```css
+:root {
+  --style-queries-supported: check;
+}
+
+.density-toggle {
+  display: none;
+}
+
+@container style(--style-queries-supported) {
+  .density-toggle {
+    display: revert;
+  }
+}
+```
+
+### Feature-checking with JavaScript
+
+For feature-checking with JavaScript, it is slightly more complicated as the `CSSContainerRule` interface existed prior to the addition of container style queries, so it is unreliable for this purpose. Instead, you’ll need to check the computed value of a known property that is being set with a style query.
+
+This example uses a custom property as it will have no visual effect:
+
+```css
+:root {
+  --style-queries-supported: check;
+}
+
+@container style(--style-queries-supported: check) {
+  body {
+    --style-queries-supported: yes;
+  }
+}
+```
+
+Then check the computed value in JavaScript like this:
+
+```js
+if (getComputedStyle(document.body).getPropertyValue("--style-queries-supported") === "yes") {
+  // Use container style queries
+} else {
+  // Use fallback strategy
+}
+```
+

package/.agents/skills/modern-web-guidance/guides/user-experience/directional-navigation-transitions.md

@@ -0,0 +1,125 @@
+Single Page Applications (SPAs) provide the appearance of navigation by replacing the content of the page without navigating to a new page. By default, the content is simply replaced, without any transitions. Directional transitions can visually reinforce a spatial relationship between views. 
+
+By sliding new content in from the direction the user is moving you create a mental map of the application structure. For instance, a product site may show a transition to the right for "forward," and to the left for "back", or a slideshow may transition up and down to show next and previous slides.
+
+### Implementation Steps
+
+1. **Detect Navigation Direction**: Determine if the user is moving "forward" or "backward" in the application flow. How you detect the direction depends on your use case.
+2. **Trigger Transition with Types**: Pass the direction in a `types` array to `document.startViewTransition()` to categorize the transition.
+3. **Define Directional Animations with CSS**: Use the `:active-view-transition-type()` pseudo-class to apply specific animations based on the navigation type.
+
+### Defining Keyframes
+
+Define sliding animations to and from each direction. For best performance, animate position changes using the `transform` property or the individual transform properties, `scale`, `rotate`, and `translate`. `opacity` is generally performant as well, but avoid animating other CSS properties without first verifying that they don't trigger layout or painting.
+
+```css
+/* Slide an element out to the left */
+@keyframes slide-to-left {
+  /* Mandatory: animate `transform` instead of inset properties for better performance. */
+  to { transform: translateX(-100%); }
+}
+
+/* Slide an element in from the right */
+@keyframes slide-from-right {
+  from { transform: translateX(100%); }
+}
+
+/* Slide an element out to the right */
+@keyframes slide-to-right {
+  to { transform: translateX(100%); }
+}
+
+/* Slide an element in from the left */
+@keyframes slide-from-left {
+  from { transform: translateX(-100%); }
+}
+```
+
+### Set up shared animation settings
+
+Use the `::view-transition-group(root)` selector to apply animation settings that are shared across all transitions.
+
+```css
+::view-transition-group(root){
+  animation: 0.4s ease-in-out both;
+}
+```
+
+### Applying Directional Animations
+
+Use the `active-view-transition-type` pseudo-class to target the transition views specifically when the "forward" or "backward" type is active.
+
+```css
+/* MANDATORY: Apply forward animations when the 'forward' type is active */
+html:active-view-transition-type(forward)::view-transition-old(root) {
+  animation-name: slide-to-left;
+}
+html:active-view-transition-type(forward)::view-transition-new(root) {
+  animation-name: slide-from-right;
+}
+
+/* MANDATORY: Apply backward animations when the 'backward' type is active */
+html:active-view-transition-type(backward)::view-transition-old(root) {
+  animation-name: slide-to-right;
+}
+html:active-view-transition-type(backward)::view-transition-new(root) {
+  animation-name: slide-from-left;
+}
+```
+
+### Triggering the Transition
+
+When navigating, pass the appropriate type to the `startViewTransition` method.
+
+```javascript
+const transitionType = yourTransitionTypeLogic();
+const updateDOM = yourUpdateDOMLogic();
+
+document.startViewTransition({
+  update: updateDOM,
+  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
+});
+```
+
+
+### Accessibility
+
+Always respect user preferences for reduced motion by disabling or simplifying animations.
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(root) {
+    animation: none !important;
+  }
+}
+```
+
+### Fallback strategies
+
+Baseline status for View transitions: Newly available. It's been Baseline since 2025-10-14.
+Supported by: Chrome 111 (Mar 2023), Edge 111 (Mar 2023), Firefox 144 (Oct 2025), and Safari 18 (Sep 2024).
+Baseline status for Active view transition: Newly available. It's been Baseline since 2026-01-13.
+Supported by: Chrome 125 (May 2024), Edge 125 (May 2024), Firefox 147 (Jan 2026), and Safari 18.2 (Dec 2024).
+
+The View Transitions API is a progressive enhancement. In unsupported browsers, `document.startViewTransition` will be `undefined`. You must wrap your navigation logic in a feature detection check to ensure the DOM update still occurs immediately without animation, as shown in this helper function.
+
+```javascript
+/**
+ * Navigates to a new view with a directional transition.
+ * @param {Function} updateDOM - Callback to update the DOM state.
+ * @param {string} direction - Either 'forward' or 'backward'.
+ */
+function navigate(updateDOM, direction) {
+  // Feature detect for browsers that do not support View Transitions
+  if (!document.startViewTransition) {
+    updateDOM();
+    return;
+  }
+
+  // Start transition with the specific navigation type
+  document.startViewTransition({
+    update: updateDOM,
+    types: [direction] // Matches the CSS :active-view-transition-type() selectors
+  });
+}
+```

package/.agents/skills/modern-web-guidance/guides/user-experience/dynamic-sibling-animations.md

@@ -0,0 +1,54 @@
+# Creating a stagger animation
+
+Stagger animations provide an interesting effect where multiple ordered elements animate sequentially with a slight delay between each, rather than all animating at once. This technique is often used in lists, galleries, or navigation menus to guide the user's eye and add a polished, rhythmic feel to interactions.
+
+## Stagger animations with `sibling-index()`
+
+Use the `sibling-index()` property on the `animation-delay` property so that the animation on each element is offset by a number proportionate to their position in their parent. The `sibling-index()` function returns an integer, so it must be multiplied by a time unit to convert it to a time.
+
+```css
+#stagger-list > .item {
+  --stagger-time: 0.1s;
+  /* Define the animation first */
+  animation: fade-in 0.4s;
+  /* Set the `animation-delay` to a time multipled by the `sibling-index()` */
+  animation-delay: calc(sibling-index() * var(--stagger-time))
+}
+```
+
+**MANDATORY:** Respect user preferences by disabling the animation for users who prefer reduced motion. 
+
+```css
+@media (prefers-reduced-motion: reduce){
+  /* Disable animation for users who prefer reduced motion. */
+  #stagger-list > .item {
+    animation: none;
+  }
+}
+```
+
+## Fallback strategies
+
+sibling-count() and sibling-index() has limited availability.
+Supported by: Chrome 138 (Jun 2025), Edge 138 (Jun 2025), and Safari 26.2 (Dec 2025).
+Unsupported in: Firefox.
+
+Test for support for `sibling-index()` using CSS with `@supports (animation-delay: calc(sibling-index() * 0.1s)){}` or JavaScript with `!CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')`.
+
+To support stagger animations in older browsers, use JavaScript to add a `--sibling-index` custom property to each sibling element. MANDATORY: wrap this in a `CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')` test to avoid running unneeded JavaScript.
+
+```js
+if(!CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')){
+  const staggerList = document.getElementById('stagger-list');
+  [...staggerList.children].forEach((el, index)=>el.style.setProperty('--sibling-index', index + 1));
+}
+```
+
+Add an `animation-delay` declaration that uses the `--sibling-index` custom property. It must be before the `animation-delay` declaration that uses the `sibling-index()` function. This does not need to be wrapped in `@supports` - older browsers will not parse the second declaration and will use the first declaration.
+
+```css
+#stagger-list > .item {
+  animation-delay: calc(var(--sibling-index) * var(--stagger-time));
+  animation-delay: calc(sibling-index() * var(--stagger-time));
+}
+```