@volverjs/style 0.1.29 → 0.1.30-beta.1

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

@@ -0,0 +1,68 @@
+// A list of `vv-item` rows, with an optional header on top (the trail of a
+// picker that walks a tree: a breadcrumb, or one button per level). It sets
+// the four surfaces its rows read, so a modifier of the group restyles every
+// row without touching them: the hairline between two rows, the hover, the
+// chosen row and the current one.
+$vv-item-group: (
+	--item-divider: var(--color-surface-2),
+	--item-hover: var(--color-surface-1),
+	--item-chosen: var(--color-surface-1),
+	--item-current: var(--color-surface-2),
+	display: flex,
+	flex-direction: column,
+	min-height: 0,
+	font-size: var(--text-14),
+	element: (
+		header: (
+			display: flex,
+			align-items: center,
+			gap: var(--spacing-4),
+			min-width: 0,
+			padding: var(--spacing-8) var(--spacing-12),
+			border-bottom: var(--border) solid var(--color-surface-4),
+		),
+		// Bounded, so the footer of a dialog stays in view: the rows scroll
+		// inside
+		list: (
+			display: flex,
+			flex-direction: column,
+			max-height: 20rem,
+			margin: 0,
+			padding: 0,
+			overflow-y: auto,
+			list-style: none,
+		),
+	),
+	modifier: (
+		// The hairline and the radius of the other frames of the library.
+		// Leave it off when the list already sits in a frame: a card, a panel.
+		framed: (
+			overflow: hidden,
+			border: var(--border) solid var(--color-surface-4),
+			border-radius: var(--rounded-lg),
+		),
+		// The list is the whole panel: it takes the height it is given and
+		// scrolls there. Rows the width of a page need a hairline one step
+		// deeper, or the line between two of them disappears into the ground.
+		fill: (
+			--item-divider: var(--color-surface-3),
+			flex: 1,
+			element: (
+				list: (
+					flex: 1,
+					min-height: 0,
+					max-height: none,
+				),
+			),
+		),
+		// Drawn on a ground that is already `surface-1`: hover and chosen step
+		// up, and the current row goes the other way, to the plain surface,
+		// so it is the one light row on a grey panel
+		raised: (
+			--item-divider: var(--color-surface-3),
+			--item-hover: var(--color-surface-2),
+			--item-chosen: var(--color-surface-2),
+			--item-current: var(--color-surface),
+		),
+	),
+) !default;

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

