@oscarpalmer/oui 0.9.0 → 0.10.0

package/src/css/message.scss

@@ -1,13 +1,26 @@
+/*! https://github.com/oscarpalmer/oui */
+
 .oui-message {
 	:where(&) {
+		--oui-shadow-value: color-mix(
+			in oklch,
+			var(--oui-shadow, var(--oui-gray-6)),
+			transparent 95%
+		);
+
 		padding: 1em;
 		display: inline-flex;
 		flex-flow: column nowrap;
 		gap: 1em;
-		background-color: var(--background, var(--oui-gray-0));
-		border: 1px solid var(--border, var(--oui-gray-2));
-		border-radius: .5em;
-		color: var(--foreground, var(--oui-gray-8));
+		background-color: color-mix(
+			in oklab,
+			var(--oui-background, var(--oui-gray-0)),
+			transparent 25%
+		);
+		border-radius: 0.5em;
+		box-shadow: 0 0 0 1px var(--oui-shadow-value),
+			0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
+		color: var(--oui-foreground, var(--oui-gray-8));
 		line-height: 1.25;
 	}
 
@@ -19,7 +32,7 @@
 	:where(& hr) {
 		height: 1px;
 		margin: 0 -1em;
-		background-color: var(--border, var(--oui-gray-2));
+		background-color: var(--oui-shadow-value, var(--oui-gray-2));
 		border: none;
 	}
 
@@ -30,38 +43,38 @@
 	}
 
 	:where(&-blue, &-info) {
-		--background: var(--oui-blue-0);
-		--border: var(--oui-blue-2);
-		--foreground: var(--oui-blue-8);
+		--oui-background: var(--oui-blue-0);
+		--oui-foreground: var(--oui-blue-8);
+		--oui-shadow: var(--oui-blue-6);
 	}
 
 	:where(&-green, &-success) {
-		--background: var(--oui-green-0);
-		--border: var(--oui-green-2);
-		--foreground: var(--oui-green-8);
+		--oui-background: var(--oui-green-0);
+		--oui-foreground: var(--oui-green-8);
+		--oui-shadow: var(--oui-green-6);
 	}
 
 	:where(&-orange, &-warning) {
-		--background: var(--oui-orange-0);
-		--border: var(--oui-orange-2);
-		--foreground: var(--oui-orange-8);
+		--oui-background: var(--oui-orange-0);
+		--oui-foreground: var(--oui-orange-8);
+		--oui-shadow: var(--oui-orange-6);
 	}
 
 	:where(&-purple, &-special) {
-		--background: var(--oui-purple-0);
-		--border: var(--oui-purple-2);
-		--foreground: var(--oui-purple-8);
+		--oui-background: var(--oui-purple-0);
+		--oui-foreground: var(--oui-purple-8);
+		--oui-shadow: var(--oui-purple-6);
 	}
 
 	:where(&-red, &-error) {
-		--background: var(--oui-red-0);
-		--border: var(--oui-red-2);
-		--foreground: var(--oui-red-8);
+		--oui-background: var(--oui-red-0);
+		--oui-foreground: var(--oui-red-8);
+		--oui-shadow: var(--oui-red-6);
 	}
 
 	:where(&-yellow, &-notice) {
-		--background: var(--oui-yellow-0);
-		--border: var(--oui-yellow-2);
-		--foreground: var(--oui-yellow-8);
+		--oui-background: var(--oui-yellow-0);
+		--oui-foreground: var(--oui-yellow-8);
+		--oui-shadow: var(--oui-yellow-6);
 	}
 }

package/src/css/reset.scss

@@ -45,10 +45,7 @@
 	font-family: system-ui, sans-serif;
 	font-size: 100%;
 	line-height: 1.5;
-	-moz-text-size-adjust: none; // Prevent text size inflation (e.g., after orientation change) [AB][RE][SE]
-	-webkit-text-size-adjust: none; // ditto
-	text-size-adjust: none; // ditto
-	-moz-tab-size: 4;
+	text-size-adjust: none; // Prevent text size inflation (e.g., after orientation change) [AB][RE][SE]
 	tab-size: 4;
 }
 
