opui-css 3.3.5 → 4.0.1

package/{src/themes/theme-two → css}/components/select.css

@@ -1,162 +1,169 @@
-@layer components.extended {
-  :where(.field > select) {
-    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);
-      }
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
-          overlay 0.2s allow-discrete, scale 0.2s var(--ease-3);
-      }
-    }
-
-    /* Animation off-stage styles */
-    &:not(:open)::picker(select) {
-      opacity: 0;
-      scale: 0.9;
-    }
-
-    button {
-      background-color: transparent;
-      display: flex;
-      inline-size: 100%;
-      margin: 0;
-      position: relative;
-
-      selectedcontent {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-
-    .list {
-      /* Groups */
-      [role="group"] {
-        label {
-          background-color: light-dark(var(--gray-3), var(--gray-13));
-          color: light-dark(
-            oklch(from var(--text-color-1) calc(l * 0.75) c h),
-            oklch(from var(--text-color-1) 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(.field:has(> select)) {
-    /* Size */
-    &.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 `.field` class instead. Noting this down if an `:after` element would be needed on a `.field`.
-    */
-    &: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 {
+  :where(.select select) {
+    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);
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition: display 0.2s allow-discrete, opacity 0.2s var(--ease-3),
+          overlay 0.2s allow-discrete, scale 0.2s 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;
+      }
+    }
+
+    .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(.select:has(select)) {
+
+    /* Size */
+    &.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;
+  }
+}

package/{src/themes/theme-two → css}/components/spinner.css

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