@pantoken/pantoken 0.2.7 → 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
     }
   },
@@ -1104,7 +1245,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 680,
+      "line": 959,
       "column": 1
     }
   },
@@ -1273,7 +1414,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 759,
+      "line": 1038,
       "column": 1
     }
   },
@@ -1687,7 +1828,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 857,
+      "line": 1136,
       "column": 1
     }
   },
@@ -1776,7 +1917,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1242,
+      "line": 1521,
       "column": 1
     }
   },
@@ -1890,7 +2031,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1294,
+      "line": 1573,
       "column": 1
     }
   },
@@ -1972,7 +2113,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1388,
+      "line": 1667,
       "column": 1
     }
   },
@@ -2096,7 +2237,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1421,
+      "line": 1700,
       "column": 1
     }
   },
@@ -2274,7 +2415,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1487,
+      "line": 1766,
       "column": 1
     }
   },
@@ -2365,7 +2506,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1589,
+      "line": 1868,
       "column": 1
     }
   },
@@ -2493,7 +2634,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1645,
+      "line": 1924,
       "column": 1
     }
   },
@@ -2544,7 +2685,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1731,
+      "line": 2010,
       "column": 1
     }
   },
@@ -2591,7 +2732,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1761,
+      "line": 2040,
       "column": 1
     }
   },
@@ -2654,7 +2795,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1778,
+      "line": 2057,
       "column": 1
     }
   },
@@ -2724,7 +2865,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1820,
+      "line": 2099,
       "column": 1
     }
   },
@@ -2795,7 +2936,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1862,
+      "line": 2141,
       "column": 1
     }
   },
@@ -2871,7 +3012,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1889,
+      "line": 2168,
       "column": 1
     }
   },
@@ -3073,7 +3214,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 1935,
+      "line": 2214,
       "column": 1
     }
   },
@@ -3204,7 +3345,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2042,
+      "line": 2321,
       "column": 1
     }
   },
@@ -3341,7 +3482,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2120,
+      "line": 2399,
       "column": 1
     }
   },
@@ -3401,7 +3542,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2195,
+      "line": 2474,
       "column": 1
     }
   },
@@ -3715,7 +3856,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2223,
+      "line": 2502,
       "column": 1
     }
   },
@@ -3998,7 +4139,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2494,
+      "line": 2773,
       "column": 1
     }
   },
@@ -4125,7 +4266,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2787,
+      "line": 3066,
       "column": 1
     }
   },
@@ -4549,7 +4690,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 2870,
+      "line": 3149,
       "column": 1
     }
   },
@@ -4646,7 +4787,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3098,
+      "line": 3377,
       "column": 1
     }
   },
@@ -4766,7 +4907,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3133,
+      "line": 3412,
       "column": 1
     }
   },
@@ -4834,7 +4975,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3200,
+      "line": 3479,
       "column": 1
     }
   },
@@ -4893,7 +5034,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3224,
+      "line": 3503,
       "column": 1
     }
   },
@@ -5083,7 +5224,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3245,
+      "line": 3524,
       "column": 1
     }
   },
@@ -5152,7 +5293,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3366,
+      "line": 3645,
       "column": 1
     }
   },
@@ -5209,7 +5350,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3399,
+      "line": 3678,
       "column": 1
     }
   },
@@ -5281,7 +5422,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3443,
+      "line": 3722,
       "column": 1
     }
   },
@@ -5405,7 +5546,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3478,
+      "line": 3757,
       "column": 1
     }
   },
@@ -5522,7 +5663,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3564,
+      "line": 3843,
       "column": 1
     }
   },
@@ -5730,7 +5871,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3681,
+      "line": 3960,
       "column": 1
     }
   },
@@ -5854,7 +5995,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 3947,
+      "line": 4226,
       "column": 1
     }
   },
@@ -6008,7 +6149,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4010,
+      "line": 4289,
       "column": 1
     }
   },
@@ -6156,7 +6297,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4117,
+      "line": 4396,
       "column": 1
     }
   },
@@ -6266,7 +6407,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4318,
+      "line": 4597,
       "column": 1
     }
   },
@@ -6384,7 +6525,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4379,
+      "line": 4658,
       "column": 1
     }
   },
@@ -6468,7 +6609,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4469,
+      "line": 4748,
       "column": 1
     }
   },
@@ -6909,7 +7050,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4516,
+      "line": 4795,
       "column": 1
     }
   },
@@ -7063,7 +7204,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4780,
+      "line": 5059,
       "column": 1
     }
   },
@@ -7154,7 +7295,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4885,
+      "line": 5164,
       "column": 1
     }
   },
@@ -7307,7 +7448,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 4939,
+      "line": 5218,
       "column": 1
     }
   },
@@ -7434,7 +7575,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5050,
+      "line": 5329,
       "column": 1
     }
   },
@@ -7527,7 +7668,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5107,
+      "line": 5386,
       "column": 1
     }
   },
@@ -7625,7 +7766,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5166,
+      "line": 5445,
       "column": 1
     }
   },
@@ -7818,7 +7959,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5217,
+      "line": 5496,
       "column": 1
     }
   },
@@ -7944,7 +8085,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5366,
+      "line": 5645,
       "column": 1
     }
   },
