opui-css 5.0.0 → 5.1.0

package/css/components/toggle-button.css

@@ -1,87 +1,91 @@
-/* TODO:
-* Somehow handle when a group gets too wide for its container. Should it be handled?
-*/
-@layer components.root {
-	:where(.ui-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 > .ui-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(.ui-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 */
-		&.ui-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 */
-		&.ui-small {
-			--_size: var(--field-size-small);
-		}
-
-		&.ui-x-small {
-			--_size: var(--field-size-x-small);
-		}
-	}
-}
+/* TODO:
+* Somehow handle when a group gets too wide for its container. Should it be handled?
+*/
+@layer components.root {
+  :where(.ui-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 > .ui-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(.ui-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 */
+    &.ui-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 */
+    &.ui-small {
+      --_size: var(--field-size-small);
+    }
+
+    &.ui-x-small {
+      --_size: var(--field-size-x-small);
+    }
+  }
+}

package/css/components/toggle-group.css

@@ -1,56 +1,56 @@
-@layer components.root {
-  :where(.ui-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 */
-    &.ui-small {
-      .ui-toggle-button {
-        --_size: var(--field-size-small);
-      }
-    }
-
-    &.ui-x-small {
-      .ui-toggle-button {
-        --_size: var(--field-size-x-small);
-      }
-    }
-
-    /* Toggle button */
-    .ui-toggle-button {
-      border: 0;
-      border-radius: 0;
-      margin: 0;
-    }
-
-    &:not(.ui-vertical) {
-      .ui-toggle-button {
-        border-inline-end: 1px solid var(--_border-color);
-
-        &:last-of-type {
-          border-inline-end: 0;
-        }
-      }
-    }
-
-    &.ui-vertical {
-      flex-direction: column;
-
-      .ui-toggle-button {
-        border-block-end: 1px solid var(--_border-color);
-
-        &:last-of-type {
-          border-block-end: 0;
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-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 */
+    &.ui-small {
+      .ui-toggle-button {
+        --_size: var(--field-size-small);
+      }
+    }
+
+    &.ui-x-small {
+      .ui-toggle-button {
+        --_size: var(--field-size-x-small);
+      }
+    }
+
+    /* Toggle button */
+    .ui-toggle-button {
+      border: 0;
+      border-radius: 0;
+      margin: 0;
+    }
+
+    &:not(.ui-vertical) {
+      .ui-toggle-button {
+        border-inline-end: 1px solid var(--_border-color);
+
+        &:last-of-type {
+          border-inline-end: 0;
+        }
+      }
+    }
+
+    &.ui-vertical {
+      flex-direction: column;
+
+      .ui-toggle-button {
+        border-block-end: 1px solid var(--_border-color);
+
+        &:last-of-type {
+          border-block-end: 0;
+        }
+      }
+    }
+  }
+}

package/css/components/tooltip.css

@@ -1,67 +1,70 @@
-@layer components.extended {
-	:where(.ui-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);
-
-		&>.ui-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. */
-		&.ui-with-arrow {
-			--_arrow-size: var(--size-2);
-
-			&>.ui-anchor-floating {
-				/* Reserve space so the arrow doesn't overlap the trigger. */
-				--_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
-			}
-
-			&>.ui-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 */
-		&>.ui-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;
-				}
-			}
-		}
-	}
-}
+@layer components.extended {
+  :where(.ui-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);
+
+    & > .ui-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. */
+    &.ui-with-arrow {
+      --_arrow-size: var(--size-2);
+
+      & > .ui-anchor-floating {
+        /* Reserve space so the arrow doesn't overlap the trigger. */
+        --_tooltip-offset: calc(var(--size-2) + var(--_arrow-size) / 2);
+      }
+
+      & > .ui-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 */
+    & > .ui-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;
+        }
+      }
+    }
+  }
+}