@@ -80,7 +77,7 @@
 }
 
 :where(button, [type='button' i], [type='reset' i], [type='submit' i]) {
-	-webkit-appearance: button; // Correct the inability to style clickable types in iOS [RS][SE]
+	appearance: button; // Correct the inability to style clickable types in iOS [RS][SE]
 	cursor: pointer;
 }
 
@@ -178,10 +175,8 @@
 	vertical-align: baseline; // Add the correct vertical alignment in Chrome, Edge, and Firefox [RS][SE]
 }
 
-:where(select) {
-	-moz-appearance: none; // Change the inconsistent appearance in all browsers [SE]
-	-webkit-appearance: none; // ditto
-	appearance: none; // ditto
+:where(select, input[list]) {
+	appearance: none; // Change the inconsistent appearance in all browsers [SE]
 	padding-right: 1em; // ditto
 	background: 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")
 		no-repeat right center / 1em; // ditto
@@ -202,27 +197,27 @@
 }
 
 :where([type='search' i]) {
-	-webkit-appearance: textfield; // Correct the odd appearance in Chrome, Edge, and Safari [RS][SE]
+	appearance: textfield; // Correct the odd appearance in Chrome, Edge, and Safari [RS][SE]
 	outline-offset: -2px; // Correct the outline style in Safari [RS][SE]
 }
 
-::-webkit-file-upload-button {
-	-webkit-appearance: button; // Correct the inability to style upload buttons in iOS and Safari [RS][SE]
+::file-selector-button {
+	appearance: button; // Correct the inability to style upload buttons in iOS and Safari [RS][SE]
 	color: inherit;
 	font: inherit;
 	line-height: 1.25;
 }
 
+::placeholder {
+	opacity: 0.54; // Correct the text style of placeholders in Chrome, Edge, and Safari. [SE]
+	color: inherit; // Correct the text style of placeholders in Chrome, Edge, and Safari. [SE]
+}
+
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
 	height: auto; // Correct the cursor style of increment and decrement buttons in Safari [RS][SE]
 }
 
-::-webkit-input-placeholder {
-	opacity: 0.54; // Correct the text style of placeholders in Chrome, Edge, and Safari. [SE]
-	color: inherit; // Correct the text style of placeholders in Chrome, Edge, and Safari. [SE]
-}
-
 ::-webkit-search-decoration {
 	-webkit-appearance: none; // Remove the inner padding in Chrome, Edge, and Safari on macOS [SE]
 }

package/src/css/table.scss

@@ -1,3 +1,5 @@
+/*! https://github.com/oscarpalmer/oui */
+
 .oui-table {
 	:where(&) {
 		width: 100%;
@@ -26,7 +28,7 @@
 		z-index: 2;
 	}
 
-	:where(& tbody tr:nth-child(2n)) {
+	:where(& tbody tr:nth-of-type(2n)) {
 		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
 	}
 

package/src/js/focus-trap.ts

@@ -65,7 +65,7 @@ function onFocusOut(): void {
 		return;
 	}
 
-	setTimeout(() => {
+	requestAnimationFrame(() => {
 		const element = findAncestor(
 			document.activeElement as never,
 			`[${selector}]`,
@@ -76,7 +76,7 @@ function onFocusOut(): void {
 				focusTrap.activate();
 			}
 		}
-	}, 0);
+	});
 }
 
 function onTab(event: KeyboardEvent): void {
@@ -163,7 +163,7 @@ observer.observe(document, {
 	subtree: true,
 });
 
-setTimeout(() => {
+requestAnimationFrame(() => {
 	addFocusTraps(document.querySelectorAll(`[${selector}]`));
 
 	on(document, 'focusout', onFocusOut, {
@@ -178,4 +178,4 @@ setTimeout(() => {
 	on(document, 'keydown', onEscape, {
 		passive: false,
 	});
-}, 0);
+});