@ngneers/controls-themes 0.0.1-next.0

package/base/tag/index.js

@@ -0,0 +1,23 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { tagControlTemplate } from '@ngneers/controls-themes/templates/tag';
+export const tagStyles = createThemePart({
+    controlTemplate: tagControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ c }) => css `
+      ${c('root')} {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      ${c('icon')} {
+        flex-shrink: 0;
+      }
+
+      ${c('content')} {
+        flex-grow: 1;
+        font-family: inherit;
+      }
+    `,
+    },
+});

package/base/toast/index.d.ts

@@ -0,0 +1,2 @@
+export declare const toastStyles: import("@ngneers/controls-themes").ThemePart<"toast", import("@ngneers/controls-themes").ControlTemplate<"toast", ["root", "host", "anim-enter", "anim-leave", "defaultHeader", "defaultHeaderText", "defaultContent", `color-${string}`], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"toast">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/toast/index.js

@@ -0,0 +1,34 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { toastControlTemplate } from '@ngneers/controls-themes/templates/toast';
+export const toastStyles = createThemePart({
+    controlTemplate: toastControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ c }) => css `
+      ${c('host')} {
+        display: none;
+        flex-direction: column;
+        margin: unset;
+        inset: unset;
+        position: fixed;
+        &:popover-open {
+          display: flex;
+        }
+      }
+      ${c('root')} {
+        &:focus {
+          outline: none;
+        }
+        &:focus-visible {
+          outline: 2px solid currentColor;
+          outline-offset: 2px;
+        }
+      }
+      ${c('defaultHeader')} {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    `,
+    },
+});

package/base/toggle-button/index.d.ts

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

package/base/toggle-button/index.d.ts.map

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

package/base/toggle-button/index.js

@@ -0,0 +1,33 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { toggleButtonControlTemplate } from '@ngneers/controls-themes/templates/toggle-button';
+export const toggleButtonStyles = createThemePart({
+    controlTemplate: toggleButtonControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+      }
+      ${c('button')} {
+        display: grid;
+        font-family: inherit;
+        flex-wrap: nowrap;
+        > * {
+          grid-area: 1 / 1;
+        }
+        &::after {
+          grid-area: 1 / 1;
+          content: '${'\u200B'}'; /* zero-width space to prevent collapsing when button is empty */
+        }
+      }
+      ${c('label')}, ${c('placeholder')}, ${c('placeholder-active')} {
+        display: flex;
+      }
+      ${c('placeholder')}, ${c('placeholder-active')} {
+        visibility: hidden;
+      }
+      ${c('label')} {
+        position: relative;
+      }
+    `,
+    },
+});

package/base/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export declare const tooltipStyles: import("@ngneers/controls-themes").ThemePart<"tooltip", import("@ngneers/controls-themes").ControlTemplate<"tooltip", ["root", "content", "text", "with-arrow", "closing", "fade-in", "fade-out", "top", "bottom", "left", "right", "start", "end"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"tooltip">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/tooltip/index.js

@@ -0,0 +1,92 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { tooltipControlTemplate } from '@ngneers/controls-themes/templates/tooltip';
+export const tooltipStyles = createThemePart({
+    controlTemplate: tooltipControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('root')} {
+        // Browser-Reset:
+        width: unset;
+        height: unset;
+        color: unset;
+        background-color: unset;
+        inset: unset;
+        margin: unset;
+        border-width: unset;
+        border-style: unset;
+        border-color: unset;
+        border-image: unset;
+        padding: unset;
+        overflow: unset;
+      }
+
+      ${c('content')} {
+        position: relative;
+      }
+
+      ${c('text')} {
+        pointer-events: none;
+      }
+
+      ${c('with-arrow')} {
+        --arrow-width: 16px;
+        /* Center the arrow on the overlap between the tooltip and its anchor, not on the anchor's
+         * center. When the tooltip is at least as large as the anchor this equals the anchor
+         * center; when the anchor is taller/wider than the tooltip (e.g. a small tooltip on a big
+         * button) it keeps the arrow centered on the tooltip body instead of pushed to the edge.
+         * --anchor-start/--anchor-end are the anchor's near/far edges relative to the tooltip's
+         * top-left; 100% resolves against height (top) or width (left) at each use site. */
+        --arrow-pos: calc((max(0px, var(--anchor-start)) + min(100%, var(--anchor-end))) / 2);
+
+        &::before {
+          content: '';
+          position: absolute;
+          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+          width: var(--arrow-width);
+          height: var(--arrow-width);
+        }
+
+        &${c('left')} {
+          padding-right: calc(var(--arrow-width) / 2);
+          &::before {
+            right: 0;
+            top: var(--arrow-pos);
+            transform: translateY(-50%);
+          }
+        }
+
+        &${c('right')} {
+          padding-left: calc(var(--arrow-width) / 2);
+          &::before {
+            left: 0;
+            top: var(--arrow-pos);
+            transform: translateY(-50%);
+          }
+        }
+
+        &${c('top')} {
+          padding-bottom: calc(var(--arrow-width) / 2);
+          &::before {
+            bottom: 0;
+            left: var(--arrow-pos);
+            transform: translateX(-50%);
+          }
+        }
+
+        &${c('bottom')} {
+          padding-top: calc(var(--arrow-width) / 2);
+          &::before {
+            top: 0;
+            left: var(--arrow-pos);
+            transform: translateX(-50%);
+          }
+        }
+      }
+
+      ${c('closing')}:popover-open {
+        pointer-events: none;
+      }
+    `,
+    },
+});

