zeus-css 1.0.0

package/scss/foundation/views/components/_form.scss

@@ -0,0 +1,209 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Form                                            ║
+// ║                                                               ║
+// ║  Core structural and visual styles for form controls.         ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../zeus.config" as config;
+@use "../../core/engine" as *;
+@use "../../core/design" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📝 Form Components                                          ║
+// ║                                                              ║
+// ║  Accessible, token-driven form controls: text input,         ║
+// ║  textarea, select, checkbox, and radio — built on the same    ║
+// ║  semantic color/spacing/typography tokens as every other      ║
+// ║  component. States: default, hover, :focus-visible, disabled, ║
+// ║  and an explicit invalid/error modifier.                     ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <div class="z-field">                                       ║
+// ║    <label class="z-label" for="email">Email</label>          ║
+// ║    <input class="z-input" id="email" type="email" />          ║
+// ║    <p class="z-field__helper">We'll never share it.</p>      ║
+// ║  </div>                                                      ║
+// ║                                                              ║
+// ║  <div class="z-field z-field--invalid">                       ║
+// ║    <label class="z-label" for="pw">Password</label>          ║
+// ║    <input class="z-input" id="pw" type="password" />          ║
+// ║    <p class="z-field__error">Must be at least 8 characters.</p>║
+// ║  </div>                                                      ║
+// ║                                                              ║
+// ║  <label class="z-checkbox">                                  ║
+// ║    <input type="checkbox" /> Remember me                     ║
+// ║  </label>                                                    ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+
+  // ── Shared control base — input / textarea / select ─────────
+  // Private: not emitted on its own, applied via @extend-free @include
+  // inside each concrete control below so every one stays a real,
+  // independent, overridable class (no forced specificity chains).
+  @mixin _z-control-base() {
+    display: block;
+    width: 100%;
+    @include padding("sm", "y");
+    @include padding("md", "x");
+    @include border-radius("sm");
+    @include text("body-sm");
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: var(--border-line-sm) solid var(--color-border);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    appearance: none;
+
+    &::placeholder {
+      color: var(--color-text-muted);
+    }
+
+    &:hover:not(:disabled, :focus-visible) {
+      border-color: var(--color-border-strong);
+    }
+
+    &:focus-visible {
+      // A fully transparent outline is invisible here (box-shadow is the
+      // real focus affordance) but browsers still paint outlines with a
+      // system color under forced-colors mode regardless of the author
+      // color — so keyboard focus stays visible even when box-shadow (which
+      // forced-colors strips entirely) disappears.
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
+    }
+
+    &:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+      background: var(--color-border);
+    }
+  }
+
+  // ── Field wrapper ─────────────────────────────────────────────
+  .z-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2xs);
+
+    &__helper {
+      @include text("caption");
+      color: var(--color-text-muted);
+      margin: 0;
+    }
+
+    &__error {
+      @include text("caption");
+      color: var(--base-system-error);
+      margin: 0;
+    }
+
+    // Invalid modifier — recolors whichever control lives inside.
+    &--invalid {
+      .z-input,
+      .z-textarea,
+      .z-select {
+        border-color: var(--base-system-error);
+
+        &:focus-visible {
+          border-color: var(--base-system-error);
+          box-shadow: 0 0 0 3px oklch(from var(--base-system-error) l c h / 0.15);
+        }
+      }
+    }
+  }
+
+  // ── Label ─────────────────────────────────────────────────────
+  .z-label {
+    @include text("label");
+    color: var(--color-text);
+
+    &--required::after {
+      content: " *";
+      color: var(--base-system-error);
+    }
+  }
+
+  // ── Text input ────────────────────────────────────────────────
+  .z-input {
+    @include _z-control-base();
+  }
+
+  // ── Textarea ──────────────────────────────────────────────────
+  .z-textarea {
+    @include _z-control-base();
+    min-height: 6em;
+    resize: vertical;
+  }
+
+  // ── Select ────────────────────────────────────────────────────
+  // appearance: none (from the shared base) removes the native arrow in
+  // every evergreen browser; a CSS-only chevron is drawn via background
+  // so no icon asset or JS is required.
+  .z-select {
+    @include _z-control-base();
+    padding-inline-end: var(--space-2xl);
+    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
+      linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
+    // Chevron sits at the inline-end edge. background-position has no logical
+    // (inline-end-relative) form yet, so LTR draws from the right and :dir(rtl)
+    // flips it to draw from the left — same visual position in both directions.
+    background-position: right 20px center, right 15px center;
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+
+    &:dir(rtl) {
+      background-position: left 20px center, left 15px center;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  // ── Checkbox & Radio ──────────────────────────────────────────
+  // Uses the native `accent-color` property to theme the control itself
+  // (fully accessible, no pseudo-element re-implementation needed) and
+  // only adds layout + label spacing around it.
+  .z-checkbox,
+  .z-radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    @include text("body-sm");
+    color: var(--color-text);
+    cursor: pointer;
+
+    input {
+      accent-color: var(--color-primary);
+      width: 1.15em;
+      height: 1.15em;
+      flex-shrink: 0;
+      cursor: inherit;
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.55;
+      }
+
+      &:focus-visible {
+        outline: $focus-ring;
+        outline-offset: 2px;
+      }
+    }
+
+    &:has(input:disabled) {
+      color: var(--color-text-muted);
+      cursor: not-allowed;
+    }
+  }
+
+  // ── Grouped checkboxes / radios ───────────────────────────────
+  .z-field-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+  }
+}

