@volverjs/style 0.1.24-beta.2 → 0.1.24-beta.4

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.24-beta.2",
+  "version": "0.1.24-beta.4",
   "engines": {
     "node": ">= 20.x"
   },
@@ -33,26 +33,28 @@
   "style": "dist/volver.css",
   "files": [
     "src/*",
-    "dist/*"
+    "dist/*",
+    "design-tokens.json"
   ],
   "devDependencies": {
-    "@iconify/vue": "^5.0.0",
-    "@nabla/vite-plugin-eslint": "^2.0.6",
-    "@types/node": "^25.0.3",
-    "@vitejs/plugin-vue": "^6.0.3",
-    "@vueuse/core": "^14.1.0",
+    "@iconify/vue": "^5.0.1",
+    "@nabla/vite-plugin-eslint": "^3.0.1",
+    "@types/node": "^25.9.3",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vueuse/core": "^14.3.0",
     "@vueuse/head": "^2.0.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-vue": "^10.6.2",
-    "glob": "^13.0.0",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-vue": "^10.9.2",
+    "glob": "^13.0.6",
     "icss-utils": "^5.1.0",
+    "markdown-it": "^14.2.0",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-prism": "^3.0.1",
-    "postcss": "^8.5.6",
-    "postcss-html": "^1.8.0",
-    "postcss-preset-env": "^10.6.0",
-    "prettier": "^3.7.4",
+    "postcss": "^8.5.15",
+    "postcss-html": "^1.8.1",
+    "postcss-preset-env": "^11.3.1",
+    "prettier": "^3.8.4",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "reduce-css-calc": "^2.1.8",
@@ -60,183 +62,184 @@
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-lint": "^10.0.1",
-    "sass-embedded": "^1.97.1",
-    "stylelint": "^16.26.1",
-    "stylelint-config-recommended-scss": "^16.0.2",
+    "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-standard-scss": "^16.0.0",
-    "unplugin-auto-import": "^20.3.0",
-    "unplugin-vue-components": "^30.0.0",
-    "vite": "^7.3.0",
-    "vite-plugin-css-export": "^3.0.3",
-    "vite-plugin-handlebars": "^2.0.0",
+    "stylelint-config-standard-scss": "^17.0.0",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vite": "^8.0.16",
+    "vite-plugin-css-export": "^3.1.0",
+    "vite-plugin-handlebars": "^2.0.3",
     "vite-plugin-markdown": "^2.2.0",
-    "vite-plugin-pages": "^0.33.2",
-    "vite-plugin-stylelint": "^6.0.2",
+    "vite-plugin-pages": "^0.33.3",
+    "vite-plugin-stylelint": "^6.1.0",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vite-ssg": "^28.2.2",
+    "vite-ssg": "^28.3.0",
     "vite-ssg-sitemap": "^0.10.0",
-    "vue": "^3.5.26",
+    "vue": "^3.5.38",
     "vue-live": "^2.5.4",
-    "vue-router": "^4.6.4"
+    "vue-router": "^5.1.0"
   },
   "exports": {
     ".": "./dist/volver.css",
+    "./base": "./dist/base.css",
+    "./components": "./dist/components.css",
+    "./components/vv-accordion": "./dist/components/vv-accordion.css",
+    "./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-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-button": "./dist/components/vv-button.css",
+    "./components/vv-button-group": "./dist/components/vv-button-group.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-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-input-file": "./dist/components/vv-input-file.css",
+    "./components/vv-input-text": "./dist/components/vv-input-text.css",
+    "./components/vv-nav": "./dist/components/vv-nav.css",
+    "./components/vv-progress": "./dist/components/vv-progress.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-skeleton": "./dist/components/vv-skeleton.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",
+    "./components/vv-textarea": "./dist/components/vv-textarea.css",
+    "./components/vv-tooltip": "./dist/components/vv-tooltip.css",
+    "./export": "./dist/export.css",
+    "./props": "./dist/props.css",
+    "./props/background": "./dist/props/background.css",
+    "./props/borders": "./dist/props/borders.css",
+    "./props/breakpoints": "./dist/props/breakpoints.css",
+    "./props/colors": "./dist/props/colors.css",
+    "./props/effects": "./dist/props/effects.css",
+    "./props/filters": "./dist/props/filters.css",
+    "./props/input": "./dist/props/input.css",
+    "./props/layout": "./dist/props/layout.css",
+    "./props/media": "./dist/props/media.css",
+    "./props/sizing": "./dist/props/sizing.css",
+    "./props/spacing": "./dist/props/spacing.css",
+    "./props/transitions": "./dist/props/transitions.css",
+    "./props/typography": "./dist/props/typography.css",
+    "./reset": "./dist/reset.css",
+    "./scss": "./src/volver.scss",
+    "./scss/base": "./src/base.scss",
+    "./scss/components": "./src/components/index.scss",
+    "./scss/components/vv-accordion": "./src/components/vv-accordion.scss",
+    "./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-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-button": "./src/components/vv-button.scss",
+    "./scss/components/vv-button-group": "./src/components/vv-button-group.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-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-input-file": "./src/components/vv-input-file.scss",
+    "./scss/components/vv-input-text": "./src/components/vv-input-text.scss",
+    "./scss/components/vv-nav": "./src/components/vv-nav.scss",
+    "./scss/components/vv-progress": "./src/components/vv-progress.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-skeleton": "./src/components/vv-skeleton.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",
+    "./scss/components/vv-textarea": "./src/components/vv-textarea.scss",
+    "./scss/components/vv-tooltip": "./src/components/vv-tooltip.scss",
     "./scss/context": "./src/_context.scss",
-    "./scss/tools": "./src/tools/_index.scss",
+    "./scss/export": "./src/export.scss",
     "./scss/functions": "./src/tools/_functions.scss",
     "./scss/mixins": "./src/tools/_mixins.scss",
-    "./scss/settings": "./src/settings/_index.scss",
     "./scss/preflight": "./src/_preflight.scss",
+    "./scss/props": "./src/props/index.scss",
+    "./scss/props/background": "./src/props/background.scss",
+    "./scss/props/borders": "./src/props/borders.scss",
+    "./scss/props/breakpoints": "./src/props/breakpoints.scss",
+    "./scss/props/colors": "./src/props/colors.scss",
+    "./scss/props/effects": "./src/props/effects.scss",
+    "./scss/props/filters": "./src/props/filters.scss",
+    "./scss/props/input": "./src/props/input.scss",
+    "./scss/props/layout": "./src/props/layout.scss",
+    "./scss/props/media": "./src/props/media.scss",
+    "./scss/props/sizing": "./src/props/sizing.scss",
+    "./scss/props/spacing": "./src/props/spacing.scss",
+    "./scss/props/transitions": "./src/props/transitions.scss",
+    "./scss/props/typography": "./src/props/typography.scss",
+    "./scss/reset": "./src/reset.scss",
+    "./scss/settings": "./src/settings/_index.scss",
+    "./scss/themes/dark": "./src/themes/dark/volver.scss",
+    "./scss/themes/dark/components": "./src/themes/dark/components/index.scss",
     "./scss/themes/dark/context": "./src/themes/dark/_context.scss",
+    "./scss/themes/dark/props": "./src/themes/dark/props/index.scss",
     "./scss/themes/dark/settings": "./src/themes/dark/settings/_index.scss",
-    "./scss": "./src/volver.scss",
-    "./reset": "./dist/reset.css",
-    "./scss/reset": "./src/reset.scss",
-    "./export": "./dist/export.css",
-    "./scss/export": "./src/export.scss",
-    "./base": "./dist/base.css",
-    "./scss/base": "./src/base.scss",
-    "./utilities/typography": "./dist/utilities/typography.css",
-    "./scss/utilities/typography": "./src/utilities/typography.scss",
-    "./utilities/transitions": "./dist/utilities/transitions.css",
-    "./scss/utilities/transitions": "./src/utilities/transitions.scss",
-    "./utilities/transforms": "./dist/utilities/transforms.css",
-    "./scss/utilities/transforms": "./src/utilities/transforms.scss",
-    "./utilities/tables": "./dist/utilities/tables.css",
-    "./scss/utilities/tables": "./src/utilities/tables.scss",
-    "./utilities/spacing": "./dist/utilities/spacing.css",
-    "./scss/utilities/spacing": "./src/utilities/spacing.scss",
-    "./utilities/sizing": "./dist/utilities/sizing.css",
-    "./scss/utilities/sizing": "./src/utilities/sizing.scss",
-    "./utilities/layout": "./dist/utilities/layout.css",
-    "./scss/utilities/layout": "./src/utilities/layout.scss",
-    "./utilities/interactivity": "./dist/utilities/interactivity.css",
-    "./scss/utilities/interactivity": "./src/utilities/interactivity.scss",
-    "./utilities": "./dist/utilities.css",
+    "./scss/tools": "./src/tools/_index.scss",
     "./scss/utilities": "./src/utilities/index.scss",
-    "./utilities/grid": "./dist/utilities/grid.css",
-    "./scss/utilities/grid": "./src/utilities/grid.scss",
-    "./utilities/flexbox": "./dist/utilities/flexbox.css",
-    "./scss/utilities/flexbox": "./src/utilities/flexbox.scss",
-    "./utilities/filters": "./dist/utilities/filters.css",
-    "./scss/utilities/filters": "./src/utilities/filters.scss",
-    "./utilities/effects": "./dist/utilities/effects.css",
-    "./scss/utilities/effects": "./src/utilities/effects.scss",
-    "./utilities/colors": "./dist/utilities/colors.css",
-    "./scss/utilities/colors": "./src/utilities/colors.scss",
-    "./utilities/borders": "./dist/utilities/borders.css",
-    "./scss/utilities/borders": "./src/utilities/borders.scss",
-    "./utilities/backgrounds": "./dist/utilities/backgrounds.css",
     "./scss/utilities/backgrounds": "./src/utilities/backgrounds.scss",
-    "./props/typography": "./dist/props/typography.css",
-    "./scss/props/typography": "./src/props/typography.scss",
-    "./props/transitions": "./dist/props/transitions.css",
-    "./scss/props/transitions": "./src/props/transitions.scss",
-    "./props/spacing": "./dist/props/spacing.css",
-    "./scss/props/spacing": "./src/props/spacing.scss",
-    "./props/sizing": "./dist/props/sizing.css",
-    "./scss/props/sizing": "./src/props/sizing.scss",
-    "./props/media": "./dist/props/media.css",
-    "./scss/props/media": "./src/props/media.scss",
-    "./props/layout": "./dist/props/layout.css",
-    "./scss/props/layout": "./src/props/layout.scss",
-    "./props/input": "./dist/props/input.css",
-    "./scss/props/input": "./src/props/input.scss",
-    "./props": "./dist/props.css",
-    "./scss/props": "./src/props/index.scss",
-    "./props/filters": "./dist/props/filters.css",
-    "./scss/props/filters": "./src/props/filters.scss",
-    "./props/effects": "./dist/props/effects.css",
-    "./scss/props/effects": "./src/props/effects.scss",
-    "./props/colors": "./dist/props/colors.css",
-    "./scss/props/colors": "./src/props/colors.scss",
-    "./props/breakpoints": "./dist/props/breakpoints.css",
-    "./scss/props/breakpoints": "./src/props/breakpoints.scss",
-    "./props/borders": "./dist/props/borders.css",
-    "./scss/props/borders": "./src/props/borders.scss",
-    "./props/background": "./dist/props/background.css",
-    "./scss/props/background": "./src/props/background.scss",
-    "./components/vv-tooltip": "./dist/components/vv-tooltip.css",
-    "./scss/components/vv-tooltip": "./src/components/vv-tooltip.scss",
-    "./components/vv-textarea": "./dist/components/vv-textarea.css",
-    "./scss/components/vv-textarea": "./src/components/vv-textarea.scss",
-    "./components/vv-text": "./dist/components/vv-text.css",
-    "./scss/components/vv-text": "./src/components/vv-text.scss",
-    "./components/vv-table": "./dist/components/vv-table.css",
-    "./scss/components/vv-table": "./src/components/vv-table.scss",
-    "./components/vv-tab": "./dist/components/vv-tab.css",
-    "./scss/components/vv-tab": "./src/components/vv-tab.scss",
-    "./components/vv-skeleton": "./dist/components/vv-skeleton.css",
-    "./scss/components/vv-skeleton": "./src/components/vv-skeleton.scss",
-    "./components/vv-select": "./dist/components/vv-select.css",
-    "./scss/components/vv-select": "./src/components/vv-select.scss",
-    "./components/vv-radio": "./dist/components/vv-radio.css",
-    "./scss/components/vv-radio": "./src/components/vv-radio.scss",
-    "./components/vv-radio-group": "./dist/components/vv-radio-group.css",
-    "./scss/components/vv-radio-group": "./src/components/vv-radio-group.scss",
-    "./components/vv-progress": "./dist/components/vv-progress.css",
-    "./scss/components/vv-progress": "./src/components/vv-progress.scss",
-    "./components/vv-nav": "./dist/components/vv-nav.css",
-    "./scss/components/vv-nav": "./src/components/vv-nav.scss",
-    "./components/vv-input-text": "./dist/components/vv-input-text.css",
-    "./scss/components/vv-input-text": "./src/components/vv-input-text.scss",
-    "./components/vv-input-file": "./dist/components/vv-input-file.css",
-    "./scss/components/vv-input-file": "./src/components/vv-input-file.scss",
-    "./components/vv-dropdown": "./dist/components/vv-dropdown.css",
-    "./scss/components/vv-dropdown": "./src/components/vv-dropdown.scss",
-    "./components/vv-dropdown-option": "./dist/components/vv-dropdown-option.css",
-    "./scss/components/vv-dropdown-option": "./src/components/vv-dropdown-option.scss",
-    "./components/vv-dropdown-optgroup": "./dist/components/vv-dropdown-optgroup.css",
-    "./scss/components/vv-dropdown-optgroup": "./src/components/vv-dropdown-optgroup.scss",
-    "./components/vv-dropdown-action": "./dist/components/vv-dropdown-action.css",
-    "./scss/components/vv-dropdown-action": "./src/components/vv-dropdown-action.scss",
-    "./components/vv-dialog": "./dist/components/vv-dialog.css",
-    "./scss/components/vv-dialog": "./src/components/vv-dialog.scss",
-    "./components/vv-checkbox": "./dist/components/vv-checkbox.css",
-    "./scss/components/vv-checkbox": "./src/components/vv-checkbox.scss",
-    "./components/vv-checkbox-group": "./dist/components/vv-checkbox-group.css",
-    "./scss/components/vv-checkbox-group": "./src/components/vv-checkbox-group.scss",
-    "./components/vv-card": "./dist/components/vv-card.css",
-    "./scss/components/vv-card": "./src/components/vv-card.scss",
-    "./components/vv-button": "./dist/components/vv-button.css",
-    "./scss/components/vv-button": "./src/components/vv-button.scss",
-    "./components/vv-button-group": "./dist/components/vv-button-group.css",
-    "./scss/components/vv-button-group": "./src/components/vv-button-group.scss",
-    "./components/vv-breadcrumb": "./dist/components/vv-breadcrumb.css",
-    "./scss/components/vv-breadcrumb": "./src/components/vv-breadcrumb.scss",
-    "./components/vv-badge": "./dist/components/vv-badge.css",
-    "./scss/components/vv-badge": "./src/components/vv-badge.scss",
-    "./components/vv-avatar": "./dist/components/vv-avatar.css",
-    "./scss/components/vv-avatar": "./src/components/vv-avatar.scss",
-    "./components/vv-avatar-group": "./dist/components/vv-avatar-group.css",
-    "./scss/components/vv-avatar-group": "./src/components/vv-avatar-group.scss",
-    "./components/vv-alert": "./dist/components/vv-alert.css",
-    "./scss/components/vv-alert": "./src/components/vv-alert.scss",
-    "./components/vv-alert-group": "./dist/components/vv-alert-group.css",
-    "./scss/components/vv-alert-group": "./src/components/vv-alert-group.scss",
-    "./components/vv-accordion": "./dist/components/vv-accordion.css",
-    "./scss/components/vv-accordion": "./src/components/vv-accordion.scss",
-    "./components/vv-accordion-group": "./dist/components/vv-accordion-group.css",
-    "./scss/components/vv-accordion-group": "./src/components/vv-accordion-group.scss",
-    "./components": "./dist/components.css",
-    "./scss/components": "./src/components/index.scss",
+    "./scss/utilities/borders": "./src/utilities/borders.scss",
+    "./scss/utilities/colors": "./src/utilities/colors.scss",
+    "./scss/utilities/effects": "./src/utilities/effects.scss",
+    "./scss/utilities/filters": "./src/utilities/filters.scss",
+    "./scss/utilities/flexbox": "./src/utilities/flexbox.scss",
+    "./scss/utilities/grid": "./src/utilities/grid.scss",
+    "./scss/utilities/interactivity": "./src/utilities/interactivity.scss",
+    "./scss/utilities/layout": "./src/utilities/layout.scss",
+    "./scss/utilities/sizing": "./src/utilities/sizing.scss",
+    "./scss/utilities/spacing": "./src/utilities/spacing.scss",
+    "./scss/utilities/tables": "./src/utilities/tables.scss",
+    "./scss/utilities/transforms": "./src/utilities/transforms.scss",
+    "./scss/utilities/transitions": "./src/utilities/transitions.scss",
+    "./scss/utilities/typography": "./src/utilities/typography.scss",
     "./themes/dark": "./dist/themes/dark/volver.css",
-    "./scss/themes/dark": "./src/themes/dark/volver.scss",
-    "./themes/dark/props": "./dist/themes/dark/props.css",
-    "./scss/themes/dark/props": "./src/themes/dark/props/index.scss",
     "./themes/dark/components": "./dist/themes/dark/components.css",
-    "./scss/themes/dark/components": "./src/themes/dark/components/index.scss"
+    "./themes/dark/props": "./dist/themes/dark/props.css",
+    "./utilities": "./dist/utilities.css",
+    "./utilities/backgrounds": "./dist/utilities/backgrounds.css",
+    "./utilities/borders": "./dist/utilities/borders.css",
+    "./utilities/colors": "./dist/utilities/colors.css",
+    "./utilities/effects": "./dist/utilities/effects.css",
+    "./utilities/filters": "./dist/utilities/filters.css",
+    "./utilities/flexbox": "./dist/utilities/flexbox.css",
+    "./utilities/grid": "./dist/utilities/grid.css",
+    "./utilities/interactivity": "./dist/utilities/interactivity.css",
+    "./utilities/layout": "./dist/utilities/layout.css",
+    "./utilities/sizing": "./dist/utilities/sizing.css",
+    "./utilities/spacing": "./dist/utilities/spacing.css",
+    "./utilities/tables": "./dist/utilities/tables.css",
+    "./utilities/transforms": "./dist/utilities/transforms.css",
+    "./utilities/transitions": "./dist/utilities/transitions.css",
+    "./utilities/typography": "./dist/utilities/typography.css"
   },
   "scripts": {
     "dev": "vite --port 3000 --open",
-    "build": "node ./scripts/build.js",
+    "build": "node ./scripts/build.js && node ./scripts/generateDesignTokens.js",
     "design-tokens": "node ./scripts/generateDesignTokens.js",
     "styleguide": "vite-ssg build",
     "preview": "vite preview",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "stylelint": "stylelint \"src/**/*.scss\"",
-    "stylelint:fix": "stylelint --fix \"src/**/*.scss\""
+    "stylelint:fix": "stylelint --fix \"src/**/*.scss\"",
+    "stylelint:dist": "stylelint \"dist/**/*.css\" --config stylelint.dist.config.cjs"
   }
 }

