@aginies/ui 0.1.0 → 0.3.0

package/dist/styles.css

@@ -757,6 +757,29 @@ a.agn-tile__title:hover, button.agn-tile__title:hover { color: var(--link); }
 .agn-table__spin { animation: agn-spin .8s linear infinite; margin-right: var(--space-2); vertical-align: middle; }
 .agn-table__skeleton { display: inline-block; height: 10px; border-radius: var(--radius-sm); background: var(--panel-3); animation: agn-skeleton var(--loader-pulse) var(--ease-loader) infinite; vertical-align: middle; }
 .agn-table__skeleton--box { width: 14px; height: 14px; }
+/* DataTable stickyFirst: the selection column and the first data column stay put while the table scrolls sideways; opaque grounds follow the row state; the hairline shadow shows only while scrolled */
+.agn-table--sticky-first .agn-table__th--check, .agn-table--sticky-first .agn-table__td--check, .agn-table__th--sticky, .agn-table__td--sticky { position: sticky; left: 0; z-index: 1; background: var(--panel); }
+.agn-table__th--check + .agn-table__th--sticky, .agn-table__td--check + .agn-table__td--sticky { left: var(--agn-table-check-w, 32px); }
+.agn-table__head .agn-table__th--sticky, .agn-table--sticky-first .agn-table__head .agn-table__th--check { z-index: calc(var(--z-raised) + 1); background: var(--panel-2); }
+.agn-table--striped .agn-table__row:nth-child(even) > .agn-table__td--sticky, .agn-table--sticky-first.agn-table--striped .agn-table__row:nth-child(even) > .agn-table__td--check { background: var(--bg-2); }
+.agn-table__row:hover > .agn-table__td--sticky, .agn-table--sticky-first .agn-table__row:hover > .agn-table__td--check { background: var(--panel-2); }
+.agn-table__row--selected > .agn-table__td--sticky, .agn-table__row--active > .agn-table__td--sticky, .agn-table__row--selected:hover > .agn-table__td--sticky, .agn-table__row--active:hover > .agn-table__td--sticky,
+.agn-table--sticky-first .agn-table__row--selected > .agn-table__td--check, .agn-table--sticky-first .agn-table__row--active > .agn-table__td--check, .agn-table--sticky-first .agn-table__row--selected:hover > .agn-table__td--check, .agn-table--sticky-first .agn-table__row--active:hover > .agn-table__td--check { background: linear-gradient(var(--selection), var(--selection)), var(--panel); }
+.agn-table__scroll--scrolled .agn-table__th--sticky, .agn-table__scroll--scrolled .agn-table__td--sticky { box-shadow: inset -1px 0 0 var(--line-2), 6px 0 8px -6px color-mix(in srgb, var(--neutral-950) 24%, transparent); }
+.agn-table__scroll--scrolled .agn-table__row--active > .agn-table__td--sticky:first-child { box-shadow: inset 2px 0 0 var(--signal), inset -1px 0 0 var(--line-2), 6px 0 8px -6px color-mix(in srgb, var(--neutral-950) 24%, transparent); }
+/* DataTable column priority: the row-detail toggle in the first visible cell and the detail row listing the hidden columns */
+.agn-table__lead { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; margin-left: calc(var(--space-1) * -1); vertical-align: middle; }
+.agn-table__lead-content { min-width: 0; }
+.agn-table__expand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mute); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter); }
+.agn-table__expand:hover { background: var(--panel-3); color: var(--text); }
+.agn-table__expand-icon { transition: transform var(--duration-fast) var(--ease-enter); }
+.agn-table__expand[aria-expanded="true"] .agn-table__expand-icon { transform: rotate(90deg); }
+.agn-table__detail-cell { padding: var(--space-2) var(--space-3) var(--space-3); background: var(--bg-2); border-bottom: 1px solid var(--line); }
+.agn-table__body .agn-table__detail:last-child .agn-table__detail-cell { border-bottom-color: transparent; }
+.agn-table__detail-list { position: sticky; left: var(--space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2) var(--space-5); margin: 0; }
+.agn-table__detail-item { min-width: 0; }
+.agn-table__detail-label { margin: 0 0 2px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
+.agn-table__detail-value { margin: 0; font-size: 13px; color: var(--text); white-space: normal; }
 @keyframes agn-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
 .agn-table__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: var(--space-1) var(--space-3); border-top: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--text-2); }
 .agn-table__footer-main { flex: 1; }
