@oscarpalmer/oui 0.17.0 → 0.19.0

package/dist/css/reset.css

@@ -13,9 +13,15 @@
  * - Andy Bell's "A (more) Modern CSS Reset" [AB]
  *   https://andy-bell.co.uk/a-more-modern-css-reset/
  *
+ * - Chris Coyier's "The Coyier CSS Starter" [CC]
+ *   https://frontendmasters.com/blog/the-coyier-css-starter/
+ *
  * - CSS Remedy [CR]
  *   https://github.com/jensimmons/cssremedy
  *
+ * - Harry Roberts [HR]
+ * - https://github.com/csswizardry
+ *
  * - RESS [RS]
  *   https://github.com/filipelinhares/ress
  *
@@ -43,12 +49,14 @@
   font-family: system-ui, sans-serif;
   font-size: 100%;
   line-height: 1.5;
+  /** Prevent text size inflation (e.g., after orientation change) [AB][RE][SE] */
   -webkit-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]*/
+  text-size-adjust: none;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
+  word-break: break-word;
 }
 
 :where(body) {
@@ -65,50 +73,85 @@
   text-underline-offset: 0.125em;
 }
 
+:where(abbr[title], dfn[title]) {
+  cursor: help;
+}
+
 :where(abbr[title]) {
-  text-decoration: underline; /* Add the correct text decoration in Safari [RS][SE]*/
+  /** Add the correct text decoration in Safari [RS][SE] */
+  text-decoration: underline;
+  /** Ditto */
   -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted; /* ditto*/
+  text-decoration: underline dotted;
 }
 
 :where(b, strong) {
-  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari [RS][SE]*/
+  /** Add the correct font weight in Chrome, Edge, and Safari [RS][SE], without compounding [HR] */
+  font-weight: bold;
 }
 
 :where(button, h1, h2, h3, h4, h5, h6, input, label, legend) {
-  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]) {
+  /** Set shorter line heights on headings and interactive elements [AB] */
+  line-height: 1.125;
+}
+
+:where(button,
+input[type=button i],
+input[type=checkbox i],
+input[type=file i],
+input[type=image i],
+input[type=radio i],
+input[type=reset i],
+input[type=submit i],
+summary) {
+  /** Correct the inability to style clickable types in iOS [HR][RS][SE] */
   -webkit-appearance: button;
   -moz-appearance: button;
-  appearance: button; /* Correct the inability to style clickable types in iOS [RS][SE]*/
+  appearance: button;
+  /** Ditto */
   cursor: pointer;
 }
 
-:where(code, kbd, pre, samp) {
-  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(code, kbd, output, pre, samp) {
+  /** Specify the font family of code elements [HR][RS][SE] */
+  font-family: monospace, monospace;
+  /** Correct the odd 'em' font sizing in all browsers [HR][RS][SE] */
+  font-size: inherit;
 }
 
 :where(details > summary:first-of-type) {
-  display: list-item; /* Add the correct display in Safari [SE]*/
+  /** Add the correct display in Safari [SE] */
+  display: list-item;
 }
 
 :where(dl, ol, ul) :where(dl, ol, ul) {
-  margin: 0; /* Remove the margin on nested lists in Chrome, Edge, and Safari [SE]*/
+  /** Remove the margin on nested lists in Chrome, Edge, and Safari [SE] */
+  margin: 0;
 }
 
 :where(h1, h2, h3, h4, h5, h6) {
   text-wrap: balance;
 }
 
+:where(h1) {
+  /** Consistent sizing across browsers [HR] */
+  font-size: 2em;
+}
+
 :where(hr) {
-  height: 0; /* Add the correct box sizing in Firefox [CR][RS][SE]*/
-  overflow: visible; /* Show the overflow in Edge and IE [CR][RS]*/
+  /** Add the correct box sizing in Firefox [CR][RS][SE] */
+  height: 0;
+  /** Show the overflow in Edge and IE [CR][RS] */
+  overflow: visible;
   border-style: solid;
   border-width: 1px 0 0;
-  color: inherit; /* Correct the inheritance of border colour in Firefox [CR][RS][SE]*/
+  /** // Correct the inheritance of border colour in Firefox [CR][RS][SE] */
+  color: inherit;
+}
+
+:where(ins, u) {
+  /** Prevent link styling [HR] */
+  text-decoration: none;
 }
 
 :where(nav) :where(ol, ul),
@@ -118,22 +161,24 @@
 }
 
 :where(nav li)::before {
-  content: "​"; /* Prevent VoiceOver from ignoring list semantics in Safari [SE]*/
+  /** Prevent VoiceOver from ignoring list semantics in Safari [SE] */
+  content: "​";
   float: left;
 }
 
 :where(pre) {
-  overflow: auto; /* Prevent overflow of the container in all browsers [SE]*/
-  white-space: pre-wrap; /* Overflow by default is bad… [CR]*/
+  /** Prevent overflow of the container in all browsers [SE] */
+  overflow: auto;
+  /** Overflow by default is bad… [CR] */
+  white-space: pre-wrap;
 }
 
