@volverjs/style 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 volverjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,139 @@
+<div align="center">
+  
+[![volverjs](src/assets/volverjs.svg)](https://github.com/volverjs)
+
+## @volverjs/style
+
+`backgrounds` `border` `colors` `aspect ratios` `typography`  
+`easings` `animations` `sizes` `borders` `z-indexes` `media-queries`
+`layout` `spacing` `flexbox` `grid` `custom properties` `scss`
+
+<br>
+
+#### proudly powered by
+
+<br>
+
+[![24/Consulting](src/assets/24consulting.svg)](https://24consulting.it)
+
+<br>
+
+</div>
+
+## Install
+
+```
+$ npm i -s @volverjs/style
+```
+
+## Usage
+
+```scss
+/* css */
+@import '@volverjs/style';
+
+/* scss */
+@import '@volverjs/style/scss';
+```
+
+or cherry pick what you want
+
+```scss
+/* css */
+@import '@volverjs/style/reset';
+@import '@volverjs/style/props/layout';
+@import '@volverjs/style/utilities/layout';
+@import '@volverjs/style/components/vv-button';
+
+/* scss */
+@import '@volverjs/style/scss/reset';
+@import '@volverjs/style/scss/props/layout';
+@import '@volverjs/style/scss/utilities/layout';
+@import '@volverjs/style/scss/components/vv-button';
+```
+
+## Principles
+
+### 👌 Zero Specificity
+
+Everything is defined with _:where()_ so you can override all definitions easily.
+
+### 🎨 Custom properties
+
+All attributes have a [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) (CSS variables) for easy theming.
+
+### 😱 Utility-first + BEM
+
+You can style utility-first (with [tailwindcss](https://tailwindcss.com) syntax) or use components (_vv-\*_ for ex. _vv-button_) written with [BEM](http://getbem.com/introduction/).
+
+## Basic personalization
+
+### Custom props
+
+```css
+@import '@volverjs/style';
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans');
+
+:root {
+	/* custom color brand */
+	--color-brand-hue: 149deg;
+	--color-brand-saturation: 56%;
+	--color-brand-lightness: 53%;
+
+	/* custom font sans */
+	--font-sans: 'Open Sans', sans-serif;
+}
+```
+
+### SCSS
+
+```scss
+/* custom color brand */
+$color-brand: #45cb85;
+
+/* custom font sans */
+$font-sans: 'Open Sans', sans-serif;
+
+@import '@volverjs/style';
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans');
+```
+
+## Deep override
+
+All components are written through SCSS maps.
+Root attributes style the component, submaps _state_, _element_, and _modifier_ generates BEM selectors.
+
+```scss
+@use 'sass:map';
+// import volverjs default settings, functions and mixins
+@import '@volverjs/style/scss/context';
+
+// override vv-button map
+$vv-button: map.deep-merge(
+	$vv-button,
+	(
+		// change default button background
+		background: #ddd,
+		state: (
+			hover: (
+				// change default button background on hover
+				background: #aaa,
+			),
+		),
+		modifier: (
+			// add a custom modifier
+			my-error:
+				(
+					background: red,
+				)
+		)
+	)
+);
+
+// import volverjs style
+@import '@volverjs/style/scss';
+```
+
+```html
+<button type="button" class="vv-button vv-button--my-error">Error</button>
+```

package/package.json

@@ -0,0 +1,158 @@
+{
+  "name": "@volverjs/style",
+  "version": "0.0.0",
+  "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",
+  "type": "module",
+  "engines": {
+    "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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/volverjs/style"
+  },
+  "keywords": [
+    "css",
+    "design-system",
+    "volverjs"
+  ],
+  "author": "24/Consulting",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/volverjs/style/issues"
+  },
+  "homepage": "https://github.com/volverjs/style#readme",
+  "devDependencies": {
+    "eslint": "^8.25.0",
+    "eslint-config-prettier": "^8.5.0",
+    "glob": "^8.0.3",
+    "postcss": "^8.4.18",
+    "postcss-preset-env": "^7.8.2",
+    "promise": "^8.2.0",
+    "sass": "^1.55.0",
+    "stylelint": "^14.13.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-standard-scss": "^5.0.0",
+    "vite": "^3.1.8",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-handlebars": "^1.6.0",
+    "vite-plugin-stylelint": "^3.0.7"
+  },
+  "dependencies": {
+    "icss-utils": "^5.1.0"
+  }
+}

package/src/_config.scss

@@ -0,0 +1,32 @@
+// 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 utilities
+$zero-specificity-for-utilities: true !default;
+
+// components prefix
+$components-prefix: vv !default;
+
+// components names
+$components-names: (
+	vv-badge: $components-prefix + -badge,
+	vv-button: $components-prefix + -button,
+	vv-button-group: $components-prefix + -button-group,
+	vv-progress: $components-prefix + -progress,
+	vv-collapse: $components-prefix + -collapse,
+	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-radio-group: $components-prefix + -input-radio-group,
+	vv-input-text: $components-prefix + -input-text,
+	vv-textarea: $components-prefix + -textarea,
+	vv-select: $components-prefix + -select,
+	vv-table: $components-prefix + -table,
+	vv-card: $components-prefix + -card,
+	vv-text: $components-prefix + -text,
+) !default;

package/src/_context.scss

@@ -0,0 +1,11 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+// configuration
+@import 'config';
+
+// tools (mixins, functions, recipes)
+@import 'tools';
+
+// settings
+@import 'settings';

package/src/assets/24consulting.svg

@@ -0,0 +1,63 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1088 337" width="250" height="77">
+    <style>
+        .fill {
+            fill: #2c2e35;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .fill {
+                fill: #fff;
+            }
+        }
+    </style>
+    <path class="fill" d="m713 236.1l-15-36.7h5l12.7 32.3 12.7-32.3h4.6l-14.9 36.7z" />
+    <path fill-rule="evenodd" class="fill"
+        d="m755.5 236.8q-4.1 0-7.4-1.5-3.4-1.5-5.9-4.1-2.5-2.7-3.8-6.1-1.4-3.5-1.4-7.5 0-3.8 1.4-7.3 1.3-3.4 3.8-6 2.5-2.5 5.8-4 3.4-1.6 7.4-1.6 4 0 7.4 1.6 3.3 1.5 5.7 4.1 2.4 2.6 3.8 6 1.3 3.4 1.3 7.2 0 0.5 0 1.1-0.1 0.6-0.1 0.8h-31.4q0.2 2.9 1.3 5.4 1.2 2.6 3 4.4 1.8 1.8 4.2 2.8 2.3 1.1 5 1.1 1.8 0 3.6-0.5 1.8-0.5 3.2-1.4 1.5-0.8 2.7-2.1 1.2-1.2 1.8-2.7l4.2 1.2q-0.9 2-2.4 3.7-1.6 1.6-3.6 2.9-2.1 1.2-4.6 1.9-2.4 0.6-5 0.6zm13.5-21q-0.2-3-1.4-5.4-1.1-2.4-2.9-4.2-1.8-1.7-4.2-2.7-2.4-1-5.1-1-2.7 0-5.1 1-2.4 1-4.2 2.7-1.8 1.8-2.9 4.2-1.1 2.5-1.3 5.4z" />
+    <path class="fill"
+        d="m811.7 236.1h-4.8v-20.5q0-6.6-1.9-9.5-1.9-3-5.9-3-2.2 0-4.3 0.8-2.1 0.8-3.9 2.2-1.9 1.4-3.2 3.3-1.4 2-2.1 4.2v22.5h-4.8v-36.7h4.4v8.3q1.1-2 2.7-3.6 1.7-1.7 3.8-2.9 2-1.2 4.3-1.8 2.3-0.7 4.8-0.7 3.1 0 5.1 1.2 2.1 1.1 3.4 3.1 1.3 2.1 1.8 5.1 0.6 2.9 0.6 6.5z" />
+    <path class="fill"
+        d="m839.1 234.4q-0.4 0.2-1.2 0.5-0.8 0.4-1.9 0.7-1 0.4-2.4 0.7-1.3 0.2-2.8 0.2-1.5 0.1-3-0.4-1.4-0.4-2.4-1.3-1.1-0.9-1.7-2.2-0.7-1.3-0.7-3.1v-26.3h-5v-3.8h5v-12.4h4.8v12.4h8.5v3.8h-8.5v25q0.2 2 1.5 3 1.2 0.9 3 0.9 2 0 3.6-0.7 1.5-0.6 2-0.9z" />
+    <path class="fill" d="m844.8 191.7v-7.1h4.8v7.1zm0 44.4v-36.7h4.8v36.7z" />
+    <path fill-rule="evenodd" class="fill"
+        d="m874.1 236.8q-3.7 0-6.8-1.6-3.1-1.5-5.2-4.2-2.2-2.6-3.4-6.1-1.2-3.4-1.2-7.1 0-3.8 1.3-7.3 1.3-3.4 3.7-6 2.4-2.7 5.6-4.2 3.2-1.6 6.9-1.6 4.3 0 7.9 2.3 3.6 2.2 5.8 5.6v-7.2h4.3v45.3q0 2 1.6 2.1v4.1q-0.9 0.3-2 0.3-1.8 0-3.1-1.3-1.3-1.3-1.3-3.1v-18.3q-2.7 4.1-6.3 6.2-3.5 2.1-7.8 2.1zm1.5-4.2q2.2 0 4.1-0.7 1.8-0.7 3.4-1.9 1.6-1.1 2.8-2.7 1.3-1.6 2.3-3.4v-11.3q-0.3-1.9-1.5-3.7-1.2-1.7-3-3-1.7-1.4-3.7-2.2-2.1-0.7-4-0.7-3 0-5.5 1.2-2.5 1.3-4.3 3.4-1.8 2.1-2.8 4.8-1 2.6-1 5.5 0 2.9 1 5.6 1 2.7 2.7 4.7 1.7 2 4.2 3.2 2.4 1.2 5.3 1.2z" />
+    <path class="fill"
+        d="m914.6 236.8q-5.8 0-8.7-4-3-3.9-3-11.8v-21.6h4.8v20.7q0 12.5 8.5 12.5 2.1 0 4.2-0.7 2-0.7 3.8-2.1 1.7-1.3 3.1-3.1 1.3-1.9 2.2-4.2v-23.1h4.8v30.5q0 2 1.8 2v4.2q-1.5 0.2-2 0.2-1.6 0-2.8-0.9-1.2-1-1.2-2.5v-5.1q-2.4 4.3-6.5 6.7-4.1 2.3-9 2.3z" />
+    <path fill-rule="evenodd" class="fill"
+        d="m954.9 236.8q-2.8 0-5.2-0.8-2.3-0.9-3.9-2.5-1.7-1.5-2.6-3.6-0.9-2-0.9-4.3 0-2.5 1.1-4.6 1.1-2.1 3.2-3.6 2-1.4 4.9-2.3 2.8-0.8 6.3-0.8 2.7 0 5.6 0.5 2.9 0.5 5.2 1.4v-3.3q0-4.8-2.8-7.7-2.8-2.9-7.5-2.9-3 0-5.9 1.2-2.9 1.1-6 3.2l-1.7-3.2q3.6-2.4 7-3.6 3.4-1.2 7.1-1.2 6.7 0 10.6 3.9 4 3.9 4 10.7v16.6q0 2 1.7 2v4.2q-0.6 0.1-1.1 0.1-0.5 0.1-0.8 0.1-1.5 0-2.6-0.9-1.2-0.8-1.3-2.5l-0.2-2.9q-2.4 3.2-6.3 5-3.9 1.8-7.9 1.8zm1.2-3.6q3.2 0 6.3-1.4 3.1-1.4 5-3.8 0.5-0.6 0.8-1.4 0.4-0.7 0.4-1.3v-6q-2.4-1-5-1.4-2.6-0.5-5.1-0.5-5.2 0-8.4 2-3.2 2.1-3.2 5.8 0 1.5 0.6 2.9 0.5 1.4 1.7 2.5 1.2 1.2 2.9 1.9 1.7 0.7 4 0.7z" />
+    <path class="fill"
+        d="m1001.1 234.4q-0.4 0.2-1.2 0.5-0.9 0.4-1.9 0.7-1.1 0.4-2.4 0.7-1.3 0.2-2.8 0.2-1.6 0.1-3-0.4-1.4-0.4-2.5-1.3-1-0.9-1.7-2.2-0.6-1.3-0.6-3.1v-26.3h-5.1v-3.8h5.1v-12.4h4.8v12.4h8.5v3.8h-8.5v25q0.1 2 1.4 3 1.3 0.9 3.1 0.9 2 0 3.5-0.7 1.6-0.6 2-0.9z" />
+    <path class="fill"
+        d="m1024.4 234.4q-0.4 0.2-1.2 0.5-0.8 0.4-1.9 0.7-1 0.4-2.4 0.7-1.3 0.2-2.8 0.2-1.5 0.1-2.9-0.4-1.5-0.4-2.5-1.3-1.1-0.9-1.7-2.2-0.6-1.3-0.6-3.1v-26.3h-5.1v-3.8h5.1v-12.4h4.8v12.4h8.4v3.8h-8.4v25q0.1 2 1.4 3 1.2 0.9 3 0.9 2 0 3.6-0.7 1.6-0.6 2-0.9z" />
+    <path class="fill"
+        d="m1048.4 203.6q-4.8 0.1-8.4 2.7-3.6 2.5-5.1 7v22.8h-4.8v-36.7h4.5v8.8q1.9-3.9 5-6.5 3.1-2.5 6.7-2.5 0.6 0 1.2 0 0.6 0 0.9 0z" />
+    <path fill-rule="evenodd" class="fill"
+        d="m1069 236.8q-4 0-7.3-1.5-3.4-1.5-5.8-4.1-2.5-2.6-3.8-6.1-1.3-3.4-1.3-7.2 0-3.9 1.3-7.4 1.4-3.4 3.8-6 2.5-2.7 5.8-4.2 3.4-1.6 7.3-1.6 4 0 7.3 1.6 3.4 1.5 5.8 4.2 2.4 2.6 3.8 6 1.4 3.5 1.4 7.4 0 3.8-1.4 7.2-1.4 3.5-3.8 6.1-2.4 2.6-5.8 4.1-3.3 1.5-7.3 1.5zm-13.3-18.9q0 3.1 1 5.8 1 2.6 2.8 4.6 1.8 2 4.3 3.2 2.4 1.1 5.2 1.1 2.7 0 5.1-1.2 2.5-1.1 4.3-3.1 1.8-2 2.9-4.7 1.1-2.7 1.1-5.8 0-3-1.1-5.8-1.1-2.7-2.9-4.7-1.8-2-4.2-3.2-2.4-1.1-5.2-1.1-2.7 0-5.2 1.1-2.4 1.2-4.2 3.2-1.8 2.1-2.8 4.8-1.1 2.7-1.1 5.8z" />
+    <path class="fill"
+        d="m754.3 302.3q0-3.9 1.3-7.3 1.3-3.5 3.8-6.1 2.4-2.5 5.8-4 3.4-1.5 7.5-1.5 5.2 0 9.1 2.4 3.9 2.3 5.8 6.3l-4.6 1.5q-1.6-2.8-4.3-4.4-2.8-1.6-6.2-1.6-2.8 0-5.2 1.2-2.5 1.1-4.3 3-1.8 2-2.8 4.6-1 2.7-1 5.9 0 3.1 1.1 5.8 1 2.8 2.9 4.8 1.8 2 4.2 3.2 2.5 1.2 5.2 1.2 1.8 0 3.5-0.5 1.7-0.5 3.2-1.4 1.5-0.9 2.5-2 1.1-1.2 1.5-2.4l4.7 1.4q-0.8 2-2.3 3.6-1.5 1.7-3.5 2.9-2 1.2-4.4 1.9-2.4 0.7-5.1 0.7-4 0-7.4-1.5-3.3-1.6-5.8-4.2-2.5-2.6-3.9-6.1-1.3-3.5-1.3-7.4z" />
+    <path fill-rule="evenodd" class="fill"
+        d="m810.9 321.5q-4 0-7.4-1.5-3.3-1.5-5.7-4.2-2.5-2.6-3.8-6-1.4-3.5-1.4-7.3 0-3.9 1.4-7.3 1.4-3.5 3.8-6.1 2.5-2.6 5.8-4.2 3.4-1.5 7.3-1.5 4 0 7.3 1.5 3.4 1.6 5.8 4.2 2.4 2.6 3.8 6.1 1.4 3.4 1.4 7.3 0 3.8-1.4 7.3-1.4 3.4-3.8 6-2.4 2.7-5.8 4.2-3.3 1.5-7.3 1.5zm-13.3-18.9q0 3.1 1 5.7 1 2.7 2.8 4.7 1.8 2 4.3 3.1 2.4 1.2 5.1 1.2 2.8 0 5.2-1.2 2.5-1.2 4.3-3.2 1.8-2 2.9-4.7 1-2.7 1-5.8 0-3-1-5.7-1.1-2.7-2.9-4.7-1.8-2-4.2-3.2-2.4-1.2-5.2-1.2-2.7 0-5.2 1.2-2.4 1.2-4.2 3.2-1.8 2-2.9 4.8-1 2.7-1 5.8z" />
+    <path class="fill"
+        d="m867.9 320.8h-4.8v-20.6q0-6.5-1.9-9.5-1.9-2.9-5.9-2.9-2.1 0-4.3 0.7-2.1 0.8-3.9 2.2-1.8 1.4-3.2 3.4-1.4 1.9-2.1 4.2v22.5h-4.8v-36.8h4.4v8.3q1.1-1.9 2.8-3.6 1.6-1.6 3.7-2.8 2-1.2 4.3-1.9 2.3-0.6 4.8-0.6 3.1 0 5.2 1.1 2 1.1 3.3 3.2 1.3 2 1.8 5 0.6 3 0.6 6.6z" />
+    <path class="fill"
+        d="m890.2 321.5q-4.3 0-8.4-1.4-4.1-1.4-7-4.1l2.1-3.3q3.1 2.6 6.4 3.8 3.2 1.3 6.8 1.3 4.5 0 7.1-1.8 2.7-1.8 2.7-5.1 0-1.5-0.7-2.6-0.7-1-2.1-1.8-1.4-0.7-3.5-1.3-2.1-0.6-4.8-1.3-3.2-0.8-5.5-1.5-2.3-0.8-3.9-1.8-1.5-1-2.2-2.4-0.8-1.5-0.8-3.7 0-2.7 1.1-4.8 1.1-2.1 3-3.5 1.9-1.4 4.4-2.1 2.5-0.7 5.3-0.7 4.2 0 7.7 1.4 3.4 1.3 5.6 3.6l-2.4 2.8q-2-2.1-4.9-3.2-3-1-6.1-1-1.9 0-3.6 0.4-1.6 0.4-2.8 1.2-1.3 0.9-2 2.2-0.7 1.3-0.7 3 0 1.5 0.5 2.4 0.5 0.9 1.6 1.6 1.2 0.7 2.9 1.2 1.7 0.5 4.2 1.1 3.5 0.9 6.2 1.7 2.7 0.8 4.5 2 1.8 1.1 2.7 2.7 0.9 1.7 0.9 4 0 5.1-3.9 8-3.8 3-10.4 3z" />
+    <path class="fill"
+        d="m923.6 321.5q-5.8 0-8.8-4-2.9-4-2.9-11.9v-21.6h4.8v20.8q0 12.5 8.5 12.5 2.1 0 4.1-0.8 2.1-0.7 3.8-2 1.7-1.3 3.1-3.2 1.4-1.8 2.2-4.1v-23.2h4.8v30.6q0 1.9 1.8 1.9v4.3q-1.4 0.2-2 0.2-1.6 0-2.8-1-1.1-1-1.1-2.5v-5q-2.5 4.3-6.6 6.6-4.1 2.4-8.9 2.4z" />
+    <path class="fill"
+        d="m954.3 269.3h4.8v43.2q0 2 1.1 3.2 1.2 1.1 3.2 1.1 0.8 0 1.9-0.2 1-0.2 1.9-0.5l0.9 3.8q-1.4 0.6-3.3 0.9-1.9 0.4-3.4 0.4-3.3 0-5.2-1.9-1.9-1.8-1.9-5.2z" />
+    <path class="fill"
+        d="m990.1 319q-0.4 0.2-1.2 0.6-0.9 0.3-1.9 0.7-1.1 0.3-2.4 0.6-1.4 0.3-2.8 0.3-1.6 0-3-0.4-1.4-0.4-2.5-1.3-1-0.9-1.7-2.2-0.6-1.4-0.6-3.2v-26.3h-5.1v-3.8h5.1v-12.4h4.8v12.4h8.5v3.8h-8.5v25q0.1 2.1 1.4 3 1.3 1 3 1 2.1 0 3.6-0.7 1.6-0.7 2-1z" />
+    <path class="fill" d="m995.7 276.3v-7h4.8v7zm0 44.5v-36.8h4.8v36.8z" />
+    <path class="fill"
+        d="m1041.7 320.8h-4.8v-20.6q0-6.5-1.9-9.5-1.9-2.9-5.9-2.9-2.1 0-4.2 0.7-2.2 0.8-4 2.2-1.8 1.4-3.2 3.4-1.4 1.9-2.1 4.2v22.5h-4.8v-36.8h4.4v8.3q1.1-1.9 2.8-3.6 1.6-1.6 3.7-2.8 2-1.2 4.3-1.9 2.3-0.6 4.8-0.6 3.1 0 5.2 1.1 2.1 1.1 3.3 3.2 1.3 2 1.9 5 0.5 3 0.5 6.6z" />
+    <path fill-rule="evenodd" class="fill"
+        d="m1066.6 321.3q-3.9 0-7-1.6-3.1-1.6-5.4-4.2-2.3-2.6-3.6-6-1.3-3.4-1.3-7 0-3.8 1.3-7.3 1.2-3.5 3.5-6.1 2.2-2.6 5.4-4.2 3.1-1.5 6.9-1.5 4.7 0 8.2 2.4 3.5 2.3 5.9 5.9v-7.7h4.3v36.9q0 3.8-1.4 6.8-1.5 2.9-3.9 4.9-2.4 1.9-5.7 2.9-3.4 1-7 1-6.3 0-10.2-2.2-3.9-2.3-6.3-6.1l3-2.3q2.2 3.5 5.8 5.1 3.6 1.7 7.7 1.7 2.6 0 5.1-0.7 2.4-0.8 4.2-2.2 1.8-1.5 2.9-3.7 1-2.2 1-5.2v-7.2q-2.2 3.5-5.8 5.5-3.6 2.1-7.6 2.1zm1.3-4q2.1 0 4.2-0.8 2-0.8 3.7-2.1 1.6-1.3 2.7-2.9 1.2-1.7 1.5-3.4v-11.3q-0.7-2-2.1-3.7-1.4-1.7-3.1-2.9-1.7-1.2-3.6-1.9-2-0.7-3.9-0.7-3.1 0-5.5 1.3-2.4 1.3-4.1 3.4-1.7 2.2-2.6 4.8-0.9 2.7-0.9 5.5 0 2.9 1.1 5.6 1 2.7 2.9 4.7 1.8 2 4.3 3.2 2.5 1.2 5.4 1.2z" />
+    <path class="fill"
+        d="m0.6 158.4q0-10.8 1.8-20.3 1.7-9.4 6.6-18 4.8-8.7 13.3-16.5 8.5-7.8 22.3-15.7 8.1-4.3 16.5-8.5 8.3-4.1 15.2-8.9 6.9-4.7 11.3-10.1 4.5-5.4 4.5-12.7 0-4.6-2.2-9.1-2.1-4.6-6.2-8.1-4-3.5-10.1-5.7-6.1-2.2-13.9-2.2-8.1 0-14.7 2.3-6.6 2.3-11.7 5.7-5.2 3.4-8.9 7.1-3.8 3.8-6.3 6.8l-15.3-17.3q2.1-2.4 7.3-6.6 5.1-4.2 12.9-8.5 7.8-4.3 18.1-7.4 10.2-3.1 22.9-3.1 12.4 0 22.4 3.4 10 3.3 16.9 9.3 6.9 5.9 10.7 13.9 3.7 7.9 3.7 16.8 0 10.6-4.6 18.4-4.5 7.8-11.2 13.7-6.6 6-14.1 10.2-7.6 4.1-13.5 7.1-6 3-13.4 7.2-7.4 4.2-14.1 9.4-6.8 5.3-11.8 11.8-5 6.4-6.3 14h94.6l-16.8 21.6z" />
+    <path fill-rule="evenodd" class="fill"
+        d="m196 204v-45.6h-102.9l16.2-21 94.2-121.8h16.2v121.2h35.5v21.6h-35.5v45.6zm-62.1-67.2h64.5v-84.5z" />
+    <path class="fill"
+        d="m308.3 251.2q0-12 4.2-23.8 4.3-11.9 12.2-21.3 8-9.5 19.7-15.4 11.8-5.9 26.8-5.9 17.8 0 30.3 8.1 12.5 8.2 18.5 20.9l-5.7 2.7q-3.7-7.2-8.7-12-5-4.9-10.8-7.9-5.8-3-12-4.3-6.2-1.3-12.4-1.3-13.3 0-23.7 5.3-10.4 5.4-17.6 14-7.1 8.6-10.8 19.5-3.6 10.9-3.6 22 0 12.2 4.3 23.4 4.3 11.3 11.9 19.8 7.6 8.5 17.9 13.6 10.4 5.1 22.2 5.1 6.4 0 13-1.6 6.7-1.6 12.9-4.9 6.2-3.3 11.4-8.3 5.3-5.1 9-12.2l5.7 2.2q-3.4 7.5-9.2 13.3-5.8 5.9-13 9.8-7.1 3.9-15 5.9-7.9 2-15.6 2-13.5 0-24.9-6-11.5-6-19.6-15.7-8.2-9.7-12.8-22-4.6-12.2-4.6-25z" />
+    <path fill-rule="evenodd" class="fill"
+        d="m500.1 319.7q-13.9 0-25.2-5.8-11.4-5.8-19.7-15.2-8.2-9.4-12.7-21.6-4.5-12.2-4.5-25 0-13.3 4.8-25.5 4.7-12.2 13.1-21.6 8.3-9.4 19.7-14.9 11.4-5.5 24.7-5.5 13.7 0 25.1 5.9 11.5 5.9 19.6 15.5 8.2 9.5 12.7 21.6 4.5 12.1 4.5 24.5 0 13.5-4.8 25.7-4.8 12.2-13.1 21.5-8.4 9.3-19.7 14.8-11.4 5.6-24.5 5.6zm-55.7-67.6q0 12 4.1 23.1 4.1 11.1 11.5 19.6 7.4 8.6 17.7 13.6 10.2 5.1 22.4 5.1 12.6 0 22.8-5.4 10.2-5.3 17.5-13.9 7.3-8.7 11.4-19.7 4-11.1 4-22.4 0-12-4.2-23.1-4.2-11-11.7-19.6-7.5-8.5-17.7-13.6-10.1-5-22.1-5-12.6 0-22.8 5.3-10.2 5.4-17.6 14-7.3 8.6-11.3 19.6-4 11-4 22.4z" />
+    <path class="fill" d="m185.2 319.3l-2.7-2 245.1-316.8 2.7 2.1z" />
+</svg>

package/src/assets/volverjs.svg

@@ -0,0 +1,15 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="200" height="200">
+    <style>
+        .circle {
+            fill: #45cb85;
+        }
+
+        .letter {
+            fill: #fff;
+        }
+    </style>
+    <path class="circle"
+        d="m200 400c-110.6 0-200-89.4-200-200 0-110.6 89.4-200 200-200 110.6 0 200 89.4 200 200 0 110.6-89.4 200-200 200z" />
+    <path fill-rule="evenodd" class="letter"
+        d="m320 198.9q6.8 0 9.8 3 3.3 3 3.3 7.8 0 7.8-4.8 13.7-4.4 6-14.3 6.3-23.9 0.6-42.4-3.6-21.2 44.5-51.4 74.1-29.9 29.3-60.1 29.3-31 0-46.3-36.2-15.2-36.1-15.2-97.6 0-52.6 7.5-94.4 2.7-15.6 7.4-21 5.1-5.6 17.1-5.6 19.7 0 19.7 17 0 1.8-0.6 6.6-9 53.7-9 97.4 0 45.7 7.5 69.6 7.8 23.6 23 23.6 15.5 0 33.8-21.5 18.2-21.6 33.4-54.1-18.2-11.4-27.5-29.3-9.2-18.2-9.2-41.8 0-23.6 7.1-39.8 7.5-16.4 20.1-24.4 12.8-8.1 28.3-8.1 19.2 0 30.2 13.7 11.4 13.8 11.4 37.7 0 34.3-15 75 15.9 2.6 36.2 2.6zm-88.2-58.8q0 29.3 18.9 43.3 11.6-33.5 11.6-55.3 0-12.5-3.3-18.2-3.3-6-8.9-6-8.1 0-13.2 9.6-5.1 9.3-5.1 26.6z" />
+</svg>

package/src/components/index.scss

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

package/src/components/vv-badge.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-badge);
+$component-map: $vv-badge;
+
+@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

@@ -0,0 +1,115 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-button-group);
+$component-map: $vv-button-group;
+$component-selector: '.#{ $component-name}';
+$button-component-name: map.get($components-names, vv-button);
+$button-component-selector: '.' + $button-component-name;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);
+
+// if has block modifier
+@if map.get($component-map, 'modifier', 'block') {
+	#{$component-selector + '--block'} {
+		#{$button-component-selector} {
+			&:not([disabled], [tabindex='-1']) {
+				@include wrap-with-where(
+					$selector:
+						'&.active, &#{$button-component-selector}--active, &:active',
+					$enabled: $zero-specificity-for-compoenents
+				) {
+					z-index: 1;
+				}
+			}
+		}
+
+		@include wrap-with-where(
+			$selector: $button-component-selector,
+			$enabled: $zero-specificity-for-compoenents
+		) {
+			flex: 1;
+		}
+	}
+}
+
+// if has compact modifier
+@if map.get($component-map, 'modifier', 'compact') {
+	#{$component-selector + '--compact'} {
+		// if has vertical modifier
+		@if map.get($component-map, 'modifier', 'vertical') {
+			&#{$component-selector + '--vertical'} {
+				#{$button-component-selector} {
+					// clear top border-radius for first child
+					@include wrap-with-where(
+						$selector: '&:not(:first-child)',
+						$enabled: $zero-specificity-for-compoenents
+					) {
+						border-top-right-radius: 0;
+						border-top-left-radius: 0;
+					}
+
+					// clear bottom border-radius for last child
+					@include wrap-with-where(
+						$selector: '&:not(:last-child)',
+						$enabled: $zero-specificity-for-compoenents
+					) {
+						border-bottom-right-radius: 0;
+						border-bottom-left-radius: 0;
+					}
+
+					// clear margin for inner children
+					@if map.get($vv-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
+							);
+						}
+					}
+				}
+			}
+		}
+
+		&:not(#{$component-selector + '--vertical'}) {
+			#{$button-component-selector} {
+				// clear left border-radius for first child
+				@include wrap-with-where(
+					$selector: '&:not(:first-child)',
+					$enabled: $zero-specificity-for-compoenents
+				) {
+					border-top-left-radius: 0;
+					border-bottom-left-radius: 0;
+				}
+
+				// clear right border-radius for first child
+				@include wrap-with-where(
+					$selector: '&:not(:last-child)',
+					$enabled: $zero-specificity-for-compoenents
+				) {
+					border-top-right-radius: 0;
+					border-bottom-right-radius: 0;
+				}
+
+				// clear margin for inner children
+				@if map.get($vv-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
+						);
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/vv-button.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-button);
+$component-map: $vv-button;
+$component-selector: '.#{ $component-name}';
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents,
+	$custom-block: true
+) {
+	// custom block
+	%#{$component-name} {
+		-webkit-tap-highlight-color: transparent;
+		-webkit-touch-callout: none;
+		align-items: center;
+		cursor: pointer;
+		display: inline-flex;
+		justify-content: center;
+		text-align: center;
+		touch-action: manipulation;
+		user-select: none;
+
+		@include spread-map-into-attrs(
+			$map: $component-map,
+			$prefix: $component-name,
+			$props: $use-custom-props-for-components
+		);
+
+		@media (prefers-reduced-motion: reduce) {
+			transition: none;
+		}
+	}
+
+	@include wrap-with-where(
+		$selector: $component-selector,
+		$enabled: $zero-specificity-for-compoenents
+	) {
+		&:where(a[href], button, input[type='button'], input[type='submit'], input[type='reset']),
+		&::file-selector-button {
+			@extend %#{$component-name};
+		}
+
+		// input file
+		@if map.get($component-map, 'gap') {
+			&::file-selector-button {
+				margin-inline-end: var(
+					--vv-button-gap,
+					map.get($component-map, 'gap')
+				);
+			}
+		}
+	}
+}