shadcn_view_component 0.3.3

data/app/javascript/shadcn/floating.js

@@ -0,0 +1,207 @@
+// Shared open/close machinery for the popper-based components (popover,
+// dropdown menu, select, tooltip).
+//
+// Radix renders floating content through a portal on `document.body`. We keep
+// it inside the component instead, wrapped in the same fixed-position element
+// Radix uses (`data-radix-popper-content-wrapper`). The component roots are
+// `display: contents`, so a fixed wrapper still positions against the viewport,
+// and staying in place is what keeps the Stimulus actions on the items — menu
+// items, select options, close buttons — bound and working.
+
+import { createWrapper, position } from "shadcn/popper"
+import * as topLayer from "shadcn/top_layer"
+import { pushLayer, removeLayer } from "shadcn/dismiss"
+import { ExitQueue } from "shadcn/animation"
+
+export class FloatingLayer {
+  constructor(options) {
+    this.trigger = options.trigger
+    // What the content is *measured* against, which is not always what opened
+    // it: a context menu is anchored to the point you pressed, not to the area
+    // you pressed it in. Anything with a `getBoundingClientRect()` will do —
+    // `popper.js` asks for nothing else — so a caller can hand over a bare
+    // object standing for a point. Everything else the trigger is used for
+    // (its `data-state`, the dismiss anchor, the resize observer) still wants
+    // the real element.
+    this.anchor = options.anchor || options.trigger
+    this.content = options.content
+    this.home = options.home || this.content.parentElement
+    this.prefix = options.prefix || "popper"
+    this.side = options.side || "bottom"
+    this.align = options.align || "center"
+    this.sideOffset = options.sideOffset || 0
+    this.alignOffset = options.alignOffset || 0
+    this.matchAnchorWidth = options.matchAnchorWidth || false
+    // Base UI's four unprefixed custom properties, for the one family
+    // answerable to Base UI rather than to Radix. Asked for rather than always
+    // published: `--anchor-width` is a name a host could plausibly use for
+    // something of its own, and only the combobox's classes read it.
+    this.publishBaseUiVariables = options.publishBaseUiVariables || false
+    this.onOpen = options.onOpen || (() => {})
+    this.onClose = options.onClose || (() => {})
+    this.onDismiss = options.onDismiss || null
+
+    this.open = false
+    this.mounted = false
+    this.wrapper = null
+    this.layer = null
+    this.placeholder = null
+    this.frame = null
+    this.exits = new ExitQueue()
+    this.reposition = this.reposition.bind(this)
+    this.resizes = new ResizeObserver(this.reposition)
+  }
+
+  show() {
+    if (this.open) return
+    this.open = true
+
+    // Reopened before the exit finished — the wrapper, the placeholder and the
+    // content are all still in place, so only the interaction state has to come
+    // back. Rebuilding them would strand the old placeholder and leave a second
+    // wrapper in the DOM.
+    if (this.exits.has(this.content)) {
+      this.exits.cancel(this.content)
+    } else {
+      this.mount()
+    }
+
+    this.content.hidden = false
+    this.content.dataset.state = "open"
+    if (this.trigger) this.trigger.dataset.state = "open"
+
+    this.applyPosition()
+
+    window.addEventListener("scroll", this.reposition, true)
+    window.addEventListener("resize", this.reposition)
+
+    // A `resize` event only fires for the window, and the anchor can change
+    // size while it stays still — a sidebar menu button goes from 239px to
+    // 32px when the panel collapses under an open tooltip, which left the
+    // label 200px out to the right of the icon it names. floating-ui's
+    // `autoUpdate` observes both the reference and the floating element; this
+    // observes the anchor only, which is the side that moves the result.
+    if (this.trigger) this.resizes.observe(this.trigger)
+
+    this.layer = pushLayer({
+      element: this.content,
+      anchors: [ this.trigger ],
+      onDismiss: (event) => (this.onDismiss ? this.onDismiss(event) : this.hide())
+    })
+
+    this.onOpen()
+  }
+
+  // Leave a marker where the content was, so closing puts it back exactly
+  // there. Appending to `home` instead would quietly reorder the markup —
+  // after one open/close a Select's content ends up after the hidden input.
+  mount() {
+    this.mounted = true
+
+    this.placeholder = document.createComment("shadcn-floating-content")
+    this.content.replaceWith(this.placeholder)
+
+    this.wrapper = createWrapper()
+    this.placeholder.parentNode.insertBefore(this.wrapper, this.placeholder)
+    this.wrapper.appendChild(this.content)
+
+    // Above every stacking context, without leaving the DOM.
+    topLayer.enable(this.wrapper)
+    topLayer.show(this.wrapper)
+  }
+
+  hide() {
+    if (!this.open) return
+    this.open = false
+
+    // Interaction state is immediate: a layer that is fading out must not
+    // answer Escape or an outside click. Positioning is not interaction
+    // state — the content stays mounted through the exit (`this.mounted`
+    // goes false only in `dismount()`), so a scroll or resize during the fade
+    // still moves it instead of leaving it stranded over its old anchor.
+    if (this.layer) removeLayer(this.layer)
+    this.layer = null
+
+    // This is what starts the exit animation, so it has to be set before the
+    // queue looks for one.
+    this.content.dataset.state = "closed"
+    if (this.trigger) this.trigger.dataset.state = "closed"
+
+    this.exits.defer(this.content, () => this.dismount())
+
+    this.onClose()
+  }
+
+  dismount() {
+    window.removeEventListener("scroll", this.reposition, true)
+    window.removeEventListener("resize", this.reposition)
+    this.resizes.disconnect()
+
+    if (this.frame) cancelAnimationFrame(this.frame)
+    this.frame = null
+
+    // Not what keeps a closed layer still — both listeners are gone and the
+    // pending frame is cancelled, so nothing can reach `reposition()` or
+    // `applyPosition()` from here. It is what keeps `mounted` answering "is the
+    // content in the wrapper", which is the only thing either of them asks
+    // before moving it, and the layer is reopened rather than replaced.
+    this.mounted = false
+
+    this.content.hidden = true
+
+    if (this.placeholder?.parentNode) {
+      this.placeholder.replaceWith(this.content)
+    } else {
+      this.home.appendChild(this.content)
+    }
+    this.placeholder = null
+
+    if (this.wrapper) {
+      topLayer.hide(this.wrapper)
+      this.wrapper.remove()
+    }
+    this.wrapper = null
+  }
+
+  toggle() {
+    this.open ? this.hide() : this.show()
+  }
+
+  // Bound to `scroll` (capture, so every scrolling ancestor fires it), to
+  // `resize`, and to the anchor's own `ResizeObserver` — which also fires once
+  // on `observe()`, harmlessly: `show()` has already positioned synchronously.
+  // Positioning writes a transform and then reads `offsetWidth`,
+  // which forces a synchronous layout, so coalesce into one frame instead of
+  // reflowing on every event.
+  reposition() {
+    if (!this.mounted || !this.trigger || this.frame) return
+
+    this.frame = requestAnimationFrame(() => {
+      this.frame = null
+      this.applyPosition()
+    })
+  }
+
+  // The opening position cannot wait for a frame: the wrapper starts at the
+  // top-left of the viewport, so a deferred first placement flashes there.
+  applyPosition() {
+    if (!this.mounted || !this.anchor) return
+
+    position(this.anchor, this.content, {
+      side: this.side,
+      align: this.align,
+      sideOffset: this.sideOffset,
+      alignOffset: this.alignOffset,
+      prefix: this.prefix,
+      matchAnchorWidth: this.matchAnchorWidth,
+      publishBaseUiVariables: this.publishBaseUiVariables
+    })
+  }
+
+  destroy() {
+    this.hide()
+    // Turbo may be detaching the element; there is nothing to animate for and
+    // nowhere to put the content back afterwards.
+    this.exits.flushAll()
+  }
+}

