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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta.5",
+  "version": "0.1.2-beta.7",
   "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",
@@ -17,16 +17,18 @@
     ".": "./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-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",
@@ -41,6 +43,8 @@
     "./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",
@@ -134,20 +138,20 @@
   "homepage": "https://github.com/volverjs/style#readme",
   "devDependencies": {
     "eslint-config-prettier": "^8.5.0",
-    "eslint": "^8.25.0",
+    "eslint": "^8.26.0",
     "glob": "^8.0.3",
     "icss-utils": "^5.1.0",
     "postcss-preset-env": "^7.8.2",
     "postcss": "^8.4.18",
-    "promise": "^8.2.0",
+    "promise": "^8.3.0",
     "sass": "^1.55.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard-scss": "^5.0.0",
-    "stylelint": "^14.13.0",
+    "stylelint-config-standard-scss": "^6.0.0",
+    "stylelint": "^14.14.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
-    "vite-plugin-stylelint": "^3.0.7",
-    "vite": "^3.1.8"
+    "vite-plugin-stylelint": "^3.0.8",
+    "vite": "^3.2.0"
   },
   "scripts": {
     "dev": "vite --port 3000 --open",

package/src/_config.scss

@@ -13,10 +13,11 @@ $components-prefix: vv !default;
 // components names
 $components-names: (
 	vv-badge: $components-prefix + -badge,
+	vv-breadcrumb: $components-prefix + -breadcrumb,
 	vv-button: $components-prefix + -button,
 	vv-button-group: $components-prefix + -button-group,
 	vv-progress: $components-prefix + -progress,
-	vv-collapse: $components-prefix + -collapse,
+	vv-accordion: $components-prefix + -accordion,
 	vv-dialog: $components-prefix + -dialog,
 	vv-dropdown: $components-prefix + -dropdown,
 	vv-input-checkbox: $components-prefix + -input-checkbox,
@@ -24,6 +25,7 @@ $components-names: (
 	vv-input-radio: $components-prefix + -input-radio,
 	vv-input-radio-group: $components-prefix + -input-radio-group,
 	vv-input-text: $components-prefix + -input-text,
+	vv-nav: $components-prefix + -nav,
 	vv-textarea: $components-prefix + -textarea,
 	vv-select: $components-prefix + -select,
 	vv-table: $components-prefix + -table,

package/src/components/index.scss

@@ -1,8 +1,9 @@
 @import 'vv-badge';
+@import 'vv-breadcrumb';
 @import 'vv-button';
 @import 'vv-button-group';
 @import 'vv-progress';
-@import 'vv-collapse';
+@import 'vv-accordion';
 @import 'vv-dialog';
 @import 'vv-dropdown';
 @import 'vv-input-checkbox';
@@ -10,6 +11,7 @@
 @import 'vv-input-radio';
 @import 'vv-input-radio-group';
 @import 'vv-input-text';
+@import 'vv-nav';
 @import 'vv-textarea';
 @import 'vv-select';
 @import 'vv-table';

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-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-collapse.scss → vv-nav.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-nav);
+$component-map: $vv-nav;
 
 @include spread-map-into-bem(
 	$map: $component-map,

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

@@ -16,10 +16,11 @@
 
 // components
 @import 'components/vv-badge';
+@import 'components/vv-breadcrumb';
 @import 'components/vv-button';
 @import 'components/vv-button-group';
 @import 'components/vv-progress';
-@import 'components/vv-collapse';
+@import 'components/vv-accordion';
 @import 'components/vv-dialog';
 @import 'components/vv-dropdown';
 @import 'components/vv-input-checkbox';
@@ -27,6 +28,7 @@
 @import 'components/vv-input-radio';
 @import 'components/vv-input-radio-group';
 @import 'components/vv-input-text';
+@import 'components/vv-nav';
 @import 'components/vv-textarea';
 @import 'components/vv-select';
 @import 'components/vv-table';

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

@@ -0,0 +1,128 @@
+$vv-accordion: (
+	--accordion-marker-size:
+		calc(var(--spacing-sm) + var(--leading-normal) * 1em),
+	--accordion-padding-top: 0px,
+	--accordion-padding-right: 0px,
+	--accordion-padding-bottom: 0px,
+	--accordion-padding-left: 0px,
+	element: (
+		summary: (
+			_alias: '> summary',
+			position: relative,
+			cursor: pointer,
+			[padding-top]: var(--accordion-padding-top),
+			[padding-right]: var(--accordion-padding-right),
+			[padding-bottom]: var(--accordion-padding-bottom),
+			[padding-left]:
+				calc(
+					var(--accordion-padding-left) + var(--accordion-marker-size)
+				),
+			line-height: var(--leading-normal),
+			color: var(--color-word-2),
+			will-change: background-color,
+			transition: background-color 0.2s ease-in-out,
+			font-size: var(--text-sm),
+			pseudo: (
+				before: (
+					display: block,
+					position: absolute,
+					[top]: var(--accordion-padding-top),
+					[left]: var(--accordion-padding-left),
+					width: calc(var(--leading-normal) * 1em),
+					height: calc(var(--leading-normal) * 1em),
+					background-image: var(--bg-chevron),
+					background-position: center,
+					background-size: 1em,
+					background-repeat: no-repeat,
+					will-change: transform,
+					transition: transform 0.2s ease-in-out,
+					transform: rotate(-90deg),
+				),
+				marker: (
+					display: none,
+				),
+				-webkit-details-marker: (
+						display: none,
+					),
+			),
+		),
+		content: (
+			_alias: '> summary + *',
+			padding-block: var(--spacing-sm),
+			[padding-inline]: var(--accordion-padding-left)
+				var(--accordion-padding-right),
+		),
+	),
+	state: (
+		open: (
+			element: (
+				summary: (
+					pseudo: (
+						before: (
+							transform: rotate(0),
+						),
+					),
+				),
+			),
+		),
+	),
+	modifier: (
+		marker-right: (
+			element: (
+				summary: (
+					[padding-right]:
+						calc(
+							var(--accordion-padding-right) +
+								var(--accordion-marker-size)
+						),
+					[padding-left]: var(--accordion-padding-left),
+					pseudo: (
+						before: (
+							left: auto,
+							[right]: var(--accordion-padding-right),
+							transform: rotate(0def),
+						),
+					),
+				),
+			),
+			state: (
+				open: (
+					element: (
+						summary: (
+							pseudo: (
+								before: (
+									transform: rotate(-180deg),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		bordered: (
+			--accordion-padding-top: var(--spacing-sm),
+			--accordion-padding-right: var(--spacing-sm),
+			--accordion-padding-bottom: var(--spacing-sm),
+			--accordion-padding-left: var(--spacing-sm),
+			border-bottom: var(--border) solid var(--color-surface-2),
+			element: (
+				summary: (
+					state: (
+						hover: (
+							background-color: var(--color-surface-1),
+						),
+					),
+				),
+			),
+			state: (
+				open: (
+					element: (
+						summary: (
+							background-color: var(--color-surface-2),
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -1,27 +1,39 @@
 $vv-badge: (
-	border-radius: 1.0465em,
+	--badge-font-size: 0.7em,
+	[font-size]: var(--badge-font-size),
+	border-radius: 0.5em,
 	background: var(--color-brand),
 	color: var(--color-white),
-	font-size: 0.6em,
-	height: 2.093em,
-	min-width: 2.093em,
-	padding: 0.37em 0.475em,
+	line-height: 2em,
+	min-height: 2em,
+	min-width: 2em,
+	padding: 0 0.5em,
 	display: inline-flex,
 	justify-content: center,
-	font-weight: normal,
+	align-items: center,
+	gap: 0.5ch,
+	white-space: nowrap,
 	font-family: var(--font-sans),
+	font-weight: var(--font-normal),
 	text-shadow: none,
 	state: (
 		empty: (
 			font-size: inherit,
-			width: 0.5em,
-			height: 0.5em,
 			min-width: 0,
-			border-radius: 0.25em,
+			min-height: 0,
+			[width]: var(--badge-font-size),
+			[height]: var(--badge-font-size),
+			[border-radius]: calc(var(--badge-font-size) * 0.5),
 			padding: 0,
 		),
 	),
 	modifier: (
+		small: (
+			--badge-font-size: 0.6em,
+		),
+		rounded: (
+			border-radius: 1em,
+		),
 		white: (
 			background: alpha-color('white', 80%),
 			color: var(--color-black),

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

@@ -0,0 +1,85 @@
+$vv-breadcrumb: (
+	element: (
+		list: (
+			_alias: '> ol',
+			position: relative,
+			display: flex,
+			flex-wrap: no-wrap,
+			list-style: none,
+			overflow: auto,
+			padding: 0,
+			background: var(--color-surface),
+			pseudo: (
+				after: (
+					position: absolute,
+					top: 0,
+					bottom: 0,
+					right: 0,
+					display: block,
+					width: var(--spacing-sm),
+					background:
+						linear-gradient(
+							45deg,
+							transparent,
+							var(--color-surface)
+						),
+				),
+			),
+		),
+		item: (
+			_alias: '> ol > li:has(a)',
+			display: inline-flex,
+			color: var(--color-word-2),
+			pseudo: (
+				after: (
+					display: block,
+					margin-inline: 1ch,
+					width: calc(var(--leading-normal) * 1em),
+					height: calc(var(--leading-normal) * 1em),
+					background-image: var(--bg-chevron),
+					background-position: center,
+					background-size: 1em,
+					background-repeat: no-repeat,
+					transform: rotate(-90deg),
+				),
+			),
+		),
+		item-active: (
+			_alias: '> ol > li:not(:has(a))',
+			display: inline-flex,
+			font-weight: var(--font-bold),
+			padding-right: var(--spacing-16),
+		),
+		link: (
+			_alias: '> ol > li > a',
+			state: (
+				hover: (
+					text-decoration: underline,
+				),
+				focus-within: (
+					text-decoration: underline,
+				),
+				active: (
+					color: var(--color-brand-darken-2),
+				),
+			),
+		),
+	),
+	modifier: (
+		multiline: (
+			element: (
+				list: (
+					flex-wrap: wrap,
+				),
+				item: (
+					font-size: var(--text-12),
+				),
+				item-active: (
+					width: 100%,
+					font-size: var(--text-18),
+					line-height: var(--leading-relaxed),
+				),
+			),
+		),
+	),
+) !default;

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

@@ -1,8 +1,9 @@
 $vv-button: (
+	--button-border-width: var(--border-2),
 	position: relative,
 	background: var(--color-brand),
 	border-radius: 0.5ch,
-	border-width: var(--spacing-2),
+	[border-width]: var(--button-border-width),
 	border-style: solid,
 	border-color: var(--color-brand),
 	color: var(--color-white),
@@ -74,7 +75,6 @@ $vv-button: (
 		),
 		secondary: (
 			background: var(--color-white),
-			border-width: var(--spacing-2),
 			border-style: solid,
 			border-color: var(--color-gray-lighten-4),
 			color: var(--color-word),
@@ -130,7 +130,7 @@ $vv-button: (
 		text: (
 			background: transparent,
 			border-color: var(--color-word),
-			border-width: 0,
+			border-width: var(--border-0),
 			border-radius: 0,
 			padding: 0,
 			color: var(--color-word),
@@ -141,7 +141,8 @@ $vv-button: (
 					outline: none,
 				),
 				hover: (
-					border-width: 0 0 1px 0,
+					text-decoration: underline,
+					text-underline-offset: var(--spacing-4),
 				),
 			),
 		),
@@ -183,6 +184,79 @@ $vv-button: (
 				),
 			),
 		),
+		action: (
+			--button-border-width: var(--border),
+			font-size: 0.875em,
+			background: var(--color-surface-1),
+			color: var(--color-word-1),
+			border-color: var(--color-word-5),
+			font-weight: var(--font-normal),
+			padding-inline: 0.75ch,
+			padding-block: 0.5ch,
+			line-height: var(--leading-snug),
+			text-shadow: none,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+				),
+				hover: (
+					background: var(--color-surface-2),
+				),
+				active: (
+					background: var(--color-surface-5),
+				),
+				selected: (
+					color: var(--color-white),
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
+			),
+			element: (
+				icon: (
+					margin-inline: -0.125ch,
+					block-size: calc(1em * var(--leading-snug)),
+					inline-size: calc(1em * var(--leading-snug)),
+				),
+			),
+		),
+		action-quiet: (
+			--button-border-width: var(--border),
+			font-size: var(--text-14),
+			background: transparent,
+			color: var(--color-word-1),
+			border-color: transparent,
+			font-weight: var(--font-normal),
+			padding-inline: 0.75ch,
+			padding-block: 0.5ch,
+			line-height: var(--leading-snug),
+			text-shadow: none,
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray-lighten-4),
+					outline-offset: 0,
+				),
+				hover: (
+					background: var(--color-surface-2),
+					border-color: var(--color-surface-2),
+				),
+				active: (
+					background: var(--color-surface-5),
+					border-color: var(--color-surface-5),
+				),
+				selected: (
+					color: var(--color-white),
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
+			),
+			element: (
+				icon: (
+					margin-inline: -0.125ch,
+					block-size: calc(1em * var(--leading-snug)),
+					inline-size: calc(1em * var(--leading-snug)),
+				),
+			),
+		),
 		rounded: (
 			border-radius: var(--rounded-full),
 			element: (

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

@@ -29,6 +29,8 @@ $vv-card: (
 			display: block,
 			width: 100%,
 			height: auto,
+			object-fit: cover,
+			object-position: center,
 		),
 		content: (
 			padding: var(--spacing-md),
@@ -38,7 +40,6 @@ $vv-card: (
 		),
 		footer: (
 			_alias: '> footer',
-			background-color: var(--color-surface-1),
 			border-top: var(--border) solid var(--color-surface-4),
 			padding: var(--spacing-md),
 		),

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

@@ -14,6 +14,7 @@ $vv-input-checkbox: (
 			cursor: not-allowed,
 		),
 		readonly: (
+			opacity: 1,
 			cursor: default,
 			pointer-events: none,
 		),

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

@@ -14,6 +14,7 @@ $vv-input-radio: (
 			cursor: not-allowed,
 		),
 		readonly: (
+			opacity: 1,
 			cursor: default,
 			pointer-events: none,
 		),

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

@@ -0,0 +1 @@
+$vv-nav: () !default;

package/src/tools/_mixins.scss

@@ -396,7 +396,8 @@
 					open,
 					close,
 					determinate,
-					indeterminate
+					indeterminate,
+					selected
 				),
 				$state
 			)
@@ -503,7 +504,7 @@
 								'#{$modifier}#{$alias}:#{$state}'
 							);
 						}
-					} @else {
+					} @else if $state != 'selected' {
 						$selectors: list.join(
 							$selectors,
 							'#{$modifier}#{$block-item}:not([disabled]):#{$state}'
@@ -664,12 +665,14 @@
 										progress-bar,
 										progress-value,
 										inner-element,
+										marker,
 										-webkit-progress-bar,
 										-webkit-progress-value,
 										-webkit-inner-element,
 										-moz-progress-bar,
 										-moz-progress-value,
-										-moz-inner-element
+										-moz-inner-element,
+										-webkit-details-marker
 									),
 									$pseudo-element
 								)
@@ -684,11 +687,12 @@
 										$pseudo-element
 									) {
 										@if not $original {
-											@if not
+											@if not(
 												map.has-key(
 													$pseudo-map,
 													'content'
 												)
+											)
 											{
 												content: '';
 											}
@@ -763,7 +767,7 @@
 							);
 						}
 
-						#{$key}: #{$value};
+						#{$key}: $value;
 					}
 				}
 			}
@@ -785,6 +789,7 @@
 	} @else if $enabled {
 		$selector: ':where(#{$selector})';
 	}
+
 	#{$selector} {
 		@content;
 	}