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

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

@@ -11,17 +11,17 @@
   gap: var(--ds-button-gap, calc(4px * var(--ds-sf))) !important;
   min-width: 0 !important;
   max-width: 100% !important;
-  height: var(--ds-button-height, var(--ds-control-height)) !important;
+  height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;
   /* Important, so a page's `* { padding: 0 }` reset cannot reach it: the
      padding is set through --ds-button-padding. */
   padding: var(--ds-button-padding, 0) !important;
-  border-radius: var(--ds-radius) !important;
+  border-radius: var(--_button-radius, var(--ds-radius)) !important;
   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-feature-settings: var(--ds-font-features) !important;
-  font-size: var(--ds-type-size-default) !important;
+  font-size: var(--_button-font-size, var(--ds-type-size-default)) !important;
   font-weight: var(--ds-type-weight-default) !important;
   line-height: var(--ds-type-lineheight-default) !important;
   letter-spacing: var(--ds-type-letterspacing-default) !important;
@@ -39,22 +39,23 @@
 }
 
 :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;
 }
 
 :host([control="host"][primary]),
 :host([control="slotted"][primary]) {
-  --ds-button-padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
-  --ds-button-background: var(--ds-button-background-color-primary);
-  --ds-button-color: var(--ds-button-text-color-on-accent);
+  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));
+  --ds-button-background: var(--ds-button-primary-fill, var(--ds-button-background-color-primary));
+  --ds-button-color: var(--ds-button-primary-text, var(--ds-button-text-color-on-accent));
 }
 
 :host([control="host"][secondary]),
 :host([control="slotted"][secondary]) {
-  --ds-button-padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
-  --ds-button-background: var(--ds-button-background-color-secondary);
+  --ds-button-padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));
+  --ds-button-background: var(--ds-button-secondary-fill, var(--ds-button-background-color-secondary));
 }
 
 :host([control="host"][secondary]:hover:not([disabled])),
@@ -165,14 +166,14 @@
   border: 0 !important;
   margin: 0 !important;
   width: 100% !important;
-  min-height: var(--ds-button-height, var(--ds-control-height)) !important;
-  max-height: var(--ds-button-height, var(--ds-control-height)) !important;
+  min-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;
+  max-height: var(--ds-button-height, var(--_button-height, var(--ds-control-height))) !important;
   box-shadow: none !important;
   text-align: start !important;
   text-transform: none !important;
   text-decoration: none !important;
   overflow: hidden !important;
-  text-overflow: ellipsis !important;
+  text-overflow: clip !important;
 }
 :host([control="slotted"][icon]) ::slotted(:is(button, a)) {
   justify-content: center !important;
@@ -188,7 +189,7 @@
   align-items: flex-end;
   min-height: var(--ds-row-height);
   vertical-align: bottom;
-  width: var(--ds-button-width, max-content);
+  width: var(--ds-button-width, var(--_button-inline-size, max-content));
 }
 /* An icon's square: the face takes its first sixteen, the spare four above. */
 :host([control="slotted"][icon]) {
@@ -235,3 +236,36 @@
 :host([menu-item][control="slotted"]) ::slotted([aria-checked="true"]) {
   box-shadow: inset 0 0 0 1px var(--ds-focus-ring) !important;
 }
+
+/* A paper tab (`ds-tabs paper`): a row high with its words on the sixteen,
+   rounded at the top only and square at the foot, where it joins the page. */
+:host([control="host"][paper]),
+:host([control="slotted"][paper]) ::slotted(:is(button, a)) {
+  align-items: flex-end !important;
+  border-start-start-radius: var(--ds-radius) !important;
+  border-start-end-radius: var(--ds-radius) !important;
+  border-end-start-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+}
+
+/* A tab in a joined run (`ds-tabs split`): square inside, rounded at the run's ends. */
+:host([control="host"][segment]) {
+  border-radius: 0 !important;
+}
+:host([control="host"]:is([segment="first"], [segment="only"])) {
+  border-start-start-radius: var(--ds-radius) !important;
+  border-end-start-radius: var(--ds-radius) !important;
+}
+:host([control="host"]:is([segment="last"], [segment="only"])) {
+  border-start-end-radius: var(--ds-radius) !important;
+  border-end-end-radius: var(--ds-radius) !important;
+}
+
+:host([control="host"]:not([icon]):not([split]):not([menu-item])) {
+  min-width: max-content !important;
+  min-width: calc-size(max-content, round(up, size, var(--ds-unit))) !important;
+}
+:host([control="slotted"]) ::slotted(:is(button, a)) {
+  min-width: max-content !important;
+  overflow: visible !important;
+}

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

@@ -48,6 +48,9 @@
   border-end-end-radius: var(--ds-radius);
 }
 :host([split]) button[data-icon] { width: var(--ds-control-height); padding: 0; }
