@volverjs/style 0.1.29 → 0.1.30

package/src/settings/components/_vv-calendar.scss

@@ -0,0 +1,102 @@
+// A month to pick a date or a range from: a `header` with the `title` of the
+// month between two `nav` buttons, and a `grid`, a table whose `weekday`
+// headers sit over the `day` buttons of the month. The keyboard moves across
+// the grid with a roving tabindex: one day is `tabindex="0"`, the others
+// `tabindex="-1"`, which the shared `focus-visible` state leaves out, so the
+// ring of a day is a rule on the entry (`src/components/vv-calendar.scss`). What a day is comes from
+// its markup: the chosen day, or each end of a range, is `aria-pressed="true"`
+// on its button, today is `aria-current="date"`, a day that cannot be chosen
+// is `disabled`, and the days between the two ends of a range are cells with
+// `aria-selected="true"`. Days of the months around are left out, or written
+// as disabled buttons. A date picker is this block in a `vv-popover` next to
+// a field.
+$vv-calendar: (
+	display: inline-flex,
+	flex-direction: column,
+	gap: var(--spacing-8),
+	color: var(--color-word-2),
+	font-size: var(--text-14),
+	element: (
+		header: (
+			display: flex,
+			align-items: center,
+			justify-content: space-between,
+			gap: var(--spacing-8),
+		),
+		title: (
+			color: var(--color-word-1),
+			font-weight: var(--font-semibold),
+		),
+		nav: (
+			display: inline-grid,
+			place-items: center,
+			inline-size: 2em,
+			block-size: 2em,
+			border-radius: var(--rounded),
+			color: var(--color-word-3),
+			cursor: pointer,
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
+					outline-offset: var(--spacing-2),
+				),
+			),
+		),
+		grid: (
+			_alias: 'table',
+			border-collapse: collapse,
+		),
+		weekday: (
+			_alias: 'th',
+			padding-block-end: var(--spacing-4),
+			color: var(--color-word-4),
+			font-size: var(--text-12),
+			font-weight: var(--font-normal),
+			text-align: center,
+		),
+		cell: (
+			_alias: 'td',
+			padding: var(--spacing-1) 0,
+			text-align: center,
+			state: (
+				// The band between the two ends of a range
+				selected: (
+					background-color: var(--color-surface-2),
+				),
+			),
+		),
+		day: (
+			display: inline-grid,
+			place-items: center,
+			inline-size: 2.25em,
+			block-size: 2.25em,
+			border-radius: var(--rounded-full),
+			font-variant-numeric: tabular-nums,
+			cursor: pointer,
+			state: (
+				// One step deeper than the band of a range, so it shows there
+				hover: (
+					background-color: var(--color-surface-3),
+				),
+				current-date: (
+					font-weight: var(--font-semibold),
+					box-shadow: inset 0 0 0 var(--spacing-px) var(--color-word-4),
+				),
+				// After the hover and today: the chosen day keeps its fill
+				pressed: (
+					background-color: var(--color-word),
+					color: var(--color-surface),
+					font-weight: var(--font-semibold),
+				),
+				disabled: (
+					opacity: var(--opacity-30),
+					cursor: not-allowed,
+				),
+			),
+		),
+	),
+) !default;

package/src/settings/components/_vv-checkbox-group.scss

@@ -46,17 +46,48 @@ $vv-checkbox-group: (
 				),
 			),
 		),
+		// A segmented control: one recessed track the height of a field,
+		// the options side by side inside it, the chosen one raised (the
+		// `segment` modifier of the radio or the checkbox). For a choice
+		// between a few short named states. `vv-radio-group` shares this map,
+		// so a radio group takes the same modifiers. The options carry no
+		// margin here, so the wrapper takes the one they would have left under
+		// the last row, which the negative top margin of the hint expects.
+		segmented: (
+			element: (
+				wrapper: (
+					margin-bottom: var(--input-gap),
+					flex-direction: row,
+					flex-wrap: nowrap,
+					gap: var(--spacing-2),
+					padding: var(--spacing-4),
+					border-radius: var(--rounded-lg),
+					background-color: var(--color-surface-2),
+				),
+			),
+		),
+		// A row of choice cards (the `card` modifier of the radio or the
+		// checkbox), which wraps when a card would fall under its floor
+		cards: (
+			element: (
+				wrapper: (
+					margin-bottom: var(--input-gap),
+					flex-direction: row,
+					gap: var(--spacing-8),
+				),
+			),
+		),
 		valid: (
 			element: (
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 			),
 		),
 		invalid: (
 			element: (
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 			),
 		),

