@volverjs/style 0.1.27 → 0.1.29

package/package.json

@@ -24,10 +24,17 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.27",
+  "version": "0.1.29",
   "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/props/index.scss

@@ -6,8 +6,11 @@
 @use 'filters';
 @use 'input';
 @use 'layout';
-@use 'media';
 @use 'sizing';
 @use 'spacing';
 @use 'transitions';
 @use 'typography';
+
+// `media` is left out on purpose: `@custom-media` needs a build step to be
+// resolved, and without one a minifier warns about every rule. A consumer
+// whose pipeline resolves them imports `scss/props/media` on its own.

package/src/props/media.scss

@@ -1,5 +1,10 @@
 @use '../context' as *;
 
+// Opt-in, left out of `props/index.scss`: `@custom-media` is a draft that has
+// to be resolved at build time (postcss-custom-media, or lightningcss with
+// `drafts.customMedia`), and each resolver reads the definitions of the file
+// it is transforming, so import this module where the queries are used.
+
 // motion
 @custom-media --motion-ok (prefers-reduced-motion: no-preference);
 @custom-media --motion-not-ok (prefers-reduced-motion: reduce);
@@ -16,7 +21,7 @@
 @custom-media --os-dark (prefers-color-scheme: dark);
 @custom-media --os-light (prefers-color-scheme: light);
 
-// constrast
+// contrast
 @custom-media --high-contrast (prefers-contrast: more);
 @custom-media --low-contrast (prefers-contrast: less);
 
@@ -33,17 +38,27 @@
 @custom-media --pointer (hover) and (pointer: coarse);
 @custom-media --mouse (hover) and (pointer: fine);
 
-// breakpoints
-/* stylelint-disable */
+// breakpoints: the same widths as the `bp-only`, `bp-up` and `bp-down`
+// mixins. A range stops short of the next breakpoint instead of sharing its
+// first pixel, and the last breakpoint has no upper bound.
+// stylelint-disable custom-media-pattern
 $old-breakpoint: null;
 $old-breakpoint-value: null;
+
 @each $breakpoint, $breakpoint-value in $breakpoints {
 	@if $old-breakpoint {
-		@custom-media --#{$old-breakpoint}-only (#{$old-breakpoint-value} <= width <= #{$breakpoint-value});
-		@custom-media --#{$old-breakpoint}-n-above (width >= #{$breakpoint-value});
-		@custom-media --#{$old-breakpoint}-n-below (width <= #{$breakpoint-value});
+		@custom-media --#{$old-breakpoint}-only (#{$old-breakpoint-value} <= width < #{$breakpoint-value});
+		@custom-media --#{$old-breakpoint}-n-below (width < #{$breakpoint-value});
 	}
 
+	@custom-media --#{$breakpoint}-n-above (width >= #{$breakpoint-value});
+
 	$old-breakpoint: $breakpoint;
 	$old-breakpoint-value: $breakpoint-value;
 }
+
+@if $old-breakpoint {
+	@custom-media --#{$old-breakpoint}-only (width >= #{$old-breakpoint-value});
+	@custom-media --#{$old-breakpoint}-n-below (width >= 0);
+}
+// stylelint-enable custom-media-pattern

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/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;
+}
+
 }