opui-css 5.4.2 → 5.4.3

package/css/components/toggle-button.css

@@ -1,91 +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,68 +1,68 @@
-@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;
-    }
-
-    /* Arrow */
-    &.ui-with-arrow {
-      --_arrow-size: var(--size-2);
-
-      &>.ui-anchor-floating {
-        /* Offset 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;
+    }
+
+    /* Arrow */
+    &.ui-with-arrow {
+      --_arrow-size: var(--size-2);
+
+      &>.ui-anchor-floating {
+        /* Offset 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;
+        }
+      }
+    }
+  }
+}