@oscarpalmer/oui 0.8.0 → 0.10.0

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

@@ -0,0 +1,147 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const number = require("@oscarpalmer/atoms/number");
+const event = require("@oscarpalmer/toretto/event");
+const find = require("@oscarpalmer/toretto/find");
+const focusable = require("@oscarpalmer/toretto/focusable");
+class FocusTrap {
+  constructor(element) {
+    __publicField(this, "active", true);
+    this.element = element;
+    element.setAttribute("aria-modal", "true");
+    element.setAttribute("tabindex", "-1");
+  }
+  activate() {
+    this.element.setAttribute("aria-modal", "true");
+    this.active = true;
+  }
+  destroy() {
+    this.active = false;
+    this.element = void 0;
+  }
+  inactivate() {
+    this.element.setAttribute("aria-modal", "false");
+    this.active = false;
+    inactive.add(this);
+  }
+}
+function addFocusTraps(nodes) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    if (element.hasAttribute(selector)) {
+      focusTraps.set(element, new FocusTrap(element));
+    }
+  }
+}
+function onEscape(event2) {
+  var _a;
+  if (event2.key !== "Escape") {
+    return;
+  }
+  const element = find.findAncestor(
+    document.activeElement,
+    `[${selector}]`
+  );
+  (_a = focusTraps.get(element)) == null ? void 0 : _a.inactivate();
+}
+function onFocusOut() {
+  if (inactive.size === 0) {
+    return;
+  }
+  requestAnimationFrame(() => {
+    const element = find.findAncestor(
+      document.activeElement,
+      `[${selector}]`
+    );
+    if (!focusTraps.has(element)) {
+      for (const focusTrap of inactive) {
+        focusTrap.activate();
+      }
+    }
+  });
+}
+function onTab(event2) {
+  var _a;
+  if (event2.key !== "Tab") {
+    return;
+  }
+  const element = find.findAncestor(
+    event2.target,
+    `[${selector}]`
+  );
+  if (!(((_a = focusTraps.get(element)) == null ? void 0 : _a.active) ?? false)) {
+    return;
+  }
+  event2.preventDefault();
+  const elements = focusable.getFocusable(element);
+  const { length } = elements;
+  const index = elements.indexOf(event2.target);
+  if (index === -1 || length === 0) {
+    if (length === 0) {
+      element.focus();
+    } else {
+      elements[0].focus();
+    }
+    return;
+  }
+  const next = number.clamp(index + (event2.shiftKey ? -1 : 1), 0, length - 1, true);
+  if (next !== index) {
+    elements[next].focus();
+  }
+}
+function removeFocusTraps(nodes) {
+  var _a;
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    (_a = focusTraps.get(element)) == null ? void 0 : _a.destroy();
+    focusTraps.delete(element);
+  }
+}
+const focusTraps = /* @__PURE__ */ new WeakMap();
+const inactive = /* @__PURE__ */ new Set();
+const observer = new MutationObserver((entries) => {
+  const { length } = entries;
+  for (let index = 0; index < length; index += 1) {
+    const entry = entries[index];
+    if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
+      if (entry.target.hasAttribute(selector)) {
+        addFocusTraps([entry.target]);
+      } else {
+        removeFocusTraps([entry.target]);
+      }
+    } else if (entry.type === "childList") {
+      addFocusTraps(entry.addedNodes);
+      removeFocusTraps(entry.removedNodes);
+    }
+  }
+});
+const selector = "oui-focus-trap";
+observer.observe(document, {
+  attributeFilter: [selector],
+  attributes: true,
+  childList: true,
+  subtree: true
+});
+requestAnimationFrame(() => {
+  addFocusTraps(document.querySelectorAll(`[${selector}]`));
+  event.on(document, "focusout", onFocusOut, {
+    capture: true
+  });
+  event.on(document, "keydown", onTab, {
+    capture: true,
+    passive: false
+  });
+  event.on(document, "keydown", onEscape, {
+    passive: false
+  });
+});

package/dist/js/focus-trap.js

