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

package/DS1/0-face/generated/toast-assets.ts

@@ -14,5 +14,5 @@ export const toastIcons: Readonly<Record<ToastIconName, string>> = {
   "check": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.68649 11.884L12.443 6.13601L11.736 5.42715L6.68835 10.4827L4.26399 8.0501L3.55696 8.74525L6.68649 11.884Z\" fill=\"currentColor\"/>\n</svg>\n",
   "close": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.1215 4.58087L8.70453 7.99397L12.1176 11.4169L11.4106 12.112L7.99847 8.69108L4.58636 12.112L3.87836 11.4031L7.29535 7.99005L3.88226 4.56716L4.58929 3.87201L8.0014 7.29294L11.4145 3.87201L12.1215 4.58087Z\" fill=\"currentColor\"/>\n</svg>\n",
   "notifications": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.5 11.5V7.5C4.5 5.567 6.067 4 8 4C9.933 4 11.5 5.567 11.5 7.5V11.5M3 11.5H13M8 2.5V4M6.5 13.5H9.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>\n",
-  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8ZM7.5 6.3H8.5V10.3H7.5V6.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"#1E1E1E\"/>\n</svg>\n",
+  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"currentColor\"/>\n</svg>\n",
 };

package/DS1/1-root/cjk.css

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

@@ -12,7 +12,7 @@
  * the danger colour. The `ds-notice` element draws the same parts.
  *
  *   ds-notice                       the block: mark, words, dismiss
- *   ds-notice__mark                 the square mark; holds an icon in its ink
+ *   ds-notice__mark                 the mark, a picture's 4px corners; holds an icon in its ink
  *   ds-notice__title                one line in the medium face
  *   ds-notice__text                 lines of one square
  *   ds-notice__actions              buttons or links on one row
@@ -84,6 +84,9 @@
   height: var(--ds-control-height);
   margin-block: calc((var(--ds-unit) - var(--ds-control-height)) / 2);
   overflow: hidden;