data/app/javascript/shadcn/focus.js

@@ -0,0 +1,86 @@
+// Port of Radix's FocusScope: keep Tab inside a container while it is open and
+// hand focus back to whatever had it when the container closes.
+
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+  "audio[controls]",
+  "video[controls]",
+  "[contenteditable]:not([contenteditable='false'])"
+].join(",")
+
+function isVisible(element) {
+  return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length)
+}
+
+export function tabbable(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+    (element) => !element.hasAttribute("disabled") && isVisible(element)
+  )
+}
+
+export function focusFirst(container) {
+  const candidates = tabbable(container)
+  const target = candidates[0] || container
+  target.focus({ preventScroll: true })
+}
+
+// Traps Tab/Shift+Tab inside `container`. Returns a function that releases the
+// trap and restores focus to `restoreTo` (defaults to the previously focused
+// element).
+export function trapFocus(container, restoreTo = document.activeElement) {
+  function onKeyDown(event) {
+    if (event.key !== "Tab") return
+
+    const candidates = tabbable(container)
+    if (candidates.length === 0) {
+      event.preventDefault()
+      return
+    }
+
+    const first = candidates[0]
+    const last = candidates[candidates.length - 1]
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last.focus({ preventScroll: true })
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus({ preventScroll: true })
+    }
+  }
+
+  container.addEventListener("keydown", onKeyDown)
+
+  return function release() {
+    container.removeEventListener("keydown", onKeyDown)
+    if (restoreTo && document.contains(restoreTo)) {
+      restoreTo.focus({ preventScroll: true })
+    }
+  }
+}
+
+// Radix locks body scrolling while a modal layer is open. Reference counted so
+// nested layers behave.
+let scrollLocks = 0
+let previousOverflow = null
+
+export function lockScroll() {
+  if (scrollLocks === 0) {
+    previousOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+  }
+  scrollLocks += 1
+}
+
+export function unlockScroll() {
+  scrollLocks = Math.max(0, scrollLocks - 1)
+  if (scrollLocks === 0) {
+    document.body.style.overflow = previousOverflow || ""
+    previousOverflow = null
+  }
+}

