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

package/DS1/3-unit/styles/ds-calendar.css

@@ -0,0 +1,238 @@
+/* ds-calendar.css
+ * A month on whole squares. A day is --ds-calendar-day-squares wide (four,
+ * one when compact) and, beside its date's square, holds --ds-calendar-lines
+ * one-square lines of events and one square to spare. Every line of words
+ * stands on the lower sixteen of its square. The boxes are hairlines centred
+ * on the grid lines; today is a red disc nine tenths of a square across. */
+
+:host {
+  --ds-calendar-day: calc(var(--ds-unit) * var(--ds-calendar-day-squares, 4));
+  --ds-calendar-day-height: calc(var(--ds-unit) * (var(--ds-calendar-lines, 2) + 2));
+  --ds-calendar-line: 1px solid var(--ds-border-color);
+  --ds-calendar-today: var(--ds-red-for-blood);
+  --ds-calendar-today-ink: var(--ds-white, #fff);
+  --ds-calendar-selected: var(--ds-sharp-blue);
+  --ds-calendar-selected-ink: var(--ds-white, #fff);
+  --ds-calendar-band: color-mix(in srgb, var(--ds-calendar-selected) 16%, var(--ds-paper));
+  --ds-calendar-mark: calc(var(--ds-unit) * 0.9);
+  --ds-calendar-pad: calc(4px * var(--ds-sf, 1));
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: top;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+:host([hidden]) { display: none !important; }
+/* A compact day is square: one square, or two where the month has room. Its marks grow with it. */
+:host([compact]) {
+  --ds-calendar-day-height: var(--ds-calendar-day);
+  --ds-calendar-mark: calc(var(--ds-unit) * (var(--ds-calendar-day-squares, 1) * 0.75 + 0.15));
+}
+
+.calendar { width: calc(7 * var(--ds-calendar-day)); }
+
+/* The title and the arrows: one square, one square above the days (none when compact). */
+.header {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  gap: var(--ds-calendar-pad);
+  height: var(--ds-unit);
+  margin-block-end: var(--ds-unit);
+}
+:host([compact]) .header { margin-block-end: 0; }
+.title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.controls {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: flex-end;
+  gap: 0;
+}
+/* Each arrow is a chevron on its own square, one control high at the square's foot,
+ * in the title grey; the pointer fills it with the system's corners and inks it. */
+.nav {
+  flex: 0 0 auto;
+  width: var(--ds-unit);
+  height: var(--ds-control-height);
+  border-radius: var(--ds-radius);
+  color: var(--ds-title-color);
+}
+.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }
+:host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }
+
+.grid { outline: none; }
+.weekdays,
+.week {
+  display: grid;
+  grid-template-columns: repeat(7, var(--ds-calendar-day));
+}
+
+/* The weekday names: a block line in the title grey, at the start of a wide day, centred on a compact one. */
+.weekday {
+  box-sizing: border-box;
+  height: var(--ds-unit);
+  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;
+  overflow: hidden;
+  color: var(--ds-title-color);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host([compact]) .weekday { padding-inline: 0; text-align: center; }
+
+/* A day's box: hairlines on the grid lines, top and start; the last column
+ * and the last week close it at the end and the foot. */
+.day {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  height: var(--ds-calendar-day-height);
+  outline: none;
+}
+.day::after {
+  position: absolute;
+  inset: -0.5px;
+  border-block-start: var(--ds-calendar-line);
+  border-inline-start: var(--ds-calendar-line);
+  content: "";
+  pointer-events: none;
+}
+.day:nth-child(7)::after { border-inline-end: var(--ds-calendar-line); }
+.week:last-child .day::after { border-block-end: var(--ds-calendar-line); }
+:host([compact]) .day::after { content: none; }
+
+.day[data-day] { cursor: default; }
+:host([selectable]) .day[data-day]:not([aria-disabled="true"]) { cursor: pointer; }
+:host([selectable]:not([compact])) .day[data-day]:not([aria-disabled="true"]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.day:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+:host([compact]) .day:focus-visible { outline: none; }
+:host([compact]) .day:focus-visible .date { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }
+
+/* The date: on the first square, at the end of a wide day, in the title grey. */
+.date-line {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: var(--ds-calendar-pad);
+  height: var(--ds-unit);
+  padding-inline: var(--ds-calendar-pad);
+}
+.date {
+  color: var(--ds-title-color);
+  font-variant-numeric: tabular-nums;
+}
+.week-number {
+  margin-inline-end: auto;
+  color: var(--ds-title-color);
+  font-family: var(--ds-typeface-compressed);
+}
+
+/* A compact day: the date centred in its square, in the ink; with events,
+ * the empty days fall back to the title grey and the busy ones keep the ink. */
+:host([compact]) .date-line { justify-content: center; padding: 0; }
+:host([compact]) .date { color: var(--ds-text-color); }
+:host([compact][data-events]) .day:not([data-busy]) .date { color: var(--ds-title-color); }
+:host([compact][selectable]) .day[data-day]:not([aria-disabled="true"], [data-today], [data-selected]):hover .date { background: var(--ds-fill); }
+
+/* Today and the selected day: a disc nine tenths of a square, centred on the date's square. */
+.day:is([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }
+:host([compact]) .day:is([data-today], [data-selected]) .date-line { padding: 0; }
+.date {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ds-calendar-mark);
+  height: var(--ds-calendar-mark);
+  border-radius: 999px;
+}
+.day:not([data-today], [data-selected]) .date { min-width: 0; height: auto; }
+:host([compact]) .day .date { min-width: var(--ds-calendar-mark); height: var(--ds-calendar-mark); }
+.day[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }
+/* The selected day, and each end of a range: a square with the system's corners in the selection's blue. */
+.day[data-selected] .date { border-radius: var(--ds-radius); background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); letter-spacing: 0; }
+
+.day[aria-disabled="true"] .date { color: var(--ds-title-color); opacity: 0.5; }
+
+/* Events: one square each, stacked edge to edge on the day's lines, drawn one pixel short. */
+.events {
+  display: flex;
+  flex-direction: column;
+}
+.event,
+.more {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  gap: var(--ds-calendar-pad);
+  height: calc(var(--ds-unit) - 1px);
+  margin: 0.5px;
+  padding-inline: var(--ds-calendar-pad);
+  overflow: hidden;
+  white-space: nowrap;
+}
+.event {
+  background: var(--ds-calendar-event-fill, var(--ds-fill));
+  color: var(--ds-calendar-event-ink, var(--ds-text-color));
+  cursor: pointer;
+}
+.event .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.event .time { flex: 0 0 auto; opacity: 0.6; font-variant-numeric: tabular-nums; }
+.more { color: var(--ds-title-color); cursor: pointer; }
+.more:hover { color: var(--ds-text-color); }
+
+/* A day whose hidden events are unfolded lays them over the days below. */
+.day[data-open] { z-index: 1; }
+.day[data-open] .events {
+  position: absolute;
+  inset-block-start: var(--ds-unit);
+  inset-inline: 0;
+  background: var(--ds-paper);
+  box-shadow: 0 0 0 1px var(--ds-border-color);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .event, .more { transition: opacity 120ms ease; }
+}
+
+/* A compact day's date stands in the middle of its square once the square is two or more wide. */
+:host([compact][data-roomy]) .date-line { align-items: center; height: var(--ds-calendar-day-height); }
+
+/* The days of the months before and after, in the title grey. */
+.day[data-outside] .date { color: var(--ds-title-color); }
+:host([compact]) .day[data-outside] .date { color: var(--ds-title-color); }
+
+/* A range: the days between its ends on a band of the selection's blue; the band runs into each end's square. */
+.day[data-inside] { background: var(--ds-calendar-band); }
+:host(:not([compact])) .day:is([data-first], [data-last]) { background: var(--ds-calendar-band); }
+:host([compact]) .day[data-first] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }
+:host([compact]) .day[data-last] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }
+:host([compact]:dir(rtl)) .day[data-first] { background: linear-gradient(to left, transparent 50%, var(--ds-calendar-band) 50%); }
+:host([compact]:dir(rtl)) .day[data-last] { background: linear-gradient(to right, transparent 50%, var(--ds-calendar-band) 50%); }
+:host([compact][selectable]) .day[data-inside]:hover .date { background: transparent; }
+
+/* Today, as words in the title grey beside the arrows. */
+.today-button {
+  height: var(--ds-control-height);
+  padding-inline: calc(4px * var(--ds-sf, 1));
+  border: 0;
+  background: transparent;
+  color: var(--ds-title-color);
+}
+.today-button:hover { background: var(--ds-fill); color: var(--ds-text-color); }
+
+/* In a compact month the pointer's day and the chosen day take squares with the system's corners; today keeps its disc. */
+:host([compact]) .date { border-radius: var(--ds-radius); }
+:host([compact]) .day[data-today]:not([data-selected]) .date { border-radius: 999px; }

