@ngneers/controls-themes 0.0.1-next.0

package/shade/table/index.d.ts

@@ -0,0 +1,361 @@
+export declare const tableStyles: import("@ngneers/controls-themes").ThemePart<"table", import("@ngneers/controls-themes").ControlTemplate<"table", ["root", "table", "virtual", "head", "body", "cell", "row", "foot", "even", "striped", "spacer", "sort-control", "sortable-column", "sorted-column", "filter-control", "filterable-column", "filtered-column", "resize-handle", "resizable", "resizing", "cell-text", "selected-row", "selection-checkbox", "selection-column", "selectable", "focused-row", "selected-row-cell", "focused-row-cell", "group-header-row", "group-header-cell", "group-toggle", "group-expanded", "reorderable", "reordering", "drag-source", "drop-indicator", "sticky-start", "sticky-end", "sticky-start-edge", "sticky-end-edge", "row-actions", "row-action-button", "active-row"], readonly [{
+    readonly class: "scroller";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+}, {
+    readonly class: "scroll-shadow";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"scrollShadow", ["root", "scrolled-start", "scrolled-end", "scrolled-top", "scrolled-bottom"], readonly []>;
+    readonly projected: true;
+}, {
+    readonly class: "group-toggle-icon";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"icon", ["root", "default"], readonly []>;
+}, {
+    readonly class: "sort-icon";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"icon", ["root", "default"], readonly []>;
+    readonly projected: true;
+}, {
+    readonly class: "filter";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"filter", ["root", "inline", "summary", "icon", "popover-content", "rows", "row", "condition-divider", "footer", "footer-actions", "active-indicator"], readonly [{
+        readonly class: "popover";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    }, {
+        readonly class: "input-field";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }, {
+        readonly class: "value";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }, {
+        readonly class: "operator";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+            readonly projected: true;
+        }]>;
+    }, {
+        readonly class: "list-select";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "operator-select";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "list-box";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                readonly class: "checkbox";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+            }, {
+                readonly class: "scroller";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+            }]>;
+        }, {
+            readonly class: "filter";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "calendar";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"calendar", ["root", "inline", "invalid", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "time", "input-field"], readonly [{
+            readonly class: "input";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"mask-input", ["root", "section", "section-active", "section-placeholder", "separator", "proxy", "sr-only"], readonly []>;
+        }, {
+            readonly class: "trigger-icon";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"icon", ["root", "default"], readonly []>;
+        }, {
+            readonly class: "popover";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+        }, {
+            readonly class: "previous";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+        }, {
+            readonly class: "next";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+        }, {
+            readonly class: "current-month";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+                readonly class: "popover";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+            }, {
+                readonly class: "list-box";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                    readonly class: "checkbox";
+                    readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+                }, {
+                    readonly class: "scroller";
+                    readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+                }]>;
+            }, {
+                readonly class: "filter";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                    readonly class: "input";
+                    readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                    readonly projected: true;
+                }]>;
+            }]>;
+        }, {
+            readonly class: "current-year";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter-icon", "list-box-empty"], readonly [{
+                readonly class: "popover";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+            }, {
+                readonly class: "list-box";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "item-selected", "item-highlighted", "item-disabled"], readonly [{
+                    readonly class: "checkbox";
+                    readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+                }, {
+                    readonly class: "scroller";
+                    readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+                }]>;
+            }, {
+                readonly class: "filter";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                    readonly class: "input";
+                    readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                    readonly projected: true;
+                }]>;
+            }]>;
+        }, {
+            readonly class: "current-month-field";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }, {
+            readonly class: "current-year-field";
+            readonly template: import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [{
+                readonly class: "input";
+                readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+                readonly projected: true;
+            }]>;
+        }]>;
+    }, {
+        readonly class: "input";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly []>;
+    }, {
+        readonly class: "remove-btn";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "add-button";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "cancel-button";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "apply-button";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "clear-button";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }]>;
+    readonly projected: true;
+}, {
+    readonly class: "popover";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing"], readonly []>;
+    readonly projected: true;
+}, {
+    readonly class: "paginator";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"paginator", ["root", "page-size-options", "active-page"], readonly [{
+        readonly class: "previous";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "next";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "page-number";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "overflow";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly []>;
+    }, {
+        readonly class: "item-view";
+        readonly template: import("@ngneers/controls-themes").ControlTemplate<"item-view", ["root", "item", "item-overflowing", "more-items", "more-items-hidden", "more-items-default", "hidden-separator"], readonly []>;
+    }]>;
+}, {
+    readonly class: "checkbox";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+    readonly projected: true;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"table">[], [import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"font", {
+    family: null;
+    weight: {
+        normal: null;
+        medium: null;
+        semibold: null;
+        bold: null;
+        extrabold: null;
+        black: null;
+    };
+    size: {
+        xs: null;
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+        '2xl': null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/shade/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/table/index.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8OtB,CAAC"}

package/shade/table/index.js

@@ -0,0 +1,243 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, fontTemplate, sizesTemplate, } from '@ngneers/controls-themes/shade/base';
+import { tableControlTemplate } from '@ngneers/controls-themes/templates/table';
+export const tableStyles = createThemePart({
+    controlTemplate: tableControlTemplate,
+    base: baseStyles.table,
+    dependencies: [animationTemplate, colorsTemplate, fontTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c, d }) => css `
+      /* ── Layout ──────────────────────────────────────────────────────── */
+
+      ${c('root')} {
+        gap: ${v('size.padding.md')};
+        font-family: ${v('font.family')};
+        font-size: ${v('font.size.sm')};
+        color: ${v('color.foreground')};
+        ${d('popover', 'root')} {
+          font-weight: ${v('font.weight.normal')};
+          cursor: default;
+        }
+      }
+      ${c('head')} {
+        background: ${v('color.background')};
+      }
+      ${c('head')} ${c('cell')} {
+        color: ${v('color.muted.foreground')};
+        font-weight: ${v('font.weight.medium')};
+        gap: ${v('size.padding.sm')};
+      }
+      ${c('body')} {
+        --ngn-cell-bg-base: ${v('color.background')};
+      }
+      ${c('cell')} {
+        --ngn-cell-bg: var(--ngn-cell-bg-base);
+        background: var(--ngn-cell-bg);
+        /* shadcn table language: horizontal row borders only, no vertical borders */
+        border-bottom: 1px solid ${v('color.border')};
+        padding: 0 ${v('size.padding.lg')};
+        text-align: left;
+        transition-property: background, box-shadow;
+        transition-duration: ${v('anim.time.snappyFade')};
+        transition-timing-function: ${v('anim.ease.snappyFade')};
+        &:not(:has(*)) {
+          line-height: var(--ngn-table-row-height);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+      ${c('cell-text')} {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+      }
+      ${c('spacer')} {
+        order: 1;
+        flex-grow: 1;
+      }
+      ${c('root')}:not(${c('virtual')}) ${c('cell')} {
+        padding: ${v('size.padding.md')} ${v('size.padding.lg')};
+      }
+      ${c('striped')} ${c('even')} {
+        --ngn-cell-bg-base: color-mix(in srgb, ${v('color.muted.base')} 50%, transparent);
+      }
+      ${c('root')} ${d('paginator')} {
+        width: 90%;
+        max-width: 800px;
+        align-self: center;
+      }
+
+      /* ── Selection ───────────────────────────────────────────────────── */
+
+      ${c('selection-column')} {
+        padding: 0 ${v('size.padding.sm')};
+      }
+      ${c('selected-row')} ${c('cell')} {
+        --ngn-cell-bg: ${v('color.muted.base')};
+      }
+      ${c('selectable')} ${c('body')} ${c('row')}:hover ${c('cell')} {
+        --ngn-cell-bg: color-mix(in srgb, ${v('color.muted.base')} 50%, var(--ngn-cell-bg-base));
+      }
+      ${c('selectable')} ${c('body')} ${c('selected-row')}:hover ${c('cell')} {
+        /* shadcn keeps selected rows at bg-muted; hover does not restyle them */
+        --ngn-cell-bg: ${v('color.muted.base')};
+      }
+      ${c('focused-row')}:not(:has(${c('focused-row-cell')})) ${c('cell')}:first-child {
+        box-shadow: inset 3px 0 0 ${v('color.ring')};
+      }
+      ${c('focused-row-cell')} {
+        box-shadow: inset 3px 0 0 ${v('color.ring')};
+      }
+
+      /* ── Sorting ─────────────────────────────────────────────────────── */
+
+      ${c('sortable-column')} {
+        cursor: pointer;
+        user-select: none;
+        &:hover {
+          color: ${v('color.foreground')};
+        }
+      }
+      ${c('sort-control')} {
+        order: 3;
+        color: ${v('color.muted.foreground')};
+      }
+      ${c('sorted-column')} {
+        color: ${v('color.foreground')};
+        ${c('sort-control')} {
+          color: ${v('color.foreground')};
+        }
+      }
+
+      /* ── Filtering ───────────────────────────────────────────────────── */
+
+      ${c('filter-control')} {
+        order: 2;
+        color: ${v('color.muted.foreground')};
+      }
+
+      /* ── Grouping ────────────────────────────────────────────────────── */
+
+      ${c('group-header-cell')} {
+        gap: ${v('size.padding.sm')};
+        cursor: pointer;
+        user-select: none;
+        background: color-mix(in srgb, ${v('color.muted.base')} 50%, ${v('color.background')});
+        font-weight: ${v('font.weight.medium')};
+        padding: 0 ${v('size.padding.lg')};
+        border-bottom: 1px solid ${v('color.border')};
+        &:hover {
+          background: ${v('color.muted.base')};
+        }
+      }
+      ${c('root')}:not(${c('virtual')}) ${c('group-header-cell')} {
+        padding: ${v('size.padding.md')} ${v('size.padding.lg')};
+      }
+      ${c('group-toggle')} {
+        color: ${v('color.muted.foreground')};
+        transition: transform ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+      }
+      ${c('group-expanded')} ${c('group-toggle')} {
+        transform: rotate(90deg);
+      }
+
+      /* ── Reordering ──────────────────────────────────────────────────── */
+
+      ${c('drag-source')} {
+        opacity: 0.4;
+        transition: opacity ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+      }
+      ${c('drop-indicator')} {
+        width: 3px;
+        background: ${v('color.primary.base')};
+        box-shadow: 0 0 8px color-mix(in srgb, ${v('color.primary.base')} 25%, transparent);
+      }
+
+      /* ── Resizing ────────────────────────────────────────────────────── */
+
+      ${c('resize-handle')} {
+        width: 4px;
+        background: transparent;
+        transition: background ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 12px;
+          height: 100%;
+        }
+        &:hover,
+        &:active {
+          background: ${v('color.border')};
+        }
+      }
+      ${c('resizing')} ${c('resize-handle')} {
+        background: ${v('color.ring')};
+      }
+
+      /* ── Sticky Columns ──────────────────────────────────────────── */
+
+      ${c('sticky-start')}, ${c('sticky-end')}, ${c('selection-column')} {
+        --ngn-cell-bg-base: ${v('color.background')};
+      }
+      ${c('head')} ${c('sticky-start')},
+      ${c('head')} ${c('sticky-end')},
+      ${c('head')} ${c('selection-column')} {
+        background: ${v('color.background')};
+      }
+      ${c('sticky-start-edge')},
+      ${c('sticky-end-edge')} {
+        overflow: visible;
+      }
+      ${d('scroll-shadow', 'scrolled-start')} ${c('sticky-start-edge')}::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 100%;
+        height: 100%;
+        width: 12px;
+        pointer-events: none;
+        background: linear-gradient(to right, rgb(0 0 0 / 0.08), transparent);
+      }
+      ${d('scroll-shadow', 'scrolled-end')} ${c('sticky-end-edge')}::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 100%;
+        height: 100%;
+        width: 12px;
+        pointer-events: none;
+        background: linear-gradient(to left, rgb(0 0 0 / 0.08), transparent);
+      }
+      ${c('selection-column')} {
+        overflow: visible;
+      }
+      ${d('scroll-shadow', 'scrolled-start')} ${c('selection-column')}::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 100%;
+        width: 12px;
+        height: 100%;
+        pointer-events: none;
+        background: linear-gradient(to right, rgb(0 0 0 / 0.08), transparent);
+      }
+    `,
+    },
+    dark: {
+        css: ({ c, d }) => css `
+      /* dark surfaces are near-black, so the sticky-edge fade needs more presence */
+      ${d('scroll-shadow', 'scrolled-start')} ${c('sticky-start-edge')}::after,
+      ${d('scroll-shadow', 'scrolled-start')} ${c('selection-column')}::after {
+        background: linear-gradient(to right, rgb(0 0 0 / 0.4), transparent);
+      }
+      ${d('scroll-shadow', 'scrolled-end')} ${c('sticky-end-edge')}::after {
+        background: linear-gradient(to left, rgb(0 0 0 / 0.4), transparent);
+      }
+    `,
+    },
+});