@volverjs/style 0.0.0 → 0.1.2-beta-12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.0.0",
+  "version": "0.1.2-beta-12",
   "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",
@@ -9,117 +9,123 @@
     "node": ">= 12.x"
   },
   "packageManager": "pnpm@7.8.0",
-  "scripts": {
-    "dev": "vite --port 3000 --open",
-    "build": "vite build --base=./ && node ./scripts/build.js"
-  },
   "files": [
     "src/*",
     "dist/*"
   ],
   "exports": {
-    ".": "./dist/style",
-    "./components": "./dist/components",
-    "./scss/components": "./src/components/index",
-    "./components/vv-badge": "./dist/components/vv-badge",
-    "./scss/components/vv-badge": "./src/components/vv-badge",
-    "./components/vv-button-group": "./dist/components/vv-button-group",
-    "./scss/components/vv-button-group": "./src/components/vv-button-group",
-    "./components/vv-button": "./dist/components/vv-button",
-    "./scss/components/vv-button": "./src/components/vv-button",
-    "./components/vv-card": "./dist/components/vv-card",
-    "./scss/components/vv-card": "./src/components/vv-card",
-    "./components/vv-collapse": "./dist/components/vv-collapse",
-    "./scss/components/vv-collapse": "./src/components/vv-collapse",
-    "./components/vv-dialog": "./dist/components/vv-dialog",
-    "./scss/components/vv-dialog": "./src/components/vv-dialog",
-    "./components/vv-dropdown": "./dist/components/vv-dropdown",
-    "./scss/components/vv-dropdown": "./src/components/vv-dropdown",
-    "./components/vv-input-checkbox-group": "./dist/components/vv-input-checkbox-group",
-    "./scss/components/vv-input-checkbox-group": "./src/components/vv-input-checkbox-group",
-    "./components/vv-input-checkbox": "./dist/components/vv-input-checkbox",
-    "./scss/components/vv-input-checkbox": "./src/components/vv-input-checkbox",
-    "./components/vv-input-radio-group": "./dist/components/vv-input-radio-group",
-    "./scss/components/vv-input-radio-group": "./src/components/vv-input-radio-group",
-    "./components/vv-input-radio": "./dist/components/vv-input-radio",
-    "./scss/components/vv-input-radio": "./src/components/vv-input-radio",
-    "./components/vv-input-text": "./dist/components/vv-input-text",
-    "./scss/components/vv-input-text": "./src/components/vv-input-text",
-    "./components/vv-progress": "./dist/components/vv-progress",
-    "./scss/components/vv-progress": "./src/components/vv-progress",
-    "./components/vv-select": "./dist/components/vv-select",
-    "./scss/components/vv-select": "./src/components/vv-select",
-    "./components/vv-table": "./dist/components/vv-table",
-    "./scss/components/vv-table": "./src/components/vv-table",
-    "./components/vv-text": "./dist/components/vv-text",
-    "./scss/components/vv-text": "./src/components/vv-text",
-    "./components/vv-textarea": "./dist/components/vv-textarea",
-    "./scss/components/vv-textarea": "./src/components/vv-textarea",
-    "./export": "./dist/export",
-    "./scss/export": "./src/export",
-    "./preflight": "./dist/preflight",
-    "./scss/preflight": "./src/preflight",
-    "./props/animation": "./dist/props/animation",
-    "./scss/props/animation": "./src/props/animation",
-    "./props/background": "./dist/props/background",
-    "./scss/props/background": "./src/props/background",
-    "./props/borders": "./dist/props/borders",
-    "./scss/props/borders": "./src/props/borders",
-    "./props/colors": "./dist/props/colors",
-    "./scss/props/colors": "./src/props/colors",
-    "./props/effects": "./dist/props/effects",
-    "./scss/props/effects": "./src/props/effects",
-    "./props/filters": "./dist/props/filters",
-    "./scss/props/filters": "./src/props/filters",
-    "./props": "./dist/props",
-    "./scss/props": "./src/props/index",
-    "./props/input": "./dist/props/input",
-    "./scss/props/input": "./src/props/input",
-    "./props/layout": "./dist/props/layout",
-    "./scss/props/layout": "./src/props/layout",
-    "./props/media": "./dist/props/media",
-    "./scss/props/media": "./src/props/media",
-    "./props/sizing": "./dist/props/sizing",
-    "./scss/props/sizing": "./src/props/sizing",
-    "./props/spacing": "./dist/props/spacing",
-    "./scss/props/spacing": "./src/props/spacing",
-    "./props/typography": "./dist/props/typography",
-    "./scss/props/typography": "./src/props/typography",
-    "./reset": "./dist/reset",
-    "./scss/reset": "./src/reset",
-    "./scss": "./src/style",
-    "./themes/dark/components": "./dist/themes/dark/components",
-    "./scss/themes/dark/components": "./src/themes/dark/components/index",
-    "./themes/dark/props": "./dist/themes/dark/props",
-    "./scss/themes/dark/props": "./src/themes/dark/props/index",
-    "./themes/dark": "./dist/themes/dark/style",
-    "./scss/themes/dark": "./src/themes/dark/style",
-    "./utilities/animation": "./dist/utilities/animation",
-    "./scss/utilities/animation": "./src/utilities/animation",
-    "./utilities/backgrounds": "./dist/utilities/backgrounds",
-    "./scss/utilities/backgrounds": "./src/utilities/backgrounds",
-    "./utilities/borders": "./dist/utilities/borders",
-    "./scss/utilities/borders": "./src/utilities/borders",
-    "./utilities/colors": "./dist/utilities/colors",
-    "./scss/utilities/colors": "./src/utilities/colors",
-    "./utilities/effects": "./dist/utilities/effects",
-    "./scss/utilities/effects": "./src/utilities/effects",
-    "./utilities/filters": "./dist/utilities/filters",
-    "./scss/utilities/filters": "./src/utilities/filters",
-    "./utilities/flexbox": "./dist/utilities/flexbox",
-    "./scss/utilities/flexbox": "./src/utilities/flexbox",
-    "./utilities/grid": "./dist/utilities/grid",
-    "./scss/utilities/grid": "./src/utilities/grid",
-    "./utilities": "./dist/utilities",
-    "./scss/utilities": "./src/utilities/index",
-    "./utilities/layout": "./dist/utilities/layout",
-    "./scss/utilities/layout": "./src/utilities/layout",
-    "./utilities/sizing": "./dist/utilities/sizing",
-    "./scss/utilities/sizing": "./src/utilities/sizing",
-    "./utilities/spacing": "./dist/utilities/spacing",
-    "./scss/utilities/spacing": "./src/utilities/spacing",
-    "./utilities/typography": "./dist/utilities/typography",
-    "./scss/utilities/typography": "./src/utilities/typography"
+    ".": "./dist/volver.css",
+    "./scss/context": "./src/_context.scss",
+    "./scss/tools": "./src/tools/_index.scss",
+    "./scss/functions": "./src/tools/_functions.scss",
+    "./scss/mixins": "./src/tools/_mixins.scss",
+    "./scss/settings": "./src/settings/_index.scss",
+    "./scss/preflight": "./src/settings/_preflight.scss",
+    "./components": "./dist/components.css",
+    "./scss/components": "./src/components/index.scss",
+    "./components/vv-accordion": "./dist/components/vv-accordion.css",
+    "./scss/components/vv-accordion": "./src/components/vv-accordion.scss",
+    "./components/vv-alert": "./dist/components/vv-alert.css",
+    "./scss/components/vv-alert": "./src/components/vv-alert.scss",
+    "./components/vv-badge": "./dist/components/vv-badge.css",
+    "./scss/components/vv-badge": "./src/components/vv-badge.scss",
+    "./components/vv-breadcrumb": "./dist/components/vv-breadcrumb.css",
+    "./scss/components/vv-breadcrumb": "./src/components/vv-breadcrumb.scss",
+    "./components/vv-button-group": "./dist/components/vv-button-group.css",
+    "./scss/components/vv-button-group": "./src/components/vv-button-group.scss",
+    "./components/vv-button": "./dist/components/vv-button.css",
+    "./scss/components/vv-button": "./src/components/vv-button.scss",
+    "./components/vv-card": "./dist/components/vv-card.css",
+    "./scss/components/vv-card": "./src/components/vv-card.scss",
+    "./components/vv-dialog": "./dist/components/vv-dialog.css",
+    "./scss/components/vv-dialog": "./src/components/vv-dialog.scss",
+    "./components/vv-dropdown": "./dist/components/vv-dropdown.css",
+    "./scss/components/vv-dropdown": "./src/components/vv-dropdown.scss",
+    "./components/vv-input-checkbox-group": "./dist/components/vv-input-checkbox-group.css",
+    "./scss/components/vv-input-checkbox-group": "./src/components/vv-input-checkbox-group.scss",
+    "./components/vv-input-checkbox": "./dist/components/vv-input-checkbox.css",
+    "./scss/components/vv-input-checkbox": "./src/components/vv-input-checkbox.scss",
+    "./components/vv-input-radio-group": "./dist/components/vv-input-radio-group.css",
+    "./scss/components/vv-input-radio-group": "./src/components/vv-input-radio-group.scss",
+    "./components/vv-input-radio": "./dist/components/vv-input-radio.css",
+    "./scss/components/vv-input-radio": "./src/components/vv-input-radio.scss",
+    "./components/vv-input-text": "./dist/components/vv-input-text.css",
+    "./scss/components/vv-input-text": "./src/components/vv-input-text.scss",
+    "./components/vv-nav": "./dist/components/vv-nav.css",
+    "./scss/components/vv-nav": "./src/components/vv-nav.scss",
+    "./components/vv-progress": "./dist/components/vv-progress.css",
+    "./scss/components/vv-progress": "./src/components/vv-progress.scss",
+    "./components/vv-select": "./dist/components/vv-select.css",
+    "./scss/components/vv-select": "./src/components/vv-select.scss",
+    "./components/vv-table": "./dist/components/vv-table.css",
+    "./scss/components/vv-table": "./src/components/vv-table.scss",
+    "./components/vv-text": "./dist/components/vv-text.css",
+    "./scss/components/vv-text": "./src/components/vv-text.scss",
+    "./components/vv-textarea": "./dist/components/vv-textarea.css",
+    "./scss/components/vv-textarea": "./src/components/vv-textarea.scss",
+    "./export": "./dist/export.css",
+    "./scss/export": "./src/export.scss",
+    "./props/animation": "./dist/props/animation.css",
+    "./scss/props/animation": "./src/props/animation.scss",
+    "./props/background": "./dist/props/background.css",
+    "./scss/props/background": "./src/props/background.scss",
+    "./props/borders": "./dist/props/borders.css",
+    "./scss/props/borders": "./src/props/borders.scss",
+    "./props/colors": "./dist/props/colors.css",
+    "./scss/props/colors": "./src/props/colors.scss",
+    "./props/effects": "./dist/props/effects.css",
+    "./scss/props/effects": "./src/props/effects.scss",
+    "./props/filters": "./dist/props/filters.css",
+    "./scss/props/filters": "./src/props/filters.scss",
+    "./props": "./dist/props.css",
+    "./scss/props": "./src/props/index.scss",
+    "./props/input": "./dist/props/input.css",
+    "./scss/props/input": "./src/props/input.scss",
+    "./props/layout": "./dist/props/layout.css",
+    "./scss/props/layout": "./src/props/layout.scss",
+    "./props/media": "./dist/props/media.css",
+    "./scss/props/media": "./src/props/media.scss",
+    "./props/sizing": "./dist/props/sizing.css",
+    "./scss/props/sizing": "./src/props/sizing.scss",
+    "./props/spacing": "./dist/props/spacing.css",
+    "./scss/props/spacing": "./src/props/spacing.scss",
+    "./props/typography": "./dist/props/typography.css",
+    "./scss/props/typography": "./src/props/typography.scss",
+    "./reset": "./dist/reset.css",
+    "./scss/reset": "./src/reset.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",
+    "./scss/themes/dark/props": "./src/themes/dark/props/index.scss",
+    "./themes/dark": "./dist/themes/dark/volver.css",
+    "./scss/themes/dark": "./src/themes/dark/volver.scss",
+    "./utilities/animation": "./dist/utilities/animation.css",
+    "./scss/utilities/animation": "./src/utilities/animation.scss",
+    "./utilities/backgrounds": "./dist/utilities/backgrounds.css",
+    "./scss/utilities/backgrounds": "./src/utilities/backgrounds.scss",
+    "./utilities/borders": "./dist/utilities/borders.css",
+    "./scss/utilities/borders": "./src/utilities/borders.scss",
+    "./utilities/colors": "./dist/utilities/colors.css",
+    "./scss/utilities/colors": "./src/utilities/colors.scss",
+    "./utilities/effects": "./dist/utilities/effects.css",
+    "./scss/utilities/effects": "./src/utilities/effects.scss",
+    "./utilities/filters": "./dist/utilities/filters.css",
+    "./scss/utilities/filters": "./src/utilities/filters.scss",
+    "./utilities/flexbox": "./dist/utilities/flexbox.css",
+    "./scss/utilities/flexbox": "./src/utilities/flexbox.scss",
+    "./utilities/grid": "./dist/utilities/grid.css",
+    "./scss/utilities/grid": "./src/utilities/grid.scss",
+    "./utilities": "./dist/utilities.css",
+    "./scss/utilities": "./src/utilities/index.scss",
+    "./utilities/layout": "./dist/utilities/layout.css",
+    "./scss/utilities/layout": "./src/utilities/layout.scss",
+    "./utilities/sizing": "./dist/utilities/sizing.css",
+    "./scss/utilities/sizing": "./src/utilities/sizing.scss",
+    "./utilities/spacing": "./dist/utilities/spacing.css",
+    "./scss/utilities/spacing": "./src/utilities/spacing.scss",
+    "./utilities/typography": "./dist/utilities/typography.css",
+    "./scss/utilities/typography": "./src/utilities/typography.scss",
+    "./scss": "./src/volver.scss"
   },
   "repository": {
     "type": "git",
@@ -137,22 +143,47 @@
   },
   "homepage": "https://github.com/volverjs/style#readme",
   "devDependencies": {
-    "eslint": "^8.25.0",
+    "@iconify/vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vueuse/core": "^9.4.0",
+    "@vueuse/head": "^0.9.8",
+    "eslint": "^8.27.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.7.0",
     "glob": "^8.0.3",
+    "icss-utils": "^5.1.0",
+    "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.18",
+    "postcss-html": "^1.5.0",
     "postcss-preset-env": "^7.8.2",
-    "promise": "^8.2.0",
-    "sass": "^1.55.0",
-    "stylelint": "^14.13.0",
+    "prism-themes": "^1.9.0",
+    "prismjs": "1.29.0",
+    "promise": "^8.3.0",
+    "sass": "^1.56.0",
+    "stylelint": "^14.14.1",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard-scss": "^5.0.0",
-    "vite": "^3.1.8",
+    "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",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
-    "vite-plugin-stylelint": "^3.0.7"
+    "vite-plugin-markdown": "^2.1.0",
+    "vite-plugin-pages": "^0.27.1",
+    "vite-plugin-stylelint": "^3.0.8",
+    "vite-plugin-vue-layouts": "^0.7.0",
+    "vite-ssg": "^0.21.2",
+    "vite-ssg-sitemap": "^0.4.3",
+    "vue": "^3.2.41",
+    "vue-live": "^2.1.0",
+    "vue-router": "^4.1.6"
   },
