@oscarpalmer/oui 0.35.0 → 0.37.0

package/src/css/form.scss

@@ -51,6 +51,30 @@
 		font-variant-numeric: tabular-nums;
 	}
 
+	:where(&:is([type='date' i], [type='datetime-local' i], [type='month' i], [type='week' i])) {
+		&::-webkit-calendar-picker-indicator {
+			--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: 2px;
+			border-radius: 1em;
+			transition: outline 0.125s ease-in-out;
+			cursor: pointer;
+
+			&:focus-within {
+				--oui-outline-percentage: 62.5%;
+			}
+
+			@media (hover: hover) {
+				&:hover {
+					--oui-outline-percentage: 85%;
+				}
+			}
+		}
+	}
+
 	:where(&:is([type='file' i])) {
 		padding-left: 0.5em;
 
@@ -61,6 +85,7 @@
 			--oui-outline-value: var(--oui-grey-6);
 
 			margin: 0 0.75em 0 0;
+			outline: none;
 			font-size: 0.75em;
 			cursor: pointer;
 		}
@@ -108,13 +133,15 @@
 	}
 
 	:where(
-		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-			:user-invalid:not([aria-invalid='false' i]),
-			[aria-invalid='true' i]
-		)
+		&.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])
 	) {
-		@include mixins.input-invalid;
-
 		&::file-selector-button {
 			--oui-background-value: var(--oui-red-2);
 			--oui-foreground-value: var(--oui-red-8);
@@ -136,13 +163,15 @@
 	}
 
 	:where(
-		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-			:user-valid:not([aria-invalid='true' i]),
-			[aria-invalid='false' i]
-		)
+		&.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])
 	) {
-		@include mixins.input-valid;
-
 		&::file-selector-button {
 			--oui-background-value: var(--oui-green-2);
 			--oui-foreground-value: var(--oui-green-8);
@@ -163,72 +192,59 @@
 		}
 	}
 
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i])) {
-		&::-webkit-calendar-picker-indicator {
-			outline: 4px solid transparent;
-			outline-offset: 2px;
-			border-radius: 2em;
-			transition: 0.125s ease-in-out;
-			cursor: pointer;
-
-			@media (hover: hover) {
-				&:hover {
-					outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
-				}
+	&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
+		:where(&:focus-visible, &:focus-within) {
+			&::file-selector-button {
+				--oui-background-value: var(--oui-blue-2);
+				--oui-foreground-value: var(--oui-blue-8);
+				--oui-outline-value: var(--oui-blue-6);
 			}
 
-			&:focus {
-				outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 75%);
+			&::range-thumb,
+			&::range-track {
+				@include mixins.input-focus;
 			}
-		}
-	}
 
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus),
-	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus-within) {
-		@include mixins.input-focus;
+			&::range-thumb {
+				--oui-background-value: var(--oui-blue-6);
 
-		&::file-selector-button {
-			--oui-background-value: var(--oui-blue-2);
-			--oui-foreground-value: var(--oui-blue-8);
-			--oui-outline-value: var(--oui-blue-6);
+				box-shadow: 0 1px 2px 2px rgb(0 0 0 / 25%);
+			}
 		}
 
-		&::range-thumb,
-		&::range-track {
-			@include mixins.input-focus;
-		}
+		@media (hover: hover) {
+			:where(&:hover) {
+				&::file-selector-button {
+					--oui-background-value: var(--oui-blue-2);
+					--oui-foreground-value: var(--oui-blue-8);
+					--oui-outline-value: var(--oui-blue-6);
+				}
 
-		&::range-thumb {
-			--oui-background-value: var(--oui-blue-6);
+				&::range-thumb {
+					--oui-background-value: var(--oui-blue-5);
+				}
 
-			box-shadow: 0 1px 2px 2px rgb(0 0 0 / 25%);
+				&::range-track {
+					@include mixins.input-hover;
+				}
+			}
 		}
 	}
 
-	@media (hover: hover) {
-		:where(&:not([disabled], [readonly], [aria-disabled='true' i]):hover) {
-			@include mixins.input-hover;
-
-			&::file-selector-button {
-				--oui-background-value: var(--oui-blue-2);
-				--oui-foreground-value: var(--oui-blue-8);
-				--oui-outline-value: var(--oui-blue-6);
-			}
-
-			&::range-thumb {
-				--oui-background-value: var(--oui-blue-5);
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])) {
+		&::-webkit-calendar-picker-indicator {
+			&:focus-within {
+				--oui-outline-percentage: 0%;
+				--oui-outline-value: var(--oui-gray-3);
 			}
 
-			&::range-track {
-				@include mixins.input-hover;
+			@media (hover: hover) {
+				&:hover {
+					--oui-outline-percentage: 0%;
+					--oui-outline-value: var(--oui-gray-3);
+				}
 			}
 		}
-	}
-
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i])) {
-		--oui-foreground-percentage: 25%;
-
-		font-style: italic;
 
 		&::file-selector-button {
 			--oui-background-value: var(--oui-gray-1);
@@ -243,12 +259,10 @@
 		}
 	}
 
-	:where(&:is([disabled], [readonly], [aria-disabled='true' i]):focus) {
-		--oui-outline-percentage: 75%;
-	}
-
 	:where(&:is([disabled], [aria-disabled='true' i])) {
-		--oui-background-percentage: 50%;
+		&::-webkit-calendar-picker-indicator {
+			opacity: 0.5;
+		}
 
 		&::range-thumb {
 			--oui-background-value: var(--oui-gray-1);
@@ -260,10 +274,6 @@
 			--oui-background-percentage: 50%;
 			--oui-background-value: var(--oui-gray-0);
 		}
-
-		&::-webkit-calendar-picker-indicator {
-			opacity: 0.5;
-		}
 	}
 }
 
@@ -317,12 +327,13 @@ select.oui-input:is([multiple]) {
 :where(.oui-label, .oui-legend) {
 	font-size: 0.875rem;
 	font-weight: bold;
+	align-self: flex-start;
 }
 
 .oui-label {
 	:where(&) {
 		cursor: pointer;
-		transition: 0.125s ease-in-out;
+		transition: color 0.125s ease-in-out;
 	}
 
 	@media (hover: hover) {
@@ -358,6 +369,7 @@ select.oui-input:is([multiple]) {
 		font-family: system-ui, sans-serif;
 		position: absolute;
 		transition: 0.125s ease-in-out;
+		transition-property: background, outline, border, box-shadow, color;
 		pointer-events: none;
 	}
 

package/src/css/listbox.scss

@@ -0,0 +1,120 @@
+/*! https://github.com/oscarpalmer/oui */
+
+@use './mixins.scss' as mixins;
+
+:where(oui-listbox, [oui-listbox-content]) {
+	display: flex;
+	flex-flow: column nowrap;
+}
+
+:where([oui-listbox-content]) {
+	flex: 1;
+	background-color: var(--oui-absolute);
+	border: 1px solid var(--oui-gray-3);
+	border-radius: 0.5em;
+}
+
+:where([oui-listbox-filter], [oui-listbox-header]) {
+	&::after {
+		content: '';
+		width: 100%;
+		height: 0.25em;
+		background-image: linear-gradient(to bottom, rgb(0 0 0 / 12.5%), transparent);
+		position: absolute;
+		bottom: -0.25em;
+		left: 0;
+	}
+}
+
+:where([oui-listbox-filter]) {
+	padding: 1em;
+	background-color: var(--oui-yellow-0);
+	border-radius: 0.5em 0.5em 0 0;
+	position: relative;
+	z-index: 2;
+}
+
+[oui-listbox-filter-input] {
+	:where(&) {
+		@include mixins.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 calc(0.75em / 0.75);
+	background-color: var(--oui-gray-0);
+	font-size: 0.75em;
+	font-weight: bold;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+:where([oui-listbox-hidden]) {
+	@include mixins.visually-hidden;
+
+	position: absolute;
+}
+
+:where([oui-listbox-list]) {
+	height: fit-content;
+	max-height: max(25vh, 32rem);
+	flex: 1;
+	overflow: auto;
+	border-radius: 0 0 0.5em 0.5em;
+	position: relative;
+}
+
+:where([oui-listbox-list-empty]) {
+	display: none;
+}
+
+:where([oui-listbox-message]) {
+	padding: 1em;
+	flex: 1;
+	align-content: center;
+	text-align: center;
+	font-style: italic;
+}
+
+[oui-listbox-option] {
+	:where(&) {
+		padding: 0.5em 0.75em;
+		outline: 4px solid transparent;
+		outline-offset: -4px;
+		line-height: 1.25;
+		cursor: pointer;
+	}
+
+	:where(&[aria-selected='true' i]) {
+		background-color: var(--oui-blue-2);
+		color: var(--oui-blue-9);
+	}
+
+	:where(oui-listbox[multiple] &[aria-selected='true' i])::before {
+		content: '✓';
+		margin: 0 0.75em 0 0;
+	}
+
+	oui-listbox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) & {
+		@media (hover: hover) {
+			:where(&:hover) {
+				background-color: var(--oui-blue-1);
+				color: var(--oui-blue-8);
+			}
+		}
+	}
+}
+
+:where(oui-listbox:focus-within [oui-listbox-option-active]) {
+	background-color: var(--oui-blue-1);
+	outline-color: var(--oui-blue-4);
+	color: var(--oui-blue-8);
+}

package/src/css/message.scss

@@ -4,6 +4,9 @@
 
 .oui-message {
 	:where(&) {
+		--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)),
@@ -11,7 +14,7 @@
 		);
 
 		@include mixins.card(
-			color-mix(in oklab, var(--oui-background, var(--oui-gray-0)), transparent 25%),
+			color-mix(in oklab, var(--oui-background), transparent 25%),
 			var(--oui-shadow-mixed)
 		);
 
@@ -19,12 +22,12 @@
 		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(& h2, & h3, & h4, & h5, & h6) {
-		color: var(--oui-foreground, var(--oui-gray-10));
+		color: var(--oui-foreground);
 		font-size: 1em;
 		font-weight: bold;
 	}
@@ -32,7 +35,7 @@
 	:where(& hr) {
 		height: 1px;
 		margin: 0 -1.25em;
-		background-color: var(--oui-border, var(--oui-gray-2));
+		background-color: var(--oui-border);
 		border: none;
 	}
 
@@ -45,44 +48,26 @@
 	}
 
 	:where(&--blue, &--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);
+		@include mixins.message-blue;
 	}
 
 	:where(&--green, &--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);
+		@include mixins.message-green;
 	}
 
 	:where(&--orange, &--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);
+		@include mixins.message-orange;
 	}
 
 	:where(&--purple, &--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);
+		@include mixins.message-purple;
 	}
 
 	:where(&--red, &--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);
+		@include mixins.message-red;
 	}
 
 	:where(&--yellow, &--notice) {
-		--oui-background: var(--oui-yellow-0);
-		--oui-border: var(--oui-yellow-2);
-		--oui-foreground: var(--oui-yellow-8);
-		--oui-shadow-value: var(--oui-yellow-6);
+		@include mixins.message-yellow;
 	}
 }