package/src/settings/components/_vv-checkbox.scss

@@ -1,3 +1,5 @@
+@use 'choice' as *;
+
 $vv-checkbox: (
 	display: inline-flex,
 	flex-wrap: wrap,
@@ -49,7 +51,7 @@ $vv-checkbox: (
 					background-image: var(--bg-minus),
 				),
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-2),
 				),
 			),
@@ -82,6 +84,8 @@ $vv-checkbox: (
 		),
 	),
 	modifier: (
+		segment: $choice-segment,
+		card: $choice-card,
 		readonly: (
 			opacity: var(--opacity-100),
 			cursor: default,
@@ -135,6 +139,7 @@ $vv-checkbox: (
 								after: (
 									[translate]:
 										calc(100% * var(--direction, 1)),
+									background: var(--color-brand-contrast),
 								),
 							),
 						),
@@ -145,14 +150,14 @@ $vv-checkbox: (
 		valid: (
 			element: (
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 			),
 		),
 		invalid: (
 			element: (
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 			),
 		),

package/src/settings/components/_vv-command.scss

@@ -0,0 +1,99 @@
+// A command palette: a search field over a list of commands grouped under
+// headings, inline in a page or inside a `vv-dialog`. The field is the
+// `combobox` and the list the `listbox`, each group a `role="group"` labelled
+// by its `heading`; the option the keyboard is on carries
+// `aria-selected="true"`, which the block reads. A shortcut at the end of an
+// option is a `vv-kbd`.
+$vv-command: (
+	display: flex,
+	flex-direction: column,
+	min-width: 0,
+	overflow: hidden,
+	border: var(--border) solid var(--color-surface-3),
+	border-radius: var(--rounded-lg),
+	background-color: var(--color-surface),
+	color: var(--color-word-2),
+	font-size: var(--text-14),
+	element: (
+		search: (
+			display: flex,
+			align-items: center,
+			gap: var(--spacing-8),
+			padding-inline: var(--spacing-12),
+			border-bottom: var(--border) solid var(--color-surface-3),
+			color: var(--color-word-3),
+			transition: border-color var(--duration-150) var(--ease-out),
+			// The field has no ring of its own: the divider under it takes
+			// the focus colour, like the search of a dropdown
+			state: (
+				focus-within: (
+					border-bottom-color: var(--color-brand-graphic),
+				),
+			),
+		),
+		input: (
+			flex: 1,
+			min-width: 0,
+			min-height: var(--spacing-44),
+			color: var(--color-word-1),
+			[font]: inherit,
+			pseudo: (
+				placeholder: (
+					color: var(--input-placeholder-color),
+				),
+			),
+		),
+		list: (
+			max-height: 20rem,
+			margin: 0,
+			padding: var(--spacing-4),
+			overflow-y: auto,
+			list-style: none,
+			scrollbar-width: thin,
+		),
+		heading: (
+			padding: var(--spacing-8) var(--spacing-8) var(--spacing-4),
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+			font-weight: var(--font-semibold),
+		),
+		option: (
+			display: flex,
+			align-items: center,
+			gap: var(--spacing-8),
+			padding: var(--spacing-8),
+			border-radius: var(--rounded-md),
+			cursor: pointer,
+			state: (
+				hover: (
+					background-color: var(--color-surface-1),
+				),
+				// Declared after the hover: the option the keyboard is on
+				// keeps its surface under the pointer
+				selected: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word),
+				),
+				// A `li` can only be `aria-disabled`, which the hover suffix does
+				// not exclude: the option answers no pointer instead
+				disabled: (
+					opacity: var(--opacity-30),
+					cursor: not-allowed,
+					pointer-events: none,
+				),
+			),
+		),
+		shortcut: (
+			display: inline-flex,
+			align-items: center,
+			gap: 0.25em,
+			margin-inline-start: auto,
+			color: var(--color-word-4),
+		),
+		empty: (
+			padding: var(--spacing-lg) var(--spacing-12),
+			color: var(--color-word-3),
+			text-align: center,
+		),
+	),
+) !default;

