@oscarpalmer/oui 0.18.0 → 0.19.0

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,19 @@
 	border-radius: 0.5em;
 }
 
-@mixin shadow($color: rgba(0, 0, 0, 0.05), $inset: transparent) {
+@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,14 +72,14 @@
 		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;

package/src/css/popover.scss

@@ -1,7 +1,7 @@
 @use 'mixins.scss' as mixins;
 
 :where([oui-popover-content]) {
-	@include mixins.shadowOverlay;
+	@include mixins.shadow-overlay;
 
 	padding: 1rem;
 	background-color: var(--oui-absolute);
@@ -10,4 +10,4 @@
 	&:focus {
 		outline: none;
 	}
-}
+}

package/src/css/reset.scss

@@ -93,17 +93,17 @@
 }
 
 :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] */
+	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;
 	/** Ditto */
 	cursor: pointer;
@@ -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] */
@@ -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]) {

package/src/css/table.scss

@@ -6,11 +6,11 @@
 		background-color: var(--oui-absolute);
 	}
 
-	:where(&-wrapper) {
+	:where(&_wrapper) {
 		max-height: 32em;
 		overflow: auto;
 		border: 1px solid var(--oui-gray-3);
-		border-radius: .25em;
+		border-radius: 0.25em;
 		position: relative;
 		overscroll-behavior-y: none;
 	}
@@ -20,10 +20,10 @@
 		align-content: center;
 		background-color: var(--oui-gray-1);
 		border: solid var(--oui-gray-3);
-		border-width: 0 0 1px 0;
-		font-size: .875rem;
+		border-width: 0 0 1px;
+		font-size: 0.875rem;
 		text-align: left;
-		text-indent: .5rem;
+		text-indent: 0.5rem;
 		position: sticky;
 		top: 0;
 		z-index: 2;
@@ -50,7 +50,7 @@
 			height: 4px;
 			background-image: linear-gradient(
 				to var(--oui-shadow-direction),
-				rgba(0, 0, 0, 0.1),
+				rgb(0 0 0 / 10%),
 				transparent
 			);
 			position: absolute;
@@ -58,13 +58,13 @@
 	}
 
 	:where(& th, & td) {
-		padding: .5em .625rem;
+		padding: 0.5em 0.625rem;
 	}
 
 	:where(& thead th) {
-		font-size: .75rem;
+		font-size: 0.75rem;
 		font-weight: bold;
-		letter-spacing: .1em;
+		letter-spacing: 0.1em;
 		text-align: left;
 		text-transform: uppercase;
 		top: 0;
@@ -73,7 +73,7 @@
 			--oui-shadow-direction: bottom;
 
 			border-top: 1px solid var(--oui-gray-3);
-			inset: 100% 0 0 0;
+			inset: 100%;
 		}
 	}
 
@@ -88,7 +88,7 @@
 			--oui-shadow-direction: top;
 
 			border-bottom: 1px solid var(--oui-gray-3);
-			inset: -4px 0 0 0;
+			inset: -4px;
 		}
 	}
 

package/src/css/tooltip.scss

@@ -1,6 +1,27 @@
 @use 'mixins.scss' as mixins;
 
