@volverjs/style 0.1.24-beta.4 → 0.1.25

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.24-beta.4",
+  "version": "0.1.25",
   "engines": {
     "node": ">= 20.x"
   },
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@iconify/vue": "^5.0.1",
     "@nabla/vite-plugin-eslint": "^3.0.1",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vueuse/core": "^14.3.0",
     "@vueuse/head": "^2.0.0",
@@ -48,11 +48,11 @@
     "eslint-plugin-vue": "^10.9.2",
     "glob": "^13.0.6",
     "icss-utils": "^5.1.0",
-    "markdown-it": "^14.2.0",
+    "markdown-it": "^15.0.0",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-prism": "^3.0.1",
     "postcss": "^8.5.15",
-    "postcss-html": "^1.8.1",
+    "postcss-html": "^2.0.0",
     "postcss-preset-env": "^11.3.1",
     "prettier": "^3.8.4",
     "prism-themes": "^1.9.0",
@@ -65,7 +65,7 @@
     "sass-embedded": "^1.100.0",
     "stylelint": "^17.13.0",
     "stylelint-config-recommended-scss": "^17.0.1",
-    "stylelint-config-recommended-vue": "^1.6.1",
+    "stylelint-config-recommended-vue": "^2.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-vue-components": "^32.1.0",

package/src/settings/_layout.scss

@@ -113,11 +113,13 @@ $visibility: (
 ) !default;
 
 // z-index
+// Floating layers (dropdown, popover, tooltip) sit above the app chrome
+// (sticky, fixed): a menu anchored to a fixed header has to cover it.
 $z-index: (
 	1: 1,
-	dropdown: 1000,
 	sticky: 1010,
 	fixed: 1020,
+	dropdown: 1025,
 	modal-backdrop: 1030,
 	modal: 1040,
 	confirm-backdrop: 1050,

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

@@ -7,6 +7,20 @@ $vv-dropdown: (
 	flex-direction: column,
 	box-shadow: var(--shadow-lg),
 	width: max-content,
+	state: (
+		// Neutralize the user agent styles applied to [popover] elements, so a
+		// dropdown promoted to the top layer keeps the coordinates it gets from
+		// its positioning library instead of being centered in the viewport
+		popover: (
+			inset: auto,
+			margin: 0,
+			padding: 0,
+			border: 0,
+			overflow: visible,
+			background: transparent,
+			color: inherit,
+		),
+	),
 	element: (
 		list: (
 			_alias: 'div:is([role="menu"],[role="list-box"])',

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

@@ -19,7 +19,31 @@ $-valid-states: (
 	active, focus, hover, focus-within, target, visited, focus-visible,
 	disabled, checked, checked-within, multiple, selected, readonly,
 	empty, placeholder-shown, dirty, valid, invalid, indeterminate,
-	first-child, last-child, open, close, determinate, pressed, current
+	first-child, last-child, open, close, determinate, pressed, current,
+	popover, popover-open
+);
+
+// Selector suffixes appended to the block, and to its alias when there is one,
+// for the states that are not plain pseudo-classes. A state can need more than
+// one suffix: "disabled" also matches the aria attribute. States missing here
+// fall back to ":not([disabled]):<state>", while "current" adds no suffix at
+// all and keeps only the BEM selectors built by the caller.
+$-state-suffixes: (
+	checked: ':checked',
+	checked-within: ':has(input:checked)',
+	close: ':not([open])',
+	dirty: ':not(:has(*:placeholder-shown))',
+	disabled: ('[disabled]', '[aria-disabled="true"]'),
+	focus-visible: ':not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled="true"]):focus-visible',
+	multiple: '[multiple]',
+	open: '[open]',
+	// Element promoted to the top layer through the Popover API: "popover"
+	// matches it whether it is open or not, "popover-open" only when it is
+	popover: '[popover]',
+	popover-open: ':popover-open',
+	pressed: '[aria-pressed="true"]',
+	readonly: '[readonly]',
+	selected: '[aria-selected="true"]',
 );
 
 // ============================================
@@ -494,79 +518,17 @@ $-valid-states: (
 // Helper to add state-specific selectors
 // Returns the updated selectors list
 @function -add-state-selectors($state, $block-item, $modifier, $alias, $selectors) {
-	@if $state == 'checked-within' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:has(input:checked)');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:has(input:checked)');
-		}
-	} @else if $state == 'open' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}[open]');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}[open]');
-		}
-	} @else if $state == 'close' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:not([open])');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:not([open])');
-		}
-	} @else if $state == 'dirty' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:not(:has(*:placeholder-shown))');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:not(:has(*:placeholder-shown))');
-		}
-	} @else if $state == 'disabled' or $state == 'readonly' or $state == 'multiple' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}[#{$state}]');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}[#{$state}]');
-		}
-
-		@if $state == 'disabled' {
-			$selectors: list.join($selectors, '#{$modifier}#{$block-item}[aria-disabled="true"]');
-
-			@if $alias {
-				$selectors: list.join($selectors, '#{$modifier}#{$alias}[aria-disabled="true"]');
-			}
-		}
-	} @else if $state == 'focus-visible' {
-		$selectors: list.join(
-			$selectors,
-			'#{$modifier}#{$block-item}:not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled="true"]):#{$state}'
-		);
-
-		@if $alias {
-			$selectors: list.join(
-				$selectors,
-				'#{$modifier}#{$alias}:not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled="true"]):#{$state}'
-			);
-		}
-	} @else if $state == 'checked' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:#{$state}');
-
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:#{$state}');
-		}
-	} @else if $state == 'pressed' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}[aria-pressed="true"]');
+	@if $state == 'current' {
+		@return $selectors;
+	}
 
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}[aria-pressed="true"]');
-		}
-	} @else if $state == 'selected' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}[aria-selected="true"]');
+	$suffixes: map.get($-state-suffixes, $state) or ':not([disabled]):#{$state}';
 
-		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}[aria-selected="true"]');
-		}
-	} @else if $state != 'current' {
-		$selectors: list.join($selectors, '#{$modifier}#{$block-item}:not([disabled]):#{$state}');
+	@each $suffix in $suffixes {
+		$selectors: list.join($selectors, '#{$modifier}#{$block-item}#{$suffix}');
 
 		@if $alias {
-			$selectors: list.join($selectors, '#{$modifier}#{$alias}:not([disabled]):#{$state}');
+			$selectors: list.join($selectors, '#{$modifier}#{$alias}#{$suffix}');
 		}
 	}