opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/accordion.css

@@ -1,65 +1,89 @@
 @layer components.extended {
   :where(details.ui-accordion) {
-    --_motion: var(--motion, 1);
-    --_actions-gap: var(--size-1);
-    --_actions-margin-block-start: var(--size-3);
-    --_actions-padding-block-end: var(--size-1);
-    --_actions-padding-inline: var(--size-3) var(--size-1);
+    --_motion: var(--ui-motion);
+    --_actions-gap: var(--ui-space-1);
+    --_actions-margin-block-start: 0;
+    --_actions-padding-block-end: var(--_summary-padding-block);
+    --_actions-padding-inline: max(
+      var(--_content-padding-inline),
+      var(--ui-focus-ring-offset) + var(--ui-focus-ring-width)
+    );
     --_bg-color: transparent;
     --_border-color: transparent;
-    --_border-radius: var(--border-radius, 4px);
     --_border-width: 0;
-    --_content-padding-block: var(--size-2) var(--size-3);
+    --_content-padding-block: var(--ui-space-2) var(--ui-space-3);
     --_content-padding-inline: var(--_padding-inline);
-    --_margin-inline: var(--size-1);
-    --_padding-inline: initial;
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease);
+    --_focus-ring-offset: var(--ui-focus-ring-offset);
+    --_margin-inline: var(--ui-space-1);
+    --_overflow: visible;
+    --_padding-inline: 0em;
+    --_radius: var(--ui-radius);
     --_shadow: none;
-    --_summary-padding-block: var(--size-3);
+    --_summary-padding-block: var(--ui-space-3);
     --_summary-padding-inline: var(--_padding-inline);
-    --_svg-transition: calc(0.2s * var(--_motion)) var(--ease-1);
-    --_transition: calc(0.2s * var(--_motion));
 
     background-color: var(--_bg-color);
     border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--_border-radius);
+    border-radius: var(--_radius);
     box-shadow: var(--_shadow);
     display: block;
     margin-inline: var(--_margin-inline);
-    transition: all var(--_transition) ease-out;
+    overflow: var(--_overflow);
+    transition:
+      background-color var(--_duration) var(--_ease),
+      border-color var(--_duration) var(--_ease),
+      border-width var(--_duration) var(--_ease),
+      box-shadow var(--_duration) var(--_ease),
+      margin-inline var(--_duration) var(--_ease);
 
