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

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

@@ -0,0 +1,165 @@
+/* ds-calendar-large.css
+ * The grid drawn --ds-calendar-scale times (one and a half by default): a
+ * cell is a square of 30px, its lines 1.5px, its words the heading size
+ * times the scale (19.5px). Weeks run in columns and the days down them; the
+ * frame's corners are four tenths of a cell. Today is a red disc nine tenths
+ * of a cell across, the selected day an ink square of the same size. */
+
+:host {
+  --ds-calendar-cell: calc(var(--ds-unit) * var(--ds-calendar-scale, 1.5));
+  --ds-calendar-stroke: calc(1px * var(--ds-calendar-scale, 1.5));
+  --ds-calendar-ink: var(--ds-text-color);
+  --ds-calendar-event-fill: var(--ds-apple-green);
+  --ds-calendar-today: var(--ds-red-for-blood);
+  --ds-calendar-today-ink: var(--ds-white, #fff);
+  --ds-calendar-mark: calc(var(--ds-calendar-cell) * 0.9);
+  --ds-calendar-corner: calc(var(--ds-calendar-cell) * 0.4);
+  --ds-calendar-rail: calc(var(--ds-calendar-cell) * 2);
+  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: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));
+  font-weight: var(--ds-type-weight-default);
+  line-height: 1;
+  letter-spacing: var(--ds-type-letterspacing-default);
+}
+:host([hidden]) { display: none !important; }
+
+.calendar { min-width: 0; }
+
+/* The title and the arrows: one cell high, over the months. */
+.header {
+  display: flex;
+  align-items: flex-end;
+  gap: calc(4px * var(--ds-sf, 1));
+  height: var(--ds-calendar-cell);
+  margin-inline-start: calc(var(--ds-calendar-rail) + var(--ds-unit) / 2);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-type-lineheight-default);
+}
+.title {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: calc(var(--ds-type-size-heading) * var(--ds-calendar-scale, 1.5));
+  line-height: var(--ds-calendar-cell);
+  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, as in a month. */
+.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); }
+
+.body {
+  display: grid;
+  grid-template-columns: var(--ds-calendar-rail) minmax(0, 1fr);
+  column-gap: calc(var(--ds-unit) / 2);
+}
+
+/* The weekdays down the start, outside the scroll: every other one named. */
+.rail {
+  display: grid;
+  grid-template-rows: repeat(7, var(--ds-calendar-cell));
+  padding-block-start: var(--ds-calendar-cell);
+  color: var(--ds-title-color);
+  font-size: var(--ds-type-size-default);
+  line-height: var(--ds-type-lineheight-default);
+}
+.weekday {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  white-space: nowrap;
+}
+
+.scroller {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+.scroller::-webkit-scrollbar { display: none; }
+
+/* The months over their weeks, one cell high, their names on its foot. */
+.months {
+  display: grid;
+  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));
+  height: var(--ds-calendar-cell);
+}
+.month {
+  display: flex;
+  align-items: flex-end;
+  min-width: 0;
+  padding: 0 var(--ds-calendar-stroke) calc(3px * var(--ds-calendar-scale, 1.5));
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+/* The frame: a line all round with rounded corners; the cells draw the lines inside. */
+.frame {
+  box-sizing: border-box;
+  width: max-content;
+  border: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
+  border-radius: var(--ds-calendar-corner);
+  overflow: hidden;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-cell));
+  grid-template-rows: repeat(7, var(--ds-calendar-cell));
+}
+.row { display: contents; }
+.hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.cell {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-calendar-cell);
+  height: var(--ds-calendar-cell);
+  border-block-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
+  border-inline-start: var(--ds-calendar-stroke) solid var(--ds-calendar-ink);
+  background: var(--ds-calendar-cell-fill, transparent);
+  font-variant-numeric: tabular-nums;
+  outline: none;
+}
+.cell[data-first-row] { border-block-start-width: 0; }
+.cell[data-first-column] { border-inline-start-width: 0; }
+.cell[data-filled] { color: var(--ds-slate); }
+:host([selectable]) .cell:not([aria-disabled="true"]) { cursor: pointer; }
+:host([selectable]) .cell:not([aria-disabled="true"], [data-filled]):hover { background: var(--ds-row-fill-hover, var(--ds-fill)); }
+.cell:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -3px; }
+.cell[aria-disabled="true"] { color: var(--ds-title-color); }
+
+.date {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ds-calendar-mark);
+  height: var(--ds-calendar-mark);
+  letter-spacing: 0;
+}
+.cell[data-today] .date { border-radius: 999px; background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); }
+.cell[data-selected] .date { background: var(--ds-calendar-ink); color: var(--ds-paper); }
+.cell[data-inside]:not([data-filled]) { background: color-mix(in srgb, var(--ds-calendar-ink) 12%, var(--ds-paper)); }
+.cell[data-today][data-selected] .date { border-radius: 999px; box-shadow: inset 0 0 0 var(--ds-calendar-stroke) var(--ds-calendar-today); }
+
+/* On a narrow screen the weekdays take one letter and one square. */
+@media (max-width: 720px) {
+  :host { --ds-calendar-rail: var(--ds-unit); }
+  .rail .weekday:not(:empty) { font-size: 0; }
+  .rail .weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }
+}

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;