@jasonsdevspace/design-kit 0.1.0-next.4 → 0.1.0-next.5

package/CHANGELOG.md

@@ -7,6 +7,31 @@ 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.5
+
+The strip's first link is the author's name and leads to the portfolio. A demo can name its
+switches' width, so the strip wraps the same before they arrive as after, and on a wide screen the
+switches keep to the strip's right edge.
+
+- **Page chrome.** The strip's first link reads "Jason Poteet" and leads to the portfolio's home
+  page, `PORTFOLIO_URL`, where it read "More work by Jason Poteet" and led to the portfolio's list
+  of work. It matches the footer's own "Jason Poteet", which leads to the same place, and no longer
+  shares "more work" with the footer's link to the GitHub profile. A page that writes the strip by
+  hand changes the link's words and where it leads itself. `PORTFOLIO_WORK_URL` is still exported,
+  for a page that links to the list of work.
+- **Page chrome.** A new token, `--dk-strip-tools`, holds the width of a demo's switches in the
+  strip, in the strip's own text size, such as `:root { --dk-strip-tools: 20em; }`. It is `auto`, so
+  nothing changes for a demo that leaves it alone. A demo whose switches arrive after the page sets
+  it at least as wide as they are, and on a wide screen the room the strip keeps for them and the
+  section that holds them both take that width, the switches packed at its right end, so the strip
+  wraps before they arrive just as it does after. On a phone the switches keep a row of their own at
+  its full width.
+- **Page chrome.** On a wide screen the switches keep to the strip's right edge, on the links' row
+  or on a row of their own where they wrap below it, where before a wrapped section started at the
+  left. Where the switches wrap within their section, its last row sits at the right too. On a phone
+  they still start at the left. A page that writes the strip by hand gets this from the sheet, with
+  no change to its markup.
+
 ## 0.1.0-next.4
 
 The strip's first link says whose work it leads to, and the footer's sentence holds to the measure.

package/README.md

@@ -54,8 +54,8 @@ export default defineConfig({ plugins: [themeScriptPlugin()] });
   `--dk-danger`, `--dk-danger-bg` and the scrim, `--dk-scrim`. Beside them are steps of space, text
   size and corners, a code size in em that follows the text around it, line heights, weights, a sans
   and a mono font stack, the focus ring's width and offset, a field's height and inline padding, the
-  size of a touch target, the height of the portfolio's strip, the measure and column widths, a
-  shadow and a short duration.
+  size of a touch target, the height of the portfolio's strip and the width of a demo's switches in
+  it, `auto` until a demo names one, the measure and column widths, a shadow and a short duration.
 - `@jasonsdevspace/design-kit/base.css` gives the page its type and colors, one focus ring in the
   accent for every link and control the keyboard reaches, code in running text a step under the text
   around it, the `.dk-visually-hidden` class for a label a screen reader reads and the eye does not,
@@ -73,10 +73,10 @@ export default defineConfig({ plugins: [themeScriptPlugin()] });
   draw the chrome's markup, and `Button`, `InputField`, `SelectField` and `Callout`, which draw the
   markup of the buttons, fields and callouts, with the types `ButtonProps`, `InputFieldProps`,
   `SelectFieldProps`, `CalloutProps` and `CalloutTone`. It also exports `PORTFOLIO_URL`,
-  `PORTFOLIO_WORK_URL` and `GITHUB_PROFILE_URL`, the portfolio, its list of work and the GitHub
-  profile the chrome links to. It has no component for the explainer or the pieces in it, which a
-  page writes by hand. It takes React `^19.3.0` as an optional peer, which a page that writes the
-  markup itself never needs.
+  `PORTFOLIO_WORK_URL` and `GITHUB_PROFILE_URL`: the portfolio and the GitHub profile, which the
+  chrome links to, and the portfolio's list of work, for a page that links to it. It has no
+  component for the explainer or the pieces in it, which a page writes by hand. It takes React
+  `^19.3.0` as an optional peer, which a page that writes the markup itself never needs.
 - `@jasonsdevspace/design-kit/vite` exports `themeScriptPlugin()`, the Vite plugin that puts the
   script inline in place of `THEME_PLACEHOLDER`, the comment `<!-- theme-script -->`, and
   `themeScriptHash`, the script's hash as a Content Security Policy source. It runs in Node, and
@@ -117,18 +117,18 @@ does, one pixel clipped to nothing, so it draws nothing and takes no click where
 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 links in this order: the author's other
