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

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-kbd.css

@@ -0,0 +1,12 @@
+/* ds-kbd.css */
+/* The element only places the hint; 1-root/kbd.css draws it. */
+
+:host {
+  display: inline-flex;
+  vertical-align: top;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}

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

@@ -0,0 +1,13 @@
+/* Internal automatic busy feedback; never represents elapsed time as progress. */
+.ds-loading { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; width: var(--ds-loading-width, calc(60px * var(--ds-sf, var(--sf, 1)))); height: 2px; border-radius: 1px; background: color-mix(in srgb, currentColor 16%, transparent); }
+.ds-loading__fill { display: block; width: 100%; height: 100%; background: var(--ds-loading-fill, currentColor); transform: translateX(-100%); animation: ds-loading-slide var(--ds-loading-duration, 1.8s) ease-in-out infinite; }
+/* A spinner is one square on its own and one control high (16px), the size of
+   the icon it stands in for, inside a button or a field. --ds-loading-size
+   sets it outright. The control list matches LOADING_CONTROLS in ds-loading.ts. */
+.ds-loading[data-variant="spinner"] { --ds-loading-box: var(--ds-loading-size, var(--ds-loading-context-size, calc(20px * var(--ds-sf, var(--sf, 1))))); width: var(--ds-loading-box); height: var(--ds-loading-box); border: 2px solid color-mix(in srgb, currentColor 18%, transparent); border-top-color: currentColor; border-radius: 50%; background: none; box-sizing: border-box; animation: ds-loading-spin .72s linear infinite; }
+.ds-loading[data-variant="spinner"] > .ds-loading__fill { display: none; }
+:where(button, [role="button"], ds-button, .ds-button, ds-input, ds-select, .ds-field, .ds-input, .ds-select) .ds-loading[data-variant="spinner"],
+.ds-loading[data-variant="spinner"][data-context="control"] { --ds-loading-context-size: var(--ds-control-height, calc(16px * var(--ds-sf, var(--sf, 1)))); }
+@keyframes ds-loading-slide { to { transform: translateX(100%); } }
+@keyframes ds-loading-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .ds-loading, .ds-loading__fill { animation: none !important; } .ds-loading__fill { transform: none; opacity: .65; } }

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

@@ -0,0 +1,30 @@
+/* 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]) {
+  position: absolute;
+  top: 0;
+  inset-inline: 0;
+  z-index: 9999;
+}
+:host([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. */

package/DS1/2-core/styles/ds-spacing-handle.css

@@ -0,0 +1,8 @@
+.ds-spacing-control { position: relative; display: block; box-sizing: border-box; touch-action: none; user-select: none; outline: none; cursor: ew-resize; width: calc(20px * var(--ds-sf, var(--sf, 1))); height: calc(20px * var(--ds-sf, var(--sf, 1))); }
+.ds-spacing-control[aria-orientation="vertical"] { cursor: ns-resize; }
+.ds-spacing-control::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ds-handle-ink, currentColor); transform: translateX(-50%); }
+.ds-spacing-control[aria-orientation="vertical"]::after { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; transform: translateY(-50%); }
+.ds-spacing-control:focus-visible { outline: 1px solid var(--ds-handle-ink, currentColor); outline-offset: 2px; }
+.ds-spacing-control[aria-disabled="true"] { opacity: .5; cursor: default; }
+.ds-spacing-label { position: absolute; left: 50%; top: 50%; transform: translate(calc(10px * var(--ds-sf, var(--sf, 1))), -100%); padding: 0 calc(4px * var(--ds-sf, var(--sf, 1))); font: 400 calc(10px * var(--ds-sf, var(--sf, 1)))/calc(20px * var(--ds-sf, var(--sf, 1))) var(--typeface-regular, sans-serif); color: var(--ds-handle-label-ink, var(--background)); background: var(--ds-handle-label-paper, var(--text-color)); border-radius: var(--radius, 4px); pointer-events: none; white-space: nowrap; display: none; }
+.ds-spacing-control:hover > .ds-spacing-label, .ds-spacing-control:focus-visible > .ds-spacing-label { display: block; }

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

