@orianatech/pire 0.2.0

package/dist/components.css

@@ -0,0 +1,352 @@
+/* Pire components — class contract.
+   Interactive state comes from React Aria data attributes ([data-hovered], [data-pressed],
+   [data-focus-visible], [data-selected], [data-disabled]), never from :hover alone, so touch
+   and keyboard behave identically. Every value is a token. */
+
+/* ---- focus ---------------------------------------------------------- */
+.pire [data-focus-visible],.pire[data-focus-visible],.pire-focusable[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
+
+/* ---- Button --------------------------------------------------------- */
+.pire-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--control-h-md);padding:0 var(--control-pad-x);font:var(--type-body-strong);letter-spacing:var(--ls-body);border-radius:var(--radius-1);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:var(--transition-control);appearance:none}
+.pire-btn[data-size="sm"]{height:var(--control-h-sm)}
+.pire-btn[data-size="lg"]{height:var(--control-h-lg);padding:0 var(--control-pad-x-lg)}
+.pire-btn[data-full-width="true"]{width:100%}
+.pire-btn[data-variant="primary"]{background:var(--accent-bg);color:var(--accent-fg);border-color:var(--accent-bg)}
+.pire-btn[data-variant="primary"][data-hovered]{background:var(--accent-bg-hover);border-color:var(--accent-bg-hover)}
+.pire-btn[data-variant="primary"][data-pressed]{background:var(--accent-bg-active);border-color:var(--accent-bg-active)}
+.pire-btn[data-variant="secondary"]{background:var(--surface-card);color:var(--accent-subtle-fg);border-color:var(--accent-bg)}
+.pire-btn[data-variant="secondary"][data-hovered]{background:var(--accent-subtle-bg)}
+.pire-btn[data-variant="secondary"][data-pressed]{background:var(--blue-20)}
+.pire-btn[data-variant="tertiary"]{background:transparent;color:var(--text-link)}
+.pire-btn[data-variant="tertiary"][data-hovered]{background:var(--surface-hover)}
+.pire-btn[data-variant="tertiary"][data-pressed]{background:var(--surface-active)}
+.pire-btn[data-variant="danger"]{background:var(--danger-bg);color:var(--accent-fg);border-color:var(--danger-bg)}
+.pire-btn[data-variant="danger"][data-hovered]{background:var(--danger-bg-hover);border-color:var(--danger-bg-hover)}
+.pire-btn[data-variant="emphasized"]{background:var(--surface-shell);color:var(--accent-fg);border-color:var(--surface-shell)}
+.pire-btn[data-variant="emphasized"][data-hovered]{background:var(--blue-80);border-color:var(--blue-80)}
+.pire-btn[data-disabled]{background:var(--surface-disabled);color:var(--text-disabled);border-color:var(--border-subtle);cursor:not-allowed}
+
+/* ---- IconButton ------------------------------------------------------ */
+.pire-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-md);height:var(--control-h-md);border:1px solid transparent;border-radius:var(--radius-1);background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-control)}
+.pire-iconbtn[data-size="sm"]{width:var(--control-h-sm);height:var(--control-h-sm)}
+.pire-iconbtn[data-size="lg"]{width:var(--control-h-lg);height:var(--control-h-lg)}
+.pire-iconbtn[data-hovered]{background:var(--surface-hover);color:var(--text-primary)}
+.pire-iconbtn[data-selected="true"]{background:var(--surface-selected);color:var(--accent-subtle-fg)}
+.pire-iconbtn[data-variant="outlined"]{border-color:var(--border-field);background:var(--surface-card)}
+.pire-iconbtn[data-variant="inverse"]{color:var(--text-inverse)}
+.pire-iconbtn[data-variant="inverse"][data-hovered]{background:var(--surface-shell-hover);color:var(--text-inverse)}
+.pire-iconbtn[data-disabled]{color:var(--text-disabled);cursor:not-allowed;background:transparent}
+
+/* ---- Badge / Tag ----------------------------------------------------- */
+.pire-badge{display:inline-flex;align-items:center;gap:var(--sp-1);height:20px;padding:0 var(--sp-2);border-radius:var(--radius-1);font:var(--type-label);white-space:nowrap;border:1px solid transparent}
+.pire-badge[data-status="positive"]{background:var(--status-positive-bg);color:var(--status-positive-fg);border-color:var(--status-positive-border)}
+.pire-badge[data-status="critical"]{background:var(--status-critical-bg);color:var(--status-critical-fg);border-color:var(--status-critical-border)}
+.pire-badge[data-status="negative"]{background:var(--status-negative-bg);color:var(--status-negative-fg);border-color:var(--status-negative-border)}
+.pire-badge[data-status="informative"]{background:var(--status-informative-bg);color:var(--status-informative-fg);border-color:var(--status-informative-border)}
+.pire-badge[data-status="neutral"]{background:var(--status-neutral-bg);color:var(--status-neutral-fg);border-color:var(--status-neutral-border)}
+.pire-tag{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-1) 0 var(--sp-2);border:1px solid var(--border-default);border-radius:var(--radius-1);background:var(--surface-sunken);color:var(--text-primary);font:var(--type-caption);white-space:nowrap}
+.pire-tag[data-disabled]{color:var(--text-disabled);background:var(--surface-disabled)}
+.pire-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;border-radius:var(--radius-1);background:transparent;color:var(--text-secondary);cursor:pointer}
+.pire-tag-remove[data-hovered]{background:var(--surface-active);color:var(--text-primary)}
+
+/* ---- Card ------------------------------------------------------------ */
+.pire-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2);box-shadow:var(--shadow-1);transition:var(--transition-surface)}
+.pire-card[data-interactive="true"]{cursor:pointer}
+.pire-card[data-interactive="true"]:hover{box-shadow:var(--shadow-2)}
+.pire-card-head{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--border-subtle)}
+.pire-card-title{font:var(--type-h4);letter-spacing:var(--ls-heading)}
+.pire-card-sub{font:var(--type-caption);color:var(--text-secondary)}
+.pire-card-body{padding:var(--sp-4);flex:1}
+.pire-card-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border-subtle)}
+
+/* ---- Field shell (Input, Select, ComboBox) --------------------------- */
+.pire-field{display:flex;flex-direction:column;gap:var(--sp-1)}
+.pire-field-label{font:var(--type-label);color:var(--text-label)}
+.pire-field-req{color:var(--status-negative-fg);margin-left:var(--sp-0h)}
+.pire-field-hint{font:var(--type-caption);color:var(--text-secondary)}
+.pire-field-error{display:flex;align-items:center;gap:var(--sp-1);font:var(--type-caption);color:var(--status-negative-fg)}
+.pire-field[data-layout="horizontal"]{display:grid;grid-template-columns:160px 1fr;column-gap:var(--sp-4);align-items:center}
+.pire-field[data-layout="horizontal"] .pire-field-label{text-align:right}
+.pire-field[data-layout="horizontal"] .pire-field-hint,.pire-field[data-layout="horizontal"] .pire-field-error{grid-column:2}
+
+.pire-control{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--control-h-md);width:100%;padding:0 var(--control-pad-x);background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-field);border-radius:var(--radius-1);transition:var(--transition-control)}
+.pire-control[data-size="sm"]{height:var(--control-h-sm)}
+.pire-control[data-size="lg"]{height:var(--control-h-lg)}
+.pire-control[data-full-width="false"]{width:auto}
+.pire-control[data-hovered]{border-color:var(--border-strong)}
+.pire-control[data-focus-within]{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
+/* The shell above owns the focus ring for the whole control, so nested focusables must not
+   paint a second one. base.css gives every input/button/[tabindex] a :focus-visible outline at
+   specificity (0,1,1), which outranks the plain .pire-input/.pire-datesegment `outline:none`
+   (0,1,0) regardless of import order — hence the class+pseudo-class selector here.
+   The descendant combinator deliberately excludes .pire-control itself: on Select the control
+   IS the focusable button and must keep its own ring. */
+.pire-control :focus-visible{outline:none}
+.pire-control[data-invalid="true"]{border-color:var(--status-negative-fg);border-bottom-width:2px}
+.pire-control[data-disabled]{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
+.pire-control[data-readonly="true"]{background:var(--surface-sunken)}
+.pire-input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:inherit;font:var(--type-body)}
+.pire-input[data-numeric="true"]{font:var(--type-numeric);text-align:right;font-variant-numeric:tabular-nums}
+.pire-input::placeholder{color:var(--text-tertiary)}
+.pire-affix{font:var(--type-caption);color:var(--text-secondary);flex:0 0 auto}
+.pire-leading-icon{color:var(--text-tertiary);flex:0 0 auto}
+
+/* ---- Select / ListBox popover ---------------------------------------- */
+.pire-select-value{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--type-body)}
+.pire-select-value[data-placeholder]{color:var(--text-tertiary)}
+/* The viewport clamp is load-bearing, not cosmetic. Sized to its trigger alone, a
+   full-bleed trigger makes the popover exactly the viewport width, while React Aria
+   positions it no closer than 12px to either edge (`useOverlayPosition`'s default
+   `containerPadding`) — so it starts at left:12 and ends 12px past the right edge,
+   giving every Popover-backed overlay (ComboBox, Select, DatePicker, Menu) a horizontal
+   scrollbar, worst on narrow viewports.
+   Both bounds are needed: CSS resolves min-width *after* max-width, so a bare
+   `max-width` would be ignored whenever `--trigger-width` exceeded it. The min-width is
+   therefore clamped at source, and the max-width caps content-driven growth as well. */
+.pire-popover{background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-2);box-shadow:var(--shadow-3);overflow:auto;max-height:min(320px,var(--trigger-height,320px));min-width:min(var(--trigger-width),calc(100vw - 24px));max-width:calc(100vw - 24px);animation:pire-fade-in var(--dur-fast) var(--ease-entrance)}
+.pire-listbox{outline:none;padding:var(--sp-1) 0;display:flex;flex-direction:column}
+.pire-option{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--row-h-condensed);padding:0 var(--sp-3);font:var(--type-body);color:var(--text-primary);cursor:pointer;outline:none}
+.pire-option[data-focused]{background:var(--surface-hover)}
+.pire-option[data-selected]{background:var(--surface-selected);color:var(--accent-subtle-fg);font:var(--type-body-strong)}
+.pire-option[data-disabled]{color:var(--text-disabled);cursor:not-allowed}
+
+/* ---- Checkbox / Radio / Switch --------------------------------------- */
+.pire-choice{display:inline-flex;align-items:flex-start;gap:var(--sp-2);font:var(--type-body);color:var(--text-primary);cursor:pointer}
+.pire-choice[data-disabled]{color:var(--text-disabled);cursor:not-allowed}
+.pire-choice-box{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-top:2px;border:1px solid var(--border-field);border-radius:var(--radius-1);background:var(--surface-card);color:var(--accent-fg);transition:var(--transition-control)}
+.pire-choice-box[data-radio="true"]{border-radius:var(--radius-pill)}
+.pire-choice[data-hovered] .pire-choice-box{border-color:var(--text-primary)}
+.pire-choice[data-selected] .pire-choice-box,.pire-choice[data-indeterminate] .pire-choice-box{background:var(--accent-bg);border-color:var(--accent-bg)}
+.pire-choice[data-selected] .pire-choice-box[data-radio="true"]{background:var(--surface-card);border-width:5px;border-color:var(--accent-bg)}
+.pire-choice[data-focus-visible] .pire-choice-box{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
+.pire-choice[data-disabled] .pire-choice-box{background:var(--surface-disabled);border-color:var(--border-default)}
+.pire-choice-hint{display:block;font:var(--type-caption);color:var(--text-secondary)}
+.pire-switch-track{flex:0 0 auto;width:36px;height:20px;border-radius:var(--radius-pill);background:var(--gray-40);padding:2px;transition:background-color var(--dur-fast) var(--ease-standard)}
+.pire-switch-thumb{width:16px;height:16px;border-radius:var(--radius-pill);background:var(--gray-0);box-shadow:var(--shadow-1);transition:transform var(--dur-fast) var(--ease-standard)}
+.pire-choice[data-selected] .pire-switch-track{background:var(--accent-bg)}
+.pire-choice[data-selected] .pire-switch-thumb{transform:translateX(16px)}
+.pire-choice[data-focus-visible] .pire-switch-track{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset)}
+.pire-radiogroup{display:flex;flex-direction:column;gap:var(--sp-2)}
+
+/* ---- Tabs ------------------------------------------------------------ */
+.pire-tablist{display:flex;gap:var(--sp-5);border-bottom:1px solid var(--border-subtle);overflow-x:auto}
+.pire-tab{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--shell-subheader-h);padding:0 var(--sp-0h);border-bottom:2px solid transparent;margin-bottom:-1px;font:var(--type-body);color:var(--text-secondary);cursor:pointer;white-space:nowrap;outline:none;transition:var(--transition-control)}
+.pire-tab[data-hovered]{color:var(--text-primary)}
+.pire-tab[data-selected]{color:var(--accent-subtle-fg);border-bottom-color:var(--accent-bg);font:var(--type-body-strong)}
+.pire-tab[data-disabled]{color:var(--text-disabled);cursor:not-allowed}
+.pire-tab-count{font:var(--type-code);color:var(--text-tertiary)}
+.pire-tabpanel{padding-top:var(--sp-4);outline:none}
+
+/* ---- Breadcrumb / Pagination ----------------------------------------- */
+.pire-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);margin:0;padding:0;list-style:none;font:var(--type-caption)}
+.pire-breadcrumb{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--text-secondary)}
+.pire-breadcrumb[data-current]{color:var(--text-primary)}
+.pire-breadcrumb a{color:var(--text-link);text-decoration:none;cursor:pointer}
+.pire-breadcrumb a[data-hovered]{text-decoration:underline}
+.pire-pagination{display:flex;align-items:center;gap:var(--sp-3);font:var(--type-caption);color:var(--text-secondary)}
+.pire-pagination-count{font:var(--type-code);color:var(--text-secondary)}
+
+/* ---- ShellBar / SideNav ---------------------------------------------- */
+.pire-shellbar{display:flex;align-items:center;gap:var(--sp-3);height:var(--shell-header-h);padding:0 var(--sp-3);background:var(--surface-shell);color:var(--text-inverse)}
+.pire-shellbar-mono{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-1);background:var(--gray-0);color:var(--surface-shell);font:var(--type-label);letter-spacing:var(--ls-caps)}
+.pire-shellbar-product{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;opacity:.8}
+.pire-shellbar-title{font:var(--type-body-strong)}
+.pire-shellbar-spacer{flex:1}
+.pire-avatar{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--blue-60);color:var(--text-inverse);font:var(--type-label)}
+.pire-sidenav{display:flex;flex-direction:column;width:var(--sidenav-w);flex:0 0 auto;background:var(--surface-nav);border-right:1px solid var(--border-subtle);overflow:auto}
+.pire-sidenav[data-collapsed="true"]{width:var(--sidenav-w-collapsed)}
+.pire-sidenav-group{padding:var(--sp-3) 0}
+.pire-sidenav-group + .pire-sidenav-group{border-top:1px solid var(--border-subtle)}
+.pire-sidenav-label{padding:0 var(--sp-4) var(--sp-2);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-tertiary)}
+.pire-sidenav-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;height:var(--row-h-regular);padding:0 var(--sp-4);border:0;border-left:3px solid transparent;background:transparent;color:var(--text-primary);font:var(--type-body);text-align:left;cursor:pointer;transition:var(--transition-control)}
+.pire-sidenav-item[data-hovered]{background:var(--surface-hover)}
+.pire-sidenav-item[data-selected="true"]{background:var(--surface-selected);border-left-color:var(--accent-bg);color:var(--accent-subtle-fg);font:var(--type-body-strong)}
+.pire-sidenav-count{margin-left:auto;font:var(--type-code);color:var(--text-tertiary)}
+.pire-sidenav-footer{margin-top:auto;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border-subtle)}
+
+/* ---- Feedback -------------------------------------------------------- */
+.pire-modal-overlay{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:var(--sp-6);background:var(--surface-overlay);animation:pire-fade-in var(--dur-fast) var(--ease-entrance)}
+.pire-modal{display:flex;flex-direction:column;width:100%;max-height:calc(100vh - var(--sp-16));background:var(--surface-raised);border-radius:var(--radius-2);box-shadow:var(--shadow-3);animation:pire-dialog-in var(--dur-base) var(--ease-entrance);outline:none}
+.pire-modal[data-size="sm"]{max-width:420px}
+.pire-modal[data-size="md"]{max-width:640px}
+.pire-modal[data-size="lg"]{max-width:960px}
+.pire-dialog{display:flex;flex-direction:column;min-height:0;outline:none}
+.pire-dialog-head{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--border-subtle)}
+.pire-dialog-title{font:var(--type-h3);letter-spacing:var(--ls-heading)}
+.pire-dialog-sub{font:var(--type-caption);color:var(--text-secondary)}
+.pire-dialog-body{padding:var(--sp-5);overflow:auto;font:var(--type-body)}
+.pire-dialog-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--border-subtle);background:var(--surface-sunken);border-radius:0 0 var(--radius-2) var(--radius-2)}
+.pire-sidepanel-overlay{position:fixed;inset:0;z-index:900;display:flex;justify-content:flex-end;background:var(--surface-overlay)}
+.pire-sidepanel{display:flex;flex-direction:column;height:100%;max-width:100vw;background:var(--surface-raised);box-shadow:var(--shadow-3);outline:none}
+.pire-sidepanel[data-entering]{animation:pire-panel-in var(--dur-moderate) var(--ease-entrance)}
+@keyframes pire-panel-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
+.pire-msg{display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-3);border:1px solid transparent;border-left-width:3px;border-radius:var(--radius-1);font:var(--type-body)}
+.pire-msg[data-kind="info"]{background:var(--status-informative-bg);border-color:var(--status-informative-border);border-left-color:var(--status-informative-fg);color:var(--status-informative-fg)}
+.pire-msg[data-kind="success"]{background:var(--status-positive-bg);border-color:var(--status-positive-border);border-left-color:var(--status-positive-fg);color:var(--status-positive-fg)}
+.pire-msg[data-kind="warning"]{background:var(--status-critical-bg);border-color:var(--status-critical-border);border-left-color:var(--status-critical-fg);color:var(--status-critical-fg)}
+.pire-msg[data-kind="error"]{background:var(--status-negative-bg);border-color:var(--status-negative-border);border-left-color:var(--status-negative-fg);color:var(--status-negative-fg)}
+.pire-msg-title{font:var(--type-body-strong)}
+.pire-msg-body{color:var(--text-primary)}
+.pire-toast{position:fixed;z-index:1000;bottom:var(--sp-6);display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-2);background:var(--gray-90);color:var(--text-inverse);box-shadow:var(--shadow-3);font:var(--type-body);animation:pire-toast-in var(--dur-base) var(--ease-entrance)}
+.pire-toast[data-position="bottom-center"]{left:50%;--pire-toast-tx:-50%;transform:translateX(-50%)}
+.pire-toast[data-position="bottom-right"]{right:var(--sp-6);--pire-toast-tx:0}
+.pire-toast-region{position:fixed;z-index:1000;bottom:var(--sp-6);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--sp-2);outline:none}
+.pire-progress{display:flex;flex-direction:column;gap:var(--sp-1)}
+.pire-progress-head{display:flex;justify-content:space-between;gap:var(--sp-3);font:var(--type-caption);color:var(--text-secondary)}
+.pire-progress-track{height:8px;border-radius:var(--radius-pill);background:var(--gray-20);overflow:hidden}
+.pire-progress[data-size="sm"] .pire-progress-track{height:4px}
+.pire-progress-fill{height:100%;background:var(--accent-bg);transition:width var(--dur-moderate) var(--ease-standard)}
+.pire-progress[data-status="positive"] .pire-progress-fill{background:var(--status-positive-fg)}
+.pire-progress[data-status="critical"] .pire-progress-fill{background:var(--status-critical-fg)}
+.pire-progress[data-status="negative"] .pire-progress-fill{background:var(--status-negative-fg)}
+.pire-tooltip{max-width:240px;padding:var(--sp-1) var(--sp-2);border-radius:var(--radius-1);background:var(--gray-90);color:var(--text-inverse);font:var(--type-caption);box-shadow:var(--shadow-2);animation:pire-fade-in var(--dur-fast) var(--ease-entrance)}
+
+/* ---- Data ------------------------------------------------------------ */
+.pire-table-wrap{overflow:auto;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2)}
+.pire-table{width:100%;border-collapse:collapse;font:var(--type-body)}
+.pire-table thead tr,.pire-table .pire-thead-row{height:var(--row-h-condensed);background:var(--surface-toolbar)}
+.pire-table[data-sticky="true"] thead{position:sticky;top:0;z-index:1}
+.pire-th{padding:0 var(--sp-3);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border-default);white-space:nowrap;text-align:left;outline:none}
+.pire-th[data-allows-sorting="true"]{cursor:pointer;user-select:none}
+.pire-th[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:calc(var(--focus-offset) * -1)}
+.pire-th-inner{display:inline-flex;align-items:center;gap:var(--sp-1);width:100%}
+.pire-th[data-align="right"] .pire-th-inner{justify-content:flex-end}
+.pire-tr{height:var(--row-h-regular);border-bottom:1px solid var(--border-subtle);outline:none}
+.pire-table[data-density="condensed"] .pire-tr{height:var(--row-h-condensed)}
+.pire-table[data-density="comfortable"] .pire-tr{height:var(--row-h-comfortable)}
+.pire-tr[data-hovered]{background:var(--surface-hover)}
+.pire-tr[data-selected]{background:var(--surface-selected)}
+.pire-tr[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:calc(var(--focus-offset) * -1)}
+.pire-tr[data-pressable="true"]{cursor:pointer}
+.pire-td{padding:0 var(--sp-3);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:none}
+.pire-td[data-numeric="true"]{font:var(--type-numeric);font-variant-numeric:tabular-nums;text-align:right}
+/* Density overrides sit after the .pire-th/.pire-td bases they override, so the cascade reads
+   top-to-bottom in source order rather than relying on specificity alone. */
+.pire-table[data-density="condensed"] .pire-th,.pire-table[data-density="condensed"] .pire-td{padding:0 var(--sp-2)}
+.pire-table-empty{padding:var(--sp-10);text-align:center;color:var(--text-secondary)}
+.pire-kpi{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-2);text-align:left;min-width:0;transition:var(--transition-surface)}
+.pire-kpi[data-pressable="true"]{cursor:pointer}
+.pire-kpi[data-hovered]{box-shadow:var(--shadow-2)}
+.pire-kpi-label{display:flex;align-items:center;gap:var(--sp-2);font:var(--type-label);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pire-kpi-value{font:var(--fw-semibold) var(--fs-display)/var(--lh-tight) var(--font-mono);letter-spacing:var(--ls-numeric);font-variant-numeric:tabular-nums;color:var(--text-numeric)}
+.pire-kpi[data-status="positive"] .pire-kpi-value{color:var(--status-positive-fg)}
+.pire-kpi[data-status="critical"] .pire-kpi-value{color:var(--status-critical-fg)}
+.pire-kpi[data-status="negative"] .pire-kpi-value{color:var(--status-negative-fg)}
+.pire-kpi-unit{font:var(--type-caption);color:var(--text-secondary);margin-left:var(--sp-1)}
+.pire-kpi-delta{display:inline-flex;align-items:center;gap:var(--sp-1);font:var(--type-caption)}
+.pire-kpi-delta[data-tone="positive"]{color:var(--status-positive-fg)}
+.pire-kpi-delta[data-tone="negative"]{color:var(--status-negative-fg)}
+.pire-kpi-delta[data-tone="neutral"]{color:var(--text-secondary)}
+.pire-kpi-foot{font:var(--type-caption);color:var(--text-tertiary)}
+.pire-objheader{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4) var(--page-pad-x);background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
+.pire-objheader-row{display:flex;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}
+.pire-objheader-title{font:var(--type-h1);letter-spacing:var(--ls-heading)}
+.pire-objheader-sub{display:flex;align-items:center;gap:var(--sp-2);font:var(--type-caption);color:var(--text-secondary)}
+.pire-objheader-id{font:var(--type-code);color:var(--text-secondary)}
+.pire-objheader-actions{margin-left:auto;display:flex;gap:var(--sp-2)}
+.pire-facts{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
+.pire-fact-label{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-tertiary)}
+.pire-fact-value{font:var(--type-body-strong)}
+.pire-fact-value[data-numeric="true"]{font:var(--type-numeric);font-variant-numeric:tabular-nums}
+.pire-filterbar{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface-toolbar);border:1px solid var(--border-subtle);border-radius:var(--radius-2)}
+.pire-filterbar-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3)}
+.pire-filterbar-foot{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
+.pire-filterbar-result{font:var(--type-caption);color:var(--text-secondary)}
+.pire-filterbar-actions{margin-left:auto;display:flex;gap:var(--sp-2)}
+
+/* ---- EmptyState ------------------------------------------------------ */
+.pire-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-16) var(--sp-6);text-align:center;color:var(--text-secondary)}
+.pire-empty[data-compact="true"]{padding:var(--sp-8) var(--sp-4)}
+.pire-empty-icon{color:var(--text-tertiary)}
+.pire-empty-title{font:var(--type-h4);color:var(--text-primary)}
+.pire-empty-body{max-width:44ch;font:var(--type-body)}
+
+/* ---- Avatar ----------------------------------------------------------- */
+.pire-avatar[data-size="lg"]{width:40px;height:40px;font:var(--type-body-strong)}
+.pire-avatar[data-size="sm"]{width:24px;height:24px;font:var(--type-micro,var(--type-label))}
+
+/* ---- SegmentedControl -------------------------------------------------- */
+.pire-segmented{display:inline-flex;padding:2px;gap:2px;background:var(--surface-sunken);border:1px solid var(--border-default);border-radius:var(--radius-1)}
+.pire-segmented-item{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:28px;padding:0 var(--sp-3);border:0;border-radius:var(--radius-1);background:transparent;color:var(--text-secondary);font:var(--type-label);cursor:pointer;transition:var(--transition-control)}
+.pire-segmented[data-size="md"] .pire-segmented-item{height:34px;font:var(--type-body)}
+.pire-segmented-item[data-hovered]{background:var(--surface-hover);color:var(--text-primary)}
+.pire-segmented-item[data-selected]{background:var(--surface-card);color:var(--accent-subtle-fg);box-shadow:var(--shadow-1)}
+.pire-segmented-item[data-disabled]{color:var(--text-disabled);cursor:not-allowed}
+
+/* ---- DescriptionList --------------------------------------------------- */
+.pire-dl{display:flex;flex-direction:column;gap:var(--sp-2);margin:0}
+.pire-dl[data-layout="grid"]{display:grid;grid-template-columns:repeat(var(--pire-dl-cols,3),minmax(0,1fr));gap:var(--sp-3) var(--sp-4)}
+.pire-dl-row{display:flex;justify-content:space-between;gap:var(--sp-3);align-items:baseline}
+.pire-dl[data-layout="grid"] .pire-dl-row{display:block}
+.pire-dl-term{font:var(--type-caption);color:var(--text-secondary);display:inline-flex;align-items:center;gap:var(--sp-1)}
+.pire-dl[data-layout="grid"] .pire-dl-term{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-tertiary)}
+.pire-dl-value{margin:0;font:var(--type-body)}
+.pire-dl-value[data-numeric="true"]{font:var(--type-numeric);font-variant-numeric:tabular-nums}
+.pire-dl-row[data-emphasis="true"]{border-top:1px solid var(--border-default);padding-top:var(--sp-2)}
+.pire-dl-row[data-emphasis="true"] .pire-dl-term{font:var(--type-body-strong);color:var(--text-primary)}
+.pire-dl-row[data-emphasis="true"] .pire-dl-value{font:var(--fw-semibold) var(--fs-h4)/1.3 var(--font-sans)}
+.pire-dl-row[data-emphasis="true"] .pire-dl-value[data-numeric="true"]{font:var(--fw-semibold) var(--fs-h4)/1.3 var(--font-mono)}
+
+/* ---- Timeline ---------------------------------------------------------- */
+.pire-timeline{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
+.pire-timeline-item{display:flex;gap:var(--sp-4);align-items:baseline;padding:var(--sp-2) 0;border-bottom:1px solid var(--border-subtle)}
+.pire-timeline-item:last-child{border-bottom:0}
+.pire-timeline-time{flex:0 0 auto;width:132px;font:var(--type-code);color:var(--text-secondary)}
+.pire-timeline-text{flex:1;font:var(--type-body)}
+.pire-timeline-actor{font:var(--type-caption);color:var(--text-secondary)}
+
+/* ---- LinkList ---------------------------------------------------------- */
+.pire-linklist{display:flex;flex-direction:column}
+.pire-linklist-item{display:flex;align-items:center;gap:var(--sp-2);width:100%;height:var(--row-h-regular);padding:0 var(--sp-1);border:0;border-bottom:1px solid var(--border-subtle);background:transparent;text-align:left;cursor:pointer;color:var(--text-primary);transition:var(--transition-control)}
+.pire-linklist-item:last-child{border-bottom:0}
+.pire-linklist-item[data-hovered]{background:var(--surface-hover)}
+.pire-linklist-key{font:var(--type-code)}
+.pire-linklist-text{flex:1;min-width:0;font:var(--type-caption);color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+
+/* ---- PageHeader / SectionHeader ---------------------------------------- */
+.pire-pageheader{display:flex;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap}
+.pire-pageheader-title{font:var(--type-h1);letter-spacing:var(--ls-heading);margin:0}
+.pire-pageheader-sub{margin:var(--sp-1) 0 0;font:var(--type-body);color:var(--text-secondary);max-width:80ch}
+.pire-pageheader-actions{margin-left:auto;display:flex;gap:var(--sp-2)}
+.pire-sectionhead{display:flex;align-items:baseline;gap:var(--sp-3)}
+.pire-sectionhead-actions{margin-left:auto;display:flex;align-items:baseline;gap:var(--sp-2)}
+
+/* ---- SelectionBar / FooterBar ------------------------------------------ */
+.pire-selectionbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--surface-selected);border:1px solid var(--status-informative-border);border-radius:var(--radius-1);font:var(--type-body)}
+.pire-selectionbar-count{font:var(--type-body-strong);color:var(--accent-subtle-fg)}
+.pire-selectionbar-actions{margin-left:auto;display:flex;gap:var(--sp-2)}
+.pire-footerbar{position:sticky;bottom:0;z-index:50;display:flex;align-items:center;gap:var(--sp-3);height:var(--control-h-lg);padding:0 var(--page-pad-x);background:var(--surface-card);border-top:1px solid var(--border-subtle);box-shadow:0 -1px 2px rgba(13,19,25,.08)}
+.pire-footerbar-actions{margin-left:auto;display:flex;gap:var(--sp-2)}
+.pire-footerbar-note{font:var(--type-caption);color:var(--text-secondary)}
+
+/* ---- NumberField ------------------------------------------------------- */
+.pire-stepper{display:flex;flex-direction:column;flex:0 0 auto;margin-right:calc(var(--control-pad-x) * -1 + 2px)}
+.pire-stepper-btn{display:flex;align-items:center;justify-content:center;width:24px;height:14px;border:0;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-1)}
+.pire-stepper-btn[data-hovered]{background:var(--surface-hover);color:var(--text-primary)}
+.pire-stepper-btn[data-disabled]{color:var(--text-disabled);cursor:not-allowed}
+
+/* ---- DatePicker / Calendar --------------------------------------------- */
+.pire-datefield{display:flex;align-items:center;flex:1;min-width:0;font:var(--type-numeric);font-variant-numeric:tabular-nums}
+.pire-datesegment{padding:0 1px;border-radius:2px;outline:none;color:var(--text-primary)}
+.pire-datesegment[data-type="literal"]{color:var(--text-tertiary)}
+.pire-datesegment[data-placeholder]{color:var(--text-tertiary)}
+.pire-datesegment[data-focused]{background:var(--accent-bg);color:var(--accent-fg)}
+.pire-calendar{padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2)}
+.pire-calendar-head{display:flex;align-items:center;gap:var(--sp-2)}
+.pire-calendar-title{flex:1;text-align:center;font:var(--type-body-strong)}
+.pire-calendar-grid{border-collapse:collapse}
+.pire-calendar-grid th{width:32px;height:24px;font:var(--type-label);color:var(--text-tertiary);font-weight:var(--fw-medium)}
+.pire-calendar-cell{width:32px;height:32px;text-align:center;vertical-align:middle;font:var(--type-numeric);border-radius:var(--radius-1);cursor:pointer;outline:none;color:var(--text-primary)}
+.pire-calendar-cell[data-outside-month]{visibility:hidden}
+.pire-calendar-cell[data-hovered]{background:var(--surface-hover)}
+.pire-calendar-cell[data-selected]{background:var(--accent-bg);color:var(--accent-fg)}
+.pire-calendar-cell[data-today]::after{content:"";display:block;width:4px;height:2px;margin:-4px auto 0;background:currentColor}
+.pire-calendar-cell[data-disabled],.pire-calendar-cell[data-unavailable]{color:var(--text-disabled);cursor:not-allowed;text-decoration:line-through}
+.pire-calendar-cell[data-focus-visible]{outline:var(--focus-w) solid var(--focus-color);outline-offset:-1px}
+
+/* ---- Reduced motion --------------------------------------------------- */
+@media (prefers-reduced-motion: reduce){.pire-modal,.pire-toast,.pire-popover,.pire-tooltip,.pire-sidepanel{animation:none}
+/* !important is the point here: this must beat every component transition, including any a
+   consuming app has layered on top. Honouring the OS motion preference outranks the style rule. */
+/* biome-ignore lint/complexity/noImportantStyles: accessibility override must win unconditionally */
+*,*::before,*::after{transition-duration:1ms!important}}