zeus-css 1.0.0

package/scss/foundation/views/components/_tabs.scss

@@ -0,0 +1,96 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Tabs                                            ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the tabs component.    ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+@use "../../core/design" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📑 Tabs Component                                           ║
+// ║                                                              ║
+// ║  No popover involved — tabs are inline content, not floating ║
+// ║  UI, so there's nothing to anchor-position. Styles read the  ║
+// ║  same two ARIA/HTML states the browser already gives you     ║
+// ║  (aria-selected, hidden) — same "native attribute drives the ║
+// ║  look" contract as .z-modal's [open]. Switching which tab is ║
+// ║  selected is the consumer's job (a few lines of vanilla JS   ║
+// ║  or your framework's state) — Zeus CSS ships zero JS.        ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <div class="z-tabs">                                        ║
+// ║    <div class="z-tabs__list" role="tablist">                 ║
+// ║      <button class="z-tabs__tab" role="tab" id="t1"          ║
+// ║              aria-selected="true" aria-controls="p1">One</button> ║
+// ║      <button class="z-tabs__tab" role="tab" id="t2"          ║
+// ║              aria-selected="false" aria-controls="p2">Two</button> ║
+// ║    </div>                                                    ║
+// ║    <div class="z-tabs__panel" role="tabpanel" id="p1"        ║
+// ║         aria-labelledby="t1">…</div>                         ║
+// ║    <div class="z-tabs__panel" role="tabpanel" id="p2"        ║
+// ║         aria-labelledby="t2" hidden>…</div>                  ║
+// ║  </div>                                                      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-tabs {
+    &__list {
+      display: flex;
+      gap: var(--space-xs);
+      border-bottom: var(--border-line-xs) solid var(--color-border);
+      overflow-x: auto;
+      // Hide the scrollbar on overflow without hiding the ability to
+      // scroll — a horizontally-scrolling tablist on narrow viewports
+      // should still feel like tabs, not a visible scroll pane.
+      scrollbar-width: none;
+      &::-webkit-scrollbar { display: none; }
+    }
+
+    &__tab {
+      appearance: none;
+      background: none;
+      border: none;
+      cursor: pointer;
+      @include padding("sm", "y");
+      @include padding("md", "x");
+      @include text("body-sm");
+      font-weight: 600;
+      color: var(--color-text-muted);
+      border-bottom: var(--border-line-sm) solid transparent;
+      // Pull the tab's own bottom border over the list's hairline so the
+      // active indicator reads as one continuous edge, not two stacked lines.
+      margin-bottom: calc(var(--border-line-xs) * -1);
+      white-space: nowrap;
+      transition: color 0.15s ease, border-color 0.15s ease;
+
+      &:hover {
+        color: var(--color-text);
+      }
+
+      &:focus-visible {
+        outline: $focus-ring;
+        outline-offset: -2px;
+        border-radius: 2px;
+      }
+
+      &[aria-selected="true"] {
+        color: var(--color-primary);
+        border-bottom-color: var(--color-primary);
+      }
+
+      &[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &__panel {
+      @include padding("lg", "y");
+
+      &[hidden] {
+        display: none;
+      }
+    }
+  }
+}

package/scss/foundation/views/components/_toast.scss

