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

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

@@ -3,7 +3,10 @@
  * 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.
+ * on the grid lines, the month's frame rounded more than a card, as a larger
+ * thing wears a larger curve; a full month names its days inside the first
+ * week's boxes, and writes a week's number on its first day; today is a red
+ * disc nine tenths of a square across, its weekday's name in the same red.
  *
  * A picker is a field's face: one control high at the foot of its square,
  * as wide as its words (it hugs them, as a button does), its words 4px in and the chevron-down icon
@@ -17,7 +20,13 @@
 :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));
+  /* The weekdays' own row over the days: none in a full month, whose first week names them; a square when compact. */
+  --ds-calendar-weekdays: 0px;
+  /* The month's height under its header, fixed: six weeks. Every view takes it with `fixed`. */
+  --ds-calendar-area: calc(var(--ds-calendar-weekdays) + 6 * var(--ds-calendar-day-height));
   --ds-calendar-line: 1px solid var(--ds-border-color);
+  /* Three times a card's corner, at most a square: twelve pixels on the base card, none where cards are square. */
+  --ds-calendar-radius: clamp(0px, calc(3 * var(--ds-radius-card, calc(4px * var(--ds-sf, 1)))), var(--ds-unit));
   --ds-calendar-today: var(--ds-red-for-blood);
   --ds-calendar-today-ink: var(--ds-white, #fff);
   --ds-calendar-selected: var(--ds-sharp-blue);
@@ -50,6 +59,7 @@
 :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-weekdays: var(--ds-unit);
   --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));
 }
