@volverjs/style 0.1.2-beta.23 → 0.1.2-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.23",
+  "version": "0.1.2-beta.25",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",
@@ -155,11 +155,11 @@
   "devDependencies": {
     "@iconify/vue": "^4.0.0",
     "@vitejs/plugin-vue": "^3.2.0",
-    "@vueuse/core": "^9.5.0",
-    "@vueuse/head": "^1.0.10",
-    "eslint": "^8.27.0",
+    "@vueuse/core": "^9.6.0",
+    "@vueuse/head": "^1.0.18",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-vue": "^9.7.0",
+    "eslint-plugin-vue": "^9.8.0",
     "glob": "^8.0.3",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.5",
@@ -175,20 +175,20 @@
     "stylelint-config-recommended-scss": "^8.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard-scss": "^6.1.0",
-    "unplugin-auto-import": "^0.11.4",
-    "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.2.3",
-    "vite-plugin-css-export": "^1.1.0",
+    "unplugin-auto-import": "^0.11.5",
+    "unplugin-vue-components": "^0.22.11",
+    "vite": "^3.2.4",
+    "vite-plugin-css-export": "^1.2.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-markdown": "^2.1.0",
     "vite-plugin-pages": "^0.27.1",
-    "vite-plugin-stylelint": "^3.0.8",
+    "vite-plugin-stylelint": "^3.0.9",
     "vite-plugin-vue-layouts": "^0.7.0",
-    "vite-ssg": "^0.21.2",
+    "vite-ssg": "^0.22.0",
     "vite-ssg-sitemap": "^0.4.3",
     "vue": "^3.2.45",
-    "vue-live": "^2.1.0",
+    "vue-live": "2.1.0",
     "vue-router": "^4.1.6"
   },
   "scripts": {

package/src/_config.scss

@@ -1,8 +1,8 @@
 // use custom props for components
 $use-custom-props-for-components: true !default;
 
-// enable zero specificity for compoenents
-$zero-specificity-for-compoenents: true !default;
+// enable zero specificity for components
+$zero-specificity-for-components: true !default;
 
 // enable zero specificity for utilities
 $zero-specificity-for-utilities: true !default;

package/src/components/vv-accordion.scss

@@ -8,6 +8,6 @@ $component-map: $vv-accordion;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-alert.scss

@@ -8,6 +8,6 @@ $component-map: $vv-alert;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-avatar.scss

@@ -8,6 +8,6 @@ $component-map: $vv-avatar;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-badge.scss

@@ -8,6 +8,6 @@ $component-map: $vv-badge;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-breadcrumb.scss

@@ -8,6 +8,6 @@ $component-map: $vv-breadcrumb;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

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

@@ -11,7 +11,7 @@ $button-component-selector: '.' + $button-component-name;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
 
@@ -23,7 +23,7 @@ $button-component-selector: '.' + $button-component-name;
 				@include wrap-with-where(
 					$selector:
 						'&.active, &#{$button-component-selector}--active, &:active',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					z-index: 1;
 				}
@@ -32,7 +32,7 @@ $button-component-selector: '.' + $button-component-name;
 
 		@include wrap-with-where(
 			$selector: $button-component-selector,
-			$enabled: $zero-specificity-for-compoenents
+			$enabled: $zero-specificity-for-components
 		) {
 			flex: 1;
 		}
@@ -49,7 +49,7 @@ $button-component-selector: '.' + $button-component-name;
 					// clear top border-radius for first child
 					@include wrap-with-where(
 						$selector: '&:not(:first-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
 						border-top-right-radius: 0;
 						border-top-left-radius: 0;
@@ -58,7 +58,7 @@ $button-component-selector: '.' + $button-component-name;
 					// clear bottom border-radius for last child
 					@include wrap-with-where(
 						$selector: '&:not(:last-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
 						border-bottom-right-radius: 0;
 						border-bottom-left-radius: 0;
@@ -68,7 +68,7 @@ $button-component-selector: '.' + $button-component-name;
 					@if map.get($vv-button, '--button-border-width') {
 						@include wrap-with-where(
 							$selector: '&:not(:last-child, :last-child)',
-							$enabled: $zero-specificity-for-compoenents
+							$enabled: $zero-specificity-for-components
 						) {
 							margin-block: calc(var(--button-border-width) * -1);
 						}
@@ -82,7 +82,7 @@ $button-component-selector: '.' + $button-component-name;
 				// clear left border-radius for first child
 				@include wrap-with-where(
 					$selector: '&:not(:first-child)',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					border-top-left-radius: 0;
 					border-bottom-left-radius: 0;
@@ -91,7 +91,7 @@ $button-component-selector: '.' + $button-component-name;
 				// clear right border-radius for first child
 				@include wrap-with-where(
 					$selector: '&:not(:last-child)',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					border-top-right-radius: 0;
 					border-bottom-right-radius: 0;
@@ -101,7 +101,7 @@ $button-component-selector: '.' + $button-component-name;
 				@if map.get($vv-button, '--button-border-width') {
 					@include wrap-with-where(
 						$selector: '&:not(:last-child, :last-child)',
-						$enabled: $zero-specificity-for-compoenents
+						$enabled: $zero-specificity-for-components
 					) {
 						margin-inline: calc(var(--button-border-width) * -1);
 					}

package/src/components/vv-button.scss

@@ -9,7 +9,7 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$custom-block: true,
 	$bps: $breakpoints
 ) {
@@ -38,7 +38,7 @@ $component-selector: '.#{ $component-name}';
 
 	@include wrap-with-where(
 		$selector: $component-selector,
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		&:where(a[href], button, input[type='button'], input[type='submit'], input[type='reset']),
 		&::file-selector-button {

package/src/components/vv-card.scss

@@ -8,6 +8,6 @@ $component-map: $vv-card;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-dialog.scss

@@ -8,6 +8,6 @@ $component-map: $vv-dialog;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-dropdown.scss

@@ -8,6 +8,6 @@ $component-map: $vv-dropdown;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-input-checkbox-group.scss

@@ -8,6 +8,6 @@ $component-map: $vv-input-checkbox-group;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

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

@@ -9,13 +9,13 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
 
 @include wrap-with-where(
 	$selector: '#{$component-selector}:has(> input[type="checkbox"]:disabled)',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	@extend %#{$component-name}--disabled !optional;
 }
@@ -23,7 +23,7 @@ $component-selector: '.#{ $component-name}';
 @include wrap-with-where(
 	$selector:
 		'#{$component-selector}:has(> input[type="checkbox"]:indeterminate)',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	@extend %#{$component-name}--indeterminate !optional;
 }

package/src/components/vv-input-radio-group.scss

@@ -8,6 +8,6 @@ $component-map: $vv-input-radio-group;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

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

@@ -9,13 +9,13 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
 
 @include wrap-with-where(
 	$selector: '#{$component-selector}:has(> input[type="radio"]:disabled)',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	@extend %#{$component-name}--disabled !optional;
 }

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

@@ -9,7 +9,7 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
 
@@ -17,7 +17,7 @@ $component-selector: '.#{ $component-name}';
 @each $state in ('disabled', 'readonly') {
 	@include wrap-with-where(
 		$selector: '#{$component-selector}:has(input:#{$state})',
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		@extend %#{$component-name}--#{$state} !optional;
 	}
@@ -29,7 +29,7 @@ $component-selector: '.#{ $component-name}';
 			@include wrap-with-where(
 				$selector:
 					'#{$component-selector}:has(input:#{$state}) #{$component-selector}__#{$element}',
-				$enabled: $zero-specificity-for-compoenents
+				$enabled: $zero-specificity-for-components
 			) {
 				@extend %#{$component-name}-state-#{$state}__#{$element}
 						!optional;
@@ -39,7 +39,7 @@ $component-selector: '.#{ $component-name}';
 				@include wrap-with-where(
 					$selector:
 						'#{$component-selector}:has(input:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
 							!optional;

package/src/components/vv-nav.scss

@@ -8,6 +8,6 @@ $component-map: $vv-nav;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-progress.scss

@@ -8,6 +8,6 @@ $component-map: $vv-progress;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-select.scss

@@ -9,7 +9,7 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
 
@@ -17,7 +17,7 @@ $component-selector: '.#{ $component-name}';
 @each $state in ('disabled') {
 	@include wrap-with-where(
 		$selector: '#{$component-selector}:has(select:#{$state})',
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		@extend %#{$component-name}--#{$state} !optional;
 	}
@@ -29,7 +29,7 @@ $component-selector: '.#{ $component-name}';
 			@include wrap-with-where(
 				$selector:
 					'#{$component-selector}:has(select:#{$state}) #{$component-selector}__#{$element}',
-				$enabled: $zero-specificity-for-compoenents
+				$enabled: $zero-specificity-for-components
 			) {
 				@extend %#{$component-name}-state-#{$state}__#{$element}
 						!optional;
@@ -39,7 +39,7 @@ $component-selector: '.#{ $component-name}';
 				@include wrap-with-where(
 					$selector:
 						'#{$component-selector}:has(select:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
 							!optional;

package/src/components/vv-tab.scss

@@ -8,6 +8,6 @@ $component-map: $vv-tab;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-table.scss

@@ -8,6 +8,6 @@ $component-map: $vv-table;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-text.scss

@@ -8,6 +8,6 @@ $component-map: $vv-text;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-textarea.scss

@@ -9,7 +9,7 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
 
@@ -17,7 +17,7 @@ $component-selector: '.#{ $component-name}';
 @each $state in ('disabled', 'readonly') {
 	@include wrap-with-where(
 		$selector: '#{$component-selector}:has(textarea:#{$state})',
-		$enabled: $zero-specificity-for-compoenents
+		$enabled: $zero-specificity-for-components
 	) {
 		@extend %#{$component-name}--#{$state} !optional;
 	}
@@ -29,7 +29,7 @@ $component-selector: '.#{ $component-name}';
 			@include wrap-with-where(
 				$selector:
 					'#{$component-selector}:has(textarea:#{$state}) #{$component-selector}__#{$element}',
-				$enabled: $zero-specificity-for-compoenents
+				$enabled: $zero-specificity-for-components
 			) {
 				@extend %#{$component-name}-state-#{$state}__#{$element}
 						!optional;
@@ -39,7 +39,7 @@ $component-selector: '.#{ $component-name}';
 				@include wrap-with-where(
 					$selector:
 						'#{$component-selector}:has(textarea:#{$state}) #{$component-selector}__#{$element}:#{$elementState}',
-					$enabled: $zero-specificity-for-compoenents
+					$enabled: $zero-specificity-for-components
 				) {
 					@extend %#{$component-name}-state-#{$state}-element-#{$element}--#{$elementState}
 							!optional;

package/src/components/vv-toast.scss

@@ -8,6 +8,6 @@ $component-map: $vv-toast;
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );

package/src/components/vv-tooltip.scss

@@ -9,20 +9,20 @@ $component-selector: '.#{ $component-name}';
 	$map: $component-map,
 	$block: $component-name,
 	$props: $use-custom-props-for-components,
-	$zero-specificity: $zero-specificity-for-compoenents,
+	$zero-specificity: $zero-specificity-for-components,
 	$bps: $breakpoints
 );
 
 @include wrap-with-where(
 	$selector: '*:has(#{$component-selector})',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	position: relative;
 }
 
 @include wrap-with-where(
 	$selector: '*:has(> #{$component-selector})',
-	$enabled: $zero-specificity-for-compoenents
+	$enabled: $zero-specificity-for-components
 ) {
 	&:hover,
 	&:focus-visible,

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

@@ -10,7 +10,6 @@ $vv-badge: (
 	[border-color]: var(--badge-background-color),
 	border-style: solid,
 	border-radius: 0.5em,
-	line-height: 2em,
 	min-height: 2em,
 	min-width: 2em,
 	padding: 0 0.5em,
@@ -50,11 +49,19 @@ $vv-badge: (
 			[color]: var(--badge-background-color),
 		),
 		white: (
-			--badge-background-color: alpha-color('white', 80%),
+			--badge-background-color:
+				hsla(
+					var(--color-white-hue) var(--color-white-saturation)
+						var(--color-white-lightness) / 80%
+				),
 			--badge-color: var(--color-black),
 		),
 		black: (
-			--badge-background-color: alpha-color('black', 80%),
+			--badge-background-color:
+				hsla(
+					var(--color-black-hue) var(--color-black-saturation)
+						var(--color-black-lightness) / 80%
+				),
 			--badge-color: var(--color-white),
 		),
 		danger: (

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

@@ -1,16 +1,17 @@
 $vv-button: (
 	--button-border-width: var(--border-2),
+	--button-line-height: var(--leading-normal),
+	[border-width]: var(--button-border-width),
+	[line-height]: var(--button-line-height),
 	position: relative,
 	background: var(--color-brand),
 	border-radius: 0.5ch,
-	[border-width]: var(--button-border-width),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
 	font-family: var(--font-sans),
 	font-weight: var(--font-semibold),
 	gap: 1ch,
-	line-height: var(--leading-normal),
 	padding-block: 0.75ch,
 	padding-inline: 1.75ch,
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
@@ -51,6 +52,7 @@ $vv-button: (
 			flex-shrink: 0,
 			stroke-linecap: round,
 			stroke-linejoin: round,
+			[min-height]: calc(var(--button-line-height) * 1em),
 		),
 		label: (
 			white-space: nowrap,
@@ -99,7 +101,7 @@ $vv-button: (
 					background: var(--color-gray-lighten-3),
 				),
 				selected: (
-					background: var(--color-gray-lighten-3),
+					background: var(--color-gray-lighten-4),
 				),
 			),
 		),
@@ -216,14 +218,14 @@ $vv-button: (
 		),
 		action: (
 			--button-border-width: var(--border),
-			font-size: 0.875em,
+			--button-line-height: var(--leading-snug),
+			font-size: var(--text-14),
 			background: var(--color-surface-1),
 			color: var(--color-word-1),
 			border-color: var(--color-word-5),
 			font-weight: var(--font-normal),
 			padding-inline: 0.75ch,
 			padding-block: 0.5ch,
-			line-height: var(--leading-snug),
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -251,6 +253,7 @@ $vv-button: (
 		),
 		action-quiet: (
 			--button-border-width: var(--border),
+			--button-line-height: var(--leading-snug),
 			font-size: var(--text-14),
 			background: transparent,
 			color: var(--color-word-1),
@@ -258,7 +261,6 @@ $vv-button: (
 			font-weight: var(--font-normal),
 			padding-inline: 0.75ch,
 			padding-block: 0.5ch,
-			line-height: var(--leading-snug),
 			text-shadow: none,
 			state: (
 				focus-visible: (

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

@@ -67,6 +67,7 @@ $vv-input-text: (
 			[padding]: var(--input-padding-top) var(--input-padding-right)
 				var(--input-padding-bottom) var(--input-padding-left),
 			min-height: var(--input-min-height),
+			min-width: 0,
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
@@ -79,7 +80,11 @@ $vv-input-text: (
 					opacity: 0,
 				),
 				search-cancel-button: (
-					display: none,
+					position: absolute,
+					padding: var(--spacing-sm),
+					top: 0,
+					right: 0,
+					opacity: 0,
 				),
 				color-swatch: (
 					height: var(--spacing-20),
@@ -91,6 +96,12 @@ $vv-input-text: (
 				inner-spin-button: (
 					display: none,
 				),
+				datetime-edit-fields-wrapper: (
+					padding: 0,
+				),
+				datetime-edit-day-field: (
+					padding: 0,
+				),
 			),
 			state: (
 				disabled: (

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

@@ -13,7 +13,6 @@ $vv-nav: (
 			_alias: 'li',
 		),
 		heading-label: (
-			_alias: '[aria-hidden="true"]',
 			display: block,
 			font-weight: var(--font-semibold),
 			[padding]: var(--nav-item-padding),

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

@@ -4,6 +4,10 @@ $vv-table: (
 	border-collapse: collapse,
 	border-color: var(--color-surface-5),
 	element: (
+		caption: (
+			_alias: 'caption',
+			caption-side: bottom,
+		),
 		tr: (
 			_alias: 'tr',
 			border-width: 0 0 1px 0,
@@ -24,12 +28,14 @@ $vv-table: (
 			font-weight: semibold,
 			font-size: var(--text-sm),
 			color: var(--color-word-2),
+			vertical-align: middle,
 			[padding]: var(--table-cell-padding),
 		),
 		td: (
 			_alias: 'td',
 			border-style: solid,
 			font-size: var(--text-xs),
+			vertical-align: middle,
 			[padding]: var(--table-cell-padding),
 		),
 	),

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

@@ -93,7 +93,6 @@ $vv-toast: (
 			[animation]: pie-masks var(--toast-pie-animation-duration)
 				steps(1, end) reverse,
 			z-index: 1,
-			opactiy: 1,
 		),
 	),
 	modifier: (