opui-css 3.3.5 → 4.0.0

package/css/components/accordion.css

@@ -0,0 +1,174 @@
+@layer components.extended {
+  :where(details.accordion) {
+    --_actions-gap: var(--size-1);
+    --_actions-margin-block-start: var(--size-3);
+    --_actions-padding-block-end: var(--size-1);
+    --_actions-padding-inline: var(--size-3) var(--size-1);
+    --_bg-color: transparent;
+    --_border-color: transparent;
+    --_border-radius: var(--border-radius, 4px);
+    --_border-width: 0;
+    --_content-padding-block: var(--size-2) var(--size-3);
+    --_content-padding-inline: var(--_padding-inline);
+    --_margin-inline: var(--size-1);
+    --_padding-inline: initial;
+    --_shadow: none;
+    --_summary-padding-block: var(--size-3);
+    --_summary-padding-inline: var(--_padding-inline);
+    --_svg-transition: 0.2s var(--ease-1);
+    --_transition: 0.2s;
+
+    background-color: var(--_bg-color);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    box-shadow: var(--_shadow);
+    display: block;
+    margin-inline: var(--_margin-inline);
+    transition: all var(--_transition) ease-out;
+
+    &.elevated {
+      --_bg-color: var(--surface-elevated);
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+      --_shadow: var(--shadow-3);
+    }
+
+    &.outlined {
+      --_bg-color: var(--surface-default);
+      --_border-color: var(--border-color);
+      --_border-width: 1px;
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+    }
+
+    &.tonal {
+      --_bg-color: var(--surface-tonal);
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+    }
+
+    /* Accordion animation */
+    /* https://nerdy.dev/open-and-close-transitions-for-the-details-element */
+    @media (prefers-reduced-motion: no-preference) {
+      interpolate-size: allow-keywords;
+    }
+
+    &::details-content {
+      block-size: 0;
+      opacity: 0;
+      overflow-y: clip;
+      transition:
+        content-visibility var(--_transition) allow-discrete,
+        opacity var(--_transition),
+        block-size var(--_transition);
+    }
+
+    &[open]::details-content {
+      block-size: auto;
+      opacity: 1;
+    }
+
+    /* Layout */
+    &>summary {
+      background-color: inherit;
+      cursor: pointer;
+      font-weight: 700;
+      padding-block: var(--_summary-padding-block);
+      padding-inline: var(--_summary-padding-inline);
+      user-select: none;
+
+      &:has(svg) {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+        list-style: none;
+
+        &::marker,
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+
+      svg {
+        transition: rotate var(--_svg-transition);
+      }
+    }
+
+    &[open]>summary svg {
+      rotate: 180deg;
+    }
+
+    &>.content {
+      margin-block-start: 0;
+      padding-block: var(--_content-padding-block);
+      padding-inline: var(--_content-padding-inline);
+    }
+
+    &>.actions {
+      display: flex;
+      gap: var(--_actions-gap);
+      justify-content: end;
+      margin-block-start: var(--_actions-margin-block-start);
+      padding-block-end: var(--_actions-padding-block-end);
+      padding-inline: var(--_actions-padding-inline);
+    }
+  }
+
+  /* Accordion group  */
+  :where(.card[role="group"]:has(details.accordion)) {
+    --_group-radius: var(--border-radius);
+    --_gutter-color: var(--border-color);
+    --_item-padding-inline: var(--size-3);
+    --_item-summary-padding-inline: var(--_item-padding-inline);
+
+    display: block;
+
+    &.card {
+      &:not(.tonal, .outlined, .elevated) {
+        --_item-summary-padding-inline: 0;
+      }
+    }
+
+    &>.content {
+      margin-block: 0;
+      padding: 0;
+    }
+
+    &>details.accordion {
+      --_border-color: transparent;
+      --_border-width: 0;
+      --_margin-inline: 0;
+      --_padding-inline: var(--_item-padding-inline);
+      --_shadow: none;
+      --_summary-padding-inline: var(--_item-summary-padding-inline);
+
+      /* Border between accordion items */
+      &+& {
+        border-block-start: 1px solid var(--_gutter-color);
+        border-radius: 0;
+      }
+
+      /* First item */
+      &:first-of-type {
+        border-start-end-radius: var(--_group-radius);
+        border-start-start-radius: var(--_group-radius);
+
+        summary {
+          border-start-end-radius: var(--_group-radius);
+          border-start-start-radius: var(--_group-radius);
+        }
+      }
+
+      /* Last item */
+      &:last-of-type {
+        border-end-end-radius: var(--_group-radius);
+        border-end-start-radius: var(--_group-radius);
+
+        summary {
+          border-end-end-radius: var(--_group-radius);
+          border-end-start-radius: var(--_group-radius);
+        }
+      }
+    }
+  }
+}

package/css/components/anchor.css

@@ -0,0 +1,27 @@
+@layer components.root {
+	:where(.anchor) {
+		anchor-name: --anchor;
+		anchor-scope: --anchor;
+		display: inline-block;
+		inline-size: fit-content;
+
+		/* Always-visible */
+		&>.anchor-floating:not([popover]) {
+			block-size: max-content;
+			inline-size: max-content;
+			position: absolute;
+			position-anchor: --anchor;
+			position-area: var(--anchor-position-area, start end);
+			translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+		}
+
+		/* Hover-triggered */
+		&>.anchor-floating[popover] {
+			inset: unset;
+			margin: 0;
+			position: absolute;
+			position-area: var(--anchor-position-area, start end);
+			translate: var(--_anchor-tx, 0) var(--_anchor-ty, 0);
+		}
+	}
+}

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

@@ -1,68 +1,65 @@
-@layer components.root {
-  :where(.avatar) {
-    --_bg-color: var(--color-8);
-    --_color: var(--text-color-1);
-    --_width: 40px;
-
-    align-items: center;
-    background-color: var(--_bg-color);
-    color: var(--_color);
-    aspect-ratio: 1;
-    border-radius: 100vmax;
-    display: inline-flex;
-    inline-size: var(--_width);
-    justify-content: center;
-    overflow: clip;
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-
-    &:has(img) {
-      background-color: transparent;
-    }
-
-    svg {
-      max-inline-size: var(--size-5);
-    }
-
-    img {
-      block-size: 100%;
-      inline-size: 100%;
-      inset: 0;
-      object-fit: cover;
-      position: absolute;
-    }
-
-    &.squared {
-      border-radius: 0;
-    }
-
-    &.rounded {
-      border-radius: var(--border-size-3);
-    }
-  }
-
-  /*
-  TODO: implement reading-order if that becomes a thing.
-  https://developer.chrome.com/blog/reading-order/
-  */
-  :where(.avatar-group) {
-    --_margin: var(--size-1);
-
-    display: flex;
-    flex-direction: row-reverse;
-
-    &.gap-small {
-      --_margin: var(--size-2);
-    }
-
-    &.gap-x-small {
-      --_margin: var(--size-3);
-    }
-
-    .avatar {
-      margin-inline-end: calc(-1 * var(--_margin));
-      outline: 2px solid var(--surface-default);
-    }
-  }
-}
+@layer components.root {
+  :where(.avatar) {
+    --_bg-color: var(--primary);
+    --_color: var(--color-1);
+    --_width: 40px;
+
+    align-items: center;
+    aspect-ratio: 1;
+    background-color: var(--_bg-color);
+    border-radius: var(--radius-round);
+    color: var(--_color);
+    display: inline-flex;
+    inline-size: var(--_width);
+    justify-content: center;
+    overflow: clip;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+
+    &:has(img) {
+      background-color: transparent;
+    }
+
+    svg {
+      max-inline-size: var(--size-5);
+    }
+
+    img {
+      block-size: 100%;
+      inline-size: 100%;
+      inset: 0;
+      object-fit: cover;
+      position: absolute;
+    }
+
+    &.squared {
+      border-radius: 0;
+    }
+
+    &.rounded {
+      border-radius: var(--radius-2);
+    }
+
+    &.squircle {
+      border-radius: var(--radius-3);
+
+      @supports (corner-shape: squircle) {
+        border-radius: var(--radius-round);
+        corner-shape: squircle;
+      }
+    }
+  }
+
+  :where([role="group"]) {
+    --_margin: var(--size-3);
+    --_outline-color: var(--surface-default);
+
+    display: flex;
+
+    .avatar {
+      box-shadow: 0 0 0 2px var(--_outline-color);
+      margin-inline-end: calc(-1 * var(--_margin));
+    }
+  }
+}

package/css/components/badge.css

@@ -0,0 +1,107 @@
+@layer components.extended {
+  :where(.badge) {
+    --_anchor-tx: -50%;
+    --_anchor-ty: 50%;
+    --_badge-inset: auto auto 100% 100%;
+    --_bg-color: var(--primary);
+    --_border-color: var(--primary);
+    --_dot-size: var(--size-2);
+    --_size: var(--size-4);
+    --_text-color: var(--gray-1);
+
+    display: inline-flex;
+    position: relative;
+    vertical-align: middle;
+
+    /* Floating wrapper: traditional inset-based positioning so this works
+       in browsers without position-area support (Firefox, older Safari). */
+    &>.anchor-floating:not([popover]) {
+      inset: var(--_badge-inset);
+      position-anchor: auto;
+      position-area: none;
+    }
+
+    /* Indicator */
+    &>.anchor-floating>.badge-indicator {
+      background-color: var(--_bg-color);
+      block-size: var(--_size);
+      border: 2px solid var(--_border-color);
+      border-radius: var(--radius-round);
+      color: var(--_text-color);
+      display: grid;
+      font-size: 12px;
+      font-weight: 500;
+      inline-size: max-content;
+      line-height: normal;
+      min-inline-size: var(--_size);
+      padding-inline: var(--size-1);
+      place-items: center;
+      text-align: center;
+      transition: opacity 0.2s var(--ease-out-1);
+    }
+
+    /* Colors */
+    &.critical {
+      --_bg-color: var(--critical);
+      --_border-color: var(--critical);
+    }
+
+    &.success {
+      --_bg-color: var(--success);
+      --_border-color: var(--success);
+    }
+
+    &.info {
+      --_bg-color: var(--info);
+      --_border-color: var(--info);
+    }
+
+    &.warning {
+      --_bg-color: var(--warning);
+      --_border-color: var(--warning);
+    }
+
+    &.neutral {
+      --_bg-color: var(--neutral);
+      --_border-color: var(--neutral);
+    }
+
+    /* Alignment */
+    &.start-start {
+      --_anchor-tx: 50%;
+      --_anchor-ty: 50%;
+      --_badge-inset: auto 100% 100% auto;
+    }
+
+    &.end-start {
+      --_anchor-tx: 50%;
+      --_anchor-ty: -50%;
+      --_badge-inset: 100% 100% auto auto;
+    }
+
+    &.end-end {
+      --_anchor-tx: -50%;
+      --_anchor-ty: -50%;
+      --_badge-inset: 100% auto auto 100%;
+    }
+
+    /* Dot */
+    &.dot {
+      --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
+      --_anchor-ty: var(--_dot-size);
+    }
+
+    &.dot>.anchor-floating>.badge-indicator {
+      block-size: var(--_dot-size);
+      inline-size: var(--_dot-size);
+      min-inline-size: var(--_dot-size);
+      padding: 0;
+    }
+
+    /* Visibility */
+    &.invisible>.anchor-floating>.badge-indicator {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}

package/css/components/button-group.css

@@ -0,0 +1,179 @@
+@layer components.extended {
+  :where([role="group"].button-group) {
+    --_border-radius: var(--button-border-radius);
+
+    border-radius: var(--_border-radius);
+    display: inline-flex;
+    min-width: max-content;
+
+    /* Button */
+    button {
+      border-radius: 0;
+
+      /* button.css > --_accent-tonal */
+      --_divider-color: light-dark(oklch(from var(--_accent-tonal) calc(l - 0.1) c h),
+          oklch(from var(--_accent-tonal) calc(l + 0.1) c h));
+
+      &.outlined {
+        --_divider-color: var(--_border-color);
+      }
+
+      &.filled {
+        --_divider-color: currentColor;
+      }
+
+      &:focus-visible {
+        outline-offset: -4px;
+      }
+
+      /* Color inheritance from Button Group — shared interaction model.
+         The .critical scope class in theme.css redirects --palette-source so
+         --color-6 below becomes a tint of the active color. */
+      :where(.button-group.critical,
+        .button-group.primary) & {
+        --_color-contrast: var(--gray-1);
+        --_color-tonal: var(--color-6);
+        --_accent-tonal-contrast: var(--text-primary-contrast);
+        --_default-hover-bg-color: oklch(from var(--_accent) l c h / 15%);
+        --_default-active-bg-color: oklch(from var(--_accent) l c h / 25%);
+        --_filled-hover-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+        --_filled-active-bg-color: oklch(from var(--_accent) calc(l - 0.15) c h);
+        --_outlined-active-bg-color: oklch(from var(--_accent) calc(l - 0.1) c h);
+      }
+
+      :where(.button-group.critical) & {
+        --_color: var(--critical);
+      }
+
+      :where(.button-group.primary) & {
+        --_color: var(--primary);
+      }
+
+      :where(.button-group.small) & {
+        --_min-height: 1.875rem;
+        padding-block: 0;
+        padding-inline: 1ex;
+      }
+
+      :where(.button-group.large) & {
+        --_min-height: 2.875rem;
+        padding-inline: 4ex;
+      }
+
+      :where(.button-group.outlined) & {
+        --_border-color: var(--_accent);
+        --_divider-color: var(--_accent);
+
+        &:where(:not([disabled])) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_accent);
+            --_border-color: var(--_accent);
+            --_text-color: var(--_accent-contrast);
+          }
+
+          &:where(:active) {
+            --_bg-color: var(--_outlined-active-bg-color);
+            --_border-color: var(--_outlined-active-bg-color);
+            --_text-color: var(--_accent-contrast);
+          }
+        }
+      }
+
+      :where(.button-group.tonal) & {
+        --_bg-color: var(--_accent-tonal);
+        --_text-color: var(--_accent-tonal-contrast);
+
+        &:where(:not([disabled])) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_accent);
+            --_text-color: var(--_accent-contrast);
+          }
+
+          &:where(:active) {
+            --_bg-color: var(--_outlined-active-bg-color);
+            --_text-color: var(--_accent-contrast);
+          }
+        }
+      }
+
+      :where(.button-group.filled) & {
+        --_bg-color: var(--_accent);
+        --_text-color: var(--_accent-contrast);
+        --_divider-color: currentColor;
+
+        :where(.button-group.critical,
+          .button-group.primary) & {
+          --_divider-color: light-dark(oklch(from var(--_accent) calc(l - 0.1) c h),
+              oklch(from var(--_accent) calc(l + 0.1) c h));
+        }
+
+        &:where(:not([disabled])) {
+          &:where(:not(:active):hover) {
+            --_bg-color: var(--_filled-hover-bg-color);
+          }
+
+          &:where(:active) {
+            --_bg-color: var(--_filled-active-bg-color);
+          }
+        }
+      }
+    }
+
+    &:not(.vertical) {
+      button {
+        &:first-of-type {
+          border-end-start-radius: var(--_border-radius);
+          border-start-start-radius: var(--_border-radius);
+        }
+
+        &:last-of-type {
+          border-end-end-radius: var(--_border-radius);
+          border-start-end-radius: var(--_border-radius);
+        }
+
+        /* Siblings */
+        &+& {
+          border-inline-start-color: var(--_divider-color);
+          border-inline-width: 1px;
+          margin-inline-start: -1px;
+
+          &[disabled] {
+            border-inline-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
+          }
+        }
+      }
+    }
+
+    &.vertical {
+      flex-direction: column;
+
+      button {
+        padding: var(--size-2);
+
+        &:has(svg) {
+          aspect-ratio: 1;
+          padding: var(--size-1);
+        }
+
+        &:first-of-type {
+          border-start-start-radius: var(--_border-radius);
+          border-start-end-radius: var(--_border-radius);
+        }
+
+        &:last-of-type {
+          border-end-start-radius: var(--_border-radius);
+          border-end-end-radius: var(--_border-radius);
+        }
+
+        &+& {
+          border-block-start: 1px solid var(--_divider-color);
+          margin-block-start: -1px;
+
+          &[disabled] {
+            border-block-start-color: color-mix(in oklch, var(--_divider-color) 40%, transparent);
+          }
+        }
+      }
+    }
+  }
+}