@0001-labs/design-system-1 0.3.0 → 0.3.2

package/DS1/1-root/fonts/Inter-LICENSE.md

@@ -2,6 +2,95 @@
 
 `Inter-Arrows.woff2` is Inter Regular 4.1, cut down to its arrows (U+2190–21FF, U+27F0–27FF, U+2900–297F, U+2B00–2BFF). It is loaded as "Inter Arrows" and leads every typeface token, so an arrow is drawn in Inter whatever the text around it is set in.
 
-Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter).
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
 
-This font software is licensed under the SIL Open Font License, Version 1.1, available with a FAQ at https://openfontlicense.org.
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0 */
+/* version 0.3.2 */
 
 /* 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
@@ -31,16 +31,17 @@
   font-display: swap;
 }
 
-/* Arrows are always Inter: its arrows alone (fonts/Inter-LICENSE.md), first in
-   every typeface token, so the unicode-range draws only arrows with it. */
+/* inter-arrows:start — generated by scripts/fonts/embed-arrows.mjs */
+/* Inter 4.1, SIL Open Font License 1.1; see fonts/Inter-LICENSE.md. */
 @font-face {
   font-family: "Inter Arrows";
-  src: url("./fonts/Inter-Arrows.woff2") format("woff2");
+  src: url("data:font/woff2;base64,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") format("woff2"), url("./fonts/Inter-Arrows.woff2") format("woff2");
   unicode-range: U+2190-21FF, U+27F0-27FF, U+2900-297F, U+2B00-2BFF;
   font-weight: 100 900;
   font-style: normal;
   font-display: swap;
 }
+/* inter-arrows:end */
 
 /* The code font: Iosevka Extended, subset for code (fonts/Iosevka-LICENSE.md). */
 @font-face {

package/DS1/1-root/footer.css

@@ -51,7 +51,7 @@
   padding: calc(2 * var(--ds-unit)) var(--ds-unit) var(--ds-unit);
   box-shadow: inset 0 1px var(--ds-footer-line, var(--ds-border-color));
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
@@ -81,7 +81,7 @@
   align-self: flex-start;
   height: var(--ds-unit);
   color: inherit;
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
   text-decoration: none;
 }

package/DS1/1-root/header.css

@@ -39,7 +39,7 @@
   margin: 0;
   padding: var(--ds-unit);
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
@@ -51,7 +51,8 @@
 .ds-header--sticky {
   position: sticky;
   top: 0;
-  z-index: 1;
+  /* Above a section's own layers (a panel laid over a picture stands at 1), so the header is never covered as the page scrolls. */
+  z-index: 2;
   background: var(--ds-header-paper, var(--background, Canvas));
   box-shadow: inset 0 -1px var(--ds-header-line, transparent);
 }
@@ -67,7 +68,7 @@
   gap: calc(var(--ds-unit) / 2);
   height: var(--ds-unit);
   color: inherit;
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
   text-decoration: none;
   white-space: nowrap;
@@ -181,6 +182,6 @@
 }
 .ds-header--app .ds-header__brand {
   min-width: 0;
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-weight: var(--ds-type-weight-default);
 }

package/DS1/1-root/inter-arrows.css

@@ -0,0 +1,11 @@
+/* inter-arrows:start — generated by scripts/fonts/embed-arrows.mjs */
+/* Inter 4.1, SIL Open Font License 1.1; see fonts/Inter-LICENSE.md. */
+@font-face {
+  font-family: "Inter Arrows";
+  src: url("data:font/woff2;base64,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") format("woff2");
+  unicode-range: U+2190-21FF, U+27F0-27FF, U+2900-297F, U+2B00-2BFF;
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+/* inter-arrows:end */

package/DS1/1-root/notice.css

@@ -47,7 +47,7 @@
   align-items: start;
   margin: 0;
   color: var(--ds-notice-ink);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
@@ -108,7 +108,7 @@
 }
 
 .ds-notice__title {
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
 }
 

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0 */
+/* version 0.3.2 */
 
 @import "./grid.css";
 @import "./component-tokens.css";
