opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/chip.css

@@ -1,92 +1,215 @@
 @layer components.root {
   :where(.ui-chip) {
-    --_bg-color: var(--surface-tonal);
-    --_border-color: var(--border-color);
-    --_color: var(--text-primary);
+    --_bg-color: var(--ui-surface-tonal);
+    --_border-color: var(
+      --ui-control-border-color-filled,
+      var(--ui-border-color)
+    );
+    --_dot-bg-color: currentColor;
+    --_font-size: var(--ui-font-size-caption);
+    --_icon-padding-inline: var(--ui-space-1);
+    --_icon-size: var(--ui-icon-size-small);
+    --_padding-inline: var(--ui-space-2);
+    --_pressed-bg-color: var(--ui-selected, var(--ui-primary));
+    --_size: var(--ui-chip-size);
+    --_text-color: var(--ui-text-strong);
 
     align-items: center;
-    background: var(--_bg-color) var(--ripple, none);
-    block-size: var(--size-7, 2rem);
-    border-radius: var(--radius-2, 0.5rem);
-    border: 1px solid var(--_border-color);
-    color: var(--_color);
+    background-color: var(--_bg-color);
+    block-size: var(--_size);
+    border: var(--ui-border-width) solid var(--_border-color);
+    border-radius: var(--ui-chip-radius, var(--ui-radius));
+    color: var(--_text-color);
     display: inline-flex;
-    font-size: var(--font-size-0, 0.75rem);
-    gap: var(--size-1);
-    padding-inline: var(--size-2);
+    font-size: var(--_font-size);
+    gap: var(--ui-space-1);
+    max-inline-size: 100%;
+    padding-inline: var(--_padding-inline);
     text-decoration: none;
 
-    /* Variants */
-    &.ui-tonal {
-      --_bg-color: var(--surface-tonal);
-      --_color: var(--text-primary);
+    &:not(.ui-multiline) > .ui-text {
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
+    /* Variants */
     &.ui-outlined {
-      --_bg-color: var(--surface-default);
-      --_color: var(--text-primary);
+      --_bg-color: var(--ui-surface);
+      --_border-color: var(--ui-control-border-color, var(--ui-border-color));
+      --_text-color: var(--ui-text-strong);
+
+      box-shadow: var(--ui-shadow-control);
     }
 
-    &:where(button, a):where(:not([disabled])) {
-      &:where(:not(:active)):hover {
-        --_bg-color: light-dark(
-          oklch(from var(--surface-tonal) calc(l * 0.98) c h),
-          oklch(from var(--surface-tonal) calc(l * 1.1) c h)
-        );
+    &:where(button, a):where(:not(:disabled, [aria-disabled="true"])) {
+      @media (hover: hover) {
+        &:hover {
+          --_bg-color: var(--ui-surface-tonal-hover);
+        }
       }
     }
 
-    /* Icon */
-    &:has(svg:first-child) {
-      padding-inline: var(--size-1) var(--size-2);
+    &:is(.ui-critical, .ui-info, .ui-neutral, .ui-success, .ui-warning) {
+      --_dot-bg-color: var(--ui-palette-accent);
+
+      &:where(:not(.ui-outlined)) {
+        --_bg-color: var(--ui-palette-tint-subtle);
+        --_border-color: var(--ui-palette-border);
+        --_text-color: var(--ui-palette-strong);
+
+        &:where(button, a):where(:not(:disabled, [aria-disabled="true"])) {
+          @media (hover: hover) {
+            &:hover {
+              --_bg-color: light-dark(
+                oklch(from var(--_accent) 0.92 calc(c * 0.35) h),
+                oklch(from var(--_accent) 0.35 calc(c * 0.4) h)
+              );
+            }
+          }
+        }
+      }
+    }
+
+    &.ui-critical {
+      --_accent: var(--ui-critical);
+    }
+
+    &.ui-info {
+      --_accent: var(--ui-info);
+    }
+
+    &.ui-neutral {
+      --_accent: var(--ui-neutral);
     }
 
-    &:has(svg:last-child) {
-      padding-inline: var(--size-2) var(--size-1);
+    &.ui-success {
+      --_accent: var(--ui-success);
     }
 
-    &:has(svg) {
-      svg {
-        flex-shrink: 0;
-        inline-size: var(--size-3);
+    &.ui-warning {
+      --_accent: var(--ui-warning);
+    }
+
+    &.ui-dot::before {
+      background-color: var(--_dot-bg-color);
+      block-size: var(--ui-space-2);
+      border-radius: var(--ui-radius-round);
+      content: "";
+      flex-shrink: 0;
+      inline-size: var(--ui-space-2);
+
+      @media (forced-colors: active) {
+        background-color: CanvasText;
+        forced-color-adjust: none;
+      }
+    }
+
+    &.ui-dot.ui-critical::before {
+      border-radius: 0;
+      clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+      scale: 1.25;
+    }
+
+    &.ui-dot.ui-neutral::before {
+      background-color: transparent;
+      border: var(--ui-border-width-thick) solid var(--_dot-bg-color);
+
+      @media (forced-colors: active) {
+        border-color: CanvasText;
       }
     }
 
+    &.ui-dot.ui-warning::before {
+      border-radius: 0;
+      clip-path: polygon(50% 0, 100% 100%, 0 100%);
+      scale: 1.25;
+    }
+
+    /* Icon */
+    &:has(> svg:first-child) {
+      padding-inline-start: var(--_icon-padding-inline);
+    }
+
+    &:has(> svg:last-child) {
+      padding-inline-end: var(--_icon-padding-inline);
+    }
+
+    svg {
+      flex-shrink: 0;
+      inline-size: var(--_icon-size);
+    }
+
     /* Sizes */
+    &.ui-x-small {
+      --_size: var(--ui-chip-size-x-small);
+    }
+
     &.ui-small {
-      block-size: var(--size-5);
+      --_size: var(--ui-chip-size-small);
+    }
+
+    &.ui-large {
+      --_font-size: var(--ui-font-size-small);
+      --_icon-padding-inline: var(--ui-space-2);
+      --_icon-size: var(--ui-icon-size);
+      --_padding-inline: var(--ui-space-3);
+      --_size: var(--ui-chip-size-large);
     }
 
     &.ui-multiline {
       block-size: auto;
     }
 
-    /* Ripple effect */
-    background-position: center;
+    /* Disabled */
+    &:is([disabled], [aria-disabled="true"]) {
+      --_text-color: var(--ui-text-disabled);
+
+      cursor: not-allowed;
+    }
+
+    &.ui-disabled:not(a, button) {
+      --_text-color: var(--ui-text-strong);
 
-    &:where(:not([disabled])) {
-      &:where(:not(:active):hover) {
-        --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
-          center/15000%;
+      cursor: auto;
+      opacity: var(--ui-disabled-opacity);
 
-        transition: background var(--button-ripple-duration);
-      }
+      @container style(--ui-contrast: more) {
+        --_text-color: var(--ui-text);
 
-      &:where(:hover:active) {
-        background-size: var(--button-ripple-size);
-        transition: background 0s;
+        opacity: 1;
       }
     }
 
-    /* Disabled */
-    &:where([disabled]) {
-      opacity: 0.64;
-      --_color: color-mix(
-        in oklch,
-        var(--text-muted) 50%,
-        var(--surface-default)
+    /* Pressed */
+    &:where(button)[aria-pressed="true"] {
+      --_bg-color: var(--_pressed-bg-color);
+      --_border-color: var(
+        --ui-control-border-color-filled,
+        var(--ui-control-border-color, var(--ui-border-color))
       );
-      cursor: not-allowed;
+      --_dot-bg-color: currentColor;
+      --_text-color: var(--ui-on-selected, var(--ui-on-primary));
+
+      &:where(:not(:disabled)) {
+        @media (hover: hover) {
+          &:hover {
+            --_bg-color: oklch(from var(--_pressed-bg-color) calc(l * 0.9) c h);
+          }
+        }
+      }
+
+      &:disabled {
+        opacity: var(--ui-disabled-opacity);
+      }
+
+      @media (forced-colors: active) {
+        background-color: SelectedItem;
+        border-color: SelectedItem;
+        color: SelectedItemText;
+        forced-color-adjust: none;
+      }
     }
   }
 }

package/css/components/choice.css

@@ -0,0 +1,291 @@
+@layer components.root {
+  :where(label.ui-checkbox, label.ui-radio, .ui-switch) {
+    --_motion: var(--ui-motion);
+    --_accent: var(
+      --ui-choice-accent,
+      var(
+        --ui-control-accent,
+        light-dark(
+          var(--ui-primary),
+          oklch(
+            from var(--ui-primary) min(l, var(--ui-choice-fill-max-lightness)) c
+              h
+          )
+        )
+      )
+    );
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease);
+    --_on-accent: var(
+      --ui-choice-on-accent,
+      var(
+        --ui-on-control-accent,
+        light-dark(var(--ui-on-primary), var(--ui-on-fill))
+      )
+    );
+
+    align-items: start;
+    color: var(--ui-text-strong);
+    cursor: pointer;
+    display: inline-grid;
+    gap: 0 var(--ui-space-2);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    inline-size: fit-content;
+    line-height: var(--ui-line-height-control);
+    -webkit-user-select: none;
+    user-select: none;
+
+    &:not(:has(.ui-label, .ui-text)) {
+      align-items: center;
+      min-block-size: var(--ui-space-5);
+      min-inline-size: var(--ui-space-5);
+      place-content: center;
+      vertical-align: middle;
+    }
+
+    /* Disabled */
+    &:has([disabled], input[aria-disabled="true"]) {
+      cursor: not-allowed;
+      opacity: var(--ui-disabled-opacity);
+      -webkit-user-select: none;
+      user-select: none;
+
+      input {
+        cursor: not-allowed;
+      }
+    }
+
+    /* Required dot */
+    &:has(:required) {
+      .ui-label::after {
+        color: var(--ui-field-required-text-color);
+        content: "*";
+        margin-inline-start: 0.25ex;
+
+        @supports (content: "*" / "") {
+          content: "*" / "";
+        }
+      }
+    }
+
+    /* Label */
+    .ui-label {
+      color: var(--ui-field-label-text-color);
+      font-size: var(--ui-field-label-font-size);
+      grid-column: 2;
+      grid-row: 1;
+      margin-block-start: calc(
+        (var(--_size) - 1lh) / 2 + var(--ui-choice-label-offset)
+      );
+      padding-inline: 0 1ex;
+      position: relative;
+    }
+
+    /* End text */
+    :where(.ui-end-text) {
+      color: var(--ui-field-helper-text-color);
+      font-size: var(--ui-field-helper-font-size);
+      grid-column: 2;
+      grid-row: 2;
+      line-height: var(--ui-field-helper-line-height);
+      z-index: 1;
+    }
+
+    &:where(.ui-checkbox, .ui-radio) {
+      --_size: var(--ui-choice-size);
+
+      transform: translateZ(0);
+
+      &.ui-card input:is([type="checkbox"], [type="radio"])::before {
+        content: none;
+      }
+
+      /* Hover and active effect */
+      input:is([type="checkbox"], [type="radio"]) {
+        --_ripple-size: 175%;
+
+        &:where(:not(:disabled, [aria-disabled="true"])) {
+          @media (hover: hover) {
+            &:hover::before {
+              --_thumb-scale: 1;
+            }
+          }
+
+          &:active::before {
+            --_thumb-scale: 1.1;
+          }
+
+          &::before {
+            --_thumb-scale: 0.01;
+
+            background-color: var(--ui-choice-ripple-bg-color);
+            clip-path: circle(50%);
+            content: "";
+            inset: calc((100% - var(--_ripple-size)) / 2);
+            position: absolute;
+            transform: translateZ(-1px) scale(var(--_thumb-scale));
+            transform-origin: center center;
+
+            transition: transform var(--_duration) var(--_ease);
+            will-change: transform;
+          }
+        }
+      }
+    }
+
+    /* Validation */
+    &:has([aria-invalid="true"], :user-invalid) {
+      --_accent: light-dark(
+        var(--ui-invalid),
+        oklch(
+          from var(--ui-invalid) min(l, var(--ui-choice-fill-max-lightness)) c h
+        )
+      );
+      --_on-accent: var(--ui-on-fill);
+
+      :where(.ui-end-text) {
+        color: var(--ui-invalid-text);
+      }
+    }
+
+    /* Sizes */
+    &.ui-x-small {
+      --ui-choice-size: var(--ui-choice-size-x-small);
+      --ui-switch-thumb-size: var(--ui-switch-thumb-size-x-small);
+      --ui-switch-track-block-size: var(--ui-switch-track-block-size-x-small);
+      --ui-switch-track-inline-size: var(--ui-switch-track-inline-size-x-small);
+    }
+
+    &.ui-small {
+      --ui-choice-size: var(--ui-choice-size-small);
+      --ui-switch-thumb-size: var(--ui-switch-thumb-size-small);
+      --ui-switch-track-block-size: var(--ui-switch-track-block-size-small);
+      --ui-switch-track-inline-size: var(--ui-switch-track-inline-size-small);
+    }
+
+    &.ui-large {
+      --ui-choice-size: var(--ui-choice-size-large);
+      --ui-switch-thumb-size: var(--ui-switch-thumb-size-large);
+      --ui-switch-track-block-size: var(--ui-switch-track-block-size-large);
+      --ui-switch-track-inline-size: var(--ui-switch-track-inline-size-large);
+    }
+
+    /* Spread layout */
+    &.ui-spread {
+      align-items: start;
+      column-gap: var(--ui-space-4);
+      grid-auto-flow: unset;
+      grid-template-columns: 1fr auto;
+      inline-size: 100%;
+
+      .ui-label {
+        font-weight: var(--ui-field-label-font-weight);
+        grid-column: 1;
+        grid-row: 1;
+        inline-size: fit-content;
+      }
+
+      input {
+        grid-column: 2;
+        grid-row: 1;
+      }
+
+      :where(.ui-end-text) {
+        grid-column: 1;
+        grid-row: 2;
+      }
+    }
+
+    /* Stacked layout */
+    &.ui-vertical {
+      grid-auto-columns: unset;
+      justify-items: center;
+
+      .ui-label {
+        grid-column: 1/-1;
+        grid-row: 2;
+        margin-block-start: var(--ui-space-1);
+        padding-inline: 1ex;
+      }
+
+      .ui-end-text {
+        grid-column: 1/-1;
+        grid-row: 3;
+      }
+    }
+
+    /* Card */
+    &.ui-card {
+      --_card-padding: var(--ui-space-3);
+      --_checked-bg-color: var(
+        --ui-primary-tonal,
+        oklch(
+          from var(--ui-primary) l c h / var(--ui-state-active-alpha-accent)
+        )
+      );
+      --_hover-bg-color: var(--ui-surface-tonal-hover);
+
+      @container style(--ui-contrast: more) {
+        --_checked-bg-color: var(
+          --ui-primary-tonal,
+          oklch(
+            from var(--ui-primary) l c h / var(--ui-state-hover-alpha-accent)
+          )
+        );
+      }
+
+      inline-size: 100%;
+      overflow: visible;
+      padding: var(--_card-padding);
+      transition:
+        background-color var(--_duration) var(--_ease),
+        border-color var(--_duration) var(--_ease);
+
+      &:not(.ui-spread) {
+        column-gap: var(--ui-space-3);
+        grid-template-columns: auto 1fr;
+      }
+
+      &:is(.ui-small, .ui-x-small) {
+        --_card-padding: var(--ui-space-2);
+      }
+
+      &:not(.ui-elevated, .ui-tonal) {
+        --_border-color: var(--ui-border-color);
+        --_border-width: var(--ui-border-width);
+        --_shadow: var(--ui-shadow-surface);
+      }
+
+      @media (hover: hover) {
+        &:hover:not(:has(:checked, [disabled], input[aria-disabled="true"])) {
+          --_bg-color: var(--_hover-bg-color);
+        }
+      }
+
+      &:has(input:checked) {
+        --_bg-color: var(--_checked-bg-color);
+        --_border-color: var(--_accent);
+
+        @media (forced-colors: active) {
+          --_border-color: SelectedItem;
+        }
+      }
+
+      &:has([aria-invalid="true"], :user-invalid) {
+        --_border-color: var(--ui-invalid);
+      }
+
+      &:has(input:focus-visible) {
+        animation: ui-focus-ring var(--_duration) var(--_ease);
+        outline: var(--ui-focus-ring-width) var(--ui-focus-ring-style)
+          var(--ui-focus-ring-color);
+        outline-offset: var(--ui-focus-ring-offset);
+      }
+
+      input:focus-visible {
+        outline: none;
+      }
+    }
+  }
+}

package/css/components/description-list.css

@@ -1,79 +1,89 @@
 @layer components.root {
   :where(.ui-description-list) {
     --_border-style: solid;
-    --_border-width: 1px;
+    --_border-width: var(--ui-border-width);
 
+    container-type: inline-size;
     display: grid;
-    gap: var(--size-3);
+    inline-size: 100%;
     margin: 0;
     padding: 0;
 
-    &.ui-dotted {
+    &.ui-bordered.ui-dotted {
       --_border-style: dotted;
-      --_border-width: 2px;
+      --_border-width: var(--ui-border-width-thick);
     }
 
-    .ui-item {
+    & & {
+      container-type: normal;
+    }
+
+    & > div {
+      align-items: baseline;
       display: grid;
+      gap: var(--ui-space-1);
+      grid-template-columns: auto auto;
+      justify-content: space-between;
       margin: 0;
+      overflow-wrap: anywhere;
       padding: 0;
 
-      dt,
-      .ui-term {
+      & + div {
+        margin-block-start: var(--ui-space-1);
+      }
+
+      dt {
         display: block;
-        font-weight: 700;
-        overflow: hidden;
-        position: relative;
+        font-weight: var(--ui-font-weight-bold);
       }
 
       dd {
+        color: var(--ui-text);
         margin: 0;
+        padding: 0;
+        text-align: end;
       }
     }
 
-    @container (width > 45ch) {
-      gap: var(--size-1);
-
-      .ui-item {
-        align-items: baseline;
-        display: grid;
-        gap: var(--size-1);
-        grid-template-columns: 1fr auto;
+    &.ui-bordered > div {
+      grid-template-columns: auto 1fr auto;
 
-        dt,
-        .ui-term {
-          inline-size: max-content;
+      dt {
+        order: 0;
+      }
 
-          &::after {
-            display: inline-block;
-          }
-        }
+      dd {
+        order: 2;
+      }
 
-        dd {
-          color: var(--text-muted);
-          text-align: end;
-        }
+      &::after {
+        background-color: transparent;
+        block-size: var(--ui-border-width-thick);
+        border-block-end: var(--_border-width) var(--_border-style)
+          var(--ui-border-color);
+        content: "";
+        order: 1;
       }
+    }
 
-      &.ui-bordered .ui-item {
-        grid-template-columns: auto 1fr auto;
+    @container (inline-size <= 45ch) {
+      &:not(.ui-horizontal) > div {
+        align-items: normal;
+        gap: 0;
+        grid-template-columns: none;
+        justify-content: normal;
 
-        dt,
-        .ui-term {
-          order: 0;
+        & + div {
+          margin-block-start: var(--ui-space-3);
         }
 
         dd {
-          order: 2;
+          color: inherit;
+          text-align: start;
         }
 
         &::after {
-          background-color: transparent;
-          block-size: 2px;
-          border-block-end: var(--_border-width) var(--_border-style)
-            var(--border-color);
-          content: "";
-          order: 1;
+          content: none;
         }
       }
     }