@attrus-ds/core 0.1.0

package/dist/css/components/tabs.css

@@ -0,0 +1,319 @@
+/* ============================================================
+   TABS — non-sequential navigation between sibling views
+   Underline (default) for primary panel nav · pill (segmented)
+   for compact filters/toolbars. Count badges, icons, keyboard
+   nav. All values from tokens.
+
+   Extracted from primitives.css (Nov 2025): Tabs is a stateful
+   navigation component, not a headless atom. See tabs.html.
+
+   Markup contract:
+     <div class="tabs" role="tablist" aria-label="…">
+       <button class="tab" role="tab" aria-selected="true">
+         <span class="tab-label" data-label="All">All</span>
+         <span class="tab-count">128</span>
+       </button>
+       <button class="tab" role="tab" aria-selected="false">…</button>
+     </div>
+   Pill variant: add .tabs-pill to the container.
+   The .tab-label wrapper (with a data-label matching its text)
+   reserves the bold width so the active/hover state never reflows.
+   ============================================================ */
+
+.tabs {
+  display: flex;
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--color-border-default);
+  position: relative;
+}
+.tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-medium);
+  color: var(--color-foreground-secondary);
+  position: relative;
+  white-space: nowrap;
+  transition: var(--transition-fast);
+  margin-bottom: -1px;
+}
+.tab:hover { color: var(--color-foreground-default); }
+.tab[aria-selected="true"],
+.tab.is-active {
+  color: var(--color-brand-accent-700);
+  font-weight: var(--w-semibold);
+}
+.tab[aria-selected="true"]::after,
+.tab.is-active::after {
+  content: '';
+  position: absolute;
+  left: var(--space-3);
+  right: var(--space-3);
+  bottom: 0;
+  height: 2px;
+  background: var(--color-brand-accent-500);
+  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
+}
+.tab:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+  border-radius: var(--radius-sm);
+}
+.tab[disabled] { opacity: 0.45; color: var(--color-foreground-disabled); cursor: not-allowed; }
+
+.tab-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-bold);
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-muted);
+  border-radius: var(--radius-pill);
+}
+.tab[aria-selected="true"] .tab-count,
+.tab.is-active .tab-count {
+  background: var(--color-brand-accent-50);
+  color: var(--color-brand-accent-700);
+}
+
+/* Pill tabs — alternative for compact, segmented contexts */
+.tabs-pill {
+  border-bottom: 0;
+  background: var(--color-background-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  padding: var(--space-1);
+  gap: 0;
+}
+.tabs-pill .tab {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-pill);
+  margin-bottom: 0;
+}
+.tabs-pill .tab::after { display: none; }
+.tabs-pill .tab[aria-selected="true"],
+.tabs-pill .tab.is-active {
+  background: var(--color-background-surface);
+  color: var(--color-foreground-default);
+  box-shadow: var(--shadow-xs);
+}
+
+/* ---- Pill layout options ----------------------------------- */
+/* Mobile: the segmented shell fills the row and scrolls internally when
+   its segments overflow (B1). The shell itself never wraps; tabs keep
+   their size and the user swipes horizontally inside the pill. */
+@media (max-width: 720px) {
+  .tabs-pill {
+    display: flex;
+    width: 100%;
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+  }
+  .tabs-pill::-webkit-scrollbar { display: none; }
+  .tabs-pill .tab { flex: 0 0 auto; scroll-snap-align: start; }
+}
+
+/* Equal-width segments: every tab the same width (good for 2–4
+   short, symmetric options like Day/Week/Month). */
+.tabs-pill.is-equal { display: inline-flex; }
+.tabs-pill.is-equal .tab { flex: 1 1 0; justify-content: center; }
+
+/* Full-width: the segmented control fills its container. */
+.tabs-pill.is-block { display: flex; width: 100%; }
+.tabs-pill.is-block .tab { flex: 1 1 0; justify-content: center; }
+
+/* Equal-width underline tabs: each item takes the same width with its
+   content horizontally centered. Use when tabs should read as a balanced row. */
+.tabs.is-block { display: flex; width: 100%; }
+.tabs.is-block .tab { flex: 1 1 0; justify-content: center; min-width: 0; }
+.tabs.is-block .tab-label { justify-items: center; min-width: 0; }
+.tabs.is-equal { display: flex; }
+.tabs.is-equal .tab { flex: 1 1 0; justify-content: center; min-width: 0; }
+.tabs.is-equal .tab-label { justify-items: center; min-width: 0; }
+/* Equal-width pill segments shouldn't overflow their labels either */
+.tabs-pill.is-equal .tab, .tabs-pill.is-block .tab { min-width: 0; }
+
+/* Icon-only pill: square segments, label provided via aria-label. */
+.tabs-pill .tab.is-icon { padding-left: var(--space-2); padding-right: var(--space-2); aspect-ratio: 1; justify-content: center; }
+.tabs-pill .tab.is-icon i, .tabs-pill .tab.is-icon svg { width: 16px; height: 16px; }
+
+/* ============================================================
+   SIZES — apply on the container; both variants honour them.
+     .tabs-sm  dense (toolbars, card headers, drawers)
+     (default) standard
+     .tabs-lg  spacious (page-level primary nav)
+   ============================================================ */
+.tabs-sm .tab {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--fs-xs);
+  gap: var(--space-1);
+}
+.tabs-sm .tab-count { min-width: 16px; height: 16px; font-size: 10px; padding: 0 var(--space-1); }
+.tabs-sm .tab i, .tabs-sm .tab svg { width: 13px; height: 13px; }
+.tabs-sm.tabs-pill .tab { padding: var(--space-1) var(--space-3); }
+
+.tabs-lg .tab {
+  padding: var(--space-4) var(--space-5);
+  font-size: var(--fs-md);
+  gap: var(--space-3);
+}
+.tabs-lg .tab-count { min-width: 22px; height: 22px; font-size: var(--fs-xs); }
+.tabs-lg .tab i, .tabs-lg .tab svg { width: 17px; height: 17px; }
+.tabs-lg.tabs-pill .tab { padding: var(--space-3) var(--space-5); }
+
+/* Mobile: tabs-lg steps down to the default size so page-level nav
+   isn't oversized on phones (C). */
+@media (max-width: 720px) {
+  .tabs-lg .tab { padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); gap: var(--space-2); }
+  .tabs-lg .tab-count { min-width: 18px; height: 18px; font-size: var(--fs-xxs); }
+  .tabs-lg .tab i, .tabs-lg .tab svg { width: 15px; height: 15px; }
+  .tabs-lg.tabs-pill .tab { padding: var(--space-2) var(--space-4); }
+  .tabs-lg .tab[aria-selected="true"]::after,
+  .tabs-lg .tab.is-active::after { left: var(--space-3); right: var(--space-3); }
+}
+/* Keep the underline indicator inset consistent at each size */
+.tabs-sm .tab[aria-selected="true"]::after,
+.tabs-sm .tab.is-active::after { left: var(--space-2); right: var(--space-2); }
+.tabs-lg .tab[aria-selected="true"]::after,
+.tabs-lg .tab.is-active::after { left: var(--space-4); right: var(--space-4); }
+
+/* Tab icons inherit the size of the type they sit beside */
+.tab i, .tab svg { width: 15px; height: 15px; stroke-width: 2; }
+
+/* Label wrapper: reserves the SEMIBOLD width up front so toggling
+   weight between states never reflows the row. The hidden ::after
+   holds a bold copy of the text in a second (0-height) grid row, so
+   the column width = max(regular, bold) = bold. No layout shift. */
+.tab-label {
+  display: inline-grid;
+  grid-template-columns: max-content;
+}
+.tab-label::after {
+  content: attr(data-label);
+  font-weight: var(--w-semibold);
+  height: 0;
+  visibility: hidden;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ============================================================
+   ANIMATION — opt-in sliding indicator + panel fade
+   Add .is-animated to the .tabs container. A single
+   <span class="tab-indicator" aria-hidden="true"></span> is
+   placed as the LAST child of the tablist; the JS controller
+   sets --ind-x (translateX) and --ind-w (width) from the active
+   tab, and recomputes on resize. Without the controller the
+   indicator stays at 0 width — so .is-animated REQUIRES the JS.
+   ============================================================ */
+.tabs.is-animated { position: relative; }
+
+/* Underline: suppress the per-tab static bar, show one sliding bar */
+.tabs.is-animated .tab[aria-selected="true"]::after,
+.tabs.is-animated .tab.is-active::after { display: none; }
+
+.tab-indicator {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 2px;
+  width: var(--ind-w, 0);
+  transform: translateX(var(--ind-x, 0));
+  background: var(--color-brand-accent-500);
+  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
+  pointer-events: none;
+  transition: transform var(--duration-base) var(--ease-emphasis),
+              width var(--duration-base) var(--ease-emphasis);
+}
+
+/* Pill: the lifted white surface becomes a sliding element behind tabs */
+.tabs-pill.is-animated .tab { z-index: 1; }
+.tabs-pill.is-animated .tab[aria-selected="true"],
+.tabs-pill.is-animated .tab.is-active { background: transparent; box-shadow: none; }
+.tabs-pill.is-animated .tab-indicator {
+  top: var(--space-1);
+  bottom: var(--space-1);
+  height: auto;
+  background: var(--color-background-surface);
+  box-shadow: var(--shadow-xs);
+  border-radius: var(--radius-pill);
+  z-index: 0;
+}
+
+/* Panel fade — add .tab-panel-animated to each [role="tabpanel"] */
+@keyframes tab-panel-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.tab-panel-animated:not([hidden]) {
+  animation: tab-panel-in var(--duration-base) var(--ease-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab { transition: none; }
+  .tab-indicator { transition: none; }
+  .tab-panel-animated:not([hidden]) { animation: none; }
+}
+
+/* ============================================================
+   MOBILE — horizontal scroll for overflowing underline tabs
+   Underline tabs scroll sideways by DEFAULT below 720px (A) so a
+   long row never overflows the page or wraps. `.is-scroll` forces
+   the same behaviour at any width. Pill tabs get their own mobile
+   scroll rule above (the shell scrolls internally, B1).
+   Note: overflow clips the box-shadow focus ring slightly at the
+   top edge — acceptable tradeoff; the underline still reads.
+   ============================================================ */
+@media (max-width: 720px) {
+  .tabs:not(.tabs-pill):not(.is-block):not(.is-equal) {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+  }
+  .tabs:not(.tabs-pill):not(.is-block):not(.is-equal)::-webkit-scrollbar { display: none; }
+  .tabs:not(.tabs-pill):not(.is-block):not(.is-equal) .tab { scroll-snap-align: start; flex: 0 0 auto; }
+}
+.tabs.is-scroll {
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x proximity;
+}
+.tabs.is-scroll::-webkit-scrollbar { display: none; }
+.tabs.is-scroll .tab { scroll-snap-align: start; flex: 0 0 auto; }
+/* In a scroll container the box-shadow ring is clipped at the top edge,
+   so swap to an inset outline that lives inside the tab. */
+.tabs.is-scroll .tab:focus-visible {
+  box-shadow: none;
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -3px;
+}
+
+/* ============================================================
+   TOUCH TARGETS — guarantee ≥44px hit height on touch devices.
+   Tabs (esp. .tabs-sm) are visually short; on a coarse pointer
+   we pad the tap area up to the platform minimum without
+   changing the visual type size.
+   ============================================================ */
+@media (pointer: coarse) {
+  .tab { min-height: 44px; }
+  .tabs-pill .tab { min-height: 40px; }
+}

package/dist/css/components/toast.css

@@ -0,0 +1,239 @@
+/* ============================================================
+   TOAST COMPONENT — ATTRUS Design System
+   Ephemeral feedback after an action. Auto-dismiss, non-blocking.
+   All values from tokens.
+   ============================================================ */
+
+.toast {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: flex-start;
+  gap: var(--space-3);
+  min-width: 320px;
+  max-width: 480px;
+  padding: var(--space-4) var(--space-5);
+  background: var(--glass-white);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-glass), var(--shadow-lg);
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  line-height: var(--lh-normal);
+  color: var(--color-foreground-default);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Fallback for browsers without backdrop-filter — go back to a solid
+   surface so text never loses contrast. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .toast { background: var(--color-background-surface); box-shadow: var(--shadow-lg); }
+}
+
+/* Leading icon container */
+.toast-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-md);
+  height: var(--icon-md);
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.toast-icon i, .toast-icon svg {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  stroke-width: var(--icon-stroke);
+}
+
+/* Body — title + description */
+.toast-body {
+  min-width: 0;
+}
+.toast-title {
+  font-size: var(--fs-sm);
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-default);
+  margin: 0 0 var(--space-1);
+  letter-spacing: var(--ls-tight);
+}
+.toast-desc {
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+  line-height: var(--lh-relaxed);
+  margin: 0;
+}
+
+/* Inline action link */
+.toast-action {
+  display: inline-block;
+  margin-top: var(--space-2);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+.toast-action:hover { color: var(--color-brand-secondary-700); }
+.toast-action:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+  border-radius: var(--radius-xs);
+}
+
+/* Close button */
+.toast-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px; height: 24px;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  border: 0;
+  color: var(--color-foreground-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: -2px;
+  transition: var(--transition-fast);
+}
+.toast-close:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.toast-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.toast-close i, .toast-close svg { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); }
+
+/* Progress (auto-dismiss countdown) — bottom hairline */
+.toast-progress {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 2px;
+  background: var(--color-border-subtle);
+  overflow: hidden;
+}
+.toast-progress::after {
+  content: "";
+  position: block;
+  display: block;
+  height: 100%;
+  width: 100%;
+  background: var(--color-foreground-muted);
+  transform-origin: left;
+  animation: toast-progress var(--toast-duration, 5000ms) linear forwards;
+}
+
+@keyframes toast-progress {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+
+/* ============================================================
+   VARIANTS — semantic
+   ============================================================ */
+
+/* Default (neutral, plain) — uses defaults above */
+
+/* Success */
+.toast-success { border-left: 3px solid var(--color-feedback-success-border); }
+.toast-success .toast-icon { color: var(--color-feedback-success-foreground); }
+.toast-success .toast-progress::after { background: var(--color-feedback-success-foreground); }
+
+/* Warning */
+.toast-warning { border-left: 3px solid var(--color-feedback-warning-border); }
+.toast-warning .toast-icon { color: var(--color-feedback-warning-foreground); }
+.toast-warning .toast-progress::after { background: var(--color-feedback-warning-foreground); }
+
+/* Danger */
+.toast-danger { border-left: 3px solid var(--color-feedback-danger-border); }
+.toast-danger .toast-icon { color: var(--color-feedback-danger-foreground); }
+.toast-danger .toast-progress::after { background: var(--color-feedback-danger-foreground); }
+
+/* Info */
+.toast-info { border-left: 3px solid var(--color-feedback-info-border); }
+.toast-info .toast-icon { color: var(--color-feedback-info-foreground); }
+.toast-info .toast-progress::after { background: var(--color-feedback-info-foreground); }
+
+/* Brand (announcement / non-feedback messages) */
+.toast-brand { border-left: 3px solid var(--color-brand-secondary-300); }
+.toast-brand .toast-icon { color: var(--color-foreground-accent); }
+.toast-brand .toast-progress::after { background: var(--color-foreground-accent); }
+
+/* Inverse (over photo, dark hero, etc.) */
+.toast-inverse {
+  background: var(--glass-ink);
+  -webkit-backdrop-filter: var(--glass-blur);
+  backdrop-filter: var(--glass-blur);
+  border: var(--glass-border-dark);
+  box-shadow: var(--shadow-glass-dark), var(--shadow-2xl);
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .toast-inverse { background: var(--color-background-inverse); box-shadow: var(--shadow-2xl); }
+}
+.toast-inverse .toast-title { color: var(--color-foreground-inverse-default); }
+.toast-inverse .toast-desc  { color: var(--color-foreground-inverse-muted); }
+.toast-inverse .toast-close { color: var(--color-foreground-inverse-muted); }
+.toast-inverse .toast-close:hover { background: var(--color-background-inverse-hover); color: var(--color-foreground-inverse-default); }
+.toast-inverse .toast-action { color: var(--color-foreground-on-solid); }
+.toast-inverse .toast-action:hover { color: var(--color-brand-secondary-100); }
+
+/* ============================================================
+   STACK — viewport positioning
+   ============================================================ */
+
+.toast-stack {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  z-index: 9000;
+  pointer-events: none;
+}
+.toast-stack > .toast { pointer-events: auto; }
+
+.toast-stack-tr { top: var(--space-6); right: var(--space-6); align-items: flex-end; }
+.toast-stack-tl { top: var(--space-6); left:  var(--space-6); align-items: flex-start; }
+.toast-stack-tc { top: var(--space-6); left: 50%; transform: translateX(-50%); align-items: center; }
+.toast-stack-br { bottom: var(--space-6); right: var(--space-6); align-items: flex-end; flex-direction: column-reverse; }
+.toast-stack-bl { bottom: var(--space-6); left:  var(--space-6); align-items: flex-start; flex-direction: column-reverse; }
+.toast-stack-bc { bottom: var(--space-6); left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+
+/* ============================================================
+   ENTER / EXIT animations
+   ============================================================ */
+
+@keyframes toast-enter-right {
+  from { opacity: 0; transform: translateX(16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-enter-left {
+  from { opacity: 0; transform: translateX(-16px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes toast-enter-down {
+  from { opacity: 0; transform: translateY(-12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes toast-enter-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.toast-stack-tr > .toast, .toast-stack-br > .toast { animation: toast-enter-right var(--duration-base) var(--ease-emphasis) both; }
+.toast-stack-tl > .toast, .toast-stack-bl > .toast { animation: toast-enter-left  var(--duration-base) var(--ease-emphasis) both; }
+.toast-stack-tc > .toast { animation: toast-enter-down var(--duration-base) var(--ease-emphasis) both; }
+.toast-stack-bc > .toast { animation: toast-enter-up   var(--duration-base) var(--ease-emphasis) both; }
+
+/* Exit — applied via .is-leaving class set by JS before removing */
+.toast.is-leaving { animation: toast-exit var(--duration-fast) var(--ease-standard) both; }
+@keyframes toast-exit {
+  from { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(-4px) scale(0.96); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toast-stack > .toast { animation: none; }
+  .toast-progress::after { animation: none; }
+}