@hirobius/design-system 0.20.0 → 0.22.0

package/upgrade/releases/0.21.0.json

@@ -0,0 +1,538 @@
+{
+  "version": "0.21.0",
+  "date": "2026-10-07",
+  "bump": "minor",
+  "summary": "StatusDot is removed, fonts move to an opt-in fonts.css, the type ramp is cut to 5 roles; AGENTS.md, hds-mcp and the ESLint plugin ship.",
+  "backfilled": true,
+  "steps": [
+    {
+      "id": "0.21.0/removed/--semantic-typography-eyebrow-text-transform",
+      "kind": "removed",
+      "impact": "look",
+      "plain": "The CSS variable --semantic-typography-eyebrow-text-transform is gone, so set text-transform: uppercase yourself where a label must stay uppercase.",
+      "detect": {
+        "cssVars": [
+          "--semantic-typography-eyebrow-text-transform"
+        ]
+      },
+      "source": "CHANGELOG.md:41"
+    },
+    {
+      "id": "0.21.0/removed/StatusDot",
+      "kind": "removed",
+      "impact": "breaking",
+      "plain": "StatusDot and StatusDotProps are removed, so replace each <StatusDot tone size label> with <Badge dot tone size label> (BadgeProps for the type), moving any style to a wrapper element or a className first.",
+      "detect": {
+        "imports": [
+          {
+            "from": "@hirobius/design-system",
+            "names": [
+              "StatusDot",
+              "StatusDotProps"
+            ]
+          }
+        ],
+        "jsx": [
+          "StatusDot"
+        ]
+      },
+      "facts": [
+        "removed:.:StatusDot",
+        "removed:.:StatusDotProps"
+      ],
+      "source": "CHANGELOG.md:40"
+    },
+    {
+      "id": "0.21.0/deprecated/Text-variants",
+      "kind": "deprecated",
+      "impact": "none",
+      "plain": "The Text variants heading1, heading2, heading3, technical, eyebrow, badge, docLede, docBody, docSmall and docCode still work but are deprecated; use title, mono, caption, body or ui instead.",
+      "detect": {
+        "regex": [
+          "<Text\\b[^>]*\\bvariant=\\{?\\s*[\"'](?:heading[123]|technical|eyebrow|badge|docLede|docBody|docSmall|docCode)[\"']"
+        ]
+      },
+      "removeIn": "1.0.0",
+      "facts": [
+        "added:.:TextVariant"
+      ],
+      "source": "CHANGELOG.md:41"
+    },
+    {
+      "id": "0.21.0/deprecated/typeStyles-aliases",
+      "kind": "deprecated",
+      "impact": "none",
+      "plain": "The hds.typeStyles keys from before the ramp (h1 to h3, heading1 to heading3, eyebrow, badge, micro, technical, small, label and the rest) and hds.semantic.typography label, labelDescriptive and labelTechnical still work but are deprecated; use display, title, body, ui, caption or mono instead.",
+      "detect": {
+        "regex": [
+          "\\btypeStyles\\.(?:h[123]|heading[123]|headingHero|headingSection|display[12]|displayXl|body2|bodyLarge|small|bodySmall|label|labelDescriptive|labelTechnical|eyebrow|badge|micro|technical|monoXs|monoSm)\\b",
+          "\\bsemantic\\.typography\\.(?:label|labelDescriptive|labelTechnical)\\b"
+        ]
+      },
+      "removeIn": "1.0.0",
+      "source": "CHANGELOG.md:41"
+    },
+    {
+      "id": "0.21.0/look/AssetImg-fallback",
+      "kind": "look",
+      "impact": "look",
+      "plain": "AssetImg without a src now shows a fallback that fits its container.",
+      "detect": {
+        "imports": [
+          {
+            "from": "@hirobius/design-system/patterns",
+            "names": [
+              "AssetImg"
+            ]
+          }
+        ],
+        "jsx": [
+          "AssetImg"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Button-pressed",
+      "kind": "look",
+      "impact": "look",
+      "plain": "A pressed toggle Button now fills with the accent surface, so it reads as on.",
+      "detect": {
+        "regex": [
+          "<Button\\b[^>]*\\bpressed\\b"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Card-Surface-StatusTile-height",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Card, Surface and StatusTile no longer fill their parent's height, so give the parent a stretching layout (Grid align=\"stretch\") where one must fill it.",
+      "detect": {
+        "jsx": [
+          "Card",
+          "Surface",
+          "StatusTile"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/CodeBlock-padding",
+      "kind": "look",
+      "impact": "look",
+      "plain": "CodeBlock pads its code 16px instead of 80px.",
+      "detect": {
+        "imports": [
+          {
+            "from": "@hirobius/design-system/patterns",
+            "names": [
+              "CodeBlock"
+            ]
+          }
+        ],
+        "jsx": [
+          "CodeBlock"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Dialog-margin",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Dialog and AlertDialog now keep a 16px margin from the screen edge and scroll inside when taller than the screen.",
+      "detect": {
+        "jsx": [
+          "Dialog",
+          "AlertDialog"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Disclosure-card",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Disclosure variant=\"card\" no longer clips its content or leaves empty space when closed.",
+      "detect": {
+        "jsx": [
+          "Disclosure"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Divider-vertical",
+      "kind": "look",
+      "impact": "look",
+      "plain": "A vertical Divider now stretches across its row without needing a parent height.",
+      "detect": {
+        "regex": [
+          "<Divider\\b[^>]*\\borientation=\\{?\\s*[\"']vertical[\"']"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/ErrorPattern-fullPage",
+      "kind": "look",
+      "impact": "look",
+      "plain": "ErrorPattern now fits its container instead of filling the viewport height, so pass fullPage where it is a whole error page.",
+      "detect": {
+        "imports": [
+          {
+            "from": "@hirobius/design-system/patterns",
+            "names": [
+              "ErrorPattern"
+            ]
+          }
+        ],
+        "jsx": [
+          "ErrorPattern"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/FormActions-primary",
+      "kind": "look",
+      "impact": "look",
+      "plain": "A Button with no variant in FormActions primary now renders as primary, so pass variant where you want another style there.",
+      "detect": {
+        "imports": [
+          {
+            "from": "@hirobius/design-system/patterns",
+            "names": [
+              "FormActions"
+            ]
+          }
+        ],
+        "jsx": [
+          "FormActions"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Grid-align-start",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Grid now aligns its items to the start and Grid.Item no longer sets height: 100%, so pass align=\"stretch\" to a Grid whose Cards, Surfaces or StatusTiles must share one height.",
+      "detect": {
+        "imports": [
+          {
+            "from": "@hirobius/design-system",
+            "names": [
+              "Grid"
+            ]
+          }
+        ],
+        "jsx": [
+          "Grid",
+          "Grid.Item"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/MetadataList-horizontal",
+      "kind": "look",
+      "impact": "look",
+      "plain": "A horizontal MetadataList now sizes its term column to its content.",
+      "detect": {
+        "jsx": [
+          "MetadataList"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Progress-fill",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Progress now shows its neutral fill on a visible track, and its sm bar is 6px tall.",
+      "detect": {
+        "jsx": [
+          "Progress"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/SegmentedControl-hug",
+      "kind": "look",
+      "impact": "look",
+      "plain": "SegmentedControl md segments now hug their labels in a 40px rail (sm 32px), so every segment shows instead of one filling the rail.",
+      "detect": {
+        "jsx": [
+          "SegmentedControl"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Select-matches-Input",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Select now matches Input (40px tall, 44px on small screens, the same fill and an up-down chevron), and the built-in labels of Input, Textarea and Select are 14px like a FormField label.",
+      "detect": {
+        "jsx": [
+          "Select",
+          "Input",
+          "Textarea"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Skeleton-rectangular",
+      "kind": "look",
+      "impact": "look",
+      "plain": "A rectangular Skeleton is now 5rem tall by default and uses the sunken surface fill, so it shows on a Card.",
+      "detect": {
+        "jsx": [
+          "Skeleton"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Slider-track",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Slider's track is now an 8px bar with a visible fill instead of a padded 48px slab.",
+      "detect": {
+        "jsx": [
+          "Slider"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Stat-align",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Stat now aligns its content to the start.",
+      "detect": {
+        "jsx": [
+          "Stat"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/Table-flush",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Table no longer pads its scroll region by default, so pass flush={false} where you want the old inset back.",
+      "detect": {
+        "jsx": [
+          "Table"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/control-rows",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Checkbox, Radio and Toggle rows now share one inset and height.",
+      "detect": {
+        "jsx": [
+          "Checkbox",
+          "Radio",
+          "Toggle"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/form-control-width",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Input, Textarea, Select, Combobox and Slider are now at most 40rem wide, so set --hds-form-control-max-width or add max-w-none to the control's className where one must be wider.",
+      "detect": {
+        "jsx": [
+          "Input",
+          "Textarea",
+          "Select",
+          "Combobox",
+          "Slider"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/touch-targets",
+      "kind": "look",
+      "impact": "look",
+      "plain": "On touch screens, Checkbox, Radio and Toggle rows, the Pagination page buttons and the CodeBlock copy button are now at least 44px tall.",
+      "detect": {
+        "jsx": [
+          "Checkbox",
+          "Radio",
+          "Toggle",
+          "Pagination",
+          "CodeBlock"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/look/type-ramp",
+      "kind": "look",
+      "impact": "look",
+      "plain": "Headings (h1 to h3, heading1 to heading3) now render at 24px, display at 48px, body at 16px with 1.6 leading and mono at 13px, and eyebrow, badge and micro text is no longer uppercase.",
+      "detect": {
+        "jsx": [
+          "Text"
+        ],
+        "regex": [
+          "\\btypeStyles\\b",
+          "var\\(\\s*--semantic-typography-"
+        ]
+      },
+      "source": "CHANGELOG.md:41"
+    },
+    {
+      "id": "0.21.0/behavior/Alert-role",
+      "kind": "behavior",
+      "impact": "behavior",
+      "plain": "An info or success Alert now has role=\"status\" instead of role=\"alert\", so tests that find it by role must look for status.",
+      "detect": {
+        "jsx": [
+          "Alert"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/behavior/Badge-dot-role",
+      "kind": "behavior",
+      "impact": "behavior",
+      "plain": "A labelled dot Badge now has role=\"img\" instead of role=\"status\", so tests that find it by role must look for img.",
+      "detect": {
+        "regex": [
+          "<Badge\\b[^>]*\\bdot\\b"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/behavior/Badge-label-warning",
+      "kind": "behavior",
+      "impact": "none",
+      "plain": "A Badge with label but no dot now warns once in development, because label only names a dot badge, so put the text in children instead.",
+      "detect": {
+        "regex": [
+          "<Badge\\b(?![^>]*\\bdot\\b)[^>]*\\blabel="
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/behavior/Button-Card-tone-className",
+      "kind": "behavior",
+      "impact": "behavior",
+      "plain": "A className on Button or Card can now override the colours a tone sets, so check any toned Button or Card that also passes colour classes.",
+      "detect": {
+        "regex": [
+          "<(?:Button|Card)\\b(?=[^>]*\\btone=)(?=[^>]*\\bclassName=)"
+        ]
+      },
+      "source": "CHANGELOG.md:53"
+    },
+    {
+      "id": "0.21.0/behavior/Combobox-focus",
+      "kind": "behavior",
+      "impact": "behavior",
+      "plain": "Combobox now returns focus to its trigger after Escape or a pick.",
+      "detect": {
+        "jsx": [
+          "Combobox"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/behavior/Toggle-role-switch",
+      "kind": "behavior",
+      "impact": "behavior",
+      "plain": "Toggle's input now has role=\"switch\", so tests that find it by role checkbox must look for switch.",
+      "detect": {
+        "jsx": [
+          "Toggle"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/behavior/eslint-no-raw-controls",
+      "kind": "behavior",
+      "impact": "breaking",
+      "plain": "The HDS ESLint plugin's recommended config now fails raw <button>, <input>, <select>, <textarea> and <form> (hds/no-raw-controls), so use Button, Input, Select, Textarea and Form instead or set the rule to 'off'.",
+      "detect": {
+        "bareImports": [
+          "@hirobius/eslint-plugin-hds"
+        ]
+      },
+      "source": "CHANGELOG.md:7"
+    },
+    {
+      "id": "0.21.0/behavior/one-tab-stop",
+      "kind": "behavior",
+      "impact": "behavior",
+      "plain": "Checkbox, Radio and Toggle now take one tab stop each instead of two, so keyboard tests that press Tab twice per control must press it once.",
+      "detect": {
+        "jsx": [
+          "Checkbox",
+          "Radio",
+          "Toggle"
+        ]
+      },
+      "source": "CHANGELOG.md:15"
+    },
+    {
+      "id": "0.21.0/exports/./eslint-plugin",
+      "kind": "exports",
+      "impact": "additive",
+      "plain": "The ESLint plugin now ships in the package, so import hds from '@hirobius/design-system/eslint-plugin' and drop the separate @hirobius/eslint-plugin-hds dependency.",
+      "detect": {
+        "bareImports": [
+          "@hirobius/eslint-plugin-hds"
+        ]
+      },
+      "done": {
+        "regex": [
+          "@hirobius/design-system/eslint-plugin['\"]"
+        ]
+      },
+      "facts": [
+        "exports-key-added:./eslint-plugin"
+      ],
+      "source": "CHANGELOG.md:7"
+    },
+    {
+      "id": "0.21.0/manual/fonts-css",
+      "kind": "manual",
+      "impact": "look",
+      "plain": "Add import '@hirobius/design-system/fonts.css' next to your tokens.css or styles.css import, or text renders in the system font instead of Satoshi and Geist Mono.",
+      "detect": {
+        "regex": [
+          "@hirobius/design-system/(?:tokens|styles)\\.css['\"]"
+        ]
+      },
+      "done": {
+        "regex": [
+          "@hirobius/design-system/fonts\\.css['\"]"
+        ]
+      },
+      "facts": [
+        "exports-key-added:./fonts.css"
+      ],
+      "source": "CHANGELOG.md:28"
+    }
+  ]
+}

package/upgrade/releases/0.22.0.json

@@ -0,0 +1,94 @@
+{
+  "version": "0.22.0",
+  "date": "2026-10-08",
+  "bump": "minor",
+  "summary": "3 changes to make by hand (1 breaking), 1 that looks different and 2 deprecations.",
+  "backfilled": false,
+  "steps": [
+    {
+      "id": "0.22.0/deprecated/Divider.strong",
+      "kind": "deprecated",
+      "impact": "none",
+      "plain": "Divider's strong prop, deprecated since before 0.16.0, still works; use variant=\"strong\" instead.",
+      "detect": {
+        "regex": [
+          "<Divider\\b[^>]*\\sstrong\\b"
+        ]
+      },
+      "removeIn": "1.0.0",
+      "source": "CHANGELOG.md:26"
+    },
+    {
+      "id": "0.22.0/deprecated/InlineCode.compact",
+      "kind": "deprecated",
+      "impact": "none",
+      "plain": "InlineCode's compact prop, deprecated since before 0.16.0, still works; use density=\"compact\" instead.",
+      "detect": {
+        "regex": [
+          "<InlineCode\\b[^>]*\\scompact\\b"
+        ]
+      },
+      "removeIn": "1.0.0",
+      "source": "CHANGELOG.md:26"
+    },
+    {
+      "id": "0.22.0/value-changed/manifest-figma-file-key",
+      "kind": "value-changed",
+      "impact": "behavior",
+      "plain": "The figmaUrl of each component in the ./manifest export (public/hds-manifest.json) now points at file 2VgBbVpKiDnu0aftJEVyBQ, \"HDS Tokens & Components\"; node ids are unchanged, so a stored link needs only the new file key.",
+      "detect": {
+        "regex": [
+          "\\bfigmaUrl\\b"
+        ]
+      },
+      "source": "CHANGELOG.md:24"
+    },
+    {
+      "id": "0.22.0/value-changed/tokens-json-dtcg",
+      "kind": "value-changed",
+      "impact": "breaking",
+      "plain": "The raw tokens (the tokens export and hirobius.tokens.json) are strict DTCG now, so read semantic.motion.*.$value.timingFunction instead of .easing, and the elastic spring and each semantic.elevation level from $extensions[\"com.hirobius.hds\"].$value.",
+      "detect": {
+        "imports": [
+          {
+            "from": "@hirobius/design-system",
+            "names": [
+              "tokens"
+            ]
+          }
+        ],
+        "regex": [
+          "hirobius\\.tokens\\.json"
+        ]
+      },
+      "source": "CHANGELOG.md:19"
+    },
+    {
+      "id": "0.22.0/look/component-tag-lineHeight",
+      "kind": "look",
+      "impact": "look",
+      "plain": "--component-tag-lineHeight is now 1.5 instead of an invalid value the browser ignored, so text that reads it gets that line height.",
+      "detect": {
+        "cssVars": [
+          "--component-tag-lineHeight"
+        ],
+        "regex": [
+          "\\bcomponent\\.tag\\.lineHeight\\b"
+        ]
+      },
+      "source": "CHANGELOG.md:19"
+    },
+    {
+      "id": "0.22.0/behavior/hds-mcp-core-flag",
+      "kind": "behavior",
+      "impact": "behavior",
+      "plain": "The hds-mcp get_component tool now marks core: true only on the 43 ratified core components and recommended: true on the wider set AGENTS.md recommends, and list_core names its set, so read recommended where you relied on core for that wider set.",
+      "detect": {
+        "regex": [
+          "\\bhds-mcp\\b"
+        ]
+      },
+      "source": "CHANGELOG.md:23"
+    }
+  ]
+}