@repobit/dex-system-design 1.0.1 → 2.0.1

package/src/components/tooltip/tooltip.js

@@ -1,18 +1,24 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 // Installs the design tokens into document scope; see src/tokens/tokens.js
 import '../../tokens/tokens.js';
 import { tooltipCSS } from './tooltip.css.js';
 
+let descriptionIds = 0;
+
 export class BdTooltip extends LitElement {
   static styles = [tooltipCSS];
 
   static properties = {
-    text: { type: String }
+    text      : { type: String },
+    /* Set by Escape and cleared once neither the pointer nor focus is on the
+       tooltip any more, so the next hover or focus shows it again. */
+    _dismissed: { type: Boolean, state: true }
   };
 
   constructor() {
     super();
     this.text = '';
+    this._dismissed = false;
   }
 
   /* The bubble is centred on its trigger and is wider than it, so near a
@@ -119,7 +125,31 @@ export class BdTooltip extends LitElement {
        Both boxes, because they move for different reasons: the host changes
        when the trigger resizes, the bubble when its own text reflows.
        ResizeObserver fires once on observe, which is the settled first pass. */
-    if (typeof ResizeObserver === 'undefined') return;
+    this._observe();
+  }
+
+  /* ESCAPE. WCAG 1.4.13 asks that content shown on hover or focus can be
+     dismissed without moving the pointer or focus. The pointer may be over the
+     trigger while focus is anywhere on the page, so the key is heard on the
+     document, and only acted on while this bubble is actually showing.
+
+     Capture phase, and the event is marked handled with preventDefault rather
+     than stopped: a tooltip is the innermost thing that can be open, so its
+     Escape should not also close a native <dialog> it sits in, and a dialog's
+     cancel is exactly what preventDefault on that keydown withholds.
+     Propagation is left alone, as bd-modal leaves it, so a page that wants to
+     hear the key still does. */
+  get _showing() {
+    return !this._dismissed && (this.matches(':hover') || this.matches(':focus-within'));
+  }
+
+  /* Started on first render and again on every reconnect. It used to start
+     only in firstUpdated, and disconnectedCallback tears it down, so a tooltip
+     moved in the DOM -- removed and re-inserted, which a framework reordering
+     a list does -- came back with no observer and never re-placed itself when
+     its trigger or text changed size. */
+  _observe() {
+    if (typeof ResizeObserver === 'undefined' || this._ro) return;
     this._ro = new ResizeObserver(() => this._place());
     this._ro.observe(this);
     const bubble = this.renderRoot?.querySelector('.bubble');
@@ -128,27 +158,127 @@ export class BdTooltip extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    // a first connection is handled by firstUpdated, once the bubble exists
+    if (this.hasUpdated) this._observe();
     this._onShow = () => this._place();
     /* Both reveals the stylesheet already honours, and resize because the
        measurement is only true for the width it was taken at. */
     this.addEventListener('mouseenter', this._onShow);
     this.addEventListener('focusin', this._onShow);
     window.addEventListener('resize', this._onShow);
+
+    this._onKeydown = e => {
+      if (e.key !== 'Escape' || e.defaultPrevented || !this._showing) return;
+      e.preventDefault();
+      this._dismissed = true;
+    };
+    /* Back to normal once the pointer and focus have both gone: a pointer
+       leaving while focus stays inside keeps it dismissed, and the reverse. */
+    this._onLeave = e => {
+      if (!this._dismissed) return;
+      const pointerGone = e.type === 'mouseleave' || !this.matches(':hover');
+      const focusGone = e.type === 'focusout'
+        ? !this.contains(e.relatedTarget) && !this.shadowRoot.contains(e.relatedTarget)
+        : !this.matches(':focus-within');
+      if (pointerGone && focusGone) this._dismissed = false;
+    };
+    document.addEventListener('keydown', this._onKeydown, true);
+    this.addEventListener('mouseleave', this._onLeave);
+    this.addEventListener('focusout', this._onLeave);
   }
 
   disconnectedCallback() {
     this.removeEventListener('mouseenter', this._onShow);
     this.removeEventListener('focusin', this._onShow);
     window.removeEventListener('resize', this._onShow);
+    document.removeEventListener('keydown', this._onKeydown, true);
+    this.removeEventListener('mouseleave', this._onLeave);
+    this.removeEventListener('focusout', this._onLeave);
     this._ro?.disconnect();
     this._ro = undefined;
     super.disconnectedCallback();
   }
 
