@pantoken/pantoken 0.2.6 → 0.2.8

package/dist/model.json

@@ -4,7 +4,7 @@
     "kind": "component",
     "className": ".instui-button",
     "summary": "An accessible action control, styled from the token palette; primary by default.",
-    "remarks": "The AI variants layer two gradients — a padding-box fill and a border-box stroke — for their frame, and `-color-ai-secondary` can't paint gradient text and a fill at once, so its centre stays transparent at rest and fills on hover or active. Ghost hover and active derive a low-opacity, slightly-darkened brand wash rather than using the raw hover-background tokens, which would print same-colour-on-same-colour text. Also sets its own icon/label `gap` and horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values.",
+    "remarks": "The AI variants layer two gradients — a padding-box fill and a border-box stroke — for their frame, and `-color-ai-secondary` can't paint gradient text and a fill at once, so its centre stays transparent at rest and fills on hover or active. `-without-background` hover and active derive a low-opacity, slightly-darkened brand wash rather than using the raw hover-background tokens, which would print same-colour-on-same-colour text. Also sets its own icon/label `gap` and horizontal `padding`; chaining a `-gap-*`/`-p-*`/`-padding-*` spacing utility modifier overrides those built-in values. The optional `.instui-button-group` wrapper maps Figma's `.buttonGroup` and owns adjacent button spacing.",
     "accessibility": "Drive the `-toggle` variant's pressed state with `aria-pressed`, and mark a disabled button with `aria-disabled` (or the native `disabled`).",
     "modifiers": [
       {
@@ -25,11 +25,19 @@
         "value": "danger",
         "description": "A destructive action."
       },
+      {
+        "name": "-color-primary",
+        "prop": "color",
+        "value": "primary",
+        "description": "(default) the primary action."
+      },
       {
         "name": "-color-primary-inverse",
         "prop": "color",
         "value": "primary-inverse",
-        "description": "Primary action for dark backgrounds."
+        "deprecated": {
+          "canonical": "-on-color"
+        }
       },
       {
         "name": "-color-secondary",
@@ -63,7 +71,9 @@
       {
         "name": "-ghost",
         "prop": "ghost",
-        "description": "Outline (ghost) style: a border in the colour's ghost tokens, no fill."
+        "deprecated": {
+          "canonical": "-color-tertiary"
+        }
       },
       {
         "name": "-icon-*",
@@ -71,6 +81,12 @@
         "pattern": true,
         "description": "Render a glyph from the icon set before the label (e.g. `-icon-arrow-right`), painted in the button's text colour; pair with `-shape-square`/`-shape-circle` for an icon-only button."
       },
+      {
+        "name": "-on-color",
+        "prop": "on",
+        "value": "color",
+        "description": "For a button placed on a coloured (non-neutral) surface. Composed with `-color-primary` (default) fills white with dark text; composed with `-color-secondary` stays transparent with a white border and text."
+      },
       {
         "name": "-shape-circle",
         "prop": "shape",
@@ -95,6 +111,18 @@
         "value": "lg",
         "description": "Large."
       },
+      {
+        "name": "-size-md",
+        "prop": "size",
+        "value": "md",
+        "description": "(default) medium size."
+      },
+      {
+        "name": "-size-medium",
+        "prop": "size",
+        "value": "medium",
+        "description": "(default) medium size. Long-form alias of `-size-md`."
+      },
       {
         "name": "-size-sm",
         "prop": "size",
@@ -211,33 +239,18 @@
       {
         "name": "--instui-color-background-interactive-action-primary-base"
       },
-      {
-        "name": "--instui-color-background-interactive-action-primary-disabled"
-      },
       {
         "name": "--instui-color-background-interactive-action-primary-hover"
       },
       {
         "name": "--instui-color-background-interactive-action-secondary-active"
       },
-      {
-        "name": "--instui-color-background-interactive-action-secondary-base"
-      },
-      {
-        "name": "--instui-color-background-interactive-action-secondary-hover"
-      },
       {
         "name": "--instui-color-background-interactive-action-success-base"
       },
       {
         "name": "--instui-color-background-interactive-action-success-hover"
       },
-      {
-        "name": "--instui-color-background-interactive-action-tertiary-active"
-      },
-      {
-        "name": "--instui-color-background-interactive-action-tertiary-hover"
-      },
       {
         "name": "--instui-color-background-muted"
       },
@@ -260,16 +273,16 @@
         "name": "--instui-color-stroke-interactive-action-ai-top-gradient-hover"
       },
       {
-        "name": "--instui-color-stroke-interactive-action-secondary-active"
+        "name": "--instui-color-stroke-interactive-action-primary-active"
       },
       {
-        "name": "--instui-color-stroke-interactive-action-secondary-base"
+        "name": "--instui-color-stroke-interactive-action-primary-base"
       },
       {
-        "name": "--instui-color-stroke-interactive-action-secondary-hover"
+        "name": "--instui-color-stroke-interactive-action-primary-hover"
       },
       {
-        "name": "--instui-color-stroke-interactive-action-tertiary-base"
+        "name": "--instui-color-stroke-interactive-action-secondary-active"
       },
       {
         "name": "--instui-color-text-interactive-action-ai-active"
@@ -289,9 +302,6 @@
       {
         "name": "--instui-color-text-interactive-action-primary-base"
       },
-      {
-        "name": "--instui-color-text-interactive-action-primary-disabled"
-      },
       {
         "name": "--instui-color-text-interactive-action-secondary-base"
       },
@@ -299,7 +309,13 @@
         "name": "--instui-color-text-interactive-action-status-base"
       },
       {
-        "name": "--instui-color-text-interactive-action-tertiary-base"
+        "name": "--instui-component-base-button-ai-disabled-background-color"
+      },
+      {
+        "name": "--instui-component-base-button-ai-disabled-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-ai-disabled-text-color"
       },
       {
         "name": "--instui-component-base-button-border-radius"
@@ -322,6 +338,18 @@
       {
         "name": "--instui-component-base-button-medium-padding-horizontal"
       },
+      {
+        "name": "--instui-component-base-button-primary-color"
+      },
+      {
+        "name": "--instui-component-base-button-primary-disabled-background-color"
+      },
+      {
+        "name": "--instui-component-base-button-primary-disabled-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-primary-ghost-active-background"
+      },
       {
         "name": "--instui-component-base-button-primary-ghost-background"
       },
@@ -331,6 +359,9 @@
       {
         "name": "--instui-component-base-button-primary-ghost-color"
       },
+      {
+        "name": "--instui-component-base-button-primary-ghost-hover-background"
+      },
       {
         "name": "--instui-component-base-button-primary-inverse-active-background"
       },
@@ -343,23 +374,92 @@
       {
         "name": "--instui-component-base-button-primary-inverse-color"
       },
+      {
+        "name": "--instui-component-base-button-primary-inverse-ghost-active-background"
+      },
+      {
+        "name": "--instui-component-base-button-primary-inverse-ghost-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-primary-inverse-ghost-color"
+      },
+      {
+        "name": "--instui-component-base-button-primary-inverse-ghost-hover-background"
+      },
       {
         "name": "--instui-component-base-button-primary-inverse-hover-background"
       },
       {
         "name": "--instui-component-base-button-primary-on-color-active-border-color"
       },
+      {
+        "name": "--instui-component-base-button-primary-on-color-active-text-color"
+      },
+      {
+        "name": "--instui-component-base-button-primary-on-color-disabled-background-color"
+      },
+      {
+        "name": "--instui-component-base-button-primary-on-color-disabled-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-primary-on-color-disabled-text-color"
+      },
       {
         "name": "--instui-component-base-button-primary-on-color-hover-border-color"
       },
       {
-        "name": "--instui-component-base-button-secondary-ghost-background"
+        "name": "--instui-component-base-button-primary-on-color-hover-text-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-active-background"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-active-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-active-text-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-background"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-disabled-background-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-disabled-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-disabled-text-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-hover-background"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-hover-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-hover-text-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-on-color-active-border-color"
       },
       {
-        "name": "--instui-component-base-button-secondary-ghost-border-color"
+        "name": "--instui-component-base-button-secondary-on-color-active-text-color"
       },
       {
-        "name": "--instui-component-base-button-secondary-ghost-color"
+        "name": "--instui-component-base-button-secondary-on-color-disabled-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-on-color-disabled-text-color"
+      },
+      {
+        "name": "--instui-component-base-button-secondary-on-color-hover-text-color"
       },
       {
         "name": "--instui-component-base-button-small-font-size"
@@ -370,6 +470,30 @@
       {
         "name": "--instui-component-base-button-small-padding-horizontal"
       },
+      {
+        "name": "--instui-component-base-button-tertiary-active-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-tertiary-active-text-color"
+      },
+      {
+        "name": "--instui-component-base-button-tertiary-disabled-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-tertiary-disabled-text-color"
+      },
+      {
+        "name": "--instui-component-base-button-tertiary-hover-border-color"
+      },
+      {
+        "name": "--instui-component-base-button-tertiary-hover-text-color"
+      },
+      {
+        "name": "--instui-component-icon-action-ai-disabled-color"
+      },
+      {
+        "name": "--instui-component-shared-tokens-spacing-gap-buttons"
+      },
       {
         "name": "--instui-font-family-base"
       },
@@ -389,8 +513,22 @@
     "layers": [],
     "conditions": [],
     "examples": [
-      "<button class=\"instui-button\">Primary</button>"
+      "```html\n<div class=\"instui-button-group\">\n  <button class=\"instui-button\">Primary</button>\n  <button class=\"instui-button -color-secondary\">Secondary</button>\n</div>\n```"
+    ],
+    "structure": [
+      {
+        "selector": ".instui-button-group",
+        "children": [
+          {
+            "selector": ".instui-button",
+            "children": [],
+            "cardinality": "one-or-more"
+          }
+        ],
+        "cardinality": "optional"
+      }
     ],
+    "structureDescription": "A group wrapper lays out adjacent buttons with the shared button gap.",
     "demo": "self:button",
     "see": [],
     "annotations": [],
@@ -424,7 +562,7 @@
     "kind": "component",
     "className": ".instui-alert",
     "summary": "An inline message with a status colour bar and a masked status glyph from the shared icon set.",
-    "remarks": "A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it.",
+    "remarks": "A custom `-icon-<name>` swaps the status glyph but keeps the variant's coloured bar; the bar fill is re-asserted at higher specificity so the shared icon painter doesn't consume it. A direct close button defaults to small; add a size modifier to override it.",
     "releaseStage": "stable",
     "accessibility": "For an important message, add `role=\"alert\"` or an `aria-live` region so assistive tech announces it; the dismiss control is a labelled close button (the `.instui-close-button` in the example carries `aria-label=\"Close\"`).",
     "modifiers": [
@@ -639,6 +777,9 @@
       {
         "name": "--instui-component-base-button-medium-height"
       },
+      {
+        "name": "--instui-component-base-button-small-height"
+      },
       {
         "name": "--instui-elevation-above"
       },
@@ -689,7 +830,7 @@
     "layers": [],
     "conditions": [],
     "examples": [
-      "-nocard\n```html\n<div class=\"instui-alert -icon-megaphone --mb-md\">\n  An alert with the default <code>info</code> color, and a custom icon.\n</div>\n<div class=\"instui-alert -color-success\">\n  Congratulations! You're using the \"success\" color.\n  <button class=\"instui-close-button -size-sm\" aria-label=\"Close\"></button>\n</div>\n```"
+      "-nocard\n```html\n<div class=\"instui-alert -icon-megaphone --mb-md\">\n  An alert with the default <code>info</code> color, and a custom icon.\n</div>\n<div class=\"instui-alert -color-success\">\n  Congratulations! You're using the \"success\" color.\n  <button class=\"instui-close-button\" aria-label=\"Close\"></button>\n</div>\n```"
     ],
     "structure": [
       {
@@ -732,7 +873,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 299,
+      "line": 574,
       "column": 1
     }
   },
@@ -937,7 +1078,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 512,
+      "line": 791,
       "column": 1
     }
   },
@@ -946,6 +1087,7 @@
     "kind": "component",
     "className": ".instui-pill",
     "summary": "A compact status label; add a leading glyph with the shared `-icon-<name>` form.",
+    "remarks": "Unlike `badge`, which shows a count, or `tag`, which is removable, the pill is a static status label; its leading glyph is a masked `::before`, not an `<img>`.",
     "modifiers": [
       {
         "name": "-color-danger",
@@ -1103,7 +1245,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 680,
+      "line": 959,
       "column": 1
     }
   },
@@ -1272,7 +1414,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 758,
+      "line": 1038,
       "column": 1
     }
   },
@@ -1686,7 +1828,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 856,
+      "line": 1136,
       "column": 1
     }
   },
@@ -1775,7 +1917,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1241,
+      "line": 1521,
       "column": 1
     }
   },
@@ -1889,7 +2031,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1293,
+      "line": 1573,
       "column": 1
     }
   },
@@ -1971,7 +2113,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1387,
+      "line": 1667,
       "column": 1
     }
   },
@@ -2095,7 +2237,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1420,
+      "line": 1700,
       "column": 1
     }
   },
@@ -2273,7 +2415,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1486,
+      "line": 1766,
       "column": 1
     }
   },
@@ -2282,6 +2424,7 @@
     "kind": "component",
     "className": ".instui-img",
     "summary": "A styled `<img>` with display, crop, and effect modifiers that stack.",
+    "remarks": "Effects compose through the shared `--pantoken-img-filter` custom property, so `-with-grayscale` and `-with-blur` can apply together; the `-constrain-*` crop modifiers require the consumer to size the box explicitly.",
     "accessibility": "Provide meaningful `alt` text that describes the image, and use an empty `alt=\"\"` for purely decorative images so assistive tech skips them.",
     "modifiers": [
       {
@@ -2363,7 +2506,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1588,
+      "line": 1868,
       "column": 1
     }
   },
@@ -2491,7 +2634,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1643,
+      "line": 1924,
       "column": 1
     }
   },
