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

package/DS1/0-face/translations/en.json

@@ -30,6 +30,10 @@
     "Light": "Light",
     "Dark": "Dark",
     "System": "System",
+    "Shape": "Shape",
+    "Square": "Square",
+    "Rounded": "Rounded",
+    "Circular": "Circular",
     "Note": "Note",
     "Page": "Page",
     "Red": "Red",
@@ -124,6 +128,11 @@
     "Total": "Total",
     "End date": "End date",
     "Include time": "Include time",
-    "Time": "Time"
+    "Time": "Time",
+    "Day": "Day",
+    "Week": "Week",
+    "Month": "Month",
+    "Swimlane": "Swimlane",
+    "View": "View"
   }
 }

package/DS1/0-face/translations/es.json

@@ -30,6 +30,10 @@
     "Light": "Claro",
     "Dark": "Oscuro",
     "System": "Sistema",
+    "Shape": "Forma",
+    "Square": "Cuadrada",
+    "Rounded": "Redondeada",
+    "Circular": "Circular",
     "Note": "Nota",
     "Page": "Página",
     "Red": "Rojo",
@@ -124,6 +128,11 @@
     "Total": "Total",
     "End date": "Fecha de fin",
     "Include time": "Incluir hora",
-    "Time": "Hora"
+    "Time": "Hora",
+    "Day": "Día",
+    "Week": "Semana",
+    "Month": "Mes",
+    "Swimlane": "Carriles",
+    "View": "Vista"
   }
 }

package/DS1/0-face/translations/fi.json

@@ -30,6 +30,10 @@
     "Light": "Vaalea",
     "Dark": "Tumma",
     "System": "Järjestelmä",
+    "Shape": "Muoto",
+    "Square": "Kulmikas",
+    "Rounded": "Pyöristetty",
+    "Circular": "Pyöreä",
     "Note": "Muistiinpano",
     "Page": "Sivu",
     "Red": "Punainen",
@@ -124,6 +128,11 @@
     "Total": "Yhteensä",
     "End date": "Päättymispäivä",
     "Include time": "Sisällytä kellonaika",
-    "Time": "Kellonaika"
+    "Time": "Kellonaika",
+    "Day": "Päivä",
+    "Week": "Viikko",
+    "Month": "Kuukausi",
+    "Swimlane": "Kaistat",
+    "View": "Näkymä"
   }
 }

package/DS1/0-face/translations/fr.json

@@ -30,6 +30,10 @@
     "Light": "Clair",
     "Dark": "Sombre",
     "System": "Système",
+    "Shape": "Forme",
+    "Square": "Carrée",
+    "Rounded": "Arrondie",
+    "Circular": "Circulaire",
     "Note": "Note",
     "Page": "Page",
     "Red": "Rouge",
@@ -124,6 +128,11 @@
     "Total": "Total",
     "End date": "Date de fin",
     "Include time": "Inclure l’heure",
-    "Time": "Heure"
+    "Time": "Heure",
+    "Day": "Jour",
+    "Week": "Semaine",
+    "Month": "Mois",
+    "Swimlane": "Couloirs",
+    "View": "Vue"
   }
 }

package/DS1/0-face/translations/is.json

@@ -30,6 +30,10 @@
     "Light": "Ljóst",
     "Dark": "Dökkt",
     "System": "Kerfi",
+    "Shape": "Lögun",
+    "Square": "Ferhyrnt",
+    "Rounded": "Ávalt",
+    "Circular": "Hringlaga",
     "Page": "Síða",
     "Red": "Rauður",
     "Orange": "Appelsínugulur",
@@ -117,6 +121,11 @@
     "Total": "Samtals",
     "End date": "Lokadagur",
     "Include time": "Taka með tíma",
-    "Time": "Tími"
+    "Time": "Tími",
+    "Day": "Dagur",
+    "Week": "Vika",
+    "Month": "Mánuður",
+    "Swimlane": "Brautir",
+    "View": "Yfirlit"
   }
 }

package/DS1/0-face/translations/it.json

@@ -30,6 +30,10 @@
     "Light": "Chiaro",
     "Dark": "Scuro",
     "System": "Sistema",
+    "Shape": "Forma",
+    "Square": "Quadrata",
+    "Rounded": "Arrotondata",
+    "Circular": "Circolare",
     "Note": "Nota",
     "Page": "Pagina",
     "Red": "Rosso",
@@ -124,6 +128,11 @@
     "Total": "Totale",
     "End date": "Data di fine",
     "Include time": "Includi ora",
-    "Time": "Ora"
+    "Time": "Ora",
+    "Day": "Giorno",
+    "Week": "Settimana",
+    "Month": "Mese",
+    "Swimlane": "Corsie",
+    "View": "Vista"
   }
 }

package/DS1/0-face/translations/ja.json

@@ -30,6 +30,10 @@
     "Light": "ライト",
     "Dark": "ダーク",
     "System": "システム",
+    "Shape": "形状",
+    "Square": "角型",
+    "Rounded": "角丸",
+    "Circular": "円形",
     "Note": "メモ",
     "Page": "ページ",
     "Red": "赤",
@@ -124,6 +128,11 @@
     "Total": "合計",
     "End date": "終了日",
     "Include time": "時刻を含める",
-    "Time": "時刻"
+    "Time": "時刻",
+    "Day": "日",
+    "Week": "週",
+    "Month": "月",
+    "Swimlane": "スイムレーン",
+    "View": "表示"
   }
 }

package/DS1/0-face/translations/ko.json

@@ -30,6 +30,10 @@
     "Light": "라이트",
     "Dark": "다크",
     "System": "시스템",
+    "Shape": "모양",
+    "Square": "사각형",
+    "Rounded": "둥근 모서리",
+    "Circular": "원형",
     "Note": "메모",
     "Page": "페이지",
     "Red": "빨강",
@@ -124,6 +128,11 @@
     "Total": "합계",
     "End date": "종료일",
     "Include time": "시간 포함",
-    "Time": "시간"
+    "Time": "시간",
+    "Day": "일",
+    "Week": "주",
+    "Month": "월",
+    "Swimlane": "스윔레인",
+    "View": "보기"
   }
 }

package/DS1/0-face/translations/nb.json

@@ -30,6 +30,10 @@
     "Light": "Lys",
     "Dark": "Mørk",
     "System": "System",
+    "Shape": "Form",
+    "Square": "Firkantet",
+    "Rounded": "Avrundet",
+    "Circular": "Sirkulær",
     "Note": "Notat",
     "Page": "Side",
     "Red": "Rød",
@@ -124,6 +128,11 @@
     "Total": "Totalt",
     "End date": "Sluttdato",
     "Include time": "Ta med klokkeslett",
-    "Time": "Klokkeslett"
+    "Time": "Klokkeslett",
+    "Day": "Dag",
+    "Week": "Uke",
+    "Month": "Måned",
+    "Swimlane": "Baner",
+    "View": "Visning"
   }
 }

package/DS1/0-face/translations/pt-BR.json

@@ -30,6 +30,10 @@
     "Light": "Claro",
     "Dark": "Escuro",
     "System": "Sistema",
+    "Shape": "Formato",
+    "Square": "Quadrado",
+    "Rounded": "Arredondado",
+    "Circular": "Circular",
     "Note": "Nota",
     "Page": "Página",
     "Red": "Vermelho",
@@ -124,6 +128,11 @@
     "Total": "Total",
     "End date": "Data de término",
     "Include time": "Incluir horário",
-    "Time": "Horário"
+    "Time": "Horário",
+    "Day": "Dia",
+    "Week": "Semana",
+    "Month": "Mês",
+    "Swimlane": "Raias",
+    "View": "Visualização"
   }
 }

package/DS1/0-face/translations/pt.json

@@ -30,6 +30,10 @@
     "Light": "Claro",
     "Dark": "Escuro",
     "System": "Sistema",
