@soxa-ui/theme-base 0.0.0-stage → 0.3.0-beta.1

package/src/components/calendar.css

@@ -0,0 +1,594 @@
+/* ─── Calendar ────────────────────────────────────────────────
+ * The grids of the shown months, one pair of paging buttons for all of them
+ * and the footer, if one is passed.
+ *
+ *   .so-calendar                    root — a column: the row of months and the footer
+ *     .so-calendar__months          the row of months
+ *       .so-calendar__month         a month, one per grid
+ *         .so-calendar__heading     heading row — root of the picker Popover
+ *           .so-calendar__title     month title — a button, trigger of the picker
+ *             .so-calendar__title-text  text: the grid name and the live region
+ *         .so-calendar__prev        "back" button (Button) — first month only
+ *         .so-calendar__next        "forward" button (Button) — same place
+ *         .so-calendar__grid        the grid — `table`
+ *           .so-calendar__weekdays  row of weekdays (`thead > tr`)
+ *             .so-calendar__weekday a weekday (`th`)
+ *           .so-calendar__week      a week (`tbody > tr`)
+ *             .so-calendar__filler  filler — a day of the adjacent month (`td`)
+ *             .so-calendar-item     a day — Calendar.Item (`td`)
+ *               __day              day tile: the number or the slot content
+ *     .so-calendar__footer          footer — row of actions under the grids, if passed
+ *
+ * Geometry is one variable per size, the side of the day tile
+ * (`--so-calendar-day`): the height of Button of the same size (`button.css`)
+ * — the paging buttons stand in the heading row level with the tiles of the
+ * outer columns and are square with the same side. The cell is wider than the
+ * tile by a bleed for the focus ring on every side (`--so-calendar-bleed`):
+ * the ring of a day fits its cell and does not lie on its neighbours, and the
+ * ring of a paging button fits the calendar box, so a scrolling panel around
+ * it does not clip it. The column (`--so-calendar-column`) is the cell, but
+ * not narrower than two and a half label fonts: on large sizes the labels
+ * outgrow the cell, and the calendar widens instead of clipping them; the
+ * tile stays centred in a wider column, `--so-calendar-inset` from its edge.
+ * Everything else counts from the cell and the column: the weekday row, the
+ * month height, the gap between months (half a cell), the place of the
+ * paging buttons, the footer edges. Slot content larger than the tile gets
+ * its size from the consumer — through the same variable on the calendar.
+ *
+ * The root is a column: the row of months, the footer below. The width
+ * follows the months, not the container: the paging buttons stand at the end
+ * of the root and must land over the last columns. Months that do not fit
+ * the width wrap, and the first line is spread to the edges: the arrows stay
+ * over the last columns of the last month of the line. The footer does not
+ * set the width (`contain: inline-size`): buttons wider than a month wrap to
+ * a second line in it instead of widening the calendar.
+ *
+ * Paging buttons — one pair for the whole calendar, right at the end of the
+ * heading row, over the two last columns, as in the Android calendar. In the
+ * DOM the pair stands at the first month, right after its title (Tab goes
+ * title, "back", "forward", grid), so the buttons are taken out of the flow
+ * and placed from the end of the root: the month block and the root of the
+ * title popover are not positioned. A square with the tile side: the button
+ * holds one icon, and the Button scale padding is removed.
+ *
+ * A month keeps the height of six weeks for any month: the calendar does not
+ * jump when paging, and rows of neighbouring grids stay level. The month
+ * title is a button as high as a tile; a name longer than the row is cut with
+ * an ellipsis instead of wrapping — a second line would shift the grid. The
+ * end padding of the heading row is two cells, for the paging buttons, the
+ * same for all months.
+ *
+ * The grid is a table of seven columns of one cell each; the column width is
+ * set by the first row, and the day content does not widen it. A weekday
+ * label is clipped by its column without an ellipsis: on a short name an
+ * ellipsis would leave one letter. A day is a cell and carries focus (one Tab
+ * stop for all grids); the tile inside is centred in the cell, within the
+ * ring bleed, as a centred column: the number or whatever the consumer put in
+ * the slot. A selectable day gets the hand cursor; an unavailable day takes
+ * focus but is not selected, a disabled one takes neither.
+ *
+ * Font — the day scale (`--so-calendar-day-font-size-<size>`): the number in
+ * a cell is the font of the place at `normal`, 2px a size around it. The
+ * weekday labels and the tiles of the month and year picker take the same
+ * font: they stand on the place of the day grid. The month title is the
+ * Button font of the same size, a line as high as the cell: only a block
+ * keeps the ellipsis on a long name. A three-letter short weekday name fits
+ * the column (the `weekdayLabelWidth` rule of the core) — narrow the column
+ * or enlarge the labels only together with the «дни недели» check of the
+ * calendar browser spec.
+ *
+ * A disabled calendar fades by its root as a whole (`disabled.css`), a
+ * disabled day by its cell, with the tile; a day in a disabled calendar does
+ * not fade a second time.
+ *
+ * The month and year picker is a popover of the title inside the calendar
+ * (`contained`, `edge="top"`): it does not go to `body` but covers the
+ * calendar — its positioned ancestor — with a backdrop over the whole
+ * calendar, and the choice is made in a card at its top edge.
+ *
+ *   .so-popover__panel              popover panel — backdrop over the whole calendar
+ *     .so-popover__handle           gesture strip, if enabled (`swipe`)
+ *     .so-popover__content          layout in the backdrop — exactly the card
+ *       .so-calendar__picker        the card: the list and the header
+ *         .so-calendar__picker-list   list of months or years — ListBox
+ *           .so-list-box__list          list node: tiles in a grid
+ *         .so-calendar__picker-header header: year and arrows (after the list in the DOM)
+ *           .so-calendar__picker-heading  year or range of years — level button
+ *           .so-calendar__picker-prev     "back" arrow (Button)
+ *           .so-calendar__picker-next     "forward" arrow (Button)
+ *
+ * The backdrop is the panel itself: it is stretched over the whole calendar,
+ * and a press on the backdrop is a press inside the popover, on which the
+ * calendar code closes the panel and returns focus to the title. The card is
+ * one full-width cell of the panel grid, at the top edge, as high as its
+ * content: the last weeks of the month show under it. The gesture strip is
+ * in the same cell, at the bottom edge of the card and over it: the panel is
+ * pressed to the top edge and is pulled from below; the card keeps a padding
+ * under it, and the strip does not cover the list. The header stands after
+ * the list in the DOM — focus lands on the list on opening — and flex order
+ * puts it on top. The list is 4 columns by 3 rows, cells share the card width
+ * evenly, a row is a quarter higher than a day cell; a tile fills its cell,
+ * the label is centred, wraps only between words when wider than the tile,
+ * and a word wider than the tile itself is cut with an ellipsis.
+ *
+ * The panel selector goes through the root of the title popover, a direct
+ * child of the month: a day slot may hold a foreign popover, and it lies in a
+ * grid cell. Between the root and the panel — a descendant, not a child: the
+ * adapter may keep a `contained` panel in its boxless nodes (`Teleport` in
+ * React). The weight is above the panel rules at an anchor and in a container
+ * (`anchored.css`, `components/popover.css`): they come later, and an equal
+ * weight would lose by order.
+ *
+ * The bleed and the font scale are variables of the document root; the
+ * defaults are the numbers of the oren theme, a theme sets its own on the
+ * document root.
+ *
+ * Look — colours of selection, hover, range band and preview, the "today"
+ * frame, the struck-out unavailable day, the weight of titles and labels,
+ * tabular figures, the focus ring, the button view, mirrored arrows in RTL,
+ * the forced colours view, the backdrop veil, surface, edge and shadow of the
+ * card, its entry, return when released and exit when swiped — is drawn by
+ * the theme. */
+
+:root {
+	--so-calendar-bleed: 0.25rem;
+
+	/* The days are the font of the place at `normal`, and every step counts
+	 * from it: 2px smaller at `sm`, 2px, 4px and 6px larger at `lg`, `xl` and
+	 * `2xl` — 14 / 16 / 18 / 20 / 22px at a 16px place, 12 / 14 / 16 / 18 /
+	 * 20px at 14px. `em` resolves where the variable is read: on the day cell,
+	 * on the weekday labels and on the tiles of the month and year picker, each
+	 * against a parent that takes the font of the calendar, that is of the
+	 * place. */
+	--so-calendar-day-font-size-sm: calc(1em - 0.125rem);
+	--so-calendar-day-line-height-sm: calc(1.25 / 0.875);
+	--so-calendar-day-font-size-normal: 1em;
+	--so-calendar-day-line-height-normal: 1.5;
+	--so-calendar-day-font-size-lg: calc(1em + 0.125rem);
+	--so-calendar-day-line-height-lg: calc(1.75 / 1.125);
+	--so-calendar-day-font-size-xl: calc(1em + 0.25rem);
+	--so-calendar-day-line-height-xl: calc(1.75 / 1.25);
+	--so-calendar-day-font-size-2xl: calc(1em + 0.375rem);
+	--so-calendar-day-line-height-2xl: calc(2 / 1.375);
+}
+
+/* No modifier means `normal`: the core always writes `--size-*`, but the block
+ * must look like the default without it as well. The paging buttons and the
+ * picker count from the root. */
+.so-calendar {
+	--so-calendar-day: var(--so-button-height-normal);
+	--so-calendar-cell: calc(var(--so-calendar-day) + 2 * var(--so-calendar-bleed));
+	--so-calendar-head: var(--so-calendar-day);
+	--so-calendar-column: max(
+		var(--so-calendar-cell),
+		2.5 * var(--so-calendar-day-font-size-normal)
+	);
+	--so-calendar-inset: calc((var(--so-calendar-column) - var(--so-calendar-day)) / 2);
+	--so-calendar-gap: calc(var(--so-calendar-cell) / 2);
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--so-calendar-bleed));
+	width: fit-content;
+	max-width: 100%;
+}
+
+.so-calendar .so-calendar__title {
+	line-height: var(--so-calendar-cell);
+}
+
+.so-calendar .so-calendar__weekday,
+.so-calendar .so-calendar-item,
+.so-calendar .so-calendar__picker-list > .so-list-box__list > .so-list-box-item > .so-button {
+	font-size: var(--so-calendar-day-font-size-normal);
+	line-height: var(--so-calendar-day-line-height-normal);
+}
+
+.so-calendar--size-sm {
+	--so-calendar-day: var(--so-button-height-sm);
+	--so-calendar-column: max(var(--so-calendar-cell), 2.5 * var(--so-calendar-day-font-size-sm));
+}
+
+.so-calendar--size-sm .so-calendar__title {
+	font-size: var(--so-button-font-size-sm);
+	line-height: var(--so-calendar-cell);
+}
+
+.so-calendar--size-sm .so-calendar__weekday,
+.so-calendar--size-sm .so-calendar-item,
+.so-calendar--size-sm
+	.so-calendar__picker-list
+	> .so-list-box__list
+	> .so-list-box-item
+	> .so-button {
+	font-size: var(--so-calendar-day-font-size-sm);
+	line-height: var(--so-calendar-day-line-height-sm);
+}
+
+.so-calendar--size-normal {
+	--so-calendar-day: var(--so-button-height-normal);
+	--so-calendar-column: max(
+		var(--so-calendar-cell),
+		2.5 * var(--so-calendar-day-font-size-normal)
+	);
+}
+
+.so-calendar--size-normal .so-calendar__title {
+	line-height: var(--so-calendar-cell);
+}
+
+.so-calendar--size-normal .so-calendar__weekday,
+.so-calendar--size-normal .so-calendar-item,
+.so-calendar--size-normal
+	.so-calendar__picker-list
+	> .so-list-box__list
+	> .so-list-box-item
+	> .so-button {
+	font-size: var(--so-calendar-day-font-size-normal);
+	line-height: var(--so-calendar-day-line-height-normal);
+}
+
+.so-calendar--size-lg {
+	--so-calendar-day: var(--so-button-height-lg);
+	--so-calendar-column: max(var(--so-calendar-cell), 2.5 * var(--so-calendar-day-font-size-lg));
+}
+
+.so-calendar--size-lg .so-calendar__title {
+	font-size: var(--so-button-font-size-lg);
+	line-height: var(--so-calendar-cell);
+}
+
+.so-calendar--size-lg .so-calendar__weekday,
+.so-calendar--size-lg .so-calendar-item,
+.so-calendar--size-lg
+	.so-calendar__picker-list
+	> .so-list-box__list
+	> .so-list-box-item
+	> .so-button {
+	font-size: var(--so-calendar-day-font-size-lg);
+	line-height: var(--so-calendar-day-line-height-lg);
+}
+
+.so-calendar--size-xl {
+	--so-calendar-day: var(--so-button-height-xl);
+	--so-calendar-column: max(var(--so-calendar-cell), 2.5 * var(--so-calendar-day-font-size-xl));
+}
+
+.so-calendar--size-xl .so-calendar__title {
+	font-size: var(--so-button-font-size-xl);
+	line-height: var(--so-calendar-cell);
+}
+
+.so-calendar--size-xl .so-calendar__weekday,
+.so-calendar--size-xl .so-calendar-item,
+.so-calendar--size-xl
+	.so-calendar__picker-list
+	> .so-list-box__list
+	> .so-list-box-item
+	> .so-button {
+	font-size: var(--so-calendar-day-font-size-xl);
+	line-height: var(--so-calendar-day-line-height-xl);
+}
+
+.so-calendar--size-2xl {
+	--so-calendar-day: var(--so-button-height-2xl);
+	--so-calendar-column: max(var(--so-calendar-cell), 2.5 * var(--so-calendar-day-font-size-2xl));
+}
+
+.so-calendar--size-2xl .so-calendar__title {
+	font-size: var(--so-button-font-size-2xl);
+	line-height: var(--so-calendar-cell);
+}
+
+.so-calendar--size-2xl .so-calendar__weekday,
+.so-calendar--size-2xl .so-calendar-item,
+.so-calendar--size-2xl
+	.so-calendar__picker-list
+	> .so-list-box__list
+	> .so-list-box-item
+	> .so-button {
+	font-size: var(--so-calendar-day-font-size-2xl);
+	line-height: var(--so-calendar-day-line-height-2xl);
+}
+
+/* A disabled calendar fades by its root as a whole — titles, weekdays, days,
+ * paging buttons and the footer. Days and buttons are disabled with it and do
+ * not fade a second time under the faded root. */
+.so-calendar[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-calendar[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+/* Months — in a row, in their own node: a footer in the same row would add
+ * its width to the row, and the paging buttons would hang past the last
+ * column. While the months fit, there is no free space, and the gap between
+ * them is exactly `--so-calendar-gap`. */
+.so-calendar__months {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	gap: var(--so-calendar-gap);
+}
+
+/* "Back" — over the sixth column, "forward" — over the seventh, level with
+ * their tiles; two bleeds between the buttons, as between the tiles of
+ * neighbouring days. */
+.so-calendar__prev,
+.so-calendar__next {
+	position: absolute;
+	inset-block-start: var(--so-calendar-bleed);
+	inline-size: var(--so-calendar-day);
+	block-size: var(--so-calendar-day);
+	padding-inline: 0;
+}
+
+.so-calendar__prev {
+	inset-inline-end: calc(var(--so-calendar-column) + var(--so-calendar-inset));
+}
+
+.so-calendar__next {
+	inset-inline-end: var(--so-calendar-inset);
+}
+
+/* Weeks are pressed to the top, the room for six weeks is under the last. */
+.so-calendar__month {
+	display: flex;
+	flex-direction: column;
+	min-block-size: calc(
+		var(--so-calendar-cell) + var(--so-calendar-head) + 6 * var(--so-calendar-cell)
+	);
+}
+
+/* The heading row is the popover root: inline in Popover, here it takes the
+ * whole row and puts the title button at the start of the month, level with
+ * the tile of the first column. It must not be positioned: the paging buttons
+ * and the picker stand from the calendar root. */
+.so-calendar__month > .so-calendar__heading {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	block-size: var(--so-calendar-cell);
+	padding-inline-start: var(--so-calendar-inset);
+	padding-inline-end: calc(2 * var(--so-calendar-column));
+}
+
+.so-calendar__title {
+	min-width: 0;
+	max-width: 100%;
+	block-size: var(--so-calendar-day);
+}
+
+.so-calendar__title-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.so-calendar__grid {
+	table-layout: fixed;
+	border-collapse: collapse;
+	inline-size: calc(7 * var(--so-calendar-column));
+}
+
+.so-calendar__weekdays {
+	block-size: var(--so-calendar-head);
+}
+
+.so-calendar__weekday {
+	padding: 0;
+	text-align: center;
+	vertical-align: middle;
+	overflow: hidden;
+	white-space: nowrap;
+	inline-size: var(--so-calendar-column);
+}
+
+/* The height is set on the row: a filler has no content, and without it the
+ * row would shrink to the days in it. */
+.so-calendar__week {
+	block-size: var(--so-calendar-cell);
+}
+
+/* A filler only holds a place in the week: a number would repeat a date that
+ * stands in the neighbouring grid. */
+.so-calendar__filler {
+	padding: 0;
+}
+
+/* The content is at the end of the line, like dialog buttons, the edges level
+ * with the tiles of the outer columns. */
+.so-calendar__footer {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: flex-end;
+	contain: inline-size;
+	gap: calc(2 * var(--so-calendar-bleed));
+	padding-inline: var(--so-calendar-inset);
+}
+
+/* The cell is positioned: the theme draws the range band on it, and the tile
+ * — positioned too and after it in the DOM — stands on top. */
+.so-calendar-item {
+	position: relative;
+	padding: 0;
+	text-align: center;
+	vertical-align: middle;
+	-webkit-user-select: none;
+	user-select: none;
+	inline-size: var(--so-calendar-column);
+	block-size: var(--so-calendar-cell);
+}
+
+/* Not narrower and not lower than a tile; larger slot content widens the
+ * tile. */
+.so-calendar-item__day {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	margin-inline: auto;
+	inline-size: fit-content;
+	min-inline-size: var(--so-calendar-day);
+	min-block-size: var(--so-calendar-day);
+}
+
+.so-calendar-item:not([data-disabled='true'], [data-unavailable='true']) {
+	cursor: pointer;
+}
+
+.so-calendar-item[data-disabled='true'] {
+	opacity: var(--so-disabled-opacity);
+}
+
+.so-calendar-item[data-disabled='true'] > * {
+	--so-disabled-opacity: 1;
+}
+
+/* The picker covers the whole calendar instead of following its content
+ * height, as a panel with the `top` edge does; it has no padding of its own.
+ * The card and the strip are in one grid cell, at the top.
+ *
+ * The card and the strip follow the pointer while the backdrop stays: moving
+ * with the card, it would stick out of the calendar. The gesture plugin
+ * writes the offset to the panel itself (`--so-swipe-offset`), and the card
+ * and the strip are not layers and inherit it (`swipe.css`). */
+.so-calendar__month > .so-calendar__heading .so-popover__panel[data-contained='true'] {
+	display: grid;
+	align-content: flex-start;
+	inset: 0;
+	padding: 0;
+	translate: none;
+}
+
+/* The layout in the backdrop is exactly the card: the full backdrop width,
+ * without the popover padding and without scrolling — the card fits the
+ * calendar at any size. */
+.so-calendar__month
+	> .so-calendar__heading
+	.so-popover__panel[data-contained='true']
+	> .so-popover__content {
+	grid-area: 1 / 1;
+	width: auto;
+	padding: 0;
+	overflow: visible;
+	translate: 0 var(--so-swipe-offset);
+}
+
+/* The card keeps the rhythm of two bleeds, like neighbouring days: the
+ * padding, the gap between the header and the list, the gap between tiles.
+ * The padding also holds the focus ring of the list. */
+.so-calendar__picker {
+	display: flex;
+	flex-direction: column;
+	gap: calc(2 * var(--so-calendar-bleed));
+	padding: calc(2 * var(--so-calendar-bleed));
+}
+
+/* The header is like the calendar heading row: the year or range of years at
+ * the start, the arrows right at the end; the logical auto margin of the year
+ * button takes the rest of the line. */
+.so-calendar__picker-header {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	order: -9999;
+	gap: calc(2 * var(--so-calendar-bleed));
+	block-size: var(--so-calendar-day);
+}
+
+.so-calendar__picker-heading {
+	min-width: 0;
+	block-size: var(--so-calendar-day);
+	margin-inline-end: auto;
+}
+
+.so-calendar__picker-prev,
+.so-calendar__picker-next {
+	flex-shrink: 0;
+	inline-size: var(--so-calendar-day);
+	block-size: var(--so-calendar-day);
+	padding-inline: 0;
+}
+
+/* The tiles are children of the list node, not of the ListBox root: the root
+ * is a frame around the header, list and footer, and it only has to drop the
+ * padding and width of the list. */
+.so-calendar__picker > .so-calendar__picker-list {
+	min-width: 0;
+	max-width: none;
+	padding: 0;
+}
+
+.so-calendar__picker > .so-calendar__picker-list > .so-list-box__list {
+	display: grid;
+	grid-template-columns: repeat(4, minmax(0, 1fr));
+	grid-template-rows: repeat(3, minmax(calc(1.25 * var(--so-calendar-cell)), 1fr));
+	gap: calc(2 * var(--so-calendar-bleed));
+}
+
+/* The strip is a direct child of the panel: that is how the gesture plugin
+ * finds it. */
+.so-calendar__month
+	> .so-calendar__heading
+	.so-popover__panel[data-contained='true']
+	> .so-popover__handle {
+	position: static;
+	z-index: 1;
+	grid-area: 1 / 1;
+	align-self: flex-end;
+	translate: 0 var(--so-swipe-offset);
+}
+
+.so-calendar__month
+	> .so-calendar__heading
+	.so-popover__panel[data-contained='true']:has(> .so-popover__handle)
+	.so-calendar__picker {
+	padding-block-end: var(--so-target-size);
+}
+
+/* A tile is a row over the whole cell, not a button of its own size in the
+ * middle of it. The label is centred: vertically by the button, horizontally
+ * by the text alignment that the ListBox row keeps at the start. A tile
+ * picks a month or a year, a press does something at once: the hand cursor,
+ * the default one on a disabled tile. */
+.so-calendar__picker-list > .so-list-box__list > .so-list-box-item {
+	display: flex;
+}
+
+.so-calendar__picker-list > .so-list-box__list > .so-list-box-item > .so-button {
+	flex: 1;
+	min-width: 0;
+	height: auto;
+	padding-inline: 0;
+}
+
+.so-calendar__picker-list
+	> .so-list-box__list
+	> .so-list-box-item
+	> .so-button:not([data-disabled='true']) {
+	cursor: pointer;
+}
+
+.so-calendar__picker-list > .so-list-box__list > .so-list-box-item > .so-button > .so-button__text {
+	text-align: center;
+}
+
+/* Wrapping (`data-content-fit='wrap'` of the row, set by the calendar) — only
+ * between words: a label of several words (`vi-VN` "Tháng 10", a `th-TH` year
+ * with the era) would lose its number to an ellipsis. A word wider than the
+ * tile has nowhere to wrap, and the text area cuts it with the button
+ * ellipsis on the label line that did not fit instead of letting it out, as
+ * a wrapping ListBox row does. */
+.so-calendar__picker-list
+	> .so-list-box__list
+	> .so-list-box-item[data-content-fit='wrap']
+	> .so-button
+	> .so-button__text {
+	overflow: hidden;
+	overflow-wrap: normal;
+}