-  "dependencies": {
-    "icss-utils": "^5.1.0"
+  "scripts": {
+    "dev": "vite --port 3000 --open",
+    "build": "node ./scripts/build.js",
+    "styleguide": "vite-ssg build"
   }
 }

package/src/_config.scss

@@ -12,21 +12,24 @@ $components-prefix: vv !default;
 
 // components names
 $components-names: (
+	vv-accordion: $components-prefix + -accordion,
+	vv-alert: $components-prefix + -alert,
 	vv-badge: $components-prefix + -badge,
-	vv-button: $components-prefix + -button,
+	vv-breadcrumb: $components-prefix + -breadcrumb,
 	vv-button-group: $components-prefix + -button-group,
-	vv-progress: $components-prefix + -progress,
-	vv-collapse: $components-prefix + -collapse,
+	vv-button: $components-prefix + -button,
+	vv-card: $components-prefix + -card,
 	vv-dialog: $components-prefix + -dialog,
 	vv-dropdown: $components-prefix + -dropdown,
-	vv-input-checkbox: $components-prefix + -input-checkbox,
 	vv-input-checkbox-group: $components-prefix + -input-checkbox-group,
-	vv-input-radio: $components-prefix + -input-radio,
+	vv-input-checkbox: $components-prefix + -input-checkbox,
 	vv-input-radio-group: $components-prefix + -input-radio-group,
+	vv-input-radio: $components-prefix + -input-radio,
 	vv-input-text: $components-prefix + -input-text,
-	vv-textarea: $components-prefix + -textarea,
+	vv-nav: $components-prefix + -nav,
+	vv-progress: $components-prefix + -progress,
 	vv-select: $components-prefix + -select,
 	vv-table: $components-prefix + -table,
-	vv-card: $components-prefix + -card,
 	vv-text: $components-prefix + -text,
+	vv-textarea: $components-prefix + -textarea,
 ) !default;