@@ -2542,7 +2685,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1729,
+      "line": 2010,
       "column": 1
     }
   },
@@ -2589,7 +2732,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1759,
+      "line": 2040,
       "column": 1
     }
   },
@@ -2652,7 +2795,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1776,
+      "line": 2057,
       "column": 1
     }
   },
@@ -2722,7 +2865,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1818,
+      "line": 2099,
       "column": 1
     }
   },
@@ -2793,7 +2936,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1860,
+      "line": 2141,
       "column": 1
     }
   },
@@ -2869,7 +3012,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1887,
+      "line": 2168,
       "column": 1
     }
   },
@@ -3071,7 +3214,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1933,
+      "line": 2214,
       "column": 1
     }
   },
@@ -3202,7 +3345,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2040,
+      "line": 2321,
       "column": 1
     }
   },
@@ -3339,7 +3482,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2118,
+      "line": 2399,
       "column": 1
     }
   },
@@ -3399,7 +3542,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2193,
+      "line": 2474,
       "column": 1
     }
   },
@@ -3713,7 +3856,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2221,
+      "line": 2502,
       "column": 1
     }
   },
@@ -3996,7 +4139,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2492,
+      "line": 2773,
       "column": 1
     }
   },
@@ -4005,6 +4148,7 @@
     "kind": "component",
     "className": ".instui-spinner",
     "summary": "An animated loading ring; give it role=\"status\" and an aria-label.",
+    "remarks": "`-color-inverse` only repaints the animated top border segment, not the whole track, so it still reads correctly on a dark card without needing a separate track color.",
     "accessibility": "Give the spinner role=\"status\" and an aria-label so screen readers announce it as a live loading status.",
     "modifiers": [
       {
@@ -4122,7 +4266,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2785,
+      "line": 3066,
       "column": 1
     }
   },
@@ -4546,7 +4690,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2867,
+      "line": 3149,
       "column": 1
     }
   },
@@ -4643,7 +4787,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3095,
+      "line": 3377,
       "column": 1
     }
   },
@@ -4763,7 +4907,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3130,
+      "line": 3412,
       "column": 1
     }
   },
@@ -4831,7 +4975,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3197,
+      "line": 3479,
       "column": 1
     }
   },
@@ -4890,7 +5034,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3221,
+      "line": 3503,
       "column": 1
     }
   },
@@ -5080,7 +5224,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3242,
+      "line": 3524,
       "column": 1
     }
   },
@@ -5149,7 +5293,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3363,
+      "line": 3645,
       "column": 1
     }
   },
@@ -5206,7 +5350,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3396,
+      "line": 3678,
       "column": 1
     }
   },
@@ -5278,7 +5422,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3440,
+      "line": 3722,
       "column": 1
     }
   },
@@ -5402,7 +5546,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3475,
+      "line": 3757,
       "column": 1
     }
   },
@@ -5519,7 +5663,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3561,
+      "line": 3843,
       "column": 1
     }
   },
@@ -5528,6 +5672,7 @@
     "kind": "component",
     "className": ".instui-billboard",
     "summary": "A large empty-state or call-to-action block: a hero icon or image, a heading, and a message.",
+    "remarks": "The `.hero`/`.heading`/`.message` parts are composed by the consumer's markup, not enforced structure; `-clickable` only adds hover styling, so a real click target still needs `tabindex` and a keyboard handler.",
     "modifiers": [
       {
         "name": "-clickable",
@@ -5726,7 +5871,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3678,
+      "line": 3960,
       "column": 1
     }
   },
@@ -5850,7 +5995,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3943,
+      "line": 4226,
       "column": 1
     }
   },
@@ -6004,7 +6149,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4006,
+      "line": 4289,
       "column": 1
     }
   },
@@ -6013,6 +6158,7 @@
     "kind": "component",
     "className": ".instui-context-view",
     "summary": "An elevated callout with a caret, positionable on any side; works as a native `[popover]`.",
+    "remarks": "The caret is two stacked `::before`/`::after` triangles (border then fill) so it reads correctly against a matching surface; as a `[popover]` it needs the same open/`popovertarget` wiring as `popover`, but unlike `tooltip`, it dismisses on outside click or Escape.",
     "modifiers": [
       {
         "name": "-color-inverse",
@@ -6151,7 +6297,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4113,
+      "line": 4396,
       "column": 1
     }
   },
@@ -6261,7 +6407,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4313,
+      "line": 4597,
       "column": 1
     }
   },
@@ -6379,7 +6525,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4374,
+      "line": 4658,
       "column": 1
     }
   },
@@ -6463,7 +6609,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4464,
+      "line": 4748,
       "column": 1
     }
   },
@@ -6904,7 +7050,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4511,
+      "line": 4795,
       "column": 1
     }
   },
@@ -7058,7 +7204,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4775,
+      "line": 5059,
       "column": 1
     }
   },
@@ -7149,7 +7295,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4880,
+      "line": 5164,
       "column": 1
     }
   },
@@ -7302,7 +7448,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4934,
+      "line": 5218,
       "column": 1
     }
   },
@@ -7311,6 +7457,7 @@
     "kind": "component",
     "className": ".instui-file-drop",
     "summary": "A file dropzone with hover, accepted, and rejected states.",
+    "remarks": "The `-hover`/`-accepted`/`-rejected` classes are purely visual — actual drag-and-drop detection and file validation are the consumer's JS to wire up around the wrapped native input.",
     "accessibility": "Wrap a native `<input type=\"file\">` in the `<label>` drop zone so it stays a real, labelled file control that the keyboard and assistive tech can operate.",
     "modifiers": [
       {
@@ -7428,7 +7575,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5045,
+      "line": 5329,
       "column": 1
     }
   },
@@ -7521,7 +7668,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5101,
+      "line": 5386,
       "column": 1
     }
   },
@@ -7619,7 +7766,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5160,
+      "line": 5445,
       "column": 1
     }
   },
@@ -7812,7 +7959,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5211,
+      "line": 5496,
       "column": 1
     }
   },
@@ -7938,7 +8085,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5360,
+      "line": 5645,
       "column": 1
     }
   },
@@ -8038,7 +8185,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5461,
+      "line": 5746,
       "column": 1
     }
   },
@@ -8047,6 +8194,7 @@
     "kind": "component",
     "className": ".instui-popover",
     "summary": "An elevated surface for a native `[popover]`, positioned with CSS anchor positioning.",
+    "remarks": "Anchor positioning is Chromium-only; the `@supports` guard means `-placement-*` is silently inert elsewhere and the UA centers the popover in the top layer instead of failing.",
     "modifiers": [
       {
         "name": "-placement-bottom",
@@ -8168,7 +8316,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5506,
+      "line": 5791,
       "column": 1
     }
   },
@@ -8379,7 +8527,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5597,
+      "line": 5883,
       "column": 1
     }
   },
@@ -8388,6 +8536,7 @@
     "kind": "component",
     "className": ".instui-tooltip",
     "summary": "A CSS hover and focus tooltip bubble, positionable on any side.",
+    "remarks": "Toggling is pure CSS (`:hover`/`:focus-within`), so the bubble only reaches keyboard users through a focusable trigger; unlike `popover`, it isn't dismissible or click-triggered.",
     "accessibility": "Point the trigger at the bubble with aria-describedby and give the bubble role=\"tooltip\".",
     "modifiers": [
       {
@@ -8485,7 +8634,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5773,
+      "line": 6059,
       "column": 1
     }
   },
@@ -8494,6 +8643,7 @@
     "kind": "component",
     "className": ".instui-range-input",
     "summary": "A styled range slider with an inverse value bubble.",
+    "remarks": "Each vendor thumb/track pseudo-element needs its own separate rule — grouping them in one selector list would invalidate the whole rule in browsers that don't recognize the other vendor's pseudo.",
     "accessibility": "The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.",
     "modifiers": [
       {
@@ -8631,7 +8781,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5857,
+      "line": 6144,
       "column": 1
     }
   },
@@ -8689,7 +8839,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6005,
+      "line": 6293,
       "column": 1
     }
   },
@@ -8733,7 +8883,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6041,
+      "line": 6329,
       "column": 1
     }
   },
@@ -8742,6 +8892,7 @@
     "kind": "component",
     "className": ".instui-heading",
     "summary": "Heading typography from `-level-h1` to `-level-h6`.",
+    "remarks": "The `-variant-*` presets override a `-level-*`'s font-size and font-weight, so combine only one of each family per element.",
     "accessibility": "These classes set the visual level only, so render a real `<h1>`–`<h6>` (or use `role=\"heading\"` with `aria-level`) to convey the heading level.",
     "modifiers": [
       {
@@ -8762,6 +8913,12 @@
         "value": "ai",
         "description": "AI-accent colour."
       },
+      {
+        "name": "-color-primary",
+        "prop": "color",
+        "value": "primary",
+        "description": "(default) Primary colour."
+      },
       {
         "name": "-color-primary-inverse",
         "prop": "color",
@@ -8988,7 +9145,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6067,
+      "line": 6355,
       "column": 1
     }
   },