@@ -0,0 +1,139 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Toast                                           ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the toast component.   ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+@use "../../core/design" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🔔 Toast Component — Native Popover API                     ║
+// ║                                                              ║
+// ║  The stack itself is popover="manual": it needs to render in ║
+// ║  the top layer (above modals, dropdowns, everything — no     ║
+// ║  z-index arithmetic required) but must NOT light-dismiss on  ║
+// ║  outside click/Escape the way "auto" would — a toast auto-   ║
+// ║  disappears on its own timer, not because the user clicked   ║
+// ║  elsewhere. Call region.showPopover() once; individual       ║
+// ║  toasts are plain children you append/remove — their auto-   ║
+// ║  dismiss timer is the one piece of JS this component still   ║
+// ║  needs (CSS alone can't schedule "remove me in 4s").         ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <div class="z-toast-region" id="toasts" popover="manual">   ║
+// ║    <div class="z-toast z-toast--success" role="status">      ║
+// ║      <p class="z-toast__message">Saved.</p>                  ║
+// ║      <button class="z-toast__close" aria-label="Dismiss">×</button> ║
+// ║    </div>                                                    ║
+// ║  </div>                                                       ║
+// ║  <script>toasts.showPopover();</script>                      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  // Private: background/border/icon-color for one variant from a single
+  // base color token — same soft-tint approach as .z-badge, so every
+  // variant clears WCAG AA without hand-picking a passing shade per color.
+  @mixin _toast-variant($css-var) {
+    border-inline-start-color: var(#{$css-var});
+
+    .z-toast__icon {
+      color: var(#{$css-var});
+    }
+  }
+
+  .z-toast-region {
+    // Reset the UA [popover] box — this is a plain flow container for its
+    // toast children, not a bordered/inset panel like a menu or dialog.
+    position: fixed;
+    inset: auto var(--space-lg) var(--space-lg) auto;
+    margin: 0;
+    border: none;
+    padding: 0;
+    overflow: visible;
+    background: none;
+    color: inherit;
+    max-height: none;
+    max-width: min(90dvw, 380px);
+
+    // The layout only applies once actually shown — setting `display`
+    // unconditionally here would override the UA's own
+    // `[popover]:not(:popover-open) { display: none; }` rule and leave
+    // the region permanently visible regardless of showPopover() state.
+    &:popover-open {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-sm);
+    }
+  }
+
+  .z-toast {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-sm);
+    @include padding("md");
+    @include border-radius("md");
+    @include apply-shadow("dropdown");
+    background: var(--color-surface);
+    border: var(--border-line-xs) solid var(--color-border);
+    border-inline-start: 3px solid var(--color-border-strong);
+
+    @include slide-in(right, 0.25s);
+
+    &--success { @include _toast-variant(--base-system-success); }
+    &--warning { @include _toast-variant(--base-system-warning); }
+    &--danger  { @include _toast-variant(--base-system-error); }
+    &--info    { @include _toast-variant(--color-primary); }
+
+    &__icon {
+      flex-shrink: 0;
+      width: 1.25em;
+      height: 1.25em;
+      color: var(--color-text-muted);
+    }
+
+    &__body {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    &__title {
+      @include text("body-sm-bold");
+      color: var(--color-text);
+      margin: 0 0 var(--space-4xs);
+    }
+
+    &__message {
+      @include text("body-sm");
+      color: var(--color-text-muted);
+      margin: 0;
+    }
+
+    &__close {
+      flex-shrink: 0;
+      appearance: none;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      padding: 0;
+      @include text("body");
+      color: var(--color-text-muted);
+      line-height: 1;
+
+      &:hover {
+        color: var(--color-text);
+      }
+
+      &:focus-visible {
+        outline: $focus-ring;
+        outline-offset: 2px;
+        border-radius: 2px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      opacity: 1;
+    }
+  }
+}

package/scss/foundation/views/components/_tooltip.scss

@@ -0,0 +1,100 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Tooltip                                         ║
+// ║                                                               ║
+// ║  Core structural and visual styles for the tooltip component. ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../core/engine" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  💬 Tooltip Component — Native Popover API                   ║
+// ║                                                              ║
+// ║  popover="hint" (not "auto"): showing a hint never closes an ║
+// ║  already-open menu/dialog popover the way "auto" would — the ║
+// ║  correct type for a description that can appear alongside    ║
+// ║  other floating UI. popovertarget alone gives you click-to-  ║
+// ║  toggle with zero JS — the browser owns dismiss/focus return ║
+// ║  once wired, same "native does the work" contract as         ║
+// ║  .z-modal's <dialog>/.showModal(). A hover/focus-triggered    ║
+// ║  tooltip (the usual expectation) needs a few lines of your    ║
+// ║  own JS calling .showPopover()/.hidePopover() on              ║
+// ║  mouseenter/mouseleave/focus/blur — that trigger logic isn't  ║
+// ║  something popovertarget provides on its own.                 ║
+// ║                                                              ║
+// ║  Positioning uses CSS anchor positioning (position-anchor +  ║
+// ║  position-area) — pair trigger and tooltip with a shared,    ║
+// ║  unique anchor-name per instance. Browsers without anchor    ║
+// ║  positioning support just fall back to the UA's default      ║
+// ║  top-layer placement — still a fully functional, just        ║
+// ║  unanchored, tooltip — same progressive-enhancement shape as ║
+// ║  the modal's ::backdrop + .z-modal-backdrop dual path.       ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <button style="anchor-name:--tip1" popovertarget="tip1">    ║
+// ║    Info                                                      ║
+// ║  </button>                                                   ║
+// ║  <div class="z-tooltip" id="tip1" popover="hint" role="tooltip" ║
+// ║       style="position-anchor:--tip1">                        ║
+// ║    Helpful, short explanatory text.                          ║
+// ║  </div>                                                       ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-tooltip {
+    // Reset the UA [popover] box (border/inset/margin/padding/colors) —
+    // color/background are set for real a few lines down, not reset here.
+    margin: 0;
+    border: none;
+    padding: 0;
+    overflow: visible;
+
+    @include padding("2xs", "y");
+    @include padding("sm", "x");
+    @include border-radius("sm");
+    @include text("caption");
+    @include apply-shadow("sm");
+    background: var(--color-text);
+    color: var(--color-text-inverse);
+    max-width: 240px;
+    width: max-content;
+
+    // No anchor by default — the consumer pairs trigger and tooltip by
+    // setting `position-anchor: --your-name` inline on this element (see
+    // usage above); that inline declaration outranks this class rule.
+    // Anchored above the trigger, with breathing room and flip fallbacks
+    // for when there's no room above.
+    position-anchor: none;
+    position-area: top;
+    position-try-fallbacks: flip-block, flip-inline;
+    margin-block-end: var(--space-2xs);
+
+    // No @supports guard needed: browsers without anchor positioning simply
+    // ignore the unrecognized position-anchor/position-area/position-try-
+    // fallbacks values (standard CSS forward-compatible parsing) and fall
+    // through to the UA's default top-layer placement — still a fully
+    // functional popover, just centered instead of anchored to the trigger.
+    &:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    // Entrance/exit transition on the top layer — requires
+    // transition-behavior: allow-discrete to animate across the
+    // display: none <-> block flip that [popover] does internally.
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+    transition: opacity 0.12s ease, transform 0.12s ease, overlay 0.12s allow-discrete, display 0.12s allow-discrete;
+
+    @starting-style {
+      &:popover-open {
+        opacity: 0;
+        transform: translateY(4px) scale(0.98);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+      transform: none;
+    }
+  }
+}

