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

package/dist/design-system-1.bundle.js

@@ -1,4 +1,4 @@
-//#region node_modules/.pnpm/signal-polyfill@0.2.2/node_modules/signal-polyfill/dist/index.js
+//#region ../../../Design system 1/node_modules/.pnpm/signal-polyfill@0.2.2/node_modules/signal-polyfill/dist/index.js
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
 	enumerable: true,
@@ -494,7 +494,7 @@ new FinalizationRegistry((({ watcher: t, signal: i }) => {
 	t.unwatch(i);
 }));
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -528,7 +528,7 @@ var i$7 = class {
 	}
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -847,7 +847,7 @@ var D = (t, i, s) => {
 	o._$AR(), o._$AA.remove();
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/async-directive.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/async-directive.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -3841,7 +3841,7 @@ function connectSidebar(tree) {
 	};
 }
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
+//#region ../../../Design system 1/node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
 /**
 * @license
 * Copyright 2019 Google LLC
@@ -3890,7 +3890,7 @@ var c$2 = e$2 ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((t) => {
 	return r$3(e);
 })(t) : t;
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/reactive-element.js
+//#region ../../../Design system 1/node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/reactive-element.js
 var _Symbol;
 /**
 * @license
@@ -4121,7 +4121,7 @@ var y = class extends HTMLElement {
 };
 y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d("elementProperties")] = /* @__PURE__ */ new Map(), y[d("finalized")] = /* @__PURE__ */ new Map(), p?.({ ReactiveElement: y }), (a.reactiveElementVersions ?? (a.reactiveElementVersions = [])).push("2.1.2");
 //#endregion
