@24vlh/vds 0.1.10 → 0.2.1

package/dist/components/tables.css

@@ -64,6 +64,13 @@
     color: var(--color-text-muted);
 }
 
+.table-panel__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+}
+
 /* ---------------------------------------------------------
    3. BASE TABLE STRUCTURE
 --------------------------------------------------------- */
@@ -80,6 +87,10 @@
     --table-cell-font-size: var(--text-sm);
 }
 
+.table--fixed {
+    table-layout: fixed;
+}
+
 .table th,
 .table td {
     padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
@@ -98,6 +109,32 @@
     font-size: var(--text-sm);
 }
 
+.table-cell--right {
+    text-align: right;
+}
+
+.table-cell--center {
+    text-align: center;
+}
+
+.table-cell--muted {
+    color: var(--color-text-muted);
+}
+
+.table-cell--strong {
+    font-weight: 600;
+}
+
+.table-cell--nowrap {
+    white-space: nowrap;
+}
+
+.table-cell--truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .table caption {
     caption-side: top;
     text-align: left;
@@ -178,6 +215,11 @@
     text-overflow: ellipsis;
 }
 
+.table--nowrap th,
+.table--nowrap td {
+    white-space: nowrap;
+}
+
 /* ---------------------------------------------------------
    6. STICKY HEADER / COL
 --------------------------------------------------------- */
@@ -196,37 +238,56 @@
     left: 0;
     z-index: var(--z-sticky-col);
     background-color: var(--color-bg-elevated, var(--color-surface));
+    box-shadow: 1px 0 0 var(--color-border-subtle);
+}
+
+.table--sticky-col-end td:last-child,
+.table--sticky-col-end th:last-child {
+    position: sticky;
+    right: 0;
+    z-index: var(--z-sticky-col);
+    background-color: var(--color-bg-elevated, var(--color-surface));
+    box-shadow: -1px 0 0 var(--color-border-subtle);
 }
 
 /* ---------------------------------------------------------
    7. ROW STATES
 --------------------------------------------------------- */
 
