@bridge-ds/toolbar 0.7.0 → 0.8.1

package/dist/{Toolbar-Cib7qewk.js → Toolbar-WfZ7_2Sw.js}

@@ -1,15 +1,15 @@
 if (typeof document !== 'undefined' && !document.querySelector('style[data-bridge-toolbar-css="' + "Toolbar" + '"]')) {
   const style = document.createElement('style');
   style.setAttribute('data-bridge-toolbar-css', "Toolbar");
-  style.textContent = "/* The Bridge toolbar floats over the admin's content column: bottom right by default, docked left or centre on demand,\n   lifted above the page's primary buttons and the outlined surfaces when every dock would cover one. One row, 44px,\n   on desktop; compact density so every control is 36px. The border stays neutral. Text: 14 and 12, plus the wordmark.\n   Tokens only. */\n._anchor_a8mxc_5 {\n  position: fixed;\n  inset-inline: var(--space-4);\n  bottom: var(--space-4);\n  z-index: var(--layer-sticky);\n  display: flex;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n\n._anchor_a8mxc_5[data-dock=\"start\"] {\n  justify-content: flex-start;\n}\n\n._anchor_a8mxc_5[data-dock=\"center\"] {\n  justify-content: center;\n}\n\n/* Never over the sidebar: the docks live in the content column (the shell's sidebar is size-60 wide above 1024px). */\n@media (min-width: 1025px) {\n  ._anchor_a8mxc_5 {\n    inset-inline-start: calc(var(--size-60) + var(--space-4));\n  }\n}\n\n._panel_a8mxc_30,\n._pill_a8mxc_31 {\n  box-sizing: border-box;\n  border: var(--border-width-default) solid var(--color-border-default);\n  background-color: var(--color-surface-raised);\n  box-shadow: var(--elevation-overlay);\n  color: var(--color-text-default);\n  font-family: var(--typography-ui-family);\n  font-size: var(--typography-ui-size);\n  line-height: var(--typography-ui-line-height);\n  pointer-events: auto;\n}\n\n/* The outlines layer comes first in the document: the bar, on the same layer, paints above it and its scrim. */\n._panel_a8mxc_30,\n._pill_a8mxc_31 {\n  position: relative;\n  z-index: var(--layer-sticky);\n}\n\n._panel_a8mxc_30[data-dragging],\n._pill_a8mxc_31[data-dragging] {\n  box-shadow: var(--elevation-modal);\n}\n\n/* Desktop: one row, 44px tall with its border (36px controls): compare, then the changes of this screen, then the\n   rest. A note, when there is one, takes a second row. */\n._panel_a8mxc_30 {\n  display: grid;\n  grid-template-areas:\n    \"grip title sides nav actions collapse\"\n    \"note note note note note note\";\n  grid-template-rows: calc(var(--size-11) - 2 * var(--border-width-default)) auto;\n  grid-template-columns: auto auto auto auto minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: var(--space-2);\n  max-width: min(100%, var(--size-300));\n  padding: 0 var(--space-1);\n  border-radius: var(--radius-overlay);\n}\n\n._grip_a8mxc_71 {\n  grid-area: grip;\n  cursor: grab;\n  touch-action: none;\n}\n\n._panel_a8mxc_30[data-dragging] ._grip_a8mxc_71 {\n  cursor: grabbing;\n}\n\n._title_a8mxc_81 {\n  display: flex;\n  grid-area: title;\n  align-items: baseline;\n  gap: var(--space-2);\n  min-width: 0;\n  margin: 0;\n}\n\n._brand_a8mxc_90 {\n  flex: none;\n  font-family: var(--font-family-display);\n  font-size: var(--typography-ui-size);\n  font-weight: var(--font-weight-semibold);\n}\n\n/* Desktop: the wordmark only; the change's name is in the pill and in the This change tooltip. */\n._panel_a8mxc_30 ._name_a8mxc_98 {\n  display: none;\n}\n\n._name_a8mxc_98,\n._pillTitle_a8mxc_103 {\n  overflow: hidden;\n  font-weight: var(--font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n._actions_a8mxc_110 {\n  display: flex;\n  grid-area: actions;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n._sides_a8mxc_119 {\n  grid-area: sides;\n}\n\n/* The changes of this screen: the count (also the outlines toggle), Previous and Next, Isolate. */\n._nav_a8mxc_124 {\n  display: flex;\n  grid-area: nav;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n._countButton_a8mxc_132 {\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n._steps_a8mxc_137 {\n  flex: none;\n}\n\n._collapse_a8mxc_141 {\n  grid-area: collapse;\n}\n\n._count_a8mxc_132 {\n  margin-inline-start: var(--space-1-5);\n  color: var(--color-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n/* The colour pair of each changed token: a 24px split swatch, before half and after half. Values in the tooltip. */\n._swatches_a8mxc_152 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  border-radius: var(--radius-inset);\n}\n\n._swatches_a8mxc_152:focus-visible {\n  outline: var(--focus-ring-width) solid var(--focus-ring-color);\n  outline-offset: var(--focus-ring-offset);\n}\n\n._split_a8mxc_164 {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: none;\n  width: var(--size-6);\n  height: var(--size-6);\n  overflow: hidden;\n  border: var(--border-width-default) solid var(--color-border-strong);\n  border-radius: var(--radius-pill);\n}\n\n._split_a8mxc_164 > span {\n  flex: 1 1 0;\n}\n\n/* Under 1.1:1 the two halves look alike: say so, so a near-white change reads as intended. */\n._subtle_a8mxc_180 {\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n  white-space: nowrap;\n}\n\n._more_a8mxc_187 {\n  white-space: nowrap;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  font-variant-numeric: tabular-nums;\n}\n\n._noteRow_a8mxc_194 {\n  grid-area: note;\n  min-width: 0;\n  padding-block-end: var(--space-1);\n}\n\n._note_a8mxc_194 {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n._noteRow_a8mxc_194 ._note_a8mxc_194 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 var(--space-2);\n  padding-inline-start: var(--space-2);\n  color: var(--color-text-default);\n}\n\n._noteAction_a8mxc_216 {\n  flex: none;\n}\n\n._sheet_a8mxc_220 {\n  width: min(90vw, var(--size-80));\n}\n\n._list_a8mxc_224 {\n  display: grid;\n  max-height: var(--size-60);\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n._item_a8mxc_233 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  min-height: var(--control-height-md);\n}\n\n._screenLink_a8mxc_241,\n._here_a8mxc_242 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1-5);\n  min-height: var(--control-height-md);\n}\n\n._here_a8mxc_242 {\n  font-weight: var(--font-weight-semibold);\n}\n\n._meta_a8mxc_253 {\n  flex: none;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n/* Changed here: one focusable row per surface. Line 1 its role, line 2 its tokens (muted, 12). Nothing truncates. */\n._rows_a8mxc_261 {\n  display: grid;\n  max-height: var(--size-60);\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n._row_a8mxc_261 {\n  height: auto;\n  min-height: var(--control-height-md);\n  padding-block: var(--space-1);\n  justify-content: flex-start;\n  text-align: start;\n}\n\n._rowText_a8mxc_278 {\n  display: grid;\n  min-width: 0;\n  font-weight: var(--font-weight-regular);\n  white-space: normal;\n}\n\n._rowName_a8mxc_285 {\n  color: var(--color-text-default);\n  font-size: var(--typography-ui-size);\n  line-height: var(--typography-ui-line-height);\n}\n\n._rowMeta_a8mxc_291 {\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n._tipText_a8mxc_297 {\n  display: grid;\n}\n\n._tipStep_a8mxc_301 {\n  opacity: 0.8;\n}\n\n._sheetFoot_a8mxc_305 {\n  margin-top: var(--space-2);\n}\n\n._sheetSection_a8mxc_309 {\n  margin-top: var(--space-2);\n  padding-top: var(--space-2);\n  border-top: var(--border-width-default) solid var(--color-border-default);\n}\n\n._sheetSection_a8mxc_309:first-child {\n  margin-top: 0;\n  padding-top: 0;\n  border-top: 0;\n}\n\n._sectionTitle_a8mxc_321 {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n}\n\n/* A separate notice, not part of a list. */\n._notice_a8mxc_327 {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-1-5);\n  margin: var(--space-2) 0 0;\n  padding-top: var(--space-2);\n  border-top: var(--border-width-default) solid var(--color-border-default);\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n/* In the sheet on phones only: the token pairs and the way back. */\n._sheetPhone_a8mxc_340 {\n  display: none;\n}\n\n._back_a8mxc_344 {\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--control-height-md);\n}\n\n._pill_a8mxc_31 {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: var(--space-2);\n  max-width: min(100%, var(--size-120));\n  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);\n  border-radius: var(--radius-pill);\n}\n\n/* With a note under it, the pill becomes a small card. */\n._pill_a8mxc_31[data-note] {\n  border-radius: var(--radius-overlay);\n}\n\n._pill_a8mxc_31 ._noteRow_a8mxc_194 {\n  grid-column: 1 / -1;\n  padding-inline-end: var(--space-3);\n}\n\n._pill_a8mxc_31 ._noteRow_a8mxc_194 ._note_a8mxc_194 {\n  padding-inline-start: 0;\n}\n\n/* Show what changed: a dashed Deep Harbor frame (Bridge's tool colour, not the product's) on each changed surface,\n   with a faint Deep Harbor tint and a role chip. Fixed layer: no pointer events, no focus, no layout. */\n._overlay_a8mxc_376 {\n  position: fixed;\n  inset: 0;\n  z-index: var(--layer-sticky);\n  pointer-events: none;\n}\n\n._box_a8mxc_383 {\n  position: absolute;\n  box-sizing: border-box;\n  outline: var(--border-width-strong) dashed var(--color-action-primary-bg);\n  outline-offset: var(--border-width-strong);\n}\n\n/* A page-sized surface: an inset frame, so it reads as a selection, not as the window edge. */\n._box_a8mxc_383[data-page] {\n  outline-offset: 0;\n  border-radius: var(--radius-container);\n}\n\n/* No tint on the page frame: it would tint the very colour being compared. */\n._box_a8mxc_383[data-page] ._tint_a8mxc_397 {\n  display: none;\n}\n\n/* No room above (top of the viewport): under the surface instead. */\n/* No room above (top of the viewport): inside the surface's top-left corner instead. */\n._box_a8mxc_383[data-inside] ._chip_a8mxc_403 {\n  top: 0;\n  bottom: auto;\n  left: 0;\n}\n\n/* The surface a list row points at: solid frame, stronger tint. */\n._box_a8mxc_383[data-emphasis] {\n  outline-style: solid;\n}\n\n._box_a8mxc_383[data-emphasis] ._tint_a8mxc_397 {\n  opacity: 0.1;\n}\n\n._box_a8mxc_383[data-page] ._chip_a8mxc_403 {\n  top: var(--space-1);\n  bottom: auto;\n  left: var(--space-1);\n}\n\n._tint_a8mxc_397 {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-action-primary-bg);\n  opacity: 0.04;\n}\n\n/* Above the surface's top-left corner, so it never hides the surface's own content. */\n/* Hidden by default: shown on hover, from its list row, and briefly when outlines turn on. */\n._chip_a8mxc_403 {\n  position: absolute;\n  visibility: hidden;\n  bottom: calc(100% + var(--border-width-strong) * 2);\n  left: calc(var(--border-width-strong) * -2);\n  max-width: var(--size-60);\n  overflow: hidden;\n  padding: 0 var(--space-1-5);\n  border-radius: var(--radius-inset);\n  background-color: var(--color-action-primary-bg);\n  color: var(--color-action-primary-text);\n  font-family: var(--typography-ui-family);\n  font-size: var(--typography-caption-size);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--typography-caption-line-height);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n._chip_a8mxc_403[data-shown] {\n  visibility: visible;\n}\n\n/* Isolate: the scrim of a dialog over the rest of the page, with a cut-out around each changed surface. */\n._scrim_a8mxc_458 {\n  position: absolute;\n  inset: 0;\n  display: block;\n  animation: _scrim-in_a8mxc_1 var(--motion-duration-moderate) var(--motion-easing-enter);\n}\n\n._scrimFill_a8mxc_465 {\n  fill: var(--color-overlay-scrim);\n}\n\n@keyframes _scrim-in_a8mxc_1 {\n  from {\n    opacity: 0;\n  }\n}\n\n._tip_a8mxc_297 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n@media (max-width: 760px) {\n  ._anchor_a8mxc_5 {\n    inset-inline: var(--space-2);\n    bottom: var(--space-2);\n  }\n\n  /* Phone, open: docked to the bottom edge. Row 1: sides, Changes, collapse. Row 2, for a token change: the count,\n     Previous and Next, Isolate. */\n  ._anchor_a8mxc_5[data-open] {\n    inset-inline: 0;\n    bottom: 0;\n  }\n\n  ._panel_a8mxc_30 {\n    grid-template-areas:\n      \"sides actions collapse\"\n      \"nav nav nav\"\n      \"note note note\";\n    grid-template-rows: calc(var(--size-11) - var(--border-width-default)) auto auto;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    column-gap: var(--space-2);\n    width: 100%;\n    padding: 0 var(--space-1);\n    border-width: var(--border-width-default) 0 0;\n    border-radius: 0;\n  }\n\n  ._title_a8mxc_81 {\n    display: none;\n  }\n\n  ._grip_a8mxc_71,\n  ._brand_a8mxc_90,\n  ._studio_a8mxc_514 {\n    display: none;\n  }\n\n  ._sides_a8mxc_119 {\n    justify-self: start;\n  }\n\n  ._nav_a8mxc_124 {\n    padding-block-end: var(--space-1);\n  }\n\n  ._noteRow_a8mxc_194 ._note_a8mxc_194 {\n    padding-inline-start: 0;\n  }\n\n  ._pill_a8mxc_31 {\n    grid-template-columns: minmax(0, 1fr) auto auto;\n  }\n\n  ._sheetPhone_a8mxc_340 {\n    display: block;\n  }\n}\n\n/* Below 480px the note's action takes its own line. */\n@media (max-width: 480px) {\n  ._noteAction_a8mxc_216 {\n    flex-basis: 100%;\n    justify-content: flex-start;\n  }\n}\n";
+  style.textContent = "/* The Bridge toolbar floats over the admin's content column: bottom right by default, docked left or centre on demand,\n   lifted above the page's primary buttons and the outlined surfaces when every dock would cover one. One row, 44px,\n   on desktop; compact density so every control is 36px. The border stays neutral. Text: 14 and 12, plus the wordmark.\n   Tokens only. */\n._anchor_1rx8w_5 {\n  position: fixed;\n  inset-inline: var(--space-4);\n  bottom: var(--space-4);\n  z-index: var(--layer-sticky);\n  display: flex;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n\n._anchor_1rx8w_5[data-dock=\"start\"] {\n  justify-content: flex-start;\n}\n\n._anchor_1rx8w_5[data-dock=\"center\"] {\n  justify-content: center;\n}\n\n/* Never over the sidebar: the docks live in the content column (the shell's sidebar is size-60 wide above 1024px). */\n@media (min-width: 1025px) {\n  ._anchor_1rx8w_5 {\n    inset-inline-start: calc(var(--size-60) + var(--space-4));\n  }\n}\n\n._panel_1rx8w_30,\n._pill_1rx8w_31 {\n  box-sizing: border-box;\n  border: var(--border-width-default) solid var(--color-border-default);\n  background-color: var(--color-surface-raised);\n  box-shadow: var(--elevation-overlay);\n  color: var(--color-text-default);\n  font-family: var(--typography-ui-family);\n  font-size: var(--typography-ui-size);\n  line-height: var(--typography-ui-line-height);\n  pointer-events: auto;\n}\n\n/* The outlines layer comes first in the document: the bar, on the same layer, paints above it and its scrim. */\n._panel_1rx8w_30,\n._pill_1rx8w_31 {\n  position: relative;\n  z-index: var(--layer-sticky);\n}\n\n._panel_1rx8w_30[data-dragging],\n._pill_1rx8w_31[data-dragging] {\n  box-shadow: var(--elevation-modal);\n}\n\n/* Desktop: one row, 44px tall with its border (36px controls): compare, then the changes of this screen, then the\n   rest. A note, when there is one, takes a second row. */\n._panel_1rx8w_30 {\n  display: grid;\n  grid-template-areas:\n    \"grip title sides nav actions collapse\"\n    \"note note note note note note\";\n  grid-template-rows: calc(var(--size-11) - 2 * var(--border-width-default)) auto;\n  grid-template-columns: auto auto auto auto minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: var(--space-2);\n  max-width: min(100%, var(--size-300));\n  padding: 0 var(--space-1);\n  border-radius: var(--radius-overlay);\n}\n\n._grip_1rx8w_71 {\n  grid-area: grip;\n  cursor: grab;\n  touch-action: none;\n}\n\n._panel_1rx8w_30[data-dragging] ._grip_1rx8w_71 {\n  cursor: grabbing;\n}\n\n._title_1rx8w_81 {\n  display: flex;\n  grid-area: title;\n  align-items: baseline;\n  gap: var(--space-2);\n  min-width: 0;\n  margin: 0;\n}\n\n._brand_1rx8w_90 {\n  flex: none;\n  font-family: var(--font-family-display);\n  font-size: var(--typography-ui-size);\n  font-weight: var(--font-weight-semibold);\n}\n\n/* Desktop: the wordmark only; the change's name is in the pill and in the This change tooltip. */\n._panel_1rx8w_30 ._name_1rx8w_98 {\n  display: none;\n}\n\n._name_1rx8w_98,\n._pillTitle_1rx8w_103 {\n  overflow: hidden;\n  font-weight: var(--font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n._actions_1rx8w_110 {\n  display: flex;\n  grid-area: actions;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n._sides_1rx8w_119 {\n  grid-area: sides;\n}\n\n/* The changes of this screen: the count (also the outlines toggle), Previous and Next, Isolate. */\n._nav_1rx8w_124 {\n  display: flex;\n  grid-area: nav;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n._countButton_1rx8w_132 {\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n._steps_1rx8w_137 {\n  flex: none;\n}\n\n._collapse_1rx8w_141 {\n  grid-area: collapse;\n}\n\n._count_1rx8w_132 {\n  margin-inline-start: var(--space-1-5);\n  color: var(--color-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n/* The colour pair of each changed token: a 24px split swatch, before half and after half. Values in the tooltip. */\n._swatches_1rx8w_152 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  border-radius: var(--radius-inset);\n}\n\n._swatches_1rx8w_152:focus-visible {\n  outline: var(--focus-ring-width) solid var(--focus-ring-color);\n  outline-offset: var(--focus-ring-offset);\n}\n\n._split_1rx8w_164 {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: none;\n  width: var(--size-6);\n  height: var(--size-6);\n  overflow: hidden;\n  border: var(--border-width-default) solid var(--color-border-strong);\n  border-radius: var(--radius-pill);\n}\n\n._split_1rx8w_164 > span {\n  flex: 1 1 0;\n}\n\n/* Under 1.1:1 the two halves look alike: say so, so a near-white change reads as intended. */\n._subtle_1rx8w_180 {\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n  white-space: nowrap;\n}\n\n._more_1rx8w_187 {\n  white-space: nowrap;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  font-variant-numeric: tabular-nums;\n}\n\n._noteRow_1rx8w_194 {\n  grid-area: note;\n  min-width: 0;\n  padding-block-end: var(--space-1);\n}\n\n._note_1rx8w_194 {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n._noteRow_1rx8w_194 ._note_1rx8w_194 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 var(--space-2);\n  padding-inline-start: var(--space-2);\n  color: var(--color-text-default);\n}\n\n._noteAction_1rx8w_216 {\n  flex: none;\n}\n\n._sheet_1rx8w_220 {\n  width: min(90vw, var(--size-80));\n}\n\n._list_1rx8w_224 {\n  display: grid;\n  max-height: var(--size-60);\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n._item_1rx8w_233 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  min-height: var(--control-height-md);\n}\n\n._screenLink_1rx8w_241,\n._here_1rx8w_242 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1-5);\n  min-height: var(--control-height-md);\n}\n\n._here_1rx8w_242 {\n  font-weight: var(--font-weight-semibold);\n}\n\n._meta_1rx8w_253 {\n  flex: none;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n/* Changed here: one focusable row per surface. Line 1 its role, line 2 its tokens (muted, 12). Nothing truncates. */\n._rows_1rx8w_261 {\n  display: grid;\n  max-height: var(--size-60);\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n._row_1rx8w_261 {\n  height: auto;\n  min-height: var(--control-height-md);\n  padding-block: var(--space-1);\n  justify-content: flex-start;\n  text-align: start;\n}\n\n._rowText_1rx8w_278 {\n  display: grid;\n  min-width: 0;\n  font-weight: var(--font-weight-regular);\n  white-space: normal;\n}\n\n._rowName_1rx8w_285 {\n  color: var(--color-text-default);\n  font-size: var(--typography-ui-size);\n  line-height: var(--typography-ui-line-height);\n}\n\n._rowMeta_1rx8w_291 {\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n._tipText_1rx8w_297 {\n  display: grid;\n}\n\n._tipStep_1rx8w_301 {\n  opacity: 0.8;\n}\n\n._sheetFoot_1rx8w_305 {\n  margin-top: var(--space-2);\n}\n\n._sheetSection_1rx8w_309 {\n  margin-top: var(--space-2);\n  padding-top: var(--space-2);\n  border-top: var(--border-width-default) solid var(--color-border-default);\n}\n\n._sheetSection_1rx8w_309:first-child {\n  margin-top: 0;\n  padding-top: 0;\n  border-top: 0;\n}\n\n._sectionTitle_1rx8w_321 {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n}\n\n/* A separate notice, not part of a list. */\n._notice_1rx8w_327 {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-1-5);\n  margin: var(--space-2) 0 0;\n  padding-top: var(--space-2);\n  border-top: var(--border-width-default) solid var(--color-border-default);\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n/* In the sheet on phones only: the token pairs and the way back. */\n._sheetPhone_1rx8w_340 {\n  display: none;\n}\n\n._back_1rx8w_344 {\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--control-height-md);\n}\n\n/* Collapsed: the wordmark, the change's title (ellipsis, full title in its tooltip), the Live product | This change\n   switch (one click flips, as in the open bar) and Show Bridge details. The title gives way first when space runs out. */\n._pill_1rx8w_31 {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: var(--space-2);\n  max-width: min(100%, var(--size-140));\n  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);\n  border-radius: var(--radius-pill);\n}\n\n._pill_1rx8w_31 ._sides_1rx8w_119 {\n  grid-area: auto;\n}\n\n._pillTitle_1rx8w_103 {\n  min-width: 0;\n  color: var(--color-text-muted);\n}\n\n/* With a note under it, the pill becomes a small card. */\n._pill_1rx8w_31[data-note] {\n  border-radius: var(--radius-overlay);\n}\n\n._pill_1rx8w_31 ._noteRow_1rx8w_194 {\n  grid-column: 1 / -1;\n  padding-inline-end: var(--space-3);\n}\n\n._pill_1rx8w_31 ._noteRow_1rx8w_194 ._note_1rx8w_194 {\n  padding-inline-start: 0;\n}\n\n/* Show what changed: a dashed Deep Harbor frame (Bridge's tool colour, not the product's) on each changed surface,\n   with a faint Deep Harbor tint and a role chip. Fixed layer: no pointer events, no focus, no layout. */\n._overlay_1rx8w_387 {\n  position: fixed;\n  inset: 0;\n  z-index: var(--layer-sticky);\n  pointer-events: none;\n}\n\n._box_1rx8w_394 {\n  position: absolute;\n  box-sizing: border-box;\n  outline: var(--border-width-strong) dashed var(--color-action-primary-bg);\n  outline-offset: var(--border-width-strong);\n}\n\n/* A page-sized surface: an inset frame, so it reads as a selection, not as the window edge. */\n._box_1rx8w_394[data-page] {\n  outline-offset: 0;\n  border-radius: var(--radius-container);\n}\n\n/* No tint on the page frame: it would tint the very colour being compared. */\n._box_1rx8w_394[data-page] ._tint_1rx8w_408 {\n  display: none;\n}\n\n/* No room above (top of the viewport): under the surface instead. */\n/* No room above (top of the viewport): inside the surface's top-left corner instead. */\n._box_1rx8w_394[data-inside] ._chip_1rx8w_414 {\n  top: 0;\n  bottom: auto;\n  left: 0;\n}\n\n/* The surface a list row points at: solid frame, stronger tint. */\n._box_1rx8w_394[data-emphasis] {\n  outline-style: solid;\n}\n\n._box_1rx8w_394[data-emphasis] ._tint_1rx8w_408 {\n  opacity: 0.1;\n}\n\n._box_1rx8w_394[data-page] ._chip_1rx8w_414 {\n  top: var(--space-1);\n  bottom: auto;\n  left: var(--space-1);\n}\n\n._tint_1rx8w_408 {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-action-primary-bg);\n  opacity: 0.04;\n}\n\n/* Above the surface's top-left corner, so it never hides the surface's own content. */\n/* Hidden by default: shown on hover, from its list row, and briefly when outlines turn on. */\n._chip_1rx8w_414 {\n  position: absolute;\n  visibility: hidden;\n  bottom: calc(100% + var(--border-width-strong) * 2);\n  left: calc(var(--border-width-strong) * -2);\n  max-width: var(--size-60);\n  overflow: hidden;\n  padding: 0 var(--space-1-5);\n  border-radius: var(--radius-inset);\n  background-color: var(--color-action-primary-bg);\n  color: var(--color-action-primary-text);\n  font-family: var(--typography-ui-family);\n  font-size: var(--typography-caption-size);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--typography-caption-line-height);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n._chip_1rx8w_414[data-shown] {\n  visibility: visible;\n}\n\n/* Isolate: the scrim of a dialog over the rest of the page, with a cut-out around each changed surface. */\n._scrim_1rx8w_469 {\n  position: absolute;\n  inset: 0;\n  display: block;\n  animation: _scrim-in_1rx8w_1 var(--motion-duration-moderate) var(--motion-easing-enter);\n}\n\n._scrimFill_1rx8w_476 {\n  fill: var(--color-overlay-scrim);\n}\n\n@keyframes _scrim-in_1rx8w_1 {\n  from {\n    opacity: 0;\n  }\n}\n\n._tip_1rx8w_297 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n@media (max-width: 760px) {\n  ._anchor_1rx8w_5 {\n    inset-inline: var(--space-2);\n    bottom: var(--space-2);\n  }\n\n  /* Phone, open: docked to the bottom edge. Row 1: sides, Changes, collapse. Row 2, for a token change: the count,\n     Previous and Next, Isolate. */\n  ._anchor_1rx8w_5[data-open] {\n    inset-inline: 0;\n    bottom: 0;\n  }\n\n  ._panel_1rx8w_30 {\n    grid-template-areas:\n      \"sides actions collapse\"\n      \"nav nav nav\"\n      \"note note note\";\n    grid-template-rows: calc(var(--size-11) - var(--border-width-default)) auto auto;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    column-gap: var(--space-2);\n    width: 100%;\n    padding: 0 var(--space-1);\n    border-width: var(--border-width-default) 0 0;\n    border-radius: 0;\n  }\n\n  ._title_1rx8w_81 {\n    display: none;\n  }\n\n  ._grip_1rx8w_71,\n  ._studio_1rx8w_524 {\n    display: none;\n  }\n\n  ._sides_1rx8w_119 {\n    justify-self: start;\n  }\n\n  ._nav_1rx8w_124 {\n    padding-block-end: var(--space-1);\n  }\n\n  ._noteRow_1rx8w_194 ._note_1rx8w_194 {\n    padding-inline-start: 0;\n  }\n\n  /* Phone, collapsed: the title goes first; the wordmark, the switch and Show Bridge details stay. */\n  ._pill_1rx8w_31 {\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    padding-inline-start: var(--space-3);\n  }\n\n  ._pill_1rx8w_31 ._pillTitle_1rx8w_103 {\n    display: none;\n  }\n\n  ._sheetPhone_1rx8w_340 {\n    display: block;\n  }\n}\n\n/* Below 480px the note's action takes its own line. */\n@media (max-width: 480px) {\n  ._noteAction_1rx8w_216 {\n    flex-basis: 100%;\n    justify-content: flex-start;\n  }\n}\n\n/* The narrowest phones: the wordmark gives way too, the switch keeps its full labels. */\n@media (max-width: 359px) {\n  ._pill_1rx8w_31 {\n    grid-template-columns: minmax(0, 1fr) auto;\n    padding-inline-start: var(--space-1);\n  }\n\n  ._pill_1rx8w_31 ._brand_1rx8w_90 {\n    display: none;\n  }\n}\n";
   document.head.appendChild(style);
 }
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useId, useLayoutEffect, useMemo, useRef, useCallback } from "react";
-import { ThemeProvider, Tooltip, Button, ButtonGroup, IconButton, VisuallyHidden, Kbd, Popover, PopoverTrigger, PopoverContent, Checkbox, Icon, Link, Badge } from "@bridge-ds/react";
+import { ThemeProvider, Tooltip, Button, ButtonGroup, IconButton, VisuallyHidden, Kbd, Popover, PopoverTrigger, PopoverContent, Checkbox, Icon, Link } from "@bridge-ds/react";
 import { ScanSearch, ChevronLeft, ChevronRight, GripVertical, ListChecks, ChevronUp, Check, Info, Minimize2 } from "lucide-react";
