mac-human-design 0.1.28 → 0.1.30-preview.0

package/changelog.md

@@ -2,6 +2,40 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.30-preview.0
+
+### Added
+
+- Added a centered `SymbolIconButton` state layer for hover, focus, active, and
+  loading feedback that sits under the glyph and spinner without changing
+  button geometry.
+- Added an emphasis motion token for slightly richer shared control feedback.
+- Added verifier coverage for the icon button state layer, glyph stacking, and
+  emphasis motion token.
+
+### Changed
+
+- Improved icon-only button interaction feedback so highlighted toolbar buttons
+  feel more deliberate while keeping SF Symbols optically centered.
+- Bumped the package to `0.1.30-preview.0` and publish it under the `preview`
+  dist-tag while this UI/UX iteration is still being verified.
+
+## 0.1.29
+
+### Added
+
+- Added `SymbolIconButton` optical centering support through default
+  per-symbol offsets and an `opticalOffset` override prop.
+- Added verifier coverage for symbol optical offset props, default offsets, and
+  CSS variable-based glyph translation.
+
+### Changed
+
+- Tuned common toolbar SF Symbols such as refresh, upload, download, back,
+  trash, and folder-plus so their visual weight sits closer to the center of
+  the fixed macOS icon button.
+- Bumped the package to `0.1.29`.
+
 ## 0.1.28
 
 ### Added

package/docs/macos-base-ui-coverage.md

@@ -94,16 +94,17 @@ be reimplemented in consuming apps:
 | Finder-style grid/table primitive | `MacDataTable` | Uses `table` semantics for static rows, upgrades to `grid` semantics for interactive rows, exposes row/column metadata, busy state, keyboard activation, selected row state, and focus-visible row styling. |
 | Tauri window toolbar | `MacWindowToolbar` | Provides a labelled `toolbar` landmark, labelled leading/content/trailing control groups, a root drag region, and no-drag regions around interactive controls. |
 | Segmented control | `MacSegmentedControl` | Wraps the shared macOS segmented toggle styling with accessible labels, stable class names, full-width layout support, and class/style pass-through. |
-| Centered SF Symbols icon button | `SymbolIconButton` | Renders through `MacIconButton`, defaults to `type="button"`, preserves fixed geometry while allowing style/class pass-through, supports tooltip offsets, and exposes loading state with `aria-busy`. |
+| Centered SF Symbols icon button | `SymbolIconButton` | Renders through `MacIconButton`, defaults to `type="button"`, preserves fixed geometry while allowing style/class pass-through, supports tooltip offsets and per-symbol optical offsets, and exposes loading state with `aria-busy`. |
 
 ## Icon Button Alignment Guarantees
 
 Icon-only buttons use fixed-size grid containers with zero padding, zero
 line-height, centered grid content, middle inline alignment, and center transform
 origins. `SymbolIconButton` keeps the SF Symbol and loading spinner in the same
-grid cell, centers generated symbol masks, trims transparent symbol padding in
-the native symbol service, and avoids vertical Motion offsets for icon-only
-controls.
+grid cell, renders hover/focus/loading feedback as a centered state layer under
+the glyph, centers generated symbol masks, trims transparent symbol padding in
+the native symbol service, applies per-symbol optical offsets for asymmetric SF
+Symbols, and avoids vertical Motion offsets for icon-only controls.
 
 The gallery at `examples/macos-base-ui-gallery` renders these wrappers across
 normal, selected, disabled, mixed, popup, dialog, and narrow-width states.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.28",
+  "version": "0.1.30-preview.0",
   "description": "Reusable macOS-oriented UI primitives and SF Symbols bridge for Tauri apps.",
   "type": "module",
   "main": "src/index.ts",
@@ -39,6 +39,7 @@
     "check": "npm run typecheck && npm run verify:base-ui && npm run verify:design && npm run verify:gallery",
     "dev:gallery": "vite --host 127.0.0.1 examples/macos-base-ui-gallery",
     "publish": "npm publish --access public --ignore-scripts",
+    "publish:preview": "npm publish --access public --ignore-scripts --tag preview",
     "typecheck": "tsc --noEmit",
     "verify:base-ui": "node scripts/verify-base-ui-coverage.mjs",
     "verify:design": "node scripts/verify-macos-design.mjs",

package/scripts/verify-macos-design.mjs

