Compact product UI

Projects

• Community garden accessibility improvements and maintenance planning

  project-with-a-deliberately-long-unbroken-identifier-abcdefghijklmnopqrstuvwxyz0123456789

  Ready for review

• Library workshop

  Two tasks remaining

  In progress

Project settings

Use this recipe

Copy the scoped CSS and apply data-product-compact to the task region. It remaps Oat spacing, wraps long content, and keeps action targets at 2.75rem (44px with a 16px root). Keep icon-only actions named. Measure actual targets after consumer overrides and zoom; avoid shrinking all controls globally.

<!-- Load Oatbase CSS, compact.css, and the focused toolbar enhancer. -->
<section data-product-compact>
  <ot-toolbar aria-label="Project actions">
    <button type="button">New project</button>
    <button type="button" class="outline">Refresh</button>
  </ot-toolbar>
  <ul class="item-group" data-divided>
    <li><a class="item" href="/projects/garden">
      <section><h3>Community garden</h3><p>Planning notes</p></section>
      <span data-slot="meta">Ready for review</span>
    </a></li>
  </ul>
  <form action="/projects/garden" method="post">
    <label data-field>Project name<input name="name" required></label>
    <button type="submit">Save settings</button>
  </form>
</section>

Copy the opt-in initializer. Start with a closed native disclosure and a direct summary; no-JS users can open it. The initializer expands at 48rem. User toggles persist within a breakpoint; crossing it reapplies the viewport default. Before collapsing, focus returns to the summary if content inside has focus. Summary stays visible at every width.

<details id="context">
  <summary>Secondary context</summary>
  <p>Supporting information</p>
</details>
<script type="module">
  import { responsiveDetails } from './responsive-details.js';
  const cleanup = responsiveDetails(document.querySelector('#context'));
  // Call cleanup() before removing the region in a client-side app.
</script>

Do not use secondary disclosures to hide warnings, approvals, failed outcomes, or content needed for a primary task. No state is persisted. Initialize each element once; the recipe adds one media-query listener per initialized disclosure and none to the library aggregates.

Use Oat’s tooltip and optional tooltip compatibility for supplementary desktop hints. The compatibility CSS suppresses hover hints after touch taps and retains them for keyboard focus. Touch users need visible labels and help text; a tooltip must never be the only way to understand an action.