@attrus-ds/core 0.1.0

package/dist/css/components/tooltip.css

@@ -0,0 +1,226 @@
+/* ============================================================
+   TOOLTIP COMPONENT — ATTRUS Design System
+   Hover/focus-triggered label that names a target.
+   All values from tokens.
+   ============================================================ */
+
+.tooltip-target {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 8000;
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-background-inverse);
+  color: var(--color-foreground-inverse-default);
+  font-family: var(--font-sans);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-medium);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--ls-body);
+  white-space: normal;
+  width: max-content;
+  max-width: 240px;
+  border-radius: var(--radius-xs);
+  box-shadow: var(--shadow-md);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--duration-base) var(--ease-standard),
+              transform var(--duration-base) var(--ease-emphasis);
+}
+
+.tooltip-target:hover > .tooltip,
+.tooltip-target:focus-visible > .tooltip,
+.tooltip-target:focus-within > .tooltip,
+.tooltip-target:has(> .tooltip-rich:hover) > .tooltip-rich,
+.tooltip.is-open {
+  opacity: 1;
+  pointer-events: none;
+}
+
+/* Arrow */
+.tooltip::after {
+  content: "";
+  position: absolute;
+  width: 8px; height: 8px;
+  background: var(--color-background-inverse);
+  transform: rotate(45deg);
+}
+
+/* Placements */
+.tooltip-top {
+  bottom: calc(100% + var(--space-2));
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+}
+.tooltip-target:hover > .tooltip-top,
+.tooltip-target:focus-within > .tooltip-top { transform: translateX(-50%) translateY(0); }
+.tooltip-top::after { bottom: -3px; left: 50%; margin-left: -4px; }
+
+.tooltip-bottom {
+  top: calc(100% + var(--space-2));
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+}
+.tooltip-target:hover > .tooltip-bottom,
+.tooltip-target:focus-within > .tooltip-bottom { transform: translateX(-50%) translateY(0); }
+.tooltip-bottom::after { top: -3px; left: 50%; margin-left: -4px; }
+
+.tooltip-left {
+  right: calc(100% + var(--space-2));
+  top: 50%;
+  transform: translateY(-50%) translateX(4px);
+}
+.tooltip-target:hover > .tooltip-left,
+.tooltip-target:focus-within > .tooltip-left { transform: translateY(-50%) translateX(0); }
+.tooltip-left::after { right: -3px; top: 50%; margin-top: -4px; }
+
+.tooltip-right {
+  left: calc(100% + var(--space-2));
+  top: 50%;
+  transform: translateY(-50%) translateX(-4px);
+}
+.tooltip-target:hover > .tooltip-right,
+.tooltip-target:focus-within > .tooltip-right { transform: translateY(-50%) translateX(0); }
+.tooltip-right::after { left: -3px; top: 50%; margin-top: -4px; }
+
+/* Variants */
+.tooltip-rich {
+  white-space: normal;
+  max-width: 260px;
+  padding: var(--space-3) var(--space-4);
+  font-size: var(--fs-xs);
+  line-height: var(--lh-normal);
+}
+/* Rich tooltips are interactive (may contain a link): make them hoverable
+   and bridge the gap to the target so the pointer can travel without the
+   tooltip closing. Bridge is an invisible pad on the target-facing side. */
+.tooltip-target:hover > .tooltip-rich,
+.tooltip-target:focus-within > .tooltip-rich,
+.tooltip-target:has(> .tooltip-rich:hover) > .tooltip-rich,
+.tooltip-rich.is-open { pointer-events: auto; }
+.tooltip-rich::before {
+  content: "";
+  position: absolute;
+  /* covers the space-2 gap between tooltip and target */
+}
+.tooltip-rich.tooltip-top::before    { left: 0; right: 0; bottom: calc(-1 * var(--space-2)); height: var(--space-2); }
+.tooltip-rich.tooltip-bottom::before { left: 0; right: 0; top: calc(-1 * var(--space-2)); height: var(--space-2); }
+.tooltip-rich.tooltip-left::before   { top: 0; bottom: 0; right: calc(-1 * var(--space-2)); width: var(--space-2); }
+.tooltip-rich.tooltip-right::before  { top: 0; bottom: 0; left: calc(-1 * var(--space-2)); width: var(--space-2); }
+.tooltip-rich .tooltip-title {
+  font-weight: var(--w-semibold);
+  font-size: var(--fs-sm);
+  margin: 0 0 var(--space-1);
+  color: var(--color-foreground-inverse-default);
+}
+.tooltip-rich .tooltip-desc {
+  margin: 0;
+  color: var(--color-foreground-inverse-muted);
+}
+
+/* --- Rich tooltip building blocks (title · meta · header icon ·
+   divider · bullet list · key/value rows · footer) --- */
+.tooltip-rich .tooltip-meta {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-semibold);
+  letter-spacing: var(--ls-caps);
+  text-transform: uppercase;
+  color: var(--color-foreground-inverse-muted);
+  margin: 0 0 var(--space-1);
+}
+.tooltip-rich .tooltip-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-1);
+}
+.tooltip-rich .tooltip-header .tooltip-title { margin: 0; }
+.tooltip-rich .tooltip-header i,
+.tooltip-rich .tooltip-header svg {
+  width: 15px; height: 15px;
+  color: var(--color-foreground-inverse-default);
+  flex-shrink: 0;
+  stroke-width: var(--icon-stroke);
+}
+.tooltip-rich .tooltip-divider {
+  height: 1px;
+  margin: var(--space-3) 0;
+  background: var(--color-border-inverse);
+  border: 0;
+}
+.tooltip-rich .tooltip-list {
+  margin: var(--space-2) 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+.tooltip-rich .tooltip-list li {
+  position: relative;
+  padding-left: var(--space-4);
+  color: var(--color-foreground-inverse-muted);
+  font-size: var(--fs-xs);
+  line-height: var(--lh-snug);
+}
+.tooltip-rich .tooltip-list li::before {
+  content: "";
+  position: absolute;
+  left: 2px; top: 7px;
+  width: 4px; height: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--color-foreground-inverse-accent);
+}
+.tooltip-rich .tooltip-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  font-size: var(--fs-xs);
+}
+.tooltip-rich .tooltip-row + .tooltip-row { margin-top: var(--space-1); }
+.tooltip-rich .tooltip-row .k { color: var(--color-foreground-inverse-muted); }
+.tooltip-rich .tooltip-row .v {
+  color: var(--color-foreground-inverse-default);
+  font-family: var(--font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--w-medium);
+}
+.tooltip-rich .tooltip-footer {
+  margin-top: var(--space-3);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--color-border-inverse);
+  font-size: var(--fs-xxs);
+  color: var(--color-foreground-inverse-muted);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.tooltip-rich .tooltip-footer i,
+.tooltip-rich .tooltip-footer svg { width: 12px; height: 12px; flex-shrink: 0; }
+
+.tooltip-kbd kbd {
+  display: inline-block;
+  margin-left: var(--space-2);
+  padding: 1px var(--space-1);
+  background: var(--color-background-inverse-subtle);
+  color: var(--color-foreground-inverse-default);
+  border: 1px solid var(--color-border-inverse);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-medium);
+  line-height: 1;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .tooltip { transition: opacity var(--duration-instant) linear; transform: none !important; transition-delay: 0s !important; }
+}

