opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/badge.css

@@ -1,107 +1,146 @@
-@layer components.extended {
-  :where(.ui-badge) {
-    --_anchor-tx: -50%;
-    --_anchor-ty: 50%;
-    --_badge-inset: auto auto 100% 100%;
-    --_bg-color: var(--primary);
-    --_border-color: var(--primary);
-    --_dot-size: var(--size-2);
-    --_size: var(--size-4);
-    --_text-color: var(--gray-1);
-
-    display: inline-flex;
-    position: relative;
-    vertical-align: middle;
-
-    /* Floating wrapper: traditional inset-based positioning so this works
-       in browsers without position-area support (Firefox, older Safari). */
-    &>.ui-anchor-floating:not([popover]) {
-      inset: var(--_badge-inset);
-      position-anchor: auto;
-      position-area: none;
-    }
-
-    /* Indicator */
-    &>.ui-anchor-floating>.ui-badge-indicator {
-      background-color: var(--_bg-color);
-      block-size: var(--_size);
-      border: 2px solid var(--_border-color);
-      border-radius: var(--radius-round);
-      color: var(--_text-color);
-      display: grid;
-      font-size: var(--font-size-0);
-      font-weight: 500;
-      inline-size: max-content;
-      line-height: normal;
-      min-inline-size: var(--_size);
-      padding-inline: var(--size-1);
-      place-items: center;
-      text-align: center;
-      transition: opacity 0.2s var(--ease-out-1);
-    }
-
-    /* Colors */
-    &.ui-critical {
-      --_bg-color: var(--critical);
-      --_border-color: var(--critical);
-    }
-
-    &.ui-success {
-      --_bg-color: var(--success);
-      --_border-color: var(--success);
-    }
-
-    &.ui-info {
-      --_bg-color: var(--info);
-      --_border-color: var(--info);
-    }
-
-    &.ui-warning {
-      --_bg-color: var(--warning);
-      --_border-color: var(--warning);
-    }
-
-    &.ui-neutral {
-      --_bg-color: var(--neutral);
-      --_border-color: var(--neutral);
-    }
-
-    /* Alignment */
-    &.ui-start-start {
-      --_anchor-tx: 50%;
-      --_anchor-ty: 50%;
-      --_badge-inset: auto 100% 100% auto;
-    }
-
-    &.ui-end-start {
-      --_anchor-tx: 50%;
-      --_anchor-ty: -50%;
-      --_badge-inset: 100% 100% auto auto;
-    }
-
-    &.ui-end-end {
-      --_anchor-tx: -50%;
-      --_anchor-ty: -50%;
-      --_badge-inset: 100% auto auto 100%;
-    }
-
-    /* Dot */
-    &.ui-dot {
-      --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
-      --_anchor-ty: var(--_dot-size);
-    }
-
-    &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
-      block-size: var(--_dot-size);
-      inline-size: var(--_dot-size);
-      min-inline-size: var(--_dot-size);
-      padding: 0;
-    }
-
-    /* Visibility */
-    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-}
+@layer components.extended {
+  :where(.ui-badge) {
+    --_motion: var(--ui-motion);
+    --_bg-color: var(--ui-primary);
+    --_border-color: var(--ui-primary);
+    --_border-width: var(--ui-border-width-thick);
+    --_direction: 1;
+    --_dot-size: var(--ui-space-2);
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease-enter);
+    --_inset: 100%;
+    --_inset-block: auto var(--_inset);
+    --_inset-inline: var(--_inset) auto;
+    --_shift-x: calc(50% * var(--_sign-x));
+    --_shift-y: calc(50% * var(--_sign-y));
+    --_sign-x: -1;
+    --_sign-y: 1;
+    --_size: var(--ui-space-4);
+    --_text-color: var(--ui-on-primary);
+
+    display: inline-flex;
+    flex-shrink: 0;
+    position: relative;
+    vertical-align: middle;
+
+    /* Floating wrapper: traditional inset-based positioning so this works
+       in browsers without position-area support (Firefox, older Safari). */
+    & > .ui-floating:not([popover]) {
+      inset-block: var(--_inset-block);
+      inset-inline: var(--_inset-inline);
+      position-anchor: auto;
+      position-area: none;
+      translate: calc(var(--_shift-x) * var(--_direction)) var(--_shift-y);
+    }
+
+    &:dir(rtl) {
+      --_direction: -1;
+    }
+
+    /* Indicator */
+    & > .ui-floating > .ui-indicator {
+      background-color: var(--_bg-color);
+      block-size: var(--_size);
+      border: var(--_border-width) solid var(--_border-color);
+      border-radius: var(--ui-radius-round);
+      color: var(--_text-color);
+      display: grid;
+      font-size: var(--ui-font-size-caption);
+      font-weight: var(--ui-font-weight-medium);
+      inline-size: max-content;
+      line-height: normal;
+      min-inline-size: var(--_size);
+      padding-inline: var(--ui-space-1);
+      place-items: center;
+      text-align: center;
+      transition:
+        opacity var(--_duration) var(--_ease),
+        visibility var(--_duration) var(--_ease);
+    }
+
+    /* Colors */
+    &:is(.ui-critical, .ui-info, .ui-neutral, .ui-success) {
+      --_bg-color: oklch(
+        from var(--_accent) min(l, var(--ui-accent-fill-max-lightness)) c h
+      );
+      --_border-color: var(--_bg-color);
+      --_text-color: var(--ui-on-fill);
+    }
+
+    &.ui-critical {
+      --_accent: var(--ui-critical);
+    }
+
+    &.ui-info {
+      --_accent: var(--ui-info);
+    }
+
+    &.ui-neutral {
+      --_accent: var(--ui-neutral);
+    }
+
+    &.ui-success {
+      --_accent: var(--ui-success);
+    }
+
+    &.ui-warning {
+      --_bg-color: var(--ui-warning);
+      --_border-color: var(--ui-warning);
+      --_text-color: var(--ui-on-warning);
+    }
+
+    /* Alignment */
+    &.ui-start-start {
+      --_inset-inline: auto var(--_inset);
+      --_sign-x: 1;
+    }
+
+    &.ui-end-start {
+      --_inset-block: var(--_inset) auto;
+      --_inset-inline: auto var(--_inset);
+      --_sign-x: 1;
+      --_sign-y: -1;
+    }
+
+    &.ui-end-end {
+      --_inset-block: var(--_inset) auto;
+      --_sign-y: -1;
+    }
+
+    /* Dot */
+    &.ui-dot {
+      --_shift-x: calc(
+        (var(--_dot-size) - var(--_border-width)) * var(--_sign-x)
+      );
+      --_shift-y: calc(var(--_dot-size) * var(--_sign-y));
+    }
+
+    &.ui-dot > .ui-floating > .ui-indicator {
+      block-size: var(--_dot-size);
+      inline-size: var(--_dot-size);
+      min-inline-size: var(--_dot-size);
+      padding: 0;
+    }
+
+    &:has(> .ui-avatar:not(.ui-rounded, .ui-squared, .ui-squircle)) {
+      --_inset: calc(50% + 50% * sin(45deg));
+      --_shift-x: calc(50% * var(--_sign-x));
+      --_shift-y: calc(50% * var(--_sign-y));
+    }
+
+    :where(.ui-avatar-group) > & > .ui-floating > .ui-indicator {
+      box-shadow: 0 0 0 var(--_outline-width) var(--_outline-color);
+    }
+
+    :where(.ui-avatar-group) > & {
+      --_inset-inline: auto var(--_inset);
+      --_sign-x: 1;
+    }
+
+    /* Visibility */
+    &.ui-invisible > .ui-floating > .ui-indicator {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}

package/css/components/button-group.css

@@ -1,179 +1,170 @@
-@layer components.extended {
-  :where([role="group"].ui-button-group) {
-    --_border-radius: var(--button-border-radius);
-
-    border-radius: var(--_border-radius);
-    display: inline-flex;
-    min-width: max-content;
-
-    /* Button */
-    button {
-      border-radius: 0;
-
-      /* button.css > --_accent-tonal */
-      --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
-          oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
-
-      &.ui-outlined {
-        --_divider-color: var(--_border-color);
-      }
-
-      &.ui-filled {
-        --_divider-color: currentColor;
-      }
-
-      &:focus-visible {
-        outline-offset: -4px;
-      }
-
-      /* Color inherited from Button Group. */
-      :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
-        --_color-contrast: var(--gray-1);
-        --_color-tonal: var(--color-6);
-        --_accent-tonal-contrast: var(--text-primary-contrast);
-        --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
-        --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
-        --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
-        --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
-        --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
-      }
-
-      :where(.ui-button-group.ui-critical) & {
-        --_color: var(--critical);
-      }
-
-      :where(.ui-button-group.ui-primary) & {
-        --_color: var(--primary);
-      }
-
-      :where(.ui-button-group.ui-small) & {
-        --_min-height: 1.875rem;
-        padding-block: 0;
-        padding-inline: 1ex;
-      }
-
-      :where(.ui-button-group.ui-large) & {
-        --_min-height: 2.875rem;
-        padding-inline: 4ex;
-      }
-
-      :where(.ui-button-group.ui-outlined) & {
-        --_border-color: var(--_accent);
-        --_divider-color: var(--_accent);
-
-        &:where(:not([disabled])) {
-          &:where(:not(:active):hover) {
-            --_bg-color: var(--_accent);
-            --_border-color: var(--_accent);
-            --_text-color: var(--_accent-contrast);
-          }
-
-          &:where(:active) {
-            --_bg-color: var(--_outlined-active-bg-color);
-            --_border-color: var(--_outlined-active-bg-color);
-            --_text-color: var(--_accent-contrast);
-          }
-        }
-      }
-
-      :where(.ui-button-group.ui-tonal) & {
-        --_bg-color: var(--_accent-tonal);
-        --_text-color: var(--_accent-tonal-contrast);
-
-        &:where(:not([disabled])) {
-          &:where(:not(:active):hover) {
-            --_bg-color: var(--_accent);
-            --_text-color: var(--_accent-contrast);
-          }
-
-          &:where(:active) {
-            --_bg-color: var(--_outlined-active-bg-color);
-            --_text-color: var(--_accent-contrast);
-          }
-        }
-      }
-
-      :where(.ui-button-group.ui-filled) & {
-        --_bg-color: var(--_accent);
-        --_text-color: var(--_accent-contrast);
-        --_divider-color: currentColor;
-
-        :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
-          --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
-              oklch(from var(--_accent) calc(l + 0.1) c h));
-        }
-
-        &:where(:not([disabled])) {
-          &:where(:not(:active):hover) {
-            --_bg-color: var(--_filled-hover-bg-color);
-          }
-
-          &:where(:active) {
-            --_bg-color: var(--_filled-active-bg-color);
-          }
-        }
-      }
-    }
-
-    &:not(.ui-vertical) {
-      button {
-        &:first-of-type {
-          border-end-start-radius: var(--_border-radius);
-          border-start-start-radius: var(--_border-radius);
-        }
-
-        &:last-of-type {
-          border-end-end-radius: var(--_border-radius);
-          border-start-end-radius: var(--_border-radius);
-        }
-
-        /* Siblings */
-        &+& {
-          border-inline-start-color: var(--_divider-color);
-          border-inline-width: 1px;
-          margin-inline-start: -1px;
-
-          &[disabled] {
-            border-inline-start-color: color-mix(in oklch,
-                var(--_divider-color) 40%,
-                transparent);
-          }
-        }
-      }
-    }
-
-    &.ui-vertical {
-      flex-direction: column;
-
-      button {
-        padding: var(--size-2);
-
-        &:has(svg) {
-          aspect-ratio: 1;
-          padding: var(--size-1);
-        }
-
-        &:first-of-type {
-          border-start-start-radius: var(--_border-radius);
-          border-start-end-radius: var(--_border-radius);
-        }
-
-        &:last-of-type {
-          border-end-start-radius: var(--_border-radius);
-          border-end-end-radius: var(--_border-radius);
-        }
-
-        &+& {
-          border-block-start: 1px solid var(--_divider-color);
-          margin-block-start: -1px;
-
-          &[disabled] {
-            border-block-start-color: color-mix(in oklch,
-                var(--_divider-color) 40%,
-                transparent);
-          }
-        }
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where([role="group"].ui-button-group) {
+    --_edge-outline-color: transparent;
+    --_radius: var(--ui-button-radius, var(--ui-radius));
+
+    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(--_edge-outline-color);
+    outline-offset: calc(-1 * var(--ui-border-width));
+    overflow: hidden;
+
+    &:is(.ui-filled, .ui-outlined, .ui-tonal) {
+      --_edge-outline-color: var(--ui-control-border-color-filled, transparent);
+    }
+
+    &.ui-outlined {
+      --_edge-accent: var(
+        --ui-button-accent,
+        var(--ui-control-accent, var(--ui-palette-strong))
+      );
+      --_edge-outline-color: var(
+        --ui-control-border-color,
+        var(--_edge-accent)
+      );
+      --_edge-text: light-dark(
+        var(--_edge-accent),
+        oklch(
+          from var(--_edge-accent) max(l, var(--ui-text-min-lightness))
+            min(c, var(--ui-text-max-chroma)) h
+        )
+      );
+
+      @container style(--ui-contrast: more) {
+        --_edge-outline-color: var(
+          --ui-control-border-color,
+          var(--_edge-text)
+        );
+      }
+
+      &.ui-critical {
+        --_edge-accent: var(--ui-critical);
+        --_edge-text: var(--ui-critical-text);
+      }
+
+      &.ui-primary {
+        --_edge-accent: var(--ui-primary);
+        --_edge-text: var(--ui-primary-text);
+      }
+    }
+
+    /* Button */
+    & > .ui-button {
+      --_border-color: transparent;
+      border-radius: 0;
+      box-shadow:
+        calc(-1 * var(--ui-border-width)) 0 0 0 var(--_divider-border-color),
+        0 calc(-1 * var(--ui-border-width)) 0 0 var(--_divider-border-color);
+      flex: auto;
+
+      @media (forced-colors: active) {
+        --_border-color: ButtonBorder;
+      }
+
+      /* button.css > --_accent-tonal */
+      --_divider-border-color: var(
+        --ui-control-border-color-filled,
+        light-dark(
+          oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
+          oklch(from var(--_accent-tonal) calc(l + 0.1) c h)
+        )
+      );
+
+      /* Siblings */
+      &:is([disabled], [aria-disabled="true"]) {
+        box-shadow:
+          calc(-1 * var(--ui-border-width)) 0 0 0
+            color-mix(in oklch, var(--_divider-border-color) 40%, transparent),
+          0 calc(-1 * var(--ui-border-width)) 0 0
+            color-mix(in oklch, var(--_divider-border-color) 40%, transparent);
+      }
+
+      &:focus-visible {
+        outline-offset: var(--ui-focus-ring-inset);
+      }
+
+      :where(.ui-button-group.ui-outlined) & {
+        --_divider-border-color: var(--ui-control-border-color, var(--_accent));
+
+        @container style(--ui-contrast: more) {
+          --_divider-border-color: var(
+            --ui-control-border-color,
+            var(--_accent-text)
+          );
+        }
+      }
+
+      :where(.ui-button-group.ui-filled) & {
+        --_divider-border-color: currentColor;
+
+        :where(.ui-button-group.ui-critical, .ui-button-group.ui-primary) & {
+          --_divider-border-color: light-dark(
+            oklch(from var(--_accent) calc(l - 0.1) c h),
+            oklch(from var(--_accent) calc(l + 0.1) c h)
+          );
+        }
+      }
+    }
+
+    &.ui-vertical {
+      flex-direction: column;
+
+      & > .ui-button {
+        padding: var(--ui-space-2);
+
+        &:has(> svg:only-child) {
+          aspect-ratio: 1;
+          padding: var(--ui-space-1);
+        }
+      }
+
+      &:is(.ui-small, .ui-x-small) > .ui-button {
+        padding-block: 0;
+      }
+    }
+
+    /* Overflow */
+    &.ui-overflow-scroll {
+      flex-wrap: nowrap;
+      overflow-block: hidden;
+      overflow-inline: auto;
+      overscroll-behavior-inline: contain;
+      scrollbar-width: thin;
+
+      & > .ui-button {
+        flex: none;
+      }
+    }
+
+    &.ui-overflow-shrink {
+      flex-wrap: nowrap;
+
+      & > .ui-button {
+        min-inline-size: 0;
+
+        &:has(> svg:only-child) {
+          flex: none;
+        }
+
+        &:not(:has(> svg:only-child)) {
+          overflow: hidden;
+          white-space: nowrap;
+        }
+
+        &:not(:has(> *)) {
+          align-content: center;
+          display: block;
+          text-overflow: ellipsis;
+        }
+
+        & > span {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}