package/scss/foundation/views/components/_index.scss

@@ -0,0 +1,20 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Index                                           ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the index component.   ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@forward "./card";
+@forward "./modal";
+@forward "./form";
+@forward "./badge";
+@forward "./alert";
+@forward "./avatar";
+@forward "./table";
+@forward "./breadcrumb";
+@forward "./pagination";
+@forward "./tabs";
+@forward "./tooltip";
+@forward "./dropdown";
+@forward "./toast";
+@forward "./skeleton";

package/scss/foundation/views/components/_modal.scss

@@ -0,0 +1,138 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Modal                                           ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the modal component.   ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../zeus.config" as config;
+@use "../../core/engine" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🪟 Modal / Dialog Component                                 ║
+// ║                                                              ║
+// ║  Accessible overlay dialog with backdrop, header,            ║
+// ║  scrollable body and sticky footer.                          ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <dialog class="z-modal" open>                               ║
+// ║    <header class="z-modal__header">                          ║
+// ║      <h2 class="z-modal__title">…</h2>                      ║
+// ║      <button class="z-modal__close">×</button>              ║
+// ║    </header>                                                 ║
+// ║    <div class="z-modal__body">…</div>                        ║
+// ║    <footer class="z-modal__footer">…</footer>                ║
+// ║  </dialog>                                                   ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  // ── Backdrop ───────────────────────────────────────────────
+  // Two paths to the same look, for two ways of opening the modal:
+  // .z-modal-backdrop is a manual sibling element (any open/close approach).
+  // ::backdrop is painted automatically by the browser when a <dialog> is
+  // opened via .showModal() — style it too so that path needs no extra markup.
+  .z-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    z-index: var(--z-modal-backdrop);
+  }
+
+  .z-modal::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+  // ── Modal container ────────────────────────────────────────
+  .z-modal {
+    position: fixed;
+    inset: 0;
+    margin: auto;
+    width: min(90dvw, 560px);
+    max-height: 85dvh;
+    flex-direction: column;
+    @include border-radius("lg");
+    background: var(--color-surface);
+    box-shadow: var(--shadow-xl);
+    border: var(--border-line-xs) solid var(--color-border);
+    z-index: var(--z-modal);
+
+    // Reset native dialog styling — display only when open, hidden otherwise
+    &[open] {
+      display: flex;
+    }
+
+    &:not([open]) {
+      display: none;
+    }
+
+    // ── Header ───────────────────────────────────────────────
+    &__header {
+      @include padding("lg", "x");
+      @include padding("md", "y");
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: var(--border-line-xs) solid var(--color-border);
+      flex-shrink: 0;
+    }
+
+    // ── Title ────────────────────────────────────────────────
+    &__title {
+      @include text("h4");
+      color: var(--color-text);
+      margin: 0;
+    }
+
+    // ── Close button ─────────────────────────────────────────
+    &__close {
+      appearance: none;
+      border: none;
+      background: transparent;
+      @include text("h4");
+      color: var(--color-text-muted);
+      cursor: pointer;
+      padding: 0;
+      line-height: 1;
+
+      &:hover {
+        color: var(--color-text);
+      }
+    }
+
+    // ── Body (scrollable) ───────────────────────────────────
+    &__body {
+      @include padding("lg");
+      overflow-y: auto;
+      flex: 1 1 auto;
+      @include text("body");
+      color: var(--color-text);
+    }
+
+    // ── Footer ───────────────────────────────────────────────
+    &__footer {
+      @include padding("lg", "x");
+      @include padding("md", "y");
+      border-top: var(--border-line-xs) solid var(--color-border);
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--space-sm);
+      flex-shrink: 0;
+    }
+
+    // ── Size modifiers ───────────────────────────────────────
+    &--sm {
+      width: min(90dvw, 400px);
+    }
+
+    &--lg {
+      width: min(90dvw, 800px);
+    }
+
+    &--fullscreen {
+      width: 100dvw;
+      max-height: 100dvh;
+      border-radius: 0;
+    }
+  }
+}

package/scss/foundation/views/components/_pagination.scss