@@ -0,0 +1,146 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { clamp } from "@oscarpalmer/atoms/number";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { getFocusable } from "@oscarpalmer/toretto/focusable";
+class FocusTrap {
+  constructor(element) {
+    __publicField(this, "active", true);
+    this.element = element;
+    element.setAttribute("aria-modal", "true");
+    element.setAttribute("tabindex", "-1");
+  }
+  activate() {
+    this.element.setAttribute("aria-modal", "true");
+    this.active = true;
+  }
+  destroy() {
+    this.active = false;
+    this.element = void 0;
+  }
+  inactivate() {
+    this.element.setAttribute("aria-modal", "false");
+    this.active = false;
+    inactive.add(this);
+  }
+}
+function addFocusTraps(nodes) {
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    if (element.hasAttribute(selector)) {
+      focusTraps.set(element, new FocusTrap(element));
+    }
+  }
+}
+function onEscape(event) {
+  var _a;
+  if (event.key !== "Escape") {
+    return;
+  }
+  const element = findAncestor(
+    document.activeElement,
+    `[${selector}]`
+  );
+  (_a = focusTraps.get(element)) == null ? void 0 : _a.inactivate();
+}
+function onFocusOut() {
+  if (inactive.size === 0) {
+    return;
+  }
+  requestAnimationFrame(() => {
+    const element = findAncestor(
+      document.activeElement,
+      `[${selector}]`
+    );
+    if (!focusTraps.has(element)) {
+      for (const focusTrap of inactive) {
+        focusTrap.activate();
+      }
+    }
+  });
+}
+function onTab(event) {
+  var _a;
+  if (event.key !== "Tab") {
+    return;
+  }
+  const element = findAncestor(
+    event.target,
+    `[${selector}]`
+  );
+  if (!(((_a = focusTraps.get(element)) == null ? void 0 : _a.active) ?? false)) {
+    return;
+  }
+  event.preventDefault();
+  const elements = getFocusable(element);
+  const { length } = elements;
+  const index = elements.indexOf(event.target);
+  if (index === -1 || length === 0) {
+    if (length === 0) {
+      element.focus();
+    } else {
+      elements[0].focus();
+    }
+    return;
+  }
+  const next = clamp(index + (event.shiftKey ? -1 : 1), 0, length - 1, true);
+  if (next !== index) {
+    elements[next].focus();
+  }
+}
+function removeFocusTraps(nodes) {
+  var _a;
+  const elements = [...nodes].filter(
+    (node) => node instanceof HTMLElement
+  );
+  const { length } = elements;
+  for (let index = 0; index < length; index += 1) {
+    const element = elements[index];
+    (_a = focusTraps.get(element)) == null ? void 0 : _a.destroy();
+    focusTraps.delete(element);
+  }
+}
+const focusTraps = /* @__PURE__ */ new WeakMap();
+const inactive = /* @__PURE__ */ new Set();
+const observer = new MutationObserver((entries) => {
+  const { length } = entries;
+  for (let index = 0; index < length; index += 1) {
+    const entry = entries[index];
+    if (entry.type === "attributes" && entry.target instanceof HTMLElement) {
+      if (entry.target.hasAttribute(selector)) {
+        addFocusTraps([entry.target]);
+      } else {
+        removeFocusTraps([entry.target]);
+      }
+    } else if (entry.type === "childList") {
+      addFocusTraps(entry.addedNodes);
+      removeFocusTraps(entry.removedNodes);
+    }
+  }
+});
+const selector = "oui-focus-trap";
+observer.observe(document, {
+  attributeFilter: [selector],
+  attributes: true,
+  childList: true,
+  subtree: true
+});
+requestAnimationFrame(() => {
+  addFocusTraps(document.querySelectorAll(`[${selector}]`));
+  on(document, "focusout", onFocusOut, {
+    capture: true
+  });
+  on(document, "keydown", onTab, {
+    capture: true,
+    passive: false
+  });
+  on(document, "keydown", onEscape, {
+    passive: false
+  });
+});

package/dist/js/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./focus-trap.cjs");

package/dist/js/index.js

@@ -0,0 +1 @@
+import "./focus-trap.js";

package/package.json

@@ -3,13 +3,54 @@
 		"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",
-		"sass": "^1.83",
-		"stylelint": "^16.14"
+		"@rollup/plugin-node-resolve": "^16",
+		"@rollup/plugin-typescript": "^12.1",
+		"@types/node": "^24",
+		"@vitest/coverage-istanbul": "^3.2",
+		"autoprefixer": "^10.4",
+		"dts-bundle-generator": "^9.5",
+		"glob": "^11",
+		"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.3",
+		"vitest": "^3.2"
+	},
+	"exports": {
+		".": {
+			"import": {
+				"types": "./types/index.d.ts",
+				"default": "./dist/js/index.js"
+			},
+			"require": {
+				"types": "./types/index.d.cts",
+				"default": "./dist/js/index.cjs"
+			}
+		},
+		"./focus-trap": {
+			"import": {
+				"types": "./types/focus-trap.d.ts",
+				"default": "./dist/js/focus-trap.js"
+			},
+			"require": {
+				"types": "./types/focus-trap.d.cts",
+				"default": "./dist/js/focus-trap.cjs"
+			}
+		}
 	},
-	"files": ["dist", "src"],
+	"files": ["dist", "src", "types"],
 	"keywords": [
 		"css",
 		"scss",
@@ -21,15 +62,27 @@
 		"utility"
 	],
 	"license": "MIT",
+	"main": "dist/js/index.cjs",
+	"module": "dist/js/index.js",
 	"name": "@oscarpalmer/oui",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/oscarpalmer/oui.git"
 	},
 	"scripts": {
-		"build": "npx sass ./src/css:./dist/css --no-source-map",
-		"watch": "npx sass ./src/css:./dist/css --no-source-map --watch"
+		"build": "npm run clean && npm run build:css && npm run build:js",
+		"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",
-	"version": "0.8.0"
+	"types": "types/index.d.cts",
+	"version": "0.10.0"
 }