@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/TableOfContents/activeSection.ts

@@ -0,0 +1,18 @@
+/**
+ * Picks the heading the scroll-spy should highlight.
+ * `top` is viewport-relative (`getBoundingClientRect().top`); `line` is the
+ * viewport y that counts as "reached". Headings are in document order.
+ */
+export function pickActiveSection(
+  headings: readonly { id: string; top: number }[],
+  line: number,
+  atBottom: boolean,
+): string | undefined {
+  if (headings.length === 0) return undefined;
+  if (atBottom) return headings[headings.length - 1].id;
+  let active = headings[0].id;
+  for (const heading of headings) {
+    if (heading.top <= line) active = heading.id;
+  }
+  return active;
+}

package/src/components/TableOfContents/index.ts

@@ -0,0 +1,2 @@
+export { TableOfContents } from './TableOfContents';
+export type { TableOfContentsItem, TableOfContentsProps } from './TableOfContents';

package/src/components/Tabs/Tabs.module.scss

@@ -0,0 +1,359 @@
+@use '../../styles/mixins' as *;
+@use './Tabs.tokens';
+
+// The outer wrapper handles horizontal scrolling. Putting overflow here
+// instead of on .tabs means the tablist itself remains an overflow-visible
+// box, so the active-tab underline (positioned just below its baseline) is
+// never clipped by overflow-y's auto-promotion.
+// `scrollbar-width: thin` used to live here; it now comes from the universal
+// scrollbar reset in styles/reset.scss, which themes every scroller at once.
+.scrollWrap {
+  // A vertical tablist is width:100%. Without an explicit zero minimum, a grid
+  // aside may resolve this wrapper's automatic minimum to the tabs' min-content
+  // width instead of its own track. Keep the wrapper constrained to its
+  // containing block; horizontal tabs still overflow and scroll inside it.
+  min-width: 0;
+  overflow-x: auto;
+
+  // Set from Tabs.tsx when the strip fits to within a rounding pixel (#710).
+  // `hidden`, not `visible`, keeps the same clipping box the focus-ring inset
+  // below is designed for.
+  &[data-fits]:not(.scrollWrapVertical) {
+    overflow-x: hidden;
+  }
+}
+
+.tabs {
+  // inline-flex sizes the tablist to its content, so it overflows .scrollWrap
+  // when there are many tabs. min-width: 100% makes it span the wrapper when
+  // there are few tabs (so the bottom border extends edge-to-edge).
+  // position: relative anchors the absolutely-positioned indicator (Rule 4
+  // permits `relative` for an internal child anchor).
+  position: relative;
+  display: inline-flex;
+  gap: var(--tabs-gap);
+  border-bottom: var(--border-width-emphasis) solid var(--tabs-border-color);
+  min-width: 100%;
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-tab-gap);
+  padding: var(--tabs-tab-padding-y) var(--tabs-tab-padding-x);
+  border: none;
+  background: transparent;
+  color: var(--tabs-tab-fg);
+  font-family: inherit;
+  font-size: var(--tabs-tab-font-size);
+  font-weight: var(--tabs-tab-font-weight);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+
+  // Hover applies only to non-active tabs — explicit selector beats relying on
+  // rule order with `.active:hover` later in the file.
+  &:not(.active):hover {
+    color: var(--tabs-tab-fg-hover);
+  }
+
+  // INSET. `.scrollWrap` is `overflow-x: auto`, which computes `overflow-y:
+  // auto` too, so it clips vertically — and both the tab and the action are
+  // flush with its top edge and 2px from its bottom. An outset ring loses BOTH
+  // horizontal bands and renders as two floating vertical bars flanking the
+  // element (#505). Same treatment as Accordion, Table, DataTable, HeaderCell
+  // and Calendar's TimedEvent / DayCell. (`.scrollWrapVertical` sets
+  // `overflow-x: visible`, so a vertical tablist has no clipping ancestor and
+  // takes the inset because this one rule matches whatever the orientation —
+  // harmless there, the padding is ample.)
+  &:focus-visible {
+    @include focus-ring(var(--tabs-tab-ring), $offset: calc(-1 * var(--ring-offset)));
+
+    border-radius: var(--tabs-tab-radius);
+  }
+}
+
+.active {
+  color: var(--tabs-tab-fg-active);
+}
+
+// Trailing action button (`action` prop) — sits after the tabs in the same
+// flex row so it lines up as the last item in the strip. Same rhythm as
+// `.tab` (height/padding/typography) but deliberately more muted — it's a
+// button, not a tab, and must read as visually distinct even before hover.
+.action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-tab-gap);
+  padding: var(--tabs-tab-padding-y) var(--tabs-tab-padding-x);
+  border: none;
+  background: transparent;
+  color: var(--tabs-action-fg);
+  font-family: inherit;
+  font-size: var(--tabs-tab-font-size);
+  font-weight: var(--tabs-tab-font-weight);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+
+  &:hover:not(:disabled) {
+    color: var(--tabs-tab-fg-hover);
+  }
+
+  // INSET, for the reason given on `.tab` above — `.action` is a
+  // stretch-aligned sibling inside the same clipping `.scrollWrap`.
+  &:focus-visible {
+    @include focus-ring(var(--tabs-tab-ring), $offset: calc(-1 * var(--ring-offset)));
+
+    border-radius: var(--tabs-tab-radius);
+  }
+
+  &:disabled {
+    opacity: var(--tabs-action-opacity-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  // Inherit the tab's color so the icon picks up muted vs active automatically.
+  color: inherit;
+}
+
+// Groups leading + icon + label + count so `trailing` can sit beside it as a
+// sibling and `space-between` (vertical) pins trailing to the far edge.
+.main {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-tab-gap);
+  min-width: 0; // lets the label shrink/ellipsis instead of overflowing the row
+}
+
+.label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.leading,
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-badge);
+  height: var(--size-chip);
+  padding: 0 var(--tabs-count-padding-x);
+  border-radius: var(--tabs-count-radius);
+  background: var(--tabs-count-bg);
+  color: var(--tabs-count-fg);
+  font-size: var(--tabs-count-font-size);
+  font-weight: var(--tabs-count-font-weight);
+
+  .active & {
+    background: var(--tabs-count-bg-active);
+    color: var(--tabs-count-fg-active);
+  }
+}
+
+// One underline shared by all tabs. Position is driven by inline styles
+// written from a useLayoutEffect in Tabs.tsx (transform: translateX, width).
+// CSS handles only the *transition* between positions — never the position
+// itself. width: 0 is the safe initial state before JS measures the active
+// tab on first paint; Rule 4 forbids `width` on consumer-positioned
+// elements, but this is an internal, absolutely-positioned, decorative span
+// whose width is component-owned.
+.indicator {
+  position: absolute;
+  left: 0;
+  bottom: calc(-1 * var(--border-width-emphasis));
+  height: var(--border-width-emphasis);
+  width: 0;
+  background: var(--tabs-indicator-bg);
+  transform: translateX(0);
+  transition:
+    transform var(--transition-base),
+    width var(--transition-base),
+    height var(--transition-base);
+  will-change: transform, width, height;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .indicator {
+    transition: none;
+  }
+}
+
+// ---- Vertical orientation ----
+.scrollWrapVertical {
+  overflow-x: visible; // vertical rows are width:100%; no horizontal scroll/clip
+}
+
+.vertical {
+  flex-direction: column;
+  gap: var(--tabs-vertical-gap);
+  border-bottom: none; // no horizontal track in vertical mode
+
+  // Fill the container's inline size (overrides the base inline-flex
+  // shrink-to-content) so rows — and their `trailing` adornments — span the
+  // full rail. This is what makes a vertical rail compose correctly with a
+  // sized column such as `<Split asideWidth="240px">`: without it the tablist
+  // floats at content width inside a wider/pinned column. An explicit 100%
+  // (not min-width: 100%) also constrains long labels so the `.label` ellipsis
+  // engages instead of overflowing the column.
+  width: 100%;
+
+  .tab {
+    width: 100%;
+    justify-content: space-between; // .main left, .trailing pinned right
+    padding: var(--tabs-vertical-tab-padding-y) var(--tabs-vertical-tab-padding-x);
+    border-radius: var(--tabs-vertical-tab-radius);
+    text-align: left;
+    transition:
+      color var(--transition-fast),
+      background var(--transition-fast);
+
+    &:not(.active):hover {
+      background: var(--tabs-vertical-tab-bg-hover);
+    }
+  }
+
+  .active {
+    background: var(--tabs-vertical-tab-bg-active);
+  }
+
+  // The action button follows the same axis as the tabs: a full-width row
+  // instead of an inline flex item. Never gets the active tint — it's never
+  // selected.
+  .action {
+    width: 100%;
+    justify-content: flex-start;
+    padding: var(--tabs-vertical-tab-padding-y) var(--tabs-vertical-tab-padding-x);
+    border-radius: var(--tabs-vertical-tab-radius);
+    text-align: left;
+    transition:
+      color var(--transition-fast),
+      background var(--transition-fast);
+
+    &:hover:not(:disabled) {
+      background: var(--tabs-vertical-tab-bg-hover);
+    }
+  }
+
+  .indicator {
+    inset-block-start: 0; // top:0 — JS drives translateY + height
+    inset-inline-start: 0; // left:0 — inside the box so it is never clipped
+    bottom: auto;
+    width: var(--tabs-vertical-indicator-width);
+    height: 0;
+    border-radius: var(--tabs-vertical-indicator-radius);
+  }
+
+  // A celled tab is the full-width row: the button fills, actions pin right.
+  // `display`/`gap`/`align-items` are inherited from the base `.cell` rule.
+  // padding-inline-end insets the actions from the rail's right edge to match
+  // the button's own horizontal padding on the left (otherwise the control is
+  // glued to the edge).
+  .cell {
+    width: 100%;
+    justify-content: space-between;
+    padding-inline-end: var(--tabs-vertical-tab-padding-x);
+  }
+
+  .cell > .tab {
+    // The button no longer needs full width itself — the cell is the row.
+    flex: 0 1 auto;
+    width: auto;
+  }
+
+  // Active-row tint covers the whole cell (button + actions), not just the
+  // button. :has scopes it to the cell that holds the active tab.
+  .cell:has(> .tab.active) {
+    background: var(--tabs-vertical-tab-bg-active);
+    border-radius: var(--tabs-vertical-tab-radius);
+  }
+
+  // Avoid a double background: when a tab is inside a cell, its own active
+  // tint is suppressed (the cell provides it). Bare (action-less) tabs keep
+  // their existing `.vertical .active` tint.
+  .cell > .tab.active {
+    background: transparent;
+  }
+}
+
+// ---- Strip-level endContent (only rendered when the prop is set) ----
+// The scroll region fills the row so the tablist's bottom border spans the full
+// tab area, and endContent carries a matching border so the track runs unbroken
+// under it (full-width, not cut at the last tab). align-items: flex-end
+// bottom-aligns both so their borders — and the indicator — land on one line.
+.root {
+  display: flex;
+  align-items: flex-end;
+
+  .scrollWrap {
+    flex: 1; // fill the row (shorthand, not the disallowed flex-grow longhand)
+    min-width: 0; // let the tabs overflow-scroll instead of forcing the row wider
+  }
+}
+
+.endContent {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  // Space before the controls (a flex gap would break the border line) plus the
+  // continuation of the tablist's bottom track under endContent.
+  padding-inline-start: var(--tabs-endcontent-gap);
+  border-bottom: var(--border-width-emphasis) solid var(--tabs-border-color);
+}
+
+.rootVertical {
+  flex-direction: column;
+  align-items: flex-start;
+
+  // Vertical has no bottom track: the rail is content-height, endContent below.
+  .scrollWrap {
+    flex: initial;
+    width: 100%;
+  }
+
+  .endContent {
+    // Keep the horizontal layout footprint used by auto orientation, then
+    // visually cancel the leading gap so this below-the-rail control still
+    // aligns with the tabs. A stable border-box width prevents a 319px/320px
+    // mode flip from changing its own measurement and oscillating.
+    padding-inline-start: var(--tabs-endcontent-gap);
+    justify-content: flex-start;
+    border-bottom: none;
+    transform: translateX(calc(-1 * var(--tabs-endcontent-gap)));
+  }
+}
+
+// ---- Per-tab actions cell (only for tabs with `actions`) ----
+// A presentation wrapper so interactive controls sit OUTSIDE the role="tab"
+// button. Kept UNPOSITIONED (static) so the active tab button's offsetLeft/
+// offsetWidth — which drive the indicator — are unchanged.
+.cell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-cell-gap);
+
+  // Trailing inset so the actions aren't glued to the tab's right edge — matches
+  // the horizontal padding a bare tab button carries. The underline spans the
+  // whole cell, so this also gives the underline the same right breathing room
+  // a bare tab's underline has. (Vertical overrides with its own padding-x.)
+  padding-inline-end: var(--tabs-tab-padding-x);
+}
+
+.tabActions {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}

