mac-human-design 0.1.20 → 0.1.22

package/changelog.md

@@ -2,6 +2,38 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.22
+
+### Added
+
+- Added a centered loading spinner overlay for `SymbolIconButton` that shares
+  the icon button grid cell and respects reduced-motion preferences.
+- Added `aria-busy` to loading `SymbolIconButton` instances.
+- Extended the macOS design verifier to protect the loading spinner's centered
+  geometry, animation keyframes, reduced-motion behavior, and `aria-busy`
+  loading state.
+
+### Changed
+
+- Kept the underlying symbol visible at reduced opacity while loading so the
+  button remains spatially stable.
+- Bumped the package to `0.1.22`.
+
+## 0.1.21
+
+### Added
+
+- Added macOS gallery coverage for loading and disabled `SymbolIconButton`
+  states plus info, success, and error `StatusMessage` states.
+- Extended the macOS design verifier to require those icon and status states in
+  gallery builds.
+
+### Changed
+
+- Added compact gallery status-stack styling for grouped status message
+  previews.
+- Bumped the package to `0.1.21`.
+
 ## 0.1.20
 
 ### Added

package/package.json

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

package/scripts/verify-macos-design.mjs

@@ -7,6 +7,7 @@ const stylesPath = path.join(repoRoot, "src", "styles", "macosBaseUi.css");
 const packageJsonPath = path.join(repoRoot, "package.json");
 const wrapperPath = path.join(repoRoot, "src", "components", "MacBaseUI.tsx");
 const symbolIconButtonPath = path.join(repoRoot, "src", "components", "SymbolIconButton.tsx");
