opui-css 4.1.0 → 5.0.1

package/core/utils.css

@@ -1,71 +1,71 @@
-@layer utils {
-
-  /*
-Screen-reader only
-When you visibly want to hide an element but make it accessible for screen readers.
-*/
-  .sr-only {
-    block-size: 1px;
-    clip-path: inset(50%);
-    inline-size: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-  }
-
-  /*
-Scroll-lock
-Add `.scroll-lock` to any element that uses the [open] attribute (native <dialog>,
-<details>, or any custom element). When that element is open, the page is locked.
-*/
-  html:has(.scroll-lock[open]) {
-    overflow: clip;
-    overscroll-behavior: contain;
-    scrollbar-gutter: stable;
-  }
-
-  /* Hover and active effect for checkbox, radio and icon buttons */
-  :where(.checkbox input, .radio input, .icon-button) {
-    --isLTR: 1;
-    --isRTL: -1;
-
-    position: relative;
-    transform-style: preserve-3d;
-
-    &:dir(rtl) {
-      --isLTR: -1;
-      --isRTL: 1;
-    }
-
-    &:where(:not([disabled])) {
-      &:hover:before {
-        --thumb-scale: 1;
-      }
-
-      &:active:before {
-        --thumb-scale: 1.1;
-      }
-
-      &::before {
-        --thumb-scale: 0.01;
-        --highlight-size: 150%;
-
-        background-color: oklch(0.6 0 0 / 0.2);
-        block-size: var(--highlight-size);
-        clip-path: circle(50%);
-        content: "";
-        inline-size: var(--highlight-size);
-        inset-block-start: 50%;
-        inset-inline-start: 50%;
-        position: absolute;
-        transform-origin: center center;
-        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));
-        will-change: transform;
-
-        @media (prefers-reduced-motion: no-preference) {
-          transition: transform 0.2s ease;
-        }
-      }
-    }
-  }
-}
+@layer utils {
+
+  /*
+Screen-reader only
+When you visibly want to hide an element but make it accessible for screen readers.
+*/
+  .ui-sr-only {
+    block-size: 1px;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  /*
+Scroll-lock
+Add `.ui-scroll-lock` to any element that uses the [open] attribute (native <dialog>,
+<details>, or any custom element). When that element is open, the page is locked.
+*/
+  html:has(.ui-scroll-lock[open]) {
+    overflow: clip;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+  }
+
+  /* Hover and active effect for checkbox, radio and icon buttons */
+  :where(.ui-checkbox input, .ui-radio input, .ui-icon-button) {
+    --isLTR: 1;
+    --isRTL: -1;
+
+    position: relative;
+    transform-style: preserve-3d;
+
+    &:dir(rtl) {
+      --isLTR: -1;
+      --isRTL: 1;
+    }
+
+    &:where(:not([disabled])) {
+      &:hover:before {
+        --thumb-scale: 1;
+      }
+
+      &:active:before {
+        --thumb-scale: 1.1;
+      }
+
+      &::before {
+        --thumb-scale: 0.01;
+        --highlight-size: 150%;
+
+        background-color: oklch(0.6 0 0 / 0.2);
+        block-size: var(--highlight-size);
+        clip-path: circle(50%);
+        content: "";
+        inline-size: var(--highlight-size);
+        inset-block-start: 50%;
+        inset-inline-start: 50%;
+        position: absolute;
+        transform-origin: center center;
+        transform: translateX(calc(var(--isRTL) * 50%)) translateY(-50%) translateZ(-1px) scale(var(--thumb-scale));
+        will-change: transform;
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: transform 0.2s ease;
+        }
+      }
+    }
+  }
+}

package/css/components/accordion.css

@@ -1,174 +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);
-        }
-      }
-    }
-  }
-}
+@layer components.extended {
+  :where(details.ui-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;
+
+    &.ui-elevated {
+      --_bg-color: var(--surface-elevated);
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+      --_shadow: var(--shadow-3);
+    }
+
+    &.ui-outlined {
+      --_bg-color: var(--surface-default);
+      --_border-color: var(--border-color);
+      --_border-width: 1px;
+      --_margin-inline: 0;
+      --_padding-inline: var(--size-3);
+    }
+
+    &.ui-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;
+    }
+
+    &>.ui-content {
+      margin-block-start: 0;
+      padding-block: var(--_content-padding-block);
+      padding-inline: var(--_content-padding-inline);
+    }
+
+    &>.ui-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(.ui-card[role="group"]:has(details.ui-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;
+
+    &.ui-card {
+      &:not(.ui-tonal, .ui-outlined, .ui-elevated) {
+        --_item-summary-padding-inline: 0;
+      }
+    }
+
+    &>.ui-content {
+      margin-block: 0;
+      padding: 0;
+    }
+
+    &>details.ui-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

@@ -1,27 +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);
-		}
-	}
-}
+@layer components.root {
+	:where(.ui-anchor) {
+		anchor-name: --anchor;
+		anchor-scope: --anchor;
+		display: inline-block;
+		inline-size: fit-content;
+
+		/* Always-visible */
+		&>.ui-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 */
+		&>.ui-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/css/components/avatar.css

@@ -1,65 +1,65 @@
-@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));
-    }
-  }
-}
+@layer components.root {
+  :where(.ui-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;
+    }
+
+    &.ui-squared {
+      border-radius: 0;
+    }
+
+    &.ui-rounded {
+      border-radius: var(--radius-2);
+    }
+
+    &.ui-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;
+
+    .ui-avatar {
+      box-shadow: 0 0 0 2px var(--_outline-color);
+      margin-inline-end: calc(-1 * var(--_margin));
+    }
+  }
+}