package/dist/css/components/topbar.css

@@ -0,0 +1,148 @@
+/* ============================================================
+   TOP BAR — ATTRUS Design System
+   Canonical component CSS. SINGLE SOURCE consumed by the live app
+   shell (ui_kits/dashboard/Shell.jsx) and the doc page
+   (preview/topbar.html). Token-driven → themes automatically.
+
+   Class map:
+     .topbar               component root (52px bar, surface)
+     .tb-control           unified 32px control (button/pill base)
+     .tb-control.icon      icon-only square 32×32
+     .tb-control.primary   high-contrast CTA (inverse layer)
+     .tb-live              live-session indicator (non-interactive)
+     .tb-live .dot         pulsing status dot
+     .tb-clock             mono elapsed-time readout
+     .tb-flag-label        ENG / lang label inside a control
+     .tb-bell              notification button wrapper (badge anchor)
+     .tb-bell .badge       unread red dot
+     .tb-avatar            user avatar chip (30px)
+     .tb-spacer            margin-left:auto group wrapper
+
+   Canonical control height: var(--tb-control-h) (default 36px). All bar
+   items (controls, search, account) read it, so they scale together.
+   ============================================================ */
+
+.topbar {
+  height: 60px; flex-shrink: 0;
+  --tb-control-h: 36px;
+  background: var(--color-background-surface);
+  border-bottom: 1px solid var(--color-border-default);
+  display: flex; align-items: center; gap: var(--space-2-5);
+  padding: 0 var(--space-4);
+}
+
+/* Unified control — every interactive pill/button in the bar */
+.tb-control {
+  height: var(--tb-control-h); min-height: var(--tb-control-h); box-sizing: border-box;
+  display: inline-flex; align-items: center; gap: var(--space-2-5);
+  padding: 0 var(--space-3-5);
+  border-radius: var(--radius-sm-md);
+  border: 1px solid var(--color-border-default);
+  background: var(--color-background-surface);
+  color: var(--color-foreground-secondary);
+  font-family: inherit; font-size: var(--fs-md); font-weight: var(--w-medium);
+  white-space: nowrap; cursor: pointer;
+  transition: var(--transition-fast);
+}
+.tb-control:hover { border-color: var(--color-border-strong); color: var(--color-foreground-default); background: var(--color-background-hover); }
+.tb-control svg, .tb-control i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); flex-shrink: 0; }
+
+/* Icon-only square */
+.tb-control.icon { width: var(--tb-control-h); padding: 0; justify-content: center; }
+
+/* The bar's primary action is the canonical button — use `.btn .btn-primary .btn-sm`
+   (buttons.css), NOT a topbar-local style. Kept out of here on purpose for single source. */
+
+/* Lang label inside a control */
+.tb-control .tb-flag-label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-secondary); }
+.tb-control .chev { opacity: .6; }
+.tb-control .chev svg, .tb-control .chev i { width: 11px; height: 11px; }
+
+/* Live indicator — looks like a control but is not interactive */
+.tb-live { cursor: default; color: var(--color-foreground-secondary); }
+.tb-live:hover { border-color: var(--color-border-default); background: var(--color-background-surface); color: var(--color-foreground-secondary); }
+.tb-live .dot {
+  width: 6px; height: 6px; border-radius: var(--radius-pill);
+  background: var(--color-success-500);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success-500) 15%, transparent);
+}
+.tb-live .lbl { font-size: var(--fs-sm); font-weight: var(--w-semibold); }
+.tb-clock { font-family: var(--font-mono); font-size: var(--fs-xxs); color: var(--color-foreground-muted); margin-left: var(--space-1); }
+
+/* Notification button + unread badge */
+.tb-bell .badge-anchor { position: relative; display: inline-flex; }
+.tb-bell .badge {
+  position: absolute; top: -3px; right: -3px;
+  width: 6px; height: 6px; border-radius: var(--radius-pill);
+  background: var(--color-danger-500);
+}
+
+/* Avatar chip */
+.tb-avatar {
+  width: 30px; height: 30px; border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
+  font-size: var(--fs-xs); font-weight: var(--w-bold);
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0; margin-left: var(--space-1);
+}
+
+/* Right-aligned cluster */
+.tb-spacer { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
+
+/* Search pill grows to fill the bar (component itself lives in inputs.css) */
+.topbar .pill-search { height: var(--tb-control-h); box-sizing: border-box; flex: 1; max-width: 520px; min-width: 0; }
+
+/* ===== Mobile ===== */
+@media (max-width: 720px) {
+  .topbar { gap: var(--space-2); padding: 0 var(--space-3); }
+}
+
+/* ===== Account menu (avatar + identity → dropdown) ===== */
+.tb-account-wrap { position: relative; margin-left: var(--space-1); }
+.tb-account {
+  height: var(--tb-control-h); min-height: var(--tb-control-h); box-sizing: border-box;
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  padding: 0 var(--space-3-5) 0 var(--space-2-5);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm-md);
+  background: var(--color-background-surface);
+  cursor: pointer; font-family: inherit;
+  transition: var(--transition-fast);
+}
+.tb-account:hover { border-color: var(--color-border-strong); background: var(--color-background-hover); }
+.tb-account.is-open { border-color: var(--color-border-strong); background: var(--color-background-hover); }
+.tb-account .tb-avatar { width: 24px; height: 24px; font-size: 9px; margin-left: 0; }
+.tb-account-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; min-width: 0; }
+.tb-account-id .nm { font-size: var(--fs-xs); font-weight: var(--w-semibold); color: var(--color-foreground-default); white-space: nowrap; }
+.tb-account-id .co { font-size: var(--fs-xxs); color: var(--color-foreground-muted); white-space: nowrap; }
+.tb-account .chev { display: inline-flex; color: var(--color-foreground-muted); margin-left: var(--space-1); }
+.tb-account .chev svg, .tb-account .chev i { width: 12px; height: 12px; }
+
+/* Dropdown */
+.tb-account-menu {
+  position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 200;
+  min-width: 240px; padding: var(--space-2);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
+}
+.tb-account-menu-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-3); }
+.tb-account-menu .tb-avatar.lg { width: 36px; height: 36px; font-size: var(--fs-sm); margin-left: 0; }
+.tb-account-menu-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
+.tb-account-menu-id .nm { font-size: var(--fs-md); font-weight: var(--w-semibold); color: var(--color-foreground-default); white-space: nowrap; }
+.tb-account-menu-id .co { font-size: var(--fs-xs); color: var(--color-foreground-muted); white-space: nowrap; }
+.tb-account-menu-sep { height: 1px; background: var(--color-border-subtle); margin: var(--space-1) calc(-1 * var(--space-2)); }
+.tb-account-menu-item {
+  display: flex; align-items: center; gap: var(--space-3); width: 100%;
+  padding: var(--space-2-5) var(--space-2); margin: 1px 0;
+  border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
+  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--w-medium);
+  color: var(--color-foreground-secondary); text-align: left; white-space: nowrap;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.tb-account-menu-item:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.tb-account-menu-item svg, .tb-account-menu-item i { width: 15px; height: 15px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); flex-shrink: 0; }
+.tb-account-menu-item:hover svg, .tb-account-menu-item:hover i { color: var(--color-foreground-secondary); }
+.tb-account-menu-item.is-danger { color: var(--color-feedback-danger-foreground); }
+.tb-account-menu-item.is-danger svg, .tb-account-menu-item.is-danger i { color: var(--color-feedback-danger-foreground); }
+.tb-account-menu-item.is-danger:hover { background: var(--color-feedback-danger-background); color: var(--color-feedback-danger-foreground); }

