opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/accordion.css

@@ -1,173 +1,237 @@
-@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);
-    --_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-inline: var(--_padding-inline);
-    --_margin-inline: var(--size-1);
-    --_padding-inline: initial;
-    --_shadow: none;
-    --_summary-padding-block: var(--size-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);
-    box-shadow: var(--_shadow);
-    display: block;
-    margin-inline: var(--_margin-inline);
-    transition: all var(--_transition) ease-out;
-
-    &.ui-elevated {
-      --_bg-color: var(--surface-elevated);
-      --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
-      --_shadow: var(--shadow-3);
-    }
-
-    &.ui-outlined {
-      --_bg-color: var(--surface-default);
-      --_border-color: var(--border-color);
-      --_border-width: 1px;
-      --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
-    }
-
-    &.ui-tonal {
-      --_bg-color: var(--surface-tonal);
-      --_margin-inline: 0;
-      --_padding-inline: var(--size-3);
-    }
-
-    /* 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;
-      transition:
-        content-visibility var(--_transition) allow-discrete,
-        opacity var(--_transition),
-        block-size var(--_transition);
-    }
-
-    &[open]::details-content {
-      block-size: auto;
-      opacity: 1;
-    }
-
-    /* Layout */
-    &>summary {
-      background-color: inherit;
-      cursor: pointer;
-      font-weight: 700;
-      padding-block: var(--_summary-padding-block);
-      padding-inline: var(--_summary-padding-inline);
-      user-select: none;
-
-      &:has(svg) {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
-        list-style: none;
-
-        &::marker,
-        &::-webkit-details-marker {
-          display: none;
-        }
-      }
-
-      svg {
-        transition: rotate var(--_svg-transition);
-      }
-    }
-
-    &[open]>summary svg {
-      rotate: 180deg;
-    }
-
-    &>.ui-content {
-      margin-block-start: 0;
-      padding-block: var(--_content-padding-block);
-      padding-inline: var(--_content-padding-inline);
-    }
-
-    &>.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);
-    }
-  }
-
-  /* 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);
-    --_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;
-    }
-
-    &>details.ui-accordion {
-      --_border-color: transparent;
-      --_border-width: 0;
-      --_margin-inline: 0;
-      --_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-radius: 0;
-      }
-
-      /* First item */
-      &:first-of-type {
-        border-start-end-radius: var(--_group-radius);
-        border-start-start-radius: var(--_group-radius);
-
-        summary {
-          border-start-end-radius: var(--_group-radius);
-          border-start-start-radius: var(--_group-radius);
-        }
-      }
-
-      /* Last item */
-      &:last-of-type {
-        border-end-end-radius: var(--_group-radius);
-        border-end-start-radius: var(--_group-radius);
-
-        summary {
-          border-end-end-radius: var(--_group-radius);
-          border-end-start-radius: var(--_group-radius);
-        }
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(details.ui-accordion) {
+    --_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-width: 0;
+    --_content-padding-block: var(--ui-space-2) var(--ui-space-3);
+    --_content-padding-inline: var(--_padding-inline);
+    --_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(--ui-space-3);
+    --_summary-padding-inline: var(--_padding-inline);
+
+    background-color: var(--_bg-color);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_radius);
+    box-shadow: var(--_shadow);
+    display: block;
+    margin-inline: var(--_margin-inline);
+    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);
+
+    /* 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;
+      --_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(--ui-surface);
+      --_border-color: var(--ui-border-color);
+      --_border-width: var(--ui-border-width);
+      --_shadow: var(--ui-shadow-surface);
+    }
+
+    &.ui-tonal {
+      --_bg-color: var(--ui-surface-tonal);
+      --_shadow: var(--ui-shadow-surface);
+    }
+
+    &::details-content {
+      block-size: 0;
+      opacity: 0;
+      overflow-block: clip;
+      transition:
+        content-visibility var(--_duration) allow-discrete,
+        opacity var(--_duration) var(--_ease),
+        block-size var(--_duration) var(--_ease);
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+      opacity: 1;
+    }
+
+    /* Layout */
+    & > summary {
+      background-color: inherit;
+      cursor: pointer;
+      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;
+
+      &:focus-visible {
+        border-radius: var(--_radius);
+        outline-offset: var(--_focus-ring-offset);
+      }
+
+      &:has(.ui-marker) {
+        align-items: center;
+        display: flex;
+        gap: var(--ui-space-2);
+        list-style: none;
+
+        /* Safari fallback */
+        &::marker,
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+
+      & > :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 .ui-marker {
+      rotate: 180deg;
+    }
+
+    &.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 {
+      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)) {
+    --_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-transparent {
+      --_item-padding-inline: 0em;
+    }
+
+    & > 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: var(--ui-border-width) solid
+          var(--_divider-border-color);
+        border-radius: 0;
+      }
+
+      /* First item */
+      &:first-of-type {
+        border-start-end-radius: var(--_group-radius);
+        border-start-start-radius: var(--_group-radius);
+
+        summary {
+          border-start-end-radius: var(--_group-radius);
+          border-start-start-radius: var(--_group-radius);
+        }
+      }
+
+      /* Last item */
+      &:last-of-type {
+        border-end-end-radius: var(--_group-radius);
+        border-end-start-radius: var(--_group-radius);
+
+        summary {
+          border-end-end-radius: var(--_group-radius);
+          border-end-start-radius: var(--_group-radius);
+        }
+      }
+    }
+  }
+}