-import { g as githubReads, D as DEFAULT_PROXY, l as loadBuild, u as useDocumentScope } from "./index-LdnVzAG3.js";
-import { t as tokenChanges, c as changedScreens, b as changeMode, d as readableTitle, M as MARKS_PARAM, e as toggleIncluded, f as readRepo, r as readChanges, w as whereAmI, g as readReturn, h as readUse, i as shouldRender, O as OPEN_KEY, j as readDock, l as liveTokensUrl, n as noVisibleDifference, k as readScroll, S as SCROLL_PARAM, m as sameScreenOn, o as studioChangesUrl, p as studioChangeUrl, T as TOGETHER_EMPTY_LINE, q as contrastRatio, u as toHex, v as fromText, x as TOGETHER_HINT, y as isSubtle, z as isFlipKey, A as placeToolbar, B as togetherLabel, P as PARAM, C as changeSummary, D as dockAt, E as stepDock, F as DOCK_KEY } from "./session-Bj7imFZm.js";
+import { g as githubReads, t as tabPass, D as DEFAULT_PROXY, l as loadBuild, u as useDocumentScope, w as withPass } from "./index-XrLgL3hM.js";
+import { t as tokenChanges, c as changedScreens, b as changeMode, d as readableTitle, M as MARKS_PARAM, e as toggleIncluded, f as readRepo, r as readChanges, w as whereAmI, g as readReturn, h as readUse, i as shouldRender, O as OPEN_KEY, j as readDock, l as liveTokensUrl, n as noVisibleDifference, k as readScroll, S as SCROLL_PARAM, m as sameScreenOn, o as branchTitle, p as branchOfHost, q as canFlipSides, u as studioChangesUrl, v as studioChangeUrl, T as TOGETHER_EMPTY_LINE, x as contrastRatio, y as toHex, z as fromText, A as TOGETHER_HINT, B as isSubtle, R as READ_FAILED_TOGETHER, C as READ_FAILED, D as isFlipKey, E as placeToolbar, F as togetherLabel, P as PARAM, G as changeSummary, H as dockAt, I as stepDock, J as DOCK_KEY } from "./session-BSLnT9Xu.js";
 const VISUAL_BRANCH = "bridge-visual";
 const cacheKey = (n) => `bridge-admin:facts:v3:${n}`;
 function session$1() {
@@ -20,7 +20,7 @@ function session$1() {
   }
 }
 function readsOf(build) {
-  return githubReads({ team: build.ds ?? `${build.owner}/${build.repo}`, proxy: build.proxy === void 0 ? DEFAULT_PROXY : build.proxy });
+  return githubReads({ team: build.ds ?? `${build.owner}/${build.repo}`, proxy: build.proxy === void 0 ? DEFAULT_PROXY : build.proxy, pass: tabPass() });
 }
 async function readManifest(gh, build, R, n, sha) {
   const root = await gh.api(`${R}/git/trees/${VISUAL_BRANCH}`).catch(() => null);
@@ -590,52 +590,52 @@ function usePinnedBridgeTokens(url, theme) {
     };
   }, [url, theme]);
 }