package/base/tree/index.d.ts

@@ -0,0 +1,8 @@
+export declare const treeStyles: import("@ngneers/controls-themes").ThemePart<"tree", import("@ngneers/controls-themes").ControlTemplate<"tree", ["root", "empty", "invalid", "item", "group", "default-item", "toggle", "toggle-placeholder", "toggle-icon", "toggle-arrow", "item-checkbox-placeholder", "item-selectable", "item-selected", "item-highlighted", "item-disabled", "item-expanded"], readonly [{
+    readonly class: "scroller";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>;
+}, {
+    readonly class: "item-checkbox";
+    readonly template: import("@ngneers/controls-themes").ControlTemplate<"checkbox", ["root", "input", "box", "box-checked", "box-indeterminate", "box-icon", "box-icon-visible", "invalid"], readonly []>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"tree">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/tree/index.js

@@ -0,0 +1,65 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { treeControlTemplate } from '@ngneers/controls-themes/templates/tree';
+export const treeStyles = createThemePart({
+    controlTemplate: treeControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ c, d }) => css `
+      ${c('root')} {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      ${c('item')},
+      ${c('group')} {
+        display: inline-flex;
+        align-items: center;
+        width: 100%;
+        padding-inline-start: calc(var(--ngn-tree-level, 0) * 1.5rem);
+      }
+      ${c('toggle')},
+      ${c('toggle-placeholder')},
+      ${c('item-checkbox-placeholder')} {
+        flex: none;
+        width: 1.5rem;
+      }
+      ${c('toggle')} {
+        /* Full item height so the whole column expands/collapses instead of selecting. */
+        align-self: stretch;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        padding: 0;
+      }
+      ${c('toggle-icon')} {
+        /* Icon-button visual: a centred, fixed square that gets the hover affordance. */
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        transition: background 0.15s ease;
+      }
+      ${c('toggle-arrow')} {
+        display: inline-block;
+        transition: transform 0.15s ease;
+      }
+      ${c('item-expanded')} ${c('toggle-arrow')} {
+        transform: rotate(90deg);
+      }
+      ${c('item-disabled')} {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+      ${c('root')}:has(${c('empty')}) ${d('scroller')} {
+        display: none;
+      }
+      ${c('root')} ${d('scroller', 'item')} {
+        display: flex;
+      }
+    `,
+    },
+});

package/base/upload/index.d.ts

