@volverjs/style 0.1.28 → 0.1.30-beta.1

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.28",
+  "version": "0.1.30-beta.1",
   "engines": {
     "node": ">= 20.x"
   },
@@ -100,29 +100,52 @@
     "./components/vv-accordion-group": "./dist/components/vv-accordion-group.css",
     "./components/vv-alert": "./dist/components/vv-alert.css",
     "./components/vv-alert-group": "./dist/components/vv-alert-group.css",
+    "./components/vv-attachment": "./dist/components/vv-attachment.css",
+    "./components/vv-attachment-group": "./dist/components/vv-attachment-group.css",
     "./components/vv-avatar": "./dist/components/vv-avatar.css",
     "./components/vv-avatar-group": "./dist/components/vv-avatar-group.css",
     "./components/vv-badge": "./dist/components/vv-badge.css",
     "./components/vv-breadcrumb": "./dist/components/vv-breadcrumb.css",
+    "./components/vv-bubble": "./dist/components/vv-bubble.css",
+    "./components/vv-bubble-group": "./dist/components/vv-bubble-group.css",
     "./components/vv-button": "./dist/components/vv-button.css",
     "./components/vv-button-group": "./dist/components/vv-button-group.css",
+    "./components/vv-calendar": "./dist/components/vv-calendar.css",
     "./components/vv-card": "./dist/components/vv-card.css",
     "./components/vv-checkbox": "./dist/components/vv-checkbox.css",
     "./components/vv-checkbox-group": "./dist/components/vv-checkbox-group.css",
+    "./components/vv-command": "./dist/components/vv-command.css",
     "./components/vv-dialog": "./dist/components/vv-dialog.css",
     "./components/vv-dropdown": "./dist/components/vv-dropdown.css",
     "./components/vv-dropdown-action": "./dist/components/vv-dropdown-action.css",
     "./components/vv-dropdown-optgroup": "./dist/components/vv-dropdown-optgroup.css",
     "./components/vv-dropdown-option": "./dist/components/vv-dropdown-option.css",
+    "./components/vv-empty": "./dist/components/vv-empty.css",
+    "./components/vv-field": "./dist/components/vv-field.css",
     "./components/vv-input-file": "./dist/components/vv-input-file.css",
+    "./components/vv-input-otp": "./dist/components/vv-input-otp.css",
     "./components/vv-input-range": "./dist/components/vv-input-range.css",
     "./components/vv-input-text": "./dist/components/vv-input-text.css",
+    "./components/vv-item": "./dist/components/vv-item.css",
+    "./components/vv-item-group": "./dist/components/vv-item-group.css",
+    "./components/vv-kbd": "./dist/components/vv-kbd.css",
+    "./components/vv-kbd-group": "./dist/components/vv-kbd-group.css",
+    "./components/vv-marker": "./dist/components/vv-marker.css",
+    "./components/vv-message": "./dist/components/vv-message.css",
+    "./components/vv-message-scroller": "./dist/components/vv-message-scroller.css",
     "./components/vv-nav": "./dist/components/vv-nav.css",
+    "./components/vv-pagination": "./dist/components/vv-pagination.css",
+    "./components/vv-popover": "./dist/components/vv-popover.css",
     "./components/vv-progress": "./dist/components/vv-progress.css",
+    "./components/vv-prose": "./dist/components/vv-prose.css",
+    "./components/vv-questionnaire": "./dist/components/vv-questionnaire.css",
     "./components/vv-radio": "./dist/components/vv-radio.css",
     "./components/vv-radio-group": "./dist/components/vv-radio-group.css",
     "./components/vv-select": "./dist/components/vv-select.css",
+    "./components/vv-separator": "./dist/components/vv-separator.css",
+    "./components/vv-sidebar": "./dist/components/vv-sidebar.css",
     "./components/vv-skeleton": "./dist/components/vv-skeleton.css",
