@volverjs/style 0.1.29 → 0.1.30-beta.1

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

@@ -1,3 +1,5 @@
+@use 'choice' as *;
+
 $vv-checkbox: (
 	display: inline-flex,
 	flex-wrap: wrap,
@@ -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),
+				),
+			),
+		),
+		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,6 +14,7 @@ $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),

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;

package/src/settings/components/_vv-input-file.scss

@@ -336,13 +336,13 @@ $vv-input-file: (
 					),
 				),
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				limit: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				icon-after: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				drop-area: (
 					pseudo: (
@@ -364,13 +364,13 @@ $vv-input-file: (
 					),
 				),
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				limit: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				icon-after: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				drop-area: (
 					pseudo: (

package/src/settings/components/_vv-input-otp.scss

@@ -0,0 +1,55 @@
+// A one-time code typed one character per slot: `slot` inputs side by side,
+// optionally split into groups by a `separator`. Each slot is a text input of
+// one character; moving the focus between them is behaviour and belongs to
+// the script. The slots take the surface and the text of the fields of the
+// library, a border so each reads as a box, and the focus of the library.
+$vv-input-otp: (
+	display: inline-flex,
+	align-items: center,
+	gap: var(--spacing-8),
+	element: (
+		group: (
+			display: inline-flex,
+			gap: var(--spacing-6),
+		),
+		slot: (
+			inline-size: 2.5em,
+			block-size: 3em,
+			border: var(--border) solid var(--color-surface-4),
+			border-radius: var(--rounded-md),
+			background-color: var(--input-background-color),
+			color: var(--input-color),
+			font-size: var(--text-20),
+			font-variant-numeric: tabular-nums,
+			text-align: center,
+			caret-color: var(--color-brand),
+			transition: border-color var(--duration-150) var(--ease-out),
+			state: (
+				hover: (
+					border-color: var(--color-surface-5),
+				),
+				focus-visible: (
+					border-color: var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: 0,
+				),
+				disabled: (
+					opacity: var(--opacity-50),
+					cursor: not-allowed,
+				),
+			),
+		),
+		separator: (
+			color: var(--color-word-4),
+		),
+	),
+	modifier: (
+		invalid: (
+			element: (
+				slot: (
+					border-color: var(--input-invalid-color),
+				),
+			),
+		),
+	),
+) !default;

package/src/settings/components/_vv-input-range.scss

@@ -155,7 +155,7 @@ $vv-input-range: (
 			--input-range-accent-color: var(--input-valid-color),
 			element: (
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				value: (
 					border-color: var(--input-valid-color),
@@ -166,7 +166,7 @@ $vv-input-range: (
 			--input-range-accent-color: var(--input-invalid-color),
 			element: (
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				value: (
 					border-color: var(--input-invalid-color),

package/src/settings/components/_vv-input-text.scss

@@ -252,13 +252,13 @@ $vv-input-text: (
 					),
 				),
 				hint: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				limit: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 				icon-after: (
-					color: var(--input-valid-color),
+					color: var(--input-valid-text-color),
 				),
 			),
 		),
@@ -273,13 +273,13 @@ $vv-input-text: (
 					),
 				),
 				hint: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				limit: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 				icon-after: (
-					color: var(--input-invalid-color),
+					color: var(--input-invalid-text-color),
 				),
 			),
 		),