package/css/components/anchor.css

@@ -1,27 +1,40 @@
-@layer components.root {
-  :where(.ui-anchor) {
-    anchor-name: --anchor;
-    anchor-scope: --anchor;
-    display: inline-block;
-    inline-size: fit-content;
-
-    /* Always-visible */
-    & > .ui-anchor-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);
-    }
-
-    /* Hover-triggered */
-    & > .ui-anchor-floating[popover] {
-      inset: unset;
-      margin: 0;
-      position: absolute;
-      position-area: var(--anchor-position-area, start end);
-      translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
-    }
-  }
-}
+@layer components.root {
+  :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-floating:not([popover]) {
+      block-size: max-content;
+      inline-size: max-content;
+      position: absolute;
+      position-anchor: --anchor;
+      position-area: var(--ui-anchor-position-area, self-start self-end);
+      translate: var(--_shift-x) var(--_shift-y);
+    }
+
+    /* Hover-triggered */
+    & > .ui-floating[popover] {
+      background-color: transparent;
+      border: 0;
+      color: inherit;
+      inset: unset;
+      margin: 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,65 +1,105 @@
-@layer components.root {
-  :where(.ui-avatar) {
-    --_bg-color: var(--primary);
-    --_color: var(--color-1);
-    --_width: 40px;
-
-    align-items: center;
-    aspect-ratio: 1;
-    background-color: var(--_bg-color);
-    border-radius: var(--radius-round);
-    color: var(--_color);
-    display: inline-flex;
-    inline-size: var(--_width);
-    justify-content: center;
-    overflow: clip;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-
-    &:has(img) {
-      background-color: transparent;
-    }
-
-    svg {
-      max-inline-size: var(--size-5);
-    }
-
-    img {
-      block-size: 100%;
-      inline-size: 100%;
-      inset: 0;
-      object-fit: cover;
-      position: absolute;
-    }
-
-    &.ui-squared {
-      border-radius: 0;
-    }
-
-    &.ui-rounded {
-      border-radius: var(--radius-2);
-    }
-
-    &.ui-squircle {
-      border-radius: var(--radius-3);
-
-      @supports (corner-shape: squircle) {
-        border-radius: var(--radius-round);
-        corner-shape: squircle;
-      }
-    }
-  }
-
-  :where([role="group"]) {
-    --_margin: var(--size-3);
-    --_outline-color: var(--surface-default);
-
-    display: flex;
-
-    .ui-avatar {
-      box-shadow: 0 0 0 2px var(--_outline-color);
-      margin-inline-end: calc(-1 * var(--_margin));
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-avatar) {
+    --_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(--ui-radius-round);
+    color: var(--_text-color);
+    display: inline-flex;
+    flex-shrink: 0;
+    font-size: var(--_font-size);
+    inline-size: var(--_size);
+    justify-content: center;
+    overflow: clip;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+
+    &:has(img) {
+      background-color: transparent;
+    }
+
+    svg {
+      max-inline-size: var(--_icon-size);
+    }
+
+    img {
+      block-size: 100%;
+      inline-size: 100%;
+      inset: 0;
+      object-fit: cover;
+      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(--ui-radius-small);
+    }
+
+    &.ui-squircle {
+      border-radius: var(--ui-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(.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 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;
+    }
+  }
+}