@@ -71,7 +81,7 @@
   min-width: 0;
   overflow: hidden;
   font-family: var(--ds-typeface-medium, var(--ds-typeface-regular));
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
 .controls {
@@ -81,21 +91,45 @@
   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 {
+/* A step back, Today and a step on: a plain split button, the segments a hair apart and one
+ * control high at the square's foot, their words and arrows in the title grey on no ground in
+ * any state; the pointer inks them. */
+.controls { gap: 1px; }
+:is(.nav, .today-button) {
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
   flex: 0 0 auto;
-  width: var(--ds-unit);
+  align-items: center;
+  justify-content: center;
   height: var(--ds-control-height);
+  margin: 0;
+  padding: 0 calc(5px * var(--ds-sf, 1));
+  border: 0;
   border-radius: var(--ds-radius);
+  background: transparent;
   color: var(--ds-title-color);
+  font: inherit;
+  line-height: var(--ds-control-height);
+  letter-spacing: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
-.nav:hover:not(:disabled) { background: var(--ds-fill); color: var(--ds-text-color); }
+.nav { width: var(--ds-control-height); padding: 0; }
+.nav > ds-icon { --ds-icon-size: 16px; color: inherit; }
+:is(.nav, .today-button):hover:not(:disabled) { color: var(--ds-text-color); }
+:is(.nav, .today-button):focus-visible { outline: 1px solid currentColor; outline-offset: -2px; }
+.nav:disabled { cursor: default; opacity: 0.5; }
 :host(:dir(rtl)) .nav > ds-icon { transform: scaleX(-1); }
+/* A compact month's arrows are chevrons a square wide each, filled under the pointer. */
+:host([compact]) .nav { width: var(--ds-unit); }
+:host([compact]) .nav:hover:not(:disabled) { background: var(--ds-fill); }
 
 /* The title as a plain button, its words alone: pressing it travels up to the months of the year,
  * then to twelve years. One control high at the square's foot, the words on the sixteen where the
- * title stands, the pointer filling it 4px past them at each side. */
+ * title stands, hugging them: never a bar across the header, the pointer filling it only 4px past
+ * the words at each side. */
 .title-button {
   display: inline-flex;
   flex: 0 1 auto;
@@ -118,14 +152,18 @@
 :host(:dir(rtl)) .title-button { margin: 0 calc(-4px * var(--ds-sf, 1)) 0 0; }
 .title-button:hover { background: var(--ds-fill); }
 .title-button:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
-.title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.title-text { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
+/* Cut words fade over their last square, never an ellipsis: the title, a weekday's name and
+   the picker's value (0-face/cut-fade.ts marks them; an event's name is drawn below). */
+:is(.title, .title-text, .weekday, .trigger .text, .swimlane-month)[data-cut="end"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }
+:host(:dir(rtl)) :is(.title, .title-text, .weekday, .trigger .text, .swimlane-month)[data-cut="end"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }
 
 /* The months of a year, or twelve years: cells whole squares wide, three across a narrow month
  * and four across a wider one, each row one square, one square apart. The area keeps the days'
  * height, so nothing below moves between levels. */
 .picks {
   box-sizing: border-box;
-  height: calc(var(--ds-unit) + var(--ds-calendar-weeks, 6) * var(--ds-calendar-day-height));
+  height: calc(var(--ds-calendar-weekdays) + var(--ds-calendar-weeks, 6) * var(--ds-calendar-day-height));
   outline: none;
 }
 .pick-row {
@@ -134,10 +172,12 @@
   height: var(--ds-unit);
   margin-block-end: var(--ds-unit);
 }
+/* Each choice hugs its words, one control high on the row's sixteen and padded 4px from them, as
+ * a button is, in the middle of its cell; never stretched to fill the cell. */
 .pick {
   box-sizing: border-box;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
   min-width: 0;
   height: var(--ds-unit);
@@ -154,19 +194,22 @@
 .pick-mark {
   box-sizing: border-box;
   display: inline-flex;
+  flex: 0 1 auto;
   align-items: center;
   justify-content: center;
-  width: calc(100% - var(--ds-unit) * 0.1);
-  height: calc(var(--ds-unit) * 0.9);
+  max-width: 100%;
+  height: var(--ds-control-height);
+  padding: 0 calc(4px * var(--ds-sf, 1));
   overflow: hidden;
   border-radius: var(--ds-radius);
+  line-height: var(--ds-control-height);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
-.pick:hover:not(:disabled) .pick-mark { background: var(--ds-fill); }
+.pick:hover:not(:disabled):not([data-today], [data-selected]) .pick-mark { background: var(--ds-fill); }
 .pick:focus-visible .pick-mark { outline: 2px solid var(--ds-focus-ring); outline-offset: -1px; }
-.pick[data-today] .pick-mark { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); }
-.pick[data-selected] .pick-mark { background: var(--ds-calendar-selected); color: var(--ds-calendar-selected-ink); }
+/* The current month or year and the chosen one take the accent, as a chosen segment does. */
+.pick:is([data-today], [data-selected]) .pick-mark { background: var(--ds-accent-color); color: var(--ds-button-text-color-on-accent); }
 .pick:disabled { color: var(--ds-title-color); cursor: default; opacity: 0.5; }
 
 /* Clear, only while something is chosen: a button one control high, centred on the square right under the dates. */
@@ -178,7 +221,7 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  :is(.grid, .picks)[data-travel] { animation: ds-calendar-level 160ms cubic-bezier(0.22, 1, 0.36, 1); }
+  :is(.grid, .picks, .swimlane, .own-view)[data-travel] { animation: ds-calendar-level 160ms cubic-bezier(0.22, 1, 0.36, 1); }
 }
 @keyframes ds-calendar-level {
   from { opacity: 0; transform: scale(0.98); }
@@ -186,6 +229,9 @@
 }
 
 .grid { outline: none; }
+/* A calendar with a header takes sideways touches on its days and months for its swipe (ds-calendar.ts),
+   so a carousel or a page around it stays put; up and down still scroll the page. */
+[data-swipe] :is(.grid, .picks) { touch-action: pan-y; }
 .weekdays,
 .week {
   display: grid;
@@ -199,10 +245,19 @@
   padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;
   overflow: hidden;
   color: var(--ds-title-color);
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
 :host([compact]) .weekday { padding-inline: 0; text-align: center; }
+/* A full month's weekdays are named inside its first week's boxes; the row stays for those who listen. */
+:host(:not([compact])) .weekdays {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
 
 /* 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. */
@@ -223,6 +278,17 @@
 }
 .day:nth-child(7)::after { border-inline-end: var(--ds-calendar-line); }
 .week:last-child .day::after { border-block-end: var(--ds-calendar-line); }
+/* The month's frame has a card's rounded corners, as a framed table does: the
+ * four corner days round their box, its hairlines and whatever fills it. */
+.weekdays + .week .day:first-child,
+.weekdays + .week .day:first-child::after { border-start-start-radius: var(--ds-calendar-radius); }
+.weekdays + .week .day:nth-child(7),
+.weekdays + .week .day:nth-child(7)::after { border-start-end-radius: var(--ds-calendar-radius); }
+.week:last-child .day:first-child,
+.week:last-child .day:first-child::after { border-end-start-radius: var(--ds-calendar-radius); }
+.week:last-child .day:nth-child(7),
+.week:last-child .day:nth-child(7)::after { border-end-end-radius: var(--ds-calendar-radius); }
+:host([compact]) .day { border-radius: 0; }
 :host([compact]) .day::after { content: none; }
 
 .day[data-day] { cursor: default; }
@@ -232,7 +298,8 @@
 :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. */
+/* The date: on the first square, at the end of a wide day, in the title grey; before it, at the
+ * day's start, the first week's weekday name and the week's number in the compressed face. */
 .date-line {
   box-sizing: border-box;
   display: flex;
@@ -243,24 +310,31 @@
   padding-inline: var(--ds-calendar-pad);
 }
 .date {
+  margin-inline-start: auto;
   color: var(--ds-title-color);
   font-variant-numeric: tabular-nums;
 }
+.weekday-name,
 .week-number {
-  margin-inline-end: auto;
+  flex: 0 0 auto;
   color: var(--ds-title-color);
-  font-family: var(--ds-typeface-compressed);
+  white-space: nowrap;
 }
+.weekday-name[data-today] { color: var(--ds-calendar-today); }
+.week-number { font-family: var(--ds-typeface-compressed); }
+.day.outside .date-line { justify-content: flex-start; }
 
 /* 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 { margin-inline-start: 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); }
+.day:is([data-today], [data-selected]) .date-line { padding-inline-end: calc(var(--ds-unit) * 0.05); }
+.day:is([data-today], [data-selected]) .date { align-self: center; }
 :host([compact]) .day:is([data-today], [data-selected]) .date-line { padding: 0; }
 .date {
   box-sizing: border-box;
@@ -274,13 +348,17 @@
 .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; }
+/* Today's ink holds in a compact month too, where quiet days take the title colour and the text colour above. */
+:host([compact]) .day[data-today] .date,
+:host([compact][data-events]) .day[data-today]:not([data-busy]) .date { color: var(--ds-calendar-today-ink); }
 /* 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; }
 
 /* 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. */
-.day[data-heat]:not([data-today], [data-selected]) .date-line { align-items: center; padding-inline-end: calc(var(--ds-unit) * 0.05); }
+.day[data-heat]:not([data-today], [data-selected]) .date-line { padding-inline-end: calc(var(--ds-unit) * 0.05); }
+.day[data-heat]:not([data-today], [data-selected]) .date { align-self: center; }
 .day[data-heat]:not([data-today], [data-selected]) .date {
   min-width: var(--ds-calendar-mark);
   height: var(--ds-calendar-mark);
@@ -305,7 +383,8 @@
   align-items: flex-end;
   gap: var(--ds-calendar-pad);
   height: calc(var(--ds-unit) - 1px);
-  margin: 0.5px;
+  /* A pixel at the start, so the day's line (and the month's frame) shows beside a bar. */
+  margin: 0.5px 0.5px 0.5px 1px;
   padding-inline: var(--ds-calendar-pad);
   overflow: hidden;
   white-space: nowrap;
@@ -315,7 +394,19 @@
   color: var(--ds-calendar-event-ink, var(--ds-text-color));
   cursor: pointer;
 }
-.event .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.event .name { min-width: 0; overflow: hidden; }
+/* A name its bar cuts fades out over the bar's last square, at the end where it is cut. */
+.event .name[data-cut="end"] { mask-image: linear-gradient(to right, #000 calc(100% - var(--ds-unit)), transparent); }
+:host(:dir(rtl)) .event .name[data-cut="end"] { mask-image: linear-gradient(to left, #000 calc(100% - var(--ds-unit)), transparent); }
+/* An event over several days is one bar from its first day in the week,
+ * drawn over the days after it (and their lines) with its name written once. */
+.event[data-span] {
+  position: relative;
+  z-index: 1;
+  width: calc(var(--ds-calendar-event-span) * var(--ds-calendar-day) - 1.5px);
+}
+/* A line a bar passes over, or an empty line above another event. */
+.line { flex: 0 0 auto; height: var(--ds-unit); }
 .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); }
@@ -361,16 +452,6 @@
 :host([compact]) .day[data-inside] .date-line { align-items: center; padding: 0; }
 :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; }
@@ -378,6 +459,9 @@
 /* The picker: a field that opens the small month. */
 :host([picker]) {
   display: inline-flex;
+  width: max-content !important;
+  flex: 0 0 auto !important;
+  justify-self: start !important;
   max-width: 100%;
   align-items: flex-end;
   vertical-align: bottom;
@@ -388,7 +472,7 @@
   display: inline-flex;
   align-items: center;
   gap: calc(4px * var(--ds-sf, 1));
-  width: var(--ds-calendar-picker-width, max-content);
+  width: max-content !important;
   max-width: 100%;
   padding-inline: calc(4px * var(--ds-sf, 1)) calc(2px * var(--ds-sf, 1));
   text-align: start;
@@ -400,7 +484,7 @@
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
 }
 .trigger[data-empty] .text { color: var(--ds-title-color); }
@@ -411,8 +495,8 @@
   inset: auto;
   box-sizing: border-box;
   margin: 0;
-  padding: calc(var(--ds-unit) / 2 - 1px);
-  border: 1px solid var(--ds-border-color);
+  padding: 0;
+  border: 0;
   border-radius: var(--ds-radius-card);
   background: var(--ds-paper);
   color: var(--ds-text-color);
@@ -422,7 +506,7 @@
 .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); }
+.fields { margin-block-end: 0; }
 .field-row {
   display: flex;
   align-items: flex-end;
@@ -458,10 +542,11 @@
 .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. */
+/* Adjacent picker controls share one continuous menu surface. */
 .separator {
+  display: none;
   position: relative;
-  height: var(--ds-unit);
+  height: 0;
 }
 .separator::after {
   position: absolute;
@@ -481,3 +566,232 @@
   from { opacity: 0; transform: translateY(calc(-4px * var(--ds-sf, 1))); }
   to { opacity: 1; transform: none; }
 }
+
+/* Day, Week and Month on a split button in the middle of the header, the
+ * title at its start and Today and the arrows at its end. */
+.header[data-views] {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+.header[data-views] .controls { justify-self: end; }
+/* The title hugs its words in its column, never stretched across it. */
+.header[data-views] .title { justify-self: start; }
+.views { justify-self: center; }
+/* On a phone the title and the arrows keep the first row, and Day, Week and
+ * Month stand on a row of their own a square under them. */
+@media (max-width: 639px) {
+  .header[data-views] {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: var(--ds-unit) var(--ds-unit);
+    row-gap: var(--ds-unit);
+    height: auto;
+  }
+  .header[data-views] .views { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
+}
+
+/* One day: its events without a time on lines a day wide across the top, then
+ * its hours, one square each with a hairline at the foot, in an area twelve
+ * squares high that scrolls; an hour's events stand a day wide beside each
+ * other after its name and wrap onto more squares when they need them. */
+.day-view { width: calc(7 * var(--ds-calendar-day)); }
+.all-day {
+  display: grid;
+  grid-template-columns: repeat(7, var(--ds-calendar-day));
+  padding-block-end: var(--ds-unit);
+}
+.hours {
+  position: relative;
+  height: calc(12 * var(--ds-unit));
+  overflow-y: auto;
+  box-sizing: border-box;
+  border: var(--ds-calendar-line);
+  border-radius: var(--ds-calendar-radius);
+}
+.hour:last-child { border-block-end: 0; }
+.hour {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  min-height: var(--ds-unit);
+  border-block-end: var(--ds-calendar-line);
+}
+.hour-name {
+  box-sizing: border-box;
+  flex: 0 0 calc(2 * var(--ds-unit));
+  height: calc(var(--ds-unit) - 1px);
+  padding-block-start: calc(3px * var(--ds-sf, 1));
+  padding-inline-start: var(--ds-calendar-pad);
+  color: var(--ds-title-color);
+  font-variant-numeric: tabular-nums;
+  line-height: calc(16px * var(--ds-sf, 1));
+  white-space: nowrap;
+}
+.hour-events {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.hour-events .event,
+.all-day .event { width: calc(var(--ds-calendar-day) - 1.5px); }
+
+
+/* A swimlane: weeks across, a square each (20 by 20), so the month's width
+ * holds a week to each of its squares, 28 at the default. Over them the
+ * months, one square, a name where the month owning the week changes, and
+ * each week's first date, one square, centred in the title grey (today's
+ * week writes today in its disc). Then a row to an event, a square high, in
+ * the month's hairline boxes and rounded frame; an event is one bar from its
+ * first week to its last, filled with its colour, its name on the sixteen,
+ * written once and fading where it is cut. */
+.swimlane {
+  --ds-calendar-week: var(--ds-unit);
+  width: calc(var(--ds-calendar-weeks) * var(--ds-calendar-week));
+}
+[data-swipe] .swimlane { touch-action: pan-y; }
+.swimlane-months,
+.swimlane-dates,
+.swimlane-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-calendar-week));
+}
+.swimlane-months,
+.swimlane-dates { height: var(--ds-unit); }
+.swimlane-month {
+  box-sizing: border-box;
+  min-width: 0;
+  height: var(--ds-unit);
+  padding: calc(4px * var(--ds-sf, 1)) var(--ds-calendar-pad) 0;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+.swimlane-date {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: var(--ds-unit);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+}
+.swimlane-date .date { color: var(--ds-title-color); }
+.swimlane-date:not([data-today]) .date { min-width: 0; height: auto; }
+.swimlane-date[data-today] { align-items: center; }
+.swimlane-date[data-today] .date { background: var(--ds-calendar-today); color: var(--ds-calendar-today-ink); letter-spacing: 0; }
+.swimlane-grid { grid-template-rows: repeat(var(--ds-calendar-rows), var(--ds-calendar-week)); }
+.swimlane-grid .cell { position: relative; box-sizing: border-box; min-width: 0; }
+.swimlane-grid .cell::after {
+  position: absolute;
+  inset: -0.5px;
+  border-block-start: var(--ds-calendar-line);
+  border-inline-start: var(--ds-calendar-line);
+  content: "";
+  pointer-events: none;
+}
+.swimlane-grid .cell[data-last-column]::after { border-inline-end: var(--ds-calendar-line); }
+.swimlane-grid .cell[data-last-row]::after { border-block-end: var(--ds-calendar-line); }
+.swimlane-grid .cell[data-first-row][data-first-column]::after { border-start-start-radius: var(--ds-calendar-radius); }
+.swimlane-grid .cell[data-first-row][data-last-column]::after { border-start-end-radius: var(--ds-calendar-radius); }
+.swimlane-grid .cell[data-last-row][data-first-column]::after { border-end-start-radius: var(--ds-calendar-radius); }
+.swimlane-grid .cell[data-last-row][data-last-column]::after { border-end-end-radius: var(--ds-calendar-radius); }
+.swimlane-grid .event {
+  position: relative;
+  z-index: 1;
+  height: calc(var(--ds-calendar-week) - 1px);
+  min-width: 0;
+  padding-block: 0;
+  border: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+}
+.swimlane-grid .event:hover { background: color-mix(in srgb, var(--ds-calendar-event-fill, var(--ds-fill)) 88%, var(--ds-text-color)); }
+.swimlane-grid .event:focus-visible { outline: 2px solid var(--ds-focus-ring); outline-offset: -2px; }
+
+/* A page's own view, chosen in the switch: what the page puts in the slot of
+ * its name, under the header and as wide as the month. */
+.own-view { width: calc(7 * var(--ds-calendar-day)); }
+
+/* Fixed, every view stands in the six-week month's height (--ds-calendar-area),
+ * so nothing under the calendar moves when the view changes: the week's days
+ * grow to it, the day's hours fill what the untimed events leave, the
+ * swimlane's rows fill it under the months and dates and scroll past it, and a
+ * page's own view gets it and scrolls inside. */
+:host([fixed]:not([compact])) .grid[data-view="week"] .week .day { height: var(--ds-calendar-area); }
+:host([fixed]) :is(.swimlane, .own-view, .day-view) { box-sizing: border-box; height: var(--ds-calendar-area); }
+:host([fixed]) .own-view { overflow: auto; }
+:host([fixed]) .day-view { display: flex; flex-direction: column; }
+:host([fixed]) .day-view .hours { flex: 1 1 auto; min-height: 0; height: auto; }
+:host([fixed]) .swimlane-scroll {
+  max-height: calc(var(--ds-calendar-fit) * var(--ds-calendar-week));
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  /* Room for the frame's hairlines, which stand half a pixel outside the cells. */
+  margin: -0.5px;
+  padding: 0.5px;
+}
+
+/* Activity: the days as quiet squares, a contribution grid on the swimlane's
+ * footing. Every other weekday is named down the start in the title grey,
+ * two squares wide; the months stand over their weeks; a week is a column a
+ * square wide with its days down it, each a square drawn two pixels in with a
+ * picture's corners, quiet in the fill or filled with its events' colours. */
+.activity {
+  display: grid;
+  grid-template-columns: calc(2 * var(--ds-unit)) max-content;
+  align-items: start;
+}
+.activity-rail {
+  display: grid;
+  grid-template-rows: repeat(7, var(--ds-unit));
+  padding-block-start: var(--ds-unit);
+  color: var(--ds-title-color);
+}
+.activity-weekday {
+  box-sizing: border-box;
+  height: var(--ds-unit);
+  padding-block-start: calc(4px * var(--ds-sf, 1));
+  overflow: hidden;
+  white-space: nowrap;
+}
+.activity-months,
+.activity-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--ds-calendar-weeks), var(--ds-unit));
+}
+.activity-months { height: var(--ds-unit); }
+.activity-month {
+  box-sizing: border-box;
+  min-width: 0;
+  height: var(--ds-unit);
+  padding-block-start: calc(4px * var(--ds-sf, 1));
+  overflow: visible;
+  white-space: nowrap;
+}
+.activity-grid { grid-template-rows: repeat(7, var(--ds-unit)); }
+.activity-row { display: contents; }
+.activity-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.activity-day { position: relative; }
+.activity-day[data-day]::before {
+  content: "";
+  position: absolute;
+  inset: calc(2px * var(--ds-sf, 1));
+  border-radius: calc(2px * var(--ds-sf, 1));
+  background: var(--ds-calendar-cell-fill, var(--ds-fill));
+}
+:host([selectable]) .activity-day[data-day] { cursor: pointer; }
+.activity-day[data-selected]::before { outline: 1px solid var(--ds-text-color); }
+/* On a narrow screen the weekdays take one letter. */
+@media (max-width: 720px) {
+  .activity-weekday:not(:empty) { font-size: 0; }
+  .activity-weekday:not(:empty)::after { content: attr(data-narrow); font-size: var(--ds-type-size-default); }
+}

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

@@ -113,3 +113,41 @@
   color: color-mix(in srgb, var(--ds-context-ink) 60%, var(--ds-context-fill));
   line-height: var(--ds-type-lineheight-default);
 }
+
+/* The bar: the same rows side by side, the context bar over what is selected.
+   One row high, the cells a pixel apart and groups two, the page showing
+   through; a cell with words is 4px in on the sixteen, a cell holding only an
+   icon one square (19px with the pixel beside it), the icon in its middle.
+   As long as its cells, never rounded up, so the silhouette ends with them. */
+:host([bar]) {
+  width: var(--ds-menu-width, max-content);
+  min-width: 0;
+}
+:host([bar]) .frame {
+  flex-direction: row;
+  align-items: stretch;
+  height: var(--ds-menu-row);
+  max-height: none;
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
+:host([bar]) ::slotted(:is(button, a, ds-button, ds-file-picker)) {
+  flex: 0 0 auto !important;
+  width: auto;
+  min-width: var(--ds-menu-row);
+}
+:host([bar]) ::slotted(ds-button) {
+  --ds-button-min-width: var(--ds-menu-row) !important;
+}
+:host([bar]) ::slotted([data-ds-context-icon]) {
+  --ds-button-padding: 0 !important;
+  --ds-button-align: center !important;
+  justify-content: center !important;
+  width: var(--ds-menu-row);
+  padding: 0 !important;
+}
+:host([bar]) ::slotted(:is(hr, [data-ds-menu-separator])) {
+  width: 0 !important;
+  height: auto !important;
+}
+:host([bar]) ::slotted([data-ds-menu-label]) { flex: 0 0 auto; white-space: nowrap; }