+    "./components/vv-spinner": "./dist/components/vv-spinner.css",
     "./components/vv-tab": "./dist/components/vv-tab.css",
     "./components/vv-table": "./dist/components/vv-table.css",
     "./components/vv-text": "./dist/components/vv-text.css",
@@ -151,29 +174,52 @@
     "./scss/components/vv-accordion-group": "./src/components/vv-accordion-group.scss",
     "./scss/components/vv-alert": "./src/components/vv-alert.scss",
     "./scss/components/vv-alert-group": "./src/components/vv-alert-group.scss",
+    "./scss/components/vv-attachment": "./src/components/vv-attachment.scss",
+    "./scss/components/vv-attachment-group": "./src/components/vv-attachment-group.scss",
     "./scss/components/vv-avatar": "./src/components/vv-avatar.scss",
     "./scss/components/vv-avatar-group": "./src/components/vv-avatar-group.scss",
     "./scss/components/vv-badge": "./src/components/vv-badge.scss",
     "./scss/components/vv-breadcrumb": "./src/components/vv-breadcrumb.scss",
+    "./scss/components/vv-bubble": "./src/components/vv-bubble.scss",
+    "./scss/components/vv-bubble-group": "./src/components/vv-bubble-group.scss",
     "./scss/components/vv-button": "./src/components/vv-button.scss",
     "./scss/components/vv-button-group": "./src/components/vv-button-group.scss",
+    "./scss/components/vv-calendar": "./src/components/vv-calendar.scss",
     "./scss/components/vv-card": "./src/components/vv-card.scss",
     "./scss/components/vv-checkbox": "./src/components/vv-checkbox.scss",
     "./scss/components/vv-checkbox-group": "./src/components/vv-checkbox-group.scss",
+    "./scss/components/vv-command": "./src/components/vv-command.scss",
     "./scss/components/vv-dialog": "./src/components/vv-dialog.scss",
     "./scss/components/vv-dropdown": "./src/components/vv-dropdown.scss",
     "./scss/components/vv-dropdown-action": "./src/components/vv-dropdown-action.scss",
     "./scss/components/vv-dropdown-optgroup": "./src/components/vv-dropdown-optgroup.scss",
     "./scss/components/vv-dropdown-option": "./src/components/vv-dropdown-option.scss",
+    "./scss/components/vv-empty": "./src/components/vv-empty.scss",
+    "./scss/components/vv-field": "./src/components/vv-field.scss",
     "./scss/components/vv-input-file": "./src/components/vv-input-file.scss",
+    "./scss/components/vv-input-otp": "./src/components/vv-input-otp.scss",
     "./scss/components/vv-input-range": "./src/components/vv-input-range.scss",
     "./scss/components/vv-input-text": "./src/components/vv-input-text.scss",
+    "./scss/components/vv-item": "./src/components/vv-item.scss",
+    "./scss/components/vv-item-group": "./src/components/vv-item-group.scss",
+    "./scss/components/vv-kbd": "./src/components/vv-kbd.scss",
+    "./scss/components/vv-kbd-group": "./src/components/vv-kbd-group.scss",
+    "./scss/components/vv-marker": "./src/components/vv-marker.scss",
+    "./scss/components/vv-message": "./src/components/vv-message.scss",
+    "./scss/components/vv-message-scroller": "./src/components/vv-message-scroller.scss",
     "./scss/components/vv-nav": "./src/components/vv-nav.scss",
+    "./scss/components/vv-pagination": "./src/components/vv-pagination.scss",
+    "./scss/components/vv-popover": "./src/components/vv-popover.scss",
     "./scss/components/vv-progress": "./src/components/vv-progress.scss",
+    "./scss/components/vv-prose": "./src/components/vv-prose.scss",
+    "./scss/components/vv-questionnaire": "./src/components/vv-questionnaire.scss",
     "./scss/components/vv-radio": "./src/components/vv-radio.scss",
     "./scss/components/vv-radio-group": "./src/components/vv-radio-group.scss",
     "./scss/components/vv-select": "./src/components/vv-select.scss",
