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

package/CHANGELOG.md

@@ -7,6 +7,38 @@ 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

package/README.md

@@ -107,6 +107,12 @@ which has a tabindex of -1 so it can take focus.
 <main id="main-content" tabindex="-1">...</main>
 ```
 
+A skip link may also sit inside a box of the page's own, such as one at the top of a column of
+filters that leads past them to the results. It waits in its own place as the visually hidden class
+does, one pixel clipped to nothing, so it draws nothing and takes no click wherever the box starts
+on the page. A box that is positioned holds it, and it shows at the top of that box, inset as it is
+at the top of a page, when a keyboard reaches it.
+
 The strip holds a navigation landmark named Portfolio, with three links in this order: whose demo
 it is, how it works and the source. The strip on the demo's explainer marks the explainer's link
 with `aria-current="page"`. A demo with switches of its own puts them in a section after the links,
@@ -125,15 +131,32 @@ named for them, and a demo with none leaves the section out.
 </div>
 ```
 
+A demo whose switches are still on their way, drawn by a script that has not run yet, keeps their
+room so nothing below the strip moves when they come. The section is drawn with no name and holds
+only the room, with no text, so it is no landmark and a screen reader finds nothing in it. When the
+switches come they take the room's place in the same section, and the section takes its name.
+
+```html
+<section class="dk-strip-tools"><span class="dk-strip-room"></span></section>
+```
+
+The room holds the height of one row of the kit's buttons or fields, beside the links on a wide
+screen and on a row of their own on a phone. Switches of another height, or more than fit on one
+row, still move what is below them when they come.
+
 On a wide screen the strip is one 2.5rem row over a 1px rule, in the small text, with its links
 1.5rem apart and the switches on the right. At 48rem wide or less the text steps down to the
 caption size, the links close to 1rem apart and wrap where they must, and the switches take a row
 of their own below them.
 
 The footer is one paragraph that says whose project the demo is, with the author's name linking the
