@oscarpalmer/oui 0.29.1 → 0.31.0

package/dist/js/splitter.d.mts

@@ -1,7 +1,7 @@
 //#region src/js/splitter.d.ts
 declare global {
   interface HTMLElementTagNameMap {
-    [SELECTOR]: OuiSplitterElement;
+    [TAGNAME]: OuiSplitterElement;
   }
 }
 declare class OuiSplitterElement extends HTMLElement {
@@ -44,6 +44,6 @@ declare class OuiSplitterElement extends HTMLElement {
   disconnectedCallback(): void;
   attributeChangedCallback(name: string): void;
 }
-declare const SELECTOR = "oui-splitter";
+declare const TAGNAME = "oui-splitter";
 //#endregion
 export { OuiSplitterElement };

package/dist/js/splitter.mjs

@@ -1,10 +1,10 @@
+import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
-import { clamp } from "@oscarpalmer/atoms/number";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
@@ -281,11 +281,11 @@ function setSize(splitter, size, previous) {
 	setStyle(splitter.element, "--oui-splitter-size", `${size}`);
 	setAriaValue(splitter);
 }
-const SELECTOR = "oui-splitter";
-const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
-const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
-const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
-const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
+const TAGNAME = "oui-splitter";
+const ATTRIBUTE_ACTIVE = `${TAGNAME}-active`;
+const ATTRIBUTE_HANDLE = `${TAGNAME}-handle`;
+const ATTRIBUTE_HORIZONTAL = `${TAGNAME}-horizontal`;
+const ATTRIBUTE_SEPARATOR = `${TAGNAME}-separator`;
 const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
 const KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
 const KEYS_NEGATIVE = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
@@ -296,7 +296,7 @@ const KEYS_ALL = /* @__PURE__ */ new Set([
 	...KEYS_VERTICAL
 ]);
 const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
-const MESSAGE = `<${SELECTOR}> must have exactly two panels.`;
+const MESSAGE = `<${TAGNAME}> must have exactly two panels.`;
 const METHODS_CONNECT = ["delete", "set"];
 const METHODS_OBSERVE = ["unobserve", "observe"];
 const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
@@ -314,12 +314,12 @@ const VALUE_DECIMALS = 6;
 let index = 0;
 let frame;
 let splitter;
-customElements.define(SELECTOR, OuiSplitterElement);
 on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
 on(document, "pointermove", onPointermove);
 on(document, "pointerup", onPointerup);
 on(document, "touchcancel", onPointerup);
 on(document, "touchstart", onPointerdown, { passive: false });
+customElements.define(TAGNAME, OuiSplitterElement);
 //#endregion
 export { OuiSplitterElement };

package/dist/js/tooltip.d.mts

@@ -1,5 +1,4 @@
-import { r as OuiFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
-
+import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {
   #private;

package/dist/js/tooltip.mjs

@@ -1,11 +1,11 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { getAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/tooltip.ts
 var OuiTooltip = class {
 	#state;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.29.1",
+	"version": "0.31.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -33,6 +33,10 @@
 			"types": "./dist/js/index.d.mts",
 			"default": "./dist/js/index.mjs"
 		},
+		"./combobox": {
+			"types": "./dist/js/combobox.d.mts",
+			"default": "./dist/js/combobox.mjs"
+		},
 		"./dialog": {
 			"types": "./dist/js/dialog.d.mts",
 			"default": "./dist/js/dialog.mjs"
@@ -91,10 +95,10 @@
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.47.3"
+		"@oscarpalmer/toretto": "^0.48.0"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.73",
+		"@oxlint/plugins": "^1.75",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",

package/src/css/badge.scss

@@ -4,24 +4,7 @@
 
 .oui {
 	:where(&-pill, &-tag) {
-		--oui-shadow-mixed: color-mix(
-			in oklab,
-			var(--oui-shadow, var(--oui-gray-6)),
-			transparent 92.5%
-		);
-
-		@include mixins.shadow(var(--oui-shadow-mixed));
-
-		display: inline-flex;
-		flex-flow: row nowrap;
-		gap: 0.5em;
-		background-color: color-mix(
-			in oklab,
-			var(--oui-background, var(--oui-gray-0)),
-			transparent 25%
-		);
-		color: var(--oui-foreground, var(--oui-gray-8));
-		line-height: 1.25;
+		@include mixins.badge;
 	}
 
 	:where(&-pill) {

package/src/css/combobox.scss

@@ -0,0 +1,137 @@
+/*! https://github.com/oscarpalmer/oui */
+
+@use './mixins.scss' as mixins;
+
+[oui-combobox-anchor] {
+	:where(&) {
+		@include mixins.input;
+
+		--oui-background-value: var(--oui-absolute);
+
+		padding: 0.5em 2em .5em 0.75em;
+		border-radius: 0.25em;
+		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 .5em center;
+		background-repeat: no-repeat;
+		background-size: 1em;
+	}
+
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
+	:where([oui-combobox]:focus-within &:not([disabled], [readonly], [aria-disabled='true' i])) {
+		@include mixins.input-focus;
+	}
+
+	@media (hover: hover) {
+		:where(:not([disabled], [readonly], [aria-disabled='true' i]) &:hover) {
+			@include mixins.input-hover;
+		}
+	}
+
+	:where(:is([disabled], [readonly], [aria-disabled='true' i]) &) {
+		--oui-foreground-percentage: 25%;
+
+		font-style: italic;
+	}
+
+	:where(:is([disabled], [readonly], [aria-disabled='true' i]) &:focus) {
+		--oui-outline-percentage: 75%;
+	}
+
+	:where(:is([disabled], [aria-disabled='true' i]) &) {
+		--oui-background-percentage: 50%;
+	}
+}
+
+:where([oui-combobox-content]) {
+	@include mixins.floatable;
+	@include mixins.shadow-overlay;
+
+	width: fit-content;
+	height: fit-content;
+	max-width: max(25vw, 32rem);
+	max-height: max(25vh, 32rem);
+	min-width: var(--oui-combobox-width, auto);
+	flex-flow: column nowrap;
+	border-radius: 0.25em;
+
+	&:popover-open {
+		display: flex !important;
+	}
+}
+
+:where([oui-combobox-empty]) {
+	padding: 1em;
+	text-align: center;
+	font-style: italic;
+}
+
+:where([oui-combobox-list]) {
+	overflow: auto;
+}
+
+[oui-combobox-option] {
+	:where(&) {
+		padding: 0.5em 0.75em;
+		outline: 4px solid transparent;
+		outline-offset: -4px;
+		line-height: 1.25;
+		cursor: pointer;
+		transition: .125s ease-in-out;
+	}
+
+	:where(&[aria-selected='true' i]) {
+		background-color: var(--oui-blue-3);
+		color: var(--oui-blue-9);
+	}
+
+	:where(oui-combobox[multiple] &[aria-selected='true' i])::before {
+		content: '✓';
+		margin: 0 0.75em 0 0;
+	}
+
+	:where(oui-combobox:not([disabled], [readonly], [aria-disabled='true' i]) &) {
+		@media (hover: hover) {
+			:where(&:hover) {
+				background-color: var(--oui-blue-1);
+				color: var(--oui-blue-8);
+			}
+		}
+	}
+}
+
+:where([oui-combobox-option-active]) {
+	background-color: var(--oui-blue-1);
+	outline-color: var(--oui-blue-4);
+	color: var(--oui-blue-8);
+}
+
+:where([oui-combobox-selection]) {
+	max-height: 8rem;
+	display: flex;
+	padding: .5em;
+	margin: -.5em -.5em -.5em -.75em;
+	flex-flow: row wrap;
+	gap: 0.5em;
+	overflow: auto;
+	list-style: none;
+}
+
+[oui-combobox-selection-item] {
+	:where(&) {
+		@include mixins.badge;
+
+		border-radius: 3em;
+		padding: 0.5em 1em;
+		gap: .75em;
+		font-size: .875em;
+		transition: .125s ease-in-out;
+	}
+
+	@media (hover: hover) {
+		:where(oui-combobox:not([disabled], [readonly], [aria-disabled='true' i]) &:hover) {
+			--oui-background: var(--oui-red-0);
+			--oui-foreground: var(--oui-red-8);
+			--oui-shadow: var(--oui-red-6);
+		}
+	}
+}

package/src/css/form.scss

@@ -2,70 +2,6 @@
 
 @use 'mixins.scss' as mixins;
 
-@mixin focus() {
-	--oui-border-value: var(--oui-blue-5);
-	--oui-foreground-value: inherit;
-	--oui-outline-percentage: 75%;
-	--oui-outline-value: var(--oui-blue-6);
-}
-
-@mixin hover() {
-	--oui-border-value: var(--oui-blue-4);
-	--oui-foreground-percentage: 0%;
-	--oui-foreground-value: inherit;
-	--oui-outline-percentage: 90%;
-	--oui-outline-value: var(--oui-blue-6);
-}
-
-@mixin input {
-	--oui-background-percentage: 0%;
-	--oui-foreground-percentage: 0%;
-
-	@include outlined;
-
-	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)
-	);
-}
-
-@mixin invalid() {
-	--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);
-}
-
-@mixin outlined {
-	--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;
-}
-
-@mixin valid() {
-	--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-fieldset) {
 	padding: 1em;
 	border: 1px solid var(--oui-gray-3);
@@ -78,7 +14,7 @@
 	}
 
 	:where(&:not([type='range' i])) {
-		@include input;
+		@include mixins.input;
 
 		padding: 0.5em 0.75em;
 		border-radius: 0.25em;
@@ -135,7 +71,7 @@
 		outline: none;
 
 		&::range-track {
-			@include input;
+			@include mixins.input;
 
 			appearance: none;
 			width: 100%;
@@ -148,7 +84,7 @@
 			--oui-background-percentage: 0%;
 			--oui-background-value: var(--oui-blue-6);
 
-			@include outlined;
+			@include mixins.input-outlined;
 
 			appearance: none;
 			width: 1.25em;
@@ -177,7 +113,7 @@
 			[aria-invalid='true' i]
 		)
 	) {
-		@include invalid;
+		@include mixins.input-invalid;
 
 		&::file-selector-button {
 			--oui-background-value: var(--oui-red-2);
@@ -190,7 +126,7 @@
 		}
 
 		&::range-track {
-			@include invalid;
+			@include mixins.input-invalid;
 		}
 
 		& > option:checked {
@@ -205,7 +141,7 @@
 			[aria-invalid='false' i]
 		)
 	) {
-		@include valid;
+		@include mixins.input-valid;
 
 		&::file-selector-button {
 			--oui-background-value: var(--oui-green-2);
@@ -214,7 +150,7 @@
 		}
 
 		&::range-track {
-			@include valid;
+			@include mixins.input-valid;
 		}
 
 		&::range-thumb {
@@ -249,7 +185,7 @@
 
 	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
 	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within) {
-		@include focus;
+		@include mixins.input-focus;
 
 		&::file-selector-button {
 			--oui-background-value: var(--oui-blue-2);
@@ -259,7 +195,7 @@
 
 		&::range-thumb,
 		&::range-track {
-			@include focus;
+			@include mixins.input-focus;
 		}
 
 		&::range-thumb {
@@ -271,7 +207,7 @@
 
 	@media (hover: hover) {
 		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
-			@include hover;
+			@include mixins.input-hover;
 
 			&::file-selector-button {
 				--oui-background-value: var(--oui-blue-2);
@@ -284,12 +220,12 @@
 			}
 
 			&::range-track {
-				@include hover;
+				@include mixins.input-hover;
 			}
 		}
 	}
 
-	:where(&[disabled], &[readonly], &[aria-disabled='true' i]) {
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
 		--oui-foreground-percentage: 25%;
 
 		font-style: italic;
@@ -311,7 +247,7 @@
 		--oui-outline-percentage: 75%;
 	}
 
-	:where(&[disabled], &[aria-disabled='true' i]) {
+	:where(&:is([disabled], [aria-disabled='true' i])) {
 		--oui-background-percentage: 50%;
 
 		&::range-thumb {
@@ -383,9 +319,11 @@ select.oui-input:is([multiple]) {
 	font-weight: bold;
 }
 
-:where(.oui-label) {
-	cursor: pointer;
-	transition: 0.125s ease-in-out;
+.oui-label {
+	:where(&) {
+		cursor: pointer;
+		transition: 0.125s ease-in-out;
+	}
 
 	@media (hover: hover) {
 		:where(&[for]:hover) {

package/src/css/mixins.scss

@@ -1,3 +1,24 @@
+@mixin badge() {
+	--oui-shadow-mixed: color-mix(
+			in oklab,
+			var(--oui-shadow, var(--oui-gray-6)),
+			transparent 92.5%
+		);
+
+		@include shadow(var(--oui-shadow-mixed));
+
+		display: inline-flex;
+		flex-flow: row nowrap;
+		gap: 0.5em;
+		background-color: color-mix(
+			in oklab,
+			var(--oui-background, var(--oui-gray-0)),
+			transparent 25%
+		);
+		color: var(--oui-foreground, var(--oui-gray-8));
+		line-height: 1.25;
+}
+
 @mixin button() {
 	--oui-background-percentage: 25%;
 	--oui-foreground-percentage: 0%;
@@ -77,6 +98,71 @@
 	}
 }
 
+@mixin input {
+	--oui-background-percentage: 0%;
+	--oui-foreground-percentage: 0%;
+
+	@include input-outlined;
+
+	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)
+	);
+}
+
+@mixin input-focus() {
+	--oui-border-value: var(--oui-blue-5);
+	--oui-foreground-value: inherit;
+	--oui-outline-percentage: 75%;
+	--oui-outline-value: var(--oui-blue-6);
+}
+
+@mixin input-hover() {
+	--oui-border-value: var(--oui-blue-4);
+	--oui-foreground-percentage: 0%;
+	--oui-foreground-value: inherit;
+	--oui-outline-percentage: 90%;
+	--oui-outline-value: var(--oui-blue-6);
+}
+
+@mixin input-invalid() {
+	--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);
+}
+
+@mixin input-outlined {
+	--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;
+}
+
+@mixin input-valid() {
+	--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);
+}
+
 @mixin shadow($color: rgb(0 0 0 / 5%), $inset: transparent) {
 	box-shadow:
 		inset 0 1px 0 0 $inset,