@junoput01/junoui 0.2.0

package/src/css/components/table.css

@@ -0,0 +1,443 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Table / Data grid
+ *  Dense, scannable rows that read like instrument readouts: numbers in
+ *  mono, right-aligned; semantic color reserved for status; one selected
+ *  row carries the active rail. junoui ships the LOOK + a11y contract;
+ *  the app owns sort, selection, inline-edit, pagination, and filtering.
+ *
+ *  Real <table> semantics — junoui only dresses it. Wrap in
+ *  `.juno-table-scroll` for a sticky-header, overflow-scrolling viewport.
+ *  Usage:
+ *    <div class="juno-table-scroll">
+ *      <table class="juno-table juno-table--zebra juno-table--sticky">
+ *        <thead><tr>
+ *          <th aria-sort="ascending">FLIGHT</th>
+ *          <th class="juno-table__num" aria-sort="none">ALT</th>
+ *        </tr></thead>
+ *        <tbody>
+ *          <tr aria-selected="true"><td>…</td><td class="juno-table__num">37,000</td></tr>
+ *        </tbody>
+ *      </table>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* ── scroll viewport (sticky header lives here) ───────────────────────── */
+.juno-table-scroll {
+  max-block-size: 480px;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--juno-s3) transparent;
+}
+
+.juno-table-scroll::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
+.juno-table-scroll::-webkit-scrollbar-thumb { background: var(--juno-s3); border-radius: var(--juno-radius-5); }
+.juno-table-scroll::-webkit-scrollbar-track { background: transparent; }
+
+/* ── table ────────────────────────────────────────────────────────────── */
+.juno-table {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+}
+
+/* header */
+.juno-table thead th {
+  padding: var(--juno-space-12) var(--juno-space-16);
+  background: var(--juno-s2);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-medium);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  color: var(--juno-label);
+  text-align: start;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border-block-end: var(--juno-border-width-1) solid var(--juno-control-edge);
+}
+
+.juno-table--sticky thead th {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--juno-z-raised);
+}
+
+/* sortable header — set aria-sort; the arrow + active color follow */
+.juno-table thead th[aria-sort] { cursor: pointer; }
+
+.juno-table thead th[aria-sort]::after {
+  content: '';
+  display: inline-block;
+  inline-size: var(--juno-space-8);
+  margin-inline-start: var(--juno-space-4);
+  font-family: var(--juno-font-family-mono);
+  font-size: 9px;
+  color: var(--juno-active);
+}
+
+.juno-table thead th[aria-sort='none']:hover { color: var(--juno-data); }
+.juno-table thead th[aria-sort='none']:hover::after { content: '↕'; color: var(--juno-muted); }
+.juno-table thead th[aria-sort='ascending'] { color: var(--juno-data); }
+.juno-table thead th[aria-sort='ascending']::after { content: '▲'; }
+.juno-table thead th[aria-sort='descending'] { color: var(--juno-data); }
+.juno-table thead th[aria-sort='descending']::after { content: '▼'; }
+
+/* body cells */
+.juno-table tbody td {
+  padding: var(--juno-space-12) var(--juno-space-16);
+  color: var(--juno-data);
+  white-space: nowrap;
+  vertical-align: middle;
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+}
+
+/* density — per-table, independent of the global density mode */
+.juno-table--compact thead th { padding: var(--juno-space-8) var(--juno-space-12); }
+.juno-table--compact tbody td { padding: var(--juno-space-8) var(--juno-space-16); }
+
+/* zebra (set on the table; striping the odd body rows) */
+.juno-table--zebra tbody tr:nth-child(even) td { background: var(--juno-s2); }
+:root[data-juno-mode='light'] .juno-table--zebra tbody tr:nth-child(even) td { background: var(--juno-s1); }
+
+/* row interaction — app keeps aria-selected in sync */
+.juno-table tbody tr { transition: background var(--juno-motion-duration-quick) var(--juno-motion-ease-standard); }
+.juno-table tbody tr:hover td { background: var(--juno-s2); }
+:root[data-juno-mode='light'] .juno-table tbody tr:hover td { background: var(--juno-s1); }
+
+.juno-table tbody tr[aria-selected='true'] td {
+  background: color-mix(in srgb, var(--juno-active) 11%, transparent);
+}
+
+/* selection rail — a left bar on the first cell of a selected row */
+.juno-table tbody td:first-child {
+  border-inline-start: var(--juno-border-width-3) solid transparent;
+}
+
+.juno-table tbody tr[aria-selected='true'] td:first-child {
+  border-inline-start-color: var(--juno-active);
+}
+
+/* ── cell flavors ─────────────────────────────────────────────────────── */
+
+/* identifier — mono, bold (callsigns, codes, IDs) */
+.juno-table__id {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+}
+
+/* numeric — mono, bold, end-aligned (measured values) */
+.juno-table__num {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  text-align: end;
+}
+
+/* secondary mono (routes, sub-codes) — quieter than data */
+.juno-table__mono {
+  font-family: var(--juno-font-family-mono);
+  color: var(--juno-label);
+}
+
+/* timestamp — mono, muted */
+.juno-table__time {
+  font-family: var(--juno-font-family-mono);
+  text-align: end;
+  color: var(--juno-label);
+}
+
+/* trend / delta — role-colored mono; author supplies ▲ / ▼ + sign */
+.juno-table__trend {
+  --juno-role: var(--juno-nominal);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-4);
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  color: var(--juno-role);
+}
+
+/* inline meter — track + role fill + value; app sets --juno-table-fill (0–100) */
+.juno-table__meter {
+  --juno-role: var(--juno-nominal);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+  justify-content: flex-end;
+  inline-size: 100%;
+}
+
+.juno-table__meter-track {
+  inline-size: var(--juno-space-56);
+  block-size: var(--juno-space-4);
+  border-radius: var(--juno-radius-3);
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.juno-table__meter-fill {
+  display: block;
+  block-size: 100%;
+  inline-size: calc(var(--juno-table-fill, 0) * 1%);
+  background: var(--juno-role);
+  border-radius: var(--juno-radius-3);
+}
+
+.juno-table__meter-val {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-12);
+  color: var(--juno-role);
+  min-inline-size: var(--juno-space-32);
+  text-align: end;
+}
+
+/* row actions — icon buttons, revealed when the row is hovered/focused */
+.juno-table__actions {
+  display: inline-flex;
+  gap: var(--juno-space-8);
+  opacity: 0;
+  transition: opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-table tbody tr:hover .juno-table__actions,
+.juno-table tbody tr:focus-within .juno-table__actions { opacity: 1; }
+
+/* no hover to reveal them on touch — actions stay visible */
+@media (hover: none) {
+  .juno-table__actions { opacity: 1; }
+}
+
+.juno-table__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--juno-space-24);
+  block-size: var(--juno-space-24);
+  border-radius: var(--juno-radius-3);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge);
+  background: transparent;
+  color: var(--juno-label);
+  font-size: var(--juno-font-size-13);
+  cursor: pointer;
+}
+
+.juno-table__action:hover { color: var(--juno-data); background: var(--juno-s2); }
+
+/* ── overflow behaviors (set on a cell) ───────────────────────────────────
+   Scoped under `.juno-table td` so they out-specify the base `white-space:
+   nowrap` on body cells — otherwise wrap / clamp would never break. */
+.juno-table td.juno-table__truncate {
+  max-inline-size: var(--juno-cell-max, 240px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Line-clamp must live on a block child: a <td> stays `table-cell` and ignores
+   `display: -webkit-box`, so clamping it leaks the overflowing line. The td just
+   sets the width + wrap; the inner element does the clamp. */
+.juno-table td.juno-table__clamp {
+  max-inline-size: var(--juno-cell-max, 240px);
+  white-space: normal;
+}
+
+.juno-table__clamp-text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.juno-table td.juno-table__wrap {
+  max-inline-size: var(--juno-cell-max, 240px);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+/* ── selection column (checkbox) ──────────────────────────────────────── */
+.juno-table th.juno-table__check,
+.juno-table td.juno-table__check {
+  inline-size: 44px;
+  text-align: center;
+  padding-inline: var(--juno-space-16) var(--juno-space-8);
+}
+
+/* ── editable cells (app swaps the mark for an input on edit) ──────────── */
+.juno-table td.juno-table__editable { cursor: cell; }
+
+.juno-table td.juno-table__editable:hover {
+  background: color-mix(in srgb, var(--juno-active) 8%, transparent);
+  box-shadow: inset 0 0 0 var(--juno-border-width-1) var(--juno-active);
+}
+
+/* the dashed underline that marks a value as editable */
+.juno-table__mark {
+  border-block-end: var(--juno-border-width-1) dashed color-mix(in srgb, var(--juno-label) 50%, transparent);
+  padding-block-end: 1px;
+}
+
+/* the inline editor — a compact input that fills the cell */
+.juno-table__edit-input {
+  inline-size: 100%;
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-active);
+  border-radius: var(--juno-radius-3);
+  padding: var(--juno-space-2) var(--juno-space-8);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+  text-align: inherit;
+  outline: none;
+}
+
+/* ── toolbar / footer / bulk bar (framing rows) ───────────────────────── */
+.juno-table__toolbar,
+.juno-table__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  flex-wrap: wrap;
+  padding: var(--juno-space-12) var(--juno-space-16);
+  background: var(--juno-s1);
+}
+
+.juno-table__toolbar { border-block-end: var(--juno-border-width-1) solid var(--juno-border); }
+.juno-table__foot { border-block-start: var(--juno-border-width-1) solid var(--juno-border); }
+
+/* selection / bulk-action bar — shown by the app while rows are selected.
+   The [hidden] override is required: a class `display` beats the UA [hidden]. */
+.juno-table__bulk {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-16);
+  padding: var(--juno-space-10) var(--juno-space-16);
+  background: color-mix(in srgb, var(--juno-active) 10%, transparent);
+  border-block-end: var(--juno-border-width-1) solid var(--juno-active);
+}
+
+.juno-table__bulk[hidden] { display: none; }
+
+.juno-table__bulk-count {
+  font-family: var(--juno-font-family-mono);
+  font-weight: var(--juno-font-weight-bold);
+  font-size: var(--juno-font-size-12);
+  color: var(--juno-active);
+}
+
+/* ── skeleton + empty states ──────────────────────────────────────────── */
+.juno-table__skeleton {
+  block-size: var(--juno-space-10);
+  border-radius: var(--juno-radius-3);
+  background: linear-gradient(
+    90deg,
+    var(--juno-s2) 0%,
+    var(--juno-s3) 50%,
+    var(--juno-s2) 100%
+  );
+  background-size: 200% 100%;
+  animation: juno-table-shimmer 1.2s ease-in-out infinite;
+}
+
+@keyframes juno-table-shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+
+.juno-table__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-12);
+  padding: var(--juno-space-56) var(--juno-space-24);
+  text-align: center;
+  color: var(--juno-label);
+}
+
+.juno-table__empty-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--juno-space-40);
+  block-size: var(--juno-space-40);
+  border-radius: var(--juno-radius-8);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge);
+  color: var(--juno-muted);
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-18);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .juno-table__skeleton { animation: none; }
+}
+
+/* ── stacked mode (opt-in) — card rows for phone-width containers ────────
+   Add `.juno-table--stack` on the table and `data-label="HEADER"` on each
+   td. In a container narrower than 480px the grid flips: the header row
+   hides, every row becomes a bordered card, every cell a label/value pair
+   (::before renders the data-label). Container-driven, so it needs an
+   ancestor with `container-type: inline-size` — usually the
+   .juno-table-scroll wrapper. Semantics stay a real <table>; only the
+   display changes.
+   Usage:
+     <div class="juno-table-scroll" style="container-type:inline-size">
+       <table class="juno-table juno-table--stack">
+         <tbody><tr>
+           <td data-label="FLIGHT" class="juno-table__id">JU-204</td>
+           <td data-label="ALT" class="juno-table__num">37,000</td>
+         </tr></tbody> */
+@container (max-width: 480px) {
+  .juno-table--stack thead { display: none; }
+
+  .juno-table--stack,
+  .juno-table--stack tbody,
+  .juno-table--stack tbody tr { display: block; }
+
+  .juno-table--stack tbody tr {
+    margin-block-end: var(--juno-space-12);
+    border: var(--juno-border-width-1) solid var(--juno-border);
+    border-radius: var(--juno-radius-5);
+    overflow: hidden;
+  }
+
+  .juno-table--stack tbody td {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--juno-space-16);
+    padding: var(--juno-space-8) var(--juno-space-16);
+    border-block-end: none;
+    white-space: normal;
+    text-align: end;
+  }
+
+  /* the column header, rebuilt per cell from data-label */
+  .juno-table--stack tbody td::before {
+    content: attr(data-label);
+    flex-shrink: 0;
+    font-family: var(--juno-font-family-sans);
+    font-size: var(--juno-font-size-10);
+    font-weight: var(--juno-font-weight-medium);
+    letter-spacing: var(--juno-font-tracking-caps);
+    text-transform: uppercase;
+    text-align: start;
+    color: var(--juno-label);
+  }
+
+  /* the selection rail moves from the first cell to the card edge */
+  .juno-table--stack tbody td:first-child { border-inline-start: none; }
+
+  .juno-table--stack tbody tr[aria-selected='true'] {
+    border-inline-start: var(--juno-border-width-3) solid var(--juno-active);
+  }
+
+  /* no hover on most narrow devices — keep row actions visible */
+  .juno-table--stack .juno-table__actions { opacity: 1; }
+}

