@volverjs/style 0.1.2-beta.7 → 0.1.2-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.7",
+  "version": "0.1.2-beta.8",
   "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",
@@ -14,112 +14,116 @@
     "dist/*"
   ],
   "exports": {
-    ".": "./dist/style",
-    "./components": "./dist/components",
-    "./scss/components": "./src/components/index",
-    "./components/vv-accordion": "./dist/components/vv-accordion",
-    "./scss/components/vv-accordion": "./src/components/vv-accordion",
-    "./components/vv-badge": "./dist/components/vv-badge",
-    "./scss/components/vv-badge": "./src/components/vv-badge",
-    "./components/vv-breadcrumb": "./dist/components/vv-breadcrumb",
-    "./scss/components/vv-breadcrumb": "./src/components/vv-breadcrumb",
-    "./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-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-nav": "./dist/components/vv-nav",
-    "./scss/components/vv-nav": "./src/components/vv-nav",
-    "./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-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,25 +141,47 @@
   },
   "homepage": "https://github.com/volverjs/style#readme",
   "devDependencies": {
+    "@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": "^8.26.0",
+    "eslint-plugin-vue": "^9.7.0",
     "glob": "^8.0.3",
     "icss-utils": "^5.1.0",
-    "postcss-preset-env": "^7.8.2",
+    "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.55.0",
+    "sass": "^1.56.0",
+    "stylelint": "^14.14.1",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard-scss": "^6.0.0",
-    "stylelint": "^14.14.0",
+    "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-markdown": "^2.1.0",
+    "vite-plugin-pages": "^0.27.1",
     "vite-plugin-stylelint": "^3.0.8",
-    "vite": "^3.2.0"
+    "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"
   },
   "scripts": {
     "dev": "vite --port 3000 --open",
     "build": "node ./scripts/build.js",
-    "styleguide": "vite build --base=./"
+    "styleguide": "vite-ssg build --base=./"
   }
 }

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/settings/components/_vv-accordion.scss

