Web components

Importing the wc entry registers <talos-panel>, <talos-corner>, <talos-notch>.

<script type="module">import "@shelfwood/talos-ui/wc";</script>

<talos-panel panel-width="400" panel-height="220" animate>
  <talos-corner edge="top-right" radius="22"></talos-corner>
  <talos-corner edge="bottom-left" radius="22"></talos-corner>
  <talos-notch edge="top" width="80" depth="14"></talos-notch>
  <h3>Composable geometry</h3>
</talos-panel>

<talos-panel>

<talos-corner edge radius>

edge: top-left top-right bottom-right bottom-left. radius: chamfer px.

<talos-notch edge width depth>

edge: top right bottom left. Centered edge cut-out — the one motif the CSS layer doesn’t provide. Decorators are reactive: add/remove children and the outline re-renders.

<talos-sheen> — pointer affordance

talos.css designs a cursor-tracked sheen on .glass-panel (the ::after spotlight reads --talos-mx / --talos-my / --talos-sheen), but nothing writes those props until you wrap the panels in <talos-sheen>. It tracks the pointer over any matching descendant and drives the dormant CSS — no new visual, just the hand on a dial the stylesheet already drew. The sheen encodes pointer presence (an affordance, like cursor: pointer); under reduced motion the position still tracks but the glow stays off.

<talos-sheen>
  <div class="glass-panel interactive-panel">…</div>
  <div class="glass-panel interactive-panel">…</div>
</talos-sheen>

.activity-edge — rate-bound border (CSS)

A conic ring that travels around a panel’s chamfered silhouette, whose speed encodes a rate — the reference-design “animated conic border”, rebound to the library’s law. --talos-rate: 0 parks the ring (no activity, no motion); higher rates sweep faster. Bind --talos-rate to a real signal the way <talos-flow> binds its dash travel. This is a zero-JS CSS class, not a custom element.

<div class="glass-panel activity-edge" style="--talos-rate:0.6">…</div>
<!-- drive it live: el.style.setProperty('--talos-rate', reqsPerSec / 100) -->