@jasonsdevspace/design-kit 0.1.0-next.1 → 0.1.0-next.3

package/CHANGELOG.md

@@ -7,6 +7,91 @@ keeping a copy. Each version from `0.1.0-next.1` on is staged on npm from a tag
 workflow, with provenance, goes live when it is promoted, and has a release on GitHub with the
 entry below as its notes.
 
+## 0.1.0-next.3
+
+The page chrome holds still and shows where a reader is, the controls a page moves focus to take a
+`ref`, and an empty live callout draws nothing. The strip keeps room for a demo's switches before
+they arrive, the footer marks the current page as the strip does, the link to the current page
+stands out by more than its color, and the skip link stays hidden wherever it sits.
+
+- **Page chrome.** `PortfolioStrip` takes `toolsWaiting`, which keeps room for one row of the kit's
+  controls while a demo's switches are on their way, so nothing below the strip moves when they
+  arrive. The section that holds the room is left unnamed, so it is no landmark until the switches
+  fill it. A page without React writes `.dk-strip-room` in the unnamed section, and names the
+  section when it fills it.
+- **Page chrome.** `DemoFooter` takes `current`, as `PortfolioStrip` does, and set to `about` marks
+  the link to how it works as the current page, for the footer on a demo's explainer. In the strip
+  or the footer, the link marked as the current page stands in the page's text at the heading's
+  weight, so a sighted reader sees that "How it works" leads where they already are. It keeps its
+  underline, and the weight holds in forced colors, where the color does not.
+- **Page chrome.** The skip link waits in its own place as the visually hidden class does, one pixel
+  clipped to nothing, rather than 10rem above it, so one inside a positioned box lower on the page
+  no longer shows over what is above the box or takes its clicks. It shows where it did when a
+  keyboard focuses it.
+- **Buttons.** `Button`'s props take a `ref`, which holds the `<button>` drawn, so a page that
+  moves focus to a button, such as the one that opened a panel when the panel closes, uses the
+  kit's component. React 19 already passed the ref through, and only the type refused it.
+- **Fields.** `InputField` and `SelectField` take a `ref` in the same way, which holds the
+  `<input>` or the `<select>` drawn, so a page that moves focus to a field, such as a form that
+  fails, uses the kit's component rather than finding the control by its id.
+- **Callouts.** A live callout whose message holds nothing at all, with no actions, draws nothing,
+  no ground, padding or edge, and stays in the page so a screen reader reads what fills it. A page
+  no longer needs a holder of its own to hide one it mounts before it has words. The rule uses
+  `:has()`, which Firefox has from 121, so in Firefox 120 such a callout still draws its ground.
+
+## 0.1.0-next.2
+
+The page chrome every demo draws, and buttons, text fields, selects and callouts, styled by
+`components.css` and drawn by the components in `./react`, with the state of each control carried
+by a native or ARIA attribute. The explainer page, with its steps, panels, tables and code blocks,
+is styled too, as markup a page writes by hand.
+
+- **React.** `./react` is new, and takes React `^19.3.0` as an optional peer, which a page that
+  writes the markup itself never needs.
+- **Page chrome.** `SkipLink`, `PortfolioStrip` and `DemoFooter` draw the skip link, the strip
+  above the page that says whose demo it is, and the footer below it, and `PORTFOLIO_URL`,
+  `PORTFOLIO_WORK_URL` and `GITHUB_PROFILE_URL` are the links they share. The components draw
+  markup alone, so a page loads `components.css` itself.
+- **Buttons.** `Button` draws `.dk-button`, a plain `type="button"` unless a page gives another
+  type, with `.dk-button-accent` for the one action a view leads with. A toggle carries
+  `aria-pressed`, and a button whose panel is open `aria-expanded`, drawn alike. `off` marks a
+  button `aria-disabled` rather than `disabled`, so it keeps its place in the tab order, and a press
+  of it runs no click handler of the page's and submits no form. A button and a field's control
+  stand 2.25rem tall, and 2.75rem at 48rem wide or less.
+- **Fields.** `InputField` and `SelectField` draw `.dk-field`, its label, a hint and an error when
+  given, and the control, `.dk-input` or a native `.dk-select`. The error sits above the control,
+  starts with a hidden "Error: " and marks the control `aria-invalid`. A control's text is never
+  under 16px.
+- **Callouts.** `Callout` draws `.dk-callout` in the info tone on the highlight, or
+  `.dk-callout-success` or `.dk-callout-danger`, which start with a hidden word that says the tone.
+  It takes a role only when the page passes `live`.
+- **Explainer pages.** `.dk-explainer-header` and `.dk-explainer` lay out the page that says how a
+  demo works, its text starting where the strip's links start and held to the measure, in plain
+  sections that open on a rule, a number and a heading a jump leaves in sight. `.dk-steps` draws
+  steps one after another. `./react` draws none of it.
+- **Panels, tables and code.** `.dk-panel` sets a part of a page apart on the card ground, with no
+  tone and no role. A table in `.dk-table-scroll` and a block of `.dk-code` scroll inside
+  themselves, each a region named by the title above it that the keyboard reaches at every width,
+  so the page never scrolls sideways.
+- **Code in running text.** `base.css` sets `code` at `--dk-text-code`, a step under the text
+  around it, and breaks a long name where it must. In a block it takes the block's size.
+- **Base.** The border box now reaches a page's `::before` and `::after`, which it missed before,
+  since a pseudo-element listed inside a `:where()` matches nothing. The cut to motion reaches
+  those too, and a dialog's `::backdrop` and each part of a view transition. A `::before` or
+  `::after` that sets a width or height beside padding or a border now draws that size including
+  them, so one sized for the content box draws smaller.
+- **Weight.** Every rule for these pieces, the resting look and the explainer's layout included,
+  sits in one `:where()`, so a state wins over the resting look by its order in the sheet, and a
+  page's own rule outside a layer wins over both.
+- **Tokens.** `--dk-measure` changes from 42rem to 34rem, for every page that reads it. At 42rem a
+  line of body text ran past 80 characters, the most WCAG 1.4.8 suggests, and at 34rem the browser
+  tests hold a line of the lead and of body text to 80 or fewer. `--dk-text-code` is new, at 0.9em,
+  so code sizes to the text around it. The dark value of `--dk-control` is `#7d7d7d`, from
+  `#7a7a7a`. A button or field inside an info callout drew its edge at 2.99 to 1 on the highlight in
+  the dark theme, under the 3 to 1 a control's edge needs. The accent on the success and danger
+  grounds, and a control's edge on the highlight and on each callout's ground, are now measured as
+  well.
+
 ## 0.1.0-next.1
 
 Nothing in the code, the styles or the types changed. This is the first version the release workflow