mac-human-design 0.1.11 → 0.1.12

package/changelog.md

@@ -2,6 +2,21 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.12
+
+### Fixed
+
+- Rendered `SymbolIconButton` glyphs as direct children of the shared
+  `MacIconButton` render element, avoiding tooltip slot child placement
+  ambiguity.
+- Tightened icon-button centering with explicit grid content centering,
+  zero line-height, vertical alignment, and grid-area placement for symbol
+  glyphs.
+
+### Changed
+
+- Bumped the package to `0.1.12`.
+
 ## 0.1.11
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
   "type": "module",
   "main": "src/index.ts",

package/src/components/SymbolIconButton.tsx

@@ -47,34 +47,34 @@ export function SymbolIconButton({
               minHeight: ICON_BUTTON_SIZE,
               borderRadius: ICON_BUTTON_RADIUS,
             }}
-          />
+          >
+            <span
+              aria-hidden
+              className="hd-mac-symbol-icon"
+              style={{
+                width: glyphPx,
+                height: glyphPx,
+                color: "currentColor",
+                backgroundColor: symbolDataUrl ? "currentColor" : "transparent",
+                fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
+                fontSize: symbolDataUrl ? "0" : glyphPx,
+                fontWeight: 500,
+                lineHeight: "1",
+                WebkitMaskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
+                WebkitMaskPosition: symbolDataUrl ? "center" : undefined,
+                WebkitMaskRepeat: symbolDataUrl ? "no-repeat" : undefined,
+                WebkitMaskSize: symbolDataUrl ? "contain" : undefined,
+                maskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
+                maskPosition: symbolDataUrl ? "center" : undefined,
+                maskRepeat: symbolDataUrl ? "no-repeat" : undefined,
+                maskSize: symbolDataUrl ? "contain" : undefined,
+              }}
+            >
+              {symbolDataUrl ? null : fallback}
+            </span>
+          </MacIconButton>
         }
-      >
-        <span
-          aria-hidden
-          className="hd-mac-symbol-icon"
-          style={{
-            width: glyphPx,
-            height: glyphPx,
-            color: "currentColor",
-            backgroundColor: symbolDataUrl ? "currentColor" : "transparent",
-            fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif",
-            fontSize: symbolDataUrl ? "0" : glyphPx,
-            fontWeight: 500,
-            lineHeight: "1",
-            WebkitMaskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
-            WebkitMaskPosition: symbolDataUrl ? "center" : undefined,
-            WebkitMaskRepeat: symbolDataUrl ? "no-repeat" : undefined,
-            WebkitMaskSize: symbolDataUrl ? "contain" : undefined,
-            maskImage: symbolDataUrl ? `url("${symbolDataUrl}")` : undefined,
-            maskPosition: symbolDataUrl ? "center" : undefined,
-            maskRepeat: symbolDataUrl ? "no-repeat" : undefined,
-            maskSize: symbolDataUrl ? "contain" : undefined,
-          }}
-        >
-          {symbolDataUrl ? null : fallback}
-        </span>
-      </MacTooltip.Trigger>
+      />
       <MacTooltip.Portal>
         <MacTooltip.Positioner sideOffset={5}>
           <MacTooltip.Popup>{label}</MacTooltip.Popup>

package/src/styles/macosBaseUi.css

@@ -232,7 +232,10 @@
 .hd-mac-symbol-icon-button {
   display: inline-grid;
   place-items: center;
+  place-content: center;
   padding: 0;
+  line-height: 0;
+  vertical-align: middle;
 }
 
 .hd-mac-icon-button {
@@ -251,11 +254,13 @@
 }
 
 .hd-mac-symbol-icon {
+  grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   flex-shrink: 0;
+  margin: auto;
 }
 
 .hd-mac-help-button {