data/app/javascript/shadcn/id.js

@@ -0,0 +1,14 @@
+// Unique DOM ids for the ARIA wiring between triggers and their content.
+//
+// Deliberately not `crypto.randomUUID()`: that is only defined in a secure
+// context, so over plain HTTP — a LAN IP, a staging box, `rails s` reached from
+// another device — it is `undefined` and every controller that called it threw
+// in `connect()`, silently killing the component. A counter is enough; these ids
+// only have to be unique within one document.
+
+let counter = 0
+
+export function uniqueId(prefix = "shadcn") {
+  counter += 1
+  return `${prefix}-${counter}`
+}

data/app/javascript/shadcn/index.js

@@ -0,0 +1,110 @@
+// Entry point for the Stimulus controllers that reproduce the Radix UI
+// behaviour of the interactive components.
+//
+//   import { Application } from "@hotwired/stimulus"
+//   import { registerShadcnControllers } from "shadcn"
+//
+//   registerShadcnControllers(Application.start())
+//
+// Controllers register under the `shadcn--` prefix, which is what the
+// components emit: `data-controller="shadcn--accordion"`.
+
+import AccordionController from "shadcn/controllers/accordion_controller"
+import AvatarController from "shadcn/controllers/avatar_controller"
+import CalendarController from "shadcn/controllers/calendar_controller"
+import CarouselController from "shadcn/controllers/carousel_controller"
+import ChartController from "shadcn/controllers/chart_controller"
+import ComboboxController from "shadcn/controllers/combobox_controller"
+import CommandController from "shadcn/controllers/command_controller"
+import CheckboxController from "shadcn/controllers/checkbox_controller"
+import CollapsibleController from "shadcn/controllers/collapsible_controller"
+import DialogController from "shadcn/controllers/dialog_controller"
+import DrawerController from "shadcn/controllers/drawer_controller"
+import DropdownMenuController from "shadcn/controllers/dropdown_menu_controller"
+import HoverCardController from "shadcn/controllers/hover_card_controller"
+import InputGroupController from "shadcn/controllers/input_group_controller"
+import InputOtpController from "shadcn/controllers/input_otp_controller"
+import MenubarController from "shadcn/controllers/menubar_controller"
+import MessageScrollerController from "shadcn/controllers/message_scroller_controller"
+import NavigationMenuController from "shadcn/controllers/navigation_menu_controller"
+import PopoverController from "shadcn/controllers/popover_controller"
+import RadioGroupController from "shadcn/controllers/radio_group_controller"
+import ResizableController from "shadcn/controllers/resizable_controller"
+import ScrollAreaController from "shadcn/controllers/scroll_area_controller"
+import SelectController from "shadcn/controllers/select_controller"
+import SidebarController from "shadcn/controllers/sidebar_controller"
+import SliderController from "shadcn/controllers/slider_controller"
+import SwitchController from "shadcn/controllers/switch_controller"
+import TabsController from "shadcn/controllers/tabs_controller"
+import ToasterController from "shadcn/controllers/toaster_controller"
+import ThemeController from "shadcn/controllers/theme_controller"
+import ToggleController from "shadcn/controllers/toggle_controller"
+import ToggleGroupController from "shadcn/controllers/toggle_group_controller"
+import TooltipController from "shadcn/controllers/tooltip_controller"
+
+const CONTROLLERS = {
+  accordion: AccordionController,
+  avatar: AvatarController,
+  calendar: CalendarController,
+  carousel: CarouselController,
+  chart: ChartController,
+  checkbox: CheckboxController,
+  combobox: ComboboxController,
+  command: CommandController,
+  collapsible: CollapsibleController,
+  dialog: DialogController,
+  drawer: DrawerController,
+  "dropdown-menu": DropdownMenuController,
+  "hover-card": HoverCardController,
+  "input-group": InputGroupController,
+  "input-otp": InputOtpController,
+  menubar: MenubarController,
+  "message-scroller": MessageScrollerController,
+  "navigation-menu": NavigationMenuController,
+  popover: PopoverController,
+  "radio-group": RadioGroupController,
+  resizable: ResizableController,
+  "scroll-area": ScrollAreaController,
+  select: SelectController,
+  sidebar: SidebarController,
+  slider: SliderController,
+  switch: SwitchController,
+  tabs: TabsController,
+  theme: ThemeController,
+  toggle: ToggleController,
+  "toggle-group": ToggleGroupController,
+  toaster: ToasterController,
+  tooltip: TooltipController
+}
+
+export function registerShadcnControllers(application) {
+  for (const [ name, controller ] of Object.entries(CONTROLLERS)) {
+    application.register(`shadcn--${name}`, controller)
+  }
+
+  resyncOnMorph(application)
+
+  return application
+}
+
+// A Turbo morph refresh rewrites attributes in place without disconnecting the
+// controllers, so `connect()` never runs again: the DOM goes back to whatever
+// the server rendered while the controller still holds the old ids, targets and
+// state. Re-running `render()` puts the two back in agreement.
+//
+// The server's state wins, which is what a refresh means. To keep a component's
+// open state across a morph, mark it `data-turbo-permanent` in your own markup —
+// that is the application's call, not the library's.
+function resyncOnMorph(application) {
+  if (typeof document === "undefined") return
+
+  document.addEventListener("turbo:morph", () => {
+    for (const controller of application.controllers) {
+      if (!controller.identifier.startsWith("shadcn--")) continue
+      if (typeof controller.render === "function") controller.render()
+    }
+  })
+}
+
+export { CONTROLLERS }
+export default registerShadcnControllers

