@volverjs/style 0.1.2-beta.11 → 0.1.2-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.11",
+  "version": "0.1.2-beta.16",
   "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",
@@ -63,6 +63,10 @@
     "./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",
+    "./components/vv-toast": "./dist/components/vv-toast.css",
+    "./scss/components/vv-toast": "./src/components/vv-toast.scss",
+    "./components/vv-tooltip": "./dist/components/vv-tooltip.css",
+    "./scss/components/vv-tooltip": "./src/components/vv-tooltip.scss",
     "./export": "./dist/export.css",
     "./scss/export": "./src/export.scss",
     "./props/animation": "./dist/props/animation.css",
@@ -152,13 +156,13 @@
     "eslint-plugin-vue": "^9.7.0",
     "glob": "^8.0.3",
     "icss-utils": "^5.1.0",
+    "markdown-it-anchor": "^8.6.5",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.18",
     "postcss-html": "^1.5.0",
     "postcss-preset-env": "^7.8.2",
     "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",

package/src/_config.scss

@@ -32,4 +32,6 @@ $components-names: (
 	vv-table: $components-prefix + -table,
 	vv-text: $components-prefix + -text,
 	vv-textarea: $components-prefix + -textarea,
+	vv-toast: $components-prefix + -toast,
+	vv-tooltip: $components-prefix + -tooltip,
 ) !default;

package/src/_preflight.scss