-portfolio, and links how it works, the source, the rest of the work and the license. Anything the
-demo adds follows the license, as sentences of its own. Every link in the chrome keeps its
-underline, and in the footer's sentence the underline is what tells a link from the text around it.
+portfolio, and links how it works, the source, the rest of the work and the license. The footer on
+the demo's explainer marks the link to how it works with `aria-current="page"`, as the strip does.
+Anything the demo adds follows the license, as sentences of its own. Every link in the chrome keeps
+its underline, and in the footer's sentence the underline is what tells a link from the text around
+it. The link marked as the current page, in the strip or the footer, stands in the page's text at
+the heading's weight, so it is told from the links around it by more than its color, in forced
+colors too, and still reads as a link.
 
 ```html
 <footer class="dk-footer">
@@ -180,7 +203,10 @@ export const Page = () => (
   set to `about` marks the explainer's link as the current page. `tools` holds the demo's own
   switches, and `toolsLabel` names their landmark, `Demo` unless given. With `tools` undefined,
   null or false the strip draws no section for them, so a demo can pass `hasTour && <Tour />`.
+  `toolsWaiting` keeps the room of one row of the kit's controls while `tools` draws nothing, for a
+  page drawn before the switches can be, in the same section unnamed until they come.
 - `DemoFooter` takes `name`, the demo's name as the sentence opens with it, `about` and `source`.
+  `current` set to `about` marks the explainer's link as the current page, as on the strip.
   `license` is the link to the license, `LICENSE` on the main branch of `source` unless given, with
   any trailing slash on `source` dropped first. `licenseName` is the license's name in the
   sentence, `MIT license` unless given. Its children follow the license, and children that are
@@ -314,8 +340,12 @@ at once, on `.dk-callout-body`, so the title and the tone's word are read with t
 actions are not. The page puts a live callout on the page empty first and fills it after, which is
 when a screen reader reads it. A page filling a success or danger callout puts the hidden word in
 with the message, as `<span class="dk-visually-hidden">Success: </span>Saved.`, since the word is
-part of what is read. An empty live callout still draws its ground and padding, so a page places it
-where an empty band reads as space, or leaves it out of the layout's flow until it is filled.
+part of what is read. A live callout whose message holds nothing at all, not even a space, a line
+break or the tone's word, and that has no actions draws nothing, no ground, padding or edge, until
+it is filled, so a page puts it where its words will go with no holder of its own to hide it. It
+still takes its place in the flow, so a margin or a gap around it stays. The rule reads the message
+with `:has()`, which Firefox has from 121, so in Firefox 120 an empty live callout still draws its
+ground.
 
 A callout's edge is transparent, and shows only in forced colors, where the ground is dropped and
 the edge marks where the callout starts and ends.
@@ -359,20 +389,24 @@ export const Checkout = ({ error, saved }: Props) => {
   `aria-disabled="true"` and puts a click handler that calls `preventDefault()` in place of
   `onClick`, so the page's click handler does not run and a submit button does not submit. Any
   other handler the page passes, for keys or a pointer, still runs, and checks `off` itself. A
-  `className` follows the kit's classes.
+  `className` follows the kit's classes. A `ref` holds the `<button>` drawn, for a page that moves
+  focus to it, such as the button that opened a panel when the panel closes.
 - `InputField` takes `label`, and `hint` and `error`, each drawn only when given, an empty string,
   null or false drawing nothing. `id` is the control's, made with React's `useId` unless given, and
   a page gives one when something links to the field, such as an error summary. Every other prop
   goes to the `<input>` but `style` and `aria-invalid`. A `className` follows `dk-input`, and an
-  `aria-describedby` of the page's own is listed after the hint and the error.
-- `SelectField` takes the same props, with its children as the options of the `<select>`.
+  `aria-describedby` of the page's own is listed after the hint and the error. A `ref` holds the
+  `<input>` drawn, for a page that moves focus to the field, such as a form that fails.
+- `SelectField` takes the same props, with its children as the options of the `<select>` and its
+  `ref` holding the `<select>`.
 - `Callout` takes `tone`, `info` unless given, `success` or `danger`, and `title`, drawn at the
-  start of the message as a paragraph or, with `headingLevel` from 2 to 6, as that heading, and as
-  a paragraph for any other level. `actions` are drawn after the message. `prefix` is the word
-  read before the title or the message, the tone's own unless given, and an empty string drops it.
+  start of the message as a paragraph or, with `headingLevel` from 2 to 6, as that heading, and as a
+  paragraph for any other level. `actions` are drawn after the message. `prefix` is the word read
+  before the title or the message, the tone's own unless given, and an empty string drops it.
   `live`, `status` or `alert`, puts that role on the message and draws the message even when it is
-  empty. A callout takes no other props, so a page that needs a class
-  or an id on one puts it on an element around it.
+  empty, and a live callout whose message draws nothing, with no title or actions, draws nothing
+  until it is filled. A callout takes no other props, so a page that needs a class or an id on one
+  puts it on an element around it.
 
 ## Explainer pages
 
@@ -388,7 +422,11 @@ class would outweigh every piece set inside it.
 
 ```html
 <a class="dk-skip" href="#main-content">Skip to content</a>
-<div class="dk-strip">...</div>
+<div class="dk-strip">
+    <nav class="dk-strip-links" aria-label="Portfolio">
+        ... <a href="./" aria-current="page">How it works</a> ...
+    </nav>
+</div>
 <header class="dk-explainer-header"><a href="../">Example</a></header>
 <main id="main-content" tabindex="-1" class="dk-explainer">
     <h1>How Example works</h1>
@@ -402,7 +440,9 @@ class would outweigh every piece set inside it.
         <p>...</p>
     </section>
 </main>