package/DS1/3-unit/styles/ds-carousel.css

@@ -0,0 +1,30 @@
+/* ds-carousel.css */
+/* The element only places the parts; 1-root/carousel.css draws them and
+   controls.css the buttons. The slides are the element's children, so the
+   track's rules for its children are said again for slotted ones. */
+
+:host {
+  display: block;
+  min-width: 0;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+::slotted(*) {
+  box-sizing: border-box;
+  flex: none;
+  min-width: 0;
+  margin: 0;
+  scroll-snap-align: start;
+}
+
+/* One slide to a stop; a strip of slides of their own width may pass a few. */
+:host(:not([slide-width="auto"])) ::slotted(*) {
+  scroll-snap-stop: always;
+}
+
+:host(:dir(rtl)) :is(.ds-carousel__previous, .ds-carousel__next) > ds-icon {
+  transform: scaleX(-1);
+}

package/DS1/3-unit/styles/ds-date-picker.css

@@ -0,0 +1,124 @@
+/* ds-date-picker.css
+ * The field is the select's face: one control high at the foot of its
+ * square, ten squares wide by default, the calendar icon at its start and
+ * the down arrow at its end. The panel opens on the menu's frame, half a
+ * square from the field: a 1px line, half a square inside it, no shadow, so
+ * eight squares wide. Inside, on whole squares: the first and last day to
+ * type (each with its time below when times are on), one square spare, the
+ * compact month one square a day with 18px marks, then Include time and
+ * Clear, each one square, set off by one-square separators with a line
+ * through them. */
+
+:host {
+  --ds-date-picker-width: calc(10 * var(--ds-unit));
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: flex-end;
+  vertical-align: bottom;
+  height: var(--ds-unit);
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-type-lineheight-default);
+}
+:host([hidden]) { display: none !important; }
+
+.trigger {
+  display: inline-flex;
+  align-items: flex-end;
+  gap: calc(4px * var(--ds-sf, 1));
+  width: var(--ds-date-picker-width);
+  padding-inline: 0 calc(4px * var(--ds-sf, 1));
+  text-align: start;
+  cursor: pointer;
+}
+.trigger:disabled { cursor: default; }
+.trigger .icon,
+.trigger .arrow { flex: 0 0 auto; }
+.trigger .text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.trigger[data-empty] .text { color: var(--ds-title-color); }
+.trigger[aria-expanded="true"] .arrow { transform: rotate(180deg); }
+
+/* The panel, on the menu's frame. */
+.popover {
+  position: fixed;
+  inset: auto;
+  box-sizing: border-box;
+  margin: 0;
+  padding: calc(var(--ds-unit) / 2 - 1px);
+  border: 1px solid var(--ds-border-color);
+  border-radius: var(--ds-radius-card);
+  background: var(--ds-paper);
+  color: var(--ds-text-color);
+  box-shadow: none;
+  overflow: visible;
+}
+.popover:not(:popover-open) { display: none; }
+
+/* The days to type: a row of one square for each end, its time on the row below; one square spare after. */
+.fields { margin-block-end: var(--ds-unit); }
+.field-row {
+  display: flex;
+  align-items: flex-end;
+  gap: calc(var(--ds-unit) / 2);
+  height: var(--ds-unit);
+}
+.field { flex: 1 1 auto; min-width: 0; }
+.clock { flex: 1 1 auto; min-width: 0; }
+.fields, .options { width: calc(7 * var(--ds-unit)); }
+
+/* The switches and Clear, each one square, the words on the sixteen. */
+.option {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--ds-unit);
+  width: 100%;
+  height: var(--ds-unit);
+  margin: 0;
+  padding: 0 calc(4px * var(--ds-sf, 1));
+  border: 0;
+  border-radius: var(--ds-radius);
+  background: transparent;
+  color: var(--ds-text-color);
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+.option:hover:not(:disabled) { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.option:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+.option:disabled { color: var(--ds-title-color); cursor: default; }
+.option .ds-switch { flex: 0 0 auto; }
+
+/* A separator: one square with a 1px line through its middle. */
+.separator {
+  position: relative;
+  height: var(--ds-unit);
+}
+.separator::after {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(50% - 0.5px);
+  height: 1px;
+  background: var(--ds-border-color);
+  content: "";
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .popover:popover-open {
+    animation: ds-date-picker-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  .trigger .arrow { transition: transform 140ms ease; }
+}
+@keyframes ds-date-picker-in {
+  from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }
+  to { opacity: 1; transform: none; }
+}

package/DS1/3-unit/styles/ds-list.css

@@ -10,6 +10,7 @@
   width: 100%;
   min-width: 0;
 }
