@junoput01/junoui 0.2.0

package/src/css/components/badge.css

@@ -0,0 +1,55 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Badge / status indicator
+ *  Usage:  <span class="juno-badge juno--nominal">NOMINAL</span>
+ *          <span class="juno-badge juno-badge--outline juno--caution">…</span>
+ *  Color comes from --juno-role (set by an .juno--<role> class).
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-badge {
+  --juno-role: var(--juno-muted);
+
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  padding: var(--juno-space-4) var(--juno-space-10);
+  border-radius: var(--juno-radius-3);
+  border: var(--juno-border-width-1) solid transparent;
+  white-space: nowrap;
+
+  /* filled (default) */
+  background: var(--juno-role);
+  color: var(--juno-s0);
+}
+
+.juno-badge--outline {
+  background: transparent;
+  color: var(--juno-role);
+  border-color: var(--juno-role);
+}
+
+/* micro — data-UI atom below the badge scale: provenance/kind tags, model
+   names, threshold values. Mono, outline-only, 10px floor (the type scale
+   stops there on purpose). Role via juno--* as usual. */
+.juno-badge--micro {
+  font-family: var(--juno-font-family-mono);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-normal);
+  padding: var(--juno-space-2) var(--juno-space-4);
+  border-radius: var(--juno-radius-2);
+  background: transparent;
+  color: var(--juno-role);
+  border-color: color-mix(in srgb, var(--juno-role) 55%, transparent);
+}
+
+/* soft — low-fill chip: role text on a tinted wash + faint role border.
+   Quieter than filled; ideal for in-table status (a phase/state per row). */
+.juno-badge--soft {
+  background: color-mix(in srgb, var(--juno-role) 13%, transparent);
+  color: var(--juno-role);
+  border-color: color-mix(in srgb, var(--juno-role) 30%, transparent);
+}

package/src/css/components/breadcrumb.css

@@ -0,0 +1,64 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Breadcrumb  ·  hierarchy trail
+ *  A horizontal path of links to ancestor pages, ending at the current
+ *  page. Built on a real <nav><ol>; the separator is a CSS chevron (no
+ *  glyph font). Mark the last crumb aria-current="page". Zero JS.
+ *  Usage:
+ *    <nav class="juno-breadcrumb" aria-label="Breadcrumb">
+ *      <ol>
+ *        <li><a href="/">Home</a></li>
+ *        <li><a href="/fleet">Fleet</a></li>
+ *        <li><a aria-current="page">api-gateway</a></li>
+ *      </ol>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-breadcrumb ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--juno-space-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+}
+
+.juno-breadcrumb li {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+}
+
+.juno-breadcrumb a {
+  color: var(--juno-label);
+  text-decoration: none;
+  border-radius: var(--juno-radius-2);
+}
+
+.juno-breadcrumb a[href]:hover {
+  color: var(--juno-data);
+  text-decoration: underline;
+}
+
+.juno-breadcrumb a:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+/* current page — not a link; brightest */
+.juno-breadcrumb [aria-current='page'] {
+  color: var(--juno-data);
+  font-weight: var(--juno-font-weight-semibold);
+}
+
+/* separator — a CSS chevron between items (no glyph font) */
+.juno-breadcrumb li + li::before {
+  content: '';
+  inline-size: var(--juno-space-4);
+  block-size: var(--juno-space-4);
+  border-block-start: var(--juno-border-width-1) solid var(--juno-muted);
+  border-inline-end: var(--juno-border-width-1) solid var(--juno-muted);
+  transform: rotate(45deg); /* points to the inline-end (flips under RTL via dir) */
+}

package/src/css/components/button.css

