@setsquare/ui 0.2.3 → 0.4.0

package/dist/styles/theme.css

@@ -38,6 +38,8 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-edge: var(--edge);
+  --color-edge-selected: var(--edge-selected);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-destructive-subtle: var(--destructive-subtle);
@@ -164,6 +166,20 @@
   --site-gutter: clamp(20px, calc(3.2 * var(--site-vw, 1vw)), 44px);
   --section-y: clamp(56px, calc(7 * var(--site-vw, 1vw)), 112px);
   --section-y-tight: clamp(40px, calc(5 * var(--site-vw, 1vw)), 80px);
+  /* A preview isn't the page, so its shell leaves the page's view-transition names (site-header) to the page's
+     own. A name may be on one element only: two, and the browser abandons every page transition. Important,
+     to win over the name the header sets inline. */
+  & * {
+    view-transition-name: none !important;
+  }
+}
+
+/* The same for a dashboard shell, or a part of one, shown inside a page that has its own, such as a documentation
+   site: its header, sidebar and right panel leave shell-header, shell-sidebar and shell-panel to the page's. */
+@utility shell-preview {
+  & * {
+    view-transition-name: none !important;
+  }
 }
 
 /* The content width of a public page, centred, with the gutter either side. */
@@ -259,6 +275,7 @@
   }
 }
 @utility card-surface {
+  --tabs-surface: var(--card);
   position: relative;
   padding: var(--space-6);
   border: 1px solid var(--border);
@@ -429,6 +446,644 @@
 @keyframes setsquare-sheet { from { opacity: 0; translate: var(--sheet-from, 0 0); } }
 @keyframes setsquare-toast { from { opacity: 0; translate: 0 var(--motion-distance); } }
 
+/* ---------- arrivals: a FeatureCard and its parts, once, as it first renders ----------
+   Text and controls never fade: they are readable from the first frame, so nothing waits on an animation to be
+   seen. arrive-rise only travels --motion-distance, so at AAA (0) and under reduced motion it does nothing. The
+   rest is decoration (the icon tile, the icon's strokes): it may fade in, and at AAA it only fades, as everything
+   that moves in this system does; 2.3.3's Understanding page doesn't count a change of opacity as motion. All of
+   it is over in under three seconds. Under reduced motion nothing animates. */
+@keyframes setsquare-rise { from { translate: 0 var(--motion-distance); } }
+@keyframes setsquare-pop { 0% { opacity: 0; scale: 0.6; } 60% { opacity: 1; scale: 1.06; } }
+@keyframes setsquare-sunrise { from { opacity: 0.2; translate: 0 var(--motion-distance); } }
+@keyframes setsquare-spin-in { from { opacity: 0; rotate: -75deg; scale: 0.7; } }
+@keyframes setsquare-moon-in { from { opacity: 0; rotate: -35deg; scale: 0.85; } }
+@keyframes setsquare-twinkle { 0% { opacity: 0; scale: 0.2; } 30% { opacity: 1; scale: 1.25; } 55% { opacity: 0.35; scale: 0.8; } 80% { opacity: 1; scale: 1.08; } }
+@keyframes setsquare-ripple { from { --feature-ripple-radius: 0px; opacity: 0.72; } 70% { opacity: 0.72; } to { --feature-ripple-radius: 1600px; opacity: 0; } }
+@utility arrive-rise {
+  animation: setsquare-rise var(--duration-arrive) var(--ease-standard) both;
+  @media (prefers-reduced-motion: reduce) { animation: none; }
+}
+@utility arrive-pop {
+  animation: setsquare-pop calc(var(--duration-arrive) * 1.1) var(--ease-standard) both;
+  transform-box: fill-box;
+  transform-origin: center;
+  @variant aaa { animation-name: setsquare-fade; }
+  @media (prefers-reduced-motion: reduce) { animation: none; }
+}
+@utility arrive-sunrise {
+  animation: setsquare-sunrise calc(var(--duration-arrive) * 2.3) var(--ease-standard) both;
+  transform-box: fill-box;
+  transform-origin: center;
+  @variant aaa { animation-name: setsquare-fade; }
+  @media (prefers-reduced-motion: reduce) { animation: none; }
+}
+@utility arrive-spin-in {
+  animation: setsquare-spin-in calc(var(--duration-arrive) * 2.1) var(--ease-standard) both;
+  transform-box: view-box;
+  transform-origin: 16px 16px;
+  @variant aaa { animation-name: setsquare-fade; }
+  @media (prefers-reduced-motion: reduce) { animation: none; }
+}
+@utility arrive-moon-in {
+  animation: setsquare-moon-in calc(var(--duration-arrive) * 1.9) var(--ease-standard) both;
+  transform-box: view-box;
+  transform-origin: 16px 16px;
+  @variant aaa { animation-name: setsquare-fade; }
+  @media (prefers-reduced-motion: reduce) { animation: none; }
+}
+@utility arrive-twinkle {
+  animation: setsquare-twinkle calc(var(--duration-arrive) * 2.9) var(--ease-standard) both;
+  transform-box: fill-box;
+  transform-origin: center;
+  @variant aaa { animation-name: setsquare-fade; }
+  @media (prefers-reduced-motion: reduce) { animation: none; }
+}
+
+/* ---------- Tabs: icons, and the selected tab opens to show its name ----------
+   Tab (the target) > tabs-paint (the pill) > tabs-icon and tabs-name. The paint's data-display says what a closed
+   tab shows: expanding (the name opens when selected), text, or icon. Widths and heights animate at AA only; at
+   AAA the name still fades in (opacity is not motion), and under reduced motion nothing animates. */
+@keyframes setsquare-tab-pop { 0% { scale: 0.82; } 60% { scale: 1.08; } 100% { scale: 1; } }
+@keyframes setsquare-badge-beat { 0%, 40%, 100% { scale: 1; } 15% { scale: 1.15; } }
+@keyframes setsquare-badge-halo { 0% { scale: 0.5; opacity: 0.6; } 100% { scale: 1; opacity: 0; } }
+@keyframes setsquare-badge-glow { 0%, 100% { opacity: 0; } 50% { opacity: 0.45; } }
+@keyframes setsquare-badge-out { to { opacity: 0; } }
+@keyframes setsquare-tip-below { from { opacity: 0; translate: -50% calc(var(--motion-distance) * -0.5); } }
+@keyframes setsquare-tip-beside { from { opacity: 0; translate: calc(var(--motion-distance) * -0.5) -50%; } }
+@keyframes setsquare-panel-in { from { opacity: 0; translate: var(--tabs-from, 0 0); } }
+@utility tabs-list {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  /* The rail: 104px of icon tiles, so it never changes width; the selected tile grows downwards. */
+  &[data-orientation='vertical'] {
+    flex: none;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    width: 104px;
+  }
+}
+@utility tabs-paint {
+  /* The badge's cut-out is the tab's own surface: the page (or --tabs-surface), the hover ground, the fill. */
+  --tabs-cut: var(--tabs-surface, var(--background));
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 20px 0fr;
+  align-items: center;
+  column-gap: 0;
+  height: var(--control-height);
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  white-space: nowrap;
+  transition: grid-template-columns 280ms var(--ease-standard), column-gap 280ms var(--ease-standard),
+    padding 280ms var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+  [data-hovered] > & {
+    --tabs-cut: var(--accent);
+    background-color: var(--accent);
+    color: var(--foreground);
+  }
+  [data-selected] > & {
+    --tabs-cut: var(--brand-subtle);
+    grid-template-columns: 20px 1fr;
+    column-gap: 8px;
+    padding: 0 14px 0 10px;
+    background-color: var(--brand-subtle);
+    color: var(--foreground);
+  }
+  /* Text has no icon column: the name is the only one. */
+  &[data-display='text'] {
+    grid-template-columns: 1fr;
+    column-gap: 0;
+    padding: 0 14px;
+  }
+  [data-selected] > &[data-display='icon'] {
+    grid-template-columns: 20px 0fr;
+    column-gap: 0;
+    padding: 0 8px;
+  }
+  /* Where the name doesn't open to mark the selected tab, a brand marker does: selection never rests on the fill
+     alone (1.4.1, 1.4.11). */
+  [data-selected] > &:is([data-display='text'], [data-display='icon'])::after {
+    content: '';
+    position: absolute;
+    left: 10px;
+    right: 10px;
+    bottom: 3px;
+    height: 3px;
+    border-radius: 2px;
+    background-color: var(--brand);
+  }
+  @variant aaa {
+    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+  }
+  [role='tablist'][data-orientation='vertical'] & {
+    display: grid;
+    grid-template-columns: none;
+    grid-template-rows: 20px 0fr;
+    justify-items: center;
+    row-gap: 0;
+    width: 100%;
+    height: auto;
+    min-height: var(--control-height);
+    padding: 8px 4px;
+    border-radius: var(--radius-lg);
+    white-space: normal;
+    transition: grid-template-rows 280ms var(--ease-standard), row-gap 280ms var(--ease-standard),
+      background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    @variant aaa {
+      transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+    }
+  }
+  [role='tablist'][data-orientation='vertical'] [data-selected] > & {
+    grid-template-rows: 20px 1fr;
+    row-gap: 6px;
+  }
+  [role='tablist'][data-orientation='vertical'] &[data-display='text'] {
+    grid-template-rows: 1fr;
+    row-gap: 0;
+  }
+  [role='tablist'][data-orientation='vertical'] [data-selected] > &[data-display='icon'] {
+    grid-template-rows: 20px 0fr;
+    row-gap: 0;
+  }
+  [role='tablist'][data-orientation='vertical'] [data-selected] > &:is([data-display='text'], [data-display='icon'])::after {
+    left: 3px;
+    right: auto;
+    top: 10px;
+    bottom: 10px;
+    width: 3px;
+    height: auto;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+  }
+}
+@utility tabs-icon {
+  position: relative;
+  display: block;
+  width: 20px;
+  height: 20px;
+  & > :not(.tabs-badge) {
+    display: block;
+  }
+  /* The selected tab's icon turns brand and pops (at AA). */
+  [data-selected] & > :not(.tabs-badge) {
+    color: var(--brand);
+    animation: setsquare-tab-pop 300ms var(--ease-standard);
+    @variant aaa {
+      animation: none;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}
+@utility tabs-name {
+  min-width: 0;
+  /* Clipped sideways only, so an important badge's ring after the name isn't cut off above or below. */
+  overflow-x: clip;
+  overflow-y: visible;
+  opacity: 0;
+  transition: opacity 160ms var(--ease-standard);
+  [data-selected] & {
+    opacity: 1;
+    transition-delay: 80ms;
+  }
+  [data-display='text'] > & {
+    opacity: 1;
+  }
+  [data-selected] [data-display='icon'] > & {
+    opacity: 0;
+  }
+  /* In the rail it fills its row, which opens from nothing, so a closing name is clipped below the icon rather
+     than spilling up over it. */
+  [role='tablist'][data-orientation='vertical'] & {
+    align-self: stretch;
+    width: 100%;
+    min-height: 0;
+    overflow: hidden;
+  }
+  [role='tablist'][data-orientation='vertical'] [data-display='text'] > & {
+    overflow: visible;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+  }
+}
+@utility tabs-name-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  /* In the rail, names wrap and hyphenate inside the tile (1.4.12). */
+  [role='tablist'][data-orientation='vertical'] & {
+    display: block;
+    text-align: center;
+    font-size: 13px;
+    line-height: 16px;
+    hyphens: auto;
+    overflow-wrap: anywhere;
+  }
+}
+/* The name, over a hidden bold copy that holds the bold width from the start. */
+@utility tabs-name-text {
+  display: inline-grid;
+  & > * {
+    grid-area: 1 / 1;
+  }
+  & > :last-child {
+    font-weight: 700;
+    visibility: hidden;
+  }
+  [data-selected] & > :first-child {
+    font-weight: 700;
+  }
+}
+@utility tabs-count {
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  color: var(--muted-foreground);
+  font-variant-numeric: tabular-nums;
+  [role='tablist'][data-orientation='vertical'] & {
+    display: none;
+  }
+}
+/* A badge: pinned to the icon's top-right while the tab is closed, anchored by its right edge so a wide count
+   grows back over its own icon and never reaches the next tab, with a 2px cut-out in the tab's own surface. After
+   the name when the name shows beside the icon, so it never sits over text. */
+@utility tabs-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background-color: var(--foreground);
+  color: var(--background);
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  box-shadow: 0 0 0 2px var(--tabs-cut, var(--background));
+  pointer-events: none;
+  &[data-dot] {
+    top: -3px;
+    right: -4px;
+    min-width: 10px;
+    width: 10px;
+    height: 10px;
+    padding: 0;
+  }
+  &[data-place='inline'] {
+    position: relative;
+    top: auto;
+    right: auto;
+    box-shadow: none;
+  }
+  [role='tablist'][data-orientation='vertical'] &[data-place='inline'] {
+    margin-left: 6px;
+    vertical-align: middle;
+  }
+  /* Important: the destructive fill and a ring that stays, so importance never rests on colour or motion alone. */
+  &[data-important] {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+  }
+  &[data-important]::after {
+    content: '';
+    position: absolute;
+    inset: -4px;
+    border: 2px solid var(--destructive);
+    border-radius: inherit;
+    pointer-events: none;
+  }
+  /* The halo the pulse swells: 8px past the badge and no further, so it stays off the next tab and any text. */
+  &[data-important]::before {
+    content: '';
+    position: absolute;
+    inset: -8px;
+    z-index: -1;
+    border-radius: 999px;
+    background-color: var(--destructive);
+    opacity: 0;
+    pointer-events: none;
+  }
+  /* After a name: 10px from the text, a 5px halo and 6px of room on its right. */
+  &[data-important][data-place='inline'] {
+    margin: 0 6px 0 4px;
+  }
+  [role='tablist'][data-orientation='vertical'] &[data-important][data-place='inline'] {
+    margin-left: 10px;
+  }
+  &[data-important][data-place='inline']::after {
+    inset: -3px;
+  }
+  &[data-important][data-place='inline']::before {
+    inset: -5px;
+  }
+  /* The pulse: three times in 4.5s, so it stops by itself inside the 5 seconds 2.2.2 allows. At AAA nothing
+     grows: the halo glows in and out at its full size. */
+  &[data-pulse] {
+    animation: setsquare-badge-beat 1500ms var(--ease-standard) 3;
+  }
+  &[data-pulse]::before {
+    animation: setsquare-badge-halo 1500ms cubic-bezier(0, 0, 0.2, 1) 3;
+  }
+  @variant aaa {
+    &[data-pulse] {
+      animation: none;
+    }
+    &[data-pulse]::before {
+      animation: setsquare-badge-glow 1500ms ease-in-out 3;
+    }
+  }
+  /* Back on the icon as its tab closes: it waits for the name to fade, so it never lands on the text. */
+  &[data-returning] {
+    animation: setsquare-fade var(--duration-fast) var(--ease-standard) 200ms both;
+  }
+  &[data-clearing] {
+    animation: setsquare-badge-out 300ms var(--ease-standard) 700ms both;
+  }
+  /* Clearing and its tab closed before it went: it doesn't come back to the icon just to leave. */
+  &[data-clearing][data-returning] {
+    opacity: 0;
+    animation: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    &, &::before {
+      animation: none !important;
+    }
+  }
+}
+/* A tooltip for a tab whose name isn't showing. It sits inside the tab, so the pointer can move onto it across an
+   8px bridge without leaving. Hidden from assistive tech: the name is the tab's own. */
+@utility tabs-tip {
+  position: absolute;
+  z-index: var(--z-popover);
+  padding: 4px 8px;
+  border-radius: var(--radius-md);
+  background-color: var(--foreground);
+  color: var(--background);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  white-space: nowrap;
+  box-shadow: var(--shadow-lg);
+  &::before {
+    content: '';
+    position: absolute;
+  }
+  &[data-side='bottom'] {
+    top: calc(100% + 6px);
+    left: 50%;
+    translate: -50% 0;
+    animation: setsquare-tip-below var(--duration-fast) var(--ease-standard) both;
+  }
+  &[data-side='bottom']::before {
+    left: 0;
+    right: 0;
+    top: -8px;
+    height: 8px;
+  }
+  &[data-side='right'] {
+    left: calc(100% + 6px);
+    top: 50%;
+    translate: 0 -50%;
+    animation: setsquare-tip-beside var(--duration-fast) var(--ease-standard) both;
+  }
+  &[data-side='right']::before {
+    top: 0;
+    bottom: 0;
+    left: -8px;
+    width: 8px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+/* A panel comes in from the side the selection moved towards: --motion-distance and a fade, a fade alone at AAA. */
+@utility tabs-panel {
+  &[data-travel] {
+    animation: setsquare-panel-in var(--duration-enter) var(--ease-standard) both;
+  }
+  &[data-travel='forward'] {
+    --tabs-from: var(--motion-distance) 0;
+  }
+  &[data-travel='back'] {
+    --tabs-from: calc(var(--motion-distance) * -1) 0;
+  }
+  [data-orientation='vertical'] > &[data-travel='forward'] {
+    --tabs-from: 0 var(--motion-distance);
+  }
+  [data-orientation='vertical'] > &[data-travel='back'] {
+    --tabs-from: 0 calc(var(--motion-distance) * -1);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+
+/* ---------- Pagination: the results footer ----------
+   The page links' paint (Layer 2), the range's figures coming in from the way you paged, the Go button arriving,
+   and the mark on a control whose page is slow to come. At AAA all of it fades; under reduced motion none of it
+   moves, and the pending mark holds still. */
+@keyframes setsquare-current-pop { 0% { scale: 0.86; } 60% { scale: 1.04; } 100% { scale: 1; } }
+@keyframes setsquare-roll-in { from { opacity: 0; translate: 0 var(--pagination-from, 0); } }
+@keyframes setsquare-go-in { from { opacity: 0; translate: calc(var(--motion-distance) * -0.75) 0; } }
+@keyframes setsquare-pending { 0%, 100% { opacity: 0.2; scale: 0.4 1; } 50% { opacity: 1; scale: 1 1; } }
+@keyframes setsquare-pending-fade { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
+@keyframes setsquare-pending-hold { to { opacity: 0.6; scale: 1 1; } }
+@utility pagination-paint {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: var(--control-height);
+  min-width: var(--control-height);
+  padding: 0 8px;
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--foreground);
+  transition: background-color var(--duration-fast) var(--ease-standard);
+  [data-hovered] > & {
+    background-color: var(--accent);
+  }
+  [aria-current='page'] > & {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    font-weight: 700;
+  }
+  /* The new current page pops, at AA, once the page has changed. */
+  [data-moved] [aria-current='page'] > & {
+    animation: setsquare-current-pop 240ms var(--ease-standard);
+  }
+  [data-pending] > &::after {
+    content: '';
+    position: absolute;
+    left: 8px;
+    right: 8px;
+    bottom: 4px;
+    height: 2px;
+    border-radius: 2px;
+    background-color: currentColor;
+    opacity: 0;
+    /* Five beats, then it holds still: it stops by itself inside the five seconds 2.2.2 allows. */
+    animation:
+      setsquare-pending 900ms var(--ease-standard) var(--duration-loading-delay) 5,
+      setsquare-pending-hold 0s calc(var(--duration-loading-delay) + 4500ms) forwards;
+  }
+  @variant aaa {
+    [data-moved] [aria-current='page'] > & {
+      animation: none;
+    }
+    [data-pending] > &::after {
+      animation-name: setsquare-pending-fade, setsquare-pending-hold;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+    [data-moved] [aria-current='page'] > & {
+      animation: none;
+    }
+    [data-pending] > &::after {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+}
+/* The page field's mark when its page is slow: the same underline, under the number. */
+@utility pagination-field-pending {
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    left: calc(var(--control-pad-x) + 2px);
+    right: calc(var(--control-pad-x) + 2px);
+    bottom: calc(var(--field-band, 0px) + 4px);
+    height: 2px;
+    border-radius: 2px;
+    background-color: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    animation:
+      setsquare-pending 900ms var(--ease-standard) var(--duration-loading-delay) 5,
+      setsquare-pending-hold 0s calc(var(--duration-loading-delay) + 4500ms) forwards;
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+  @variant aaa {
+    &::after {
+      animation-name: setsquare-pending-fade, setsquare-pending-hold;
+    }
+  }
+}
+/* The range's figures come in from the way you paged: up for later pages, down for earlier ones. */
+@utility pagination-roll {
+  display: inline-block;
+  &[data-direction] {
+    animation: setsquare-roll-in 220ms var(--ease-standard);
+  }
+  &[data-direction='forward'] {
+    --pagination-from: calc(var(--motion-distance) * 0.75);
+  }
+  &[data-direction='back'] {
+    --pagination-from: calc(var(--motion-distance) * -0.75);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    animation: none !important;
+  }
+}
+@utility pagination-go {
+  animation: setsquare-go-in 180ms var(--ease-standard) both;
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+/* A new page's rows fade in (no movement, at every level). Key the rows by page so they are new elements. */
+@utility rows-arrive {
+  & > * {
+    animation: setsquare-fade 200ms var(--ease-standard);
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+}
+
+/* ---------- FeatureCard's ground: dots fading out from the icon, and one ripple across them ----------
+   The dots sit behind the title and the muted text, so they are light enough for that text to keep 4.5:1 on a
+   dot as well as on the card (scripts/lib/contrast.mjs measures it on the darkest dot). At AAA there are none:
+   7:1 leaves a product's muted text too little room over a pattern. The ripple brightens them as it passes,
+   once, in about two seconds; it doesn't run at AAA or under reduced motion. Each layer's strength is its opacity,
+   not a color-mix(), which Tailwind would give a full-strength fallback. */
+@property --feature-ripple-radius { syntax: "<length>"; inherits: false; initial-value: 0px; }
+@utility feature-dots {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.2;
+  background-image: radial-gradient(circle, var(--input) 1px, transparent 1.5px);
+  background-size: 16px 16px;
+  mask-image: radial-gradient(120% 170% at 0% 0%, black 0%, rgb(0 0 0 / 0.45) 38%, transparent 72%);
+  @variant aaa { display: none; }
+}
+@utility feature-ripple {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0;
+  background-image: radial-gradient(circle, var(--foreground) 1.1px, transparent 1.6px);
+  background-size: 16px 16px;
+  mask-image: radial-gradient(circle at var(--feature-ripple-origin, 48px 44px), transparent calc(var(--feature-ripple-radius) - 170px), black calc(var(--feature-ripple-radius) - 70px), transparent var(--feature-ripple-radius));
+  animation: setsquare-ripple calc(var(--duration-arrive) * 4.4) cubic-bezier(0.3, 0.1, 0.3, 1) 120ms both;
+  @variant aaa { display: none; }
+  @media (prefers-reduced-motion: reduce) { display: none; }
+}
+/* An update's picture: a muted, dotted frame for an illustration or a screenshot. */
+@utility feature-media {
+  position: relative;
+  overflow: clip;
+  background-color: var(--muted);
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    opacity: 0.26;
+    background-image: radial-gradient(circle, var(--input) 1px, transparent 1.5px);
+    background-size: 14px 14px;
+  }
+  & > :is(svg, img, video, picture) {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  & > img, & > video {
+    object-fit: cover;
+  }
+}
+
 /* ---------- view transitions: the shell is the anchor, content moves ---------- */
 ::view-transition { pointer-events: none; }
 ::view-transition-group(shell-header), ::view-transition-group(shell-sidebar), ::view-transition-group(site-header) { animation: none; z-index: 100; }