-work, which names who made the demo, how it works and the source. It reads "More work by Jason
-Poteet", which fits a demo and the kit's own site alike. 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, named for them, and a demo with none leaves the section out.
+The strip holds a navigation landmark named Portfolio, with links in this order: the author's name,
+which leads to the portfolio as the footer's does, how it works and the source. The name reads
+"Jason Poteet", which fits a demo and the kit's own site alike. 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, named for them, and a demo with none leaves the section out.
 
 <!-- example: strip -->
 
 ```html
 <div class="dk-strip">
     <nav class="dk-strip-links" aria-label="Portfolio">
-        <a href="https://jasonsdevspace.com/#work">More work by Jason Poteet</a>
+        <a href="https://jasonsdevspace.com/">Jason Poteet</a>
         <a href="./about/">How it works</a>
         <a href="https://github.com/jasonsdevspace/example">Source on GitHub</a>
     </nav>
@@ -151,7 +151,11 @@ switches come they take the room's place in the same section, and the section ta
 
 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.
+row, still move what is below them when they come. On a wide screen the room has no width of its
+own, so a demo whose switches would make the strip wrap where the room did not names their width in
+`--dk-strip-tools`, in the strip's own text size, such as `:root { --dk-strip-tools: 20em; }`. The
+room and the switches then take that width, and the strip wraps before they come as it does after.
+On a phone the switches have a row of their own and the width is left aside.
 
 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

package/dist/components.css

@@ -81,14 +81,22 @@
 
     /*
      * The switches wrap where larger text leaves no room, and stand at least as tall as the links'
-     * row.
+     * row, against the strip's right edge, on the links' row or on one of their own where they
+     * wrap below it. A demo whose switches arrive after the page names their width, at least as
+     * wide as they are, in `--dk-strip-tools`, in the strip's own text size, so the room kept for
+     * them and the switches that fill it are one width, and a strip too narrow for the links and
+     * the switches wraps before they come as it does after. Without it, the section is as wide as
+     * what it holds.
      */
     .dk-strip-tools {
         display: flex;
         flex-wrap: wrap;
         align-items: center;
+        justify-content: flex-end;
         gap: var(--dk-space-3);
+        inline-size: var(--dk-strip-tools);
         min-height: var(--dk-strip);
+        margin-inline-start: auto;
     }
 
     /* The exit after a long scroll, its rule the width of the page and its text in the column. */
@@ -137,7 +145,8 @@
 
     /*
      * 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.
+     * with the switches on a row below them, at its start and its full width whatever width a demo
+     * names.
      */
     @media (max-width: 48rem) {
         .dk-strip {
@@ -150,6 +159,9 @@
 
         .dk-strip-tools {
             flex-basis: 100%;
+            justify-content: flex-start;
+            inline-size: auto;
+            margin-inline-start: 0;
             padding-block: 0 var(--dk-space-2);
         }
 

package/dist/react.d.ts

@@ -17,7 +17,8 @@ export declare const SkipLink: ({ target, children, }: {
 /** 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
+ * Whose demo this is, above the page, with three links together on the left: the author's name,
+ * which leads to the portfolio as the footer's does, how it works and the source. 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, and while they are on their way the strip keeps their room in that section,

package/dist/react.js

@@ -31,13 +31,14 @@ export const SkipLink = ({ target = 'main-content', children = 'Skip to content'
 /** 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
+ * Whose demo this is, above the page, with three links together on the left: the author's name,
+ * which leads to the portfolio as the footer's does, how it works and the source. 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, 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', 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: "More work by Jason Poteet" }), _jsx("a", { href: about, "aria-current": currentAs(current, 'about'), children: "How it works" }), _jsx("a", { href: source, children: "Source on GitHub" })] }), filled(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] }));
+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_URL, children: "Jason Poteet" }), _jsx("a", { href: about, "aria-current": currentAs(current, 'about'), children: "How it works" }), _jsx("a", { href: source, children: "Source on GitHub" })] }), filled(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.

package/dist/tokens.css

@@ -100,6 +100,11 @@
         --dk-target: 2.75rem;
         /* The height of the portfolio strip's row, and of each link in it. */
         --dk-strip: 2.5rem;
+        /*
+         * The width of a demo's switches in the strip, in the strip's own text size, which a demo
+         * whose switches arrive after the page names, so the room kept for them holds it too.
+         */
+        --dk-strip-tools: auto;
 
         /*
          * The width a page of reading holds to, no more than 80 characters a line in the body size,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jasonsdevspace/design-kit",
-    "version": "0.1.0-next.4",
+    "version": "0.1.0-next.5",
     "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",