@@ -0,0 +1,59 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Button
+ *  Usage:  <button class="juno-btn juno--nominal">CONFIRM</button>
+ *          <button class="juno-btn juno-btn--ghost">CANCEL</button>
+ *          <button class="juno-btn juno-btn--sm">EDIT</button>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-btn {
+  --juno-role: var(--juno-active);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-gap-control);
+  min-height: var(--juno-size-tap-min);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  font-weight: var(--juno-font-weight-bold);
+  letter-spacing: var(--juno-font-tracking-caps);
+  text-transform: uppercase;
+  padding: var(--juno-pad-control-block) var(--juno-pad-control-inline);
+  border: var(--juno-border-width-1) solid transparent;
+  border-radius: var(--juno-radius-4);
+  cursor: pointer;
+
+  /* primary (filled) */
+  background: var(--juno-role);
+  color: var(--juno-s0);
+}
+
+.juno-btn:hover { filter: brightness(1.08); }
+.juno-btn:active { filter: brightness(0.94); }
+
+.juno-btn--ghost {
+  background: transparent;
+  color: var(--juno-data);
+  border-color: var(--juno-border);
+  font-weight: var(--juno-font-weight-semibold);
+}
+.juno-btn--ghost:hover { background: var(--juno-s2); filter: none; }
+
+/* Small — for dense desktop toolbars (40–46px bars) where the default
+   control would not fit. Deliberately under the WCAG tap-min target:
+   keep the default size for touch surfaces. Combines with --ghost + roles. */
+.juno-btn--sm {
+  min-height: var(--juno-space-24);
+  font-size: var(--juno-font-size-11);
+  letter-spacing: var(--juno-font-tracking-wide);
+  padding: var(--juno-space-4) var(--juno-space-10);
+  border-radius: var(--juno-radius-3);
+}
+
+.juno-btn:disabled {
+  background: var(--juno-muted);
+  color: var(--juno-label);
+  border-color: transparent;
+  cursor: not-allowed;
+  filter: none;
+}

package/src/css/components/card.css

@@ -0,0 +1,68 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Card / panel
+ *  Usage:
+ *    <article class="juno-card">
+ *      <header class="juno-card__head">…<span class="juno-badge …">…</span></header>
+ *      <div class="juno-card__body">…</div>
+ *    </article>
+ *  Add a status accent edge: <article class="juno-card juno-card--accent juno--caution">
+ *  Critical full-border:     <article class="juno-card juno-card--alert  juno--warning">
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-card {
+  --juno-role: var(--juno-active);
+
+  background: var(--juno-s1);
+  border: var(--juno-border-width-1) solid var(--juno-border);
+  border-radius: var(--juno-radius-8);
+  overflow: hidden;
+  container-type: inline-size; /* rows below adapt to the card's own width */
+}
+
+/* When the card itself is narrow, stack label/value rows. Driven by the
+   card's container width, not the viewport — works in any layout. */
+@container (max-width: 320px) {
+  .juno-card__row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--juno-space-2);
+  }
+}
+
+.juno-card--accent { border-top: var(--juno-border-width-2) solid var(--juno-role); }
+
+.juno-card--alert { border-color: var(--juno-role); border-top-width: var(--juno-border-width-2); }
+
+.juno-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--juno-space-8);
+  padding: var(--juno-space-12) var(--juno-space-16);
+  border-bottom: var(--juno-border-width-1) solid var(--juno-border);
+  font-size: var(--juno-font-size-12);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-wide);
+  text-transform: uppercase;
+  color: var(--juno-data);
+}
+
+.juno-card--alert .juno-card__head {
+  background: var(--juno-s2);
+  border-bottom-color: var(--juno-role);
+  color: var(--juno-role);
+}
+
+.juno-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--juno-space-12);
+  padding: var(--juno-pad-surface-block) var(--juno-pad-surface-inline);
+}
+
+/* Label / value row inside a card body */
+.juno-card__row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}

package/src/css/components/checkbox.css

