@ngneers/controls-themes 0.0.1-next.0

package/base/state/index.js

@@ -0,0 +1,93 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { stateControlTemplate } from '@ngneers/controls-themes/templates/state';
+export const stateStyles = createThemePart({
+    controlTemplate: stateControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ c, d }) => css `
+      ${c('root')} {
+        display: none;
+        flex: 0 0 auto;
+        width: var(--ngn-state-size, 1em);
+        height: var(--ngn-state-size, 1em);
+        color: currentColor;
+        font-size: var(--ngn-state-size, 1em);
+        line-height: 1;
+        vertical-align: -0.125em;
+      }
+
+      ${c('visible')} {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      ${c('indicator')} {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+      }
+
+      ${c('sr-only')} {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+        pointer-events: none;
+      }
+
+      ${c('root')} ${d('icon')},
+      ${c('root')} ${d('spinner')} {
+        width: 100%;
+        height: 100%;
+        color: inherit;
+      }
+
+      ${d('button', 'root')}:has(> ${c('replace-content')}${c('visible')}) {
+        position: relative;
+        -webkit-text-fill-color: transparent;
+      }
+
+      ${d('button', 'root')}:has(> ${c('replace-content')}${c('visible')})
+      > :not(${c('root')}) {
+        visibility: hidden;
+      }
+
+      ${d('button', 'root')} > ${c('replace-content')}${c('visible')} {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: 0;
+        font-size: var(--ngn-state-size, 1em);
+        transform: translate(-50%, -50%);
+        -webkit-text-fill-color: currentColor;
+      }
+
+      ${d('input-field', 'root')} > ${c('root')} {
+        --ngn-state-hit-padding: 0.25rem;
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        visibility: hidden;
+        width: calc(var(--ngn-state-size, 1em) + var(--ngn-state-hit-padding) * 2);
+        height: calc(var(--ngn-state-size, 1em) + var(--ngn-state-hit-padding) * 2);
+        padding: var(--ngn-state-hit-padding);
+        margin-block: calc(var(--ngn-state-hit-padding) * -1);
+        margin-inline-start: calc(0.375em - var(--ngn-state-hit-padding));
+        margin-inline-end: calc(var(--ngn-state-hit-padding) * -1);
+      }
+
+      ${d('input-field', 'root')} > ${c('visible')} {
+        visibility: visible;
+      }
+    `,
+    },
+});

package/base/switch/index.d.ts