@@ -1,62 +1,2 @@
-@import "../../1-root/component-metrics.css";
-
-:host {
-  display: inline-flex;
-  flex: none;
-  align-items: stretch;
-  height: var(--ds-control-height);
-  gap: 1px;
-  vertical-align: bottom;
-}
-:host([hidden]) { display: none; }
-
-button {
-  appearance: none;
-  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;
-}
-button:first-child {
-  border-start-start-radius: var(--ds-radius);
-  border-end-start-radius: var(--ds-radius);
-}
-button:last-child {
-  border-start-end-radius: var(--ds-radius);
-  border-end-end-radius: var(--ds-radius);
-}
-button[data-icon] { width: var(--ds-control-height); padding: 0; }
-ds-icon { --ds-icon-size: 16px; color: inherit; }
-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([compact]) button:not([data-icon], [data-short]) {
-  --ds-typeface-regular: var(--ds-typeface-compressed);
-  padding-inline: calc(3px * var(--ds-sf));
-}
-:host([compact]) button[data-short] { width: var(--ds-control-height); padding: 0; }
-button:hover:not(:disabled, [aria-pressed="true"]) { color: var(--ds-text-color); }
-button[aria-pressed="true"] {
-  background: var(--ds-accent-color);
-  color: var(--ds-button-text-color-on-accent);
-  cursor: default;
-}
-button:disabled { cursor: default; opacity: 0.5; }
-button:focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }
+/* Compatibility face. Split is a mode of Button. */
+@import "./ds-button-split.css";

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

@@ -0,0 +1,34 @@
+/* ds-stat.css */
+/* The element only places the block; 1-root/figures.css draws it. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
+/* Slotted words take the stat's lines rather than their own margins. */
+::slotted([slot]) {
+  margin: 0;
+}
+
+/* What stands between the figure and the caption, a meter say, takes the
+   stat's width. */
+::slotted(:not([slot])) {
+  align-self: stretch;
+  margin: 0;
+}
+
+/* The figure read whole when its digits are drawn in cells. */
+.hidden-words {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

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

@@ -1,7 +1,7 @@
 @import "../../1-root/component-metrics.css";
 
 :host {
-  --ds-choice-unit: calc(var(--ds-1) * var(--ds-sf));
+  --ds-choice-unit: var(--ds-control-height);
   display: inline-flex;
   flex: 0 0 auto;
   vertical-align: middle;
@@ -48,3 +48,18 @@
 ::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; } }
+
+/* Rounded switches keep their shape and white thumb independently of page accents. */
+:host([rounded]) ::slotted(button) {
+  border-radius: var(--ds-choice-unit) !important;
+  corner-shape: round !important;
+  color: var(--ds-white) !important;
+}
+:host([rounded]) ::slotted(button)::after {
+  border-radius: 50%;
+  corner-shape: round;
+  background: var(--ds-white);
+}
+:host([rounded]) ::slotted(button[aria-checked="true"]) {
+  background: var(--ds-switch-track-on) !important;
+}

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

@@ -1,7 +1,9 @@
 @import "../../1-root/component-metrics.css";
 
 /* ds-text.css */
-/* Text component styles for displaying translations */
+/* Text component styles for displaying translations. Without attributes the
+   element is one control high, for a row; text.css draws the same words as
+   classes on native text. */
 
 :host {
   display: inline-flex;
@@ -18,8 +20,9 @@
   text-decoration: var(--text-decoration-default);
   vertical-align: middle;
   white-space: nowrap;
-  color: inherit;
+  color: var(--ds-text-tone, inherit);
 }
+:host([hidden]) { display: none !important; }
 
 :host([data-language="ja"]) {
   font-family: var(--ds-typeface-regular-jp, var(--typeface-regular-jp));
@@ -40,8 +43,7 @@
   color: inherit;
 }
 
-/* ds-text.css */
-
+/* Text someone wrote: shown as it stands, cut with an ellipsis at its width. */
 :host([literal]) {
   height: auto;
   min-height: var(--ds-control-height);
@@ -49,7 +51,6 @@
   min-width: 0;
   max-width: 100%;
   overflow: var(--ds-text-overflow, hidden);
-  color: var(--ds-text-tone, inherit);
   font-family: var(--ds-typeface-regular);
   font-feature-settings: var(--ds-font-features);
   font-size: var(--ds-type-size-default);
@@ -60,28 +61,58 @@
   white-space: nowrap;
 }
 
