@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.15

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","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","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","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","bullet","callout","categories","check-alt","code","code-block","color","column","comment","connect","content","default","dictate","divider","equation","exercise","ezo-accordion-chevron","ezo-account-close","ezo-android-screen-archive","ezo-android-screen-calendar","ezo-android-screen-camera","ezo-android-screen-check","ezo-android-screen-compose","ezo-android-screen-globe","ezo-android-screen-lists","ezo-android-screen-shared","ezo-android-screen-stats","ezo-android-screen-store","ezo-android-screen-views","ezo-android-screen-work","ezo-arrow-cursor","ezo-block-accordion","ezo-block-divider","ezo-block-group","ezo-block-image","ezo-block-section","ezo-block-table","ezo-code","ezo-down","ezo-figma-premium-star","ezo-item-button-complete","ezo-item-button-header","ezo-item-button-open","ezo-item-button-reopen","ezo-item-button-star","ezo-item-button-start","ezo-item-button-unheader","ezo-item-button-unstar","ezo-item-star","ezo-left","ezo-logo","ezo-mic","ezo-move-column","ezo-move-row","ezo-navigation-check","ezo-note-back","ezo-note-menu-complete","ezo-note-menu-delete","ezo-note-menu-duplicate","ezo-note-menu-note","ezo-note-menu-page","ezo-note-menu-star","ezo-note-menu-start","ezo-note-menu-stop","ezo-note-more","ezo-note-star","ezo-password-visibility-see","ezo-password-visibility-unsee","ezo-pattern-call-to-action","ezo-play","ezo-premium-star","ezo-setting-1xdots","ezo-setting-1xgrid","ezo-setting-1xlines","ezo-setting-2xdots","ezo-setting-2xgrid","ezo-setting-2xlines","ezo-setting-blank","ezo-store-chevron","ezo-upgrade-close","form","gallery","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","help","help-alt","icon","image","in","indent","italic","item","life","link","list-line","lock-filled","logo-marquee","mention","menu","minimize","minimize-alt","money","navigation-check","note-alt","note-alt-2","note-lines","notifications","numbered","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","play-alt","quote","redo","relationships","rewind","rewind-30","rewind-30-alt","row","school","search-30","see-30","settings","slash","star-alt","star-alt-2","status","status-alt","status-filled","strike","table","templates","text","title","titlestyle","todo","toggle","triangle","underline","undo","ungroup","unhead","unicon","untitle","up-right","warning","work"] 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-receipt","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

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

@@ -1,7 +1,8 @@
 @import "../../1-root/component-metrics.css";
 
 :host {
-  --avatar-size: var(--ds-unit);
+  /* One control high, inside a one-square row. */
+  --avatar-size: var(--ds-control-height);
   --avatar-pair-type-size: var(--ds-type-size-small);
   display: inline-flex;
   position: relative;
@@ -10,9 +11,6 @@
   width: var(--avatar-size);
   height: var(--avatar-size);
 }
-:host([size="compact"]) {
-  --avatar-size: var(--ds-control-height);
-}
 :host([size="large"]) {
   --avatar-size: calc(2 * var(--ds-unit));
   --avatar-pair-type-size: var(--ds-type-size-default);
@@ -43,13 +41,16 @@
   user-select: none;
   -webkit-user-select: none;
 }
+/* An avatar is round unless it is square, with a picture's corners; a logo is
+   a brand mark and keeps the corners of its own drawing. */
 :host([shape="square"]) .frame {
-  border-radius: 0;
+  border-radius: var(--ds-avatar-radius, var(--ds-radius));
+  corner-shape: var(--ds-corner-shape, round);
 }