package/src/{preflight.scss → _preflight.scss}

@@ -169,6 +169,11 @@
 		&:where(:active) {
 			@extend %vv-button--active !optional;
 		}
+
+		&
+			+ :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+			@extend %ml-sm !optional;
+		}
 	}
 
 	// table
@@ -194,7 +199,16 @@
 	}
 
 	// checkbox
+	:where(fieldset:has(input[type='checkbox'])) {
+		@extend %vv-input-checkbox-group !optional;
+
+		:where(legend) {
+			@extend %vv-input-checkbox-group__legend !optional;
+		}
+	}
+
 	:where(label:has(input[type='checkbox'])) {
+		@extend %w-full !optional;
 		@extend %vv-input-checkbox !optional;
 
 		:where(input[type='checkbox']) {
@@ -216,13 +230,51 @@
 		}
 	}
 
+	// switch
+	:where(label:has(input[type='checkbox'][role='switch'])) {
+		@extend %vv-input-checkbox--switch !optional;
+
+		:where(input[type='checkbox'][role='switch']) {
+			@extend %vv-input-checkbox-modifier-switch__input !optional;
+
+			&:hover {
+				@extend %vv-input-checkbox-modifier-switch-element-input--hover
+						!optional;
+			}
+
+			&:active {
+				@extend %vv-input-checkbox-modifier-switch-element-input--active
+						!optional;
+			}
+
+			&:checked {
+				@extend %vv-input-checkbox-modifier-switch-element-input--checked
+						!optional;
+			}
+
+			&:focus-visible {
+				@extend %vv-input-checkbox-modifier-switch-element-input--focus-visible
+						!optional;
+			}
+		}
+	}
+
 	:where(label:has(input[type='checkbox']:disabled)) {
 		@extend %vv-input-checkbox--disabled !optional;
 	}
 
 	// radio
