@ngneers/controls-themes 0.0.1-next.0

package/base/chip/index.js

@@ -0,0 +1,19 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { chipControlTemplate } from '@ngneers/controls-themes/templates/chip';
+export const chipStyles = createThemePart({
+    controlTemplate: chipControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        display: inline-flex;
+        align-items: stretch;
+      }
+
+      ${c('content')} {
+        flex-grow: 1;
+        font-family: inherit;
+      }
+    `,
+    },
+});

package/base/colors/index.d.ts

@@ -0,0 +1,24 @@
+type ColorShades = {
+    default: string;
+    '50': string;
+    '100': string;
+    '200': string;
+    '300': string;
+    '400': string;
+    '500': string;
+    '600': string;
+    '700': string;
+    '800': string;
+    '900': string;
+    '950': string;
+};
+export declare const coralColor: ColorShades;
+export declare const mustardColor: ColorShades;
+export declare const bubblegumColor: ColorShades;
+export declare const forestVerdantColor: ColorShades;
+export declare const solarMarigoldColor: ColorShades;
+export declare const crimsonFlameColor: ColorShades;
+export declare const electricSkyColor: ColorShades;
+export declare const greyColor: ColorShades;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/base/colors/index.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,WAaxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,WAa1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,WAa5B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,WAahC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,WAahC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,WAa/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,WAa9B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,WAavB,CAAC"}

package/base/colors/index.js

@@ -0,0 +1,112 @@
+export const coralColor = {
+    default: '#ff6052',
+    '50': '#ffe8e5',
+    '100': '#ffd0cc',
+    '200': '#ffa299',
+    '300': '#ff7366',
+    '400': '#ff4433',
+    '500': '#ff1500',
+    '600': '#cc1100',
+    '700': '#990d00',
+    '800': '#660900',
+    '900': '#330400',
+    '950': '#1a0200',
+};
+export const mustardColor = {
+    default: '#ffbb00',
+    '50': '#fff8e5',
+    '100': '#fff1cc',
+    '200': '#ffe499',
+    '300': '#ffd666',
+    '400': '#ffc933',
+    '500': '#ffbb00',
+    '600': '#cc9600',
+    '700': '#997000',
+    '800': '#664b00',
+    '900': '#332500',
+    '950': '#1a1300',
+};
+export const bubblegumColor = {
+    default: '#ff5c77',
+    '50': '#ffe5ea',
+    '100': '#ffccd5',
+    '200': '#ff99aa',
+    '300': '#ff6680',
+    '400': '#ff3355',
+    '500': '#ff002b',
+    '600': '#cc0022',
+    '700': '#99001a',
+    '800': '#660011',
+    '900': '#330009',
+    '950': '#1a0004',
+};
+export const forestVerdantColor = {
+    default: '#228b22',
+    '50': '#eafaea',
+    '100': '#d6f5d6',
+    '200': '#adebad',
+    '300': '#84e184',
+    '400': '#5bd75b',
+    '500': '#32cd32',
+    '600': '#28a428',
+    '700': '#1e7b1e',
+    '800': '#145214',
+    '900': '#0a290a',
+    '950': '#051505',
+};
+export const solarMarigoldColor = {
+    default: '#ffcf32',
+    '50': '#fff9e5',
+    '100': '#fff3cc',
+    '200': '#ffe799',
+    '300': '#ffdb66',
+    '400': '#ffcf33',
+    '500': '#ffc300',
+    '600': '#cc9c00',
+    '700': '#997500',
+    '800': '#664e00',
+    '900': '#332700',
+    '950': '#1a1400',
+};
+export const crimsonFlameColor = {
+    default: '#ee2724',
+    '50': '#fde8e7',
+    '100': '#fbd0d0',
+    '200': '#f8a2a0',
+    '300': '#f47371',
+    '400': '#f14441',
+    '500': '#ed1612',
+    '600': '#be110e',
+    '700': '#8e0d0b',
+    '800': '#5f0907',
+    '900': '#2f0404',
+    '950': '#180202',
+};
+export const electricSkyColor = {
+    default: '#2eb2f4',
+    '50': '#e7f6fe',
+    '100': '#cfedfc',
+    '200': '#9edbfa',
+    '300': '#6ec9f7',
+    '400': '#3db8f5',
+    '500': '#0da6f2',
+    '600': '#0a85c2',
+    '700': '#086391',
+    '800': '#054261',
+    '900': '#032130',
+    '950': '#011118',
+};
+export const greyColor = {
+    default: '#808080',
+    '50': '#f8fafc',
+    '100': '#f1f5f9',
+    '200': '#e2e8f0',
+    '300': '#cbd5e1',
+    '400': '#94a3b8',
+    '500': '#64748b',
+    '600': '#475569',
+    '700': '#334155',
+    '800': '#1e293b',
+    '900': '#0f172a',
+    '950': '#020617',
+};

package/base/dialog/index.d.ts

@@ -0,0 +1,6 @@
+export declare const dialogStyles: import("@ngneers/controls-themes").ThemePart<"dialog", import("@ngneers/controls-themes").ControlTemplate<"dialog", ["root", "modal", "header", "default-header", "content", "footer", "default-footer", "close-button"], readonly [{
+    readonly class: "movable";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"movable", ["root", "movable", "moved", "drag-handle-grab", "drag-handle-grabbing"], readonly []>;
+    readonly projected: true;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"dialog">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/dialog/index.js

@@ -0,0 +1,36 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { dialogControlTemplate } from '@ngneers/controls-themes/templates/dialog';
+export const dialogStyles = createThemePart({
+    controlTemplate: dialogControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        color: inherit;
+        margin: auto;
+        flex-direction: column;
+        position: fixed;
+        &[open],
+        &:popover-open {
+          display: flex;
+        }
+      }
+      ${c('header')} {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      ${c('content')} {
+        overflow: auto;
+      }
+      ${c('default-footer')} {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      ${c('root')}${d('movable', 'moved')} {
+        margin: unset;
+      }
+    `,
+    },
+});