package/src/components/Tabs/Tabs.tokens.scss

@@ -0,0 +1,50 @@
+// Tabs.tokens.scss — Component-scoped tokens for <Tabs>. Covers tablist
+// bottom border, tab inactive vs active fg, tab hover fg, focus ring, the
+// active-tab indicator color, and the optional count pill (active vs idle).
+:root {
+  // Tablist
+  --tabs-gap: var(--space-1);
+  --tabs-border-color: var(--color-border);
+  --tabs-endcontent-gap: var(--space-2);
+  --tabs-cell-gap: var(--space-1);
+
+  // Tab
+  --tabs-tab-padding-y: var(--space-2);
+  --tabs-tab-padding-x: var(--space-3);
+  --tabs-tab-gap: var(--space-2);
+  --tabs-tab-fg: var(--color-fg-muted);
+  --tabs-tab-fg-hover: var(--color-fg);
+  --tabs-tab-fg-active: var(--color-accent);
+  --tabs-tab-font-size: var(--font-size-md);
+  --tabs-tab-font-weight: var(--font-weight-medium);
+  --tabs-tab-ring: var(--ring-accent);
+  --tabs-tab-radius: var(--radius-sm);
+
+  // Trailing action button (`action` prop) — a button-like pseudo-tab, more
+  // muted than an idle tab since it never becomes selected.
+  --tabs-action-fg: var(--color-fg-subtle);
+  --tabs-action-opacity-disabled: var(--opacity-disabled);
+
+  // Indicator
+  --tabs-indicator-bg: var(--color-accent);
+
+  // Vertical orientation
+  --tabs-vertical-gap: var(--space-1);
+  --tabs-vertical-tab-padding-y: var(--space-2);
+  --tabs-vertical-tab-padding-x: var(--space-3);
+  --tabs-vertical-tab-radius: var(--radius-sm);
+  --tabs-vertical-tab-bg-hover: var(--color-bg-muted);
+  --tabs-vertical-tab-bg-active: var(--color-accent-subtle-bg);
+  --tabs-vertical-indicator-width: var(--border-width-strong);
+  --tabs-vertical-indicator-radius: var(--radius-sm);
+
+  // Count pill
+  --tabs-count-bg: var(--color-bg-muted);
+  --tabs-count-fg: var(--color-fg-muted);
+  --tabs-count-bg-active: var(--color-accent-subtle-bg);
+  --tabs-count-fg-active: var(--color-accent);
+  --tabs-count-radius: var(--radius-sm);
+  --tabs-count-padding-x: var(--space-1);
+  --tabs-count-font-size: var(--font-size-xs);
+  --tabs-count-font-weight: var(--font-weight-semibold);
+}