+/* An icon with its words hugs them: the icon's own 4px room around its glyph
+   replaces the padding on its side and the gap before the words. */
+:host([split]) button[data-icon-words] { gap: 0; padding-inline-start: 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
@@ -64,4 +67,9 @@
   cursor: default;
 }
 :host([split]) button:disabled { cursor: default; opacity: 0.5; }
+/* Plain: the words and icons alone on no ground in any state, in the muted ink, the pointer and
+   the chosen segment taking the ink, as text tabs do. */
+:host([split][plain]) button,
+:host([split][plain]) button[aria-pressed="true"] { background: transparent; }
+:host([split][plain]) button[aria-pressed="true"] { color: var(--ds-text-color); }
 :host([split]) button:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }

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

@@ -8,13 +8,32 @@
   vertical-align: bottom;
   min-width: 0;
   flex: 0 0 auto;
-  width: var(--ds-button-width, max-content);
+  width: var(--ds-button-width, var(--_button-inline-size, 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
-     would anywhere else, instead of being cut off at its edge. */
-  overflow-x: clip;
-  overflow-y: visible;
+  overflow: visible;
+  /* The button's own tokens, unset by default and in unscaled px as --ds-control-size is,
+     resolved here at this button's scale. Each face reads them first and falls back to its
+     own measure, so a page that sets none draws exactly as before. --ds-button-inline-size is
+     the width: unset hugs, 100% fills, a length is fixed. */
+  --_button-size: var(--ds-button-size);
+  --_button-height: calc(var(--_button-size) * var(--ds-sf));
+  --_button-corner-size: var(--ds-button-corner-size);
+  --_button-radius: calc(var(--_button-corner-size) * var(--ds-sf));
+  --_button-text-size: var(--ds-button-text-size);
+  --_button-font-size: calc(var(--_button-text-size) * var(--ds-sf));
+  --_button-padding-size: var(--ds-button-padding-size);
+  --_button-padding: calc(var(--_button-padding-size) * var(--ds-sf));
+  --_button-inline-size: var(--ds-button-inline-size);
+}
+
+/* Other controls drawn on this face keep their own measures: an icon or a count's square, a
+   tab, a menu entry, a split run and a paper tab. Their colours still follow the faces. */
+:host(:is([icon], [square], [split], [menu-item], [role="option"], [role^="menuitem"], [role="tab"], [choice], [segment], [paper])) {
+  --_button-height: initial;
+  --_button-radius: initial;
+  --_button-font-size: initial;
+  --_button-padding: initial;
+  --_button-inline-size: initial;
 }
 
 /* Label width is standard. Fixed grid widths are explicit layout choices. */
@@ -27,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);
 }