@@ -0,0 +1,2 @@
+export declare const switchStyles: import("@ngneers/controls-themes").ThemePart<"switch", import("@ngneers/controls-themes").ControlTemplate<"switch", ["root", "input", "track", "track-checked", "thumb", "invalid"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"switch">[], []>;
+//# sourceMappingURL=index.d.ts.map

package/base/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/base/switch/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yQA2BvB,CAAC"}

package/base/switch/index.js

@@ -0,0 +1,30 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { switchControlTemplate } from '@ngneers/controls-themes/templates/switch';
+export const switchStyles = createThemePart({
+    controlTemplate: switchControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        display: inline-flex;
+        user-select: none;
+        align-items: center;
+        position: relative;
+        vertical-align: middle;
+        width: min-content;
+        min-width: min-content;
+        flex-shrink: 0;
+      }
+      ${c('input')} {
+        position: absolute;
+        opacity: 0;
+        inset: 0;
+        margin: 0;
+      }
+      ${c('track')} {
+        display: flex;
+        align-items: center;
+      }
+    `,
+    },
+});

package/base/table/index.d.ts

@@ -0,0 +1,208 @@
+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">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/table/index.js

@@ -0,0 +1,222 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { tableControlTemplate } from '@ngneers/controls-themes/templates/table';
+export const tableStyles = createThemePart({
+    controlTemplate: tableControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      /* ── Layout ──────────────────────────────────────────────────────── */
+
+      ${c('root')} {
+        display: flex;
+        flex-direction: column;
+      }
+      ${c('table')} {
+        display: grid;
+        grid-template-rows: var(--ngn-table-row-height) auto;
+        &:has(${c('foot')}) {
+          grid-template-rows: var(--ngn-table-row-height) auto var(--ngn-table-row-height);
+        }
+        grid-template-columns: repeat(var(--ngn-table-column-count), 1fr);
+        align-content: baseline;
+        position: relative;
+        overflow: auto;
+        flex: 1;
+        min-height: 0;
+      }
+      ${c('head')} {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        position: sticky;
+        top: 0;
+        z-index: 2;
+      }
+      ${c('head')} ${c('cell')} {
+        display: flex;
+        align-items: center;
+        grid-row: 1;
+      }
+      ${c('body')}${d('scroller')} {
+        display: grid;
+        grid-auto-rows: var(--ngn-table-row-height);
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        overflow: visible;
+        height: auto;
+        &::before,
+        &::after {
+          grid-column: 1 / -1;
+        }
+      }
+      /* d('scroller', 'item') already resolves to a full marker-anchored selector
+         (.ngn-table-scroller .ngn-scroller-item) — nesting it under the block above via >
+         would re-require a second, separate .ngn-table-scroller-classed element between the
+         marked tbody and the item, which never exists (the marker lives on the tbody itself),
+         so the rule silently never matched and rows fell back to implicit grid auto-placement.
+         Kept as an independent top-level rule instead. */
+      ${d('scroller', 'item')} {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+      }
+      ${c('row')} {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        --row-index: calc(var(--ngn-table-row-index) - var(--ngn-table-item-start-index));
+        grid-row-start: var(--row-index);
+      }
+      ${c('head')} ${c('row')} {
+        grid-row-start: 1;
+      }
+      ${c('foot')} {
+        display: contents;
+      }
+      ${c('cell')} {
+        height: var(--ngn-table-row-height);
+        min-width: 0;
+        grid-column-start: calc(
+          var(--ngn-table-column-index) + var(--ngn-table-selection-offset, 0)
+        );
+        /* Pin every cell to its row's single track. Each row is its own
+           subgrid, so without an explicit row a reordered cell (DOM order no
+           longer matching visual column order) trips CSS grid auto-placement
+           onto an implicit extra row, offsetting it vertically. */
+        grid-row-start: 1;
+      }
+      /* Non-virtual rows have no fixed row height, so each cell would size to
+         its own content. Stretch every cell to the row's grid track and center
+         content vertically — this keeps all cells in a row the same height
+         regardless of whether they hold text or an element. */
+      ${c('root')}:not(${c('virtual')}) ${c('cell')} {
+        height: auto;
+        align-self: stretch;
+        display: flex;
+        align-items: center;
+      }
+
+      /* ── Selection ───────────────────────────────────────────────────── */
+
+      ${c('selection-column')} {
+        grid-column-start: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        min-width: fit-content;
+      }
+      ${c('selectable')} ${c('body')} ${c('row')} {
+        cursor: pointer;
+      }
+
+      /* ── Sorting ─────────────────────────────────────────────────────── */
+
+      ${c('sortable-column')} {
+        ${c('sort-control')} {
+          visibility: hidden;
+        }
+        &:hover ${c('sort-control')}, &${c('sorted-column')} ${c('sort-control')} {
+          visibility: visible;
+        }
+      }
+
+      /* ── Grouping ────────────────────────────────────────────────────── */
+
+      ${c('group-header-row')} {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+      }
+      ${c('group-header-cell')} {
+        grid-column: 1 / -1;
+        display: flex;
+        align-items: center;
+        height: var(--ngn-table-row-height);
+        min-width: 0;
+      }
+      ${c('root')}:not(${c('virtual')}) ${c('group-header-cell')} {
+        height: auto;
+        line-height: var(--ngn-table-row-height);
+      }
+      ${c('group-toggle')} {
+        flex-shrink: 0;
+      }
+
+      /* ── Reordering ──────────────────────────────────────────────────── */
+
+      ${c('root')}${c('reorderable')} ${c('head')} ${c('cell')} {
+        cursor: grab;
+        user-select: none;
+      }
+      ${c('root')}${c('reordering')} ${c('head')} ${c('cell')} {
+        cursor: grabbing;
+      }
+      ${c('drop-indicator')} {
+        position: absolute;
+        pointer-events: none;
+        z-index: 3;
+      }
+
+      /* ── Resizing ────────────────────────────────────────────────────── */
+
+      ${c('head')} ${c('cell')}${c('resizable')} {
+        position: relative;
+      }
+      ${c('resize-handle')} {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        cursor: col-resize;
+        z-index: 1;
+        touch-action: none;
+      }
+
+      /* ── Sticky Columns ──────────────────────────────────────────── */
+
+      ${c('sticky-start')}, ${c('sticky-end')} {
+        z-index: 1;
+      }
+      ${c('head')} ${c('sticky-start')},
+      ${c('head')} ${c('sticky-end')} {
+        z-index: 3;
+      }
+      ${c('selection-column')} {
+        position: sticky;
+        left: 0;
+        z-index: 1;
+      }
+      ${c('head')} ${c('selection-column')} {
+        z-index: 3;
+      }
+
+      /* ── Row Actions (inline) ────────────────────────────────────────── */
+
+      ${c('row-actions')} {
+        grid-row: 1;
+        grid-column: 1 / -1;
+        justify-self: end;
+        align-self: stretch;
+        display: flex;
+        align-items: center;
+        position: sticky;
+        right: 0;
+        z-index: 2;
+      }
+      /* Hidden-until-hover only applies when the bar is mounted inline inside
+         a table row; a standalone bar (outside ${c('row')}) stays visible. */
+      ${c('row')} ${c('row-actions')} {
+        visibility: hidden;
+        pointer-events: none;
+      }
+      ${c('row')}:hover ${c('row-actions')},
+      ${c('row')}${c('active-row')} ${c('row-actions')},
+      ${c('row')}${c('focused-row')} ${c('row-actions')},
+      ${c('row')}:focus-within ${c('row-actions')} {
+        visibility: visible;
+        pointer-events: auto;
+      }
+    `,
+    },
+});