+	:where(fieldset:has(input[type='radio'])) {
+		@extend %vv-input-radio-group !optional;
+
+		:where(legend) {
+			@extend %vv-input-radio-group__legend !optional;
+		}
+	}
+
 	:where(label:has(input[type='radio'])) {
-		@extend %vv-input-checkbox !optional;
+		@extend %w-full !optional;
+		@extend %vv-input-radio !optional;
 
 		:where(input[type='radio']) {
 			@extend %vv-input-radio__input !optional;
@@ -242,7 +294,13 @@
 	}
 
 	// textarea
+	:where(label:has(+ textarea)) {
+		@extend %vv-textarea__label !optional;
+	}
+
 	:where(textarea) {
+		@extend %w-full !optional;
+		@extend %vv-textarea !optional;
 		@extend %vv-textarea__wrapper !optional;
 		@extend %vv-textarea__input !optional;
 
@@ -256,7 +314,13 @@
 	}
 
 	// select
+	:where(label:has(+ select)) {
+		@extend %vv-select__label !optional;
+	}
+
 	:where(select) {
+		@extend %w-full !optional;
+		@extend %vv-select !optional;
 		@extend %vv-select__wrapper !optional;
 		@extend %vv-select__input !optional;
 
@@ -266,7 +330,13 @@
 	}
 
 	// input text
+	:where(label:has(+ input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset']))) {
+		@extend %vv-input-text__label !optional;
+	}
+
 	:where(input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset'])) {
+		@extend %w-full !optional;
+		@extend %vv-input-text !optional;
 		@extend %vv-input-text__wrapper !optional;
 		@extend %vv-input-text__input !optional;
 

package/src/components/index.scss

@@ -1,17 +1,20 @@
+@import 'vv-accordion';
+@import 'vv-alert';
 @import 'vv-badge';
-@import 'vv-button';
+@import 'vv-breadcrumb';
 @import 'vv-button-group';
-@import 'vv-progress';
-@import 'vv-collapse';
+@import 'vv-button';
+@import 'vv-card';
 @import 'vv-dialog';
 @import 'vv-dropdown';
-@import 'vv-input-checkbox';
 @import 'vv-input-checkbox-group';
-@import 'vv-input-radio';
+@import 'vv-input-checkbox';
 @import 'vv-input-radio-group';
+@import 'vv-input-radio';
 @import 'vv-input-text';
-@import 'vv-textarea';
+@import 'vv-nav';
+@import 'vv-progress';
 @import 'vv-select';
 @import 'vv-table';
-@import 'vv-card';
 @import 'vv-text';
+@import 'vv-textarea';

package/src/components/vv-accordion.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-accordion);
+$component-map: $vv-accordion;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);

package/src/components/{vv-collapse.scss → vv-alert.scss}

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @import '../context';
 
-$component-name: map.get($components-names, vv-collapse);
-$component-map: $vv-collapse;
+$component-name: map.get($components-names, vv-alert);
+$component-map: $vv-alert;
 
 @include spread-map-into-bem(
 	$map: $component-map,

package/src/components/vv-breadcrumb.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-breadcrumb);
+$component-map: $vv-breadcrumb;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);

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

