fix(core): logo, spinner and avatar sizing in Safari 27

.changeset/aspect-ratio-boxes-safari-27.md

@@ -0,0 +1,11 @@
+---
+"@monospaced/set-core": patch
+---
+
+Fix Logo, Spinner and Avatar sizing in Safari 27. Each derived its inline
+size from `aspect-ratio` while holding content sized by percentage or an
+SVG with a viewBox only, and Safari 27 now feeds that content back into the
+box's intrinsic size, so the animated logo claimed its SVG's 300px fallback
+width in flex layouts. Logo and Spinner gain `contain: inline-size`, keeping
+the width on the ratio transfer in every browser; Avatar sets both axes
+from `--set-avatar-size` directly.

packages/core/src/components/avatar/avatar.css

@@ -4,13 +4,17 @@
     --set-avatar-color-background: var(--set-color-avatar-default);
 
     align-items: center;
-    aspect-ratio: 1 / 1;
     background-color: var(--set-avatar-color-background);
     block-size: var(--set-avatar-size);
     border-radius: calc(var(--set-avatar-size) * var(--set-radius-ratio-lg));
     color: var(--set-color-foreground-contrast);
     display: inline-flex;
     flex: none;
+
+    /* Both axes are explicit rather than aspect-ratio derived: the image
+       inside is sized by percentage, which Safari 27 would otherwise feed
+       back into the box's intrinsic size. See the icon wrapper below. */
+    inline-size: var(--set-avatar-size);
     justify-content: center;
     outline: var(--set-layout-border-width-default) solid
       var(--set-color-border-subtle);

packages/core/src/components/logo/logo.css

@@ -8,6 +8,14 @@
     aspect-ratio: var(--set-logo-aspect-ratio);
     background-color: var(--set-logo-tone);
     block-size: var(--set-logo-block-size);
+
+    /* The inline size comes from the aspect-ratio transfer alone. Without
+       containment the animated SVG, sized 100% in both axes with no width or
+       height attributes, feeds its 300px fallback width into the box's
+       intrinsic size in Safari 27, which sizes aspect-ratio boxes from their
+       content. The ratio token is a slash form, so an explicit inline size
+       cannot be derived with calc(). */
+    contain: inline-size;
     mask-image: var(--set-logo-mask);
     mask-position: center;
     mask-repeat: no-repeat;

packages/core/src/components/spinner/spinner.css

@@ -32,7 +32,11 @@
 
     aspect-ratio: 1 / 2;
     block-size: var(--set-spinner-size);
-    contain: layout paint;
+
+    /* inline-size containment keeps the width on the aspect-ratio transfer:
+       the SVG inside has a viewBox only, so without it Safari 27 would size
+       the box from the SVG's fallback width. See the logo for the same fix. */
+    contain: inline-size layout paint;
     display: inline-block;
     flex: none;
     vertical-align: middle;