@gemboss/website-ui 0.4.0 → 0.6.0

package/css/article.css

@@ -0,0 +1,237 @@
+/* article (0.5.0): the parts around a long read and the blog index. Breadcrumbs, the meta row, the article layout with
+   its contents list (.gw-toc), callouts, the post list and prev / next pagination. The article's own HTML stays in
+   .gw-prose (prose.css); .gw-card__media is in components.css. */
+
+/* breadcrumbs: a nav with an <ol>, the last item aria-current="page". The separator is drawn here (a chevron mask,
+   no character), so screen readers read the trail and not the punctuation. The current item stays on one line and
+   is cut with an ellipsis on a phone: the h1 right under it says it in full. */
+.gw-breadcrumbs { color: var(--gw-muted); font-size: 13px; line-height: 1.5; }
+.gw-breadcrumbs > ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
+.gw-breadcrumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
+.gw-breadcrumbs li + li::before {
+  content: "";
+  flex: none;
+  width: 12px;
+  height: 12px;
+  background: currentColor;
+  opacity: 0.6;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+}
+.gw-breadcrumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--gw-muted); }
+.gw-breadcrumbs a:hover { color: var(--gw-ink); text-decoration: underline; text-underline-offset: 4px; }
+.gw-breadcrumbs [aria-current="page"] {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--gw-ink);
+  font-weight: 500;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* meta row: author (an optional 24px avatar), category, published or updated <time datetime>, read time, each item a
+   <span> (or a <time>, an <a>) straight in the row. Small muted text on 24px lines that wraps. A dot sits before every
+   item; the row is pulled 16px to the left and clipped there, so the dot before the first item of each line is hidden
+   and a wrapped line never starts with a separator. */
+.gw-article-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: 4px;
+  margin-inline-start: -16px;
+  clip-path: inset(-8px -8px -8px 12px);
+  color: var(--gw-muted);
+  font-size: 14px;
+  line-height: 24px;
+}
+.gw-article-meta > *::before {
+  content: "";
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin-inline: 6px;
+  border-radius: var(--gw-radius-chip);
+  background: var(--gw-line-strong);
+  vertical-align: middle;
+}
+.gw-article-meta a {
+  display: inline-block;
+  color: var(--gw-accent-strong);
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+}
+.gw-article-meta a:hover { text-decoration-color: currentColor; }
+.gw-article-meta__avatar { display: inline-block; width: 24px; height: 24px; margin-inline-end: 8px; border-radius: var(--gw-radius-chip); object-fit: cover; vertical-align: top; }
+
+/* the article page (templates/sections/article.html): <article class="gw-wrap gw-article"> holding __head
+   (breadcrumbs, h1, meta), an optional __hero image, the .gw-toc and the .gw-prose, in that order. On phones one
+   column, the contents folded above the prose. From 1080px (the kit's desktop width, where the header shows its nav)
+   two columns: the reading column (68ch, the prose measure) and the contents beside it, sticky under the header. */
+.gw-article { padding-block: 32px 64px; }
+.gw-article__head > * + * { margin-top: 16px; }
+.gw-article__head h1 { font-size: var(--gw-display-h2); }
+.gw-article__hero { margin-top: 32px; }
+.gw-article__hero img { width: 100%; border-radius: var(--gw-radius-card); background: var(--gw-bg-soft); }
+.gw-article__hero figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
+.gw-article > .gw-toc { margin-top: 32px; }
+.gw-article > .gw-prose { margin-top: 40px; }
+@media (min-width: 768px) {
+  .gw-article { padding-block: 48px 96px; }
+  .gw-article__hero { margin-top: 40px; }
+}
+@media (min-width: 1080px) {
+  .gw-article {
+    display: grid;
+    grid-template-columns: minmax(0, 68ch) minmax(200px, 240px);
+    grid-template-rows: auto auto 1fr;
+    justify-content: space-between;
+    column-gap: 64px;
+  }
+  .gw-article > * { grid-column: 1; }
+  .gw-article > .gw-article__head { grid-row: 1; }
+  .gw-article > .gw-article__hero { grid-row: 2; }
+  .gw-article > .gw-prose { grid-row: 3; }
+  .gw-article > .gw-toc { grid-column: 2; grid-row: 2 / 4; margin-top: 40px; }
+}
+
+/* contents: <nav class="gw-toc" aria-label="On this page" data-gw-toc> holding a <details>, its <summary> and an <ol>
+   of links to the article's h2s (a nested <ol> for h3s). Plain links: they work without the script. website.js marks
+   the section in view (aria-current="true", the accent bar) and opens the <details> from 1080px, where the list sits
+   beside the article and sticks under the header; below 1080px it is folded above the article and a link closes it.
+   The weight never changes with the mark, so the list does not move. */
+.gw-toc { font-size: 14px; line-height: 1.45; }
+.gw-toc > details { border: 1px solid var(--gw-line); border-radius: var(--gw-radius-card); background: var(--gw-surface); }
+.gw-toc summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: var(--gw-tap-min);
+  padding: 8px 16px;
+  color: var(--gw-ink);
+  font-weight: 600;
+  list-style: none;
+  cursor: pointer;
+}
+.gw-toc summary::-webkit-details-marker { display: none; }
+.gw-toc summary::after {
+  content: "";
+  flex: none;
+  width: 12px;
+  height: 12px;
+  background: currentColor;
+  opacity: 0.6;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+  transition: transform 0.18s var(--gw-ease);
+}
+.gw-toc details[open] > summary::after { transform: rotate(180deg); }
+.gw-toc ol { margin: 0; padding: 0; list-style: none; }
+/* the rail is a background, so the list can scroll inside itself without clipping the bar of the marked link */
+.gw-toc details > ol { margin: 0 16px 16px; background: linear-gradient(var(--gw-line), var(--gw-line)) 0 0 / 1px 100% no-repeat; }
+.gw-toc a {
+  display: block;
+  padding: 6px 8px 6px 16px;
+  border-left: 2px solid transparent;
+  color: var(--gw-muted);
+}
+.gw-toc ol ol a { padding-left: 32px; }
+.gw-toc a:hover { color: var(--gw-ink); }
+.gw-toc a:focus-visible { outline-offset: -2px; }
+.gw-toc a[aria-current="true"] { border-left-color: var(--gw-accent); color: var(--gw-ink); }
+/* from 1080px: sticky beside the article; a long list scrolls inside itself, under the summary. Under the floating
+   header it sticks below the card. */
+@media (min-width: 1080px) {
+  .gw-toc { position: sticky; top: calc(var(--gw-header-height) + 32px); align-self: start; }
+  .gw-toc > details { border: 0; border-radius: var(--gw-radius-0); background: transparent; }
+  .gw-toc summary { min-height: 32px; padding: 0; color: var(--gw-muted); font-size: 13px; }
+  .gw-toc details > ol {
+    max-height: calc(100vh - var(--gw-header-height) - 120px);
+    margin: 8px 0 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+  :root:has(.gw-header--float) .gw-toc { top: calc(var(--gw-header-height) + var(--gw-header-gap) + 32px); }
+  :root:has(.gw-header--float) .gw-toc details > ol { max-height: calc(100vh - var(--gw-header-height) - var(--gw-header-gap) - 120px); }
+}
+/* a contents link glides to its section, except for a visitor who asked for less motion (base.css stops it too) */
+@media (prefers-reduced-motion: no-preference) {
+  :root:has(.gw-toc) { scroll-behavior: smooth; }
+}
+
+/* callout: a note, a tip or a warning inside an article. The kind is said in words by __label (Note, Tip, Warning,
+   or the reader's language), with a 16px icon before it; the tint only repeats it. Tints are the kit's: the accent's,
+   success's and warning's -soft grounds; the icon takes the solid hue. role="note" on the box. */
+.gw-callout {
+  padding: 16px 20px;
+  border-radius: var(--gw-radius-card);
+  background: var(--gw-accent-soft);
+  color: var(--gw-ink);
+  font-size: 16px;
+  line-height: 1.6;
+}
+.gw-callout > * + * { margin-top: 8px; }
+.gw-callout--tip { background: var(--gw-success-soft); }
+.gw-callout--warning { background: var(--gw-warning-soft); }
+.gw-callout__label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.5; }
+.gw-callout__label::before {
+  content: "";
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background: var(--gw-accent);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E") center / 16px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E") center / 16px no-repeat;
+}
+.gw-callout--tip > .gw-callout__label::before {
+  background: var(--gw-success);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.2h5c0-.9.4-1.7 1.1-2.2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
+}
+.gw-callout--warning > .gw-callout__label::before {
+  background: var(--gw-warning);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4M12 16.8v.2'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4M12 16.8v.2'/%3E%3C/svg%3E");
+}
+
+/* post list: the blog index and "more from the blog". A <ul role="list"> of post cards: .gw-card with a
+   .gw-card__media first, a .gw-label for the category, the title (its link covers the card, so the card is one target
+   and the link's name is the title alone), one or two lines of excerpt and a .gw-article-meta row at the foot. One
+   column on phones, two from 768px, three from 1080px. --compact: one column of rows, no card and no picture. */
+.gw-post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
+.gw-post-list > li { display: flex; min-width: 0; }
+.gw-post { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
+.gw-post:hover { border-color: var(--gw-line-strong); }
+.gw-post > .gw-card__media + * { margin-top: 20px; }
+.gw-post > .gw-label + .gw-post__title { margin-top: 8px; }
+.gw-post__title { font-size: 20px; line-height: 1.3; }
+.gw-post__title a { color: var(--gw-ink); }
+.gw-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--gw-radius-card); }
+.gw-post:hover .gw-post__title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
+.gw-post__title a:focus-visible { outline: 0; }
+.gw-post__title a:focus-visible::after { outline: 2px solid var(--gw-accent); outline-offset: 2px; }
+.gw-post__title + p { margin-top: 8px; }
+.gw-post > .gw-article-meta { margin-top: auto; padding-top: 16px; }
+@media (min-width: 768px) {
+  .gw-post-list { gap: 24px; }
+  .gw-post-list:not(.gw-post-list--compact) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (min-width: 1080px) {
+  .gw-post-list:not(.gw-post-list--compact) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+.gw-post-list--compact { gap: 0; border-top: 1px solid var(--gw-line); }
+.gw-post-list--compact .gw-post { padding: 20px 0; border: 0; border-bottom: 1px solid var(--gw-line); border-radius: var(--gw-radius-0); background: transparent; box-shadow: none; }
+.gw-post-list--compact .gw-post__title a::after { border-radius: var(--gw-radius-0); }
+.gw-post-list--compact .gw-card__media { display: none; }
+.gw-post-list--compact .gw-post > .gw-article-meta { padding-top: 8px; }
+
+/* pagination: previous and next as links, a muted "Page 2 of 12" between them. Markup only, no script. */
+.gw-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
+* + .gw-pagination { margin-top: 40px; }
+.gw-pagination__status { color: var(--gw-muted); font-size: 14px; }
+.gw-pagination > [rel="next"] { margin-inline-start: auto; }

package/css/components.css

@@ -43,6 +43,11 @@
 .gw-btn--secondary:active { background: var(--gw-bg-soft); border-color: var(--gw-ink); }
 .gw-btn--ghost:active { background: var(--gw-line); }
 .gw-btn--on-night:active { background: var(--gw-on-night); opacity: 0.76; }
+/* destructive (0.6.0, gap #28): delete, cancel a plan, erase my data. The danger fill with on-danger words (6.5:1 or
+   more, light and dark); hover and pressed one step stronger (towards the ink: darker in light, lighter in dark). It is
+   the action of a page that destroys something, never a second primary beside .gw-btn. */
+.gw-btn--danger { background: var(--gw-danger); color: var(--gw-on-danger); }
+.gw-btn--danger:hover, .gw-btn--danger:active { background: color-mix(in srgb, var(--gw-danger) 84%, var(--gw-ink)); }
 /* loading: aria-busy="true" on the <button>. The label stays (it keeps the width and the accessible name) but is not
    painted; a 16px ring in the button's own ink turns in its place, the dashboard's spinner. ::before, because
    .gw-btn--sm draws its hit area with ::after. website.js ignores presses on a busy button (no double submit). */
@@ -171,6 +176,9 @@
 .gw-badge--success { background: var(--gw-success-soft); color: var(--gw-ink); }
 .gw-badge--success::before, .gw-badge--warning::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: var(--gw-success); }
 .gw-badge--warning::before { background: var(--gw-warning); }
+/* an error (0.6.0, gap #28): the danger dot, ink words on the danger tint, as success's */
+.gw-badge--danger { background: var(--gw-danger-soft); color: var(--gw-ink); }
+.gw-badge--danger::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--gw-radius-chip); background: var(--gw-danger); }
 
 /* cards sit: white, 1px hairline, the card radius of the site's profile (12, 20 in soft), the dashboard's resting
    shadow (Chris 24/10/2026: one language with the app); no hover lift. A soft card is a tint and carries no shadow. */
