@lepid-labs/styles 1.0.0 → 1.0.2

package/summer-cloud/components/shell.css

@@ -0,0 +1,197 @@
+/* summer-cloud — shell chrome: unfilled bars with lit hairlines on the sky,
+ * Plus Jakarta labels, the current page a solid violet pill with the raised
+ * violet shadow; hover fills with sky tint. Structure is in layout.css. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__skip {
+  padding: var(--ld-space-2) var(--ld-space-3);
+  background: var(--ld-primary);
+  border-radius: var(--ld-radius-pill);
+  color: var(--ld-on-primary);
+  font-family: var(--ld-font-display);
+  font-weight: var(--ld-font-weight-medium);
+  font-size: var(--ld-text-sm);
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__header {
+  /* no fill: the shell background runs under the bar; the blur keeps
+   * content scrolling beneath it legible */
+  background: transparent;
+  border-bottom: 1px solid var(--ld-border-lit);
+  backdrop-filter: blur(var(--ld-blur-high));
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__toggle {
+  background: none;
+  border: none;
+  border-radius: var(--ld-radius-pill);
+  color: var(--ld-faint);
+  transition: background var(--ld-transition), color var(--ld-transition), transform var(--ld-transition) var(--ld-ease-bounce);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__toggle:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__toggle:focus-visible {
+  background: var(--ld-sky-tint);
+  color: var(--ld-primary);
+  outline: none;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__toggle:focus-visible {
+  box-shadow: 0 0 0 4px var(--ld-accent-glow);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__toggle:active {
+  transform: scale(0.92);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__brand {
+  color: var(--ld-primary);
+  font-family: var(--ld-font-display);
+  font-weight: 800;
+  font-size: 1.15rem;
+  letter-spacing: var(--ld-tracking-tight);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-topnav__item {
+  padding: var(--ld-space-2) var(--ld-space-3);
+  border-radius: var(--ld-radius-pill);
+  color: var(--ld-faint);
+  font-family: var(--ld-font-display);
+  font-weight: var(--ld-font-weight-medium);
+  font-size: var(--ld-text-sm);
+  transition: background var(--ld-transition), color var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-topnav__item:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-topnav__item:focus-visible {
+  background: var(--ld-sky-tint);
+  color: var(--ld-primary);
+  outline: none;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-topnav__item--active,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-topnav__item[aria-current="page"] {
+  color: var(--ld-primary);
+  font-weight: var(--ld-font-weight-bold);
+  box-shadow: inset 0 -2px 0 var(--ld-primary);
+  border-radius: 0;
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__nav {
+  background: transparent; /* the shell background shows through; a hairline divides */
+  border-right: 1px solid var(--ld-border-lit);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__scrim {
+  background: rgba(23, 28, 31, 0.25);
+  backdrop-filter: blur(3px);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav {
+  padding-inline: var(--ld-space-3);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__heading {
+  color: var(--ld-faint);
+  font-family: var(--ld-font-display);
+  font-size: 11px;
+  font-weight: var(--ld-font-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  opacity: 0.75;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item {
+  border-radius: var(--ld-radius-pill);
+  color: var(--ld-on-surface);
+  font-family: var(--ld-font-display);
+  font-size: var(--ld-text-sm);
+  font-weight: var(--ld-font-weight-medium);
+  transition: background var(--ld-transition), color var(--ld-transition), transform var(--ld-transition) var(--ld-ease-bounce), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__icon {
+  color: var(--ld-faint);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item:focus-visible {
+  background: var(--ld-sky-tint);
+  color: var(--ld-primary);
+  outline: none;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item:hover .ld-sidenav__icon,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item:focus-visible .ld-sidenav__icon {
+  color: var(--ld-primary);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item:focus-visible {
+  box-shadow: 0 0 0 4px var(--ld-accent-glow);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item:active {
+  transform: scale(0.97);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item--active,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item[aria-current="page"] {
+  background: var(--ld-primary);
+  color: var(--ld-on-primary);
+  box-shadow: var(--ld-shadow-raised);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item--active .ld-sidenav__icon,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item[aria-current="page"] .ld-sidenav__icon,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item--active:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item[aria-current="page"]:hover {
+  color: var(--ld-on-primary);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item--active:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item[aria-current="page"]:hover {
+  background: var(--ld-primary-bright);
+  box-shadow: var(--ld-shadow-raised-hover);
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__footer {
+  border-top: 1px solid var(--ld-border);
+  color: var(--ld-faint);
+  font-size: 13px;
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-page__eyebrow {
+  color: var(--ld-accent-deep);
+  font-family: var(--ld-font-display);
+  font-size: 12px;
+  font-weight: var(--ld-font-weight-bold);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-page__title {
+  font-family: var(--ld-font-display);
+  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
+  font-weight: 800;
+  letter-spacing: var(--ld-tracking-tight);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-page__subtitle {
+  color: var(--ld-faint);
+}
+
+@media (width <= 48rem) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__nav {
+    background: var(--ld-surface-glass-high);
+    backdrop-filter: blur(var(--ld-blur-high));
+    box-shadow: var(--ld-shadow);
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell--tabbar .ld-shell__nav {
+    border-right: none;
+    border-top: 1px solid var(--ld-border-lit);
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell--tabbar .ld-sidenav {
+    padding-inline: var(--ld-space-2);
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell--tabbar .ld-sidenav__item {
+    border-radius: var(--ld-radius);
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell--tabbar .ld-sidenav__item--active,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell--tabbar .ld-sidenav__item[aria-current="page"] {
+    background: var(--ld-sky-tint);
+    color: var(--ld-primary);
+    box-shadow: none;
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell--tabbar .ld-sidenav__item--active .ld-sidenav__icon,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell--tabbar .ld-sidenav__item[aria-current="page"] .ld-sidenav__icon {
+    color: var(--ld-primary);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__toggle,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-topnav__item,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item {
+    transition: none;
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-shell__toggle:active,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-sidenav__item:active {
+    transform: none;
+  }
+}

package/summer-cloud/components/status-card.css

@@ -0,0 +1,158 @@
+/* summer-cloud — status card: a dense dashboard card whose left edge, ring, and
+ * flash carry state (generalized from pulse's repo card).
+ *   .ld-status-card--<tone>       left edge in the semantic color
+ *   [data-ld-attention="<tone>"]  outline + glow ring calling for action
+ *   [data-ld-changed]             replays the change flash while present */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card {
+  --ld-status-attention: var(--ld-warning);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  background: var(--ld-surface-glass-high);
+  border: 1px solid var(--ld-border);
+  border-left: 3px solid transparent;
+  border-radius: var(--ld-radius);
+  backdrop-filter: blur(var(--ld-blur));
+  -webkit-backdrop-filter: blur(var(--ld-blur));
+  box-shadow: var(--ld-shadow-soft);
+  color: var(--ld-on-surface);
+  overflow: hidden;
+  transition: background var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card:hover { box-shadow: var(--ld-shadow-raised); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card--info    { border-left-color: var(--ld-info); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card--success { border-left-color: var(--ld-success); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card--warning { border-left-color: var(--ld-warning); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card--danger  { border-left-color: var(--ld-danger); }
+
+/* attention ring — the tone rides on the attribute value */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card[data-ld-attention] {
+  outline: 1px solid color-mix(in srgb, var(--ld-status-attention) 70%, transparent);
+  box-shadow: 0 0 14px color-mix(in srgb, var(--ld-status-attention) 35%, transparent);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card[data-ld-attention]:hover {
+  box-shadow: 0 0 18px color-mix(in srgb, var(--ld-status-attention) 55%, transparent);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card[data-ld-attention="info"]    { --ld-status-attention: var(--ld-info); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card[data-ld-attention="success"] { --ld-status-attention: var(--ld-success); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card[data-ld-attention="danger"]  { --ld-status-attention: var(--ld-danger); }
+
+/* change flash — fades from a primary tint back to the resting glass */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card[data-ld-changed] { animation: ld-sc-status-flash 30s ease-out forwards; }
+@keyframes ld-sc-status-flash {
+  from { background: color-mix(in srgb, var(--ld-primary) 14%, var(--ld-surface)); }
+  to   { background: var(--ld-surface-glass-high); }
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__watermark {
+  position: absolute;
+  top: 0;
+  left: -0.25rem;
+  width: 2rem;
+  height: 2rem;
+  color: var(--ld-on-surface);
+  opacity: 0.1;
+  pointer-events: none;
+  rotate: -25deg;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__watermark > svg { width: 100%; height: 100%; }
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ld-space-2);
+  padding: 0.625rem 0.75rem 0.5rem 0.875rem;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__title {
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--ld-font-display);
+  font-size: var(--ld-text-sm);
+  font-weight: var(--ld-font-weight-bold);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: inherit;
+  text-decoration: none;
+  transition: color var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__title[href]:hover { color: var(--ld-primary); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__prefix { color: var(--ld-faint); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__prefix::after { content: " / "; opacity: 0.5; }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__note {
+  font-size: 11px;
+  color: var(--ld-faint);
+  white-space: nowrap;
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--ld-border);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__row {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: baseline;
+  gap: 0.375rem;
+  padding: 0.3rem 0.75rem 0.3rem 0.875rem;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  transition: background 0.1s;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__row[href]:hover { background: var(--ld-sky-tint); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__row-lead {
+  min-width: 1.5rem;
+  font-size: 11px;
+  font-weight: var(--ld-font-weight-bold);
+  color: var(--ld-faint);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__row-main {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--ld-on-surface);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__row-trail {
+  display: flex;
+  align-items: center;
+  gap: var(--ld-space-1);
+  flex-shrink: 0;
+  font-size: 10px;
+  color: var(--ld-faint);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__footer {
+  display: block;
+  padding: 0.3rem 0.875rem;
+  border-top: 1px solid var(--ld-border);
+  font-size: 11px;
+  color: var(--ld-faint);
+  text-decoration: none;
+  transition: color var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__footer[href]:hover { color: var(--ld-primary); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card__empty {
+  margin: 0;
+  padding: 0.375rem 0.875rem 0.5rem;
+  border-top: 1px solid var(--ld-border);
+  font-size: 12px;
+  color: var(--ld-faint);
+  opacity: 0.7;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card { transition: none; }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-status-card[data-ld-changed] { animation: none; }
+}

package/summer-cloud/components/stepper.css

@@ -0,0 +1,101 @@
+/* summer-cloud — stepper: a milestone rail with labelled step nodes (Retail
+ * Dashboard "Active Delivery"). Violet rail on a blend track; each step is
+ *   .ld-stepper__step--complete   solid violet node, white icon
+ *   .ld-stepper__step--current    white node, 2px violet border, raised shadow
+ *   .ld-stepper__step--upcoming   sunken node, faint icon
+ * The fill follows the state modifiers — no progress value to compute. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper {
+  display: flex;
+  align-items: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ld-space-2);
+  text-align: center;
+}
+/* rail segment: from this node's centre to the next node's centre; the track is
+ * ::before, the fill ::after. Segments meet under the nodes, so the rail reads
+ * as one bar and the fill ends exactly at the current node. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step::before,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step::after {
+  content: "";
+  position: absolute;
+  top: 0.75rem;
+  left: 50%;
+  width: 100%;
+  height: 0.5rem;
+  border-radius: var(--ld-radius-pill);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step:last-child::before,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step:last-child::after { display: none; }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step::before { background: var(--ld-bg-blend); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step::after {
+  width: 0;
+  background: var(--ld-primary);
+  box-shadow: 0 0 10px rgba(69, 0, 217, 0.5);
+  transition: width var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step--complete::after { width: 100%; }
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__node {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  box-sizing: border-box;
+  font-family: var(--ld-font-mono);
+  font-size: 12px;
+  font-weight: var(--ld-font-weight-bold);
+  line-height: 1;
+  transition: background var(--ld-transition), color var(--ld-transition), box-shadow var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__node > svg { width: 1rem; height: 1rem; }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step--complete .ld-stepper__node {
+  background: var(--ld-primary);
+  color: var(--ld-on-primary);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step--current .ld-stepper__node {
+  background: var(--ld-surface);
+  border: 2px solid var(--ld-primary);
+  color: var(--ld-primary);
+  box-shadow: var(--ld-shadow-raised);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step--upcoming .ld-stepper__node {
+  background: var(--ld-surface-sunken);
+  color: var(--ld-faint);
+}
+
+/* label voice: mono 12px, tracked, sentence case */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__label {
+  font-family: var(--ld-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: var(--ld-tracking-wide);
+  line-height: 1.3;
+  color: var(--ld-faint);
+  transition: color var(--ld-transition);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step--complete .ld-stepper__label { color: var(--ld-on-surface); }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step--current .ld-stepper__label {
+  color: var(--ld-primary);
+  font-weight: var(--ld-font-weight-bold);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step--upcoming .ld-stepper__label { color: var(--ld-faint); }
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__step::after,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__node,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-stepper__label { transition: none; }
+}

package/summer-cloud/components/table.css

@@ -32,3 +32,23 @@
   font-family: var(--ld-font-mono);
   text-align: right;
 }
+
+/* Interactive rows (.ld-table--interactive): the cursor is the affordance —
+ * plain tables hover too. Focus is an outline so it
+ * composes with the selected state (aria-selected="true"), which sits last
+ * so it outranks hover. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table--interactive tbody tr:focus-visible {
+  outline: 2px solid var(--ld-accent);
+  outline-offset: -2px;
+  background: var(--ld-sky-tint);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table--interactive tbody tr:active {
+  background: rgba(12, 179, 255, 0.08);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-table--interactive tbody tr[aria-selected="true"] {
+  background: rgba(93, 43, 255, 0.07);
+  box-shadow: inset 3px 0 0 0 var(--ld-primary);
+}

package/summer-cloud/components/tabs.css

@@ -36,3 +36,45 @@
 :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabpanel {
   padding: var(--ld-space-3) 0;
 }
+
+/* Sliding indicator: one bar on the tablist, pinned to the active tab by
+ * anchor positioning, takes over the underline. Its inline edges transition
+ * separately — with data-ld-dir ("forward" | "back", set by the Tabs
+ * component) the edge nearer the target leads and the far edge trails, so the
+ * bar reaches for the tab; without it the bar just slides. Browsers without
+ * anchor positioning keep the static underline above. */
+@supports (anchor-name: --ld-a) and (anchor-scope: --ld-a) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabs {
+    position: relative;
+    anchor-scope: --ld-tab-active;
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabs :is(.ld-tab--active, .ld-tab[aria-selected="true"]) {
+    anchor-name: --ld-tab-active;
+    border-bottom-color: transparent;
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabs:where(:has(.ld-tab--active, .ld-tab[aria-selected="true"]))::after {
+    content: "";
+    position: absolute;
+    position-anchor: --ld-tab-active;
+    inset-block-end: anchor(bottom);
+    inset-inline: anchor(start) anchor(end);
+    block-size: 2px;
+    background: var(--ld-primary);
+    border-radius: 2px 2px 0 0;
+    pointer-events: none;
+    transition: inset-inline-start var(--ld-slide-lead), inset-inline-end var(--ld-slide-lead);
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabs[data-ld-dir="forward"]::after {
+    transition: inset-inline-start var(--ld-slide-trail), inset-inline-end var(--ld-slide-lead);
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabs[data-ld-dir="back"]::after {
+    transition: inset-inline-start var(--ld-slide-lead), inset-inline-end var(--ld-slide-trail);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabs::after,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-tabs[data-ld-dir]::after {
+    transition: none;
+  }
+}

package/summer-cloud/design.md

@@ -80,31 +80,93 @@ Class prefix `ld-` (shared across themes so `@lepid-labs/ui-react` stays
 theme-agnostic). Variants use BEM-ish modifiers (`ld-btn--primary`).
 
 - **Card** `.ld-card` — glass panel; `--floating` adds the Level 2 hover lift.
+- **Status card** `.ld-status-card` — dense dashboard card on high glass, raised shadow on hover (from pulse's repo
+  card): 3px left edge takes a semantic `--<tone>`, `data-ld-attention="<tone>"`
+  adds an outline + glow ring, `data-ld-changed` replays a 30s tint flash.
+  Parts: `__watermark`, `__head`, `__prefix`, `__title`, `__meta`, `__note`,
+  `__rows`, `__row` (`-lead`/`-main`/`-trail`), `__footer`, `__empty`.
 - **NavLink** `.ld-link` — pill, sky-tint wash, `→` slides 4px on hover;
   `--active` / `[aria-current=page]` becomes the violet underline rule.
 - **Button** `.ld-btn` — glass by default; `--primary` (solid violet CTA, one
   per view), `--accent` (sky-edged glass), `--ghost`, `--danger`. `--sm` is a
   compact size scaled to `.ld-badge`, for inline/table-row actions; the pill
   shape is kept.
+- **Hold button** `.ld-btn--hold` (+ `__ring`, `__body`, `__label`, `__hint`,
+  `__meter`) — hold-to-confirm: a 3px conic **violet** ring around the icon
+  well fills as `--ld-hold` goes 0→1, on the glass pill. With `--danger` the
+  pill stays glass with deep-red text (the ring and hint carry the state; a
+  violet ring on the solid red CTA would fight it). Press does not shrink
+  the pill — the ring is the feedback. `data-ld-hold="fired"` bounces to
+  1.06 (dropped under reduced motion; the fill stays). Window:
+  `--ld-hold-duration` 350 ms — soft and unhurried.
+- **Button group** `.ld-btn-group` (+ `--block`) — one long track with
+  `.ld-btn` segments lined up inside; the track owns the chrome and the
+  segments drop theirs. A long glass pill; segments are pills inside it.
+  The pressed segment (`aria-pressed="true"` / `.ld-btn--active`) floats up as
+  a white chip with bold violet text and a violet-tinted shadow. No hover
+  scale inside the pill (neighbours would overlap); the 0.97 press stays.
+  With one pressed segment the chrome is a single sliding chip: the edge
+  nearer the new segment leads, the far edge trails on the bounciest spring of the three themes
+  (`--ld-slide-lead` / `--ld-slide-trail`, direction from `data-ld-dir`).
+  Variants tint the label only; `--block` fills the row with equal-width
+  segments. Use `role="group"` + `aria-label`.
+- **Icon button** `.ld-icon-btn` (+ `--active`, `--danger`) — chromeless
+  round 2rem pill for icon-only actions (`<button>` or `<a>`; always
+  `aria-label`). Faint glyph; hover fills sky-white, turns violet and
+  bounces up; press squishes. Active (`--active`, `aria-pressed="true"`,
+  `aria-current="page"`) keeps the sky-white fill and violet glyph.
+  `--danger` turns the glyph deep red on hover. Child `svg` 1.25em.
 - **Form** `.ld-input`, `.ld-textarea`, `.ld-select`, `.ld-label`, `.ld-field`,
   `.ld-checkbox`, `.ld-radio`, `.ld-switch`, `.ld-choice` — sunken fields, no
   resting border, sky-blue ring on focus. The switch is the oversized
   "cloud-toggle": squishy, and green when live.
 - **Badge** `.ld-badge` + semantic modifiers — solid pills, mono uppercase.
+  `--sm` is the 9px dashboard pill; `--pulse` the amber call to action with a
+  breathing glow.
   **Chip** `.ld-chip` — outlined filter chip; `--selected` fills violet.
 - **Alert** `.ld-alert` — glass card with a 4px semantic left rule.
 - **Dialog** `.ld-dialog` — native `<dialog>`, opaque white, blurred backdrop.
-- **Tabs** `.ld-tabs`/`.ld-tab`/`.ld-tabpanel` — violet underline when active.
+- **Tabs** `.ld-tabs`/`.ld-tab`/`.ld-tabpanel` — violet underline when active; it stretches to the new tab and bounces back to width (same slide tokens).
 - **Table** `.ld-table` — mono uppercase headers, sky-tint row hover; add
   `.ld-num` to numeric cells for the mono/right-aligned treatment.
+  `.ld-table--interactive` adds the pointer, a sky focus outline, and a
+  selected row (`aria-selected`) with a violet wash and left bar.
 - **Progress** `.ld-progress`, **Spinner** `.ld-spinner` — glowing violet.
+- **App shell** `.ld-shell` (+ `__skip`, `__header`, `__toggle`, `__brand`,
+  `__actions`, `__nav`, `__scrim`, `__main`, `__footer`; `.ld-topnav`/`__item`;
+  `.ld-sidenav` + `__section`, `__heading`, `__item`, `__icon`, `__label`,
+  `__badge`, `__footer`) — brand in Plus Jakarta 800 violet. Items are pills that fill with sky tint on hover and press in on click; the current page is the solid violet pill with the raised violet shadow (sky-tinted in the tab bar); top-nav current page takes the violet underline. The header and nav are unfilled — hairline
+  borders over the page background (`.ld-bg`), which the shell paints; the
+  header blurs what scrolls under it. The drawer and tab bar take a fill. Structure (`components/layout.css`) is shared by every theme:
+  collapsed rail on `data-ld-nav-collapsed`, drawer on `data-ld-nav-open`
+  below 48rem, `--tabbar` docks the nav at the bottom. The header
+  always spans the full width above the nav.
+- **Page layouts** `.ld-page` (`--narrow`/`--wide`/`--full`, `__header`,
+  `__eyebrow`, `__title`, `__subtitle`, `__actions`), `.ld-grid`,
+  `.ld-split`, `.ld-aside-layout`, `.ld-center` — structure only
+  (`components/page.css`, shared by every theme); the page
+  title uses the display face.
+- **Stepper** `.ld-stepper` (+ `__step`, `__node`, `__label`) — milestone
+  rail from the Retail Dashboard "Active Delivery" box: glowing violet fill on
+  a blend track, 2rem nodes. `__step--complete` is a solid violet node with a
+  white icon and an on-surface label; `--current` a white node with a 2px
+  violet border, violet icon, raised shadow, and violet label; `--upcoming` a
+  sunken node with faint icon and label. The rail is per-step
+  (`::before` track, `::after` fill), so the fill follows the modifiers and
+  `aria-current="step"` marks the active node.
 - **Muted text** `.ld-muted` — faint secondary/empty-state text;
   `color: var(--ld-faint)`, italic — a friendly, soft touch consistent with
   the theme's airy, optimistic voice.
 - **Pre / log block** `.ld-pre` — command/log `<pre>`; sunken background,
   `--ld-outline` hairline (not `--ld-border`, which is the glass-only token
   and would be invisible on this opaque surface), radius, small mono,
-  horizontal scroll.
+  horizontal scroll. `.ld-pre--log` bounds it (`--ld-log-max-height`,
+  420px), scrolls both ways, and wraps long lines — flat, no scanlines.
+- **Copy control** `.ld-pre-copy` — an `.ld-icon-btn` pinned top-right in
+  a `.ld-pre-wrap`; fades in on hover/focus-within, always shown on touch
+  (`hover: none`). `data-ld-copy="copied"` swaps the copy glyph for a
+  success-tinted check; `"failed"` tints it danger. Status goes to a
+  visually hidden `aria-live` `.ld-pre-copy-status`.
 
 ## Deviations from the Stitch source
 

package/summer-cloud/index.css

@@ -1,9 +1,16 @@
 /* summer-cloud — full theme entry point */
 @import "./tokens.css";
 @import "./base.css";
+@import "./components/layout.css";
+@import "./components/shell.css";
+@import "./components/page.css";
 @import "./components/card.css";
+@import "./components/status-card.css";
 @import "./components/link.css";
 @import "./components/button.css";
+@import "./components/button-hold.css";
+@import "./components/button-group.css";
+@import "./components/icon-button.css";
 @import "./components/form.css";
 @import "./components/badge.css";
 @import "./components/alert.css";
@@ -11,5 +18,6 @@
 @import "./components/tabs.css";
 @import "./components/table.css";
 @import "./components/progress.css";
+@import "./components/stepper.css";
 @import "./components/muted.css";
 @import "./components/pre.css";

package/summer-cloud/tokens.css

@@ -76,6 +76,12 @@
   --ld-blur: 12px;
   --ld-blur-high: 20px; /* (extra) */
   --ld-transition: 0.3s;
+  --ld-hold-duration: 350ms; /* (extra) hold-to-confirm commitment window */
+  /* (extra) sliding indicator — tabs underline, button-group pill. The edge
+   * nearer the target leads; the far edge trails on a soft, bouncy spring that overshoots
+   * inward, so the indicator stretches across the gap and snaps back to shape. */
+  --ld-slide-lead: 0.26s cubic-bezier(0.2, 0.9, 0.3, 1);
+  --ld-slide-trail: 0.65s linear(0, 0.092, 0.301, 0.545, 0.767, 0.939, 1.052, 1.11, 1.126, 1.114, 1.088, 1.057, 1.029, 1.008, 0.993, 0.986, 0.984, 0.986, 0.989, 0.993, 0.996, 0.999, 1.001, 1.002, 1);
   --ld-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* (extra) */
 
   /* elevation (extra) — tinted with the primary, never grey */