-    &.ui-elevated {
-      --_bg-color: var(--surface-elevated);
+    /* Accordion animation */
+    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
+    interpolate-size: allow-keywords;
+
+    &:not(.ui-transparent) {
+      --_bg-color: var(--ui-surface);
+      --_focus-ring-offset: var(--ui-focus-ring-inset);
       --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
-      --_shadow: var(--shadow-3);
+      --_overflow: hidden;
+      --_padding-inline: var(--ui-space-3);
+    }
+
+    &:is(.ui-elevated, .ui-tonal) {
+      --_border-color: var(--ui-border-color-raised, var(--ui-surface));
+      --_border-width: var(--ui-border-width);
+
+      @media (forced-colors: active) {
+        --_border-color: CanvasText;
+      }
+    }
+
+    &.ui-elevated {
+      --_bg-color: var(--ui-surface-elevated);
+      --_shadow: var(--ui-shadow-elevated);
     }
 
     &.ui-outlined {
-      --_bg-color: var(--surface-default);
-      --_border-color: var(--border-color);
-      --_border-width: 1px;
-      --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
+      --_bg-color: var(--ui-surface);
+      --_border-color: var(--ui-border-color);
+      --_border-width: var(--ui-border-width);
+      --_shadow: var(--ui-shadow-surface);
     }
 
     &.ui-tonal {
-      --_bg-color: var(--surface-tonal);
-      --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
+      --_bg-color: var(--ui-surface-tonal);
+      --_shadow: var(--ui-shadow-surface);
     }
 
-    /* Accordion animation */
-    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
-    interpolate-size: allow-keywords;
-
     &::details-content {
       block-size: 0;
       opacity: 0;
-      overflow-y: clip;
+      overflow-block: clip;
       transition:
-        content-visibility var(--_transition) allow-discrete,
-        opacity var(--_transition),
-        block-size var(--_transition);
+        content-visibility var(--_duration) allow-discrete,
+        opacity var(--_duration) var(--_ease),
+        block-size var(--_duration) var(--_ease);
     }
 
     &[open]::details-content {
@@ -68,82 +92,122 @@
     }
 
     /* Layout */
-    &>summary {
+    & > summary {
       background-color: inherit;
       cursor: pointer;
-      font-weight: 700;
+      font-weight: var(--ui-font-weight-bold);
       padding-block: var(--_summary-padding-block);
       padding-inline: var(--_summary-padding-inline);
+      -webkit-user-select: none;
       user-select: none;
 
-      &:has(svg) {
+      &:focus-visible {
+        border-radius: var(--_radius);
+        outline-offset: var(--_focus-ring-offset);
+      }
+
+      &:has(.ui-marker) {
         align-items: center;
         display: flex;
-        justify-content: space-between;
+        gap: var(--ui-space-2);
         list-style: none;
 
+        /* Safari fallback */
         &::marker,
         &::-webkit-details-marker {
           display: none;
         }
       }
 
-      svg {
-        transition: rotate var(--_svg-transition);
+      & > :is(img, svg) {
+        flex-shrink: 0;
+      }
+
+      &:has(.ui-marker)
+        > :not(.ui-anchor, .ui-badge, .ui-marker, .ui-tooltip, img, svg) {
+        min-inline-size: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .ui-marker {
+        flex-shrink: 0;
+        margin-inline-start: auto;
+        transition:
+          rotate var(--_duration) var(--_ease),
+          scale var(--_duration) var(--_ease);
       }
     }
 
-    &[open]>summary svg {
+    &[open] > summary .ui-marker {
       rotate: 180deg;
     }
 
-    &>.ui-content {
+    &.ui-marker-animation-flip[open] > summary .ui-marker {
+      rotate: none;
+      scale: 1 -1;
+    }
+
+    &.ui-marker-animation-turn[open] > summary .ui-marker {
+      rotate: 90deg;
+    }
+
+    &.ui-marker-animation-turn:dir(rtl) > summary .ui-marker {
+      scale: -1 1;
+    }
+
+    &.ui-marker-animation-turn[open]:dir(rtl) > summary .ui-marker {
+      rotate: -90deg;
+    }
+
+    & > .ui-content {
       margin-block-start: 0;
       padding-block: var(--_content-padding-block);
       padding-inline: var(--_content-padding-inline);
     }
 
-    &>.ui-actions {
+    & > .ui-actions {
       display: flex;
       gap: var(--_actions-gap);
       justify-content: end;
       margin-block-start: var(--_actions-margin-block-start);
       padding-block-end: var(--_actions-padding-block-end);
       padding-inline: var(--_actions-padding-inline);
+
+      &.ui-align-start {
+        justify-content: start;
+      }
     }
   }
 
   /* Accordion group  */
-  :where(.ui-card[role="group"]:has(details.ui-accordion)) {
-    --_group-radius: var(--border-radius);
-    --_gutter-color: var(--border-color);
-    --_item-padding-inline: var(--size-3);
+  :where(.ui-card[role="group"]:has(> details.ui-accordion)) {
+    --_divider-border-color: var(--ui-border-color);
+    --_group-radius: var(--ui-radius);
+    --_item-padding-inline: var(--ui-space-3);
     --_item-summary-padding-inline: var(--_item-padding-inline);
 
     display: block;
 
-    &.ui-card {
-      &:not(.ui-tonal, .ui-outlined, .ui-elevated) {
-        --_item-summary-padding-inline: 0;
-      }
-    }
-
-    &>.ui-content {
-      margin-block: 0;
-      padding: 0;
+    &.ui-transparent {
+      --_item-padding-inline: 0em;
     }
 
-    &>details.ui-accordion {
+    & > details.ui-accordion {
+      --_bg-color: transparent;
       --_border-color: transparent;
       --_border-width: 0;
+      --_focus-ring-offset: var(--ui-focus-ring-inset);
       --_margin-inline: 0;
+      --_overflow: visible;
       --_padding-inline: var(--_item-padding-inline);
       --_shadow: none;
       --_summary-padding-inline: var(--_item-summary-padding-inline);
 
       /* Border between accordion items */
-      &+& {
-        border-block-start: 1px solid var(--_gutter-color);
+      & + & {
+        border-block-start: var(--ui-border-width) solid
+          var(--_divider-border-color);
         border-radius: 0;
       }
 

package/css/components/anchor.css

@@ -1,27 +1,40 @@
 @layer components.root {
-  :where(.ui-anchor) {
+  :where(.ui-anchor, .ui-badge, .ui-tooltip) {
+    --_shift-x: 0;
+    --_shift-y: 0;
+
     anchor-name: --anchor;
     anchor-scope: --anchor;
     display: inline-block;
     inline-size: fit-content;
 
     /* Always-visible */
-    & > .ui-anchor-floating:not([popover]) {
+    & > .ui-floating:not([popover]) {
       block-size: max-content;
       inline-size: max-content;
       position: absolute;
       position-anchor: --anchor;
-      position-area: var(--anchor-position-area, start end);
-      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+      position-area: var(--ui-anchor-position-area, self-start self-end);
+      translate: var(--_shift-x) var(--_shift-y);
     }
 
     /* Hover-triggered */
-    & > .ui-anchor-floating[popover] {
+    & > .ui-floating[popover] {
+      background-color: transparent;
+      border: 0;
+      color: inherit;
       inset: unset;
       margin: 0;
-      position: absolute;
-      position-area: var(--anchor-position-area, start end);
-      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+      overflow: visible;
+      padding: 0;
+      position: fixed;
+      position-area: var(--ui-anchor-position-area, self-start self-end);
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+      position-visibility: anchors-visible;
+      translate: var(--_shift-x) var(--_shift-y);
     }
   }
 }

package/css/components/avatar.css

@@ -1,16 +1,20 @@
 @layer components.root {
   :where(.ui-avatar) {
-    --_bg-color: var(--primary);
-    --_color: var(--color-1);
-    --_width: 40px;
+    --_bg-color: var(--ui-primary);
+    --_font-size: 1em;
+    --_icon-size: var(--ui-icon-size-large);
+    --_size: var(--ui-control-size);
+    --_text-color: var(--ui-on-primary);
 
     align-items: center;
     aspect-ratio: 1;
     background-color: var(--_bg-color);
-    border-radius: var(--radius-round);
-    color: var(--_color);
+    border-radius: var(--ui-radius-round);
+    color: var(--_text-color);
     display: inline-flex;
-    inline-size: var(--_width);
+    flex-shrink: 0;
+    font-size: var(--_font-size);
+    inline-size: var(--_size);
     justify-content: center;
     overflow: clip;
     position: relative;
@@ -22,7 +26,7 @@
     }
 
     svg {
-      max-inline-size: var(--size-5);
+      max-inline-size: var(--_icon-size);
     }
 
     img {
@@ -33,33 +37,69 @@
       position: absolute;
     }
 
+    &.ui-x-small {
+      --_font-size: var(--ui-font-size-caption);
+      --_icon-size: var(--ui-icon-size-small);
+      --_size: var(--ui-control-size-x-small);
+    }
+
+    &.ui-small {
+      --_font-size: var(--ui-font-size-small);
+      --_icon-size: var(--ui-icon-size);
+      --_size: var(--ui-control-size-small);
+    }
+
+    &.ui-large {
+      --_font-size: var(--ui-font-size-large);
+      --_size: var(--ui-control-size-large);
+    }
+
     &.ui-squared {
       border-radius: 0;
     }
 
     &.ui-rounded {
-      border-radius: var(--radius-2);
+      border-radius: var(--ui-radius-small);
     }
 
     &.ui-squircle {
-      border-radius: var(--radius-3);
+      border-radius: var(--ui-radius-round);
+      corner-shape: squircle;
+    }
 
-      @supports (corner-shape: squircle) {
-        border-radius: var(--radius-round);
-        corner-shape: squircle;
+    &:is(:disabled, [aria-disabled="true"]) {
+      cursor: not-allowed;
+      opacity: var(--ui-disabled-opacity);
+    }
+
+    @media (forced-colors: active) {
+      &:not(:has(img)) {
+        border: var(--ui-border-width) solid CanvasText;
       }
     }
   }
 
-  :where([role="group"]) {
-    --_margin: var(--size-3);
-    --_outline-color: var(--surface-default);
+  :where(.ui-avatar-group) {
+    --_margin: var(--ui-space-2);
+    --_outline-color: var(--ui-surface);
+    --_outline-width: var(--ui-border-width-thick);
 
     display: flex;
 
     .ui-avatar {
-      box-shadow: 0 0 0 2px var(--_outline-color);
-      margin-inline-end: calc(-1 * var(--_margin));
+      box-shadow: 0 0 0 var(--_outline-width) var(--_outline-color);
+    }
+
+    & > * + * {
+      margin-inline-start: calc(-1 * var(--_margin));
+    }
+
+    & > .ui-badge > .ui-floating {
+      z-index: 1;
+    }
+
+    & > :is(:focus-visible, :has(:focus-visible)) {
+      z-index: 2;
     }
   }
 }

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);
+    --_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-anchor-floating:not([popover]) {
-      inset: var(--_badge-inset);
+    & > .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-anchor-floating>.ui-badge-indicator {
+    & > .ui-floating > .ui-indicator {
       background-color: var(--_bg-color);
       block-size: var(--_size);
-      border: 2px solid var(--_border-color);
-      border-radius: var(--radius-round);
+      border: var(--_border-width) solid var(--_border-color);
+      border-radius: var(--ui-radius-round);
       color: var(--_text-color);
       display: grid;
-      font-size: var(--font-size-0);
-      font-weight: 500;
+      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(--size-1);
+      padding-inline: var(--ui-space-1);
       place-items: center;
       text-align: center;
-      transition: opacity 0.2s var(--ease-out-1);
+      transition:
+        opacity var(--_duration) var(--_ease),
+        visibility var(--_duration) var(--_ease);
     }
 
     /* Colors */
-    &.ui-critical {
-      --_bg-color: var(--critical);
-      --_border-color: var(--critical);
+    &: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-success {
-      --_bg-color: var(--success);
-      --_border-color: var(--success);
+    &.ui-critical {
+      --_accent: var(--ui-critical);
     }
 
     &.ui-info {
-      --_bg-color: var(--info);
-      --_border-color: var(--info);
+      --_accent: var(--ui-info);
     }
 
-    &.ui-warning {
-      --_bg-color: var(--warning);
-      --_border-color: var(--warning);
+    &.ui-neutral {
+      --_accent: var(--ui-neutral);
     }
 
-    &.ui-neutral {
-      --_bg-color: var(--neutral);
-      --_border-color: var(--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 {
-      --_anchor-tx: 50%;
-      --_anchor-ty: 50%;
-      --_badge-inset: auto 100% 100% auto;
+      --_inset-inline: auto var(--_inset);
+      --_sign-x: 1;
     }
 
     &.ui-end-start {
-      --_anchor-tx: 50%;
-      --_anchor-ty: -50%;
-      --_badge-inset: 100% 100% auto auto;
+      --_inset-block: var(--_inset) auto;
+      --_inset-inline: auto var(--_inset);
+      --_sign-x: 1;
+      --_sign-y: -1;
     }
 
     &.ui-end-end {
-      --_anchor-tx: -50%;
-      --_anchor-ty: -50%;
-      --_badge-inset: 100% auto auto 100%;
+      --_inset-block: var(--_inset) auto;
+      --_sign-y: -1;
     }
 
     /* Dot */
     &.ui-dot {
-      --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
-      --_anchor-ty: var(--_dot-size);
+      --_shift-x: calc(
+        (var(--_dot-size) - var(--_border-width)) * var(--_sign-x)
+      );
+      --_shift-y: calc(var(--_dot-size) * var(--_sign-y));
     }
 
-    &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
+    &.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-anchor-floating>.ui-badge-indicator {
+    &.ui-invisible > .ui-floating > .ui-indicator {
       opacity: 0;
-      pointer-events: none;
+      visibility: hidden;
     }
   }
 }