-<footer class="dk-footer">...</footer>
+<footer class="dk-footer">
+    <p>... <a href="./" aria-current="page">How it works</a>, in plain words. ...</p>
+</footer>
 ```
 
 The header holds a link back to the demo, outside `main`, so the skip link passes it and reading
@@ -614,7 +654,8 @@ from the package rather than keeping a copy.
 ## Browser support
 
 The colors are written with `light-dark()`, which sets the floor: Chrome and Edge 123, Firefox 120
-and Safari 17.5. The kit's browser tests run in Chromium.
+and Safari 17.5. An empty live callout draws nothing by `:has()`, which Firefox has from 121, so in
+Firefox 120 it draws its ground until it is filled. The kit's browser tests run in Chromium.
 
 ## License
 

package/dist/components.css

@@ -12,13 +12,22 @@
 @layer dk.components {
     /*
      * Skip to content, out of sight until it takes focus, and then over the strip at the column's
-     * inset, where the strip's links start.
+     * inset, where the strip's links start. It waits in its own place as the visually hidden
+     * class does, one pixel clipped to nothing, rather than moved above it, so one inside a
+     * positioned box of the page's own draws nothing, takes no click and covers nothing a screen
+     * reader's touch finds wherever the box starts, and shows at the top of that box once a
+     * keyboard reaches it.
      */
     .dk-skip {
         position: absolute;
         left: calc(max(0px, (100% - var(--dk-column)) / 2) + var(--dk-space-4));
-        top: -10rem;
-        padding: var(--dk-space-2) var(--dk-space-4);
+        top: var(--dk-space-4);
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
         border-radius: var(--dk-radius);
         background: var(--dk-accent);
         color: var(--dk-on-accent);
@@ -26,7 +35,11 @@
     }
 
     :where(.dk-skip):focus-visible {
-        top: var(--dk-space-4);
+        width: auto;
+        height: auto;
+        padding: var(--dk-space-2) var(--dk-space-4);
+        overflow: visible;
+        clip-path: none;
     }
 
     /*
@@ -93,8 +106,8 @@
 
     /*
      * The chrome's links step back in the muted text, and come forward to the page's text when
-     * pointed at or focused. Every one keeps its underline, which in the footer's sentence is what
-     * tells a link from the text around it.
+     * pointed at or focused, as the link to the current page always is. Every one keeps its
+     * underline, which in the footer's sentence is what tells a link from the text around it.
      */
     :where(.dk-strip-links a, .dk-footer a) {
         color: var(--dk-muted);
@@ -103,12 +116,23 @@
     :where(
         .dk-strip-links a:hover,
         .dk-strip-links a:focus-visible,
+        .dk-strip-links a[aria-current='page'],
         .dk-footer a:hover,
-        .dk-footer a:focus-visible
+        .dk-footer a:focus-visible,
+        .dk-footer a[aria-current='page']
     ) {
         color: var(--dk-fg);
     }
 
+    /*
+     * The link to the page a reader is on stands in the page's text, as above, and at the heading's
+     * weight, so it is told from the links around it by more than its color, which forced colors
+     * replace. It keeps its underline, so it still reads as a link.
+     */
+    :where(.dk-strip-links a[aria-current='page'], .dk-footer a[aria-current='page']) {
+        font-weight: var(--dk-weight-strong);
+    }
+
     /*
      * On a phone the links are smaller and closer, and wrap to rows of their own where they must,
      * with the switches on a row below them.
@@ -126,6 +150,15 @@
             flex-basis: 100%;
             padding-block: 0 var(--dk-space-2);
         }
+
+        /*
+         * The room of switches on their way stands as tall as one of the kit's controls at the
+         * target, which is taller than the strip's row, so their row keeps the height the switches
+         * give it. On a wide screen the strip's row is taller than a control, and holds alone.
+         */
+        .dk-strip-room {
+            min-height: var(--dk-target);
+        }
     }
 
     /*
@@ -333,6 +366,18 @@
         background: var(--dk-danger-bg);
     }
 
+    /*
+     * A callout whose message holds nothing, not even a space, and that has no actions draws
+     * nothing, no ground, padding or edge. That is a live callout a page mounts before it has
+     * words, and it stays in the page so a screen reader reads what fills it. It comes after the
+     * tones, so it wins over each of them by its order.
+     */
+    :where(.dk-callout:has(> .dk-callout-body:empty):not(:has(> .dk-callout-actions))) {
+        padding: 0;
+        border-width: 0;
+        background: none;
+    }
+
     :where(.dk-callout-title) {
         margin: 0;
         font-size: inherit;

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode, type SelectHTMLAttributes } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 /** Where the portfolio is, and the section of it that lists the work. */
 export declare const PORTFOLIO_URL = "https://jasonsdevspace.com/";
 export declare const PORTFOLIO_WORK_URL = "https://jasonsdevspace.com/#work";
@@ -14,35 +14,46 @@ export declare const SkipLink: ({ target, children, }: {
     readonly target?: string;
     readonly children?: ReactNode;
 }) => import("react").JSX.Element;
+/** A page of the demo's that the chrome links to, and can mark as the one it sits on. */
+type ChromePage = 'about';
 /**
  * Whose demo this is, above the page, with three links together on the left. It is a navigation
  * landmark in a plain div rather than a header, so the demo's own header stays the page's one
  * banner. A demo with switches of its own puts them beside the links, in a landmark of their own
- * named for them.
+ * named for them, and while they are on their way the strip keeps their room in that section,
+ * unnamed and so no landmark.
  */
-export declare const PortfolioStrip: ({ about, source, current, tools, toolsLabel, }: {
+export declare const PortfolioStrip: ({ about, source, current, tools, toolsLabel, toolsWaiting, }: {
     /** The demo's explainer, relative to the page or absolute. */
     readonly about: string;
     /** The demo's repository. */
     readonly source: string;
     /** The link that is the page the strip sits on, marked as the current page. */
-    readonly current?: "about";
+    readonly current?: ChromePage;
     /** The demo's own switches, drawn beside the links. */
     readonly tools?: ReactNode;
     /** The name a screen reader gives the switches' landmark. */
     readonly toolsLabel?: string;
+    /**
+     * The switches are on their way, so the strip keeps the room of one row of the kit's controls
+     * in their section, empty and unnamed, so no landmark, until `tools` holds them and the section
+     * takes its name.
+     */
+    readonly toolsWaiting?: boolean;
 }) => import("react").JSX.Element;
 /**
  * The exit after a long scroll: whose project this is, how it works, where the source and the rest
  * of the work are, and the license, with anything the demo adds of its own after them.
  */
-export declare const DemoFooter: ({ name, about, source, license, licenseName, children, }: {
+export declare const DemoFooter: ({ name, about, source, current, license, licenseName, children, }: {
     /** The demo's name, as the footer's sentence opens with it. */
     readonly name: string;
     /** The demo's explainer, relative to the page or absolute. */
     readonly about: string;
     /** The demo's repository. */
     readonly source: string;
+    /** The link that is the page the footer sits on, marked as the current page. */
+    readonly current?: ChromePage;
     /** The demo's license, the LICENSE file on the repository's main branch unless given. */
     readonly license?: string;
     /** What the license is called, as the footer's sentence names it. */
@@ -50,10 +61,12 @@ export declare const DemoFooter: ({ name, about, source, license, licenseName, c
     /** What the demo adds after the license, as sentences of its own. */
     readonly children?: ReactNode;
 }) => import("react").JSX.Element;
-type NativeButton = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style' | 'disabled' | 'aria-disabled' | 'aria-pressed'>;
+type NativeButton = Omit<ComponentPropsWithRef<'button'>, 'style' | 'disabled' | 'aria-disabled' | 'aria-pressed'>;
 /**
  * A button's own props: the accent for the one action a view leads with, `pressed` for a toggle
- * that stands alone, and `off`. The accent is never a toggle, so the two do not go together.
+ * that stands alone, and `off`, beside a `<button>`'s own, its `ref` among them, which holds the
+ * button drawn for a page that moves focus to it. The accent is never a toggle, so the two do not
+ * go together.
  */
 export type ButtonProps = NativeButton & {
     /** Off, but still in the tab order, so a keyboard keeps its place and finds out why. */
@@ -84,11 +97,18 @@ type FieldParts = {
     /** The control's id, made with useId unless a page gives one, as it does for a link to it. */
     readonly id?: string;
 };
-export type InputFieldProps = FieldParts & Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'id' | 'aria-invalid' | 'children'>;
-/** A text input with its label, hint and error, the input taking every other prop given. */
+export type InputFieldProps = FieldParts & Omit<ComponentPropsWithRef<'input'>, 'style' | 'id' | 'aria-invalid' | 'children'>;
+/**
+ * A text input with its label, hint and error, the input taking every other prop given, its `ref`
+ * among them, which holds the input drawn for a page that moves focus to it.
+ */
 export declare const InputField: (props: InputFieldProps) => import("react").JSX.Element;
-export type SelectFieldProps = FieldParts & Omit<SelectHTMLAttributes<HTMLSelectElement>, 'style' | 'id' | 'aria-invalid'>;
-/** A native select with its label, hint and error, its children the options. */
+export type SelectFieldProps = FieldParts & Omit<ComponentPropsWithRef<'select'>, 'style' | 'id' | 'aria-invalid'>;
+/**
+ * A native select with its label, hint and error, its children the options, and the select taking
+ * every other prop given, its `ref` among them, which holds the select drawn for a page that moves
+ * focus to it.
+ */
 export declare const SelectField: (props: SelectFieldProps) => import("react").JSX.Element;
 /** What a callout is about: news, something that went right, or something that went wrong. */
 export type CalloutTone = 'info' | 'success' | 'danger';

package/dist/react.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId, } from 'react';
+import { useId } from 'react';
 /*
  * The page chrome a demo draws around its page, a skip link, a strip above the page that says
  * whose demo it is and a footer below it, and the buttons, fields and callouts on the page itself.
@@ -21,18 +21,21 @@ export const GITHUB_PROFILE_URL = 'https://github.com/jasonsdevspace';
  * content, which has a tabindex of -1 so it can take focus.
  */
 export const SkipLink = ({ target = 'main-content', children = 'Skip to content', }) => (_jsx("a", { className: "dk-skip", href: `#${target}`, children: children }));
