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

package/DS1/1-root/row.css

@@ -0,0 +1,297 @@
+@import "./component-metrics.css";
+
+/*
+ * Rows, as plain classes on native elements: the `ds-row` and `ds-sidebar`
+ * elements' look without the elements.
+ *
+ * A row is one square high, and what it holds stands on the lower sixteen of
+ * the square with the spare four above, as Ezo sets every row: a line of
+ * words on a 16px line box, a 16px icon and a 16px control all end on the
+ * row's bottom line, so the capitals (7px below the top line, baseline 3px
+ * above the next) are centred on an icon beside them. On an `<a href>` or a
+ * `<button>` the whole row is one press target, a row, a tile or a card: the pointer over it, the
+ * press and the focus ring cover the row, and its content keeps the row's
+ * layout. A row that also holds controls of its own (a quick action, a link
+ * in another cell) is any element, a `<li>`, a `<div>` or a `<tr>`, with one
+ * `ds-row__target` inside: that link or button takes the press anywhere on
+ * the row, and every other control inside stays separately pressable.
+ *
+ *   ds-row                 a row one square high; a press target on <a> or <button>
+ *   ds-row__target         the row's press target, when the row holds other controls
+ *   ds-row--auto           as high as its content, at least one square
+ *   ds-row--stacked        the content stacked, each line one square (a tile, a card)
+ *   ds-row--nav            a navigation row: the sidebar's two-pixel corners
+ *   aria-current="page"    the destination being shown, filled and in the medium weight
+ *   aria-disabled="true"   or `disabled` on a button: dimmed, not pressable
+ *
+ * A sidebar of nested things (the `ds-sidebar tree` element without Lit) is a
+ * `role="tree"` list of `role="treeitem"` rows, flat, each with its
+ * `aria-level`, one square further in per level. `0-face/sidebar.ts`
+ * (`connectSidebar`) gives it the keyboard of the tree pattern.
+ *
+ *   ds-sidebar             the tree (`role="tree"`)
+ *   ds-sidebar__item       a row (`role="treeitem"`, `aria-level`, `aria-expanded` on a parent, `aria-selected`)
+ *   ds-sidebar__disclosure the arrow on its own square, turned down when the row is open; empty on a leaf
+ *   ds-sidebar__label      the words, cut short with an ellipsis
+ *   ds-sidebar__meta       small muted words at the row's end
+ *
+ * An icon (`.ds-icon`) in a tree row takes a square of its own. Tokens:
+ * `--ds-row-padding` (the words' distance from the row's edges, 4px),
+ * `--ds-row-fill-hover`, `--ds-row-fill-press`, `--ds-row-fill-current` and
+ * `--ds-row-current-weight` (component-tokens.css, shared with the
+ * element), `--ds-sidebar-disclosure` (the arrow's drawing, the library's
+ * `right` icon) and `--ds-sidebar-indent` (a row's depth in squares, read
+ * from `aria-level` up to twelve levels).
+ */
+
+:where(.ds-row):not(tr) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: calc(4px * var(--ds-sf));
+  min-width: 0;
+  height: var(--ds-row-height);
+  margin: 0;
+  line-height: var(--ds-type-lineheight-default);
+}
+
+:where(.ds-row--auto):not(tr) {
+  height: auto;
+  min-height: var(--ds-row-height);
+}
+
+:where(.ds-row--stacked):not(tr) {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0;
+  height: auto;
+}
+
+/* The press target: the row itself, or the one target inside it. */
+a.ds-row,
+button.ds-row,
+.ds-row__target {
+  appearance: none;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  text-decoration: none;
+  text-transform: none;
+  cursor: pointer;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+a.ds-row,
+button.ds-row {
+  position: relative;
+  width: 100%;
+  padding: 0 var(--ds-row-padding, calc(4px * var(--ds-sf)));
+  border-radius: var(--ds-row-radius, 0);
+}
+
+.ds-row__target {
+  padding: 0;
+}
+
+/* Each line of a tile one square, over the inherited font of a native link or button:
+   a tile's lines wrap, so they stay on whole squares rather than the sixteen. */
+.ds-row.ds-row--stacked {
+  line-height: var(--ds-row-height);
+}
+
+/* A row with a target inside: the target's layers cover the row. */
+.ds-row:has(.ds-row__target) {
+  position: relative;
+  isolation: isolate;
+}
+:where(.ds-row:has(.ds-row__target)):not(tr) {
+  padding-inline: var(--ds-row-padding, calc(4px * var(--ds-sf)));
+}
+.ds-row__target::before,
+.ds-row__target::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--ds-row-radius, 0);
+}
+.ds-row__target::before { z-index: 1; }
+.ds-row__target::after { z-index: -1; }
+.ds-row:has(.ds-row__target) :where(a[href], button, input, select, textarea, label, summary, [tabindex]):not(.ds-row__target) {
+  position: relative;
+  z-index: 2;
+}
+
+/* The pointer, the press, the current destination and the focus ring. */
+a.ds-row[href]:hover,
+button.ds-row:hover:not(:disabled),
+.ds-row__target:is(a[href], button:not(:disabled)):hover::after {
+  background: var(--ds-row-fill-hover, var(--ds-fill));
+}
+a.ds-row[href]:active,
+button.ds-row:active:not(:disabled),
+.ds-row__target:is(a[href], button:not(:disabled)):active::after {
+  background: var(--ds-row-fill-press, var(--ds-fill-hover));
+}
+.ds-row:is(a, button)[aria-current]:not([aria-current="false"]),
+.ds-row__target[aria-current]:not([aria-current="false"])::after {
+  background: var(--ds-row-fill-current, var(--ds-fill-hover));
+}
+.ds-row:is(a, button)[aria-current]:not([aria-current="false"]),
+.ds-row:has(.ds-row__target[aria-current]:not([aria-current="false"])) {
+  --ds-type-weight-default: var(--ds-row-current-weight, 500);
+  font-weight: var(--ds-row-current-weight, 500);
+}
+a.ds-row:focus-visible,
+button.ds-row:focus-visible,
+.ds-row__target:focus-visible::after {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: -2px;
+}
+a.ds-row:not([href]),
+a.ds-row[aria-disabled="true"],
+button.ds-row:disabled,
+button.ds-row[aria-disabled="true"],
+.ds-row:has(.ds-row__target:is(:disabled, [aria-disabled="true"], a:not([href]))) {
+  cursor: default;
+  opacity: 0.5;
+}
+.ds-row__target:is(:disabled, [aria-disabled="true"], a:not([href])) {
+  cursor: default;
+}
+a.ds-row[aria-disabled="true"]:hover,
+button.ds-row[aria-disabled="true"]:hover {
+  background: none;
+}
+
+.ds-row--nav {
+  --ds-row-radius: calc(2px * var(--ds-sf));
+}
+
+/* A sidebar of nested things: the tree. */
+
+.ds-sidebar {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--ds-text-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);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+.ds-sidebar__item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  height: var(--ds-row-height);
+  min-width: 0;
+  margin: 0;
+  padding-block: 0;
+  padding-inline: calc(var(--ds-sidebar-indent, 0) * var(--ds-unit)) var(--ds-row-padding, calc(4px * var(--ds-sf)));
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.ds-sidebar__item[hidden] { display: none; }
+.ds-sidebar__item[aria-level="2"] { --ds-sidebar-indent: 1; }
+.ds-sidebar__item[aria-level="3"] { --ds-sidebar-indent: 2; }
+.ds-sidebar__item[aria-level="4"] { --ds-sidebar-indent: 3; }
+.ds-sidebar__item[aria-level="5"] { --ds-sidebar-indent: 4; }
+.ds-sidebar__item[aria-level="6"] { --ds-sidebar-indent: 5; }
+.ds-sidebar__item[aria-level="7"] { --ds-sidebar-indent: 6; }
+.ds-sidebar__item[aria-level="8"] { --ds-sidebar-indent: 7; }
+.ds-sidebar__item[aria-level="9"] { --ds-sidebar-indent: 8; }
+.ds-sidebar__item[aria-level="10"] { --ds-sidebar-indent: 9; }
+.ds-sidebar__item[aria-level="11"] { --ds-sidebar-indent: 10; }
+.ds-sidebar__item[aria-level="12"] { --ds-sidebar-indent: 11; }
+.ds-sidebar__item:hover:not([aria-disabled="true"]) { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.ds-sidebar__item:active:not([aria-disabled="true"]) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }
+.ds-sidebar__item[aria-selected="true"] {
+  --ds-type-weight-default: var(--ds-row-current-weight, 500);
+  background: var(--ds-row-fill-current, var(--ds-fill-hover));
+  font-weight: var(--ds-row-current-weight, 500);
+}
+.ds-sidebar__item:focus-visible {
+  outline: 2px solid var(--ds-focus-ring);
+  outline-offset: -2px;
+}
+.ds-sidebar__item[aria-disabled="true"] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+/* The arrow and an icon each stand on a whole square, drawn on the row's sixteen (two
+   pixels below the square's middle); a leaf keeps the arrow's square empty. */
+.ds-sidebar__disclosure,
+.ds-sidebar__item > .ds-icon {
+  flex: 0 0 var(--ds-unit);
+  width: var(--ds-unit);
+  height: var(--ds-unit);
+  -webkit-mask-size: var(--ds-icon-box, calc(14px * var(--ds-sf)));
+  mask-size: var(--ds-icon-box, calc(14px * var(--ds-sf)));
+  -webkit-mask-position: center calc(50% + 2px * var(--ds-sf));
+  mask-position: center calc(50% + 2px * var(--ds-sf));
+}
+.ds-sidebar__disclosure {
+  --ds-icon-box: calc(14px * var(--ds-sf));
+  display: inline-block;
+  color: var(--ds-text-color-muted);
+  background-color: currentColor;
+  -webkit-mask: var(--ds-sidebar-disclosure, url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z'/%3E%3C/svg%3E")) center calc(50% + 2px * var(--ds-sf)) / var(--ds-icon-box) no-repeat;
+  mask: var(--ds-sidebar-disclosure, url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 16 16'%3E%3Cpath d='M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z'/%3E%3C/svg%3E")) center calc(50% + 2px * var(--ds-sf)) / var(--ds-icon-box) no-repeat;
+  transform: rotate(0deg);
+  transition: transform 120ms ease-out;
+}
+.ds-sidebar__item:not([aria-expanded]) > .ds-sidebar__disclosure {
+  visibility: hidden;
+}
+.ds-sidebar__item[aria-expanded="true"] > .ds-sidebar__disclosure {
+  transform: rotate(90deg);
+}
+.ds-sidebar__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-inline-start: calc(4px * var(--ds-sf));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ds-sidebar__meta {
+  flex: none;
+  padding-inline-start: calc(4px * var(--ds-sf));
+  color: var(--ds-text-color-muted);
+  font-size: var(--ds-type-size-small);
+  font-variant-numeric: tabular-nums;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-sidebar__disclosure { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .ds-row:is(a, button)[aria-current]:not([aria-current="false"]),
+  .ds-row__target[aria-current]:not([aria-current="false"])::after,
+  .ds-sidebar__item[aria-selected="true"] {
+    outline: 1px solid Highlight;
+    outline-offset: -1px;
+  }
+  .ds-sidebar__disclosure {
+    background-color: CanvasText;
+  }
+}

package/DS1/1-root/table.css

@@ -0,0 +1,111 @@
+/*
+ * A table: words straight on the paper, one square a row. No box and no
+ * column lines: each row stands on a hairline at its foot, its words set on
+ * that line like a caption: the sixteen of words against the 1px line, three
+ * spare above, a 20px pitch, as Ezo sets every row.
+ * Column headers keep the text's weight in the title grey; the first column
+ * of a body row is a row header in the text colour. Nothing is filled with
+ * the accent except a cell someone has selected.
+ *
+ * `.ds-table` dresses a native <table>; `<ds-table>` draws the same table
+ * from data. Put a wide table in `.ds-table-scroll` to scroll it sideways,
+ * and give the table `data-sticky` to keep its first column in place.
+ *
+ *   <th data-numeric>, <td data-numeric>   numbers, set to the column's end
+ *   <tfoot>                                totals, under a line of their own
+ *   <th colspan="2">                       a column group, in a header row
+ *   <th scope="rowgroup">                  a row group, a heading row in grey
+ *   <td aria-selected="true">              a selected cell
+ */
+
+.ds-table {
+  --ds-table-row: var(--ds-row-height, calc(20px * var(--ds-sf, 1)));
+  --ds-table-gap: calc(var(--ds-table-row) / 2);
+  --ds-table-rule: var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));
+  --ds-table-paper: var(--ds-background, Canvas);
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  color: var(--ds-text-color, inherit);
+  font-family: var(--ds-typeface-regular, inherit);
+  font-feature-settings: var(--ds-font-features, normal);
+  font-size: var(--ds-type-size-default, 14px);
+  letter-spacing: var(--ds-type-letterspacing-default, normal);
+}
+
+.ds-table :is(th, td) {
+  box-sizing: border-box;
+  height: var(--ds-table-row);
+  padding: 0 var(--ds-table-gap) 0 0;
+  border: 0;
+  border-bottom: 1px solid var(--ds-table-rule);
+  background: transparent;
+  line-height: var(--ds-type-lineheight-default);
+  text-align: start;
+  vertical-align: bottom;
+  font-weight: inherit;
+  white-space: nowrap;
+}
+
+.ds-table :is(th, td):last-child {
+  padding-inline-end: 0;
+}
+
+.ds-table thead th,
+.ds-table th[scope="rowgroup"] {
+  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+}
+
+.ds-table tbody th:not([scope="rowgroup"]) {
+  color: inherit;
+}
+
+.ds-table [data-numeric] {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Totals: the rule above them is the last body row's; theirs closes the table. */
+.ds-table tfoot :is(th, td) {
+  color: inherit;
+}
+
+.ds-table [aria-selected="true"] {
+  background: var(--ds-accent-color, Highlight);
+  color: var(--ds-button-text-color-on-accent, inherit);
+}
+
+.ds-table :is(th, td):has(> :is(a, button):only-child) {
+  cursor: pointer;
+}
+
+.ds-table caption {
+  box-sizing: border-box;
+  height: var(--ds-table-row);
+  padding-top: calc(var(--ds-table-row) - var(--ds-type-lineheight-default));
+  line-height: var(--ds-type-lineheight-default);
+  text-align: start;
+  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
+}
+
+.ds-table-scroll {
+  max-width: 100%;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+.ds-table-scroll > .ds-table {
+  width: max-content;
+  min-width: 100%;
+}
+
+.ds-table[data-sticky] :is(th, td):first-child {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  background: var(--ds-table-paper);
+}
+
+.ds-table[data-sticky] [aria-selected="true"]:first-child {
+  background: var(--ds-accent-color, Highlight);
+}

package/DS1/1-root/text.css

@@ -0,0 +1,70 @@
+@import "./component-metrics.css";
+
+/*
+ * Text on the grid, as plain classes on native text.
+ *
+ * Interface copy on a page without Lit: a label, a message, a title. Each line
+ * is one square (`--ds-unit`), so a paragraph of any length stands on whole
+ * squares, and a display title takes two. The `ds-text` element draws the same
+ * words when they come from a translation key.
+ *
+ * one.css and controls.css both import this file, so a page that loads either
+ * of them, or both, has one definition of these classes.
+ *
+ *   ds-text                                14 on a one-square line, the text colour
+ *   ds-text--small                         10
+ *   ds-text--heading                       13, medium
+ *   ds-text--display                       20 on two squares, medium
+ *   ds-text--strong                        medium
+ *   ds-text--muted, --title, --danger      tones
+ */
+
+.ds-text {
+  margin: 0;
+  color: var(--ds-text-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);
+  line-height: var(--ds-unit);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+
+.ds-text--small {
+  font-size: var(--ds-type-size-small);
+}
+
+.ds-text--heading {
+  font-family: var(--ds-typeface-medium);
+  font-size: var(--ds-type-size-heading);
+  font-weight: var(--ds-type-weight-bold);
+}
+
+.ds-text--display {
+  font-family: var(--ds-typeface-medium);
+  font-size: var(--ds-type-size-display);
+  font-weight: var(--ds-type-weight-bold);
+  line-height: calc(2 * var(--ds-unit));
+  letter-spacing: calc(var(--ds-display-text-tracking, -0.4px) * var(--ds-sf, 1));
+}
+
+.ds-text--strong {
+  font-family: var(--ds-typeface-medium);
+  font-weight: var(--ds-type-weight-bold);
+}
+
+.ds-text--muted {
+  color: var(--ds-text-color-muted);
+}
+
+.ds-text--title {
+  color: var(--ds-title-color);
+}
+
+.ds-text--danger {
+  color: var(--ds-danger-color);
+}
+
+.ds-text--warning {
+  color: var(--ds-warning-color);
+}

package/DS1/2-core/button-split.ts

@@ -0,0 +1,55 @@
+import { html, nothing } from "lit";
+import { getText } from "../0-face/i18n";
+import "./ds-icon";
+import "./ds-text";
+export interface SplitSegment<T extends string = string> {
+  value: T;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface SplitButtonState extends HTMLElement {
+  options: string; segments: ReadonlyArray<SplitSegment> | undefined;
+  value: string; disabled: boolean; splitDisabled: boolean;
+  actions: boolean; literal: boolean; renderRoot: HTMLElement | DocumentFragment;
+}
+function choices(host: SplitButtonState): ReadonlyArray<SplitSegment> {
+    return host.segments ?? host.options.split(",").map(part => part.trim()).filter(Boolean).map(part => {
+      const colon = part.indexOf(":");
+      if (colon < 0) return { value: part.toLowerCase(), label: part };
+      const value = part.slice(0, colon).trim();
+      const label = part.slice(colon + 1).trim();
+      if (!label.startsWith("@")) return { value, label };
+      const end = label.indexOf(":");
+      return { value, icon: label.slice(1, end < 0 ? undefined : end).trim(), label: end < 0 ? value : label.slice(end + 1).trim() };
+    });
+}
+function press(host: SplitButtonState, segment: SplitSegment) {
+    if (host.splitDisabled || segment.disabled) return;
+    if (host.actions) {
+      host.dispatchEvent(new CustomEvent("press", { detail: { value: segment.value }, bubbles: true, composed: true }));
+    } else if (segment.value !== host.value) {
+      const accepted = host.dispatchEvent(new CustomEvent("change", {
+        detail: { value: segment.value }, bubbles: true, composed: true, cancelable: true,
+      }));
+      if (accepted) host.value = segment.value;
+    }
+}
+export function focusSplit(host: SplitButtonState, options?: FocusOptions) {
+  const buttons = [...host.renderRoot.querySelectorAll<HTMLButtonElement>("button:not(:disabled)")];
+  (buttons.find(button => button.getAttribute("aria-pressed") === "true") ?? buttons[0])?.focus(options);
+}
+export function renderSplit(host: SplitButtonState) {
+    return html`${choices(host).map(segment => html`<button
+      type="button" part="segment" value=${segment.value}
+      aria-pressed=${host.actions ? nothing : String(segment.value === host.value)}
+      aria-label=${segment.icon ? (host.literal ? segment.label : getText(segment.label)) : nothing}
+      ?data-icon=${!!segment.icon}
+      ?data-short=${segment.label.length === 1}
+      ?disabled=${host.splitDisabled || segment.disabled}
+      @click=${() => press(host, segment)}
+    >${segment.icon
+      ? html`<ds-icon type=${segment.icon} aria-hidden="true"></ds-icon>`
+      : html`<ds-text .text=${segment.label} .literal=${host.literal}></ds-text>`}</button>`)}`;
+}

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

@@ -0,0 +1,169 @@
+ :host { --ds-chart-ink: var(--text-color, #1e1e1e); --ds-chart-muted: var(--base-darker-grey, #797979); --ds-chart-faint: var(--slate-light, #e6e6e6); --ds-chart-up: var(--apple-green, #99ff73); --ds-chart-down: var(--tuned-red, #ff5f5f); --ds-chart-live: var(--ds-chart-up); --ds-chart-line: var(--ds-chart-faint); --ds-chart-fill: var(--ds-chart-faint); --ds-chart-small: calc(var(--ds-chart-unit, 20px) / 2); font-family: var(--ds-chart-font, var(--typeface-regular, sans-serif)); }
+:host([hidden]) { display: none !important; }
+* { box-sizing: border-box; }
+:host([data-chart-kind="line"]) {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+:host([data-chart-kind="line"]) canvas {
+  display: block;
+  touch-action: pan-y;
+  cursor: crosshair;
+}
+
+.live-dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 5px;
+  height: 5px;
+  background: var(--ds-chart-live);
+  pointer-events: none;
+  animation: blink 1s steps(2, jump-none) infinite;
+}
+
+
+:host([data-chart-kind="spark"]) {
+  display: block;
+  height: var(--ds-chart-unit);
+}
+
+:host([data-chart-kind="spark"]) canvas {
+  display: block;
+  border-top-color: var(--ds-chart-faint);
+}
+
+:host([data-chart-kind="spark"]) canvas.up {
+  color: var(--ds-chart-up);
+}
+
+:host([data-chart-kind="spark"]) canvas.down {
+  color: var(--ds-chart-down);
+}
+
+
+:host([data-chart-kind="ratio"]) {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  height: var(--ds-chart-unit);
+}
+
+.ratio-buy,
+.ratio-sell {
+  height: calc(var(--ds-chart-unit) / 2);
+}
+
+.ratio-buy {
+  background: var(--ds-chart-up);
+}
+
+.ratio-sell {
+  background: var(--ds-chart-down);
+}
+
+
+:host([data-chart-kind="range"]) {
+  position: relative;
+  display: block;
+  height: var(--ds-chart-unit);
+}
+
+.range-track {
+  position: absolute;
+  top: calc(var(--ds-chart-unit) / 2);
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--ds-chart-line);
+}
+
+.range-fill {
+  position: absolute;
+  top: calc(var(--ds-chart-unit) / 4);
+  left: 0;
+  height: calc(var(--ds-chart-unit) / 2);
+  background: var(--ds-chart-fill);
+}
+
+.range-tick {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: var(--ds-chart-unit);
+  background: var(--ds-chart-muted);
+}
+
+.range-dot {
+  position: absolute;
+  top: calc(var(--ds-chart-unit) / 2 - 2px);
+  left: 0;
+  width: 5px;
+  height: 5px;
+  background: var(--ds-chart-ink);
+}
+
+:host([data-chart-kind="bars"]) {
+  display: block;
+}
+
+.bars {
+  display: flex;
+}
+
+.bar-cell {
+  display: grid;
+  grid-template-rows: auto var(--ds-chart-unit) var(--ds-chart-unit);
+  align-items: center;
+  width: calc(var(--span) * var(--ds-chart-unit));
+}
+
+.bar-area {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  box-shadow: inset 0 -1px 0 var(--ds-chart-line);
+}
+
+.bar-fill {
+  width: calc(var(--span) * var(--ds-chart-unit) - 1px);
+}
+
+.bar-fill.up {
+  background: var(--ds-chart-up);
+}
+
+.bar-fill.down {
+  background: var(--ds-chart-down);
+}
+
+.bar-fill.ink {
+  background: var(--ds-chart-faint);
+}
+
+.bar-compare {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  width: calc(var(--span) * var(--ds-chart-unit) - 1px);
+  box-shadow: inset 0 0 0 1px var(--ds-chart-ink);
+}
+
+.bar-caption,
+.bar-label {
+  font-size: var(--ds-chart-small);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.bar-label {
+  color: var(--ds-chart-muted);
+}
+
+
+@keyframes blink { from { opacity: 1; } to { opacity: .25; } }
+@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }