@aginies/ui 0.2.0 → 0.3.1

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; }
@@ -1084,7 +1107,7 @@ button.agn-card:disabled { cursor: default; opacity: .55; }
 .agn-card__footer { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: var(--space-1) var(--space-3); border-top: 1px solid var(--line); font-size: 12px; }
 
 /* ---- Toolbar ---- */
-.agn-toolbar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-2) 0; background: var(--bg); min-width: 0; }
+.agn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: var(--space-2) 0; background: var(--bg); min-width: 0; }
 .agn-toolbar--sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
 .agn-toolbar--bare { background: transparent; }
 .agn-toolbar__title { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text); white-space: nowrap; margin-right: var(--space-2); }
@@ -1142,16 +1165,6 @@ button.agn-card:disabled { cursor: default; opacity: .55; }
 @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)); } }
 
-/* ---- Tables at narrow widths: className="agn-sticky-first" on a DataTable keeps the first column (and the selection column before it) in place while the rest scrolls ---- */
-.agn-sticky-first .agn-table__th:first-child, .agn-sticky-first .agn-table__td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); }
-.agn-sticky-first .agn-table__th:first-child { background: var(--panel-2); z-index: calc(var(--z-raised) + 1); }
-.agn-sticky-first .agn-table__th--check + .agn-table__th, .agn-sticky-first .agn-table__td--check + .agn-table__td { position: sticky; left: 32px; z-index: 1; background: var(--panel); box-shadow: inset -1px 0 0 var(--line); }
-.agn-sticky-first .agn-table__th--check + .agn-table__th { background: var(--panel-2); z-index: calc(var(--z-raised) + 1); }
-.agn-sticky-first .agn-table__th:first-child:not(.agn-table__th--check), .agn-sticky-first .agn-table__td:first-child:not(.agn-table__td--check) { box-shadow: inset -1px 0 0 var(--line); }
-.agn-sticky-first .agn-table__row:hover > .agn-table__td:first-child, .agn-sticky-first .agn-table__row:hover > .agn-table__td--check + .agn-table__td { background: var(--panel-2); }
-.agn-sticky-first .agn-table__row--selected > .agn-table__td:first-child, .agn-sticky-first .agn-table__row--selected > .agn-table__td--check + .agn-table__td, .agn-sticky-first .agn-table__row--active > .agn-table__td:first-child, .agn-sticky-first .agn-table__row--active > .agn-table__td--check + .agn-table__td { background: linear-gradient(var(--selection), var(--selection)), var(--panel); }
-.agn-sticky-first .agn-table__row--active > .agn-table__td:first-child:not(.agn-table__td--check) { box-shadow: inset 2px 0 0 var(--signal), inset -1px 0 0 var(--line); }
-
 /* ---- KPI summary on a narrow page: wrapped items drop the dividing rule so no item starts indented ---- */
 
 /* ---- Room: inverted-theme section ---- */
@@ -1161,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); }
@@ -1574,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 */

package/package.json

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