@0001-labs/design-system-1 0.3.0-alpha.26 → 0.3.0-alpha.28

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.26 */
+/* version 0.3.0-alpha.28 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.26 */
+/* version 0.3.0-alpha.28 */
 
 /* Design system 1's faces and the typeface tokens that name them, on their
    own: a page that does not load one.css links this sheet (one.css imports

package/DS1/1-root/library-tokens.ts

@@ -1,6 +1,5 @@
 // How a published design library reaches Design system 1's components. A library is a stylesheet
-// its owner edits in the libraries app, written in the classless sheet's `--one-*` tokens
-// (one.semantic.css) and its native selectors. DS1's components draw from `--ds-*` tokens
+// its owner edits in the libraries app, including older `--one-*` tokens and native selectors. DS1's components draw from `--ds-*` tokens
 // (component-tokens.css, component-metrics.css) and, in some faces, one.css's own names
 // (`--accent-color`). Publishing prepares the library
 // (packages/css-validate/src/library.ts): after each `--one-*` token below that the library

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.26 */
+/* version 0.3.0-alpha.28 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

package/DS1/1-root/palette.ts

@@ -1,5 +1,5 @@
 // Design system 1's palette: one list, named by colour. The Colours page (website/src/pages/colours.astro)
-// draws it and the CLASSless stylesheet (one.semantic.css) carries it as tokens, written by
+// draws it and the shared stylesheet (palette.css) carries it as tokens, written by
 // scripts/write-palette-css.ts. Change a colour here, then run that script.
 //
 // Every palette colour has a pastel (its hue and saturation at 90% lightness) and a dark-mode version
@@ -77,7 +77,7 @@ export function palette(): PaletteColour[] {
 export const paletteStart = '  /* Palette: written by scripts/write-palette-css.ts from DS1/1-root/palette.ts. */';
 export const paletteEnd = '  /* Palette: end */';
 