-//#region node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -4162,7 +4162,7 @@ function define(name, element) {
 	if (!customElements.get(name)) customElements.define(name, element);
 }
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -4760,7 +4760,7 @@ _Tag = Tag;
 _Tag.styles = r$3(ds_tag_default);
 define("ds-tag", Tag);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js
 /**
 * @license
 * Copyright 2018 Google LLC
@@ -5454,7 +5454,7 @@ var ds_menu_default = "/* Shape is a surface preference. Keep these base lengths
 //#region DS1/3-unit/styles/ds-select.css?inline
 var ds_select_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n\n/*\n * Select as a field, around a native <select> (`data-field`): the menu\n * engine's own rules (an action menu's) do not reach it. One square high and\n * eight wide by default; a list one square a visible row.\n */\n:host([data-field]) {\n  --ds-select-unit: calc(var(--ds-1) * var(--ds-sf));\n  display: inline-flex;\n  position: relative;\n  vertical-align: middle;\n  width: calc(8 * var(--ds-select-unit));\n  max-width: 100%;\n  min-width: 0;\n  max-height: none;\n  height: calc(var(--ds-select-rows, 1) * var(--ds-select-unit));\n}\n:host([hidden]) { display: none !important; }\n::slotted(select) {\n  appearance: none !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  width: 100% !important;\n  min-width: 0 !important;\n  max-width: none !important;\n  height: 100% !important;\n  min-height: 0 !important;\n  margin: 0 !important;\n  padding: 0 var(--ds-select-unit) 0 calc(4px * var(--ds-sf)) !important;\n  border: 1px solid var(--ds-border-color) !important;\n  border-radius: var(--ds-radius) !important;\n  corner-shape: var(--ds-corner-shape, round) !important;\n  background: var(--ds-input-background) !important;\n  color: var(--ds-input-color) !important;\n  font-family: var(--ds-typeface-regular) !important;\n  font-size: var(--ds-type-size-default) !important;\n  font-weight: var(--ds-type-weight-default) !important;\n  letter-spacing: var(--ds-type-letterspacing-default) !important;\n  line-height: calc(var(--ds-select-unit) - 2px) !important;\n  box-shadow: none !important;\n  cursor: pointer !important;\n}\n.arrow {\n  position: absolute;\n  pointer-events: none;\n  inset-inline-end: calc(2px * var(--ds-sf));\n  top: 50%;\n  transform: translateY(-50%);\n  width: calc(.8 * var(--ds-select-unit));\n  height: calc(.8 * var(--ds-select-unit));\n  background: var(--ds-input-color);\n  mask: var(--ds-select-arrow) center / contain no-repeat;\n}\n::slotted(select:focus-visible) { outline: 2px solid var(--ds-focus-ring) !important; outline-offset: 1px !important; }\n::slotted(select:disabled) { cursor: default !important; opacity: .5 !important; }\n.arrow.disabled { opacity: .5; }\n.arrow[hidden] { display: none; }\n::slotted(select[multiple]),\n::slotted(select[size]:not([size=\"0\"]):not([size=\"1\"])) {\n  padding: 0 calc(4px * var(--ds-sf)) !important;\n}\n\n/* Intrinsic width uses the native option sizing, including translated labels. */\n:host([fit]:not([data-listbox])) { width: max-content; }\n:host([fit]:not([data-listbox])) ::slotted(select) { width: auto !important; max-width: 100% !important; }\n\n/* A settings chip keeps the same native picker, on the shared control height. */\n:host([chip]:not([data-listbox])) { height: var(--ds-control-height); }\n:host([chip]:not([data-listbox])) ::slotted(select) {\n  border: 0 !important;\n  background: var(--ds-button-background-color-secondary) !important;\n  color: var(--ds-button-text-color) !important;\n  line-height: var(--ds-control-height) !important;\n}\n:host([chip][primary]:not([data-listbox])) ::slotted(select) {\n  background: var(--ds-button-background-color-primary) !important;\n  color: var(--ds-button-text-color-on-accent) !important;\n}\n:host([chip]) .arrow { background: var(--ds-button-text-color); }\n:host([chip][primary]) .arrow { background: var(--ds-button-text-color-on-accent); }\n\n/* A colour choice uses the shared swatch; the native select remains the hit target. */\n:host([swatch]:not([swatch=\"\"]):not([data-listbox])) {\n  width: var(--ds-select-unit);\n  height: var(--ds-select-unit);\n  border-radius: var(--ds-radius);\n  background: var(--ds-input-background);\n}\n:host([swatch]:not([swatch=\"\"]):not([data-listbox])) ::slotted(select) {\n  width: 100% !important;\n  opacity: 0 !important;\n  position: relative !important;\n  z-index: 1;\n}\n:host([swatch]:not([swatch=\"\"]):not([data-listbox]):focus-within) {\n  outline: 2px solid var(--ds-focus-ring);\n  outline-offset: 1px;\n}\nds-swatch { pointer-events: none; position: absolute; inset: 0; margin: auto; }\nds-swatch.disabled { opacity: .5; }\n\n/*\n * The field's list, in place of the platform's picker (`data-listed`). The\n * select takes no pointer, so a press on the field opens the list and no\n * platform picker; the keyboard still reaches the select, and its opening keys\n * open the list. The list is the menu engine's, as wide as its choices in whole\n * squares and at least the field (`--ds-select-list-width` sets one), each choice one\n * square on the sixteen: an icon on the first square, the name, muted details,\n * a shortcut at the end and the check on the last square for the chosen one.\n */\n:host([data-listed]) { cursor: pointer; }\n:host([data-listed]) ::slotted(select) { pointer-events: none !important; }\n/* The list fits its choices on whole squares, at least as wide as the field. */\n.list { --ds-menu-width: var(--ds-select-list-width); }\n.choice,\n.group-label {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf));\n  flex: 0 0 auto;\n  width: 100%;\n  height: var(--ds-row-height);\n  min-width: 0;\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf));\n  border: 0;\n  border-radius: 0;\n  background: none;\n  color: var(--ds-text-color);\n  font: inherit;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  white-space: nowrap;\n}\n.choice { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }\n.choice:hover:not(:disabled), .choice:focus-visible { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.choice:active:not(:disabled) { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.choice:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-focus-ring); }\n.choice:disabled { cursor: default; opacity: .5; }\n.group { display: flex; flex-direction: column; }\n.group-label { color: var(--ds-text-color-muted); }\n/* A name is one line, fading over its last square where it is cut short. */\n.name { flex: 0 1 auto; min-width: 0; overflow: hidden; }\n.details { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ds-text-color-muted); }\n.shortcut { flex: none; margin-inline-start: auto; color: var(--ds-text-color-muted); }\n.mark { flex: none; width: calc(16px * var(--ds-sf)); height: calc(16px * var(--ds-sf)); }\n.check {\n  flex: none;\n  width: calc(16px * var(--ds-sf));\n  height: calc(16px * var(--ds-sf));\n  margin-inline-start: auto;\n  background: currentColor;\n  mask: var(--ds-select-check) center / contain no-repeat;\n  visibility: hidden;\n}\n.shortcut + .check { margin-inline-start: 0; }\n.choice[aria-selected=\"true\"] .check { visibility: visible; }\n.choice[aria-selected=\"true\"] .name { font-weight: var(--ds-row-current-weight, var(--ds-type-weight-bold)); }\n";
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js
 /**
 * @license
 * Copyright 2018 Google LLC
@@ -7377,7 +7377,7 @@ _Gap.properties = { size: {
 _Gap.styles = r$3(ds_gap_default);
 define("ds-gap", Gap);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/live.js
 /**
 * @license
 * Copyright 2020 Google LLC
@@ -8203,7 +8203,7 @@ _Composer.properties = {
 _Composer.styles = r$3(ds_composer_default);
 define("ds-composer", Composer);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/repeat.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/repeat.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -10062,162 +10062,15 @@ _Tooltip.properties = {
 _Tooltip.styles = r$3(ds_tooltip_default);
 define("ds-tooltip", Tooltip);
 //#endregion
-//#region DS1/3-unit/styles/ds-row.css?inline
-var ds_row_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n\n/* ds-row.css: the same rows as the native .ds-row in 1-root/row.css. What a row holds\n   stands on the lower sixteen of its square with the spare four above, as Ezo sets every\n   row: words on a 16px line box, a 16px icon and a 16px control all end on the bottom line. */\n\n:host {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: var(--ds-row-align, flex-end);\n  gap: var(--ds-row-gap, calc(4px * var(--ds-sf)));\n  min-width: 0;\n  height: var(--ds-row-default-height, var(--ds-row-height));\n  line-height: var(--ds-type-lineheight-default);\n}\n:host([hidden]) { display: none !important; }\n\n:host([auto]) {\n  height: auto;\n}\n\n:host([fill]) {\n  justify-content: space-between;\n  width: 100%;\n}\n\n:host([centered]) {\n  justify-content: center;\n}\n\n:host([end]) {\n  justify-content: flex-end;\n}\n\n:host([fill]), :host([centered]), :host([end]) {\n  height: var(--ds-row-height);\n}\n:host([centered]), :host([end]) {\n  gap: var(--ds-row-packed-gap, var(--ds-row-gap, calc(4px * var(--ds-sf))));\n}\n\n/* A tile or a card: the children stacked, each line one square, sized to them; its lines\n   wrap, so they stay on whole squares rather than the sixteen. */\n:host([stacked]) {\n  flex-direction: column;\n  line-height: var(--ds-row-height);\n  align-items: var(--ds-row-align, flex-start);\n  justify-content: flex-start;\n  gap: 0;\n  height: auto;\n}\n\n/*\n * A row a person presses. The target is the row's whole box: a layer above\n * the content takes the press anywhere on the row, a layer under it shows\n * the pointer, the press, the current destination and the focus ring.\n * Controls in the end slot stand above both and keep their own presses.\n */\n:host([href]), :host([interactive]) {\n  position: relative;\n  isolation: isolate;\n  padding-inline: var(--ds-row-padding, calc(4px * var(--ds-sf)));\n  -webkit-tap-highlight-color: transparent;\n}\n\n.target {\n  box-sizing: border-box;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  justify-content: inherit;\n  gap: inherit;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n  appearance: none;\n}\n.target::before,\n.target::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: var(--ds-row-radius, 0);\n}\n/* The state layer two pixels around what a one-square row holds (1-root/row.css says why). */\n.target::after {\n  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));\n  inset:\n    calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))\n    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang));\n  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));\n}\n:host([stacked]) .target::after,\n:host([auto]) .target::after {\n  inset: 0;\n}\n.target::before { z-index: 1; }\n.target::after { z-index: -1; }\n::slotted([slot=\"end\"]) { position: relative; z-index: 2; }\n\n.target:hover::after { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.target:active::after { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.target[aria-current] {\n  --ds-type-weight-default: var(--ds-row-current-weight, 500);\n  font-weight: var(--ds-row-current-weight, 500);\n}\n.target[aria-current]::after { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }\n:host([open]) .target::after { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }\n.target:focus-visible::after { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n\n:host([disabled]) .target { cursor: default; opacity: 0.5; }\n:host([disabled]) .target::after { background: none; }\n\n/* A navigation row: the sidebar's two-pixel corners. */\n:host([nav]) { --ds-row-radius: calc(2px * var(--ds-sf)); }\n\n@media (forced-colors: active) {\n  :host([open]) .target::after,\n  .target[aria-current]::after { outline: 1px solid Highlight; outline-offset: -1px; }\n  .target:focus-visible::after { outline-color: Highlight; }\n}\n";
-//#endregion
-//#region DS1/3-unit/ds-row.ts
-var _Row;
-/** The values `aria-current` takes besides `page`. */
-var CURRENT = /* @__PURE__ */ new Set([
-	"page",
-	"step",
-	"location",
-	"date",
-	"time",
-	"true"
-]);
-/**
-* A horizontal run of elements one row (`--ds-row-height`) tall.
-*
-* With `href` the whole row is one link, with `interactive` one button: it
-* shows the pointer over it, the press and the focus ring across the row,
-* and its content keeps the row's layout. Controls in the `end` slot stay
-* separately pressable. `current` marks the destination being shown
-* (`aria-current="page"`); `nav` draws the row as a navigation row.
-*
-* @element ds-row
-* @attr fill - Spread the children from edge to edge.
-* @attr centered - Centre the children.
-* @attr end - Push the children to the end.
-* @attr auto - Size to the content instead of one row.
-* @attr stacked - Stack the children, each on its own line, sized to them (a tile or a card).
-* @attr href - Make the row a link to this address.
-* @attr interactive - Make the row a button.
-* @attr disabled - Keep the row from being pressed.
-* @attr current - The destination being shown: `aria-current="page"`, or the value given (`step`, `location`, …).
-* @attr open - Whether this row’s details are open; controlled by the caller, with aria-expanded on its target.
-* @attr nav - Draw a navigation row: corners of two pixels, as the sidebar's rows.
-* @attr label - The accessible name, when the row's words do not say it.
-* @attr target - Where a link opens (`_blank`, …).
-* @attr rel - The link's relationship (`noopener`, …).
-* @slot - The row's content, inside its press target.
-* @slot end - Controls of their own after the content, outside the press target.
-* @fires ds-row-press - `{ href }`: the row was pressed. Cancel it to route a link yourself; a modified click on a link is left to the browser.
-* @csspart target - The link or button that is the row's press target.
-*/
-var Row = class extends i$2 {
-	constructor() {
-		super();
-		this.fill = false;
-		this.centered = false;
-		this.end = false;
-		this.auto = false;
-		this.stacked = false;
-		this.href = void 0;
-		this.interactive = false;
-		this.disabled = false;
-		this.current = void 0;
-		this.open = void 0;
-		this.nav = false;
-		this.label = void 0;
-		this.target = void 0;
-		this.rel = void 0;
-	}
-	/** The `aria-current` value, or none. */
-	get currentValue() {
-		const value = this.current;
-		if (value === null || value === void 0 || value === "false") return void 0;
-		return CURRENT.has(value) ? value : "page";
-	}
-	/** Focuses the press target, so `row.focus()` lands on the link or button. */
-	focus(options) {
-		const target = this.renderRoot?.querySelector(".target");
-		if (target) target.focus(options);
-		else super.focus(options);
-	}
-	press(event) {
-		if (this.disabled) {
-			event.preventDefault();
-			return;
-		}
-		if (this.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)) return;
-		if (!this.dispatchEvent(new CustomEvent("ds-row-press", {
-			detail: { href: this.href || void 0 },
-			bubbles: true,
-			composed: true,
-			cancelable: true
-		}))) event.preventDefault();
-	}
-	render() {
-		if (!this.href && !this.interactive) return b$1`<slot></slot>`;
-		const current = this.currentValue;
-		const label = this.label || void 0;
-		const content = b$1`<slot></slot>`;
-		return b$1`${this.href ? this.disabled ? b$1`<a class="target" part="target" role="link" aria-disabled="true" aria-label=${o$2(label)}>${content}</a>` : b$1`<a class="target" part="target" href=${this.href} target=${o$2(this.target || void 0)} rel=${o$2(this.rel || void 0)}
-            aria-expanded=${o$2(this.open === void 0 ? void 0 : String(this.open))} aria-current=${o$2(current)} aria-label=${o$2(label)} @click=${this.press}>${content}</a>` : b$1`<button class="target" part="target" type="button" ?disabled=${this.disabled}
-          aria-expanded=${o$2(this.open === void 0 ? void 0 : String(this.open))} aria-current=${o$2(current)} aria-label=${o$2(label)} @click=${this.press}>${content}</button>`}<slot name="end"></slot>`;
-	}
-};
-_Row = Row;
-_Row.properties = {
-	fill: {
-		type: Boolean,
-		reflect: true
-	},
-	centered: {
-		type: Boolean,
-		reflect: true
-	},
-	end: {
-		type: Boolean,
-		reflect: true
-	},
-	auto: {
-		type: Boolean,
-		reflect: true
-	},
-	stacked: {
-		type: Boolean,
-		reflect: true
-	},
-	href: {
-		type: String,
-		reflect: true
-	},
-	interactive: {
-		type: Boolean,
-		reflect: true
-	},
-	disabled: {
-		type: Boolean,
-		reflect: true
-	},
-	current: {
-		type: String,
-		reflect: true
-	},
-	open: {
-		type: Boolean,
-		reflect: true
-	},
-	nav: {
-		type: Boolean,
-		reflect: true
-	},
-	label: { type: String },
-	target: { type: String },
-	rel: { type: String }
-};
-_Row.styles = r$3(ds_row_default);
-define("ds-row", Row);
-//#endregion
 //#region DS1/3-unit/styles/ds-accordion.css?inline
-var ds_accordion_default = "/* ds-accordion.css */\n/* Accordion component styles using native <details>/<summary> */\n/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n\n:host {\n  display: block;\n  width: var(--ds-accordion-width, calc(12 * var(--ds-unit)));\n  max-width: 100%;\n  color: var(--ds-text-color);\n}\n:host([hidden]) { display: none !important; }\n\ndetails {\n  width: 100%;\n}\n\nsummary {\n  cursor: pointer;\n  user-select: none;\n  list-style: none;\n  outline: none;\n}\n\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n.summaryRow {\n  width: 100%;\n}\n\nds-icon.chevron {\n  transform: rotate(0deg);\n  transition: transform 140ms ease;\n}\n\ndetails[open] ds-icon.chevron {\n  transform: rotate(180deg);\n}\n\n.detailsBody {\n  padding-top: calc(var(--half) * var(--sf));\n}\n\n.detailsText {\n  display: block;\n  white-space: normal;\n  text-align: left;\n}\n\n:host([control=\"slotted\"]) { width: 100%; }\n.header { display: flex; flex-wrap: wrap; align-items: start; gap: calc(var(--ds-unit) / 2); }\n:host([control=\"slotted\"]) ::slotted([slot=\"trigger\"]) {\n  flex: 1 1 0;\n  min-width: min(calc(8 * var(--ds-unit)), 100%);\n  --ds-button-height: var(--ds-row-height);\n}\n:host([control=\"slotted\"]) ::slotted([slot=\"actions\"]) {\n  display: flex;\n  flex-wrap: wrap;\n  gap: calc(var(--ds-unit) / 2);\n  max-width: 100%;\n}\n:host([control=\"slotted\"]) ::slotted([slot=\"details\"]) { display: block; }\n:host([control=\"slotted\"]) ::slotted([slot=\"details\"][hidden]) { display: none !important; }\n";
+var ds_accordion_default = "/* ds-accordion.css\n * The summary is a row one square high: its words at the start on the sixteen, the library's\n * chevron-down (16px, in the title grey) at its end, turned over when open. The pointer fills the\n * row 4px past its words and chevron, keeping them where they stand; keyboard focus rings it.\n * The details start on the square below, their lines one square each. */\n/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n\n:host {\n  display: block;\n  width: var(--ds-accordion-width, calc(12 * var(--ds-unit)));\n  max-width: 100%;\n  color: var(--ds-text-color);\n}\n:host([hidden]) { display: none !important; }\n\ndetails {\n  width: 100%;\n}\n\nsummary {\n  display: block;\n  margin-inline: calc(-4px * var(--ds-sf, 1));\n  padding-inline: calc(4px * var(--ds-sf, 1));\n  border-radius: var(--ds-radius);\n  cursor: pointer;\n  user-select: none;\n  list-style: none;\n  outline: none;\n}\nsummary::-webkit-details-marker {\n  display: none;\n}\nsummary:hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\nsummary:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n\n.summaryRow {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(4px * var(--ds-sf, 1));\n  min-height: var(--ds-unit);\n  line-height: var(--ds-type-lineheight-default);\n}\n.summaryText { flex: 1 1 auto; min-width: 0; }\n\n.chevron {\n  flex: 0 0 auto;\n  color: var(--ds-title-color);\n}\ndetails[open] .chevron { transform: rotate(180deg); }\n@media (prefers-reduced-motion: no-preference) {\n  .chevron { transition: transform 140ms ease; }\n}\n\n.detailsBody {\n  padding: 0;\n}\n\n.detailsText {\n  display: block;\n  white-space: normal;\n  text-align: start;\n}\n\n:host([control=\"slotted\"]) { width: 100%; }\n.header { display: flex; flex-wrap: wrap; align-items: start; gap: calc(var(--ds-unit) / 2); }\n:host([control=\"slotted\"]) ::slotted([slot=\"trigger\"]) {\n  flex: 1 1 0;\n  min-width: min(calc(8 * var(--ds-unit)), 100%);\n  --ds-button-height: var(--ds-row-height);\n}\n:host([control=\"slotted\"]) ::slotted([slot=\"actions\"]) {\n  display: flex;\n  flex-wrap: wrap;\n  gap: calc(var(--ds-unit) / 2);\n  max-width: 100%;\n}\n:host([control=\"slotted\"]) ::slotted([slot=\"details\"]) { display: block; }\n:host([control=\"slotted\"]) ::slotted([slot=\"details\"][hidden]) { display: none !important; }\n";
 //#endregion
 //#region DS1/3-unit/ds-accordion.ts
 var _Accordion;
 /**
-* Native accordion using <details>/<summary> (no JS toggle logic).
+* Native accordion using <details>/<summary> (no JS toggle logic): the
+* summary one square high at the start, the library's chevron-down at its
+* end (turned over when open), the details from the square below.
 *
 * Usage (with translation text):
 * <ds-accordion summary="How it began" details="Designed in Hokkaido"></ds-accordion>
@@ -10274,22 +10127,10 @@ var Accordion = class extends i$2 {
 		return b$1`
       <details ?open=${this.open}>
         <summary>
-          <ds-row class="summaryRow" centered>
-            <ds-text .text=${this.summary} ?literal=${this.literal}></ds-text>
-            <ds-icon class="chevron" aria-hidden="true">
-              <svg
-                viewBox="0 0 10.157 8.219"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-                focusable="false"
-              >
-                <path
-                  d="M5.078 8.219L0 3.141L1.414 1.727L5.078 5.391L8.743 1.727L10.157 3.141L5.078 8.219Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </ds-icon>
-          </ds-row>
+          <span class="summaryRow">
+            <ds-text class="summaryText" .text=${this.summary} ?literal=${this.literal}></ds-text>
+            <ds-icon class="chevron" type="chevron-down" size="large" aria-hidden="true"></ds-icon>
+          </span>
         </summary>
 
         <div class="detailsBody">
@@ -10328,7 +10169,7 @@ _Accordion.properties = {
 _Accordion.styles = r$3(ds_accordion_default);
 define("ds-accordion", Accordion);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/keyed.js
+//#region ../../../Design system 1/node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/keyed.js
 /**
 * @license
 * Copyright 2021 Google LLC
@@ -10963,7 +10804,7 @@ _CalendarBase.properties = {
 };
 //#endregion
 //#region DS1/3-unit/styles/ds-calendar.css?inline
-var ds_calendar_default = "/* ds-calendar.css\n * A month on whole squares. A day is --ds-calendar-day-squares wide (four,\n * one when compact) and, beside its date's square, holds --ds-calendar-lines\n * one-square lines of events and one square to spare. Every line of words\n * stands on the lower sixteen of its square. The boxes are hairlines centred\n * on the grid lines; today is a red disc nine tenths of a square across.\n *\n * A picker is a field's face: one control high at the foot of its square,\n * ten squares wide by default, its words 4px in and the chevron-down icon\n * (16px, 2px from the end) at its end; a range is one value. Its month opens on the menu's frame, half a square from\n * the field: a 1px line, half a square inside it, no shadow, so eight squares\n * wide. Inside, on whole squares: the first and last day to type (each with\n * its time below when times are on), one square spare, the compact month one\n * square a day, then Include time and Clear, each one square, set off by\n * one-square separators with a line through them. */\n\n:host {\n  --ds-calendar-day: calc(var(--ds-unit) * var(--ds-calendar-day-squares, 4));\n  --ds-calendar-day-height: calc(var(--ds-unit) * (var(--ds-calendar-lines, 2) + 2));\n  --ds-calendar-line: 1px solid var(--ds-border-color);\n  --ds-calendar-today: var(--ds-red-for-blood);\n  --ds-calendar-today-ink: var(--ds-white, #fff);\n  --ds-calendar-selected: var(--ds-sharp-blue);\n  --ds-calendar-selected-ink: var(--ds-white, #fff);\n  --ds-calendar-band: color-mix(in srgb, var(--ds-calendar-selected) 16%, var(--ds-paper));\n  --ds-calendar-mark: calc(var(--ds-unit) * 0.9);\n  --ds-calendar-pad: calc(4px * var(--ds-sf, 1));\n  /* Heat, in four steps of the accent: its pastel, between, the colour, and\n     past it (deepened with the ink on light paper, the full colour on dark).\n     The words are the ink on every step but the two darkest on dark paper. */\n  --ds-calendar-heat-1: var(--one-apple-green-pastel, color-mix(in srgb, var(--ds-apple-green) 40%, var(--ds-paper)));\n  --ds-calendar-heat-3: var(--one-apple-green, var(--ds-apple-green));\n  --ds-calendar-heat-2: color-mix(in srgb, var(--ds-calendar-heat-1), var(--ds-calendar-heat-3));\n  --ds-calendar-heat-4: light-dark(color-mix(in srgb, var(--ds-apple-green) 60%, var(--ds-slate)), var(--ds-apple-green));\n  --ds-calendar-heat-ink-1: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-2: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-3: var(--ds-slate);\n  --ds-calendar-heat-ink-4: var(--ds-slate);\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: top;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n/* A compact day is square: one square, or two where the month has room. Its marks grow with it. */\n:host([compact]) {\n  --ds-calendar-day-height: var(--ds-calendar-day);\n  --ds-calendar-mark: calc(var(--ds-unit) * (var(--ds-calendar-day-squares, 1) * 0.75 + 0.15));\n}\n\n.calendar { width: calc(7 * var(--ds-calendar-day)); }\n\n/* The title and the arrows: one square, one square above the days (none when compact). */\n.header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n:host([compact]) .header { margin-block-end: 0; }\n.title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.controls {\n  display: flex;\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n  align-items: flex-end;\n  gap: 0;\n}\n/* Each arrow is a chevron on its own square, one control high at the square's foot,\n * in the title grey; the pointer fills it with the system's corners and inks it. */\n.nav {\n  flex: 0 0 auto;\n  width: var(--ds-unit);\n  height: var(--ds-control-height);\n  border-radius: var(--ds-radius);\n  color: var(--ds-title-color);\n}\n.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n\n/* The title as a button: pressing it travels up to the months of the year, then to twelve years.\n * One control high at the square's foot, the words on the sixteen where the title stands, the\n * pointer filling it 4px past them. */\n.title-button {\n  display: inline-flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: 0;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  margin: 0 0 0 calc(-4px * var(--ds-sf, 1));\n  padding: 0 0 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n  line-height: var(--ds-control-height);\n  letter-spacing: inherit;\n  cursor: pointer;\n}\n:host(:dir(rtl)) .title-button { margin: 0 calc(-4px * var(--ds-sf, 1)) 0 0; padding: 0 calc(4px * var(--ds-sf, 1)) 0 0; }\n.title-button:hover { background: var(--ds-fill); }\n.title-button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.title-button > ds-icon { flex: 0 0 auto; color: var(--ds-title-color); }\n\n/* The months of a year, or twelve years: cells whole squares wide, three across a narrow month\n * and four across a wider one, each row one square, one square apart. The area keeps the days'\n * height, so nothing below moves between levels. */\n.picks {\n  box-sizing: border-box;\n  height: calc(var(--ds-unit) + var(--ds-calendar-weeks, 6) * var(--ds-calendar-day-height));\n  outline: none;\n}\n.pick-row {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-pick-columns, 3), calc(var(--ds-calendar-pick-cell, 2) * var(--ds-unit)));\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n.pick {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n  outline: none;\n}\n.pick-mark {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(100% - var(--ds-unit) * 0.1);\n  height: calc(var(--ds-unit) * 0.9);\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.pick:hover:not(:disabled) .pick-mark { background: var(--ds-fill); }\n.pick:focus-visible .pick-mark { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n.pick[data-today] .pick-mark { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); }\n.pick[data-selected] .pick-mark { background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); }\n.pick:disabled { color: var(--ds-title-color); cursor: default; opacity: 0.5; }\n\n/* Clear: a button one control high at the foot of the square below the month's, one square apart. */\n.foot {\n  display: flex;\n  align-items: flex-end;\n  height: var(--ds-unit);\n  margin-block-start: var(--ds-unit);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :is(.grid, .picks)[data-travel] { animation: ds-calendar-level 160ms cubic-bezier(0.22, 1, 0.36, 1); }\n}\n@keyframes ds-calendar-level {\n  from { opacity: 0; transform: scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.grid { outline: none; }\n.weekdays,\n.week {\n  display: grid;\n  grid-template-columns: repeat(7, var(--ds-calendar-day));\n}\n\n/* The weekday names: a block line in the title grey, at the start of a wide day, centred on a compact one. */\n.weekday {\n  box-sizing: border-box;\n  height: var(--ds-unit);\n  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;\n  overflow: hidden;\n  color: var(--ds-title-color);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n:host([compact]) .weekday { padding-inline: 0; text-align: center; }\n\n/* A day's box: hairlines on the grid lines, top and start; the last column\n * and the last week close it at the end and the foot. */\n.day {\n  position: relative;\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-calendar-day-height);\n  outline: none;\n}\n.day::after {\n  position: absolute;\n  inset: -0.5px;\n  border-block-start: var(--ds-calendar-line);\n  border-inline-start: var(--ds-calendar-line);\n  content: \"\";\n  pointer-events: none;\n}\n.day:nth-child(7)::after { border-inline-end: var(--ds-calendar-line); }\n.week:last-child .day::after { border-block-end: var(--ds-calendar-line); }\n:host([compact]) .day::after { content: none; }\n\n.day[data-day] { cursor: default; }\n:host([selectable]) .day[data-day]:not([aria-disabled=\"true\"]) { cursor: pointer; }\n:host([selectable]:not([compact])) .day[data-day]:not([aria-disabled=\"true\"]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.day:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n:host([compact]) .day:focus-visible { outline: none; }\n:host([compact]) .day:focus-visible .date { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n\n/* The date: on the first square, at the end of a wide day, in the title grey. */\n.date-line {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  padding-inline: var(--ds-calendar-pad);\n}\n.date {\n  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n}\n.week-number {\n  margin-inline-end: auto;\n  color: var(--ds-title-color);\n  font-family: var(--ds-typeface-compressed);\n}\n\n/* A compact day: the date centred in its square, in the ink; with events,\n * the empty days fall back to the title grey and the busy ones keep the ink. */\n:host([compact]) .date-line { justify-content: center; padding: 0; }\n:host([compact]) .date { color: var(--ds-text-color); }\n:host([compact][data-events]) .day:not([data-busy]) .date { color: var(--ds-title-color); }\n:host([compact][selectable]) .day[data-day]:not([aria-disabled=\"true\"], [data-today], [data-selected]):hover .date { background: var(--ds-fill); }\n\n/* Today and the selected day: a disc nine tenths of a square, centred on the date's square. */\n.day:is([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\n:host([compact]) .day:is([data-today], [data-selected]) .date-line { padding: 0; }\n.date {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: 999px;\n}\n.day:not([data-today], [data-selected]) .date { min-width: 0; height: auto; }\n:host([compact]) .day .date { min-width: var(--ds-calendar-mark); height: var(--ds-calendar-mark); }\n.day[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }\n/* The selected day, and each end of a range: a square with the system's corners in the selection's blue. */\n.day[data-selected] .date { border-radius: var(--ds-radius); background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); letter-spacing: 0; }\n\n.day[aria-disabled=\"true\"] .date { color: var(--ds-title-color); opacity: 0.5; }\n\n/* Heat: the date's mark filled by its step, a picture's corners, inside the day's square; today and the selection draw over it. */\n.day[data-heat]:not([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\n.day[data-heat]:not([data-today], [data-selected]) .date {\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: var(--ds-radius);\n  letter-spacing: 0;\n}\n.day[data-heat=\"1\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-1); color: var(--ds-calendar-heat-ink-1); }\n.day[data-heat=\"2\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-2); color: var(--ds-calendar-heat-ink-2); }\n.day[data-heat=\"3\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-3); color: var(--ds-calendar-heat-ink-3); }\n.day[data-heat=\"4\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-4); color: var(--ds-calendar-heat-ink-4); }\n:host([compact]) .day[data-heat]:not([data-today], [data-selected]) .date-line { padding: 0; }\n\n/* Events: one square each, stacked edge to edge on the day's lines, drawn one pixel short. */\n.events {\n  display: flex;\n  flex-direction: column;\n}\n.event,\n.more {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: calc(var(--ds-unit) - 1px);\n  margin: 0.5px;\n  padding-inline: var(--ds-calendar-pad);\n  overflow: hidden;\n  white-space: nowrap;\n}\n.event {\n  background: var(--ds-calendar-event-fill, var(--ds-fill));\n  color: var(--ds-calendar-event-ink, var(--ds-text-color));\n  cursor: pointer;\n}\n.event .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.event .time { flex: 0 0 auto; opacity: 0.6; font-variant-numeric: tabular-nums; }\n.more { color: var(--ds-title-color); cursor: pointer; }\n.more:hover { color: var(--ds-text-color); }\n\n/* A day whose hidden events are unfolded lays them over the days below. */\n.day[data-open] { z-index: 1; }\n.day[data-open] .events {\n  position: absolute;\n  inset-block-start: var(--ds-unit);\n  inset-inline: 0;\n  background: var(--ds-paper);\n  box-shadow: 0 0 0 1px var(--ds-border-color);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .event, .more { transition: opacity 120ms ease; }\n}\n\n/* A compact day's date stands in the middle of its square once the square is two or more wide. */\n:host([compact][data-roomy]) .date-line { align-items: center; height: var(--ds-calendar-day-height); }\n\n/* The days of the months before and after, in the title grey. */\n.day[data-outside] .date { color: var(--ds-title-color); }\n:host([compact]) .day[data-outside] .date { color: var(--ds-title-color); }\n\n/* A range: the days between its ends on a band of the selection's blue; the band runs into each end's square. */\n/* In a month of boxes the band fills them; in a compact month it is the marks' height on their\n * line, from the middle of the first day to the middle of the last, so the ends and the band read\n * as one bar, the ends' squares drawn over it flush. */\n:host(:not([compact])) .day:is([data-inside], [data-first], [data-last]) { background: var(--ds-calendar-band); }\n:host([compact]) .day { isolation: isolate; }\n:host([compact]) .day:is([data-inside], [data-first], [data-last])::before {\n  position: absolute;\n  z-index: -1;\n  inset-inline: 0;\n  top: calc((var(--ds-calendar-day-height) - var(--ds-calendar-mark)) / 2);\n  height: var(--ds-calendar-mark);\n  background: var(--ds-calendar-band);\n  content: \"\";\n}\n:host([compact]) .day[data-first]::before { inset-inline-start: 50%; }\n:host([compact]) .day[data-last]::before { inset-inline-end: 50%; }\n:host([compact]) .day[data-inside] .date-line { align-items: center; padding: 0; }\n:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }\n\n/* Today, as words in the title grey beside the arrows. */\n.today-button {\n  height: var(--ds-control-height);\n  padding-inline: calc(4px * var(--ds-sf, 1));\n  border: 0;\n  background: transparent;\n  color: var(--ds-title-color);\n}\n.today-button:hover { background: var(--ds-fill); color: var(--ds-text-color); }\n\n/* In a compact month the pointer's day and the chosen day take squares with the system's corners; today keeps its disc. */\n:host([compact]) .date { border-radius: var(--ds-radius); }\n:host([compact]) .day[data-today]:not([data-selected]) .date { border-radius: 999px; }\n\n/* The picker: a field that opens the small month. */\n:host([picker]) {\n  --ds-calendar-picker-width: calc(10 * var(--ds-unit));\n  display: inline-flex;\n  align-items: flex-end;\n  vertical-align: bottom;\n  height: var(--ds-unit);\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: var(--ds-calendar-picker-width);\n  padding-inline: calc(4px * var(--ds-sf, 1)) calc(2px * var(--ds-sf, 1));\n  text-align: start;\n  cursor: pointer;\n}\n.trigger:disabled { cursor: default; }\n.trigger .arrow { flex: 0 0 auto; }\n.trigger .text {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.trigger[data-empty] .text { color: var(--ds-title-color); }\n\n/* The month's panel, on the menu's frame. */\n.popover {\n  position: fixed;\n  inset: auto;\n  box-sizing: border-box;\n  margin: 0;\n  padding: calc(var(--ds-unit) / 2 - 1px);\n  border: 1px solid var(--ds-border-color);\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  overflow: visible;\n}\n.popover:not(:popover-open) { display: none; }\n\n/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */\n.fields { margin-block-end: var(--ds-unit); }\n.field-row {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n}\n.field { flex: 1 1 auto; min-width: 0; }\n.clock { flex: 1 1 auto; min-width: 0; }\n.fields, .options { width: calc(7 * var(--ds-unit)); }\n\n/* Include time and Clear, each one square, the words on the sixteen. */\n.option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--ds-unit);\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.option:disabled { color: var(--ds-title-color); cursor: default; }\n.option .ds-switch { flex: 0 0 auto; }\n\n/* A separator: one square with a 1px line through its middle. */\n.separator {\n  position: relative;\n  height: var(--ds-unit);\n}\n.separator::after {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(50% - 0.5px);\n  height: 1px;\n  background: var(--ds-border-color);\n  content: \"\";\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .popover:popover-open {\n    animation: ds-calendar-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n}\n@keyframes ds-calendar-picker-in {\n  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }\n  to { opacity: 1; transform: none; }\n}\n";
+var ds_calendar_default = "/* ds-calendar.css\n * A month on whole squares. A day is --ds-calendar-day-squares wide (four,\n * one when compact) and, beside its date's square, holds --ds-calendar-lines\n * one-square lines of events and one square to spare. Every line of words\n * stands on the lower sixteen of its square. The boxes are hairlines centred\n * on the grid lines; today is a red disc nine tenths of a square across.\n *\n * A picker is a field's face: one control high at the foot of its square,\n * as wide as its words (it hugs them, as a button does), its words 4px in and the chevron-down icon\n * (16px, 2px from the end) at its end; a range is one value. Its month opens on the menu's frame, half a square from\n * the field: a 1px line, half a square inside it, no shadow, so eight squares\n * wide. Inside, on whole squares: the first and last day to type (each with\n * its time below when times are on), one square spare, the compact month one\n * square a day, then Include time and Clear, each one square, set off by\n * one-square separators with a line through them. */\n\n:host {\n  --ds-calendar-day: calc(var(--ds-unit) * var(--ds-calendar-day-squares, 4));\n  --ds-calendar-day-height: calc(var(--ds-unit) * (var(--ds-calendar-lines, 2) + 2));\n  --ds-calendar-line: 1px solid var(--ds-border-color);\n  --ds-calendar-today: var(--ds-red-for-blood);\n  --ds-calendar-today-ink: var(--ds-white, #fff);\n  --ds-calendar-selected: var(--ds-sharp-blue);\n  --ds-calendar-selected-ink: var(--ds-white, #fff);\n  --ds-calendar-band: color-mix(in srgb, var(--ds-calendar-selected) 16%, var(--ds-paper));\n  --ds-calendar-mark: calc(var(--ds-unit) * 0.9);\n  --ds-calendar-pad: calc(4px * var(--ds-sf, 1));\n  /* Heat, in four steps of the accent: its pastel, between, the colour, and\n     past it (deepened with the ink on light paper, the full colour on dark).\n     The words are the ink on every step but the two darkest on dark paper. */\n  --ds-calendar-heat-1: var(--one-apple-green-pastel, color-mix(in srgb, var(--ds-apple-green) 40%, var(--ds-paper)));\n  --ds-calendar-heat-3: var(--one-apple-green, var(--ds-apple-green));\n  --ds-calendar-heat-2: color-mix(in srgb, var(--ds-calendar-heat-1), var(--ds-calendar-heat-3));\n  --ds-calendar-heat-4: light-dark(color-mix(in srgb, var(--ds-apple-green) 60%, var(--ds-slate)), var(--ds-apple-green));\n  --ds-calendar-heat-ink-1: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-2: light-dark(var(--ds-slate), var(--ds-white));\n  --ds-calendar-heat-ink-3: var(--ds-slate);\n  --ds-calendar-heat-ink-4: var(--ds-slate);\n  box-sizing: border-box;\n  display: inline-block;\n  vertical-align: top;\n  color: var(--ds-text-color);\n  font-family: var(--ds-typeface-regular);\n  font-feature-settings: var(--ds-font-features);\n  font-size: var(--ds-type-size-default);\n  font-weight: var(--ds-type-weight-default);\n  line-height: var(--ds-type-lineheight-default);\n  letter-spacing: var(--ds-type-letterspacing-default);\n}\n:host([hidden]) { display: none !important; }\n/* A compact day is square: one square, or two where the month has room. Its marks grow with it. */\n:host([compact]) {\n  --ds-calendar-day-height: var(--ds-calendar-day);\n  --ds-calendar-mark: calc(var(--ds-unit) * (var(--ds-calendar-day-squares, 1) * 0.75 + 0.15));\n}\n\n.calendar { width: calc(7 * var(--ds-calendar-day)); }\n\n/* The title and the arrows: one square, one square above the days (none when compact). */\n.header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n:host([compact]) .header { margin-block-end: 0; }\n.title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.controls {\n  display: flex;\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n  align-items: flex-end;\n  gap: 0;\n}\n/* Each arrow is a chevron on its own square, one control high at the square's foot,\n * in the title grey; the pointer fills it with the system's corners and inks it. */\n.nav {\n  flex: 0 0 auto;\n  width: var(--ds-unit);\n  height: var(--ds-control-height);\n  border-radius: var(--ds-radius);\n  color: var(--ds-title-color);\n}\n.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }\n:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }\n\n/* The title as a plain button, its words alone: pressing it travels up to the months of the year,\n * then to twelve years. One control high at the square's foot, the words on the sixteen where the\n * title stands, the pointer filling it 4px past them at each side. */\n.title-button {\n  display: inline-flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: 0;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  margin: 0 0 0 calc(-4px * var(--ds-sf, 1));\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));\n  line-height: var(--ds-control-height);\n  letter-spacing: inherit;\n  cursor: pointer;\n}\n:host(:dir(rtl)) .title-button { margin: 0 calc(-4px * var(--ds-sf, 1)) 0 0; }\n.title-button:hover { background: var(--ds-fill); }\n.title-button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n/* The months of a year, or twelve years: cells whole squares wide, three across a narrow month\n * and four across a wider one, each row one square, one square apart. The area keeps the days'\n * height, so nothing below moves between levels. */\n.picks {\n  box-sizing: border-box;\n  height: calc(var(--ds-unit) + var(--ds-calendar-weeks, 6) * var(--ds-calendar-day-height));\n  outline: none;\n}\n.pick-row {\n  display: grid;\n  grid-template-columns: repeat(var(--ds-calendar-pick-columns, 3), calc(var(--ds-calendar-pick-cell, 2) * var(--ds-unit)));\n  height: var(--ds-unit);\n  margin-block-end: var(--ds-unit);\n}\n.pick {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  cursor: pointer;\n  outline: none;\n}\n.pick-mark {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(100% - var(--ds-unit) * 0.1);\n  height: calc(var(--ds-unit) * 0.9);\n  overflow: hidden;\n  border-radius: var(--ds-radius);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.pick:hover:not(:disabled) .pick-mark { background: var(--ds-fill); }\n.pick:focus-visible .pick-mark { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n.pick[data-today] .pick-mark { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); }\n.pick[data-selected] .pick-mark { background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); }\n.pick:disabled { color: var(--ds-title-color); cursor: default; opacity: 0.5; }\n\n/* Clear, only while something is chosen: a button one control high, centred on the square right under the dates. */\n.foot {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  height: var(--ds-unit);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  :is(.grid, .picks)[data-travel] { animation: ds-calendar-level 160ms cubic-bezier(0.22, 1, 0.36, 1); }\n}\n@keyframes ds-calendar-level {\n  from { opacity: 0; transform: scale(0.98); }\n  to { opacity: 1; transform: none; }\n}\n\n.grid { outline: none; }\n.weekdays,\n.week {\n  display: grid;\n  grid-template-columns: repeat(7, var(--ds-calendar-day));\n}\n\n/* The weekday names: a block line in the title grey, at the start of a wide day, centred on a compact one. */\n.weekday {\n  box-sizing: border-box;\n  height: var(--ds-unit);\n  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;\n  overflow: hidden;\n  color: var(--ds-title-color);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n:host([compact]) .weekday { padding-inline: 0; text-align: center; }\n\n/* A day's box: hairlines on the grid lines, top and start; the last column\n * and the last week close it at the end and the foot. */\n.day {\n  position: relative;\n  box-sizing: border-box;\n  min-width: 0;\n  height: var(--ds-calendar-day-height);\n  outline: none;\n}\n.day::after {\n  position: absolute;\n  inset: -0.5px;\n  border-block-start: var(--ds-calendar-line);\n  border-inline-start: var(--ds-calendar-line);\n  content: \"\";\n  pointer-events: none;\n}\n.day:nth-child(7)::after { border-inline-end: var(--ds-calendar-line); }\n.week:last-child .day::after { border-block-end: var(--ds-calendar-line); }\n:host([compact]) .day::after { content: none; }\n\n.day[data-day] { cursor: default; }\n:host([selectable]) .day[data-day]:not([aria-disabled=\"true\"]) { cursor: pointer; }\n:host([selectable]:not([compact])) .day[data-day]:not([aria-disabled=\"true\"]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.day:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n:host([compact]) .day:focus-visible { outline: none; }\n:host([compact]) .day:focus-visible .date { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }\n\n/* The date: on the first square, at the end of a wide day, in the title grey. */\n.date-line {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: var(--ds-unit);\n  padding-inline: var(--ds-calendar-pad);\n}\n.date {\n  color: var(--ds-title-color);\n  font-variant-numeric: tabular-nums;\n}\n.week-number {\n  margin-inline-end: auto;\n  color: var(--ds-title-color);\n  font-family: var(--ds-typeface-compressed);\n}\n\n/* A compact day: the date centred in its square, in the ink; with events,\n * the empty days fall back to the title grey and the busy ones keep the ink. */\n:host([compact]) .date-line { justify-content: center; padding: 0; }\n:host([compact]) .date { color: var(--ds-text-color); }\n:host([compact][data-events]) .day:not([data-busy]) .date { color: var(--ds-title-color); }\n:host([compact][selectable]) .day[data-day]:not([aria-disabled=\"true\"], [data-today], [data-selected]):hover .date { background: var(--ds-fill); }\n\n/* Today and the selected day: a disc nine tenths of a square, centred on the date's square. */\n.day:is([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\n:host([compact]) .day:is([data-today], [data-selected]) .date-line { padding: 0; }\n.date {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: 999px;\n}\n.day:not([data-today], [data-selected]) .date { min-width: 0; height: auto; }\n:host([compact]) .day .date { min-width: var(--ds-calendar-mark); height: var(--ds-calendar-mark); }\n.day[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }\n/* The selected day, and each end of a range: a square with the system's corners in the selection's blue. */\n.day[data-selected] .date { border-radius: var(--ds-radius); background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); letter-spacing: 0; }\n\n.day[aria-disabled=\"true\"] .date { color: var(--ds-title-color); opacity: 0.5; }\n\n/* Heat: the date's mark filled by its step, a picture's corners, inside the day's square; today and the selection draw over it. */\n.day[data-heat]:not([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }\n.day[data-heat]:not([data-today], [data-selected]) .date {\n  min-width: var(--ds-calendar-mark);\n  height: var(--ds-calendar-mark);\n  border-radius: var(--ds-radius);\n  letter-spacing: 0;\n}\n.day[data-heat=\"1\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-1); color: var(--ds-calendar-heat-ink-1); }\n.day[data-heat=\"2\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-2); color: var(--ds-calendar-heat-ink-2); }\n.day[data-heat=\"3\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-3); color: var(--ds-calendar-heat-ink-3); }\n.day[data-heat=\"4\"]:not([data-today], [data-selected]) .date { background: var(--ds-calendar-heat-4); color: var(--ds-calendar-heat-ink-4); }\n:host([compact]) .day[data-heat]:not([data-today], [data-selected]) .date-line { padding: 0; }\n\n/* Events: one square each, stacked edge to edge on the day's lines, drawn one pixel short. */\n.events {\n  display: flex;\n  flex-direction: column;\n}\n.event,\n.more {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  gap: var(--ds-calendar-pad);\n  height: calc(var(--ds-unit) - 1px);\n  margin: 0.5px;\n  padding-inline: var(--ds-calendar-pad);\n  overflow: hidden;\n  white-space: nowrap;\n}\n.event {\n  background: var(--ds-calendar-event-fill, var(--ds-fill));\n  color: var(--ds-calendar-event-ink, var(--ds-text-color));\n  cursor: pointer;\n}\n.event .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.event .time { flex: 0 0 auto; opacity: 0.6; font-variant-numeric: tabular-nums; }\n.more { color: var(--ds-title-color); cursor: pointer; }\n.more:hover { color: var(--ds-text-color); }\n\n/* A day whose hidden events are unfolded lays them over the days below. */\n.day[data-open] { z-index: 1; }\n.day[data-open] .events {\n  position: absolute;\n  inset-block-start: var(--ds-unit);\n  inset-inline: 0;\n  background: var(--ds-paper);\n  box-shadow: 0 0 0 1px var(--ds-border-color);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .event, .more { transition: opacity 120ms ease; }\n}\n\n/* A compact day's date stands in the middle of its square once the square is two or more wide. */\n:host([compact][data-roomy]) .date-line { align-items: center; height: var(--ds-calendar-day-height); }\n\n/* The days of the months before and after, in the title grey. */\n.day[data-outside] .date { color: var(--ds-title-color); }\n:host([compact]) .day[data-outside] .date { color: var(--ds-title-color); }\n\n/* A range: the days between its ends on a band of the selection's blue; the band runs into each end's square. */\n/* In a month of boxes the band fills them; in a compact month it is the marks' height on their\n * line, from the middle of the first day to the middle of the last, so the ends and the band read\n * as one bar, the ends' squares drawn over it flush. */\n:host(:not([compact])) .day:is([data-inside], [data-first], [data-last]) { background: var(--ds-calendar-band); }\n:host([compact]) .day { isolation: isolate; }\n:host([compact]) .day:is([data-inside], [data-first], [data-last])::before {\n  position: absolute;\n  z-index: -1;\n  inset-inline: 0;\n  top: calc((var(--ds-calendar-day-height) - var(--ds-calendar-mark)) / 2);\n  height: var(--ds-calendar-mark);\n  background: var(--ds-calendar-band);\n  content: \"\";\n}\n:host([compact]) .day[data-first]::before { inset-inline-start: 50%; }\n:host([compact]) .day[data-last]::before { inset-inline-end: 50%; }\n:host([compact]) .day[data-inside] .date-line { align-items: center; padding: 0; }\n:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }\n\n/* Today, as words in the title grey beside the arrows. */\n.today-button {\n  height: var(--ds-control-height);\n  padding-inline: calc(4px * var(--ds-sf, 1));\n  border: 0;\n  background: transparent;\n  color: var(--ds-title-color);\n}\n.today-button:hover { background: var(--ds-fill); color: var(--ds-text-color); }\n\n/* In a compact month the pointer's day and the chosen day take squares with the system's corners; today keeps its disc. */\n:host([compact]) .date { border-radius: var(--ds-radius); }\n:host([compact]) .day[data-today]:not([data-selected]) .date { border-radius: 999px; }\n\n/* The picker: a field that opens the small month. */\n:host([picker]) {\n  display: inline-flex;\n  max-width: 100%;\n  align-items: flex-end;\n  vertical-align: bottom;\n  height: var(--ds-unit);\n}\n\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: calc(4px * var(--ds-sf, 1));\n  width: var(--ds-calendar-picker-width, max-content);\n  max-width: 100%;\n  padding-inline: calc(4px * var(--ds-sf, 1)) calc(2px * var(--ds-sf, 1));\n  text-align: start;\n  cursor: pointer;\n}\n.trigger:disabled { cursor: default; }\n.trigger .arrow { flex: 0 0 auto; }\n.trigger .text {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.trigger[data-empty] .text { color: var(--ds-title-color); }\n\n/* The month's panel, on the menu's frame. */\n.popover {\n  position: fixed;\n  inset: auto;\n  box-sizing: border-box;\n  margin: 0;\n  padding: calc(var(--ds-unit) / 2 - 1px);\n  border: 1px solid var(--ds-border-color);\n  border-radius: var(--ds-radius-card);\n  background: var(--ds-paper);\n  color: var(--ds-text-color);\n  box-shadow: none;\n  overflow: visible;\n}\n.popover:not(:popover-open) { display: none; }\n\n/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */\n.fields { margin-block-end: var(--ds-unit); }\n.field-row {\n  display: flex;\n  align-items: flex-end;\n  gap: calc(var(--ds-unit) / 2);\n  height: var(--ds-unit);\n}\n.field { flex: 1 1 auto; min-width: 0; }\n.clock { flex: 1 1 auto; min-width: 0; }\n.fields, .options { width: calc(7 * var(--ds-unit)); }\n\n/* Include time and Clear, each one square, the words on the sixteen. */\n.option {\n  box-sizing: border-box;\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--ds-unit);\n  width: 100%;\n  height: var(--ds-unit);\n  margin: 0;\n  padding: 0 calc(4px * var(--ds-sf, 1));\n  border: 0;\n  border-radius: var(--ds-radius);\n  background: transparent;\n  color: var(--ds-text-color);\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: start;\n  cursor: pointer;\n}\n.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n.option:disabled { color: var(--ds-title-color); cursor: default; }\n.option .ds-switch { flex: 0 0 auto; }\n\n/* A separator: one square with a 1px line through its middle. */\n.separator {\n  position: relative;\n  height: var(--ds-unit);\n}\n.separator::after {\n  position: absolute;\n  inset-inline: 0;\n  top: calc(50% - 0.5px);\n  height: 1px;\n  background: var(--ds-border-color);\n  content: \"\";\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .popover:popover-open {\n    animation: ds-calendar-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);\n  }\n}\n@keyframes ds-calendar-picker-in {\n  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }\n  to { opacity: 1; transform: none; }\n}\n";
 //#endregion
 //#region DS1/3-unit/ds-calendar.ts
 var _Calendar;
@@ -11063,7 +10904,7 @@ var openPickers = /* @__PURE__ */ new Set();
 * @fires navigate - A person moved to another month; `{ month }`.
 * @fires ds-calendar-toggle - A picker's month opened or closed; `{ open }`.
 *
-* A selectable calendar has Clear one square below its month, and `clear()`
+* A selectable calendar shows Clear right under its dates while something is chosen, and `clear()`
 * empties the value from code; both fire `change` with an empty value.
 *
 * @example
@@ -11470,9 +11311,9 @@ var Calendar = class extends CalendarBase {
       ><span class="pick-mark">${name(value)}</span></button>`)}</div>`)}</div>`;
 	}
 	renderClear() {
-		if (!this.selectable || this.embedded || this.required) return A;
+		if (!this.selectable || this.embedded || this.required || !this.value) return A;
 		return b$1`<div class="foot" part="foot">
-      <button class="ds-button ds-button--secondary clear-value" part="clear" type="button" ?disabled=${!this.value} @click=${() => this.clear()}>${this.words("Clear")}</button>
+      <button class="ds-button ds-button--secondary clear-value" part="clear" type="button" @click=${() => this.clear()}>${this.words("Clear")}</button>
     </div>`;
 	}
 	/** The day holding the Tab stop: the one moved to, the selected day, today, or the first. */
@@ -11516,7 +11357,7 @@ var Calendar = class extends CalendarBase {
             type="button"
             aria-label=${`${title}, ${this.words("Choose a month and year")}`}
             @click=${this.levelUp}
-          ><span class="title-text" id="title" aria-live="polite">${title}</span><ds-icon type="chevron-down" size="large" aria-hidden="true"></ds-icon></button>`}
+          ><span class="title-text" id="title" aria-live="polite">${title}</span></button>`}
       <span class="controls">
         ${this.noToday || this.squaresPerDay < 2 ? A : b$1`<button class="ds-button today-button" part="today" type="button" @click=${() => this.showToday()}>${this.words("Today")}</button>`}
         ${arrow("previous")}
@@ -13264,6 +13105,155 @@ _Matrix.properties = {
 _Matrix.styles = [r$3(component_metrics_default), r$3(ds_matrix_default)];
 define("ds-matrix", Matrix);
 //#endregion
+//#region DS1/3-unit/styles/ds-row.css?inline
+var ds_row_default = "/* Shape is a surface preference. Keep these base lengths unscaled: each\n * component resolves them with its own --ds-sf in component-metrics.css. */\n[data-ds-shape=\"square\"],\n:host([data-ds-shape=\"square\"]) {\n  --ds-corner-size: 0px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 0.5px;\n}\n\n[data-ds-shape=\"rounded\"],\n:host([data-ds-shape=\"rounded\"]) {\n  --ds-corner-size: 4px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 2.5px;\n}\n\n[data-ds-shape=\"circular\"],\n:host([data-ds-shape=\"circular\"]) {\n  --ds-corner-size: 999px;\n  --ds-corner-shape: round;\n  --ds-button-inset: 5px;\n}\n\n/* A squircle needs twice an arc's radius for the same apparent corner.\n * Circular controls keep true semicircles even in a squircle browser. */\n@supports (corner-shape: squircle) {\n  [data-ds-shape=\"rounded\"],\n  :host([data-ds-shape=\"rounded\"]) {\n    --ds-corner-size: 8px;\n    --ds-corner-shape: squircle;\n  }\n}\n\n/* Resolve dimensions where a component is drawn. Inherited calc() values have\n * already used their ancestor's scale. Base tokens stay unscaled and inherit;\n * resolved tokens can still be overridden directly on a component.\n * data-ds-surface gives ordinary layout elements the same scaled measures.\n */\n:root,\n:host,\n:where([data-ds-surface]) {\n  --ds-unit: calc(var(--ds-1, 20px) * var(--ds-sf, 1));\n  --ds-control-height: calc(var(--ds-control-size, var(--ds-08, 16px)) * var(--ds-sf, 1));\n  --ds-row-height: calc(var(--ds-row-size, var(--ds-1, 20px)) * var(--ds-sf, 1));\n  --ds-type-size-default: calc(var(--ds-text-size, 14px) * var(--ds-sf, 1));\n  --ds-type-size-small: calc(var(--ds-small-text-size, 10px) * var(--ds-sf, 1));\n  --ds-type-size-heading: calc(var(--ds-heading-text-size, 13px) * var(--ds-sf, 1));\n  --ds-type-size-display: calc(var(--ds-display-text-size, 20px) * var(--ds-sf, 1));\n  --ds-type-lineheight-default: calc(var(--ds-text-leading, 16px) * var(--ds-sf, 1));\n  --ds-type-letterspacing-default: calc(var(--ds-text-tracking, -0.3px) * var(--ds-sf, 1));\n  --ds-radius: calc(var(--ds-corner-size, 4px) * var(--ds-sf, 1));\n  --ds-radius-card: calc(var(--ds-card-corner-size, 4px) * var(--ds-sf, 1));\n}\n\n/* ds-row.css: the same rows as the native .ds-row in 1-root/row.css. What a row holds\n   stands on the lower sixteen of its square with the spare four above, as Ezo sets every\n   row: words on a 16px line box, a 16px icon and a 16px control all end on the bottom line. */\n\n:host {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: var(--ds-row-align, flex-end);\n  gap: var(--ds-row-gap, calc(4px * var(--ds-sf)));\n  min-width: 0;\n  height: var(--ds-row-default-height, var(--ds-row-height));\n  line-height: var(--ds-type-lineheight-default);\n}\n:host([hidden]) { display: none !important; }\n\n:host([auto]) {\n  height: auto;\n}\n\n:host([fill]) {\n  justify-content: space-between;\n  width: 100%;\n}\n\n:host([centered]) {\n  justify-content: center;\n}\n\n:host([end]) {\n  justify-content: flex-end;\n}\n\n:host([fill]), :host([centered]), :host([end]) {\n  height: var(--ds-row-height);\n}\n:host([centered]), :host([end]) {\n  gap: var(--ds-row-packed-gap, var(--ds-row-gap, calc(4px * var(--ds-sf))));\n}\n\n/* A tile or a card: the children stacked, each line one square, sized to them; its lines\n   wrap, so they stay on whole squares rather than the sixteen. */\n:host([stacked]) {\n  flex-direction: column;\n  line-height: var(--ds-row-height);\n  align-items: var(--ds-row-align, flex-start);\n  justify-content: flex-start;\n  gap: 0;\n  height: auto;\n}\n\n/*\n * A row a person presses. The target is the row's whole box: a layer above\n * the content takes the press anywhere on the row, a layer under it shows\n * the pointer, the press, the current destination and the focus ring.\n * Controls in the end slot stand above both and keep their own presses.\n */\n:host([href]), :host([interactive]) {\n  position: relative;\n  isolation: isolate;\n  padding-inline: var(--ds-row-padding, calc(4px * var(--ds-sf)));\n  -webkit-tap-highlight-color: transparent;\n}\n\n.target {\n  box-sizing: border-box;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: inherit;\n  align-items: inherit;\n  align-self: stretch;\n  justify-content: inherit;\n  gap: inherit;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: inherit;\n  font: inherit;\n  letter-spacing: inherit;\n  text-align: inherit;\n  text-decoration: none;\n  cursor: pointer;\n  outline: none;\n  appearance: none;\n}\n.target::before,\n.target::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: var(--ds-row-radius, 0);\n}\n/* The state layer two pixels around what a one-square row holds (1-root/row.css says why). */\n.target::after {\n  --ds-row-overhang: var(--ds-row-fill-overhang, calc(2px * var(--ds-sf)));\n  inset:\n    calc(var(--ds-row-height) - var(--ds-control-height) - var(--ds-row-overhang))\n    calc(var(--ds-row-padding, calc(4px * var(--ds-sf))) - var(--ds-row-overhang))\n    calc(0px - var(--ds-row-overhang));\n  border-radius: var(--ds-row-radius, var(--ds-row-fill-radius, calc(6px * var(--ds-sf))));\n}\n:host([stacked]) .target::after,\n:host([auto]) .target::after {\n  inset: 0;\n}\n.target::before { z-index: 1; }\n.target::after { z-index: -1; }\n::slotted([slot=\"end\"]) { position: relative; z-index: 2; }\n\n.target:hover::after { background: var(--ds-row-fill-hover, var(--ds-fill)); }\n.target:active::after { background: var(--ds-row-fill-press, var(--ds-fill-hover)); }\n.target[aria-current] {\n  --ds-type-weight-default: var(--ds-row-current-weight, 500);\n  font-weight: var(--ds-row-current-weight, 500);\n}\n.target[aria-current]::after { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }\n:host([open]) .target::after { background: var(--ds-row-fill-current, var(--ds-fill-hover)); }\n.target:focus-visible::after { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }\n\n:host([disabled]) .target { cursor: default; opacity: 0.5; }\n:host([disabled]) .target::after { background: none; }\n\n/* A navigation row: the sidebar's two-pixel corners. */\n:host([nav]) { --ds-row-radius: calc(2px * var(--ds-sf)); }\n\n@media (forced-colors: active) {\n  :host([open]) .target::after,\n  .target[aria-current]::after { outline: 1px solid Highlight; outline-offset: -1px; }\n  .target:focus-visible::after { outline-color: Highlight; }\n}\n";
+//#endregion
+//#region DS1/3-unit/ds-row.ts
+var _Row;
+/** The values `aria-current` takes besides `page`. */
+var CURRENT = /* @__PURE__ */ new Set([
+	"page",
+	"step",
+	"location",
+	"date",
+	"time",
+	"true"
+]);
+/**
+* A horizontal run of elements one row (`--ds-row-height`) tall.
+*
+* With `href` the whole row is one link, with `interactive` one button: it
+* shows the pointer over it, the press and the focus ring across the row,
+* and its content keeps the row's layout. Controls in the `end` slot stay
+* separately pressable. `current` marks the destination being shown
+* (`aria-current="page"`); `nav` draws the row as a navigation row.
+*
+* @element ds-row
+* @attr fill - Spread the children from edge to edge.
+* @attr centered - Centre the children.
+* @attr end - Push the children to the end.
+* @attr auto - Size to the content instead of one row.
+* @attr stacked - Stack the children, each on its own line, sized to them (a tile or a card).
+* @attr href - Make the row a link to this address.
+* @attr interactive - Make the row a button.
+* @attr disabled - Keep the row from being pressed.
+* @attr current - The destination being shown: `aria-current="page"`, or the value given (`step`, `location`, …).
+* @attr open - Whether this row’s details are open; controlled by the caller, with aria-expanded on its target.
+* @attr nav - Draw a navigation row: corners of two pixels, as the sidebar's rows.
+* @attr label - The accessible name, when the row's words do not say it.
+* @attr target - Where a link opens (`_blank`, …).
+* @attr rel - The link's relationship (`noopener`, …).
+* @slot - The row's content, inside its press target.
+* @slot end - Controls of their own after the content, outside the press target.
+* @fires ds-row-press - `{ href }`: the row was pressed. Cancel it to route a link yourself; a modified click on a link is left to the browser.
+* @csspart target - The link or button that is the row's press target.
+*/
+var Row = class extends i$2 {
+	constructor() {
+		super();
+		this.fill = false;
+		this.centered = false;
+		this.end = false;
+		this.auto = false;
+		this.stacked = false;
+		this.href = void 0;
+		this.interactive = false;
+		this.disabled = false;
+		this.current = void 0;
+		this.open = void 0;
+		this.nav = false;
+		this.label = void 0;
+		this.target = void 0;
+		this.rel = void 0;
+	}
+	/** The `aria-current` value, or none. */
+	get currentValue() {
+		const value = this.current;
+		if (value === null || value === void 0 || value === "false") return void 0;
+		return CURRENT.has(value) ? value : "page";
+	}
+	/** Focuses the press target, so `row.focus()` lands on the link or button. */
+	focus(options) {
+		const target = this.renderRoot?.querySelector(".target");
+		if (target) target.focus(options);
+		else super.focus(options);
+	}
+	press(event) {
+		if (this.disabled) {
+			event.preventDefault();
+			return;
+		}
+		if (this.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)) return;
+		if (!this.dispatchEvent(new CustomEvent("ds-row-press", {
+			detail: { href: this.href || void 0 },
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}))) event.preventDefault();
+	}
+	render() {
+		if (!this.href && !this.interactive) return b$1`<slot></slot>`;
+		const current = this.currentValue;
+		const label = this.label || void 0;
+		const content = b$1`<slot></slot>`;
+		return b$1`${this.href ? this.disabled ? b$1`<a class="target" part="target" role="link" aria-disabled="true" aria-label=${o$2(label)}>${content}</a>` : b$1`<a class="target" part="target" href=${this.href} target=${o$2(this.target || void 0)} rel=${o$2(this.rel || void 0)}
+            aria-expanded=${o$2(this.open === void 0 ? void 0 : String(this.open))} aria-current=${o$2(current)} aria-label=${o$2(label)} @click=${this.press}>${content}</a>` : b$1`<button class="target" part="target" type="button" ?disabled=${this.disabled}
+          aria-expanded=${o$2(this.open === void 0 ? void 0 : String(this.open))} aria-current=${o$2(current)} aria-label=${o$2(label)} @click=${this.press}>${content}</button>`}<slot name="end"></slot>`;
+	}
+};
+_Row = Row;
+_Row.properties = {
+	fill: {
+		type: Boolean,
+		reflect: true
+	},
+	centered: {
+		type: Boolean,
+		reflect: true
+	},
+	end: {
+		type: Boolean,
+		reflect: true
+	},
+	auto: {
+		type: Boolean,
+		reflect: true
+	},
+	stacked: {
+		type: Boolean,
+		reflect: true
+	},
+	href: {
+		type: String,
+		reflect: true
+	},
+	interactive: {
+		type: Boolean,
+		reflect: true
+	},
+	disabled: {
+		type: Boolean,
+		reflect: true
+	},
+	current: {
+		type: String,
+		reflect: true
+	},
+	open: {
+		type: Boolean,
+		reflect: true
+	},
+	nav: {
+		type: Boolean,
+		reflect: true
+	},
+	label: { type: String },
+	target: { type: String },
+	rel: { type: String }
+};
+_Row.styles = r$3(ds_row_default);
+define("ds-row", Row);
+//#endregion
 //#region DS1/1-root/table.css?inline
 var table_default = "/*\n * A table: words straight on the paper, one square a row. No box and no\n * column lines: each row stands on a hairline at its foot, its words set on\n * that line like a caption: the sixteen of words against the 1px line, three\n * spare above, a 20px pitch, as Ezo sets every row.\n * Column headers keep the text's weight in the title grey; the first column\n * of a body row is a row header in the text colour. Nothing is filled with\n * the accent except a cell someone has selected.\n *\n * `.ds-table` dresses a native <table>; `<ds-table>` draws the same table\n * from data. Put a wide table in `.ds-table-scroll` to scroll it sideways,\n * and give the table `data-sticky` to keep its first column in place.\n *\n *   <th data-numeric>, <td data-numeric>   numbers, set to the column's end\n *   <tfoot>                                totals, under a line of their own\n *   <th colspan=\"2\">                       a column group, in a header row\n *   <th scope=\"rowgroup\">                  a row group, a heading row in grey\n *   <td aria-selected=\"true\">              a selected cell\n *\n * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by\n * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px\n * in on the sixteen. Words that do not fit fade out over the last square\n * where they are cut, never an ellipsis: put them in `.ds-table__words`,\n * which carries the fade (a mask, so it fades to whatever is behind: the\n * paper, a selected or hovered cell's fill). A table marked `data-fit`\n * (`<ds-table sheet>` is) measures its cells and marks the cut ones\n * `data-cut=\"end\"`, or `\"start\"` for a number it has scrolled to its end, so\n * words that fit never fade; without it every cell's end fades. Column letters and the row numbers\n * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place\n * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table\n * `--ds-table-columns` (the number of data columns) and the scroll a height\n * with `--ds-table-height`.\n *\n * `data-reorderable` (set by `<ds-table sheet reorderable>`) gives each row\n * number a grip, `.ds-table__handle` with the `handle` icon, in place of the\n * number while the row is hovered or the grip focused. A lifted row\n * (`tr[data-lifted]`) keeps the paper behind it and follows the pointer; while\n * `data-moving` is on the table the other rows step aside in transform alone,\n * a sortable list's 200ms on cubic-bezier(0.2, 0, 0, 1), and never under\n * reduced motion.\n */\n\n.ds-table {\n  --ds-table-row: var(--ds-row-height, calc(20px * var(--ds-sf, 1)));\n  --ds-table-gap: calc(var(--ds-table-row) / 2);\n  --ds-table-rule: var(--ds-border-color, light-dark(#d8d8d8, #3d3d3d));\n  --ds-table-paper: var(--ds-background, Canvas);\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  color: var(--ds-text-color, inherit);\n  font-family: var(--ds-typeface-regular, inherit);\n  font-feature-settings: var(--ds-font-features, normal);\n  font-size: var(--ds-type-size-default, 14px);\n  letter-spacing: var(--ds-type-letterspacing-default, normal);\n}\n\n.ds-table :is(th, td) {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-gap) 0 0;\n  border: 0;\n  border-bottom: 1px solid var(--ds-table-rule);\n  background: transparent;\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  vertical-align: bottom;\n  font-weight: inherit;\n  white-space: nowrap;\n}\n\n.ds-table :is(th, td):last-child {\n  padding-inline-end: 0;\n}\n\n.ds-table thead th,\n.ds-table th[scope=\"rowgroup\"] {\n  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));\n}\n\n.ds-table tbody th:not([scope=\"rowgroup\"]) {\n  color: inherit;\n}\n\n.ds-table [data-numeric] {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Totals: the rule above them is the last body row's; theirs closes the table. */\n.ds-table tfoot :is(th, td) {\n  color: inherit;\n}\n\n.ds-table [aria-selected=\"true\"] {\n  background: var(--ds-accent-color, Highlight);\n  color: var(--ds-button-text-color-on-accent, inherit);\n}\n\n.ds-table :is(th, td):has(> :is(a, button):only-child) {\n  cursor: pointer;\n}\n\n.ds-table caption {\n  box-sizing: border-box;\n  height: var(--ds-table-row);\n  padding-top: calc(var(--ds-table-row) - var(--ds-type-lineheight-default));\n  line-height: var(--ds-type-lineheight-default);\n  text-align: start;\n  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));\n}\n\n.ds-table-scroll {\n  max-width: 100%;\n  overflow-x: auto;\n  overscroll-behavior-x: contain;\n}\n\n.ds-table-scroll > .ds-table {\n  width: max-content;\n  min-width: 100%;\n}\n\n.ds-table[data-sticky] :is(th, td):first-child {\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n}\n\n.ds-table[data-sticky] [aria-selected=\"true\"]:first-child {\n  background: var(--ds-accent-color, Highlight);\n}\n\n/* Keep the row whose details are open visible, including its sticky first cell.\n   Cell selection remains independent and keeps its accent. */\n.ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n  background: var(--ds-row-fill-current, var(--ds-fill-hover));\n}\n@media (forced-colors: active) {\n  .ds-table tbody > tr[data-open]:not([data-open=\"false\"]) > :is(th, td):not([aria-selected=\"true\"]) {\n    background: Highlight;\n    color: HighlightText;\n  }\n}\n\n/* A spreadsheet: cells four squares by one, on lines, lettered and numbered. */\n.ds-table[data-sheet] {\n  --ds-table-cell: calc(4 * var(--ds-table-row));\n  --ds-table-index: calc(2 * var(--ds-table-row));\n  --ds-table-text: calc(4px * var(--ds-sf, 1));\n  table-layout: fixed;\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.ds-table-scroll > .ds-table[data-sheet] {\n  width: calc(var(--ds-table-index) + var(--ds-table-columns, 8) * var(--ds-table-cell));\n  min-width: 0;\n}\n.ds-table[data-sheet] :is(th, td) {\n  width: var(--ds-table-cell);\n  max-width: var(--ds-table-cell);\n  height: var(--ds-table-row);\n  padding: 0 var(--ds-table-text);\n  border-bottom: 1px solid var(--ds-table-rule);\n  border-inline-end: 1px solid var(--ds-table-rule);\n  overflow: hidden;\n}\n.ds-table[data-sheet] :is(th, td):last-child {\n  padding-inline-end: var(--ds-table-text);\n}\n.ds-table[data-sheet] .ds-table__words {\n  --ds-table-fade-to: right;\n  --ds-table-fade-from: left;\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.ds-table[data-sheet]:dir(rtl) .ds-table__words {\n  --ds-table-fade-to: left;\n  --ds-table-fade-from: right;\n}\n/* Cut words fade over their last square to nothing, at the edge where they are cut. */\n.ds-table[data-sheet]:not([data-fit]) .ds-table__words,\n.ds-table[data-sheet] .ds-table__words[data-cut=\"end\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-to), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__words[data-cut=\"start\"] {\n  mask-image: linear-gradient(to var(--ds-table-fade-from), #000 calc(100% - var(--ds-table-row)), transparent);\n}\n.ds-table[data-sheet] .ds-table__number {\n  width: var(--ds-table-index);\n  max-width: var(--ds-table-index);\n  position: sticky;\n  inset-inline-start: 0;\n  z-index: 1;\n  background: var(--ds-table-paper);\n  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table[data-sheet] thead :is(th, td) {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n  background: var(--ds-table-paper);\n}\n.ds-table[data-sheet] thead tr + tr :is(th, td) {\n  top: var(--ds-table-row);\n}\n.ds-table[data-sheet] thead .ds-table__number {\n  z-index: 4;\n}\n.ds-table[data-sheet] .ds-table__letters td {\n  color: var(--ds-title-color, light-dark(#797979, #9a9a9a));\n  text-align: center;\n}\n.ds-table[data-sheet] tbody td:not([data-numeric]) {\n  color: inherit;\n}\n.ds-table[data-sheet] [aria-selected=\"true\"] {\n  background: transparent;\n  color: inherit;\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n.ds-table-scroll:has(> .ds-table[data-sheet]) {\n  max-height: var(--ds-table-height, none);\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n/* Rows that move: a grip on the number, the lifted row on paper, the others stepping aside. */\n.ds-table[data-sheet][data-reorderable] tbody .ds-table__number {\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n.ds-table__index {\n  transition: opacity 100ms ease;\n}\n.ds-table__handle {\n  all: unset;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  color: var(--ds-reorder-color, light-dark(#777777, #cccccc));\n  cursor: grab;\n  opacity: 0;\n  transition: opacity 100ms ease;\n}\n.ds-table__handle:hover {\n  color: var(--ds-reorder-active-color, light-dark(#333333, #ffffff));\n}\n.ds-table__handle:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);\n}\n@media (hover: hover) {\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__handle { opacity: 1; }\n  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__index { opacity: 0; }\n}\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__handle { opacity: 1; }\n.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__index { opacity: 0; }\n.ds-table[data-moving] tbody tr {\n  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n}\n.ds-table[data-moving],\n.ds-table[data-moving] * {\n  cursor: grabbing;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] {\n  position: relative;\n  z-index: 2;\n  transition: none;\n}\n.ds-table[data-sheet] tbody tr[data-lifted] > :is(th, td) {\n  background: var(--ds-table-paper);\n  box-shadow: inset 0 1px var(--ds-table-rule);\n}\n.ds-table__status {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ds-table[data-moving] tbody tr,\n  .ds-table__index,\n  .ds-table__handle {\n    transition: none;\n  }\n}\n";
 //#endregion
@@ -16279,7 +16269,7 @@ _Sidebar.properties = {
 _Sidebar.styles = r$3(ds_sidebar_default);
 define("ds-sidebar", Sidebar);
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js
+//#region ../../../Design system 1/node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -16322,7 +16312,7 @@ function n(t) {
 	})(t, e, o);
 }
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js
+//#region ../../../Design system 1/node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.js
 /**
 * @license
 * Copyright 2017 Google LLC