+    "Shape": "Forma",
+    "Square": "Quadrada",
+    "Rounded": "Arredondada",
+    "Circular": "Circular",
     "Note": "Nota",
     "Page": "Página",
     "Red": "Vermelho",
@@ -124,6 +128,11 @@
     "Total": "Total",
     "End date": "Data de fim",
     "Include time": "Incluir hora",
-    "Time": "Hora"
+    "Time": "Hora",
+    "Day": "Dia",
+    "Week": "Semana",
+    "Month": "Mês",
+    "Swimlane": "Raias",
+    "View": "Vista"
   }
 }

package/DS1/0-face/translations/sv.json

@@ -30,6 +30,10 @@
     "Light": "Ljust",
     "Dark": "Mörkt",
     "System": "System",
+    "Shape": "Form",
+    "Square": "Fyrkantig",
+    "Rounded": "Rundad",
+    "Circular": "Cirkulär",
     "Note": "Anteckning",
     "Page": "Sida",
     "Red": "Röd",
@@ -124,6 +128,11 @@
     "Total": "Totalt",
     "End date": "Slutdatum",
     "Include time": "Inkludera tid",
-    "Time": "Tid"
+    "Time": "Tid",
+    "Day": "Dag",
+    "Week": "Vecka",
+    "Month": "Månad",
+    "Swimlane": "Banor",
+    "View": "Vy"
   }
 }

package/DS1/0-face/translations/zh.json

@@ -30,6 +30,10 @@
     "Light": "浅色",
     "Dark": "深色",
     "System": "跟随系统",
+    "Shape": "形状",
+    "Square": "方形",
+    "Rounded": "圆角",
+    "Circular": "圆形",
     "Note": "笔记",
     "Page": "页面",
     "Red": "红色",
@@ -124,6 +128,11 @@
     "Total": "合计",
     "End date": "结束日期",
     "Include time": "包含时间",
-    "Time": "时间"
+    "Time": "时间",
+    "Day": "日",
+    "Week": "周",
+    "Month": "月",
+    "Swimlane": "泳道",
+    "View": "视图"
   }
 }

package/DS1/0-face/word-wrap.ts