package/src/components/vv-radio.scss

@@ -6,19 +6,18 @@ $component-name: map.get($components-names, vv-radio);
 $component-map: $vv-radio;
 $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
-);
-
-@include wrap-with-where(
-	$selector: '#{$component-selector}:has(> input[type="radio"]:disabled)',
-	$enabled: $zero-specificity-for-components
-) {
-	@extend %#{$component-name}--disabled !optional;
-}
+	@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
+	);
 
+	@include wrap-with-where(
+		$selector: '#{$component-selector}:has(> input[type="radio"]:disabled)',
+		$enabled: $zero-specificity-for-components
+	) {
+		@extend %#{$component-name}--disabled !optional;
+	}
 }

package/src/export.scss

@@ -13,7 +13,7 @@
 	@each $key, $value in $colors {
 		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if meta.type-of($value) not 'map' {
+				@if meta.type-of($subValue) != 'map' {
 					@if not
 						string.index($subKey, 'hue') and not
 						string.index($subKey, 'saturation') and not
@@ -37,7 +37,7 @@
 	@each $key, $value in $dark-colors {
 		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if meta.type-of($value) not 'map' {
+				@if meta.type-of($subValue) != 'map' {
 					@if not
 						string.index($subKey, 'hue') and not
 						string.index($subKey, 'saturation') and not
@@ -237,7 +237,7 @@
 	@each $size, $value in $spacing-dynamic {
 		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if meta.type-of($value) not 'map' {
+				@if meta.type-of($subValue) != 'map' {
 					spacing-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}
@@ -252,7 +252,7 @@
 	@each $size, $value in $font-size-dynamic {
 		@if meta.type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
-				@if meta.type-of($value) not 'map' {
+				@if meta.type-of($subValue) != 'map' {
 					font-size-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}

package/src/props/filters.scss

@@ -4,6 +4,7 @@
 	:where(:host, :root, .theme) {
 		@include spread-map-into-props($blur, $prefix: blur);
 		@include spread-map-into-props($brightness, $prefix: brightness);
+		@include spread-map-into-props($contrast, $prefix: contrast);
 		@include spread-map-into-props($saturation, $prefix: saturate);
 	}
 }

package/src/settings/_filters.scss

@@ -36,8 +36,8 @@ $contrast: (
 	100: contrast(1),
 	125: contrast(1.25),
 	150: contrast(1.5),
-	200: brightness(2),
-	300: brightness(3),
+	200: contrast(2),
+	300: contrast(3),
 ) !default;
 
 // saturation

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

@@ -13,7 +13,7 @@ $vv-accordion: (
 					background-color: var(--color-surface-2),
 					pseudo: (
 						before: (
-							rotate: 0,
+							rotate: 0deg,
 						),
 					),
 				),
@@ -105,7 +105,7 @@ $vv-accordion: (
 						before: (
 							left: auto,
 							[right]: var(--accordion-padding-right),
-							rotate: 0,
+							rotate: 0deg,
 						),
 					),
 				),

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

@@ -16,7 +16,7 @@ $vv-avatar: (
 	object-fit: contain,
 	flex-shrink: 0,
 	state: (
-		focus: (
+		focus-visible: (
 			outline: var(--spacing-px) solid var(--color-brand),
 			outline-offset: var(--spacing-0),
 		),

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

@@ -1,5 +1,6 @@
 $vv-breadcrumb: (
 	position: relative,
+	min-width: 0,
 	pseudo: (
 		after: (
 			position: absolute,
@@ -23,7 +24,7 @@ $vv-breadcrumb: (
 			scroll-snap-type: x mandatory,
 			scrollbar-width: none,
 			display: flex,
-			flex-wrap: no-wrap,
+			flex-wrap: nowrap,
 			list-style: none,
 			padding: 0,
 			background: var(--color-surface),

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

@@ -41,7 +41,7 @@ $vv-dialog: (
 		header: (
 			_alias: '> article > header',
 			display: flex,
-			flex-wrap: no-wrap,
+			flex-wrap: nowrap,
 			justify-content: space-between,
 			align-items: center,
 			font-size: var(--text-md),

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

@@ -6,7 +6,7 @@ $vv-dropdown: (
 	display: flex,
 	flex-direction: column,
 	box-shadow: var(--shadow-lg),
-	width: 'max-content',
+	width: max-content,
 	element: (
 		list: (
 			_alias: 'div:is([role="menu"],[role="list-box"])',

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

@@ -13,6 +13,11 @@ $vv-radio: (
 		disabled: (
 			opacity: var(--opacity-30),
 			cursor: not-allowed,
+			element: (
+				input: (
+					cursor: not-allowed,
+				),
+			),
 		),
 	),
 	modifier: (

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

@@ -1,6 +1,7 @@
 $vv-tab: (
 	display: flex,
 	flex-direction: column,
+	min-width: 0,
 	element: (
 		panel: (
 			display: none,

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

@@ -346,6 +346,60 @@
 						$ignore: (modifier, element, state, breakpoint)
 					);
 				}
+			} @else if $state-name == 'selected' {
+				@include wrap-with-where($selector: '#{$base}[aria-selected="true"]', $enabled: $zero-specificity) {
+					@include spread-map-into-attrs(
+						$map: $state-value,
+						$prefix: $prefix,
+						$use-custom-props: false,
+						$ignore: (modifier, element, state, breakpoint)
+					);
+				}
+			} @else if $state-name == 'pressed' {
+				@include wrap-with-where($selector: '#{$base}[aria-pressed="true"]', $enabled: $zero-specificity) {
+					@include spread-map-into-attrs(
+						$map: $state-value,
+						$prefix: $prefix,
+						$use-custom-props: false,
+						$ignore: (modifier, element, state, breakpoint)
+					);
+				}
+			} @else if $state-name == 'checked-within' {
+				@include wrap-with-where($selector: '#{$base}:has(input:checked)', $enabled: $zero-specificity) {
+					@include spread-map-into-attrs(
+						$map: $state-value,
+						$prefix: $prefix,
+						$use-custom-props: false,
+						$ignore: (modifier, element, state, breakpoint)
+					);
+				}
+			} @else if $state-name == 'open' {
+				@include wrap-with-where($selector: '#{$base}[open]', $enabled: $zero-specificity) {
+					@include spread-map-into-attrs(
+						$map: $state-value,
+						$prefix: $prefix,
+						$use-custom-props: false,
+						$ignore: (modifier, element, state, breakpoint)
+					);
+				}
+			} @else if $state-name == 'close' {
+				@include wrap-with-where($selector: '#{$base}:not([open])', $enabled: $zero-specificity) {
+					@include spread-map-into-attrs(
+						$map: $state-value,
+						$prefix: $prefix,
+						$use-custom-props: false,
+						$ignore: (modifier, element, state, breakpoint)
+					);
+				}
+			} @else if $state-name == 'dirty' {
+				@include wrap-with-where($selector: '#{$base}:not(:has(*:placeholder-shown))', $enabled: $zero-specificity) {
+					@include spread-map-into-attrs(
+						$map: $state-value,
+						$prefix: $prefix,
+						$use-custom-props: false,
+						$ignore: (modifier, element, state, breakpoint)
+					);
+				}
 			} @else if $state-name != 'current' {
 				@include wrap-with-where($selector: '#{$base}:not([disabled]):#{$state-name}', $enabled: $zero-specificity) {
 					@include spread-map-into-attrs(