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

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. */
@@ -39,9 +58,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 +68,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 +91,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 +99,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 +184,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))); }

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

@@ -7,22 +7,49 @@
   max-width: 100%;
   min-width: 0;
   vertical-align: bottom;
+  /* The tag's own tokens, unset by default and in unscaled px: its height, side padding,
+     corners and text size; --ds-tag-accent colours it. */
+  --_tag-size: var(--ds-tag-size);
+  --_tag-height: calc(var(--_tag-size) * var(--ds-sf, 1));
+  --_tag-padding-size: var(--ds-tag-padding-size);
+  --_tag-padding: calc(var(--_tag-padding-size) * var(--ds-sf, 1));
+  --_tag-corner-size: var(--ds-tag-corner-size);
+  --_tag-radius: calc(var(--_tag-corner-size) * var(--ds-sf, 1));
+  --_tag-text-size: var(--ds-tag-text-size);
+  --_tag-font-size: calc(var(--_tag-text-size) * var(--ds-sf, 1));
 }
 :host([hidden]) { display: none !important; }
+/* The face stays one control high at the foot of its box, on the lower sixteen,
+   even when a row stretches the tag to a square. */
 .frame {
   display: block;
+  align-self: flex-end;
   box-sizing: border-box;
   max-width: 100%;
-  padding-inline: calc(4px * var(--ds-sf, 1));
-  border-radius: var(--ds-radius);
+  padding-inline: var(--_tag-padding, calc(4px * var(--ds-sf, 1)));
+  border-radius: var(--_tag-radius, var(--ds-radius));
   background: var(--ds-tag-background, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 28%, white), color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 20%, var(--ds-black, #2a2a2a))));
   color: var(--ds-tag-color, light-dark(color-mix(in srgb, var(--ds-tag-accent, var(--ds-grey, #7a7a7a)) 45%, black), var(--ds-tag-accent, var(--ds-grey, #7a7a7a))));
   font-family: var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
-  font-size: var(--ds-type-size-default);
-  line-height: var(--ds-control-height);
+  font-size: var(--_tag-font-size, var(--ds-type-size-default));
+  line-height: var(--_tag-height, var(--ds-control-height));
   letter-spacing: var(--ds-type-letterspacing-default);
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
+/* The words in a box of their own, so cut words fade over their last square
+   while the fill stays whole; never an ellipsis (0-face/cut-fade.ts marks them). */
+.words {
+  display: block;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+.words[data-cut="end"] {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+:host(:dir(rtl)) .words[data-cut="end"] {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}

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

@@ -16,10 +16,11 @@
   line-height: var(--ds-type-lineheight-default);
   letter-spacing: var(--ds-type-letterspacing-default);
   text-align: left;
-  text-transform: var(--text-transform-default);
-  text-decoration: var(--text-decoration-default);
   vertical-align: middle;
   white-space: nowrap;
+  word-break: normal;
+  overflow-wrap: normal;
+  hyphens: manual;
   color: var(--ds-text-tone, inherit);
 }
 :host([hidden]) { display: none !important; }
@@ -43,7 +44,9 @@
   color: inherit;
 }
 
-/* Text someone wrote: shown as it stands, cut with an ellipsis at its width. */
+/* Text someone wrote: shown as it stands. Cut at its width, it fades over its
+   last square, never an ellipsis: the element marks itself `data-cut="end"`
+   while its words do not fit (0-face/cut-fade.ts). */
 :host([literal]) {
   height: auto;
   min-height: var(--ds-control-height);
@@ -57,9 +60,15 @@
   font-weight: var(--ds-type-weight-default);
   line-height: var(--ds-type-lineheight-default);
   letter-spacing: var(--ds-type-letterspacing-default);
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
+:host([literal]:not([wrap])[data-cut="end"]) {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent);
+}
+:host([literal]:not([wrap])[data-cut="end"]:dir(rtl)) {
+  mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent);
+}
 
 /*
  * Tone, size, strength and wrapping work alike for a translation key and for

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

@@ -3,7 +3,10 @@
 :host([hidden]) { display: none !important; }
 .frame { display: flex; align-items: center; box-sizing: border-box; max-width: 100%; min-width: 0; height: var(--ds-row-height); padding-inline-start: calc(4px * var(--ds-sf)); background: var(--ds-fill); color: var(--ds-text-color); border-radius: var(--ds-radius); font-family: var(--ds-typeface-regular); font-size: var(--ds-type-size-default); line-height: var(--ds-type-lineheight-default); letter-spacing: var(--ds-type-letterspacing-default); }
 .copy { display: flex; align-items: baseline; gap: calc(4px * var(--ds-sf)); min-width: 0; padding-inline: calc(4px * var(--ds-sf)); }
-.copy > span, small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.copy > span, small { overflow: hidden; text-overflow: clip; white-space: nowrap; min-width: 0; }
+/* Cut words fade over their last square, never an ellipsis (0-face/cut-fade.ts marks them). */
+:is(.copy > span, small)[data-cut="end"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }
+:host(:dir(rtl)) :is(.copy > span, small)[data-cut="end"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }
 small { font-size: var(--ds-type-size-small); color: var(--ds-text-color-muted); }
 ds-button { flex: 0 0 auto; --ds-button-height: var(--ds-row-height); --ds-button-width: var(--ds-row-height); }
 ::slotted([slot="leading"]) { flex: 0 0 auto; }