@@ -39,9 +59,9 @@
 
 :is(button, a) {
   box-sizing: border-box;
-  max-height: var(--ds-control-height);
-  height: var(--ds-control-height);
-  min-height: var(--ds-control-height);
+  max-height: var(--_button-height, var(--ds-control-height));
+  height: var(--_button-height, var(--ds-control-height));
+  min-height: var(--_button-height, var(--ds-control-height));
   width: 100%;
   max-width: 100%;
   min-width: 0;
@@ -49,20 +69,20 @@
   align-items: center;
   justify-content: flex-start;
   border: none;
-  border-radius: var(--ds-radius);
+  border-radius: var(--_button-radius, var(--ds-radius));
   corner-shape: var(--ds-corner-shape, round);
   cursor: pointer;
   padding: 0;
   color: var(--button-color, var(--button-text-color));
   font-family: var(--ds-typeface-regular);
-  font-size: var(--ds-type-size-default);
+  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);
   -webkit-tap-highlight-color: transparent;
   white-space: nowrap;
   overflow-x: clip;
   overflow-y: visible;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   /* Default to no-background when no variant is specified */
   background-color: transparent;
   text-decoration: none;
@@ -72,7 +92,7 @@
 :is(button, a) ::slotted(*) {
   overflow-x: clip;
   overflow-y: visible;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
   max-width: 100%;
   text-align: left;
@@ -80,21 +100,27 @@
   color: inherit;
 }
 
+/* Words drawn by a translation key take the button's text size too: unset, the expression
+   ds-text resolves for itself (component-metrics.css). */
+:is(button, a) ds-text {
+  --ds-type-size-default: var(--_button-font-size, calc(var(--ds-text-size, 14px) * var(--ds-sf, 1)));
+}
+
 :is(button, a)[primary] {
-  background-color: var(--accent-color);
-  color: var(--button-text-color-on-light, var(--black));
+  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);
-  padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
+  padding: 0 var(--_button-padding, calc(var(--ds-button-inset, 4px) * var(--ds-sf)));
 }
 
 /* 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);
+  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);
-  padding: 0 calc(var(--ds-button-inset, 4px) * var(--ds-sf));
+  padding: 0 var(--_button-padding, 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,
@@ -159,7 +185,55 @@
   justify-content: center;
 }
 
-/* A segment gets its outside corners from the enclosing split control. */
+/* Words and an icon hug them, as on every face (controls.css): this face has
+   no gap, and on a filled face the icon takes the padding on its side, its
+   own room around the glyph standing in for it. */
+:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:last-child:not(:first-child)) {
+  margin-inline-end: calc(-4px * var(--ds-sf));
+}
+:host(:is([primary], [secondary]):not([icon])) ::slotted(ds-icon:first-child:not(:last-child)) {
+  margin-inline-start: calc(-4px * var(--ds-sf));
+}
+
+/* A paper tab (`ds-tabs paper`) on this face: a row high with its words on
+   the sixteen, half a square of room at its sides, in the run's colours,
+   rounded at the top only and square at the foot, where it joins the page. */
+:host([paper]) :is(button, a) {
+  height: var(--ds-row-height);
+  min-height: var(--ds-row-height);
+  max-height: var(--ds-row-height);
+  align-items: flex-end;
+  padding: 0 calc(10px * var(--ds-sf));
+  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
+  background-color: var(--ds-button-background, transparent);
+  color: var(--ds-button-color, var(--button-text-color));
+}
+
+/* A segment gets its outside corners from the enclosing split control, or
+   from its place in a joined run of tabs (`ds-tabs split`). */
 :host([segment]) :is(button, a) {
   border-radius: 0 !important;
 }
