From 563c929dc52ce99d4dcbdd27ad639b818224deb5 Mon Sep 17 00:00:00 2001
From: Scott Boyle <scott@monospaced.com>
Date: Thu, 22 Oct 2026 15:40:37 +0100
Subject: [PATCH] fix(core): 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. Safari 27 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 inline-size containment, keeping the width on the ratio transfer in every browser; the ratio tokens are slash forms so no explicit width can be derived. Avatar sets both axes from its size variable directly.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 .changeset/aspect-ratio-boxes-safari-27.md       | 11 +++++++++++
 packages/core/src/components/avatar/avatar.css   |  6 +++++-
 packages/core/src/components/logo/logo.css       |  8 ++++++++
 packages/core/src/components/spinner/spinner.css |  6 +++++-
 4 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/aspect-ratio-boxes-safari-27.md

diff --git a/.changeset/aspect-ratio-boxes-safari-27.md b/.changeset/aspect-ratio-boxes-safari-27.md
new file mode 100644
index 0000000..382f8a9
--- /dev/null
+++ b/.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.
diff --git a/packages/core/src/components/avatar/avatar.css b/packages/core/src/components/avatar/avatar.css
index a696fc2..f95d08f 100644
--- a/packages/core/src/components/avatar/avatar.css
+++ b/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);
diff --git a/packages/core/src/components/logo/logo.css b/packages/core/src/components/logo/logo.css
index 2a8ac92..037c7d3 100644
--- a/packages/core/src/components/logo/logo.css
+++ b/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;
diff --git a/packages/core/src/components/spinner/spinner.css b/packages/core/src/components/spinner/spinner.css
index 1895b1f..24c87f8 100644
--- a/packages/core/src/components/spinner/spinner.css
+++ b/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;