+  /* DESCRIBING THE TRIGGER.
+     The bubble had role="tooltip" and nothing pointed at it, so a screen
+     reader landing on the trigger heard its name and not the tooltip, and
+     the bubble's text sat in the page as a stray line. It cannot be pointed
+     at directly: the bubble is in this shadow root and the trigger is not,
+     and an id reference never crosses that boundary. So the trigger is
+     described from its own side:
+
+       a native control   aria-describedby names a hidden copy of the text,
+                          kept as a child of this element in a hidden slot --
+                          the same tree as the trigger, so the reference
+                          resolves
+       bd-button,         the text goes to its description property, which
+       bd-button-link,    wires aria-describedby inside its own shadow root,
+       bd-link            where its real control is
+
+     Once described, the bubble is hidden from assistive technology so the
+     text is not read twice. Any other custom element as trigger keeps the
+     bubble exposed and goes undescribed -- its control is out of reach. */
+  _describe() {
+    this._undescribe();
+    const slot = this.shadowRoot?.querySelector('slot');
+    const trigger = slot?.assignedElements()[0];
+    if (!trigger || !this.text) return;
+
+    // a custom element that has not upgraded yet has no description to set:
+    // come back once it has
+    if (trigger.localName.includes('-') && !customElements.get(trigger.localName)) {
+      customElements.whenDefined(trigger.localName).then(() => this._describe());
+      return;
+    }
+
+    if ('description' in trigger && trigger.localName.includes('-')) {
+      trigger.description = this.text;
+      this._described = { trigger, kind: 'property' };
+    } else if (!trigger.localName.includes('-')) {
+      const node = document.createElement('span');
+      node.id = `bd-tooltip-description-${++descriptionIds}`;
+      node.slot = 'description';
+      node.hidden = true;
+      node.textContent = this.text;
+      this.append(node);
+      const ids = (trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+      trigger.setAttribute('aria-describedby', [...ids, node.id].join(' '));
+      this._described = { trigger, kind: 'idref', node };
+    }
+    this.requestUpdate();
+  }
+
+  _undescribe() {
+    const d = this._described;
+    if (!d) return;
+    if (d.kind === 'property') {
+      d.trigger.description = '';
+    } else {
+      const ids = (d.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(t => t && t !== d.node.id);
+      if (ids.length) d.trigger.setAttribute('aria-describedby', ids.join(' '));
+      else d.trigger.removeAttribute('aria-describedby');
+      d.node.remove();
+    }
+    this._described = null;
+    this.requestUpdate();
+  }
+
+  updated(changed) {
+    if (changed.has('text') && this.hasUpdated) this._describe();
+  }
+
   render() {
     return html`
-      <slot></slot>
-      <span class="bubble" role="tooltip">${this.text}</span>
+      <slot @slotchange=${() => this._describe()}></slot>
+      <!-- the trigger's description: hidden, but slotted, because a node
+           assigned to no slot is not in the flat tree and Chrome then drops
+           an aria-describedby that points at it -->
+      <span hidden><slot name="description"></slot></span>
+      <span
+        class="bubble ${this._dismissed ? 'bubble--dismissed' : ''}"
+        role="tooltip"
+        aria-hidden="${this._described ? 'true' : nothing}"
+      >${this.text}</span>
     `;
   }
 }

package/src/components/tooltip/tooltip.stories.js

@@ -33,23 +33,29 @@ Anything required to complete a task belongs in visible text or in
 \`<bd-help-text>\`, because a tooltip is unreachable on touch, invisible in
 print, and gone the moment the pointer leaves.
 
-### Accessibility caveats
-The bubble carries \`role="tooltip"\`, but this element does **not** wire up
-\`aria-describedby\` between the trigger and the bubble. A screen reader
-therefore has no link from the control to its description, so the tooltip text
-may never be announced.
+### Accessibility
+The trigger is described by the tooltip: a screen reader reads the \`text\`
+after the trigger's name. How depends on the trigger, because the bubble sits
+in this element's shadow root and an \`aria-describedby\` cannot point into it:
 
-Until that is connected, describe the trigger directly as well:
+- **a native control** — \`<button>\`, \`<a>\`, \`<input>\` — gets
+  \`aria-describedby\` naming a hidden copy of the text kept inside the
+  tooltip, added to any ids it already lists and removed when it leaves;
+- **\`bd-button\`, \`bd-button-link\` and \`bd-link\`** get the text through
+  their \`description\` property, which wires the description inside their own
+  shadow root, where the real control is;
+- **any other custom element** cannot be reached, so it is not described and
+  the bubble stays exposed instead. Prefer a native control, a
+  \`bd-button\` or a \`bd-link\` as the trigger.
 
-\`\`\`html
-<bd-tooltip text="Blocks trackers">
-  <bd-button aria-describedby="trackers-hint">What is this?</bd-button>
-</bd-tooltip>
-<span id="trackers-hint" hidden>Blocks trackers across every browser</span>
-\`\`\`
+Once the trigger is described, the bubble itself is hidden from assistive
+technology, so the text is not read twice.
 
-There is also no dismiss-on-Escape and no delay before showing, both of which
-WCAG 1.4.13 asks of content that appears on hover.
+The bubble meets WCAG 1.4.13. It is hoverable: the pointer can move from the
+trigger onto the bubble, across the gap between them, and it stays open. It is
+dismissible: Escape hides it without moving the pointer or focus, and it shows
+again on the next hover or focus. That Escape is marked handled, so a native
+\`<dialog>\` the tooltip sits in stays open on the same keypress.
         `
       }
     }