+/** The mark a link to `page` takes when it is the page the chrome sits on, and none otherwise. */
+const currentAs = (current, page) => current === page ? 'page' : undefined;
 /**
  * Whose demo this is, above the page, with three links together on the left. It is a navigation
  * landmark in a plain div rather than a header, so the demo's own header stays the page's one
  * banner. A demo with switches of its own puts them beside the links, in a landmark of their own
- * named for them.
+ * named for them, and while they are on their way the strip keeps their room in that section,
+ * unnamed and so no landmark.
  */
-export const PortfolioStrip = ({ about, source, current, tools, toolsLabel = 'Demo', }) => (_jsxs("div", { className: "dk-strip", children: [_jsxs("nav", { className: "dk-strip-links", "aria-label": "Portfolio", children: [_jsx("a", { href: PORTFOLIO_WORK_URL, children: "A demo by Jason Poteet" }), _jsx("a", { href: about, "aria-current": current === 'about' ? 'page' : undefined, children: "How it works" }), _jsx("a", { href: source, children: "Source on GitHub" })] }), !drawn(tools) ? null : (_jsx("section", { className: "dk-strip-tools", "aria-label": toolsLabel, children: tools }))] }));
+export const PortfolioStrip = ({ about, source, current, tools, toolsLabel = 'Demo', toolsWaiting = false, }) => (_jsxs("div", { className: "dk-strip", children: [_jsxs("nav", { className: "dk-strip-links", "aria-label": "Portfolio", children: [_jsx("a", { href: PORTFOLIO_WORK_URL, children: "A demo by Jason Poteet" }), _jsx("a", { href: about, "aria-current": currentAs(current, 'about'), children: "How it works" }), _jsx("a", { href: source, children: "Source on GitHub" })] }), drawn(tools) ? (_jsx("section", { className: "dk-strip-tools", "aria-label": toolsLabel, children: tools })) : toolsWaiting ? (_jsx("section", { className: "dk-strip-tools", children: _jsx("span", { className: "dk-strip-room" }) })) : null] }));
 /**
  * The exit after a long scroll: whose project this is, how it works, where the source and the rest
  * of the work are, and the license, with anything the demo adds of its own after them.
  */
