mac-human-design 0.1.11 → 0.1.13

package/changelog.md

@@ -2,6 +2,31 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.13
+
+### Changed
+
+- Refined shared control Motion defaults so buttons and icon buttons scale from
+  center without vertical hover or press translation.
+- Added explicit center transform origins to macOS icon buttons and symbol
+  glyphs to keep animated icon-only controls visually anchored.
+- Bumped the package to `0.1.13`.
+
+## 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.13",
   "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
   "type": "module",
   "main": "src/index.ts",

package/src/components/MacBaseUI.tsx

@@ -111,14 +111,22 @@ function isDisabled(props: Record<string, unknown>) {
   return Boolean(props.disabled || props["data-disabled"] || props["aria-disabled"]);
 }
 
-function interactiveControlDefaults(props: Record<string, unknown>): MotionDefaults {
+function interactiveControlDefaults(macClassName: string, props: Record<string, unknown>): MotionDefaults {
   if (isDisabled(props)) {
     return {};
   }
 
+  if (includesAny(macClassName, ["hd-mac-icon-button", "hd-mac-help-button"])) {
+    return {
+      whileHover: { scale: 1.04 },
+      whileTap: { scale: 0.94 },
+      transition: macFastTransition,
+    };
+  }
+
   return {
-    whileHover: { y: -0.5, scale: 1.012 },
-    whileTap: { y: 1, scale: 0.985 },
+    whileHover: { scale: 1.006 },
+    whileTap: { scale: 0.982 },
     transition: macFastTransition,
   };
 }
@@ -147,7 +155,7 @@ function getMotionDefaults(macClassName: string, props: Record<string, unknown>)
       "hd-mac-disclosure-trigger",
     ])
   ) {
-    return interactiveControlDefaults(props);
+    return interactiveControlDefaults(macClassName, props);
   }
 
   if (macClassName.includes("hd-mac-input")) {

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,11 @@
 .hd-mac-symbol-icon-button {
   display: inline-grid;
   place-items: center;
+  place-content: center;
   padding: 0;
+  line-height: 0;
+  transform-origin: center;
+  vertical-align: middle;
 }
 
 .hd-mac-icon-button {
@@ -251,11 +255,14 @@
 }
 
 .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;
+  transform-origin: center;
 }
 
 .hd-mac-help-button {