@@ -1060,7 +1083,7 @@ button.agn-gantt__bar, button.agn-gantt__milestone { cursor: pointer; }
 .agn-diff__split > .agn-diff__table + .agn-diff__table { border-left: 1px solid var(--line-2); }
 
 /* --- 50-layout.css --- */
-/* layout: Card, Toolbar, ToolbarSeparator, PageLayout, Room */
+/* layout: Card, Toolbar, ToolbarSeparator, PageLayout, Grid, GridItem, Room */
 
 /* ---- Card: flat, 1px line, radius-lg, no shadow ---- */
 .agn-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); color: var(--text); transition: border-color var(--duration-fast) var(--ease-enter); }
@@ -1103,17 +1126,46 @@ button.agn-card:disabled { cursor: default; opacity: .55; }
 .agn-toolbar .agn-btn:not(.agn-btn--primary):not(.agn-btn--sm):not(.agn-btn--xs):not(.agn-btn--lg) { height: var(--control-h-sm); }
 .agn-toolbar__sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 var(--space-1); flex-shrink: 0; }
 
-/* ---- PageLayout: the console frame ---- */
-.agn-page { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); color: var(--text); }
+/* ---- PageLayout: the console frame ----
+   It measures its own width and writes data-sidebar / data-panel / data-bp; the rules below read those, never the window.
+   docked ≥ 1280 (bp-xl) · rail 1024–1279 (bp-lg) · overlay drawer and sheet < 1024 · gutter 16 below 768 (bp-md). */
+.agn-page { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); color: var(--text); }
+.agn-page--narrow { --gutter-console: var(--space-4); }
 .agn-page__header { flex-shrink: 0; z-index: var(--z-sticky); }
-.agn-page__body { display: flex; flex: 1; min-height: 0; }
+.agn-page__bar { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; height: var(--header-h); padding: 0 var(--space-2); border-bottom: 1px solid var(--line); background: var(--panel); }
+.agn-page__bar-main { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-2); overflow: hidden; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
+.agn-page__body { position: relative; display: flex; flex: 1; min-height: 0; }
 .agn-page__nav { flex-shrink: 0; height: 100%; }
 .agn-page__main { flex: 1; min-width: 0; overflow: auto; }
 .agn-page__content { max-width: var(--agn-page-max, var(--content-max)); margin: 0 auto; padding: var(--space-5) var(--gutter-console); }
 .agn-page--flush .agn-page__content { padding: 0; max-width: none; height: 100%; min-height: 0; }
 .agn-page__panel { flex: 0 0 var(--agn-page-panel-w, var(--panel-w)); width: var(--agn-page-panel-w, var(--panel-w)); border-left: 1px solid var(--line); background: var(--panel); overflow: auto; }
