@oscarpalmer/oui 0.36.0 → 0.37.0

package/dist/css/listbox.css

@@ -32,33 +32,51 @@
 }
 
 :where([oui-listbox-filter-input]) {
-  --oui-background-percentage: 0%;
-  --oui-foreground-percentage: 0%;
   --oui-outline-percentage: 100%;
   --oui-outline-value: var(--oui-blue-6);
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
   outline-offset: 0;
-  transition: 0.125s ease-in-out;
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
   align-content: center;
   background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
   border: 1px solid var(--oui-border-value, var(--oui-gray-3));
   box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
   color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
   -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
-  --oui-background-value: var(--oui-absolute);
-  width: 100%;
-  padding: 0.5em 0.75em;
-  border-radius: 0.25em;
-  position: relative;
-}
-:where([oui-listbox-filter-input]:not([disabled], [readonly], [aria-disabled=true i]):focus) {
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where([oui-listbox-filter-input]).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):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-listbox-filter-input]).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):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-listbox-filter-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-listbox-filter-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
   --oui-border-value: var(--oui-blue-5);
   --oui-foreground-value: inherit;
   --oui-outline-percentage: 75%;
   --oui-outline-value: var(--oui-blue-6);
 }
 @media (hover: hover) {
-  :where([oui-listbox-filter-input]:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover) {
+  :where([oui-listbox-filter-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
     --oui-border-value: var(--oui-blue-4);
     --oui-foreground-percentage: 0%;
     --oui-foreground-value: inherit;
@@ -66,16 +84,23 @@
     --oui-outline-value: var(--oui-blue-6);
   }
 }
-:where([oui-listbox-filter-input]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i])) {
+:where([oui-listbox-filter-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
   --oui-foreground-percentage: 25%;
   font-style: italic;
 }
-:where([oui-listbox-filter-input]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus) {
+:where([oui-listbox-filter-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
   --oui-outline-percentage: 75%;
 }
-:where([oui-listbox-filter-input]:is([disabled], [aria-disabled=true i])) {
+:where([oui-listbox-filter-input]):is([disabled], [aria-disabled=true i]) {
   --oui-background-percentage: 50%;
 }
+:where([oui-listbox-filter-input]) {
+  --oui-background-value: var(--oui-absolute);
+  width: 100%;
+  padding: 0.5em 0.75em;
+  border-radius: 0.25em;
+  position: relative;
+}
 
 :where([oui-listbox-header]) {
   padding: 0.5em 1em;
@@ -126,10 +151,9 @@
   outline-offset: -4px;
   line-height: 1.25;
   cursor: pointer;
-  transition: 0.125s ease-in-out;
 }
 :where([oui-listbox-option][aria-selected=true i]) {
-  background-color: var(--oui-blue-3);
+  background-color: var(--oui-blue-2);
   color: var(--oui-blue-9);
 }
 :where(oui-listbox[multiple] [oui-listbox-option][aria-selected=true i])::before {
@@ -137,7 +161,7 @@
   margin: 0 0.75em 0 0;
 }
 @media (hover: hover) {
-  :where(:where(oui-listbox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-listbox-option]):hover) {
+  :where(oui-listbox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-listbox-option]:hover) {
     background-color: var(--oui-blue-1);
     color: var(--oui-blue-8);
   }

package/dist/css/message.css

@@ -1,6 +1,9 @@
 /*! https://github.com/oscarpalmer/oui */
 
 :where(.oui-message) {
+  --oui-background: var(--oui-gray-1);
+  --oui-border: var(--oui-gray-2);
+  --oui-foreground: var(--oui-gray-8);
   --oui-shadow-mixed: color-mix(
   	in oklab,
   	var(--oui-shadow-value, var(--oui-gray-6)),
@@ -8,25 +11,25 @@
   );
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
   padding: 1em 1.25em;
-  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%);
+  background-color: color-mix(in oklab, var(--oui-background), transparent 25%);
   border-radius: 0.5em;
   max-width: -moz-fit-content;
   max-width: fit-content;
   display: inline-flex;
   flex-flow: column nowrap;
   gap: 1em;
-  color: var(--oui-foreground, var(--oui-gray-8));
+  color: var(--oui-foreground);
   line-height: 1.25;
 }
 :where(.oui-message h2, .oui-message h3, .oui-message h4, .oui-message h5, .oui-message h6) {
-  color: var(--oui-foreground, var(--oui-gray-10));
+  color: var(--oui-foreground);
   font-size: 1em;
   font-weight: bold;
 }
 :where(.oui-message hr) {
   height: 1px;
   margin: 0 -1.25em;
-  background-color: var(--oui-border, var(--oui-gray-2));
+  background-color: var(--oui-border);
   border: none;
 }
 :where(.oui-message p) {
@@ -37,37 +40,37 @@
   gap: 1em;
 }
 :where(.oui-message--blue, .oui-message--info) {
-  --oui-background: var(--oui-blue-0);
+  --oui-background: var(--oui-blue-1);
   --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) {
-  --oui-background: var(--oui-green-0);
+  --oui-background: var(--oui-green-1);
   --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) {
-  --oui-background: var(--oui-orange-0);
+  --oui-background: var(--oui-orange-1);
   --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) {
-  --oui-background: var(--oui-purple-0);
+  --oui-background: var(--oui-purple-1);
   --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) {
-  --oui-background: var(--oui-red-0);
+  --oui-background: var(--oui-red-1);
   --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) {
-  --oui-background: var(--oui-yellow-0);
+  --oui-background: var(--oui-yellow-1);
   --oui-border: var(--oui-yellow-2);
   --oui-foreground: var(--oui-yellow-8);
   --oui-shadow-value: var(--oui-yellow-6);

package/dist/css/reset.css

@@ -7,30 +7,28 @@
  * A reset I use for a lot of personal stuff, and elsewhere, of course.
  * It's a mix of a few different resets mixed together with some of my own ideas.
  *
- * When rules are explained, such comments will be suffixed with one ore more square brackets
- * with a two-letter code, all of which are listed below. My own code is "OP", which are my initials.
- *
- * - Andy Bell's "A (more) Modern CSS Reset" [AB]
+ * - Andy Bell's "A (more) Modern CSS Reset"
  *   https://andy-bell.co.uk/a-more-modern-css-reset/
  *
- * - Chris Coyier's "The Coyier CSS Starter" [CC]
+ * - Chris Coyier's "The Coyier CSS Starter"
  *   https://frontendmasters.com/blog/the-coyier-css-starter/
  *
- * - CSS Remedy [CR]
+ * - CSS Remedy
  *   https://github.com/jensimmons/cssremedy
  *
- * - Harry Roberts [HR]
+ * - Harry Roberts
  * - https://github.com/csswizardry
  *
- * - RESS [RS]
+ * - Interface Cheat sheet
+ * - https://interfaces.dev/cheat-sheet
+ *
+ * - RESS
  *   https://github.com/filipelinhares/ress
  *
- * - Sanitize.css [SE]
+ * - Sanitize.css
  *   https://github.com/csstools/sanitize.css
  */
-/**
- * Catch-alls
- */
+/* #region Globals*/
 :where(*) {
   padding: 0;
   margin: 0;
@@ -42,14 +40,12 @@
   box-sizing: border-box;
 }
 
-/**
- * Document
- */
+/* #endregion*/
+/* #region Document*/
 :where(:root) {
   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;
@@ -57,6 +53,8 @@
   -o-tab-size: 4;
   tab-size: 4;
   overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 :where(body) {
@@ -64,13 +62,13 @@
   font-size: 1rem;
 }
 
-/**
- * General
- */
+/* #endregion*/
+/* #region General*/
 :where(a) {
   -webkit-text-decoration-skip: ink;
   text-decoration-skip-ink: auto;
   text-underline-offset: 0.125em;
+  text-underline-position: from-font;
 }
 
 :where(abbr[title], dfn[title]) {
@@ -78,20 +76,16 @@
 }
 
 :where(abbr[title]) {
-  /** Add the correct text decoration in Safari [RS][SE] */
   text-decoration: underline;
-  /** Ditto */
   -webkit-text-decoration: underline dotted;
   text-decoration: underline dotted;
 }
 
 :where(b, strong) {
-  /** 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) {
-  /** Set shorter line heights on headings and interactive elements [AB] */
   line-height: 1.125;
 }
 
@@ -104,23 +98,18 @@ 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: auto;
   -moz-appearance: auto;
   appearance: auto;
-  /** Ditto */
   cursor: pointer;
 }
 
 :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) {
-  /** Add the correct display in Safari [SE] */
   display: list-item;
 }
 
@@ -143,7 +132,6 @@ summary) {
 }
 
 :where(dl, ol, ul) :where(dl, ol, ul) {
-  /** Remove the margin on nested lists in Chrome, Edge, and Safari [SE] */
   margin: 0;
 }
 
@@ -152,23 +140,18 @@ summary) {
 }
 
 :where(h1) {
-  /** Consistent sizing across browsers [HR] */
   font-size: 2em;
 }
 
 :where(hr) {
-  /** 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;
-  /** // Correct the inheritance of border colour in Firefox [CR][RS][SE] */
   color: inherit;
 }
 
 :where(ins, u) {
-  /** Prevent link styling [HR] */
   text-decoration: none;
 }
 
@@ -179,15 +162,12 @@ summary) {
 }
 
 :where(nav li)::before {
-  /** Prevent VoiceOver from ignoring list semantics in Safari [SE] */
   content: "​";
   float: left;
 }
 
 :where(pre) {
-  /** Prevent overflow of the container in all browsers [SE] */
   overflow: auto;
-  /** Overflow by default is bad… [CR] */
   white-space: pre-wrap;
 }
 
@@ -211,28 +191,20 @@ summary) {
 
 :where(table) {
   border-collapse: collapse;
-  /** 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
- */
+/* #endregion*/
+/* #region Forms*/
 :where(button, input, optgroup, select, textarea) {
-  /** Correct the font inheritance in Firefox, Edge, and Safari [HR][RS][SE] */
   font: inherit;
 }
 
 :where(button, input, select, textarea) {
-  /** 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;
@@ -240,26 +212,21 @@ summary) {
 }
 
 :where(fieldset) {
-  /** Change the inconsistent appearance in all browsers [SE] */
   border: 1px solid darkgrey;
 }
 
 :where(optgroup) {
-  /** Restore the font weight unset by previous rules [RS] */
   font-weight: bold;
 }
 
 :where(progress) {
-  /** 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;
-  /** 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;
@@ -268,33 +235,26 @@ summary) {
 }
 
 :where(select[multiple]) {
-  /** Don't show the arrow for multiple choice selects [SE] */
   background-image: none;
 }
 
 :where(textarea) {
-  /** Change the resize direction in all browsers [RS][SE] */
   resize: vertical;
 }
 
 :where([type=color i], [type=range i]) {
-  /** 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 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: auto;
   -moz-appearance: auto;
   appearance: auto;
@@ -304,34 +264,27 @@ summary) {
 }
 
 ::-moz-placeholder {
-  /** Better default text opacity [OP] */
   opacity: 0.67;
-  /** Better default text color [HR][SE] */
   color: inherit;
 }
 
 ::placeholder {
-  /** Better default text opacity [OP] */
   opacity: 0.67;
-  /** Better default text color [HR][SE] */
   color: inherit;
 }
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  /** Correct the cursor style of increment and decrement buttons in Safari [RS][SE] */
   height: auto;
 }
 
 ::-webkit-search-decoration {
-  /** Remove the inner padding in Chrome, Edge, and Safari on macOS [SE] */
   -webkit-appearance: none;
   appearance: none;
 }
 
-/**
- * Media-related
- */
+/* #endregion*/
+/* #region Media*/
 :where(audio, canvas, embed, iframe, img, object, picture, svg, video) {
   max-inline-size: 100%;
   vertical-align: middle;
@@ -342,7 +295,6 @@ summary) {
 }
 
 :where(audio) {
-  /** Better default width [CR] */
   width: 100%;
 }
 
@@ -351,7 +303,6 @@ summary) {
 }
 
 :where(canvas, img, svg, video) {
-  /** Proportional height based on width [HR] */
   block-size: auto;
 }
 