-export const DemoFooter = ({ name, about, source, license = `${source.endsWith('/') ? source.slice(0, -1) : source}/blob/main/LICENSE`, licenseName = 'MIT license', children, }) => (_jsx("footer", { className: "dk-footer", children: _jsxs("p", { children: [name, " is a portfolio project by ", _jsx("a", { href: PORTFOLIO_URL, children: "Jason Poteet" }), ".", ' ', _jsx("a", { href: about, children: "How it works" }), ", in plain words. The ", _jsx("a", { href: source, children: "source" }), " and", ' ', _jsx("a", { href: GITHUB_PROFILE_URL, children: "more work" }), " are on GitHub, under the", ' ', _jsx("a", { href: license, children: licenseName }), ".", drawn(children) ? _jsxs(_Fragment, { children: [" ", children] }) : null] }) }));
+export const DemoFooter = ({ name, about, source, current, license = `${source.endsWith('/') ? source.slice(0, -1) : source}/blob/main/LICENSE`, licenseName = 'MIT license', children, }) => (_jsx("footer", { className: "dk-footer", children: _jsxs("p", { children: [name, " is a portfolio project by ", _jsx("a", { href: PORTFOLIO_URL, children: "Jason Poteet" }), ".", ' ', _jsx("a", { href: about, "aria-current": currentAs(current, 'about'), children: "How it works" }), ", in plain words. The ", _jsx("a", { href: source, children: "source" }), " and", ' ', _jsx("a", { href: GITHUB_PROFILE_URL, children: "more work" }), " are on GitHub, under the", ' ', _jsx("a", { href: license, children: licenseName }), ".", drawn(children) ? _jsxs(_Fragment, { children: [" ", children] }) : null] }) }));
 /** Whether a slot holds words to draw, an empty string being none. */
 const filled = (node) => drawn(node) && node !== '';
 /**
@@ -80,14 +83,21 @@ const useField = ({ id, hint, error }, own) => {
  * fields at once would speak over itself, so the page says when an error appears.
  */
 const Field = ({ parts, field, children, }) => (_jsxs("div", { className: "dk-field", children: [_jsx("label", { className: "dk-field-label", htmlFor: field.id, children: parts.label }), field.hint ? (_jsx("p", { className: "dk-field-hint", id: `${field.id}-hint`, children: parts.hint })) : null, field.error ? (_jsxs("p", { className: "dk-field-error", id: `${field.id}-error`, children: [_jsx("span", { className: "dk-visually-hidden", children: "Error: " }), parts.error] })) : null, children] }));