-@media (max-width: 900px) { .agn-page__panel { display: none; } }
-@media (max-width: 640px) { .agn-page__content { padding: var(--space-4) var(--space-4); } }
+.agn-page__panel > .agn-panel { width: 100%; height: 100%; border-left: 0; }
+/* drawer (sidebar < 1024) and sheet (side panel < 1024): absolute inside the page, so a page in a frame keeps them in the frame */
+.agn-page__nav--drawer, .agn-page__panel--sheet { position: absolute; top: 0; bottom: 0; z-index: var(--z-panel); visibility: hidden; box-shadow: var(--shadow-sm); outline: none; transition: transform var(--duration-slow) var(--ease-enter), visibility 0s linear var(--duration-slow); }
+.agn-page__nav--drawer { left: 0; max-width: calc(100% - var(--sidebar-w-collapsed)); transform: translateX(-100%); }
+.agn-page__nav--drawer > .agn-sidebar { max-width: 100%; }
+.agn-page__panel--sheet { right: 0; width: var(--agn-page-panel-w, var(--panel-w)); max-width: calc(100% - var(--space-7)); transform: translateX(100%); }
+.agn-page__nav--open, .agn-page__panel--open { visibility: visible; transform: none; transition: transform var(--duration-slow) var(--ease-enter), visibility 0s; }
+.agn-page__scrim { position: absolute; inset: 0; z-index: calc(var(--z-panel) - 1); background: var(--overlay); animation: agn-page-fade var(--duration-slow) var(--ease-enter); }
+@keyframes agn-page-fade { from { opacity: 0; } to { opacity: 1; } }
+
+/* ---- Grid: 12 columns (grid-columns), grid-gap; container queries on its own width (px values = bp-sm … bp-2xl) ---- */
+.agn-grid { container: agn-grid / inline-size; display: grid; grid-template-columns: repeat(var(--agn-grid-cols, var(--grid-columns)), minmax(0, 1fr)); gap: var(--agn-grid-row-gap, var(--agn-grid-gap, var(--grid-gap))) var(--agn-grid-gap, var(--grid-gap)); min-width: 0; }
+.agn-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--agn-grid-min)), 1fr)); }
+.agn-grid--dense { grid-auto-flow: row dense; }
+.agn-grid--align-start { align-items: start; }
+.agn-grid--align-center { align-items: center; }
+.agn-grid--align-end { align-items: end; }
+.agn-grid__item { --agn-span: var(--agn-span-base, 12); grid-column: span var(--agn-span); min-width: 0; }
+.agn-grid--auto > .agn-grid__item { grid-column: auto; }
+@container agn-grid (min-width: 640px) { .agn-grid__item { --agn-span: var(--agn-span-sm, var(--agn-span-base, 12)); } }
+@container agn-grid (min-width: 768px) { .agn-grid__item { --agn-span: var(--agn-span-md, var(--agn-span-base, 12)); } }
+@container agn-grid (min-width: 1024px) { .agn-grid__item { --agn-span: var(--agn-span-lg, var(--agn-span-base, 12)); } }
+@container agn-grid (min-width: 1280px) { .agn-grid__item { --agn-span: var(--agn-span-xl, var(--agn-span-base, 12)); } }
+@container agn-grid (min-width: 1536px) { .agn-grid__item { --agn-span: var(--agn-span-2xl, var(--agn-span-base, 12)); } }
+
+/* ---- KPI summary on a narrow page: wrapped items drop the dividing rule so no item starts indented ---- */
 
 /* ---- Room: inverted-theme section ---- */
 .agn-room { background: var(--bg); color: var(--text); }
@@ -1122,7 +1174,7 @@ button.agn-card:disabled { cursor: default; opacity: .55; }
 .agn-room--pad-none { padding: 0; }
 
 /* --- 60-navigation.css --- */
-/* navigation: GlobalHeader, VerticalNavigation, Tabs, Breadcrumbs, Path, ProgressIndicator, SplitView, AppLauncher, PageHeader, BuilderHeader, BrandBand, Accordion, ExpandableSection, Carousel, SetupAssistant, WelcomeMat, MobileTabBar, Pagination, Stepper */
+/* navigation: GlobalHeader, VerticalNavigation, Tabs, Breadcrumbs, Path, ProgressIndicator, SplitView, AppLauncher, PageHeader, BuilderHeader, BrandBand, Accordion, ExpandableSection, Carousel, SetupAssistant, WelcomeMat, MobileTabBar, Pagination, Stepper, ActivityBar */
 
 /* ---- GlobalHeader: 48px ---- */
 .agn-gheader { display: flex; align-items: center; gap: var(--space-3); height: var(--header-h); padding: 0 var(--space-3) 0 var(--space-4); background: var(--panel); color: var(--text); border-bottom: 1px solid var(--line); }
@@ -1183,6 +1235,9 @@ button.agn-card:disabled { cursor: default; opacity: .55; }
 .agn-sidebar__resize:hover::after, .agn-sidebar--resizing .agn-sidebar__resize::after { background: var(--signal); }
 .agn-sidebar__resize:focus-visible { outline: none; }
 .agn-sidebar__resize:focus-visible::after { background: var(--focus); width: var(--focus-width); }
+/* PageLayout states: rail 1024–1279 (an expanded rail pushes the page; the user chose it), drawer < 1024 (full sidebar width over the page, no resize handle) */
+.agn-sidebar--drawer { border-right: 0; transition: none; }
+.agn-sidebar--collapsed .agn-sidebar__bottom { align-items: center; overflow: hidden; }
 .agn-launcher-trigger__chevron { color: var(--mute); flex-shrink: 0; }
 .agn-launcher-trigger:has(.agn-launcher-trigger__meta) { height: auto; min-height: var(--nav-item-h); padding-block: var(--space-1); }
 .agn-launcher-trigger .agn-nav-item__label { display: flex; flex-direction: column; min-width: 0; }
@@ -1333,7 +1388,13 @@ button.agn-pind__inner { cursor: pointer; }
 .agn-split__toggle { position: absolute; left: var(--space-2); bottom: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: var(--control-h-sm); height: var(--control-h-sm); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--mute); cursor: pointer; z-index: 2; }
 .agn-split__detail { flex: 1; min-width: 0; overflow: auto; }
 .agn-split__empty { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 160px; color: var(--mute); font-size: 13px; }
