opui-css 5.4.2 → 6.0.0-rc.1

package/css/components/select.css

@@ -1,33 +1,40 @@
 @layer components.extended {
+  /* Reads --_duration, --_ease and the other --_ properties text-field.css declares on .ui-select */
   :where(.ui-select select) {
-    --_motion: var(--motion, 1);
     position: relative;
 
     /* Default arrow */
     &::picker-icon {
-      block-size: 0;
-      border-block-start: 5px solid;
-      border-inline: 5px solid transparent;
-      color: currentColor;
+      background-color: currentColor;
+      block-size: var(--_chevron-size);
       content: "";
-      inline-size: 0;
-      inset: 50% var(--size-3) auto auto;
+      inline-size: var(--_chevron-size);
+      inset-block: 0;
+      inset-inline: auto var(--_arrow-inset);
+      margin-block: auto;
+      mask: var(--_chevron-image) center / contain no-repeat;
       pointer-events: none;
       position: absolute;
-      translate: 0 -50%;
+      transition: scale var(--_duration) var(--_ease);
+
+      @media (forced-colors: active) {
+        background-color: ButtonText;
+      }
     }
 
     &:open {
       &::picker-icon {
-        rotate: 180deg;
+        scale: 1 -1;
       }
     }
 
     /* Select popover */
     &::picker(select) {
       /* Animation on-stage styles */
+      background: transparent;
       border: 0;
-      box-shadow: var(--shadow-2);
+      border-radius: var(--ui-field-radius, var(--ui-radius));
+      box-shadow: var(--ui-shadow-overlay);
       opacity: 1;
       padding: 0;
       scale: 1;
@@ -35,13 +42,14 @@
       /* Animation starting styles */
       @starting-style {
         opacity: 0;
-        transform: scale(0.9);
+        scale: 0.9;
       }
 
-      transition: display calc(0.2s * var(--_motion)) allow-discrete,
-      opacity calc(0.2s * var(--_motion)) var(--ease-3),
-      overlay calc(0.2s * var(--_motion)) allow-discrete,
-      scale calc(0.2s * var(--_motion)) var(--ease-3);
+      transition:
+        display var(--_duration) allow-discrete,
+        opacity var(--_duration) var(--_ease),
+        overlay var(--_duration) allow-discrete,
+        scale var(--_duration) var(--_ease);
     }
 
     /* Animation off-stage styles */
@@ -66,105 +74,116 @@
     }
 
     .ui-list {
-      --_bg-color: var(--surface-filled);
-      border: var(--field-border-width) solid var(--field-border-color);
-      border-radius: var(--field-border-radius);
+      --_bg-color: var(--ui-surface-elevated);
+      --ui-border-color: var(--ui-border-color-on-raised);
+      --ui-field-border-color: var(--ui-field-border-color-on-raised);
+      border: var(--ui-border-width) solid
+        var(--ui-border-color-raised, var(--ui-border-color-on-raised));
+      border-radius: var(--ui-field-radius, var(--ui-radius));
 
       /* Groups */
-      [role="group"] {
-        label {
-          background-color: light-dark(var(--gray-3), var(--gray-13));
-          color: light-dark(oklch(from var(--text-primary) calc(l * 0.75) c h),
-              oklch(from var(--text-primary) calc(l * 1.25) c h));
-          font-weight: 500;
+      :is([role="group"], optgroup) {
+        :is(label, legend) {
+          background-color: color-mix(
+            in oklch,
+            var(--_bg-color) 94%,
+            var(--ui-text-strong)
+          );
+          color: var(--ui-text);
+          font-weight: var(--ui-font-weight-medium);
           overflow: hidden;
-          padding-inline: var(--size-2);
+          padding-inline: var(--ui-space-2);
           text-overflow: ellipsis;
           white-space: nowrap;
         }
 
         &:not(:first-child),
         option:first-of-type {
-          margin-block-start: var(--size-2);
-        }
-
-        option:last-of-type,
-        &:last-child {
-          option:last-of-type {
-            margin-block-end: 0;
-          }
+          margin-block-start: var(--ui-space-2);
         }
       }
 
       /* Option */
       option {
-
         /* Checkmark */
-        /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant psuedo stuff. */
-        &::check {
-          display: none;
-        }
-
+        /* TODO - checkmark should be the final version of the checkmark API. Follow the development of this and remove redundant pseudo stuff. */
         &::checkmark {
-          display: none;
-        }
-
-        &::before {
-          display: none;
+          margin-inline-start: auto;
+          order: 1;
         }
 
         &:focus-visible {
-          outline-offset: -1px;
+          outline-offset: var(--ui-focus-ring-inset);
         }
       }
     }
   }
 
   :where(.ui-select:has(select)) {
-
-    /* Size */
-    &.ui-small {
-      button {
-        padding-inline: var(--size-2) var(--size-7);
-
-        &::after {
-          inset-inline-end: var(--size-2);
-        }
-      }
-    }
-
     /*
     * Non-experimental Select
     *
-    * Hack to get the arrow working. Pseudo elements aren't allowed on the `<select>` element, so need to add it on the `.select` class instead. Noting this down if an `:after` element would be needed on a `.select`.
+    * Hack to get the arrow working. Pseudo elements aren't allowed on the `<select>` element, so need to add it on the `.ui-select` class instead. Noting this down if an `:after` element would be needed on a `.ui-select`.
     */
     &:not(:has(button)) {
       select {
         appearance: none;
+        text-overflow: ellipsis;
+      }
+
+      :where(option, optgroup) {
+        background-color: var(--ui-surface-elevated);
+        color: var(--ui-text-strong);
       }
 
       /* Arrow */
       &::after {
         align-self: center;
-        block-size: 0;
-        border-block-start: 5px solid;
-        border-inline: 5px solid transparent;
+        background-color: currentColor;
+        block-size: var(--_chevron-size);
         content: "";
         display: inline-block;
         flex-shrink: 0;
         grid-column: 1/-1;
         grid-row: 2;
-        inline-size: 0;
-        inset-inline-end: var(--size-3);
+        inline-size: var(--_chevron-size);
+        inset-inline-end: var(--_arrow-inset);
         justify-self: end;
+        mask: var(--_chevron-image) center / contain no-repeat;
         pointer-events: none;
         position: relative;
+
+        @media (forced-colors: active) {
+          background-color: ButtonText;
+        }
+      }
+
+      &:not(.ui-spread):has(> .ui-start-text)::after {
+        grid-row: 3;
+      }
+
+      &.ui-spread::after {
+        align-self: start;
+        grid-row: 1 / span 3;
+        margin-block-start: calc((var(--_size) - var(--_chevron-size)) / 2);
+      }
+
+      @container (inline-size < 400px) {
+        &.ui-spread::after {
+          align-self: center;
+          grid-row: 2;
+          margin-block-start: 0;
+        }
+
+        &.ui-spread:has(> .ui-start-text)::after {
+          grid-row: 3;
+        }
       }
     }
   }
 
-  select:has(button),
-  ::picker(select) {
+  :where(.ui-select select:has(button)),
+  :where(.ui-select select:has(button))::picker(select) {
     appearance: base-select;
   }
 }

package/css/components/spinner.css

@@ -1,26 +1,45 @@
 @layer components.root {
-  [aria-busy="true"]:not(
-    input,
-    select,
-    textarea,
-    html,
-    progress,
-    [aria-describedby]
+  :where(
+    [aria-busy="true"]:not(
+      input,
+      select,
+      textarea,
+      html,
+      progress,
+      [aria-describedby]:not(button, a)
+    )
   ) {
-    position: relative;
+    --_motion: var(--ui-motion);
+
+    &:not(dialog, [popover]) {
+      position: relative;
+    }
 
     &::before {
-      animation: spin 0.7s linear infinite;
+      animation: ui-spin
+        max(0.7s * var(--_motion), 1.5s - 0.8s * var(--_motion)) linear infinite;
       block-size: 1em;
-      border-color: transparent currentColor currentColor;
+      border-block-color: transparent currentColor;
+      border-inline-color: currentColor;
       border-radius: 50%;
       border-style: solid;
-      border-width: 3px;
+      border-width: max(var(--ui-border-width-thick), 0.1875em);
       content: "";
       display: inline-block;
       inline-size: 1em;
       opacity: 0.5;
       vertical-align: -0.14em;
+
+      @container style(--ui-contrast: more) {
+        opacity: 1;
+      }
+
+      @media (forced-colors: active) {
+        border-block-color: transparent CanvasText;
+        border-inline-color: CanvasText;
+        forced-color-adjust: none;
+        opacity: 1;
+      }
     }
 
     &:not(button.ui-button):not(:empty) {
@@ -30,7 +49,7 @@
     }
   }
 
-  @keyframes spin {
+  @keyframes ui-spin {
     to {
       transform: rotate(1turn);
     }

package/css/components/switch.css

@@ -1,110 +1,102 @@
 @layer components.root {
   :where(.ui-switch) {
-    --_motion: var(--motion, 1);
-    --_accent-color: var(--primary);
-    --_accent-contrast: var(--primary-contrast);
-
-    --_dot-bg-color: light-dark(var(--gray-11), var(--gray-14));
-    --_dot-inset: var(--size-1) auto auto var(--size-1);
-    --_dot-outline-size: 0;
-    --_dot-size: var(--size-3);
-
-    --_track-bg-color: light-dark(var(--gray-3), var(--gray-8));
-    --_track-height: var(--size-5);
-    --_track-width: var(--size-8);
-    --_transition-tf: var(--ease-4);
-    --_transition-time: calc(0.2s * var(--_motion));
-
-    align-items: center;
-    color: var(--text-primary);
-    display: inline-grid;
-    gap: 0 var(--size-2);
-    grid-auto-columns: auto;
-    grid-auto-flow: column;
-    inline-size: fit-content;
+    --_motion: var(--ui-motion);
+    --_duration: calc(var(--ui-duration) * var(--_motion));
+    --_ease: var(--ui-ease);
+    --_icon-size: min(
+      var(--_thumb-size),
+      max(
+        0px,
+        var(--_track-inline-size) - var(--_thumb-size) - var(--_thumb-inset) * 3
+      )
+    );
+    --_size: var(--_track-block-size);
+    --_thumb-bg-color: var(--ui-switch-thumb-bg-color);
+    --_thumb-inset: round(
+      down,
+      (var(--_track-block-size) - var(--_thumb-size)) / 2,
+      1px
+    );
+    --_thumb-outline-size: 0;
+    --_thumb-size: round(var(--ui-switch-thumb-size), 1px);
+    --_track-bg-color: var(
+      --ui-track-bg-color,
+      var(--ui-switch-track-bg-color)
+    );
+    --_track-block-size: round(var(--ui-switch-track-block-size), 1px);
+    --_track-border-color: var(
+      --ui-choice-border-color,
+      var(--ui-field-border-color)
+    );
+    --_track-inline-size: round(var(--ui-switch-track-inline-size), 1px);
 
     :where(input[type="checkbox"][role="switch"]) {
       appearance: none;
-      block-size: var(--_track-height);
+      block-size: var(--_track-block-size);
+      border-radius: var(--ui-radius-round);
       cursor: pointer;
-      inline-size: var(--_track-width);
+      inline-size: var(--_track-inline-size);
       margin: 0;
       position: relative;
 
       /* Track */
       &::before {
         background-color: var(--_track-bg-color);
-        block-size: var(--_track-height);
-        border: 1px solid var(--_dot-bg-color);
-        border-radius: var(--radius-round);
+        block-size: var(--_track-block-size);
+        border: var(--ui-field-border-width) solid var(--_track-border-color);
+        border-radius: var(--ui-radius-round);
         content: "";
-        inline-size: var(--_track-width);
+        inline-size: var(--_track-inline-size);
         inset: 0;
         position: absolute;
-      }
-
-      &:focus-visible {
-        --focus-ring-color: currentColor;
-        outline: var(--focus-ring-width) var(--focus-ring-style)
-          var(--focus-ring-color);
-        outline-offset: var(--focus-ring-offset);
+        transition:
+          background-color var(--_duration) var(--_ease),
+          border-color var(--_duration) var(--_ease);
       }
 
       /* Dot */
       &::after {
-        background-color: var(--_dot-bg-color);
-        block-size: var(--_dot-size);
-        border-radius: var(--radius-round);
+        background-color: var(--_thumb-bg-color);
+        block-size: var(--_thumb-size);
+        border-radius: var(--ui-radius-round);
         content: "";
-        inline-size: var(--_dot-size);
-        inset: var(--_dot-inset);
-        outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
-        outline-offset: -1px;
+        inline-size: var(--_thumb-size);
+        inset-block-start: var(--_thumb-inset);
+        inset-inline-start: var(--_thumb-inset);
+        outline: var(--_thumb-outline-size) solid var(--_thumb-bg-color);
+        outline-offset: calc(-1 * var(--ui-border-width));
         position: absolute;
+        transition:
+          background-color var(--_duration) var(--_ease),
+          inset-inline-start var(--_duration) var(--_ease),
+          outline-color var(--_duration) var(--_ease),
+          outline-width var(--_duration) var(--_ease);
       }
 
       /* Checked */
       &:checked {
         &::before {
-          background-color: var(--_accent-color);
-          border-color: var(--_accent-color);
-          transition:
-            background-color var(--_transition-time) var(--_transition-tf),
-            border-color var(--_transition-time) var(--_transition-tf);
+          background-color: var(--_accent);
+          border-color: var(--_accent);
         }
 
         /* Dot */
         &::after {
-          --_dot-bg-color: var(--_accent-contrast);
-          --_dot-outline-size: calc(var(--size-1) - 1px);
+          --_thumb-bg-color: var(--_on-accent);
+          --_thumb-outline-size: calc(
+            var(--_thumb-inset) - var(--ui-border-width)
+          );
 
           inset-inline-start: calc(
-            var(--_track-width) - var(--_dot-size) - var(--size-1)
+            var(--_track-inline-size) - var(--_thumb-size) - var(--_thumb-inset)
           );
         }
       }
 
-      /* Animation */
-      /* Track */
-      &::before {
-        transition:
-          background-color var(--_transition-time) var(--_transition-tf),
-          border-color var(--_transition-time) var(--_transition-tf);
-      }
-
-      /* Dot */
-      &::after {
-        transition: all var(--_transition-time) var(--_transition-tf);
-      }
-
-      &:active:after {
-        --_dot-outline-size: calc(var(--size-1) + 1px);
-      }
-
-      &:checked {
-        &:active:after {
-          --_dot-outline-size: calc(var(--size-1) + 1px);
-        }
+      &:active::after {
+        --_thumb-outline-size: calc(
+          var(--_thumb-inset) + var(--ui-border-width)
+        );
       }
     }
 
@@ -126,144 +118,79 @@
       }
 
       .ui-icon-checked {
+        color: var(--_on-accent);
         display: none;
+        margin-inline-start: var(--_thumb-inset);
       }
 
       .ui-icon-unchecked,
       .ui-icon-checked {
+        align-self: start;
         grid-column: 1;
         grid-row: 1;
+        margin-block-start: round(
+          down,
+          (var(--_track-block-size) - var(--_icon-size)) / 2,
+          1px
+        );
         pointer-events: none;
         z-index: 1;
 
         svg {
           display: block;
-          inline-size: var(--_dot-size);
+          inline-size: var(--_icon-size);
         }
       }
 
       .ui-icon-unchecked {
         margin-inline-start: calc(
-          var(--_track-width) - var(--_dot-size) - var(--size-1)
+          var(--_track-inline-size) - var(--_icon-size) - var(--_thumb-inset)
         );
       }
-
-      .ui-icon-checked {
-        margin-inline-start: var(--size-1);
-      }
-    }
-
-    /* Required dot */
-    &:has(:invalid) {
-      .ui-label:after {
-        color: var(--red);
-        content: "*";
-        inset: 0 -0.25ex auto auto;
-        position: absolute;
-      }
-    }
-
-    /* Disabled */
-    &:has([disabled]) {
-      cursor: not-allowed;
-      opacity: 0.64;
-      user-select: none;
-
-      input {
-        cursor: not-allowed;
-      }
     }
 
     /* Label */
     .ui-label {
-      color: var(--text-primary);
-      font-size: var(--font-size-05);
-      grid-column: 2;
-      grid-row: 1;
-      min-width: 0;
-      padding-inline: 0 1ex;
-      position: relative;
-      user-select: none;
-    }
-
-    /* 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;
-    }
-
-    /* Size */
-    &.ui-small {
-      --_dot-size: 0.75rem;
-      --_track-height: var(--size-4);
-      --_track-width: 2.5rem;
+      min-inline-size: 0;
     }
 
     /* Spread layout */
-    &.ui-spread {
-      align-items: center;
-      column-gap: var(--size-4);
-      grid-auto-flow: unset;
-      grid-template-columns: 1fr auto;
-      inline-size: 100%;
-
-      .ui-label {
-        font-weight: 600;
-        grid-column: 1;
-        grid-row: 1;
-        inline-size: fit-content;
-      }
-
-      input[role="switch"] {
+    &.ui-spread:has(.ui-icon-checked, .ui-icon-unchecked) {
+      input[role="switch"],
+      .ui-icon-checked,
+      .ui-icon-unchecked {
         grid-column: 2;
-        grid-row: 1;
       }
+    }
 
-      &:has(.ui-icon-checked, .ui-icon-unchecked) {
-        input[role="switch"],
-        .ui-icon-checked,
-        .ui-icon-unchecked {
-          grid-column: 2;
-        }
+    /* Validation */
+    &:has([aria-invalid="true"], :user-invalid) {
+      input {
+        box-shadow: 0 0 0 var(--ui-focus-ring-width) var(--ui-invalid);
       }
 
-      :where(.ui-end-text) {
-        grid-column: 1;
-        grid-row: 2;
+      input:focus-visible {
+        outline-offset: calc(
+          var(--ui-focus-ring-offset) + var(--ui-focus-ring-width)
+        );
       }
     }
 
-    /* Stacked layout */
-    &.ui-stack {
-      grid-auto-columns: unset;
-      justify-items: center;
+    @media (forced-colors: active) {
+      --_thumb-bg-color: CanvasText;
+      --_track-bg-color: Canvas;
 
-      .ui-label {
-        grid-column: 1/-1;
-        grid-row: 2;
-        margin-block-start: var(--size-1);
-        padding-inline: 1ex;
+      &:has([disabled], input[aria-disabled="true"]) {
+        --_thumb-bg-color: GrayText;
       }
 
-      .ui-end-text {
-        grid-column: 1/-1;
-        grid-row: 3;
-      }
-    }
+      :where(input[type="checkbox"][role="switch"]) {
+        --_accent: SelectedItem;
+        --_on-accent: SelectedItemText;
 
-    /* Validation */
-    &[data-invalid] {
-      input {
-        border-radius: var(--radius-round);
-        outline: 2px solid var(--color-9);
-      }
-
-      .ui-end-text {
-        color: var(--color-9);
+        &:is(:disabled, [aria-disabled="true"]) {
+          --_accent: GrayText;
+        }
       }
     }
   }