-:host([literal][strong]) {
+/*
+ * Tone, size, strength and wrapping work alike for a translation key and for
+ * literal text. They follow the rules above, at the same specificity.
+ */
+
+:host([strong]) {
   font-weight: var(--ds-type-weight-bold);
 }
 
-:host([literal][wrap]) {
+/* Several lines, each one square. */
+:host([wrap]) {
+  display: inline-block;
+  height: auto;
+  min-height: var(--ds-control-height);
+  max-width: 100%;
   overflow: visible;
+  line-height: var(--ds-unit);
   white-space: normal;
 }
 
-:host([literal][tone="muted"]) {
+:host([tone="muted"]) {
   --ds-text-tone: var(--ds-text-color-muted);
 }
 
-:host([literal][tone="title"]) {
+:host([tone="title"]) {
   --ds-text-tone: var(--ds-title-color);
 }
 
-:host([literal][size="small"]) {
+:host([tone="danger"]) {
+  --ds-text-tone: var(--ds-danger-color);
+}
+
+:host([tone="warning"]) {
+  --ds-text-tone: var(--ds-warning-color);
+}
+
+:host([size="small"]) {
   font-size: var(--ds-type-size-small);
 }
 
-:host([literal][size="heading"]) {
+:host([size="heading"]) {
+  height: auto;
   font-size: var(--ds-type-size-heading);
-  line-height: var(--ds-row-height);
+  line-height: var(--ds-type-lineheight-default);
+}
+
+/* A title on two squares. */
+:host([size="display"]) {
+  display: inline-block;
+  height: auto;
+  min-height: calc(2 * var(--ds-unit));
+  font-size: var(--ds-type-size-display);
+  line-height: calc(2 * var(--ds-unit));
+  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));
 }

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

@@ -0,0 +1,182 @@
+@import "../../1-root/component-metrics.css";
+
+/* Toast, based on Sonner (https://sonner.emilkowal.ski, MIT licence).
+ * Sonner's stack, drawn as Design system 1's label: an ink chip one control
+ * high per line of words, the tooltip's colours, no line and no shadow. The
+ * pile advances one square per toast (a control and the rest of the square),
+ * one square clear of the edge. Sonner's 400ms transitions on transform and
+ * opacity only. */
+:host {
+  --ds-toast-width: calc(16 * var(--ds-unit));
+  --ds-toast-offset: var(--ds-unit);
+  --ds-toast-gap: calc(var(--ds-unit) - var(--ds-control-height));
+  --ds-toast-background: var(--ds-tooltip-background, light-dark(var(--ds-black, #2a2a2a), var(--ds-white, #ffffff)));
+  --ds-toast-color: var(--ds-tooltip-color, light-dark(var(--ds-white, #ffffff), var(--ds-black, #2a2a2a)));
+  display: contents;
+}
+
+section { display: contents; }
+
+ol {
+  --lift: -1;
+  position: fixed;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  width: min(var(--ds-toast-width), calc(100% - 2 * var(--ds-toast-offset)));
+  height: calc(var(--height) + var(--gaps) * var(--ds-toast-gap));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: none;
+  pointer-events: none;
+}
+/* In the window, the offset clears the phone's safe area too. */
+ol[data-y="top"] { --lift: 1; top: calc(var(--ds-toast-offset) + env(safe-area-inset-top, 0px)); }
+ol[data-y="bottom"] { bottom: calc(var(--ds-toast-offset) + env(safe-area-inset-bottom, 0px)); }
+ol[data-x="left"] { left: var(--ds-toast-offset); }
+ol[data-x="right"] { right: var(--ds-toast-offset); }
+ol[data-x="center"] { left: 50%; transform: translateX(-50%); }
+/* Contained: within the nearest positioned ancestor instead of the window. */
+:host([contained]) ol { position: absolute; z-index: var(--ds-toast-z-index, 60); }
+:host([contained]) ol[data-y="top"] { top: var(--ds-toast-offset); }
+:host([contained]) ol[data-y="bottom"] { bottom: var(--ds-toast-offset); }
+
+.toast {
+  --swipe: 0px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: 100%;
+  overflow: hidden;
+  border-radius: var(--ds-radius);
+  background: var(--ds-toast-background);
+  color: var(--ds-toast-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-control-height);
+  letter-spacing: var(--ds-type-letterspacing-default);
+  outline: none;
+  touch-action: none;
+  user-select: none;
+  pointer-events: auto;
+  opacity: 0;
+  transition: transform 400ms ease, opacity 400ms ease;
+}
+ol[data-y="bottom"] .toast { bottom: 0; }
+ol[data-y="top"] .toast { top: 0; }
+ol[data-x="center"] .toast { margin-inline: auto; }
+ol[data-x="left"] .toast { margin-right: auto; }
+ol[data-x="right"] .toast { margin-left: auto; }
+.toast:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: 1px; }
+
+/* Entering: from beyond the edge, then into the stack. */
+.toast[data-mounted="false"] { transform: translateY(calc(var(--lift) * -100%)); }
+.toast[data-mounted="true"] { opacity: 1; }
+
+/* Collapsed: the front toast, and the next ones peeking out a little smaller. */
+ol[data-expanded="false"] .toast[data-mounted="true"] {
+  transform: translateY(calc(var(--lift) * var(--index) * var(--ds-toast-gap) + var(--swipe))) scale(calc(1 - var(--index) * 0.05));
+}
+ol[data-expanded="false"] .toast[data-front="false"] { height: var(--front-height); }
+ol[data-expanded="false"] .toast[data-front="false"] .body { opacity: 0; }
+
+/* Expanded: each toast after the ones in front of it. */
+ol[data-expanded="true"] .toast[data-mounted="true"] {
+  transform: translateY(calc(var(--lift) * (var(--offset) + var(--index) * var(--ds-toast-gap)) + var(--swipe)));
+}
+
+.toast[data-visible="false"] { opacity: 0; pointer-events: none; }
+.toast[data-swiping="true"] { transition: none; }
+
+/* Leaving: the front one back over its edge, the others fade where they are. */
+.toast[data-removed="true"] { opacity: 0; pointer-events: none; }
+.toast[data-removed="true"][data-front="true"] { transform: translateY(calc(var(--lift) * -100%)); }
+.toast[data-swipe-out="true"] { transform: translateY(calc(var(--swipe) + var(--lift) * -100%)); }
+
+/* Words padded 4px from the chip's edge; each line one control high. */
+.body {
+  display: flex;
+  align-items: flex-start;
+  gap: calc(4px * var(--ds-sf));
+  box-sizing: border-box;
+  min-height: var(--ds-control-height);
+  padding-inline: calc(4px * var(--ds-sf));
+  transition: opacity 400ms ease;
+}
+.icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+  --ds-icon-color: currentColor;
+}
+.icon:first-child { margin-left: calc(-4px * var(--ds-sf)); }
+/* The page toaster (0-face/toaster.ts) draws its icons as inline SVG, at ds-icon's size. */
+.icon > svg, .close > svg { width: calc(14px * var(--ds-sf)); height: calc(14px * var(--ds-sf)); }
+.content { flex: 1 1 auto; min-width: 0; }
+.title, .description { white-space: normal; overflow-wrap: anywhere; }
+.description { opacity: 0.7; }
+
+/* Actions are words of the same size, underlined as text buttons are. */
+.button {
+  flex: 0 0 auto;
+  margin: 0 0 0 calc(4px * var(--ds-sf));
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+a.button { display: inline-block; }
+.button.cancel { opacity: 0.7; }
+.button:focus-visible, .close:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; border-radius: 1px; }
+
+.close {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+  margin: 0 calc(-4px * var(--ds-sf)) 0 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  --ds-icon-color: currentColor;
+}
+
+.spinner {
+  width: calc(10px * var(--ds-sf));
+  height: calc(10px * var(--ds-sf));
+  box-sizing: border-box;
+  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: ds-toast-spin 720ms linear infinite;
+}
+@keyframes ds-toast-spin { to { transform: rotate(360deg); } }
+
+/* Sonner's rich colours: a meaningful fill for each type, lettered in the ink. */
+:host([rich-colors]) .toast[data-type="success"] { --ds-toast-background: var(--ds-apple-green); }
+:host([rich-colors]) .toast[data-type="info"] { --ds-toast-background: var(--ds-zenith-blue); }
+:host([rich-colors]) .toast[data-type="warning"] { --ds-toast-background: var(--ds-orange); }
+:host([rich-colors]) .toast[data-type="error"] { --ds-toast-background: var(--ds-tuned-red); }
+:host([rich-colors]) .toast:is([data-type="success"], [data-type="info"], [data-type="warning"], [data-type="error"]) {
+  --ds-toast-color: var(--ds-black);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast, .body { transition: none; }
+  .spinner { animation: none; }
+}

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

@@ -3,6 +3,7 @@
   display: inline-flex;
   align-items: center;
 }
+:host([hidden]) { display: none !important; }
 
 .bubble {
   box-sizing: border-box;