-@media (max-width: 640px) { .agn-split { flex-direction: column; } .agn-split__list { flex-basis: auto; width: auto; max-height: 40%; border-right: 0; border-bottom: 1px solid var(--line); } .agn-split__divider { display: none; } }
+/* measured on the SplitView itself: --narrow below 1024 (bp-lg) narrows the list; --stacked below stackBelow (default 768, bp-md) shows one pane at a time */
+.agn-split--narrow .agn-split__list { flex-basis: var(--agn-split-w, var(--panel-w)); width: var(--agn-split-w, var(--panel-w)); }
+.agn-split--stacked .agn-split__list { flex: 1 1 auto; width: auto; border-right: 0; }
+.agn-split--show-list .agn-split__detail, .agn-split--show-detail .agn-split__list { display: none; }
+.agn-split__back { position: sticky; top: 0; z-index: var(--z-raised); display: flex; align-items: center; height: 44px; padding: 0 var(--space-2); border-bottom: 1px solid var(--line); background: var(--panel); flex-shrink: 0; }
+.agn-split__back-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--link); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
+.agn-split__back-btn:hover { background: var(--panel-2); color: var(--link-hover); }
 
 /* ---- AppLauncher ---- */
 .agn-launcher { width: 360px; max-width: 100%; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-sm); }
@@ -1526,6 +1587,24 @@ button.agn-welcome__step:hover { background: var(--panel-2); }
 .agn-stepper--vertical .agn-stepper__line { left: calc(var(--agn-step-m) / 2 - 1px); top: calc(var(--agn-step-m) + 4px); bottom: 0; width: 2px; }
 .agn-stepper__step--done .agn-stepper__line { background: var(--ok); }
 
+/* ---- ActivityBar: 48px vertical icon strip that switches views (VS Code activity bar, IntelliJ tool-window bar) ---- */
+.agn-activitybar { display: flex; flex-direction: column; justify-content: space-between; width: 48px; flex: 0 0 48px; height: 100%; min-height: 0; background: var(--panel-2); border-right: 1px solid var(--line); }
+.agn-activitybar--right { border-right: 0; border-left: 1px solid var(--line); }
+.agn-activitybar__group { display: flex; flex-direction: column; }
+.agn-activitybar__group--footer { margin-top: auto; }
+.agn-activitybar__tip { display: flex; }
+.agn-activitybar__item { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; color: var(--mute); cursor: pointer; transition: color var(--duration-fast) var(--ease-enter), background-color var(--duration-fast) var(--ease-enter); }
+.agn-activitybar__item::after { content: ""; position: absolute; top: var(--space-2); bottom: var(--space-2); right: 0; width: 2px; border-radius: var(--radius-full); background: transparent; transition: background-color var(--duration-fast) var(--ease-enter); }
+.agn-activitybar--right .agn-activitybar__item::after { right: auto; left: 0; }
+.agn-activitybar__item:hover:not(:disabled) { color: var(--text); background: var(--panel-3); }
+.agn-activitybar__item--active { color: var(--text); }
+.agn-activitybar__item--active::after { background: var(--signal); }
+.agn-activitybar__item:disabled { cursor: not-allowed; opacity: .45; }
+.agn-activitybar__item .agn-product-icon { color: inherit; }
+.agn-activitybar__glyph { position: relative; display: inline-flex; align-items: center; justify-content: center; }
+.agn-activitybar__badge { position: absolute; top: -6px; left: 10px; box-shadow: 0 0 0 2px var(--panel-2); pointer-events: none; }
+.agn-activitybar__item:hover:not(:disabled) .agn-activitybar__badge { box-shadow: 0 0 0 2px var(--panel-3); }
+
 /* --- 70-feedback.css --- */
 /* feedback: AginiesLoader, Skeleton, PageSkeleton, Alert, Toast, ScopedNotification, Notification, Modal, Prompt, Popover, Tooltip, Spinner, ProgressBar, ProgressRing, SidePanel, DockedComposer, DockedUtilityBar, Publisher, EmptyState */
 /* AginiesLoader — the mark animated by keyframes only; tiers set the size, variants the motion */
@@ -1751,7 +1830,8 @@ button.agn-welcome__step:hover { background: var(--panel-2); }
 /* SidePanel */
 .agn-panel { display: flex; flex-direction: column; width: var(--panel-w); max-width: 100%; background: var(--panel); color: var(--text); border-left: 1px solid var(--line); }
 .agn-panel--lg { width: var(--panel-w-lg); }