@@ -185,6 +193,21 @@
 .gw-card--soft { background: var(--gw-bg-soft); box-shadow: none; }
 .gw-card--link { display: block; color: inherit; }
 .gw-card--link:hover { border-color: var(--gw-line-strong); }
+/* a card's picture (0.5.0, gap #33): the first child of the card, edge to edge across its top, its corners the card's
+   radius inside the hairline. An aspect-ratio box (16:9; --wide 1.91:1, the share-image shape, so a post's own
+   1200 x 630 image fits uncut; --square 1:1) that the image covers, on the soft ground while it loads. */
+.gw-card__media {
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  margin: -24px -24px 0;
+  border-top-left-radius: calc(var(--gw-radius-card) - 1px);
+  border-top-right-radius: calc(var(--gw-radius-card) - 1px);
+  background: var(--gw-bg-soft);
+}
+.gw-card__media--wide { aspect-ratio: 1200 / 630; }
+.gw-card__media--square { aspect-ratio: 1 / 1; }
+.gw-card__media :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
+@media (min-width: 768px) { .gw-card__media { margin: -32px -32px 0; } }
 :where(.gw-card, .gw-feature, .gw-plan) > :is(h3, h4) + p { margin-top: 8px; }
 :where(.gw-card, .gw-feature) h3 { font-size: 20px; }
 :where(.gw-card, .gw-feature) p { font-size: 16px; color: var(--gw-muted); }