+:host(:is([segment="first"], [segment="only"])) :is(button, a) {
+  border-start-start-radius: var(--ds-radius) !important;
+  border-end-start-radius: var(--ds-radius) !important;
+}
+:host(:is([segment="last"], [segment="only"])) :is(button, a) {
+  border-start-end-radius: var(--ds-radius) !important;
+  border-end-end-radius: var(--ds-radius) !important;
+}
+
+/* A label is never truncated to meet a chosen width. Round its minimum up,
+   so explicit widths and flex layouts retain enough space for all the words. */
+:host(:not([icon]):not([split]):not([menu-item])) {
+  min-width: max-content;
+  min-width: calc-size(max-content, round(up, size, var(--ds-unit)));
+}
+/* A menu entry keeps a fixed width, so its words may still be cut and fade. */
+:host(:not([menu-item])) :is(button, a),
+:host(:not([menu-item])) :is(button, a) ds-text,
+:host(:not([menu-item])) :is(button, a) ::slotted(*) {
+  overflow: visible;
+  mask-image: none;
+  text-overflow: clip;
+}

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

@@ -32,3 +32,9 @@
 ::slotted([slot="media"]) {
   flex: none;
 }
+
+/* A picture is square where it meets the card, on its foot (1-root/card.css). */
+::slotted(:is(img, picture, video, canvas, svg)[slot="media"]) {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}

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