-:where(small) {
+:where(small, sub, sup) {
   font-size: 0.875rem;
 }
 
 :where(sub, sup) {
   vertical-align: baseline;
-  font-size: 0.75rem;
   line-height: 0;
   position: relative;
 }
@@ -148,101 +193,129 @@
 
 :where(table) {
   border-collapse: collapse;
-  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]*/
+  /** Correct table border colour in Chrome, Edge, and Safari [SE] */
+  border-color: currentcolor;
+  /** Modernized border spacing [HR] */
+  border-spacing: 0;
+  /** More legible numbers [HR] */
+  font-variant-numeric: tabular-nums;
+  /** Remove text indentation from table contents in Chrome, Edge, and Safari [RS][SE] */
+  text-indent: 0;
 }
 
 /**
  * Form-related
  */
 :where(button, input, optgroup, select, textarea) {
-  font: inherit; /* Correct the font inheritance in Firefox, Edge, and Safari [RS][SE]*/
+  /** Correct the font inheritance in Firefox, Edge, and Safari [HR][RS][SE] */
+  font: inherit;
 }
 
 :where(button, input, select, textarea) {
-  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*/
+  /** Change the inconsistent appearance in all browsers [SE] */
+  padding: 0.25em 0.5em;
+  /** Ditto for all */
+  background-color: transparent;
+  border: 1px solid WindowFrame;
+  color: inherit;
+  letter-spacing: inherit;
 }
 
 :where(fieldset) {
-  border: 1px solid darkgrey; /* Change the inconsistent appearance in all browsers [SE]*/
+  /** Change the inconsistent appearance in all browsers [SE] */
+  border: 1px solid darkgrey;
 }
 
 :where(optgroup) {
-  font-weight: bold; /* Restore the font weight unset by previous rules [RS]*/
+  /** Restore the font weight unset by previous rules [RS] */
+  font-weight: bold;
 }
 
 :where(progress) {
-  vertical-align: baseline; /* Add the correct vertical alignment in Chrome, Edge, and Firefox [RS][SE]*/
+  /** Add the correct vertical alignment in Chrome, Edge, and Firefox [RS][SE] */
+  vertical-align: baseline;
 }
 
 :where(select, input[list]) {
+  /** Change the inconsistent appearance in all browsers [SE] */
   -webkit-appearance: none;
   -moz-appearance: none;
-  appearance: none; /* Change the inconsistent appearance in all browsers [SE]*/
-  padding-right: 1em; /* ditto*/
+  appearance: none;
+  /** Ditto for all */
+  padding-right: 1em;
   background-image: 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");
-  background-position: right center/1em; /* ditto*/
-  background-repeat: no-repeat; /* ditto*/
-  border-radius: 0; /* ditto*/
+  background-position: right center/1em;
+  background-repeat: no-repeat;
+  border-radius: 0;
 }
 
 :where(select[multiple]) {
-  background-image: none; /* Don't show the arrow for multiple choice selects [SE]*/
+  /** Don't show the arrow for multiple choice selects [SE] */
+  background-image: none;
 }
 
 :where(textarea) {
-  resize: vertical; /* Change the resize direction in all browsers [RS][SE]*/
+  /** Change the resize direction in all browsers [RS][SE] */
+  resize: vertical;
 }
 
 :where([type=color i], [type=range i]) {
-  padding: 0; /* Remove the padding in all browsers [SE]*/
-  border-width: 0; /* Remove the border in all browsers [SE]*/
+  /** Remove the padding in all browsers [SE] */
+  padding: 0;
+  /** Remove the border in all browsers [SE] */
+  border-width: 0;
 }
 
 :where([type=search i]) {
+  /** Correct the odd appearance in Chrome, Edge, and Safari [RS][SE] */
   -webkit-appearance: textfield;
   -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]*/
