opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/textarea.css

@@ -1,26 +1,20 @@
-@layer components.extended {
-  :where(.ui-textarea) {
-    textarea {
-      block-size: auto;
-      field-sizing: content;
-      min-block-size: calc(
-        var(--_field-padding-block) * 2 + (var(--border-width) * 2) + 3lh
-      );
-      resize: vertical;
-    }
-
-    /* Size */
-    &.ui-small {
-      textarea {
-        min-block-size: var(--size-9);
-      }
-    }
-
-    /* Auto-fit */
-    &.ui-auto-fit {
-      textarea {
-        resize: both;
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(.ui-textarea) {
+    --_max-block-size: 20lh;
+
+    textarea {
+      block-size: auto;
+      field-sizing: content;
+      max-block-size: var(--_max-block-size);
+      min-block-size: calc(var(--_field-padding-block-fit) * 2 + 3lh);
+      resize: block;
+    }
+
+    /* Auto-fit */
+    &.ui-auto-fit {
+      textarea {
+        resize: both;
+      }
+    }
+  }
+}

package/css/components/toggle-button.css

@@ -1,91 +1,131 @@
-/* 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);
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-toggle-button) {
+    --_motion: var(--ui-motion);
+    --_bg-color: transparent;
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease);
+    --_font-size: var(--ui-font-size-control);
+    --_icon-size: var(--ui-icon-size);
+    --_selected-bg-color: var(--ui-selected, var(--ui-primary));
+    --_size: var(--ui-button-size);
+
+    align-items: center;
+    background-color: var(--_bg-color);
+    border: var(--ui-border-width) solid
+      var(--ui-control-border-color, var(--ui-border-color));
+    border-radius: min(
+      var(--ui-button-radius, var(--ui-radius)),
+      var(--_size) / 2
+    );
+    box-shadow: var(--ui-shadow-control);
+    color: var(--ui-text-strong);
+    cursor: pointer;
+    display: inline-flex;
+    font-size: var(--_font-size);
+    gap: var(--ui-space-2);
+    inline-size: fit-content;
+    justify-content: center;
+    min-block-size: var(--_size);
+    min-inline-size: var(--_size);
+    outline-offset: var(--ui-focus-ring-inset);
+    padding-block: 0;
+    padding-inline: var(--ui-space-2);
+    position: relative;
+    -webkit-user-select: none;
+    user-select: none;
+
+    & :is(input[type="checkbox"], input[type="radio"]) {
+      block-size: 1lh;
+      clip-path: inset(50%);
+      inline-size: 1ch;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+    }
+
+    /* Element states */
+    @media (hover: hover) {
+      &:hover:not(:has(input:is(:disabled, [aria-disabled="true"]))) {
+        --_bg-color: light-dark(
+          oklch(0% 0 0 / var(--ui-state-hover-alpha-light)),
+          oklch(100% 0 0 / var(--ui-state-hover-alpha-dark))
+        );
+      }
+    }
+
+    &:has(input:focus-visible) {
+      animation: ui-focus-ring var(--_duration) var(--_ease);
+      outline: var(--ui-focus-ring-width) var(--ui-focus-ring-style)
+        var(--ui-focus-ring-color);
+    }
+
+    /* Disabled */
+    &:has(input:is(:disabled, [aria-disabled="true"])) {
+      cursor: not-allowed;
+
+      &:has(input:checked) {
+        opacity: var(--ui-disabled-opacity);
+      }
+
+      &:not(:has(input:checked)) {
+        border-color: var(--ui-text-disabled);
+        color: var(--ui-text-disabled);
+      }
+    }
+
+    /* svgs */
+    & > svg {
+      block-size: var(--_icon-size);
+      flex-shrink: 0;
+      inline-size: var(--_icon-size);
+    }
+
+    /* Selected */
+    &:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
+      --_bg-color: var(--_selected-bg-color);
+      --ui-focus-ring-color: var(--ui-on-selected, var(--ui-on-primary));
+
+      border-color: var(
+        --ui-control-border-color-filled,
+        var(--ui-control-border-color, var(--ui-border-color))
+      );
+      color: var(--ui-on-selected, var(--ui-on-primary));
+
+      @media (hover: hover) {
+        &:hover:not(:has(input:is(:disabled, [aria-disabled="true"]))) {
+          --_bg-color: oklch(from var(--_selected-bg-color) calc(l * 0.9) c h);
+        }
+      }
+    }
+
+    /* Sizes */
+    &.ui-x-small,
+    :where(.ui-toggle-group.ui-x-small) > & {
+      --_font-size: var(--ui-font-size-caption);
+      --_size: var(--ui-button-size-x-small);
+    }
+
+    &.ui-small,
+    :where(.ui-toggle-group.ui-small) > & {
+      --_font-size: var(--ui-font-size-small);
+      --_size: var(--ui-button-size-small);
+    }
+
+    &.ui-large,
+    :where(.ui-toggle-group.ui-large) > & {
+      --_size: var(--ui-button-size-large);
+      padding-inline: var(--ui-space-3);
+    }
+
+    @media (forced-colors: active) {
+      &:has(:where(input[type="checkbox"], input[type="radio"]):checked) {
+        --ui-focus-ring-color: SelectedItemText;
+
+        background-color: SelectedItem;
+        border-color: SelectedItem;
+        color: SelectedItemText;
+        forced-color-adjust: none;
+      }
+    }
+  }
+}