@@ -0,0 +1,89 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Checkbox & Radio
+ *  Custom-styled native inputs (appearance:none) — keyboard + screen-reader
+ *  native, zero JS. Checkbox is a targeting-reticle square whose solid core
+ *  drops in on check; radio is a ring with a center dot. Default tint ACTIVE.
+ *  Wrap with .juno-choice for an inline label row.
+ *  Usage:
+ *    <label class="juno-choice">
+ *      <input class="juno-checkbox" type="checkbox" checked /> TCAS
+ *    </label>
+ *    <label class="juno-choice">
+ *      <input class="juno-radio" type="radio" name="mode" /> MANAGED
+ *    </label>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-gap-control);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-13);
+  color: var(--juno-data);
+  cursor: pointer;
+}
+
+.juno-checkbox,
+.juno-radio {
+  --juno-role: var(--juno-active);
+
+  appearance: none;
+  margin: 0;
+  flex-shrink: 0;
+  inline-size: var(--juno-space-16);
+  block-size: var(--juno-space-16);
+  display: inline-grid;
+  place-content: center;
+  background: var(--juno-control-surface);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  cursor: pointer;
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    box-shadow var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-checkbox { border-radius: var(--juno-radius-2); }
+.juno-radio { border-radius: 50%; }
+
+/* the core / dot — drops in on check with a slight overshoot */
+.juno-checkbox::before,
+.juno-radio::before {
+  content: '';
+  inline-size: var(--juno-space-8);
+  block-size: var(--juno-space-8);
+  background: var(--juno-role);
+  transform: scale(0);
+  transition: transform var(--juno-motion-duration-quick) var(--juno-motion-ease-spring);
+}
+
+.juno-checkbox::before { border-radius: 1px; }
+.juno-radio::before { border-radius: 50%; }
+
+.juno-checkbox:checked,
+.juno-radio:checked {
+  border-color: var(--juno-role);
+  box-shadow: 0 0 0 var(--juno-border-width-3) color-mix(in srgb, var(--juno-role) 22%, transparent);
+}
+
+.juno-checkbox:checked::before,
+.juno-radio:checked::before { transform: scale(1); }
+
+/* indeterminate (e.g. a "select all" with a partial set) — a dash, not a core */
+.juno-checkbox:indeterminate {
+  border-color: var(--juno-role);
+  box-shadow: 0 0 0 var(--juno-border-width-3) color-mix(in srgb, var(--juno-role) 22%, transparent);
+}
+
+.juno-checkbox:indeterminate::before {
+  transform: scale(1);
+  block-size: 2px;
+}
+
+.juno-checkbox:disabled,
+.juno-radio:disabled {
+  background: var(--juno-s1);
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.juno-choice:has(:disabled) { color: var(--juno-muted); cursor: not-allowed; }

package/src/css/components/chip.css

@@ -0,0 +1,89 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Chip / Tag  ·  compact interactive token
+ *  A pill that represents a discrete entity: a filter, a selected value,
+ *  a removable tag. Unlike a badge (a static status label), a chip is
+ *  interactive — selectable and/or dismissible. Reads --juno-role for its
+ *  accent. Use a <button> for a toggle chip; add a remove button for a
+ *  dismissible one. Zero JS — the app owns selection / removal.
+ *  Usage:
+ *    <span class="juno-chip">us-east-1</span>
+ *    <button class="juno-chip juno-chip--toggle" aria-pressed="true">Active</button>
+ *    <span class="juno-chip juno--active">
+ *      filter:prod
+ *      <button class="juno-chip__remove" aria-label="Remove">
+ *        <svg class="juno-icon juno-icon--sm"><use href="…#juno-i-x" /></svg>
+ *      </button>
+ *    </span>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-chip {
+  --juno-role: var(--juno-label);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+  block-size: var(--juno-space-24);
+  padding-inline: var(--juno-space-12);
+  border: var(--juno-border-width-1) solid var(--juno-control-edge-strong);
+  border-radius: 999px;
+  background: var(--juno-control-surface);
+  color: var(--juno-data);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-12);
+  letter-spacing: var(--juno-font-tracking-tight);
+  white-space: nowrap;
+}
+
+/* leading accent dot — reads the role; appears when a role class is set */
+.juno-chip.juno--nominal,
+.juno-chip.juno--active,
+.juno-chip.juno--target,
+.juno-chip.juno--caution,
+.juno-chip.juno--warning {
+  border-color: var(--juno-role);
+  color: var(--juno-role);
+  background: color-mix(in srgb, var(--juno-role) 12%, var(--juno-control-surface));
+}
+
+/* toggle chip — a real <button>; pressed = filled accent */
+button.juno-chip {
+  cursor: pointer;
+  transition:
+    border-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard),
+    background-color var(--juno-motion-duration-quick) var(--juno-motion-ease-standard);
+}
+
+.juno-chip--toggle[aria-pressed='true'] {
+  border-color: var(--juno-role);
+  background: color-mix(in srgb, var(--juno-role) 18%, var(--juno-control-surface));
+  color: var(--juno-role);
+}
+
+.juno-chip:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: var(--juno-space-2);
+}
+
+/* remove affordance — a tiny inset button at the trailing edge */
+.juno-chip__remove {
+  display: inline-grid;
+  place-content: center;
+  margin-inline-end: calc(var(--juno-space-4) * -1);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  opacity: var(--juno-opacity-muted);
+  cursor: pointer;
+}
+
+.juno-chip__remove:hover,
+.juno-chip__remove:focus-visible {
+  opacity: 1;
+}
+
+.juno-chip:disabled,
+.juno-chip[aria-disabled='true'] {
+  opacity: var(--juno-opacity-disabled);
+  cursor: not-allowed;
+}