+  appearance: textfield;
+  /** Correct the outline style in Safari [RS][SE] */
+  outline-offset: -2px;
 }
 
 ::file-selector-button {
+  /** Correct the inability to style upload buttons in iOS and Safari [RS][SE] */
   -webkit-appearance: button;
   -moz-appearance: button;
-  appearance: button; /* Correct the inability to style upload buttons in iOS and Safari [RS][SE]*/
+  appearance: button;
   color: inherit;
   font: inherit;
   line-height: 1.25;
 }
 
 ::-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]*/
+  /** Better default text opacity [OP] */
+  opacity: 0.67;
+  /** Better default text color [HR][SE] */
+  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]*/
+  /** Better default text opacity [OP] */
+  opacity: 0.67;
+  /** Better default text color [HR][SE] */
+  color: inherit;
 }
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  height: auto; /* Correct the cursor style of increment and decrement buttons in Safari [RS][SE]*/
+  /** Correct the cursor style of increment and decrement buttons in Safari [RS][SE] */
+  height: auto;
 }
 
 ::-webkit-search-decoration {
-  -webkit-appearance: none; /* Remove the inner padding in Chrome, Edge, and Safari on macOS [SE]*/
+  /** Remove the inner padding in Chrome, Edge, and Safari on macOS [SE] */
+  -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
  * Media-related
  */
 :where(audio, canvas, embed, iframe, img, object, picture, svg, video) {
-  max-width: 100%;
+  max-inline-size: 100%;
   vertical-align: middle;
 }
 
@@ -251,7 +324,8 @@
 }
 
 :where(audio) {
-  width: 100%; /* Better default width [CR]*/
+  /** Better default width [CR] */
+  width: 100%;
 }
 
 :where(audio:not([controls])) {
@@ -259,23 +333,35 @@
 }
 
 :where(canvas, img, svg, video) {
-  height: auto; /* Maintain aspect ratios [CR]*/
+  /** Proportional height based on width [HR] */
+  block-size: auto;
 }
 
 :where(iframe) {
   border-style: none;
 }
 
+:where(img) {
+  /** CSS magic! [HR] */
+  background-repeat: no-repeat;
+  /** Ditto */
+  background-size: cover;
+  /** Offset alt-text if image does not load [HR] */
+  font-style: italic;
+}
+
 :where(picture) {
-  display: contents; /* Remove the unnecessary wrapping 'picture', while maintaining contents [CR]*/
+  /** Remove the unnecessary wrapping 'picture', while maintaining contents [CR] */
+  display: contents;
 }
 
 :where(source) {
-  display: none; /* Source elements have nothing to display, so we hide them entirely [CR]*/
+  /** Source elements have nothing to display, so we hide them entirely [CR] */
+  display: none;
 }
 
 :where(svg:not([fill])) {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 /**
@@ -297,4 +383,39 @@
   cursor: pointer;
 }
 
+/**
+ * Pseudo-classes
+ */
+:where(:target) {
+  scroll-margin: 2rlh;
+}
+
+/**
+ * Media queries
+ */
+@media (prefers-reduced-motion: no-preference) {
+  :where(:root) {
+    /** Allow for animations on auto-sizes [CC] */
+    interpolate-size: allow-keywords;
+  }
+  :where(:root:focus-within) {
+    /** Allow for smooth scrolling to focused elements */
+    scroll-behavior: smooth;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(:root:focus-within) {
+    /** Disable smooth scrolling, when requested */
+    scroll-behavior: auto;
+  }
+  /** Disable animations and transitions, when requested */
+  :where(*),
+  ::after,
+  ::before {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
 

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;
@@ -12,9 +29,17 @@
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
   max-width: 48ch;
   padding: 0.75em 1em;
+  opacity: 0;
   background-color: var(--oui-absolute);
   border-radius: 0.25rem;
   font-size: 0.875rem;
+  transition: opacity 0.125s ease-in-out;
+  transition-delay: 0s;
+}
+
+:where([oui-tooltip-content][oui-tooltip-content-active]) {
+  opacity: 1;
+  transition-delay: 0.25s;
 }
 
 

package/dist/js/attributable.full.js

@@ -0,0 +1,36 @@
+function attributable(attribute, add, remove) {
+	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);
+	}
+}
+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]);
+}
+export { attributable };

package/dist/js/attributable.js

@@ -1,51 +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
-};
+export { attributable };