package/src/components/trust-panel/trust-panel.js

@@ -36,7 +36,7 @@ class TrustPanel extends LitElement {
     return html`
       <div class="bd-trustpanel-card">
         ${card.eyebrow
-          ? html`<bd-p variant="regular" font-weight="semibold" class="bd-trustpanel-card-eyebrow">${card.eyebrow}</bd-p>`
+          ? html`<bd-p variant="eyebrow" class="bd-trustpanel-card-eyebrow">${card.eyebrow}</bd-p>`
           : nothing}
 
         <div class="bd-trustpanel-card-logos">
@@ -66,7 +66,7 @@ class TrustPanel extends LitElement {
     return html`
       <div class="bd-ensemble bd-trustpanel-wrapper">
         ${this.eyebrow
-          ? html`<bd-p variant="regular" font-weight="semibold" class="bd-trustpanel-eyebrow"><slot name="eyebrow">${this.eyebrow}</slot></bd-p>`
+          ? html`<bd-p variant="eyebrow" class="bd-trustpanel-eyebrow"><slot name="eyebrow">${this.eyebrow}</slot></bd-p>`
           : nothing}
 
         ${this.title

package/src/components/video/video.js

@@ -9,9 +9,13 @@ export class BdVideo extends LitElement {
   static properties = {
     src     : { type: String },
     poster  : { type: String },
-    controls: { type: Boolean },
+    /* On unless told otherwise -- see the story's Notes. A default-on boolean
+       cannot be turned off by leaving the attribute out, so the attribute
+       reads controls="false" as off; the property takes false as it is. */
+    controls: { converter: { fromAttribute: value => value !== 'false' } },
     muted   : { type: Boolean },
-    loop    : { type: Boolean }
+    loop    : { type: Boolean },
+    _media  : { state: true }
   };
 
   constructor() {
@@ -21,8 +25,38 @@ export class BdVideo extends LitElement {
     this.controls = true;
     this.muted = false;
     this.loop = false;
+    this._media = [];
   }
 
+  /* WHY THE TRACKS ARE COPIED IN.
+     This rendered <video><slot></slot></video>, and a media element builds
+     its text tracks and sources only from real <track> and <source> children
+     -- a slot is neither, so the captions the story told readers to slot in
+     never reached the player. The <track> and <source> children are now
+     copied into the <video> itself, and copied again whenever they change. */
+  connectedCallback() {
+    super.connectedCallback();
+    this._collect();
+    this._observer = new MutationObserver(() => this._collect());
+    this._observer.observe(this, { childList: true, subtree: true, attributes: true });
+  }
+
+  disconnectedCallback() {
+    this._observer?.disconnect();
+    super.disconnectedCallback();
+  }
+
+  _collect() {
+    this._media = [...this.children]
+      .filter(el => el.localName === 'track' || el.localName === 'source')
+      .map(el => el.cloneNode(true));
+  }
+
+  /* muted is a property, not only an attribute. The attribute is read once,
+     when the media loads -- it is what lets a muted video autoplay -- and
+     changing it afterwards mutes nothing, so muted = true on a playing video
+     left the sound on. Both are set: the attribute for the load, the
+     property for every change after it. */
   render() {
     return html`
       <video
@@ -30,9 +64,10 @@ export class BdVideo extends LitElement {
         poster=${this.poster || nothing}
         ?controls=${this.controls}
         ?muted=${this.muted}
+        .muted=${this.muted}
         ?loop=${this.loop}
         playsinline
-      ><slot></slot></video>
+      >${this._media}</video>
     `;
   }
 }

package/src/components/video/video.stories.js

@@ -29,9 +29,10 @@ export default {
 | \`muted\` | boolean | \`false\` |
 | \`loop\` | boolean | \`false\` |
 
-### Captions go in the slot
-Anything slotted is passed through into the \`<video>\`, which is how you supply
-\`<track>\` elements. **Recorded video needs captions** — WCAG 1.2.2 at level A —
+### Captions go inside the element
+\`<track>\` and \`<source>\` children are copied into the \`<video>\` — a media
+element only reads tracks and sources from its own children — and copied again
+when they change. That is how you supply captions. **Recorded video needs captions** — WCAG 1.2.2 at level A —
 and this element does nothing to add them for you.
 
 ### Notes
@@ -41,7 +42,11 @@ screen.
 \`controls\` defaults to \`true\` on purpose: a video a user cannot pause is a
 2.2.2 failure the moment it plays for more than five seconds. If you turn
 controls off, the video must also be \`muted\` and \`loop\` and behave as
-decoration.
+decoration. In HTML that is \`controls="false"\`: leaving the attribute out
+cannot turn off a default that is on. From script, \`.controls = false\`.
+
+\`muted\` follows the property as well as the attribute, so changing it on a
+playing video takes effect.
 
 There is no \`autoplay\` prop, deliberately — autoplay with sound is both
 disruptive and blocked by most browsers anyway.
@@ -91,7 +96,7 @@ export const Default = () => html`
  * them.
  */
 export const Decorative = () => html`
-    <bd-video poster="/images/bd-header-img.jpg" ?controls=${false} muted loop></bd-video>
+    <bd-video poster="/images/bd-header-img.jpg" controls="false" muted loop></bd-video>
   `;
 
 /**

package/src/components/video-player/video-player.css.js

@@ -124,7 +124,12 @@ export default css`
      --radius-lg corner and the close button is a circle. */
   .bd-video-thumb:focus-visible,
   .bd-video-close:focus-visible {
-    outline: none;
+    /* forced-colors mode does not paint box-shadow, so the ring
+       vanishes there; it does paint an outline, in a system colour. This one
+       is transparent everywhere else, and the offset lands it on the ring's
+       outer band. */
+    outline: var(--border-width-2) solid transparent;
+    outline-offset: var(--focus-outline-offset);
     box-shadow: var(--focus-outline-primary);
   }
 

package/src/tokens/elevation.stories.js

@@ -75,15 +75,14 @@ export const Shadows = () => {
   const surface = all.filter(token => !token.includes('focus'));
   const rings = all.filter(token => token.includes('focus'));
 
-  const ladder = ['--shadow-sm', '--shadow-md', '--shadow-lg', '--shadow-xl', '--shadow-2xl'];
+  const ladder = ['--shadow-sm', '--shadow-md', '--shadow-lg', '--shadow-xl'];
 
   return html`
     ${elevationStyles}
     ${docsPage({
       title: 'Elevation',
       lede : html`Shadows are the only elevation mechanism in the system — there is no z-index
-        scale. <code>sm</code> through <code>2xl</code> form a ladder;
-        <code>--shadow-inner</code> is an inset press state.`,
+        scale. <code>sm</code> through <code>xl</code> form a ladder.`,
       note    : referenceNote,
       children: html`
         ${refSection({

package/src/tokens/focus.stories.js

@@ -73,10 +73,20 @@ const focusStyles = html`
       margin-bottom: var(--spacing-6);
     }
 
+    .focus-demo--brand {
+      background: var(--color-blue-500);
+      padding: var(--spacing-24);
+      border-radius: var(--radius-md);
+    }
+
     .focus-demo--dark .ring-label {
       color: var(--color-neutral-300);
     }
 
+    .focus-demo--brand .ring-label {
+      color: var(--color-neutral-0);
+    }
+
     /* A genuinely interactive control, so the real :focus-visible can be tested. */
     .try-me {
       font: inherit;
@@ -117,9 +127,14 @@ export const FocusRings = () => {
   // -offset and -radius are lengths, not rings; they would render as empty swatches
   const NOT_RINGS = ['--focus-outline-offset', '--focus-outline-radius'];
   const rings = tokens.filter(token => token.startsWith('--focus-outline-') && !NOT_RINGS.includes(token));
+  // the -traditional pair is an outline, not a shadow list; as a box-shadow it draws nothing
+  const ringStyle = token => token.includes('-traditional')
+    ? `outline: var(${token}); outline-offset: var(--focus-outline-offset)`
+    : `box-shadow: var(${token})`;
   const ringColour = resolve('--color-blue-500');
   const onLight = contrast(ringColour, PAPER);
   const onDark = contrast(ringColour, INK);
+  const onBrand = contrast(resolve('--color-neutral-0'), ringColour);
 
   return html`
     ${focusStyles}
@@ -130,6 +145,22 @@ export const FocusRings = () => {
         inner band of <code>--color-neutral-0</code> and an outer band of the state colour. The
         inner band is what makes the ring visible on both light and dark backgrounds.
         <br /><br />
+        <b>CTAs are the exception: bd-button draws an offset outline.</b>
+        <code>--focus-outline-traditional</code> (blue) or
+        <code>--focus-outline-traditional-inverse</code> (white), held off the control by
+        <code>--focus-outline-offset</code>. The gap is transparent, so it is always the surface
+        the button sits on, whether that is white, neutral-900 or brand blue. That means it
+        cannot merge into a white fill, and it never paints a dark band onto a brand hero. Only
+        the colour follows the surface: blue under <code>surface="light"</code>, white under
+        <code>surface="dark"</code> and on the white presets.
+        <br /><br />
+        <b>Figma cannot do this.</b> Its rings are spread shadows, so the gap has to be a painted
+        band, and the library keeps one ring per surface: <code>focus/ring-primary</code> on
+        light and <code>focus/ring-inverse</code> (<code>--focus-outline-inverse</code>, a
+        <code>--color-neutral-900</code> band against the control, a white band outside it) on
+        dark and brand. The code and the library are meant to differ here, so do not copy the
+        Figma ring back into bd-button.
+        <br /><br />
         The ring is a <code>box-shadow</code>, so it already follows the radius of whatever it
         sits on — a component with its own radius should set nothing and let the ring take its
         shape. <code>--focus-outline-radius</code> is the default for the ones that have no
@@ -137,8 +168,10 @@ export const FocusRings = () => {
       note: html`WCAG 2.2 <b>1.4.11 Non-text Contrast</b> asks for <b>3:1</b> between a focus
         indicator and its adjacent background. The blue ring is
         ${onLight.toFixed(2)}${levelBadge(onLight)} on white and
-        ${onDark.toFixed(2)}${levelBadge(onDark)} on <code>--color-neutral-900</code> — which is
-        exactly why the white inner band matters on dark surfaces. ${referenceNote}`,
+        ${onDark.toFixed(2)}${levelBadge(onDark)} on <code>--color-neutral-900</code>, but
+        1.00:1 on a blue-500 hero. That is why every two-band ring here has a white band, and why
+        a CTA on a dark or brand surface takes a white outline: ${onBrand.toFixed(2)}${levelBadge(onBrand)}
+        on blue-500. ${referenceNote}`,
       children: html`
         ${refSection({
           name    : 'The rule',
@@ -146,13 +179,24 @@ export const FocusRings = () => {
           children: html`
             <div class="specimen">
               <p class="rule-note">
-                Every interactive component shows the same ring on keyboard focus,
-                and it is two lines:
+                Every interactive component shows the same ring on keyboard focus:
               </p>
               <pre class="rule-code"><code>.control:focus-visible {
-  outline: none;
+  outline: var(--border-width-2) solid transparent;
+  outline-offset: var(--focus-outline-offset);
   box-shadow: var(--focus-outline-primary);
 }</code></pre>
+              <p class="rule-note">
+                <b>The transparent outline is not decoration.</b> Windows High
+                Contrast and every other forced-colors mode drop
+                <code>box-shadow</code>, so a ring drawn only as a shadow
+                disappears there and leaves a keyboard user with no cue at all. An
+                outline is kept and repainted in a system colour, and
+                <code>--focus-outline-offset</code> puts it where the ring's outer
+                band would be. It draws nothing anywhere else. Writing
+                <code>outline: none</code> beside the ring is what lost it, on
+                every atom that did.
+              </p>
               <p class="rule-note">
                 <b>Always <code>:focus-visible</code>, never <code>:focus</code>.</b>
                 <code>:focus</code> fires on a mouse click too, which rings
@@ -167,13 +211,19 @@ export const FocusRings = () => {
                 accordion triggers did exactly that.
               </p>
               <p class="rule-note">
-                <b>Text fields are the one exception.</b> Inputs, textareas and
-                selects keep the field border and add
-                <code>--shadow-focus-outline-blue</code> as a glow, because an
-                offset ring around a full-width field reads as a second border.
-                Everything else you can operate — buttons, links, checkboxes,
-                radios, switches, tabs, accordion triggers, the scrollable code
-                block — uses the ring.
+                <b>Text fields add their border.</b> Inputs, textareas and selects
+                take the same ring, and also turn their own border to
+                <code>--form-input-focus-borderColor</code>, so the field's edge
+                changes with it. (<code>--shadow-focus-outline-blue</code>, a
+                translucent glow, is not used by any field; only the blog
+                newsletter reads it.) Everything else you can operate — links,
+                checkboxes, radios, switches, tabs, accordion triggers, the
+                scrollable code block — uses the ring alone.
+              </p>
+              <p class="rule-note">
+                <b>bd-button is the other exception.</b> It sits on light, dark
+                and brand surfaces, so it uses the offset outline, whose
+                transparent gap works on all three. See the note at the top.
               </p>
             </div>
           `
@@ -198,7 +248,7 @@ export const FocusRings = () => {
                   token => html`
                     <div>
                       <span class="ring-label">${token.replace('--focus-outline-', '')}</span>
-                      <div class="ring" style="box-shadow: var(${token})">Button</div>
+                      <div class="ring" style=${ringStyle(token)}>Button</div>
                     </div>
                   `
                 )}
@@ -208,14 +258,30 @@ export const FocusRings = () => {
         })}
         ${refSection({
           name    : 'On a dark surface',
-          meta    : 'the white inner band keeps the ring readable',
+          meta    : 'on a white control, primary merges into the fill; the outline\'s gap is the surface',
           children: html`
             <div class="focus-demo focus-demo--dark">
               ${rings.map(
                 token => html`
                   <div>
                     <span class="ring-label">${token.replace('--focus-outline-', '')}</span>
-                    <div class="ring" style="box-shadow: var(${token})">Button</div>
+                    <div class="ring" style=${ringStyle(token)}>Button</div>
+                  </div>
+                `
+              )}
+            </div>
+          `
+        })}
+        ${refSection({
+          name    : 'On a brand surface',
+          meta    : 'inverse paints a black band here; traditional-inverse leaves the gap blue',
+          children: html`
+            <div class="focus-demo focus-demo--brand">
+              ${rings.map(
+                token => html`
+                  <div>
+                    <span class="ring-label">${token.replace('--focus-outline-', '')}</span>
+                    <div class="ring" style=${ringStyle(token)}>Button</div>
                   </div>
                 `
               )}

package/src/tokens/motion.stories.js

@@ -199,12 +199,6 @@ export const Motion = () => {
                 `
               )}
             </div>
-            <p class="docs-lede" style="margin-top: var(--spacing-16)">
-              <code>--transition-easing-bounce</code> is
-              <code>${resolve('--transition-easing-bounce')}</code> — the negative and
-              greater-than-one control points make it overshoot at both ends. Use it for a
-              deliberate spring, not for hover states.
-            </p>
           `
         })}