package/scss/foundation/views/patterns/_hero.scss

@@ -0,0 +1,121 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Hero                                            ║
+// ║                                                               ║
+// ║  Core styles and definitions for hero.                        ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../zeus.config" as config;
+@use "../../core/engine" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  🦸 Hero Pattern                                             ║
+// ║                                                              ║
+// ║  Full-width introductory section with title, subtitle,       ║
+// ║  optional CTA and background image support.                  ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <section class="z-hero">                                    ║
+// ║    <div class="z-hero__content">                             ║
+// ║      <h1 class="z-hero__title">…</h1>                       ║
+// ║      <p class="z-hero__subtitle">…</p>                      ║
+// ║      <div class="z-hero__actions">                           ║
+// ║        <a class="z-hero__cta">Get Started</a>               ║
+// ║      </div>                                                  ║
+// ║    </div>                                                    ║
+// ║  </section>                                                  ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-hero {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 60svh;
+    @include padding("4xl", "y");
+    @include padding("xl", "x");
+    text-align: center;
+    overflow: hidden;
+
+    // ── Content wrapper ──────────────────────────────────────
+    &__content {
+      position: relative;
+      z-index: 1;
+      max-width: 800px;
+      margin-inline: auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--space-lg);
+    }
+
+    // ── Title ────────────────────────────────────────────────
+    &__title {
+      @include text("display-lg");
+      color: var(--color-text);
+      margin: 0;
+    }
+
+    // ── Subtitle ─────────────────────────────────────────────
+    &__subtitle {
+      @include text("body-xl");
+      color: var(--color-text-muted);
+      margin: 0;
+      max-width: 640px;
+    }
+
+    // ── Actions row ──────────────────────────────────────────
+    &__actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--space-md);
+      justify-content: center;
+    }
+
+    // ── Background image overlay ─────────────────────────────
+    &--with-bg {
+      color: var(--color-text-inverse);
+      background-size: cover;
+      background-position: center;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.55);
+        z-index: 0;
+      }
+
+      .z-hero__title,
+      .z-hero__subtitle {
+        color: var(--color-text-inverse);
+      }
+
+      .z-hero__subtitle {
+        opacity: 0.85;
+      }
+    }
+
+    // ── Alignment modifiers ──────────────────────────────────
+    &--start {
+      text-align: start;
+
+      .z-hero__content {
+        align-items: flex-start;
+      }
+
+      .z-hero__actions {
+        justify-content: flex-start;
+      }
+    }
+
+    // ── Height modifiers ─────────────────────────────────────
+    &--full {
+      min-height: 100svh;
+    }
+
+    &--compact {
+      min-height: 40svh;
+    }
+  }
+}

