@loworbitstudio/visor 1.37.0 → 1.38.0

package/dist/CHANGELOG.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-10-04T23:46:57.986Z",
+  "generated_at": "2026-10-14T21:13:18.493Z",
   "components": {
     "accessibility-specimen": {
       "changeType": "current",

package/dist/index.js

@@ -9423,6 +9423,18 @@ var FIXTURES = {
           h(__mod.ToggleGroupItem, { key: "m", value: "month" }, "Month"),
         ] };
       })()`
+    },
+    // VI-709: the compact size the `toggle-group` xs keys drive.
+    compact: {
+      export: "ToggleGroup",
+      interactiveTarget: "[data-slot=toggle-group-item]",
+      props: `(function () {
+        var h = React.createElement;
+        return { type: "single", variant: "outline", size: "xs", "aria-label": "Applies to", defaultValue: "gig", children: [
+          h(__mod.ToggleGroupItem, { key: "g", value: "gig" }, "This Booking"),
+          h(__mod.ToggleGroupItem, { key: "t", value: "trip" }, "Whole Trip"),
+        ] };
+      })()`
     }
   },
   "tag-input": {

package/dist/registry.json

@@ -1408,7 +1408,7 @@
         {
           "path": "components/ui/toggle-group/toggle-group.module.css",
           "type": "registry:ui",
-          "content": "/* ToggleGroup root */\n.root {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-1, 0.25rem);\n}\n\n.variantDefault {\n  /* items have no outer border, rely on item bg */\n}\n\n.variantOutline {\n  position: relative;\n  border: 1px solid var(--border-default, #e5e7eb);\n  gap: 0;\n}\n\n/* Sliding indicator pill */\n.indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--interactive-primary-bg, var(--primary, #111827));\n  border-radius: var(--radius-md, 0.375rem);\n  opacity: 0;\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform var(--motion-duration-200, 200ms) var(--motion-easing-default, ease-in-out),\n    width var(--motion-duration-200, 200ms) var(--motion-easing-default, ease-in-out),\n    opacity var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n/* Match indicator radius to item radius per size */\n.sizeXs .indicator { border-radius: var(--radius-sm, 0.25rem); }\n.sizeSm .indicator { border-radius: var(--radius-md, 0.375rem); }\n.sizeMd .indicator { border-radius: var(--radius-md, 0.375rem); }\n.sizeLg .indicator { border-radius: var(--radius-lg, 0.5rem); }\n\n.sizeXs {\n  /* inherited by items */\n}\n\n.variantOutline.sizeXs {\n  padding: calc(var(--spacing-1, 0.25rem) / 2);\n  border-radius: var(--radius-md, 0.375rem);\n}\n\n.sizeSm {\n  /* inherited by items */\n}\n\n.variantOutline.sizeSm {\n  padding: var(--spacing-1, 0.25rem);\n  border-radius: var(--radius-lg, 0.5rem);\n}\n\n.sizeMd {\n  /* inherited by items */\n}\n\n.variantOutline.sizeMd {\n  padding: var(--spacing-1, 0.25rem);\n  border-radius: var(--radius-lg, 0.5rem);\n}\n\n.sizeLg {\n  /* inherited by items */\n}\n\n.variantOutline.sizeLg {\n  padding: var(--spacing-1, 0.25rem);\n  border-radius: var(--radius-xl, 0.75rem);\n}\n\n/* ToggleGroup item */\n.item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--font-size-sm, 0.875rem);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--text-primary, #111827);\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: background-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  user-select: none;\n  white-space: nowrap;\n}\n\n.item:active:not(:disabled) {\n  transform: translateY(1px);\n  transition: none;\n}\n\n/* A solid ring at the focus ring width, cleared of the item by the focus ring offset\n   (VI-690). The translucent halo alone measured 1.4:1 on dark planes (WCAG 2.4.7). */\n.item:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, #111827);\n  outline-offset: var(--focus-ring-offset, 2px);\n}\n\n.item:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Default variant items */\n@media (hover: hover) {\n  .itemVariantDefault:hover:not(:disabled) {\n    background-color: var(--surface-interactive-hover, #f3f4f6);\n  }\n}\n\n.itemVariantDefault[data-state=\"on\"] {\n  background-color: var(--interactive-primary-bg, var(--primary, #111827));\n  color: var(--interactive-primary-text, #f9fafb);\n}\n\n/* Outline variant items — indicator provides the active background */\n.itemVariantOutline {\n  position: relative;\n  z-index: 1;\n}\n\n@media (hover: hover) {\n  .itemVariantOutline:hover:not(:disabled):not([data-state=\"on\"]) {\n    background-color: color-mix(in srgb, var(--surface-interactive-hover, #f3f4f6) 40%, transparent);\n  }\n}\n\n.itemVariantOutline[data-state=\"on\"] {\n  background-color: transparent;\n  color: var(--interactive-primary-text, #f9fafb);\n}\n\n/* Multiple-select outline — items need their own active bg (no sliding indicator) */\n:global([data-type=\"multiple\"]) .itemVariantOutline[data-state=\"on\"] {\n  background-color: var(--interactive-primary-bg, var(--primary, #111827));\n}\n\n/* Sizes */\n.itemSizeXs {\n  --label-box-height: 1.5rem;\n  height: var(--label-box-height);\n  padding: 0 var(--spacing-2, 0.5rem);\n  border-radius: var(--radius-sm, 0.25rem);\n  font-size: var(--font-size-xs, 0.75rem);\n  gap: var(--spacing-1, 0.25rem);\n}\n\n.itemSizeSm {\n  --label-box-height: 1.75rem;\n  height: var(--label-box-height);\n  padding: 0 var(--spacing-2, 0.5rem);\n  border-radius: var(--radius-md, 0.375rem);\n  font-size: var(--font-size-xs, 0.75rem);\n  gap: var(--spacing-1, 0.25rem);\n}\n\n.itemSizeMd {\n  --label-box-height: 2.25rem;\n  height: var(--label-box-height);\n  padding: 0 var(--spacing-3, 0.75rem);\n  border-radius: var(--radius-md, 0.375rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  gap: var(--spacing-2, 0.5rem);\n}\n\n.itemSizeLg {\n  --label-box-height: 2.75rem;\n  height: var(--label-box-height);\n  padding: 0 var(--spacing-4, 1rem);\n  border-radius: var(--radius-lg, 0.5rem);\n  font-size: var(--font-size-base, 1rem);\n  gap: var(--spacing-2, 0.5rem);\n}\n\n/* Label centring (VI-684, shared spec: the label-centering doc under docs/). The label is a\n   block span whose line box is trimmed to the capital-to-baseline band, so the\n   flex container centres the ink and not the font's ascent/descent. Without\n   text-box (Firefox) it is a plain block and rendering is unchanged. */\n.label {\n  display: block;\n}\n\n@supports (text-box: trim-both cap alphabetic) {\n  .label {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Blink only: it snaps the baseline to a whole CSS px; this hands back what the\n   snap took. WebKit places the baseline exactly, so it is excluded. */\n@supports (text-box: trim-both cap alphabetic) and (not (-apple-pay-button-style: black)) {\n  .label {\n    transform: translateY(calc((var(--label-box-height) + 1cap) / 2 - round((var(--label-box-height) + 1cap) / 2, 1px)));\n  }\n}\n"
+          "content": "/* ToggleGroup root */\n.root {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-1, 0.25rem);\n}\n\n.variantDefault {\n  /* items have no outer border, rely on item bg */\n}\n\n.variantOutline {\n  position: relative;\n  border: 1px solid var(--border-default, #e5e7eb);\n  gap: 0;\n}\n\n/* The track fill (VI-709). Zero specificity, so a consumer's own class still sets\n   the group's background whichever sheet loads last. */\n:where(.variantOutline) {\n  background-color: var(--toggle-group-track-bg, transparent);\n}\n\n/* Sliding indicator pill */\n.indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background-color: var(--toggle-group-selected-bg, var(--interactive-primary-bg, var(--primary, #111827)));\n  border-radius: var(--radius-md, 0.375rem);\n  opacity: 0;\n  pointer-events: none;\n  z-index: 0;\n  transition:\n    transform var(--motion-duration-200, 200ms) var(--motion-easing-default, ease-in-out),\n    width var(--motion-duration-200, 200ms) var(--motion-easing-default, ease-in-out),\n    opacity var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n}\n\n/* Match indicator radius to item radius per size */\n.sizeXs .indicator { border-radius: var(--toggle-group-xs-item-radius, var(--radius-sm, 0.25rem)); }\n.sizeSm .indicator { border-radius: var(--radius-md, 0.375rem); }\n.sizeMd .indicator { border-radius: var(--radius-md, 0.375rem); }\n.sizeLg .indicator { border-radius: var(--radius-lg, 0.5rem); }\n\n.sizeXs {\n  /* inherited by items */\n}\n\n.variantOutline.sizeXs {\n  padding: calc(var(--spacing-1, 0.25rem) / 2);\n  border-radius: var(--toggle-group-xs-track-radius, var(--radius-md, 0.375rem));\n}\n\n.sizeSm {\n  /* inherited by items */\n}\n\n.variantOutline.sizeSm {\n  padding: var(--spacing-1, 0.25rem);\n  border-radius: var(--radius-lg, 0.5rem);\n}\n\n.sizeMd {\n  /* inherited by items */\n}\n\n.variantOutline.sizeMd {\n  padding: var(--spacing-1, 0.25rem);\n  border-radius: var(--radius-lg, 0.5rem);\n}\n\n.sizeLg {\n  /* inherited by items */\n}\n\n.variantOutline.sizeLg {\n  padding: var(--spacing-1, 0.25rem);\n  border-radius: var(--radius-xl, 0.75rem);\n}\n\n/* ToggleGroup item */\n.item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--font-size-sm, 0.875rem);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--toggle-group-unselected-text, var(--text-primary, #111827));\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: background-color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    color var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out),\n    box-shadow var(--motion-duration-150, 150ms) var(--motion-easing-default, ease-in-out);\n  user-select: none;\n  white-space: nowrap;\n}\n\n.item:active:not(:disabled) {\n  transform: translateY(1px);\n  transition: none;\n}\n\n/* A solid ring at the focus ring width, cleared of the item by the focus ring offset\n   (VI-690). The translucent halo alone measured 1.4:1 on dark planes (WCAG 2.4.7). */\n.item:focus-visible {\n  outline: var(--focus-ring-width, 2px) solid var(--border-focus, #111827);\n  outline-offset: var(--focus-ring-offset, 2px);\n}\n\n.item:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* Default variant items */\n@media (hover: hover) {\n  .itemVariantDefault:hover:not(:disabled) {\n    background-color: var(--surface-interactive-hover, #f3f4f6);\n  }\n}\n\n.itemVariantDefault[data-state=\"on\"] {\n  background-color: var(--toggle-group-selected-bg, var(--interactive-primary-bg, var(--primary, #111827)));\n  color: var(--toggle-group-selected-text, var(--interactive-primary-text, #f9fafb));\n}\n\n/* Outline variant items — indicator provides the active background */\n.itemVariantOutline {\n  position: relative;\n  z-index: 1;\n}\n\n@media (hover: hover) {\n  .itemVariantOutline:hover:not(:disabled):not([data-state=\"on\"]) {\n    background-color: color-mix(in srgb, var(--surface-interactive-hover, #f3f4f6) 40%, transparent);\n  }\n}\n\n.itemVariantOutline[data-state=\"on\"] {\n  background-color: transparent;\n  color: var(--toggle-group-selected-text, var(--interactive-primary-text, #f9fafb));\n}\n\n/* Multiple-select outline — items need their own active bg (no sliding indicator) */\n:global([data-type=\"multiple\"]) .itemVariantOutline[data-state=\"on\"] {\n  background-color: var(--toggle-group-selected-bg, var(--interactive-primary-bg, var(--primary, #111827)));\n}\n\n/* Sizes */\n.itemSizeXs {\n  --label-box-height: 1.5rem;\n  height: var(--label-box-height);\n  padding: 0 var(--toggle-group-xs-padding-x, var(--spacing-2, 0.5rem));\n  border-radius: var(--toggle-group-xs-item-radius, var(--radius-sm, 0.25rem));\n  font-size: var(--toggle-group-xs-font-size, var(--font-size-xs, 0.75rem));\n  gap: var(--spacing-1, 0.25rem);\n}\n\n.itemSizeSm {\n  --label-box-height: 1.75rem;\n  height: var(--label-box-height);\n  padding: 0 var(--spacing-2, 0.5rem);\n  border-radius: var(--radius-md, 0.375rem);\n  font-size: var(--font-size-xs, 0.75rem);\n  gap: var(--spacing-1, 0.25rem);\n}\n\n.itemSizeMd {\n  --label-box-height: 2.25rem;\n  height: var(--label-box-height);\n  padding: 0 var(--spacing-3, 0.75rem);\n  border-radius: var(--radius-md, 0.375rem);\n  font-size: var(--font-size-sm, 0.875rem);\n  gap: var(--spacing-2, 0.5rem);\n}\n\n.itemSizeLg {\n  --label-box-height: 2.75rem;\n  height: var(--label-box-height);\n  padding: 0 var(--spacing-4, 1rem);\n  border-radius: var(--radius-lg, 0.5rem);\n  font-size: var(--font-size-base, 1rem);\n  gap: var(--spacing-2, 0.5rem);\n}\n\n/* Label centring (VI-684, shared spec: the label-centering doc under docs/). The label is a\n   block span whose line box is trimmed to the capital-to-baseline band, so the\n   flex container centres the ink and not the font's ascent/descent. Without\n   text-box (Firefox) it is a plain block and rendering is unchanged. */\n.label {\n  display: block;\n}\n\n@supports (text-box: trim-both cap alphabetic) {\n  .label {\n    text-box: trim-both cap alphabetic;\n  }\n}\n\n/* Blink only: it snaps the baseline to a whole CSS px; this hands back what the\n   snap took. WebKit places the baseline exactly, so it is excluded. */\n@supports (text-box: trim-both cap alphabetic) and (not (-apple-pay-button-style: black)) {\n  .label {\n    transform: translateY(calc((var(--label-box-height) + 1cap) / 2 - round((var(--label-box-height) + 1cap) / 2, 1px)));\n  }\n}\n"
         }
       ]
     },

package/dist/visor-manifest.json

@@ -1,6 +1,6 @@
 {
   "version": "0.4.0",
-  "generated_at": "2026-10-04T23:46:57.980Z",
+  "generated_at": "2026-10-14T21:13:18.485Z",
   "components": {
     "accessibility-specimen": {
       "category": "specimen",
@@ -11473,7 +11473,15 @@
         "--spacing-3",
         "--spacing-4",
         "--surface-interactive-hover",
-        "--text-primary"
+        "--text-primary",
+        "--toggle-group-selected-bg",
+        "--toggle-group-selected-text",
+        "--toggle-group-track-bg",
+        "--toggle-group-unselected-text",
+        "--toggle-group-xs-font-size",
+        "--toggle-group-xs-item-radius",
+        "--toggle-group-xs-padding-x",
+        "--toggle-group-xs-track-radius"
       ],
       "example": "<ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n  <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n  <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n</ToggleGroup>\n"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loworbitstudio/visor",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "description": "CLI for the Visor design system — add components, hooks, and utilities to your project.",
   "type": "module",
   "bin": {
@@ -46,7 +46,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1021.0",
     "@babel/parser": "^7.26.0",
-    "@loworbitstudio/visor-theme-engine": "^0.30.0",
+    "@loworbitstudio/visor-theme-engine": "^0.31.0",
     "commander": "^13.1.0",
     "diff": "^8.0.4",
     "picocolors": "^1.1.1",