@scattered-light/loomiere-base-ui 0.6.1 → 0.7.0

package/dist/styles/custom/DatePicker.css

@@ -0,0 +1,572 @@
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/*
+ * DatePicker: a field that opens a calendar for one date or a period.
+ * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
+ * below the md breakpoint. Calendar is the grid on its own; DatePresets is
+ * the quick-selection list. Both are usable without the field.
+ *
+ * Concepts: calendar (day cell, range band, today ring), item (preset rows),
+ * field (the trigger), emphasis bold (the selected day, via the default
+ * emphasis level, so it follows data-color).
+ *
+ * Text styles, one whole style each: day numbers are trigger-condense and
+ * selected days are selected-condense, weekday initials are eyebrow-minimize,
+ * the month title is subtitle-base, a preset label is trigger-condense with
+ * its hint in body-minimize, and the footer summary is body-condense.
+ * The trigger text is text-body-base, the same style as Input.
+ *
+ * How many months are on screen is measured on the panel (40rem two months,
+ * 32rem one, and one month in a drawer or for a coarse pointer under 48rem).
+ * Those lengths are layout, not tokens. CSS only switches the preset row and
+ * the sticky footer, from data-layout and data-compact.
+ *
+ * Keyboard (WAI-ARIA APG date picker dialog): Left/Right one day (they swap
+ * in RTL), Up/Down one week, Home/End the week, PageUp/PageDown one month,
+ * Shift+PageUp/PageDown one year, Enter/Space pick. With two months showing,
+ * paging forward lands the focused day in the last column, so the view shifts
+ * by one month. Delete or Backspace clears the draft. Escape drops a
+ * half-picked range first, then closes. Escape in the month or year chooser
+ * returns to the days. A range is a start click, then an end click; an end
+ * before the start swaps. Hover or focus previews the band until the end is
+ * chosen. Direction is read when the picker opens; a dir change while it is
+ * open is not picked up.
+ *
+ * Day state: data-selected, data-range-start, data-range-end, data-in-range,
+ * data-preview, data-today, data-outside-month, data-disabled, data-focused.
+ * aria-selected is only the real value (the day, or the start and end).
+ */
+
+/* CALENDAR */
+
+.Calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-month-gap);
+  min-width: 0;
+}
+
+.DatePickerMonths {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-calendar-month-gap);
+  min-width: 0;
+}
+
+.DatePickerNav {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-calendar-header-gap);
+  flex: 1 0 100%;
+}
+
+.DatePickerNav .DatePickerMonthTitle {
+  flex: 1 1 auto;
+}
+
+.DatePickerMonth {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-header-gap);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.DatePickerMonthBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-calendar-header-gap);
+  min-height: var(--sl-control-height-sm);
+}
+
+.DatePickerMonthSpacer {
+  inline-size: var(--sl-control-height-sm);
+  flex: 0 0 auto;
+}
+
+.DatePickerMonthTitle {
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
+  outline: none;
+  margin: 0;
+  padding: var(--sl-space-1) var(--sl-space-2);
+  border: 0;
+  border-radius: var(--sl-radius-control);
+  background: transparent;
+  color: var(--sl-text-primary);
+  cursor: pointer;
+}
+
+.DatePickerMonthTitle:hover {
+  background: var(--sl-item-background-hover);
+}
+
+.DatePickerMonthTitle:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.CalendarGrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-grid-gap);
+}
+
+.Calendar,
+.DatePickerPanel {
+  --sl-calendar-cell: var(--sl-calendar-day-size);
+}
+
+.DatePickerPanel[data-touch] {
+  --sl-calendar-cell: max(var(--sl-calendar-day-size), var(--sl-a11y-min-touch-target));
+}
+
+@media (pointer: coarse) {
+  .Calendar {
+    --sl-calendar-cell: max(var(--sl-calendar-day-size), var(--sl-a11y-min-touch-target));
+  }
+}
+
+.CalendarWeek {
+  display: grid;
+  grid-template-columns: repeat(7, var(--sl-calendar-cell));
+  column-gap: 0;
+  row-gap: var(--sl-calendar-grid-gap);
+}
+
+.CalendarGrid:has(.CalendarWeekNumber) .CalendarWeek {
+  grid-template-columns: auto repeat(7, var(--sl-calendar-cell));
+}
+
+.CalendarWeekday,
+.CalendarWeekNumber {
+  font-family: var(--sl-font-eyebrow-minimize-font-family);
+  font-size: var(--sl-font-eyebrow-minimize-font-size);
+  font-weight: var(--sl-font-eyebrow-minimize-font-weight);
+  line-height: var(--sl-font-eyebrow-minimize-line-height);
+  letter-spacing: var(--sl-font-eyebrow-minimize-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-minimize-text-transform);
+  display: grid;
+  place-items: center;
+  min-block-size: var(--sl-space-6);
+  color: var(--sl-calendar-weekday-color);
+  text-decoration: none;
+}
+
+.CalendarWeekNumber {
+  padding-inline: var(--sl-space-1);
+}
+
+.CalendarDay {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  position: relative;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: 100%;
+  aspect-ratio: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sl-calendar-day-radius);
+  outline: none;
+  background: transparent;
+  color: var(--sl-calendar-day-color);
+  cursor: pointer;
+}
+
+.CalendarDay:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.CalendarDay--empty {
+  cursor: default;
+  pointer-events: none;
+}
+
+.CalendarDayNumber {
+  position: relative;
+  z-index: 1;
+}
+
+.CalendarDay:hover:not([data-disabled]):not([data-selected]) {
+  background: var(--sl-calendar-day-background-hover);
+}
+
+.CalendarDay[data-outside-month] {
+  color: var(--sl-calendar-day-color-outside);
+}
+
+.CalendarDay[data-disabled] {
+  color: var(--sl-calendar-day-color-disabled);
+  cursor: default;
+}
+
+.CalendarDay[data-selected] {
+  font-family: var(--sl-font-selected-condense-font-family);
+  font-size: var(--sl-font-selected-condense-font-size);
+  font-weight: var(--sl-font-selected-condense-font-weight);
+  line-height: var(--sl-font-selected-condense-line-height);
+  letter-spacing: var(--sl-font-selected-condense-letter-spacing);
+}
+
+.CalendarDay[data-selected]:not([data-range-start]):not([data-range-end]) {
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.CalendarDay[data-range-start],
+.CalendarDay[data-range-end] {
+  overflow: hidden;
+  background: transparent;
+}
+
+.CalendarDay[data-range-start] .CalendarDayNumber,
+.CalendarDay[data-range-end] .CalendarDayNumber {
+  display: grid;
+  place-items: center;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: var(--sl-calendar-day-radius);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.CalendarDay[data-in-range],
+.CalendarDay[data-preview]:not([data-selected]) {
+  border-radius: 0;
+  background: var(--sl-calendar-range-background);
+  color: var(--sl-calendar-range-color);
+}
+
+.CalendarDay[data-range-start]::before,
+.CalendarDay[data-range-end]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: linear-gradient(to right, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+.CalendarDay[data-range-end]::before {
+  background: linear-gradient(to left, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+[dir='rtl'] .CalendarDay[data-range-start]::before {
+  background: linear-gradient(to left, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+[dir='rtl'] .CalendarDay[data-range-end]::before {
+  background: linear-gradient(to right, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+.CalendarDay[data-range-start][data-range-end]::before {
+  content: none;
+}
+
+.CalendarDay[data-focused] {
+  z-index: 1;
+}
+
+.CalendarDay[data-today] .CalendarDayNumber {
+  box-shadow: inset 0 0 0 var(--sl-stroke-default) var(--sl-calendar-today-ring);
+  border-radius: var(--sl-calendar-day-radius);
+  padding-inline: var(--sl-space-1);
+}
+
+/* The selected fill is the bold accent, the same hue as the today ring, so the ring switches to the text color. */
+.CalendarDay[data-today][data-selected] .CalendarDayNumber {
+  box-shadow: inset 0 0 0 var(--sl-stroke-default) var(--sl-e-fg);
+}
+
+[data-theme$='high-contrast'] .CalendarDay[data-in-range],
+[data-theme$='high-contrast'] .CalendarDay[data-preview]:not([data-selected]) {
+  box-shadow: inset 0 calc(var(--sl-stroke-default) * -1) 0 var(--sl-border-accent);
+}
+
+.CalendarChooser {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-header-gap);
+}
+
+.CalendarChooserGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--sl-calendar-grid-gap);
+}
+
+.CalendarChoice {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  outline: none;
+  min-block-size: var(--sl-control-height-sm);
+  padding: var(--sl-space-1) var(--sl-space-2);
+  border: 0;
+  border-radius: var(--sl-radius-control);
+  background: transparent;
+  color: var(--sl-text-primary);
+  cursor: pointer;
+}
+
+.CalendarChoice:hover:not([aria-disabled='true']) {
+  background: var(--sl-item-background-hover);
+}
+
+.CalendarChoice:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.CalendarChoice[aria-disabled='true'] {
+  color: var(--sl-calendar-day-color-disabled);
+  cursor: default;
+}
+
+/* PRESETS */
+
+.DatePickerPresets {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-1);
+  min-width: 0;
+}
+
+.DatePickerPresets[data-layout='row'] {
+  flex-direction: row;
+  overflow-x: auto;
+}
+
+.DatePickerPreset {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sl-space-0-5);
+  inline-size: 100%;
+  padding: var(--sl-item-padding-block) var(--sl-item-padding-inline);
+  border: 0;
+  border-radius: var(--sl-item-radius);
+  background: transparent;
+  color: var(--sl-item-color);
+  text-align: start;
+  cursor: pointer;
+}
+
+.DatePickerPresets[data-layout='row'] .DatePickerPreset {
+  flex-direction: row;
+  align-items: baseline;
+  inline-size: auto;
+  white-space: nowrap;
+}
+
+.DatePickerPreset:hover:not([data-disabled]) {
+  background: var(--sl-item-background-hover);
+}
+
+.DatePickerPreset:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.DatePickerPreset[data-checked] {
+  background: var(--sl-item-background-selected);
+  color: var(--sl-item-color-selected);
+}
+
+.DatePickerPreset[data-disabled] {
+  color: var(--sl-text-disabled);
+  cursor: default;
+}
+
+.DatePickerPresetHint {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  color: var(--sl-text-tertiary);
+}
+
+.DatePickerPreset[data-checked] .DatePickerPresetHint {
+  color: var(--sl-item-color-selected);
+}
+
+/* PICKER */
+
+.DatePickerField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.DatePickerField .DatePickerTrigger {
+  box-sizing: border-box;
+  color: var(--sl-field-color);
+  background: var(--sl-field-background);
+  border: var(--sl-field-border-width) solid var(--sl-field-border-color);
+  border-radius: var(--sl-field-radius);
+  transition: var(--sl-field-transition);
+  outline: none;
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  inline-size: 100%;
+  block-size: var(--sl-control-height-md);
+  padding-inline: var(--sl-control-padding-inline);
+  text-align: start;
+  cursor: pointer;
+}
+
+.DatePickerTrigger:disabled {
+  color: var(--sl-text-disabled);
+  cursor: default;
+}
+
+.DatePickerField .DatePickerTrigger:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.DatePickerValue[data-placeholder] {
+  color: var(--sl-text-tertiary);
+}
+
+.DatePickerClear {
+  position: absolute;
+  inset-inline-end: var(--sl-space-1);
+  z-index: 1;
+}
+
+.DatePickerTrigger:has(~ .DatePickerClear) {
+  padding-inline-end: var(--sl-control-height-sm);
+}
+
+.DatePickerPopup {
+  /* 52rem fits two months and the preset column; three months ask for 64rem. Layout, not a brand size. */
+  inline-size: min(var(--available-width, 100vw), 52rem);
+  max-inline-size: var(--available-width, 100vw);
+  padding: 0;
+}
+
+.DatePickerPopup[data-months='3'] {
+  inline-size: min(var(--available-width, 100vw), 64rem);
+}
+
+.DatePickerPanel {
+  display: grid;
+  /* 11rem is the preset column. Layout, not a brand size: wide enough for "Year to date" and a hint. */
+  grid-template-columns: 11rem minmax(0, 1fr);
+  align-items: start;
+  gap: var(--sl-calendar-month-gap);
+  padding: var(--sl-calendar-panel-padding);
+  min-width: 0;
+}
+
+.DatePickerPanel .DatePickerPresets {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  inline-size: auto;
+}
+
+.DatePickerPanel .Calendar {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+}
+
+.DatePickerPanel:not(:has(.DatePickerPresets)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.DatePickerPanel:not(:has(.DatePickerPresets)) .Calendar,
+.DatePickerPanel:not(:has(.DatePickerPresets)) .DatePickerFooter {
+  grid-column: 1;
+}
+
+.DatePickerFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-space-3);
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.DatePickerSummary {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+.DatePickerActions {
+  display: flex;
+  gap: var(--sl-space-2);
+  margin-inline-start: auto;
+}
+
+/* Presets become a row once the measured panel is under 40rem, or the popup is a drawer. */
+.DatePickerPanel[data-layout='row'],
+.DatePickerPanel[data-layout='row']:not(:has(.DatePickerPresets)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.DatePickerPanel[data-layout='row'] .DatePickerPresets,
+.DatePickerPanel[data-layout='row'] .Calendar,
+.DatePickerPanel[data-layout='row'] .DatePickerFooter {
+  grid-column: 1;
+  grid-row: auto;
+}
+
+.DatePickerPanel[data-compact] .DatePickerFooter {
+  position: sticky;
+  inset-block-end: 0;
+  flex-wrap: wrap;
+  background: var(--sl-popup-background);
+}
+
+/* The action row shrinks to its buttons, so a percentage width on Apply never
+   resolves. A 100% basis wraps Apply onto its own row of the footer. */
+.DatePickerPanel[data-compact] .DatePickerActions {
+  flex-basis: 100%;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: 0;
+}
+
+.DatePickerPanel[data-compact] .DatePickerApply {
+  flex-basis: 100%;
+}

package/dist/styles/custom/EditableList.css

@@ -0,0 +1,98 @@
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* EditableList
+ *
+ * One table at every width, so a field is not submitted twice. Under the stack width each
+ * field shows its own label, so the lost header association does not matter: the input's
+ * name comes from that label, not from the column header.
+ *
+ * Move up / Move down would be quiet buttons in the last cell, ahead of any future drag handle.
+ */
+
+.EditableList {
+  container-type: inline-size;
+}
+
+.EditableListAdd,
+.EditableListError,
+.EditableListBalance {
+  margin-block-start: var(--sl-collection-toolbar-gap);
+}
+
+.EditableListFieldLabel {
+  display: none;
+}
+
+.EditableListBalance {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  padding: var(--sl-space-2) var(--sl-space-3);
+  border-radius: var(--sl-radius-control);
+}
+
+.EditableListBalance[data-color] {
+  background: var(--sl-scope-soft);
+  color: var(--sl-scope-on-soft);
+}
+
+.EditableListStackedTitle {
+  display: none;
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+}
+
+.EditableList[data-stacked] .EditableListStackedTitle {
+  display: block;
+}
+
+.EditableListRowLead {
+  width: 0;
+  padding: 0;
+  border: 0;
+}
+
+.EditableList td .Input,
+.EditableList td input,
+.EditableList td select {
+  width: 100%;
+}
+
+/* The width token is measured in JS. data-stacked is that measurement. */
+.EditableList[data-stacked] {
+  .EditableListTable,
+  .EditableListTable thead,
+  .EditableListTable tbody,
+  .EditableListTable tr,
+  .EditableListTable td {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .EditableListTable thead {
+    position: absolute;
+    width: var(--sl-space-px);
+    height: var(--sl-space-px);
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  .EditableListTable tr {
+    padding-block: var(--sl-collection-list-row-padding-block);
+    border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+  }
+
+  .EditableListFieldLabel {
+    display: block;
+    font-family: var(--sl-font-subtitle-condense-font-family);
+    font-size: var(--sl-font-subtitle-condense-font-size);
+    font-weight: var(--sl-font-subtitle-condense-font-weight);
+    line-height: var(--sl-font-subtitle-condense-line-height);
+    letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  }
+}