package/css/footer.css

@@ -14,6 +14,9 @@
 .gw-footer__brand { grid-column: 1 / -1; max-width: 320px; }
 .gw-footer__brand p { margin-top: 16px; color: var(--gw-muted); }
 .gw-footer__heading { margin: 0 0 8px; color: var(--gw-ink); font-size: 13px; font-weight: 600; letter-spacing: 0; }
+/* an optional newsletter form in the brand block (0.6.0): label, the inline row (field and button), a note on what the
+   reader agrees to; only when the form is wired to a list that keeps the address */
+.gw-footer__newsletter { margin-top: 24px; }
 .gw-footer__col ul { margin: 0; padding: 0; list-style: none; }
 .gw-footer__col a { display: block; padding-block: 6px; color: var(--gw-muted); }
 .gw-footer__col a:hover { color: var(--gw-ink); }

package/css/forms.css

@@ -0,0 +1,154 @@
+/* forms (0.6.0, gap #28): a field (label, control, error, hint), the controls, a group of choices, the inline row and
+   the form stack. A public site asks as little as it can: one field beats a form, and a form keeps two or three fields
+   (AGENTS.md section 5). The look is the dashboard's field family (@gemboss/ui gemboss-field, ui-select, ui-textarea,
+   ui-check, ui-help, ui-error) at the website's sizes: as tall as a button (40px, 44px on touch), 16px words (a phone
+   does not zoom the page), the action radius of the site's profile, and a 1px border that reaches 3:1
+   (--gw-line-control). The page owns validation: it sets aria-invalid="true" and writes the message; the kit draws it. */
+
+/* a field: the label above the control, the error and then the hint under it, 8px apart */
+.gw-field { display: grid; gap: 8px; min-width: 0; }
+.gw-field__label { display: block; color: var(--gw-ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
+/* two classes, so a context that styles its paragraphs (the footer's brand block) does not move or recolour them */
+:is(.gw-field, .gw-choices) > :is(.gw-field__hint, .gw-field__error) { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5; }
+:is(.gw-field, .gw-choices) > .gw-field__hint { color: var(--gw-muted); }
+/* the error: an icon and words, in the danger colour; never the colour alone. Empty, it takes no room, so a page can
+   keep it in the markup (named by aria-describedby) and fill it when the visitor sends the form. */
+:is(.gw-field, .gw-choices) > .gw-field__error { display: flex; gap: 6px; color: var(--gw-danger); font-weight: 500; }
+:is(.gw-field, .gw-choices) > .gw-field__error:empty { display: none; }
+.gw-field__error::before {
+  content: "";
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  margin-top: calc((1lh - 16px) / 2);
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center / 16px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E") center / 16px no-repeat;
+}
+
+/* the controls: one box for a line of text, a choice from a list and a few lines. Full width of their field. */
+.gw-input,
+.gw-select,
+.gw-textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: var(--gw-button-height);
+  margin: 0;
+  padding: 0 12px;
+  border: 1px solid var(--gw-line-control);
+  border-radius: var(--gw-radius-action);
+  background-color: var(--gw-surface);
+  color: var(--gw-ink);
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-appearance: none;
+  appearance: none;
+}
+:is(.gw-input, .gw-textarea)::placeholder { color: var(--gw-muted); opacity: 1; }
+/* a list: the caret is drawn with the muted ink (two gradients, so it follows dark mode), with room for it */
+.gw-select {
+  padding-right: 40px;
+  background-image: linear-gradient(45deg, transparent 50%, var(--gw-muted) 50%), linear-gradient(135deg, var(--gw-muted) 50%, transparent 50%);
+  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+.gw-textarea { height: auto; min-height: 96px; padding-block: 8px; resize: vertical; }
+/* the states, in this order: hover, focus, read-only, invalid, disabled. Focus is the kit's accent ring. */
+:is(.gw-input, .gw-select, .gw-textarea):hover { border-color: var(--gw-muted); }
+:is(.gw-input, .gw-select, .gw-textarea):focus-visible { border-color: var(--gw-ink); outline: 2px solid var(--gw-accent); outline-offset: 1px; }
+/* read-only: still focusable and readable, visibly not editable (the dashboard's) */
+:is(.gw-input, .gw-textarea)[readonly] { border-color: var(--gw-line-strong); background-color: var(--gw-bg-soft); cursor: default; }
+:is(.gw-input, .gw-select, .gw-textarea)[aria-invalid="true"] { border-color: var(--gw-danger); background-color: var(--gw-danger-soft); }
+:is(.gw-input, .gw-select, .gw-textarea):disabled { opacity: 0.48; cursor: not-allowed; }
+
+/* a group of choices: a <fieldset> whose <legend> is the question, one choice per row */
+.gw-choices { min-width: 0; margin: 0; padding: 0; border: 0; }
+.gw-choices > legend { margin-bottom: 4px; padding: 0; }
+.gw-choices > :is(.gw-check, .gw-radio) { display: flex; }
+.gw-choices > :is(.gw-field__hint, .gw-field__error) { margin-top: 4px; }
+
+/* a checkbox or a radio: the <label> is the target (32px, 44px on touch), the box sits on the first line of words */
+.gw-check,
+.gw-radio {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  max-width: 100%;
+  padding-block: 4px;
+  color: var(--gw-ink);
+  font-size: 16px;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  cursor: pointer;
+}
+:is(.gw-check, .gw-radio) > :not(input) { min-width: 0; }
+:is(.gw-check, .gw-radio) > input {
+  display: inline-grid;
+  flex: none;
+  place-content: center;
+  width: 18px;
+  height: 18px;
+  margin: 3px 0 0;
+  border: 1px solid var(--gw-line-control);
+  border-radius: var(--gw-radius-4);
+  background: var(--gw-surface);
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: inherit;
+}
+.gw-radio > input { border-radius: var(--gw-radius-chip); }
+:is(.gw-check, .gw-radio):hover > input { border-color: var(--gw-muted); }
+/* chosen: the accent, as every check mark of the kit; the mark in the words-on-accent colour */
+.gw-check > input:checked { border-color: var(--gw-accent); background: var(--gw-accent); }
+.gw-check > input:checked::before {
+  content: "";
+  width: 14px;
+  height: 14px;
+  background: var(--gw-on-accent);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
+}
+.gw-radio > input:checked { border: 5px solid var(--gw-accent); }
+:is(.gw-check, .gw-radio) > input[aria-invalid="true"]:not(:checked) { border-color: var(--gw-danger); }
+:is(.gw-check, .gw-radio):has(> input:disabled) { opacity: 0.48; cursor: not-allowed; }
+/* a filter's count: a small pill at the end of the row, the neutral badge's colours */
+.gw-check__count {
+  flex: none;
+  min-width: 24px;
+  margin: 1px 0 0 auto;
+  padding: 2px 8px;
+  border-radius: var(--gw-radius-chip);
+  background: color-mix(in srgb, var(--gw-ink) 8%, transparent);
+  color: var(--gw-ink-2);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+/* the inline row: one field and its button (a newsletter, "get the guide"). One line from 480px, the field taking the
+   room; below 480px, and in a box too narrow for both, the field and the button each take a full line. */
+.gw-form-inline { display: flex; flex-wrap: wrap; gap: 8px; }
+.gw-form-inline > :not(.gw-btn) { flex: 999 1 160px; min-width: 0; }
+.gw-form-inline > .gw-btn { flex: 1 0 auto; }
+@media (max-width: 479px) {
+  .gw-form-inline > :not(.gw-btn) { flex-basis: 100%; }
+}
+
+/* the form stack: fields 24px apart, the actions 32px below the last one, 560px at most (a field's width hints at its
+   answer: no field runs across a wide screen) */
+.gw-form { display: grid; gap: 24px; max-width: 560px; }
+/* the gap is the rhythm, also when the form is the card itself (a card spaces its own children otherwise) */
+.gw-form > * { margin: 0; }
+.gw-form > :is(.gw-actions, .gw-btn) { margin-top: 8px; }
+.gw-form > .gw-btn { justify-self: start; }
+
+/* touch: every control is at least 44px tall, a choice's row too */
+@media (max-width: 768px), (pointer: coarse) {
+  .gw-input, .gw-select { height: var(--gw-tap-min); }
+  .gw-check, .gw-radio { padding-block: 10px; }
+}

package/css/prose.css

@@ -16,8 +16,8 @@
 /* the flow: each block 20px below the one before it (16px in --sm); more air around headings and large blocks */
 :where(.gw-prose) > * + * { margin-top: 20px; }
 :where(.gw-prose--sm) > * + * { margin-top: 16px; }
-:where(.gw-prose) > * + :where(figure, img, video, pre, table, hr, .gw-table, .gw-window),
-:where(.gw-prose) > :where(figure, img, video, pre, table, hr, .gw-table, .gw-window) + * { margin-top: 32px; }
+:where(.gw-prose) > * + :where(figure, img, video, pre, table, hr, .gw-table, .gw-window, .gw-prose__table, .gw-callout),
+:where(.gw-prose) > :where(figure, img, video, pre, table, hr, .gw-table, .gw-window, .gw-prose__table, .gw-callout) + * { margin-top: 32px; }
 :where(.gw-prose) > * + h2 { margin-top: 48px; }
 :where(.gw-prose) > * + h3 { margin-top: 40px; }
 :where(.gw-prose) > * + h4 { margin-top: 32px; }
@@ -95,26 +95,39 @@
 :where(.gw-prose) > :is(p, figure) > :is(img, video) { border-radius: var(--gw-radius-card); }
 :where(.gw-prose) figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
 
-/* a table straight from markdown scrolls inside its own box, never the page. When you write the markup, the .gw-table
-   wrapper (a region with a name and tabindex="0") is the better choice. */
-:where(.gw-prose) > table {
-  display: block;
+/* a table straight from the CMS or markdown (gap #63, 0.5.0). website.js puts each bare table in a scroll box of its
+   own, .gw-prose__table: a region named after the table's caption or first header cell, with tabindex="0" so a
+   keyboard can scroll it. The table is marked .is-wrapped and keeps display: table, because some Safari versions stop
+   announcing a table as a table once its display changes. Without the script, or before it runs, the table itself
+   scrolls inside its box, as in 0.2.0. The box looks the same either way. When you write the markup, the .gw-table
+   wrapper (a region with a name and tabindex="0") is still the better choice. */
+:where(.gw-prose) > table:where(:not(.is-wrapped)),
+:where(.gw-prose) > :where(.gw-prose__table) {
   width: max-content;
   max-width: 100%;
   overflow-x: auto;
   border: 1px solid var(--gw-line);
   border-radius: var(--gw-radius-card);
   background: var(--gw-surface);
-  border-collapse: collapse;
-  font-size: 14px;
-  line-height: 1.5;
   -webkit-overflow-scrolling: touch;
 }
-:where(.gw-prose) > table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--gw-line); text-align: left; vertical-align: top; }
-:where(.gw-prose) > table thead th { background: var(--gw-bg-soft); color: var(--gw-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
-:where(.gw-prose) > table tbody th { font-weight: 500; }
-:where(.gw-prose) > table td { color: var(--gw-ink-2); font-variant-numeric: tabular-nums; }
-:where(.gw-prose) > table tbody tr:last-child > * { border-bottom: 0; }
-:where(.gw-prose) > table caption { padding: 12px 16px; color: var(--gw-muted); font-size: 13px; text-align: left; }
+:where(.gw-prose) > table:where(:not(.is-wrapped)) { display: block; }
+:where(.gw-prose) > table,
+:where(.gw-prose) > :where(.gw-prose__table) > table { border-collapse: collapse; font-size: 14px; line-height: 1.5; }
+:where(.gw-prose) > table :is(th, td),
+:where(.gw-prose) > :where(.gw-prose__table) > table :is(th, td) { padding: 12px 16px; border-bottom: 1px solid var(--gw-line); text-align: left; vertical-align: top; }
+:where(.gw-prose) > table thead th,
+:where(.gw-prose) > :where(.gw-prose__table) > table thead th { background: var(--gw-bg-soft); color: var(--gw-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
+:where(.gw-prose) > table tbody th,
+:where(.gw-prose) > :where(.gw-prose__table) > table tbody th { font-weight: 500; }
+:where(.gw-prose) > table td,
+:where(.gw-prose) > :where(.gw-prose__table) > table td { color: var(--gw-ink-2); font-variant-numeric: tabular-nums; }
+:where(.gw-prose) > table tbody tr:last-child > *,
+:where(.gw-prose) > :where(.gw-prose__table) > table tbody tr:last-child > * { border-bottom: 0; }
+:where(.gw-prose) > table caption,
+:where(.gw-prose) > :where(.gw-prose__table) > table caption { padding: 12px 16px; color: var(--gw-muted); font-size: 13px; text-align: left; }
 /* on a phone a cell keeps room for a few words a line: the table scrolls further instead of squeezing its text */
-@media (max-width: 767px) { :where(.gw-prose) > table td { min-width: 160px; } }
+@media (max-width: 767px) {
+  :where(.gw-prose) > table td,
+  :where(.gw-prose) > :where(.gw-prose__table) > table td { min-width: 160px; }
+}

package/css/ratings.css

@@ -0,0 +1,78 @@
+/* ratings (0.6.0, gap #56): stars, the testimonial wall and the rating badge. Every rating and every testimonial
+   links to the page it comes from, and says only what that page says (AGENTS.md section 6); `check` warns about one
+   without its link (rating-source). */
+
+/* stars: a value from 0 to 5 (style="--gw-stars: 4.9") drawn as five 16px stars, the last one cut where the value
+   ends. A screen reader hears the value in words: role="img" and aria-label="4.9 out of 5" (the drawing itself is a
+   background, nothing to read). Ink on the strong hairline: a rating is proof, not a state or an action. */
+.gw-stars {
+  display: inline-block;
+  flex: none;
+  width: 80px;
+  height: 16px;
+  vertical-align: middle;
+  background: linear-gradient(90deg, var(--gw-ink) calc(clamp(0, var(--gw-stars, 0), 5) * 20%), var(--gw-line-strong) 0);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6L9.8 6.4L14.8 6.6L10.9 9.7L12.2 14.6L8 11.8L3.8 14.6L5.1 9.7L1.2 6.6L6.2 6.4Z' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat-x;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6L9.8 6.4L14.8 6.6L10.9 9.7L12.2 14.6L8 11.8L3.8 14.6L5.1 9.7L1.2 6.6L6.2 6.4Z' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat-x;
+}
+/* a forced-colours screen drops backgrounds: draw the stars in its own text colours */
+@media (forced-colors: active) {
+  .gw-stars { forced-color-adjust: none; background: linear-gradient(90deg, CanvasText calc(clamp(0, var(--gw-stars, 0), 5) * 20%), GrayText 0); }
+}
+
+/* the wall: short quotes in cards, one column on phones, two from 768px, three from 1080px. No masonry: the cards of
+   a row share its height, and each card's byline sits at its foot. */
+.gw-testimonials {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.gw-testimonials > li { display: flex; min-width: 0; }
+@media (min-width: 768px) { .gw-testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
+@media (min-width: 1080px) { .gw-testimonials { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+/* a quote card (with .gw-card): stars, the reviewer's own words, who wrote them and where */
+.gw-testimonial { display: flex; flex-direction: column; gap: 16px; width: 100%; margin: 0; }
+.gw-testimonial > * { margin: 0; }
+.gw-testimonial__quote,
+.gw-testimonial__quote p { color: var(--gw-ink); font-size: 16px; line-height: 1.6; }
+.gw-testimonial__quote > * + * { margin-top: 8px; }
+.gw-testimonial > .gw-testimonial__by { display: flex; align-items: center; gap: 12px; margin-top: auto; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
+.gw-testimonial__by b { display: block; color: var(--gw-ink); font-weight: 600; }
+.gw-testimonial__by > :not(img) { min-width: 0; }
+.gw-testimonial__avatar { flex: none; width: 40px; height: 40px; border-radius: var(--gw-radius-chip); background: var(--gw-bg-soft); object-fit: cover; }
+
+/* the rating badge: one link to the store's review page, with the store's mark, the score, the stars and the count.
+   A small card that sits; the border darkens on hover, as a linked card's. */
+.gw-rating-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 100%;
+  padding: 8px 16px 8px 8px;
+  border: 1px solid var(--gw-line);
+  border-radius: var(--gw-radius-card);
+  background: var(--gw-surface);
+  color: var(--gw-ink);
+  font-size: 13px;
+  line-height: 1.4;
+  vertical-align: middle;
+}
+a.gw-rating-badge:hover { border-color: var(--gw-line-strong); }
+.gw-rating-badge__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--gw-radius-action);
+  background: var(--gw-bg-soft);
+  color: var(--gw-ink);
+}
+.gw-rating-badge__icon :is(svg, img) { width: 24px; height: 24px; }
+.gw-rating-badge__body { display: grid; gap: 2px; min-width: 0; }
+.gw-rating-badge__score { display: flex; align-items: center; gap: 8px; color: var(--gw-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.gw-rating-badge__count { color: var(--gw-muted); }