zeus-css 1.0.0

package/scss/foundation/views/components/_avatar.scss

@@ -0,0 +1,84 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Avatar                                          ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the avatar component.  ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🙂 Avatar Component                                          ║
+// ║                                                              ║
+// ║  Fixed-size circular image or initials. Deliberately NOT     ║
+// ║  fluid (clamp-based) like the rest of the token system —      ║
+// ║  avatars anchor to a person/entity's identity and should stay ║
+// ║  visually stable across breakpoints, same reasoning as every  ║
+// ║  other design system's avatar scale.                          ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <img class="z-avatar z-avatar--md" src="…" alt="Jane Doe" /> ║
+// ║  <div class="z-avatar z-avatar--md">JD</div>                 ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  $_avatar-sizes: (
+    "xs": 1.5rem,
+    "sm": 2rem,
+    "md": 2.5rem,
+    "lg": 3.5rem,
+    "xl": 5rem,
+  );
+
+  .z-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    @include border-radius("rounded");
+    overflow: hidden;
+    background: var(--color-surface-subtle);
+    color: var(--color-text-muted);
+    @include text("label-bold");
+    object-fit: cover;
+    user-select: none;
+
+    @each $name, $size in $_avatar-sizes {
+      &--#{$name} {
+        width: $size;
+        height: $size;
+      }
+    }
+
+    // ── Status dot — e.g. online/offline indicator ──────────────
+    // Wrap the image/initials + dot in a positioned .z-avatar-group
+    // item, or use directly on a position:relative parent.
+    &__status {
+      position: absolute;
+      inset-block-end: 0;
+      inset-inline-end: 0;
+      width: 25%;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      border: var(--border-line-sm) solid var(--color-surface);
+      background: var(--color-border-strong);
+
+      &--online { background: var(--base-system-success); }
+      &--busy   { background: var(--base-system-error); }
+      &--away   { background: var(--base-system-warning); }
+    }
+  }
+
+  // ── Group — overlapping stack of avatars ──────────────────────
+  .z-avatar-group {
+    display: flex;
+
+    .z-avatar {
+      border: var(--border-line-sm) solid var(--color-surface);
+      margin-inline-start: -0.6em;
+
+      &:first-child {
+        margin-inline-start: 0;
+      }
+    }
+  }
+}

package/scss/foundation/views/components/_badge.scss

