Resizable

<%# Markup for the resizable (splitter / pane-split) demo.
    stimeo--resizable provides PointerCapture dragging, a double-click collapse
    toggle, and keyboard adjustment, and exposes the ratio (0..1) on the root element
    as the CSS variable --stimeo--resizable-fraction. %>
<div class="resizable-demo-container">
  <div
    class="resizable-demo"
    id="resizable-splitter"
    data-controller="stimeo--resizable"
    data-stimeo--resizable-min-value="20"
    data-stimeo--resizable-max-value="80"
    data-stimeo--resizable-value-value="50"
    data-stimeo--resizable-step-value="5"
    style="--stimeo--resizable-fraction: 0.5;"
  >
    
    <div
      class="resizable-demo__pane resizable-demo__pane--left"
      id="resizable-demo-primary"
      data-stimeo--resizable-target="primary"
    >
      <div class="resizable-demo__pane-content">
        <h3 id="resizable-demo-primary-label">
          <%= t("components.resizable.demo.pane_left") %>
        </h3>
        <p><%= t("components.resizable.demo.pane_left_body") %></p>
      </div>
    </div>
    
    <div
      class="resizable-demo__handle"
      role="separator"
      tabindex="0"
      <%# Window Splitter names the splitter after the primary pane. That pane
          has a visible heading here, so the pattern asks for aria-labelledby
          rather than a hand-written aria-label. %>
      aria-labelledby="resizable-demo-primary-label"
      aria-controls="resizable-demo-primary"
      aria-orientation="vertical"
      data-stimeo--resizable-target="separator"
      data-action="
        pointerdown->stimeo--resizable#onPointerDown
        keydown->stimeo--resizable#onKeydown
        dblclick->stimeo--resizable#toggle
      "
    >
      <div class="resizable-demo__handle-bar" aria-hidden="true"></div>
    </div>
    
    <div
      class="resizable-demo__pane resizable-demo__pane--right"
      data-stimeo--resizable-target="secondary"
    >
      <div class="resizable-demo__pane-content">
        <h3><%= t("components.resizable.demo.pane_right") %></h3>
        <p><%= t("components.resizable.demo.pane_right_body") %></p>
      </div>
    </div>
  </div>

  <div class="resizable-demo__controls">
    <%# demo.js (a module) wires this up with addEventListener. Inline on*
        attributes can't reference a module-scoped function, so they aren't used. %>
    <button
      class="demo-trigger resizable-demo__control-btn"
      type="button"
      data-resizable-toggle-direction>
      <%= t("components.resizable.demo.toggle_direction") %>
    </button>
  </div>
</div>

/*
 * Presentation-only styles for the resizable demo.
 * The split ratio is expressed by the Playground as CSS Grid column/row widths using
 * the --stimeo--resizable-fraction variable (set on the root by the library).
 */

.resizable-demo-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.resizable-demo {
  display: grid;
  /* Bind the ratio variable to the Grid column. */
  grid-template-columns: calc(var(--stimeo--resizable-fraction, 0.5) * 100%) 8px 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 250px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

/* Vertical-split class toggle. */
.resizable-demo--vertical {
  grid-template-columns: 1fr;
  /* Bind the ratio variable to the Grid row. */
  grid-template-rows: calc(var(--stimeo--resizable-fraction, 0.5) * 100%) 8px 1fr;
}

.resizable-demo__pane {
  background: var(--surface-card);
  overflow: hidden;
}

.resizable-demo__pane--left {
  background: var(--surface-card);
}

.resizable-demo__pane--right {
  background: var(--surface-subtle);
}

.resizable-demo__pane-content {
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.resizable-demo__pane-content h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--fg);
}

.resizable-demo__pane-content p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Splitter handle. */
.resizable-demo__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-strong);
  cursor: col-resize;
  position: relative;
  transition: background 0.15s ease;
}

.resizable-demo--vertical .resizable-demo__handle {
  cursor: row-resize;
}

.resizable-demo__handle:hover,
.resizable-demo__handle:focus {
  background: var(--accent);
}

.resizable-demo__handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.resizable-demo__handle-bar {
  width: 2px;
  height: 24px;
  background: var(--surface-card);
  border-radius: 1px;
}

.resizable-demo--vertical .resizable-demo__handle-bar {
  width: 24px;
  height: 2px;
}

.resizable-demo__controls {
  display: flex;
  justify-content: flex-end;
}

/* Only the smaller, lighter label is the demo's own; the look is the shared launcher. */
.resizable-demo__control-btn {
  font-size: 0.875rem;
  font-weight: 500;
}

// Demo script that toggles the split layout direction (horizontal / vertical).
// This file loads as a module (type="module"), so top-level functions are not
// global — wire interactions with addEventListener, not an inline onclick.
const toggleButton = document.querySelector("[data-resizable-toggle-direction]");

toggleButton?.addEventListener("click", () => {
  const el = document.getElementById("resizable-splitter");
  if (!el) return;
  const isVertical = el.classList.toggle("resizable-demo--vertical");
  const separator = el.querySelector('[role="separator"]');
  if (separator) {
    // Horizontal split (column layout): the divider is "vertical".
    // Vertical split (row layout): the divider is "horizontal".
    separator.setAttribute("aria-orientation", isVertical ? "horizontal" : "vertical");
  }
});