package/scss/foundation/views/patterns/_index.scss

@@ -0,0 +1,8 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Index                                           ║
+// ║                                                               ║
+// ║  Core styles and definitions for index.                       ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@forward "./hero";
+@forward "./sidebar-layout";

package/scss/foundation/views/patterns/_sidebar-layout.scss

@@ -0,0 +1,83 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Sidebar Layout                                  ║
+// ║                                                               ║
+// ║  Core styles and definitions for sidebar layout.              ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@use "../../../zeus.config" as config;
+@use "../../core/engine" as *;
+
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  📐 Sidebar Layout Pattern                                   ║
+// ║                                                              ║
+// ║  Classic content + sidebar layout with fluid breakpoint.     ║
+// ║  Uses CSS Grid — sidebar collapses below content on mobile.  ║
+// ║                                                              ║
+// ║  Usage:                                                      ║
+// ║  <div class="z-sidebar-layout">                              ║
+// ║    <main class="z-sidebar-layout__main">…</main>             ║
+// ║    <aside class="z-sidebar-layout__aside">…</aside>          ║
+// ║  </div>                                                      ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer components {
+  .z-sidebar-layout {
+    display: grid;
+    gap: var(--col-gap-md);
+    @include padding("lg");
+
+    // On small screens: single column, sidebar below content.
+    // minmax(0, 1fr) — not bare 1fr — so wide min-content children
+    // (code blocks, long monospace strings) can't blow the grid out
+    // past its container. The __main min-width: 0 below handles the
+    // grid ITEM; this handles the track itself.
+    grid-template-columns: minmax(0, 1fr);
+
+    // When there's enough space: content + sidebar side by side
+    @include screen-above(md) {
+      grid-template-columns: minmax(0, 1fr) 300px;
+    }
+
+    @include screen-above(lg) {
+      grid-template-columns: minmax(0, 1fr) 360px;
+    }
+
+    // ── Main content ─────────────────────────────────────────
+    &__main {
+      min-width: 0; // prevent grid blowout
+    }
+
+    // ── Sidebar ──────────────────────────────────────────────
+    &__aside {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-lg);
+    }
+
+    // ── Modifiers ────────────────────────────────────────────
+    &--sidebar-left {
+      @include screen-above(md) {
+        grid-template-columns: 300px minmax(0, 1fr);
+      }
+
+      @include screen-above(lg) {
+        grid-template-columns: 360px minmax(0, 1fr);
+      }
+
+      // Place sidebar first visually
+      .z-sidebar-layout__aside {
+        order: -1;
+      }
+    }
+
+    &--sticky-aside {
+      .z-sidebar-layout__aside {
+        @include screen-above(md) {
+          position: sticky;
+          top: var(--space-lg);
+          align-self: start;
+        }
+      }
+    }
+  }
+}

package/scss/foundation/views/render/_layer-order.scss

@@ -0,0 +1,11 @@
+// ╔══════════════════════════════════════════════════════════════╗
+// ║  ⚡ Zeus CSS — Layer Order                                     ║
+// ║                                                               ║
+// ║  Establishes the cascade layer order BEFORE any layer receives ║
+// ║  rules. Must be @forward'ed FIRST from views/_render.scss —   ║
+// ║  a @layer order statement only reliably fixes the cascade      ║
+// ║  order if it is the first time any of the named layers are    ║
+// ║  mentioned anywhere in the compiled output.                    ║
+// ╚══════════════════════════════════════════════════════════════╝
+
+@layer reset, tokens, base, layout, components, utilities;