@@ -0,0 +1,201 @@
+// A row of a list: something to choose, to open, or to act on. The row holds
+// an `entry`, the clickable part (a `<button>` or an `<a>`), and whatever sits
+// beside it with a hit area of its own: `actions` for controls that act on the
+// row, `open` for a divided area that opens a level while the entry chooses.
+// A button cannot contain buttons, which is why the row is not the button.
+
+// Selection is a step of surface, a step of weight on the title and a check,
+// never a colour: the brand is left to the primary action around the list.
+// Two different things are marked two different ways. `pressed-within` is the
+// row being chosen in a picker (the entry carries `aria-pressed`); `current`
+// is the row being looked at in a master list, marked by a bar along the
+// inline start instead of a check, which there would read as a verdict.
+
+// The four surfaces come from custom properties a `vv-item-group` sets, with a
+// fallback at the point of use, so a row works outside a group too and a group
+// drawn on a ground that is already `surface-1` only reassigns them (`raised`).
+// Every declaration that reads one is plain, in brackets: a `var()` inside a
+// generated custom property is substituted at the root, where the group's
+// values do not reach. `inherit` is plain for a related reason: written into a
+// custom property, a CSS-wide keyword applies to the property itself.
+$vv-item: (
+	display: flex,
+	align-items: stretch,
+	// A floor, so a row holding a short name and one holding a wrapped title
+	// read as the same kind of thing. `flex-shrink: 0` keeps a list that is a
+	// bounded flex column from squeezing its rows under their content.
+	min-height: var(--spacing-40),
+	flex-shrink: 0,
+	color: var(--color-word-2),
+	[border-bottom]: var(--border) solid var(--item-divider, var(--color-surface-2)),
+	transition: background-color var(--duration-150) var(--ease-out),
+	element: (
+		entry: (
+			display: flex,
+			flex: 1,
+			align-items: center,
+			gap: var(--spacing-sm),
+			min-width: 0,
+			margin: 0,
+			padding: var(--spacing-8) var(--spacing-12),
+			border: 0,
+			background: none,
+			[color]: inherit,
+			[font]: inherit,
+			text-align: start,
+			text-decoration: none,
+			cursor: pointer,
+			state: (
+				// Inset, so the scrolling list around the row does not clip it
+				focus-visible: (
+					outline: var(--spacing-2) solid var(--color-brand),
+					outline-offset: calc(var(--spacing-2) * -1),
+				),
+				disabled: (
+					opacity: var(--opacity-30),
+					cursor: not-allowed,
+				),
+			),
+		),
+		media: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			justify-content: center,
+			color: var(--color-word-3),
+		),
+		content: (
+			display: flex,
+			flex: 1,
+			flex-direction: column,
+			min-width: 0,
+		),
+		title: (
+			flex: 1,
+			min-width: 0,
+			overflow: hidden,
+			color: var(--color-word-1),
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		),
+		description: (
+			display: -webkit-box,
+			overflow: hidden,
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+			line-height: var(--leading-normal),
+			-webkit-box-orient: vertical,
+			-webkit-line-clamp: 2,
+		),
+		// A quiet note at the end of the row: a status, "current"
+		note: (
+			flex-shrink: 0,
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+		),
+		// The mark of the chosen row, in the row's own colour
+		check: (
+			flex-shrink: 0,
+		),
+		// The row opens a level
+		chevron: (
+			flex-shrink: 0,
+			color: var(--color-word-4),
+		),
+		// Controls that act on the row, inline with it and without a divider:
+		// a divided column is for opening a level (`open`), not for acting
+		actions: (
+			display: flex,
+			flex-shrink: 0,
+			align-items: center,
+			gap: var(--spacing-2),
+			padding-inline-end: var(--spacing-8),
+		),
+		open: (
+			display: flex,
+			align-items: center,
+			margin: 0,
+			padding: 0 var(--spacing-12),
+			border: 0,
+			[border-inline-start]: var(--border) solid var(--item-divider, var(--color-surface-2)),
+			background: none,
+			color: var(--color-word-3),
+			[font]: inherit,
+			cursor: pointer,
+			transition: color var(--duration-150) var(--ease-out),
+			state: (
+				hover: (
+					color: var(--color-word-1),
+				),
+				focus-visible: (
+					outline: var(--spacing-2) solid var(--color-brand),
+					outline-offset: calc(var(--spacing-2) * -1),
+				),
+			),
+		),
+	),
+	state: (
+		last-child: (
+			border-bottom-width: 0,
+		),
+		hover: (
+			[background-color]: var(--item-hover, var(--color-surface-1)),
+		),
+		// Declared after `hover`, so the chosen and the current row keep their
+		// surface under the pointer
+		pressed-within: (
+			[background-color]: var(--item-chosen, var(--color-surface-1)),
+			element: (
+				title: (
+					font-weight: var(--font-medium),
+				),
+			),
+		),
+		current: (
+			[background-color]: var(--item-current, var(--color-surface-2)),
+			// On the inline start: `--direction` is -1 in a right to left page
+			[box-shadow]: inset calc(var(--spacing-3) * var(--direction, 1)) 0 0 var(--color-word-2),
+			element: (
+				title: (
+					font-weight: var(--font-medium),
+				),
+			),
+		),
+	),
+	modifier: (
+		// More inside than an icon and a line of text: an avatar, a title
+		// over a description, a row of badges. The floor goes on the entry,
+		// which holds the content, and the row stretches to it.
+		roomy: (
+			element: (
+				entry: (
+					min-height: var(--spacing-56),
+					padding: var(--spacing-12) var(--spacing-md),
+				),
+			),
+		),
+		// Content several lines tall: the media and the control belong next
+		// to the first line, not halfway down the row
+		top: (
+			element: (
+				entry: (
+					align-items: flex-start,
+				),
+			),
+		),
+		// Nothing to click and nothing to choose: the row holds its own
+		// controls, or it is a skeleton standing in for a row still loading
+		plain: (
+			state: (
+				hover: (
+					[background-color]: transparent,
+				),
+			),
+			element: (
+				entry: (
+					cursor: default,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,9 @@
+// The keys of a combination side by side, with what joins them (a `+`, a
+// `then`) written in the markup between them
+$vv-kbd-group: (
+	display: inline-flex,
+	align-items: center,
+	gap: 0.25em,
+	color: var(--color-word-4),
+	white-space: nowrap,
+) !default;

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

@@ -0,0 +1,20 @@
+// A key of the keyboard, to name a shortcut: a cap drawn in the mono face,
+// sized in `em` so it follows the text around it. A combination of keys is a
+// `vv-kbd-group`, with whatever joins them written in the markup.
+$vv-kbd: (
+	display: inline-flex,
+	align-items: center,
+	justify-content: center,
+	min-inline-size: 1.5em,
+	padding: 0.1em 0.4em,
+	border: var(--border) solid var(--color-surface-4),
+	border-bottom-width: var(--spacing-2),
+	border-radius: var(--rounded),
+	background-color: var(--color-surface-1),
+	color: var(--color-word-2),
+	font-family: var(--font-mono),
+	font-size: 0.8125em,
+	font-weight: var(--font-medium),
+	line-height: var(--leading-snug),
+	white-space: nowrap,
+) !default;

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

@@ -0,0 +1,32 @@
+// A note inside a conversation that nobody says: an operator joined, the
+// conversation was handed over, a tool ran. Quiet and centred, an optional
+// `icon` beside the `content`. `bordered` frames it in a pill; a date between
+// two days of messages is a `vv-separator` with a label.
+$vv-marker: (
+	display: flex,
+	align-items: center,
+	justify-content: center,
+	gap: var(--spacing-6),
+	color: var(--color-word-3),
+	font-size: var(--text-12),
+	line-height: var(--leading-snug),
+	text-align: center,
+	element: (
+		icon: (
+			flex-shrink: 0,
+		),
+		content: (
+			min-width: 0,
+		),
+	),
+	modifier: (
+		bordered: (
+			width: fit-content,
+			margin-inline: auto,
+			padding: var(--spacing-2) var(--spacing-10),
+			border: var(--border) solid var(--color-surface-3),
+			border-radius: var(--rounded-full),
+			background-color: var(--color-surface),
+		),
+	),
+) !default;

package/src/settings/components/_vv-message-scroller.scss

@@ -0,0 +1,65 @@
+// The scrolling column of a conversation. It lays the messages out with the
+// gap of a conversation and keeps the scroll inside itself; sticking to the
+// latest message while a reply streams in is behaviour and belongs to the
+// script that owns the list. `jump` is the button that goes back to the
+// latest message, pinned to the bottom edge of the column without taking room
+// in it; the script hides it with `hidden` when the reader is at the bottom,
+// which a rule on the entry honours over the block's own `display`.
+// `fade` dissolves the top and bottom edges into the surface.
+$vv-message-scroller: (
+	display: flex,
+	flex-direction: column,
+	gap: var(--spacing-md),
+	min-height: 0,
+	overflow-y: auto,
+	overscroll-behavior: contain,
+	scrollbar-width: thin,
+	scrollbar-color: var(--color-word-5) transparent,
+	element: (
+		jump: (
+			position: sticky,
+			inset-block-end: var(--spacing-8),
+			align-self: center,
+			display: inline-grid,
+			flex-shrink: 0,
+			place-items: center,
+			inline-size: var(--spacing-36),
+			block-size: var(--spacing-36),
+			// Its own height and the gap before it, so it takes no room
+			margin-block-start: calc((var(--spacing-36) + var(--spacing-md)) * -1),
+			border: var(--border) solid var(--color-surface-3),
+			border-radius: var(--rounded-full),
+			background-color: var(--color-surface-1),
+			box-shadow: var(--shadow-md),
+			color: var(--color-word-2),
+			cursor: pointer,
+			transition: background-color var(--duration-150) var(--ease-out),
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: var(--spacing-2),
+				),
+			),
+		),
+	),
+	modifier: (
+		// The button rises above the faded strip, or the mask would fade it too
+		fade: (
+			element: (
+				jump: (
+					inset-block-end: var(--spacing-48),
+				),
+			),
+			mask-image: linear-gradient(
+				to bottom,
+				transparent 0,
+				black var(--spacing-40),
+				black calc(100% - var(--spacing-40)),
+				transparent 100%
+			),
+		),
+	),
+) !default;

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

@@ -0,0 +1,95 @@
+// A row of a conversation: who says it, what is said, and what can be done
+// with it. The row lays out an optional `avatar`, anchored to the last line,
+// beside a `content` column that holds a `header` (the sender, a time), one or
+// more `vv-bubble`, attachments or cards, and a `footer` (status, actions).
+// The rows of the one reading are `end`: mirrored to the inline end.
+// `meta` is metadata that shows on hover or focus only, and always on a
+// device that cannot hover (see `src/components/vv-message.scss`).
+$vv-message: (
+	display: flex,
+	align-items: flex-end,
+	gap: var(--spacing-sm),
+	max-width: 100%,
+	element: (
+		avatar: (
+			flex-shrink: 0,
+		),
+		content: (
+			display: flex,
+			flex-direction: column,
+			align-items: flex-start,
+			gap: var(--spacing-4),
+			min-width: 0,
+			max-width: min(100%, 48rem),
+		),
+		header: (
+			display: flex,
+			flex-wrap: wrap,
+			align-items: baseline,
+			gap: var(--spacing-8),
+			padding-inline: var(--spacing-4),
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+		),
+		footer: (
+			display: flex,
+			flex-wrap: wrap,
+			align-items: center,
+			gap: var(--spacing-8),
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+		),
+		meta: (
+			display: inline-flex,
+			align-items: center,
+			gap: var(--spacing-4),
+			font-variant-numeric: tabular-nums,
+			opacity: var(--opacity-0),
+			transition: opacity var(--duration-150) var(--ease-out),
+		),
+	),
+	state: (
+		hover: (
+			element: (
+				meta: (
+					opacity: var(--opacity-100),
+				),
+			),
+		),
+		focus-within: (
+			element: (
+				meta: (
+					opacity: var(--opacity-100),
+				),
+			),
+		),
+	),
+	modifier: (
+		end: (
+			flex-direction: row-reverse,
+			element: (
+				content: (
+					align-items: flex-end,
+				),
+				// Aligned to the end, not reversed: a reversed row would run the
+				// keyboard through its buttons against the order they are seen in
+				header: (
+					justify-content: flex-end,
+				),
+				footer: (
+					justify-content: flex-end,
+				),
+			),
+		),
+		// The content takes the whole row: an answer rendered as rich text,
+		// a card, a table
+		wide: (
+			element: (
+				content: (
+					flex: 1,
+					max-width: 100%,
+				),
+			),
+		),
+	),
+) !default;

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

@@ -79,8 +79,12 @@ $vv-nav: (
 						hover: (
 							background-color: var(--color-surface-2),
 						),
+						// Inverted, so it reads on any surface a sidebar sits
+						// on and stays apart from a hovered voice; it comes
+						// after hover and active, which it wins over
 						current: (
-							background-color: var(--color-surface-1),
+							color: var(--color-surface),
+							background-color: var(--color-word-1),
 						),
 					),
 				),
@@ -135,10 +139,10 @@ $vv-nav: (
 					white-space: nowrap,
 					state: (
 						hover: (
-							color: var(--color-brand),
+							color: var(--color-brand-readable),
 						),
 						current: (
-							color: var(--color-brand),
+							color: var(--color-brand-readable),
 							border-color: currentcolor,
 							background-color: color-mix(in srgb, var(--color-brand), transparent 95%),
 						),

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

@@ -0,0 +1,78 @@
+// Moving between the pages of a list or a table: a `<nav>` holding a list of
+// page links or buttons, previous and next, an ellipsis where pages are
+// skipped, and optionally a line that says where the reader is ("21-40 of
+// 240"). The page being shown is read from `aria-current="page"`, the way a
+// pagination marks it for assistive technology, so the markup states it once.
+// A page that cannot be reached (previous on the first page) is a `disabled`
+// button, or a link with `aria-disabled="true"` and no `href`: the
+// `pointer-events: none` below stops the pointer only, the missing `href`
+// takes the link out of the tab order.
+$vv-pagination: (
+	display: flex,
+	flex-wrap: wrap,
+	align-items: center,
+	gap: var(--spacing-sm),
+	font-size: var(--text-14),
+	element: (
+		list: (
+			_alias: '> :is(ol, ul)',
+			display: flex,
+			flex-wrap: wrap,
+			align-items: center,
+			gap: var(--spacing-4),
+			margin: 0,
+			padding: 0,
+			list-style: none,
+		),
+		page: (
+			display: inline-flex,
+			align-items: center,
+			justify-content: center,
+			gap: 0.25em,
+			min-width: 2.25em,
+			height: 2.25em,
+			padding-inline: 0.5em,
+			border-radius: var(--rounded),
+			color: var(--color-word-2),
+			font-variant-numeric: tabular-nums,
+			text-decoration: none,
+			cursor: pointer,
+			transition: (
+				background-color var(--duration-150) var(--ease-out),
+				color var(--duration-150) var(--ease-out),
+			),
+			state: (
+				hover: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word),
+				),
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-brand),
+					outline-offset: var(--spacing-2),
+				),
+				current-page: (
+					background-color: var(--color-surface-2),
+					color: var(--color-word),
+					font-weight: var(--font-semibold),
+				),
+				disabled: (
+					opacity: var(--opacity-30),
+					cursor: not-allowed,
+					pointer-events: none,
+				),
+			),
+		),
+		ellipsis: (
+			display: inline-flex,
+			align-items: center,
+			justify-content: center,
+			min-width: 2.25em,
+			color: var(--color-word-4),
+		),
+		summary: (
+			color: var(--color-word-3),
+			font-size: var(--text-12),
+			font-variant-numeric: tabular-nums,
+		),
+	),
+) !default;

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