@@ -0,0 +1,113 @@
+import type { Finding } from './constraints';
+
+const selector = 'h1,h2,h3,h4,h5,h6,th,[role="heading"],[role="columnheader"],[role="rowheader"],ds-text[size="heading"],ds-text[size="display"],.ds-text--heading,.ds-text--display';
+const styleOf = (element: Element) => element.ownerDocument.defaultView!.getComputedStyle(element);
+const parentOf = (node: Node): Element | null => (node as Element).assignedSlot
+  ?? node.parentElement ?? ((node.getRootNode() as ShadowRoot).host || null);
+
+function children(node: Node): Node[] {
+  if (node.nodeType === 1) {
+    const element = node as Element;
+    if (element.localName === 'slot') {
+      const assigned = (element as HTMLSlotElement).assignedNodes({ flatten: true });
+      if (assigned.length) return assigned;
+    }
+    if (element.shadowRoot) return Array.from(element.shadowRoot.childNodes);
+  }
+  return Array.from(node.childNodes);
+}
+
+/** Headings in the rendered tree, including native table headers, slots and open shadow roots. */
+export function wordHeaders(root: ParentNode): Element[] {
+  const headers: Element[] = [];
+  function visit(node: Node, inHeader = false) {
+    if (node.nodeType === 1) {
+      const element = node as Element;
+      const style = styleOf(element);
+      if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) return;
+      if (element.matches(selector) && !inHeader) {
+        headers.push(element);
+        inHeader = true;
+      }
+    }
+    for (const child of children(node)) visit(child, inHeader);
+  }
+  visit(root as Node);
+  return headers;
+}
+
+function languageOf(element: Element): string {
+  for (let current: Element | null = element; current; current = parentOf(current)) {
+    if (current.hasAttribute('lang')) return current.getAttribute('lang') ?? '';
+  }
+  return '';
+}
+
+type Letter = { node: Text; offset: number; element: Element };
+
+/** Measure actual line breaks, not merely a CSS declaration that might never break a word. */
+export function inspectWordWrap(root: ParentNode): Finding[] {
+  const findings: Finding[] = [];
+  for (const header of wordHeaders(root)) {
+    let text = '';
+    const letters: Letter[] = [];
+    function collect(node: Node) {
+      if (node.nodeType === 3) {
+        const element = parentOf(node);
+        if (!element) return;
+        for (let offset = 0; offset < (node.nodeValue?.length ?? 0); offset++) {
+          text += node.nodeValue![offset];
+          letters.push({ node: node as Text, offset, element });
+        }
+      } else {
+        if (node.nodeType === 1) {
+          const style = styleOf(node as Element);
+          if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) return;
+        }
+        for (const child of children(node)) collect(child);
+      }
+    }
+    collect(header);
+    // These alphabetic scripts break at words. CJK and scripts with dictionary-based line
+    // breaking retain their native typesetting rules instead of being treated as long words.
+    const words = text.matchAll(/[\p{Script=Latin}\p{Script=Greek}\p{Script=Cyrillic}\p{Script=Arabic}\p{Script=Hebrew}\p{M}\u00ad]+/gu);
+    for (const match of words) {
+      const word = match[0];
+      const start = match.index!;
+      let previous: { box: DOMRect; letter: Letter; index: number } | undefined;
+      let broken = false;
+      for (let index = start; index < start + word.length; index++) {
+        if (text[index] === '\u00ad') continue;
+        const letter = letters[index]!;
+        const range = header.ownerDocument.createRange();
+        range.setStart(letter.node, letter.offset);
+        range.setEnd(letter.node, letter.offset + 1);
+        const box = Array.from(range.getClientRects()).filter(rect => rect.width > 0 && rect.height > 0).pop();
+        if (!box) continue;
+        const style = styleOf(letter.element);
+        const vertical = style.writingMode.startsWith('vertical');
+        const overlap = previous && (vertical
+          ? Math.min(box.right, previous.box.right) - Math.max(box.left, previous.box.left)
+          : Math.min(box.bottom, previous.box.bottom) - Math.max(box.top, previous.box.top));
+        if (previous && overlap! <= 1) {
+          const previousStyle = styleOf(previous.letter.element);
+          const hyphens = style.hyphens || style.getPropertyValue('-webkit-hyphens');
+          const manual = text.slice(previous.index + 1, index).includes('\u00ad') && hyphens !== 'none';
+          // Auto hyphenation is an engine/language decision. Never excuse emergency wrapping
+          // or an explicit line break just because hyphens:auto happens to be inherited.
+          const automatic = hyphens === 'auto' && languageOf(letter.element) !== ''
+            && letter.node === previous.letter.node
+            && [style, previousStyle].every(s => !['break-all', 'break-word'].includes(s.wordBreak)
+              && !['anywhere', 'break-word'].includes(s.overflowWrap));
+          if (!manual && !automatic) { broken = true; break; }
+        }
+        previous = { box, letter, index };
+      }
+      if (broken) {
+        findings.push({ element: header, message: `“${word.replace(/\u00ad/g, '')}” breaks inside a word without a typesetting hyphen; give the header room, wrap between words, or hyphenate a long word at a valid language-specific point.` });
+        break;
+      }
+    }
+  }
+  return findings;
+}

package/DS1/1-root/card.css

@@ -22,7 +22,8 @@
  *   ds-card__label               its name, muted, on one square
  *   ds-card__title               the title, display size, a square and a half a line
  *   ds-card__body                writing, one square a line
- *   ds-card__media               the picture, a square below the words
+ *   ds-card__media               the picture, on the card's foot and a square below the words at
+ *                                least, so pictures side by side line up; square where it meets the card
  *   ds-card__media--center       standing in the card's middle
  *   ds-card__media--bleed        running on past the padding to the end edge
  *