-const anchor = "_anchor_a8mxc_5";
-const panel = "_panel_a8mxc_30";
-const pill = "_pill_a8mxc_31";
-const grip = "_grip_a8mxc_71";
-const title = "_title_a8mxc_81";
-const brand = "_brand_a8mxc_90";
-const name = "_name_a8mxc_98";
-const pillTitle = "_pillTitle_a8mxc_103";
-const actions = "_actions_a8mxc_110";
-const sides = "_sides_a8mxc_119";
-const nav = "_nav_a8mxc_124";
-const countButton = "_countButton_a8mxc_132";
-const steps = "_steps_a8mxc_137";
-const collapse = "_collapse_a8mxc_141";
-const split = "_split_a8mxc_164";
-const subtle = "_subtle_a8mxc_180";
-const noteRow = "_noteRow_a8mxc_194";
-const note = "_note_a8mxc_194";
-const noteAction = "_noteAction_a8mxc_216";
-const sheet = "_sheet_a8mxc_220";
-const list = "_list_a8mxc_224";
-const item = "_item_a8mxc_233";
-const screenLink = "_screenLink_a8mxc_241";
-const here = "_here_a8mxc_242";
-const meta = "_meta_a8mxc_253";
-const rows = "_rows_a8mxc_261";
-const row = "_row_a8mxc_261";
-const rowText = "_rowText_a8mxc_278";
-const rowName = "_rowName_a8mxc_285";
-const rowMeta = "_rowMeta_a8mxc_291";
-const tipText = "_tipText_a8mxc_297";
-const tipStep = "_tipStep_a8mxc_301";
-const sheetFoot = "_sheetFoot_a8mxc_305";
-const sheetSection = "_sheetSection_a8mxc_309";
-const sectionTitle = "_sectionTitle_a8mxc_321";
-const notice = "_notice_a8mxc_327";
-const sheetPhone = "_sheetPhone_a8mxc_340";
-const back = "_back_a8mxc_344";
-const overlay = "_overlay_a8mxc_376";
-const box = "_box_a8mxc_383";
-const tint = "_tint_a8mxc_397";
-const chip = "_chip_a8mxc_403";
-const scrim = "_scrim_a8mxc_458";
-const scrimFill = "_scrimFill_a8mxc_465";
-const tip = "_tip_a8mxc_297";
-const studio = "_studio_a8mxc_514";
+const anchor = "_anchor_1rx8w_5";
+const panel = "_panel_1rx8w_30";
+const pill = "_pill_1rx8w_31";
+const grip = "_grip_1rx8w_71";
+const title = "_title_1rx8w_81";
+const brand = "_brand_1rx8w_90";
+const name = "_name_1rx8w_98";
+const pillTitle = "_pillTitle_1rx8w_103";
+const actions = "_actions_1rx8w_110";
+const sides = "_sides_1rx8w_119";
+const nav = "_nav_1rx8w_124";
+const countButton = "_countButton_1rx8w_132";
+const steps = "_steps_1rx8w_137";
+const collapse = "_collapse_1rx8w_141";
+const split = "_split_1rx8w_164";
+const subtle = "_subtle_1rx8w_180";
+const noteRow = "_noteRow_1rx8w_194";
+const note = "_note_1rx8w_194";
+const noteAction = "_noteAction_1rx8w_216";
+const sheet = "_sheet_1rx8w_220";
+const list = "_list_1rx8w_224";
+const item = "_item_1rx8w_233";
+const screenLink = "_screenLink_1rx8w_241";
+const here = "_here_1rx8w_242";
+const meta = "_meta_1rx8w_253";
+const rows = "_rows_1rx8w_261";
+const row = "_row_1rx8w_261";
+const rowText = "_rowText_1rx8w_278";
+const rowName = "_rowName_1rx8w_285";
+const rowMeta = "_rowMeta_1rx8w_291";
+const tipText = "_tipText_1rx8w_297";
+const tipStep = "_tipStep_1rx8w_301";
+const sheetFoot = "_sheetFoot_1rx8w_305";
+const sheetSection = "_sheetSection_1rx8w_309";
+const sectionTitle = "_sectionTitle_1rx8w_321";
+const notice = "_notice_1rx8w_327";
+const sheetPhone = "_sheetPhone_1rx8w_340";
+const back = "_back_1rx8w_344";
+const overlay = "_overlay_1rx8w_387";
+const box = "_box_1rx8w_394";
+const tint = "_tint_1rx8w_408";
+const chip = "_chip_1rx8w_414";
+const scrim = "_scrim_1rx8w_469";
+const scrimFill = "_scrimFill_1rx8w_476";
+const tip = "_tip_1rx8w_297";
+const studio = "_studio_1rx8w_524";
 const styles = {
   anchor,
   panel,
@@ -1187,19 +1187,19 @@ function Toolbar({
   }, []);
   const choose = useCallback(
     (next) => {
-      if (next === side || !facts) return;
-      if (facts.mode === "tokens") {
+      if (next === side || !facts && !(error && !tg)) return;
+      if (facts?.mode === "tokens") {
         setSide(next);
         return;
       }
       const here2 = { search: window.location.search, hash: window.location.hash };
       if (next === "before" && build.production) {
-        window.location.assign(sameScreenOn(build.production, here2, { change, returnTo: window.location.origin, scroll: window.scrollY, marks: marks?.length ?? null }));
+        window.location.assign(withPass(sameScreenOn(build.production, here2, { change, returnTo: window.location.origin, scroll: window.scrollY, marks: marks?.length ?? null }), tabPass()));
       } else if (next === "after" && returnTo) {
-        window.location.assign(sameScreenOn(returnTo, here2, { change, scroll: window.scrollY }));
+        window.location.assign(withPass(sameScreenOn(returnTo, here2, { change, scroll: window.scrollY }), tabPass()));
       }
     },
-    [side, facts, build, change, returnTo, marks]
+    [side, facts, error, tg, build, change, returnTo, marks]
   );
   useEffect(() => {
     const onKey = (e) => {
@@ -1302,9 +1302,9 @@ function Toolbar({
   };
   const sideLabel = (x) => x === "after" && tg ? togetherLabel(T?.included.length ?? tg.changes.length) : SIDE_LABEL[x];
   const label = sideLabel(side);
-  const title2 = facts?.title ?? (tg ? `${tg.changes.length} changes together` : `Change ${change}`);
+  const title2 = facts?.title ?? (tg ? `${tg.changes.length} changes together` : branchTitle(branchOfHost(onProduction && returnTo ? new URL(returnTo).host : window.location.host, build.preview)) ?? "This exploration");
   const screens = facts?.screens ?? null;
-  const canFlip = Boolean(facts) && (facts.mode === "tokens" || (side === "after" ? Boolean(build.production) : Boolean(returnTo)));
+  const canFlip = canFlipSides({ mode: facts?.mode ?? null, failed: error && !tg, side, production: build.production, returnTo });
   const studio2 = tg ? studioChangesUrl(build) : studioChangeUrl(build, change);
   const behind = facts?.behind ? "Live has new changes since this change started." : null;
   const shared = screens?.length && screens.every((s) => s.tenant === screens[0].tenant && s.theme === screens[0].theme) ? screens[0] : null;
@@ -1428,34 +1428,43 @@ function Toolbar({
     setEmphasis(i);
     if (order.includes(i)) setPosition(order.indexOf(i));
   };
-  const footLine = tg ? facts ? "Screens are measured per change, not for this mix. Show what changed outlines this screen." : "Reading the changes." : !facts ? "Reading the change." : isCode ? side === "before" ? "What this change adds or changes is outlined on This change." : marks?.length ? null : NO_MARKS_LINE : "The screens this change affects are not measured yet.";
-  const sides2 = /* @__PURE__ */ jsx(ButtonGroup, { appearance: "attached", "aria-label": "Compare", className: styles.sides, children: ["before", "after"].map((s) => /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      className: PIN_CLASS,
-      content: /* @__PURE__ */ jsxs(Fragment, { children: [
-        sideLabel(s),
-        ": ",
-        s === "before" ? "what customers see today." : modeDetail(facts),
-        " ",
-        /* @__PURE__ */ jsx(Kbd, { keys: "B", size: "sm" }),
-        " flips sides on the same screen."
-      ] }),
-      children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "secondary",
-          size: "md",
-          pressed: side === s,
-          "aria-keyshortcuts": "B",
-          disabled: !canFlip && side !== s,
-          onClick: () => choose(s),
-          children: sideLabel(s)
-        }
-      )
-    },
-    s
-  )) });
+  const footLine = tg ? facts ? "Screens are measured per change, not for this mix. Show what changed outlines this screen." : error ? null : "Reading the changes." : !facts ? error ? null : "Reading the change." : isCode ? side === "before" ? "What this change adds or changes is outlined on This change." : marks?.length ? null : NO_MARKS_LINE : "The screens this change affects are not measured yet.";
+  const flipBlocked = canFlip ? null : !facts ? error ? "Bridge could not read this change, so there is nothing to compare. Reload the page to try again." : "Reading the change. You can switch sides once it has loaded." : side === "after" ? "Bridge does not know where this product runs in production. Add its production URL to bridge.config.json." : "Open this change from Studio to come back to it.";
+  const sides2 = /* @__PURE__ */ jsx(ButtonGroup, { appearance: "attached", "aria-label": "Compare", className: styles.sides, children: ["before", "after"].map((s) => {
+    const blocked = !canFlip && side !== s;
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        className: PIN_CLASS,
+        content: blocked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          sideLabel(s),
+          " is not available yet. ",
+          flipBlocked
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          sideLabel(s),
+          ": ",
+          s === "before" ? "what customers see today." : modeDetail(facts),
+          " ",
+          /* @__PURE__ */ jsx(Kbd, { keys: "B", size: "sm" }),
+          " flips sides on the same screen."
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "md",
+            pressed: side === s,
+            "aria-keyshortcuts": "B",
+            disabled: blocked,
+            ...{ focusableWhenDisabled: true },
+            onClick: () => choose(s),
+            children: sideLabel(s)
+          }
+        )
+      },
+      s
+    );
+  }) });
   return /* @__PURE__ */ jsxs(
     ThemeProvider,
     {
@@ -1693,12 +1702,16 @@ function Toolbar({
                   /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", render: /* @__PURE__ */ jsx("a", { href: studio2 }), className: styles.studio, children: "Back to Studio" })
                 ] }),
                 /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: "Collapse", children: /* @__PURE__ */ jsx(IconButton, { icon: Minimize2, size: "md", label: "Collapse the Bridge toolbar", className: styles.collapse, onClick: () => toggleOpen(false) }) }),
