@oscarpalmer/oui 0.9.0 → 0.11.0

package/dist/css/message.css

@@ -1,12 +1,18 @@
+/*! https://github.com/oscarpalmer/oui */
 :where(.oui-message) {
+  --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));
+  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
   border-radius: 0.5em;
-  color: var(--foreground, var(--oui-gray-8));
+  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;
 }
 :where(.oui-message h2, .oui-message h3, .oui-message h4, .oui-message h5, .oui-message h6) {
@@ -16,7 +22,7 @@
 :where(.oui-message 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;
 }
 :where(.oui-message p) {
@@ -25,32 +31,34 @@
   gap: 1em;
 }
 :where(.oui-message-blue, .oui-message-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(.oui-message-green, .oui-message-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(.oui-message-orange, .oui-message-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(.oui-message-purple, .oui-message-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(.oui-message-red, .oui-message-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(.oui-message-yellow, .oui-message-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/dist/css/reset.css

@@ -43,10 +43,11 @@
   font-family: system-ui, sans-serif;
   font-size: 100%;
   line-height: 1.5;
-  -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
-  text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  text-size-adjust: none; /* Prevent text size inflation (e.g., after orientation change) [AB][RE][SE]*/
   -moz-tab-size: 4;
+  -o-tab-size: 4;
   tab-size: 4;
 }
 
@@ -59,39 +60,43 @@
  * General
  */
 :where(a) {
+  -webkit-text-decoration-skip: ink;
   text-decoration-skip-ink: auto;
   text-underline-offset: 0.125em;
 }
 
 :where(abbr[title]) {
-  text-decoration: underline;
-  text-decoration: underline dotted;
+  text-decoration: underline; /* Add the correct text decoration in Safari [RS][SE]*/
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted; /* ditto*/
 }
 
 :where(b, strong) {
-  font-weight: bolder;
+  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari [RS][SE]*/
 }
 
 :where(button, h1, h2, h3, h4, h5, h6, input, label, legend) {
-  line-height: 1.125;
+  line-height: 1.125; /* Set shorter line heights on headings and interactive elements [AB]*/
 }
 
 :where(button, [type=button i], [type=reset i], [type=submit i]) {
   -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button; /* Correct the inability to style clickable types in iOS [RS][SE]*/
   cursor: pointer;
 }
 
 :where(code, kbd, pre, samp) {
-  font-family: monospace, monospace;
-  font-size: 1em;
+  font-family: monospace, monospace; /* Specify the font family of code elements [RS][SE]*/
+  font-size: 1em; /* Correct the odd 'em' font sizing in all browsers [RS][SE]*/
 }
 
 :where(details > summary:first-of-type) {
-  display: list-item;
+  display: list-item; /* Add the correct display in Safari [SE]*/
 }
 
 :where(dl, ol, ul) :where(dl, ol, ul) {
-  margin: 0;
+  margin: 0; /* Remove the margin on nested lists in Chrome, Edge, and Safari [SE]*/
 }
 
 :where(h1, h2, h3, h4, h5, h6) {
@@ -99,11 +104,11 @@
 }
 
 :where(hr) {
-  height: 0;
-  overflow: visible;
+  height: 0; /* Add the correct box sizing in Firefox [CR][RS][SE]*/
+  overflow: visible; /* Show the overflow in Edge and IE [CR][RS]*/
   border-style: solid;
   border-width: 1px 0 0;
-  color: inherit;
+  color: inherit; /* Correct the inheritance of border colour in Firefox [CR][RS][SE]*/
 }
 
 :where(nav) :where(ol, ul),
@@ -113,13 +118,13 @@
 }
 
 :where(nav li)::before {
-  content: "​";
+  content: "​"; /* Prevent VoiceOver from ignoring list semantics in Safari [SE]*/
   float: left;
 }
 
 :where(pre) {
-  overflow: auto;
-  white-space: pre-wrap;
+  overflow: auto; /* Prevent overflow of the container in all browsers [SE]*/
+  white-space: pre-wrap; /* Overflow by default is bad… [CR]*/
 }
 
 :where(small) {
@@ -143,83 +148,92 @@
 
 :where(table) {
   border-collapse: collapse;
-  border-color: currentColor;
-  text-indent: 0;
+  border-color: currentColor; /* Correct table border colour in Chrome, Edge, and Safari [SE]*/
+  text-indent: 0; /* Remove text indentation from table contents in Chrome, Edge, and Safari [RS][SE]*/
 }
 
 /**
  * Form-related
  */
 :where(button, input, optgroup, select, textarea) {
-  font: inherit;
+  font: inherit; /* Correct the font inheritance in Firefox, Edge, and Safari [RS][SE]*/
 }
 
 :where(button, input, select, textarea) {
-  padding: 0.25em 0.5em;
-  background-color: transparent;
-  border: 1px solid WindowFrame;
-  color: inherit;
-  letter-spacing: inherit;
+  padding: 0.25em 0.5em; /* Change the inconsistent appearance in all browsers [SE]*/
+  background-color: transparent; /* ditto*/
+  border: 1px solid WindowFrame; /* ditto*/
+  color: inherit; /* ditto*/
+  letter-spacing: inherit; /* ditto*/
 }
 
 :where(fieldset) {
-  border: 1px solid darkgrey;
+  border: 1px solid darkgrey; /* Change the inconsistent appearance in all browsers [SE]*/
 }
 
 :where(optgroup) {
-  font-weight: bold;
+  font-weight: bold; /* Restore the font weight unset by previous rules [RS]*/
 }
 
 :where(progress) {
-  vertical-align: baseline;
+  vertical-align: baseline; /* Add the correct vertical alignment in Chrome, Edge, and Firefox [RS][SE]*/
 }
 
-:where(select) {
-  -moz-appearance: none;
+:where(select, input[list]) {
   -webkit-appearance: none;
-  appearance: none;
-  padding-right: 1em;
-  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;
-  border-radius: 0;
+  -moz-appearance: none;
+  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*/
+  border-radius: 0; /* ditto*/
 }
 
 :where(select[multiple]) {
-  background-image: none;
+  background-image: none; /* Don't show the arrow for multiple choice selects [SE]*/
 }
 
 :where(textarea) {
-  resize: vertical;
+  resize: vertical; /* Change the resize direction in all browsers [RS][SE]*/
 }
 
 :where([type=color i], [type=range i]) {
-  padding: 0;
-  border-width: 0;
+  padding: 0; /* Remove the padding in all browsers [SE]*/
+  border-width: 0; /* Remove the border in all browsers [SE]*/
 }
 
 :where([type=search i]) {
   -webkit-appearance: textfield;
-  outline-offset: -2px;
+  -moz-appearance: textfield;
+  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 {
+::file-selector-button {
   -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button; /* Correct the inability to style upload buttons in iOS and Safari [RS][SE]*/
   color: inherit;
   font: inherit;
   line-height: 1.25;
 }
 
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
+::-moz-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-input-placeholder {
-  opacity: 0.54;
-  color: inherit;
+::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-search-decoration {
-  -webkit-appearance: none;
+  -webkit-appearance: none; /* Remove the inner padding in Chrome, Edge, and Safari on macOS [SE]*/
 }
 
 /**
@@ -235,7 +249,7 @@
 }
 
 :where(audio) {
-  width: 100%;
+  width: 100%; /* Better default width [CR]*/
 }
 
 :where(audio:not([controls])) {
@@ -243,7 +257,7 @@
 }
 
 :where(canvas, img, svg, video) {
-  height: auto;
+  height: auto; /* Maintain aspect ratios [CR]*/
 }
 
 :where(iframe) {
@@ -251,11 +265,11 @@
 }
 
 :where(picture) {
-  display: contents;
+  display: contents; /* Remove the unnecessary wrapping 'picture', while maintaining contents [CR]*/
 }
 
 :where(source) {
-  display: none;
+  display: none; /* Source elements have nothing to display, so we hide them entirely [CR]*/
 }
 
 :where(svg:not([fill])) {
@@ -280,3 +294,5 @@
 :where([aria-controls]) {
   cursor: pointer;
 }
+
+

package/dist/css/table.css

@@ -1,3 +1,4 @@
+/*! https://github.com/oscarpalmer/oui */
 :where(.oui-table) {
   width: 100%;
 }
@@ -22,7 +23,7 @@
   top: 0;
   z-index: 2;
 }
-:where(.oui-table tbody tr:nth-child(2n)) {
+:where(.oui-table tbody tr:nth-of-type(2n)) {
   background-color: color-mix(in oklab, var(--oui-blue-0), transparent 67%);
 }
 :where(.oui-table th, .oui-table tfoot td) {
@@ -63,3 +64,5 @@
 :where(.oui-table tr th:last-child, .oui-table tr td:last-child) {
   border-right-width: 0;
 }
+
+

package/dist/js/focus-trap.cjs

@@ -54,7 +54,7 @@ function onFocusOut() {
   if (inactive.size === 0) {
     return;
   }
-  setTimeout(() => {
+  requestAnimationFrame(() => {
     const element = find.findAncestor(
       document.activeElement,
       `[${selector}]`
@@ -64,7 +64,7 @@ function onFocusOut() {
         focusTrap.activate();
       }
     }
-  }, 0);
+  });
 }
 function onTab(event2) {
   var _a;
@@ -132,7 +132,7 @@ observer.observe(document, {
   childList: true,
   subtree: true
 });
-setTimeout(() => {
+requestAnimationFrame(() => {
   addFocusTraps(document.querySelectorAll(`[${selector}]`));
   event.on(document, "focusout", onFocusOut, {
     capture: true
@@ -144,4 +144,4 @@ setTimeout(() => {
   event.on(document, "keydown", onEscape, {
     passive: false
   });
-}, 0);
+});

package/dist/js/focus-trap.js

@@ -53,7 +53,7 @@ function onFocusOut() {
   if (inactive.size === 0) {
     return;
   }
-  setTimeout(() => {
+  requestAnimationFrame(() => {
     const element = findAncestor(
       document.activeElement,
       `[${selector}]`
@@ -63,7 +63,7 @@ function onFocusOut() {
         focusTrap.activate();
       }
     }
-  }, 0);
+  });
 }
 function onTab(event) {
   var _a;
@@ -131,7 +131,7 @@ observer.observe(document, {
   childList: true,
   subtree: true
 });
-setTimeout(() => {
+requestAnimationFrame(() => {
   addFocusTraps(document.querySelectorAll(`[${selector}]`));
   on(document, "focusout", onFocusOut, {
     capture: true
@@ -143,4 +143,4 @@ setTimeout(() => {
   on(document, "keydown", onEscape, {
     passive: false
   });
-}, 0);
+});

package/package.json

@@ -3,24 +3,30 @@
 		"name": "Oscar Palmér",
 		"url": "https://oscarpalmer.se"
 	},
+	"dependencies": {
+		"@oscarpalmer/atoms": "^0.102",
+		"@oscarpalmer/toretto": "^0.20"
+	},
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"devDependencies": {
 		"@biomejs/biome": "^1.9",
-		"@oscarpalmer/atoms": "^0.89.1",
-		"@oscarpalmer/toretto": "^0.18",
 		"@rollup/plugin-node-resolve": "^16",
 		"@rollup/plugin-typescript": "^12.1",
-		"@types/node": "^22.13",
-		"@vitest/coverage-istanbul": "^3",
+		"@types/node": "^24",
+		"@vitest/coverage-istanbul": "^3.2",
+		"autoprefixer": "^10.4",
 		"dts-bundle-generator": "^9.5",
 		"glob": "^11",
-		"happy-dom": "^17.4",
-		"sass": "^1.86",
-		"stylelint": "^16.17",
+		"jsdom": "^26.1",
+		"postcss-cli": "^11",
+		"postcss-input-range": "^6",
+		"postcss-scss": "^4",
+		"sass": "^1.89",
+		"stylelint": "^16.20",
 		"tslib": "^2.8",
 		"typescript": "^5.8",
-		"vite": "^6.2",
-		"vitest": "^3"
+		"vite": "^6.3",
+		"vitest": "^3.2"
 	},
 	"exports": {
 		".": {
@@ -65,16 +71,18 @@
 	},
 	"scripts": {
 		"build": "npm run clean && npm run build:css && npm run build:js",
-		"build:css": "npx sass ./src/css:./dist/css --no-source-map",
+		"build:css": "npm run build:postcss && npx sass ./postcss:./dist/css --no-source-map",
+		"build:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
 		"build:js": "npx vite build && npm run types",
 		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
 		"rollup": "npx rollup -c --watch",
 		"test": "npx vitest --coverage",
 		"types": "npx tsc && npx dts-bundle-generator --config ./dts.config.cts --silent",
 		"watch:css": "npx sass ./src/css:./dist/css --no-source-map --watch",
+		"watch:postcss": "npx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
 		"watch:js": "npx vite build --watch"
 	},
 	"type": "module",
 	"types": "types/index.d.cts",
-	"version": "0.9.0"
+	"version": "0.11.0"
 }

package/src/css/badge.scss

@@ -1,12 +1,23 @@
+/*! https://github.com/oscarpalmer/oui */
+
 .oui {
 	:where(&-pill, &-tag) {
+		--oui-shadow-value: color-mix(
+			in oklch,
+			var(--oui-shadow, var(--oui-gray-6)),
+			transparent 95%
+		);
+
 		display: inline-flex;
 		flex-flow: row nowrap;
 		gap: .5em;
-		background-color: var(--background, var(--oui-gray-1));
-		border: 1px solid var(--border, var(--oui-gray-3));
-		color: var(--foreground, var(--oui-gray-8));
-		line-height: 1.125;
+		background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
+		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;
 	}
 
 	:where(&-pill) {
@@ -24,6 +35,7 @@
 	}
 
 	:where(&-pill-tiny, &-tag-tiny) {
+		color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
 		font-size: .75em;
 		font-weight: bold;
 		letter-spacing: .1em;
@@ -31,38 +43,38 @@
 	}
 
 	:where(&-pill-blue, &-tag-blue) {
-		--background: var(--oui-blue-1);
-		--border: var(--oui-blue-3);
-		--foreground: var(--oui-blue-8);
+		--oui-background: var(--oui-blue-0);
+		--oui-foreground: var(--oui-blue-8);
+		--oui-shadow: var(--oui-blue-6);
 	}
 
 	:where(&-pill-green, &-tag-green) {
-		--background: var(--oui-green-1);
-		--border: var(--oui-green-3);
-		--foreground: var(--oui-green-8);
+		--oui-background: var(--oui-green-0);
+		--oui-foreground: var(--oui-green-8);
+		--oui-shadow: var(--oui-green-6);
 	}
 
 	:where(&-pill-orange, &-tag-orange) {
-		--background: var(--oui-orange-1);
-		--border: var(--oui-orange-3);
-		--foreground: var(--oui-orange-8);
+		--oui-background: var(--oui-orange-0);
+		--oui-foreground: var(--oui-orange-8);
+		--oui-shadow: var(--oui-orange-6);
 	}
 
 	:where(&-pill-purple, &-tag-purple) {
-		--background: var(--oui-purple-1);
-		--border: var(--oui-purple-3);
-		--foreground: var(--oui-purple-8);
+		--oui-background: var(--oui-purple-0);
+		--oui-foreground: var(--oui-purple-8);
+		--oui-shadow: var(--oui-purple-6);
 	}
 
 	:where(&-pill-red, &-tag-red) {
-		--background: var(--oui-red-1);
-		--border: var(--oui-red-3);
-		--foreground: var(--oui-red-8);
+		--oui-background: var(--oui-red-0);
+		--oui-foreground: var(--oui-red-8);
+		--oui-shadow: var(--oui-red-6);
 	}
 
 	:where(&-pill-yellow, &-tag-yellow) {
-		--background: var(--oui-yellow-1);
-		--border: var(--oui-yellow-3);
-		--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/button.scss

@@ -0,0 +1,90 @@
+@use './mixins' as mixins;
+
+.oui-button {
+	:where(&) {
+		@include mixins.button;
+	}
+
+	:where(&-blue) {
+		--oui-background-value: var(--oui-blue-2);
+		--oui-foreground-value: var(--oui-blue-8);
+		--oui-outline-value: var(--oui-blue-6);
+	}
+
+	:where(&-green) {
+		--oui-background-value: var(--oui-green-2);
+		--oui-foreground-value: var(--oui-green-8);
+		--oui-outline-value: var(--oui-green-6);
+	}
+
+	:where(&-orange) {
+		--oui-background-value: var(--oui-orange-2);
+		--oui-foreground-value: var(--oui-orange-8);
+		--oui-outline-value: var(--oui-orange-6);
+	}
+
+	:where(&-purple) {
+		--oui-background-value: var(--oui-purple-2);
+		--oui-foreground-value: var(--oui-purple-8);
+		--oui-outline-value: var(--oui-purple-6);
+	}
+
+	:where(&-red) {
+		--oui-background-value: var(--oui-red-2);
+		--oui-foreground-value: var(--oui-red-8);
+		--oui-outline-value: var(--oui-red-6);
+	}
+
+	:where(&-yellow) {
+		--oui-background-value: var(--oui-yellow-2);
+		--oui-foreground-value: var(--oui-yellow-8);
+		--oui-outline-value: var(--oui-yellow-6);
+	}
+
+	:where(&-rounded) {
+		padding: 0.5em 1em;
+		flex-wrap: nowrap;
+		border-radius: 5em;
+		white-space: nowrap;
+	}
+
+	:where(&-small) {
+		font-size: 0.875em;
+	}
+
+	:where(&-tiny) {
+		--oui-foreground-percentage: 12.5%;
+
+		font-size: 0.75em;
+		font-weight: bold;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+	}
+
+	:where(&:focus-visible) {
+		--oui-outline-percentage: 75%;
+	}
+
+	@media (hover: hover) {
+		:where(&:not([disabled], [aria-disabled='true' i]):hover) {
+			--oui-background-percentage: 50%;
+			--oui-foreground-percentage: 25%;
+			--oui-shadow-percentage: 90%;
+		}
+	}
+
+	:where(&:not([disabled], [aria-disabled='true' i]):active) {
+		box-shadow:
+			0 0 0 1px var(--oui-shadow-mixed),
+			inset 0 1px 2px 0 var(--oui-shadow-mixed),
+			inset 0 2px 4px 0 var(--oui-shadow-mixed);
+	}
+
+	:where(&[disabled], &[aria-disabled='true' i]) {
+		--oui-background-percentage: 80%;
+		--oui-foreground-percentage: 20%;
+		--oui-shadow-percentage: 95%;
+
+		font-style: italic;
+	}
+}