@@ -8997,6 +9154,7 @@
     "kind": "component",
     "className": ".instui-text",
     "summary": "Body-text typography with size, weight, colour, and style modifiers.",
+    "remarks": "The `-variant-*` presets and the `-color-*`/`-size-*`/`-weight-*` modifiers all compose on the same element; unlike `heading`, it renders no implicit semantic level.",
     "releaseStage": "stable",
     "modifiers": [
       {
@@ -9368,7 +9526,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6131,
+      "line": 6491,
       "column": 1
     }
   },
@@ -9376,14 +9534,23 @@
     "name": "close-button",
     "kind": "component",
     "className": ".instui-close-button",
-    "summary": "A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.",
-    "accessibility": "Give the icon-only button an `aria-label` (e.g. \"Close\").",
+    "summary": "A transparent icon button that draws its own × glyph, in three sizes plus an on-color variant.",
+    "remarks": "Always renders as an icon-only control with no visible label, so an `aria-label` is required, not optional; compare to `button`'s `-without-background` ghost variant, which keeps a text label.",
+    "accessibility": "Give the icon-only button an `aria-label` (e.g. \"Close\"), and mark a disabled button with `aria-disabled` (or the native `disabled`).",
     "modifiers": [
       {
         "name": "-color-inverse",
         "prop": "color",
         "value": "inverse",
-        "description": "For dark backgrounds."
+        "deprecated": {
+          "canonical": "-on-color"
+        }
+      },
+      {
+        "name": "-on-color",
+        "prop": "on",
+        "value": "color",
+        "description": "For a close button placed on a coloured (non-neutral) surface."
       },
       {
         "name": "-size-large",
@@ -9397,6 +9564,18 @@
         "value": "lg",
         "description": "Large."
       },
+      {
+        "name": "-size-md",
+        "prop": "size",
+        "value": "md",
+        "description": "(default) medium size."
+      },
+      {
+        "name": "-size-medium",
+        "prop": "size",
+        "value": "medium",
+        "description": "(default) medium size. Long-form alias of `-size-md`."
+      },
       {
         "name": "-size-sm",
         "prop": "size",
@@ -9418,34 +9597,56 @@
         "description": "The × glyph, masked in `currentColor`."
       }
     ],
-    "states": [],
+    "states": [
+      {
+        "name": "aria-disabled=true",
+        "kind": "attribute",
+        "selector": "[aria-disabled=\"true\"]"
+      },
+      {
+        "name": "disabled",
+        "kind": "pseudo-class"
+      }
+    ],
     "slots": [],
     "todos": [],
     "cssPropertiesConsumed": [
       {
-        "name": "--instui-color-background-interactive-action-tertiary-active"
+        "name": "--instui-component-base-button-border-radius"
       },
       {
-        "name": "--instui-color-background-interactive-action-tertiary-hover"
+        "name": "--instui-component-base-button-large-height"
       },
       {
-        "name": "--instui-color-text-interactive-action-secondary-base"
+        "name": "--instui-component-base-button-medium-height"
       },
       {
-        "name": "--instui-component-base-button-border-radius"
+        "name": "--instui-component-base-button-primary-ghost-active-background"
       },
       {
-        "name": "--instui-component-base-button-large-height"
+        "name": "--instui-component-base-button-primary-ghost-hover-background"
       },
       {
-        "name": "--instui-component-base-button-medium-height"
+        "name": "--instui-component-base-button-primary-inverse-ghost-active-background"
       },
       {
-        "name": "--instui-component-base-button-primary-inverse-ghost-color"
+        "name": "--instui-component-base-button-primary-inverse-ghost-hover-background"
       },
       {
         "name": "--instui-component-base-button-small-height"
       },
+      {
+        "name": "--instui-component-icon-base-color"
+      },
+      {
+        "name": "--instui-component-icon-disabled-base-color"
+      },
+      {
+        "name": "--instui-component-icon-disabled-on-color"
+      },
+      {
+        "name": "--instui-component-icon-on-color"
+      },
       {
         "name": "--instui-icon-x"
       },
@@ -9484,7 +9685,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6330,
+      "line": 6691,
       "column": 1
     }
   },
@@ -9663,7 +9864,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6398,
+      "line": 6795,
       "column": 1
     }
   },
@@ -9872,7 +10073,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6526,
+      "line": 6923,
       "column": 1
     }
   },