@@ -360,21 +311,17 @@ summary) {
 }
 
 :where(img) {
-  /** CSS magic! [HR] */
   background-repeat: no-repeat;
-  /** Ditto */
   background-size: cover;
-  /** Offset alt-text if image does not load [HR] */
+  outline: 1px solid light-dark(rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.08));
   font-style: italic;
 }
 
 :where(picture) {
-  /** Remove the unnecessary wrapping 'picture', while maintaining contents [CR] */
   display: contents;
 }
 
 :where(source) {
-  /** Source elements have nothing to display, so we hide them entirely [CR] */
   display: none;
 }
 
@@ -382,9 +329,8 @@ summary) {
   fill: currentcolor;
 }
 
-/**
- * Attributes
- */
+/* #endregion*/
+/* #region Attributes*/
 :where([aria-busy=true i]) {
   cursor: progress;
 }
@@ -413,32 +359,26 @@ summary) {
   display: inherit !important;
 }
 
-/**
- * Pseudo-classes
- */
+/* #endregion*/
+/* #region Pseudo-classes*/
 :where(:target) {
   scroll-margin: 2rlh;
 }
 
-/**
- * Media queries
- */
+/* #endregion*/
+/* #region 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 {
@@ -448,4 +388,5 @@ summary) {
     scroll-behavior: auto !important;
   }
 }
+/* #endregion*/
 

package/dist/css/splitter.css

@@ -19,7 +19,7 @@
   transition: background 0.125s ease-in-out;
 }
 
-:where([oui-splitter-separator]:has([oui-splitter-handle]:focus)),
+:where([oui-splitter-separator]:has([oui-splitter-handle]:focus-visible)),
 :where([oui-splitter-separator]:has([oui-splitter-handle]:hover)),
 :where([oui-splitter-separator][oui-splitter-active]) {
   background-color: color-mix(in oklab, var(--oui-blue-6), transparent 82.5%);
@@ -49,7 +49,7 @@
   transition: background 0.125s ease-in-out, outline 0.125s ease-in-out;
 }
 
-:where([oui-splitter-handle]:focus)::after,
+:where([oui-splitter-handle]:focus-visible)::after,
 :where([oui-splitter-handle]:hover)::after,
 :where([oui-splitter-handle][oui-splitter-active])::after {
   background-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);