+    "./scss/components/vv-separator": "./src/components/vv-separator.scss",
+    "./scss/components/vv-sidebar": "./src/components/vv-sidebar.scss",
     "./scss/components/vv-skeleton": "./src/components/vv-skeleton.scss",
+    "./scss/components/vv-spinner": "./src/components/vv-spinner.scss",
     "./scss/components/vv-tab": "./src/components/vv-tab.scss",
     "./scss/components/vv-table": "./src/components/vv-table.scss",
     "./scss/components/vv-text": "./src/components/vv-text.scss",
@@ -184,6 +230,7 @@
     "./scss/functions": "./src/tools/_functions.scss",
     "./scss/mixins": "./src/tools/_mixins.scss",
     "./scss/preflight": "./src/_preflight.scss",
+    "./scss/presets/outlined-fields": "./src/presets/_outlined-fields.scss",
     "./scss/props": "./src/props/index.scss",
     "./scss/props/background": "./src/props/background.scss",
     "./scss/props/borders": "./src/props/borders.scss",
@@ -246,6 +293,7 @@
     "dev": "vite --port 3000 --open",
     "build": "node ./scripts/build.js && node ./scripts/generateDesignTokens.js",
     "design-tokens": "node ./scripts/generateDesignTokens.js",
+    "check:colors": "node ./scripts/checkColors.js",
     "styleguide": "vite-ssg build",
     "preview": "vite preview",
     "lint": "eslint .",

package/src/_config.scss

