@lepid-labs/styles 1.0.0 → 1.0.1

package/neon-butterfly/index.css

@@ -2,8 +2,11 @@
 @import "./tokens.css";
 @import "./base.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/form.css";
 @import "./components/badge.css";
 @import "./components/alert.css";
@@ -11,5 +14,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/neon-butterfly/tokens.css

@@ -62,6 +62,12 @@
   --ld-radius-lg: 0.5rem; /* one radius everywhere is the look */
   --ld-blur: 12px;
   --ld-transition: 0.3s;
+  --ld-hold-duration: 250ms; /* (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 spring that overshoots
+   * inward, so the light stretches across the gap and snaps back to shape. */
+  --ld-slide-lead: 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
+  --ld-slide-trail: 0.55s linear(0, 0.066, 0.22, 0.407, 0.591, 0.75, 0.876, 0.966, 1.024, 1.055, 1.067, 1.066, 1.057, 1.045, 1.032, 1.021, 1.011, 1.004, 1, 0.997, 0.996, 0.995, 0.996, 0.997, 1);
 
   /* spacing */
   --ld-space-1: 0.25rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lepid-labs/styles",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Shared design-system styles: tokens, base styles, and component classes per theme.",
   "license": "MIT",
   "repository": {
@@ -19,22 +19,65 @@
     "summer-cloud",
     "luminous-precision",
     "all.css",
-    "manifest.json"
+    "manifest.json",
+    "css.d.ts"
   ],
   "exports": {
-    "./all": "./all.css",
+    "./all": {
+      "types": "./css.d.ts",
+      "default": "./all.css"
+    },
     "./manifest": "./manifest.json",
-    "./neon-butterfly": "./neon-butterfly/index.css",
-    "./neon-butterfly/tokens": "./neon-butterfly/tokens.css",
-    "./neon-butterfly/base": "./neon-butterfly/base.css",
-    "./neon-butterfly/components/*": "./neon-butterfly/components/*.css",
-    "./summer-cloud": "./summer-cloud/index.css",
-    "./summer-cloud/tokens": "./summer-cloud/tokens.css",
-    "./summer-cloud/base": "./summer-cloud/base.css",
-    "./summer-cloud/components/*": "./summer-cloud/components/*.css",
-    "./luminous-precision": "./luminous-precision/index.css",
-    "./luminous-precision/tokens": "./luminous-precision/tokens.css",
-    "./luminous-precision/base": "./luminous-precision/base.css",
-    "./luminous-precision/components/*": "./luminous-precision/components/*.css"
+    "./neon-butterfly": {
+      "types": "./css.d.ts",
+      "default": "./neon-butterfly/index.css"
+    },
+    "./neon-butterfly/tokens": {
+      "types": "./css.d.ts",
+      "default": "./neon-butterfly/tokens.css"
+    },
+    "./neon-butterfly/base": {
+      "types": "./css.d.ts",
+      "default": "./neon-butterfly/base.css"
+    },
+    "./neon-butterfly/components/*": {
+      "types": "./css.d.ts",
+      "default": "./neon-butterfly/components/*.css"
+    },
+    "./summer-cloud": {
+      "types": "./css.d.ts",
+      "default": "./summer-cloud/index.css"
+    },
+    "./summer-cloud/tokens": {
+      "types": "./css.d.ts",
+      "default": "./summer-cloud/tokens.css"
+    },
+    "./summer-cloud/base": {
+      "types": "./css.d.ts",
+      "default": "./summer-cloud/base.css"
+    },
+    "./summer-cloud/components/*": {
+      "types": "./css.d.ts",
+      "default": "./summer-cloud/components/*.css"
+    },
+    "./luminous-precision": {
+      "types": "./css.d.ts",
+      "default": "./luminous-precision/index.css"
+    },
+    "./luminous-precision/tokens": {
+      "types": "./css.d.ts",
+      "default": "./luminous-precision/tokens.css"
+    },
+    "./luminous-precision/base": {
+      "types": "./css.d.ts",
+      "default": "./luminous-precision/base.css"
+    },
+    "./luminous-precision/components/*": {
+      "types": "./css.d.ts",
+      "default": "./luminous-precision/components/*.css"
+    }
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0"
   }
 }

package/summer-cloud/components/badge.css