@@ -0,0 +1,2 @@
+export declare const uploadStyles: import("@ngneers/controls-themes").ThemePart<"upload", import("@ngneers/controls-themes").ControlTemplate<"upload", ["root", "dragover", "disabled", "clickable", "draggable", "has-files", "list-top", "list-bottom", "list-left", "list-right", "main", "zone", "icon", "placeholder", "list", "item", "item-pending", "item-uploading", "item-done", "item-failed", "status", "file", "name", "size", "progress", "actions", "action", "footer", "trigger"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"upload">[], []>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/base/upload/index.js

@@ -0,0 +1,125 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { uploadControlTemplate } from '@ngneers/controls-themes/templates/upload';
+export const uploadStyles = createThemePart({
+    controlTemplate: uploadControlTemplate,
+    dependencies: [],
+    root: {
+        css: ({ c }) => {
+            return css `
+        ${c('root')} {
+          display: flex;
+          gap: 0.75rem;
+          width: 100%;
+        }
+        /* File-list placement relative to the drop zone. */
+        ${c('list-top')},
+        ${c('list-bottom')} {
+          flex-direction: column;
+        }
+        ${c('list-left')},
+        ${c('list-right')} {
+          flex-direction: row;
+        }
+        ${c('list-top')} ${c('list')},
+        ${c('list-left')} ${c('list')} {
+          order: -1;
+        }
+
+        /* Drop zone + manual footer column. */
+        ${c('main')} {
+          display: flex;
+          flex-direction: column;
+          gap: 0.75rem;
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+
+        /* Projected native input: the real, focusable control. Visually hidden
+           but overlaid on the whole zone so a click anywhere opens the picker
+           and keyboard focus lands on it. */
+        ${c('root')} input[type='file'] {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 0;
+          border: 0;
+          opacity: 0;
+          cursor: inherit;
+          /* Only accept pointer input when clicking is an allowed interaction. */
+          pointer-events: none;
+        }
+        ${c('clickable')} input[type='file'] {
+          pointer-events: auto;
+        }
+
+        ${c('zone')} {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+          text-align: center;
+        }
+        ${c('clickable')} ${c('zone')} {
+          cursor: pointer;
+        }
+
+        ${c('disabled')} {
+          pointer-events: none;
+        }
+
+        ${c('list')} {
+          display: flex;
+          flex-direction: column;
+          overflow-y: auto;
+          max-height: 14rem;
+          min-width: 0;
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+        /* Beside the zone: share the row width. */
+        ${c('list-left')} ${c('list')},
+        ${c('list-right')} ${c('list')} {
+          flex: 1 1 auto;
+        }
+
+        ${c('item')} {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        ${c('file')} {
+          display: flex;
+          flex-direction: column;
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+        ${c('name')} {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        ${c('progress')} {
+          width: 100%;
+        }
+
+        ${c('actions')} {
+          display: flex;
+          flex: 0 0 auto;
+          align-items: center;
+          gap: 0.25rem;
+        }
+
+        ${c('footer')} {
+          display: flex;
+          justify-content: flex-end;
+        }
+      `;
+        },
+    },
+});

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './api';
+export * from './templates';
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC"}

package/index.js

@@ -0,0 +1,2 @@
+export * from './api';
+export * from './templates';

package/nova/accordion/index.d.ts

@@ -0,0 +1,254 @@
+export declare const accordionStyles: import("@ngneers/controls-themes").ThemePart<"accordion", import("@ngneers/controls-themes").ControlTemplate<"accordion", ["root"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"accordion">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    border: null;
+    text: null;
+    disabled: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    invalid: {
+        text: null;
+        border: null;
+        background: null;
+    };
+    primary: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    secondary: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    accent: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    error: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    warning: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    info: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    success: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': null;
+    };
+    surface: {
+        '700-on-50': null;
+        '600-on-100': null;
+        '50-contrast': null;
+        '100-contrast': null;
+        '200-contrast': null;
+        '300-contrast': null;
+        '400-contrast': null;
+        '500-contrast': null;
+        '600-contrast': null;
+        '700-contrast': null;
+        '800-contrast': null;
+        '900-contrast': null;
+        '950-contrast': null;
+        '50': null;
+        '100': null;
+        '200': null;
+        '300': null;
+        '400': null;
+        '500': null;
+        '600': null;
+        '700': null;
+        '800': null;
+        '900': null;
+        '950': 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;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"font", {
+    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;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map