+:host([hidden]) { display: none !important; }
 
 :host([columns]) {
   display: grid;

package/DS1/3-unit/styles/ds-matrix.css

@@ -0,0 +1,203 @@
+/* ds-matrix.css
+ * Rows against columns on the 20px pitch: the row names in --ds-matrix-names
+ * squares (eight), then one square per column, each square 19px inside and a
+ * 1px line at its end and foot, so a mark fills the inside exactly. Above,
+ * a bar one square high for each group of columns, then their names rising
+ * at 45° in six squares. One outline with the system's 4px corners goes round
+ * the squares. The legend below, in small type, starts where the squares do. */
+
+:host {
+  --ds-matrix-line: var(--ds-border-color);
+  --ds-matrix-colour: var(--ds-accent-color);
+  --ds-matrix-heading: calc(var(--ds-unit) * 6);
+  box-sizing: border-box;
+  display: block;
+  min-width: 0;
+  color: var(--ds-text-color);
+  font-family: var(--ds-typeface-regular);
+  font-feature-settings: var(--ds-font-features);
+  font-size: var(--ds-type-size-default);
+  font-weight: var(--ds-type-weight-default);
+  line-height: var(--ds-type-lineheight-default);
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+:host([hidden]) { display: none !important; }
+
+.matrix {
+  /* Room at the end for the last slanted names. */
+  padding-inline-end: var(--ds-matrix-heading);
+  overflow-x: auto;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: calc(var(--ds-unit) * var(--ds-matrix-names, 8)) repeat(var(--ds-matrix-columns, 1), var(--ds-unit));
+  grid-template-rows: var(--ds-unit) var(--ds-matrix-heading) repeat(var(--ds-matrix-body, 1), var(--ds-unit));
+  width: max-content;
+  outline: none;
+}
+.row { display: contents; }
+
+/* A group's bar: its colour, its name in the ink on the sixteen, fading out over its last 12px. */
+.group {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  grid-row: 1;
+  min-width: 0;
+  border-inline-end: 1px solid var(--ds-paper);
+  background: var(--ds-matrix-colour);
+  color: var(--ds-slate);
+  font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
+}
+.group > span {
+  position: absolute;
+  inset-inline: calc(4px * var(--ds-sf, 1)) 0;
+  bottom: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 12px * var(--ds-sf, 1)), transparent);
+  mask-image: linear-gradient(to right, #000 calc(100% - 12px * var(--ds-sf, 1)), transparent);
+}
+
+.corner { grid-row: 2; grid-column: 1; }
+
+/* A column's name rises at 45° from the middle of its square, read left to right. */
+.column {
+  position: relative;
+  grid-row: 2;
+  background: color-mix(in srgb, var(--ds-matrix-colour) 22%, transparent);
+  cursor: pointer;
+}
+.column > span {
+  position: absolute;
+  inset-inline-start: calc(var(--ds-unit) / 2);
+  bottom: calc(4px * var(--ds-sf, 1));
+  z-index: 2;
+  white-space: nowrap;
+  transform: rotate(-45deg);
+  transform-origin: 0 100%;
+}
+:host(:dir(rtl)) .column > span { transform: rotate(45deg); transform-origin: 100% 100%; }
+.column[data-lit] > span { text-decoration: underline; text-underline-offset: 3px; }
+
+/* The row names end 4px clear of the squares, cut short when they must be. */
+.name {
+  box-sizing: border-box;
+  grid-column: 1;
+  min-width: 0;
+  padding-inline-end: calc(4px * var(--ds-sf, 1));
+  overflow: hidden;
+  text-align: end;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.name[data-lit] { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.name.totals { color: var(--ds-title-color); cursor: default; }
+
+/* A square: 19px inside, a line at its end and its foot, tinted by its group. */
+.cell {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  border-inline-end: 1px solid var(--ds-matrix-line);
+  border-block-end: 1px solid var(--ds-matrix-line);
+  background: color-mix(in srgb, var(--ds-matrix-colour) 22%, var(--ds-paper));
+  outline: none;
+  cursor: pointer;
+}
+.cell[data-lit] { background: color-mix(in srgb, var(--ds-matrix-colour) 22%, var(--ds-row-fill-hover, var(--ds-fill))); }
+.cell:focus-visible { z-index: 4; outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+.count {
+  align-items: flex-end;
+  color: var(--ds-title-color);
+  font-size: var(--ds-type-size-small);
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  padding-block-end: calc(4px * var(--ds-sf, 1));
+  cursor: default;
+}
+
+/* One line round the squares, with the system's corners, laid over their outer lines. */
+.frame {
+  position: absolute;
+  z-index: 3;
+  grid-row: 3 / span var(--ds-matrix-body, 1);
+  grid-column: 2 / -1;
+  inset: -1px 0 0 -1px;
+  border: 1px solid var(--ds-matrix-line);
+  border-radius: var(--ds-radius);
+  pointer-events: none;
+}
+
+/* The marks, each drawn in a darker shade of its column's colour. */
+.mark {
+  --ds-matrix-shade: color-mix(in srgb, var(--ds-matrix-colour) 45%, var(--ds-text-color));
+  display: block;
+  flex: none;
+  box-sizing: border-box;
+  width: calc(var(--ds-unit) - 1px);
+  height: calc(var(--ds-unit) - 1px);
+}
+.mark[data-mark="fill"] { background: var(--ds-matrix-colour); }
+.mark[data-mark="outline"] {
+  border: 1px solid var(--ds-matrix-shade);
+  background: color-mix(in srgb, var(--ds-matrix-colour) 40%, transparent);
+}
+/* Stripes on a 4px tile: the squares are 20px apart, five tiles, so they run on from square to square. */
+.mark[data-mark="stripes"] {
+  background: linear-gradient(135deg, var(--ds-matrix-shade) 25%, transparent 25% 50%, var(--ds-matrix-shade) 50% 75%, transparent 75%) 0 0 / 4px 4px;
+}
+.mark[data-mark="dot"] {
+  width: 7px;
+  height: 7px;
+  margin-block-start: 6px;
+  border-radius: 50%;
+  background: var(--ds-matrix-shade);
+}
+.mark[data-mark="triangle"] {
+  width: 9px;
+  height: 8px;
+  margin-block-start: 6px;
+  background: var(--ds-matrix-shade);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+.mark[data-mark="dash"] {
+  width: 9px;
+  height: 1px;
+  margin-block-start: 9px;
+  background: var(--ds-title-color);
+}
+
+/* The legend: one line of small type, starting where the squares start; each mark in a 16px box on the sixteen. */
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 var(--ds-unit);
+  margin-block-start: var(--ds-unit);
+  padding-inline-start: calc(var(--ds-unit) * var(--ds-matrix-names, 8));
+  color: var(--ds-title-color);
+  font-size: var(--ds-type-size-small);
+  line-height: var(--ds-unit);
+}
+.key { display: inline-flex; align-items: center; gap: calc(4px * var(--ds-sf, 1)); white-space: nowrap; }
+.key-mark {
+  --ds-matrix-colour: var(--ds-title-color);
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-control-height);
+  height: var(--ds-control-height);
+}
+.key-mark .mark { --ds-matrix-shade: var(--ds-text-color); margin: 0; }
+.key-mark .mark[data-mark="fill"],
+.key-mark .mark[data-mark="outline"],
+.key-mark .mark[data-mark="stripes"] { width: var(--ds-control-height); height: var(--ds-control-height); }
+.key-mark .mark[data-mark="outline"] { background: transparent; border-color: var(--ds-text-color); }
+.key-mark .mark[data-mark="dash"] { width: 8px; }

package/DS1/3-unit/styles/ds-menu.css

@@ -1,6 +1,11 @@
 @import "../../1-root/component-metrics.css";
 
+/* On whole squares: the line and the padding inside it make half a square on
+ * each side, and every entry is one square high, so a menu of n entries is
+ * n + 1 squares high. Placed half a square from its anchor, its entries
+ * stand on the anchor's grid lines. No shadow: words on paper. */
 :host {
+  --ds-menu-row: var(--ds-row-height);
   box-sizing: border-box;
   display: block;
   min-width: calc(8 * var(--ds-unit));
@@ -9,6 +14,7 @@
   border: 0;
   background: transparent;
 }
+:host([hidden]) { display: none !important; }
 
 /* Keep the shared face inside the boundary: product resets can reach a host. */
 .frame {
@@ -19,7 +25,7 @@
   width: 100%;
   max-height: min(var(--ds-menu-max-height, calc(16 * var(--ds-unit))), var(--ds-menu-available-height, 100vh));
   overflow-y: auto;
-  padding: calc(4px * var(--ds-sf));
+  padding: calc(var(--ds-unit) / 2 - 1px);
   border: 1px solid var(--ds-border-color);
   border-radius: var(--ds-radius-card);
   background: var(--ds-paper);
@@ -33,14 +39,32 @@
 }
 slot { display: contents; }
 
+/* Every entry is one row, whatever button styles a product or library gives
+ * it: shared buttons through their height, a native button or link through
+ * its box, which the menu's !important holds against outside styles. */
+::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; width: 100%; --ds-button-height: var(--ds-menu-row); }
+::slotted(:is(button, a, [role="option"], [role^="menuitem"]):not(ds-button, ds-file-picker)) {
+  box-sizing: border-box !important;
+  flex: 0 0 auto !important;
+  height: var(--ds-menu-row) !important;
+  min-height: var(--ds-menu-row) !important;
+  max-height: var(--ds-menu-row) !important;
+  margin-block: 0 !important;
+  padding-block: 0 !important;
+  line-height: var(--ds-type-lineheight-default) !important;
+}
+
 :host([floating]:not([open])) { display: none; }
 :host([floating]) { position: fixed; inset: auto; margin: 0; min-width: 0; width: var(--ds-menu-width, var(--ds-menu-anchor-width)); z-index: 1; scroll-padding: calc(var(--ds-unit) / 2); }
-:host([floating]) ::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; --ds-button-height: var(--ds-row-height); --ds-button-align: flex-start; --ds-button-padding: 0 calc(4px * var(--ds-sf)); width: 100%; }
+:host([floating]) ::slotted(:is(ds-button, ds-file-picker)) { flex: 0 0 auto; --ds-button-height: var(--ds-menu-row); --ds-button-align: flex-start; --ds-button-padding: 0 calc(4px * var(--ds-sf)); width: 100%; }
 :host([data-grid]) { width: max-content; min-width: 0; }
 :host([data-grid]) .frame { display: grid; grid-template-columns: repeat(var(--ds-menu-columns), var(--ds-row-height)); width: max-content; max-width: 100%; }
-:host([data-grid]) ::slotted(:is(ds-button, ds-file-picker)) { --ds-button-height: var(--ds-row-height); --ds-button-min-width: 0px; --ds-button-padding: 0; --ds-button-align: center; }
+:host([data-grid]) ::slotted(:is(ds-button, ds-file-picker)) { --ds-button-height: var(--ds-menu-row); --ds-button-min-width: 0px; --ds-button-padding: 0; --ds-button-align: center; }
 
+/* Compact entries are filled rows edge to edge, 19px with the 1px between
+ * them, a square's pitch: n entries are n squares less the last line. */
 :host([compact]) {
+  --ds-menu-row: calc(var(--ds-row-height) - 1px);
   width: var(--ds-menu-width, calc(8 * var(--ds-unit)));
   min-width: calc(4 * var(--ds-unit));
   max-width: 100%;
@@ -55,7 +79,7 @@ slot { display: contents; }
   background: transparent;
 }
 :host([compact]) ::slotted(:is(ds-button, ds-file-picker)) {
-  --ds-button-height: var(--ds-row-height);
+  --ds-button-height: var(--ds-menu-row);
   --ds-button-padding: 0 calc(4px * var(--ds-sf));
   --ds-button-background: var(--ds-fill);
   --ds-button-color: var(--ds-text-color);
@@ -84,7 +108,7 @@ slot { display: contents; }
 ::slotted([data-ds-menu-label]) {
   display: block;
   box-sizing: border-box;
-  height: var(--ds-row-height);
+  height: var(--ds-menu-row);
   padding: 0 calc(4px * var(--ds-sf));
   color: var(--ds-text-color-muted);
 }
@@ -93,5 +117,6 @@ slot { display: contents; }
   box-sizing: border-box;
   border: 0;
   border-top: 1px solid var(--ds-border-color);
-  margin: calc(var(--ds-unit) / 2) 0;
+  /* One square with its line: half a square above it, less the line, and half below. */
+  margin: calc(var(--ds-unit) / 2 - 1px) 0 calc(var(--ds-unit) / 2);
 }