-                error ? /* @__PURE__ */ jsx("p", { className: styles.noteRow, role: "status", children: tg ? "Could not read these changes. Reload the page to try again." : "Could not read this change. Reload the page to try again." }) : null
+                error ? /* @__PURE__ */ jsxs("p", { className: styles.noteRow, role: "status", children: [
+                  tg ? READ_FAILED_TOGETHER : READ_FAILED,
+                  " ",
+                  /* @__PURE__ */ jsx(Link, { href: studio2, children: "Open in Studio" })
+                ] }) : null
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("span", { className: styles.brand, children: "Bridge" }),
-                /* @__PURE__ */ jsx("span", { className: styles.pillTitle, title: title2, children: title2 }),
-                /* @__PURE__ */ jsx(Badge, { size: "sm", children: label }),
-                /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: "Open the toolbar", children: /* @__PURE__ */ jsx(IconButton, { icon: ChevronUp, size: "md", label: `Open the Bridge toolbar. Showing ${label.toLowerCase()}. Press B to flip.`, onClick: () => toggleOpen(true) }) })
+                /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: title2, children: /* @__PURE__ */ jsx("span", { className: styles.pillTitle, children: title2 }) }),
+                sides2,
+                /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: "Show Bridge details", children: /* @__PURE__ */ jsx(IconButton, { icon: ChevronUp, size: "md", label: "Show Bridge details", onClick: () => toggleOpen(true) }) })
               ] }),
               note2 && /* @__PURE__ */ jsx("div", { className: styles.noteRow, children: note2 })
             ]
@@ -1732,4 +1745,4 @@ function useHash() {
 export {
   ToolbarRoot as default
 };
-//# sourceMappingURL=Toolbar-Cib7qewk.js.map
+//# sourceMappingURL=Toolbar-WfZ7_2Sw.js.map