@@ -36,6 +37,7 @@
   --ds-card-ink: var(--ds-text-color);
   --ds-card-muted: var(--ds-text-color-muted);
   --ds-card-padding: var(--ds-unit);
+  --ds-card-text-padding: max(var(--ds-card-padding), var(--ds-card-text-inset-min, 0px));
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -47,10 +49,10 @@
   margin: 0;
   /* In a squares bento the surface reaches a quarter square towards its neighbours (`--ds-bento-inset-*`, 0 elsewhere), and the padding grows by as much so what it holds stays on the squares. */
   padding:
-    calc(var(--ds-card-padding) + var(--ds-bento-inset-top, 0px))
-    calc(var(--ds-card-padding) + var(--ds-bento-inset-end, 0px))
+    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-top, 0px))
+    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px))
     var(--ds-bento-inset-bottom, 0px)
-    calc(var(--ds-card-padding) + var(--ds-bento-inset-start, 0px));
+    calc(var(--ds-card-text-padding) + var(--ds-bento-inset-start, 0px));
   overflow: hidden;
   border-radius: var(--ds-radius-card);
   background: var(--ds-card-fill);
@@ -61,6 +63,11 @@
   -webkit-tap-highlight-color: transparent;
 }
 
+/* Opt-in safe text inset; media still stands on the card's foot. */
+.ds-card:not(:has(> .ds-card__media:not([hidden]))) {
+  padding-block-end: max(var(--ds-card-text-inset-min, 0px), var(--ds-bento-inset-bottom, 0px));
+}
+
 .ds-card[hidden] {
   display: none;
 }
@@ -88,6 +95,12 @@
 .ds-card[data-tone="red-for-blood"] { --ds-card-fill: var(--one-red-for-blood-pastel); }
 .ds-card[data-tone="dark-red-variant"] { --ds-card-fill: var(--one-dark-red-variant-pastel); }
 .ds-card[data-tone="signal-red"] { --ds-card-fill: var(--one-signal-red-pastel); }
+/* On a pastel fill the muted grey falls under 4.5:1 (color.text-contrast): the muted ink is the card's ink let
+   into its fill instead, 5:1 or more on every pastel. */
+.ds-card[data-tone]:not([data-tone="ink"]) {
+  --ds-card-muted: color-mix(in srgb, var(--ds-card-ink) 72%, var(--ds-card-fill));
+}
+
 .ds-card[data-tone="ink"] {
   --ds-card-fill: var(--ds-black);
   --ds-card-ink: var(--ds-white);
@@ -104,7 +117,7 @@
 }
 
 .ds-card__label {
-  margin: 0;
+  margin: 0 0 var(--ds-card-label-gap, 0px);
   padding-top: calc(4px * var(--ds-sf, 1));
   color: var(--ds-card-muted);
   font: inherit;
@@ -112,7 +125,7 @@
 }
 
 .ds-card__title {
-  margin: 0;
+  margin: 0 0 var(--ds-card-title-gap, 0px);
   color: var(--ds-card-ink);
   font-family: var(--ds-typeface-medium);
   font-size: var(--ds-type-size-display);
@@ -128,22 +141,45 @@
   line-height: var(--ds-unit);
 }
 
+/* The picture stands on the card's foot, a square below the words at least: in a card taller than
+   its words the room goes above the picture, so the pictures of cards side by side (stretched to one
+   height by their row) stand on one level. */
 .ds-card__media {
   display: flex;
   flex: none;
   align-items: flex-start;
   justify-content: flex-start;
   min-width: 0;
-  margin-top: var(--ds-unit);
+  margin-top: auto;
+  padding-top: var(--ds-unit);
+}
+
+/* A picture has no corners of its own where it meets the card: on the foot the card's edge cuts it
+   square. Only a corner standing free inside the card, towards the words, keeps a picture's corner. */
+.ds-card .ds-card__media > :is(img, picture, video, canvas, svg) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .ds-card__media--center {
   justify-content: center;
-  margin-inline: calc(-1 * var(--ds-card-padding));
+  margin-inline: calc(-1 * var(--ds-card-text-padding));
 }
 