@@ -0,0 +1,53 @@
+// A floating panel for a short piece of content or a small form, on the
+// Popover API: the element carries `popover`, the browser moves it to the top
+// layer and shows it while it is open. The reset of the library unsets the
+// fixed position the browser gives a popover, so the block puts it back, with
+// the z-index of a popover for a panel shown without the top layer. Placing
+// it next to its trigger is left to the script that opens it or to anchor
+// positioning, which set its inset: without one the panel opens at the top
+// left corner of the viewport, and `center` centres it instead.
+// A panel opened on hover (a hover card) is the same block: the delay is
+// behaviour and belongs to the script. `vv-dropdown` stays the menu and the
+// list of options.
+$vv-popover: (
+	position: fixed,
+	z-index: var(--z-popover),
+	inset: auto,
+	max-inline-size: min(20rem, calc(100vw - var(--spacing-32))),
+	max-block-size: calc(100dvh - var(--spacing-32)),
+	margin: 0,
+	padding: var(--spacing-sm),
+	overflow: auto,
+	border: var(--border) solid var(--color-surface-3),
+	border-radius: var(--rounded-lg),
+	background-color: var(--color-surface),
+	box-shadow: var(--shadow-lg),
+	color: var(--color-word-2),
+	font-size: var(--text-14),
+	line-height: var(--leading-normal),
+	element: (
+		title: (
+			margin: 0 0 var(--spacing-4),
+			color: var(--color-word-1),
+			font-size: var(--text-14),
+			font-weight: var(--font-semibold),
+		),
+		footer: (
+			display: flex,
+			flex-wrap: wrap,
+			justify-content: flex-end,
+			gap: var(--spacing-8),
+			margin-block-start: var(--spacing-sm),
+		),
+	),
+	modifier: (
+		// Centred in the viewport, as the browser shows a popover nobody
+		// places: for a panel opened by `popovertarget` alone
+		center: (
+			inset: 0,
+			inline-size: fit-content,
+			block-size: fit-content,
+			margin: auto,
+		),
+	),
+) !default;

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

@@ -9,18 +9,18 @@ $vv-progress: (
 	border: var(--border-0),
 	border-radius: var(--rounded-full),
 	overflow: hidden,
-	color: var(--color-brand),
+	color: var(--color-brand-graphic),
 	background-color: var(--color-surface-2),
 	pseudo: (
 		-webkit-progress-bar: (
 				background-color: transparent,
 			),
 		-moz-progress-bar: (
-				background-color: var(--color-brand),
+				background-color: var(--color-brand-graphic),
 				transition: var(--transition-all),
 			),
 		-webkit-progress-value: (
-				background-color: var(--color-brand),
+				background-color: var(--color-brand-graphic),
 				transition: var(--transition-all),
 			),
 	),
@@ -29,7 +29,7 @@ $vv-progress: (
 			background: var(--color-surface-2)
 				linear-gradient(
 					to right,
-					var(--color-brand) 30%,
+					var(--color-brand-graphic) 30%,
 					var(--color-surface-2) 30%
 				)
 				top left/150% 150% no-repeat,