@@ -36,29 +36,52 @@ $components-names: (
 	vv-accordion: $components-prefix + -accordion,
 	vv-alert-group: $components-prefix + -alert-group,
 	vv-alert: $components-prefix + -alert,
+	vv-attachment-group: $components-prefix + -attachment-group,
+	vv-attachment: $components-prefix + -attachment,
 	vv-avatar-group: $components-prefix + -avatar-group,
 	vv-avatar: $components-prefix + -avatar,
 	vv-badge: $components-prefix + -badge,
 	vv-breadcrumb: $components-prefix + -breadcrumb,
+	vv-bubble-group: $components-prefix + -bubble-group,
+	vv-bubble: $components-prefix + -bubble,
 	vv-button-group: $components-prefix + -button-group,
 	vv-button: $components-prefix + -button,
+	vv-calendar: $components-prefix + -calendar,
 	vv-card: $components-prefix + -card,
 	vv-checkbox-group: $components-prefix + -checkbox-group,
 	vv-checkbox: $components-prefix + -checkbox,
+	vv-command: $components-prefix + -command,
 	vv-dialog: $components-prefix + -dialog,
 	vv-dropdown-action: $components-prefix + -dropdown-action,
 	vv-dropdown-optgroup: $components-prefix + -dropdown-optgroup,
 	vv-dropdown-option: $components-prefix + -dropdown-option,
 	vv-dropdown: $components-prefix + -dropdown,
+	vv-empty: $components-prefix + -empty,
+	vv-field: $components-prefix + -field,
 	vv-input-file: $components-prefix + -input-file,
+	vv-input-otp: $components-prefix + -input-otp,
 	vv-input-range: $components-prefix + -input-range,
 	vv-input-text: $components-prefix + -input-text,
+	vv-item-group: $components-prefix + -item-group,
+	vv-item: $components-prefix + -item,
+	vv-kbd-group: $components-prefix + -kbd-group,
+	vv-kbd: $components-prefix + -kbd,
+	vv-marker: $components-prefix + -marker,
+	vv-message-scroller: $components-prefix + -message-scroller,
+	vv-message: $components-prefix + -message,
 	vv-nav: $components-prefix + -nav,
+	vv-pagination: $components-prefix + -pagination,
+	vv-popover: $components-prefix + -popover,
 	vv-progress: $components-prefix + -progress,
+	vv-prose: $components-prefix + -prose,
+	vv-questionnaire: $components-prefix + -questionnaire,
 	vv-radio-group: $components-prefix + -radio-group,
 	vv-radio: $components-prefix + -radio,
 	vv-select: $components-prefix + -select,
+	vv-separator: $components-prefix + -separator,
+	vv-sidebar: $components-prefix + -sidebar,
 	vv-skeleton: $components-prefix + -skeleton,
+	vv-spinner: $components-prefix + -spinner,
 	vv-tab: $components-prefix + -tab,
 	vv-table: $components-prefix + -table,
 	vv-text: $components-prefix + -text,

package/src/_preflight.scss

@@ -12,7 +12,16 @@
 @include layer(preflight, $use-css-layers, $layer-prefix) {
 @if $preflight {
 	:where(.preflight) {
-		:not(.preflight-revert *) {
+		// An element that carries a class of a component is drawn by that
+		// component and left alone here: the rules below sit at (0,1,0) and
+		// would win over the component's zero specificity rules, dressing a
+		// `button.vv-badge__button` as a primary button or a
+		// `label.vv-radio--segment` as a plain radio. Both arguments of the
+		// `:not()` weigh a class, so the specificity does not move. A bare
+		// child a component styles through an `_alias` has no class to tell
+		// it apart and is still dressed, except inside `vv-prose`, whose whole
+		// content is bare tags it draws itself.
+		:not(.preflight-revert *, .#{map.get($components-names, vv-prose)} *, [class*='#{$components-prefix}-']) {
 			// typography
 			&:where(h1, h2, h3, h4, h5, h6) {
 				@extend %vv-text !optional;
@@ -145,8 +154,11 @@
 				@extend %text-smaller !optional;
 			}
 
+			// A filled color: the text takes its contrast token, not the
+			// word color, which is light in the dark theme
 			&:where(mark) {
 				@extend %bg-warning !optional;
+				@extend %text-warning-contrast !optional;
 			}
 
 			&:where(pre) {
@@ -170,7 +182,7 @@
 			}
 
 			// anchor
-			&:where(a:not(.#{map.get($components-names, vv-button)})) {
+			&:where(a) {
 				@extend %vv-text !optional;
 				@extend %vv-text--link !optional;
 

package/src/components/index.scss

@@ -12,6 +12,7 @@
 @use 'vv-dropdown-action';
 @use 'vv-dropdown-option';
 @use 'vv-dropdown-optgroup';
+@use 'vv-empty';
 @use 'vv-checkbox';
 @use 'vv-checkbox-group';
 @use 'vv-radio';
@@ -19,14 +20,41 @@
 @use 'vv-avatar';
 @use 'vv-avatar-group';
 @use 'vv-input-text';
+@use 'vv-item';
+@use 'vv-item-group';
 @use 'vv-input-file';
 @use 'vv-input-range';
+
+// After vv-checkbox and vv-radio: a switch used as its control takes the
+// control's margin over its own
+@use 'vv-field';
 @use 'vv-nav';
+@use 'vv-pagination';
 @use 'vv-progress';
+@use 'vv-prose';
 @use 'vv-select';
+@use 'vv-separator';
 @use 'vv-skeleton';
+@use 'vv-spinner';
 @use 'vv-tab';
 @use 'vv-table';
 @use 'vv-text';
 @use 'vv-textarea';
 @use 'vv-tooltip';
+@use 'vv-attachment';
+@use 'vv-attachment-group';
+@use 'vv-bubble';
+
+// After vv-bubble: the joined corners of a group win over the bubble's own
+@use 'vv-bubble-group';
+@use 'vv-marker';
+@use 'vv-message';
+@use 'vv-message-scroller';
+@use 'vv-questionnaire';
+@use 'vv-calendar';
+@use 'vv-command';
+@use 'vv-input-otp';
+@use 'vv-kbd';
+@use 'vv-kbd-group';
+@use 'vv-popover';
+@use 'vv-sidebar';

package/src/components/vv-attachment-group.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-attachment-group);
+$component-map: $vv-attachment-group;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-attachment.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-attachment);
+$component-map: $vv-attachment;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-bubble-group.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-bubble-group);
+$component-map: $vv-bubble-group;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-bubble.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-bubble);
+$component-map: $vv-bubble;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-calendar.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-calendar);
+$component-map: $vv-calendar;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+// The keyboard ring of a day. The shared `focus-visible` state leaves out
+// `tabindex="-1"`, and a grid moved across with a roving tabindex gives it to
+// every day but one, so the ring is written here, on the pseudo-class alone.
+@include wrap-with-where($selector: '#{$component-selector}__day:focus-visible', $enabled: $zero-specificity-for-components) {
+	outline: var(--spacing-px) solid var(--color-brand);
+	outline-offset: var(--spacing-2);
+}
+
+}

package/src/components/vv-command.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-command);
+$component-map: $vv-command;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-empty.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-empty);
+$component-map: $vv-empty;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-field.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-field);
+$component-map: $vv-field;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+// disabled and readonly, from the attribute of the control
+@include spread-map-into-control-states(
+	$map: $component-map,
+	$block: $component-name,
+	$control: '.#{$component-name}__control',
+	$states: ('disabled', 'readonly'),
+	$zero-specificity: $zero-specificity-for-components
+);
+
+}