@@ -0,0 +1,100 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Badge                                           ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the badge component.   ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+@use "../../core/design/colors/color-derivation" as derive;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🏷️ Badge Component                                          ║
+// ║                                                              ║
+// ║  A small status/count pill. Soft-tint style by design: text  ║
+// ║  is always darkened via color-mix() toward black regardless  ║
+// ║  of how light the base hue is, so every variant clears WCAG  ║
+// ║  AA on its own tinted background without hand-picking a      ║
+// ║  passing shade per color (the trap that caught .btn-primary  ║
+// ║  originally — see the audit report P1-3).                    ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <span class="z-badge z-badge--success">Active</span>        ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  // Private: background/text/border for one variant from a single CSS
+  // custom property. Mixed toward `transparent`, not `--color-surface`:
+  // surface has ~0 chroma but a *defined* (not "none") hue, and mixing a
+  // vivid color into a heavily-weighted near-zero-chroma-but-hued color
+  // does a real circular hue interpolation that can land far from the
+  // intended hue (verified live — every variant rendered as the same
+  // pinkish tint before this fix). Mixing toward transparent instead
+  // preserves the source hue exactly; the alpha shows the tint through
+  // whatever's actually behind the badge.
+  //
+  // Text is mixed 55% toward black so it stays dark (high contrast) even
+  // for light base hues like accent/secondary — verified via OKLab->sRGB:
+  // the lightest hue (accent, L 71.8%) still clears 7.3:1 against its own
+  // 12%-tint background at this ratio.
+  @mixin _badge-variant($css-var) {
+    background: color-mix(in oklch, var(#{$css-var}) 12%, transparent);
+    color: color-mix(in oklch, var(#{$css-var}) 55%, black);
+    border-color: color-mix(in oklch, var(#{$css-var}) 30%, transparent);
+  }
+
+  .z-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3xs);
+    @include padding("3xs", "y");
+    @include padding("sm", "x");
+    @include border-radius("rounded");
+    @include text("caption-bold");
+    line-height: 1.4;
+    white-space: nowrap;
+    border: var(--border-line-xs) solid transparent;
+    background: var(--color-surface-subtle);
+    color: var(--color-text-muted);
+
+    &--primary   { @include _badge-variant(--color-primary); }
+    &--secondary { @include _badge-variant(--color-secondary); }
+    &--accent    { @include _badge-variant(--color-accent); }
+    &--success   { @include _badge-variant(--base-system-success); }
+    &--warning   { @include _badge-variant(--base-system-warning); }
+    &--error     { @include _badge-variant(--base-system-error); }
+
+    // Private: full-strength fill for the --solid modifier. The foreground is
+    // NOT a fixed --color-text-inverse: it's derived per color, because the
+    // palette legitimately contains both dark colors that need light text
+    // (primary, accent, error) and light ones that need dark text (secondary,
+    // warning, success). Hardcoding white here shipped 2.20:1 on the brand
+    // secondary; derive-on-color() picks the readable side automatically and
+    // keeps following runtime overrides of the base color.
+    @mixin _badge-solid($css-var) {
+      background: var(#{$css-var});
+      border-color: var(#{$css-var});
+      color: #{derive.derive-on-color("var(#{$css-var})")};
+    }
+
+    // ── Solid modifier — max emphasis. Every variant clears WCAG AA
+    // (4.55–7.40:1, asserted by scripts/test-compile.mjs check 8) because
+    // the text color is derived from each fill rather than assumed white.
+    &--solid {
+      &.z-badge--primary   { @include _badge-solid(--color-primary); }
+      &.z-badge--secondary { @include _badge-solid(--color-secondary); }
+      &.z-badge--accent    { @include _badge-solid(--color-accent); }
+      &.z-badge--success   { @include _badge-solid(--base-system-success); }
+      &.z-badge--warning   { @include _badge-solid(--base-system-warning); }
+      &.z-badge--error     { @include _badge-solid(--base-system-error); }
+    }
+
+    // ── Dot — leading status indicator, e.g. <span class="z-badge__dot"></span>
+    &__dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: currentColor;
+      flex-shrink: 0;
+    }
+  }
+}

package/scss/foundation/views/components/_breadcrumb.scss

@@ -0,0 +1,70 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Breadcrumb                                      ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the breadcrumb.        ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+@use "../../core/design" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🧭 Breadcrumb Component                                     ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <nav class="z-breadcrumb" aria-label="Breadcrumb">           ║
+// ║    <ol>                                                      ║
+// ║      <li><a href="/">Home</a></li>                           ║
+// ║      <li><a href="/docs">Docs</a></li>                       ║
+// ║      <li aria-current="page">API</li>                        ║
+// ║    </ol>                                                     ║
+// ║  </nav>                                                      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-breadcrumb {
+    ol {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      @include text("body-sm");
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      color: var(--color-text-muted);
+
+      // Separator before every item except the first.
+      &:not(:first-child)::before {
+        content: "/";
+        margin-inline: var(--space-2xs);
+        color: var(--color-border-strong);
+      }
+
+      // Current page — the only item without an <a> inside.
+      &[aria-current="page"] {
+        color: var(--color-text);
+        font-weight: 600;
+      }
+    }
+
+    a {
+      color: var(--color-text-muted);
+      text-decoration: none;
+
+      &:hover {
+        color: var(--color-primary);
+        text-decoration: underline;
+      }
+
+      &:focus-visible {
+        outline: $focus-ring;
+        outline-offset: 2px;
+        border-radius: 2px;
+      }
+    }
+  }
+}

package/scss/foundation/views/components/_card.scss

@@ -0,0 +1,117 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Card                                            ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the card component.    ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../zeus.config" as config;
+@use "../../core/engine" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🃏 Card Component                                           ║
+// ║                                                              ║
+// ║  A self-contained content block with optional image,         ║
+// ║  header, body and footer sections.                           ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <article class="z-card">                                    ║
+// ║    <img class="z-card__media" src="…" alt="…" />             ║
+// ║    <div class="z-card__body">                                ║
+// ║      <h3 class="z-card__title">…</h3>                       ║
+// ║      <p class="z-card__text">…</p>                           ║
+// ║    </div>                                                    ║
+// ║    <footer class="z-card__footer">…</footer>                 ║
+// ║  </article>                                                  ║
+// ╚══════════════════════════════════════════════════════════════╝
+// NOTE: .surface (views/render/classes/_compounds.scss, renamed from
+// .zeus-card 25.07) is a separate, intentional single-class utility card for
+// quick composition with other utility classes — not a duplicate of this
+// BEM component. See its own header.
+
+@layer components {
+  .z-card {
+    display: flex;
+    flex-direction: column;
+    @include border-radius("md");
+    @include card-shadow();
+    background: var(--color-surface);
+    border: var(--border-line-xs) solid var(--color-border);
+    overflow: hidden;
+    transition: box-shadow 0.25s ease, transform 0.25s ease;
+
+    &:hover {
+      box-shadow: var(--shadow-lg);
+      transform: translateY(-2px);
+    }
+
+    // ── Media (image/video at top) ───────────────────────────
+    &__media {
+      width: 100%;
+      aspect-ratio: 16 / 9;
+      object-fit: cover;
+      display: block;
+    }
+
+    // ── Inner Container & Structural Content ────────────────
+    &__body {
+      @include padding("lg");
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-sm);
+    }
+
+    // ── Title ────────────────────────────────────────────────
+    &__title {
+      @include text("h5");
+      color: var(--color-text);
+      margin: 0;
+    }
+
+    // ── Card Description Copy ──────────────────────────────
+    &__text {
+      @include text("body-sm");
+      color: var(--color-text-muted);
+      margin: 0;
+    }
+
+    // ── Footer ───────────────────────────────────────────────
+    &__footer {
+      @include padding("md", "x");
+      @include padding("sm", "y");
+      border-top: var(--border-line-xs) solid var(--color-border);
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--space-sm);
+    }
+
+    // ── Modifiers ────────────────────────────────────────────
+    &--flat {
+      box-shadow: none;
+      &:hover {
+        box-shadow: none;
+        transform: none;
+      }
+    }
+
+    &--outlined {
+      box-shadow: none;
+      border: var(--border-line-md) solid var(--color-border-strong);
+      &:hover {
+        box-shadow: none;
+        transform: none;
+      }
+    }
+
+    &--horizontal {
+      flex-direction: row;
+
+      .z-card__media {
+        inline-size: 40%;
+        aspect-ratio: auto;
+        min-height: 100%;
+      }
+    }
+  }
+}