-.table-row--selected {
+.table tbody tr.table-row--selected {
     background-color: var(--color-accent-soft);
 }
 
-.table-row--success {
+.table tbody tr.table-row--success {
     background-color: var(--table-row-good-bg, var(--color-success-soft));
 }
 
-.table-row--danger {
+.table tbody tr.table-row--danger {
     background-color: var(--table-row-bad-bg, var(--color-danger-soft));
 }
 
-.table-row--warning {
+.table tbody tr.table-row--warning {
     background-color: var(--table-row-warning-bg, var(--color-warning-soft));
 }
 
-.table-row--info {
+.table tbody tr.table-row--info {
     background-color: var(--table-row-info-bg, var(--color-info-soft));
 }
 
-.table-row--muted {
+.table tbody tr.table-row--muted {
     background-color: var(--table-row-muted-bg, var(--color-muted-bg));
     color: var(--color-text-muted);
 }
 
+.table tr.table-row--summary {
+    font-weight: 600;
+    background-color: var(--color-surface-subtle);
+}
+
+.table--selectable tbody tr {
+    cursor: pointer;
+}
+
 /* ---------------------------------------------------------
    8. INLINE ACTIONS
 --------------------------------------------------------- */
@@ -493,7 +554,24 @@
 }
 
 /* ---------------------------------------------------------
-   16. TREND HELPERS (SPAN-BASED)
+   16. FOOTER / SUMMARY ROWS
+--------------------------------------------------------- */
+
+.table tfoot td {
+    border-top: var(--border-width-strong) solid var(--color-border-strong);
+    background-color: var(--color-surface-subtle);
+    font-weight: 600;
+}
+
+.table--sticky-footer tfoot td {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--z-sticky);
+    background-color: var(--color-bg-elevated, var(--color-surface));
+}
+
+/* ---------------------------------------------------------
+   17. TREND HELPERS (SPAN-BASED)
 --------------------------------------------------------- */
 
 .t-trend {
@@ -556,36 +634,36 @@
 }
 
 /* ---------------------------------------------------------
-   17. FINANCE ROW STATES (NAMESPACED)
+   18. FINANCE ROW STATES (NAMESPACED)
 --------------------------------------------------------- */
 
-.table-fin--good {
+.table tbody tr.table-fin--good {
     background-color: var(--table-row-good-bg, var(--color-success-soft));
 }
 
-.table-fin--bad {
+.table tbody tr.table-fin--bad {
     background-color: var(--table-row-bad-bg, var(--color-danger-soft));
 }
 
-.table-fin--warning {
+.table tbody tr.table-fin--warning {
     background-color: var(--table-row-warning-bg, var(--color-warning-soft));
 }
 
-.table-fin--info {
+.table tbody tr.table-fin--info {
     background-color: var(--table-row-info-bg, var(--color-info-soft));
 }
 
-.table-fin--muted {
+.table tbody tr.table-fin--muted {
     background-color: var(--table-row-muted-bg, var(--color-muted-bg));
     color: var(--color-text-muted);
 }
 
-.table-fin--flagged {
+.table tbody tr.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 {
+.table tbody tr.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

@@ -1 +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)}
+.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-panel__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.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--fixed{table-layout:fixed}.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-cell--right{text-align:right}.table-cell--center{text-align:center}.table-cell--muted{color:var(--color-text-muted)}.table-cell--strong{font-weight:600}.table-cell--nowrap{white-space:nowrap}.table-cell--truncate{overflow:hidden;text-overflow:ellipsis;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--nowrap td,.table--nowrap th{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));box-shadow:1px 0 0 var(--color-border-subtle);left:0;position:sticky;z-index:var(--z-sticky-col)}.table--sticky-col-end td:last-child,.table--sticky-col-end th:last-child{background-color:var(--color-bg-elevated,var(--color-surface));box-shadow:-1px 0 0 var(--color-border-subtle);position:sticky;right:0;z-index:var(--z-sticky-col)}.table tbody tr.table-row--selected{background-color:var(--color-accent-soft)}.table tbody tr.table-row--success{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table tbody tr.table-row--danger{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table tbody tr.table-row--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table tbody tr.table-row--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table tbody tr.table-row--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table tr.table-row--summary{background-color:var(--color-surface-subtle);font-weight:600}.table--selectable tbody tr{cursor:pointer}.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}.table tfoot td{background-color:var(--color-surface-subtle);border-top:var(--border-width-strong) solid var(--color-border-strong);font-weight:600}.table--sticky-footer tfoot td{background-color:var(--color-bg-elevated,var(--color-surface));bottom:0;position:sticky;z-index:var(--z-sticky)}.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 tbody tr.table-fin--good{background-color:var(--table-row-good-bg,var(--color-success-soft))}.table tbody tr.table-fin--bad{background-color:var(--table-row-bad-bg,var(--color-danger-soft))}.table tbody tr.table-fin--warning{background-color:var(--table-row-warning-bg,var(--color-warning-soft))}.table tbody tr.table-fin--info{background-color:var(--table-row-info-bg,var(--color-info-soft))}.table tbody tr.table-fin--muted{background-color:var(--table-row-muted-bg,var(--color-muted-bg));color:var(--color-text-muted)}.table tbody tr.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 tbody tr.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/tabs.css

@@ -26,6 +26,20 @@
 [data-vds-tabs],
 .vds-tabs {
     --tabs-component-disabled-opacity: 0.48;
+    --tabs-pill-radius: var(--radius-pill);
+    --tabs-pill-bg: var(--color-surface);
+    --tabs-pill-border: var(--color-border-subtle);
+    --tabs-pill-text: var(--color-text-muted);
+    --tabs-pill-hover-bg: var(--color-surface-subtle);
+    --tabs-pill-active-bg: var(--color-accent-soft);
+    --tabs-pill-active-border: var(--color-accent);
+    --tabs-pill-active-text: var(--color-text);
+    --tabs-segmented-bg: var(--color-surface-subtle);
+    --tabs-segmented-border: var(--color-border-subtle);
+    --tabs-segmented-text: var(--color-text-muted);
+    --tabs-segmented-active-bg: var(--color-surface);
+    --tabs-segmented-active-text: var(--color-text);
+    --tabs-segmented-shadow: var(--shadow-1);
 }
 
 /* ---------------------------------------------------------
@@ -60,6 +74,16 @@
     width: 100%;
 }
 
+.tab-list--scroll {
+    overflow-x: auto;
+    scrollbar-width: thin;
+    -webkit-overflow-scrolling: touch;
+}
+
+.tab-list--scroll::-webkit-scrollbar {
+    height: 6px;
+}
+
 .tabs--inline .tab-list {
     width: auto;
 }
@@ -123,6 +147,16 @@
     color: var(--color-text-soft);
 }
 
+.tab--icon-only {
+    padding: var(--space-2);
+    min-width: var(--space-8);
+    min-height: var(--space-8);
+}
+
+.tab--icon-only .tab__icon {
+    margin-right: 0;
+}
+
 .tab:hover {
     color: var(--color-text);
     background-color: var(--color-surface-subtle);
@@ -161,7 +195,85 @@
 }
 
 /* ---------------------------------------------------------
-   6. DENSITY VARIANTS (A / default / C)
+   6A. TAB VARIANTS (PILL + SEGMENTED)
+--------------------------------------------------------- */
+
+.tabs--pills .tab-list {
+    border: none;
+    gap: var(--space-2);
+}
+
+.tabs--pills .tab {
+    border-radius: var(--tabs-pill-radius);
+    border: var(--border-width) solid var(--tabs-pill-border);
+    background-color: var(--tabs-pill-bg);
+    color: var(--tabs-pill-text);
+    box-shadow: none;
+}
+
+.tabs--pills .tab:hover {
+    background-color: var(--tabs-pill-hover-bg);
+    color: var(--color-text);
+}
+
+.tabs--pills .tab:focus-visible {
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+}
+
+.tabs--pills .tab--active {
+    background-color: var(--tabs-pill-active-bg);
+    border-color: var(--tabs-pill-active-border);
+    color: var(--tabs-pill-active-text);
+    box-shadow: none;
+}
+
+.tabs--pills .tab--active:hover {
+    background-color: var(--tabs-pill-active-bg);
+}
+
+.tabs--segmented .tab-list {
+    border: var(--border-width) solid var(--tabs-segmented-border);
+    border-radius: var(--radius-pill);
+    background-color: var(--tabs-segmented-bg);
+    gap: var(--space-1);
+    padding: var(--space-1);
+    width: auto;
+}
+
+.tabs--segmented.tabs--stretch .tab-list {
+    width: 100%;
+}
+
+.tabs--segmented .tab {
+    border-radius: var(--radius-pill);
+    background-color: transparent;
+    color: var(--tabs-segmented-text);
+    box-shadow: none;
+}
+
+.tabs--segmented .tab:hover {
+    background-color: var(--color-surface);
+    color: var(--color-text);
+}
+
+.tabs--segmented .tab:focus-visible {
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+}
+
+.tabs--segmented .tab--active {
+    background-color: var(--tabs-segmented-active-bg);
+    color: var(--tabs-segmented-active-text);
+    box-shadow: var(--tabs-segmented-shadow);
+}
+
+.tabs--segmented .tab--active:hover {
+    background-color: var(--tabs-segmented-active-bg);
+}
+
+/* ---------------------------------------------------------
+   7. DENSITY VARIANTS (A / default / C)
 --------------------------------------------------------- */
 
 .tabs--a .tab {
@@ -181,7 +293,7 @@
 }
 
 /* ---------------------------------------------------------
-   7. VERTICAL ORIENTATION
+   8. VERTICAL ORIENTATION
    Pattern:
    <div class="tabs tabs--vertical">
      <div class="tab-list">...</div>
@@ -237,7 +349,7 @@
 }
 
 /* ---------------------------------------------------------
-   8. TAB PANELS
+   9. TAB PANELS
 --------------------------------------------------------- */
 
 .tab-panel {
@@ -265,7 +377,7 @@
 }
 
 /* ---------------------------------------------------------
-   9. RESPONSIVE BEHAVIOUR
+   10. RESPONSIVE BEHAVIOUR
 --------------------------------------------------------- */
 
 @media (max-width: 768px) {

package/dist/components/tabs.min.css

@@ -1 +1 @@
-.vds-tabs,[data-vds-tabs]{--tabs-component-disabled-opacity:0.48}.tabs{display:flex;flex-direction:column;gap:var(--space-3);width:100%}.tabs--center{align-items:center}.tabs--right{align-items:flex-end}.tab-list{border-bottom:var(--border-width) solid var(--color-border-subtle);display:inline-flex;flex-wrap:nowrap;gap:0;position:relative;width:100%}.tabs--inline .tab-list{width:auto}.tabs--stretch .tab-list{width:100%}.tabs--stretch .tab{flex:1 1 0}.tab{background:none;border:none;border-radius:0;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-normal);line-height:1.2;padding:var(--space-2) var(--space-3);position:relative;transition:color var(--transition-normal),background-color var(--transition-normal),box-shadow var(--transition-normal);white-space:nowrap}.tab,.tab__icon{align-items:center;display:inline-flex;justify-content:center}.tab__icon{height:var(--icon-sm);margin-right:var(--space-2);width:var(--icon-sm)}.tab__badge{background-color:var(--color-muted-bg);border-radius:var(--radius-full);color:var(--color-text-soft);font-size:var(--text-xxs);margin-left:var(--space-2);padding:0 var(--space-2)}.tab:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.tab:focus-visible{box-shadow:0 var(--tab-indicator-height) 0 0 var(--focus-ring-color);color:var(--color-text);outline:none}.tab--disabled,.tab[disabled]{background:none;box-shadow:none;cursor:not-allowed;opacity:var(--tabs-component-disabled-opacity)}.tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent);color:var(--color-text);font-weight:var(--font-weight-semibold)}.tabs--on-muted .tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent-strong)}.tab--active:hover{background-color:transparent}.tabs--a .tab{font-size:var(--text-md);padding:var(--space-3) var(--space-4)}.tabs--c .tab{font-size:var(--text-xs);padding:var(--space-1_5) var(--space-2)}.tabs--vertical{align-items:flex-start;flex-direction:row;gap:var(--space-6)}.tabs--vertical .tab-list{align-items:stretch;border-bottom:none;border-right:var(--border-width) solid var(--color-border-subtle);flex-direction:column;min-width:var(--sidebar-width-md);width:auto}.tabs--vertical .tab{justify-content:flex-start;padding:var(--space-2) var(--space-3);text-align:left;width:100%}.tabs--vertical .tab--active{box-shadow:var(--tab-indicator-height) 0 0 0 var(--color-accent)}.tabs--vertical .tab:focus-visible{box-shadow:var(--tab-indicator-height) 0 0 0 var(--focus-ring-color)}.tabs--vertical.tabs--c .tab{padding:var(--space-1_5) var(--space-2)}.tabs--vertical.tabs--a .tab{padding:var(--space-3) var(--space-4)}.tab-panel{padding-top:var(--space-2);width:100%}.tab-panel.is-hidden,.tab-panel[hidden]{display:none}.tab-panel--padded{padding-top:var(--space-4)}.tabs--vertical .tab-panel,.tabs--vertical .tab-panels{flex:1 1 0}.tab-panels{padding-top:var(--space-2);width:100%}@media (max-width:768px){.tab-list{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:thin}.tab-list::-webkit-scrollbar{height:6px}.tabs--vertical{flex-direction:column;gap:var(--space-3)}.tabs--vertical .tab-list{border-bottom:var(--border-width) solid var(--color-border-subtle);border-right:none;flex-direction:row;min-width:0;width:100%}.tabs--vertical .tab{justify-content:center;text-align:center}.tabs--vertical .tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent)}.tabs--vertical .tab:focus-visible{box-shadow:0 var(--tab-indicator-height) 0 0 var(--focus-ring-color)}}
+.vds-tabs,[data-vds-tabs]{--tabs-component-disabled-opacity:0.48;--tabs-pill-radius:var(--radius-pill);--tabs-pill-bg:var(--color-surface);--tabs-pill-border:var(--color-border-subtle);--tabs-pill-text:var(--color-text-muted);--tabs-pill-hover-bg:var(--color-surface-subtle);--tabs-pill-active-bg:var(--color-accent-soft);--tabs-pill-active-border:var(--color-accent);--tabs-pill-active-text:var(--color-text);--tabs-segmented-bg:var(--color-surface-subtle);--tabs-segmented-border:var(--color-border-subtle);--tabs-segmented-text:var(--color-text-muted);--tabs-segmented-active-bg:var(--color-surface);--tabs-segmented-active-text:var(--color-text);--tabs-segmented-shadow:var(--shadow-1)}.tabs{display:flex;flex-direction:column;gap:var(--space-3);width:100%}.tabs--center{align-items:center}.tabs--right{align-items:flex-end}.tab-list{border-bottom:var(--border-width) solid var(--color-border-subtle);display:inline-flex;flex-wrap:nowrap;gap:0;position:relative;width:100%}.tab-list--scroll{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:thin}.tab-list--scroll::-webkit-scrollbar{height:6px}.tabs--inline .tab-list{width:auto}.tabs--stretch .tab-list{width:100%}.tabs--stretch .tab{flex:1 1 0}.tab{background:none;border:none;border-radius:0;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-normal);line-height:1.2;padding:var(--space-2) var(--space-3);position:relative;transition:color var(--transition-normal),background-color var(--transition-normal),box-shadow var(--transition-normal);white-space:nowrap}.tab,.tab__icon{align-items:center;display:inline-flex;justify-content:center}.tab__icon{height:var(--icon-sm);margin-right:var(--space-2);width:var(--icon-sm)}.tab__badge{background-color:var(--color-muted-bg);border-radius:var(--radius-full);color:var(--color-text-soft);font-size:var(--text-xxs);margin-left:var(--space-2);padding:0 var(--space-2)}.tab--icon-only{min-height:var(--space-8);min-width:var(--space-8);padding:var(--space-2)}.tab--icon-only .tab__icon{margin-right:0}.tab:hover{background-color:var(--color-surface-subtle);color:var(--color-text)}.tab:focus-visible{box-shadow:0 var(--tab-indicator-height) 0 0 var(--focus-ring-color);color:var(--color-text);outline:none}.tab--disabled,.tab[disabled]{background:none;box-shadow:none;cursor:not-allowed;opacity:var(--tabs-component-disabled-opacity)}.tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent);color:var(--color-text);font-weight:var(--font-weight-semibold)}.tabs--on-muted .tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent-strong)}.tab--active:hover{background-color:transparent}.tabs--pills .tab-list{border:none;gap:var(--space-2)}.tabs--pills .tab{background-color:var(--tabs-pill-bg);border:var(--border-width) solid var(--tabs-pill-border);border-radius:var(--tabs-pill-radius);box-shadow:none;color:var(--tabs-pill-text)}.tabs--pills .tab:hover{background-color:var(--tabs-pill-hover-bg);color:var(--color-text)}.tabs--pills .tab:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color)}.tabs--pills .tab--active{border-color:var(--tabs-pill-active-border);box-shadow:none;color:var(--tabs-pill-active-text)}.tabs--pills .tab--active,.tabs--pills .tab--active:hover{background-color:var(--tabs-pill-active-bg)}.tabs--segmented .tab-list{background-color:var(--tabs-segmented-bg);border:var(--border-width) solid var(--tabs-segmented-border);border-radius:var(--radius-pill);gap:var(--space-1);padding:var(--space-1);width:auto}.tabs--segmented.tabs--stretch .tab-list{width:100%}.tabs--segmented .tab{background-color:transparent;border-radius:var(--radius-pill);box-shadow:none;color:var(--tabs-segmented-text)}.tabs--segmented .tab:hover{background-color:var(--color-surface);color:var(--color-text)}.tabs--segmented .tab:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color)}.tabs--segmented .tab--active{box-shadow:var(--tabs-segmented-shadow);color:var(--tabs-segmented-active-text)}.tabs--segmented .tab--active,.tabs--segmented .tab--active:hover{background-color:var(--tabs-segmented-active-bg)}.tabs--a .tab{font-size:var(--text-md);padding:var(--space-3) var(--space-4)}.tabs--c .tab{font-size:var(--text-xs);padding:var(--space-1_5) var(--space-2)}.tabs--vertical{align-items:flex-start;flex-direction:row;gap:var(--space-6)}.tabs--vertical .tab-list{align-items:stretch;border-bottom:none;border-right:var(--border-width) solid var(--color-border-subtle);flex-direction:column;min-width:var(--sidebar-width-md);width:auto}.tabs--vertical .tab{justify-content:flex-start;padding:var(--space-2) var(--space-3);text-align:left;width:100%}.tabs--vertical .tab--active{box-shadow:var(--tab-indicator-height) 0 0 0 var(--color-accent)}.tabs--vertical .tab:focus-visible{box-shadow:var(--tab-indicator-height) 0 0 0 var(--focus-ring-color)}.tabs--vertical.tabs--c .tab{padding:var(--space-1_5) var(--space-2)}.tabs--vertical.tabs--a .tab{padding:var(--space-3) var(--space-4)}.tab-panel{padding-top:var(--space-2);width:100%}.tab-panel.is-hidden,.tab-panel[hidden]{display:none}.tab-panel--padded{padding-top:var(--space-4)}.tabs--vertical .tab-panel,.tabs--vertical .tab-panels{flex:1 1 0}.tab-panels{padding-top:var(--space-2);width:100%}@media (max-width:768px){.tab-list{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:thin}.tab-list::-webkit-scrollbar{height:6px}.tabs--vertical{flex-direction:column;gap:var(--space-3)}.tabs--vertical .tab-list{border-bottom:var(--border-width) solid var(--color-border-subtle);border-right:none;flex-direction:row;min-width:0;width:100%}.tabs--vertical .tab{justify-content:center;text-align:center}.tabs--vertical .tab--active{box-shadow:0 var(--tab-indicator-height) 0 0 var(--color-accent)}.tabs--vertical .tab:focus-visible{box-shadow:0 var(--tab-indicator-height) 0 0 var(--focus-ring-color)}}