@@ -191,7 +191,7 @@ body {
   background: transparent;
   color: var(--button-text-color);
   cursor: pointer;
-  font-family: var(--typeface-regular);
+  font-family: "Inter Arrows", var(--typeface-regular);
   font-size: var(--type-size-default);
   line-height: var(--type-lineheight-default);
   letter-spacing: var(--type-letterspacing-default);
@@ -239,14 +239,15 @@ body {
   padding: 0 calc(2px * var(--sf));
   background: var(--button-background-color-secondary);
   color: var(--button-text-color-secondary);
-  font-family: var(--typeface-regular);
+  font-family: "Inter Arrows", var(--typeface-regular);
   font-size: var(--type-size-default);
   line-height: var(--type-lineheight-default);
   letter-spacing: var(--type-letterspacing-default);
 }
 
 .ds-input::placeholder {
-  color: var(--ds-input-placeholder-color, var(--ds-text-color-muted));
+  /* one.css is copied on its own, without component-tokens.css: the fallback is that file's muted ink. */
+  color: var(--ds-input-placeholder-color, var(--ds-text-color-muted, light-dark(#5f5f5f, #cacaca)));
 }
 
 .ds-card {

package/DS1/1-root/progress.css

@@ -133,7 +133,7 @@
   padding: 0;
   list-style: none;
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
@@ -225,7 +225,7 @@
   box-shadow: inset 0 0 0 1px var(--ds-progress-mark-line);
   color: var(--ds-progress-mark-ink);
   --ds-icon-color: var(--ds-progress-mark-ink);
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-size: var(--ds-type-size-small);
   font-weight: var(--ds-type-weight-bold);
   font-variant-numeric: tabular-nums;
@@ -250,7 +250,7 @@
 }
 
 .ds-progress__step--current .ds-progress__label {
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
 }
 

package/DS1/1-root/prose.css

@@ -27,7 +27,7 @@
 
 [data-ds-prose] {
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
@@ -59,7 +59,7 @@
 
 [data-ds-prose] :where(h1, h2, h3, h4, h5, h6):not(:where([data-ds-not-prose] *)) {
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-bold);
   line-height: var(--ds-unit);
@@ -92,7 +92,7 @@
 }
 
 [data-ds-prose] :where(dt):not(:where([data-ds-not-prose] *)) {
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
 }
 
@@ -115,7 +115,7 @@
 }
 
 [data-ds-prose] :where(strong, b, th):not(:where([data-ds-not-prose] *)) {
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
 }
 
@@ -133,7 +133,7 @@
 /* Code: thirteen on the same one-square lines, in the code face. */
 
 [data-ds-prose] :where(code, kbd, samp, pre):not(:where([data-ds-not-prose] *)) {
-  font-family: var(--ds-typeface-mono);
+  font-family: "Inter Arrows", var(--ds-typeface-mono);
   font-size: calc(var(--ds-code-text-size, 13px) * var(--ds-sf, 1));
   line-height: var(--ds-unit);
   letter-spacing: 0;

package/DS1/1-root/row.css

@@ -283,7 +283,7 @@ button.ds-row[aria-disabled="true"]:hover::after {
   padding: 0;
   list-style: none;
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);

package/DS1/1-root/table.css

@@ -60,7 +60,7 @@
   border-collapse: collapse;
   border-spacing: 0;
   color: var(--ds-text-color, inherit);
-  font-family: var(--ds-typeface-regular, inherit);
+  font-family: "Inter Arrows", var(--ds-typeface-regular, inherit);
   font-feature-settings: var(--ds-font-features, normal);
   font-size: var(--ds-type-size-default, 14px);
   letter-spacing: var(--ds-type-letterspacing-default, normal);

package/DS1/1-root/text.css

@@ -30,7 +30,7 @@
 
 body {
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-size: var(--ds-type-size-default);
   line-height: var(--ds-unit);
   -webkit-font-smoothing: antialiased;
@@ -41,7 +41,7 @@ body {
 .ds-text {
   margin: 0;
   color: var(--ds-text-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);
@@ -61,13 +61,13 @@ body {
 }
 
 .ds-text--heading {
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-size: var(--ds-type-size-heading);
   font-weight: var(--ds-type-weight-bold);
 }
 
 .ds-text--display {
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-size: var(--ds-type-size-display);
   font-weight: var(--ds-type-weight-bold);
   line-height: calc(2 * var(--ds-unit));
@@ -75,7 +75,7 @@ body {
 }
 
 .ds-text--strong {
-  font-family: var(--ds-typeface-medium);
+  font-family: "Inter Arrows", var(--ds-typeface-medium);
   font-weight: var(--ds-type-weight-bold);
 }
 

package/DS1/2-core/chart/chart.css

@@ -1,4 +1,4 @@
- :host { --ds-chart-ink: var(--text-color, #1e1e1e); --ds-chart-muted: var(--ds-title-color, #6e6e6e); --ds-chart-faint: var(--slate-light, #e6e6e6); --ds-chart-up: var(--apple-green, #99ff73); --ds-chart-down: var(--tuned-red, #ff5f5f); --ds-chart-live: var(--ds-chart-up); --ds-chart-line: var(--ds-chart-faint); --ds-chart-fill: var(--ds-chart-faint); --ds-chart-small: calc(var(--ds-chart-unit, 20px) / 2); font-family: var(--ds-chart-font, var(--typeface-regular, sans-serif)); }
+ :host { --ds-chart-ink: var(--text-color, #1e1e1e); --ds-chart-muted: var(--ds-title-color, #6e6e6e); --ds-chart-faint: var(--slate-light, #e6e6e6); --ds-chart-up: var(--apple-green, #99ff73); --ds-chart-down: var(--tuned-red, #ff5f5f); --ds-chart-live: var(--ds-chart-up); --ds-chart-line: var(--ds-chart-faint); --ds-chart-fill: var(--ds-chart-faint); --ds-chart-small: calc(var(--ds-chart-unit, 20px) / 2); font-family: "Inter Arrows", var(--ds-chart-font, var(--typeface-regular, sans-serif)); }
 :host([hidden]) { display: none !important; }
 * { box-sizing: border-box; }
 :host([data-chart-kind="line"]) {

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

@@ -1,6 +1,7 @@
 import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 import { keyed } from "lit/directives/keyed.js";
+import { contrastRatio, colorReader, composite, type RGBA } from "../0-face/text-contrast";
 import { define } from "../0-face/define";
 import { provideIcons } from "./ds-icon";
 import { avatarIcon } from "./generated/icon-avatar";
@@ -12,9 +13,11 @@ provideIcons({ avatar: avatarIcon });
 
 /** The ink that reads on a fill: black on a light one, white on a dark one. */
 const inkOn = (rgb: number[]) => {
-  const linear = rgb.map((n) => (n <= 0.04045 ? n / 12.92 : ((n + 0.055) / 1.055) ** 2.4));
-  const luminance = linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722;
-  return luminance > 0.22 ? "var(--ds-black)" : "var(--ds-white)";
+  const fill = [...rgb, 1] as RGBA;
+  const white: RGBA = [1, 1, 1, 1], black: RGBA = [42 / 255, 42 / 255, 42 / 255, 1];
+  if (contrastRatio(black, fill) >= 4.5) return "var(--ds-black)";
+  if (contrastRatio(white, fill) >= 4.5) return "var(--ds-white)";
+  return "black";
 };
 
 /** Saved identity colours are hex; their ink must stay legible in either theme. */
@@ -93,6 +96,28 @@ export class Avatar extends LitElement {
     this.fit = "cover";
     this.logo = this.mask = this.outlined = this.pending = this.plain = this.loaded = this.failed = false;
   }
+  private inkObserver?: MutationObserver;
+  private inkFrame = 0;
+  private readonly queueInk = () => {
+    const view = this.ownerDocument.defaultView!;
+    if (!this.inkFrame) this.inkFrame = view.requestAnimationFrame(() => { this.inkFrame = 0; this.resolveInk(); });
+  };
+  connectedCallback() {
+    super.connectedCallback();
+    const view = this.ownerDocument.defaultView!;
+    this.inkObserver = new view.MutationObserver(this.queueInk);
+    // Observe only the painted ancestors, never our own shadow's ink writes.
+    for (let parent: Element | null = this; parent; parent = parent.parentElement ?? (parent.getRootNode() as ShadowRoot).host ?? null) {
+      this.inkObserver.observe(parent, { attributes: true, attributeFilter: ['class', 'style', 'data-theme'] });
+    }
+    view.addEventListener('load', this.queueInk, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(); this.inkObserver?.disconnect();
+    const view = this.ownerDocument.defaultView!;
+    view.cancelAnimationFrame(this.inkFrame); this.inkFrame = 0;
+    view.removeEventListener('load', this.queueInk, true);
+  }
   protected willUpdate(changed: PropertyValues<this>) {
     if (changed.has("src")) {
       this.loaded = false;
@@ -102,7 +127,7 @@ export class Avatar extends LitElement {
   }
   /** A fill named by a variable (`var(--brand-highlight)`) gets its ink once the browser has resolved it. */
   protected updated() {
-    if (this.ink || this.pending || this.plain || !this.color || avatarInk(this.color)) return;
+    if (this.ink || this.pending || this.plain) return;
     this.resolveInk();
   }
   /** Reads the fill as drawn; while the variable is still undefined (its stylesheet on its way), looks again next
@@ -110,9 +135,23 @@ export class Avatar extends LitElement {
   private resolveInk(tries = 0) {
     const frame = this.renderRoot.querySelector<HTMLElement>(".frame");
     if (!frame || !this.isConnected) return;
-    const ink = inkOnResolved(getComputedStyle(frame).backgroundColor);
-    if (ink) { frame.style.color = ink; return; }
-    if (tries < 60) requestAnimationFrame(() => this.resolveInk(tries + 1));
+    if (this.ink || this.pending || this.plain) return;
+    const view = this.ownerDocument.defaultView!;
+    const read = colorReader(this.ownerDocument);
+    let fill = read(view.getComputedStyle(frame).backgroundColor);
+    if (fill && fill[3] > 0) {
+      for (let parent: Element | null = this; parent && fill[3] < 1; parent = parent.parentElement ?? (parent.getRootNode() as ShadowRoot).host ?? null) {
+        const background = read(view.getComputedStyle(parent).backgroundColor);
+        if (background) fill = composite(fill, background);
+      }
+      if (fill[3] < 1) return;
+      const tokens = view.getComputedStyle(this);
+      const black = read(tokens.getPropertyValue('--ds-black').trim()), white = read(tokens.getPropertyValue('--ds-white').trim());
+      const ink = black && contrastRatio(black, fill) >= 4.5 ? 'var(--ds-black)' : white && contrastRatio(white, fill) >= 4.5 ? 'var(--ds-white)' : contrastRatio([0,0,0,1], fill) >= 4.5 ? 'black' : 'white';
+      if (frame.style.color !== ink) frame.style.color = ink;
+      return;
+    }
+    if (tries < 60) this.ownerDocument.defaultView!.requestAnimationFrame(() => this.resolveInk(tries + 1));
     if (tries === 0 && this.ownerDocument.readyState !== "complete") {
       this.ownerDocument.defaultView?.addEventListener("load", () => this.resolveInk(60), { once: true });
     }
@@ -129,7 +168,7 @@ export class Avatar extends LitElement {
         >`;
     return html`<span
       class="frame"
-      style=${styleMap({ backgroundColor: !this.pending && !this.plain ? this.color || undefined : undefined, color: !this.pending ? this.ink || avatarInk(this.color) : undefined })}
+      style=${styleMap({ backgroundColor: !this.pending && !this.plain ? this.color || undefined : undefined, color: !this.pending ? this.ink || (!this.plain ? avatarInk(this.color) : undefined) : undefined })}
       role=${this.label ? "img" : nothing}
       aria-label=${this.label || nothing}
       aria-hidden=${this.label ? nothing : "true"}

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

@@ -6,7 +6,7 @@
 .frame:first-child { opacity: 1; }
 i { display: block; }
 i.ink { background: currentColor; }
-.words { font-family: var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); color: var(--ds-text-color); }
+.words { font-family: "Inter Arrows", var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); color: var(--ds-text-color); }
 /* Eight held poses, 200ms each. No spinner, percentage or synthetic progress. */
 :host([active]) .frame { animation: ds-activity-pose 1600ms linear infinite; }
 @keyframes ds-activity-pose { 0%, 12.49% { opacity: 1; } 12.5%, 100% { opacity: 0; } }

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

@@ -36,7 +36,7 @@
   corner-shape: round;
   background: var(--ds-avatar-background, var(--ds-fill));
   color: var(--ds-avatar-color, var(--ds-text-color));
-  font: var(--ds-type-weight-default) var(--ds-type-size-default)/1 var(--ds-typeface-regular);
+  font: var(--ds-type-weight-default) var(--ds-type-size-default)/1 "Inter Arrows", var(--ds-typeface-regular);
   letter-spacing: normal;
   user-select: none;
   -webkit-user-select: none;

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

@@ -13,7 +13,7 @@
   padding-inline: calc(4px * var(--ds-sf));
   background: var(--ds-badge-background, var(--ds-fill));
   color: var(--ds-badge-color, var(--ds-text-color));
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   line-height: var(--ds-type-lineheight-default);

package/DS1/2-core/styles/ds-button-host.css

@@ -19,7 +19,7 @@
   corner-shape: var(--ds-corner-shape, round) !important;
   background: var(--ds-button-background, transparent) !important;
   color: var(--ds-button-color, var(--ds-button-text-color)) !important;
-  font-family: var(--ds-typeface-regular) !important;
+  font-family: "Inter Arrows", var(--ds-typeface-regular) !important;
   font-feature-settings: var(--ds-font-features) !important;
   font-size: var(--_button-font-size, var(--ds-type-size-default)) !important;
   font-weight: var(--ds-type-weight-default) !important;
@@ -39,7 +39,8 @@
 }
 
 :host([fit][control="slotted"]) ::slotted(:is(button, a)) {
-  width: max-content !important;
+  /* The host hugs on the grid; its visible face must occupy that same box. */
+  width: 100% !important;
   min-width: var(--ds-button-min-width, 0px) !important;
   justify-content: var(--ds-button-align, flex-start) !important;
 }

package/DS1/2-core/styles/ds-button-split.css

@@ -29,7 +29,7 @@
   corner-shape: var(--ds-corner-shape, round);
   background: var(--ds-button-background-color-secondary);
   color: var(--ds-text-color-muted);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);

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

@@ -46,7 +46,8 @@
 }
 :host([fit]) :is(button, a) {
   flex: 0 0 auto;
-  width: max-content;
+  /* Hug sizing belongs to the host, including its grid rounding. */
+  width: 100%;
   min-width: var(--ds-button-min-width, 0px);
   justify-content: var(--ds-button-align, flex-start);
 }
@@ -73,7 +74,7 @@
   cursor: pointer;
   padding: 0;
   color: var(--button-color, var(--button-text-color));
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-size: var(--_button-font-size, var(--ds-type-size-default));
   line-height: var(--ds-type-lineheight-default);
   letter-spacing: var(--ds-type-letterspacing-default);
@@ -109,7 +110,7 @@
   background-color: var(--ds-button-primary-fill, var(--accent-color));
   color: var(--ds-button-primary-text, var(--button-text-color-on-light, var(--black)));
   text-decoration-line: none;
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));
 }
 
@@ -118,7 +119,7 @@
 :is(button, a)[secondary] {
   background-color: var(--ds-button-secondary-fill, var(--button-background-color-secondary));
   color: var(--ds-button-color, var(--ds-button-text-color));
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));
 }
 

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

@@ -9,7 +9,7 @@
   padding: calc(4px * var(--ds-sf)) !important;
   border: 1px solid var(--ds-border-color) !important;
   border-radius: calc(4px * var(--ds-sf)) !important;
-  font-family: var(--ds-typeface-regular) !important;
+  font-family: "Inter Arrows", var(--ds-typeface-regular) !important;
   font-size: var(--ds-type-size-default) !important;
   font-weight: var(--ds-type-weight-default) !important;
   line-height: var(--ds-type-lineheight-default) !important;

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

@@ -8,7 +8,7 @@ img { display: block; width: 100%; max-width: 100%; }
 figcaption {
   margin-top: calc(var(--ds-unit) / 2);
   color: var(--ds-text-color-muted);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   line-height: var(--ds-row-height);

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

@@ -29,7 +29,7 @@
 }
 
 label {
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-size: var(--ds-type-size-default);
   line-height: var(--ds-row-height);
   color: var(--ds-text-color);
@@ -47,7 +47,7 @@ label {
   border: none;
   padding: 0 calc(2px * var(--ds-sf, 1));
   font-size: var(--ds-type-size-default);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   /* The field's ink, whole, before focus too: a dimmed grey at half opacity read at 2:1 (color.text-contrast). */
   color: var(--ds-input-color, #2a2a2a);
   line-height: calc(16px * var(--ds-sf, 1));
@@ -122,7 +122,7 @@ input {
   margin: 0;
   min-width: 0;
   color: var(--ds-danger-color);
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);

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

@@ -28,7 +28,7 @@
   corner-shape: var(--ds-corner-shape, round);
   background: var(--ds-number-background, var(--ds-input-background));
   color: var(--ds-number-color, var(--ds-input-color));
-  font-family: var(--ds-typeface-regular);
+  font-family: "Inter Arrows", var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
   font-weight: var(--ds-type-weight-default);