@@ -64,14 +64,12 @@ $button-component-selector: '.' + $button-component-name;
 					}
 
 					// clear margin for inner children
-					@if map.get($vv-button, 'border-width') {
+					@if map.get($vv-button, '--button-border-width') {
 						@include wrap-with-where(
 							$selector: '&:not(:last-child, :last-child)',
 							$enabled: $zero-specificity-for-compoenents
 						) {
-							margin-block: calc(
-								map.get($vv-button, 'border-width') * -1
-							);
+							margin-block: calc(var(--button-border-width) * -1);
 						}
 					}
 				}
@@ -99,14 +97,12 @@ $button-component-selector: '.' + $button-component-name;
 				}
 
 				// clear margin for inner children
-				@if map.get($vv-button, 'border-width') {
+				@if map.get($vv-button, '--button-border-width') {
 					@include wrap-with-where(
 						$selector: '&:not(:last-child, :last-child)',
 						$enabled: $zero-specificity-for-compoenents
 					) {
-						margin-inline: calc(
-							map.get($vv-button, 'border-width') * -1
-						);
+						margin-inline: calc(var(--button-border-width) * -1);
 					}
 				}
 			}

package/src/components/vv-nav.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-nav);
+$component-map: $vv-nav;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);

package/src/reset.scss