@@ -86,6 +86,7 @@ const requiredStyleFeatures = [
   ["reduced motion support", /@media\s*\(prefers-reduced-motion:\s*reduce\)/],
   ["keyboard focus-visible support", /:focus-visible/],
   ["macOS blue accent token", /--hd-mac-blue:\s*#0a84ff/i],
+  ["emphasis motion token", /--hd-mac-motion-emphasis:\s*220ms\s+cubic-bezier\(0\.16,\s*1,\s*0\.3,\s*1\)/],
 ];
 
 const missingFeatures = requiredStyleFeatures
@@ -146,6 +147,25 @@ requireCssDeclarations(".hd-mac-symbol-icon-button", [
   ["fixed 30px height", /height\s*:\s*30px\s*;/],
   ["fixed 30px min-width", /min-width\s*:\s*30px\s*;/],
   ["fixed 30px min-height", /min-height\s*:\s*30px\s*;/],
+  ["stable state layer positioning", /position\s*:\s*relative\s*;/],
+  ["state layer isolation", /isolation\s*:\s*isolate\s*;/],
+  ["state layer clipping", /overflow\s*:\s*hidden\s*;/],
+]);
+
+requireCssDeclarations(".hd-mac-symbol-icon-button::before", [
+  ["state layer content", /content\s*:\s*""\s*;/],
+  ["state layer behind glyph", /z-index\s*:\s*0\s*;/],
+  ["state layer full width", /width\s*:\s*100%\s*;/],
+  ["state layer full height", /height\s*:\s*100%\s*;/],
+  ["state layer hidden by default", /opacity\s*:\s*0\s*;/],
+  ["state layer scale starts centered", /transform\s*:\s*scale\(0\.82\)\s*;/],
+  ["state layer opacity transition", /opacity\s+var\(--hd-mac-motion-standard\)/],
+  ["state layer emphasis transition", /transform\s+var\(--hd-mac-motion-emphasis\)/],
+]);
+
+requireCssDeclarations(".hd-mac-symbol-icon-button:hover::before", [
+  ["hover state layer visible", /opacity\s*:\s*1\s*;/],
+  ["hover state layer full scale", /transform\s*:\s*scale\(1\)\s*;/],
 ]);
 
 requireCssDeclarations(".hd-mac-symbol-icon-button::after", [
@@ -154,11 +174,17 @@ requireCssDeclarations(".hd-mac-symbol-icon-button::after", [
 
 requireCssDeclarations(".hd-mac-symbol-icon", [
   ["single grid cell placement", /grid-area\s*:\s*1\s*\/\s*1\s*;/],
+  ["glyph above state layer", /z-index\s*:\s*1\s*;/],
   ["flex centering display", /display\s*:\s*inline-flex\s*;/],
   ["vertical glyph centering", /align-items\s*:\s*center\s*;/],
   ["horizontal glyph centering", /justify-content\s*:\s*center\s*;/],
   ["automatic optical centering margin", /margin\s*:\s*auto\s*;/],
   ["center transform origin", /transform-origin\s*:\s*center\s*;/],
+  [
+    "symbol optical centering translate",
+    /translate\s*:\s*var\(--hd-mac-symbol-offset-x,\s*0px\)\s*var\(--hd-mac-symbol-offset-y,\s*0px\)\s*;/,
+  ],
+  ["symbol opacity transition", /opacity\s+var\(--hd-mac-motion-standard\)/],
 ]);
 
 const sharedIconButtonRule = stylesSource.match(
@@ -199,6 +225,9 @@ const symbolIconRequirements = [
   ["SymbolIconButton render element is MacIconButton", /render=\{\s*<MacIconButton\b/],
   ["SymbolIconButton applies hd-mac-symbol-icon-button class", /joinClasses\("hd-mac-symbol-icon-button", className\)/],
   ["SymbolIconButton defaults to button type", /type=["']button["']/],
+  ["SymbolIconButton supports optical offset prop", /opticalOffset\?: SymbolIconOpticalOffset/],
+  ["SymbolIconButton includes default optical offsets", /DEFAULT_SYMBOL_OPTICAL_OFFSETS/],
+  ["SymbolIconButton sets symbol offset CSS variable", /"--hd-mac-symbol-offset-x": offsetToCssValue/],
   ["SymbolIconButton supports className pass-through", /\bclassName,\s*\n\s*style,/],
   ["SymbolIconButton supports style pass-through after fixed geometry", /\.\.\.style/],
   ["SymbolIconButton supports tooltip offset", /tooltipSideOffset = 5/],

package/src/components/SymbolIconButton.tsx

@@ -10,6 +10,7 @@ type SymbolIconButtonProps = {
   disabled?: boolean;
   isLoading?: boolean;
   iconSizePx?: number;
+  opticalOffset?: SymbolIconOpticalOffset;
   symbolEnabled?: boolean;
   className?: string;
   style?: CSSProperties;
@@ -19,10 +20,31 @@ type SymbolIconButtonProps = {
 const ICON_BUTTON_SIZE = "30px";
 const ICON_BUTTON_RADIUS = "7px";
 
+type SymbolIconOpticalOffset = {
+  x?: number | string;
+  y?: number | string;
+};
+
+const DEFAULT_SYMBOL_OPTICAL_OFFSETS: Record<string, SymbolIconOpticalOffset> = {
+  "arrow.clockwise": { y: 0.5 },
+  "square.and.arrow.up": { y: 0.35 },
+  "square.and.arrow.down": { y: 0.35 },
+  "folder.badge.plus": { x: -0.65 },
+  "chevron.left": { x: 0.6 },
+  trash: { y: 0.25 },
+};
+
 function joinClasses(...classes: Array<string | undefined | false>) {
   return classes.filter(Boolean).join(" ");
 }
 
+function offsetToCssValue(value: number | string | undefined) {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value ?? "0px";
+}
+
 export function SymbolIconButton({
   label,
   symbolName,
@@ -31,6 +53,7 @@ export function SymbolIconButton({
   disabled,
   isLoading,
   iconSizePx = 18,
+  opticalOffset,
   symbolEnabled = true,
   className,
   style,
@@ -42,6 +65,13 @@ export function SymbolIconButton({
     enabled: symbolEnabled,
   });
   const glyphPx = `${iconSizePx}px`;
+  const resolvedOpticalOffset = opticalOffset ?? DEFAULT_SYMBOL_OPTICAL_OFFSETS[symbolName];
+  const iconStyle = {
+    width: glyphPx,
+    height: glyphPx,
+    "--hd-mac-symbol-offset-x": offsetToCssValue(resolvedOpticalOffset?.x),
+    "--hd-mac-symbol-offset-y": offsetToCssValue(resolvedOpticalOffset?.y),
+  } as CSSProperties;
 
   return (
     <MacTooltip.Root>
@@ -70,8 +100,7 @@ export function SymbolIconButton({
                 aria-hidden
                 className="hd-mac-symbol-icon hd-mac-symbol-icon-mask"
                 style={{
-                  width: glyphPx,
-                  height: glyphPx,
+                  ...iconStyle,
                   color: "currentColor",
                   backgroundColor: "currentColor",
                   WebkitMaskImage: `url("${symbolDataUrl}")`,
@@ -89,8 +118,7 @@ export function SymbolIconButton({
                 aria-hidden
                 className="hd-mac-symbol-icon hd-mac-symbol-icon-fallback"
                 style={{
-                  width: glyphPx,
-                  height: glyphPx,
+                  ...iconStyle,
                   fontSize: glyphPx,
                 }}
               >

package/src/styles/macosBaseUi.css

@@ -28,6 +28,7 @@
   --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);
   --hd-mac-motion-row: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  --hd-mac-motion-emphasis: 220ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -76,6 +77,7 @@
   .hd-mac-avatar,
   .hd-mac-scroll-thumb,
   .hd-mac-status-message,
+  .hd-mac-symbol-icon-button::before,
   .hd-mac-symbol-icon-button[data-loading]::after,
   .hd-mac-window-toolbar,
   .hd-mac-data-table,
@@ -282,13 +284,41 @@
   height: 30px;
   min-height: 30px;
   border-radius: 7px;
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.hd-mac-symbol-icon-button::before,
+.hd-mac-symbol-icon-button::after {
+  grid-area: 1 / 1;
+  pointer-events: none;
 }
 
 .hd-mac-symbol-icon-button::after {
   grid-area: 1 / 1;
 }
 
+.hd-mac-symbol-icon-button::before {
+  content: "";
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  background:
+    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.28), transparent 54%),
+    var(--hd-mac-fill-hover);
+  opacity: 0;
+  transform: scale(0.82);
+  transition:
+    opacity var(--hd-mac-motion-standard),
+    transform var(--hd-mac-motion-emphasis),
+    background-color var(--hd-mac-motion-standard);
+}
+
 .hd-mac-symbol-icon {
+  position: relative;
+  z-index: 1;
   grid-area: 1 / 1;
   display: inline-flex;
   align-items: center;
@@ -297,6 +327,10 @@
   flex-shrink: 0;
   margin: auto;
   transform-origin: center;
+  translate: var(--hd-mac-symbol-offset-x, 0px) var(--hd-mac-symbol-offset-y, 0px);
+  transition:
+    opacity var(--hd-mac-motion-standard),
+    color var(--hd-mac-motion-standard);
 }
 
 .hd-mac-symbol-icon-mask {
@@ -324,6 +358,29 @@
   font: 700 12px/18px var(--hd-mac-font);
 }
 
+.hd-mac-symbol-icon-button:hover::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.hd-mac-symbol-icon-button:focus-visible::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.hd-mac-symbol-icon-button:active::before,
+.hd-mac-symbol-icon-button[data-loading]::before {
+  opacity: 1;
+  transform: scale(0.92);
+  background:
+    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.18), transparent 54%),
+    var(--hd-mac-fill-pressed);
+}
+
+.hd-mac-symbol-icon-button[disabled]::before {
+  opacity: 0;
+}
+
 .hd-mac-button[disabled],
 .hd-mac-select-trigger[disabled],
 .hd-mac-toggle[disabled],
@@ -979,6 +1036,7 @@
 
 .hd-mac-symbol-icon-button[data-loading]::after {
   content: "";
+  z-index: 2;
   width: 15px;
   height: 15px;
   border: 1.5px solid color-mix(in srgb, currentColor 28%, transparent);