@pantoken/components 1.0.1 → 1.0.2

package/dist/index.mjs

@@ -338,9 +338,9 @@ const calendarDay$1 = {
 	"canvasHighContrast": "/**\n * @component calendar.day\n * @memberOf calendar\n * @selector .day\n * @summary A day cell (InstUI `Calendar.Day`); `-today`, `-selected`, and `-outside-month` mark its state.\n * @modifier -today — Today's date.\n * @modifier -selected — The selected date.\n * @modifier -outside-month — A day from the adjacent month (leading/trailing filler).\n * @structure\n * @component calendar {\n *   .grid {\n *     .day {}\n *   }\n * }\n */\n@scope (.pfx-calendar) {\n  .day {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: var(--instui-component-calendar-day-min-width);\n    block-size: var(--instui-component-calendar-day-height);\n    font-size: var(--instui-component-calendar-day-font-size);\n    color: var(--instui-component-calendar-day-color);\n    background: var(--instui-component-calendar-day-background);\n    cursor: pointer;\n  }\n\n  .day.-outside-month {\n    color: var(--instui-component-calendar-day-outside-month-color);\n  }\n\n  .day.-today {\n    background: var(--instui-component-calendar-day-today-background);\n    color: var(--instui-component-calendar-day-today-color);\n    border-radius: var(--instui-component-calendar-day-today-border-radius);\n  }\n\n  .day.-selected {\n    background: var(--instui-component-calendar-day-selected-background);\n    color: var(--instui-component-calendar-day-selected-color);\n    border-radius: var(--instui-component-calendar-day-selected-border-radius);\n  }\n}\n"
 }.rebrand;
 const checkbox$1 = {
-	"rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
-	"canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
-	"canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
+	"rebrand": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
+	"canvas": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n",
+	"canvasHighContrast": "/**\n * @component checkbox\n * @summary A native checkbox and its label, or a switch via `-variant-toggle`.\n * @remarks Set `el.indeterminate = true` in JavaScript to show the mixed-state dash; the checked tick auto-contrasts against the fill — white on a dark fill, near-black on a light one. Also sets its own `gap` between the control and its label; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -invalid — Invalid (error) state.\n * @modifier -label-placement-end — Place the label after the control.\n * @modifier -label-placement-start — Place the label before the control.\n * @modifier -label-placement-top — Place the label above the control.\n * @modifier -readonly — Read-only state.\n * @modifier -required — Show the required-field asterisk next to the label.\n * @modifier -variant-toggle — Render as a switch instead of a box.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .asterisk — The required-field asterisk.\n * @pseudo ::before — The masked tick or dash glyph centered in the box; on `-variant-toggle` it becomes the sliding handle instead.\n * @pseudo ::after — On `-variant-toggle`, the state glyph riding the handle: an X when off, a check when on.\n * @cssproperty --pantoken-cb-glyph <url> — The box's mask glyph: a tick when checked, a dash when indeterminate.\n * @cssproperty --pantoken-toggle-h <length> — The toggle switch height.\n * @cssproperty --pantoken-toggle-w <length> — The toggle track width.\n * @cssproperty --pantoken-toggle-bw <length> — The toggle border width.\n * @cssproperty --pantoken-toggle-inset <length> — The handle inset from each track edge.\n * @cssproperty --pantoken-toggle-handle <length> — The computed handle diameter.\n * @cssstate checked\n * @cssstate indeterminate\n * @cssstate disabled\n * @accessibility A native `<input type=\"checkbox\">` drives `:checked`, `:indeterminate`, and `:disabled`; set `el.indeterminate = true` in JavaScript for the mixed state, and note that `-readonly` is styling only since checkboxes have no native readonly attribute.\n * @example\n * ```html\n * <label class=\"pfx-checkbox --display-block --mb-sm\">\n *   <input type=\"checkbox\" checked>Checkbox\n * </label>\n * <label class=\"pfx-checkbox -variant-toggle\">\n *   <input type=\"checkbox\">Toggle\n * </label>\n * ```\n * @related radio — The single-select counterpart.\n */\n.pfx-checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-checkbox-gap);\n  color: var(--instui-component-checkbox-label-base-color);\n  font-family: var(--instui-component-checkbox-font-family);\n  font-size: var(--instui-component-checkbox-font-size-md);\n  font-weight: var(--instui-component-checkbox-font-weight);\n  line-height: var(--instui-component-checkbox-line-height);\n}\n\n/* labelPlacement: the control comes first in the markup, so reorder with flex. Default is \"end\"\n   (label after the control); \"start\" puts it before, \"top\" stacks it above. */\n.pfx-checkbox.-label-placement-end {\n  flex-direction: row;\n}\n\n.pfx-checkbox.-label-placement-start {\n  flex-direction: row-reverse;\n}\n\n.pfx-checkbox.-label-placement-top {\n  flex-direction: column-reverse;\n  align-items: flex-start;\n}\n\n/* Base control: a native checkbox restyled via appearance:none so the InstUI border/background/checked\n   tokens all apply, with the tick masked into a ::before. Scoped away from the --toggle switch. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"] {\n  --pantoken-cb-glyph: var(--instui-icon-check) center / contain no-repeat;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-grid;\n  place-content: center;\n  flex: none;\n  width: var(--instui-component-checkbox-control-size-md);\n  height: var(--instui-component-checkbox-control-size-md);\n  margin-block: var(--instui-component-checkbox-control-vertical-margin);\n  border: var(--instui-component-checkbox-border-width) solid\n    var(--instui-component-checkbox-border-color);\n  border-radius: var(--instui-component-checkbox-border-radius);\n  background: var(--instui-component-checkbox-background-color);\n  cursor: pointer;\n\n  transition:\n    background-color 0.15s ease,\n    border-color 0.15s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]::before {\n  content: \"\";\n  width: 0.75em;\n  height: 0.75em;\n  /* Auto-contrast the tick against the checked fill: white on a dark fill, near-black on a light one.\n     The fill token is light-dark(), so a fixed on-color would vanish in one scheme. */\n  background: oklch(\n    from var(--instui-component-checkbox-background-checked-color)\n      clamp(0, (0.62 - l) * infinity, 1) 0 0\n  );\n  -webkit-mask: var(--pantoken-cb-glyph);\n  mask: var(--pantoken-cb-glyph);\n  transform: scale(0);\n  transition: transform 0.1s ease;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-border-hover-color);\n  background: var(--instui-component-checkbox-background-hover-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  border-color: var(--instui-component-checkbox-border-checked-color);\n  background: var(--instui-component-checkbox-background-checked-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:checked::before,\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate::before {\n  transform: scale(1);\n}\n\n/* Indeterminate (mixed) state: a dash in place of the tick. Set el.indeterminate = true in JS. */\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:indeterminate {\n  --pantoken-cb-glyph: var(--instui-icon-minus) center / contain no-repeat;\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle) input[type=\"checkbox\"]:disabled {\n  border-color: var(--instui-component-checkbox-border-disabled-color);\n  background: var(--instui-component-checkbox-background-disabled-color);\n  cursor: not-allowed;\n}\n\n.pfx-checkbox:has(input:disabled) {\n  color: var(--instui-component-checkbox-label-disabled-color);\n}\n\n.pfx-checkbox:hover {\n  color: var(--instui-component-checkbox-label-hover-color);\n}\n\n.pfx-checkbox.-size-sm {\n  font-size: var(--instui-component-checkbox-font-size-sm);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-sm input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-sm);\n  height: var(--instui-component-checkbox-control-size-sm);\n}\n\n.pfx-checkbox.-size-lg {\n  font-size: var(--instui-component-checkbox-font-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-size-lg input[type=\"checkbox\"] {\n  width: var(--instui-component-checkbox-control-size-lg);\n  height: var(--instui-component-checkbox-control-size-lg);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-error-border-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-invalid\n  input[type=\"checkbox\"]:hover {\n  border-color: var(--instui-component-checkbox-error-border-hover-color);\n}\n\n.pfx-checkbox.-readonly {\n  color: var(--instui-component-checkbox-label-readonly-color);\n}\n\n.pfx-checkbox:not(.pfx-checkbox.-variant-toggle).pfx-checkbox.-readonly input[type=\"checkbox\"] {\n  border-color: var(--instui-component-checkbox-border-readonly-color);\n  background: var(--instui-component-checkbox-background-readonly-color);\n}\n\n@scope (.pfx-checkbox) {\n  :scope {\n    &.-required .asterisk {\n      color: var(--instui-component-checkbox-asterisk-color);\n    }\n  }\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"] {\n  /* InstUI's toggle facade is a fixed 40x24 switch: the switch height is the small choice-control\n     size (24px), while the toggle-medium-height token (40px) is the track width. Its border is the\n     small width (the toggle-border-width token resolves to the 4px large width, far too heavy), drawn\n     as an inset shadow so it doesn't shift the absolutely-positioned handle. The handle sits 3x the\n     border-width in from each edge and travels the difference (width - height). */\n  --pantoken-toggle-h: var(--instui-size-choice-control-height-md);\n  --pantoken-toggle-w: var(--instui-component-radio-input-toggle-medium-height);\n  --pantoken-toggle-bw: var(--instui-border-width-sm);\n  --pantoken-toggle-inset: calc(var(--pantoken-toggle-bw) * 3);\n  --pantoken-toggle-handle: calc(var(--pantoken-toggle-h) - var(--pantoken-toggle-inset) * 2);\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  width: var(--pantoken-toggle-w);\n  height: var(--pantoken-toggle-h);\n  border: 0;\n  border-radius: var(--pantoken-toggle-h);\n  box-shadow: inset 0 0 0 var(--pantoken-toggle-bw) var(--instui-color-stroke-base);\n  /* The rebrand theme resolves toggle-background-off to the same green as the on state, so the off\n     track uses the neutral muted background; the handle position and on-color signal the state. */\n  background: var(--instui-color-background-muted);\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  box-sizing: border-box;\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  border-radius: 50%;\n  border: var(--pantoken-toggle-bw) solid var(--instui-color-stroke-base);\n  background: var(--instui-component-radio-input-toggle-handle-text);\n  transition: inset-inline-start 0.15s ease;\n}\n\n/* A state glyph riding on the handle: an X when off, a check when on, in the track color. */\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  inset-inline-start: var(--pantoken-toggle-inset);\n  transform: translateY(-50%);\n  width: var(--pantoken-toggle-handle);\n  height: var(--pantoken-toggle-handle);\n  background: var(--instui-color-text-muted);\n  -webkit-mask: var(--instui-icon-x) center / 58% no-repeat;\n  mask: var(--instui-icon-x) center / 58% no-repeat;\n  transition: inset-inline-start 0.15s ease;\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked {\n  background: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::before {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  border-color: var(--instui-component-radio-input-toggle-background-success);\n}\n\n.pfx-checkbox.-variant-toggle input[type=\"checkbox\"]:checked::after {\n  inset-inline-start: calc(100% - var(--pantoken-toggle-h) + var(--pantoken-toggle-inset));\n  background: var(--instui-component-radio-input-toggle-background-success);\n  -webkit-mask: var(--instui-icon-check) center / 58% no-repeat;\n  mask: var(--instui-icon-check) center / 58% no-repeat;\n}\n"
 }.rebrand;
 const closeButton$1 = {
 	"rebrand": "/**\n * @component close-button\n * @selector .pfx-close-button\n * @summary A transparent icon button that draws its own × glyph, in three sizes plus an inverse variant.\n * @modifier -color-inverse — For dark backgrounds.\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @pseudo ::before — The × glyph, masked in `currentColor`.\n * @a11y Give the icon-only button an `aria-label` (e.g. \"Close\").\n * @example\n * <button class=\"pfx-close-button -size-sm\" aria-label=\"Close\"></button>\n * @related button — The general-purpose action button.\n */\n@scope (.pfx-close-button) {\n  & {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    aspect-ratio: 1;\n    min-height: var(--instui-component-base-button-medium-height);\n    padding: var(--instui-spacing-space-xs);\n    border: 0;\n    background: transparent;\n    border-radius: var(--instui-component-base-button-border-radius);\n    color: var(--instui-color-text-interactive-action-secondary-base);\n    cursor: pointer;\n  }\n\n  &::before {\n    content: \"\";\n    inline-size: 1em;\n    block-size: 1em;\n    background: currentColor;\n    -webkit-mask: var(--instui-icon-x) center / contain no-repeat;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n  }\n\n  &:hover {\n    background: var(--instui-color-background-interactive-action-tertiary-hover);\n  }\n\n  &:active {\n    background: var(--instui-color-background-interactive-action-tertiary-active);\n  }\n\n  &.-size-sm {\n    min-height: var(--instui-component-base-button-small-height);\n  }\n\n  &.-size-lg {\n    min-height: var(--instui-component-base-button-large-height);\n  }\n\n  &.-color-inverse {\n    color: var(--instui-component-base-button-primary-inverse-ghost-color);\n  }\n}\n",
@@ -503,9 +503,9 @@ const radioInputGroup$1 = {
 	"canvasHighContrast": "/**\n * @component radio-input-group\n * @selector .pfx-radio-input-group\n * @summary A single-select radio `<fieldset>`, plain or as a connected segmented toggle.\n * @remarks Sets its own `gap` between radios; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -layout-columns — Lay the radios out in columns.\n * @modifier -layout-inline — Lay the radios out inline.\n * @modifier -required — Mark the group as required.\n * @modifier -variant-toggle — Lay the child toggles out as a segmented control (only the selected segment fills).\n * @pseudo ::after — Renders the decorative required-field asterisk after the legend text when the group is required.\n * @accessibility Renders a native `<fieldset>` with a `<legend>` that names the group; the child radios share one `name`, so only one can be selected at a time.\n * @example\n  * ```html\n * <fieldset class=\"pfx-radio-input-group\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * ### Toggle variant\n * ```html\n * <fieldset class=\"pfx-radio-input-group -variant-toggle\">\n *   <legend>T-shirt size</legend>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\" checked> Small</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Medium</label>\n *   <label class=\"pfx-radio -variant-toggle\"><input type=\"radio\" name=\"size\"> Large</label>\n * </fieldset>\n * ```\n * @structure\n * .pfx-radio-input-group.-variant-toggle {\n *   legend {}\n *   .pfx-radio.-variant-toggle {\n *     input {}\n *   }\n * }\n * @related radio — The individual control this group collects.\n * @related form-field-group — The general wrapper for grouping and laying out fields.\n */\n@scope (.pfx-radio-input-group) {\n  & {\n    display: flex;\n    flex-direction: column;\n    gap: var(--instui-component-form-field-layout-gap-inputs);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  & > legend {\n    padding: 0;\n    margin-block-end: var(--instui-component-form-field-layout-gap-primitives);\n    color: var(--instui-component-form-field-layout-text-color);\n    font-family: var(--instui-component-form-field-layout-font-family);\n    font-weight: var(--instui-component-form-field-layout-font-weight);\n    font-size: var(--instui-component-form-field-layout-font-size);\n    line-height: var(--instui-component-form-field-layout-line-height);\n  }\n\n  &.-required > legend::after {\n    content: \"*\";\n    margin-inline-start: 0.25rem;\n    color: var(--instui-component-form-field-layout-asterisk-color);\n  }\n\n  /* simple variant: -layout-columns/-inline flow the standard radios into a wrapping row */\n  &.-layout-columns,\n  &.-layout-inline {\n    flex-flow: row wrap;\n    align-items: center;\n    column-gap: var(--instui-spacing-space-md);\n  }\n\n  &.-layout-columns > legend,\n  &.-layout-inline > legend {\n    flex-basis: 100%;\n  }\n\n  /* toggle variant: lay the child .instui-radio.-variant-toggle segments out flush in a row — no gap and\n     no borders, matching InstUI's colSpacing=\"none\". The visible spacing between labels is each segment's\n     own inline padding; only the checked segment paints a pill. Lift the focused segment so its focus ring\n     isn't clipped by a neighbour. */\n  &.-variant-toggle {\n    flex-flow: row wrap;\n    align-items: center;\n    gap: 0;\n  }\n\n  &.-variant-toggle > legend {\n    flex-basis: 100%;\n  }\n\n  &.-variant-toggle > .pfx-radio:has(input:focus-visible) {\n    z-index: 1;\n  }\n}\n"
 }.rebrand;
 const rangeInput$1 = {
-	"rebrand": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n}\n\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n@scope (.pfx-range-input-value) {\n  & {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n    align-self: center;\n    margin-inline-start: 0.5rem;\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-md);\n    padding: var(--instui-component-range-input-value-medium-padding);\n    font-family: var(--instui-component-range-input-value-font-family);\n    font-size: var(--instui-component-range-input-value-medium-font-size);\n    font-weight: var(--instui-component-range-input-value-font-weight);\n    line-height: 1;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: -0.375rem;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    border-block: 0.375rem solid transparent;\n    border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n    border-inline-start: 0;\n  }\n\n  &.-size-sm {\n    padding: var(--instui-component-range-input-value-small-padding);\n    font-size: var(--instui-component-range-input-value-small-font-size);\n    line-height: var(--instui-component-range-input-value-small-line-height);\n  }\n\n  &.-size-lg {\n    padding: var(--instui-component-range-input-value-large-padding);\n    font-size: var(--instui-component-range-input-value-large-font-size);\n    line-height: var(--instui-component-range-input-value-large-line-height);\n  }\n}\n",
-	"canvas": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n}\n\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n@scope (.pfx-range-input-value) {\n  & {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n    align-self: center;\n    margin-inline-start: 0.5rem;\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-md);\n    padding: var(--instui-component-range-input-value-medium-padding);\n    font-family: var(--instui-component-range-input-value-font-family);\n    font-size: var(--instui-component-range-input-value-medium-font-size);\n    font-weight: var(--instui-component-range-input-value-font-weight);\n    line-height: 1;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: -0.375rem;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    border-block: 0.375rem solid transparent;\n    border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n    border-inline-start: 0;\n  }\n\n  &.-size-sm {\n    padding: var(--instui-component-range-input-value-small-padding);\n    font-size: var(--instui-component-range-input-value-small-font-size);\n    line-height: var(--instui-component-range-input-value-small-line-height);\n  }\n\n  &.-size-lg {\n    padding: var(--instui-component-range-input-value-large-padding);\n    font-size: var(--instui-component-range-input-value-large-font-size);\n    line-height: var(--instui-component-range-input-value-large-line-height);\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &::-moz-range-thumb {\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n}\n\n/* The value bubble: an inverse pill with a caret pointing back toward the track (InstUI ContextView). */\n@scope (.pfx-range-input-value) {\n  & {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n    align-self: center;\n    margin-inline-start: 0.5rem;\n    background: var(--instui-color-background-inverse);\n    color: var(--instui-color-text-inverse);\n    border-radius: var(--instui-border-radius-md);\n    padding: var(--instui-component-range-input-value-medium-padding);\n    font-family: var(--instui-component-range-input-value-font-family);\n    font-size: var(--instui-component-range-input-value-medium-font-size);\n    font-weight: var(--instui-component-range-input-value-font-weight);\n    line-height: 1;\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: -0.375rem;\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    border-block: 0.375rem solid transparent;\n    border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n    border-inline-start: 0;\n  }\n\n  &.-size-sm {\n    padding: var(--instui-component-range-input-value-small-padding);\n    font-size: var(--instui-component-range-input-value-small-font-size);\n    line-height: var(--instui-component-range-input-value-small-line-height);\n  }\n\n  &.-size-lg {\n    padding: var(--instui-component-range-input-value-large-padding);\n    font-size: var(--instui-component-range-input-value-large-font-size);\n    line-height: var(--instui-component-range-input-value-large-line-height);\n  }\n}\n"
+	"rebrand": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  .pfx-range-input-value {\n    & {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n      align-self: center;\n      margin-inline-start: 0.5rem;\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-md);\n      padding: var(--instui-component-range-input-value-medium-padding);\n      font-family: var(--instui-component-range-input-value-font-family);\n      font-size: var(--instui-component-range-input-value-medium-font-size);\n      font-weight: var(--instui-component-range-input-value-font-weight);\n      line-height: 1;\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-inline-start: -0.375rem;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      border-block: 0.375rem solid transparent;\n      border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n      border-inline-start: 0;\n    }\n\n    &.-size-sm {\n      padding: var(--instui-component-range-input-value-small-padding);\n      font-size: var(--instui-component-range-input-value-small-font-size);\n      line-height: var(--instui-component-range-input-value-small-line-height);\n    }\n\n    &.-size-lg {\n      padding: var(--instui-component-range-input-value-large-padding);\n      font-size: var(--instui-component-range-input-value-large-font-size);\n      line-height: var(--instui-component-range-input-value-large-line-height);\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  .pfx-range-input-value {\n    & {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n      align-self: center;\n      margin-inline-start: 0.5rem;\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-md);\n      padding: var(--instui-component-range-input-value-medium-padding);\n      font-family: var(--instui-component-range-input-value-font-family);\n      font-size: var(--instui-component-range-input-value-medium-font-size);\n      font-weight: var(--instui-component-range-input-value-font-weight);\n      line-height: 1;\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-inline-start: -0.375rem;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      border-block: 0.375rem solid transparent;\n      border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n      border-inline-start: 0;\n    }\n\n    &.-size-sm {\n      padding: var(--instui-component-range-input-value-small-padding);\n      font-size: var(--instui-component-range-input-value-small-font-size);\n      line-height: var(--instui-component-range-input-value-small-line-height);\n    }\n\n    &.-size-lg {\n      padding: var(--instui-component-range-input-value-large-padding);\n      font-size: var(--instui-component-range-input-value-large-font-size);\n      line-height: var(--instui-component-range-input-value-large-line-height);\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component range-input\n * @selector .pfx-range-input\n * @summary A styled range slider with an inverse value bubble.\n * @pseudo ::before — Draws the value bubble's caret, a small triangle pointing back toward the track.\n * @accessibility The control is a native `<input type=\"range\">`; give it an accessible name with `aria-label` or an associated `<label>`.\n * @example\n * <input class=\"pfx-range-input\" id=\"r1\" type=\"range\" value=\"30\">\n * @related number-input — The typed numeric-entry counterpart.\n */\n@scope (.pfx-range-input) {\n  & {\n    -webkit-appearance: none;\n    appearance: none;\n    inline-size: 100%;\n    min-inline-size: var(--instui-component-range-input-min-width);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: transparent;\n  }\n\n  /* Chrome/Safari: the runnable track is centred in the (handle-sized) control box. */\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-runnable-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-track {\n    block-size: 0.25rem;\n    background: var(--instui-component-range-input-track-background);\n    border: var(--instui-border-width-sm) solid\n      var(--instui-component-range-input-track-border-color);\n    border-radius: 999px;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-block-start: calc((0.25rem - var(--instui-component-range-input-handle-size)) / 2);\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    background: var(--instui-component-range-input-handle-background);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    border-radius: 50%;\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n    cursor: pointer;\n  }\n\n  /* fallow-ignore-next-line css-duplicate-block -- vendor pseudo-elements must be in separate rules */\n  &::-moz-range-thumb {\n    border-radius: 50%;\n    cursor: pointer;\n    inline-size: var(--instui-component-range-input-handle-size);\n    block-size: var(--instui-component-range-input-handle-size);\n    border: var(--instui-component-range-input-handle-border-size) solid\n      var(--instui-component-range-input-handle-border-color);\n    background: var(--instui-component-range-input-handle-background);\n    box-shadow: 0 0 0 0 var(--instui-component-range-input-handle-shadow-color);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-hover-background);\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  &:focus-visible::-webkit-slider-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  &:focus-visible::-moz-range-thumb {\n    background: var(--instui-component-range-input-handle-focus-background);\n    box-shadow: 0 0 0 var(--instui-component-range-input-handle-focus-outline-width)\n      var(--instui-component-range-input-handle-focus-outline-color);\n  }\n\n  .pfx-range-input-value {\n    & {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      /* Hug the number: the value line-height token is oversized (a container height), and as a flex item\n       the bubble must not stretch to the row — so pin line-height to the text and never self-stretch. */\n      align-self: center;\n      margin-inline-start: 0.5rem;\n      background: var(--instui-color-background-inverse);\n      color: var(--instui-color-text-inverse);\n      border-radius: var(--instui-border-radius-md);\n      padding: var(--instui-component-range-input-value-medium-padding);\n      font-family: var(--instui-component-range-input-value-font-family);\n      font-size: var(--instui-component-range-input-value-medium-font-size);\n      font-weight: var(--instui-component-range-input-value-font-weight);\n      line-height: 1;\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      inset-inline-start: -0.375rem;\n      inset-block-start: 50%;\n      transform: translateY(-50%);\n      border-block: 0.375rem solid transparent;\n      border-inline-end: 0.375rem solid var(--instui-color-background-inverse);\n      border-inline-start: 0;\n    }\n\n    &.-size-sm {\n      padding: var(--instui-component-range-input-value-small-padding);\n      font-size: var(--instui-component-range-input-value-small-font-size);\n      line-height: var(--instui-component-range-input-value-small-line-height);\n    }\n\n    &.-size-lg {\n      padding: var(--instui-component-range-input-value-large-padding);\n      font-size: var(--instui-component-range-input-value-large-font-size);\n      line-height: var(--instui-component-range-input-value-large-line-height);\n    }\n  }\n}\n"
 }.rebrand;
 const rating$1 = {
 	"rebrand": "/**\n * @component rating\n * @summary A star rating with filled and empty glyphs and an optional numeric label.\n * @remarks Sets its own `gap` between star glyphs; chaining a `-gap-*` spacing utility modifier overrides that built-in value.\n * @modifier -icon-* — Render star glyphs with icon classes (for example, `-icon-star-solid`).\n * @modifier -size-sm — Small.\n * @modifier -size-lg — Large.\n * @part .label — The numeric label, e.g. \"3/5\".\n * @a11y Give it role=\"img\" and an aria-label stating the rating, since the stars are icon glyphs.\n * @example\n * <span class=\"pfx-rating -size-sm\" role=\"img\" aria-label=\"2 out of 3 stars\">\n *   <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star-solid\"></span> <span class=\"pfx-icon -icon-star\"></span>\n *   <span class=\"label\">2/3</span>\n * </span>\n * @structure\n * .pfx-rating {\n *   [class*=\"-icon-\"] {}\n *   .label {}\n * }\n */\n.pfx-rating {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--instui-component-rating-icon-icon-margin);\n  font-size: var(--instui-component-rating-icon-medium-icon-font-size);\n  color: var(--instui-component-rating-icon-icon-empty-color);\n}\n\n.pfx-rating.-size-sm {\n  font-size: var(--instui-component-rating-icon-small-icon-font-size);\n}\n\n.pfx-rating.-size-lg {\n  font-size: var(--instui-component-rating-icon-large-icon-font-size);\n}\n\n@scope (.pfx-rating) {\n  :scope {\n    /* The container paints the empty (outline) stars; a filled (solid) star overrides to the filled colour. */\n    .-icon-star-solid {\n      color: var(--instui-component-rating-icon-icon-filled-color);\n    }\n\n    /* The value label sits after the stars, reset to text size so it isn't scaled to the star glyph. */\n    > .label {\n      margin-inline-start: var(--instui-component-rating-icon-icon-margin);\n      color: var(--instui-color-text-base);\n      font-family: var(--instui-font-family-base);\n      font-size: var(--instui-font-size-text-base);\n    }\n  }\n}\n",
@@ -568,9 +568,9 @@ const tableRowHeader$1 = {
 	"canvasHighContrast": "/**\n * @component table.row-header\n * @memberOf table\n * @selector th[scope=\"row\"]\n * @summary A row-header cell (InstUI `Table.RowHeader`); styled from the row-header tokens, not the column-header ones.\n * @remarks The parent `table`'s `-layout-stacked` modifier stacks this member as a block and labels it via `::before` — see `table`'s own doc for that modifier.\n * @structure\n * @component table {\n *   tbody {\n *     tr {\n *       th[scope=\"row\"] {}\n *     }\n *   }\n * }\n */\n/* A row-header cell (th scope=row) — styled from the row-header tokens, not the column-header ones. */\n.pfx-table tbody th,\n.pfx-table th[scope=\"row\"] {\n  background: var(--instui-component-table-row-header-background);\n  color: var(--instui-component-table-row-header-color);\n  font-weight: var(--instui-component-table-row-header-font-weight);\n  line-height: var(--instui-component-table-row-header-line-height);\n  padding: var(--instui-component-table-row-header-padding-vertical)\n    var(--instui-component-table-row-header-padding-horizontal);\n}\n\n/* No border of its own — the separator lives on the row (see table.row). Reset with tbody specificity\n (0,1,2) so a host stylesheet's cell borders (e.g. `.pantoken-prose td`, 0,1,1) can't leak in. */\n.pfx-table tbody th {\n  border: 0;\n}\n\n/* layout=\"stacked\": stack as a block, labelled by its column via ::before (pure CSS can't pull the\n <th> text automatically, so the author supplies a `data-label` per cell). */\n.pfx-table.-layout-stacked th {\n  display: block;\n  width: auto;\n}\n\n.pfx-table.-layout-stacked tbody th[data-label]::before {\n  content: attr(data-label);\n  display: block;\n  font-weight: var(--instui-component-table-head-font-weight);\n  color: var(--instui-component-table-col-header-color);\n}\n"
 }.rebrand;
 const tabs$1 = {
-	"rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n",
-	"canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n",
-	"canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n"
+	"rebrand": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n",
+	"canvas": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n",
+	"canvasHighContrast": "/**\n * @component tabs\n * @summary A tabbed panel set: a tab list, selectable tabs, and their panels.\n * @remarks See the `tabs.tab` and `tabs.panel` members for the individual tab buttons and their content panels.\n * @modifier -variant-secondary — Rounded \"folder\" tabs with a selected tab that visually connects into the panel below. @affects tabs.tab — Restyles the tab buttons into the rounded \"folder\" look.\n * @modifier -overflow-scroll — Keep the tab list on one line and let it scroll horizontally instead of wrapping, hiding the scrollbar.\n * @part .list — The row of tabs.\n * @a11y Wire the tab list with role=\"tablist\", each tab with role=\"tab\" and aria-selected, and each panel with role=\"tabpanel\".\n * @example\n * <div class=\"pfx-tabs\">\n *   <div class=\"list\" role=\"tablist\" aria-label=\"Default tabs\">\n *     <button class=\"tab -selected\" role=\"tab\" aria-selected=\"true\">Overview</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">Details</button>\n *     <button class=\"tab -disabled\" role=\"tab\" aria-disabled=\"true\" disabled>Disabled</button>\n *     <button class=\"tab\" role=\"tab\" aria-selected=\"false\">History</button>\n *   </div>\n *   <div class=\"panel\" role=\"tabpanel\">The Overview tab's content shows here.</div>\n * </div>\n * @structure\n * .pfx-tabs {\n *   .list {\n *     .tab:many {}\n *   }\n *   .panel:many {}\n * }\n */\n.pfx-tabs {\n  display: flex;\n  flex-direction: column;\n  background: var(--instui-component-tabs-default-background);\n}\n\n@scope (.pfx-tabs) {\n  :scope {\n    > .list {\n      display: flex;\n      width: 100%;\n      flex-flow: row wrap;\n    }\n\n    &.-overflow-scroll > .list {\n      flex-wrap: nowrap;\n      overflow-x: auto;\n      scrollbar-width: none;\n    }\n\n    &.-overflow-scroll > .list::-webkit-scrollbar {\n      display: none;\n    }\n  }\n}\n"
 }.rebrand;
 const tabsPanel$1 = {
 	"rebrand": "/**\n * @component tabs.panel\n * @memberOf tabs\n * @selector .panel\n * @summary The content panel for a tab (InstUI `Tabs.Panel`).\n * @cssstate hidden\n * @structure\n * @component tabs {\n *   .panel {}\n * }\n */\n@scope (.pfx-tabs) {\n  :scope {\n    > .panel {\n      box-sizing: border-box;\n      border-top: var(--instui-component-tabs-panel-border-width) solid\n        var(--instui-component-tabs-panel-border-color);\n      background: var(--instui-component-tabs-panel-background);\n      color: var(--instui-component-tabs-panel-text-color);\n      font-family: var(--instui-component-tabs-panel-font-family);\n      font-size: var(--instui-component-tabs-panel-font-size);\n      font-weight: var(--instui-component-tabs-panel-font-weight);\n      line-height: var(--instui-component-tabs-panel-line-height);\n      padding: var(--instui-spacing-space-sm) var(--instui-spacing-space-md)\n        var(--instui-spacing-space-md);\n    }\n\n    > .panel[hidden] {\n      display: none;\n    }\n  }\n}\n",
@@ -3141,7 +3141,7 @@ ${base} {
   overflow-wrap: break-word;
   word-break: break-all;
   font-family: var(--instui-component-truncate-text-font-family);
-  line-height: var(--instui-component-truncate-text-line-height);
+  line-height: var(--instui-line-height-paragraph-base);
 }
 
 ${character} { word-break: break-all; }

package/dist/range-input.css

@@ -1 +1 @@
-@scope(.instui-range-input){&{-webkit-appearance:none;appearance:none;inline-size:100%;min-inline-size:var(--instui-component-range-input-min-width);block-size:var(--instui-component-range-input-handle-size);background:0 0}&::-webkit-slider-runnable-track{background:var(--instui-component-range-input-track-background);border:var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);border-radius:999px;block-size:.25rem}&::-moz-range-track{background:var(--instui-component-range-input-track-background);border:var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);border-radius:999px;block-size:.25rem}&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:var(--instui-component-range-input-handle-size);block-size:var(--instui-component-range-input-handle-size);background:var(--instui-component-range-input-handle-background);border:var(--instui-component-range-input-handle-border-size) solid var(--instui-component-range-input-handle-border-color);box-shadow:0 0 0 0 var(--instui-component-range-input-handle-shadow-color);cursor:pointer;border-radius:50%;margin-block-start:calc((.25rem - var(--instui-component-range-input-handle-size)) / 2)}&::-moz-range-thumb{inline-size:var(--instui-component-range-input-handle-size);block-size:var(--instui-component-range-input-handle-size);background:var(--instui-component-range-input-handle-background);border:var(--instui-component-range-input-handle-border-size) solid var(--instui-component-range-input-handle-border-color);box-shadow:0 0 0 0 var(--instui-component-range-input-handle-shadow-color);cursor:pointer;border-radius:50%}&:hover::-webkit-slider-thumb{background:var(--instui-component-range-input-handle-hover-background)}&:hover::-moz-range-thumb{background:var(--instui-component-range-input-handle-hover-background)}&:focus-visible{outline:none}&:focus-visible::-webkit-slider-thumb{background:var(--instui-component-range-input-handle-focus-background);box-shadow:0 0 0 var(--instui-component-range-input-handle-focus-outline-width) var(--instui-component-range-input-handle-focus-outline-color)}&:focus-visible::-moz-range-thumb{background:var(--instui-component-range-input-handle-focus-background);box-shadow:0 0 0 var(--instui-component-range-input-handle-focus-outline-width) var(--instui-component-range-input-handle-focus-outline-color)}}@scope(.instui-range-input-value){&{background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-radius:var(--instui-border-radius-md);padding:var(--instui-component-range-input-value-medium-padding);font-family:var(--instui-component-range-input-value-font-family);font-size:var(--instui-component-range-input-value-medium-font-size);font-weight:var(--instui-component-range-input-value-font-weight);align-self:center;align-items:center;margin-inline-start:.5rem;line-height:1;display:inline-flex;position:relative}&:before{content:"";border-block:.375rem solid #0000;border-inline-end:.375rem solid var(--instui-color-background-inverse);border-inline-start:0;position:absolute;inset-block-start:50%;inset-inline-start:-.375rem;transform:translateY(-50%)}&.-size-sm{padding:var(--instui-component-range-input-value-small-padding);font-size:var(--instui-component-range-input-value-small-font-size);line-height:var(--instui-component-range-input-value-small-line-height)}&.-size-lg{padding:var(--instui-component-range-input-value-large-padding);font-size:var(--instui-component-range-input-value-large-font-size);line-height:var(--instui-component-range-input-value-large-line-height)}}&.-size-small{padding:var(--instui-component-range-input-value-small-padding);font-size:var(--instui-component-range-input-value-small-font-size);line-height:var(--instui-component-range-input-value-small-line-height)}&.-size-large{padding:var(--instui-component-range-input-value-large-padding);font-size:var(--instui-component-range-input-value-large-font-size);line-height:var(--instui-component-range-input-value-large-line-height)}
+@scope(.instui-range-input){&{-webkit-appearance:none;appearance:none;inline-size:100%;min-inline-size:var(--instui-component-range-input-min-width);block-size:var(--instui-component-range-input-handle-size);background:0 0}&::-webkit-slider-runnable-track{background:var(--instui-component-range-input-track-background);border:var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);border-radius:999px;block-size:.25rem}&::-moz-range-track{background:var(--instui-component-range-input-track-background);border:var(--instui-border-width-sm) solid var(--instui-component-range-input-track-border-color);border-radius:999px;block-size:.25rem}&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;inline-size:var(--instui-component-range-input-handle-size);block-size:var(--instui-component-range-input-handle-size);background:var(--instui-component-range-input-handle-background);border:var(--instui-component-range-input-handle-border-size) solid var(--instui-component-range-input-handle-border-color);box-shadow:0 0 0 0 var(--instui-component-range-input-handle-shadow-color);cursor:pointer;border-radius:50%;margin-block-start:calc((.25rem - var(--instui-component-range-input-handle-size)) / 2)}&::-moz-range-thumb{cursor:pointer;inline-size:var(--instui-component-range-input-handle-size);block-size:var(--instui-component-range-input-handle-size);border:var(--instui-component-range-input-handle-border-size) solid var(--instui-component-range-input-handle-border-color);background:var(--instui-component-range-input-handle-background);box-shadow:0 0 0 0 var(--instui-component-range-input-handle-shadow-color);border-radius:50%}&:hover::-webkit-slider-thumb{background:var(--instui-component-range-input-handle-hover-background)}&:hover::-moz-range-thumb{background:var(--instui-component-range-input-handle-hover-background)}&:focus-visible{outline:none}&:focus-visible::-webkit-slider-thumb{background:var(--instui-component-range-input-handle-focus-background);box-shadow:0 0 0 var(--instui-component-range-input-handle-focus-outline-width) var(--instui-component-range-input-handle-focus-outline-color)}&:focus-visible::-moz-range-thumb{background:var(--instui-component-range-input-handle-focus-background);box-shadow:0 0 0 var(--instui-component-range-input-handle-focus-outline-width) var(--instui-component-range-input-handle-focus-outline-color)}.instui-range-input-value{&{background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-radius:var(--instui-border-radius-md);padding:var(--instui-component-range-input-value-medium-padding);font-family:var(--instui-component-range-input-value-font-family);font-size:var(--instui-component-range-input-value-medium-font-size);font-weight:var(--instui-component-range-input-value-font-weight);align-self:center;align-items:center;margin-inline-start:.5rem;line-height:1;display:inline-flex;position:relative}&:before{content:"";border-block:.375rem solid #0000;border-inline-end:.375rem solid var(--instui-color-background-inverse);border-inline-start:0;position:absolute;inset-block-start:50%;inset-inline-start:-.375rem;transform:translateY(-50%)}&.-size-sm{padding:var(--instui-component-range-input-value-small-padding);font-size:var(--instui-component-range-input-value-small-font-size);line-height:var(--instui-component-range-input-value-small-line-height)}&.-size-lg{padding:var(--instui-component-range-input-value-large-padding);font-size:var(--instui-component-range-input-value-large-font-size);line-height:var(--instui-component-range-input-value-large-line-height)}}}&.-size-small{padding:var(--instui-component-range-input-value-small-padding);font-size:var(--instui-component-range-input-value-small-font-size);line-height:var(--instui-component-range-input-value-small-line-height)}&.-size-large{padding:var(--instui-component-range-input-value-large-padding);font-size:var(--instui-component-range-input-value-large-font-size);line-height:var(--instui-component-range-input-value-large-line-height)}

package/dist/scaffold-preset.d.mts

@@ -0,0 +1,10 @@
+import { Preset } from "@pantoken/scaffold-base";
+//#region src/scaffold-preset.d.ts
+/**
+ * Preset for scaffolding component-only (HTML/CSS/JS) projects with pantoken components.
+ *
+ * Platform: `html`
+ */
+declare const presetComponents: Preset;
+//#endregion
+export { presetComponents };

package/dist/scaffold-preset.mjs

@@ -0,0 +1,14 @@
+import { base, createPreset } from "@pantoken/scaffold-base";
+//#region src/scaffold-preset.ts
+/**
+* Preset for scaffolding component-only (HTML/CSS/JS) projects with pantoken components.
+*
+* Platform: `html`
+*/
+const presetComponents = createPreset({
+	name: "components",
+	base,
+	blocks: []
+});
+//#endregion
+export { presetComponents };