@oscarpalmer/oui 0.32.0 → 0.33.0

package/dist/js/menu.d.mts

@@ -1 +1 @@
-export {}
+export { };

package/dist/js/toolbar.d.mts

@@ -1 +1 @@
-export {}
+export { };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.32.0",
+	"version": "0.33.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -95,14 +95,14 @@
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.48.0"
+		"@oscarpalmer/toretto": "^0.49.1"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.75",
+		"@oxlint/plugins": "^1.77",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",
-		"jsdom": "^29.1",
+		"jsdom": "^30",
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",

package/src/css/combobox.scss

@@ -14,9 +14,11 @@
 		background-position: right 0.5em center;
 		background-repeat: no-repeat;
 		background-size: 1em;
+		position: relative;
 	}
 
 	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within),
 	:where(
 		&:not([disabled], [readonly], [aria-disabled='true' i]):has(
 			+ [oui-combobox-content]:focus-within
@@ -26,24 +28,37 @@
 	}
 
 	@media (hover: hover) {
-		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
+		:where(
+			&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):hover
+		) {
 			@include mixins.input-hover;
 		}
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])) {
 		--oui-foreground-percentage: 25%;
 
 		font-style: italic;
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):focus) {
 		--oui-outline-percentage: 75%;
 	}
 
 	:where(&:is([disabled], [aria-disabled='true' i])) {
 		--oui-background-percentage: 50%;
 	}
+
+	:where(& > button) {
+		border: none;
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+	}
+
+	:where(& > button:focus) {
+		outline: none;
+	}
 }
 
 :where([oui-combobox-content]) {
@@ -54,7 +69,7 @@
 	height: fit-content;
 	max-width: max(25vw, 32rem);
 	max-height: max(25vh, 32rem);
-	min-width: var(--oui-combobox-width, auto);
+	min-width: anchor-size(width);
 	flex-flow: column nowrap;
 	border-radius: 0.25em;
 
@@ -63,12 +78,6 @@
 	}
 }
 
-:where([oui-combobox-empty]) {
-	padding: 1em;
-	text-align: center;
-	font-style: italic;
-}
-
 :where([oui-combobox-filter], [oui-combobox-header]) {
 	&::after {
 		content: '';
@@ -101,23 +110,23 @@
 	border-radius: 0.25em;
 	font-size: 0.875rem;
 
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus) {
+	:where(&:focus) {
 		@include mixins.input-focus;
 	}
 
 	@media (hover: hover) {
-		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
+		:where(&:hover) {
 			@include mixins.input-hover;
 		}
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])) {
 		--oui-foreground-percentage: 25%;
 
 		font-style: italic;
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):focus) {
 		--oui-outline-percentage: 75%;
 	}
 
@@ -126,13 +135,6 @@
 	}
 }
 
-:where([oui-combobox-filter-label]) {
-	@include mixins.visually-hidden;
-
-	display: inline-flex;
-	position: absolute;
-}
-
 :where([oui-combobox-header]) {
 	padding: 0.5em calc(0.75em / 0.75);
 	background-color: var(--oui-gray-0);
@@ -143,11 +145,23 @@
 	z-index: 1;
 }
 
+:where([oui-combobox-hidden]) {
+	@include mixins.visually-hidden;
+
+	position: absolute;
+}
+
 :where([oui-combobox-list]) {
 	overflow: auto;
 	position: relative;
 }
 
+:where([oui-combobox-message]) {
+	padding: 1em;
+	text-align: center;
+	font-style: italic;
+}
+
 [oui-combobox-option] {
 	:where(&) {
 		padding: 0.5em 0.75em;
@@ -168,7 +182,9 @@
 		margin: 0 0.75em 0 0;
 	}
 
-	:where(oui-combobox:not([disabled], [readonly], [aria-disabled='true' i]) &) {
+	:where(
+		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) &
+	) {
 		@media (hover: hover) {
 			:where(&:hover) {
 				background-color: var(--oui-blue-1);
@@ -193,24 +209,75 @@
 	gap: 0.5em;
 	overflow: auto;
 	list-style: none;
+	position: relative;
+	z-index: 2;
 }
 
 [oui-combobox-selection-item] {
 	:where(&) {
-		@include mixins.badge;
+		@include mixins.button;
+
+		--oui-background-value: var(--oui-blue-1);
+		--oui-foreground-percentage: 12.5%;
+		--oui-foreground-value: var(--oui-blue-8);
+		--oui-shadow-percentage: 90%;
 
-		border-radius: 3em;
 		padding: 0.5em 1em;
-		gap: 0.75em;
-		font-size: 0.875em;
-		transition: 0.125s ease-in-out;
+		flex-wrap: nowrap;
+		border-radius: 5em;
+		font-size: 0.75em;
+		white-space: nowrap;
+	}
+
+	:where(
+		oui-combobox:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
+			&:focus-visible
+	) {
+		--oui-outline-percentage: 87.5%;
+		--oui-outline-value: var(--oui-blue-6);
+	}
+
+	:where(
+		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
+			&:focus-visible
+	) {
+		--oui-background-value: var(--oui-red-1);
+		--oui-foreground-value: var(--oui-red-8);
+		--oui-outline-percentage: 75%;
+		--oui-outline-value: var(--oui-red-6);
 	}
 
 	@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);
+		:where(
+			oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
+				&:hover
+		) {
+			--oui-background-value: var(--oui-red-1);
+			--oui-foreground-value: var(--oui-red-8);
+			--oui-outline-value: var(--oui-red-6);
+
+			--oui-background-percentage: 50%;
+			--oui-foreground-percentage: 25%;
 		}
 	}
+
+	:where(
+		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
+			&:active
+	) {
+		box-shadow:
+			0 0 0 1px var(--oui-shadow-value),
+			inset 0 1px 2px 0 var(--oui-shadow-value),
+			inset 0 2px 4px 0 var(--oui-shadow-value);
+	}
+
+	:where(
+		oui-combobox:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) &
+	) {
+		--oui-background-percentage: 80%;
+		--oui-foreground-percentage: 20%;
+		--oui-shadow-percentage: 95%;
+
+		font-style: italic;
+	}
 }