ionbase-ui 0.59.0 → 0.69.0

package/dist/styles/date-picker.css

@@ -0,0 +1,420 @@
+/*
+ * DatePicker — the segmented field, the calendar grid and the overlay that
+ * holds it. `date-range-picker.css` carries only what the range adds.
+ *
+ * Drawn in Figma as `Date Picker` (1394:536, the field — Type=Range is
+ * DateRangePicker's), `Calendar` (1395:1102) and `Calendar Day` (1395:318), from
+ * this file. Measurements were borrowed rather than invented, the same way
+ * AgentStop borrowed Button's and ApprovalGate borrowed Alert's:
+ *
+ *   the field    Input's box, unchanged — `.ion-date-picker` rides on
+ *                `.ion-input` rather than restating a border, a radius and
+ *                seven states that would then drift from the real thing
+ *   the overlay  Combobox Menu's surface, border, radius and shadow
+ *   a day cell   Menu's row metrics, squared off to the icon ladder
+ *
+ * The bet held here too: the drawing changed no structure. From now on the
+ * numbers move in Figma and come back through the token pipeline.
+ *
+ * WHY THE SPLIT ACROSS TWO FILES IS NOT ARBITRARY
+ *
+ * `build-meta.mjs` resolves a component's token list from `src/styles/<kebab
+ * name>.css`, falling back to the longest filename that is a PREFIX of it.
+ * `date-picker` is not a prefix of `date-range-picker`, so one shared file
+ * would leave DateRangePicker with `stylesheet: null` and an empty `tokens`
+ * array — and `verify-meta`'s "every custom property is defined by a token
+ * layer" check would then pass by having nothing to check. A gate that passes
+ * because it was handed nothing is the failure mode that file warns about.
+ */
+
+/* ------------------------------------------------------------------ field */
+
+/*
+ * The group is `.ion-input` plus this. Only the parts Input has no opinion
+ * about are new: how the segments sit, and the trailing calendar button.
+ */
+.ion-date-picker {
+  cursor: text;
+}
+
+.ion-date-field {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+  color: var(--text-secondary);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: var(--font-weight-regular);
+}
+
+.ion-date-field:focus {
+  outline: none;
+}
+
+/*
+ * A segment is a spinbutton, not an input, so every affordance a text field
+ * gets for free has to be declared: the caret is suppressed, selection is off,
+ * and the tap target is the padded box rather than the glyph.
+ */
+.ion-date-field__segment {
+  padding-inline: var(--spacing-2);
+  border-radius: var(--radius-2xs);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  caret-color: transparent;
+  outline: none;
+}
+
+/*
+ * Focus is a filled box, NOT the focus ring the rest of the system uses.
+ *
+ * A ring is drawn outside the element it belongs to, and these elements sit
+ * shoulder to shoulder inside a bordered field with two or three pixels between
+ * them — an outline on the month segment overlaps the day segment beside it and
+ * clips against the field's own border. A filled box is contained, reads at a
+ * glance, and is what every native date input does for the same reason.
+ *
+ * `:focus-visible` would be wrong here too. The segment takes focus from a
+ * click as well as from the keyboard, and in both cases the user needs to know
+ * which of three near-identical numbers the next keystroke will change.
+ */
+.ion-date-field__segment:focus {
+  background-color: var(--surface-primary);
+  color: var(--text-on-color);
+}
+
+/*
+ * An unfilled segment shows its placeholder — "mm", "dd", "yyyy" in the
+ * reader's own language, from Intl. Held at the placeholder token so an empty
+ * field reads as empty rather than as a date somebody chose.
+ */
+.ion-date-field__segment--placeholder {
+  color: var(--text-tertiary);
+}
+
+.ion-date-field__segment:focus.ion-date-field__segment--placeholder {
+  color: var(--text-on-color);
+}
+
+/*
+ * The separators. Not focusable, no padding, no reserved width — they are the
+ * locale's own "/" or "." and must not be mistaken for something editable.
+ */
+.ion-date-field__segment--literal {
+  padding-inline: 0;
+  color: var(--text-tertiary);
+}
+
+.ion-input[data-disabled='true'] .ion-date-field,
+.ion-input[data-disabled='true'] .ion-date-field__segment {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-date-picker__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--radius-2xs);
+  color: var(--icon-interactive);
+  cursor: pointer;
+}
+
+.ion-date-picker__button svg {
+  width: var(--ion-input-icon-size);
+  height: var(--ion-input-icon-size);
+}
+
+.ion-input[data-disabled='true'] .ion-date-picker__button {
+  color: var(--icon-disabled);
+  cursor: not-allowed;
+}
+
+/* ---------------------------------------------------------------- overlay */
+
+/*
+ * Transparent. It exists to catch the outside click and nothing else — the page
+ * behind stays legible because the field being edited is part of what the user
+ * is reading. Modal's scrim is visible because a modal replaces the page.
+ */
+.ion-calendar-popover__underlay {
+  position: fixed;
+  inset: 0;
+}
+
+.ion-calendar-popover {
+  z-index: 1000;
+  padding: var(--spacing-12);
+  background-color: var(--surface-raised);
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  box-shadow: var(--ion-shadow-shadow-lg);
+}
+
+/* --------------------------------------------------------------- calendar */
+
+/*
+ * THE BACKGROUND IS NOT DECORATION — IT IS WHAT MAKES THE HOVERS MEASURABLE.
+ *
+ * `--surface-hover` is `rgba(0, 0, 0, 0.05)`: a tint with no colour of its own.
+ * The contrast gate resolves a translucent ground by compositing it over the
+ * BLOCK's default background, and a block that declares none leaves it with
+ * nothing to composite against — so every hover pairing inside came back
+ * *skipped*: not failing, not passing, unmeasured. `combobox.css` records the
+ * same trap from the other direction, and Drawer shipped it in 0.57.0 with only
+ * a count in a summary line to catch it.
+ *
+ * The calendar is always inside `.ion-calendar-popover`, which is already
+ * `surface/raised`, so this restates what is true rather than changing what is
+ * painted. What it buys is a gate that can answer the question.
+ */
+.ion-calendar {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-12);
+  background-color: var(--surface-raised);
+  font-family: var(--font-family-sans);
+}
+
+.ion-calendar__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.ion-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-8);
+}
+
+.ion-calendar__title {
+  flex: 1 1 auto;
+  color: var(--text-default);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/*
+ * The per-grid month label. Present only when more than one month is shown —
+ * with a single grid the header title above already names the month, and two
+ * copies of "April 2026" stacked on top of each other reads as a rendering bug.
+ */
+.ion-calendar__month-label {
+  display: none;
+  padding-block-end: var(--spacing-6);
+  color: var(--text-default);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+}
+
+.ion-calendar:not([data-months='1']) .ion-calendar__month-label {
+  display: block;
+}
+
+/*
+ * ...and with more than one month the HEADER title is the one that goes, for
+ * the mirror-image reason: it names the whole visible range
+ * ("November – December 2024") while each grid already names itself. The
+ * visually-hidden <h2> beside it stays either way, so the calendar keeps its
+ * accessible name with no visible title at all.
+ */
+.ion-calendar:not([data-months='1']) .ion-calendar__title {
+  visibility: hidden;
+}
+
+.ion-calendar__nav-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--icon-secondary);
+  cursor: pointer;
+}
+
+.ion-calendar__nav-button svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+@media (hover: hover) {
+  .ion-calendar__nav-button:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+/*
+ * The boundary case: a `minValue` inside the visible month leaves no previous
+ * month to step to. react-aria disables the arrow rather than removing it, so
+ * the header does not reflow — and the cursor says why.
+ */
+.ion-calendar__nav-button:disabled {
+  color: var(--icon-disabled);
+  cursor: not-allowed;
+}
+
+.ion-calendar__months {
+  display: flex;
+  gap: var(--spacing-24);
+}
+
+.ion-calendar__grid {
+  border-collapse: collapse;
+
+  /*
+   * Fixed, so every column is the same width regardless of what is in it. Left
+   * automatic, a month whose widest cell is "30" and one whose widest is "9"
+   * lay out differently, and the two grids of a range calendar sitting side by
+   * side would not line up.
+   */
+  table-layout: fixed;
+}
+
+.ion-calendar__weekday {
+  width: var(--spacing-32);
+  padding-block-end: var(--spacing-4);
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+}
+
+.ion-calendar__cell {
+  padding: 0;
+  text-align: center;
+}
+
+/*
+ * A day.
+ *
+ * `--ion-calendar-day-size` is a slot rather than a literal because three rules
+ * need the same number — the cell, the range band's bleed and the today dot's
+ * offset — and a band that is a pixel off the cell it fills is visible.
+ */
+.ion-calendar__day {
+  --ion-calendar-day-size: var(--spacing-32);
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ion-calendar-day-size);
+  height: var(--ion-calendar-day-size);
+  border-radius: var(--radius-full);
+  color: var(--text-default);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  outline: none;
+}
+
+@media (hover: hover) {
+  .ion-calendar__day:not([data-disabled], [data-unavailable]):hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+/*
+ * Keyboard focus is a ring, and unlike the segments above it is safe here:
+ * a day cell has a full cell's worth of space around it, and the ring sits in
+ * the gap rather than over the neighbour.
+ */
+.ion-calendar__day:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: calc(var(--border-width-default) * 2);
+}
+
+.ion-calendar__day[data-selected] {
+  background-color: var(--surface-primary);
+  color: var(--text-on-color);
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * Today, marked whether or not it is selected.
+ *
+ * A dot under the numeral rather than a border around it: a ring would be one
+ * more circle in a grid of circles and would read as a second selected day. The
+ * dot moves to the on-colour token when the cell is selected so the mark
+ * survives the fill — a "today" cue that disappears the moment today is picked
+ * vanishes exactly when the user is checking that they picked it.
+ */
+.ion-calendar__day[data-today]::after {
+  position: absolute;
+  bottom: var(--spacing-4);
+  left: 50%;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  background-color: var(--icon-primary);
+  border-radius: var(--radius-full);
+  transform: translateX(-50%);
+  content: '';
+}
+
+.ion-calendar__day[data-today][data-selected]::after {
+  background-color: var(--icon-on-color);
+}
+
+/*
+ * Disabled and unavailable are DIFFERENT and are drawn differently on purpose.
+ *
+ * Disabled is outside the allowed bounds, or the whole control is off: the day
+ * is not part of the question. Unavailable is inside the bounds and taken — a
+ * booked night, a closed holiday. A user who sees both drawn the same way reads
+ * a fully-booked week as a broken calendar.
+ */
+.ion-calendar__day[data-disabled] {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+.ion-calendar__day[data-unavailable] {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+/*
+ * Forced colours: every fill above is a background-color, and Windows High
+ * Contrast discards those. Without this the selected day loses its fill and the
+ * grid becomes a wall of identical numbers with nothing marking the answer.
+ */
+@media (forced-colors: active) {
+  .ion-calendar__day[data-selected] {
+    background-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  .ion-calendar__day[data-disabled],
+  .ion-calendar__day[data-unavailable] {
+    color: GrayText;
+  }
+
+  .ion-date-field__segment:focus {
+    background-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}

package/dist/styles/date-range-picker.css

@@ -0,0 +1,280 @@
+/*
+ * DateRangePicker — only what the range adds.
+ *
+ * The field, the calendar grid, the day cell and the overlay all come from
+ * `date-picker.css` unchanged. What is here is the three things a range has and
+ * a single date does not: two fields with a dash between them, a band across
+ * the days in between, and the preset rail beside the grids.
+ *
+ * This is a separate file rather than a section of that one because
+ * `build-meta.mjs` resolves a component's token list from its own kebab-cased
+ * filename — see the note at the top of `date-picker.css` for what sharing one
+ * file would silently do to `verify-meta`'s token check.
+ */
+
+/* ------------------------------------------------------------------ field */
+
+.ion-date-range-picker {
+  cursor: text;
+}
+
+/*
+ * The dash between the two fields. `aria-hidden` in the markup, so this is
+ * purely a visual separator — held at the tertiary token so it reads as
+ * punctuation rather than as one of the two values it sits between.
+ */
+.ion-date-range-picker__dash {
+  flex-shrink: 0;
+  padding-inline: var(--spacing-2);
+  color: var(--text-tertiary);
+}
+
+.ion-input[data-disabled='true'] .ion-date-range-picker__dash {
+  color: var(--text-disabled);
+}
+
+.ion-date-range-picker__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: var(--radius-2xs);
+  color: var(--icon-interactive);
+  cursor: pointer;
+}
+
+.ion-date-range-picker__button svg {
+  width: var(--ion-input-icon-size);
+  height: var(--ion-input-icon-size);
+}
+
+.ion-input[data-disabled='true'] .ion-date-range-picker__button {
+  color: var(--icon-disabled);
+  cursor: not-allowed;
+}
+
+/* ------------------------------------------------------------- the band */
+
+/*
+ * A day inside the range but not at either end.
+ *
+ * SQUARE, and bled sideways by half the gap between cells, so consecutive days
+ * join into one continuous bar instead of a row of separate tinted pills. The
+ * bleed is `--ion-calendar-day-size` derived rather than a literal because the
+ * cell size is a slot in `date-picker.css`: a band measured independently is a
+ * band that is one pixel off the first time that slot changes.
+ *
+ * The rule overrides `border-radius` from `.ion-calendar__day`, which is why it
+ * has to load after it — `styles/index.css` imports date-picker.css first.
+ *
+ * Range states are selected by the BEM modifiers Calendar already emits, not
+ * by `[data-in-range]` and friends. Same DOM, same specificity (0,2,0) — but
+ * the contrast gate keys contexts on `--modifier` classes and folds every
+ * `[data-*]` into `default`, so it merged the endpoint's white text with the
+ * in-range hover surface and reported 1.15:1 for a state that cannot render.
+ */
+.ion-calendar__day.ion-calendar__day--in-range {
+  width: 100%;
+  background-color: var(--surface-primary-subtle);
+  border-radius: var(--radius-none);
+  color: var(--text-default);
+  font-weight: var(--font-weight-regular);
+}
+
+/*
+ * The two endpoints. Solid fill, and rounded only on the OUTER side so each one
+ * caps the band rather than floating beside it.
+ *
+ * Logical properties, not `border-top-left-radius`: in an RTL locale the start
+ * of the range is on the right, and a physically-named radius would cap the
+ * wrong end of every range an Arabic or Hebrew reader selects.
+ */
+.ion-calendar__day.ion-calendar__day--range-start,
+.ion-calendar__day.ion-calendar__day--range-end {
+  width: 100%;
+  background-color: var(--surface-primary);
+  color: var(--text-on-color);
+}
+
+.ion-calendar__day.ion-calendar__day--range-start {
+  border-start-start-radius: var(--radius-full);
+  border-start-end-radius: var(--radius-none);
+  border-end-start-radius: var(--radius-full);
+  border-end-end-radius: var(--radius-none);
+}
+
+.ion-calendar__day.ion-calendar__day--range-end {
+  border-start-start-radius: var(--radius-none);
+  border-start-end-radius: var(--radius-full);
+  border-end-start-radius: var(--radius-none);
+  border-end-end-radius: var(--radius-full);
+}
+
+/*
+ * A one-day range is both ends at once, and the two rules above would leave it
+ * square on both inner sides — a lozenge with no round edge anywhere. Fully
+ * round is what a single selected day looks like everywhere else in the grid.
+ */
+.ion-calendar__day.ion-calendar__day--range-start.ion-calendar__day--range-end {
+  border-radius: var(--radius-full);
+}
+
+@media (hover: hover) {
+  .ion-calendar__day.ion-calendar__day--in-range:hover {
+    background-color: var(--surface-primary-subtle-hover);
+  }
+}
+
+/* --------------------------------------------------------------- presets */
+
+/*
+ * The rail. A column of shortcuts at the start edge of the calendar, matching
+ * the reference this was drawn from.
+ *
+ * `role="group"` with a label rather than a `<nav>` or a list: these are
+ * buttons that set the value beside them, and a reader arriving at an unnamed
+ * cluster of eight buttons inside a date dialog has no way to tell what they
+ * are for.
+ *
+ * ITS OWN BLOCK, NOT `.ion-date-range-picker__presets`, and the reason is the
+ * same one `combobox.css` gives for `.ion-combobox-menu`. The rail's hover is
+ * `--surface-hover`, a five-percent black tint. The contrast gate composites a
+ * translucent ground over the BLOCK's own background — and
+ * `.ion-date-range-picker` has none of its own, because it borrows `.ion-input`'s
+ * from another stylesheet, which this file's parse cannot see. Named as an
+ * element of the field, every hover pairing in the rail came back *skipped*:
+ * unmeasured, while the gate reported green.
+ *
+ * Naming it for where it actually lives — on the popover's raised surface —
+ * gives the tint something to sit on, and the declaration below is true rather
+ * than defensive.
+ */
+.ion-range-presets {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  background-color: var(--surface-raised);
+  gap: var(--spacing-2);
+  padding-inline-end: var(--spacing-12);
+  border-inline-end: var(--border-width-default) solid var(--border-subtle);
+}
+
+.ion-range-presets__item {
+  padding: var(--spacing-6) var(--spacing-8);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  text-align: start;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .ion-range-presets__item:hover {
+    background-color: var(--surface-hover);
+  }
+}
+
+.ion-range-presets__item:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: calc(var(--border-width-default) * -1);
+}
+
+/*
+ * A preset whose range is the one currently selected.
+ *
+ * Tinted AND weighted, not tinted alone — `aria-pressed` carries it for a
+ * screen reader, and a background tint on its own is the colour-only
+ * distinction WCAG 1.4.1 is about for everyone else.
+ */
+.ion-range-presets__item[data-selected] {
+  background-color: var(--surface-primary-subtle);
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ---------------------------------------------------------------- footer */
+
+/* Its own block too, and for the same reason as the rail above. */
+.ion-range-footer {
+  display: flex;
+  justify-content: flex-end;
+  background-color: var(--surface-raised);
+  padding-block-start: var(--spacing-8);
+  border-block-start: var(--border-width-default) solid var(--border-subtle);
+}
+
+/*
+ * Clear, and there is no Apply beside it — the value commits when the second
+ * date lands. See the component's own doc comment for why a draft model was
+ * considered and rejected.
+ */
+.ion-range-footer__clear {
+  padding: var(--spacing-4) var(--spacing-8);
+  background-color: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-interactive);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .ion-range-footer__clear:hover {
+    background-color: var(--surface-hover);
+    color: var(--text-interactive-hover);
+  }
+}
+
+.ion-range-footer__clear:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: calc(var(--border-width-default) * -1);
+}
+
+/*
+ * The rail stacks above the grids on a narrow viewport rather than being
+ * dropped. A two-month calendar is already near the width of a small phone, and
+ * the shortcuts are the fastest path to a range on exactly the device where
+ * dragging across two grids is worst.
+ */
+@media (width <= 32rem) {
+  .ion-calendar {
+    flex-direction: column;
+  }
+
+  .ion-range-presets {
+    flex-flow: row wrap;
+    padding-inline-end: 0;
+    padding-block-end: var(--spacing-8);
+    border-inline-end: none;
+    border-block-end: var(--border-width-default) solid var(--border-subtle);
+  }
+
+  .ion-calendar__months {
+    flex-direction: column;
+  }
+}
+
+@media (forced-colors: active) {
+  .ion-calendar__day[data-in-range] {
+    background-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+
+  .ion-range-presets__item[data-selected] {
+    background-color: Highlight;
+    color: HighlightText;
+    forced-color-adjust: none;
+  }
+}