@contentrain/astro-kit 0.40.0 → 0.42.0

package/README.md

@@ -81,6 +81,22 @@ The starter sets it to the accent; a site whose accent does not reach 4.5:1 on i
 surface sets a readable one. A dark section (`tone="inverse"`) reads
 `--color-accent-text-inverse` in its place.
 
+Quieter text (an intro, a caption, a role, a footer link) is a colour role, never
+opacity: dimmed text lays its colour over the band, and on a mid-tone band that falls
+under 4.5:1. It reads `--color-ink-muted` on a light band, `--color-ink-muted-inverse`
+on a dark one (the starter mixes the surface toward the ink; without it, the band's own
+text colour) and the fill's own ink on an accent or brand band. A light surface inside
+a band (a card, a form panel, a menu) is back on `--color-ink-muted`. The classes are
+in `_shared/muted.ts`.
+
+### Section hooks
+
+Every section component renders its root with an `id` and `data-kit-section="<component id>"`
+(`hero`, `card-grid`, `slider`, …), so a site's theme or a design layer can style one
+kind of section, or one section, without touching the component. The id is the one the
+page gives, or the component id counted per page (`hero`, then `hero-2`), the same on
+every build.
+
 A migrated site also carries its theme's type and shape, and components read
 these with a fallback to the kit's own values, so a site without them looks
 unchanged:

package/catalog.json

@@ -23,6 +23,7 @@
     "--radius-control",
     "--radius-image",
     "--spacing-gutter",
+    "--color-ink-muted-inverse",
     "--text-nav",
     "--text-footer",
     "--text-heading-1",
@@ -103,7 +104,9 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -457,7 +460,9 @@
         "behaviors.ts",
         "embed-frame.ts",
         "embed-target.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -643,6 +648,11 @@
               "description": "The section's minimum height."
             }
           }
+        },
+        "id": {
+          "type": "string",
+          "content": false,
+          "description": "Anchor id of the section. Without one, `behavior`, `behavior-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -742,7 +752,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -773,6 +785,14 @@
           "default": "start",
           "description": "Text alignment inside cards and of the header."
         },
+        "layout": {
+          "options": [
+            "grid",
+            "rows"
+          ],
+          "default": "grid",
+          "description": "Cards in a grid, or one item per row: title, text and link on one axis, a hairline between rows, no card box (columns and style do not apply)."
+        },
         "tone": {
           "options": [
             "default",
@@ -847,6 +867,12 @@
           },
           "description": "The cards. image is an ImageInput ({ src, alt, width?, height? })."
         },
+        "index": {
+          "type": "boolean",
+          "default": false,
+          "content": false,
+          "description": "With layout rows: a numbered list, each row led by its number (01, 02, …) in the muted role."
+        },
         "headingLevel": {
           "type": "integer",
           "min": 2,
@@ -964,6 +990,11 @@
               "description": "The section's minimum height."
             }
           }