-:where([oui-tooltip]:is(abbr, b, cite, dfn, code, em, i, kbd, mark, q, samp, small, span, strong, sub, sup, time, var)) {
+:where(
+	[oui-tooltip]:is(
+		abbr,
+		b,
+		cite,
+		dfn,
+		code,
+		em,
+		i,
+		kbd,
+		mark,
+		q,
+		samp,
+		small,
+		span,
+		strong,
+		sub,
+		sup,
+		time,
+		var
+	)
+) {
 	text-decoration: underline dotted;
 	text-decoration-skip-ink: auto;
 	text-underline-offset: 0.25em;
@@ -8,7 +29,7 @@
 }
 
 :where([oui-tooltip-content]) {
-	@include mixins.shadowOverlay;
+	@include mixins.shadow-overlay;
 
 	max-width: 48ch;
 	padding: 0.75em 1em;
@@ -16,11 +37,11 @@
 	background-color: var(--oui-absolute);
 	border-radius: 0.25rem;
 	font-size: 0.875rem;
-	transition: opacity .125s ease-in-out;
+	transition: opacity 0.125s ease-in-out;
 	transition-delay: 0s;
 }
 
 :where([oui-tooltip-content][oui-tooltip-content-active]) {
 	opacity: 1;
-	transition-delay: .25s;
+	transition-delay: 0.25s;
 }

package/src/js/attributable.ts

@@ -39,9 +39,7 @@ function handleAdded(
 	nodes: Node[] | NodeList,
 	add: (element: HTMLElement) => void,
 ): void {
-	const elements = [...nodes].filter(
-		node => node instanceof HTMLElement,
-	) as HTMLElement[];
+	const elements = [...nodes].filter(node => node instanceof HTMLElement) as HTMLElement[];
 
 	const {length} = elements;
 
@@ -54,13 +52,8 @@ function handleAdded(
 	}
 }
 
-function handleRemoved(
-	nodes: Node[] | NodeList,
-	remove: (element: HTMLElement) => void,
-): void {
-	const elements = [...nodes].filter(
-		node => node instanceof HTMLElement,
-	) as HTMLElement[];
+function handleRemoved(nodes: Node[] | NodeList, remove: (element: HTMLElement) => void): void {
+	const elements = [...nodes].filter(node => node instanceof HTMLElement) as HTMLElement[];
 
 	const {length} = elements;
 

package/src/js/floatable.ts

@@ -151,9 +151,7 @@ function closeAbove(element: HTMLElement): void {
 	}
 
 	const index = state.order.findIndex(
-		floatable =>
-			floatable.options.anchor === element ||
-			floatable.options.content === element,
+		floatable => floatable.options.anchor === element || floatable.options.content === element,
 	);
 
 	if (index === -1 || index === state.order.length - 1) {
@@ -190,10 +188,7 @@ export function deactivate(floatable: Floatable): void {
 
 	floatable.options.content.hidden = true;
 
-	floatable.options.anchor.insertAdjacentElement(
-		INSERT_AFTEREND,
-		floatable.options.content,
-	);
+	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
 
 	floatable.options.onAfter?.(false);
 }
@@ -212,9 +207,7 @@ function getX(anchor: DOMRect, content: DOMRect, position: Position): number {
 	if (position.endsWith(POSITION_SUFFIX_START)) {
 		const start = anchor.left;
 
-		return start + content.width > window.innerWidth
-			? window.innerWidth - content.width
-			: start;
+		return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
 	}
 
 	if (position.startsWith(POSITION_END)) {
@@ -238,12 +231,7 @@ function getX(anchor: DOMRect, content: DOMRect, position: Position): number {
 	return left < 0 ? 0 : left;
 }
 
-function getY(
-	anchor: DOMRect,
-	content: DOMRect,
-	position: Position,
-	preferAbove: boolean,
-): number {
+function getY(anchor: DOMRect, content: DOMRect, position: Position, preferAbove: boolean): number {
 	if (position.startsWith(POSITION_ABOVE)) {
 		return anchor.top - content.height;
 	}
@@ -261,9 +249,7 @@ function getY(
 	if (position.endsWith(POSITION_TOP)) {
 		const top = anchor.top;
 
-		return top + content.height > window.innerHeight
-			? window.innerHeight - content.height
-			: top;
+		return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
 	}
 
 	if (position.startsWith(POSITION_VERTICAL)) {
@@ -399,12 +385,8 @@ function updatePosition(floatable: Floatable): void {
 		if (calculated) {
 			if (previousAnchor != null && previousContent != null) {
 				if (
-					PROPERTIES.every(
-						property => anchor[property] === previousAnchor[property],
-					) &&
-					PROPERTIES.every(
-						property => content[property] === previousContent[property],
-					)
+					PROPERTIES.every(property => anchor[property] === previousAnchor[property]) &&
+					PROPERTIES.every(property => content[property] === previousContent[property])
 				) {
 					floatable.frame = requestAnimationFrame(run);