+/* A picture that bleeds runs on to the end edge and stands on the foot, the space a taller card
+   leaves going above it (or, taller than its room, it starts below the words and the foot cuts it).
+   It has no corners of its own: the card's edges cut it square, and its corner towards the words
+   is square too, a picture or square never rounded where it meets the card. */
 .ds-card__media--bleed {
-  margin-inline-end: calc(-1 * var(--ds-card-padding));
+  flex: 1 0 auto;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: safe flex-end;
+  margin-inline-end: calc(-1 * (var(--ds-card-text-padding) + var(--ds-bento-inset-end, 0px)));
+  margin-block-end: calc(-1 * var(--ds-bento-inset-bottom, 0px));
+  --ds-radius: 0px;
+  --ds-image-end-radius: 0px;
+  --ds-image-foot-radius: 0px;
 }
 
 .ds-card__media > * {
@@ -184,14 +220,5 @@ a.ds-card:active::after,
   background: color-mix(in srgb, var(--ds-card-ink) 8%, transparent);
 }
 
-@media (hover: hover) and (prefers-reduced-motion: no-preference) {
-  a.ds-card > .ds-card__media,
-  .ds-card[data-interactive] > .ds-card__media {
-    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
-  }
-
-  a.ds-card:hover > .ds-card__media,
-  .ds-card[data-interactive]:hover > .ds-card__media {
-    transform: translateY(calc(-0.25 * var(--ds-unit)));
-  }
-}
+/* Optional spacing before a slotted footer tag; zero preserves the normal card. */
+.ds-card__body ::slotted(ds-tag) { margin-block-start: var(--ds-card-footer-gap, 0px); }

package/DS1/1-root/carousel.css

@@ -64,6 +64,13 @@
   display: none;
 }
 
+/* A mouse dragging the strip (0-face/carousel.ts dragTrack): no snapping until it lets go, and no words selected on the way. */
+.ds-carousel__track[data-dragging] {
+  scroll-snap-type: none;
+  cursor: grabbing;
+  user-select: none;
+}
+
 /* Slides of their own width, several in view. */
 .ds-carousel[data-slides="auto"] > .ds-carousel__track {
   grid-auto-columns: max-content;

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.28 */
+/* version 0.3.1 */
 
 /* 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/component-tokens.css

@@ -79,7 +79,8 @@
   --ds-paper: light-dark(#f4f4f4, #2c2c2c);
   --ds-text-color: light-dark(var(--ds-black), var(--ds-white));
   --ds-text-color-muted: light-dark(#5f5f5f, #cacaca);
-  --ds-title-color: light-dark(var(--ds-grey), #9a9a9a);
+  /* 5.1:1 on paper and 4.6:1 on the fill; the palette grey (#797979) reaches only 4.35:1 (color.text-contrast). */
+  --ds-title-color: light-dark(#6e6e6e, #9a9a9a);
   /* Text that reports a failure or warns of a loss. Red for blood on light
      paper and Tuned red on dark: both palette colours, legible as 14px text. */
   --ds-danger-color: light-dark(var(--ds-red-for-blood), var(--ds-tuned-red));
@@ -113,7 +114,7 @@
   /* Shared fields, including the row treatment of a form's settings rows. */
   --ds-input-background: light-dark(#e8e8e8, #303030);
   --ds-input-color: light-dark(#2a2a2a, #f5f5f5);
-  --ds-input-placeholder-color: light-dark(#797979, #ababab);
+  --ds-input-placeholder-color: var(--ds-text-color-muted);
   --ds-input-disabled-color: light-dark(#555555, #d0d0d0);
   --ds-input-reveal-color: light-dark(#1e1e1e, #f5f5f5);
 }