package/dist/css/fonts.css

@@ -0,0 +1,91 @@
+/* ATTRUS / Cabiros — bundled web fonts (self-hosted, no CDN).
+   Generated by scripts/build.mjs. Fonts under SIL OFL — see dist/fonts/LICENSE-*.txt */
+
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("../fonts/lato-latin-100-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../fonts/lato-latin-300-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("../fonts/lato-latin-300-italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/lato-latin-400-italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lato";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../fonts/lato-latin-700-italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("../fonts/lato-latin-900-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
+}
+

package/dist/css/index.css

@@ -0,0 +1,23 @@
+/* @attrus/cabiros — full design system stylesheet.
+   Order matters: fonts -> tokens -> components. */
+
+@import "./fonts.css";
+@import "./tokens.css";
+
+@import "./components/buttons.css";
+@import "./components/callout.css";
+@import "./components/cards.css";
+@import "./components/combobox.css";
+@import "./components/empty-states.css";
+@import "./components/inputs.css";
+@import "./components/number-input.css";
+@import "./components/overlays.css";
+@import "./components/primitives.css";
+@import "./components/sidebar.css";
+@import "./components/status-pills.css";
+@import "./components/stepper.css";
+@import "./components/table.css";
+@import "./components/tabs.css";
+@import "./components/toast.css";
+@import "./components/tooltip.css";
+@import "./components/topbar.css";