+  /* Rounded as every icon tile is (Joachim, 19 October 2026). */
+  border-radius: var(--ds-radius);
+  corner-shape: var(--ds-corner-shape, round);
   background: var(--ds-notice-mark);
   color: var(--ds-notice-mark-ink);
   --ds-icon-color: var(--ds-notice-mark-ink);

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.25 */
+/* 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.25 */
+/* 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/1-root/table.css

@@ -19,7 +19,13 @@
  *
  * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by
  * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px
- * in on the sixteen, as an Ezo item's are. Column letters and the row numbers
+ * in on the sixteen. Words that do not fit fade out over the last square
+ * where they are cut, never an ellipsis: put them in `.ds-table__words`,
+ * which carries the fade (a mask, so it fades to whatever is behind: the
+ * paper, a selected or hovered cell's fill). A table marked `data-fit`
+ * (`<ds-table sheet>` is) measures its cells and marks the cut ones
+ * `data-cut="end"`, or `"start"` for a number it has scrolled to its end, so
+ * words that fit never fade; without it every cell's end fades. Column letters and the row numbers
  * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place
  * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table
  * `--ds-table-columns` (the number of data columns) and the scroll a height
@@ -161,11 +167,29 @@
   border-bottom: 1px solid var(--ds-table-rule);
   border-inline-end: 1px solid var(--ds-table-rule);
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 .ds-table[data-sheet] :is(th, td):last-child {
   padding-inline-end: var(--ds-table-text);
 }
+.ds-table[data-sheet] .ds-table__words {
+  --ds-table-fade-to: right;
+  --ds-table-fade-from: left;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ds-table[data-sheet]:dir(rtl) .ds-table__words {
+  --ds-table-fade-to: left;
+  --ds-table-fade-from: right;
+}
+/* Cut words fade over their last square to nothing, at the edge where they are cut. */
+.ds-table[data-sheet]:not([data-fit]) .ds-table__words,
+.ds-table[data-sheet] .ds-table__words[data-cut="end"] {
+  mask-image: linear-gradient(to var(--ds-table-fade-to), #000 calc(100% - var(--ds-table-row)), transparent);
+}
+.ds-table[data-sheet] .ds-table__words[data-cut="start"] {
+  mask-image: linear-gradient(to var(--ds-table-fade-from), #000 calc(100% - var(--ds-table-row)), transparent);
+}
 .ds-table[data-sheet] .ds-table__number {
   width: var(--ds-table-index);
   max-width: var(--ds-table-index);

package/DS1/2-core/ds-tooltip.ts

@@ -100,7 +100,29 @@ export class Tooltip extends LitElement {
     trigger.setAttribute("aria-describedby", [...ids, this.description.id].join(" "));
   };
 
-  updated(): void { this.describe(); }
+  updated(): void {
+    this.describe();
+    if (this._visible) this.place();
+  }
+
+  /**
+   * Keeps the bubble inside the window, as the page's tooltips do (0-face/tooltips.ts): four
+   * pixels from its edges, and below the control when there is no room above (or above when
+   * `placement="bottom"` has no room below). A tooltip at a frame's edge is never cut short.
+   */
+  private place(): void {
+    const bubble = this.shadowRoot?.querySelector<HTMLElement>(".bubble");
+    if (!bubble || bubble.hidden) return;
+    const edge = 4 * (parseFloat(getComputedStyle(this).getPropertyValue("--ds-sf")) || 1);
+    bubble.style.removeProperty("--ds-tooltip-shift");
+    bubble.dataset.side = this.placement === "bottom" ? "bottom" : "top";
+    let box = bubble.getBoundingClientRect();
+    if (bubble.dataset.side === "top" && box.top < edge) bubble.dataset.side = "bottom";
+    else if (bubble.dataset.side === "bottom" && box.bottom > innerHeight - edge) bubble.dataset.side = "top";
+    box = bubble.getBoundingClientRect();
+    const shift = box.left < edge ? edge - box.left : box.right > innerWidth - edge ? innerWidth - edge - box.right : 0;
+    if (shift) bubble.style.setProperty("--ds-tooltip-shift", `${shift}px`);
+  }
 
   render() {
     return html`<slot @slotchange=${this.describe}></slot>

package/DS1/2-core/generated/ds-icon-map.ts

@@ -322,7 +322,6 @@ export const iconNameToSvgMap = {
   "toggle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 5L7.5 8L3 11Z\" fill=\"currentColor\"/>\n<path d=\"M9.5 7.5H13.5V8.5H9.5Z\" fill=\"currentColor\"/>\n</svg>",
   "train": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.25\" y=\"1.75\" width=\"9.5\" height=\"9.5\" rx=\"2.25\"/><path d=\"M3.25 7H12.75\"/><path d=\"M5.75 9.25H5.76M10.24 9.25H10.25\"/><path d=\"M5.25 11.25L3.75 14M10.75 11.25L12.25 14\"/></g>\n</svg>",
   "transfer": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 5.5H12.5M10 3L12.5 5.5L10 8\"/><path d=\"M13 10.5H3.5M6 8L3.5 10.5L6 13\"/></g>\n</svg>",
-  "triangle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "tv": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"1.75\" y=\"3.25\" width=\"12.5\" height=\"8.5\" rx=\"1.75\"/><path d=\"M5.5 13.75H10.5\"/><path d=\"M7 6V9L9.5 7.5Z\"/></g>\n</svg>",
   "underline": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.5 3.25V8A2.5 2.5 0 0 0 10.5 8V3.25M4 12.75H12\" stroke=\"currentColor\" stroke-width=\"1.1\"/>\n</svg>",
   "undo": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 4L4 1M1 4L4 7M1 4H8C9.65685 4 11 5.34315 11 7V9\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n</svg></svg>",
@@ -341,7 +340,7 @@ export const iconNameToSvgMap = {
   "views": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n<path d=\"M10.2 10.2L13.5 13.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>",
   "vimeo": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1 1.5 3c-1.052 2 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5\"/>\n</svg></svg>",
   "wallet": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.25 5.25V4.25C12.25 3.7 11.8 3.25 11.25 3.25H3.75C2.92 3.25 2.25 3.92 2.25 4.75\"/><rect x=\"2.25\" y=\"4.75\" width=\"11.5\" height=\"8\" rx=\"1.75\"/><path d=\"M13.75 7.5H11.25C10.42 7.5 9.75 8.17 9.75 9C9.75 9.83 10.42 10.5 11.25 10.5H13.75\"/></g>\n</svg>",
-  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8ZM7.5 6.3H8.5V10.3H7.5V6.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"#1E1E1E\"/>\n</svg>",
+  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"currentColor\"/>\n</svg>",
   "wifi": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1.75 6.25C5.2 3.25 10.8 3.25 14.25 6.25\"/><path d=\"M3.75 8.5C6.2 6.5 9.8 6.5 12.25 8.5\"/><path d=\"M5.75 10.75C7.05 9.75 8.95 9.75 10.25 10.75\"/><path d=\"M8 12.99V13\"/></g>\n</svg>",
   "window": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"9\" stroke=\"currentColor\"/>\n<path d=\"M2.5 6H13.5\" stroke=\"currentColor\"/>\n</svg>",
   "work": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z\" fill=\"currentColor\"/>\n</svg>",
@@ -670,7 +669,6 @@ export const iconNames = [
   "toggle",
   "train",
   "transfer",
-  "triangle",
   "tv",
   "underline",
   "undo",

package/DS1/2-core/generated/icons-extra.ts

@@ -278,7 +278,6 @@ export const icons: Readonly<Record<string, string>> = {
   "toggle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 5L7.5 8L3 11Z\" fill=\"currentColor\"/>\n<path d=\"M9.5 7.5H13.5V8.5H9.5Z\" fill=\"currentColor\"/>\n</svg>",
   "train": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.25\" y=\"1.75\" width=\"9.5\" height=\"9.5\" rx=\"2.25\"/><path d=\"M3.25 7H12.75\"/><path d=\"M5.75 9.25H5.76M10.24 9.25H10.25\"/><path d=\"M5.25 11.25L3.75 14M10.75 11.25L12.25 14\"/></g>\n</svg>",
   "transfer": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 5.5H12.5M10 3L12.5 5.5L10 8\"/><path d=\"M13 10.5H3.5M6 8L3.5 10.5L6 13\"/></g>\n</svg>",
-  "triangle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "tv": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"1.75\" y=\"3.25\" width=\"12.5\" height=\"8.5\" rx=\"1.75\"/><path d=\"M5.5 13.75H10.5\"/><path d=\"M7 6V9L9.5 7.5Z\"/></g>\n</svg>",
   "underline": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.5 3.25V8A2.5 2.5 0 0 0 10.5 8V3.25M4 12.75H12\" stroke=\"currentColor\" stroke-width=\"1.1\"/>\n</svg>",
   "undo": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 4L4 1M1 4L4 7M1 4H8C9.65685 4 11 5.34315 11 7V9\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n</svg></svg>",
@@ -291,7 +290,7 @@ export const icons: Readonly<Record<string, string>> = {
   "video": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"2.5\" y=\"4.5\" width=\"8\" height=\"7\" stroke=\"currentColor\"/>\n<path d=\"M10.5 7L13.5 5V11L10.5 9\" stroke=\"currentColor\"/>\n</svg>",
   "vimeo": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1 1.5 3c-1.052 2 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5\"/>\n</svg></svg>",
   "wallet": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.25 5.25V4.25C12.25 3.7 11.8 3.25 11.25 3.25H3.75C2.92 3.25 2.25 3.92 2.25 4.75\"/><rect x=\"2.25\" y=\"4.75\" width=\"11.5\" height=\"8\" rx=\"1.75\"/><path d=\"M13.75 7.5H11.25C10.42 7.5 9.75 8.17 9.75 9C9.75 9.83 10.42 10.5 11.25 10.5H13.75\"/></g>\n</svg>",
-  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8ZM7.5 6.3H8.5V10.3H7.5V6.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"#1E1E1E\"/>\n</svg>",
+  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"currentColor\"/>\n</svg>",
   "wifi": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1.75 6.25C5.2 3.25 10.8 3.25 14.25 6.25\"/><path d=\"M3.75 8.5C6.2 6.5 9.8 6.5 12.25 8.5\"/><path d=\"M5.75 10.75C7.05 9.75 8.95 9.75 10.25 10.75\"/><path d=\"M8 12.99V13\"/></g>\n</svg>",
   "window": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"9\" stroke=\"currentColor\"/>\n<path d=\"M2.5 6H13.5\" stroke=\"currentColor\"/>\n</svg>",
   "work": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z\" fill=\"currentColor\"/>\n</svg>",

package/DS1/2-core/generated/icons-immediate.ts

@@ -46,4 +46,4 @@ export const icons: Readonly<Record<string, string>> = {
   "up": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z\" fill=\"currentColor\"/>\n</svg>",
   "views": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n<path d=\"M10.2 10.2L13.5 13.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>"
 }
-export const deferredIconNames = ["1x","1xdots","1xgrid","1xlines","2x","2xdots","2xgrid","2xgrid-alt","2xgrid-alt-2","2xgrid-alt-3","2xlines","4x4","airtable","archive-alt","arrange-archive","arrange-check","arrange-chevron","arrange-connect","arrange-draft","arrange-dropdown","arrange-home","arrange-link","arrange-menu","arrange-more","arrange-page","arrange-plus","arrange-site","attach","audio","avatar","badge-bands","badge-bands-3d","badge-blue-fan","badge-blue-fan-3d","badge-bricks","badge-bricks-3d","badge-broken-stripes","badge-broken-stripes-3d","badge-checker","badge-checker-3d","badge-diamond","badge-diamond-3d","badge-fan","badge-fan-3d","badge-fan-dark","badge-fan-dark-3d","badge-halves","badge-halves-3d","badge-halves-green","badge-halves-green-3d","badge-red","badge-red-3d","badge-red-blue-bricks","badge-red-blue-bricks-3d","badge-round-fan","badge-round-fan-3d","badge-shard","badge-shard-3d","badge-split-circle","badge-split-circle-3d","badge-tall-bricks","badge-tall-bricks-3d","badge-weave","badge-weave-3d","bag-alt","bank","banknote","block-accordion","block-banner","block-breadcrumbs","block-button","block-divider","block-forms","block-group","block-heading","block-image","block-logo-marquee","block-page-progress","block-section","block-table","block-tabs","block-text","bold","bolt","book","book-alt","box","briefcase","building","bullet","callout","car","card","cart","categories","check-alt","chevron-down","chevron-left","chevron-right","chevron-up","cloud","code","code-block","coffee","coins","color","column","comment","connect","content","cursor","curve","default","dictate","dislike","divider","dot-bank","dot-banknote","dot-banknotes","dot-card","dot-coin","dot-coins","dot-happy","dot-neutral","dot-receipt","dot-sad","dot-safe","dot-transfer","dot-wallet","download","drive","drop","dropbox","dumbbell","equation","exercise","eye","eye-off","facebook","figma","flame","flip","food","form","fuel","gallery","game","gift","github","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","heart","help","help-alt","history","home-alt","icon","image","in","income","indent","info","instagram","italic","item","jpbank","key","keyboard","life","like","link","linkedin","list-line","lock-filled","logo-marquee","loom","map","medical","mention","menu","minimize","minimize-alt","minus","money","moon","move","music","music-alt","navigation-check","note-alt","note-alt-2","note-lines","notifications","notion","numbered","offline","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","password-see","password-unsee","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","pause","paw","pdf","people","percent","phone","pill","plane","play-alt","postal","present","quote","reaction","receipt","redo","refresh","refund","relationships","repeat","rewind","rewind-30","rewind-30-alt","rotate","row","safe","school","school-alt","search-30","see-30","settings","shield","shield-alt","shirt","shop","sign-in","sign-out","slack","slash","sparkle","star-alt","star-alt-2","start","status","status-alt","status-filled","stop","strike","sun","system","table","tag","templates","text","ticket","title","title-struck","titlestyle","todo","toggle","train","transfer","triangle","tv","underline","undo","ungroup","unhead","unicon","untitle","up-right","upload","video","vimeo","wallet","warning","wifi","window","work","wrench","x-brand","youtube"] as const
+export const deferredIconNames = ["1x","1xdots","1xgrid","1xlines","2x","2xdots","2xgrid","2xgrid-alt","2xgrid-alt-2","2xgrid-alt-3","2xlines","4x4","airtable","archive-alt","arrange-archive","arrange-check","arrange-chevron","arrange-connect","arrange-draft","arrange-dropdown","arrange-home","arrange-link","arrange-menu","arrange-more","arrange-page","arrange-plus","arrange-site","attach","audio","avatar","badge-bands","badge-bands-3d","badge-blue-fan","badge-blue-fan-3d","badge-bricks","badge-bricks-3d","badge-broken-stripes","badge-broken-stripes-3d","badge-checker","badge-checker-3d","badge-diamond","badge-diamond-3d","badge-fan","badge-fan-3d","badge-fan-dark","badge-fan-dark-3d","badge-halves","badge-halves-3d","badge-halves-green","badge-halves-green-3d","badge-red","badge-red-3d","badge-red-blue-bricks","badge-red-blue-bricks-3d","badge-round-fan","badge-round-fan-3d","badge-shard","badge-shard-3d","badge-split-circle","badge-split-circle-3d","badge-tall-bricks","badge-tall-bricks-3d","badge-weave","badge-weave-3d","bag-alt","bank","banknote","block-accordion","block-banner","block-breadcrumbs","block-button","block-divider","block-forms","block-group","block-heading","block-image","block-logo-marquee","block-page-progress","block-section","block-table","block-tabs","block-text","bold","bolt","book","book-alt","box","briefcase","building","bullet","callout","car","card","cart","categories","check-alt","chevron-down","chevron-left","chevron-right","chevron-up","cloud","code","code-block","coffee","coins","color","column","comment","connect","content","cursor","curve","default","dictate","dislike","divider","dot-bank","dot-banknote","dot-banknotes","dot-card","dot-coin","dot-coins","dot-happy","dot-neutral","dot-receipt","dot-sad","dot-safe","dot-transfer","dot-wallet","download","drive","drop","dropbox","dumbbell","equation","exercise","eye","eye-off","facebook","figma","flame","flip","food","form","fuel","gallery","game","gift","github","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","heart","help","help-alt","history","home-alt","icon","image","in","income","indent","info","instagram","italic","item","jpbank","key","keyboard","life","like","link","linkedin","list-line","lock-filled","logo-marquee","loom","map","medical","mention","menu","minimize","minimize-alt","minus","money","moon","move","music","music-alt","navigation-check","note-alt","note-alt-2","note-lines","notifications","notion","numbered","offline","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","password-see","password-unsee","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","pause","paw","pdf","people","percent","phone","pill","plane","play-alt","postal","present","quote","reaction","receipt","redo","refresh","refund","relationships","repeat","rewind","rewind-30","rewind-30-alt","rotate","row","safe","school","school-alt","search-30","see-30","settings","shield","shield-alt","shirt","shop","sign-in","sign-out","slack","slash","sparkle","star-alt","star-alt-2","start","status","status-alt","status-filled","stop","strike","sun","system","table","tag","templates","text","ticket","title","title-struck","titlestyle","todo","toggle","train","transfer","tv","underline","undo","ungroup","unhead","unicon","untitle","up-right","upload","video","vimeo","wallet","warning","wifi","window","work","wrench","x-brand","youtube"] as const

package/DS1/2-core/styles/ds-tooltip.css

@@ -10,7 +10,8 @@
   position: absolute;
   left: 50%;
   bottom: calc(100% + 2px * var(--ds-sf, var(--sf, 1)));
-  transform: translateX(-50%);
+  /* Centred over its control, shifted to stay four pixels inside the window (ds-tooltip.ts). */
+  transform: translateX(calc(-50% + var(--ds-tooltip-shift, 0px)));
   z-index: var(--ds-tooltip-z-index, 1000);
   width: max-content;
   max-width: min(calc(320px * var(--ds-sf, var(--sf, 1))), calc(100vw - 20px));
@@ -32,7 +33,7 @@
 
 .bubble[hidden] { display: none; }
 
-:host([placement="bottom"]) .bubble {
+.bubble[data-side="bottom"] {
   bottom: auto;
   top: calc(100% + 2px * var(--ds-sf, var(--sf, 1)));
 }

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/ds-table.ts

@@ -4,7 +4,8 @@
 // `sheet` it is a spreadsheet: every cell four squares by one, lettered
 // columns and numbered rows held in place while it scrolls both ways, and with
 // `reorderable` its rows move by the grip on their number: dragged with a
-// mouse, after a long press on a touch screen, or with Alt+↑/↓.
+// mouse, after a long press on a touch screen, or with Alt+↑/↓. A sheet's
+// words that do not fit fade out over their last square, never an ellipsis.
 
 import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
 import { getText } from "../0-face/i18n";
@@ -102,6 +103,9 @@ export class DsTable extends LitElement {
   /** A move waiting for the page's data, and the time it settles back without it. */
   private settle: { from: number; to: number; timer: ReturnType<typeof setTimeout> } | undefined;
   private status = "";
+  /** Measures the cells again when the sheet's size changes, as its scale does. */
+  private resize: ResizeObserver | undefined;
+  private watched: Element | undefined;
 
   constructor() {
     super();
@@ -114,8 +118,16 @@ export class DsTable extends LitElement {
 
   static styles = [unsafeCSS(metrics), unsafeCSS(table), unsafeCSS(styles)];
 
+  connectedCallback() {
+    super.connectedCallback();
+    // The faces may arrive after the first measure and change every width.
+    void document.fonts?.ready.then(() => { if (this.isConnected && this.sheet) this.fit(); });
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.resize?.disconnect();
+    this.watched = undefined;
     this.release();
     if (this.settle) clearTimeout(this.settle.timer);
     this.settle = undefined;
@@ -128,6 +140,42 @@ export class DsTable extends LitElement {
     if (this.grip >= this.data.length) this.grip = Math.max(0, this.data.length - 1);
   }
 
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    if (!this.sheet) return;
+    // Before the first paint, so words that fit never show a fade.
+    if (["data", "columns", "footer", "sheet"].some(name => changed.has(name as keyof DsTable))) this.fit();
+    const table = this.table;
+    if (!table || table === this.watched || typeof ResizeObserver === "undefined") return;
+    this.resize ??= new ResizeObserver(() => this.fit());
+    this.resize.disconnect();
+    this.resize.observe(table);
+    this.watched = table;
+  }
+
+  /**
+   * Marks the cells whose words are cut, so only they fade where they are
+   * cut; a label fades at its end. A number always shows its last digits and loses its first: in a
+   * left-to-right sheet it is scrolled to its end and fades at its start;
+   * in a right-to-left one its digits already overflow on the left, the
+   * cell's end. All the reads come before any write, so it lays out once.
+   */
+  private fit() {
+    const words = [...this.renderRoot.querySelectorAll<HTMLElement>(".ds-table__words")];
+    if (!words.length) return;
+    const rtl = getComputedStyle(words[0]!).direction === "rtl";
+    const over = words.map(element => element.scrollWidth - element.clientWidth);
+    const scrolled = words.map((element, index) => !rtl && over[index]! > 0 && Boolean(element.parentElement?.matches("td[data-numeric]")));
+    words.forEach((element, index) => {
+      const left = scrolled[index] ? over[index]! : 0;
+      if (element.scrollLeft !== left) element.scrollLeft = left;
+    });
+    words.forEach((element, index) => {
+      const cut = over[index]! <= 0 ? undefined : scrolled[index] ? "start" : "end";
+      if (element.dataset.cut !== cut) { if (cut) element.dataset.cut = cut; else delete element.dataset.cut; }
+    });
+  }
+
   private resolvedColumns(): TableColumn[] {
     const named = this.columns.length > 0;
     const given = named
@@ -156,7 +204,7 @@ export class DsTable extends LitElement {
   private sheetRow(row: TableRow, columns: TableColumn[], number: string, index?: number) {
     const grip = this.reorderable && index !== undefined;
     return html`<tr><th scope="row" class="ds-table__number">${grip ? this.gripCell(number, index) : number}</th>${columns.map((column, index) =>
-      html`<td ?data-numeric=${column.numeric}>${text(cell(row, column.key, index))}</td>`)}</tr>`;
+      html`<td ?data-numeric=${column.numeric}><span class="ds-table__words">${text(cell(row, column.key, index))}</span></td>`)}</tr>`;
   }
 
   private gripCell(number: string, index: number) {
@@ -398,10 +446,10 @@ export class DsTable extends LitElement {
   private renderSheet(columns: TableColumn[]) {
     return html`
       <div class="ds-table-scroll" part="scroll" @pointerdown=${this.press} @touchmove=${{ handleEvent: this.holdTouch, passive: false }} @contextmenu=${this.holdMenu}>
-        <table class="ds-table" part="table" data-sheet ?data-reorderable=${this.reorderable} style=${`--ds-table-columns: ${columns.length}`} aria-label=${this.label ?? nothing}>
+        <table class="ds-table" part="table" data-sheet data-fit ?data-reorderable=${this.reorderable} style=${`--ds-table-columns: ${columns.length}`} aria-label=${this.label ?? nothing}>
           <thead>
             <tr class="ds-table__letters" aria-hidden="true"><td class="ds-table__number"></td>${columns.map((_, index) => html`<td>${columnLetter(index)}</td>`)}</tr>
-            <tr><td class="ds-table__number"></td>${columns.map(column => html`<th scope="col" ?data-numeric=${column.numeric}>${column.label}</th>`)}</tr>
+            <tr><td class="ds-table__number"></td>${columns.map(column => html`<th scope="col" ?data-numeric=${column.numeric}><span class="ds-table__words">${column.label}</span></th>`)}</tr>
           </thead>
           <tbody>${this.data.map((row, index) => this.sheetRow(row, columns, String(index + 1), index))}</tbody>
           ${this.footer ? html`<tfoot>${this.sheetRow(this.footer, columns, "")}</tfoot>` : nothing}

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/DS1/x-icon/warning.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8ZM7.5 6.3H8.5V10.3H7.5V6.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z" fill="#1E1E1E"/>
+<path d="M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z" fill="currentColor"/>
 </svg>

package/dist/0-face/generated/toast-assets.js

@@ -10,5 +10,5 @@ export const toastIcons = {
     "check": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.68649 11.884L12.443 6.13601L11.736 5.42715L6.68835 10.4827L4.26399 8.0501L3.55696 8.74525L6.68649 11.884Z\" fill=\"currentColor\"/>\n</svg>\n",
     "close": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.1215 4.58087L8.70453 7.99397L12.1176 11.4169L11.4106 12.112L7.99847 8.69108L4.58636 12.112L3.87836 11.4031L7.29535 7.99005L3.88226 4.56716L4.58929 3.87201L8.0014 7.29294L11.4145 3.87201L12.1215 4.58087Z\" fill=\"currentColor\"/>\n</svg>\n",
     "notifications": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.5 11.5V7.5C4.5 5.567 6.067 4 8 4C9.933 4 11.5 5.567 11.5 7.5V11.5M3 11.5H13M8 2.5V4M6.5 13.5H9.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>\n",
-    "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8ZM7.5 6.3H8.5V10.3H7.5V6.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"#1E1E1E\"/>\n</svg>\n",
+    "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"currentColor\"/>\n</svg>\n",
 };

package/dist/2-core/ds-tooltip.d.ts

@@ -38,6 +38,12 @@ export declare class Tooltip extends LitElement {
     private releaseDescription;
     private describe;
     updated(): void;
+    /**
+     * Keeps the bubble inside the window, as the page's tooltips do (0-face/tooltips.ts): four
+     * pixels from its edges, and below the control when there is no room above (or above when
+     * `placement="bottom"` has no room below). A tooltip at a frame's edge is never cut short.
+     */
+    private place;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {