@oscarpalmer/oui 0.37.0 → 0.39.0

package/src/css/form.scss

@@ -1,573 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use 'mixins.scss' as mixins;
-
-:where(.oui-fieldset) {
-	padding: 1em;
-	border: 1px solid var(--oui-gray-3);
-	border-radius: 0.25em;
-}
-
-.oui-input {
-	:where(&) {
-		--oui-background-value: var(--oui-absolute);
-	}
-
-	:where(&:not([type='range' i])) {
-		@include mixins.input;
-
-		padding: 0.5em 0.75em;
-		border-radius: 0.25em;
-	}
-
-	:where(&:not([type='range' i], select[multiple], textarea)) {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-
-	:where(&:is([list])) {
-		&::-webkit-calendar-picker-indicator {
-			display: none !important;
-		}
-	}
-
-	:where(&:is([type='color' i])) {
-		padding: 0;
-	}
-
-	:where(
-		&:is(
-			[type='date' i],
-			[type='datetime-local' i],
-			[type='month' i],
-			[type='number' i],
-			[type='tel' i],
-			[type='time' i],
-			[type='url' i],
-			[type='week' i]
-		)
-	) {
-		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;
-
-		&::file-selector-button {
-			@include mixins.button;
-
-			--oui-background-value: var(--oui-grey-2);
-			--oui-outline-value: var(--oui-grey-6);
-
-			margin: 0 0.75em 0 0;
-			outline: none;
-			font-size: 0.75em;
-			cursor: pointer;
-		}
-	}
-
-	:where(&:is([type='range' i])) {
-		appearance: none;
-		outline: none;
-
-		&::range-track {
-			@include mixins.input;
-
-			appearance: none;
-			width: 100%;
-			height: 0.75em;
-			border-radius: 0.75em;
-			position: relative;
-		}
-
-		&::range-thumb {
-			--oui-background-percentage: 0%;
-			--oui-background-value: var(--oui-blue-6);
-
-			@include mixins.input-outlined;
-
-			appearance: none;
-			width: 1.25em;
-			height: 1.25em;
-			background-color: color-mix(
-				in oklab,
-				var(--oui-background-value),
-				transparent var(--oui-background-percentage)
-			);
-			border: 1px solid var(--oui-absolute);
-			border-radius: 1.25em;
-			box-shadow: 0 1px 2px 2px rgb(0 0 0 / 12.5%);
-			cursor: pointer;
-		}
-
-		&::-webkit-slider-thumb {
-			position: relative;
-			top: 50%;
-			transform: translateY(-50%);
-		}
-	}
-
-	:where(
-		&.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])
-	) {
-		&::file-selector-button {
-			--oui-background-value: var(--oui-red-2);
-			--oui-foreground-value: var(--oui-red-8);
-			--oui-outline-value: var(--oui-red-6);
-		}
-
-		&::range-thumb {
-			--oui-background-value: var(--oui-red-6);
-		}
-
-		&::range-track {
-			@include mixins.input-invalid;
-		}
-
-		& > option:checked {
-			background-color: var(--oui-red-2);
-			color: var(--oui-red-9);
-		}
-	}
-
-	:where(
-		&.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])
-	) {
-		&::file-selector-button {
-			--oui-background-value: var(--oui-green-2);
-			--oui-foreground-value: var(--oui-green-8);
-			--oui-outline-value: var(--oui-green-6);
-		}
-
-		&::range-track {
-			@include mixins.input-valid;
-		}
-
-		&::range-thumb {
-			--oui-background-value: var(--oui-green-6);
-		}
-
-		& > option:checked {
-			background-color: var(--oui-green-2);
-			color: var(--oui-green-9);
-		}
-	}
-
-	&: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);
-			}
-
-			&::range-thumb,
-			&::range-track {
-				@include mixins.input-focus;
-			}
-
-			&::range-thumb {
-				--oui-background-value: var(--oui-blue-6);
-
-				box-shadow: 0 1px 2px 2px rgb(0 0 0 / 25%);
-			}
-		}
-
-		@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-5);
-				}
-
-				&::range-track {
-					@include mixins.input-hover;
-				}
-			}
-		}
-	}
-
-	: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);
-			}
-
-			@media (hover: hover) {
-				&:hover {
-					--oui-outline-percentage: 0%;
-					--oui-outline-value: var(--oui-gray-3);
-				}
-			}
-		}
-
-		&::file-selector-button {
-			--oui-background-value: var(--oui-gray-1);
-
-			cursor: default;
-		}
-
-		&::range-thumb {
-			--oui-background-value: var(--oui-gray-2);
-
-			cursor: default;
-		}
-	}
-
-	:where(&:is([disabled], [aria-disabled='true' i])) {
-		&::-webkit-calendar-picker-indicator {
-			opacity: 0.5;
-		}
-
-		&::range-thumb {
-			--oui-background-value: var(--oui-gray-1);
-
-			cursor: default;
-		}
-
-		&::range-track {
-			--oui-background-percentage: 50%;
-			--oui-background-value: var(--oui-gray-0);
-		}
-	}
-}
-
-:where(select.oui-input, .oui-input[list]) {
-	padding-right: 2em;
-	background-position: right 0.5em center;
-}
-
-select.oui-input:is([multiple]) {
-	:where(&) {
-		--oui-off: attr(oui-off);
-		--oui-on: attr(oui-on, '\2713');
-
-		padding: 0;
-	}
-
-	:where(& > option) {
-		padding: 0.5em 0.75em;
-	}
-
-	:where(&[oui-off] > option) {
-		&::before {
-			content: var(--oui-off);
-			margin: 0 0.75em 0 0;
-		}
-	}
-
-	:where(& > option:nth-of-type(2n)) {
-		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
-	}
-
-	:where(& > option:checked) {
-		background-color: var(--oui-blue-2);
-		color: var(--oui-blue-9);
-
-		&::before {
-			content: var(--oui-on);
-			margin: 0 0.75em 0 0;
-		}
-	}
-}
-
-:where(textarea.oui-input) {
-	min-height: 4em;
-	resize: vertical;
-	transition:
-		all 0.125s ease-in-out,
-		height 0s;
-}
-
-:where(.oui-label, .oui-legend) {
-	font-size: 0.875rem;
-	font-weight: bold;
-	align-self: flex-start;
-}
-
-.oui-label {
-	:where(&) {
-		cursor: pointer;
-		transition: color 0.125s ease-in-out;
-	}
-
-	@media (hover: hover) {
-		:where(&[for]:hover) {
-			color: var(--oui-blue-8);
-		}
-	}
-}
-
-:where(.oui-legend) {
-	padding: 0.5em;
-	border: 1px solid var(--oui-gray-3);
-	border-radius: 0.25em;
-}
-
-:where(.oui-switch, .oui-toggle) {
-	--oui-background-percentage: 50%;
-	--oui-background-value: var(--oui-gray-1);
-	--oui-border-value: var(--oui-gray-3);
-	--oui-foreground-percentage: 0%;
-	--oui-foreground-value: var(--oui-gray-8);
-	--oui-outline-percentage: 100%;
-	--oui-outline-value: var(--oui-blue-6);
-	--oui-shadow-percentage: 85%;
-	--oui-shadow-value: var(--oui-gray-10);
-
-	position: relative;
-	cursor: pointer;
-
-	&::before,
-	&::after {
-		display: inline-block;
-		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;
-	}
-
-	&::before {
-		background-color: color-mix(
-			in oklab,
-			var(--oui-background-value),
-			transparent var(--oui-background-percentage)
-		);
-		outline: 4px solid
-			color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
-		outline-offset: 0;
-		border: 1px solid var(--oui-border-value);
-		box-shadow: inset 0 1px 2px 0
-			color-mix(in oklab, var(--oui-shadow-value), transparent var(--oui-shadow-percentage));
-	}
-
-	&::after {
-		color: color-mix(
-			in oklab,
-			var(--oui-foreground-value),
-			transparent var(--oui-foreground-percentage)
-		);
-	}
-}
-
-.oui-switch {
-	:where(&) {
-		padding: 0 3em 0 0;
-
-		&::before {
-			content: '';
-			width: 2.5em;
-			height: 1.5em;
-			border-radius: 3em;
-			right: 0;
-		}
-
-		&::after {
-			content: attr(oui-off, '\2715');
-			width: 1.5em;
-			height: 1.5em;
-			background-color: var(--oui-absolute);
-			border-radius: 1.5em;
-			box-shadow: 0 1px 2px 1px rgb(0 0 0 / 12.5%);
-			font-size: 0.75em;
-			font-weight: bold;
-			line-height: 1.5em;
-			text-align: center;
-			top: 0.25em;
-			right: 1.5em;
-		}
-	}
-
-	:where(&:has(input:checked)) {
-		--oui-foreground-percentage: 0%;
-		--oui-foreground-value: var(--oui-blue-8);
-
-		&::after {
-			content: attr(oui-on, '\2713');
-			box-shadow: 0 1px 2px 1px rgb(0 0 0 / 25%);
-			right: 0.25em;
-		}
-	}
-}
-
-.oui-toggle {
-	:where(&) {
-		--oui-background-percentage: 100%;
-		--oui-border-value: var(--oui-gray-4);
-
-		padding: 0 0 0 2em;
-
-		&::before {
-			content: '';
-			width: 1.5em;
-			height: 1.5em;
-			inset: 0 auto auto 0;
-		}
-
-		&::after {
-			opacity: 0;
-		}
-	}
-
-	:where(&:has(input[type='checkbox' i])) {
-		--oui-foreground-percentage: 0%;
-		--oui-foreground-value: white;
-
-		&::before {
-			border-radius: 0.25em;
-		}
-
-		&::after {
-			content: attr(oui-on, '\2713');
-			width: 1.5em;
-			height: 1.5em;
-			text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
-			font-weight: bold;
-			line-height: 1.5em;
-			text-align: center;
-			inset: 0 auto auto 0;
-		}
-	}
-
-	:where(&:has(input[type='radio' i])) {
-		position: relative;
-
-		&::before,
-		&::after {
-			border-radius: 50%;
-		}
-
-		&::after {
-			content: '';
-			width: 0.75em;
-			height: 0.75em;
-			background-color: var(--oui-absolute);
-			box-shadow: 0 1px 2px 0 rgb(0 0 0 / 50%);
-			inset: 0.375em auto auto 0.375em;
-		}
-	}
-
-	:where(&:has(input:checked)) {
-		&::after {
-			opacity: 1;
-		}
-	}
-}
-
-.oui-switch,
-.oui-toggle {
-	:where(&:has(input:checked)) {
-		--oui-background-percentage: 25%;
-		--oui-background-value: var(--oui-blue-6);
-		--oui-border-value: var(--oui-blue-6);
-		--oui-shadow-percentage: 50%;
-		--oui-shadow-value: var(--oui-blue-8);
-	}
-
-	:where(&:focus-within) {
-		--oui-border-value: var(--oui-blue-6);
-		--oui-outline-percentage: 75%;
-
-		color: var(--oui-blue-8);
-	}
-
-	:where(&:has(input:not([disabled], [aria-disabled='true' i])):focus-within) {
-		--oui-background-percentage: 50%;
-	}
-
-	@media (hover: hover) {
-		:where(&:has(input:not([disabled], [aria-disabled='true' i])):hover) {
-			--oui-border-value: var(--oui-blue-4);
-			--oui-outline-percentage: 90%;
-			--oui-outline-value: var(--oui-blue-6);
-
-			color: var(--oui-blue-8);
-		}
-
-		:where(&:has(input:not([disabled], [aria-disabled='true' i]):is(:checked)):hover) {
-			--oui-background-percentage: 50%;
-			--oui-background-value: var(--oui-blue-6);
-		}
-	}
-
-	:where(&:has(input[disabled], input[aria-disabled='true' i])) {
-		--oui-background-percentage: 50%;
-		--oui-background-value: var(--oui-gray-0);
-		--oui-border-value: var(--oui-gray-3);
-		--oui-foreground-percentage: 25%;
-		--oui-foreground-value: currentcolor;
-
-		color: color-mix(
-			in oklab,
-			var(--oui-foreground-value),
-			transparent var(--oui-foreground-percentage)
-		);
-		font-style: italic;
-		cursor: default;
-
-		&::after,
-		&::before {
-			font-style: normal;
-		}
-
-		&::after {
-			box-shadow: 0 0 0 1px var(--oui-gray-3);
-			text-shadow: none;
-		}
-	}
-}
-
-:where(label.oui-switch, label.oui-toggle) {
-	display: inline-block;
-	line-height: 1.5;
-}
-
-:where(.oui-switch input, .oui-toggle input) {
-	@include mixins.visually-hidden;
-}

package/src/css/listbox.scss

@@ -1,120 +0,0 @@
-/*! 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);
-}