package/css/components/toggle-group.css

@@ -1,56 +1,86 @@
-@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.extended {
+  :where(.ui-toggle-group) {
+    --_bg-color: var(--ui-surface);
+    --_border-color: var(--ui-control-border-color, var(--ui-border-color));
+    --_radius: min(
+      var(--ui-button-radius, var(--ui-radius)),
+      var(--ui-button-size) / 2
+    );
+
+    background-color: var(--_bg-color);
+    border-radius: var(--_radius);
+    display: inline-flex;
+    flex-wrap: wrap;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    outline: var(--ui-border-width) solid var(--_border-color);
+    outline-offset: calc(-1 * var(--ui-border-width));
+    overflow: hidden;
+
+    /* Toggle button */
+    & > .ui-toggle-button {
+      border: 0;
+      border-radius: 0;
+      box-shadow:
+        calc(-1 * var(--ui-border-width)) 0 0 0 var(--_border-color),
+        0 calc(-1 * var(--ui-border-width)) 0 0 var(--_border-color);
+      flex: auto;
+      margin: 0;
+    }
+
+    &.ui-vertical {
+      flex-direction: column;
+
+      & > .ui-toggle-button {
+        inline-size: auto;
+      }
+    }
+
+    /* Overflow */
+    &.ui-overflow-scroll {
+      flex-wrap: nowrap;
+      overflow-block: hidden;
+      overflow-inline: auto;
+      overscroll-behavior-inline: contain;
+      scrollbar-width: thin;
+
+      & > .ui-toggle-button {
+        flex: none;
+      }
+    }
+
+    &.ui-overflow-shrink {
+      flex-wrap: nowrap;
+
+      & > .ui-toggle-button {
+        min-inline-size: 0;
+        overflow: hidden;
+        white-space: nowrap;
+
+        &:not(:has(> svg)) {
+          align-content: center;
+          display: block;
+          text-align: center;
+          text-overflow: ellipsis;
+        }
+
+        & > span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    @media (forced-colors: active) {
+      & > .ui-toggle-button {
+        border-block-start: var(--ui-border-width) solid CanvasText;
+        border-inline-start: var(--ui-border-width) solid CanvasText;
+        box-shadow: none;
+        margin-block-start: calc(-1 * var(--ui-border-width));
+        margin-inline-start: calc(-1 * var(--ui-border-width));
+        min-block-size: calc(var(--_size) + var(--ui-border-width));
+        min-inline-size: calc(var(--_size) + var(--ui-border-width));
+      }
+    }
+  }
+}

package/css/components/tooltip.css

@@ -1,68 +1,125 @@
-@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) {
+    --_motion: var(--ui-motion);
+    --_bg-color: var(--ui-surface-inverse);
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease-enter);
+    --_max-inline-size: 15rem;
+    --_min-inline-size: 10rem;
+    --_offset: var(--ui-space-2);
+    --_shift: var(--ui-space-4);
+    --_text-color: var(--ui-on-inverse);
+
+    & > .ui-floating {
+      background-color: var(--_bg-color);
+      border-radius: var(--ui-radius-small);
+      color: var(--_text-color);
+      font-size: var(--ui-font-size-small);
+      line-height: var(--ui-line-height-tight);
+      margin: var(--_offset);
+      max-inline-size: var(--_max-inline-size);
+      min-inline-size: calc-size(
+        max-content,
+        min(size, var(--_min-inline-size))
+      );
+      /* UA sets overflow: auto on [popover], which clips the arrow. */
+      overflow: visible;
+      padding-block: var(--ui-space-1);
+      padding-inline: var(--ui-space-2);
+      position-area: var(--ui-anchor-position-area, self-block-start);
+      position-try-fallbacks:
+        flip-inline,
+        flip-block,
+        --ui-tooltip-shift-start,
+        --ui-tooltip-shift-end,
+        --ui-tooltip-shift-start flip-block,
+        --ui-tooltip-shift-end flip-block;
+      position-visibility: anchors-visible;
+      text-align: center;
+      text-wrap: pretty;
+
+      @media (forced-colors: active) {
+        border: var(--ui-border-width) solid CanvasText;
+      }
+    }
+
+    @container style(--ui-anchor-position-area: inline-start) or style(--ui-anchor-position-area: inline-end) or style(--ui-anchor-position-area: self-inline-start) or style(--ui-anchor-position-area: self-inline-end) {
+      & > .ui-floating {
+        position-try-fallbacks:
+          flip-inline,
+          --ui-tooltip-shift-start,
+          --ui-tooltip-shift-end,
+          --ui-tooltip-shift-start flip-block,
+          --ui-tooltip-shift-end flip-block;
+      }
+    }
+
+    /* Arrow */
+    &.ui-arrow {
+      --_arrow-size: var(--ui-space-2);
+
+      & > .ui-floating {
+        /* Offset so the arrow doesn't overlap the trigger. */
+        --_offset: calc(var(--ui-space-2) + var(--_arrow-size) / 2);
+
+        anchor-name: --ui-tooltip;
+        anchor-scope: --ui-tooltip;
+        translate: none;
+      }
+
+      & > .ui-floating::before {
+        background-color: var(--_bg-color);
+        block-size: var(--_arrow-size);
+        content: "";
+        inline-size: var(--_arrow-size);
+        inset-block-start: clamp(
+          anchor(--ui-tooltip self-start),
+          anchor(--anchor center),
+          anchor(--ui-tooltip self-end)
+        );
+        inset-inline-start: clamp(
+          anchor(--ui-tooltip self-start),
+          anchor(--anchor center),
+          anchor(--ui-tooltip self-end)
+        );
+        margin: calc(var(--_arrow-size) / -2);
+        position: fixed;
+        rotate: 45deg;
+
+        @media (forced-colors: active) {
+          background-color: CanvasText;
+          forced-color-adjust: none;
+        }
+      }
+    }
+
+    /* Fade */
+    & > .ui-floating[popover] {
+      opacity: 0;
+      transition:
+        display var(--_duration) allow-discrete,
+        opacity var(--_duration) var(--_ease),
+        overlay var(--_duration) allow-discrete;
+
+      &:popover-open {
+        opacity: 1;
+
+        @starting-style {
+          opacity: 0;
+        }
+      }
+    }
+  }
+}
+
+@position-try --ui-tooltip-shift-start {
+  margin-block: 0 var(--_offset);
+  margin-inline: 0 calc(anchor-size(inline) / 2 - var(--_shift));
+  position-area: self-block-start span-self-inline-start;
+}
+
+@position-try --ui-tooltip-shift-end {
+  margin-block: 0 var(--_offset);
+  margin-inline: calc(anchor-size(inline) / 2 - var(--_shift)) 0;
+  position-area: self-block-start span-self-inline-end;
+}