package/src/components/vv-input-otp.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-input-otp);
+$component-map: $vv-input-otp;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-item-group.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-item-group);
+$component-map: $vv-item-group;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-item.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-item);
+$component-map: $vv-item;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+// A title over a description carries the weight of a heading on every row,
+// or a list of titles over grey descriptions reads as one run of grey. The
+// step of weight a chosen or a current row takes would be lost next to it,
+// so on those rows the surface and the bar carry the state alone. The map
+// cannot say "a title that has a description beside it", and this rule comes
+// after the state rules it has to win over at the same specificity.
+@include wrap-with-where(
+	$selector: '#{$component-selector}__content:has(> #{$component-selector}__description) > #{$component-selector}__title',
+	$enabled: $zero-specificity-for-components
+) {
+	font-weight: var(--font-semibold);
+}
+
+// A row whose entry is disabled answers no pointer: the row itself never
+// carries the attribute, so its hover state would still light it up
+@include wrap-with-where(
+	$selector: '#{$component-selector}:has(> #{$component-selector}__entry:is(:disabled, [aria-disabled="true"]))',
+	$enabled: $zero-specificity-for-components
+) {
+	background-color: transparent;
+}
+
+}

package/src/components/vv-kbd-group.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-kbd-group);
+$component-map: $vv-kbd-group;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-kbd.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-kbd);
+$component-map: $vv-kbd;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-marker.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-marker);
+$component-map: $vv-marker;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-message-scroller.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-message-scroller);
+$component-map: $vv-message-scroller;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+// The reset hides `[hidden]` at zero specificity, before the components, so
+// the `display` of the button would win over it: the script hides the button
+// with the attribute while the reader is at the bottom
+@include wrap-with-where($selector: '#{$component-selector}__jump[hidden]', $enabled: $zero-specificity-for-components) {
+	display: none;
+}
+
+}

package/src/components/vv-message.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-message);
+$component-map: $vv-message;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+// A device that cannot hover never reveals what shows on hover: the metadata
+// of a message is always there. The map cannot express a media feature.
+@media (hover: none) {
+	@include wrap-with-where($selector: '#{$component-selector}__meta', $enabled: $zero-specificity-for-components) {
+		opacity: var(--opacity-100);
+	}
+}
+
+}

package/src/components/vv-pagination.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-pagination);
+$component-map: $vv-pagination;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}

package/src/components/vv-popover.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../context' as *;
+
+@include layer(components, $use-css-layers, $layer-prefix) {
+$component-name: map.get($components-names, vv-popover);
+$component-map: $vv-popover;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$use-custom-props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-components,
+	$bps: $breakpoints
+);
+
+}