@@ -31,7 +31,7 @@
 
 /* removes spacing between cells in tables */
 :where(table) {
-	border-collapse: collapse;
+	border-accordion: accordion;
 }
 
 /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */

package/src/settings/_index.scss

@@ -15,20 +15,23 @@
 @import 'input';
 
 // components
+@import 'components/vv-accordion';
+@import 'components/vv-alert';
 @import 'components/vv-badge';
-@import 'components/vv-button';
+@import 'components/vv-breadcrumb';
 @import 'components/vv-button-group';
-@import 'components/vv-progress';
-@import 'components/vv-collapse';
+@import 'components/vv-button';
+@import 'components/vv-card';
 @import 'components/vv-dialog';
 @import 'components/vv-dropdown';
-@import 'components/vv-input-checkbox';
 @import 'components/vv-input-checkbox-group';
-@import 'components/vv-input-radio';
+@import 'components/vv-input-checkbox';
 @import 'components/vv-input-radio-group';
+@import 'components/vv-input-radio';
 @import 'components/vv-input-text';
-@import 'components/vv-textarea';
+@import 'components/vv-nav';
+@import 'components/vv-progress';
 @import 'components/vv-select';
 @import 'components/vv-table';
-@import 'components/vv-card';
 @import 'components/vv-text';
+@import 'components/vv-textarea';