opui-css 5.4.3 → 6.0.0-rc.1

package/css/components/select.css

@@ -1,170 +1,189 @@
-@layer components.extended {
-  :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;
-      content: "";
-      inline-size: 0;
-      inset: 50% var(--size-3) auto auto;
-      pointer-events: none;
-      position: absolute;
-      translate: 0 -50%;
-    }
-
-    &:open {
-      &::picker-icon {
-        rotate: 180deg;
-      }
-    }
-
-    /* Select popover */
-    &::picker(select) {
-      /* Animation on-stage styles */
-      border: 0;
-      box-shadow: var(--shadow-2);
-      opacity: 1;
-      padding: 0;
-      scale: 1;
-
-      /* Animation starting styles */
-      @starting-style {
-        opacity: 0;
-        transform: 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);
-    }
-
-    /* Animation off-stage styles */
-    &:not(:open)::picker(select) {
-      opacity: 0;
-      scale: 0.9;
-    }
-
-    button {
-      align-items: center;
-      background-color: transparent;
-      display: flex;
-      inline-size: 100%;
-      margin: 0;
-      position: relative;
-
-      selectedcontent {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-
-    .ui-list {
-      --_bg-color: var(--surface-filled);
-      border: var(--field-border-width) solid var(--field-border-color);
-      border-radius: var(--field-border-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;
-          overflow: hidden;
-          padding-inline: var(--size-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;
-          }
-        }
-      }
-
-      /* 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;
-        }
-
-        &::checkmark {
-          display: none;
-        }
-
-        &::before {
-          display: none;
-        }
-
-        &:focus-visible {
-          outline-offset: -1px;
-        }
-      }
-    }
-  }
-
-  :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`.
-    */
-    &:not(:has(button)) {
-      select {
-        appearance: none;
-      }
-
-      /* Arrow */
-      &::after {
-        align-self: center;
-        block-size: 0;
-        border-block-start: 5px solid;
-        border-inline: 5px solid transparent;
-        content: "";
-        display: inline-block;
-        flex-shrink: 0;
-        grid-column: 1/-1;
-        grid-row: 2;
-        inline-size: 0;
-        inset-inline-end: var(--size-3);
-        justify-self: end;
-        pointer-events: none;
-        position: relative;
-      }
-    }
-  }
-
-  select:has(button),
-  ::picker(select) {
-    appearance: base-select;
-  }
-}
+@layer components.extended {
+  /* Reads --_duration, --_ease and the other --_ properties text-field.css declares on .ui-select */
+  :where(.ui-select select) {
+    position: relative;
+
+    /* Default arrow */
+    &::picker-icon {
+      background-color: currentColor;
+      block-size: var(--_chevron-size);
+      content: "";
+      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;
+      transition: scale var(--_duration) var(--_ease);
+
+      @media (forced-colors: active) {
+        background-color: ButtonText;
+      }
+    }
+
+    &:open {
+      &::picker-icon {
+        scale: 1 -1;
+      }
+    }
+
+    /* Select popover */
+    &::picker(select) {
+      /* Animation on-stage styles */
+      background: transparent;
+      border: 0;
+      border-radius: var(--ui-field-radius, var(--ui-radius));
+      box-shadow: var(--ui-shadow-overlay);
+      opacity: 1;
+      padding: 0;
+      scale: 1;
+
+      /* Animation starting styles */
+      @starting-style {
+        opacity: 0;
+        scale: 0.9;
+      }
+
+      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 */
+    &:not(:open)::picker(select) {
+      opacity: 0;
+      scale: 0.9;
+    }
+
+    button {
+      align-items: center;
+      background-color: transparent;
+      display: flex;
+      inline-size: 100%;
+      margin: 0;
+      position: relative;
+
+      selectedcontent {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    .ui-list {
+      --_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 */
+      :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(--ui-space-2);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &:not(:first-child),
+        option:first-of-type {
+          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 pseudo stuff. */
+        &::checkmark {
+          margin-inline-start: auto;
+          order: 1;
+        }
+
+        &:focus-visible {
+          outline-offset: var(--ui-focus-ring-inset);
+        }
+      }
+    }
+  }
+
+  :where(.ui-select:has(select)) {
+    /*
+    * 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 `.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;
+        background-color: currentColor;
+        block-size: var(--_chevron-size);
+        content: "";
+        display: inline-block;
+        flex-shrink: 0;
+        grid-column: 1/-1;
+        grid-row: 2;
+        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;
+        }
+      }
+    }
+  }
+
+  :where(.ui-select select:has(button)),
+  :where(.ui-select select:has(button))::picker(select) {
+    appearance: base-select;
+  }
+}

package/css/components/spinner.css

@@ -1,38 +1,57 @@
-@layer components.root {
-  [aria-busy="true"]:not(
-    input,
-    select,
-    textarea,
-    html,
-    progress,
-    [aria-describedby]
-  ) {
-    position: relative;
-
-    &::before {
-      animation: spin 0.7s linear infinite;
-      block-size: 1em;
-      border-color: transparent currentColor currentColor;
-      border-radius: 50%;
-      border-style: solid;
-      border-width: 3px;
-      content: "";
-      display: inline-block;
-      inline-size: 1em;
-      opacity: 0.5;
-      vertical-align: -0.14em;
-    }
-
-    &:not(button.ui-button):not(:empty) {
-      &::before {
-        margin-inline-end: 0.5em;
-      }
-    }
-  }
-
-  @keyframes spin {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-}
+@layer components.root {
+  :where(
+    [aria-busy="true"]:not(
+      input,
+      select,
+      textarea,
+      html,
+      progress,
+      [aria-describedby]:not(button, a)
+    )
+  ) {
+    --_motion: var(--ui-motion);
+
+    &:not(dialog, [popover]) {
+      position: relative;
+    }
+
+    &::before {
+      animation: ui-spin
+        max(0.7s * var(--_motion), 1.5s - 0.8s * var(--_motion)) linear infinite;
+      block-size: 1em;
+      border-block-color: transparent currentColor;
+      border-inline-color: currentColor;
+      border-radius: 50%;
+      border-style: solid;
+      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) {
+      &::before {
+        margin-inline-end: 0.5em;
+      }
+    }
+  }
+
+  @keyframes ui-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+}