opui-css 3.3.5 → 4.0.1

package/css/components/toast.css

@@ -0,0 +1,161 @@
+@layer components.extended {
+	:where(#toast-manager) {
+		background: none;
+		block-size: auto;
+		border: none;
+		display: none;
+		flex-direction: column-reverse;
+		gap: var(--size-3);
+		inline-size: auto;
+		inset: auto var(--size-4) var(--size-4) auto;
+		margin: 0;
+		max-inline-size: calc(100vi - var(--size-8));
+		overflow: visible;
+		padding: 0;
+		pointer-events: none;
+		position: fixed;
+		z-index: 1000;
+
+		&:popover-open {
+			display: flex;
+		}
+
+		&::backdrop {
+			display: none;
+		}
+
+		/* Optional cap on visible toasts. Older toasts beyond this depth are hidden
+		   but still in the DOM so they animate cleanly when newer ones are removed. */
+		/* > .toast:nth-last-child(n + 6) { display: none; } */
+	}
+
+	:where(.toast) {
+		--_anim-enter: 0.3s;
+		--_anim-exit: 0.3s;
+
+		align-items: center;
+		animation:
+			toast-enter var(--_anim-enter) var(--ease-out-3) both,
+			toast-hold attr(data-duration type(<time>), 5s) linear both,
+			toast-exit var(--_anim-exit) var(--ease-in-3) both;
+		animation-delay:
+			0s,
+			var(--_anim-enter),
+			calc(var(--_anim-enter) + attr(data-duration type(<time>), 5s));
+		background-color: light-dark(var(--gray-15), var(--gray-2));
+		border-radius: var(--border-radius);
+		box-shadow: var(--shadow-3);
+		color: var(--text-primary-contrast);
+		display: flex;
+		gap: var(--size-3);
+		justify-content: space-between;
+		min-inline-size: 30ch;
+		padding: var(--size-3) var(--size-4);
+		pointer-events: auto;
+
+		&:hover {
+			animation-play-state: paused;
+		}
+
+		&.exiting {
+			animation: toast-exit var(--_anim-exit) var(--ease-in-3) forwards;
+		}
+
+		.icon {
+			background: no-repeat center / contain;
+			block-size: var(--size-4);
+			flex-shrink: 0;
+			inline-size: var(--size-4);
+		}
+
+		/* Hide the icon slot when there's no severity to render against. */
+		&:not([data-severity]) .icon {
+			display: none;
+		}
+
+		.content {
+			font-size: var(--font-size-05);
+			word-break: break-word;
+		}
+
+		.title {
+			font-weight: 600;
+		}
+
+		.description {
+			color: oklch(from currentColor l c h / 75%);
+			font-size: var(--font-size-0);
+		}
+
+		.close-button {
+			background: none;
+			border: none;
+			color: inherit;
+			cursor: pointer;
+			display: grid;
+			opacity: 0.7;
+			padding: var(--size-1);
+			place-items: center;
+			transition: opacity 0.2s;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+
+		/* Severity icons via CSS data URIs — keeps icon assets out of JS strings. */
+		&[data-severity="success"] .icon {
+			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m9 11 3 3L22 4'/></svg>");
+		}
+
+		&[data-severity="info"] .icon {
+			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
+		}
+
+		&[data-severity="warning"] .icon {
+			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
+		}
+
+		&[data-severity="critical"] .icon {
+			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6'/><path d='m9 9 6 6'/></svg>");
+		}
+	}
+
+	@keyframes toast-enter {
+		from {
+			opacity: 0;
+			translate: var(--size-4) 0;
+		}
+
+		to {
+			opacity: 1;
+			translate: 0 0;
+		}
+	}
+
+	/* Identity keyframe — only purpose is to delay the exit animation by the
+	   author-defined duration. */
+	@keyframes toast-hold {
+		from {
+			opacity: 1;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes toast-exit {
+		from {
+			opacity: 1;
+			scale: 1;
+			translate: 0 0;
+		}
+
+		to {
+			opacity: 0;
+			scale: 0.9;
+			translate: 0 var(--size-4);
+		}
+	}
+}

package/css/components/toggle-button.css

@@ -0,0 +1,87 @@
+/* TODO:
+* Somehow handle when a group gets too wide for its container. Should it be handled?
+*/
+@layer components.root {
+	:where(.toggle-button) {
+		--_button-bg-color: transparent;
+		--_size: var(--field-size);
+		--_svg-size: var(--size-4);
+
+		align-items: center;
+		background-color: var(--_button-bg-color);
+		block-size: var(--_size);
+		border: 1px solid var(--border-color);
+		border-radius: var(--button-border-radius);
+		color: var(--text-primary);
+		cursor: pointer;
+		display: inline-flex;
+		flex: auto;
+		gap: var(--size-2);
+		inline-size: fit-content;
+		justify-content: center;
+		min-inline-size: var(--_size);
+		outline-offset: calc(-1 * var(--size-2));
+		padding: 0 var(--size-2);
+		position: relative;
+		user-select: none;
+
+		input[type="checkbox"],
+		input[type="radio"] {
+			/* utils.css > .sr-only */
+			block-size: 1px;
+			clip-path: inset(50%);
+			inline-size: 1px;
+			overflow: hidden;
+			position: absolute;
+			white-space: nowrap;
+		}
+
+		/* Element states */
+		@media (pointer: fine) {
+			&:hover:not(.disabled) {
+				--_button-bg-color: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.08));
+			}
+		}
+
+		&:has(input:focus-visible) {
+			--focus-ring-color: var(--text-muted);
+			--focus-ring-offset: -6px;
+			outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
+			outline-offset: var(--focus-ring-offset);
+		}
+
+		/* Disabled */
+		&.disabled {
+			border-color: color-mix(in oklch, var(--border-color) 50%, transparent);
+			color: color-mix(in oklch, var(--text-primary) 30%, transparent);
+			cursor: not-allowed;
+		}
+
+		/* svgs */
+		svg {
+			block-size: var(--_svg-size);
+			flex-shrink: 0;
+			inline-size: var(--_svg-size);
+		}
+
+		/* Selected */
+		&:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
+			--_button-bg-color: oklch(from var(--primary) l c h / 25%);
+
+			@media (pointer: fine) {
+				&:hover {
+					--_button-bg-color: oklch(from var(--primary) l c h / 35%);
+				}
+			}
+		}
+
+		/* Sizes */
+		&.small {
+			--_size: var(--field-size-small);
+		}
+
+		&.x-small {
+			--_size: var(--field-size-x-small);
+		}
+	}
+}

