@ngneers/controls-themes 0.0.1-pre2

package/base/button-group/index.js

@@ -0,0 +1,30 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { buttonGroupControlTemplate } from '@ngneers/controls-themes/templates/button-group';
+export const buttonGroupStyles = createThemePart({
+    controlTemplate: buttonGroupControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+      }
+      ${c('horizontal')}, ${c('vertical')} {
+        display: flex;
+        width: fit-content;
+        & ${d('button', 'root')}, & ${d('toggle-button', 'root')} ${d('toggle-button', 'button')} {
+          border-radius: 0;
+          white-space: nowrap;
+        }
+      }
+      ${c('horizontal')} {
+        flex-direction: row;
+      }
+      ${c('vertical')} {
+        width: fit-content;
+        flex-direction: column;
+      }
+    `,
+    },
+});

package/base/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export declare const calendarStyles: import("@ngneers/controls-themes").ThemePart<"calendar", import("@ngneers/controls-themes").ControlTemplate<"calendar", ["root", "inline", "input", "input-field", "details", "header", "navigation", "days", "week-day", "day", "day-selected", "day-today", "day-other-month", "months", "month", "current-month", "current-year", "time", "next", "previous"], readonly [import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter", "filter-icon", "list-box", "list-box-empty"], readonly [import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing", "anim-in", "anim-out"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "scroller", "item-selected", "item-highlighted"], readonly [import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "anim-box-icon-enter", "anim-box-icon-leave", "invalid"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "spacer", "item-sticky"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>]>, import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>]>, import("@ngneers/controls-themes").VariableTemplate<"calendar">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/calendar/index.js

@@ -0,0 +1,69 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { calendarControlTemplate } from '@ngneers/controls-themes/templates/calendar';
+export const calendarStyles = createThemePart({
+    controlTemplate: calendarControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        width: fit-content;
+      }
+      ${c('input-field')} ${d('input-field', 'root')} {
+        display: flex;
+      }
+      ${c('input')} {
+        cursor: text;
+        appearance: textfield; // Hide the calendar icon in Firefox
+      }
+      ${c('input')}::-webkit-calendar-picker-indicator {
+        display: none; // Hide the calendar icon in WebKit browsers
+      }
+      ${c('input')} ${d('input-field', 'root')} {
+        display: flex;
+      }
+      ${c('details')} {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      ${c('header')} {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+      }
+      ${c('navigation')} {
+        display: flex;
+      }
+      ${c('days')} {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        justify-items: center;
+        align-items: center;
+      }
+      ${c('months')} {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        justify-items: center;
+        align-items: center;
+      }
+      ${c('week-day')} {
+        font-size: inherit;
+      }
+      ${c('day')} {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: inherit;
+      }
+      ${c('current-year')}${d('select', 'root')} ${d('input', 'root')} {
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          display: none; // Chromium and WebKit
+        }
+        appearance: textfield; // Firefox
+      }
+    `,
+    },
+});

package/base/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxStyles: import("@ngneers/controls-themes").ThemePart<"checkbox", import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "anim-box-icon-enter", "anim-box-icon-leave", "invalid"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").VariableTemplate<"checkbox">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/checkbox/index.js

@@ -0,0 +1,35 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { checkboxControlTemplate } from '@ngneers/controls-themes/templates/checkbox';
+export const checkboxStyles = createThemePart({
+    controlTemplate: checkboxControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        display: inline-flex;
+        user-select: none;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        vertical-align: middle;
+        width: min-content;
+        min-width: min-content;
+      }
+      ${c('input')}[disabled], ${c('input')}[aria-readonly] {
+        cursor: default;
+      }
+      ${c('input')} {
+        cursor: pointer;
+        opacity: 0;
+        position: absolute;
+        inset: 0;
+        margin: 0;
+      }
+      ${c('box')} {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `,
+    },
+});

package/base/chip/index.d.ts

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

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

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

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,2 @@
+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 [import("@ngneers/controls-themes").ControlTemplate<"movable", ["root", "movable", "moved", "drag-handle-grab", "drag-handle-grabbing"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, 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,shBAiCvB,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").ControlTemplate<string, string[], readonly any[]>[]>, 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,mZAgCvB,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,2 @@
+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"], readonly [import("@ngneers/controls-themes").ControlTemplate<"inplace", ["root", "content", "display", "disabled"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, 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,mkBAI5B,CAAC"}

package/base/edit-inplace/index.js

@@ -0,0 +1,7 @@
+import { createThemePart } from '@ngneers/controls-themes/api';
+import { editInplaceControlTemplate } from '@ngneers/controls-themes/templates/edit-inplace';
+export const editInplaceStyles = createThemePart({
+    controlTemplate: editInplaceControlTemplate,
+    dependencies: [],
+    root: {},
+});

package/base/filter/index.d.ts

@@ -0,0 +1,2 @@
+export declare const filterStyles: import("@ngneers/controls-themes").ThemePart<"filter", import("@ngneers/controls-themes").ControlTemplate<"filter", ["root", "inline", "input-field", "summary", "icon", "popover-content", "rows", "row", "operator", "value", "row-actions", "match", "footer"], readonly [import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing", "anim-in", "anim-out"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"select", ["root", "combobox", "input", "icon", "input-editable", "popover-content", "filter", "filter-icon", "list-box", "list-box-empty"], readonly [import("@ngneers/controls-themes").ControlTemplate<"popover", ["root", "content", "content-closing", "anim-in", "anim-out"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"list-box", ["root", "empty", "invalid", "item", "group", "default-item", "default-group", "scroller", "item-selected", "item-highlighted"], readonly [import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "anim-box-icon-enter", "anim-box-icon-leave", "invalid"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>, import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "spacer", "item-sticky"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, import("@ngneers/controls-themes").ControlTemplate<"input-field", ["root", "host", "disabled", "readonly", "invalid", "label", "clear-button", `labelKind-${string}`], readonly [import("@ngneers/controls-themes").ControlTemplate<"input", ["root", "invalid", "empty"], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>]>, import("@ngneers/controls-themes").ControlTemplate<"button", ["root", "inline", "loading", `kind-${string}`, `color-${string}`], readonly import("@ngneers/controls-themes").ControlTemplate<string, string[], readonly any[]>[]>]>, 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,myFAiDvB,CAAC"}

package/base/filter/index.js

@@ -0,0 +1,52 @@
+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 }) => 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;
+      }
+      ${c('operator')} {
+        min-width: 0;
+      }
+      ${c('value')} {
+        min-width: 0;
+        max-width: 100%;
+      }
+      ${c('row-actions')} {
+        display: flex;
+        flex: 0 0 auto;
+      }
+      ${c('summary')} {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      ${c('match')} {
+        min-width: 0;
+      }
+      ${c('footer')} {
+        display: flex;
+        flex-wrap: wrap;
+        min-width: 0;
+      }
+    `,
+    },
+});

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").ControlTemplate<string, string[], readonly any[]>[]>, 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,4VAsBvB,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/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").ControlTemplate<string, string[], readonly any[]>[]>, 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,2SA6BrB,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%;
+        }
+      }
+    `,
+    },
+});