-/** The CLASSless tokens: each colour and its pastel, both following the reader's light or dark mode. */
+/** The shared tokens: each colour and its pastel, both following the reader's light or dark mode. */
 export function paletteCss(): string {
   const lines = [paletteStart];
   for (const c of palette()) {
@@ -91,7 +91,7 @@ export function paletteCss(): string {
 }
 
 /**
- * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * The palette on its own, for a page that does not take the shared sheet: palette.css,
  * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
  */
 export function paletteSheet(): string {

package/DS1/3-unit/ds-accordion.ts

@@ -3,11 +3,12 @@ import "../2-core/ds-text";
 import "../2-core/ds-icon";
 import "../2-core/ds-button";
 import { define } from "../0-face/define";
-import "./ds-row";
 import styles from "./styles/ds-accordion.css?inline";
 
 /**
- * Native accordion using <details>/<summary> (no JS toggle logic).
+ * Native accordion using <details>/<summary> (no JS toggle logic): the
+ * summary one square high at the start, the library's chevron-down at its
+ * end (turned over when open), the details from the square below.
  *
  * Usage (with translation text):
  * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>
@@ -86,22 +87,10 @@ export class Accordion extends LitElement {
     return html`
       <details ?open=${this.open}>
         <summary>
-          <ds-row class="summaryRow" centered>
-            <ds-text .text=${this.summary} ?literal=${this.literal}></ds-text>
-            <ds-icon class="chevron" aria-hidden="true">
-              <svg
-                viewBox="0 0 10.157 8.219"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-                focusable="false"
-              >
-                <path
-                  d="M5.078 8.219L0 3.141L1.414 1.727L5.078 5.391L8.743 1.727L10.157 3.141L5.078 8.219Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </ds-icon>
-          </ds-row>
+          <span class="summaryRow">
+            <ds-text class="summaryText" .text=${this.summary} ?literal=${this.literal}></ds-text>
+            <ds-icon class="chevron" type="chevron-down" size="large" aria-hidden="true"></ds-icon>
+          </span>
         </summary>
 
         <div class="detailsBody">

package/DS1/3-unit/ds-calendar.ts

@@ -145,7 +145,7 @@ const openPickers = new Set<Calendar>();
  * @fires navigate - A person moved to another month; `{ month }`.
  * @fires ds-calendar-toggle - A picker's month opened or closed; `{ open }`.
  *
- * A selectable calendar has Clear one square below its month, and `clear()`
+ * A selectable calendar shows Clear right under its dates while something is chosen, and `clear()`
  * empties the value from code; both fire `change` with an empty value.
  *
  * @example
@@ -503,9 +503,9 @@ export class Calendar extends CalendarBase {
   }
 
   private renderClear() {
-    if (!this.selectable || this.embedded || this.required) return nothing;
+    if (!this.selectable || this.embedded || this.required || !this.value) return nothing;
     return html`<div class="foot" part="foot">
-      <button class="ds-button ds-button--secondary clear-value" part="clear" type="button" ?disabled=${!this.value} @click=${() => this.clear()}>${this.words("Clear")}</button>
+      <button class="ds-button ds-button--secondary clear-value" part="clear" type="button" @click=${() => this.clear()}>${this.words("Clear")}</button>
     </div>`;
   }
 
@@ -609,7 +609,7 @@ export class Calendar extends CalendarBase {
             type="button"
             aria-label=${`${title}, ${this.words("Choose a month and year")}`}
             @click=${this.levelUp}
-          ><span class="title-text" id="title" aria-live="polite">${title}</span><ds-icon type="chevron-down" size="large" aria-hidden="true"></ds-icon></button>`}
+          ><span class="title-text" id="title" aria-live="polite">${title}</span></button>`}
       <span class="controls">
         ${this.noToday || this.squaresPerDay < 2 ? nothing : html`<button class="ds-button today-button" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>`}
         ${arrow("previous")}

package/DS1/3-unit/styles/ds-accordion.css

@@ -1,5 +1,8 @@
-/* ds-accordion.css */
-/* Accordion component styles using native <details>/<summary> */
+/* ds-accordion.css
+ * The summary is a row one square high: its words at the start on the sixteen, the library's
+ * chevron-down (16px, in the title grey) at its end, turned over when open. The pointer fills the
+ * row 4px past its words and chevron, keeping them where they stand; keyboard focus rings it.
+ * The details start on the square below, their lines one square each. */
 @import "../../1-root/component-metrics.css";
 
 :host {
@@ -15,37 +18,47 @@ details {
 }
 
 summary {
+  display: block;
+  margin-inline: calc(-4px * var(--ds-sf, 1));
+  padding-inline: calc(4px * var(--ds-sf, 1));
+  border-radius: var(--ds-radius);
   cursor: pointer;
   user-select: none;
   list-style: none;
   outline: none;
 }
-
 summary::-webkit-details-marker {
   display: none;
 }
+summary:hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+summary:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
 
 .summaryRow {
-  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  gap: calc(4px * var(--ds-sf, 1));
+  min-height: var(--ds-unit);
+  line-height: var(--ds-type-lineheight-default);
 }
+.summaryText { flex: 1 1 auto; min-width: 0; }
 
-ds-icon.chevron {
-  transform: rotate(0deg);
-  transition: transform 140ms ease;
+.chevron {
+  flex: 0 0 auto;
+  color: var(--ds-title-color);
 }
-
-details[open] ds-icon.chevron {
-  transform: rotate(180deg);
+details[open] .chevron { transform: rotate(180deg); }
+@media (prefers-reduced-motion: no-preference) {
+  .chevron { transition: transform 140ms ease; }
 }
 
 .detailsBody {
-  padding-top: calc(var(--half) * var(--sf));
+  padding: 0;
 }
 
 .detailsText {
   display: block;
   white-space: normal;
-  text-align: left;
+  text-align: start;
 }
 
 :host([control="slotted"]) { width: 100%; }

package/DS1/3-unit/styles/ds-calendar.css

@@ -6,7 +6,7 @@
  * on the grid lines; today is a red disc nine tenths of a square across.
  *
  * A picker is a field's face: one control high at the foot of its square,
- * ten squares wide by default, its words 4px in and the chevron-down icon
+ * as wide as its words (it hugs them, as a button does), its words 4px in and the chevron-down icon
  * (16px, 2px from the end) at its end; a range is one value. Its month opens on the menu's frame, half a square from
  * the field: a 1px line, half a square inside it, no shadow, so eight squares
  * wide. Inside, on whole squares: the first and last day to type (each with
@@ -93,9 +93,9 @@
 .nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }
 :host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }
 
-/* The title as a button: pressing it travels up to the months of the year, then to twelve years.
- * One control high at the square's foot, the words on the sixteen where the title stands, the
- * pointer filling it 4px past them. */
+/* The title as a plain button, its words alone: pressing it travels up to the months of the year,
+ * then to twelve years. One control high at the square's foot, the words on the sixteen where the
+ * title stands, the pointer filling it 4px past them at each side. */
 .title-button {
   display: inline-flex;
   flex: 0 1 auto;
@@ -104,7 +104,7 @@
   max-width: 100%;
   height: var(--ds-control-height);
   margin: 0 0 0 calc(-4px * var(--ds-sf, 1));
-  padding: 0 0 0 calc(4px * var(--ds-sf, 1));
+  padding: 0 calc(4px * var(--ds-sf, 1));
   border: 0;
   border-radius: var(--ds-radius);
   background: transparent;
@@ -115,11 +115,10 @@
   letter-spacing: inherit;
   cursor: pointer;
 }
-:host(:dir(rtl)) .title-button { margin: 0 calc(-4px * var(--ds-sf, 1)) 0 0; padding: 0 calc(4px * var(--ds-sf, 1)) 0 0; }
+:host(:dir(rtl)) .title-button { margin: 0 calc(-4px * var(--ds-sf, 1)) 0 0; }
 .title-button:hover { background: var(--ds-fill); }
 .title-button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
 .title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.title-button > ds-icon { flex: 0 0 auto; color: var(--ds-title-color); }
 
 /* The months of a year, or twelve years: cells whole squares wide, three across a narrow month
  * and four across a wider one, each row one square, one square apart. The area keeps the days'
@@ -170,12 +169,12 @@
 .pick[data-selected] .pick-mark { background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); }
 .pick:disabled { color: var(--ds-title-color); cursor: default; opacity: 0.5; }
 
-/* Clear: a button one control high at the foot of the square below the month's, one square apart. */
+/* Clear, only while something is chosen: a button one control high, centred on the square right under the dates. */
 .foot {
   display: flex;
   align-items: flex-end;
+  justify-content: center;
   height: var(--ds-unit);
-  margin-block-start: var(--ds-unit);
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -378,8 +377,8 @@
 
 /* The picker: a field that opens the small month. */
 :host([picker]) {
-  --ds-calendar-picker-width: calc(10 * var(--ds-unit));
   display: inline-flex;
+  max-width: 100%;
   align-items: flex-end;
   vertical-align: bottom;
   height: var(--ds-unit);
@@ -389,7 +388,8 @@
   display: inline-flex;
   align-items: center;
   gap: calc(4px * var(--ds-sf, 1));
-  width: var(--ds-calendar-picker-width);
+  width: var(--ds-calendar-picker-width, max-content);
+  max-width: 100%;
   padding-inline: calc(4px * var(--ds-sf, 1)) calc(2px * var(--ds-sf, 1));
   text-align: start;
   cursor: pointer;

package/DS1/react/accordion.ts

@@ -27,7 +27,7 @@ export const Accordion = forwardRef<AccordionElement, AccordionProps>(function A
     ref: (element: AccordionElement | null) => {host.current = element; if (typeof ref === "function") ref(element); else if (ref) ref.current = element;},
   }, h("ds-button", {slot: "trigger", control: "slotted", choice: true, disabled},
     h("button", {type: "button", role: triggerRole, disabled, "aria-expanded": expanded, "aria-controls": id}, summary,
-      h("ds-icon", {type: expanded ? "up" : "down", "aria-hidden": "true", style: {marginInlineStart: "auto", flex: "0 0 auto"}}))),
+      h("ds-icon", {type: "chevron-down", size: "large", "aria-hidden": "true", style: {marginInlineStart: "auto", flex: "0 0 auto", color: "var(--ds-title-color)", transform: expanded ? "rotate(180deg)" : undefined}}))),
     actions == null ? null : h("div", {slot: "actions"}, actions),
     h("div", {slot: "details", id, hidden: !expanded}, children));
 });

package/README.md

@@ -2,7 +2,7 @@
 
 A design system for building interfaces on a 20px grid. Typography, colour, spacing and components share the same rules.
 
-Use CSS to style ordinary HTML, or Lit web components for interactive controls. Change the design through CSS custom properties.
+Use Lit Web Components directly in HTML, or through the React adapters. Change the design through CSS custom properties.
 
 [Explore the system](https://designsystem1.com/) · [Try the workbench](https://designsystem1.com/app/) · [npm](https://www.npmjs.com/package/@0001-labs/design-system-1)
 
@@ -25,12 +25,16 @@ Then use the components in your HTML:
 <ds-button>Save</ds-button>
 ```
 
-For ordinary HTML without component JavaScript, import only the classless stylesheet:
+For a plain HTML page, load the stylesheet and component module:
 
-```js
-import "@0001-labs/design-system-1/DS1/1-root/one.semantic.css";
+```html
+<link rel="stylesheet" href="https://designsystem1.com/resources/design-system-1.css">
+<script type="module" src="https://designsystem1.com/resources/design-system-1.js"></script>
+<ds-button>Save</ds-button>
 ```
 
+The module includes Lit. No package install or build step is needed for this setup.
+
 The package is in alpha. APIs can change between releases.
 
 ## Four layers

package/dist/1-root/library-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"library-tokens.d.ts","sourceRoot":"","sources":["../../DS1/1-root/library-tokens.ts"],"names":[],"mappings":"AAYA,gGAAgG;AAChG,eAAO,MAAM,cAAc,8lEAyCoD,CAAC;AAEhF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD,wHAAwH;AACxH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,wBAAwB,yGAA4G,CAAC;AAElJ;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,GAAI,WAA+B,MAAM,WAA0D,CAAC;AAE7H,8GAA8G;AAC9G,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE/D"}
+{"version":3,"file":"library-tokens.d.ts","sourceRoot":"","sources":["../../DS1/1-root/library-tokens.ts"],"names":[],"mappings":"AAWA,gGAAgG;AAChG,eAAO,MAAM,cAAc,8lEAyCoD,CAAC;AAEhF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AAEzD,wHAAwH;AACxH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,wBAAwB,yGAA4G,CAAC;AAElJ;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,GAAI,WAA+B,MAAM,WAA0D,CAAC;AAE7H,8GAA8G;AAC9G,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE/D"}

package/dist/1-root/library-tokens.js

@@ -1,6 +1,5 @@
 // How a published design library reaches Design system 1's components. A library is a stylesheet
-// its owner edits in the libraries app, written in the classless sheet's `--one-*` tokens
-// (one.semantic.css) and its native selectors. DS1's components draw from `--ds-*` tokens
+// its owner edits in the libraries app, including older `--one-*` tokens and native selectors. DS1's components draw from `--ds-*` tokens
 // (component-tokens.css, component-metrics.css) and, in some faces, one.css's own names
 // (`--accent-color`). Publishing prepares the library
 // (packages/css-validate/src/library.ts): after each `--one-*` token below that the library

package/dist/1-root/palette.d.ts

@@ -25,10 +25,10 @@ export interface PaletteColour {
 export declare function palette(): PaletteColour[];
 export declare const paletteStart = "  /* Palette: written by scripts/write-palette-css.ts from DS1/1-root/palette.ts. */";
 export declare const paletteEnd = "  /* Palette: end */";
-/** The CLASSless tokens: each colour and its pastel, both following the reader's light or dark mode. */
+/** The shared tokens: each colour and its pastel, both following the reader's light or dark mode. */
 export declare function paletteCss(): string;
 /**
- * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * The palette on its own, for a page that does not take the shared sheet: palette.css,
  * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
  */
 export declare function paletteSheet(): string;

package/dist/1-root/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../DS1/1-root/palette.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAOnC,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAGzD,CAAC;AAEF,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpC,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAOtC;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAI7D;AAED,eAAO,MAAM,KAAK,GAAI,UAAU,GAAG,KAAG,OAA+B,CAAC;AAEtE,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAIxC;AACD,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAwD;AACnG,wBAAgB,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAA+D;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,KAAG,MAAmE,CAAC;AAE7G,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IACrE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,GAAG,CAAC;CAC3D;AAED;8EAC8E;AAC9E,wBAAgB,OAAO,IAAI,aAAa,EAAE,CAezC;AAED,eAAO,MAAM,YAAY,yFAAyF,CAAC;AACnH,eAAO,MAAM,UAAU,yBAAyB,CAAC;AAEjD,wGAAwG;AACxG,wBAAgB,UAAU,IAAI,MAAM,CAUnC;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAarC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../DS1/1-root/palette.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAOnC,CAAC;AAEF,8DAA8D;AAC9D,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAGzD,CAAC;AAEF,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAEpC,wBAAgB,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAOtC;AAED,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAI7D;AAED,eAAO,MAAM,KAAK,GAAI,UAAU,GAAG,KAAG,OAA+B,CAAC;AAEtE,wBAAgB,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAIxC;AACD,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAwD;AACnG,wBAAgB,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAA+D;AAEvG,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,KAAG,MAAmE,CAAC;AAE7G,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC;IACrE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,GAAG,CAAC;CAC3D;AAED;8EAC8E;AAC9E,wBAAgB,OAAO,IAAI,aAAa,EAAE,CAezC;AAED,eAAO,MAAM,YAAY,yFAAyF,CAAC;AACnH,eAAO,MAAM,UAAU,yBAAyB,CAAC;AAEjD,qGAAqG;AACrG,wBAAgB,UAAU,IAAI,MAAM,CAUnC;AAED;;;GAGG;AACH,wBAAgB,YAAY,IAAI,MAAM,CAarC"}

package/dist/1-root/palette.js

@@ -1,5 +1,5 @@
 // Design system 1's palette: one list, named by colour. The Colours page (website/src/pages/colours.astro)
-// draws it and the CLASSless stylesheet (one.semantic.css) carries it as tokens, written by
+// draws it and the shared stylesheet (palette.css) carries it as tokens, written by
 // scripts/write-palette-css.ts. Change a colour here, then run that script.
 //
 // Every palette colour has a pastel (its hue and saturation at 90% lightness) and a dark-mode version
@@ -67,7 +67,7 @@ export function palette() {
 }
 export const paletteStart = '  /* Palette: written by scripts/write-palette-css.ts from DS1/1-root/palette.ts. */';
 export const paletteEnd = '  /* Palette: end */';
-/** The CLASSless tokens: each colour and its pastel, both following the reader's light or dark mode. */
+/** The shared tokens: each colour and its pastel, both following the reader's light or dark mode. */
 export function paletteCss() {
     const lines = [paletteStart];
     for (const c of palette()) {
@@ -82,7 +82,7 @@ export function paletteCss() {
     return lines.join('\n');
 }
 /**
- * The palette on its own, for a page that does not take the classless sheet: palette.css,
+ * The palette on its own, for a page that does not take the shared sheet: palette.css,
  * imported by one.css and copied by Sync 1's `root` and `tokens` exports.
  */
 export function paletteSheet() {

package/dist/3-unit/ds-accordion.d.ts

@@ -2,9 +2,10 @@ import { LitElement } from "lit";
 import "../2-core/ds-text";
 import "../2-core/ds-icon";
 import "../2-core/ds-button";
-import "./ds-row";
 /**
- * Native accordion using <details>/<summary> (no JS toggle logic).
+ * Native accordion using <details>/<summary> (no JS toggle logic): the
+ * summary one square high at the start, the library's chevron-down at its
+ * end (turned over when open), the details from the square below.
  *
  * Usage (with translation text):
  * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>

package/dist/3-unit/ds-accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-accordion.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAClD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAE7B,OAAO,UAAU,CAAC;AAGlB;;;;;;;;;;;;;GAaG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;MAOf;IAEM,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IACxB,4EAA4E;IACpE,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,OAAO,CAAC;;IAmBpC,OAAO,CAAC,SAAS,CASf;IACF,OAAO;IAEP,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,iBAAiB;IAYzB,MAAM;CAoCP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}
+{"version":3,"file":"ds-accordion.d.ts","sourceRoot":"","sources":["../../DS1/3-unit/ds-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAClD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAI7B;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;;;;;;MAOf;IAEM,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IACxB,4EAA4E;IACpE,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,kBAAkB,EAAE,OAAO,CAAC;;IAmBpC,OAAO,CAAC,SAAS,CASf;IACF,OAAO;IAEP,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,iBAAiB;IAYzB,MAAM;CAwBP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAC;KAC3B;CACF"}

package/dist/3-unit/ds-accordion.js

@@ -3,10 +3,11 @@ import "../2-core/ds-text";
 import "../2-core/ds-icon";
 import "../2-core/ds-button";
 import { define } from "../0-face/define";
-import "./ds-row";
 import styles from "./styles/ds-accordion.css?inline";
 /**
- * Native accordion using <details>/<summary> (no JS toggle logic).
+ * Native accordion using <details>/<summary> (no JS toggle logic): the
+ * summary one square high at the start, the library's chevron-down at its
+ * end (turned over when open), the details from the square below.
  *
  * Usage (with translation text):
  * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>
@@ -67,22 +68,10 @@ export class Accordion extends LitElement {
         return html `
       <details ?open=${this.open}>
         <summary>
-          <ds-row class="summaryRow" centered>
-            <ds-text .text=${this.summary} ?literal=${this.literal}></ds-text>
-            <ds-icon class="chevron" aria-hidden="true">
-              <svg
-                viewBox="0 0 10.157 8.219"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-                focusable="false"
-              >
-                <path
-                  d="M5.078 8.219L0 3.141L1.414 1.727L5.078 5.391L8.743 1.727L10.157 3.141L5.078 8.219Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </ds-icon>
-          </ds-row>
+          <span class="summaryRow">
+            <ds-text class="summaryText" .text=${this.summary} ?literal=${this.literal}></ds-text>
+            <ds-icon class="chevron" type="chevron-down" size="large" aria-hidden="true"></ds-icon>
+          </span>
         </summary>
 
         <div class="detailsBody">

package/dist/3-unit/ds-calendar.d.ts

@@ -81,7 +81,7 @@ export declare function parseTypedDay(text: string): Day | null;
  * @fires navigate - A person moved to another month; `{ month }`.
  * @fires ds-calendar-toggle - A picker's month opened or closed; `{ open }`.
  *
- * A selectable calendar has Clear one square below its month, and `clear()`
+ * A selectable calendar shows Clear right under its dates while something is chosen, and `clear()`
  * empties the value from code; both fire `change` with an empty value.
  *
  * @example

package/dist/3-unit/ds-calendar.js

@@ -116,7 +116,7 @@ const openPickers = new Set();
  * @fires navigate - A person moved to another month; `{ month }`.
  * @fires ds-calendar-toggle - A picker's month opened or closed; `{ open }`.
  *
- * A selectable calendar has Clear one square below its month, and `clear()`
+ * A selectable calendar shows Clear right under its dates while something is chosen, and `clear()`
  * empties the value from code; both fire `change` with an empty value.
  *
  * @example
@@ -553,10 +553,10 @@ export class Calendar extends CalendarBase {
       ><span class="pick-mark">${name(value)}</span></button>`)}</div>`)}</div>`;
     }
     renderClear() {
-        if (!this.selectable || this.embedded || this.required)
+        if (!this.selectable || this.embedded || this.required || !this.value)
             return nothing;
         return html `<div class="foot" part="foot">
-      <button class="ds-button ds-button--secondary clear-value" part="clear" type="button" ?disabled=${!this.value} @click=${() => this.clear()}>${this.words("Clear")}</button>
+      <button class="ds-button ds-button--secondary clear-value" part="clear" type="button" @click=${() => this.clear()}>${this.words("Clear")}</button>
     </div>`;
     }
     /** The day holding the Tab stop: the one moved to, the selected day, today, or the first. */
@@ -605,7 +605,7 @@ export class Calendar extends CalendarBase {
             type="button"
             aria-label=${`${title}, ${this.words("Choose a month and year")}`}
             @click=${this.levelUp}
-          ><span class="title-text" id="title" aria-live="polite">${title}</span><ds-icon type="chevron-down" size="large" aria-hidden="true"></ds-icon></button>`}
+          ><span class="title-text" id="title" aria-live="polite">${title}</span></button>`}
       <span class="controls">
         ${this.noToday || this.squaresPerDay < 2 ? nothing : html `<button class="ds-button today-button" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>`}
         ${arrow("previous")}