package/css/components/toggle-group.css

@@ -0,0 +1,56 @@
+@layer components.root {
+  :where(.toggle-group) {
+    --_bg-color: var(--surface-default);
+    --_border-color: var(--border-color);
+    --_border-radius: var(--button-border-radius);
+
+    background-color: var(--_bg-color);
+    border: 1px solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    display: inline-flex;
+    inline-size: fit-content;
+    overflow: hidden;
+
+    /* Sizes */
+    &.small {
+      .toggle-button {
+        --_size: var(--field-size-small);
+      }
+    }
+
+    &.x-small {
+      .toggle-button {
+        --_size: var(--field-size-x-small);
+      }
+    }
+
+    /* Toggle button */
+    .toggle-button {
+      border: 0;
+      border-radius: 0;
+      margin: 0;
+    }
+
+    &:not(.vertical) {
+      .toggle-button {
+        border-inline-end: 1px solid var(--_border-color);
+
+        &:last-of-type {
+          border-inline-end: 0;
+        }
+      }
+    }
+
+    &.vertical {
+      flex-direction: column;
+
+      .toggle-button {
+        border-block-end: 1px solid var(--_border-color);
+
+        &:last-of-type {
+          border-block-end: 0;
+        }
+      }
+    }
+  }
+}

package/css/components/tooltip.css

@@ -0,0 +1,67 @@
+@layer components.extended {
+	:where(.tooltip) {
+		--_tooltip-bg: light-dark(var(--gray-13), var(--gray-3));
+		--_tooltip-color: light-dark(var(--gray-1), var(--gray-15));
+		--_tooltip-offset: var(--size-2);
+
+		&>.anchor-floating {
+			background-color: var(--_tooltip-bg);
+			border-radius: var(--radius-2);
+			color: var(--_tooltip-color);
+			font-size: var(--font-size-05);
+			line-height: 1.3;
+			margin: var(--_tooltip-offset);
+			max-inline-size: 240px;
+			/* UA sets overflow: auto on [popover], which clips the arrow. */
+			overflow: visible;
+			padding-block: var(--size-1);
+			padding-inline: var(--size-2);
+			position-area: var(--anchor-position-area, block-start);
+			position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+			position-visibility: anchors-visible;
+			text-align: center;
+			text-wrap: pretty;
+		}
+
+		/* Optional arrow pointing from the tooltip toward the trigger.
+		   Anchored to the same --anchor so it flips together with the
+		   tooltip when position-try-fallbacks kicks in. */
+		&.with-arrow {
+			--_arrow-size: var(--size-2);
+
+			&>.anchor-floating {
+				/* Reserve space so the arrow doesn't overlap the trigger. */
+				--_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
+			}
+
+			&>.anchor-floating::before {
+				background-color: var(--_tooltip-bg);
+				block-size: var(--_arrow-size);
+				content: "";
+				inline-size: var(--_arrow-size);
+				inset-block-end: calc(var(--_arrow-size) / -2);
+				inset-inline-start: 50%;
+				position: absolute;
+				rotate: 45deg;
+				translate: -50% 0;
+			}
+		}
+
+		/* Fade */
+		&>.anchor-floating[popover] {
+			opacity: 0;
+			transition:
+				display 0.15s allow-discrete,
+				opacity 0.15s var(--ease-out-1),
+				overlay 0.15s allow-discrete;
+
+			&:popover-open {
+				opacity: 1;
+
+				@starting-style {
+					opacity: 0;
+				}
+			}
+		}
+	}
+}