package/scss/foundation/views/components/_dropdown.scss

@@ -0,0 +1,123 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Dropdown                                        ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the dropdown component.║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+@use "../../core/design" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📋 Dropdown Component — Native Popover API                  ║
+// ║                                                              ║
+// ║  popover="auto" (the default): light-dismiss on outside      ║
+// ║  click/Escape, and opening this one closes any other "auto"  ║
+// ║  popover already open — exactly what a menu should do. Zero  ║
+// ║  JS for open/close/dismiss/focus-return.                     ║
+// ║                                                              ║
+// ║  Positioning: same anchor-positioning contract as .z-tooltip ║
+// ║  — pair trigger and menu with a shared, unique anchor-name.  ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <button class="z-btn" style="anchor-name:--menu1"           ║
+// ║          popovertarget="menu1">Options</button>               ║
+// ║  <div class="z-dropdown" id="menu1" popover                  ║
+// ║       style="position-anchor:--menu1">                       ║
+// ║    <ul class="z-dropdown__list" role="menu">                 ║
+// ║      <li role="none"><a class="z-dropdown__item" role="menuitem" href="#">Edit</a></li> ║
+// ║      <li role="none"><a class="z-dropdown__item z-dropdown__item--danger" role="menuitem" href="#">Delete</a></li> ║
+// ║    </ul>                                                     ║
+// ║  </div>                                                       ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-dropdown {
+    // Reset the UA [popover] box.
+    margin: 0;
+    border: var(--border-line-xs) solid var(--color-border);
+    padding: 0;
+    overflow: hidden;
+    color: inherit;
+
+    @include border-radius("md");
+    @include apply-shadow("dropdown");
+    background: var(--color-surface);
+    min-width: 180px;
+    max-width: 320px;
+
+    // Anchored below and toward the inline-end (right in LTR, left in
+    // RTL) of the trigger, with a small gap — falls back to opening
+    // upward when there's no room below.
+    position-anchor: none;
+    position-area: block-end inline-end;
+    position-try-fallbacks: flip-block;
+    margin-block-start: var(--space-3xs);
+
+    &__list {
+      list-style: none;
+      margin: 0;
+      @include padding("2xs", "y");
+    }
+
+    &__item {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      width: 100%;
+      @include padding("xs", "y");
+      @include padding("md", "x");
+      @include text("body-sm");
+      color: var(--color-text);
+      text-decoration: none;
+      background: none;
+      border: none;
+      cursor: pointer;
+
+      &:hover,
+      &:focus-visible {
+        background: var(--color-surface-subtle);
+      }
+
+      &:focus-visible {
+        outline: $focus-ring;
+        outline-offset: -2px;
+      }
+
+      &--danger {
+        color: var(--base-system-error);
+      }
+
+      &[aria-disabled="true"] {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    }
+
+    &__divider {
+      border: none;
+      border-top: var(--border-line-xs) solid var(--color-border);
+      @include margin("2xs", "y");
+    }
+
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+    transition: opacity 0.15s ease, transform 0.15s ease, overlay 0.15s allow-discrete, display 0.15s allow-discrete;
+
+    &:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      &:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.98);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      transform: none;
+    }
+  }
+}