@@ -20,7 +20,7 @@ $vv-accordion: (
 			line-height: var(--leading-normal),
 			color: var(--color-word-2),
 			will-change: background-color,
-			transition: background-color 0.2s ease-in-out,
+			transition: background-color 0.3s ease-in-out,
 			font-size: var(--text-sm),
 			pseudo: (
 				before: (
@@ -35,7 +35,7 @@ $vv-accordion: (
 					background-size: 1em,
 					background-repeat: no-repeat,
 					will-change: transform,
-					transition: transform 0.2s ease-in-out,
+					transition: transform 0.3s ease-in-out,
 					transform: rotate(-90deg),
 				),
 				marker: (

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

@@ -1,5 +1,5 @@
 $vv-badge: (
-	--badge-font-size: 0.7em,
+	--badge-font-size: 0.7rem,
 	[font-size]: var(--badge-font-size),
 	border-radius: 0.5em,
 	background: var(--color-brand),
@@ -29,7 +29,7 @@ $vv-badge: (
 	),
 	modifier: (
 		small: (
-			--badge-font-size: 0.6em,
+			--badge-font-size: 0.6rem,
 		),
 		rounded: (
 			border-radius: 1em,

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

@@ -29,6 +29,7 @@ $vv-breadcrumb: (
 		item: (
 			_alias: '> ol > li:has(a)',
 			display: inline-flex,
+			align-items: center,
 			color: var(--color-word-2),
 			pseudo: (
 				after: (
@@ -47,6 +48,7 @@ $vv-breadcrumb: (
 		item-active: (
 			_alias: '> ol > li:not(:has(a))',
 			display: inline-flex,
+			align-items: center,
 			font-weight: var(--font-bold),
 			padding-right: var(--spacing-16),
 		),

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

@@ -14,7 +14,7 @@ $vv-button: (
 	padding-block: 0.75ch,
 	padding-inline: 1.75ch,
 	text-shadow: 0 1px 0 var(--color-gray-darken-5),
-	transition: all 0.2s ease-in-out,
+	transition: all 0.3s ease-in-out,
 	will-change: all,
 	min-width: 0,
 	state: (
@@ -30,6 +30,10 @@ $vv-button: (
 			background: var(--color-brand-darken-2),
 			border-color: var(--color-brand-darken-2),
 		),
+		selected: (
+			background: var(--color-brand-darken-2),
+			border-color: var(--color-brand-darken-2),
+		),
 		disabled: (
 			opacity: 0.5,
 			cursor: not-allowed,
@@ -71,6 +75,10 @@ $vv-button: (
 					background: var(--color-gray-darken-5),
 					border-color: var(--color-gray-darken-5),
 				),
+				selected: (
+					background: var(--color-gray-darken-5),
+					border-color: var(--color-gray-darken-5),
+				),
 			),
 		),
 		secondary: (
@@ -89,6 +97,9 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-3),
 				),
+				selected: (
+					background: var(--color-gray-lighten-3),
+				),
 			),
 		),
 		danger: (
@@ -107,6 +118,10 @@ $vv-button: (
 					background: var(--color-danger-darken-2),
 					border-color: var(--color-danger-darken-2),
 				),
+				selected: (
+					background: var(--color-danger-darken-2),
+					border-color: var(--color-danger-darken-2),
+				),
 			),
 		),
 		ghost: (
@@ -125,9 +140,12 @@ $vv-button: (
 				active: (
 					background: var(--color-gray-lighten-4),
 				),
+				selected: (
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
-		text: (
+		link: (
 			background: transparent,
 			border-color: var(--color-word),
 			border-width: var(--border-0),
@@ -163,6 +181,10 @@ $vv-button: (
 					border-color: var(--color-gray-lighten-4),
 					background: var(--color-gray-lighten-4),
 				),
+				selected: (
+					border-color: var(--color-gray-lighten-4),
+					background: var(--color-gray-lighten-4),
+				),
 			),
 		),
 		static-dark: (
@@ -182,6 +204,10 @@ $vv-button: (
 					border-color: var(--color-gray-darken-3),
 					background: var(--color-gray-darken-3),
 				),
+				selected: (
+					border-color: var(--color-gray-darken-3),
+					background: var(--color-gray-darken-3),
+				),
 			),
 		),
 		action: (

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

@@ -26,7 +26,7 @@ $vv-dialog: (
 			flex-direction: column,
 			position: relative,
 			box-shadow: var(--shadow-lg),
-			max-width: clamp(30vw, 40rem, 90vw),
+			max-width: clamp(30vw, 40rem, 50vw),
 			max-height: 90vh,
 			z-index: var(--z-modal),
 			background: var(--color-surface),
@@ -67,7 +67,7 @@ $vv-dialog: (
 		small: (
 			element: (
 				wrapper: (
-					max-width: clamp(10vw, 25rem, 90vw),
+					max-width: clamp(10vw, 25rem, 30vw),
 				),
 			),
 		),

package/src/settings/components/_vv-input-checkbox.scss

@@ -56,7 +56,7 @@ $vv-input-checkbox: (
 					background-color: var(--color-word-5),
 					position: relative,
 					will-change: background-color,
-					transition: background-color 0.2s ease-in-out,
+					transition: background-color 0.3s ease-in-out,
 					pseudo: (
 						after: (
 							width: var(--spacing-20),
@@ -66,7 +66,7 @@ $vv-input-checkbox: (
 							inset: var(--spacing-2) 0 0 var(--spacing-2),
 							background: var(--color-white),
 							will-change: transform,
-							transition: transform 0.2s ease-in-out,
+							transition: transform 0.3s ease-in-out,
 						),
 					),
 					state: (

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

@@ -40,7 +40,7 @@ $vv-input-radio: (
 					border-radius: 50%,
 					transform: translate(-50%, -50%) scale(0),
 					will-change: transform,
-					transition: transform 0.2s ease-in-out,
+					transition: transform 0.3s ease-in-out,
 				),
 			),
 			state: (

package/src/settings/components/_vv-input-text.scss

@@ -25,7 +25,7 @@ $vv-input-text: (
 			overflow: hidden,
 			background-color: var(--input-background-color),
 			will-change: background-color,
-			transition: background-color 0.2s ease-in-out,
+			transition: background-color 0.3s ease-in-out,
 			pseudo: (
 				before: (
 					position: absolute,
@@ -41,7 +41,7 @@ $vv-input-text: (
 					transform: scaleX(0),
 					transform-origin: left,
 					will-change: transform,
-					transition: transform 0.2s ease-in-out,
+					transition: transform 0.3s ease-in-out,
 				),
 			),
 			state: (
@@ -248,7 +248,7 @@ $vv-input-text: (
 					margin: 0,
 					will-change: 'transform',
 					transform-origin: left,
-					transition: all 0.2s ease-in-out,
+					transition: all 0.3s ease-in-out,
 				),
 				input: (
 					pseudo: (