+const galleryPath = path.join(repoRoot, "src", "components", "MacBaseUIGallery.tsx");
 const symbolServicePath = path.join(repoRoot, "src", "symbols", "systemSymbolService.ts");
 
 function readText(filePath) {
@@ -46,6 +47,7 @@ const stylesSource = readText(stylesPath);
 const packageJson = JSON.parse(readText(packageJsonPath));
 const wrapperSource = readText(wrapperPath);
 const symbolIconButtonSource = readText(symbolIconButtonPath);
+const gallerySource = readText(galleryPath);
 const symbolServiceSource = readText(symbolServicePath);
 
 function getCssRuleBody(selector) {
@@ -136,6 +138,10 @@ requireCssDeclarations(".hd-mac-symbol-icon-button", [
   ["fixed 30px min-height", /min-height\s*:\s*30px\s*;/],
 ]);
 
+requireCssDeclarations(".hd-mac-symbol-icon-button::after", [
+  ["loading overlay grid placement", /grid-area\s*:\s*1\s*\/\s*1\s*;/],
+]);
+
 requireCssDeclarations(".hd-mac-symbol-icon", [
   ["single grid cell placement", /grid-area\s*:\s*1\s*\/\s*1\s*;/],
   ["flex centering display", /display\s*:\s*inline-flex\s*;/],
@@ -182,6 +188,7 @@ const symbolIconRequirements = [
   ["SymbolIconButton imports MacIconButton", /import\s+\{\s*MacIconButton,\s*MacTooltip\s*\}\s+from\s+["']\.\/MacBaseUI["']/],
   ["SymbolIconButton render element is MacIconButton", /render=\{\s*<MacIconButton\b/],
   ["SymbolIconButton applies hd-mac-symbol-icon-button class", /className=["']hd-mac-symbol-icon-button["']/],
+  ["SymbolIconButton exposes aria-busy loading state", /aria-busy=\{isLoading \|\| undefined\}/],
   ["masked symbol class path", /className=["']hd-mac-symbol-icon hd-mac-symbol-icon-mask["']/],
   ["fallback symbol class path", /className=["']hd-mac-symbol-icon hd-mac-symbol-icon-fallback["']/],
   ["mask centering", /maskPosition:\s*["']center["']/],
@@ -196,6 +203,52 @@ if (missingSymbolIconRequirements.length > 0) {
   fail("Missing SymbolIconButton alignment invariants.", missingSymbolIconRequirements);
 }
 
+const missingGalleryStateCoverage = [
+  ["loading symbol icon button", /<SymbolIconButton[\s\S]*?\bisLoading\b/],
+  ["disabled symbol icon button", /<SymbolIconButton[\s\S]*?\bdisabled\b/],
+  ["info status message", /<StatusMessage\s+intent=["']info["']/],
+  ["success status message", /<StatusMessage\s+intent=["']success["']/],
+  ["error status message", /<StatusMessage\s+intent=["']error["']/],
+].filter(([, pattern]) => !pattern.test(gallerySource));
+
+if (missingGalleryStateCoverage.length > 0) {
+  fail(
+    "Missing macOS gallery coverage for critical icon and status states.",
+    missingGalleryStateCoverage.map(([label]) => label),
+  );
+}
+
+const loadingIconRule = getCssRuleBody(".hd-mac-symbol-icon-button[data-loading]::after");
+const missingLoadingIconDeclarations = [
+  ["centered loading spinner content", /content\s*:\s*""\s*;/],
+  ["spinner width", /width\s*:\s*15px\s*;/],
+  ["spinner height", /height\s*:\s*15px\s*;/],
+  ["spinner automatic centering margin", /margin\s*:\s*auto\s*;/],
+  ["spinner center transform origin", /transform-origin\s*:\s*center\s*;/],
+  ["spinner animation", /animation\s*:\s*mac-symbol-icon-spin\s+720ms\s+linear\s+infinite\s*;/],
+].filter(([, pattern]) => !pattern.test(loadingIconRule));
+
+if (missingLoadingIconDeclarations.length > 0) {
+  fail(
+    "Missing centered loading affordance declarations for SymbolIconButton.",
+    missingLoadingIconDeclarations.map(([label]) => label),
+  );
+}
+
+if (!/@keyframes\s+mac-symbol-icon-spin/.test(stylesSource)) {
+  fail("Missing SymbolIconButton loading spinner keyframes.", ["hd-mac-symbol-icon-spin"]);
+}
+
+if (
+  !/@media\s*\(prefers-reduced-motion:\s*reduce\)[\s\S]*?\.hd-mac-symbol-icon-button\[data-loading\]::after[\s\S]*?animation-name\s*:\s*none\s*!important/.test(
+    stylesSource,
+  )
+) {
+  fail("Missing reduced-motion handling for SymbolIconButton loading spinner.", [
+    ".hd-mac-symbol-icon-button[data-loading]::after",
+  ]);
+}
+
 const missingSymbolServiceRequirements = [
   ["transparent symbol padding trim", /trimTransparentSymbolPadding/],
   ["alpha threshold trim", /TRANSPARENT_ALPHA_THRESHOLD/],

package/src/components/MacBaseUIGallery.tsx

@@ -56,6 +56,7 @@ import {
 import { MacDataTable } from "./MacDataTable";
 import { MacSegmentedControl } from "./MacSegmentedControl";
 import { MacWindowToolbar } from "./MacWindowToolbar";
+import { StatusMessage } from "./StatusMessage";
 import { SymbolIconButton } from "./SymbolIconButton";
 
 const choices = [
@@ -97,6 +98,8 @@ export function MacBaseUIGallery() {
         <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} />
+        <SymbolIconButton label="Loading refresh" symbolName="arrow.clockwise" fallback="↻" onClick={() => {}} isLoading />
+        <SymbolIconButton label="Disabled upload" symbolName="square.and.arrow.up" fallback="↑" onClick={() => {}} disabled />
         <MacHelpButton aria-label="Help">?</MacHelpButton>
       </GallerySection>
 
@@ -366,6 +369,7 @@ export function MacBaseUIGallery() {
         <MacButton disabled>Disabled</MacButton>
         <MacPrimaryButton disabled>Disabled Primary</MacPrimaryButton>
         <MacInput disabled placeholder="Disabled text field" />
+        <SymbolIconButton label="Disabled refresh" symbolName="arrow.clockwise" fallback="↻" onClick={() => {}} disabled />
         <label className="hd-mac-gallery-inline-choice">
           <MacCheckbox.Root indeterminate>
             <MacCheckbox.Indicator />
@@ -378,6 +382,11 @@ export function MacBaseUIGallery() {
       </GallerySection>
 
       <GallerySection title="Feedback">
+        <div className="hd-mac-gallery-status-stack">
+          <StatusMessage intent="info" message="Connected to the selected bucket." />
+          <StatusMessage intent="success" message="Upload completed." />
+          <StatusMessage intent="error" message="Unable to fetch object metadata." />
+        </div>
         <MacProgress.Root value={62}>
           <MacProgress.Label>Progress</MacProgress.Label>
           <MacProgress.Track>

package/src/components/SymbolIconButton.tsx

@@ -38,6 +38,7 @@ export function SymbolIconButton({
         render={
           <MacIconButton
             aria-label={label}
+            aria-busy={isLoading || undefined}
             title={label}
             disabled={disabled || isLoading}
             onClick={onClick}

package/src/styles/macosBaseUi.css

@@ -76,6 +76,7 @@
   .hd-mac-avatar,
   .hd-mac-scroll-thumb,
   .hd-mac-status-message,
+  .hd-mac-symbol-icon-button[data-loading]::after,
   .hd-mac-window-toolbar,
   .hd-mac-data-table,
   .hd-mac-data-table-row {
@@ -84,6 +85,10 @@
     animation-iteration-count: 1 !important;
     scroll-behavior: auto !important;
   }
+
+  .hd-mac-symbol-icon-button[data-loading]::after {
+    animation-name: none !important;
+  }
 }
 
 .hd-mac,
@@ -279,6 +284,10 @@
   border-radius: 7px;
 }
 
+.hd-mac-symbol-icon-button::after {
+  grid-area: 1 / 1;
+}
+
 .hd-mac-symbol-icon {
   grid-area: 1 / 1;
   display: inline-flex;
@@ -955,7 +964,31 @@
 }
 
 .hd-mac-symbol-icon-button[data-loading] {
-  opacity: 0.62;
+  opacity: 1;
+  color: var(--hd-mac-blue);
+}
+
+.hd-mac-symbol-icon-button[data-loading] .hd-mac-symbol-icon {
+  opacity: 0.22;
+}
+
+.hd-mac-symbol-icon-button[data-loading]::after {
+  content: "";
+  width: 15px;
+  height: 15px;
+  border: 1.5px solid color-mix(in srgb, currentColor 28%, transparent);
+  border-top-color: currentColor;
+  border-radius: 999px;
+  box-sizing: border-box;
+  margin: auto;
+  transform-origin: center;
+  animation: mac-symbol-icon-spin 720ms linear infinite;
+}
+
+@keyframes mac-symbol-icon-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .hd-mac-toggle[data-pressed] {
@@ -1544,6 +1577,16 @@
   font: 400 13px/18px var(--hd-mac-font);
 }
 
+.hd-mac-gallery-status-stack {
+  display: grid;
+  min-width: min(340px, 100%);
+  gap: 6px;
+}
+
+.hd-mac-gallery-status-stack > .hd-mac-status-message {
+  margin-top: 0;
+}
+
 .hd-mac-gallery-scroll {
   width: 190px;
   height: 48px;