Skip to content

SECTION

Tray

A bar on the bottom edge with a panel that opens above it. The controls for the thing you are looking at, kept where you can reach them without leaving it.

Two drawers, and one thing you can always reach

Open one and the other shuts itself — that is the name attribute on the two details elements, not a line of script. Press Tab into the bar and note the ring is drawn inside the tab: these sit flush, so an outset one comes out as two stubs down the sides. It is pinned inside this box rather than to the window so it can demonstrate itself in place.

SHAPE
Corner The root of the ladder. Everything else is cut from it.
Relief How deep the whole document is. Ships at nothing.
Media corner Off the ladder, because square photographs are a decision.
COLOUR

Five of the twenty-four. Open the theme builder to turn them all.

HTML
<!-- `--tray-max` is turned right down here, because the stage is 180px tall
     and the shipped ceiling is 420. It is also the fastest way to see what the
     panel does when it runs out of room: scroll inside it. -->
<div class="tray" style="--tray-max: 118px">
  <div class="tray-bar">
    <details class="tray-drawer" name="specimen-tray">
      <summary class="tray-tab">SHAPE</summary>
      <div class="tray-panel scrollbar">
        <div class="rule-stack rule-stack-on-sunk">
          <div class="settings-row rule-row">
            <div class="settings-row-text">
              <span class="settings-row-title" id="t-corner">Corner</span>
              <span class="settings-row-body">The root of the ladder. Everything else is cut from it.</span>
            </div>
            <input class="range" type="range" min="0" max="24" value="12" aria-labelledby="t-corner" />
          </div>
          <div class="settings-row rule-row">
            <div class="settings-row-text">
              <span class="settings-row-title" id="t-relief">Relief</span>
              <span class="settings-row-body">How deep the whole document is. Ships at nothing.</span>
            </div>
            <input class="range" type="range" min="0" max="2" step="0.05" value="0" aria-labelledby="t-relief" />
          </div>
          <div class="settings-row rule-row">
            <div class="settings-row-text">
              <span class="settings-row-title" id="t-frame">Media corner</span>
              <span class="settings-row-body">Off the ladder, because square photographs are a decision.</span>
            </div>
            <input class="range" type="range" min="0" max="32" value="0" aria-labelledby="t-frame" />
          </div>
        </div>
      </div>
    </details>

    <details class="tray-drawer" name="specimen-tray">
      <summary class="tray-tab">COLOUR</summary>
      <div class="tray-panel scrollbar">
        <div class="cluster">
          <input class="swatch" type="color" value="#111a21" aria-label="Ground" />
          <input class="swatch" type="color" value="#16222b" aria-label="Sunk" />
          <input class="swatch" type="color" value="#1a2831" aria-label="Raised" />
          <input class="swatch" type="color" value="#efe3ce" aria-label="Cream" />
          <input class="swatch" type="color" value="#7fb2d0" aria-label="Accent" />
        </div>
        <p class="placeholder-caption">Five of the twenty-four. Open the theme builder to turn them all.</p>
      </div>
    </details>

    <div class="tray-actions">
      <button class="btn btn-sm btn-quiet" type="button">RESET</button>
    </div>
  </div>
</div>

The same tray, stood on its edge

tray-side pins it to the inline edge instead. Open one and the panel appears under its own tab rather than over the whole bar — which is not a second layout, it is what a details element does in a column once the panel stops being out of flow. The other tabs keep their places, so they are still there to press.

SHAPE
12px
0.00
COLOUR
THEMES

Whatever the third one holds.

HTML
<!-- The same tray, stood on its edge. Same drawers, same tabs, same absence of
     script — `tray-side` is the only difference. Both knobs are turned right
     down for the stage: a real one is `min(46vw, 620px)` wide with a 62dvh
     panel, and this box is 180px tall. -->
<div class="tray tray-side" style="--tray-w: 230px; --tray-max: 84px">
  <div class="tray-bar">
    <details class="tray-drawer" name="specimen-side">
      <summary class="tray-tab">SHAPE</summary>
      <div class="tray-panel scrollbar">
        <div class="field">
          <label class="field-label" for="side-corner">CORNER</label>
          <div class="cluster">
            <input class="range" id="side-corner" type="range" min="0" max="24" value="12" />
            <output class="range-out" for="side-corner">12px</output>
          </div>
        </div>
        <div class="field">
          <label class="field-label" for="side-relief">RELIEF</label>
          <div class="cluster">
            <input class="range" id="side-relief" type="range" min="0" max="2" step="0.05" value="0" />
            <output class="range-out" for="side-relief">0.00</output>
          </div>
        </div>
      </div>
    </details>

    <details class="tray-drawer" name="specimen-side">
      <summary class="tray-tab">COLOUR</summary>
      <div class="tray-panel scrollbar">
        <div class="cluster">
          <input class="swatch" type="color" value="#111a21" aria-label="Ground" />
          <input class="swatch" type="color" value="#efe3ce" aria-label="Cream" />
          <input class="swatch" type="color" value="#7fb2d0" aria-label="Accent" />
        </div>
      </div>
    </details>

    <details class="tray-drawer" name="specimen-side">
      <summary class="tray-tab">THEMES</summary>
      <div class="tray-panel scrollbar">
        <p class="field-hint">Whatever the third one holds.</p>
      </div>
    </details>

    <div class="tray-actions">
      <button class="btn btn-sm btn-quiet" type="button">RESET</button>
    </div>
  </div>
</div>

Reference

Read from sections/tray.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.tray.tray-bar.tray-drawer.tray-tab.tray-actions.tray-side.tray-panel
SETTINGSSet the first on one element; a theme sets the second for all of them.--tray-shadow — falls back to --ds-shadow-floating--tray-w — falls back to --ds-tray-w--tray-max — falls back to --ds-tray-max--tray-pad — falls back to --ds-pad-card-tight
READS--ds-focus-ring-inset--ds-focus-width--ds-font-display--ds-gap--ds-gap-inline--ds-ground--ds-hairline--ds-hit-min--ds-ink--ds-ink-soft--ds-motion-fast--ds-pad-tray--ds-raised--ds-rule--ds-shadow-floating-up--ds-text-meta--ds-track-key--ds-tray-max-side

Notes

IT IS NOT A DOCK AND IT IS NOT TABS

Dock is the bar of destinations for a thumb, and its own rule is that a page may not carry two navigations. This carries controls. What the two share is the hard part — pinning to the bottom edge, the safe-area inset, and a shadow that falls upward because a bar on the floor casts up or casts off the screen.

Tabs would have been the obvious mechanism and it is the wrong one. Its state is :target, a document has exactly one of those, and any other in-page anchor resets every group. A tray is pinned to a page you are scrolling and clicking through — the first link a reader follows would shut it.

WHY THE PANEL IS OUT OF FLOW

A details puts its content directly after its own summary. Two of them in a row, in flow, give you two columns — not a bar with one panel over it. Taking the panel out of flow puts every one of them full width above the whole bar, whichever drawer it belongs to.

NO FILTER OR TRANSFORM ABOVE ITeither one makes a containing block and the tray pins to that instead
IT IS OPAQUE, UNLIKE A DOCKwhat is behind a control surface is the design being judged
A CLOSED TRAY IS STILL A BARclosing is how you get the page back; hiding it is not

That first one is why this specimen works at all. The stage sets contain: paint on purpose, so the tray pins to the box instead of to your window — the same trap, pointed the other way.