opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/menu.css

@@ -0,0 +1,174 @@
+@layer components.extended {
+  :where(.ui-menu) {
+    --_motion: var(--ui-motion);
+    --_bg-color: var(--ui-surface-elevated);
+    --_border-color: var(
+      --ui-border-color-raised,
+      var(--ui-border-color-on-raised)
+    );
+    --_border-width: var(--ui-border-width);
+    --_divider-border-color: var(--ui-border-color-on-raised);
+    --_duration: calc(var(--ui-duration-slow) * var(--_motion));
+    --_ease: var(--ui-ease-exit);
+    --_margin-block: var(--_offset);
+    --_margin-inline: 0;
+    --_max-block-size: 60dvb;
+    --_min-block-size: min(12rem, 40dvb);
+    --_min-inline-size: 12rem;
+    --_offset: var(--ui-space-1);
+    --_position-area: var(--_side) var(--_span);
+    --_radius: var(--ui-menu-radius, var(--ui-radius));
+    --_shadow: var(--ui-shadow-overlay);
+    --_side: self-block-end;
+    --_span: span-self-inline-end;
+    --ui-border-color: var(--ui-border-color-on-raised);
+    --ui-field-border-color: var(--ui-field-border-color-on-raised);
+
+    background-color: var(--_bg-color);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_radius);
+    box-shadow: var(--_shadow);
+    margin: 0;
+    max-block-size: var(--_max-block-size);
+    min-inline-size: var(--_min-inline-size);
+    overflow-block: auto;
+    overscroll-behavior: contain;
+    padding-block: var(--ui-space-1);
+    padding-inline: 0;
+
+    /* Popover - positioned against its invoker (implicit anchor) */
+    &[popover] {
+      inset: auto;
+      margin-block: var(--_margin-block);
+      margin-inline: var(--_margin-inline);
+      min-inline-size: max(var(--_min-inline-size), anchor-size(inline));
+
+      opacity: 0;
+      position-area: var(--ui-anchor-position-area, var(--_position-area));
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline,
+        --ui-menu-block-end,
+        --ui-menu-block-start;
+      scale: 0.96;
+      transition:
+        display var(--_duration) allow-discrete,
+        opacity var(--_duration) var(--_ease),
+        overlay var(--_duration) allow-discrete,
+        scale var(--_duration) var(--_ease);
+
+      /* Where calc-size() works: cap to the side's space, flip below --_min-block-size */
+      @supports (min-block-size: calc-size(fit-content, size)) {
+        max-block-size: min(
+          var(--_max-block-size),
+          calc(100% - 2 * var(--_offset))
+        );
+        min-block-size: calc-size(
+          fit-content,
+          min(size, var(--_min-block-size))
+        );
+      }
+
+      &:popover-open {
+        --_ease: var(--ui-ease-enter);
+
+        opacity: 1;
+        scale: 1;
+
+        @starting-style {
+          opacity: 0;
+          scale: 0.96;
+        }
+      }
+    }
+
+    /* Placements */
+    &.ui-block-start {
+      --_side: self-block-start;
+    }
+
+    &.ui-inline-end {
+      --_margin-block: 0;
+      --_margin-inline: var(--_offset);
+      --_side: self-inline-end;
+      --_span: span-self-block-end;
+    }
+
+    &.ui-inline-start {
+      --_margin-block: 0;
+      --_margin-inline: var(--_offset);
+      --_side: self-inline-start;
+      --_span: span-self-block-end;
+    }
+
+    &.ui-align-end {
+      --_span: span-self-inline-start;
+
+      &:is(.ui-inline-end, .ui-inline-start) {
+        --_span: span-self-block-start;
+      }
+    }
+
+    &:dir(rtl) li:has(> .ui-menu) > :is(a, button) > .ui-end {
+      scale: -1 1;
+    }
+
+    &:not(.ui-menu .ui-menu) {
+      anchor-name: --ui-menu-root;
+      anchor-scope: --ui-menu-root;
+    }
+
+    /* Submenus of submenus keep a flipped parent's direction: once the parent
+       item sits on the root menu's start side, their end edge stops at the
+       root menu's start edge. * 1000 makes min() and max() pick either that
+       edge or 0. Replace with an anchored(fallback: flip-inline) container
+       query once lightningcss parses it. */
+    & .ui-menu .ui-menu[popover] {
+      inset-inline-end: max(
+        0px,
+        min(
+          anchor(--ui-menu-root start),
+          (anchor(end) - anchor(--ui-menu-root start)) * 1000
+        )
+      );
+      inset-inline-start: 0;
+    }
+
+    /* Items */
+    :where(li.ui-critical),
+    li > :is(a, button).ui-critical {
+      --_hover-bg-color: oklch(
+        from var(--ui-critical) l c h / var(--ui-state-hover-alpha-accent)
+      );
+      color: var(--ui-critical-text);
+    }
+
+    :where(li) > :where(a, button) > .ui-end {
+      margin-inline-start: auto;
+    }
+
+    /* Group label */
+    :where(li.ui-heading) {
+      color: var(--ui-text);
+      font-size: var(--ui-font-size-caption);
+      font-weight: var(--ui-font-weight-bold);
+      min-block-size: auto;
+      padding-block: var(--ui-space-2) var(--ui-space-1);
+    }
+  }
+}
+
+@position-try --ui-menu-block-end {
+  margin-block: var(--_offset);
+  margin-inline: 0;
+  max-block-size: min(var(--_max-block-size), calc(100% - 2 * var(--_offset)));
+  position-area: self-block-end span-all;
+}
+
+@position-try --ui-menu-block-start {
+  margin-block: var(--_offset);
+  margin-inline: 0;
+  max-block-size: min(var(--_max-block-size), calc(100% - 2 * var(--_offset)));
+  position-area: self-block-start span-all;
+}