@@ -9,343 +9,346 @@
 }
 
 :where(.preflight) {
-	// typography
-	:where(h1, h2, h3, h4, h5, h6) {
-		@extend %vv-text !optional;
-		@extend %vv-text--headline !optional;
-	}
-
-	:where(h1) {
-		@extend %vv-text--size-1 !optional;
-	}
-
-	:where(h2) {
-		@extend %vv-text--size-2 !optional;
-	}
-
-	:where(h3) {
-		@extend %vv-text--size-3 !optional;
-	}
-
-	:where(h4) {
-		@extend %vv-text--size-4 !optional;
-	}
-
-	:where(h5) {
-		@extend %vv-text--size-5 !optional;
-	}
-
-	:where(h6) {
-		@extend %vv-text--size-6 !optional;
-	}
-
-	:where(p) {
-		@extend %vv-text !optional;
-		@extend %vv-text--copy !optional;
-	}
-
-	:where(blockquote) {
-		@extend %vv-text !optional;
-		@extend %vv-text--quote !optional;
-	}
-
-	:where(ul, ol) {
-		@extend %list-inside !optional;
-		@extend %my-sm !optional;
-		@extend %pl-lg !optional;
-	}
-
-	:where(ul) {
-		@extend %list-disc !optional;
-	}
-
-	:where(ol) {
-		@extend %list-decimal !optional;
-	}
+	:not(.preflight-revert *) {
+		// typography
+		&:where(h1, h2, h3, h4, h5, h6) {
+			@extend %vv-text !optional;
+			@extend %vv-text--headline !optional;
+		}
 
-	:where(b, strong, th) {
-		@extend %font-bold !optional;
-	}
+		&:where(h1) {
+			@extend %vv-text--size-1 !optional;
+		}
 
-	:where(em, i, cite, dfn, var) {
-		@extend %italic !optional;
-	}
+		&:where(h2) {
+			@extend %vv-text--size-2 !optional;
+		}
 
-	:where(dfn, var) {
-		@extend %font-serif !optional;
-	}
+		&:where(h3) {
+			@extend %vv-text--size-3 !optional;
+		}
 
-	:where(del, s) {
-		@extend %line-through !optional;
-	}
+		&:where(h4) {
+			@extend %vv-text--size-4 !optional;
+		}
 
-	:where(ins, u, cite, a) {
-		@extend %underline !optional;
-	}
+		&:where(h5) {
+			@extend %vv-text--size-5 !optional;
+		}
 
-	:where(abbr) {
-		@extend %underline !optional;
-		@extend %decoration-dotted !optional;
-	}
+		&:where(h6) {
+			@extend %vv-text--size-6 !optional;
+		}
 
-	:where(code) {
-		@extend %font-mono !optional;
-	}
+		&:where(p) {
+			@extend %vv-text !optional;
+			@extend %vv-text--copy !optional;
+		}
 
-	:where(sub) {
-		@extend %align-sub !optional;
-		@extend %text-smaller !optional;
-	}
+		&:where(blockquote) {
+			@extend %vv-text !optional;
+			@extend %vv-text--quote !optional;
+		}
 
-	:where(sup) {
-		@extend %align-super !optional;
-		@extend %text-smaller !optional;
-	}
+		&:where(ul, ol) {
+			@extend %list-inside !optional;
+			@extend %my-sm !optional;
+			@extend %pl-lg !optional;
+		}
 
-	:where(q) {
-		@extend %font-serif !optional;
-	}
+		&:where(ul) {
+			@extend %list-disc !optional;
+		}
 
-	:where(small) {
-		@extend %text-smaller !optional;
-	}
+		&:where(ol) {
+			@extend %list-decimal !optional;
+		}
 
-	:where(mark) {
-		@extend %bg-warning !optional;
-	}
+		&:where(b, strong, th) {
+			@extend %font-bold !optional;
+		}
 
-	:where(pre) {
-		@extend %font-mono !optional;
-		@extend %whitespace-pre-line !optional;
-	}
+		&:where(em, i, cite, dfn, var) {
+			@extend %italic !optional;
+		}
 
-	:where(dl) {
-		@extend %my-sm !optional;
-	}
+		&:where(dfn, var) {
+			@extend %font-serif !optional;
+		}
 
-	:where(dd) {
-		@extend %ml-sm !optional;
-	}
+		&:where(del, s) {
+			@extend %line-through !optional;
+		}
 
-	:where(hr) {
-		@extend %my-lg !optional;
-		@extend %border !optional;
-		@extend %border-solid !optional;
-		@extend %border-surface-3 !optional;
-	}
+		&:where(ins, u, cite, a) {
+			@extend %underline !optional;
+		}
 
-	// buttons
-	:where(button, input[type='button'], input[type='submit'], input[type='reset']) {
-		@extend %vv-button !optional;
+		&:where(abbr) {
+			@extend %underline !optional;
+			@extend %decoration-dotted !optional;
+		}
 
-		&:where([type='button']) {
-			@extend %vv-button--primary !optional;
+		&:where(code) {
+			@extend %font-mono !optional;
 		}
 
-		&:where([type='reset']) {
-			@extend %vv-button--secondary !optional;
+		&:where(sub) {
+			@extend %align-sub !optional;
+			@extend %text-smaller !optional;
 		}
 
-		&:where(:disabled) {
-			@extend %vv-button--disabled !optional;
+		&:where(sup) {
+			@extend %align-super !optional;
+			@extend %text-smaller !optional;
 		}
 
-		&:where(:hover) {
-			@extend %vv-button--hover !optional;
+		&:where(q) {
+			@extend %font-serif !optional;
 		}
 
-		&:where(:focus) {
-			@extend %vv-button--focus !optional;
+		&:where(small) {
+			@extend %text-smaller !optional;
 		}
 
-		&:where(:focus-visible) {
-			@extend %vv-button--focus-visible !optional;
+		&:where(mark) {
+			@extend %bg-warning !optional;
 		}
 
-		&:where(:visited) {
-			@extend %vv-button--visited !optional;
+		&:where(pre) {
+			@extend %font-mono !optional;
+			@extend %whitespace-pre-line !optional;
 		}
 
-		&:where(:active) {
-			@extend %vv-button--active !optional;
+		&:where(dl) {
+			@extend %my-sm !optional;
 		}
 
-		&
-			+ :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+		&:where(dd) {
 			@extend %ml-sm !optional;
 		}
-	}
-
-	// table
-	:where(table) {
-		@extend %vv-table !optional;
 
-		:where(tr) {
-			@extend %vv-table__tr !optional;
+		&:where(hr) {
+			@extend %my-lg !optional;
+			@extend %border !optional;
+			@extend %border-solid !optional;
+			@extend %border-surface-3 !optional;
 		}
 
-		:where(td) {
-			@extend %vv-table__td !optional;
-		}
+		// buttons
+		&:where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+			@extend %vv-button !optional;
 
-		:where(th) {
-			@extend %vv-table__th !optional;
-		}
-	}
+			&:where([type='button']) {
+				@extend %vv-button--primary !optional;
+			}
 
-	// progress
-	:where(progress) {
-		@extend %vv-progress !optional;
-	}
+			&:where([type='reset']) {
+				@extend %vv-button--secondary !optional;
+			}
 
-	// checkbox
-	:where(fieldset:has(input[type='checkbox'])) {
-		@extend %vv-input-checkbox-group !optional;
+			&:where(:disabled) {
+				@extend %vv-button--disabled !optional;
+			}
 
-		:where(legend) {
-			@extend %vv-input-checkbox-group__legend !optional;
-		}
-	}
+			&:where(:hover) {
+				@extend %vv-button--hover !optional;
+			}
 
-	:where(label:has(input[type='checkbox'])) {
-		@extend %w-full !optional;
-		@extend %vv-input-checkbox !optional;
+			&:where(:focus) {
+				@extend %vv-button--focus !optional;
+			}
 
-		:where(input[type='checkbox']) {
-			@extend %vv-input-checkbox__input !optional;
+			&:where(:focus-visible) {
+				@extend %vv-button--focus-visible !optional;
+			}
 
-			&:checked {
-				@extend %vv-input-checkbox-element-input--checked !optional;
+			&:where(:visited) {
+				@extend %vv-button--visited !optional;
 			}
 
-			&:indeterminate {
-				@extend %vv-input-checkbox-element-input--indeterminate
-						!optional;
+			&:where(:active) {
+				@extend %vv-button--active !optional;
 			}
 
-			&:focus-visible {
-				@extend %vv-input-checkbox-element-input--focus-visible
-						!optional;
+			&
+				+ :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+				@extend %ml-sm !optional;
 			}
 		}
-	}
-
-	// 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;
+		// table
+		&:where(table) {
+			@extend %vv-table !optional;
 
-			&:hover {
-				@extend %vv-input-checkbox-modifier-switch-element-input--hover
-						!optional;
+			:where(tr) {
+				@extend %vv-table__tr !optional;
 			}
 
-			&:active {
-				@extend %vv-input-checkbox-modifier-switch-element-input--active
-						!optional;
+			:where(td) {
+				@extend %vv-table__td !optional;
 			}
 
-			&:checked {
-				@extend %vv-input-checkbox-modifier-switch-element-input--checked
-						!optional;
+			:where(th) {
+				@extend %vv-table__th !optional;
 			}
+		}
+
+		// progress
+		&:where(progress) {
+			@extend %vv-progress !optional;
+		}
 
-			&:focus-visible {
-				@extend %vv-input-checkbox-modifier-switch-element-input--focus-visible
-						!optional;
+		// 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']:disabled)) {
-		@extend %vv-input-checkbox--disabled !optional;
-	}
+		&:where(label:has(input[type='checkbox'])) {
+			@extend %w-full !optional;
+			@extend %vv-input-checkbox !optional;
+
+			:where(input[type='checkbox']) {
+				@extend %vv-input-checkbox__input !optional;
 
-	// radio
-	:where(fieldset:has(input[type='radio'])) {
-		@extend %vv-input-radio-group !optional;
+				&:checked {
+					@extend %vv-input-checkbox-element-input--checked !optional;
+				}
 
-		:where(legend) {
-			@extend %vv-input-radio-group__legend !optional;
+				&:indeterminate {
+					@extend %vv-input-checkbox-element-input--indeterminate
+							!optional;
+				}
+
+				&:focus-visible {
+					@extend %vv-input-checkbox-element-input--focus-visible
+							!optional;
+				}
+			}
 		}
-	}
 
-	:where(label:has(input[type='radio'])) {
-		@extend %w-full !optional;
-		@extend %vv-input-radio !optional;
+		// switch
+		&:where(label:has(input[type='checkbox'][role='switch'])) {
+			@extend %vv-input-checkbox--switch !optional;
 
-		:where(input[type='radio']) {
-			@extend %vv-input-radio__input !optional;
+			:where(input[type='checkbox'][role='switch']) {
+				@extend %vv-input-checkbox-modifier-switch__input !optional;
 
-			&:checked {
-				@extend %vv-input-radio-element-input--checked !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;
 
-			&:focus-visible {
-				@extend %vv-input-radio-element-input--focus-visible !optional;
+			:where(legend) {
+				@extend %vv-input-radio-group__legend !optional;
 			}
 		}
-	}
 
-	:where(label:has(input[type='radio']:disabled)) {
-		@extend %vv-input-radio--disabled !optional;
-	}
+		&:where(label:has(input[type='radio'])) {
+			@extend %w-full !optional;
+			@extend %vv-input-radio !optional;
 
-	// textarea
-	:where(label:has(+ textarea)) {
-		@extend %vv-textarea__label !optional;
-	}
+			:where(input[type='radio']) {
+				@extend %vv-input-radio__input !optional;
 
-	:where(textarea) {
-		@extend %w-full !optional;
-		@extend %vv-textarea !optional;
-		@extend %vv-textarea__wrapper !optional;
-		@extend %vv-textarea__input !optional;
+				&:checked {
+					@extend %vv-input-radio-element-input--checked !optional;
+				}
 
-		&:disabled {
-			@extend %vv-textarea--disabled !optional;
+				&:focus-visible {
+					@extend %vv-input-radio-element-input--focus-visible
+							!optional;
+				}
+			}
 		}
 
-		&:readonly {
-			@extend %vv-textarea--readonly !optional;
+		&:where(label:has(input[type='radio']:disabled)) {
+			@extend %vv-input-radio--disabled !optional;
 		}
-	}
 
-	// select
-	:where(label:has(+ select)) {
-		@extend %vv-select__label !optional;
-	}
+		// textarea
+		&:where(label:has(+ textarea)) {
+			@extend %vv-textarea__label !optional;
+		}
 
-	:where(select) {
-		@extend %w-full !optional;
-		@extend %vv-select !optional;
-		@extend %vv-select__wrapper !optional;
-		@extend %vv-select__input !optional;
+		&:where(textarea) {
+			@extend %w-full !optional;
+			@extend %vv-textarea !optional;
+			@extend %vv-textarea__wrapper !optional;
+			@extend %vv-textarea__input !optional;
 
-		&:disabled {
-			@extend %vv-select--disabled !optional;
+			&:disabled {
+				@extend %vv-textarea--disabled !optional;
+			}
+
+			&:readonly {
+				@extend %vv-textarea--readonly !optional;
+			}
 		}
-	}
 
-	// input text
-	:where(label:has(+ input:not([type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset']))) {
-		@extend %vv-input-text__label !optional;
-	}
+		// select
+		&:where(label:has(+ select)) {
+			@extend %vv-select__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;
+		&:where(select) {
+			@extend %w-full !optional;
+			@extend %vv-select !optional;
+			@extend %vv-select__wrapper !optional;
+			@extend %vv-select__input !optional;
 
-		&:disabled {
-			@extend %vv-input-text--disabled !optional;
+			&:disabled {
+				@extend %vv-select--disabled !optional;
+			}
 		}
 
-		&:readonly {
-			@extend %vv-input-text--readonly !optional;
+		// 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;
+
+			&:disabled {
+				@extend %vv-input-text--disabled !optional;
+			}
+
+			&:readonly {
+				@extend %vv-input-text--readonly !optional;
+			}
 		}
 	}
 }

package/src/components/index.scss

@@ -2,8 +2,8 @@
 @import 'vv-alert';
 @import 'vv-badge';
 @import 'vv-breadcrumb';
-@import 'vv-button-group';
 @import 'vv-button';
+@import 'vv-button-group';
 @import 'vv-card';
 @import 'vv-dialog';
 @import 'vv-dropdown';
@@ -18,3 +18,5 @@
 @import 'vv-table';
 @import 'vv-text';
 @import 'vv-textarea';
+@import 'vv-tooltip';
+@import 'vv-toast';

package/src/components/vv-toast.scss

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

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