package/src/css/components/divider.css

@@ -0,0 +1,50 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Divider  ·  visual / semantic separation
+ *  A hairline rule. Horizontal by default; add --vertical for a column
+ *  separator (stretches to the row's cross size). An optional centered
+ *  label breaks the rule in two ("OR", "MORE"). Use a real <hr> for a
+ *  semantic break, or a styled element when it's purely visual.
+ *  Usage:
+ *    <hr class="juno-divider" />
+ *    <div class="juno-divider juno-divider--label">OR</div>
+ *    <span class="juno-divider juno-divider--vertical"></span>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-divider {
+  border: 0;
+  margin: 0;
+  block-size: var(--juno-border-width-1);
+  inline-size: 100%;
+  background: var(--juno-border);
+}
+
+/* vertical rule — sits inline; relies on the parent giving it block size */
+.juno-divider--vertical {
+  inline-size: var(--juno-border-width-1);
+  block-size: auto;
+  align-self: stretch;
+  min-block-size: var(--juno-space-16);
+}
+
+/* labeled rule — a centered caption with a line on each side */
+.juno-divider--label {
+  display: flex;
+  align-items: center;
+  gap: var(--juno-space-12);
+  border: 0;
+  background: none;
+  block-size: auto;
+  color: var(--juno-label);
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-11);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+}
+
+.juno-divider--label::before,
+.juno-divider--label::after {
+  content: '';
+  flex: 1;
+  block-size: var(--juno-border-width-1);
+  background: var(--juno-border);
+}

package/src/css/components/dock.css

@@ -0,0 +1,74 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Dock (app-shell bottom navigation)
+ *  The narrow-viewport counterpart of the rail: 3–5 primary destinations
+ *  as icon-over-label tap targets pinned to the bottom edge. Zero JS —
+ *  the app sets aria-current="page"; the active item styles off the
+ *  attribute, exactly like the rail.
+ *
+ *  Sticky (not fixed) so it stays in flow: put it last inside the
+ *  scrolling column and it pins itself without overlapping content.
+ *  Pads for the home-indicator via safe-area-inset. Pair with the rail
+ *  using the viewport helpers (see docs/layout.md#app-shell):
+ *    <nav class="juno-rail juno-hide-below-md" …>
+ *    <nav class="juno-dock juno-hide-from-md" aria-label="Primary">
+ *      <a class="juno-dock__item" href="…" aria-current="page">
+ *        <svg class="juno-icon" aria-hidden="true"><use href="…#juno-i-squares-four" /></svg>
+ *        <span class="juno-dock__label">Library</span>
+ *      </a>
+ *    </nav>
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-dock {
+  --juno-role: var(--juno-active);
+
+  position: sticky;
+  inset-block-end: 0;
+  z-index: var(--juno-z-raised);
+  display: flex;
+  align-items: stretch;
+  background: var(--juno-s1);
+  border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+  padding-block-end: env(safe-area-inset-bottom, 0);
+}
+
+.juno-dock__item {
+  flex: 1 1 0;
+  min-inline-size: 0;
+  min-block-size: var(--juno-size-tap-comfortable);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--juno-space-2);
+  padding-block: var(--juno-space-4);
+  border-block-start: var(--juno-border-width-2) solid transparent;
+  font-family: var(--juno-font-family-sans);
+  font-size: var(--juno-font-size-10);
+  font-weight: var(--juno-font-weight-semibold);
+  letter-spacing: var(--juno-font-tracking-label);
+  text-transform: uppercase;
+  text-decoration: none;
+  color: var(--juno-label);
+  cursor: pointer;
+}
+
+.juno-dock__label {
+  max-inline-size: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.juno-dock__item:hover { color: var(--juno-data); }
+
+/* active = attribute, not class: <a aria-current="page"> */
+.juno-dock__item[aria-current] {
+  border-block-start-color: var(--juno-role);
+  background: var(--juno-s2);
+  color: var(--juno-data);
+}
+
+.juno-dock__item:focus-visible {
+  outline: var(--juno-border-width-2) solid var(--juno-active);
+  outline-offset: calc(-1 * var(--juno-space-2));
+}

package/src/css/components/dot.css

@@ -0,0 +1,35 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Status dot + label
+ *  Usage:
+ *    <span class="juno-status juno--nominal">
+ *      <span class="juno-status__dot"></span>NOMINAL
+ *    </span>
+ *  Pair color with the text label — color is never the sole signal.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-status {
+  --juno-role: var(--juno-nominal);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--juno-space-8);
+  font-size: var(--juno-font-size-12);
+  letter-spacing: var(--juno-font-tracking-label);
+  color: var(--juno-role);
+}
+
+.juno-status__dot {
+  width: var(--juno-size-dot-sm);
+  height: var(--juno-size-dot-sm);
+  border-radius: 50%;
+  background: var(--juno-role);
+  flex-shrink: 0;
+}
+
+.juno-status--lg .juno-status__dot {
+  width: var(--juno-size-dot-md);
+  height: var(--juno-size-dot-md);
+}
+
+/* Live/armed pulse — respects prefers-reduced-motion via base layer. */
+.juno-status--live .juno-status__dot { animation: juno-blink 1.4s ease-in-out infinite; }

