@godxjp/ui 33.22.2 → 33.25.0

package/dist/styles/data-display-layout.css

@@ -159,6 +159,16 @@
     border-radius: inherit;
   }
 
+  .ui-avatar[data-kind="agent"] {
+    overflow: visible;
+  }
+
+  .ui-avatar[data-kind="agent"] > .ui-avatar-image,
+  .ui-avatar[data-kind="agent"] > .ui-avatar-fallback {
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
   [data-slot="avatar-presence"] {
     position: absolute;
     inset-block-end: var(--avatar-presence-inset);
@@ -234,6 +244,40 @@
     }
   }
 
+  [data-slot="avatar-agent"] {
+    position: absolute;
+    inset-block-start: var(--avatar-agent-inset, calc(var(--space-1) * -1));
+    inset-inline-end: var(--avatar-agent-inset, calc(var(--space-1) * -1));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--avatar-agent-padding-inline, var(--space-1));
+    border-radius: var(--radius-pill);
+    font-size: var(
+      --avatar-agent-font-size,
+      var(
+        --font-size-2xs,
+        calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
+      )
+    );
+    font-weight: var(--avatar-agent-font-weight, var(--font-weight-bold));
+    line-height: var(--line-height-tight);
+    white-space: nowrap;
+    color: hsl(var(--avatar-agent-foreground, var(--agent-foreground)));
+    background-color: hsl(var(--avatar-agent-background, var(--agent)));
+    box-shadow: 0 0 0 var(--avatar-agent-ring-width, var(--stroke-md))
+      hsl(var(--avatar-agent-ring-color, var(--background)));
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="avatar-agent"] {
+      color: Canvas;
+      background-color: CanvasText;
+      outline: var(--avatar-agent-ring-width, var(--stroke-md)) solid Canvas;
+    }
+  }
+
   .ui-progress {
     display: flex;
     flex-direction: column;
@@ -3724,6 +3768,13 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-image-placeholder > * {
+    min-block-size: 0;
+    min-inline-size: 0;
+    max-block-size: 100%;
+    max-inline-size: 100%;
+  }
+
   .ui-image-mask {
     position: absolute;
     inset: 0;

package/dist/styles/dialog-layout.css

@@ -341,6 +341,9 @@
   }
 
   .ui-popover-content {
+
+    overflow: auto;
+    scroll-padding: calc(var(--focus-ring-width) + var(--focus-outline-offset));
     z-index: var(--overlay-z-index);
 
     width: var(--popover-surface-inline-size, var(--popover-width));
@@ -484,3 +487,9 @@
     min-block-size: 0;
   }
 }
+
+@layer components {
+  .ui-popover-content[data-flush] :focus-visible {
+    --focus-ring-contained-offset: var(--focus-ring-inset-offset);
+  }
+}