package/src/settings/components/_vv-dialog.scss

@@ -1,3 +1,40 @@
+@use 'sass:map';
+
+// The sections of every drawer. Flat header and footer: on a panel that
+// spans a side of the viewport the filled bands read as heavy. The footer
+// keeps its divider because the content above it scrolls.
+$-drawer-sections: (
+	header: (
+		font-weight: var(--font-bold),
+		background: var(--color-transparent),
+		border-bottom: 0,
+	),
+	// Without the divider the header padding already spaces the title from
+	// the first field, so drop the duplicate.
+	content: (
+		padding-top: 0,
+	),
+	footer: (
+		background: var(--color-transparent),
+	),
+);
+
+// A panel along an inline side: full height, full width below sm
+$-drawer-inline-elements: map.merge(
+	(
+		wrapper: (
+			width: 100%,
+			max-height: 100dvh,
+			border-radius: var(--rounded-none),
+			breakpoint: (
+				up-sm: (
+					width: min(75dvw, 32rem),
+				),
+			),
+		),
+	),
+	$-drawer-sections
+);
 $vv-dialog: (
 	display: flex,
 	user-select: text,
@@ -163,6 +200,60 @@ $vv-dialog: (
 				),
 			),
 		),
+		slide-inline-start: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
+				),
+			),
+			inert: (
+				opacity: var(--opacity-0),
+				element: (
+					wrapper: (
+						[translate]: calc(-100% * var(--direction, 1)),
+					),
+				),
+			),
+		),
+		slide-block-start: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
+				),
+			),
+			inert: (
+				opacity: var(--opacity-0),
+				element: (
+					wrapper: (
+						translate: 0 -100%,
+					),
+				),
+			),
+		),
+		slide-block-end: (
+			active: (
+				transition: var(--transition-opacity),
+				element: (
+					wrapper: (
+						transition: var(--transition-transform),
+					),
+				),
+			),
+			inert: (
+				opacity: var(--opacity-0),
+				element: (
+					wrapper: (
+						translate: 0 100%,
+					),
+				),
+			),
+		),
 	),
 	modifier: (
 		small: (
@@ -190,33 +281,45 @@ $vv-dialog: (
 			padding: 0,
 			align-items: stretch,
 			justify-content: flex-end,
-			element: (
-				wrapper: (
-					width: 100%,
-					max-height: 100dvh,
-					border-radius: var(--rounded-none),
-					breakpoint: (
-						up-sm: (
-							width: min(75dvw, 32rem),
-						),
+			element: $-drawer-inline-elements,
+		),
+		// The same panel on the inline start, with slide-inline-start
+		drawer-start: (
+			padding: 0,
+			align-items: stretch,
+			justify-content: flex-start,
+			element: $-drawer-inline-elements,
+		),
+		// A sheet across the top, with slide-block-start: full width, as tall
+		// as its content up to the 90% of the viewport every dialog stops at
+		drawer-top: (
+			padding: 0,
+			align-items: flex-start,
+			justify-content: stretch,
+			element: map.merge(
+				$-drawer-sections,
+				(
+					wrapper: (
+						width: 100%,
+						border-radius: 0 0 var(--rounded-lg) var(--rounded-lg),
 					),
-				),
-				// Flat header and footer: on a full height panel the filled
-				// bands read as heavy. The footer keeps its divider because
-				// the content above it scrolls.
-				header: (
-					font-weight: var(--font-bold),
-					background: var(--color-transparent),
-					border-bottom: 0,
-				),
-				// Without the divider the header padding already spaces the
-				// title from the first field, so drop the duplicate.
-				content: (
-					padding-top: 0,
-				),
-				footer: (
-					background: var(--color-transparent),
-				),
+				)
+			),
+		),
+		// The bottom sheet of a phone, with slide-block-end: full width, as
+		// tall as its content up to 90% of the viewport, rounded on top
+		drawer-bottom: (
+			padding: 0,
+			align-items: flex-end,
+			justify-content: stretch,
+			element: map.merge(
+				$-drawer-sections,
+				(
+					wrapper: (
+						width: 100%,
+						border-radius: var(--rounded-lg) var(--rounded-lg) 0 0,
+					),
+				)
 			),
 		),
 	),

package/src/settings/components/_vv-dropdown-action.scss

@@ -5,7 +5,7 @@ $vv-dropdown-action: (
 	gap: var(--spacing-sm),
 	align-items: center,
 	padding: var(--spacing-sm),
-	color: var(--color-brand),
+	color: var(--color-brand-readable),
 	cursor: pointer,
 	state: (
 		disabled: (
@@ -14,9 +14,10 @@ $vv-dropdown-action: (
 		),
 		hover: (
 			background-color: var(--color-surface-brand),
+			color: var(--color-surface-brand-readable),
 		),
 		focus-visible: (
-			outline: var(--spacing-px) solid var(--color-brand),
+			outline: var(--spacing-px) solid var(--color-brand-graphic),
 			outline-offset: calc(var(--spacing-px) * -1),
 		),
 		pressed: (

package/src/settings/components/_vv-dropdown-option.scss

@@ -16,7 +16,7 @@ $vv-dropdown-option: (
 		),
 		focus-visible: (
 			background-color: var(--color-surface-success),
-			color: var(--color-success-darken-1),
+			color: var(--color-surface-success-readable),
 			element: (
 				hint: (
 					opacity: var(--opacity-100),
@@ -26,7 +26,7 @@ $vv-dropdown-option: (
 		selected: (
 			font-weight: var(--font-bold),
 			background-color: var(--color-surface-brand),
-			color: var(--color-brand-darken-1),
+			color: var(--color-surface-brand-readable),
 		),
 	),
 	modifier: (
@@ -34,7 +34,7 @@ $vv-dropdown-option: (
 			state: (
 				focus-visible: (
 					background-color: var(--color-surface-danger),
-					color: var(--color-danger),
+					color: var(--color-surface-danger-readable),
 				),
 			),
 		),

package/src/settings/components/_vv-empty.scss

@@ -0,0 +1,71 @@
+// "There is nothing here yet": what a list, a table or a page shows in place
+// of its content, with an optional way out (create, import, clear the filters).
+// The message is quiet on purpose: `word-3` for the block, `word-1` for the
+// title alone, no colour of state.
+$vv-empty: (
+	display: flex,
+	flex-direction: column,
+	align-items: center,
+	justify-content: center,
+	gap: var(--spacing-sm),
+	padding: var(--spacing-xl) var(--spacing-lg),
+	color: var(--color-word-3),
+	text-align: center,
+	element: (
+		// An icon or an illustration. The font size sets the icon, which
+		// measures `1em` the way Iconify emits it
+		media: (
+			display: flex,
+			align-items: center,
+			justify-content: center,
+			margin-block-end: var(--spacing-xs),
+			color: var(--color-word-4),
+			font-size: var(--text-32),
+			line-height: var(--leading-none),
+		),
+		title: (
+			margin: var(--spacing-0),
+			color: var(--color-word-1),
+			font-size: var(--text-16),
+			font-weight: var(--font-semibold),
+			line-height: var(--leading-snug),
+		),
+		description: (
+			max-inline-size: 60ch,
+			margin: var(--spacing-0),
+			font-size: var(--text-14),
+			line-height: var(--leading-normal),
+			text-wrap: pretty,
+		),
+		actions: (
+			display: flex,
+			flex-wrap: wrap,
+			justify-content: center,
+			gap: var(--spacing-sm),
+			margin-block-start: var(--spacing-xs),
+		),
+	),
+	modifier: (
+		// Inside a list, a table or a card, where the frame is already there
+		// and a page sized empty state would push the rest away
+		compact: (
+			gap: var(--spacing-xs),
+			padding: var(--spacing-lg) var(--spacing-12),
+			element: (
+				media: (
+					margin-block-end: var(--spacing-0),
+					font-size: var(--text-24),
+				),
+				title: (
+					font-size: var(--text-14),
+				),
+			),
+		),
+		// A dashed frame, for an area that is waiting to be filled: a drop
+		// zone, a board with no card yet
+		bordered: (
+			border: var(--border) dashed var(--color-surface-4),
+			border-radius: var(--rounded-lg),
+		),
+	),
+) !default;

package/src/settings/components/_vv-field.scss

@@ -0,0 +1,111 @@
+@use 'sass:map';
+@use 'vv-input-text' as *;
+
+// The shell of a field around a control the library does not draw: a code
+// editor, a contenteditable prompt, a button that opens a picker, a switch
+// that has to sit in a form with the rhythm of the other fields. Label, box,
+// hint, states and the `valid`, `invalid` and `loading` modifiers are the
+// ones of `vv-input-text`, read from its map, so the two stay one field; what
+// is new is what goes inside the box:
+// - `control`: the control itself, which takes the padding of a field and
+//   lets the box draw hover, focus and disabled;
+// - `before` and `after`: an icon, a unit or a button inline with the
+//   control, on either side of it;
+// - `toolbar`: a row of buttons under the control, inside the box, the way a
+//   message composer puts its actions under the text.
+// The copy is taken when this map is loaded: a later override of
+// `$vv-input-text` does not reach it, `$vv-field` is overridden on its own.
+
+$-text: $vv-input-text;
+$vv-field: (
+	display: var(--input-display),
+	flex: var(--input-flex),
+	flex-direction: var(--input-flex-direction),
+	margin-bottom: var(--input-gap),
+	font-size: var(--input-font-size),
+	line-height: var(--input-line-height),
+	min-width: var(--input-min-width),
+	element: (
+		label: map.get($-text, 'element', 'label'),
+		// The box wraps, so a toolbar takes a row of its own under the control
+		wrapper: map.merge(
+			map.get($-text, 'element', 'wrapper'),
+			(
+				flex-wrap: wrap,
+			)
+		),
+		// No `display` of its own: a flex item is blockified anyway, and a
+		// switch used as the control keeps the `inline-flex` of its block
+		control: (
+			flex: 1,
+			min-width: 0,
+			min-height: var(--input-min-height),
+			margin: 0,
+			border: 0,
+			outline: none,
+			background: none,
+			color: var(--input-color),
+			line-height: var(--leading-normal),
+			// Plain declarations: the spacing tokens are overridden on the
+			// block by the modifiers of a field, see `vv-input-text`
+			[padding-block]: var(--input-spacing-top) var(--input-spacing-bottom),
+			[padding-inline]: var(--input-spacing-left) var(--input-spacing-right),
+			[font]: inherit,
+			pseudo: (
+				placeholder: (
+					color: var(--input-placeholder-color),
+				),
+			),
+			state: (
+				disabled: (
+					cursor: not-allowed,
+				),
+			),
+		),
+		// Named after `input-before` and `input-after` of `vv-input-text`: the
+		// padding goes on the outer side only, since the control already
+		// spaces the inner one
+		before: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			gap: var(--spacing-4),
+			color: var(--input-placeholder-color),
+			[padding-inline-start]: var(--input-spacing-left),
+		),
+		after: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			gap: var(--spacing-4),
+			color: var(--input-placeholder-color),
+			[padding-inline-end]: var(--input-spacing-right),
+		),
+		toolbar: (
+			display: flex,
+			flex-basis: 100%,
+			flex-wrap: wrap,
+			align-items: center,
+			gap: var(--spacing-4),
+			[padding-inline]: var(--input-spacing-left) var(--input-spacing-right),
+			[padding-bottom]: var(--input-spacing-bottom),
+		),
+		hint: map.get($-text, 'element', 'hint'),
+	),
+	modifier: (
+		valid: (
+			element: (
+				wrapper: map.get($-text, 'modifier', 'valid', 'element', 'wrapper'),
+				hint: map.get($-text, 'modifier', 'valid', 'element', 'hint'),
+			),
+		),
+		invalid: (
+			element: (
+				wrapper: map.get($-text, 'modifier', 'invalid', 'element', 'wrapper'),
+				hint: map.get($-text, 'modifier', 'invalid', 'element', 'hint'),
+			),
+		),
+		loading: map.get($-text, 'modifier', 'loading'),
+	),
+	state: map.get($-text, 'state'),
+) !default;