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

package/changelog.md

@@ -2,6 +2,21 @@
 
 This file tracks changes between published npm versions of `mac-human-design`.
 
+## 0.1.30-preview.1
+
+### Added
+
+- Added shared `MacWindowToolbar` layout guardrails for dense toolbar groups,
+  including stable group height, row gaps, fixed child flex sizing, and fixed
+  `SymbolIconButton` flex basis inside toolbar groups.
+- Added verifier coverage for toolbar group layout stability.
+
+### Changed
+
+- Improved wrapped toolbar behavior so segmented controls and icon buttons keep
+  stable alignment as toolbar content density changes.
+- Bumped the package to `0.1.30-preview.1` under the `preview` dist-tag.
+
 ## 0.1.30-preview.0
 
 ### Added

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

@@ -92,7 +92,7 @@ be reimplemented in consuming apps:
 | App pattern | Export | Contract |
 | --- | --- | --- |
 | 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. |
+| Tauri window toolbar | `MacWindowToolbar` | Provides a labelled `toolbar` landmark, labelled leading/content/trailing control groups, a root drag region, no-drag regions around interactive controls, and stable wrapped-control sizing for dense icon toolbars. |
 | 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 per-symbol optical offsets, and exposes loading state with `aria-busy`. |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mac-human-design",
-  "version": "0.1.30-preview.0",
+  "version": "0.1.30-preview.1",
   "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

@@ -338,6 +338,20 @@ if (missingToolbarRequirements.length > 0) {
   );
 }
 
+requireCssDeclarations(".hd-mac-window-toolbar-group", [
+  ["toolbar group stable min height", /min-height\s*:\s*30px\s*;/],
+  ["toolbar group row gap", /row-gap\s*:\s*6px\s*;/],
+  ["toolbar group center transform origin", /transform-origin\s*:\s*center\s*;/],
+]);
+
+requireCssDeclarations(".hd-mac-window-toolbar-group > *", [
+  ["toolbar controls fixed auto flex", /flex\s*:\s*0\s+0\s+auto\s*;/],
+]);
+
+requireCssDeclarations(".hd-mac-window-toolbar-group > .hd-mac-symbol-icon-button", [
+  ["toolbar icon button fixed flex basis", /flex-basis\s*:\s*30px\s*;/],
+]);
+
 const missingPublicDocs = [
   ["README documents MacDataTable", /`MacDataTable`[\s\S]*Finder-style grid\/table primitive/],
   ["README documents MacWindowToolbar", /`MacWindowToolbar`[\s\S]*Tauri window toolbar/],

package/src/styles/macosBaseUi.css

@@ -1483,12 +1483,52 @@
 .hd-mac-window-toolbar-content {
   display: inline-flex;
   min-width: 0;
+  min-height: 30px;
   align-items: center;
   gap: 8px;
+  row-gap: 6px;
   flex-wrap: wrap;
   transform-origin: center;
 }
 
+.hd-mac-window-toolbar-group {
+  min-height: 30px;
+  row-gap: 6px;
+  transform-origin: center;
+}
+
+.hd-mac-window-toolbar-content {
+  min-height: 30px;
+  row-gap: 6px;
+  transform-origin: center;
+}
+
+.hd-mac-window-toolbar-group > *,
+.hd-mac-window-toolbar-content > * {
+  flex: 0 0 auto;
+}
+
+.hd-mac-window-toolbar-group > * {
+  flex: 0 0 auto;
+}
+
+.hd-mac-window-toolbar-content > * {
+  flex: 0 0 auto;
+}
+
+.hd-mac-window-toolbar-group > .hd-mac-symbol-icon-button,
+.hd-mac-window-toolbar-content > .hd-mac-symbol-icon-button {
+  flex-basis: 30px;
+}
+
+.hd-mac-window-toolbar-group > .hd-mac-symbol-icon-button {
+  flex-basis: 30px;
+}
+
+.hd-mac-window-toolbar-content > .hd-mac-symbol-icon-button {
+  flex-basis: 30px;
+}
+
 .hd-mac-window-toolbar-title {
   min-width: 0;
   flex: 1;