opui-css 1.2.4

package/src/components/select.css

@@ -0,0 +1,166 @@
+@layer components.has-deps {
+  :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

@@ -0,0 +1,152 @@
+@layer components.has-deps {
+  :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;
+      }
+    }
+  }
+}

package/src/components/spinner.css

@@ -0,0 +1,38 @@
+@layer components.base {
+  [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);
+    }
+  }
+}

package/src/components/switch.css

@@ -0,0 +1,189 @@
+@layer components.base {
+  :where(.switch) {
+    --_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: 0.2s;
+
+    align-items: center;
+    color: var(--text-color-1);
+    display: inline-grid;
+    gap: 0 var(--size-2);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    inline-size: fit-content;
+
+    input[type="checkbox"][role="switch"] {
+      appearance: none;
+      block-size: var(--_track-height);
+      cursor: pointer;
+      inline-size: var(--_track-width);
+      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: 100vmax;
+        content: "";
+        inline-size: var(--_track-width);
+        inset: 0;
+        position: absolute;
+      }
+
+      &:focus-visible {
+        outline-offset: 2px;
+        outline: 2px solid currentColor;
+      }
+
+      /* Dot */
+      &::after {
+        background-color: var(--_dot-bg-color);
+        block-size: var(--_dot-size);
+        border-radius: 100vmax;
+        content: "";
+        inline-size: var(--_dot-size);
+        inset: var(--_dot-inset);
+        outline-offset: -1px;
+        outline: var(--_dot-outline-size) solid var(--_dot-bg-color);
+        position: absolute;
+      }
+
+      /* 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);
+        }
+
+        /* Dot */
+        &::after {
+          --_dot-bg-color: var(--_accent-contrast);
+          --_dot-outline-size: calc(var(--size-1) - 1px);
+
+          inset-inline-start: calc(
+            var(--_track-width) - var(--_dot-size) - var(--size-1)
+          );
+        }
+      }
+
+      /* Animation */
+      @media (prefers-reduced-motion: no-preference) {
+        /* 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);
+          }
+        }
+      }
+    }
+
+    /* Required dot */
+    &:has([required]:not(:checked)) {
+      .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 */
+    .label {
+      grid-column: 2;
+      grid-row: 1;
+      min-width: 0;
+      padding-inline: 0 1ex;
+      position: relative;
+      user-select: none;
+    }
+
+    /* Supporting text */
+    .supporting-text {
+      color: var(--text-color-2);
+      font-size: var(--font-size-xs);
+      grid-column: 2;
+      grid-row: 2;
+      line-height: 1.5;
+      z-index: 1;
+    }
+
+    /* Size */
+    &.small {
+      --_dot-size: 0.75rem;
+      --_track-height: var(--size-4);
+      --_track-width: 2.5rem;
+    }
+
+    /* Stacked layout */
+    &.stack {
+      justify-items: center;
+      grid-auto-columns: unset;
+
+      .label {
+        grid-column: 1/-1;
+        grid-row: 2;
+        margin-block-start: var(--size-1);
+        padding-inline: 1ex;
+      }
+
+      .supporting-text {
+        grid-column: 1/-1;
+        grid-row: 3;
+      }
+    }
+
+    /* Validation */
+    &.error {
+      input {
+        outline: 2px solid var(--color-9);
+        border-radius: var(--radius-round);
+      }
+
+      .label,
+      .supporting-text {
+        color: var(--color-9);
+      }
+    }
+  }
+}

package/src/components/tab-buttons.css

@@ -0,0 +1,124 @@
+@layer components.base {
+  :where(nav.tabs) {
+    --_bg-color: transparent;
+
+    & > [role="tablist"] {
+      button {
+        outline-color: transparent;
+        outline-offset: -4px;
+
+        &[aria-selected="true"] {
+          &:focus-visible {
+            outline: 2px solid var(--text-color-1);
+          }
+        }
+      }
+    }
+
+    /* Underlined */
+    &.underlined {
+      /* Tab list */
+      & > [role="tablist"] {
+        border-bottom: 1px solid var(--border-color);
+
+        button {
+          --_ripple-color: light-dark(
+            color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
+            color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
+          );
+
+          background: var(--_bg-color) var(--ripple, none);
+          font-weight: 500;
+          line-height: var(--font-lineheight-4);
+          padding: var(--size-2) var(--size-3);
+
+          &:focus-visible {
+            border-radius: 0;
+          }
+
+          &[aria-selected="true"] {
+            border-block-end: 2px solid var(--primary);
+            color: var(--primary);
+          }
+
+          @media (prefers-reduced-motion: no-preference) {
+            transition:
+              background-color 0.2s var(--ease-out-3),
+              border-color 0.2s var(--ease-out-3),
+              color 0.2s var(--ease-out-3),
+              outline-offset 0.05s var(--ease-1);
+
+            /*** Ripple effect */
+            background-position: center;
+            transition: background var(--button-ripple-duration);
+            &:where(:not(:active):hover) {
+              --ripple: radial-gradient(
+                  circle,
+                  transparent 1%,
+                  var(--_ripple-color) 1%
+                )
+                center/15000%;
+            }
+
+            &:where(:hover:active) {
+              background-size: var(--button-ripple-size);
+              transition: background 0s;
+            }
+
+            &:hover {
+              background-color: light-dark(
+                oklch(from var(--primary) calc(l * 0.75) none h / 5%),
+                oklch(from var(--primary) calc(l * 1.25) none h / 5%)
+              );
+            }
+          }
+        }
+      }
+    }
+
+    /* Filled */
+    &.filled {
+      --_bg-color: var(--surface-default);
+      --_radius: var(--border-radius);
+      --_selected-bg: var(--surface-filled);
+
+      & > [role="tablist"] {
+        background-color: var(--_bg-color);
+        border: var(--border-width) solid var(--border-color);
+        border-radius: var(--_radius);
+        overflow: hidden;
+        padding: 0.792ex;
+        width: fit-content;
+
+        button {
+          background-color: var(--_bg-color);
+          border-radius: var(--_radius);
+          line-height: var(--font-lineheight-4);
+          padding-inline: var(--size-3);
+
+          &:hover {
+            background-color: oklch(from var(--_bg-color) calc(l * 1.25) c h);
+          }
+
+          &[aria-selected="true"] {
+            background-color: var(--_selected-bg);
+
+            &:hover {
+              background-color: oklch(
+                from var(--_selected-bg) calc(l * 1.25) c h
+              );
+            }
+          }
+
+          @media (prefers-reduced-motion: no-preference) {
+            transition:
+              background-color 0.2s var(--ease-out-3),
+              border-color 0.2s var(--ease-out-3),
+              color 0.2s var(--ease-out-3),
+              outline-offset 0.05s var(--ease-1);
+          }
+        }
+      }
+    }
+  }
+}