@oscarpalmer/oui 0.18.0 → 0.20.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;
@@ -738,7 +711,6 @@
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
-  clip: rect(1px, 1px 1px, 1px) !important;
   clip-path: inset(50%) !important;
   overflow: hidden !important;
   border: 0 !important;

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/popover.css

@@ -1,12 +1,34 @@
 
 :where([oui-popover-content]) {
   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);
+  --margin-left: 0;
+  --margin-top: 0;
+  margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
+  pointer-events: all !important;
+}
+:where([oui-popover-content])[position^=above], :where([oui-popover-content])[position^=top] {
+  --margin-top: -0.5rem;
+}
+:where([oui-popover-content])[position^=below], :where([oui-popover-content])[position^=bottom] {
+  --margin-top: 0.5rem;
+}
+:where([oui-popover-content])[position^=end], :where([oui-popover-content])[position^=right] {
+  --margin-left: 0.5rem;
+}
+:where([oui-popover-content])[position^=left], :where([oui-popover-content])[position^=start] {
+  --margin-left: -0.5rem;
+}
+:where([oui-popover-content]) {
   padding: 1rem;
+  overscroll-behavior: contain;
   background-color: var(--oui-absolute);
   border-radius: 0.5rem;
 }
 :where([oui-popover-content]):focus {
   outline: none;
 }
+:where([oui-popover-content]) * {
+  overscroll-behavior: contain;
+}
 
 

package/dist/css/reset.css

@@ -56,7 +56,7 @@
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 :where(body) {
@@ -105,9 +105,9 @@ 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;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
   /** Ditto */
   cursor: pointer;
 }
@@ -174,7 +174,7 @@ summary) {
 }
 
 :where(small, sub, sup) {
-  font-size: 0.875rem;
+  font-size: 0.875em;
 }
 
 :where(sub, sup) {
@@ -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] */
@@ -277,9 +277,9 @@ summary) {
 
 ::file-selector-button {
   /** Correct the inability to style upload buttons in iOS and Safari [RS][SE] */
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
   color: inherit;
   font: inherit;
   line-height: 1.25;
@@ -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,20 +3,20 @@
   width: 100%;
   background-color: var(--oui-absolute);
 }
-:where(.oui-table-wrapper) {
+:where(.oui-table_wrapper) {
   max-height: 32em;
   overflow: auto;
+  overscroll-behavior: contain;
   border: 1px solid var(--oui-gray-3);
   border-radius: 0.25em;
   position: relative;
-  overscroll-behavior-y: none;
 }
 :where(.oui-table caption) {
   height: 2rem;
   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;
@@ -10,6 +27,24 @@
 
 :where([oui-tooltip-content]) {
   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);
+  --margin-left: 0;
+  --margin-top: 0;
+  margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
+  pointer-events: all !important;
+}
+:where([oui-tooltip-content])[position^=above], :where([oui-tooltip-content])[position^=top] {
+  --margin-top: -0.5rem;
+}
+:where([oui-tooltip-content])[position^=below], :where([oui-tooltip-content])[position^=bottom] {
+  --margin-top: 0.5rem;
+}
+:where([oui-tooltip-content])[position^=end], :where([oui-tooltip-content])[position^=right] {
+  --margin-left: 0.5rem;
+}
+:where([oui-tooltip-content])[position^=left], :where([oui-tooltip-content])[position^=start] {
+  --margin-left: -0.5rem;
+}
+:where([oui-tooltip-content]) {
   max-width: 48ch;
   padding: 0.75em 1em;
   opacity: 0;
@@ -19,6 +54,31 @@
   transition: opacity 0.125s ease-in-out;
   transition-delay: 0s;
 }
+:where([oui-tooltip-content])::after {
+  content: "";
+  opacity: 0;
+  position: absolute;
+}
+:where([oui-tooltip-content])[position^=above]::after, :where([oui-tooltip-content])[position^=below]::after, :where([oui-tooltip-content])[position^=bottom]::after, :where([oui-tooltip-content])[position^=top]::after {
+  width: 100%;
+  height: 0.5rem;
+}
+:where([oui-tooltip-content])[position^=above]::after, :where([oui-tooltip-content])[position^=top]::after {
+  inset: 100% 0 0;
+}
+:where([oui-tooltip-content])[position^=below]::after, :where([oui-tooltip-content])[position^=bottom]::after {
+  inset: -5rem 0 0;
+}
+:where([oui-tooltip-content])[position^=end]::after, :where([oui-tooltip-content])[position^=left]::after, :where([oui-tooltip-content])[position^=right]::after, :where([oui-tooltip-content])[position^=start]::after {
+  width: 0.5rem;
+  height: 100%;
+}
+:where([oui-tooltip-content])[position^=end]::after, :where([oui-tooltip-content])[position^=right]::after {
+  inset: 0 0 0 -0.5rem;
+}
+:where([oui-tooltip-content])[position^=left]::after, :where([oui-tooltip-content])[position^=start]::after {
+  inset: 0 0 0 100%;
+}
 
 :where([oui-tooltip-content][oui-tooltip-content-active]) {
   opacity: 1;

package/dist/js/attributable.d.mts

@@ -0,0 +1,4 @@
+//#region src/js/attributable.d.ts
+declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
+//#endregion
+export { attributable };

package/dist/js/{attributable.js → attributable.mjs}

@@ -1,3 +1,4 @@
+//#region src/js/attributable.ts
 function attributable(attribute, add, remove) {
 	new MutationObserver((entries) => {
 		const { length } = entries;
@@ -26,11 +27,17 @@ function handleAdded(attribute, nodes, add) {
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
 		if (element.hasAttribute(attribute)) add(element);
+		if (element.hasChildNodes()) handleAdded(attribute, element.childNodes, add);
 	}
 }
 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]);
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		remove(element);
+		if (element.hasChildNodes()) handleRemoved(element.childNodes, remove);
+	}
 }
+//#endregion
 export { attributable };

package/dist/js/floatable.d.mts

@@ -0,0 +1,26 @@
+//#region src/js/floatable.d.ts
+declare class Floatable {
+  readonly options: Options;
+  active: boolean;
+  disabled: boolean;
+  frame: DOMHighResTimeStamp | undefined;
+  ignoreFocus: boolean;
+  constructor(options: Options);
+  destroy(): void;
+  disable(): void;
+  enable(): void;
+  toggle(active: boolean, ignoreFocus?: boolean): void;
+}
+type Options = {
+  anchor: HTMLElement;
+  content: HTMLElement;
+  defaultPosition: Position;
+  interactive: boolean;
+  positionAttribute: string;
+  preferAbove: boolean;
+  onAfter?: (active: boolean) => void;
+};
+type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'horizontal' | 'horizontal-bottom' | 'horizontal-top' | 'start' | 'start-bottom' | 'start-top' | 'vertical' | 'vertical-end' | 'vertical-start';
+declare function deactivate(floatable: Floatable): void;
+//#endregion
+export { Floatable, deactivate };