-/** A text input with its label, hint and error, the input taking every other prop given. */
+/**
+ * A text input with its label, hint and error, the input taking every other prop given, its `ref`
+ * among them, which holds the input drawn for a page that moves focus to it.
+ */
 export const InputField = (props) => {
     const { label: _label, hint: _hint, error: _error, id: _id, className, ...rest } = props;
     const { 'aria-describedby': own, ...native } = rest;
     const field = useField(props, own);
     return (_jsx(Field, { parts: props, field: field, children: _jsx("input", { className: spaced('dk-input', className), ...native, ...field.wired }) }));
 };
-/** A native select with its label, hint and error, its children the options. */
+/**
+ * A native select with its label, hint and error, its children the options, and the select taking
+ * every other prop given, its `ref` among them, which holds the select drawn for a page that moves
+ * focus to it.
+ */
 export const SelectField = (props) => {
     const { label: _label, hint: _hint, error: _error, id: _id, className, ...rest } = props;
     const { 'aria-describedby': own, children, ...native } = rest;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jasonsdevspace/design-kit",
-    "version": "0.1.0-next.2",
+    "version": "0.1.0-next.3",
     "description": "Design tokens, base styles, a theme script, page chrome, buttons, fields, callouts and an explainer layout for the demos on jasonsdevspace.com.",
     "keywords": [
         "design-tokens",