-:host([shape="rounded"]) .frame {
-  border-radius: var(--ds-radius);
+:host([logo]) .frame {
+  border-radius: 0;
 }
-:host([size="compact"]) .frame {
+:host(:not([size="large"], [size="fill"])) .frame {
   font-size: var(--ds-type-size-small);
 }
 :host([size="large"]) .frame {

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

@@ -181,7 +181,25 @@
 :host([control="slotted"]) {
   /* The native focus ring extends beyond the face; only its text is clipped. */
   overflow: visible;
-  --ds-button-height: var(--ds-row-height);
+  /* The face is one control high, as the host and native faces are. Its box
+     stays one square, as before, with the face at its foot, so the words take
+     the lower sixteen of the square in a row or at the foot of a line and no
+     row around it changes height. */
+  align-items: flex-end;
+  min-height: var(--ds-row-height);
+  vertical-align: bottom;
+  width: var(--ds-button-width, max-content);
+}
+/* An icon's square: the face takes its first sixteen, the spare four above. */
+:host([control="slotted"][icon]) {
+  justify-content: flex-start !important;
+  width: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;
+  height: max(var(--ds-row-height), var(--ds-button-height, var(--ds-control-height))) !important;
+}
+:host([control="slotted"][icon]) ::slotted(:is(button, a)) {
+  width: var(--ds-button-height, var(--ds-control-height)) !important;
+}
+:host([control="slotted"][fixed]) {
   width: var(--ds-button-width, calc(4 * var(--ds-unit)));
 }
 :host([control="slotted"][wide]) {
@@ -193,10 +211,10 @@
 
 :host([control="host"][danger]),
 :host([control="slotted"][danger]) {
-  --ds-button-color: var(--ds-tuned-red);
+  --ds-button-color: var(--ds-danger-color, var(--ds-tuned-red));
 }
 
-:host([control="slotted"][hidden]) { display: none !important; }
+:host([hidden]) { display: none !important; }
 
 /* Native actions in menus, including grouped and nested choices. */
 :host([menu-item]) {
@@ -206,6 +224,11 @@
   --ds-button-align: flex-start;
   --ds-button-padding: 0 calc(4px * var(--ds-sf));
 }
+/* A row-high entry's words and icon stand on the lower sixteen, the spare four above. */
+:host([menu-item][control="host"]),
+:host([menu-item][control="slotted"]) ::slotted(:is(button, a)) {
+  align-items: flex-end !important;
+}
 :host([menu-item]:is(:hover, :focus-within):not([disabled])) {
   --ds-button-background: var(--ds-fill);
 }

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

@@ -0,0 +1,67 @@
+
+
+:host([split]) {
+  display: inline-flex;
+  max-width: none;
+  overflow: visible;
+  flex: none;
+  align-items: stretch;
+  height: var(--ds-control-height);
+  gap: 1px;
+  vertical-align: bottom;
+}
+:host([split][hidden]) { display: none; }
+
+:host([split]) button {
+  appearance: none;
+  width: auto;
+  max-width: none;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--ds-control-height);
+  margin: 0;
+  padding: 0 calc(5px * var(--ds-sf));
+  border: 0;
+  border-radius: 0;
+  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-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-control-height);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+:host([split]) button:first-child {
+  border-start-start-radius: var(--ds-radius);
+  border-end-start-radius: var(--ds-radius);
+}
+:host([split]) button:last-child {
+  border-start-end-radius: var(--ds-radius);
+  border-end-end-radius: var(--ds-radius);
+}
+:host([split]) button[data-icon] { width: var(--ds-control-height); padding: 0; }
+:host([split]) ds-icon { --ds-icon-size: 16px; color: inherit; }
+:host([split]) ds-text { color: inherit; }
+/* Compact numeric views: a single digit is a square; longer values use the
+   shared compressed face and smaller inset. Products supply only the labels. */
+:host([split][compact]) button:not([data-icon], [data-short]) {
+  --ds-typeface-regular: var(--ds-typeface-compressed);
+  padding-inline: calc(3px * var(--ds-sf));
+}
+:host([split][compact]) button[data-short] { width: var(--ds-control-height); padding: 0; }
+:host([split]) button:hover:not(:disabled, [aria-pressed="true"]) { color: var(--ds-text-color); }
+:host([split]) button[aria-pressed="true"] {
+  background: var(--ds-accent-color);
+  color: var(--ds-button-text-color-on-accent);
+  cursor: default;
+}
+:host([split]) button:disabled { cursor: default; opacity: 0.5; }
+:host([split]) button:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }

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

@@ -1,10 +1,14 @@
 /* ds-button.css */
-/* Core button component styles */
+/* Core button component styles. The face is a <button>, or an <a> when the
+   element has an href: both draw alike in every variant and state. */
 
 :host {
   display: inline-flex;
+  /* At the foot of a line, so a 16px face takes the lower sixteen of the square. */
+  vertical-align: bottom;
   min-width: 0;
-  flex: 0 1 auto;
+  flex: 0 0 auto;
+  width: var(--ds-button-width, max-content);
   max-width: 100%;
   /* Clipped along the line only: a word that runs long ends in an ellipsis,
      but the descenders of g, y, p and j hang below the 16-unit box as they
@@ -13,24 +17,27 @@
   overflow-y: visible;
 }
 
-/* Intrinsic chips stay within their row without product shadow-root sheets. */
+/* Label width is standard. Fixed grid widths are explicit layout choices. */
+:host([fixed]) { width: var(--ds-button-width, calc(4 * var(--ds-unit))); }
+:host([wide]) { width: var(--ds-button-width, calc(8 * var(--ds-unit))); }
+/* Keep fit as an explicit intrinsic-width alias for existing consumers. */
 :host([fit]) {
   flex: 0 0 auto;
   width: max-content;
 }
-:host([fit]) button {
+:host([fit]) :is(button, a) {
   flex: 0 0 auto;
   width: max-content;
   min-width: var(--ds-button-min-width, 0px);
   justify-content: var(--ds-button-align, flex-start);
 }
-:host([fit]) button ds-text,
-:host([fit]) button ::slotted(*) {
+:host([fit]) :is(button, a) ds-text,
+:host([fit]) :is(button, a) ::slotted(*) {
   flex: 0 0 auto;
   width: max-content;
 }
 
-button {
+:is(button, a) {
   box-sizing: border-box;
   max-height: var(--ds-control-height);
   height: var(--ds-control-height);
@@ -61,8 +68,8 @@ button {
   text-decoration: none;
 }
 
-button ds-text,
-button ::slotted(*) {
+:is(button, a) ds-text,
+:is(button, a) ::slotted(*) {
   overflow-x: clip;
   overflow-y: visible;
   text-overflow: ellipsis;
@@ -73,7 +80,7 @@ button ::slotted(*) {
   color: inherit;
 }
 
-button[primary] {
+:is(button, a)[primary] {
   background-color: var(--accent-color);
   color: var(--button-text-color-on-light, var(--black));
   text-decoration-line: none;
@@ -81,13 +88,40 @@ button[primary] {
   padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
 }
 
-button[secondary] {
+/* The secondary face's words are the text's ink, as on `.ds-button--secondary`
+   and the host and slotted faces; the grey is the face, not the words. */
+:is(button, a)[secondary] {
   background-color: var(--button-background-color-secondary);
-  color: var(--button-text-color-secondary, var(--black));
+  color: var(--ds-button-color, var(--ds-button-text-color));
   font-family: var(--ds-typeface-regular);
   padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
 }
 
+/* An entry in a menu or a list of options is one row high on this face too,
+   as on the host and slotted faces: the menu's --ds-button-height (one
+   square, or a compact row), its words at the start, padded 4px. */
+:host(:is([menu-item], [role="option"], [role^="menuitem"])) :is(button, a) {
+  /* Its words and icon on the lower sixteen of the row, the spare four above. */
+  align-items: flex-end;
+  height: var(--ds-button-height, var(--ds-row-height));
+  min-height: var(--ds-button-height, var(--ds-row-height));
+  max-height: var(--ds-button-height, var(--ds-row-height));
+  justify-content: var(--ds-button-align, flex-start);
+  padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
+}
+
+/* `danger`: a destructive action's words in the danger colour, on this face
+   as on the host and slotted faces and `.ds-button--danger`. */
+:host([danger]) :is(button, a) {
+  color: var(--ds-danger-color, var(--ds-tuned-red));
+}
+
+/* Disabled, as in the slotted and host modes. A disabled link has no href. */
+:is(button:disabled, a[aria-disabled="true"]) {
+  cursor: default;
+  opacity: 0.5;
+}
+
 .loading {
   opacity: 0.7;
 }
@@ -102,7 +136,7 @@ button[secondary] {
   width: var(--ds-control-height);
   height: var(--ds-control-height);
 }
-:host([icon]) button {
+:host([icon]) :is(button, a) {
   width: var(--ds-control-height);
   padding: 0 !important;
   justify-content: center;
@@ -119,13 +153,13 @@ button[secondary] {
   flex: 0 0 auto;
   width: var(--ds-control-height);
 }
-:host([square]) button {
+:host([square]) :is(button, a) {
   width: var(--ds-control-height);
   padding: 0 !important;
   justify-content: center;
 }
 
 /* A segment gets its outside corners from the enclosing split control. */
-:host([segment]) button {
+:host([segment]) :is(button, a) {
   border-radius: 0 !important;
 }

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

@@ -0,0 +1,34 @@
+/* ds-card.css */
+/* The element places the card; 1-root/card.css draws it. The host takes the
+   card's size, so a card is measured where it stands, in a slide too. */
+
+:host {
+  display: flex;
+  box-sizing: border-box;
+  width: var(--ds-card-width, auto);
+  height: var(--ds-card-height, auto);
+  min-width: 0;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.ds-card {
+  flex: 1;
+  width: auto;
+  height: auto;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+::slotted([slot="media"]) {
+  flex: none;
+}

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

@@ -43,6 +43,19 @@
 ::slotted(textarea:disabled) { opacity: .5 !important; cursor: not-allowed !important; resize: none !important; }
 .mirror { position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; border-color: transparent !important; }
 mark { padding: 0; margin: 0; border: 0; font: inherit; letter-spacing: inherit; color: color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 30%, var(--ds-text-color)); background: transparent; }
+/* A filled highlight: the colour behind the words, which keep the text colour.
+   Half the colour on light paper and under a third on dark keeps every palette
+   colour at 4.5:1 or more against the words, and a pale accent still shows. */
+mark.fill {
+  color: var(--ds-text-color);
+  background: light-dark(
+    color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 50%, transparent),
+    color-mix(in srgb, var(--composer-highlight-color, var(--ds-accent-color)) 30%, transparent)
+  );
+  border-radius: calc(2px * var(--ds-sf));
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
 :host(:not([data-highlighted])) .mirror { display: none; }
 :host([data-highlighted]) ::slotted(textarea) { color: transparent !important; -webkit-text-fill-color: transparent !important; }
 :host(:has(> textarea:disabled)) .mirror { opacity: .5; }

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

@@ -1,5 +1,6 @@
 /* ds-cycle.css */
 /* Cycle component styles for cycling through options */
+@import "../../1-root/component-metrics.css";
 
 :host {
   display: inline-flex;
@@ -9,6 +10,7 @@
   min-width: 0;
   max-width: 100%;
 }
+:host([hidden]) { display: none !important; }
 
 .cycle {
   display: inline-flex;
@@ -16,3 +18,11 @@
   min-width: 0;
   max-width: 100%;
 }
+
+/* Each name is set in its own language's typeface */
+:host([type="language"]) button:lang(ja) {
+  --ds-typeface-regular: var(--typeface-regular-jp, sans-serif);
+}
+:host([type="language"]) button:lang(zh) {
+  --ds-typeface-regular: var(--typeface-regular-zh, sans-serif);
+}

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

@@ -0,0 +1,18 @@
+/* ds-empty.css */
+/* The element only places the block; 1-root/empty.css draws it. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* Slotted words take the block's lines rather than their own margins. */
+::slotted([slot="heading"]),
+::slotted(:not([slot])) {
+  margin: 0;
+}

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

@@ -7,6 +7,7 @@
   width: 100%;
   height: calc(var(--ds-gap-size) * var(--ds-sf) + var(--ds-gap-rows, 1) * var(--ds-gap-row-space, 0px));
 }
+:host([hidden]) { display: none !important; }
 
 :host([size="025"]) {
   --ds-gap-size: var(--ds-025);

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

@@ -11,6 +11,7 @@
   color: var(--ds-icon-color, currentColor);
   background: transparent;
 }
+:host([hidden]) { display: none !important; }
 
 :host([size="small"]) {
   --ds-icon-size: 12px;

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

@@ -91,32 +91,56 @@ input {
   border-color: var(--accent-color, #007aff);
 }
 
+/*
+ * The error stands on one-square lines in the danger colour, as
+ * `.ds-field__error` does. While it shows, every row of the field is at least
+ * one square high and a lower control keeps its place at the top of its row,
+ * so the error starts on the square below the control in every variant.
+ */
+.input-wrapper.has-error {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-rows: minmax(var(--ds-input-control-row, var(--ds-row-height)), auto);
+  align-items: start;
+}
+
 .error-message {
+  margin: 0;
+  min-width: 0;
+  color: var(--ds-danger-color);
   font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
-  line-height: var(--ds-row-height);
-  color: var(--error-color, #ff3b30);
-  margin-top: calc(var(--025) * var(--ds-sf, 1));
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-unit);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+/* A translated error wraps on the same lines as a literal one. */
+.error-message > ds-text {
+  display: block;
 }
 
 :host([required]) label::after {
   content: " *";
-  color: var(--error-color, #ff3b30);
+  color: var(--ds-danger-color);
 }
 
 /* Error state */
 :is(input, textarea).has-error {
-  border-color: var(--error-color, #ff3b30);
+  border-color: var(--ds-danger-color);
 }
 
 :is(input, textarea).has-error:focus {
-  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.2);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-danger-color) 20%, transparent);
 }
 
 /* A field drawn 18px high inside a 20px form row. */
 :host([variant="row"]) {
   box-sizing: border-box;
   padding-top: calc(2px * var(--ds-sf, 1));
+  /* The host's 2px above the 18px field make up its row. */
+  --ds-input-control-row: calc(18px * var(--ds-sf, 1));
 }
 :host([variant="row"]) .input-container,
 :host([variant="row"]) :is(input, textarea) {
@@ -231,3 +255,32 @@ input {
 :host([variant="plain"]) :is(input, textarea).has-reveal {
   padding-inline-end: calc(24px * var(--ds-sf));
 }
+
+/* ---- Multiline ------------------------------------------------------- */
+/* A text area spans whole rows; shared input styles own its field treatment. */
+.row-metric {
+  position: absolute;
+  width: 0;
+  height: var(--ds-row-height);
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+/* Pill-shaped corners would cut into multiline writing. A text area's field
+ * corners stay small independently of the surrounding control preference. */
+:host([variant="field"]) textarea {
+  border-radius: var(--ds-textarea-radius, calc(4px * var(--ds-sf)));
+  corner-shape: var(--ds-textarea-corner-shape, squircle);
+}
+:host([variant]) textarea {
+  height: var(--ds-textarea-height, calc(var(--ds-textarea-rows, 3) * var(--ds-row-height)));
+  min-height: var(--ds-row-height);
+  padding: var(--ds-textarea-padding, calc(4px * var(--ds-sf)));
+  resize: vertical;
+}
+:host([variant="plain"]) textarea {
+  padding: 0;
+}
+:host([auto-grow]) textarea {
+  resize: none;
+}

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

@@ -0,0 +1,32 @@
+/* ds-notice.css */
+/* The element only places the block; 1-root/notice.css draws it and
+   controls.css its dismiss button. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* The banner is placed by the host; its block then fills the host. */
+:host([banner]),
+:host([form="banner"]) {
+  position: absolute;
+  top: 0;
+  inset-inline: 0;
+  z-index: 9999;
+}
+:host([banner]) .ds-notice--banner,
+:host([form="banner"]) .ds-notice--banner {
+  position: static;
+}
+
+/* Slotted words take the notice's lines rather than their own margins. */
+::slotted([slot="heading"]),
+::slotted(:not([slot])) {
+  margin: 0;
+}

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

@@ -0,0 +1,25 @@
+/* ds-progress.css */
+/* The element only places the row; 1-root/progress.css draws it. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([dots]) {
+  display: inline-flex;
+  vertical-align: top;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* What a page slots under a step takes the step's lines, not its own margins,
+   and stands at least a square high, so text drawn one control high (a
+   ds-text) keeps the steps under it on the grid. */
+::slotted(*) {
+  min-height: var(--ds-unit);
+  margin: 0;
+}

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

@@ -64,14 +64,14 @@ span[hidden] { display: none; }
 :host([chip]:not([data-listbox])) ::slotted(select) {
   border: 0 !important;
   background: var(--ds-button-background-color-secondary) !important;
-  color: var(--ds-button-text-color-secondary) !important;
+  color: var(--ds-button-text-color) !important;
   line-height: var(--ds-control-height) !important;
 }
 :host([chip][primary]:not([data-listbox])) ::slotted(select) {
   background: var(--ds-button-background-color-primary) !important;
   color: var(--ds-button-text-color-on-accent) !important;
 }
-:host([chip]) span { background: var(--ds-button-text-color-secondary); }
+:host([chip]) span { background: var(--ds-button-text-color); }
 :host([chip][primary]) span { background: var(--ds-button-text-color-on-accent); }
 
 /* A colour choice uses the shared swatch; the native select remains the hit target. */