@@ -0,0 +1,82 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Pagination                                      ║
+// ║                                                               ║
+// ║  Core structural and visual styles for pagination.            ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+@use "../../core/design" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🔢 Pagination Component                                     ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <nav class="z-pagination" aria-label="Pagination">           ║
+// ║    <ul>                                                      ║
+// ║      <li><a class="z-pagination__link" href="#p1">1</a></li> ║
+// ║      <li><a class="z-pagination__link z-pagination__link--active"║
+// ║              href="#p2" aria-current="page">2</a></li>       ║
+// ║      <li><span class="z-pagination__ellipsis">…</span></li>  ║
+// ║    </ul>                                                     ║
+// ║  </nav>                                                      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-pagination {
+    ul {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3xs);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    &__link {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 2.25rem;
+      height: 2.25rem;
+      @include padding("2xs", "x");
+      @include border-radius("sm");
+      @include text("body-sm");
+      color: var(--color-text);
+      text-decoration: none;
+      border: var(--border-line-xs) solid transparent;
+      cursor: pointer;
+
+      &:hover:not(&--active, &--disabled) {
+        background: var(--color-surface-subtle);
+        border-color: var(--color-border);
+      }
+
+      &:focus-visible {
+        outline: $focus-ring;
+        outline-offset: 2px;
+      }
+
+      &--active {
+        background: var(--color-primary);
+        color: var(--color-text-inverse);
+        cursor: default;
+      }
+
+      &--disabled {
+        color: var(--color-text-muted);
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+
+    &__ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 2.25rem;
+      height: 2.25rem;
+      color: var(--color-text-muted);
+    }
+  }
+}

package/scss/foundation/views/components/_skeleton.scss

@@ -0,0 +1,69 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Skeleton                                        ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the skeleton component.║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  💀 Skeleton Component                                       ║
+// ║                                                              ║
+// ║  Pure CSS — no popover, no positioning, no JS. A loading      ║
+// ║  placeholder is static content in normal flow, so there's    ║
+// ║  nothing here that the Phase 2 popover decision applies to.  ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <div class="z-skeleton z-skeleton--text"></div>             ║
+// ║  <div class="z-skeleton z-skeleton--title"></div>            ║
+// ║  <div class="z-skeleton z-skeleton--avatar"></div>           ║
+// ║  <div class="z-skeleton z-skeleton--block" style="height:120px"></div> ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-skeleton {
+    display: block;
+    @include border-radius("sm");
+    background: linear-gradient(
+      90deg,
+      var(--color-surface-subtle) 25%,
+      var(--color-border) 50%,
+      var(--color-surface-subtle) 75%
+    );
+    background-size: 200% 100%;
+    animation: zeus-skeleton-shimmer 1.6s ease-in-out infinite;
+    // Every placeholder shape hides its stand-in content from assistive
+    // tech the same way — the region announcing "loading" (aria-busy on a
+    // shared ancestor) is the consumer's job, not this component's.
+    color: transparent;
+    user-select: none;
+
+    &--text {
+      height: 0.9em;
+      width: 100%;
+      @include margin("3xs", "y");
+    }
+
+    &--title {
+      height: 1.4em;
+      width: 60%;
+      @include margin("2xs", "y");
+    }
+
+    &--avatar {
+      width: var(--size-icon-lg);
+      height: var(--size-icon-lg);
+      border-radius: 50%;
+    }
+
+    &--block {
+      width: 100%;
+      height: 100%;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      background: var(--color-surface-subtle);
+    }
+  }
+}

package/scss/foundation/views/components/_table.scss

@@ -0,0 +1,94 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Table                                           ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the table component.   ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📊 Table Component                                          ║
+// ║                                                              ║
+// ║  Pure CSS, zero JS dependency. .z-table-wrap provides the     ║
+// ║  horizontal-scroll container — always wrap wide tables in it  ║
+// ║  rather than letting them overflow the page.                 ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <div class="z-table-wrap">                                  ║
+// ║    <table class="z-table z-table--striped">                  ║
+// ║      <thead><tr><th>Name</th><th>Status</th></tr></thead>    ║
+// ║      <tbody><tr><td>Zeus</td><td>Active</td></tr></tbody>    ║
+// ║    </table>                                                  ║
+// ║  </div>                                                      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-table-wrap {
+    overflow-x: auto;
+    @include border-radius("sm");
+    border: var(--border-line-xs) solid var(--color-border);
+  }
+
+  .z-table {
+    width: 100%;
+    border-collapse: collapse;
+    @include text("body-sm");
+    color: var(--color-text);
+
+    caption {
+      @include padding("sm");
+      @include text("caption");
+      color: var(--color-text-muted);
+      text-align: start;
+      caption-side: bottom;
+    }
+
+    th,
+    td {
+      @include padding("sm", "y");
+      @include padding("md", "x");
+      text-align: start;
+      vertical-align: middle;
+      border-bottom: var(--border-line-xs) solid var(--color-border);
+    }
+
+    th {
+      @include text("caption-bold");
+      color: var(--color-text-muted);
+      background: var(--color-surface-subtle);
+      white-space: nowrap;
+    }
+
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+
+    tbody tr:hover td {
+      background: var(--color-surface-subtle);
+    }
+
+    // ── Modifiers ────────────────────────────────────────────
+    &--striped tbody tr:nth-child(even) td {
+      background: var(--color-surface-subtle);
+    }
+
+    &--bordered {
+      th,
+      td {
+        border-inline-end: var(--border-line-xs) solid var(--color-border);
+
+        &:last-child {
+          border-inline-end: none;
+        }
+      }
+    }
+
+    &--compact {
+      th,
+      td {
+        @include padding("2xs", "y");
+        @include padding("sm", "x");
+      }
+    }
+  }
+}