@@ -4,6 +4,12 @@
    stands, so the words begin on the next square (Joachim, 19 October 2026). */
 :host {
   --ds-choice-unit: calc(var(--ds-1) * var(--ds-sf));
+  /* The box's own tokens, unset by default and in unscaled px: its size (at most the square it
+     stands in), its corners and the fill when ticked or mixed. */
+  --_checkbox-size: var(--ds-checkbox-size);
+  --_checkbox-box: calc(var(--_checkbox-size) * var(--ds-sf));
+  --_checkbox-corner-size: var(--ds-checkbox-corner-size);
+  --_checkbox-radius: calc(var(--_checkbox-corner-size) * var(--ds-sf));
   display: inline-grid;
   align-items: end;
   justify-items: start;
@@ -16,34 +22,40 @@
 ::slotted(input[type="checkbox"]) {
   appearance: none !important;
   box-sizing: border-box !important;
+  position: relative !important;
   display: grid !important;
   place-items: center !important;
-  width: var(--ds-control-height) !important;
+  width: var(--_checkbox-box, var(--ds-control-height)) !important;
   min-width: 0 !important;
-  height: var(--ds-control-height) !important;
+  height: var(--_checkbox-box, var(--ds-control-height)) !important;
   min-height: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   border: 1px solid var(--ds-border-color) !important;
-  border-radius: var(--ds-radius) !important;
+  border-radius: var(--_checkbox-radius, var(--ds-radius)) !important;
   corner-shape: var(--ds-corner-shape, round) !important;
   background: var(--ds-input-background) !important;
   color: var(--ds-button-text-color-on-accent) !important;
   box-shadow: none !important;
   cursor: pointer !important;
 }
-::slotted(input:checked), ::slotted(input:indeterminate) { background: var(--ds-accent-color) !important; }
+::slotted(input:checked), ::slotted(input:indeterminate) { background: var(--ds-checkbox-fill, var(--ds-accent-color)) !important; }
+/* The mark covers the whole box, its line included, so it stands in the middle: an input lays out
+   no grid around its ::before, which otherwise starts inside the 1px line. The tick's own drawing
+   sits 0.66 of its 16 below the middle, so it is lifted by that share of the box. */
 ::slotted(input)::before {
   content: "";
-  width: var(--ds-control-height);
-  height: var(--ds-control-height);
+  position: absolute;
+  inset: -1px;
   background: currentColor;
-  mask: var(--ds-checkbox-mark) center / contain no-repeat;
+  mask: var(--ds-checkbox-mark) 0 calc(var(--_checkbox-box, var(--ds-control-height)) * -0.041) / 100% 100% no-repeat;
   opacity: 0;
 }
 ::slotted(input:checked)::before { opacity: 1; }
 ::slotted(input:indeterminate)::before {
-  width: calc(var(--ds-control-height) / 2);
+  inset: 0;
+  margin: auto;
+  width: calc(var(--_checkbox-box, var(--ds-control-height)) / 2);
   height: calc(2px * var(--ds-sf));
   mask: none;
   opacity: 1;

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

@@ -2,7 +2,8 @@
 :host { display: block; width: 100%; max-width: 100%; min-width: 0; }
 :host([hidden]) { display: none !important; }
 figure { margin: 0; }
-.media { overflow: hidden; border-radius: var(--ds-radius); background: var(--ds-image-background, var(--ds-fill)); }
+/* A picture's corners; a container whose edges cut it (a card's bleed) squares the end and the foot. */
+.media { overflow: hidden; border-radius: var(--ds-radius); border-start-end-radius: var(--ds-image-end-radius, var(--ds-radius)); border-end-end-radius: var(--ds-image-end-radius, var(--ds-radius)); border-end-start-radius: var(--ds-image-foot-radius, var(--ds-radius)); background: var(--ds-image-background, var(--ds-fill)); }
 img { display: block; width: 100%; max-width: 100%; }
 figcaption {
   margin-top: calc(var(--ds-unit) / 2);

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

@@ -6,6 +6,19 @@
 :host {
   display: block;
   width: 100%;
+  /* The field's own tokens (variant="field"), unset by default and in unscaled px, resolved
+     here at this field's scale. A context that sets --ds-input-height, --ds-input-padding or
+     --ds-input-radius keeps its own; otherwise the field reads these, then its measure. */
+  --_input-size: var(--ds-input-size);
+  --_input-height: calc(var(--_input-size) * var(--ds-sf));
+  --_input-padding-size: var(--ds-input-padding-size);
+  --_input-padding: calc(var(--_input-padding-size) * var(--ds-sf));
+  --_input-corner-size: var(--ds-input-corner-size);
+  --_input-radius: calc(var(--_input-corner-size) * var(--ds-sf));
+}
+/* Its width: unset fills the row as before, a length fixes it. */
+:host([variant="field"]) {
+  width: var(--ds-input-inline-size, 100%);
 }
 
 .input-wrapper {
@@ -35,10 +48,10 @@ label {
   padding: 0 calc(2px * var(--ds-sf, 1));
   font-size: var(--ds-type-size-default);
   font-family: var(--ds-typeface-regular);
-  color: var(--base-darker-grey, #797979);
+  /* 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));
   letter-spacing: calc(-0.4px * var(--ds-sf, 1));
-  opacity: 0.5;
   height: var(--ds-input-height, calc(16px * var(--ds-sf, 1)));
   width: 100%;
   box-sizing: border-box;
@@ -57,8 +70,9 @@ input {
 }
 
 :is(input, textarea)::placeholder {
-  color: var(--base-darker-grey, #797979);
-  opacity: 0.5;
+  /* The muted ink, whole: half-transparent grey on the field's fill fell to 1.3:1 (color.text-contrast). */
+  color: var(--ds-input-placeholder-color, var(--ds-text-color-muted));
+  opacity: 1;
 }
 
 :is(input, textarea):disabled {
@@ -232,6 +246,25 @@ input {
   line-height: var(--ds-type-lineheight-default);
   letter-spacing: var(--ds-type-letterspacing-default);
 }
+/* A field is one control high (16px) on the lower sixteen of its square, as a button and a
+ * select are: the square keeps the row it stands in, the face stands at its foot. */
+:host([variant="field"]) {
+  --_field-height: var(--ds-input-height, var(--_input-height, var(--ds-control-height)));
+}
+:host([variant="field"]) .input-container {
+  min-height: var(--ds-row-height);
+  align-items: flex-end;
+}
+:host([variant="field"]) .password-visibility {
+  top: auto;
+  bottom: 0;
+  height: var(--_field-height);
+}
+:host([variant="field"]) input {
+  height: var(--_field-height);
+  padding: var(--ds-input-padding, 0 var(--_input-padding, calc(4px * var(--ds-sf))));
+  border-radius: var(--ds-input-radius, var(--_input-radius, var(--ds-radius)));
+}
 :host([variant="plain"]) :is(input, textarea) {
   padding: var(--ds-input-padding, 0);
   border: 0;

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

@@ -0,0 +1,127 @@
+@import "../../1-root/component-metrics.css";
+
+/* ds-number.css */
+/* A number field: one square high, its face one control high on the lower sixteen, a whole number of squares wide. */
+
+:host {
+  --ds-number-squares: 4;
+  display: inline-flex;
+  align-items: flex-end;
+  vertical-align: bottom;
+  box-sizing: border-box;
+  width: calc(var(--ds-number-squares) * var(--ds-unit));
+  min-width: 0;
+  height: var(--ds-unit);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.face {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--ds-control-height);
+  border-radius: var(--ds-input-radius, var(--ds-radius));
+  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-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  line-height: var(--ds-control-height);
+  font-variant-numeric: tabular-nums;
+  overflow: hidden;
+}
+
+/* Keyboard focus and typing ring the face inside its edge, so nothing around it moves. */
+.face:focus-within {
+  outline: 1px solid var(--ds-number-focus, var(--ds-focus-ring));
+  outline-offset: -1px;
+}
+
+/*
+ * The lead: a short label 4px in, or an icon on the face's first sixteen, in the title grey, a control
+ * square at least, the handle a drag scrubs. The value starts 4px after it, so after a letter or an
+ * icon it stands on the next square, as words do after a picture.
+ */
+.lead {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  min-width: var(--ds-control-height);
+  padding: 0 0 0 calc(4px * var(--ds-sf, 1));
+  color: var(--ds-number-lead-color, var(--ds-title-color));
+  --ds-icon-color: currentColor;
+  cursor: ew-resize;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.lead:has(ds-icon) {
+  justify-content: center;
+  padding: 0;
+}
+
+.lead__words {
+  white-space: nowrap;
+}
+
+:host(:hover:not([disabled]):not([readonly])) .lead,
+.face.scrubbing .lead {
+  color: var(--ds-number-color, var(--ds-input-color));
+}
+
+input {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  border: 0;
+  padding: 0 calc(4px * var(--ds-sf, 1));
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  font-variant-numeric: tabular-nums;
+  outline: none;
+  text-overflow: clip;
+}
+
+input::selection {
+  background: color-mix(in srgb, var(--ds-number-focus, var(--ds-focus-ring)) 30%, transparent);
+}
+
+.unit {
+  flex: none;
+  padding-inline-end: calc(4px * var(--ds-sf, 1));
+  color: var(--ds-number-lead-color, var(--ds-title-color));
+  white-space: nowrap;
+}
+
+:host([disabled]) .face {
+  opacity: 0.5;
+}
+
+:host([disabled]) .lead,
+:host([readonly]) .lead {
+  cursor: default;
+}
+
+:host([disabled]) input {
+  cursor: not-allowed;
+}
+
+/* With the value as the handle (`drag="value"`), the field drags up and down until it is typed in. */
+:host([drag="value"]:not([disabled]):not([readonly])) .face:not(:focus-within),
+:host([drag="value"]:not([disabled]):not([readonly])) .face:not(:focus-within) :is(.lead, input) {
+  cursor: ns-resize;
+  touch-action: none;
+}

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

@@ -81,6 +81,9 @@
   letter-spacing: var(--ds-type-letterspacing-default);
   white-space: nowrap;
   text-align: center;
-  text-overflow: ellipsis;
+  text-overflow: clip;
 }
+/* A cut label fades over its last square, never an ellipsis (0-face/cut-fade.ts marks it). */
+.label[data-cut="end"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }
+:host(:dir(rtl)) .label[data-cut="end"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }
 :host([compact]) .label { padding-inline: 0; }

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

@@ -1,11 +1,17 @@
 @import "../../1-root/component-metrics.css";
 
 :host {
-  --ds-choice-unit: var(--ds-control-height);
+  /* The switch's own tokens, unset by default: its height in unscaled px (two heights wide less
+     4px, the thumb and its travel following) and the track's colour when off; --ds-switch-track-on is
+     the track's colour when on. The compact face keeps its own measures. */
+  --_switch-size: var(--ds-switch-size);
+  --_switch-unit: calc(var(--_switch-size) * var(--ds-sf));
+  --ds-choice-unit: var(--_switch-unit, var(--ds-control-height));
   display: inline-flex;
   flex: 0 0 auto;
   vertical-align: middle;
-  width: calc(2 * var(--ds-choice-unit));
+  /* Two heights wide less 4px: 28 × 16 at base scale, the thumb travelling 12px. */
+  width: calc(2 * var(--ds-choice-unit) - 4px * var(--ds-sf));
   height: var(--ds-choice-unit);
 }
 :host([hidden]) { display: none !important; }
@@ -23,7 +29,7 @@
   border: 0 !important;
   border-radius: var(--ds-choice-unit) !important;
   corner-shape: round !important;
-  background: var(--ds-fill) !important;
+  background: var(--ds-switch-track-off, var(--ds-fill)) !important;
   color: var(--ds-white) !important;
   box-shadow: none !important;
   cursor: pointer !important;
@@ -43,7 +49,31 @@
 ::slotted(button[aria-checked="true"]) {
   background: var(--ds-switch-track-on) !important;
 }
-::slotted(button[aria-checked="true"])::after { transform: translateX(var(--ds-choice-unit)); }
+::slotted(button[aria-checked="true"])::after { transform: translateX(calc(var(--ds-choice-unit) - 4px * var(--ds-sf))); }
 ::slotted(button:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }
 ::slotted(button:disabled) { cursor: default !important; opacity: .5 !important; }
 @media (prefers-reduced-motion: reduce) { ::slotted(button)::after { transition: none; } }
+
+/* A smaller visible face on a two-square by one-square native hit target. */
+:host([monochrome]) ::slotted(button[aria-checked="true"]) { background: var(--ds-text-color) !important; }
+:host([monochrome]) ::slotted(button[aria-checked="true"])::after { background: var(--ds-paper); }
+:host([compact]) { --ds-choice-unit: var(--ds-control-height); width: calc(40px * var(--ds-sf)); height: calc(20px * var(--ds-sf)); }
+:host([compact]) ::slotted(button),
+:host([compact]) ::slotted(button[aria-checked="true"]) { padding: 0 !important; background: transparent !important; }
+:host([compact]) ::slotted(button)::before {
+ content: ""; position: absolute; inset-inline-end: 0; bottom: 0;
+ width: calc(24px * var(--ds-sf)); height: calc(12px * var(--ds-sf));
+ border-radius: calc(12px * var(--ds-sf)); background: var(--ds-fill);
+ box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--ds-text-color) 24%,transparent);
+}
+:host([compact]) ::slotted(button)::after {
+ position: absolute; left: calc(18px * var(--ds-sf)); bottom: calc(2px * var(--ds-sf));
+ width: calc(8px * var(--ds-sf)); height: calc(8px * var(--ds-sf));
+ background: var(--ds-text-color-muted);
+}
+:host([compact]) ::slotted(button[aria-checked="true"])::before { background: var(--ds-switch-track-on); box-shadow: none; }
+:host([compact]) ::slotted(button[aria-checked="true"])::after { transform: translateX(calc(12px * var(--ds-sf))); background: var(--ds-white); }
+:host([compact][monochrome]) ::slotted(button[aria-checked="true"])::before { background: var(--ds-text-color); }
+:host([compact][monochrome]) ::slotted(button[aria-checked="true"])::after { background: var(--ds-paper); }
+:host([compact]:dir(rtl)) ::slotted(button)::after { left: auto; right: calc(18px * var(--ds-sf)); }
+:host([compact]:dir(rtl)) ::slotted(button[aria-checked="true"])::after { transform: translateX(calc(-12px * var(--ds-sf))); }