@oscarpalmer/oui 0.18.0 → 0.19.0

package/dist/css/form.css

@@ -203,132 +203,105 @@
   top: 50%;
   transform: translateY(-50%);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i])) {
   --oui-border-value: var(--oui-red-5);
   --oui-foreground-value: var(--oui-red-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i]))::file-selector-button {
   --oui-background-value: var(--oui-red-2);
   --oui-foreground-value: var(--oui-red-8);
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i]))::-moz-range-thumb {
   --oui-background-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i]))::-ms-thumb {
   --oui-background-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i]))::-webkit-slider-thumb {
   --oui-background-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i]))::-moz-range-track {
   --oui-border-value: var(--oui-red-5);
   --oui-foreground-value: var(--oui-red-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i]))::-ms-track {
   --oui-border-value: var(--oui-red-5);
   --oui-foreground-value: var(--oui-red-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i]))::-webkit-slider-runnable-track {
   --oui-border-value: var(--oui-red-5);
   --oui-foreground-value: var(--oui-red-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-red-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-invalid:not([aria-invalid=false i]),
 [aria-invalid=true i])) > option:checked {
   background-color: var(--oui-red-2);
   color: var(--oui-red-9);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i])) {
   --oui-border-value: var(--oui-green-5);
   --oui-foreground-value: var(--oui-green-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::file-selector-button {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i]))::file-selector-button {
   --oui-background-value: var(--oui-green-2);
   --oui-foreground-value: var(--oui-green-8);
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-track {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i]))::-moz-range-track {
   --oui-border-value: var(--oui-green-5);
   --oui-foreground-value: var(--oui-green-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-track {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i]))::-ms-track {
   --oui-border-value: var(--oui-green-5);
   --oui-foreground-value: var(--oui-green-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-runnable-track {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i]))::-webkit-slider-runnable-track {
   --oui-border-value: var(--oui-green-5);
   --oui-foreground-value: var(--oui-green-9);
   --oui-outline-percentage: 82.5%;
   --oui-outline-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-moz-range-thumb {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i]))::-moz-range-thumb {
   --oui-background-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-ms-thumb {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i]))::-ms-thumb {
   --oui-background-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]))::-webkit-slider-thumb {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i]))::-webkit-slider-thumb {
   --oui-background-value: var(--oui-green-6);
 }
-:where(.oui-input.oui-validate:not([disabled],
-[readonly],
-[aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i])) > option:checked {
+:where(.oui-input.oui-validate:not([disabled], [readonly], [aria-disabled=true i]):is(:user-valid:not([aria-invalid=true i]),
+[aria-invalid=false i])) > option:checked {
   background-color: var(--oui-green-2);
   color: var(--oui-green-9);
 }
@@ -512,7 +485,7 @@
 
 :where(select.oui-input:is([multiple])) {
   --oui-off: attr(oui-off);
-  --oui-on: attr(oui-on, "✓");
+  --oui-on: attr(oui-on, '\2713');
   padding: 0;
 }
 :where(select.oui-input:is([multiple]) > option) {
@@ -713,7 +686,7 @@
   --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, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
   font-style: italic;
   cursor: default;

package/dist/css/message.css

@@ -35,37 +35,37 @@
   flex-flow: row wrap;
   gap: 1em;
 }
-:where(.oui-message-blue, .oui-message-info) {
+:where(.oui-message--blue, .oui-message--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(.oui-message-green, .oui-message-success) {
+:where(.oui-message--green, .oui-message--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(.oui-message-orange, .oui-message-warning) {
+:where(.oui-message--orange, .oui-message--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(.oui-message-purple, .oui-message-special) {
+:where(.oui-message--purple, .oui-message--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(.oui-message-red, .oui-message-error) {
+:where(.oui-message--red, .oui-message--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(.oui-message-yellow, .oui-message-notice) {
+:where(.oui-message--yellow, .oui-message--notice) {
   --oui-background: var(--oui-yellow-0);
   --oui-border: var(--oui-yellow-2);
   --oui-foreground: var(--oui-yellow-8);

package/dist/css/reset.css

@@ -194,7 +194,7 @@ summary) {
 :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] */
@@ -308,6 +308,7 @@ summary) {
 ::-webkit-search-decoration {
   /** Remove the inner padding in Chrome, Edge, and Safari on macOS [SE] */
   -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
@@ -360,7 +361,7 @@ summary) {
 }
 
 :where(svg:not([fill])) {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 /**

package/dist/css/table.css

@@ -3,7 +3,7 @@
   width: 100%;
   background-color: var(--oui-absolute);
 }
-:where(.oui-table-wrapper) {
+:where(.oui-table_wrapper) {
   max-height: 32em;
   overflow: auto;
   border: 1px solid var(--oui-gray-3);
@@ -16,7 +16,7 @@
   align-content: center;
   background-color: var(--oui-gray-1);
   border: solid var(--oui-gray-3);
-  border-width: 0 0 1px 0;
+  border-width: 0 0 1px;
   font-size: 0.875rem;
   text-align: left;
   text-indent: 0.5rem;
@@ -58,7 +58,7 @@
 :where(.oui-table thead th)::after {
   --oui-shadow-direction: bottom;
   border-top: 1px solid var(--oui-gray-3);
-  inset: 100% 0 0 0;
+  inset: 100%;
 }
 :where(.oui-table:has(caption) thead th) {
   top: 2rem;
@@ -69,7 +69,7 @@
 :where(.oui-table tfoot td)::after {
   --oui-shadow-direction: top;
   border-bottom: 1px solid var(--oui-gray-3);
-  inset: -4px 0 0 0;
+  inset: -4px;
 }
 :where(.oui-table tbody td) {
   border: solid var(--oui-gray-3);

package/dist/css/tooltip.css

@@ -1,5 +1,22 @@
 
-: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)) {
   -webkit-text-decoration: underline dotted;
   text-decoration: underline dotted;
   -webkit-text-decoration-skip: ink;

package/dist/js/attributable.full.js

@@ -1,48 +1,36 @@
 function attributable(attribute, add, remove) {
-    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(attribute)) {
-                    handleAdded(attribute, [entry.target], add);
-                }
-                else {
-                    handleRemoved([entry.target], remove);
-                }
-            }
-            else if (entry.type === 'childList') {
-                handleAdded(attribute, entry.addedNodes, add);
-                handleRemoved(entry.removedNodes, remove);
-            }
-        }
-    });
-    observer.observe(document, {
-        attributeFilter: [attribute],
-        attributes: true,
-        childList: true,
-        subtree: true,
-    });
-    requestAnimationFrame(() => {
-        handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
-    });
+	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(attribute)) handleAdded(attribute, [entry.target], add);
+			else handleRemoved([entry.target], remove);
+			else if (entry.type === "childList") {
+				handleAdded(attribute, entry.addedNodes, add);
+				handleRemoved(entry.removedNodes, remove);
+			}
+		}
+	}).observe(document, {
+		attributeFilter: [attribute],
+		attributes: true,
+		childList: true,
+		subtree: true
+	});
+	requestAnimationFrame(() => {
+		handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+	});
 }
 function handleAdded(attribute, nodes, add) {
-    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(attribute)) {
-            add(element);
-        }
-    }
+	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(attribute)) add(element);
+	}
 }
 function handleRemoved(nodes, remove) {
-    const elements = [...nodes].filter(node => node instanceof HTMLElement);
-    const { length } = elements;
-    for (let index = 0; index < length; index += 1) {
-        remove(elements[index]);
-    }
+	const elements = [...nodes].filter((node) => node instanceof HTMLElement);
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) remove(elements[index]);
 }
-
 export { attributable };