+        },
+        "id": {
+          "type": "string",
+          "content": false,
+          "description": "Anchor id of the section; the title gets `<id>-title`. Without one, `card-grid`, `card-grid-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -1087,7 +1118,9 @@
       "uses": [],
       "shared": [
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -1319,7 +1352,9 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -1646,7 +1681,9 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -1901,7 +1938,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `cta`, `cta-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -1947,7 +1984,9 @@
       "shared": [
         "Button.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2338,7 +2377,9 @@
       "uses": [],
       "shared": [
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2611,7 +2652,9 @@
       "shared": [
         "KitImage.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -2823,7 +2866,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `feature-list`, `feature-list-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -2871,6 +2914,7 @@
       "category": "chrome",
       "uses": [],
       "shared": [
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -3093,7 +3137,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -3389,6 +3435,8 @@
       "shared": [
         "Button.astro",
         "KitImage.astro",
+        "instance-id.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -3618,8 +3666,12 @@
       "shared": [
         "Button.astro",
         "KitImage.astro",
+        "Lines.astro",
         "Section.astro",
+        "bleed.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -3691,6 +3743,31 @@
           ],
           "default": "own",
           "description": "The level whose site size the heading takes when it is not the level it is written at: h1 on an h2 heading keeps a source's second h1 at the h1 size under a page that keeps one h1. own: the heading's own level under headingScale theme, nothing otherwise. Any other value than own sets the size by itself."
+        },
+        "headingLines": {
+          "options": [
+            "flow",
+            "lines"
+          ],
+          "default": "flow",
+          "description": "flow: the heading is one run of text. lines: each line the author broke it into (a line break, \\n, in the heading) is a block of its own, data-kit-line=\"1\", \"2\", …, so a theme or a design layer can give a line its own ink, indent or size. Still one heading, read as one sentence."
+        },
+        "stackOrder": {
+          "options": [
+            "text-first",
+            "media-first"
+          ],
+          "default": "text-first",
+          "description": "Split and centered: the image before the text, on phones and on the start side (split), or above the heading (centered). A cover ignores it."
+        },
+        "imageBleed": {
+          "options": [
+            "none",
+            "edge",
+            "overlap"
+          ],
+          "default": "none",
+          "description": "Split and centered: edge runs the image on to the window's edge on its side (both sides when centered); overlap also lets it cross the section's bottom edge by --hero-overlap (3rem), over the next section's top padding, when the image comes last: with stackOrder media-first it draws as edge, so it never covers the text. A cover ignores it."
         }
       },
       "props": {
@@ -3809,7 +3886,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `hero`, `hero-2`, … in render order, so every section on a page has its own."
         },
         "minHeight": {
           "type": "integer",
@@ -3976,6 +4053,7 @@
       "category": "chrome",
       "uses": [],
       "shared": [
+        "muted.ts",
         "safe-url.ts"
       ],
       "variants": {
@@ -4057,7 +4135,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -4266,7 +4346,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `logo-cloud`, `logo-cloud-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -4312,6 +4392,8 @@
       "category": "chrome",
       "uses": [],
       "shared": [
+        "instance-id.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -4437,7 +4519,9 @@
       "uses": [],
       "shared": [
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -4927,7 +5011,9 @@
       ],
       "shared": [
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -5247,7 +5333,9 @@
       "shared": [
         "Button.astro",
         "Section.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -5385,7 +5473,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `pricing`, `pricing-2`, … in render order, so every section on a page has its own."
         },
         "compact": {
           "type": "boolean",
@@ -5660,6 +5748,7 @@
       "category": "chrome",
       "uses": [],
       "shared": [
+        "instance-id.ts",
         "safe-url.ts"
       ],
       "variants": {
@@ -5747,7 +5836,9 @@
         "embed-frame.ts",
         "embed-target.ts",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -6102,8 +6193,9 @@
       "category": "chrome",
       "uses": [],
       "shared": [
-        "social.ts",
-        "safe-url.ts"
+        "muted.ts",
+        "safe-url.ts",
+        "social.ts"
       ],
       "variants": {
         "display": {
@@ -6205,7 +6297,10 @@
         "Button.astro",
         "KitImage.astro",
         "Section.astro",
+        "bleed.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -6239,10 +6334,13 @@
           "options": [
             "none",
             "rounded",
-            "circle"
+            "circle",
+            "arch",
+            "chamfer",
+            "blob"
           ],
           "default": "rounded",
-          "description": "The image's corners: square, the theme's rounding, or a circle."
+          "description": "The image's outline: square, the theme's rounding, a circle, or a fixed mask: an arch over the image, a cut corner (chamfer), a soft blob."
         },
         "imageBleed": {
           "options": [
@@ -6533,7 +6631,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `split`, `split-2`, … in render order, so every section on a page has its own."
         },
         "sticky": {
           "type": "boolean",
@@ -6605,7 +6703,9 @@
         "embed-frame.ts",
         "embed-target.ts",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -6854,7 +6954,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `stats`, `stats-2`, … in render order, so every section on a page has its own."
         }
       },
       "slots": {},
@@ -6905,7 +7005,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -7016,7 +7118,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `steps`, `steps-2`, … in render order, so every section on a page has its own."
         },
         "currentLabel": {
           "type": "string",
@@ -7185,7 +7287,9 @@
         "Button.astro",
         "Section.astro",
         "SectionHeader.astro",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -7441,9 +7545,11 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
-        "social.ts",
+        "muted.ts",
         "safe-url.ts",
+        "social.ts",
         "types.ts"
       ],
       "variants": {
@@ -7564,7 +7670,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `team`, `team-2`, … in render order, so every section on a page has its own."
         },
         "bioClamp": {
           "type": "integer",
@@ -7748,7 +7854,9 @@
         "KitImage.astro",
         "Section.astro",
         "image.ts",
+        "instance-id.ts",
         "measured.ts",
+        "muted.ts",
         "safe-url.ts",
         "types.ts"
       ],
@@ -7990,7 +8098,7 @@
         "id": {
           "type": "string",
           "content": false,
-          "description": "Anchor id of the section; the heading gets `<id>-title`."
+          "description": "Anchor id of the section; the heading gets `<id>-title`. Without one, `testimonial`, `testimonial-2`, … in render order, so every section on a page has its own."
         },
         "ratingLabel": {
           "type": "string",

package/components/_shared/Lines.astro

@@ -0,0 +1,12 @@
+---
+// Text the author broke into lines (`\n`), one block per line, each marked `data-kit-line="<n>"` so a theme or a
+// design layer can give a line its own ink, indent or size. The lines stay one text: a heading made of them is
+// still one heading, read as one sentence (a space between the blocks keeps the words apart when it is read out).
+// Without a line break the text is printed as it is.
+interface Props {
+  text: string
+}
+
+const lines = Astro.props.text.split('\n').map(line => line.trim()).filter(Boolean)
+---
+{lines.length > 1 ? lines.map((line, i) => <>{i > 0 && ' '}<span class="block" data-kit-line={i + 1}>{line}</span></>) : Astro.props.text}

package/components/_shared/Section.astro

@@ -4,6 +4,7 @@
 // their order.
 import { tv } from 'tailwind-variants'
 import { measuredFrame } from './measured'
+import { mutedAccent, mutedBrand, mutedInverse, mutedReset } from './muted'
 import { safeSrc } from './safe-url'
 import type { MeasuredStyle } from './types'
 
@@ -11,13 +12,14 @@ const section = tv({
   base: '',
   variants: {
     tone: {
-      default: 'bg-surface text-ink',
-      muted: 'bg-surface-muted text-ink',
-      // A dark band reads the accent's text colour made for it (`--color-accent-text-inverse`).
-      inverse: 'bg-ink text-surface [--color-accent-text:var(--color-accent-text-inverse)]',
-      accent: 'bg-accent text-accent-ink',
+      default: `bg-surface text-ink ${mutedReset}`,
+      muted: `bg-surface-muted text-ink ${mutedReset}`,
+      // A dark band reads the accent's text colour made for it (`--color-accent-text-inverse`), and its quieter text
+      // the muted role made for it (`muted.ts`).
+      inverse: `bg-ink text-surface [--color-accent-text:var(--color-accent-text-inverse)] ${mutedInverse}`,
+      accent: `bg-accent text-accent-ink ${mutedAccent}`,
       // The site's brand colour where it is not the accent (a band the source paints in the builder's own colour).
-      brand: 'bg-brand text-brand-ink',
+      brand: `bg-brand text-brand-ink ${mutedBrand}`,
       // No fill of its own: the page's background and text colour show through.
       none: '',
     },
@@ -42,15 +44,17 @@ interface Props {
   id?: string | undefined
   class?: string | undefined
   'aria-labelledby'?: string | undefined
+  /** The component this section is (`hero`, `card-grid`): `data-kit-section`'s value, the hook a theme or a design layer styles one kind of section by. */
+  kit?: string | undefined
   /** The source section's measured style (`MeasuredStyle`): frame width, padding, fill, image, columns, gap. Wins over `tone`. */
   measured?: MeasuredStyle | undefined
 }
 
-const { tone: given, spacing, width = 'page', as: Tag = 'section', id, class: className, 'aria-labelledby': labelledBy, measured } = Astro.props
+const { tone: given, spacing, width = 'page', as: Tag = 'section', id, class: className, 'aria-labelledby': labelledBy, kit, measured } = Astro.props
 const m = measuredFrame(measured)
 // A measured fill is the section's own colour, its text set by the measured tone; a tone alone picks the kit's band.
 const tone = m.color ? 'none' : m.tone === 'dark' ? 'inverse' : m.tone === 'light' ? 'default' : given
-const text = m.color ? (m.tone === 'dark' ? 'text-surface [--color-accent-text:var(--color-accent-text-inverse)]' : 'text-ink') : undefined
+const text = m.color ? (m.tone === 'dark' ? `text-surface [--color-accent-text:var(--color-accent-text-inverse)] ${mutedInverse}` : `text-ink ${mutedReset}`) : undefined
 const layered = m.image || m.overlay ? 'relative isolate overflow-hidden' : undefined
 const style = [m.color && `background-color: ${m.color}`, m.style].filter(Boolean).join('; ') || undefined
 // The reading column reads its own width token.
@@ -58,7 +62,7 @@ const frameStyle = width === 'prose' ? m.frameStyle?.replace('--container-page:'
 const backdrop = safeSrc(m.image?.src)
 const dataTone = m.color ? (m.tone === 'dark' ? 'inverse' : 'default') : tone ?? 'default'
 ---
-<Tag id={id} aria-labelledby={labelledBy} class={section({ tone, spacing, class: [text, layered, className].filter(Boolean).join(' ') || undefined })} style={style} data-tone={dataTone} data-kit-section data-kit-spacing={spacing ?? 'md'} data-kit-measured={measured ? '' : undefined}>
+<Tag id={id} aria-labelledby={labelledBy} class={section({ tone, spacing, class: [text, layered, className].filter(Boolean).join(' ') || undefined })} style={style} data-tone={dataTone} data-kit-section={kit ?? ''} data-kit-spacing={spacing ?? 'md'} data-kit-measured={measured ? '' : undefined}>
   {m.image && backdrop && <img src={backdrop} alt="" loading="lazy" decoding="async" class="absolute inset-0 -z-10 h-full w-full" style={`object-fit: ${m.image.fit}${m.image.position ? `; object-position: ${m.image.position}` : ''}`} />}
   {m.overlay && <div class="absolute inset-0 -z-10" style={`background: ${m.overlay}`} aria-hidden="true" />}
   {width === 'none' ? <slot /> : <div class={width === 'prose' ? 'container-prose' : 'container-page'} style={frameStyle}><slot /></div>}

package/components/_shared/SectionHeader.astro

@@ -3,6 +3,7 @@
 // section components that have no header of their own use it; with none of the four given it draws nothing.
 import Button from './Button.astro'
 import type { ActionInput } from './types'
+import { muted } from './muted'
 
 interface Props {
   heading?: string | undefined
@@ -19,9 +20,9 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
 ---
 {(heading || intro || eyebrow || actions.length > 0) && (
   <header class="mb-10 flex max-w-2xl flex-col gap-3">
-    {eyebrow && <p class="text-sm font-semibold tracking-wide uppercase opacity-80">{eyebrow}</p>}
+    {eyebrow && <p class:list={['text-sm font-semibold tracking-wide uppercase', muted]}>{eyebrow}</p>}
     {heading && <Heading id={headingId} class="text-3xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-4xl">{heading}</Heading>}
-    {intro && <p class="text-lg opacity-80" data-kit-text>{intro}</p>}
+    {intro && <p class:list={['text-lg', muted]} data-kit-text>{intro}</p>}
     {actions.length > 0 && <div class="mt-2 flex flex-wrap gap-3">{actions.map(action => <Button action={action} />)}</div>}
   </header>
 )}

package/components/_shared/bleed.ts

@@ -0,0 +1,8 @@
+// The viewport's edge, from the content's edge: what the page frame leaves of the window, halved, plus the frame's own
+// gutter (`container-page` caps its width with the gutter inside it). A section whose image runs on to the window's
+// edge (Split, Hero `imageBleed`) pulls it out by this much on its side, on wide screens. Literal class names, so the
+// stylesheet builder sees them.
+export const BLEED = {
+  end: 'md:-me-[calc((100vw-min(var(--container-page)+2*var(--container-inset,0px),100vw))/2+var(--spacing-gutter,2rem))]',
+  start: 'md:-ms-[calc((100vw-min(var(--container-page)+2*var(--container-inset,0px),100vw))/2+var(--spacing-gutter,2rem))]',
+} as const

package/components/_shared/instance-id.ts

@@ -0,0 +1,24 @@
+// A component's id when the page gives none. Its tabs, lightboxes, labels and buttons point at elements by id
+// (`aria-controls`, `popovertarget`, `for`), so two instances on one page that both took the same default (two galleries,
+// two FAQs, two newsletters) would point into each other: a click in the second opened the first one's image. Each
+// default is taken once per page instead: `gallery`, then `gallery-2`, `gallery-3`, in the order the page renders
+// them, the same on every build. An id the page gives is kept as it is, and a default steps around it.
+
+const taken = new WeakMap<object, Set<string>>()
+
+/** `given` when set, else `base`, `base-2`, … — the first one not yet used on this page (`page` = `Astro.locals`). */
+export function instanceId(page: object, given: string | undefined, base: string): string {
+  let ids = taken.get(page)
+  if (!ids) {
+    ids = new Set()
+    taken.set(page, ids)
+  }
+  if (given) {
+    ids.add(given)
+    return given
+  }
+  let id = base
+  for (let n = 2; ids.has(id); n++) id = `${base}-${n}`
+  ids.add(id)
+  return id
+}

package/components/_shared/muted.ts

@@ -0,0 +1,19 @@
+// Quieter text (an intro, a caption, a role, a footer link) in a colour role, never a dimmed ink: opacity lays the
+// text over whatever is behind it, and on a mid-tone band that falls under 4.5:1. The role is the one made for the
+// band the text sits on. A band sets `--kit-muted` (dark: `--color-ink-muted-inverse`, a fill: its own ink), a light
+// surface inside it (a card, a form panel, a drawer) clears it again, and without either it is `--color-ink-muted`.
+
+/** Quieter text: the band's muted role. */
+export const muted = 'text-[color:var(--kit-muted,var(--color-ink-muted))]'
+
+/** On a dark band: the muted role made for it, or the band's own text where the site's theme has none. */
+export const mutedInverse = '[--kit-muted:var(--color-ink-muted-inverse,var(--color-surface))]'
+
+/** On the accent fill: no muted role is made for it, so quieter text there is the fill's own ink. */
+export const mutedAccent = '[--kit-muted:var(--color-accent-ink)]'
+
+/** On the brand fill: the fill's own ink, as on the accent. */
+export const mutedBrand = '[--kit-muted:var(--color-brand-ink)]'
+
+/** A light surface inside a band (a card, a form panel, a drawer): back to the page's muted role. */
+export const mutedReset = '[--kit-muted:initial]'