@@ -8044,7 +8185,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5467,
+      "line": 5746,
       "column": 1
     }
   },
@@ -8175,7 +8316,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5512,
+      "line": 5791,
       "column": 1
     }
   },
@@ -8386,7 +8527,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5604,
+      "line": 5883,
       "column": 1
     }
   },
@@ -8493,7 +8634,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5780,
+      "line": 6059,
       "column": 1
     }
   },
@@ -8640,7 +8781,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 5865,
+      "line": 6144,
       "column": 1
     }
   },
@@ -8698,7 +8839,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6014,
+      "line": 6293,
       "column": 1
     }
   },
@@ -8742,7 +8883,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6050,
+      "line": 6329,
       "column": 1
     }
   },
@@ -8772,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",
@@ -8998,7 +9145,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6076,
+      "line": 6355,
       "column": 1
     }
   },
@@ -9379,7 +9526,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6141,
+      "line": 6491,
       "column": 1
     }
   },
@@ -9387,15 +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.",
+    "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\").",
+    "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",
@@ -9409,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",
@@ -9430,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"
       },
@@ -9496,7 +9685,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6341,
+      "line": 6691,
       "column": 1
     }
   },
@@ -9675,7 +9864,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6410,
+      "line": 6795,
       "column": 1
     }
   },
@@ -9884,7 +10073,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6538,
+      "line": 6923,
       "column": 1
     }
   },
@@ -10015,7 +10204,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6695,
+      "line": 7080,
       "column": 1
     }
   },
@@ -10126,7 +10315,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6793,
+      "line": 7178,
       "column": 1
     }
   },
@@ -10135,7 +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` via `fieldControlBase`; for `date`/`time`/`datetime-local` types the browser supplies its own picker UI, which this stylesheet doesn't style.",
+    "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",
@@ -10164,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",
@@ -10296,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": [],
@@ -10333,7 +10534,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6879,
+      "line": 7264,
       "column": 1
     }
   },
@@ -10342,7 +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 `fieldControlBase` with `text-input` and `simple-select`, so it renders the same border, background, and focus states; only `resize: vertical` and the taller minimum height are unique to it.",
+    "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",
@@ -10371,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",
@@ -10513,7 +10726,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 6947,
+      "line": 7388,
       "column": 1
     }
   },
@@ -10522,7 +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` via `fieldControlBase`.",
+    "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",
@@ -10551,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",
@@ -10723,7 +10948,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7014,
+      "line": 7497,
       "column": 1
     }
   },
@@ -10767,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",
@@ -10785,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": [
       {
@@ -10936,7 +11182,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7096,
+      "line": 7639,
       "column": 1
     }
   },
@@ -10975,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",
@@ -11206,7 +11464,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7181,
+      "line": 7794,
       "column": 1
     }
   },
@@ -11300,7 +11558,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7321,
+      "line": 8021,
       "column": 1
     }
   },
@@ -11736,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": [],
@@ -11756,7 +12014,7 @@
       "profiles": {}
     },
     "source": {
-      "line": 7372,
+      "line": 8072,
       "column": 1
     }
   },
@@ -11819,7 +12077,7 @@
     },
     "global": true,
     "source": {
-      "line": 7493,
+      "line": 8204,
       "column": 1
     }
   },
@@ -13048,7 +13306,7 @@
     },
     "global": true,
     "source": {
-      "line": 7519,
+      "line": 8230,
       "column": 1
     }
   },
@@ -13123,7 +13381,7 @@
     },
     "global": true,
     "source": {
-      "line": 7774,
+      "line": 8485,
       "column": 1
     }
   },
@@ -13228,7 +13486,7 @@
     },
     "global": true,
     "source": {
-      "line": 7794,
+      "line": 8505,
       "column": 1
     }
   },
@@ -13321,7 +13579,7 @@
     },
     "global": true,
     "source": {
-      "line": 7824,
+      "line": 8535,
       "column": 1
     }
   },
@@ -13403,7 +13661,7 @@
     },
     "global": true,
     "source": {
-      "line": 7850,
+      "line": 8561,
       "column": 1
     }
   },
@@ -13470,7 +13728,7 @@
     },
     "global": true,
     "source": {
-      "line": 7868,
+      "line": 8579,
       "column": 1
     }
   },
@@ -13663,7 +13921,7 @@
     },
     "global": true,
     "source": {
-      "line": 7884,
+      "line": 8595,
       "column": 1
     }
   },
@@ -13827,7 +14085,7 @@
     },
     "global": true,
     "source": {
-      "line": 7977,
+      "line": 8688,
       "column": 1
     }
   },
@@ -13880,7 +14138,7 @@
     },
     "global": true,
     "source": {
-      "line": 8048,
+      "line": 8759,
       "column": 1
     }
   },
@@ -13969,7 +14227,7 @@
     },
     "global": true,
     "source": {
-      "line": 8068,
+      "line": 8779,
       "column": 1
     }
   },
@@ -14052,7 +14310,7 @@
     },
     "global": true,
     "source": {
-      "line": 8467,
+      "line": 9178,
       "column": 1
     }
   },
@@ -14638,7 +14896,7 @@
     },
     "global": true,
     "source": {
-      "line": 8498,
+      "line": 9209,
       "column": 1
     }
   }