-.agn-panel--overlay { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-panel); box-shadow: var(--shadow-sm); animation: agn-panel-in var(--duration-slow) var(--ease-enter); }
+.agn-panel--overlay { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-panel); max-width: calc(100% - var(--space-7)); box-shadow: var(--shadow-sm); outline: none; animation: agn-panel-in var(--duration-slow) var(--ease-enter); }
+.agn-panel-scrim { position: fixed; inset: 0; z-index: calc(var(--z-panel) - 1); background: var(--overlay); animation: agn-panel-fade var(--duration-slow) var(--ease-enter); }
 .agn-panel--docked { position: relative; height: 100%; }
 .agn-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-height: var(--header-h); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
 .agn-panel__heading { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
@@ -1762,6 +1842,7 @@ button.agn-welcome__step:hover { background: var(--panel-2); }
 .agn-panel__body { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4); font-size: 13px; }
 .agn-panel__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--panel); }
 @keyframes agn-panel-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
+@keyframes agn-panel-fade { from { opacity: 0; } to { opacity: 1; } }
 /* DockedComposer */
 .agn-composer { position: fixed; bottom: 0; z-index: var(--z-panel); display: flex; flex-direction: column; width: 480px; max-width: calc(100vw - 2 * var(--space-4)); max-height: 70vh; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow); }
 .agn-composer--right { right: var(--space-5); }
@@ -2273,8 +2354,9 @@ button.agn-block { cursor: pointer; }
 .agn-kpi .agn-stat__chart { margin-top: var(--space-1); }
 /* KpiRow — the page summary: no boxes, hairlines between */
 .agn-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); row-gap: var(--space-5); padding: var(--space-2) 0; }
-.agn-kpi-row > .agn-kpi--plain { border-left: 1px solid var(--line); }
-.agn-kpi-row > .agn-kpi--plain:first-child { border-left: 0; padding-left: 0; }
+.agn-kpi-row { margin-left: calc(-1 * var(--space-5)); overflow-x: clip; }
+/* Each item's divider sits 1px outside its column; the row reaches into its left padding and clips sideways, so whichever item starts a line, however the grid wraps, loses its divider. */
+.agn-kpi-row > .agn-kpi--plain { border-left: 1px solid var(--line); margin-left: -1px; }
 
 /* ChartCard — unit after the title, headline over the plot, the plot measured so the SVG is never stretched */
 .agn-chart-card__unit { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--mute); }
@@ -2398,9 +2480,10 @@ a.agn-insight__source:hover { color: var(--link-hover); text-decoration: underli
 .agn-flow__spin { animation: agn-spin 1s linear infinite; }
 .agn-flow__version { margin-left: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--mute); }
 
-/* LeaderboardWidget — rank · who · bar + value · change */
+/* LeaderboardWidget — rank · who · bar + value · change; below 400px the bar gives way and the value stays */
 .agn-leader .agn-card__body { padding-top: var(--space-2); }
-.agn-leader__head, .agn-leader__row { display: grid; grid-template-columns: 24px minmax(140px, 1.5fr) minmax(110px, 1fr) 64px; align-items: center; gap: var(--space-3); }
+.agn-leader { container-type: inline-size; }
+.agn-leader__head, .agn-leader__row { display: grid; grid-template-columns: 24px minmax(0, 1.5fr) minmax(0, 1fr) 64px; align-items: center; gap: var(--space-3); }
 .agn-leader__head { padding: var(--space-1) 0 var(--space-2); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
 .agn-leader__head > span:last-child { text-align: right; }
 .agn-leader__list { list-style: none; margin: 0; padding: 0; }
@@ -2460,3 +2543,4 @@ a.agn-insight__source:hover { color: var(--link-hover); text-decoration: underli
 .agn-comments__list > .agn-empty { padding: var(--space-4) 0; }
 .agn-comments__composer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--bg-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
 .agn-comments__mention { color: var(--link); font-weight: 500; }
+@container (max-width: 400px) { .agn-leader__head, .agn-leader__row { grid-template-columns: 20px minmax(0, 1fr) auto 56px; gap: var(--space-2); } .agn-leader__bar { display: none; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aginies/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Aginies Design System components for React: the agn- component layer over @aginies/tokens",
   "license": "MIT",
   "author": "Abra Partners",