@@ -21,6 +21,32 @@
 :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--warning { background: var(--ld-warning);  border-color: transparent; color: #241a00; }
 :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--danger  { background: var(--ld-danger);   border-color: transparent; color: #4a0000; }
 
+/* Compact size — dashboard pills inside .ld-status-card__meta and row trails. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--sm {
+  padding: 0.125rem 0.375rem;
+  gap: 2px;
+  font-size: 9px;
+  letter-spacing: 0.06em;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge[href] { text-decoration: none; }
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge[href]:hover { filter: brightness(1.1); }
+
+/* Pulse — the one solid, glowing call to action (work is waiting on you). */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--pulse {
+  background: var(--ld-warning);
+  border-color: transparent;
+  color: #241a00;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--ld-warning) 60%, transparent);
+  animation: ld-sc-badge-pulse 2s ease-in-out infinite;
+}
+@keyframes ld-sc-badge-pulse {
+  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--ld-warning) 50%, transparent); }
+  50%      { box-shadow: 0 0 16px color-mix(in srgb, var(--ld-warning) 90%, transparent); }
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-badge--pulse { animation: none; }
+}
+
 /* Chip — the filter variant: outlined until selected. */
 :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-chip {
   display: inline-flex;

package/summer-cloud/components/button-group.css

@@ -0,0 +1,131 @@
+/* summer-cloud — button group: a long glass pill; segments are pills inside
+ * it and the pressed one floats up as a white chip with violet text. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group {
+  display: inline-flex;
+  align-items: stretch;
+  gap: var(--ld-space-1);
+  max-width: 100%;
+  padding: var(--ld-space-1);
+  background: rgba(255, 255, 255, 0.4);
+  border: 1px solid var(--ld-border);
+  border-radius: var(--ld-radius-pill);
+}
+/* --block: fill the row, equal-width segments */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group--block {
+  display: flex;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group--block > .ld-btn {
+  flex: 1 1 0;
+}
+
+/* segments: the pill is the chrome, so the button drops its own */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn {
+  padding-block: var(--ld-space-2);
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ld-faint);
+  font-weight: var(--ld-font-weight-medium);
+  white-space: nowrap;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--sm {
+  padding-block: 0.25rem;
+}
+/* variants tint the label only — a solid fill would break the pill */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--primary {
+  color: var(--ld-primary);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--accent {
+  color: var(--ld-accent-deep);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--danger {
+  color: var(--ld-danger-deep);
+}
+/* no hover scale inside the pill — neighbours would overlap; the press stays */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn:focus-visible {
+  background: var(--ld-sky-tint);
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--ld-primary);
+  transform: none;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--accent:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--accent:focus-visible {
+  color: var(--ld-accent-deep);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--danger:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--danger:focus-visible {
+  color: var(--ld-danger-deep);
+}
+
+/* pressed segment (toggle / segmented use): the floating white chip */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn--active,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn[aria-pressed="true"] {
+  background: var(--ld-surface);
+  color: var(--ld-primary);
+  font-weight: var(--ld-font-weight-bold);
+  box-shadow: 0 2px 8px var(--ld-primary-border);
+}
+/* after the pressed rule so the focus ring survives on the pressed segment */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn:focus-visible {
+  box-shadow: 0 0 0 4px var(--ld-accent-glow);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn:active {
+  transform: scale(0.97);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group > .ld-btn:disabled {
+  background: transparent;
+  color: var(--ld-faint);
+  transform: none;
+}
+
+/* Sliding pill: with exactly one pressed segment, its chrome moves to one
+ * chip on the track, pinned to the segment by anchor positioning, so a
+ * change of selection travels instead of blinking. Its inline edges transition
+ * separately — with data-ld-dir ("forward" | "back", set by ButtonGroup) the
+ * edge nearer the target leads and the far edge trails, stretching the pill
+ * across the gap; without it the pill just slides. Several pressed segments
+ * (multi-toggle), or no anchor positioning, keep the per-segment chrome above. */
+@supports (anchor-name: --ld-a) and (anchor-scope: --ld-a) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group {
+    position: relative;
+    isolation: isolate;
+    anchor-scope: --ld-btn-group-active;
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group:not(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) ~ :is(.ld-btn--active, .ld-btn[aria-pressed="true"]))) > :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) {
+    anchor-name: --ld-btn-group-active;
+    background: transparent;
+    box-shadow: none;
+  }
+  /* same weight as the rule above, so the focus ring survives on the pressed segment */
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group:not(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) ~ :is(.ld-btn--active, .ld-btn[aria-pressed="true"]))) > :is(.ld-btn--active, .ld-btn[aria-pressed="true"]):focus-visible {
+    box-shadow: 0 0 0 4px var(--ld-accent-glow);
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group:where(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"])):not(:has(> :is(.ld-btn--active, .ld-btn[aria-pressed="true"]) ~ :is(.ld-btn--active, .ld-btn[aria-pressed="true"]))))::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    position-anchor: --ld-btn-group-active;
+    inset-block: anchor(top) anchor(bottom);
+    inset-inline: anchor(start) anchor(end);
+    background: var(--ld-surface);
+    border-radius: var(--ld-radius-pill);
+    box-shadow: 0 2px 8px var(--ld-primary-border);
+    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-btn-group[data-ld-dir="forward"]::before {
+    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-btn-group[data-ld-dir="back"]::before {
+    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-btn-group::before,
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn-group[data-ld-dir]::before {
+    transition: none;
+  }
+}

package/summer-cloud/components/button-hold.css

@@ -0,0 +1,132 @@
+/* summer-cloud — hold-to-confirm button: violet ring on a bouncy glass pill
+ *
+ * Contract: .ld-btn--hold composes with .ld-btn and any variant. The consumer
+ * writes one number, --ld-hold in [0, 1]; the ring fill is pure CSS.
+ * data-ld-hold="holding" | "fired" carries the behavioural state.
+ */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold {
+  --ld-hold: 0;
+  --ld-hold-color: var(--ld-on-surface); /* neutral on its own */
+  position: relative;
+  gap: var(--ld-space-3);
+  padding: var(--ld-space-2) var(--ld-space-3) var(--ld-space-2) var(--ld-space-2);
+  text-align: left;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none; /* a touch hold must not turn into a scroll */
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold.ld-btn--primary {
+  --ld-hold-color: var(--ld-primary);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold.ld-btn--accent {
+  --ld-hold-color: var(--ld-accent);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold.ld-btn--danger {
+  --ld-hold-color: var(--ld-primary);
+}
+
+/* On the hold composition the ring and hint carry the danger state, so the
+ * pill stays glass: a violet ring on the solid red CTA would fight it, and the
+ * ring track would vanish. Deep red text keeps the intent legible. */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold.ld-btn--danger,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold.ld-btn--danger:hover,
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold.ld-btn--danger:focus-visible {
+  background: rgba(255, 255, 255, 0.5);
+  border-color: var(--ld-outline);
+  color: var(--ld-danger-deep);
+  box-shadow: none;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold.ld-btn--danger:focus-visible {
+  box-shadow: 0 0 0 4px var(--ld-accent-glow);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold:active {
+  transform: none; /* the ring is the press feedback */
+}
+
+/* ring: the icon well, wrapped by a conic fill masked to a 3px stroke */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn__ring {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  background: var(--ld-surface-sunken);
+  color: var(--ld-hold-color);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn__ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(var(--ld-hold-color) calc(var(--ld-hold) * 360deg), var(--ld-outline) 0);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
+  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn__ring > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  line-height: 1.2;
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn__label {
+  font-weight: var(--ld-font-weight-bold);
+}
+/* the hint and meter restate the ring, so state is never color-only */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn__hint {
+  font-size: 11px;
+  font-weight: var(--ld-font-weight);
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--ld-faint);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn__meter {
+  margin-left: auto;
+  min-width: 3.5ch;
+  text-align: right;
+  font-family: var(--ld-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--ld-faint);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold[data-ld-hold="holding"] .ld-btn__meter {
+  color: var(--ld-hold-color);
+}
+
+/* fired: the post-commit flash */
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold[data-ld-hold="fired"] {
+  animation: ld-sc-hold-fired 0.5s var(--ld-ease-bounce);
+}
+:where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold[data-ld-hold="fired"] .ld-btn__ring {
+  box-shadow: 0 0 16px color-mix(in srgb, var(--ld-hold-color) 55%, transparent);
+}
+@keyframes ld-sc-hold-fired {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.06);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* reduced motion: the ring still fills (it is the state, not decoration);
+ * only the flash and glow go */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold[data-ld-hold="fired"] {
+    animation: none;
+    box-shadow: none;
+  }
+  :where([data-ld-style="summer-cloud"], [data-ld-style="summer-cloud"] *).ld-btn--hold[data-ld-hold="fired"] .ld-btn__ring {
+    box-shadow: 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; }
+}