opui-css 2.0.0 → 2.1.0

package/src/components/select.css

@@ -1,163 +1,163 @@
-@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-block: var(--size-1);
-        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: 1;
-        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(.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-block: var(--size-1);
+        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: 1;
+        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/components/snackbar.css

@@ -1,148 +1,148 @@
-@layer components.extended {
-  :where(.snackbar) {
-    align-items: center;
-    /* Inverse surface-filled */
-    background-color: light-dark(var(--gray-15), var(--gray-2));
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow-2);
-    color: var(--text-color-1-contrast);
-    display: flex;
-    font-size: var(--font-size-sm);
-    gap: var(--size-3);
-    inset-block: auto var(--size-3);
-    inset-inline: var(--size-3) auto;
-    justify-content: space-between;
-    min-inline-size: min(100%, 37ch);
-    padding: var(--size-2) var(--size-3);
-    position: fixed;
-    inline-size: calc(100% - var(--size-6, 1.75rem));
-    z-index: 100;
-
-    &::backdrop {
-      display: none;
-    }
-
-    * {
-      word-break: break-word;
-    }
-
-    /* Global positioning (in relation to the window) */
-    /*** Default (end-start) */
-    inset-block: auto var(--size-3);
-    inset-inline: 50% 0;
-    translate: -50% 0;
-
-    &.start-start,
-    &.start-center,
-    &.start-end {
-      inset-block: var(--size-3) auto;
-    }
-
-    /* TODO use @custom-media instead? */
-    @container (width > 480px) {
-      /* Default (end-start) */
-      inset-block: auto var(--size-7, 2rem);
-      inset-inline: var(--size-7, 2rem) auto;
-      translate: revert;
-      inline-size: fit-content;
-
-      &.end-start,
-      &.end-end,
-      &.start-start,
-      &.start-end {
-        translate: revert;
-      }
-
-      &.start-start {
-        inset-block: var(--size-7, 2rem) auto;
-        inset-inline: var(--size-7, 2rem) auto;
-      }
-      &.start-center {
-        inset-block: var(--size-7, 2rem) auto;
-        inset-inline: 50% 0;
-        translate: -50% 0;
-      }
-      &.start-end {
-        inset-block: var(--size-7, 2rem) auto;
-        inset-inline: auto var(--size-7, 2rem);
-      }
-      &.end-start {
-        inset-block-end: var(--size-7, 2rem);
-        inset-inline: var(--size-7, 2rem) auto;
-      }
-      &.end-center {
-        inset-block: auto var(--size-7, 2rem);
-        inset-inline: 50% 0;
-        translate: -50% 0;
-      }
-      &.end-end {
-        inset-block: auto var(--size-7, 2rem);
-        inset-inline: auto var(--size-7, 2rem);
-      }
-    }
-
-    /* Absolute positioning */
-    &.absolute {
-      position: absolute;
-    }
-
-    /* Actions */
-    .actions {
-      align-items: center;
-      display: flex;
-      flex-shrink: 0;
-      gap: var(--size-3);
-      padding-inline: 0;
-
-      button {
-        /* Inverse hover and active backgrounds */
-        &:where(:not([disabled])) {
-          &:where(:not(:active):hover) {
-            --_bg-color: light-dark(
-              color-mix(in oklch, white 40%, black),
-              color-mix(in oklch, white 85%, black)
-            );
-          }
-
-          &:where(:hover:active) {
-            --_bg-color: light-dark(
-              color-mix(in oklch, white 45%, black),
-              color-mix(in oklch, white 80%, black)
-            );
-          }
-        }
-      }
-
-      button:not(:has(svg)) {
-        border-radius: var(--border-radius);
-        font-size: inherit;
-        max-block-size: var(--size-6, 1.5rem);
-        padding: 1ex;
-      }
-
-      button:has(svg) {
-        color: inherit;
-        max-inline-size: var(--size-6, 1.75rem);
-        margin: var(--size-00);
-        padding: var(--size-1);
-      }
-    }
-
-    /* Animations */
-    opacity: 0;
-    transition: display 0.075s allow-discrete, overlay 0.075s allow-discrete,
-      opacity 0.075s var(--ease-out-1);
-
-    &:popover-open,
-    &:popover-open::backdrop,
-    &.visible {
-      opacity: 1;
-      transition: display 0.25s allow-discrete, overlay 0.25s allow-discrete,
-        opacity 0.25s var(--ease-out-1);
-
-      @starting-style {
-        opacity: 0;
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(.snackbar) {
+    align-items: center;
+    /* Inverse surface-filled */
+    background-color: light-dark(var(--gray-15), var(--gray-2));
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-2);
+    color: var(--text-color-1-contrast);
+    display: flex;
+    font-size: var(--font-size-sm);
+    gap: var(--size-3);
+    inset-block: auto var(--size-3);
+    inset-inline: var(--size-3) auto;
+    justify-content: space-between;
+    min-inline-size: min(100%, 37ch);
+    padding: var(--size-2) var(--size-3);
+    position: fixed;
+    inline-size: calc(100% - var(--size-6, 1.75rem));
+    z-index: 100;
+
+    &::backdrop {
+      display: none;
+    }
+
+    * {
+      word-break: break-word;
+    }
+
+    /* Global positioning (in relation to the window) */
+    /*** Default (end-start) */
+    inset-block: auto var(--size-3);
+    inset-inline: 50% 0;
+    translate: -50% 0;
+
+    &.start-start,
+    &.start-center,
+    &.start-end {
+      inset-block: var(--size-3) auto;
+    }
+
+    /* TODO use @custom-media instead? */
+    @container (width > 480px) {
+      /* Default (end-start) */
+      inset-block: auto var(--size-7, 2rem);
+      inset-inline: var(--size-7, 2rem) auto;
+      translate: revert;
+      inline-size: fit-content;
+
+      &.end-start,
+      &.end-end,
+      &.start-start,
+      &.start-end {
+        translate: revert;
+      }
+
+      &.start-start {
+        inset-block: var(--size-7, 2rem) auto;
+        inset-inline: var(--size-7, 2rem) auto;
+      }
+      &.start-center {
+        inset-block: var(--size-7, 2rem) auto;
+        inset-inline: 50% 0;
+        translate: -50% 0;
+      }
+      &.start-end {
+        inset-block: var(--size-7, 2rem) auto;
+        inset-inline: auto var(--size-7, 2rem);
+      }
+      &.end-start {
+        inset-block-end: var(--size-7, 2rem);
+        inset-inline: var(--size-7, 2rem) auto;
+      }
+      &.end-center {
+        inset-block: auto var(--size-7, 2rem);
+        inset-inline: 50% 0;
+        translate: -50% 0;
+      }
+      &.end-end {
+        inset-block: auto var(--size-7, 2rem);
+        inset-inline: auto var(--size-7, 2rem);
+      }
+    }
+
+    /* Absolute positioning */
+    &.absolute {
+      position: absolute;
+    }
+
+    /* Actions */
+    .actions {
+      align-items: center;
+      display: flex;
+      flex-shrink: 0;
+      gap: var(--size-3);
+      padding-inline: 0;
+
+      button {
+        /* Inverse hover and active backgrounds */
+        &:where(:not([disabled])) {
+          &:where(:not(:active):hover) {
+            --_bg-color: light-dark(
+              color-mix(in oklch, white 40%, black),
+              color-mix(in oklch, white 85%, black)
+            );
+          }
+
+          &:where(:hover:active) {
+            --_bg-color: light-dark(
+              color-mix(in oklch, white 45%, black),
+              color-mix(in oklch, white 80%, black)
+            );
+          }
+        }
+      }
+
+      button:not(:has(svg)) {
+        border-radius: var(--border-radius);
+        font-size: inherit;
+        max-block-size: var(--size-6, 1.5rem);
+        padding: 1ex;
+      }
+
+      button:has(svg) {
+        color: inherit;
+        max-inline-size: var(--size-6, 1.75rem);
+        margin: var(--size-00);
+        padding: var(--size-1);
+      }
+    }
+
+    /* Animations */
+    opacity: 0;
+    transition: display 0.075s allow-discrete, overlay 0.075s allow-discrete,
+      opacity 0.075s var(--ease-out-1);
+
+    &:popover-open,
+    &:popover-open::backdrop,
+    &.visible {
+      opacity: 1;
+      transition: display 0.25s allow-discrete, overlay 0.25s allow-discrete,
+        opacity 0.25s var(--ease-out-1);
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+  }
+}