package/src/css/components/drawer.css

@@ -0,0 +1,80 @@
+/* ════════════════════════════════════════════════════════════════════
+ *  Component — Drawer
+ *  Edge-anchored <dialog> for secondary tasks and settings. Same scrim and
+ *  layer as the modal, but slides along one axis. App owns showModal()/close().
+ *  Default anchors to the inline-end edge; modifiers move it.
+ *  Usage:
+ *    <dialog class="juno-modal juno-drawer">…</dialog>            (inline-end)
+ *    <dialog class="juno-modal juno-drawer juno-drawer--start">…</dialog>
+ *    <dialog class="juno-modal juno-drawer juno-drawer--bottom">…</dialog>
+ *  Reuses .juno-modal for the surface + scrim; this file re-pins + re-slides.
+ *  Selectors are compound (.juno-modal.juno-drawer) so they override the
+ *  modal's centered transform regardless of bundle order.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.juno-modal.juno-drawer {
+  inline-size: 380px;
+  max-inline-size: 100%;
+  block-size: 100dvh;
+  max-block-size: 100dvh;
+  border-radius: 0;
+  border: none;
+
+  /* pin to the inline-end edge (mirrors under RTL) */
+  margin-block: 0;
+  margin-inline: auto 0;
+  border-inline-start: var(--juno-border-width-1) solid var(--juno-border);
+
+  /* slide in from the edge; base speed (lighter than a modal) */
+  transform: translateX(100%);
+  transition:
+    transform var(--juno-motion-duration-base) var(--juno-motion-ease-decel),
+    overlay var(--juno-motion-duration-base) allow-discrete,
+    display var(--juno-motion-duration-base) allow-discrete;
+}
+
+.juno-modal.juno-drawer[open] { transform: translateX(0); }
+
+@starting-style {
+  .juno-modal.juno-drawer[open] { transform: translateX(100%); }
+}
+
+.juno-modal.juno-drawer--start {
+  margin-inline: 0 auto;
+  border-inline: none;
+  border-inline-end: var(--juno-border-width-1) solid var(--juno-border);
+  transform: translateX(-100%);
+}
+
+.juno-modal.juno-drawer--start[open] { transform: translateX(0); }
+
+@starting-style {
+  .juno-modal.juno-drawer--start[open] { transform: translateX(-100%); }
+}
+
+.juno-modal.juno-drawer--bottom {
+  inline-size: 100%;
+  max-inline-size: 100%;
+  block-size: 60dvh;
+  margin-block: auto 0;
+  margin-inline: 0;
+  border: none;
+  border-block-start: var(--juno-border-width-1) solid var(--juno-border);
+  transform: translateY(100%);
+
+  /* keep content above the home indicator */
+  padding-block-end: env(safe-area-inset-bottom, 0);
+}
+
+.juno-modal.juno-drawer--bottom[open] { transform: translateY(0); }
+
+@starting-style {
+  .juno-modal.juno-drawer--bottom[open] { transform: translateY(100%); }
+}
+
+/* ── narrow viewports ────────────────────────────────────────────────────
+   Side drawers cap below the full width so a sliver of scrim survives —
+   the visual cue (and tap target) that "outside" closes the panel. */
+@media (width <= 639.98px) {
+  .juno-modal.juno-drawer:not(.juno-drawer--bottom) { inline-size: min(380px, 85vw); }
+}