@oscarpalmer/oui 0.18.0 → 0.20.0

package/src/css/content.scss

@@ -3,7 +3,7 @@
 @use './mixins' as mixins;
 
 @mixin thumb($background, $shadow) {
-	@include mixins.shadowSmall(
+	@include mixins.shadow-small(
 		color-mix(in oklab, $shadow, transparent 33%),
 		color-mix(in oklab, white, transparent 82.5%)
 	);
@@ -38,14 +38,12 @@
 		align-items: center;
 		list-style: none;
 		outline: 4px solid
-			color-mix(
-				in oklab,
-				var(--oui-blue-6),
-				transparent var(--oui-outline-percentage, 100%)
-			);
+			color-mix(in oklab, var(--oui-blue-6), transparent var(--oui-outline-percentage, 100%));
 		outline-offset: 0.25em;
 		border-radius: 0.125em;
-		transition: 0.125s ease-in-out, margin 0s;
+		transition:
+			0.125s ease-in-out,
+			margin 0s;
 		cursor: pointer;
 
 		&::before {
@@ -53,7 +51,7 @@
 			width: 1em;
 			height: 1em;
 			margin: 0 0.5em 0 0;
-			background-color: currentColor;
+			background-color: currentcolor;
 			mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
 			mask-size: contain;
 			mask-position: center;

package/src/css/flex.scss

@@ -15,19 +15,19 @@
 }
 
 .flow {
-	:where(&-large) {
+	:where(&-large, &--large) {
 		gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
 	}
 
-	:where(&-nowrap) {
+	:where(&-nowrap, &--nowrap) {
 		flex-wrap: nowrap;
 	}
 
-	:where(&-small) {
+	:where(&-small, &--small) {
 		gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
 	}
 
-	:where(&-text) {
+	:where(&-text, &--text) {
 		gap: var(--flow-gap-text, 1em);
 	}
 }
@@ -38,21 +38,22 @@
 }
 
 .stack {
-	:where(&-large) {
+	:where(&-large, &--large) {
 		gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
 	}
 
-	:where(&-small) {
+	:where(&-small, &--small) {
 		gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
 	}
 
-	:where(&-text) {
+	:where(&-text, &--text) {
 		gap: var(--stack-gap-text, 1em);
 	}
 }
 
 .flex {
-	&-reverse {
+	&-reverse,
+	&--reverse {
 		:where(&[class^='flow' i], &[class*=' flow' i]) {
 			flex-direction: row-reverse;
 		}
@@ -63,20 +64,20 @@
 	}
 }
 
-$alignmentOrigins: (
+$alignment-origins: (
 	c: 'content',
 	i: 'items',
 	s: 'self',
 );
 
-$alignmentValues: (
+$alignment-values: (
 	c: 'center',
 	fe: 'flex-end',
 	fs: 'flex-start',
 	s: 'stretch',
 );
 
-$justificationValues: (
+$justification-values: (
 	sa: 'space-around',
 	sb: 'space-between',
 	se: 'space-evenly',
@@ -87,20 +88,20 @@ $types: (
 	j: 'justify',
 );
 
-@each $typeKey, $typeValue in $types {
-	@each $alignmentOriginKey, $alignmentOriginValue in $alignmentOrigins {
-		.flex-#{$typeKey}#{$alignmentOriginKey} {
-			@each $alignmentValueKey, $alignmentValueValue in $alignmentValues {
-				:where(&-#{$alignmentValueKey}) {
-					#{$typeValue}-#{$alignmentOriginValue}: #{$alignmentValueValue};
+@each $type-key, $type-value in $types {
+	@each $alignment-origin-key, $alignment-origin-value in $alignment-origins {
+		.flex-#{$type-key}#{$alignment-origin-key} {
+			@each $alignment-value-key, $alignment-value-value in $alignment-values {
+				:where(&-#{$alignment-value-key}, &--#{$alignment-value-key}) {
+					#{$type-value}-#{$alignment-origin-value}: #{$alignment-value-value};
 				}
 			}
 		}
 	}
 
-	@each $justificationKey, $justificationValue in $justificationValues {
-		:where(.flex-#{$typeKey}c-#{$justificationKey}) {
-			#{$typeValue}-content: #{$justificationValue};
+	@each $justification-key, $justification-value in $justification-values {
+		:where(.flex-#{$type-key}c-#{$justification-key}, .flex-#{$type-key}c--#{$justification-key}) {
+			#{$type-value}-content: #{$justification-value};
 		}
 	}
 }

package/src/css/form.scss

@@ -54,11 +54,7 @@
 	--oui-outline-value: var(--oui-blue-6);
 
 	outline: 4px solid
-		color-mix(
-			in oklab,
-			var(--oui-outline-value),
-			transparent var(--oui-outline-percentage)
-		);
+		color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
 	outline-offset: 0;
 	transition: 0.125s ease-in-out;
 }
@@ -105,17 +101,17 @@
 	}
 
 	:where(
-			&:is(
-					[type='date' i],
-					[type='datetime-local' i],
-					[type='month' i],
-					[type='number' i],
-					[type='tel' i],
-					[type='time' i],
-					[type='url' i],
-					[type='week' i]
-				)
-		) {
+		&:is(
+			[type='date' i],
+			[type='datetime-local' i],
+			[type='month' i],
+			[type='number' i],
+			[type='tel' i],
+			[type='time' i],
+			[type='url' i],
+			[type='week' i]
+		)
+	) {
 		font-variant-numeric: tabular-nums;
 	}
 
@@ -164,7 +160,7 @@
 			);
 			border: 1px solid var(--oui-absolute);
 			border-radius: 1.25em;
-			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.125);
+			box-shadow: 0 1px 2px 2px rgb(0 0 0 / 12.5%);
 			cursor: pointer;
 		}
 
@@ -176,15 +172,11 @@
 	}
 
 	:where(
-			&.oui-validate:not(
-					[disabled],
-					[readonly],
-					[aria-disabled='true' i]
-				):is(
-					:user-invalid:not([aria-invalid='false' i]),
-					[aria-invalid='true' i]
-				)
-		) {
+		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
+				:user-invalid:not([aria-invalid='false' i]),
+				[aria-invalid='true' i]
+			)
+	) {
 		@include invalid;
 
 		&::file-selector-button {
@@ -208,12 +200,11 @@
 	}
 
 	:where(
-			&.oui-validate:not(
-					[disabled],
-					[readonly],
-					[aria-disabled='true' i]
-				):is(:user-valid:not([aria-invalid='true' i]), [aria-invalid='false' i])
-		) {
+		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
+				:user-valid:not([aria-invalid='true' i]),
+				[aria-invalid='false' i]
+			)
+	) {
 		@include valid;
 
 		&::file-selector-button {
@@ -246,11 +237,7 @@
 
 			@media (hover: hover) {
 				&:hover {
-					outline-color: color-mix(
-						in oklab,
-						var(--oui-blue-6),
-						transparent 75%
-					);
+					outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
 				}
 			}
 
@@ -278,7 +265,7 @@
 		&::range-thumb {
 			--oui-background-value: var(--oui-blue-6);
 
-			box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.25);
+			box-shadow: 0 1px 2px 2px rgb(0 0 0 / 25%);
 		}
 	}
 
@@ -386,7 +373,9 @@ select.oui-input:is([multiple]) {
 :where(textarea.oui-input) {
 	min-height: 4em;
 	resize: vertical;
-	transition: all 0.125s ease-in-out, height 0s;
+	transition:
+		all 0.125s ease-in-out,
+		height 0s;
 }
 
 :where(.oui-label, .oui-legend) {
@@ -441,19 +430,11 @@ select.oui-input:is([multiple]) {
 			transparent var(--oui-background-percentage)
 		);
 		outline: 4px solid
-			color-mix(
-				in oklab,
-				var(--oui-outline-value),
-				transparent var(--oui-outline-percentage)
-			);
+			color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
 		outline-offset: 0;
 		border: 1px solid var(--oui-border-value);
 		box-shadow: inset 0 1px 2px 0
-			color-mix(
-				in oklab,
-				var(--oui-shadow-value),
-				transparent var(--oui-shadow-percentage)
-			);
+			color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
 	}
 
 	&::after {
@@ -483,7 +464,7 @@ select.oui-input:is([multiple]) {
 			height: 1.5em;
 			background-color: var(--oui-absolute);
 			border-radius: 1.5em;
-			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.125);
+			box-shadow: 0 1px 2px 1px rgb(0 0 0 / 12.5%);
 			font-size: 0.75em;
 			font-weight: bold;
 			line-height: 1.5em;
@@ -499,7 +480,7 @@ select.oui-input:is([multiple]) {
 
 		&::after {
 			content: attr(oui-on, '\2713');
-			box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25);
+			box-shadow: 0 1px 2px 1px rgb(0 0 0 / 25%);
 			right: 0.25em;
 		}
 	}
@@ -536,7 +517,7 @@ select.oui-input:is([multiple]) {
 			content: attr(oui-on, '\2713');
 			width: 1.5em;
 			height: 1.5em;
-			text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+			text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
 			font-weight: bold;
 			line-height: 1.5em;
 			text-align: center;
@@ -557,7 +538,7 @@ select.oui-input:is([multiple]) {
 			width: 0.75em;
 			height: 0.75em;
 			background-color: var(--oui-absolute);
-			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+			box-shadow: 0 1px 2px 0 rgb(0 0 0 / 50%);
 			inset: 0.375em auto auto 0.375em;
 		}
 	}
@@ -599,11 +580,7 @@ select.oui-input:is([multiple]) {
 			color: var(--oui-blue-8);
 		}
 
-		:where(
-				&:has(
-						input:not([disabled], [aria-disabled='true' i]):is(:checked)
-					):hover
-			) {
+		:where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover) {
 			--oui-background-percentage: 50%;
 			--oui-background-value: var(--oui-blue-6);
 		}
@@ -614,7 +591,7 @@ select.oui-input:is([multiple]) {
 		--oui-background-value: var(--oui-gray-0);
 		--oui-border-value: var(--oui-gray-3);
 		--oui-foreground-percentage: 25%;
-		--oui-foreground-value: currentColor;
+		--oui-foreground-value: currentcolor;
 
 		color: color-mix(
 			in oklab,
@@ -642,5 +619,5 @@ select.oui-input:is([multiple]) {
 }
 
 :where(.oui-switch input, .oui-toggle input) {
-	@include mixins.visuallyHidden;
+	@include mixins.visually-hidden;
 }

package/src/css/message.scss

@@ -11,12 +11,8 @@
 		);
 
 		@include mixins.card(
-			color-mix(
-				in oklab,
-				var(--oui-background, var(--oui-gray-0)),
-				transparent 25%
-			),
-			var(--oui-shadow-mixed),
+			color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%),
+			var(--oui-shadow-mixed)
 		);
 
 		max-width: fit-content;
@@ -47,42 +43,42 @@
 		gap: 1em;
 	}
 
-	:where(&-blue, &-info) {
+	:where(&--blue, &--info) {
 		--oui-background: var(--oui-blue-0);
 		--oui-border: var(--oui-blue-2);
 		--oui-foreground: var(--oui-blue-8);
 		--oui-shadow-value: var(--oui-blue-6);
 	}
 
-	:where(&-green, &-success) {
+	:where(&--green, &--success) {
 		--oui-background: var(--oui-green-0);
 		--oui-border: var(--oui-green-2);
 		--oui-foreground: var(--oui-green-8);
 		--oui-shadow-value: var(--oui-green-6);
 	}
 
-	:where(&-orange, &-warning) {
+	:where(&--orange, &--warning) {
 		--oui-background: var(--oui-orange-0);
 		--oui-border: var(--oui-orange-2);
 		--oui-foreground: var(--oui-orange-8);
 		--oui-shadow-value: var(--oui-orange-6);
 	}
 
-	:where(&-purple, &-special) {
+	:where(&--purple, &--special) {
 		--oui-background: var(--oui-purple-0);
 		--oui-border: var(--oui-purple-2);
 		--oui-foreground: var(--oui-purple-8);
 		--oui-shadow-value: var(--oui-purple-6);
 	}
 
-	:where(&-red, &-error) {
+	:where(&--red, &--error) {
 		--oui-background: var(--oui-red-0);
 		--oui-border: var(--oui-red-2);
 		--oui-foreground: var(--oui-red-8);
 		--oui-shadow-value: var(--oui-red-6);
 	}
 
-	:where(&-yellow, &-notice) {
+	:where(&--yellow, &--notice) {
 		--oui-background: var(--oui-yellow-0);
 		--oui-border: var(--oui-yellow-2);
 		--oui-foreground: var(--oui-yellow-8);

package/src/css/mixins.scss

@@ -40,11 +40,10 @@
 	transition: 0.125s ease-in-out;
 }
 
-@mixin card($backgroundColor: var(--oui-absolute), $boxShadowColor: color-mix(
-		in oklab,
-		var(--oui-gray-6),
-		transparent 92.5%
-	)) {
+@mixin card(
+	$backgroundColor: var(--oui-absolute),
+	$boxShadowColor: color-mix(in oklab, var(--oui-gray-6), transparent 92.5%)
+) {
 	@include shadow($boxShadowColor);
 
 	padding: 1em 1.25em;
@@ -52,19 +51,49 @@
 	border-radius: 0.5em;
 }
 
-@mixin shadow($color: rgba(0, 0, 0, 0.05), $inset: transparent) {
+@mixin floatable() {
+	@include shadow-overlay;
+
+	--margin-left: 0;
+	--margin-top: 0;
+
+	margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
+	pointer-events: all !important;
+
+	&[position^='above'],
+	&[position^='top'] {
+		--margin-top: -0.5rem;
+	}
+
+	&[position^='below'],
+	&[position^='bottom'] {
+		--margin-top: 0.5rem;
+	}
+
+	&[position^='end'],
+	&[position^='right'] {
+		--margin-left: 0.5rem;
+	}
+
+	&[position^='left'],
+	&[position^='start'] {
+		--margin-left: -0.5rem;
+	}
+}
+
+@mixin shadow($color: rgb(0 0 0 / 5%), $inset: transparent) {
 	box-shadow:
 		inset 0 1px 0 0 $inset,
 		0 0 0 1px $color,
-		0 1px 2px -.5px $color,
+		0 1px 2px -0.5px $color,
 		0 2px 4px -1px $color;
 }
 
-@mixin shadowOverlay($color: rgba(0, 0, 0, 0.05), $inset: transparent) {
+@mixin shadow-overlay($color: rgb(0 0 0 / 5%), $inset: transparent) {
 	box-shadow:
 		inset 0 1px 0 0 $inset,
 		0 0 0 1px $color,
-		0 1px 2px -.5px $color,
+		0 1px 2px -0.5px $color,
 		0 2px 4px -1px $color,
 		0 4px 8px -2px $color,
 		0 8px 16px -4px $color,
@@ -73,18 +102,17 @@
 		0 64px 128px -32px $color;
 }
 
-@mixin shadowSmall($color: rgba(0, 0, 0, 0.05), $inset: transparent) {
+@mixin shadow-small($color: rgb(0 0 0 / 5%), $inset: transparent) {
 	box-shadow:
 		inset 0 1px 0 0 $inset,
 		0 0 0 1px $color,
-		0 1px 2px -.5px $color;
+		0 1px 2px -0.5px $color;
 }
 
-@mixin visuallyHidden() {
+@mixin visually-hidden() {
 	width: 1px !important;
 	height: 1px !important;
 	padding: 0 !important;
-	clip: rect(1px, 1px 1px, 1px) !important;
 	clip-path: inset(50%) !important;
 	overflow: hidden !important;
 	border: 0 !important;

package/src/css/popover.scss

@@ -1,13 +1,18 @@
 @use 'mixins.scss' as mixins;
 
 :where([oui-popover-content]) {
-	@include mixins.shadowOverlay;
+	@include mixins.floatable;
 
 	padding: 1rem;
+	overscroll-behavior: contain;
 	background-color: var(--oui-absolute);
 	border-radius: 0.5rem;
 
 	&:focus {
 		outline: none;
 	}
-}
+
+	* {
+		overscroll-behavior: contain;
+	}
+}

package/src/css/reset.scss

@@ -54,7 +54,7 @@
 	/** Prevent text size inflation (e.g., after orientation change) [AB][RE][SE] */
 	text-size-adjust: none;
 	tab-size: 4;
-	word-break: break-word;
+	overflow-wrap: break-word;
 }
 
 :where(body) {
@@ -93,18 +93,18 @@
 }
 
 :where(
-		button,
-		input[type='button' i],
-		input[type='checkbox' i],
-		input[type='file' i],
-		input[type='image' i],
-		input[type='radio' i],
-		input[type='reset' i],
-		input[type='submit' i],
-		summary
-	) {
-		/** Correct the inability to style clickable types in iOS [HR][RS][SE] */
-	appearance: button;
+	button,
+	input[type='button' i],
+	input[type='checkbox' i],
+	input[type='file' i],
+	input[type='image' i],
+	input[type='radio' i],
+	input[type='reset' i],
+	input[type='submit' i],
+	summary
+) {
+	/** Correct the inability to style clickable types in iOS [HR][RS][SE] */
+	appearance: auto;
 	/** Ditto */
 	cursor: pointer;
 }
@@ -171,7 +171,7 @@
 }
 
 :where(small, sub, sup) {
-	font-size: 0.875rem;
+	font-size: 0.875em;
 }
 
 :where(sub, sup) {
@@ -191,7 +191,7 @@
 :where(table) {
 	border-collapse: collapse;
 	/** Correct table border colour in Chrome, Edge, and Safari [SE] */
-	border-color: currentColor;
+	border-color: currentcolor;
 	/** Modernized border spacing [HR] */
 	border-spacing: 0;
 	/** More legible numbers [HR] */
@@ -271,7 +271,7 @@
 
 ::file-selector-button {
 	/** Correct the inability to style upload buttons in iOS and Safari [RS][SE] */
-	appearance: button;
+	appearance: auto;
 	color: inherit;
 	font: inherit;
 	line-height: 1.25;
@@ -292,7 +292,7 @@
 
 ::-webkit-search-decoration {
 	/** Remove the inner padding in Chrome, Edge, and Safari on macOS [SE] */
-	-webkit-appearance: none;
+	appearance: none;
 }
 
 /**
@@ -346,7 +346,7 @@
 }
 
 :where(svg:not([fill])) {
-	fill: currentColor;
+	fill: currentcolor;
 }
 
 /**

package/src/css/splitter.scss

@@ -8,20 +8,20 @@ oui-splitter {
 	}
 
 	:where(& > :first-child) {
-		flex: var(--oui-splitter-size, .5);
+		flex: var(--oui-splitter-size, 0.5);
 	}
 
 	:where(& > :last-child) {
-		flex: calc(1 - var(--oui-splitter-size, .5));
+		flex: calc(1 - var(--oui-splitter-size, 0.5));
 	}
 }
 
 :where([oui-splitter-separator]) {
-	width: .25rem;
-	background-color: rgba(0, 0, 0, 0.1);
-	border-radius: .25rem;
+	width: 0.25rem;
+	background-color: rgb(0 0 0 / 10%);
+	border-radius: 0.25rem;
 	position: relative;
-	transition: background .125s ease-in-out;
+	transition: background 0.125s ease-in-out;
 }
 
 :where([oui-splitter-separator]:has([oui-splitter-handle]:focus)),
@@ -33,7 +33,7 @@ oui-splitter {
 :where([oui-splitter-handle]) {
 	width: 2rem;
 	height: 4rem;
-	padding: .875rem;
+	padding: 0.875rem;
 	position: absolute;
 	inset: 50% auto auto 50%;
 	transform: translate3d(-50%, -50%, 0);
@@ -48,11 +48,13 @@ oui-splitter {
 		width: 100%;
 		height: 100%;
 		display: block;
-		background-color: rgba(0, 0, 0, 0.25);
-		outline: .25rem solid transparent;
-		outline-offset: .25rem;
-		border-radius: .25rem;
-		transition: background .125s ease-in-out, outline .125s ease-in-out;
+		background-color: rgb(0 0 0 / 25%);
+		outline: 0.25rem solid transparent;
+		outline-offset: 0.25rem;
+		border-radius: 0.25rem;
+		transition:
+			background 0.125s ease-in-out,
+			outline 0.125s ease-in-out;
 	}
 }
 
@@ -76,7 +78,7 @@ oui-splitter[oui-splitter-horizontal] {
 
 	:where(& [oui-splitter-separator]) {
 		width: 100%;
-		height: .25rem;
+		height: 0.25rem;
 	}
 
 	:where(& [oui-splitter-handle]) {