package/css/components/progress.css

@@ -1,99 +1,107 @@
-@layer components.root {
-  :where(.ui-progress) {
-    --_motion: var(--motion, 1);
-    --_accent-color: var(--primary);
-    --_bg-color: var(--surface-tonal);
-
-    background-color: var(--_bg-color);
-    block-size: var(--size-1);
-    border-radius: var(--border-radius, 0.25rem);
-    display: inline-block;
-    inline-size: 100%;
-    overflow: hidden;
-    position: relative;
-    vertical-align: baseline;
-
-    /* Color */
-    &.ui-filled {
-      --_bg-color: var(--surface-filled);
-    }
-
-    &.ui-default {
-      --_bg-color: var(--surface-default);
-    }
-
-    &.ui-tonal {
-      --_bg-color: var(--surface-tonal);
-    }
-
-    & > progress {
-      appearance: none;
-      background: none;
-      block-size: 100%;
-      border: 0;
-      display: block;
-      inline-size: 100%;
-
-      &::-webkit-progress-bar {
-        background: none;
-        border-radius: var(--border-radius, 0.25rem);
-      }
-
-      &[value]::-webkit-progress-value {
-        background-color: var(--_accent-color);
-        transition: inline-size calc(0.2s * var(--_motion))
-          var(--ease-out-4, cubic-bezier(0, 0, 0.1, 1));
-      }
-
-      &::-moz-progress-bar {
-        background-color: var(--_accent-color);
-      }
-    }
-  }
-
-  :where(.ui-progress):has(> progress:indeterminate) {
-    &::after {
-      animation: indeterminate calc(2s * var(--motion, 1)) linear infinite;
-      background-color: var(--_accent-color);
-      content: "";
-      inset: 0 auto 0 0;
-      position: absolute;
-      will-change: inset-inline-start, inset-inline-end;
-    }
-
-    & > progress {
-      &::-webkit-progress-value {
-        background-color: transparent;
-      }
-
-      &::-moz-progress-bar {
-        background-color: transparent;
-      }
-    }
-  }
-
-  [dir="rtl"] {
-    :where(.ui-progress):has(> progress:indeterminate) {
-      &::after {
-        animation-direction: reverse;
-      }
-    }
-  }
-
-  @keyframes indeterminate {
-    0% {
-      inset-inline-start: -200%;
-      inset-inline-end: 100%;
-    }
-
-    60% {
-      inset-inline-start: 107%;
-      inset-inline-end: -8%;
-    }
-
-    100% {
-      inset-inline-start: 107%;
-      inset-inline-end: -8%;
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-progress) {
+    --_motion: var(--ui-motion);
+    --_accent: var(--ui-primary);
+    --_bg-color: var(--ui-track-bg-color, var(--ui-surface-tonal));
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease-enter);
+    --_loop-duration: 2s;
+
+    background-color: var(--_bg-color);
+    block-size: var(--ui-space-1);
+    border-radius: var(--ui-radius);
+    display: inline-block;
+    inline-size: 100%;
+    outline: var(--ui-border-width) solid var(--ui-field-border-color);
+    overflow: hidden;
+    position: relative;
+    vertical-align: middle;
+
+    /* Color */
+    &.ui-filled {
+      --_bg-color: var(--ui-surface-filled);
+    }
+
+    @media (forced-colors: active) {
+      --_accent: SelectedItem;
+
+      outline: var(--ui-border-width) solid CanvasText;
+    }
+
+    & > progress {
+      appearance: none;
+      background: none;
+      block-size: 100%;
+      border: 0;
+      display: block;
+      inline-size: 100%;
+
+      &::-webkit-progress-bar {
+        background: none;
+        border-radius: var(--ui-radius);
+      }
+
+      &[value]::-webkit-progress-value {
+        background-color: var(--_accent);
+        transition: inline-size var(--_duration) var(--_ease);
+      }
+
+      &::-moz-progress-bar {
+        background-color: var(--_accent);
+      }
+    }
+  }
+
+  :where(.ui-progress):has(> progress:indeterminate) {
+    &::after {
+      animation: ui-indeterminate calc(var(--_loop-duration) * var(--_motion))
+        linear infinite;
+      background-color: var(--_accent);
+      content: "";
+      inset-block: 0;
+      position: absolute;
+      will-change: inset-inline-start, inset-inline-end;
+    }
+
+    @container style(--_motion: 0) {
+      &::after {
+        animation: ui-indeterminate-pulse var(--_loop-duration) ease-in-out
+          infinite;
+        inset-inline: 0;
+      }
+    }
+
+    & > progress {
+      &::-webkit-progress-value {
+        background-color: transparent;
+      }
+
+      &::-moz-progress-bar {
+        background-color: transparent;
+      }
+    }
+  }
+
+  @keyframes ui-indeterminate-pulse {
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  @keyframes ui-indeterminate {
+    0% {
+      inset-inline-end: 100%;
+      inset-inline-start: -200%;
+    }
+
+    60% {
+      inset-inline-end: -8%;
+      inset-inline-start: 107%;
+    }
+
+    100% {
+      inset-inline-end: -8%;
+      inset-inline-start: 107%;
+    }
+  }
+}

package/css/components/radio.css

@@ -1,170 +1,61 @@
-@layer components.root {
-  label.ui-radio {
-    --_input-size: 1.125rem;
-    --_indicator-size: 50%;
-
-    align-items: center;
-    color: var(--text-primary);
-    cursor: pointer;
-    display: inline-grid;
-    gap: 0 var(--size-2);
-    grid-auto-columns: auto;
-    grid-auto-flow: column;
-    inline-size: fit-content;
-    line-height: 1.5;
-    transform: translateZ(0);
-    user-select: none;
-
-    /* Disabled */
-    &:has([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.64;
-      user-select: none;
-
-      input {
-        cursor: not-allowed;
-      }
-    }
-
-    /* Required dot */
-    &:has(:invalid) {
-      .ui-label:after {
-        color: var(--red);
-        content: "*";
-        inset: 0 -0.25ex auto auto;
-        position: absolute;
-      }
-    }
-
-    /* Label */
-    .ui-label {
-      color: var(--text-primary);
-      font-size: var(--font-size-05);
-      grid-column: 2;
-      grid-row: 1;
-      padding-inline: 0 1ex;
-      position: relative;
-    }
-
-    /* End text */
-    :where(.ui-end-text) {
-      color: var(--text-muted);
-      font-size: var(--font-size-0);
-      grid-column: 2;
-      grid-row: 2;
-      line-height: 1.5;
-      z-index: 1;
-    }
-
-    /* Stacked layout */
-    &.ui-stack {
-      grid-auto-columns: unset;
-      justify-items: center;
-
-      .ui-label {
-        grid-column: 1/-1;
-        grid-row: 2;
-        margin-block-start: var(--size-1);
-        padding-inline: 1ex;
-
-        /* Required dot */
-        &::after {
-          inset: 0 -0.25ex auto auto;
-        }
-      }
-
-      .ui-end-text {
-        grid-column: 1/-1;
-        grid-row: 3;
-      }
-    }
-
-    /* Input */
-    input[type="radio"] {
-      appearance: none;
-      aspect-ratio: 1;
-      background-color: var(--surface-default);
-      block-size: var(--_input-size);
-      border: 1px solid var(--field-border-color);
-      border-radius: var(--radius-round);
-      box-sizing: border-box;
-      cursor: pointer;
-      display: grid;
-      inline-size: var(--_input-size);
-      margin: 0;
-      padding: 0;
-      place-items: center;
-      position: relative;
-
-      &:checked {
-        background-color: var(--primary);
-        border-color: var(--primary);
-      }
-
-      /* Dot */
-      &::after {
-        background-color: var(--primary-contrast);
-        block-size: var(--_indicator-size);
-        border-radius: var(--radius-round);
-        content: "";
-        inline-size: var(--_indicator-size);
-        margin: auto;
-        opacity: 0;
-      }
-
-      &:checked::after {
-        opacity: 1;
-      }
-
-      &::before {
-        --highlight-size: 175%;
-      }
-    }
-
-    /* Sizes */
-    &.ui-small {
-      input[type="radio"] {
-        --_input-size: var(--size-3);
-      }
-    }
-
-    &.ui-large {
-      input[type="radio"] {
-        --_input-size: var(--size-4);
-      }
-    }
-
-    /* Validation */
-    &[data-invalid],
-    &:has(:user-invalid) {
-      --primary: var(--critical);
-
-      :where(.ui-end-text) {
-        color: var(--critical);
-      }
-    }
-
-    /* Touch devices */
-    @media (pointer: coarse) {
-      input[type="radio"] {
-        block-size: var(--size-4);
-        inline-size: var(--size-4);
-      }
-    }
-
-    @media (forced-colors: active) {
-      input[type="radio"] {
-        border: 1px solid CanvasText;
-
-        &:checked {
-          background-color: SelectedItem;
-          border-color: SelectedItem;
-
-          &::after {
-            background-color: SelectedItemText;
-          }
-        }
-      }
-    }
-  }
-}
+@layer components.root {
+  :where(label.ui-radio) {
+    /* Input */
+    input[type="radio"] {
+      --_dot-radius: calc(
+        var(--_size) / 2 - var(--ui-field-border-width) -
+          round(
+            down,
+            (var(--_size) - 2 * var(--ui-field-border-width)) / 4,
+            1px
+          )
+      );
+
+      appearance: none;
+      aspect-ratio: 1;
+      background-color: var(--ui-surface);
+      block-size: var(--_size);
+      border: var(--ui-field-border-width) solid
+        var(--ui-choice-border-color, var(--ui-field-border-color));
+      border-radius: var(--ui-radius-round);
+      box-sizing: border-box;
+      cursor: pointer;
+      inline-size: var(--_size);
+      margin: 0;
+      padding: 0;
+      position: relative;
+      transform-style: preserve-3d;
+
+      /* Dot */
+      &:checked {
+        background-color: var(--_accent);
+        background-image: radial-gradient(
+          circle,
+          var(--_on-accent) calc(var(--_dot-radius) - 0.25px),
+          var(--_accent) calc(var(--_dot-radius) + 0.25px)
+        );
+        border-color: var(--_accent);
+      }
+    }
+
+    /* Validation */
+    &:has([aria-invalid="true"], :user-invalid) {
+      input[type="radio"]:not(:checked) {
+        border-color: var(--ui-invalid);
+      }
+    }
+
+    @media (forced-colors: active) {
+      input[type="radio"] {
+        border-color: CanvasText;
+
+        &:checked {
+          --_accent: SelectedItem;
+          --_on-accent: SelectedItemText;
+
+          forced-color-adjust: none;
+        }
+      }
+    }
+  }
+}