opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/dialog.css

@@ -1,64 +1,154 @@
 @layer components.extended {
   :where(.ui-dialog) {
-    --_motion: var(--motion, 1);
+    --_motion: var(--ui-motion);
+    --_backdrop-bg-color: var(--ui-backdrop-bg-color);
+    --_backdrop-blur: blur(var(--ui-backdrop-blur));
+    --_duration: calc(var(--ui-duration-slow) * var(--_motion));
+    --_ease: var(--ui-ease-enter);
+    --_elevated-shadow: var(--ui-shadow-overlay);
+    --_max-inline-size: 60ch;
+    --_scroll-shadow: var(--ui-shadow-scroll);
+    --_title-font-size: var(--ui-font-size-h4);
+    border-radius: var(--ui-dialog-radius, var(--ui-radius));
     inline-size: 100%;
     inset: 0;
     margin: auto;
-    margin-block-start: 15%;
-    max-inline-size: calc(100% - var(--size-4));
-    padding-block: 0;
-    pointer-events: none;
-    position: fixed;
-
-    @media (width > 600px) {
-      max-inline-size: 60ch;
-    }
+    margin-block-start: 15dvb;
+    max-block-size: calc(85dvb - var(--ui-space-4));
+    max-inline-size: min(var(--_max-inline-size), 100% - var(--ui-space-4));
 
     /* Animation */
     /* There's no close animation, intentionally */
     opacity: 0;
+    overflow: auto;
+    padding-block: 0;
+    pointer-events: none;
+    position: fixed;
 
     &::backdrop {
-      backdrop-filter: blur(1px);
-      background-color: rgba(0, 0, 0, 0.5);
+      backdrop-filter: var(--_backdrop-blur);
+      background-color: var(--_backdrop-bg-color);
     }
 
     &:not([open]) {
       display: none;
     }
 
-    &[open] {
-      pointer-events: all;
+    & > :where(:not(.ui-content)) {
+      flex-shrink: 0;
     }
 
-    .ui-actions {
-      justify-content: end;
-      padding-inline: var(--size-3) var(--size-1);
+    & > .ui-header {
+      align-items: center;
+      column-gap: var(--ui-space-1);
+      display: flex;
+      flex-wrap: wrap;
+
+      & > :where(h1, h2, h3, h4, h5, h6) {
+        color: var(--ui-text-strong);
+        flex: 1;
+        font-size: var(--_title-font-size);
+        letter-spacing: var(--ui-letter-spacing-heading);
+        line-height: round(
+          up,
+          1em + 2 * var(--ui-rhythm-step),
+          var(--ui-rhythm-step)
+        );
+      }
+
+      & > :where(p) {
+        flex-basis: 100%;
+      }
     }
 
-    &[open] {
-      opacity: 1;
-      transition:
-        display calc(0.2s * var(--_motion)) allow-discrete,
-        overlay calc(0.2s * var(--_motion)) allow-discrete,
-        opacity calc(0.2s * var(--_motion)) var(--ease-out-1);
+    & > .ui-content {
+      anchor-name: --ui-dialog-content;
+      anchor-scope: --ui-dialog-content;
+      container-type: scroll-state;
+      overflow-block: auto;
+      overscroll-behavior: contain;
 
-      @starting-style {
+      &:focus-visible {
+        outline-offset: var(--ui-focus-ring-inset);
+      }
+
+      &::before,
+      &::after {
+        block-size: var(--ui-space-2);
+        box-shadow: var(--_scroll-shadow);
+        clip-path: inset(100% 0 calc(-1 * var(--ui-space-6)));
+        content: "";
+        inset-inline: anchor(--ui-dialog-content inside);
         opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: opacity var(--_duration);
+        z-index: 1;
+      }
+
+      &::before {
+        inset-block-end: anchor(--ui-dialog-content outside);
+      }
+
+      &::after {
+        inset-block-start: anchor(--ui-dialog-content outside);
+        scale: 1 -1;
+      }
+    }
+
+    @container scroll-state(scrollable: block-start) {
+      & > .ui-content::before {
+        opacity: 1;
+      }
+    }
+
+    @container scroll-state(scrollable: block-end) {
+      & > .ui-content::after {
+        opacity: 1;
+      }
+    }
+
+    & > .ui-footer {
+      align-items: center;
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--ui-space-2);
+      justify-content: end;
+      margin-block-start: auto;
+      padding-block: var(--ui-space-2);
+      padding-inline: var(--_padding);
+
+      &.ui-align-start {
+        justify-content: start;
+      }
+
+      & > .ui-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--ui-space-2);
+      }
+
+      & > * + .ui-actions {
+        margin-inline-start: auto;
       }
     }
 
     &[open] {
-      margin-block-start: 15%;
+      opacity: 1;
+      pointer-events: all;
+      transition: opacity var(--_duration) var(--_ease);
+
+      &::backdrop {
+        transition: opacity var(--_duration) var(--_ease);
+      }
 
       @starting-style {
         opacity: 0;
+
+        &::backdrop {
+          opacity: 0;
+        }
       }
     }
   }
-
-  :where(html:has(.ui-dialog[open])) {
-    block-size: 100%;
-    overflow: hidden;
-  }
 }

package/css/components/divider.css

@@ -1,20 +1,73 @@
 @layer components.root {
   :where(.ui-divider) {
-    background-color: var(--border-color);
-    block-size: var(--border-size-1);
-    margin-block: var(--size-fluid-3);
+    --_divider-border-color: var(--ui-border-color);
+
+    background-color: var(--_divider-border-color);
+    block-size: var(--ui-border-width);
+    margin-block: var(--ui-divider-gap);
 
     /* Border color */
-    &.ui-border-filled {
-      background-color: var(--surface-filled);
+    &.ui-filled {
+      --_divider-border-color: var(--ui-surface-filled);
+    }
+
+    &.ui-tonal {
+      --_divider-border-color: var(--ui-surface-tonal);
+    }
+
+    @container style(--ui-contrast: more) {
+      &.ui-filled,
+      &.ui-tonal {
+        --_divider-border-color: var(--ui-border-color);
+      }
+    }
+
+    &.ui-primary {
+      --_divider-border-color: var(--ui-primary);
     }
 
-    &.ui-border-primary {
-      background-color: var(--primary);
+    &:not(:empty) {
+      align-items: center;
+      background-color: transparent;
+      block-size: auto;
+      color: var(--ui-text);
+      display: flex;
+      font-size: var(--ui-font-size-caption);
+      gap: var(--ui-space-3);
+      text-box: trim-both cap alphabetic;
+
+      &::before,
+      &::after {
+        background-color: var(--_divider-border-color);
+        block-size: var(--ui-border-width);
+        content: "";
+        flex: 1;
+        min-inline-size: var(--ui-space-4);
+      }
     }
 
-    &.ui-border-tonal {
-      background-color: var(--surface-tonal);
+    &.ui-align-start::before,
+    &.ui-align-end::after {
+      display: none;
     }
+
+    @media (forced-colors: active) {
+      block-size: 0;
+      border-block-start: var(--ui-border-width) solid CanvasText;
+
+      &:not(:empty) {
+        border-block-start: 0;
+
+        &::before,
+        &::after {
+          block-size: 0;
+          border-block-start: var(--ui-border-width) solid CanvasText;
+        }
+      }
+    }
+  }
+
+  :where(.ui-accordion, .ui-card, .ui-dialog) > :where(.ui-divider) {
+    margin-block: 0;
   }
 }

package/css/components/drawer.css

@@ -1,27 +1,33 @@
 @layer components.root {
   :where(dialog.ui-drawer) {
-    --_motion: var(--motion, 1);
-    --_backdrop-bg-color: transparent;
-    --_backdrop-blur: blur(2px);
-    --_bg-color: var(--surface-default);
+    --_motion: var(--ui-motion);
+    --_backdrop-bg-color: var(--ui-backdrop-bg-color);
+    --_backdrop-blur: blur(var(--ui-backdrop-blur));
+    --_bg-color: var(--ui-surface-elevated);
     --_block-size: min(80vb, 650px);
-    --_border-color: var(--border-color);
-    --_border-width: var(--border-width);
-    --_color: var(--text-primary);
-    --_content-padding: var(--size-4);
-    --_footer-gap: var(--size-3);
-    --_footer-padding: var(--size-3);
-    --_header-font-size: var(--font-size-3);
-    --_header-padding: var(--size-3);
+    --_border-color: var(--ui-border-color);
+    --_border-width: var(--ui-border-width);
+    --_content-padding: var(--ui-space-3);
+    --_direction: 1;
+    --_duration: calc(var(--ui-duration-slow) * var(--_motion));
+    --_ease: var(--ui-ease-exit);
+    --_edge-border-color: var(--ui-border-color-raised, var(--_border-color));
+    --_footer-gap: var(--ui-space-3);
+    --_footer-padding: var(--ui-space-3);
+    --_header-padding: var(--ui-space-3);
     --_inline-size: min(375px, 100vi);
-    --_shadow: var(--shadow-2);
-    --_transition-duration: calc(0.2s * var(--_motion));
-    --_transition-timing: var(--ease-out-3);
+    --_scroll-shadow: var(--ui-shadow-scroll);
+    --_shadow: var(--ui-shadow-overlay);
+    --_text-color: var(--ui-text-strong);
+    --_title-font-size: var(--ui-font-size-h4);
+    --ui-border-color: var(--ui-border-color-on-raised);
+    --ui-divider-gap: var(--ui-space-3);
+    --ui-field-border-color: var(--ui-field-border-color-on-raised);
 
     background-color: var(--_bg-color);
     border: none;
     box-shadow: var(--_shadow);
-    color: var(--_color);
+    color: var(--_text-color);
     display: flex;
     flex-direction: column;
     margin: 0;
@@ -29,79 +35,200 @@
     padding: 0;
     position: fixed;
     transition:
-      display var(--_transition-duration) allow-discrete,
-      overlay var(--_transition-duration) allow-discrete,
-      translate var(--_transition-duration) var(--_transition-timing);
-    z-index: 1000;
+      display var(--_duration) allow-discrete,
+      overlay var(--_duration) allow-discrete,
+      translate var(--_duration) var(--_ease);
+
+    &:dir(rtl) {
+      --_direction: -1;
+    }
 
     &::backdrop {
       backdrop-filter: var(--_backdrop-blur);
       background-color: var(--_backdrop-bg-color);
       opacity: 0;
       transition:
-        display var(--_transition-duration) allow-discrete,
-        overlay var(--_transition-duration) allow-discrete,
-        opacity var(--_transition-duration) var(--_transition-timing);
+        display var(--_duration) allow-discrete,
+        overlay var(--_duration) allow-discrete,
+        opacity var(--_duration) var(--_ease);
     }
 
     &.ui-backdrop-transparent {
+      --_backdrop-bg-color: transparent;
       --_backdrop-blur: none;
     }
 
-    .ui-header {
+    & > .ui-header {
       align-items: center;
       border-block-end: var(--_border-width) solid var(--_border-color);
+      column-gap: var(--ui-space-1);
       display: flex;
+      flex-wrap: wrap;
       padding: var(--_header-padding);
 
-      :where(h1, h2, h3, h4, h5, h6) {
-        font-size: var(--_header-font-size);
+      & > :where(h1, h2, h3, h4, h5, h6) {
+        flex: 1;
+        font-size: var(--_title-font-size);
+        letter-spacing: var(--ui-letter-spacing-heading);
+        line-height: round(
+          up,
+          1em + 2 * var(--ui-rhythm-step),
+          var(--ui-rhythm-step)
+        );
         margin: 0;
       }
 
-      :where(.ui-icon-button) {
+      & > :where(p) {
+        flex-basis: 100%;
+      }
+
+      &:not(:has(> :where(h1, h2, h3, h4, h5, h6)))
+        > :where(.ui-button:has(> svg:only-child)):first-of-type {
         margin-inline-start: auto;
       }
     }
 
-    .ui-content {
+    & > .ui-content {
+      anchor-name: --ui-drawer-content;
+      anchor-scope: --ui-drawer-content;
+      container-type: scroll-state;
       flex: 1;
-      overflow-y: auto;
+      overflow-block: auto;
+      overscroll-behavior: contain;
       padding: var(--_content-padding);
+
+      &:focus-visible {
+        outline-offset: var(--ui-focus-ring-inset);
+      }
+
+      &::before,
+      &::after {
+        block-size: var(--ui-space-2);
+        box-shadow: var(--_scroll-shadow);
+        clip-path: inset(100% 0 calc(-1 * var(--ui-space-6)));
+        content: "";
+        inset-inline: anchor(--ui-drawer-content inside);
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: opacity var(--_duration);
+        z-index: 1;
+      }
+
+      &::before {
+        inset-block-end: anchor(--ui-drawer-content outside);
+      }
+
+      &::after {
+        inset-block-start: anchor(--ui-drawer-content outside);
+        scale: 1 -1;
+      }
+    }
+
+    & > :where(.ui-content:not(.ui-rich-text)) > * {
+      margin-block: 0;
+    }
+
+    &
+      > :where(
+        .ui-content:not(
+          .ui-rich-text,
+          :has(
+            > :is(
+              a,
+              abbr,
+              b,
+              button,
+              cite,
+              code,
+              em,
+              i,
+              img,
+              input,
+              kbd,
+              mark,
+              q,
+              s,
+              samp,
+              small,
+              span,
+              strong,
+              sub,
+              sup,
+              svg,
+              time,
+              u,
+              var,
+              .ui-carousel
+            )
+          )
+        )
+      ) {
+      align-content: start;
+      display: grid;
+      gap: var(--ui-space-3);
+      grid-template-columns: minmax(0, 1fr);
+
+      & > .ui-divider {
+        margin-block: 0;
+      }
+    }
+
+    @container scroll-state(scrollable: block-start) {
+      & > .ui-content::before {
+        opacity: 1;
+      }
     }
 
-    .ui-footer {
+    @container scroll-state(scrollable: block-end) {
+      & > .ui-content::after {
+        opacity: 1;
+      }
+    }
+
+    & > .ui-footer {
+      align-items: center;
       border-block-start: var(--_border-width) solid var(--_border-color);
       display: flex;
+      flex-wrap: wrap;
       gap: var(--_footer-gap);
       justify-content: end;
       padding: var(--_footer-padding);
+
+      &.ui-align-start {
+        justify-content: start;
+      }
+
+      & > .ui-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--_footer-gap);
+      }
+
+      & > * + .ui-actions {
+        margin-inline-start: auto;
+      }
     }
 
-    &.ui-inline-start,
-    &.ui-inline-end {
+    &:not(.ui-block-end, .ui-block-start) {
       block-size: 100dvb;
       inline-size: var(--_inline-size);
       inset-block: 0;
       max-block-size: 100%;
     }
 
-    &.ui-inline-start {
-      border-inline-end: var(--_border-width) solid var(--_border-color);
+    &:not(.ui-block-end, .ui-block-start, .ui-inline-end) {
+      border-inline-end: var(--_border-width) solid var(--_edge-border-color);
       inset-inline-end: auto;
       inset-inline-start: 0;
-      translate: -100% 0;
+      translate: calc(-100% * var(--_direction)) 0;
     }
 
     &.ui-inline-end {
-      border-inline-start: var(--_border-width) solid var(--_border-color);
+      border-inline-start: var(--_border-width) solid var(--_edge-border-color);
       inset-inline-end: 0;
       inset-inline-start: auto;
-      translate: 100% 0;
-
-      .ui-footer {
-        justify-content: start;
-      }
+      translate: calc(100% * var(--_direction)) 0;
     }
 
     &.ui-block-start,
@@ -113,20 +240,26 @@
     }
 
     &.ui-block-start {
-      border-block-end: var(--_border-width) solid var(--_border-color);
+      border-block-end: var(--_border-width) solid var(--_edge-border-color);
       inset-block-end: auto;
       inset-block-start: 0;
       translate: 0 -100%;
     }
 
     &.ui-block-end {
-      border-block-start: var(--_border-width) solid var(--_border-color);
+      border-block-start: var(--_border-width) solid var(--_edge-border-color);
       inset-block-end: 0;
       inset-block-start: auto;
       translate: 0 100%;
     }
 
+    &:not([open]) {
+      display: none;
+    }
+
     &[open] {
+      --_ease: var(--ui-ease-enter);
+
       translate: 0 0;
 
       &::backdrop {
@@ -138,12 +271,12 @@
           opacity: 0;
         }
 
-        &.ui-inline-start {
-          translate: -100% 0;
+        &:not(.ui-block-end, .ui-block-start, .ui-inline-end) {
+          translate: calc(-100% * var(--_direction)) 0;
         }
 
         &.ui-inline-end {
-          translate: 100% 0;
+          translate: calc(100% * var(--_direction)) 0;
         }
 
         &.ui-block-start {
@@ -158,11 +291,8 @@
   }
 
   /* Scroll-lock is provided by the shared `.ui-scroll-lock` utility in core/utils.css. */
-  html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
-    overflow: unset;
-    overscroll-behavior: auto;
-
-    @media (width < 500px) {
+  @media (width < 500px) {
+    html:has(dialog.ui-drawer.ui-scroll-lock[open].ui-backdrop-transparent) {
       overflow: clip;
       overscroll-behavior: contain;
     }