@@ -10003,7 +10204,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6683,
+      "line": 7080,
       "column": 1
     }
   },
@@ -10114,7 +10315,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6781,
+      "line": 7178,
       "column": 1
     }
   },
@@ -10123,6 +10324,7 @@
     "kind": "component",
     "className": ".instui-text-input",
     "summary": "A styled native `<input>` — including `date`, `time`, and `datetime-local`, where the browser supplies the picker — with validation states and sizes.",
+    "remarks": "Shares its border, background, and state chrome with `text-area`, `simple-select`, `number-input`, and `input-group`; for `date`/`time`/`datetime-local` types the browser supplies its own picker UI, which this stylesheet doesn't style.",
     "modifiers": [
       {
         "name": "-disabled",
@@ -10151,6 +10353,18 @@
         "value": "lg",
         "description": "Large."
       },
+      {
+        "name": "-size-md",
+        "prop": "size",
+        "value": "md",
+        "description": "(default) Medium."
+      },
+      {
+        "name": "-size-medium",
+        "prop": "size",
+        "value": "medium",
+        "description": "(default) Medium. Long-form alias of `-size-md`."
+      },
       {
         "name": "-size-sm",
         "prop": "size",
@@ -10283,7 +10497,7 @@
     "layers": [],
     "conditions": [],
     "examples": [
-      "<input class=\"instui-text-input\" placeholder=\"Default\">"
+      "```html\n<input class=\"instui-text-input\" placeholder=\"Default\">\n```"
     ],
     "see": [],
     "annotations": [],
@@ -10320,7 +10534,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6867,
+      "line": 7264,
       "column": 1
     }
   },
@@ -10329,6 +10543,7 @@
     "kind": "component",
     "className": ".instui-text-area",
     "summary": "A styled, resizable native `<textarea>` with the same states and sizes as the text input.",
+    "remarks": "Shares its border, background, and focus states with `text-input` and `simple-select`; only `resize: vertical` and the taller minimum height are unique to it.",
     "modifiers": [
       {
         "name": "-disabled",
@@ -10357,6 +10572,18 @@
         "value": "lg",
         "description": "Large."
       },
+      {
+        "name": "-size-md",
+        "prop": "size",
+        "value": "md",
+        "description": "(default) Medium."
+      },
+      {
+        "name": "-size-medium",
+        "prop": "size",
+        "value": "medium",
+        "description": "(default) Medium. Long-form alias of `-size-md`."
+      },
       {
         "name": "-size-sm",
         "prop": "size",
@@ -10499,7 +10726,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6934,
+      "line": 7388,
       "column": 1
     }
   },
@@ -10508,6 +10735,7 @@
     "kind": "component",
     "className": ".instui-simple-select",
     "summary": "A styled native `<select>` with a caret, matching the text-input states and sizes.",
+    "remarks": "Wraps a plain native `<select>` with no custom dropdown/menu markup, so browser-native option rendering and keyboard behavior apply as-is; it shares its field chrome with `text-input`.",
     "modifiers": [
       {
         "name": "-disabled",
@@ -10536,6 +10764,18 @@
         "value": "lg",
         "description": "Large."
       },
+      {
+        "name": "-size-md",
+        "prop": "size",
+        "value": "md",
+        "description": "(default) Medium."
+      },
+      {
+        "name": "-size-medium",
+        "prop": "size",
+        "value": "medium",
+        "description": "(default) Medium. Long-form alias of `-size-md`."
+      },
       {
         "name": "-size-sm",
         "prop": "size",
@@ -10708,7 +10948,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7000,
+      "line": 7497,
       "column": 1
     }
   },
@@ -10717,6 +10957,7 @@
     "kind": "component",
     "className": ".instui-input-group",
     "summary": "A facade around a text input with leading and trailing icon slots.",
+    "remarks": "Wraps the same field chrome as `text-input` with icon slots either side of it; `-should-not-wrap` is only needed when the group's contents would otherwise overflow onto a second line.",
     "modifiers": [
       {
         "name": "-disabled",
@@ -10751,6 +10992,18 @@
         "value": "lg",
         "description": "Large."
       },
+      {
+        "name": "-size-md",
+        "prop": "size",
+        "value": "md",
+        "description": "Medium."
+      },
+      {
+        "name": "-size-medium",
+        "prop": "size",
+        "value": "medium",
+        "description": "Medium. Long-form alias of `-size-md`."
+      },
       {
         "name": "-size-sm",
         "prop": "size",
@@ -10769,7 +11022,16 @@
         "description": "Success (valid) state."
       }
     ],
