e1c276a06e
Adds @hive/shared/tabs.js — createTabStrip(tabbar, {defaultId, onShow}):
a hash-routed tab strip that resolves controls by `[data-tab="<id>"]`
inside the passed container and panels by `[data-tab-pane="<id>"]`,
toggling `.hive-tab--active` + aria-selected + the panel's `hidden`, and
firing onShow(id) for per-tab side-effects. Always hash-routed (deep-
linkable + back/forward), no element-resolver callbacks (convention over
config), per the #1464 design review.
Wires it up: @hive/shared exports `./tabs.js` + `./tabs.css`, and
common.css @imports tabs.css (component structure, not a swap target, so
inlining is fine — unlike theme.css).
Migrates the logs sub-tabs as the first consumer: markup uses
`.hive-tab`/`data-tab`/`data-tab-pane`, logs.css drops the duplicated
base styles (keeps only its `flex:1` layout delta), and logs.js swaps its
activeTab/showTab/hashchange for createTabStrip (onShow lazy-loads the
SYSTEM tab). Behaviour-preserving. aria-selected is now standardised.
37 lines
1,023 B
CSS
37 lines
1,023 B
CSS
/* Shared tab-strip chrome — the generic tab/sub-tab styling used across
|
|
the dashboard tabbar, the logs sub-tabs, and the agent stat-window
|
|
selector. Behaviour lives in `@hive/shared/tabs.js` (createTabStrip).
|
|
|
|
Colours come from the semantic theme layer (theme.css → colors.css),
|
|
so this inherits theme-swap safety for free. Call sites keep a thin
|
|
variant class for size/spacing deltas; richer affordances (count
|
|
pills, the dashboard's responsive overflow ⋮ menu) layer on top in the
|
|
per-page CSS. See docs/web-ui/css-vars.md. */
|
|
|
|
.hive-tabbar {
|
|
display: flex;
|
|
gap: 0.2em;
|
|
}
|
|
|
|
.hive-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.35em 0.9em;
|
|
border-radius: 4px;
|
|
color: var(--subtext0);
|
|
text-decoration: none;
|
|
font-size: 0.85em;
|
|
letter-spacing: 0.05em;
|
|
cursor: pointer;
|
|
transition: background 100ms, color 100ms;
|
|
}
|
|
|
|
.hive-tab:hover {
|
|
background: var(--border);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.hive-tab--active {
|
|
background: var(--border);
|
|
color: var(--purple);
|
|
}
|