sakana-element 2.2.0 → 2.3.0

package/dist/es/theme/Table.css

@@ -0,0 +1,680 @@
+/* ─── Table Variables ─── */
+.px-table {
+  --px-table-padding-y: 10px;
+  --px-table-padding-x: 14px;
+  --px-table-border-color: var(--px-border-color);
+  --px-table-bg-color: var(--px-bg-color-overlay);
+  --px-table-header-bg-color: var(--px-bg-color);
+  --px-table-row-hover-color: var(--px-fill-color-light);
+  --px-table-zebra-color: var(--px-fill-color);
+  --px-table-font-size: var(--px-font-size-base);
+  --px-table-shadow-color: var(--px-shadow-color);
+
+  /* Pixel-art interior styling */
+  --px-table-divider-color: var(--px-border-color-light);
+  --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+  --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
+  --px-table-footer-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-table-footer-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.05);
+  --px-table-hover-overlay: rgba(0, 0, 0, 0.04);
+  --px-table-body-dot-color: rgba(0, 0, 0, 0.03);
+
+  /* Body cell subtle bevel */
+  --px-table-cell-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.12);
+  --px-table-cell-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.03);
+
+  /* Reduced bevel for outline variant */
+  --px-table-reduced-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.15);
+  --px-table-reduced-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.04);
+  --px-table-reduced-footer-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.10);
+  --px-table-reduced-footer-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.03);
+}
+/* ─── Base Table Styles — Pixel Game Aesthetic ─── */
+.px-table {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: var(--px-font-family);
+  font-size: var(--px-table-font-size);
+  color: var(--px-text-color-primary);
+  background: transparent;
+  border: none;
+  box-sizing: border-box;
+  transition: none;
+  overflow: hidden;
+  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-table-shadow-color));
+}
+/* Border layer — filled with border color, clipped to pixel shape */
+.px-table::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-table-border-color);
+    clip-path: polygon(
+      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
+      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
+      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
+      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
+    );
+    z-index: 0;
+}
+/* Fill layer — inset by border width, filled with bg color */
+.px-table::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--px-table-bg-color);
+    clip-path: polygon(
+      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
+      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
+      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
+      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
+    );
+    z-index: 0;
+}
+/* ─── Inner Scroll Wrapper ─── */
+.px-table__inner {
+  position: relative;
+  z-index: 1;
+  overflow: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+.px-table__inner table {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: 0;
+    overflow-x: visible;
+}
+.px-table__inner th,
+  .px-table__inner td {
+    padding: var(--px-table-padding-y) var(--px-table-padding-x);
+    text-align: left;
+    vertical-align: middle;
+    border-bottom: none;
+    position: relative;
+}
+/* Header cells — beveled 3D raised panel with dot-grid texture */
+.px-table__inner th {
+    font-weight: 600;
+    color: var(--px-text-color-primary);
+    background:
+      repeating-linear-gradient(
+        to right,
+        var(--px-table-body-dot-color) 0,
+        var(--px-table-body-dot-color) 2px,
+        transparent 2px,
+        transparent 4px
+      ),
+      var(--px-table-header-bg-color);
+    box-shadow:
+      var(--px-table-header-highlight),
+      var(--px-table-header-shadow);
+}
+/* Pixel-dashed divider under thead */
+.px-table__inner thead th::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: calc(var(--px-border-width) * 2);
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-table-border-color) 0px,
+      var(--px-table-border-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+    pointer-events: none;
+}
+/* Subtle pixel-dot grid + bevel on body cells */
+.px-table__inner tbody td {
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-table-body-dot-color) 0,
+      var(--px-table-body-dot-color) 2px,
+      transparent 2px,
+      transparent 4px
+    );
+    box-shadow:
+      var(--px-table-cell-highlight),
+      var(--px-table-cell-shadow);
+}
+/* Pixel-dashed row divider on body cells */
+.px-table__inner tbody td::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--px-border-width);
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-table-divider-color) 0px,
+      var(--px-table-divider-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+    pointer-events: none;
+}
+/* Remove divider from last body row */
+.px-table__inner tbody tr:last-child td::after {
+    display: none;
+}
+/* Footer cells — lighter beveled panel with dot-grid texture */
+.px-table__inner tfoot th,
+  .px-table__inner tfoot td {
+    font-weight: 600;
+    background:
+      repeating-linear-gradient(
+        to right,
+        var(--px-table-body-dot-color) 0,
+        var(--px-table-body-dot-color) 2px,
+        transparent 2px,
+        transparent 4px
+      ),
+      var(--px-table-header-bg-color);
+    box-shadow:
+      var(--px-table-footer-highlight),
+      var(--px-table-footer-shadow);
+}
+/* Pixel-dashed divider at top of footer */
+.px-table__inner tfoot tr:first-child th::before,
+  .px-table__inner tfoot tr:first-child td::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: calc(var(--px-border-width) * 2);
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-table-border-color) 0px,
+      var(--px-table-border-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+    pointer-events: none;
+}
+/* ─── Caption ─── */
+.px-table__inner table caption {
+  padding: var(--px-table-padding-y) var(--px-table-padding-x);
+  font-weight: 600;
+  text-align: center;
+  position: relative;
+  caption-side: top;
+}
+/* Pixel-dashed bottom divider (same pattern as thead divider) */
+.px-table__inner table caption::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: calc(var(--px-border-width) * 2);
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-table-border-color) 0px,
+      var(--px-table-border-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+    pointer-events: none;
+}
+/* ─── Pixel-Art Scrollbar ─── */
+.px-table__inner {
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--px-table-border-color) var(--px-fill-color-lighter);
+}
+/* Webkit (Chrome, Safari, Edge) */
+.px-table__inner::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+.px-table__inner::-webkit-scrollbar-track {
+    background:
+      repeating-linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.03) 0,
+        rgba(0, 0, 0, 0.03) 2px,
+        transparent 2px,
+        transparent 4px
+      ),
+      var(--px-fill-color-lighter);
+    box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.06), inset -1px -1px 0 0 rgba(255, 255, 255, 0.3);
+}
+.px-table__inner::-webkit-scrollbar-thumb {
+    background: var(--px-table-border-color);
+    box-shadow:
+      inset 1px 1px 0 0 rgba(255, 255, 255, 0.3),
+      inset -1px -1px 0 0 rgba(0, 0, 0, 0.15);
+}
+.px-table__inner::-webkit-scrollbar-corner {
+    background: var(--px-fill-color-lighter);
+}
+/* ─── Size Variants ─── */
+.px-table--xs {
+  --px-table-padding-y: 4px;
+  --px-table-padding-x: 8px;
+  --px-table-font-size: var(--px-font-size-extra-small);
+}
+.px-table--sm {
+  --px-table-padding-y: 6px;
+  --px-table-padding-x: 10px;
+  --px-table-font-size: var(--px-font-size-small);
+}
+.px-table--md {
+  --px-table-padding-y: 10px;
+  --px-table-padding-x: 14px;
+  --px-table-font-size: var(--px-font-size-base);
+}
+.px-table--lg {
+  --px-table-padding-y: 14px;
+  --px-table-padding-x: 18px;
+  --px-table-font-size: var(--px-font-size-large);
+}
+.px-table--xl {
+  --px-table-padding-y: 18px;
+  --px-table-padding-x: 22px;
+  --px-table-font-size: var(--px-font-size-extra-large);
+}
+/* ─── Zebra Stripes — Checkerboard Texture ─── */
+.px-table.is-zebra tbody tr:nth-child(even) td {
+  background:
+    linear-gradient(45deg, var(--px-table-hover-overlay) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--px-table-hover-overlay) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--px-table-hover-overlay) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--px-table-hover-overlay) 75%),
+    var(--px-table-zebra-color);
+  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, auto;
+  background-position: 0 0, 0 2px, 2px -2px, -2px 0, 0 0;
+}
+/* ─── Hover Highlight — Diagonal Stripe Overlay ─── */
+.px-table.is-hover tbody tr:hover td {
+  background:
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 4px,
+      rgba(255, 255, 255, 0.18) 4px,
+      rgba(255, 255, 255, 0.18) 8px
+    ),
+    var(--px-table-row-hover-color);
+}
+/* ─── Full Borders — Pixel-Dashed Cell Outlines ─── */
+.px-table.is-border th,
+  .px-table.is-border td {
+    border: none;
+    background-image:
+      /* Bottom edge — horizontal dashes */
+      repeating-linear-gradient(
+        to right,
+        var(--px-table-border-color) 0 6px,
+        transparent 6px 12px
+      ),
+      /* Right edge — vertical dashes */
+      repeating-linear-gradient(
+        to bottom,
+        var(--px-table-border-color) 0 6px,
+        transparent 6px 12px
+      );
+    background-size:
+      100% var(--px-border-width),
+      var(--px-border-width) 100%;
+    background-position: 0 100%, 100% 0;
+    background-repeat: no-repeat;
+}
+/* Header cells: keep bevel, layer border dashes on top of header bg */
+.px-table.is-border thead th {
+    background:
+      /* Dashed border edges (bottom + right only) */
+      repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat,
+      repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,
+      /* Dot texture */
+      repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0 2px, transparent 2px 4px),
+      /* Base header color */
+      var(--px-table-header-bg-color);
+}
+/* Footer cells: keep bevel, layer border dashes on top of footer bg */
+.px-table.is-border tfoot th,
+  .px-table.is-border tfoot td {
+    background:
+      repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat,
+      repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,
+      repeating-linear-gradient(to right, var(--px-table-body-dot-color) 0 2px, transparent 2px 4px),
+      var(--px-table-header-bg-color);
+}
+/* Disable pseudo-element dividers — border grid replaces them */
+.px-table.is-border tbody td::after,
+  .px-table.is-border thead th::after,
+  .px-table.is-border tfoot tr:first-child th::before,
+  .px-table.is-border tfoot tr:first-child td::before {
+    display: none;
+}
+/* is-border + zebra: layer dashed borders on top of checkerboard texture */
+.px-table.is-border.is-zebra tbody tr:nth-child(even) td {
+  background:
+    repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat,
+    repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,
+    linear-gradient(45deg, var(--px-table-hover-overlay) 25%, transparent 25%) 0 0 / 4px 4px,
+    linear-gradient(-45deg, var(--px-table-hover-overlay) 25%, transparent 25%) 0 2px / 4px 4px,
+    linear-gradient(45deg, transparent 75%, var(--px-table-hover-overlay) 75%) 2px -2px / 4px 4px,
+    linear-gradient(-45deg, transparent 75%, var(--px-table-hover-overlay) 75%) -2px 0 / 4px 4px,
+    var(--px-table-zebra-color);
+}
+/* is-border + hover: layer dashed borders on top of striped hover */
+.px-table.is-border.is-hover tbody tr:hover td {
+  background:
+    repeating-linear-gradient(to right, var(--px-table-border-color) 0 6px, transparent 6px 12px) 0 100% / 100% var(--px-border-width) no-repeat,
+    repeating-linear-gradient(to bottom, var(--px-table-border-color) 0 6px, transparent 6px 12px) 100% 0 / var(--px-border-width) 100% no-repeat,
+    repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, 0.18) 4px, rgba(255, 255, 255, 0.18) 8px),
+    var(--px-table-row-hover-color);
+}
+/* ─── Pin Rows (Sticky Header/Footer) ─── */
+.px-table.is-pin-rows thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+.px-table.is-pin-rows tfoot th,
+  .px-table.is-pin-rows tfoot td {
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+}
+/* ─── Pin Cols (Sticky First Column) ─── */
+.px-table.is-pin-cols th:first-child,
+  .px-table.is-pin-cols td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    /* Layer dot-grid texture on top of solid bg to prevent texture loss */
+    background:
+      repeating-linear-gradient(
+        to right,
+        var(--px-table-body-dot-color) 0,
+        var(--px-table-body-dot-color) 2px,
+        transparent 2px,
+        transparent 4px
+      ),
+      var(--px-table-bg-color);
+}
+.px-table.is-pin-cols thead th:first-child {
+    background:
+      repeating-linear-gradient(
+        to right,
+        var(--px-table-body-dot-color) 0,
+        var(--px-table-body-dot-color) 2px,
+        transparent 2px,
+        transparent 4px
+      ),
+      var(--px-table-header-bg-color);
+}
+/* ─── Pin Rows + Cols intersection ─── */
+.px-table.is-pin-rows.is-pin-cols thead th:first-child {
+    z-index: 3;
+}
+.px-table.is-pin-rows.is-pin-cols tfoot th:first-child,
+  .px-table.is-pin-rows.is-pin-cols tfoot td:first-child {
+    z-index: 3;
+}
+/* ─── Hide Header ─── */
+.px-table.is-hide-header thead {
+  display: none;
+}
+/* ─── Color Type Variants ─── */
+.px-table--primary {
+    --px-table-border-color: var(--px-color-primary);
+    --px-table-shadow-color: var(--px-color-primary-dark);
+    --px-table-header-bg-color: var(--px-color-primary-light-9);
+    --px-table-divider-color: var(--px-color-primary-light-5);
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
+.px-table--primary.is-outline {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: var(--px-color-primary);
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--primary.is-ghost {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: transparent;
+    --px-table-shadow-color: transparent;
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--success {
+    --px-table-border-color: var(--px-color-success);
+    --px-table-shadow-color: var(--px-color-success-dark);
+    --px-table-header-bg-color: var(--px-color-success-light-9);
+    --px-table-divider-color: var(--px-color-success-light-5);
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
+.px-table--success.is-outline {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: var(--px-color-success);
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--success.is-ghost {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: transparent;
+    --px-table-shadow-color: transparent;
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--info {
+    --px-table-border-color: var(--px-color-info);
+    --px-table-shadow-color: var(--px-color-info-dark);
+    --px-table-header-bg-color: var(--px-color-info-light-9);
+    --px-table-divider-color: var(--px-color-info-light-5);
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
+.px-table--info.is-outline {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: var(--px-color-info);
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--info.is-ghost {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: transparent;
+    --px-table-shadow-color: transparent;
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--warning {
+    --px-table-border-color: var(--px-color-warning);
+    --px-table-shadow-color: var(--px-color-warning-dark);
+    --px-table-header-bg-color: var(--px-color-warning-light-9);
+    --px-table-divider-color: var(--px-color-warning-light-5);
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
+.px-table--warning.is-outline {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: var(--px-color-warning);
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--warning.is-ghost {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: transparent;
+    --px-table-shadow-color: transparent;
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--danger {
+    --px-table-border-color: var(--px-color-danger);
+    --px-table-shadow-color: var(--px-color-danger-dark);
+    --px-table-header-bg-color: var(--px-color-danger-light-9);
+    --px-table-divider-color: var(--px-color-danger-light-5);
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.4);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
+.px-table--danger.is-outline {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: var(--px-color-danger);
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+.px-table--danger.is-ghost {
+    --px-table-bg-color: transparent;
+    --px-table-border-color: transparent;
+    --px-table-shadow-color: transparent;
+    --px-table-header-highlight: none;
+    --px-table-header-shadow: none;
+    --px-table-cell-highlight: none;
+    --px-table-cell-shadow: none;
+}
+/* ─── Outline Variant — pixel-cornered wireframe, transparent fill ─── */
+.px-table.is-outline {
+  filter: none;
+}
+.px-table.is-outline::before {
+    background:
+      /* Top edge */
+      linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 0 / 100% 2px no-repeat,
+      /* Bottom edge */
+      linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 100% / 100% 2px no-repeat,
+      /* Left edge */
+      linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 0 0 / 2px 100% no-repeat,
+      /* Right edge */
+      linear-gradient(var(--px-table-border-color), var(--px-table-border-color)) 100% 0 / 2px 100% no-repeat;
+    /* clip-path inherited from base → pixel staircase corners preserved */
+}
+.px-table.is-outline::after {
+    background: transparent;
+    box-shadow: none;
+}
+/* ─── Shared Reduced Bevel for Outline ─── */
+.px-table.is-outline .px-table__inner th {
+    box-shadow:
+      var(--px-table-reduced-highlight),
+      var(--px-table-reduced-shadow);
+}
+.px-table.is-outline .px-table__inner tfoot th,
+  .px-table.is-outline .px-table__inner tfoot td {
+    box-shadow:
+      var(--px-table-reduced-footer-highlight),
+      var(--px-table-reduced-footer-shadow);
+}
+/* ─── Ghost Variant — no border, no shadow, content-only ─── */
+.px-table.is-ghost {
+  filter: none;
+}
+.px-table.is-ghost::before, .px-table.is-ghost::after { display: none;
+}
+/* ─── Hoverable — pixel-style diagonal lift/press on container ─── */
+.px-table.is-hoverable {
+  cursor: pointer;
+}
+.px-table.is-hoverable:hover {
+    transform: translate(-2px, -2px);
+    filter: drop-shadow(5px 5px 0px var(--px-table-shadow-color));
+}
+.px-table.is-hoverable:active {
+    transform: translate(1px, 1px);
+    filter: drop-shadow(1px 1px 0px var(--px-table-shadow-color));
+}
+/* ─── Dark Mode ─── */
+.px-dark .px-table,
+.dark .px-table {
+  /* Invert bevel: reduce highlight, increase shadow for dark backgrounds */
+  --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
+  --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
+  --px-table-footer-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.06);
+  --px-table-footer-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.18);
+  --px-table-cell-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.05);
+  --px-table-cell-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.10);
+
+  /* Light-on-dark textures */
+  --px-table-hover-overlay: rgba(255, 255, 255, 0.04);
+  --px-table-body-dot-color: rgba(255, 255, 255, 0.03);
+
+  /* Reduced bevel (outline) — adjusted for dark backgrounds */
+  --px-table-reduced-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.08);
+  --px-table-reduced-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.12);
+  --px-table-reduced-footer-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.05);
+  --px-table-reduced-footer-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.10);
+}
+/* Dark mode scrollbar */
+.px-dark .px-table .px-table__inner,
+.dark .px-table .px-table__inner {
+  scrollbar-color: var(--px-border-color-lighter) var(--px-fill-color-dark);
+}
+.px-dark .px-table .px-table__inner::-webkit-scrollbar-track, .dark .px-table .px-table__inner::-webkit-scrollbar-track {
+    background:
+      repeating-linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0.03) 0,
+        rgba(255, 255, 255, 0.03) 2px,
+        transparent 2px,
+        transparent 4px
+      ),
+      var(--px-fill-color-dark);
+    box-shadow: inset 1px 1px 0 0 rgba(0, 0, 0, 0.15), inset -1px -1px 0 0 rgba(255, 255, 255, 0.05);
+}
+.px-dark .px-table .px-table__inner::-webkit-scrollbar-thumb, .dark .px-table .px-table__inner::-webkit-scrollbar-thumb {
+    background: var(--px-border-color-lighter);
+    box-shadow:
+      inset 1px 1px 0 0 rgba(255, 255, 255, 0.12),
+      inset -1px -1px 0 0 rgba(0, 0, 0, 0.25);
+}
+.px-dark .px-table .px-table__inner::-webkit-scrollbar-corner, .dark .px-table .px-table__inner::-webkit-scrollbar-corner {
+    background: var(--px-fill-color-dark);
+}
+/* Dark mode color type bevel overrides */
+.px-dark .px-table--primary,
+  .dark .px-table--primary {
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
+}
+.px-dark .px-table--success,
+  .dark .px-table--success {
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
+}
+.px-dark .px-table--info,
+  .dark .px-table--info {
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
+}
+.px-dark .px-table--warning,
+  .dark .px-table--warning {
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
+}
+.px-dark .px-table--danger,
+  .dark .px-table--danger {
+    --px-table-header-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.12);
+    --px-table-header-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.20);
+}