data/app/javascript/shadcn/popper.js

@@ -0,0 +1,262 @@
+// Port of the positioning half of Radix's Popper.
+//
+// Radix wraps floating content in a fixed-position element carrying
+// `data-radix-popper-content-wrapper` and publishes a set of CSS custom
+// properties that the shadcn Tailwind classes read directly — e.g.
+// `origin-(--radix-popover-content-transform-origin)` and
+// `max-h-(--radix-select-content-available-height)`. Those names have to match
+// exactly, so `prefix` names the component the variables belong to.
+
+const SIDES = [ "top", "right", "bottom", "left" ]
+
+const OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" }
+
+export function createWrapper() {
+  const wrapper = document.createElement("div")
+  wrapper.setAttribute("data-radix-popper-content-wrapper", "")
+  Object.assign(wrapper.style, {
+    position: "fixed",
+    left: "0",
+    top: "0",
+    minWidth: "max-content",
+    zIndex: "50"
+  })
+  return wrapper
+}
+
+function measure(anchor) {
+  const rect = anchor.getBoundingClientRect()
+  return {
+    top: rect.top,
+    left: rect.left,
+    right: rect.right,
+    bottom: rect.bottom,
+    width: rect.width,
+    height: rect.height
+  }
+}
+
+function place(side, align, anchorRect, size, sideOffset, alignOffset) {
+  let x
+  let y
+
+  switch (side) {
+    case "top":
+      y = anchorRect.top - size.height - sideOffset
+      break
+    case "bottom":
+      y = anchorRect.bottom + sideOffset
+      break
+    case "left":
+      x = anchorRect.left - size.width - sideOffset
+      break
+    case "right":
+      x = anchorRect.right + sideOffset
+      break
+  }
+
+  const vertical = side === "top" || side === "bottom"
+
+  if (vertical) {
+    if (align === "start") x = anchorRect.left + alignOffset
+    else if (align === "end") x = anchorRect.right - size.width - alignOffset
+    else x = anchorRect.left + anchorRect.width / 2 - size.width / 2 + alignOffset
+  } else {
+    if (align === "start") y = anchorRect.top + alignOffset
+    else if (align === "end") y = anchorRect.bottom - size.height - alignOffset
+    else y = anchorRect.top + anchorRect.height / 2 - size.height / 2 + alignOffset
+  }
+
+  return { x, y }
+}
+
+function fits(side, anchorRect, size, sideOffset, padding, viewport) {
+  switch (side) {
+    case "top":
+      return anchorRect.top - size.height - sideOffset >= padding
+    case "bottom":
+      return anchorRect.bottom + size.height + sideOffset <= viewport.height - padding
+    case "left":
+      return anchorRect.left - size.width - sideOffset >= padding
+    case "right":
+      return anchorRect.right + size.width + sideOffset <= viewport.width - padding
+  }
+  return true
+}
+
+function availableSpace(side, anchorRect, sideOffset, padding, viewport) {
+  switch (side) {
+    case "top":
+      return anchorRect.top - sideOffset - padding
+    case "bottom":
+      return viewport.height - anchorRect.bottom - sideOffset - padding
+    case "left":
+      return anchorRect.left - sideOffset - padding
+    case "right":
+      return viewport.width - anchorRect.right - sideOffset - padding
+  }
+  return 0
+}
+
+// Positions `content` (already inside a wrapper from `createWrapper`) relative
+// to `anchor`, flipping and shifting to stay on screen. Returns the resolved
+// side and align, which callers mirror onto `data-side` / `data-align`.
+// Radix places the arrow itself, through Popper: a wrapper pinned to the side
+// the content ended up on, offset along the cross axis so it points at the
+// anchor's middle (vendor's `@radix-ui/react-popper`, measured on the live
+// tooltip on 2026-08-12 — `position:absolute; bottom:0; transform:translateY(100%);
+// left:43.5px` for a tooltip placed on top).
+//
+// The tooltip's content renders the same two elements Radix does — a bare
+// wrapper and, inside it, the rotated square shadcn styles — because the
+// styling classes set `rotate` and `translate`, which are their own CSS
+// properties in Tailwind v4 and compose with `transform` rather than losing to
+// it. Placement written on the same element fights them; on the wrapper it does
+// not. Without any of this the arrow is laid out in the text flow after the
+// label: rendered, never seen, which is how it shipped.
+// Radix's own, verbatim: the wrapper is pinned to the edge opposite the side
+// the content took, and each side turns it so the same square points outwards.
+const ARROW_TRANSFORM = {
+  top: "translateY(100%)",
+  bottom: "rotate(180deg)",
+  left: "translateY(50%) rotate(-90deg) translateX(50%)",
+  right: "translateY(50%) rotate(90deg) translateX(-50%)"
+}
+
+// One origin per side, and they are not decoration: three of these transforms
+// rotate, and a rotation is only as right as the point it turns about. A single
+// origin for all four — which is what this had, and what put the left and right
+// arrows somewhere nobody could see them — spins two of them off their own edge.
+const ARROW_ORIGIN = {
+  top: "",
+  right: "0 0",
+  bottom: "center 0",
+  left: "100% 0"
+}
+
+function placeArrow(arrow, side, anchorRect, size, wrapperX, wrapperY) {
+  const width = arrow.offsetWidth || 10
+  const height = arrow.offsetHeight || 10
+  const vertical = side === "top" || side === "bottom"
+  const padding = 6
+
+  Object.assign(arrow.style, {
+    position: "absolute",
+    top: "", right: "", bottom: "", left: "",
+    transform: ARROW_TRANSFORM[side],
+    transformOrigin: ARROW_ORIGIN[side]
+  })
+
+  if (vertical) {
+    const centre = anchorRect.left + anchorRect.width / 2 - wrapperX - width / 2
+    arrow.style.left = `${Math.round(Math.min(Math.max(padding, centre), Math.max(padding, size.width - width - padding)))}px`
+    arrow.style[side === "top" ? "bottom" : "top"] = "0px"
+  } else {
+    const centre = anchorRect.top + anchorRect.height / 2 - wrapperY - height / 2
+    arrow.style.top = `${Math.round(Math.min(Math.max(padding, centre), Math.max(padding, size.height - height - padding)))}px`
+    arrow.style[side === "left" ? "right" : "left"] = "0px"
+  }
+}
+
+export function position(anchor, content, options = {}) {
+  const {
+    side = "bottom",
+    align = "center",
+    sideOffset = 0,
+    alignOffset = 0,
+    collisionPadding = 8,
+    prefix = "popper",
+    matchAnchorWidth = false,
+    publishBaseUiVariables = false
+  } = options
+
+  const wrapper = content.parentElement
+  const viewport = { width: window.innerWidth, height: window.innerHeight }
+  const anchorRect = measure(anchor)
+
+  // An arrow has to fit between the panel and what it points at, so its height
+  // is part of the offset rather than something to subtract later — Radix does
+  // the same, `offset({ mainAxis: sideOffset + arrowHeight })` in
+  // `@radix-ui/react-popper`. Which is why a tooltip whose `sideOffset` is 0,
+  // as shadcn's is (tooltip.tsx:47), still stands clear of its trigger: without
+  // this the panel sits flush and the arrow lies across the thing it came from.
+  const arrow = content.querySelector("[data-slot$='-arrow']")
+  const offset = sideOffset + (arrow ? arrow.offsetHeight : 0)
+
+  if (matchAnchorWidth) content.style.minWidth = `${anchorRect.width}px`
+
+  // Measure without a stale transform in the way.
+  wrapper.style.transform = "translate(0, 0)"
+  const size = { width: content.offsetWidth, height: content.offsetHeight }
+
+  let resolvedSide = side
+  if (!fits(side, anchorRect, size, offset, collisionPadding, viewport)) {
+    const flipped = OPPOSITE[side]
+    if (fits(flipped, anchorRect, size, offset, collisionPadding, viewport)) {
+      resolvedSide = flipped
+    } else {
+      // Neither fits: take whichever has more room.
+      resolvedSide =
+        availableSpace(flipped, anchorRect, offset, collisionPadding, viewport) >
+        availableSpace(side, anchorRect, offset, collisionPadding, viewport)
+          ? flipped
+          : side
+    }
+  }
+
+  let { x, y } = place(resolvedSide, align, anchorRect, size, offset, alignOffset)
+
+  // Shift back into the viewport along the cross axis.
+  const maxX = viewport.width - size.width - collisionPadding
+  const maxY = viewport.height - size.height - collisionPadding
+  x = Math.min(Math.max(collisionPadding, x), Math.max(collisionPadding, maxX))
+  y = Math.min(Math.max(collisionPadding, y), Math.max(collisionPadding, maxY))
+
+  wrapper.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`
+
+  const available = availableSpace(resolvedSide, anchorRect, offset, collisionPadding, viewport)
+  const originX = resolvedSide === "left" ? "100%" : resolvedSide === "right" ? "0%" : "50%"
+  const originY = resolvedSide === "top" ? "100%" : resolvedSide === "bottom" ? "0%" : "50%"
+  const transformOrigin = `${originX} ${originY}`
+
+  const vars = {
+    [`--radix-${prefix}-content-transform-origin`]: transformOrigin,
+    [`--radix-${prefix}-content-available-width`]: `${viewport.width - collisionPadding * 2}px`,
+    [`--radix-${prefix}-content-available-height`]: `${Math.max(0, available)}px`,
+    "--radix-popper-transform-origin": transformOrigin,
+    "--radix-popper-available-width": `${viewport.width - collisionPadding * 2}px`,
+    "--radix-popper-available-height": `${Math.max(0, available)}px`,
+    "--radix-popper-anchor-width": `${anchorRect.width}px`,
+    "--radix-popper-anchor-height": `${anchorRect.height}px`,
+    [`--radix-${prefix}-trigger-width`]: `${anchorRect.width}px`,
+    [`--radix-${prefix}-trigger-height`]: `${anchorRect.height}px`,
+    // Base UI spells the same four numbers without a prefix, and
+    // `combobox.tsx` — the one file of the 61 written against Base UI — reads
+    // them: `w-(--anchor-width)`, `max-w-(--available-width)`,
+    // `origin-(--transform-origin)`, and the list's `--available-height`.
+    // Published only where a caller asks, because an unprefixed name in a
+    // host's page is a name a host may already be using.
+    ...(publishBaseUiVariables
+      ? {
+          "--anchor-width": `${anchorRect.width}px`,
+          "--available-width": `${viewport.width - collisionPadding * 2}px`,
+          "--available-height": `${Math.max(0, available)}px`,
+          "--transform-origin": transformOrigin
+        }
+      : {})
+  }
+
+  for (const [ name, value ] of Object.entries(vars)) {
+    content.style.setProperty(name, value)
+    wrapper.style.setProperty(name, value)
+  }
+
+  content.dataset.side = resolvedSide
+  content.dataset.align = align
+
+  if (arrow) placeArrow(arrow, resolvedSide, anchorRect, size, x, y)
+
+  return { side: resolvedSide, align }
+}
+
+export { SIDES }