package/base/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export declare const tabsStyles: import("@ngneers/controls-themes").ThemePart<"tabs", import("@ngneers/controls-themes").ControlTemplate<"tabs", ["root", "headers-container", "headers", "header", "header-active", "header-active-indicator", "scroll-left", "scroll-right", "content"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"tabs">[], []>;
+//# sourceMappingURL=index.d.ts.map

package/base/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/base/tabs/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,4UAiErB,CAAC"}

package/base/tabs/index.js

@@ -0,0 +1,68 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { tabsControlTemplate } from '@ngneers/controls-themes/templates/tabs';
+export const tabsStyles = createThemePart({
+    controlTemplate: tabsControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        display: flex;
+        flex-direction: column;
+      }
+      ${c('headers-container')} {
+        display: flex;
+        align-items: center;
+      }
+      ${c('headers')} {
+        width: 100%;
+        display: flex;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        --ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+      }
+      ${c('header')} {
+        white-space: nowrap;
+      }
+      ${c('header-active-indicator')} {
+        position: absolute;
+        bottom: 0;
+        pointer-events: none;
+      }
+      ${c('scroll-left')}, ${c('scroll-right')} {
+        position: sticky;
+        width: 1rem;
+        border: none;
+        flex-shrink: 0;
+        z-index: 1;
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          pointer-events: none;
+        }
+      }
+      ${c('scroll-left')} {
+        left: -0.5px; /** Not 0 to prevent small gaps due to rounding issues, I assume */
+        margin-right: -1rem;
+        &::after {
+          left: 100%;
+          right: -0.625rem;
+        }
+      }
+      ${c('scroll-right')} {
+        right: -0.5px; /** Not 0 to prevent small gaps due to rounding issues, I assume */
+        margin-left: -1rem;
+        &::after {
+          right: 100%;
+          left: -0.625rem;
+        }
+      }
+    `,
+    },
+});

package/base/tag/index.d.ts

@@ -0,0 +1,2 @@
+export declare const tagStyles: import("@ngneers/controls-themes").ThemePart<"tag", import("@ngneers/controls-themes").ControlTemplate<"tag", ["root", "content", "icon", `kind-${string}`, `color-${string}`], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"tag">[], []>;
+//# sourceMappingURL=index.d.ts.map

package/base/tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/base/tag/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,iQAoBpB,CAAC"}