mac-human-design 0.1.13 → 0.1.15

package/changelog.md

@@ -2,6 +2,32 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.15
+
+### Changed
+
+- Added shared macOS motion timing tokens and applied them to controls and
+  floating surfaces for more consistent UI motion.
+- Replaced button active-state vertical translation with non-positional pressed
+  feedback, keeping icon-only controls visually anchored while pressed.
+- Bumped the package to `0.1.15`.
+
+## 0.1.14
+
+### Added
+
+- Added `SymbolIconButton` coverage to the macOS Base UI gallery, including a
+  fallback-only state for non-Tauri render paths.
+
+### Changed
+
+- Added a `symbolEnabled` prop to `SymbolIconButton` so consumers and examples
+  can intentionally render fallback glyphs without invoking the Tauri symbol
+  bridge.
+- Split masked SF Symbol and fallback glyph rendering into separate centered
+  elements, with fallback-specific typography and optical vertical correction.
+- Bumped the package to `0.1.14`.
+
 ## 0.1.13
 
 ### Changed

package/package.json

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

package/src/components/MacBaseUIGallery.tsx

@@ -56,6 +56,7 @@ import {
 import { MacDataTable } from "./MacDataTable";
 import { MacSegmentedControl } from "./MacSegmentedControl";
 import { MacWindowToolbar } from "./MacWindowToolbar";
+import { SymbolIconButton } from "./SymbolIconButton";
 
 const choices = [
   { label: "General", value: "general" },
@@ -93,6 +94,9 @@ export function MacBaseUIGallery() {
         <MacDestructiveButton>Delete</MacDestructiveButton>
         <MacPlainButton>Cancel</MacPlainButton>
         <MacIconButton aria-label="Add">+</MacIconButton>
+        <SymbolIconButton label="Refresh" symbolName="arrow.clockwise" fallback="↻" onClick={() => {}} />
+        <SymbolIconButton label="Upload" symbolName="square.and.arrow.up" fallback="↑" onClick={() => {}} />
+        <SymbolIconButton label="Fallback refresh" symbolName="arrow.clockwise" fallback="↻" onClick={() => {}} symbolEnabled={false} />
         <MacHelpButton aria-label="Help">?</MacHelpButton>
       </GallerySection>
 

package/src/components/SymbolIconButton.tsx

@@ -9,6 +9,7 @@ type SymbolIconButtonProps = {
   disabled?: boolean;
   isLoading?: boolean;
   iconSizePx?: number;
+  symbolEnabled?: boolean;
 };
 
 const ICON_BUTTON_SIZE = "30px";
@@ -22,10 +23,12 @@ export function SymbolIconButton({
   disabled,
   isLoading,
   iconSizePx = 18,
+  symbolEnabled = true,
 }: SymbolIconButtonProps) {
   const { dataUrl: symbolDataUrl } = useSystemSymbol({
     symbolName,
     cssPixelSize: iconSizePx,
+    enabled: symbolEnabled,
   });
   const glyphPx = `${iconSizePx}px`;
 
@@ -48,30 +51,38 @@ export function SymbolIconButton({
               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>
+            {symbolDataUrl ? (
+              <span
+                aria-hidden
+                className="hd-mac-symbol-icon hd-mac-symbol-icon-mask"
+                style={{
+                  width: glyphPx,
+                  height: glyphPx,
+                  color: "currentColor",
+                  backgroundColor: "currentColor",
+                  WebkitMaskImage: `url("${symbolDataUrl}")`,
+                  WebkitMaskPosition: "center",
+                  WebkitMaskRepeat: "no-repeat",
+                  WebkitMaskSize: "contain",
+                  maskImage: `url("${symbolDataUrl}")`,
+                  maskPosition: "center",
+                  maskRepeat: "no-repeat",
+                  maskSize: "contain",
+                }}
+              />
+            ) : (
+              <span
+                aria-hidden
+                className="hd-mac-symbol-icon hd-mac-symbol-icon-fallback"
+                style={{
+                  width: glyphPx,
+                  height: glyphPx,
+                  fontSize: glyphPx,
+                }}
+              >
+                {fallback}
+              </span>
+            )}
           </MacIconButton>
         }
       />

package/src/styles/macosBaseUi.css

@@ -24,6 +24,9 @@
     0 1px 0 rgba(255, 255, 255, 0.86) inset,
     0 1px 1px rgba(15, 23, 42, 0.08);
   --hd-mac-focus-ring: 0 0 0 3px color-mix(in srgb, var(--hd-mac-blue) 28%, transparent);
+  --hd-mac-motion-fast: 90ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --hd-mac-motion-standard: 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --hd-mac-motion-surface: 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -157,11 +160,11 @@
   user-select: none;
   white-space: nowrap;
   transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    box-shadow 120ms ease,
-    filter 120ms ease,
-    transform 80ms ease;
+    background-color var(--hd-mac-motion-standard),
+    border-color var(--hd-mac-motion-standard),
+    box-shadow var(--hd-mac-motion-standard),
+    filter var(--hd-mac-motion-fast),
+    transform var(--hd-mac-motion-fast);
 }
 
 .hd-mac-button:hover,
@@ -177,8 +180,10 @@
 .hd-mac-toggle:active,
 .hd-mac-toolbar-button:active,
 .hd-mac-stepper-button:active {
-  transform: translateY(1px);
   filter: brightness(0.98);
+  box-shadow:
+    0 1px 0 rgba(0, 0, 0, 0.06) inset,
+    0 1px 1px rgba(15, 23, 42, 0.04);
 }
 
 .hd-mac-button:focus-visible,
@@ -265,6 +270,18 @@
   transform-origin: center;
 }
 
+.hd-mac-symbol-icon-mask {
+  line-height: 0;
+}
+
+.hd-mac-symbol-icon-fallback {
+  color: currentColor;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  font-weight: 500;
+  line-height: 1;
+  transform: translateY(-0.04em);
+}
+
 .hd-mac-help-button {
   display: inline-grid;
   width: 18px;
@@ -503,6 +520,11 @@
   box-shadow: var(--hd-mac-shadow);
   backdrop-filter: saturate(180%) blur(28px);
   -webkit-backdrop-filter: saturate(180%) blur(28px);
+  transform-origin: center;
+  transition:
+    opacity var(--hd-mac-motion-surface),
+    transform var(--hd-mac-motion-surface),
+    box-shadow var(--hd-mac-motion-surface);
 }
 
 .hd-mac-popup,