package/src/css/components/tabs.css

@@ -0,0 +1,66 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Tabs
+ *  A horizontal tablist with an active-cyan underline indicator; the
+ *  selected tab shows its panel. junoui ships the look + the ARIA
+ *  contract; the app owns switching (aria-selected, panel visibility,
+ *  arrow-key roving focus).
+ *  Usage:
+ *    <div class="juno-tabs">
+ *      <div class="juno-tabs__list" role="tablist" aria-label="Service">
+ *        <button class="juno-tabs__tab" role="tab" id="t1"
+ *                aria-controls="p1" aria-selected="true">OVERVIEW</button>
+ *        <button class="juno-tabs__tab" role="tab" id="t2"
+ *                aria-controls="p2" aria-selected="false">METRICS</button>
+ *      </div>
+ *      <div class="juno-tabs__panel" role="tabpanel" id="p1" aria-labelledby="t1">…</div>
+ *      <div class="juno-tabs__panel" role="tabpanel" id="p2" aria-labelledby="t2" hidden>…</div>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-tabs__list {
+  display: flex;
+  gap: var(--juno-space-2);
+  border-block-end: var(--juno-border-width-1) solid var(--juno-border);
+
+  /* tabs never wrap — when space runs out (phone widths) the strip
+     scrolls sideways instead, keeping every tab reachable */
+  overflow: auto hidden;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+}
+
+.juno-tabs__tab {
+  appearance: none;
+  margin: 0;
+  margin-block-end: calc(-1 * var(--juno-border-width-1));
+  padding: var(--juno-space-10) var(--juno-space-16);
+  background: transparent;
+  border: none;
+  border-block-end: var(--juno-border-width-2) solid transparent;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-medium);
+  letter-spacing: var(--juno-font-tracking-label);
+  color: var(--juno-label);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-tabs__tab:hover { color: var(--juno-data); }
+
+.juno-tabs__tab[aria-selected='true'] {
+  color: var(--juno-active);
+  border-block-end-color: var(--juno-active);
+}
+
+.juno-tabs__tab:disabled {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-tabs__panel {
+  padding-block-start: var(--juno-space-20);
+}
+
+.juno-tabs__panel[hidden] { display: none; }

package/src/css/components/thumb.css

@@ -0,0 +1,69 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Thumb (media thumbnail + unavailable placeholder)
+ *  A media frame that never shows the browser's broken-image glyph:
+ *  a muted placeholder (icon on s2) sits under the media; the image
+ *  covers it while present. Loading state is .juno-skeleton's job —
+ *  this is for media that is missing or failed.
+ *  A missing thumb is not a warning: the placeholder stays neutral.
+ *  Usage:
+ *    <figure class="juno-thumb" style="aspect-ratio: 1">
+ *      <img src="…" alt="Sunset clip" onerror="this.remove()" />
+ *    </figure>
+ *    <!-- known-missing: ship no <img>; label the figure instead -->
+ *    <figure class="juno-thumb juno-thumb--video" role="img" aria-label="Preview unavailable"></figure>
+ *  The onerror one-liner is the whole JS contract (optional, stateless):
+ *  a broken image removes itself and the placeholder underneath shows.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-thumb {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-4);
+  margin: 0;
+  overflow: hidden;
+  background: var(--juno-s2);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-3);
+}
+
+/* placeholder glyph (Phosphor "images", masked so it takes any color) */
+.juno-thumb::before {
+  --juno-thumb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M160,88a16,16,0,1,1,16,16A16,16,0,0,1,160,88Zm76-32V160a20,20,0,0,1-20,20H204v20a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V88A20,20,0,0,1,40,68H60V56A20,20,0,0,1,80,36H216A20,20,0,0,1,236,56ZM180,180H80a20,20,0,0,1-20-20V92H44V196H180Zm-21.66-24L124,121.66,89.66,156ZM212,60H84v67.72l25.86-25.86a20,20,0,0,1,28.28,0L192.28,156H212Z'/%3E%3C/svg%3E");
+
+  content: '';
+  inline-size: 28%;
+  max-inline-size: var(--juno-space-32);
+  aspect-ratio: 1;
+  background: var(--juno-muted);
+  -webkit-mask: var(--juno-thumb-glyph) center / contain no-repeat;
+          mask: var(--juno-thumb-glyph) center / contain no-repeat;
+}
+
+/* video flavor — play glyph */
+.juno-thumb--video::before {
+  --juno-thumb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M234.49,111.07,90.41,22.94A20,20,0,0,0,60,39.87V216.13a20,20,0,0,0,30.41,16.93l144.08-88.13a19.82,19.82,0,0,0,0-33.86ZM84,208.85V47.15L216.16,128Z'/%3E%3C/svg%3E");
+}
+
+/* optional text under the glyph (keeps color from being the only signal) */
+.juno-thumb__label {
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  color: var(--juno-muted);
+}
+
+/* the media covers the frame; while present the placeholder sits hidden
+   underneath. On error the app's onerror removes the element. */
+.juno-thumb > img,
+.juno-thumb > video {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}