package/base/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export declare const drawerStyles: import("@ngneers/controls-themes").ThemePart<"drawer", import("@ngneers/controls-themes").ControlTemplate<"drawer", ["root", "horizontal", "content", "header", "footer", "default-header", "default-header-text", "anim-in", "anim-out"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"drawer">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/drawer/index.js

@@ -0,0 +1,35 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { drawerControlTemplate } from '@ngneers/controls-themes/templates/drawer';
+export const drawerStyles = createThemePart({
+    controlTemplate: drawerControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        color: inherit;
+        flex-direction: column;
+        position: fixed;
+        &:popover-open {
+          display: flex;
+        }
+      }
+      ${c('header')} {
+        width: 100%;
+      }
+      ${c('default-header')} {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      ${c('footer')} {
+        width: 100%;
+      }
+      body:has(${c('root')}:popover-open) {
+        pointer-events: none;
+        ${c('root')} {
+          pointer-events: all;
+        }
+      }
+    `,
+    },
+});

package/base/edit-inplace/index.d.ts

@@ -0,0 +1,5 @@
+export declare const editInplaceStyles: import("@ngneers/controls-themes").ThemePart<"edit-inplace", import("@ngneers/controls-themes").ControlTemplate<"edit-inplace", ["root", "disabled", "readonly", "invalid", "default-display", "default-fallback-display", "default-edit", "default-edit-input", "default-edit-close-button", "sr-only"], readonly [{
+    readonly class: "inplace";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"inplace", ["root", "content", "display", "disabled"], readonly []>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"edit-inplace">[], []>;
+//# sourceMappingURL=index.d.ts.map

package/base/edit-inplace/index.d.ts.map

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

package/base/edit-inplace/index.js

@@ -0,0 +1,21 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { editInplaceControlTemplate } from '@ngneers/controls-themes/templates/edit-inplace';
+export const editInplaceStyles = createThemePart({
+    controlTemplate: editInplaceControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ c }) => css `
+      ${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;
+      }
+    `,
+    },
+});

package/base/filter/index.d.ts

@@ -0,0 +1,164 @@
+export declare const filterStyles: import("@ngneers/controls-themes").ThemePart<"filter", 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 []>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"filter">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/filter/index.js

@@ -0,0 +1,70 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { filterControlTemplate } from '@ngneers/controls-themes/templates/filter';
+export const filterStyles = createThemePart({
+    controlTemplate: filterControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ c, d }) => css `
+      ${c('popover-content')} {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        max-width: 100%;
+      }
+      ${c('rows')} {
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+      }
+      ${c('row')} {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        min-width: 0;
+        align-items: center;
+      }
+      ${d('operator')} {
+        min-width: 0;
+      }
+      ${d('value')} {
+        min-width: 0;
+        flex: 1 1 auto;
+      }
+      ${d('remove-btn')} {
+        flex: 0 0 auto;
+      }
+      ${c('condition-divider')} {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        user-select: none;
+      }
+      ${c('condition-divider')}::before,
+      ${c('condition-divider')}::after {
+        content: '';
+        flex: 1;
+        height: 1px;
+      }
+      ${c('summary')} {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      ${c('footer')} {
+        display: flex;
+        flex-wrap: wrap;
+        min-width: 0;
+        align-items: center;
+      }
+      ${c('footer-actions')} {
+        display: flex;
+        margin-left: auto;
+      }
+      ${c('active-indicator')} {
+        position: absolute;
+        pointer-events: none;
+      }
+    `,
+    },
+});

package/base/global/index.d.ts

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

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

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

package/base/global/index.js

@@ -0,0 +1,25 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { globalControlTemplate } from '@ngneers/controls-themes/templates/global';
+export const globalStyles = createThemePart({
+    controlTemplate: globalControlTemplate,
+    root: {
+        css: ({ v, c }) => css `
+      --ngn-color-scrollbar-thumb: var(--ngn-color-surface-300);
+      --ngn-color-scrollbar-track: transparent;
+      --ngn-color-scrollbar: var(--ngn-color-scrollbar-thumb) var(--ngn-color-scrollbar-track);
+      ${c('root')} {
+        /* styles for all ngn controls go here */
+        * {
+          scrollbar-color: var(--ngn-color-scrollbar);
+        }
+      }
+      .ngn-control.ngn-control-initializing {
+        /*
+         * Hide controls until they are fully initialized to prevent FOUC
+         * The 'ngn-control-initialized' class is added in a afterNextRender callback in NgnBase.
+         */
+        display: none !important;
+      }
+    `,
+    },
+});

package/base/hint/index.d.ts

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

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

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

package/base/hint/index.js

@@ -0,0 +1,27 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { hintControlTemplate } from '@ngneers/controls-themes/templates/hint';
+export const hintStyles = createThemePart({
+    controlTemplate: hintControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ c }) => css `
+      ${c('root')} {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375em;
+        font-size: 0.8125em;
+        line-height: 1.4;
+      }
+
+      ${c('icon')} {
+        flex-shrink: 0;
+        font-size: 1em;
+        line-height: 1;
+      }
+
+      ${c('content')} {
+        font-family: inherit;
+      }
+    `,
+    },
+});

package/base/icon/index.d.ts

@@ -0,0 +1,2 @@
+export declare const iconStyles: import("@ngneers/controls-themes").ThemePart<"icon", import("@ngneers/controls-themes").ControlTemplate<"icon", ["root", "default"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"icon">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/icon/index.js

@@ -0,0 +1,32 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { iconControlTemplate } from '@ngneers/controls-themes/templates/icon';
+export const iconStyles = createThemePart({
+    controlTemplate: iconControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        width: 1em;
+        height: 1em;
+        display: flex;
+        svg {
+          fill: currentColor;
+          width: 100%;
+          height: 100%;
+        }
+      }
+      ${c('default')} {
+        width: 1em;
+        height: 1em;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        svg {
+          fill: currentColor;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    `,
+    },
+});