-    "parts": [],
+    "parts": [
+      {
+        "name": "after",
+        "description": "The trailing content slot."
+      },
+      {
+        "name": "before",
+        "description": "The leading content slot."
+      }
+    ],
     "shadowParts": [],
     "pseudoElements": [
       {
@@ -10920,7 +11182,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7081,
+      "line": 7639,
       "column": 1
     }
   },
@@ -10929,6 +11191,7 @@
     "kind": "component",
     "className": ".instui-number-input",
     "summary": "A number-input facade with a +/- spinner column.",
+    "remarks": "The `.arrows` buttons are `aria-hidden` and purely presentational — incrementing/decrementing the value on click is the consumer's JS to wire up.",
     "accessibility": "Put the accessible name on the `<input>` (e.g. `aria-label`) so the field owns the value; the +/- spinner buttons are decorative and marked `aria-hidden=\"true\"`.",
     "modifiers": [
       {
@@ -10958,6 +11221,18 @@
         "value": "lg",
         "description": "Large."
       },
+      {
+        "name": "-size-md",
+        "prop": "size",
+        "value": "md",
+        "description": "(default) Medium."
+      },
+      {
+        "name": "-size-medium",
+        "prop": "size",
+        "value": "medium",
+        "description": "(default) Medium. Long-form alias of `-size-md`."
+      },
       {
         "name": "-size-sm",
         "prop": "size",
@@ -11189,7 +11464,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7165,
+      "line": 7794,
       "column": 1
     }
   },
@@ -11198,6 +11473,7 @@
     "kind": "component",
     "className": ".instui-in-place-edit",
     "summary": "A [contenteditable] that reads as text until focused, then shows input chrome.",
+    "remarks": "The input chrome only appears while focused; `-readonly` suppresses both the hover and focus affordances so the element always reads as plain inline text.",
     "accessibility": "Give the editable element `role=\"textbox\"` and an accessible name (`aria-label`).",
     "modifiers": [
       {
@@ -11282,7 +11558,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7304,
+      "line": 8021,
       "column": 1
     }
   },
@@ -11718,7 +11994,7 @@
     "layers": [],
     "conditions": [],
     "examples": [
-      "<div class=\"instui-view -background-secondary -border-radius-medium -shadow-resting\">A card-like surface.</div>"
+      "```html\n<div class=\"instui-view -background-secondary -border-radius-medium -shadow-resting\">\n  A card-like surface.\n</div>\n```"
     ],
     "see": [],
     "annotations": [],
@@ -11738,7 +12014,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7354,
+      "line": 8072,
       "column": 1
     }
   },
@@ -11801,7 +12077,7 @@
     },
     "global": true,
     "source": {
-      "line": 7475,
+      "line": 8204,
       "column": 1
     }
   },
@@ -13030,7 +13306,7 @@
     },
     "global": true,
     "source": {
-      "line": 7501,
+      "line": 8230,
       "column": 1
     }
   },
@@ -13105,7 +13381,7 @@
     },
     "global": true,
     "source": {
-      "line": 7756,
+      "line": 8485,
       "column": 1
     }
   },
@@ -13210,7 +13486,7 @@
     },
     "global": true,
     "source": {
-      "line": 7776,
+      "line": 8505,
       "column": 1
     }
   },
@@ -13303,7 +13579,7 @@
     },
     "global": true,
     "source": {
-      "line": 7806,
+      "line": 8535,
       "column": 1
     }
   },
@@ -13385,7 +13661,7 @@
     },
     "global": true,
     "source": {
-      "line": 7832,
+      "line": 8561,
       "column": 1
     }
   },
@@ -13452,7 +13728,7 @@
     },
     "global": true,
     "source": {
-      "line": 7850,
+      "line": 8579,
       "column": 1
     }
   },
@@ -13645,7 +13921,7 @@
     },
     "global": true,
     "source": {
-      "line": 7866,
+      "line": 8595,
       "column": 1
     }
   },
@@ -13809,7 +14085,7 @@
     },
     "global": true,
     "source": {
-      "line": 7959,
+      "line": 8688,
       "column": 1
     }
   },
@@ -13862,7 +14138,7 @@
     },
     "global": true,
     "source": {
-      "line": 8030,
+      "line": 8759,
       "column": 1
     }
   },
@@ -13951,7 +14227,7 @@
     },
     "global": true,
     "source": {
-      "line": 8050,
+      "line": 8779,
       "column": 1
     }
   },
@@ -14034,7 +14310,7 @@
     },
     "global": true,
     "source": {
-      "line": 8449,
+      "line": 9178,
       "column": 1
     }
   },
@@ -14620,7 +14896,7 @@
     },
     "global": true,
     "source": {
-      "line": 8480,
+      "line": 9209,
       "column": 1
     }
   }