opui-css 5.0.0 → 5.1.0

package/css/components/anchor.css

@@ -1,27 +1,27 @@
-@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);
-		}
-	}
-}
+@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(.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));
-    }
-  }
-}
+@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));
+    }
+  }
+}

package/css/components/badge.css

@@ -1,107 +1,107 @@
-@layer components.extended {
-  :where(.ui-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). */
-    &>.ui-anchor-floating:not([popover]) {
-      inset: var(--_badge-inset);
-      position-anchor: auto;
-      position-area: none;
-    }
-
-    /* Indicator */
-    &>.ui-anchor-floating>.ui-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 */
-    &.ui-critical {
-      --_bg-color: var(--critical);
-      --_border-color: var(--critical);
-    }
-
-    &.ui-success {
-      --_bg-color: var(--success);
-      --_border-color: var(--success);
-    }
-
-    &.ui-info {
-      --_bg-color: var(--info);
-      --_border-color: var(--info);
-    }
-
-    &.ui-warning {
-      --_bg-color: var(--warning);
-      --_border-color: var(--warning);
-    }
-
-    &.ui-neutral {
-      --_bg-color: var(--neutral);
-      --_border-color: var(--neutral);
-    }
-
-    /* Alignment */
-    &.ui-start-start {
-      --_anchor-tx: 50%;
-      --_anchor-ty: 50%;
-      --_badge-inset: auto 100% 100% auto;
-    }
-
-    &.ui-end-start {
-      --_anchor-tx: 50%;
-      --_anchor-ty: -50%;
-      --_badge-inset: 100% 100% auto auto;
-    }
-
-    &.ui-end-end {
-      --_anchor-tx: -50%;
-      --_anchor-ty: -50%;
-      --_badge-inset: 100% auto auto 100%;
-    }
-
-    /* Dot */
-    &.ui-dot {
-      --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
-      --_anchor-ty: var(--_dot-size);
-    }
-
-    &.ui-dot>.ui-anchor-floating>.ui-badge-indicator {
-      block-size: var(--_dot-size);
-      inline-size: var(--_dot-size);
-      min-inline-size: var(--_dot-size);
-      padding: 0;
-    }
-
-    /* Visibility */
-    &.ui-invisible>.ui-anchor-floating>.ui-badge-indicator {
-      opacity: 0;
-      pointer-events: none;
-    }
-  }
-}
+@layer components.extended {
+  :where(.ui-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). */
+    & > .ui-anchor-floating:not([popover]) {
+      inset: var(--_badge-inset);
+      position-anchor: auto;
+      position-area: none;
+    }
+
+    /* Indicator */
+    & > .ui-anchor-floating > .ui-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 */
+    &.ui-critical {
+      --_bg-color: var(--critical);
+      --_border-color: var(--critical);
+    }
+
+    &.ui-success {
+      --_bg-color: var(--success);
+      --_border-color: var(--success);
+    }
+
+    &.ui-info {
+      --_bg-color: var(--info);
+      --_border-color: var(--info);
+    }
+
+    &.ui-warning {
+      --_bg-color: var(--warning);
+      --_border-color: var(--warning);
+    }
+
+    &.ui-neutral {
+      --_bg-color: var(--neutral);
+      --_border-color: var(--neutral);
+    }
+
+    /* Alignment */
+    &.ui-start-start {
+      --_anchor-tx: 50%;
+      --_anchor-ty: 50%;
+      --_badge-inset: auto 100% 100% auto;
+    }
+
+    &.ui-end-start {
+      --_anchor-tx: 50%;
+      --_anchor-ty: -50%;
+      --_badge-inset: 100% 100% auto auto;
+    }
+
+    &.ui-end-end {
+      --_anchor-tx: -50%;
+      --_anchor-ty: -50%;
+      --_badge-inset: 100% auto auto 100%;
+    }
+
+    /* Dot */
+    &.ui-dot {
+      --_anchor-tx: calc((var(--_dot-size) - 2px) * -1);
+      --_anchor-ty: var(--_dot-size);
+    }
+
+    &.ui-dot > .ui-anchor-floating > .ui-badge-indicator {
+      block-size: var(--_dot-size);
+      inline-size: var(--_dot-size);
+      min-inline-size: var(--_dot-size);
+      padding: 0;
+    }
+
+    /* Visibility */
+    &.ui-invisible > .ui-anchor-floating > .ui-badge-indicator {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+}