@adia-ai/web-components 0.6.47 → 0.6.49

package/styles/type/elements.css

@@ -0,0 +1,225 @@
+/* adia:element/type — Native HTML element defaults (the applied baseline).
+   table/lists/blockquote/hr/code/pre/dl/details/strong/em/small/mark/
+   del/ins/a/img — all via :where() (0,0,0) so component @scope always wins.
+   Moved verbatim out of typography.css (v0.6.48 foundation reorg, ADR-0035).
+   Phase B folds the element rules from resets.css in here too. */
+
+/* ═══════════════════════════════════════════════════════════
+   NATIVE ELEMENT DEFAULTS — semantic HTML baseline.
+   Low specificity via :where() so component @scope always wins.
+
+   Block:  table, lists, blockquote, hr, pre, dl, details
+   Inline: strong/b, em/i, small, mark, del, ins, code, a
+   Size:   smaller, larger/large (custom inline elements)
+   Media:  img
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Tables ── */
+:where(table) {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--a-body-size);
+  line-height: var(--a-body-leading);
+}
+
+:where(th) {
+  text-align: left;
+  font-size: var(--a-ui-sm);
+  font-weight: var(--a-weight-medium);
+  color: var(--a-fg-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: var(--a-space-2) var(--a-space-3);
+  border-bottom: 1px solid var(--a-border);
+}
+
+:where(td) {
+  padding: var(--a-space-2) var(--a-space-3);
+  border-bottom: 1px solid var(--a-border-subtle);
+  vertical-align: top;
+}
+
+:where(tr:hover td) {
+  background: var(--a-bg-muted);
+}
+
+/* ── Lists ── */
+:where(ul, ol) {
+  padding-inline-start: 1.5em;
+  margin-block: 0.5em;
+  font-size: var(--a-body-size);
+  line-height: var(--a-body-leading);
+  color: var(--a-fg);
+}
+
+:where(li) {
+  margin-block: 0.25em;
+}
+
+:where(li::marker) {
+  color: var(--a-fg-muted);
+}
+
+/* ── Blockquote ── */
+:where(blockquote) {
+  margin: 1em 0;
+  padding: var(--a-space-3) var(--a-space-4);
+  border-inline-start: 3px solid var(--a-border);
+  color: var(--a-fg-subtle);
+  font-style: italic;
+}
+
+:where(blockquote p) {
+  margin: 0;
+}
+
+/* ── Horizontal rule ── */
+:where(hr) {
+  border: none;
+  border-top: 1px solid var(--a-border-subtle);
+  margin-block: var(--a-space-4);
+}
+
+/* ── Code (inline + block) ── */
+:where(code) {
+  font-family: var(--a-code-family);
+  font-size: 0.9em;
+  background: var(--a-bg-muted);
+  padding: 0.125em 0.375em;
+  border-radius: var(--a-radius-sm);
+  color: var(--a-fg);
+}
+
+:where(pre) {
+  font-family: var(--a-code-family);
+  font-size: var(--a-code-size);
+  line-height: var(--a-code-leading);
+  background: var(--a-bg-muted);
+  padding: var(--a-space-4);
+  border-radius: var(--a-radius-md);
+  overflow-x: auto;
+  margin-block: var(--a-space-3);
+}
+
+:where(pre code) {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+
+/* ── Definition lists ── */
+:where(dt) {
+  font-weight: var(--a-weight-semibold);
+  margin-block-start: 0.75em;
+}
+
+:where(dd) {
+  margin-inline-start: 1.5em;
+  color: var(--a-fg-subtle);
+}
+
+/* ── Details/Summary ── */
+:where(summary) {
+  cursor: pointer;
+  font-weight: var(--a-weight-medium);
+}
+
+:where(details[open] summary) {
+  margin-block-end: 0.5em;
+}
+
+/* ── Strong / Bold ──
+   Semibold (600), not bold (700) — bold is the heading weight.
+   Color bumps to --a-fg-strong for contrast against body text. */
+:where(strong, b) {
+  font-weight: var(--a-weight-semibold);
+  color: var(--a-fg-strong);
+}
+
+/* ── Emphasis ── */
+:where(em, i) {
+  font-style: italic;
+}
+
+/* ── Small — de-emphasis in size and color ── */
+:where(small) {
+  font-size: 0.875em;
+  color: var(--a-fg-subtle);
+}
+
+/* ── Mark — system highlight tokens ── */
+:where(mark) {
+  background: var(--a-highlight);
+  color: var(--a-highlight-text);
+  padding-inline: 0.125em;
+  border-radius: 0.125em;
+}
+
+/* ── Deleted / Inserted — editorial change tracking ── */
+:where(del) {
+  text-decoration: line-through;
+  color: var(--a-fg-muted);
+}
+
+:where(ins) {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 0.15em;
+}
+
+/* ── Links ── */
+:where(a) {
+  color: var(--a-link);
+  text-decoration: none;
+}
+
+:where(a:hover) {
+  color: var(--a-link-hover);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+:where(a:visited) {
+  color: var(--a-link-visited);
+}
+
+/* ── Size wrappers — custom inline elements for relative sizing ── */
+:where(smaller) {
+  font-size: 0.875em;
+}
+
+:where(larger, large) {
+  font-size: 1.125em;
+}
+
+/* ── Images ── */
+:where(img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--a-radius-md);
+}
+
+/* ── Native element typography consolidated from resets.css ──
+   (v0.6.48 reorg, ADR-0035). These are (0,0,1)/(0,1,1) and only compete
+   with the :where() (0,0,0) defaults above, so specificity decides — the
+   relocation from late (resets) to here (early) is winner-preserving. */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+  line-height: 1.1;
+}
+
+p,
+li,
+figcaption {
+  text-wrap: pretty;
+}
+
+a:not([class]) {
+  text-underline-offset: 0.12em;
+}

package/styles/type/roles.css

@@ -0,0 +1,419 @@
+/* adia:role/type — The 13 typographic roles (L3) + their application.
+   Role tokens (--a-<role>-*), the h1-h6 :where() defaults, and the
+   [variant="<role>"] attribute that applies a role to any element.
+   Moved verbatim out of typography.css (v0.6.48 foundation reorg,
+   ADR-0035). NOTE: [variant] rules are grouped here (ahead of
+   type/elements.css) — safe because [variant] is (0,1,0) and native
+   element defaults are :where() (0,0,0); specificity decides, not order. */
+
+:root {
+  /* ═══════════════════════════════════════════════════════════
+     L3 ROLES — 13 roles across 6 jobs
+     Each role: family, weight, size, leading, tracking, case, color,
+                margin-block-start, margin-block-end
+     ═══════════════════════════════════════════════════════════ */
+
+  /* ──────────────────────────────────────
+     ANNOUNCE — declare what this is
+     ────────────────────────────────────── */
+
+  /* display — hero headlines, one per page, largest expression */
+  --a-display-family: var(--a-font-family-display);
+  --a-display-weight: var(--a-weight-bold);
+  --a-display-sm: clamp(22px, 20px + 1vw, 31px);
+  --a-display-md: clamp(29px, 24px + 1.5vw, 39px);
+  --a-display-lg: clamp(37px, 31px + 2vw, 52px);
+  --a-display-size: var(--a-display-sm);
+  --a-display-leading: var(--a-font-leading-tight);
+  --a-display-tracking: var(--a-font-tracking-tight);
+  --a-display-case: normal;
+  --a-display-color: var(--a-fg-strong);
+  --a-display-mbs: 0;
+  --a-display-mbe: 0.3em;
+
+  /* title — page/article canonical name, restrained vs display */
+  --a-title-family: var(--a-font-family-display);
+  --a-title-weight: var(--a-weight-bold);
+  --a-title-sm: clamp(20px, 18px + 0.375vw, 28px);
+  --a-title-md: clamp(24px, 20px + 0.5vw, 32px);
+  --a-title-lg: clamp(28px, 24px + 1vw, 36px);
+  --a-title-size: var(--a-title-sm);
+  --a-title-leading: var(--a-font-leading-snug);
+  --a-title-tracking: var(--a-font-tracking-snug);
+  --a-title-case: normal;
+  --a-title-color: var(--a-fg-strong);
+  --a-title-mbs: 0;
+  --a-title-mbe: 0.4em;
+
+  /* heading — h2-equivalent, primary content division */
+  --a-heading-family: var(--a-font-family-heading);
+  --a-heading-weight: var(--a-weight-bold);
+  --a-heading-sm: 16px;
+  --a-heading-md: 17px;
+  --a-heading-lg: 18px;
+  --a-heading-size: var(--a-heading-sm);
+  --a-heading-leading: var(--a-font-leading-snug);
+  --a-heading-tracking: var(--a-font-tracking-normal);
+  --a-heading-case: normal;
+  --a-heading-color: var(--a-fg-strong);
+  --a-heading-mbs: 1.5em;
+  --a-heading-mbe: 0.5em;
+
+  /* ──────────────────────────────────────
+     ORIENT — tell the reader where they are
+     ────────────────────────────────────── */
+
+  /* kicker — short label above a title (eyebrow/overline) */
+  --a-kicker-family: var(--a-font-family-ui);
+  --a-kicker-weight: var(--a-weight-semibold);
+  --a-kicker-sm: 11px;
+  --a-kicker-md: 12px;
+  --a-kicker-lg: 13px;
+  --a-kicker-size: var(--a-kicker-md);
+  --a-kicker-leading: var(--a-font-leading-normal);
+  --a-kicker-tracking: var(--a-font-tracking-wider);
+  --a-kicker-case: uppercase;
+  --a-kicker-color: var(--a-fg-muted);
+  --a-kicker-mbs: 0;
+  --a-kicker-mbe: 0.5em;
+
+  /* label — UI labels, form fields, badges, tabs */
+  --a-label-family: var(--a-font-family-ui);
+  --a-label-weight: var(--a-weight-medium);
+  --a-label-sm: 11px;
+  --a-label-md: 12px;
+  --a-label-lg: 13px;
+  --a-label-size: var(--a-label-md);
+  --a-label-leading: var(--a-font-leading-normal);
+  --a-label-tracking: var(--a-font-tracking-wide);
+  --a-label-case: normal;
+  --a-label-color: var(--a-fg);
+  --a-label-mbs: 0;
+  --a-label-mbe: 0.25em;
+
+  /* caption — figure captions, metadata, timestamps */
+  --a-caption-family: var(--a-font-family-text);
+  --a-caption-weight: var(--a-weight-normal);
+  --a-caption-sm: 13px;
+  --a-caption-md: 14px;
+  --a-caption-lg: 15px;
+  --a-caption-size: var(--a-caption-md);
+  --a-caption-leading: var(--a-font-leading-relaxed);
+  --a-caption-tracking: var(--a-font-tracking-wide);
+  --a-caption-case: normal;
+  --a-caption-color: var(--a-fg-subtle);
+  --a-caption-mbs: 0.5em;
+  --a-caption-mbe: 0;
+
+  /* ──────────────────────────────────────
+     ENTICE — pull the reader in
+     ────────────────────────────────────── */
+
+  /* deck — summary sentence(s) below a title */
+  --a-deck-family: var(--a-font-family-sans);
+  --a-deck-weight: var(--a-weight-normal);
+  --a-deck-sm: 17px;
+  --a-deck-md: 18px;
+  --a-deck-lg: 20px;
+  --a-deck-size: var(--a-deck-md);
+  --a-deck-leading: var(--a-font-leading-relaxed);
+  --a-deck-tracking: var(--a-font-tracking-normal);
+  --a-deck-case: normal;
+  --a-deck-color: var(--a-fg-subtle);
+  --a-deck-mbs: 0;
+  --a-deck-mbe: 1.5em;
+
+  /* ──────────────────────────────────────
+     DIVIDE — break flow into chunks
+     ────────────────────────────────────── */
+
+  /* section — h2/h3, major division within content */
+  --a-section-family: var(--a-font-family-heading);
+  --a-section-weight: var(--a-weight-semibold);
+  --a-section-sm: 16px;
+  --a-section-md: 17px;
+  --a-section-lg: 19px;
+  --a-section-size: var(--a-section-sm);
+  --a-section-leading: var(--a-font-leading-normal);
+  --a-section-tracking: var(--a-font-tracking-normal);
+  --a-section-case: normal;
+  --a-section-color: var(--a-fg-strong);
+  --a-section-mbs: 2em;
+  --a-section-mbe: 0.5em;
+
+  /* subsection — h3/h4, minor division */
+  --a-subsection-family: var(--a-font-family-heading);
+  --a-subsection-weight: var(--a-weight-semibold);
+  --a-subsection-sm: 15px;
+  --a-subsection-md: 16px;
+  --a-subsection-lg: 17px;
+  --a-subsection-size: var(--a-subsection-md);
+  --a-subsection-leading: var(--a-font-leading-normal);
+  --a-subsection-tracking: var(--a-font-tracking-normal);
+  --a-subsection-case: normal;
+  --a-subsection-color: var(--a-fg-strong);
+  --a-subsection-mbs: 1.5em;
+  --a-subsection-mbe: 0.5em;
+
+  /* ──────────────────────────────────────
+     IDENTIFY — name a thing in place
+     ────────────────────────────────────── */
+
+  /* metric — KPI numerals, dashboard stats, large data values */
+  --a-metric-family: var(--a-font-family-display);
+  --a-metric-weight: var(--a-weight-thin);
+  --a-metric-sm: clamp(24px, 22px + 1vw, 34px);
+  --a-metric-md: clamp(32px, 28px + 1.5vw, 48px);
+  --a-metric-lg: clamp(44px, 38px + 2vw, 64px);
+  --a-metric-size: var(--a-metric-md);
+  --a-metric-leading: var(--a-font-leading-tight);
+  --a-metric-tracking: var(--a-font-tracking-tight);
+  --a-metric-case: normal;
+  --a-metric-color: var(--a-fg-strong);
+  --a-metric-mbs: 0;
+  --a-metric-mbe: 0;
+  --a-metric-figures: lining;
+  --a-metric-spacing: tabular;
+
+  /* ──────────────────────────────────────
+     ACT — invite interaction
+     ────────────────────────────────────── */
+
+  /* UI / action — button text, link text, control labels, CTA microcopy
+     Sizes defined in tokens.css as --a-ui-size-* */
+  --a-ui-family: var(--a-font-family-ui);
+  --a-ui-weight: var(--a-weight-medium);
+  --a-ui-tiny: 10px;
+  --a-ui-2xs: 11px;
+  --a-ui-xs: 12px;
+  --a-ui-sm: 13px;
+  --a-ui-md: 14px;
+  --a-ui-lg: 15px;
+  --a-ui-size: var(--a-ui-md);
+  --a-ui-leading: 1;
+  --a-ui-line-height: var(--a-body-leading);  /* §230-bundle (v0.5.9): alias for prose-style line-height inside UI body copy (e.g. alert message text). 1.5 by default. Closes the alert.css orphaned reference. */
+  --a-ui-tracking: var(--a-font-tracking-normal);
+  --a-ui-case: normal;
+  --a-ui-color: inherit;
+  --a-ui-px: var(--a-space-2);
+  --a-ui-py: var(--a-space-2);
+  --a-ui-mbs: 0;
+  --a-ui-mbe: 0;
+
+  /* ──────────────────────────────────────
+     TEXT — running content
+     ────────────────────────────────────── */
+
+  /* body — default running text */
+  --a-body-family: var(--a-font-family-text);
+  --a-body-weight: var(--a-weight-normal);
+  --a-body-sm: 14px;
+  --a-body-md: 15px;
+  --a-body-lg: 16px;
+  --a-body-size: var(--a-body-md);
+  --a-body-leading: var(--a-font-leading-loose);
+  --a-body-tracking: var(--a-font-tracking-normal);
+  --a-body-case: normal;
+  --a-body-color: var(--a-fg);
+  --a-body-mbs: 0;
+  --a-body-mbe: 1em;
+  --a-body-max-width: 65ch;
+
+  /* code — inline and block code */
+  --a-code-family: var(--a-font-family-code);
+  --a-code-weight: var(--a-weight-normal);
+  --a-code-sm: 13px;
+  --a-code-md: 14px;
+  --a-code-lg: 15px;
+  --a-code-size: var(--a-code-md);
+  --a-code-leading: var(--a-font-leading-relaxed);
+  --a-code-tracking: var(--a-font-tracking-normal);
+  --a-code-case: normal;
+  --a-code-color: var(--a-fg);
+  --a-code-mbs: 0;
+  --a-code-mbe: 0;
+
+  /* ═══════════════════════════════════════════════════════════
+     MODE OVERRIDES — REGISTER (voice) control.
+
+     [prose] is ORTHOGONAL to [size]:
+       • [prose] shifts the sm/md/lg VALUES (bigger at every tier)
+         and changes the DEFAULT tier pick to -md for all roles.
+       • [size] on containers shifts which tier is active.
+
+     Neither [prose] nor [size] should be set globally on <body>.
+     Both scope to containers — a page can have a compact sidebar
+     + expressive hero + standard body.
+     ═══════════════════════════════════════════════════════════ */
+}
+
+/* ═══════════════════════════════════════════════════════════
+   VARIANT ATTRIBUTE — applies typography roles to any element.
+
+   h1-h6 provide semantic meaning, variant provides visual style.
+   Works on any element, not just text-ui.
+
+     <h1 variant="display">Hero</h1>
+     <h4 variant="heading">Section</h4>
+     <p>Metadata</p>
+     <span variant="kicker">Category</span>
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── h1–h6 defaults — sensible roles, zero specificity so [variant] wins ── */
+:where(h1) {
+  font-family: var(--a-title-family);
+  font-weight: var(--a-title-weight);
+  font-size: var(--a-title-size);
+  line-height: var(--a-title-leading);
+  letter-spacing: var(--a-title-tracking);
+  color: var(--a-title-color);
+}
+:where(h2) {
+  font-family: var(--a-heading-family);
+  font-weight: var(--a-heading-weight);
+  font-size: var(--a-heading-size);
+  line-height: var(--a-heading-leading);
+  letter-spacing: var(--a-heading-tracking);
+  color: var(--a-heading-color);
+}
+:where(h3) {
+  font-family: var(--a-section-family);
+  font-weight: var(--a-section-weight);
+  font-size: var(--a-section-size);
+  line-height: var(--a-section-leading);
+  letter-spacing: var(--a-section-tracking);
+  color: var(--a-section-color);
+}
+:where(h4) {
+  font-family: var(--a-subsection-family);
+  font-weight: var(--a-subsection-weight);
+  font-size: var(--a-subsection-size);
+  line-height: var(--a-subsection-leading);
+  letter-spacing: var(--a-subsection-tracking);
+  color: var(--a-subsection-color);
+}
+:where(h5) {
+  font-family: var(--a-caption-family);
+  font-weight: var(--a-caption-weight);
+  font-size: var(--a-caption-size);
+  line-height: var(--a-caption-leading);
+  letter-spacing: var(--a-caption-tracking);
+  color: var(--a-caption-color);
+}
+:where(h6) {
+  font-family: var(--a-label-family);
+  font-weight: var(--a-label-weight);
+  font-size: var(--a-label-size);
+  line-height: var(--a-label-leading);
+  letter-spacing: var(--a-label-tracking);
+  color: var(--a-label-color);
+}
+
+[variant="display"] {
+  font-family: var(--a-display-family);
+  font-weight: var(--a-display-weight);
+  font-size: var(--a-display-size);
+  line-height: var(--a-display-leading);
+  letter-spacing: var(--a-display-tracking);
+  text-transform: var(--a-display-case);
+  color: var(--a-display-color);
+}
+[variant="title"] {
+  font-family: var(--a-title-family);
+  font-weight: var(--a-title-weight);
+  font-size: var(--a-title-size);
+  line-height: var(--a-title-leading);
+  letter-spacing: var(--a-title-tracking);
+  text-transform: var(--a-title-case);
+  color: var(--a-title-color);
+}
+[variant="heading"] {
+  font-family: var(--a-heading-family);
+  font-weight: var(--a-heading-weight);
+  font-size: var(--a-heading-size);
+  line-height: var(--a-heading-leading);
+  letter-spacing: var(--a-heading-tracking);
+  text-transform: var(--a-heading-case);
+  color: var(--a-heading-color);
+}
+[variant="section"] {
+  font-family: var(--a-section-family);
+  font-weight: var(--a-section-weight);
+  font-size: var(--a-section-size);
+  line-height: var(--a-section-leading);
+  letter-spacing: var(--a-section-tracking);
+  text-transform: var(--a-section-case);
+  color: var(--a-section-color);
+}
+[variant="subsection"] {
+  font-family: var(--a-subsection-family);
+  font-weight: var(--a-subsection-weight);
+  font-size: var(--a-subsection-size);
+  line-height: var(--a-subsection-leading);
+  letter-spacing: var(--a-subsection-tracking);
+  text-transform: var(--a-subsection-case);
+  color: var(--a-subsection-color);
+}
+[variant="body"] {
+  font-family: var(--a-body-family);
+  font-weight: var(--a-body-weight);
+  font-size: var(--a-body-size);
+  line-height: var(--a-body-leading);
+  letter-spacing: var(--a-body-tracking);
+  text-transform: var(--a-body-case);
+  color: var(--a-fg);
+}
+[variant="caption"] {
+  font-family: var(--a-caption-family);
+  font-weight: var(--a-caption-weight);
+  font-size: var(--a-caption-size);
+  line-height: var(--a-caption-leading);
+  letter-spacing: var(--a-caption-tracking);
+  text-transform: var(--a-caption-case);
+  color: var(--a-caption-color);
+}
+[variant="label"] {
+  font-family: var(--a-label-family);
+  font-weight: var(--a-label-weight);
+  font-size: var(--a-label-size);
+  line-height: var(--a-label-leading);
+  letter-spacing: var(--a-label-tracking);
+  text-transform: var(--a-label-case);
+  color: var(--a-label-color);
+}
+[variant="kicker"] {
+  font-family: var(--a-kicker-family);
+  font-weight: var(--a-kicker-weight);
+  font-size: var(--a-kicker-size);
+  line-height: var(--a-kicker-leading);
+  letter-spacing: var(--a-kicker-tracking);
+  text-transform: uppercase;
+  color: var(--a-kicker-color);
+}
+[variant="deck"] {
+  font-family: var(--a-deck-family);
+  font-weight: var(--a-deck-weight);
+  font-size: var(--a-deck-size);
+  line-height: var(--a-deck-leading);
+  letter-spacing: var(--a-deck-tracking);
+  text-transform: var(--a-deck-case);
+  color: var(--a-deck-color);
+}
+[variant="metric"] {
+  font-family: var(--a-metric-family);
+  font-weight: var(--a-metric-weight);
+  font-size: var(--a-metric-size);
+  line-height: var(--a-metric-leading);
+  letter-spacing: var(--a-metric-tracking);
+  text-transform: var(--a-metric-case);
+  color: var(--a-metric-color);
+}
+[variant="code"] {
+  font-family: var(--a-code-family);
+  font-weight: var(--a-code-weight);
+  font-size: var(--a-code-size);
+  line-height: var(--a-code-leading);
+  letter-spacing: var(--a-code-tracking);
+  text-transform: var(--a-code-case);
+  color: var(--a-code-color);
+}