@24vlh/vds 0.1.0

package/dist/components/tables.css

@@ -0,0 +1,591 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Tables System
+ *
+ *  Responsibilities:
+ *    - Provide full table architecture: wrappers, panels, headers, body,
+ *      sticky headers/cols, row states, groups, expandable rows
+ *    - Implement visual variants (bordered/minimal/striped/inset/clear)
+ *    - Supply density modes (A/B/C/compact) + HF mode for high-frequency data
+ *    - Define numerical, currency, percent, and trend helpers using
+ *      tabular-nums, masks, and semantic lanes
+ *    - Support empty/loading states, responsive collapse, and metric tables
+ *
+ *  System Notes:
+ *    - 100% token-driven: spacing, borders, radii, text-scales, numeric
+ *      variants, semantic colours
+ *    - Pure CSS; JS optional only for toggling expandable rows
+ *    - Compatible with skeleton loaders, overlays, finance states, and
+ *      dark/light themes
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. TABLE TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+[data-vds-table],
+.vds-table {
+    --table-currency-tint: color-mix(in srgb, currentColor 50%, transparent 30%);
+}
+
+/* ---------------------------------------------------------
+   2. TABLE WRAPPERS & PANELS
+--------------------------------------------------------- */
+
+.table-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.table-panel {
+    background-color: var(--color-surface);
+    border-radius: var(--radius-md);
+    border: var(--border-width) solid var(--color-border-subtle);
+    box-shadow: var(--shadow-xs);
+    padding: var(--space-4);
+}
+
+.table-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    margin-bottom: var(--space-3);
+}
+
+.table-panel__title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text);
+}
+
+.table-panel__meta {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   3. BASE TABLE STRUCTURE
+--------------------------------------------------------- */
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    background-color: var(--color-surface);
+    color: var(--color-text);
+
+    --table-cell-pad-y: var(--space-3);
+    --table-cell-pad-x: var(--space-4);
+    --table-cell-font-size: var(--text-sm);
+}
+
+.table th,
+.table td {
+    padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
+    border-bottom: var(--border-width) solid var(--color-border-subtle);
+    vertical-align: middle;
+    text-align: left;
+    font-size: var(--table-cell-font-size);
+}
+
+.table th {
+    font-weight: 600;
+    color: var(--color-text);
+    background-color: var(--color-surface-subtle);
+    border-bottom: var(--border-width-strong) solid var(--color-border-strong);
+    white-space: nowrap;
+    font-size: var(--text-sm);
+}
+
+.table caption {
+    caption-side: top;
+    text-align: left;
+    margin-bottom: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   4. DENSITY (A/B/C) & COMPACT
+--------------------------------------------------------- */
+
+.table--a {
+    --table-cell-pad-y: var(--space-4);
+    --table-cell-pad-x: var(--space-5);
+    --table-cell-font-size: var(--text-md);
+}
+
+.table--b {
+    --table-cell-pad-y: var(--space-3);
+    --table-cell-pad-x: var(--space-4);
+    --table-cell-font-size: var(--text-sm);
+}
+
+.table--c {
+    --table-cell-pad-y: var(--space-2);
+    --table-cell-pad-x: var(--space-3);
+    --table-cell-font-size: var(--text-xs);
+}
+
+.table--compact {
+    --table-cell-pad-y: var(--space-1);
+}
+
+/* ---------------------------------------------------------
+   5. VISUAL VARIANTS
+--------------------------------------------------------- */
+
+.table--bordered th,
+.table--bordered td {
+    border: var(--border-width) solid var(--color-border-subtle);
+}
+
+.table--no-borders th,
+.table--no-borders td {
+    border: none;
+}
+
+.table--striped tbody tr:nth-child(odd) {
+    background-color: var(--color-surface-subtle);
+}
+
+.table--hover tbody tr:hover {
+    background-color: var(--color-surface-soft);
+}
+
+.table--minimal th,
+.table--minimal td {
+    background-color: transparent;
+    border-bottom-color: var(--color-border-subtle);
+}
+
+.table--clear th,
+.table--clear td {
+    border: none;
+    background-color: transparent;
+}
+
+.table--inset {
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
+.table--truncate-cells th,
+.table--truncate-cells td {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* ---------------------------------------------------------
+   6. STICKY HEADER / COL
+--------------------------------------------------------- */
+
+.table--sticky-header thead th {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+    background-color: var(--color-bg-elevated, var(--color-surface));
+    box-shadow: 0 1px 0 var(--color-border-subtle);
+}
+
+.table--sticky-col td:first-child,
+.table--sticky-col th:first-child {
+    position: sticky;
+    left: 0;
+    z-index: var(--z-sticky-col);
+    background-color: var(--color-bg-elevated, var(--color-surface));
+}
+
+/* ---------------------------------------------------------
+   7. ROW STATES
+--------------------------------------------------------- */
+
+.table-row--selected {
+    background-color: var(--color-accent-soft);
+}
+
+.table-row--success {
+    background-color: var(--table-row-good-bg, var(--color-success-soft));
+}
+
+.table-row--danger {
+    background-color: var(--table-row-bad-bg, var(--color-danger-soft));
+}
+
+.table-row--warning {
+    background-color: var(--table-row-warning-bg, var(--color-warning-soft));
+}
+
+.table-row--info {
+    background-color: var(--table-row-info-bg, var(--color-info-soft));
+}
+
+.table-row--muted {
+    background-color: var(--table-row-muted-bg, var(--color-muted-bg));
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   8. INLINE ACTIONS
+--------------------------------------------------------- */
+
+.table-actions {
+    display: flex;
+    gap: var(--space-2);
+    align-items: center;
+}
+
+.table-actions .icon {
+    width: var(--icon-sm);
+    height: var(--icon-sm);
+    color: var(--color-icon-muted);
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+.table-actions .icon:hover {
+    color: var(--color-icon-strong);
+}
+
+/* ---------------------------------------------------------
+   9. EXPANDABLE ROWS
+--------------------------------------------------------- */
+
+.table-row--expandable {
+    cursor: pointer;
+}
+
+.table-row--details {
+    display: none;
+}
+
+.table-row--expanded + .table-row--details,
+.table-row--details[data-expanded="true"] {
+    display: table-row;
+}
+
+.table-row--details td {
+    padding: var(--space-4);
+    background-color: var(--color-surface-subtle);
+}
+
+/* ---------------------------------------------------------
+   10. GROUP HEADERS
+--------------------------------------------------------- */
+
+.table-group-header th {
+    background-color: var(--color-surface-soft);
+    font-weight: 600;
+    padding-top: var(--space-3);
+    padding-bottom: var(--space-2);
+    border-top: var(--border-width-strong) solid var(--color-border-strong);
+}
+
+/* ---------------------------------------------------------
+   11. METRIC TABLES
+--------------------------------------------------------- */
+
+.metric-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.metric-table tr:not(:last-child) td {
+    border-bottom: var(--border-width) solid var(--color-border-subtle);
+}
+
+.metric-table__label {
+    font-weight: 500;
+    color: var(--color-text-muted);
+    padding: var(--space-2) 0;
+    font-size: var(--text-xs);
+}
+
+.metric-table__value {
+    text-align: right;
+    font-weight: 600;
+    padding: var(--space-2) 0;
+    font-size: var(--text-sm);
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}
+
+/* ---------------------------------------------------------
+   12. EMPTY & LOADING STATES
+--------------------------------------------------------- */
+
+.table-empty {
+    text-align: center;
+    padding: var(--space-6) 0;
+    color: var(--color-text-muted);
+}
+
+.table-empty__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.table-empty__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.5rem;
+    margin-bottom: var(--space-2, 0.5rem);
+}
+
+.table-loading td {
+    position: relative;
+    color: transparent;
+    overflow: hidden;
+}
+
+.table-loading td::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-150%);
+    background: linear-gradient(90deg, transparent, var(--color-muted-bg), transparent);
+    animation: table-loading 1.6s infinite;
+}
+
+@keyframes table-loading {
+    0% {
+        transform: translateX(-150%);
+    }
+    100% {
+        transform: translateX(150%);
+    }
+}
+
+/* ---------------------------------------------------------
+   13. RESPONSIVE COLLAPSE
+--------------------------------------------------------- */
+
+@media (max-width: 640px) {
+    .table--collapse thead {
+        display: none;
+    }
+
+    .table--collapse tbody tr {
+        display: block;
+        border: var(--border-width) solid var(--color-border-subtle);
+        margin-bottom: var(--space-4);
+        border-radius: var(--radius-md);
+        background-color: var(--color-surface);
+        overflow: hidden;
+    }
+
+    .table--collapse tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: var(--space-3);
+        border-bottom: var(--border-width) solid var(--color-border-subtle);
+        font-size: var(--text-sm);
+    }
+
+    .table--collapse tbody td:last-child {
+        border-bottom: none;
+    }
+
+    .table--collapse tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        color: var(--color-text-muted);
+        margin-right: var(--space-2);
+        font-size: var(--text-xs);
+    }
+}
+
+/* ---------------------------------------------------------
+   14. HIGH FREQUENCY TABLE (HF)
+--------------------------------------------------------- */
+
+.table--hf {
+    font-size: var(--text-xs);
+}
+
+.table--hf th,
+.table--hf td {
+    padding: var(--space-1) var(--space-2);
+    border: var(--border-width) solid var(--color-border-subtle);
+}
+
+.table--hf thead th {
+    background-color: var(--color-surface-subtle);
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+    border-bottom: var(--border-width-strong) solid var(--color-border-strong);
+}
+
+.table--hf td[data-type="num"] {
+    text-align: right;
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}
+
+/* ---------------------------------------------------------
+   15. NUMERIC / CURRENCY / PERCENT HELPERS (SPAN-BASED)
+--------------------------------------------------------- */
+
+.t-num,
+.t-pct {
+    text-align: right;
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.t-cur {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+
+.cur-eur::before {
+    content: "€";
+}
+
+.cur-usd::before {
+    content: "$";
+}
+
+.cur-gbp::before {
+    content: "£";
+}
+
+.cur-ron::before {
+    content: "RON";
+}
+
+.cur-chf::before {
+    content: "CHF";
+}
+
+.cur-jpy::before {
+    content: "¥";
+}
+
+.cur-eur::before,
+.cur-usd::before,
+.cur-gbp::before,
+.cur-ron::before,
+.cur-chf::before,
+.cur-jpy::before {
+    margin-right: var(--space-1);
+    font-size: var(--text-xxxs);
+    font-weight: 600;
+    color: var(--table-currency-tint);
+}
+
+.t-pct {
+    color: inherit;
+}
+
+/* ---------------------------------------------------------
+   16. TREND HELPERS (SPAN-BASED)
+--------------------------------------------------------- */
+
+.t-trend {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    text-align: right;
+    width: 100%;
+}
+
+.t-up,
+.t-down,
+.t-flat {
+    display: inline-flex;
+    align-items: center;
+}
+
+.t-up {
+    color: var(--table-trend-up, var(--color-success-strong));
+}
+
+.t-down {
+    color: var(--table-trend-down, var(--color-danger-strong));
+}
+
+.t-flat {
+    color: var(--table-trend-flat, var(--color-text-muted));
+}
+
+.t-up::before,
+.t-down::before,
+.t-flat::before {
+    content: "";
+    width: var(--icon-xs);
+    height: var(--icon-xs);
+    -webkit-mask-size: contain;
+            mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    background-color: currentColor;
+    margin-right: var(--space-1);
+}
+
+.t-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M9 15 H7 V8 H5 L8 1 L11 8 H9 Z'/></svg>");
+            mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M9 15 H7 V8 H5 L8 1 L11 8 H9 Z'/></svg>");
+}
+
+.t-down::before {
+    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M7 1 H9 V8 H11 L8 15 L5 8 H7 Z'/></svg>");
+            mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M7 1 H9 V8 H11 L8 15 L5 8 H7 Z'/></svg>");
+}
+
+.t-flat::before {
+    -webkit-mask-image: url("data:image/svg+xml,<svg stroke='currentColor' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><line x1='3' y1='8' x2='13' y2='8' stroke-width='2'/></svg>");
+            mask-image: url("data:image/svg+xml,<svg stroke='currentColor' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><line x1='3' y1='8' x2='13' y2='8' stroke-width='2'/></svg>");
+}
+
+/* ---------------------------------------------------------
+   17. FINANCE ROW STATES (NAMESPACED)
+--------------------------------------------------------- */
+
+.table-fin--good {
+    background-color: var(--table-row-good-bg, var(--color-success-soft));
+}
+
+.table-fin--bad {
+    background-color: var(--table-row-bad-bg, var(--color-danger-soft));
+}
+
+.table-fin--warning {
+    background-color: var(--table-row-warning-bg, var(--color-warning-soft));
+}
+
+.table-fin--info {
+    background-color: var(--table-row-info-bg, var(--color-info-soft));
+}
+
+.table-fin--muted {
+    background-color: var(--table-row-muted-bg, var(--color-muted-bg));
+    color: var(--color-text-muted);
+}
+
+.table-fin--flagged {
+    background-color: var(--table-row-flagged-bg, var(--color-danger-soft));
+    border-left: var(--border-width-strong) solid var(--color-danger);
+}
+
+.table-fin--curious {
+    background-color: var(--table-row-curious-bg, var(--color-surface-subtle));
+    border-left: var(--border-width-strong) solid var(--color-accent);
+}

package/dist/components/tables.min.css

@@ -0,0 +1 @@
+.vds-table,[data-vds-table]{--table-currency-tint:color-mix(in srgb,currentColor 50%,transparent 30%)}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto;width:100%}.table-panel{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);padding:var(--space-4)}.table-panel__header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between;margin-bottom:var(--space-3)}.table-panel__title{color:var(--color-text);font-size:var(--text-sm);font-weight:600}.table-panel__meta{color:var(--color-text-muted);font-size:var(--text-xs)}.table{--table-cell-pad-y:var(--space-3);--table-cell-pad-x:var(--space-4);--table-cell-font-size:var(--text-sm);background-color:var(--color-surface);border-collapse:collapse;border-spacing:0;color:var(--color-text);width:100%}.table td,.table th{border-bottom:var(--border-width) solid var(--color-border-subtle);font-size:var(--table-cell-font-size);padding:var(--table-cell-pad-y) var(--table-cell-pad-x);text-align:left;vertical-align:middle}.table th{background-color:var(--color-surface-subtle);border-bottom:var(--border-width-strong) solid var(--color-border-strong);color:var(--color-text);font-size:var(--text-sm);font-weight:600;white-space:nowrap}.table caption{caption-side:top;color:var(--color-text-muted);font-size:var(--text-xs);margin-bottom:var(--space-2);text-align:left}.table--a{--table-cell-pad-y:var(--space-4);--table-cell-pad-x:var(--space-5);--table-cell-font-size:var(--text-md)}.table--b{--table-cell-pad-y:var(--space-3);--table-cell-pad-x:var(--space-4);--table-cell-font-size:var(--text-sm)}.table--c{--table-cell-pad-y:var(--space-2);--table-cell-pad-x:var(--space-3);--table-cell-font-size:var(--text-xs)}.table--compact{--table-cell-pad-y:var(--space-1)}.table--bordered td,.table--bordered th{border:var(--border-width) solid var(--color-border-subtle)}.table--no-borders td,.table--no-borders th{border:none}.table--striped tbody tr:nth-child(odd){background-color:var(--color-surface-subtle)}.table--hover tbody tr:hover{background-color:var(--color-surface-soft)}.table--minimal td,.table--minimal th{background-color:transparent;border-bottom-color:var(--color-border-subtle)}.table--clear td,.table--clear th{background-color:transparent;border:none}.table--inset{border-radius:var(--radius-md);overflow:hidden}.table--truncate-cells td,.table--truncate-cells th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table--sticky-header thead th{background-color:var(--color-bg-elevated,var(--color-surface));box-shadow:0 1px 0 var(--color-border-subtle);position:sticky;top:0;z-index:var(--z-sticky)}.table--sticky-col td:first-child,.table--sticky-col th:first-child{background-color:var(--color-bg-elevated,var(--color-surface));left:0;position:sticky;z-index:var(--z-sticky-col)}.table-row--selected{background-color:var(--color-accent-soft)}.table-row--success{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table-row--danger{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table-row--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table-row--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table-row--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table-actions{align-items:center;display:flex;gap:var(--space-2)}.table-actions .icon{color:var(--color-icon-muted);cursor:pointer;flex-shrink:0;height:var(--icon-sm);width:var(--icon-sm)}.table-actions .icon:hover{color:var(--color-icon-strong)}.table-row--expandable{cursor:pointer}.table-row--details{display:none}.table-row--details[data-expanded=true],.table-row--expanded+.table-row--details{display:table-row}.table-row--details td{background-color:var(--color-surface-subtle);padding:var(--space-4)}.table-group-header th{background-color:var(--color-surface-soft);border-top:var(--border-width-strong) solid var(--color-border-strong);font-weight:600;padding-bottom:var(--space-2);padding-top:var(--space-3)}.metric-table{border-collapse:collapse;width:100%}.metric-table tr:not(:last-child) td{border-bottom:var(--border-width) solid var(--color-border-subtle)}.metric-table__label{color:var(--color-text-muted);font-size:var(--text-xs);font-weight:500;padding:var(--space-2) 0}.metric-table__value{font-feature-settings:"tnum";font-size:var(--text-sm);font-variant-numeric:tabular-nums;font-weight:600;padding:var(--space-2) 0;text-align:right}.table-empty{color:var(--color-text-muted);padding:var(--space-6) 0;text-align:center}.table-empty__content{align-items:center;display:flex;flex-direction:column;text-align:center}.table-empty__icon{align-items:center;display:flex;justify-content:center;margin-bottom:.5rem;margin-bottom:var(--space-2,.5rem)}.table-loading td{color:transparent;overflow:hidden;position:relative}.table-loading td:after{animation:table-loading 1.6s infinite;background:linear-gradient(90deg,transparent,var(--color-muted-bg),transparent);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transform:translateX(-150%)}@keyframes table-loading{0%{transform:translateX(-150%)}to{transform:translateX(150%)}}@media (max-width:640px){.table--collapse thead{display:none}.table--collapse tbody tr{background-color:var(--color-surface);border:var(--border-width) solid var(--color-border-subtle);border-radius:var(--radius-md);display:block;margin-bottom:var(--space-4);overflow:hidden}.table--collapse tbody td{border-bottom:var(--border-width) solid var(--color-border-subtle);display:flex;font-size:var(--text-sm);justify-content:space-between;padding:var(--space-3)}.table--collapse tbody td:last-child{border-bottom:none}.table--collapse tbody td:before{color:var(--color-text-muted);content:attr(data-label);font-size:var(--text-xs);font-weight:600;margin-right:var(--space-2)}}.table--hf{font-size:var(--text-xs)}.table--hf td,.table--hf th{border:var(--border-width) solid var(--color-border-subtle);padding:var(--space-1) var(--space-2)}.table--hf thead th{background-color:var(--color-surface-subtle);border-bottom:var(--border-width-strong) solid var(--color-border-strong);position:sticky;top:0;z-index:var(--z-sticky)}.t-num,.t-pct,.table--hf td[data-type=num]{font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:right}.t-cur,.t-num,.t-pct{white-space:nowrap}.t-cur{font-feature-settings:"tnum";align-items:baseline;display:flex;font-variant-numeric:tabular-nums;justify-content:space-between}.cur-eur:before{content:"€"}.cur-usd:before{content:"$"}.cur-gbp:before{content:"£"}.cur-ron:before{content:"RON"}.cur-chf:before{content:"CHF"}.cur-jpy:before{content:"¥"}.cur-chf:before,.cur-eur:before,.cur-gbp:before,.cur-jpy:before,.cur-ron:before,.cur-usd:before{color:var(--table-currency-tint);font-size:var(--text-xxxs);font-weight:600;margin-right:var(--space-1)}.t-pct{color:inherit}.t-trend{font-feature-settings:"tnum";align-items:center;display:flex;font-variant-numeric:tabular-nums;justify-content:space-between;text-align:right;white-space:nowrap;width:100%}.t-down,.t-flat,.t-up{align-items:center;display:inline-flex}.t-up{color:var(--table-trend-up,var(--color-success-strong))}.t-down{color:var(--table-trend-down,var(--color-danger-strong))}.t-flat{color:var(--table-trend-flat,var(--color-text-muted))}.t-down:before,.t-flat:before,.t-up:before{background-color:currentColor;content:"";height:var(--icon-xs);margin-right:var(--space-1);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:var(--icon-xs)}.t-up:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M9 15H7V8H5l3-7 3 7H9Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M9 15H7V8H5l3-7 3 7H9Z"/></svg>')}.t-down:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1h2v7h2l-3 7-3-7h2Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"><path d="M7 1h2v7h2l-3 7-3-7h2Z"/></svg>')}.t-flat:before{-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" d="M3 8h10"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg stroke="currentColor" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path stroke-width="2" d="M3 8h10"/></svg>')}.table-fin--good{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table-fin--bad{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table-fin--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table-fin--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table-fin--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table-fin--flagged{background-color:var(--table-row-flagged-bg,var(--color-danger-soft));border-left:var(--border-width-strong) solid var(--color-danger)}.table-fin--curious{background-color:var(--table-row-curious-bg,var(--color-surface-subtle));border-left:var(--border-width-strong) solid var(--color-accent)}