@oscarpalmer/oui 0.9.0 → 0.11.0

package/src/css/mixins.scss

@@ -1,3 +1,46 @@
+@mixin button() {
+	--oui-background-percentage: 25%;
+	--oui-foreground-percentage: 0%;
+	--oui-outline-percentage: 100%;
+	--oui-shadow-percentage: 85%;
+
+	--oui-shadow-value: color-mix(
+		in oklch,
+		var(--oui-outline-value, var(--oui-gray-6)),
+		transparent var(--oui-shadow-percentage)
+	);
+
+	padding: 0.5em 0.75em;
+	display: inline-flex;
+	flex-flow: row wrap;
+	gap: 0.75em;
+	align-items: center;
+	border-radius: 0.25em;
+	background-color: color-mix(
+		in oklab,
+		var(--oui-background-value, var(--oui-gray-2)),
+		transparent var(--oui-background-percentage)
+	);
+	outline: 4px solid
+		color-mix(
+			in oklab,
+			var(--oui-outline-value, var(--oui-gray-6)),
+			transparent var(--oui-outline-percentage)
+		);
+	border: none;
+	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: color-mix(
+		in oklab,
+		var(--oui-foreground-value, var(--oui-gray-8)),
+		transparent var(--oui-foreground-percentage)
+	);
+	line-height: 1.25;
+	transition: 0.125s ease-in-out;
+}
+
 @mixin visuallyHidden() {
 	width: 1px !important;
 	height: 1px !important;

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);
+});