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

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.26 */
+/* version 0.3.0-alpha.27 */
 
 /* 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.27 */
 
 /* 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/one.css

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

package/DS1/1-root/one.semantic.css

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.26 */
+/* DS1 — version 0.3.0-alpha.27 */
 /* A classless stylesheet for native HTML. No JavaScript is required. */
 
 /* It draws on Design system 1's measures: the 20px square, 14px type on

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/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")}