package/src/css/components/toast.css

@@ -0,0 +1,109 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Toast / snackbar
+ *  A transient, floating notification. Same role-rail language as the
+ *  alert, but elevated (shadow) and stacked in a fixed corner on the
+ *  reserved alert layer (--juno-z-alert, above modals). junoui ships the
+ *  look + enter/exit motion; the app owns creation, auto-dismiss timing,
+ *  and live-region announcement.
+ *  Usage:
+ *    <div class="juno-toast-stack" id="toasts" aria-live="polite"></div>
+ *    // app appends:
+ *    <div class="juno-toast juno--nominal" role="status">
+ *      <span class="juno-toast__icon" aria-hidden="true">✓</span>
+ *      <span class="juno-toast__text">Build promoted.</span>
+ *      <button class="juno-toast__close" aria-label="Dismiss">✕</button>
+ *    </div>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-toast-stack {
+  position: fixed;
+  z-index: var(--juno-z-alert);
+  inset-block-end: var(--juno-space-24);
+  inset-inline-end: var(--juno-space-24);
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-12);
+  inline-size: min(360px, calc(100vw - var(--juno-space-32)));
+  pointer-events: none;
+}
+
+/* placements */
+.juno-toast-stack--top { inset-block: var(--juno-space-24) auto; }
+.juno-toast-stack--start { inset-inline: var(--juno-space-24) auto; }
+
+.juno-toast {
+  --juno-role: var(--juno-active);
+
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  padding: var(--juno-space-12) var(--juno-space-16);
+  background: var(--juno-s2);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-inline-start: var(--juno-border-width-3) solid var(--juno-role);
+  border-radius: var(--juno-radius-5);
+  box-shadow: var(--juno-shadow-2);
+  color: var(--juno-data);
+  transition:
+    opacity var(--juno-motion-duration-quick) var(--juno-motion-ease-decel),
+    transform var(--juno-motion-duration-quick) var(--juno-motion-ease-decel);
+}
+
+/* enter (freshly inserted) + leaving (app adds the class before removal) */
+@starting-style {
+  .juno-toast { opacity: 0; transform: translateX(var(--juno-space-16)); }
+}
+
+.juno-toast--leaving { opacity: 0; transform: translateX(var(--juno-space-16)); }
+
+.juno-toast__icon {
+  flex-shrink: 0;
+  color: var(--juno-role);
+  font-size: var(--juno-font-size-16);
+  line-height: var(--juno-font-lineHeight-none);
+}
+
+.juno-toast__text {
+  flex: 1;
+  min-inline-size: 0;
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+}
+
+.juno-toast__close {
+  flex-shrink: 0;
+  appearance: none;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--juno-muted);
+  font-size: var(--juno-font-size-16);
+  line-height: var(--juno-font-lineHeight-none);
+  cursor: pointer;
+}
+
+.juno-toast__close:hover { color: var(--juno-data); }
+
+/* ── narrow viewports — snackbar style ──────────────────────────────────
+   The corner stack goes full-width at the bottom edge (thumb reach),
+   clear of the home indicator; toasts slide up instead of sideways. */
+@media (width <= 639.98px) {
+  .juno-toast-stack {
+    inset-inline: var(--juno-space-12);
+    inset-block-end: calc(var(--juno-space-12) + env(safe-area-inset-bottom, 0));
+    inline-size: auto;
+  }
+
+  .juno-toast-stack--top { inset-block: var(--juno-space-12) auto; }
+
+  @starting-style {
+    .juno-toast { transform: translateY(var(--juno-space-16)); }
+  }
+
+  .juno-toast--leaving { transform: translateY(var(--juno-space-16)); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .juno-toast { transition: none; }
+}