@ngneers/controls-themes 0.0.1-next.0

package/shade/radio/index.d.ts

@@ -0,0 +1,142 @@
+export declare const radioStyles: import("@ngneers/controls-themes").ThemePart<"radio", import("@ngneers/controls-themes").ControlTemplate<"radio", ["root", "circle", "circle-checked", "dot", "label"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"radio">[], [import("@ngneers/controls-themes").VariableTemplate<"anim", {
+    time: {
+        fade: null;
+        snappyFade: null;
+    };
+    ease: {
+        fade: null;
+        snappyFade: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"shadow", {
+    sm: null;
+    md: null;
+    lg: null;
+    xl: null;
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

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

package/shade/radio/index.js

@@ -0,0 +1,51 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { animationTemplate, colorsTemplate, shadowTemplate, sizesTemplate, } from '@ngneers/controls-themes/shade/base';
+import { radioControlTemplate } from '@ngneers/controls-themes/templates/radio';
+export const radioStyles = createThemePart({
+    controlTemplate: radioControlTemplate,
+    base: baseStyles.radio,
+    dependencies: [animationTemplate, colorsTemplate, shadowTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('circle')} {
+        width: 1rem;
+        height: 1rem;
+        border: 1px solid
+          color-mix(in srgb, ${v('color.input')} 45%, ${v('color.muted.foreground')} 55%);
+        border-radius: ${v('size.rounded.full')};
+        box-shadow: ${v('shadow.sm')};
+        transition:
+          border-color ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')},
+          box-shadow ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+      }
+      ${c('dot')} {
+        width: 0.5rem;
+        height: 0.5rem;
+        background-color: ${v('color.primary.base')};
+        opacity: 0;
+        transform: scale(0.4);
+        transition:
+          opacity ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')},
+          transform ${v('anim.time.snappyFade')} ${v('anim.ease.snappyFade')};
+      }
+      ${c('circle-checked')} {
+        border-color: ${v('color.primary.base')};
+      }
+      ${c('circle-checked')} ${c('dot')} {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      ${c('root')}[aria-disabled='true'] {
+        opacity: 0.5;
+      }
+
+      ${c('root')}:focus-visible ${c('circle')} {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 3px color-mix(in srgb, ${v('color.ring')} 50%, transparent);
+      }
+    `,
+    },
+});

package/shade/radio-group/index.d.ts

@@ -0,0 +1,128 @@
+export declare const radioGroupStyles: import("@ngneers/controls-themes").ThemePart<"radio-group", import("@ngneers/controls-themes").ControlTemplate<"radio-group", ["root", "invalid"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"radio-group">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

package/shade/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/radio-group/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAa3B,CAAC"}

package/shade/radio-group/index.js

@@ -0,0 +1,18 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/shade/base';
+import { radioGroupControlTemplate } from '@ngneers/controls-themes/templates/radio-group';
+export const radioGroupStyles = createThemePart({
+    controlTemplate: radioGroupControlTemplate,
+    base: baseStyles.radioGroup,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        css: ({ v, c }) => css `
+      ${c('invalid')} {
+        border: 1px solid ${v('color.destructive.base')};
+        border-radius: ${v('size.rounded.md')};
+        padding: 0.5rem;
+      }
+    `,
+    },
+});

package/shade/scroller/index.d.ts

@@ -0,0 +1,128 @@
+export declare const scrollerStyles: import("@ngneers/controls-themes").ThemePart<"scroller", import("@ngneers/controls-themes").ControlTemplate<"scroller", ["root", "virtual", "item", "item-sticky"], readonly []>, import("@ngneers/controls-themes").VariableTemplate<"scroller">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/scroller/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQzB,CAAC"}

package/shade/scroller/index.js

@@ -0,0 +1,13 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/shade/base';
+import { scrollerControlTemplate } from '@ngneers/controls-themes/templates/scroller';
+export const scrollerStyles = createThemePart({
+    controlTemplate: scrollerControlTemplate,
+    base: baseStyles.scroller,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        // Structural scroll behaviour is handled by the base part; shade adds no decoration.
+        css: () => css ``,
+    },
+});

package/shade/select/index.d.ts

@@ -0,0 +1,147 @@
+export declare const selectStyles: import("@ngneers/controls-themes").ThemePart<"select", 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;
+    }]>;
+}]>, import("@ngneers/controls-themes").VariableTemplate<"select">[], [import("@ngneers/controls-themes").VariableTemplate<"color", {
+    background: null;
+    foreground: null;
+    text: null;
+    border: null;
+    input: null;
+    ring: null;
+    popover: {
+        base: null;
+        foreground: null;
+    };
+    primary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    secondary: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    accent: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    surface: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    muted: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+    destructive: {
+        25: null;
+        50: null;
+        100: null;
+        200: null;
+        300: null;
+        400: null;
+        500: null;
+        600: null;
+        700: null;
+        800: null;
+        900: null;
+        950: null;
+        975: null;
+        base: null;
+        foreground: null;
+    };
+}>, import("@ngneers/controls-themes").VariableTemplate<"size", {
+    rounded: {
+        sm: null;
+        md: null;
+        lg: null;
+        full: null;
+    };
+    padding: {
+        sm: null;
+        md: null;
+        lg: null;
+        xl: null;
+    };
+}>]>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shade/select/index.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsCvB,CAAC"}

package/shade/select/index.js

@@ -0,0 +1,43 @@
+import { createThemePart, css } from '@ngneers/controls-themes/api';
+import { baseStyles } from '@ngneers/controls-themes/base';
+import { colorsTemplate, sizesTemplate } from '@ngneers/controls-themes/shade/base';
+import { selectControlTemplate } from '@ngneers/controls-themes/templates/select';
+export const selectStyles = createThemePart({
+    controlTemplate: selectControlTemplate,
+    base: baseStyles.select,
+    dependencies: [colorsTemplate, sizesTemplate],
+    root: {
+        // The trigger surface comes from the input-field part; the dropdown from list-box + popover.
+        css: ({ v, c, d }) => css `
+      ${c('root')} {
+        --icon-size: 14px;
+      }
+      ${c('input')} {
+        gap: ${v('size.padding.sm')};
+        &:not(:has([aria-readonly])):not(:has([disabled])) {
+          cursor: pointer;
+        }
+        &:has([aria-readonly]),
+        &:has([disabled]) {
+          cursor: default;
+        }
+      }
+      ${c('root')}:has([role='combobox']:not([disabled]):not([aria-readonly='true'])) {
+        cursor: pointer;
+      }
+      ${c('icon')} {
+        color: ${v('color.muted.foreground')};
+        cursor: pointer;
+      }
+      ${c('filter-icon')} {
+        color: ${v('color.muted.foreground')};
+      }
+      ${c('input-editable')} {
+        cursor: text;
+      }
+      ${d('filter')} {
+        margin: ${v('size.padding.md')};
+      }
+    `,
+    },
+});