@volverjs/style 0.1.26 → 0.1.28

package/package.json

@@ -24,10 +24,17 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.26",
+  "version": "0.1.28",
   "engines": {
     "node": ">= 20.x"
   },
+  "browserslist": [
+    "chrome >= 133",
+    "edge >= 133",
+    "firefox >= 128",
+    "safari >= 16.4",
+    "ios_saf >= 16.4"
+  ],
   "type": "module",
   "main": "dist/volver.css",
   "style": "dist/volver.css",

package/src/_config.scss

@@ -22,7 +22,12 @@ $zero-specificity-for-utilities: true !default;
 // components prefix
 $components-prefix: vv !default;
 
-// preflight 
+// preflight: bare form controls under `.preflight` take the look of their
+// component through `@extend` of its placeholders, the block-level state
+// placeholders included. A `state.disabled` or `state.readonly` override in a
+// component map therefore reaches every bare disabled or readonly control on
+// the page, not only the ones inside a `.vv-*` block, and only the compiled
+// CSS shows it. Overrides on the `element` maps of a state stay in the block.
 $preflight: true !default;
 
 // components names

package/src/settings/_input.scss

@@ -59,6 +59,14 @@ $input: (
 			translate: 0 -0.8em,
 		),
 	),
+	// Block size of a checkbox, a radio or the pill of a switch: the side of
+	// the square, and the figure the offset that keeps the control on the
+	// first line of a wrapping label is derived from. It was written twice per
+	// component, once as `min-width` and once as `height`, and the switch
+	// spelled a third value.
+	control: (
+		size: var(--spacing-20),
+	),
 	range: (
 		accent-color: var(--color-brand),
 		track-color: var(--color-surface-3),

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

@@ -1,6 +1,8 @@
 $vv-accordion: (
-	--accordion-marker-size:
-		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
+	// `1lh` is resolved where the token is read, on the summary, so the reserved
+	// space follows the line box of the summary rather than a line height
+	// spelled out a second time here.
+	--accordion-marker-size: calc(var(--spacing-sm) + 1lh),
 	--accordion-padding-top: var(--spacing-14),
 	--accordion-padding-right: var(--spacing-14),
 	--accordion-padding-bottom: var(--spacing-14),
@@ -57,8 +59,8 @@ $vv-accordion: (
 					position: absolute,
 					[top]: var(--accordion-padding-top),
 					[left]: var(--accordion-padding-left),
-					width: calc(var(--leading-normal) * 1em),
-					height: calc(var(--leading-normal) * 1em),
+					width: 1lh,
+					height: 1lh,
 					background-image: var(--bg-chevron),
 					background-position: center,
 					background-size: 1em,

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

@@ -8,7 +8,7 @@ $vv-alert: (
 	border-width: var(--border),
 	display: flex,
 	flex-wrap: wrap,
-	align-items: center,
+	align-items: flex-start,
 	gap: var(--spacing-sm),
 	min-width: 0,
 	overflow: hidden,
@@ -16,13 +16,13 @@ $vv-alert: (
 	element: (
 		header: (
 			display: flex,
-			align-items: center,
+			align-items: flex-start,
 			gap: var(--spacing-sm),
 			line-height: var(--leading-normal),
 			color: var(--color-word),
 			overflow: hidden,
 			text-overflow: ellipsis,
-			flex-shrink: 0,
+			min-width: 0,
 		),
 		title: (
 			min-width: 0,
@@ -53,7 +53,12 @@ $vv-alert: (
 			border-radius: var(--rounded),
 		),
 		icon: (
+			--alert-icon-size: 1.1em,
+			[inline-size]: var(--alert-icon-size),
+			block-size: auto,
+			aspect-ratio: 1,
 			flex-shrink: 0,
+			[translate]: 0 calc((1lh - var(--alert-icon-size)) / 2),
 		),
 		close-mask: (
 			display: none,

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

@@ -38,10 +38,26 @@ $vv-badge: (
 		),
 	),
 	element: (
+		icon: (
+			// A descendant selector, not a child one: the icon of an action
+			// badge sits inside the button. `svg:not(svg *)` leaves the parts
+			// of a composite icon to the icon itself.
+			_alias: ':where(svg:not(svg *), [data-icon])',
+			aspect-ratio: 1,
+			inline-size: 1lh,
+			block-size: auto,
+			flex-shrink: 0,
+			background-position: center,
+			background-repeat: no-repeat,
+			background-size: contain,
+		),
 		button: (
 			_alias: '> button',
 			_combinator: '>',
 			cursor: pointer,
+			display: inline-flex,
+			align-items: center,
+			justify-content: center,
 			padding: 0 0.5em,
 			margin: 0 -0.5em,
 			min-height: 2em,
@@ -58,7 +74,11 @@ $vv-badge: (
 	),
 	modifier: (
 		action: (
-			gap: calc(0.5ch + 0.5em),
+			// The same gap as a badge that holds its icon directly. The button
+			// widens its hit area toward the text with a negative margin and
+			// puts the drawing back with an equal padding, so the extra 0.5em
+			// this gap used to carry only pushed the icon away from the label.
+			gap: 0.5ch,
 		),
 		sm: (
 			--badge-font-size: 0.6rem,

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

@@ -49,7 +49,14 @@ $vv-button: (
 			inline-size: 1.1em,
 			margin: 0,
 			flex-shrink: 0,
-			[min-height]: calc(1em * var(--button-line-height)),
+			// The box is 1.1em wide and at least one line tall, so it is not
+			// square. An `<svg>` centres itself in it, an icon painted as a
+			// background does not: these three are inert for the first and
+			// place the second. The `_alias` claims to take both.
+			background-position: center,
+			background-repeat: no-repeat,
+			background-size: contain,
+			[min-height]: 1lh,
 		),
 		label: (
 			white-space: nowrap,
@@ -259,8 +266,8 @@ $vv-button: (
 			element: (
 				icon: (
 					margin-inline: -0.125ch,
-					block-size: calc(1em * var(--leading-snug)),
-					inline-size: calc(1em * var(--leading-snug)),
+					block-size: 1lh,
+					inline-size: 1lh,
 				),
 			),
 		),
@@ -298,8 +305,8 @@ $vv-button: (
 			element: (
 				icon: (
 					margin-inline: -0.125ch,
-					block-size: calc(1em * var(--leading-snug)),
-					inline-size: calc(1em * var(--leading-snug)),
+					block-size: 1lh,
+					inline-size: 1lh,
 				),
 			),
 		),

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

@@ -24,8 +24,17 @@ $vv-checkbox: (
 		input: (
 			_alias: "> input[type='checkbox']",
 			border: var(--spacing-2) solid var(--input-color),
-			min-width: var(--spacing-20),
-			height: var(--spacing-20),
+			// Plain declarations, so the size is read on the control: the
+			// `switch` modifier overrides the token, and a `var()` inside a
+			// generated custom property would have been substituted at the
+			// root and frozen at the default.
+			[min-width]: var(--input-control-size),
+			[height]: var(--input-control-size),
+			// The control belongs to the first line of the label, not to the
+			// centre of a label that wraps. `align-self` rather than
+			// `align-items` on the block, so the hint keeps its own alignment.
+			align-self: flex-start,
+			[translate]: 0 calc((1lh - var(--input-control-size)) / 2),
 			margin: 0 var(--input-label-gap) 0 0,
 			background-position: center,
 			background-size: var(--text-12) auto,
@@ -45,6 +54,19 @@ $vv-checkbox: (
 				),
 			),
 		),
+		label: (
+			// Without an element the label is an anonymous flex item, and one
+			// whose max-content width does not fit starts a new flex line:
+			// a long label dropped below the control instead of sitting next
+			// to it. `@volverjs/ui-vue` renders the span this reaches.
+			// Only a span without a class of its own, for plain markup: a
+			// badge or an icon written next to the label is a span too, and
+			// `flex: 1` would stretch it. Anything carrying a class takes
+			// `vv-checkbox__label` to be the label.
+			_alias: '> span:not([class])',
+			flex: 1,
+			min-width: 0,
+		),
 		hint: (
 			_alias: '> small',
 			_combinator: '>',
@@ -68,9 +90,11 @@ $vv-checkbox: (
 		switch: (
 			element: (
 				input: (
+					--input-control-size: var(--spacing-24),
 					border: 0,
+					// Not a plain declaration: this one reads no token of the
+					// control, so it keeps its generated custom property.
 					min-width: var(--spacing-44),
-					height: var(--spacing-24),
 					border-radius: var(--spacing-12),
 					background-color: var(--color-word-5),
 					position: relative,

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

@@ -3,7 +3,10 @@ $vv-dropdown-option: (
 	min-width: 0,
 	overflow: hidden,
 	gap: var(--spacing-sm),
-	align-items: flex-end,
+	// The hint is smaller than the label: `baseline` is what keeps the two
+	// sitting on the same line of text. `flex-end` aligned their bottom edges
+	// instead, which drifts with the descenders of the font.
+	align-items: baseline,
 	padding: var(--spacing-sm),
 	state: (
 		disabled: (

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

@@ -25,6 +25,9 @@ $vv-input-text: (
 			display: flex,
 			align-items: center,
 			flex: 1,
+			// The wrapper clips its content: the `::after` bars run along the
+			// bottom edge and the input never paints outside the box. The
+			// `vv-select` wrapper does not clip, on purpose: see its map.
 			overflow: hidden,
 			background-color: var(--input-background-color),
 			will-change: background-color,

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

@@ -21,6 +21,7 @@ $vv-nav: (
 			_alias: 'li > :is(a, button)',
 			display: flex,
 			align-items: center,
+			gap: 0.5ch,
 			will-change: background-color color,
 			transition: var(--transition-all),
 			color: var(--color-word-2),
@@ -40,6 +41,23 @@ $vv-nav: (
 				),
 			),
 		),
+		icon: (
+			_alias: 'li > :is(a, button) > :where(svg, [data-icon])',
+			--nav-icon-size: 1.1em,
+			// `align-self` and not `align-items` on the item: the label of a
+			// voice can wrap, and the icon belongs to its first line, while
+			// everything else in the item (a counter badge, a chevron) stays
+			// centred on the whole voice.
+			align-self: flex-start,
+			flex-shrink: 0,
+			[inline-size]: var(--nav-icon-size),
+			block-size: auto,
+			aspect-ratio: 1,
+			background-position: center,
+			background-repeat: no-repeat,
+			background-size: contain,
+			[translate]: 0 calc((1lh - var(--nav-icon-size)) / 2),
+		),
 		separator: (
 			_alias: 'li[role="separator"]',
 			display: block,
@@ -134,7 +152,14 @@ $vv-nav: (
 					flex: 1 1 0%,
 				),
 				item-label: (
-					display: block,
+					// Still a flex container: as a block it puts the icon of a
+					// voice back on the baseline, where `align-self` is inert and
+					// the `gap` between the icon and the label is dropped, and the
+					// first line offset the icon carries becomes a nudge of its
+					// own. `justify-content` centres the icon and the label
+					// together, `text-align` the lines of a label that wraps.
+					display: flex,
+					justify-content: center,
 					width: 100%,
 					text-align: center,
 				),

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

@@ -42,13 +42,28 @@ $vv-radio: (
 		),
 	),
 	element: (
+		label: (
+			// See `vv-checkbox`: an anonymous flex item cannot be kept beside
+			// the control once the label wraps.
+			// Only a span without a class of its own, for plain markup: a
+			// badge or an icon written next to the label is a span too, and
+			// `flex: 1` would stretch it. Anything carrying a class takes
+			// `vv-radio__label` to be the label.
+			_alias: '> span:not([class])',
+			flex: 1,
+			min-width: 0,
+		),
 		input: (
 			_alias: "> input[type='radio']",
 			border-width: var(--spacing-2),
 			border-style: solid,
 			border-color: currentcolor,
-			min-width: var(--spacing-20),
-			height: var(--spacing-20),
+			// Plain declarations for the same reason as `vv-checkbox`: the
+			// size is read on the control, not at the root.
+			[min-width]: var(--input-control-size),
+			[height]: var(--input-control-size),
+			align-self: flex-start,
+			[translate]: 0 calc((1lh - var(--input-control-size)) / 2),
 			border-radius: 50%,
 			margin: 0 var(--input-label-gap) 0 0,
 			background-color: transparent,

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

@@ -26,6 +26,11 @@ $vv-select: (
 			display: flex,
 			align-items: center,
 			flex: 1,
+			// No `overflow: hidden` here, unlike the wrapper of `vv-input-text`,
+			// `vv-textarea` and `vv-input-file`: this wrapper also hosts the
+			// dropdown of a combobox, which a clip would cut off whenever the
+			// positioning strategy is not `fixed`. The ellipsis of a long value
+			// is clipped by the `value` element instead.
 			background-color: var(--input-background-color),
 			will-change: background-color,
 			transition: var(--transition-colors),

package/src/tools/mixin-modules/_bem.scss

@@ -322,6 +322,10 @@ $-state-suffixes: (
 
 	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $element, $value in map.get($map, $key) {
+			// `$block` is the block selector alone, threaded down unchanged
+			// from `spread-map-into-bem`: what a state or a transition
+			// expands to travels in `$modifier` instead. Passing a selector
+			// list here would suffix its last entry alone.
 			$selector: $block + '__' + $element;
 
 			// combinator
@@ -354,6 +358,10 @@ $-state-suffixes: (
 
 			@if $alias {
 				@if $modifier {
+					// One entry per selector of the modifier, in the same
+					// order as `$selector` above: `spread-map-into-states`
+					// pairs the two lists by index, so an `_alias` has to be
+					// a single selector, not a list of them.
 					$aliases: ();
 
 					@each $item in selector.parse($modifier) {
@@ -442,15 +450,35 @@ $-state-suffixes: (
 		@each $state, $value in map.get($map, $key) {
 			@if list.index($-valid-states, $state) {
 				$selectors: ();
+				$block-items: selector.parse($block);
+				$alias-items: ();
+
+				// `$block` and `$alias` are built side by side by the caller,
+				// one entry per selector of the parent, so they are walked by
+				// index: the alias belongs to the block item it was nested
+				// under. Suffixing the list as a whole would reach its last
+				// entry alone and leave the ones before it in the rule bare.
+				@if $alias {
+					$alias-items: selector.parse($alias);
+				}
+
+				$i: 0;
+
+				@each $block-item in $block-items {
+					$i: $i + 1;
+					$alias-item: null;
+
+					@if $i <= list.length($alias-items) {
+						$alias-item: list.nth($alias-items, $i);
+					}
 
-				@each $block-item in selector.parse($block) {
 					$selectors: list.join(
 						$selectors,
 						('#{$modifier}#{$block-item}--#{$state}', '#{$modifier}#{$block-item}.#{$state}')
 					);
 
-					@if $alias {
-						$selectors: list.join($selectors, '#{$modifier}#{$alias}.#{$state}');
+					@if $alias-item {
+						$selectors: list.join($selectors, '#{$modifier}#{$alias-item}.#{$state}');
 					}
 
 					// Special state handling - use function to get updated selectors
@@ -458,7 +486,7 @@ $-state-suffixes: (
 						$state: $state,
 						$block-item: $block-item,
 						$modifier: $modifier,
-						$alias: $alias,
+						$alias: $alias-item,
 						$selectors: $selectors
 					);
 				}
@@ -558,6 +586,27 @@ $-state-suffixes: (
 		$block: &;
 	}
 
+	// A state and a transition hand their whole selector list down as the
+	// modifier, so the block is compounded onto each of its entries: written
+	// as one interpolation it would reach the last entry alone and leave the
+	// ones before it in the rule unscoped.
+	$selector: '#{$modifier}#{$block}';
+
+	@if $modifier and $modifier != '' and $block {
+		$selectors: ();
+
+		@each $modifier-item in selector.parse($modifier) {
+			@each $block-item in selector.parse($block) {
+				$selectors: list.join(
+					$selectors,
+					'#{$modifier-item}#{$block-item}'
+				);
+			}
+		}
+
+		$selector: list-to-string($selectors);
+	}
+
 	@if meta.type-of(map.get($map, $key)) == 'map' {
 		@each $breakpoint, $value in map.get($map, $key) {
 			@if string.index($breakpoint, '-') {
@@ -566,7 +615,7 @@ $-state-suffixes: (
 
 				@if map.has-key($bps, $bp) {
 					@if $operator == 'up' {
-						@include wrap-with-where($selector: '#{$modifier}#{$block}', $enabled: $zero-specificity) {
+						@include wrap-with-where($selector: $selector, $enabled: $zero-specificity) {
 							@include media-breakpoint-up($bp, $bps) {
 								@include spread-map-into-attrs(
 									$original: $original,
@@ -581,7 +630,7 @@ $-state-suffixes: (
 					}
 
 					@if $operator == 'down' {
-						@include wrap-with-where($selector: '#{$modifier}#{$block}', $enabled: $zero-specificity) {
+						@include wrap-with-where($selector: $selector, $enabled: $zero-specificity) {
 							@include media-breakpoint-down($bp, $bps) {
 								@include spread-map-into-attrs(
 									$original: $original,
@@ -596,7 +645,7 @@ $-state-suffixes: (
 					}
 
 					@if map.has-key($bps, $operator) {
-						@include wrap-with-where($selector: '#{$modifier}#{$block}', $enabled: $zero-specificity) {
+						@include wrap-with-where($selector: $selector, $enabled: $zero-specificity) {
 							@include media-breakpoint-between($operator, $bp, $bps) {
 								@include spread-map-into-attrs(
 									$original: $original,
@@ -611,7 +660,7 @@ $-state-suffixes: (
 					}
 				}
 			} @else if map.has-key($bps, $breakpoint) {
-				@include wrap-with-where($selector: '#{$modifier}#{$block}', $enabled: $zero-specificity) {
+				@include wrap-with-where($selector: $selector, $enabled: $zero-specificity) {
 					@include media-breakpoint-up($breakpoint, $bps) {
 						@include spread-map-into-attrs(
 							$original: $original,
@@ -765,6 +814,11 @@ $-state-suffixes: (
 				);
 				$alias: map.get($map, 'element', $element, '_alias');
 
+				// The alias is a second selector for the same element, not a
+				// descendant of the first, so the list is glued with a comma
+				// before it is emitted: interpolating it would join the two
+				// with a space and compile them to one selector that matches
+				// a `.vv-input-text` nested inside its own element.
 				@if $alias {
 					$element-selector: list.append(
 						$element-selector,
@@ -773,7 +827,7 @@ $-state-suffixes: (
 				}
 
 				@include wrap-with-where(
-					$selector: $element-selector,
+					$selector: list-to-string($element-selector),
 					$enabled: $zero-specificity
 				) {
 					@extend %#{$block}-state-#{$state}__#{$element} !optional;
@@ -794,7 +848,7 @@ $-state-suffixes: (
 						}
 
 						@include wrap-with-where(
-							$selector: $element-selector-state,
+							$selector: list-to-string($element-selector-state),
 							$enabled: $zero-specificity
 						) {
 							@extend %#{$block}-state-#{$state}-element-#{$element}--#{$element-state}
@@ -816,7 +870,7 @@ $-state-suffixes: (
 						}
 
 						@include wrap-with-where(
-							$selector: $element-selector-pseudo,
+							$selector: list-to-string($element-selector-pseudo),
 							$enabled: $zero-specificity
 						) {
 							@extend %#{$block}-state-#{$state}-element-#{$element}--#{$pseudo}

package/src/utilities/flexbox.scss

@@ -136,4 +136,31 @@
 	);
 }
 
+// Optically aligns an icon with the first line of a wrapping label instead of
+// with the centre of the whole block. `align-self: center` centres the icon on
+// the flex line, which is the whole block once the label wraps, and
+// `align-self: flex-start` drops the half leading of the first line. The offset
+// is half the difference between the line box and the icon, so it holds at any
+// font size and any icon size. The offset itself is never zero: on a label that
+// does not wrap it puts the icon exactly where `align-self: center` would, since
+// the first line is then the whole block, which is why the class is safe to
+// apply unconditionally and needs no breakpoint variant.
+// https://ishadeed.com/article/aligning-list-icons/
+// `--icon-size` is the rendered size of the icon and defaults to the `1em` an
+// inline SVG carries. `transform` and not `translate`, because components of
+// the library move their own elements with `translate` and the two would
+// overwrite each other.
+%self-first-line {
+	flex-shrink: 0;
+	align-self: flex-start;
+	transform: translateY(calc((1lh - var(--icon-size, 1em)) / 2));
+}
+
+@include wrap-with-where(
+	$selector: '.self-first-line',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %self-first-line;
+}
+
 }