@seyuna/postcss 1.0.0-canary.37 → 1.0.0-canary.39

package/dist/at-rules/color-scheme.d.ts

@@ -1,3 +1,4 @@
+import { type AtRule } from "postcss";
 import { PluginContext } from "../types.js";
-export declare const light: (atRule: any, context: PluginContext) => void;
-export declare const dark: (atRule: any, context: PluginContext) => void;
+export declare const light: (atRule: AtRule, context: PluginContext) => void;
+export declare const dark: (atRule: AtRule, context: PluginContext) => void;

package/dist/at-rules/color-scheme.js

@@ -1,5 +1,4 @@
-import Rule from "postcss/lib/rule";
-import AtRule from "postcss/lib/at-rule";
+import postcss from "postcss";
 /**
  * Custom PostCSS plugin handler factory for `@light` and `@dark` at-rules.
  */
@@ -15,7 +14,7 @@ function createColorSchemeHandler(scheme) {
         /**
          * Rule 1: [data-mode="scheme"] & { ... } (Explicit mode)
          */
-        const explicitRule = new Rule({
+        const explicitRule = postcss.rule({
             selector: `[${modeAttribute}="${scheme}"] &`,
             source: atRule.source,
         });
@@ -23,12 +22,12 @@ function createColorSchemeHandler(scheme) {
         /**
          * Rule 2: @media (prefers-color-scheme: scheme) { [data-mode="system"] & { ... } } (System preference)
          */
-        const mediaAtRule = new AtRule({
+        const mediaAtRule = postcss.atRule({
             name: "media",
             params: `(prefers-color-scheme: ${scheme})`,
             source: atRule.source,
         });
-        const systemRule = new Rule({
+        const systemRule = postcss.rule({
             selector: `[${modeAttribute}="system"] &`,
             source: atRule.source,
         });
@@ -40,5 +39,5 @@ function createColorSchemeHandler(scheme) {
         atRule.replaceWith(mediaAtRule, explicitRule);
     };
 }
-export const light = createColorSchemeHandler('light');
-export const dark = createColorSchemeHandler('dark');
+export const light = createColorSchemeHandler("light");
+export const dark = createColorSchemeHandler("dark");

package/dist/at-rules/color.d.ts

@@ -1,9 +1,10 @@
+import type { AtRule } from "postcss";
 import { PluginContext } from "../types.js";
 /**
- * Handler for @each-standard-color
+ * Handler for @each-tone
  */
-export declare function eachStandardColor(atRule: any, context: PluginContext): void;
+export declare function eachTone(atRule: AtRule, context: PluginContext): void;
 /**
- * Handler for @each-fixed-color
+ * Handler for @each-swatch
  */
-export declare function eachFixedColor(atRule: any, context: PluginContext): void;
+export declare function eachSwatch(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/color.js

@@ -1,8 +1,8 @@
 import { generateRules } from "../helpers.js";
 /**
- * Handler for @each-standard-color
+ * Handler for @each-tone
  */
-export function eachStandardColor(atRule, context) {
+export function eachTone(atRule, context) {
     const { config } = context;
     const hueNames = config.ui ? Object.keys(config.ui.theme.hues) : [];
     const rules = generateRules(hueNames, atRule, context);
@@ -12,12 +12,13 @@ export function eachStandardColor(atRule, context) {
         atRule.remove();
 }
 /**
- * Handler for @each-fixed-color
+ * Handler for @each-swatch
  */
-export function eachFixedColor(atRule, context) {
+export function eachSwatch(atRule, context) {
     const { config } = context;
     const mergedNames = [
         ...new Set([
+            ...(config.ui ? Object.keys(config.ui.theme.colors) : []),
             ...(config.ui ? Object.keys(config.ui.theme.light.colors) : []),
             ...(config.ui ? Object.keys(config.ui.theme.dark.colors) : []),
         ]),

package/dist/at-rules/config.d.ts

@@ -1,6 +1,7 @@
+import type { AtRule } from "postcss";
 import { PluginContext } from "../types.js";
 /**
  * Handler for @config "seyuna"
  * Parses the configuration defined directly in CSS.
  */
-export declare function handleConfig(atRule: any, context: PluginContext): void;
+export declare function handleConfig(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/config.js

@@ -1,3 +1,15 @@
+import { reportWarning } from "../errors.js";
+function parseNumber(value) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+function parseColorTriplet(value) {
+    const parts = value.split(/\s+/).map(parseNumber);
+    if (parts.length !== 3 || parts.some((part) => part === undefined)) {
+        return undefined;
+    }
+    return parts;
+}
 /**
  * Handler for @config "seyuna"
  * Parses the configuration defined directly in CSS.
@@ -32,35 +44,54 @@ export function handleConfig(atRule, context) {
         atRule.walkDecls((decl) => {
             const prop = decl.prop;
             const value = decl.value;
-            // Hues: --hue-alpha: 0;
             if (prop.startsWith("--hue-")) {
                 const name = prop.replace("--hue-", "");
-                theme.hues[name] = parseFloat(value);
+                const parsed = parseNumber(value);
+                if (parsed === undefined) {
+                    reportWarning(`Ignoring invalid hue value for "${prop}": "${value}"`, decl, context);
+                    return;
+                }
+                theme.hues[name] = parsed;
             }
-            // Fixed Colors: --color-primary: 0.66 0.26 240;
             else if (prop.startsWith("--color-")) {
                 const name = prop.replace("--color-", "");
-                const [l, c, h] = value.split(/\s+/).map(parseFloat);
+                const parsed = parseColorTriplet(value);
+                if (!parsed) {
+                    reportWarning(`Ignoring invalid color tuple for "${prop}": "${value}"`, decl, context);
+                    return;
+                }
+                const [l, c, h] = parsed;
                 theme.colors[name] = { lightness: l, chroma: c, hue: h };
             }
-            // Theme Palettes: --light-lightness: 0.66;
             else if (prop.startsWith("--light-") || prop.startsWith("--dark-")) {
                 const isLight = prop.startsWith("--light-");
                 const palette = isLight ? theme.light : theme.dark;
                 const key = prop.replace(isLight ? "--light-" : "--dark-", "");
-                if (key === "lightness")
-                    palette.lightness = parseFloat(value);
-                else if (key === "chroma")
-                    palette.chroma = parseFloat(value);
+                if (key === "lightness" || key === "chroma") {
+                    const parsed = parseNumber(value);
+                    if (parsed === undefined) {
+                        reportWarning(`Ignoring invalid palette value for "${prop}": "${value}"`, decl, context);
+                        return;
+                    }
+                    palette[key] = parsed;
+                }
                 else if (key === "background" || key === "text") {
-                    const [l, c, h] = value.split(/\s+/).map(parseFloat);
+                    const parsed = parseColorTriplet(value);
+                    if (!parsed) {
+                        reportWarning(`Ignoring invalid color tuple for "${prop}": "${value}"`, decl, context);
+                        return;
+                    }
+                    const [l, c, h] = parsed;
                     palette[key] = { lightness: l, chroma: c, hue: h };
                 }
                 else {
-                    // Custom colors in palette: --light-surface: 1 0 0;
-                    // Also supports overrides like --light-color-primary: 0.8 0.1 240;
                     const cleanKey = key.replace(/^color-/, "");
-                    const [l, c, h] = value.split(/\s+/).map(parseFloat);
+                    const parsed = parseColorTriplet(value);
+                    if (!parsed) {
+                        reportWarning(`Ignoring invalid color tuple for "${prop}": "${value}"`, decl, context);
+                        return;
+                    }
+                    const [l, c, h] = parsed;
                     palette.colors[cleanKey] = { lightness: l, chroma: c, hue: h };
                 }
             }

package/dist/at-rules/container.d.ts

@@ -1,3 +1,4 @@
+import { type AtRule } from "postcss";
 import { PluginContext } from "../types.js";
 /**
  * Custom PostCSS plugin handler for responsive at-rules.
@@ -15,4 +16,4 @@ import { PluginContext } from "../types.js";
  *   }
  *
  */
-export default function container(atRule: any, context: PluginContext): void;
+export default function container(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/container.js

@@ -1,4 +1,4 @@
-import AtRule from "postcss/lib/at-rule";
+import postcss from "postcss";
 /**
  * Custom PostCSS plugin handler for responsive at-rules.
  *
@@ -17,7 +17,6 @@ import AtRule from "postcss/lib/at-rule";
  */
 export default function container(atRule, context) {
     const { config } = context;
-    // Default breakpoints
     const defaultBreakpoints = {
         xs: "20rem",
         sm: "40rem",
@@ -26,18 +25,17 @@ export default function container(atRule, context) {
         xl: "80rem",
         "2xl": "96rem",
     };
-    // Merge with config if available (assuming config.ui.breakpoints exists)
     const breakpoints = {
         ...defaultBreakpoints,
-        ...(config.ui?.theme?.breakpoints || {}),
+        ...(config.ui?.theme.breakpoints ?? {}),
     };
-    if (Object.keys(breakpoints).includes(atRule.name)) {
+    if (atRule.name in breakpoints) {
         const minWidth = breakpoints[atRule.name];
         const clonedNodes = [];
         atRule.each((node) => {
             clonedNodes.push(node.clone());
         });
-        const containerAtRule = new AtRule({
+        const containerAtRule = postcss.atRule({
             name: "container",
             params: `(min-width: ${minWidth})`,
             source: atRule.source,

package/dist/at-rules/import.d.ts

@@ -1,6 +1,7 @@
+import { type AtRule } from "postcss";
 import { PluginContext } from "../types.js";
 /**
- * Handler for @import "seyuna"
+ * Handler for @seyuna
  * Injects the core Seyuna Design System variables and base styles
  */
-export declare function handleImport(atRule: any, context: PluginContext): void;
+export declare function handleImport(atRule: AtRule, context: PluginContext): void;

package/dist/at-rules/import.js

@@ -1,154 +1,122 @@
-import Rule from "postcss/lib/rule";
-import Declaration from "postcss/lib/declaration";
-import AtRule from "postcss/lib/at-rule";
+import postcss from "postcss";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
-import postcss from "postcss";
+import { reportWarning } from "../errors.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
+const GLOBAL_STYLES_PATH = path.resolve(__dirname, "../styles/seyuna-global.css");
+let cachedGlobalStyleNodes;
+function getCachedGlobalStyleNodes() {
+    if (cachedGlobalStyleNodes) {
+        return cachedGlobalStyleNodes.map((node) => node.clone());
+    }
+    if (!fs.existsSync(GLOBAL_STYLES_PATH)) {
+        cachedGlobalStyleNodes = [
+            postcss.atRule({
+                name: "layer",
+                params: "reset, base, components, utilities",
+            }),
+        ];
+        return cachedGlobalStyleNodes.map((node) => node.clone());
+    }
+    const globalCss = fs.readFileSync(GLOBAL_STYLES_PATH, "utf-8");
+    const parsed = postcss.parse(globalCss, { from: GLOBAL_STYLES_PATH });
+    cachedGlobalStyleNodes = parsed.nodes.map((node) => node.clone());
+    return cachedGlobalStyleNodes.map((node) => node.clone());
+}
+function createDecl(prop, value) {
+    return postcss.decl({ prop, value });
+}
+function createColorVarDecls(name, color) {
+    return [
+        createDecl(`--${name}-lightness`, String(color.lightness)),
+        createDecl(`--${name}-chroma`, String(color.chroma)),
+        createDecl(`--${name}-hue`, String(color.hue)),
+    ];
+}
 /**
- * Handler for @import "seyuna"
+ * Handler for @seyuna
  * Injects the core Seyuna Design System variables and base styles
  */
 export function handleImport(atRule, context) {
-    // Support both @seyuna; and the previous @import "seyuna" logic
-    // Since this handler is now registered to @seyuna, we just check params or just run it.
-    const params = atRule.params.replace(/['"]/g, "").trim();
-    // If it's @seyuna; the params will be empty.
-    // If it's @import "seyuna", this handler wouldn't be called unless we kept the name "import".
-    // But we want this to run for @seyuna;
-    if (atRule.name === "seyuna") {
-        const { config, options } = context;
-        if (!config.ui) {
-            atRule.remove();
-            return;
-        }
-        const { theme } = config.ui;
-        const modeAttribute = options.modeAttribute;
-        const nodes = [];
-        // 1. Ingest Global Base Styles (Reset, Layers, etc.)
-        try {
-            const globalStylesPath = path.resolve(__dirname, "../styles/seyuna-global.css");
-            if (fs.existsSync(globalStylesPath)) {
-                const globalCss = fs.readFileSync(globalStylesPath, "utf-8");
-                const parsed = postcss.parse(globalCss);
-                // Push all nodes from the global styles (reset, layers, etc.)
-                parsed.nodes.forEach((node) => {
-                    nodes.push(node.clone());
-                });
-            }
-            else {
-                nodes.push(new AtRule({
-                    name: "layer",
-                    params: "reset, base, components, utilities",
-                }));
-            }
-        }
-        catch (e) {
-            console.warn("[Seyuna PostCSS] Could not load global base styles:", e);
+    if (atRule.name !== "seyuna") {
+        return;
+    }
+    if (context.state.hasInjectedSeyuna) {
+        reportWarning("Ignoring duplicate @seyuna; only the first injection is applied.", atRule, context);
+        atRule.remove();
+        return;
+    }
+    const { config, options } = context;
+    if (!config.ui) {
+        atRule.remove();
+        return;
+    }
+    context.state.hasInjectedSeyuna = true;
+    const { theme } = config.ui;
+    const modeAttribute = options.modeAttribute;
+    const nodes = [];
+    try {
+        nodes.push(...getCachedGlobalStyleNodes());
+    }
+    catch (error) {
+        reportWarning(`Could not load global base styles: ${error instanceof Error ? error.message : String(error)}`, atRule, context);
+    }
+    const rootRule = postcss.rule({ selector: ":root", source: atRule.source });
+    for (const [name, value] of Object.entries(theme.hues)) {
+        rootRule.append(createDecl(`--${name}-hue`, String(value)));
+    }
+    for (const [name, color] of Object.entries(theme.colors)) {
+        rootRule.append(...createColorVarDecls(name, color));
+    }
+    nodes.push(rootRule);
+    const getPaletteDecls = (palette) => {
+        const decls = [];
+        if (palette.lightness !== undefined) {
+            decls.push(createDecl("--lightness", String(palette.lightness)));
         }
-        // 2. Global Hues and Base Colors (:root)
-        const rootRule = new Rule({ selector: ":root", source: atRule.source });
-        // Process all hues from config
-        if (theme.hues) {
-            for (const [name, value] of Object.entries(theme.hues)) {
-                rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(value) }));
-            }
+        if (palette.chroma !== undefined) {
+            decls.push(createDecl("--chroma", String(palette.chroma)));
         }
-        // Add shared colors from theme.colors
-        if (theme.colors) {
-            for (const [name, color] of Object.entries(theme.colors)) {
-                rootRule.append(new Declaration({
-                    prop: `--${name}-lightness`,
-                    value: String(color.lightness),
-                }));
-                rootRule.append(new Declaration({
-                    prop: `--${name}-chroma`,
-                    value: String(color.chroma),
-                }));
-                rootRule.append(new Declaration({ prop: `--${name}-hue`, value: String(color.hue) }));
-            }
+        if (palette.background) {
+            decls.push(createDecl("--background", `oklch(${palette.background.lightness} ${palette.background.chroma} ${palette.background.hue})`));
         }
-        nodes.push(rootRule);
-        // Helper to generate palette declarations for a specific mode
-        const getPaletteDecls = (palette) => {
-            const decls = [];
-            if (palette.lightness !== undefined) {
-                decls.push(new Declaration({
-                    prop: "--lightness",
-                    value: String(palette.lightness),
-                }));
-            }
-            if (palette.chroma !== undefined) {
-                decls.push(new Declaration({ prop: "--chroma", value: String(palette.chroma) }));
-            }
-            // Standard background/text if they exist
-            if (palette.background) {
-                decls.push(new Declaration({
-                    prop: "--background",
-                    value: `oklch(${palette.background.lightness} ${palette.background.chroma} ${palette.background.hue})`,
-                }));
-            }
-            if (palette.text) {
-                decls.push(new Declaration({
-                    prop: "--text",
-                    value: `oklch(${palette.text.lightness} ${palette.text.chroma} ${palette.text.hue})`,
-                }));
-            }
-            if (palette.colors) {
-                for (const [name, color] of Object.entries(palette.colors)) {
-                    const c = color;
-                    decls.push(new Declaration({
-                        prop: `--${name}-lightness`,
-                        value: String(c.lightness),
-                    }));
-                    decls.push(new Declaration({
-                        prop: `--${name}-chroma`,
-                        value: String(c.chroma),
-                    }));
-                    decls.push(new Declaration({ prop: `--${name}-hue`, value: String(c.hue) }));
-                }
-            }
-            return decls;
-        };
-        // 3. Explicit Mode Selectors ([data-mode="..."])
-        if (theme.light) {
-            const lightRule = new Rule({
-                selector: `[${modeAttribute}="light"]`,
-                source: atRule.source,
-            });
-            lightRule.append(...getPaletteDecls(theme.light));
-            nodes.push(lightRule);
+        if (palette.text) {
+            decls.push(createDecl("--text", `oklch(${palette.text.lightness} ${palette.text.chroma} ${palette.text.hue})`));
         }
-        if (theme.dark) {
-            const darkRule = new Rule({
-                selector: `[${modeAttribute}="dark"]`,
-                source: atRule.source,
-            });
-            darkRule.append(...getPaletteDecls(theme.dark));
-            nodes.push(darkRule);
+        for (const [name, color] of Object.entries(palette.colors)) {
+            decls.push(...createColorVarDecls(name, color));
         }
-        // 4. System Preference Support
-        const createSystemMedia = (scheme, palette) => {
-            const media = new AtRule({
-                name: "media",
-                params: `(prefers-color-scheme: ${scheme})`,
-                source: atRule.source,
-            });
-            const rule = new Rule({
-                selector: `[${modeAttribute}="system"]`,
-                source: atRule.source,
-            });
-            rule.append(...getPaletteDecls(palette));
-            media.append(rule);
-            return media;
-        };
-        if (theme.light)
-            nodes.push(createSystemMedia("light", theme.light));
-        if (theme.dark)
-            nodes.push(createSystemMedia("dark", theme.dark));
-        // Replace the @import rule with our generated CSS
-        atRule.replaceWith(...nodes);
-    }
+        return decls;
+    };
+    const lightRule = postcss.rule({
+        selector: `[${modeAttribute}="light"]`,
+        source: atRule.source,
+    });
+    lightRule.append(...getPaletteDecls(theme.light));
+    nodes.push(lightRule);
+    const darkRule = postcss.rule({
+        selector: `[${modeAttribute}="dark"]`,
+        source: atRule.source,
+    });
+    darkRule.append(...getPaletteDecls(theme.dark));
+    nodes.push(darkRule);
+    const createSystemMedia = (scheme, palette) => {
+        const media = postcss.atRule({
+            name: "media",
+            params: `(prefers-color-scheme: ${scheme})`,
+            source: atRule.source,
+        });
+        const rule = postcss.rule({
+            selector: `[${modeAttribute}="system"]`,
+            source: atRule.source,
+        });
+        rule.append(...getPaletteDecls(palette));
+        media.append(rule);
+        return media;
+    };
+    nodes.push(createSystemMedia("light", theme.light));
+    nodes.push(createSystemMedia("dark", theme.dark));
+    atRule.replaceWith(...nodes);
 }

package/dist/at-rules/index.d.ts

@@ -1,6 +1,7 @@
+import type { AtRule } from "postcss";
 import { PluginContext } from "../types.js";
 export interface AtRuleHandler {
     name: string;
-    handler: (atRule: any, context: PluginContext) => void;
+    handler: (atRule: AtRule, context: PluginContext) => void;
 }
 export declare const atRuleHandlers: AtRuleHandler[];

package/dist/at-rules/index.js

@@ -1,5 +1,4 @@
-// import type { AtRule } from "postcss";
-import { eachStandardColor, eachFixedColor } from "./color.js";
+import { eachTone, eachSwatch } from "./color.js";
 import container from "./container.js";
 import { light, dark } from "./color-scheme.js";
 import { handleImport } from "./import.js";
@@ -8,8 +7,8 @@ import { handleConfig } from "./config.js";
 export const atRuleHandlers = [
     { name: "config", handler: handleConfig },
     { name: "seyuna", handler: handleImport },
-    { name: "each-standard-color", handler: eachStandardColor },
-    { name: "each-fixed-color", handler: eachFixedColor },
+    { name: "each-tone", handler: eachTone },
+    { name: "each-swatch", handler: eachSwatch },
     { name: "light", handler: light },
     { name: "dark", handler: dark },
     { name: "xs", handler: container },

package/dist/config.js

@@ -28,44 +28,86 @@ const DEFAULT_OPTIONS = {
     config: undefined,
     functions: undefined,
 };
-export function loadConfig(options = {}) {
-    const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
-    const baseConfig = {
+const DEFAULT_THEME = {
+    hues: { ...DEFAULT_HUES },
+    colors: {},
+    light: {
+        chroma: 0,
+        lightness: 0,
+        background: { lightness: 0, chroma: 0, hue: 0 },
+        text: { lightness: 0, chroma: 0, hue: 0 },
+        colors: {},
+    },
+    dark: {
+        chroma: 0,
+        lightness: 0,
+        background: { lightness: 0, chroma: 0, hue: 0 },
+        text: { lightness: 0, chroma: 0, hue: 0 },
+        colors: {},
+    },
+    breakpoints: {},
+};
+function normalizeConfig(config) {
+    const theme = config?.ui?.theme;
+    return {
+        ...config,
         ui: {
+            ...config?.ui,
             theme: {
-                hues: { ...DEFAULT_HUES },
-                colors: {},
+                ...DEFAULT_THEME,
+                ...theme,
+                hues: {
+                    ...DEFAULT_HUES,
+                    ...(theme?.hues ?? {}),
+                },
+                colors: {
+                    ...DEFAULT_THEME.colors,
+                    ...(theme?.colors ?? {}),
+                },
                 light: {
-                    chroma: 0,
-                    lightness: 0,
-                    background: { lightness: 0, chroma: 0, hue: 0 },
-                    text: { lightness: 0, chroma: 0, hue: 0 },
-                    colors: {},
+                    ...DEFAULT_THEME.light,
+                    ...(theme?.light ?? {}),
+                    background: {
+                        ...DEFAULT_THEME.light.background,
+                        ...(theme?.light?.background ?? {}),
+                    },
+                    text: {
+                        ...DEFAULT_THEME.light.text,
+                        ...(theme?.light?.text ?? {}),
+                    },
+                    colors: {
+                        ...DEFAULT_THEME.light.colors,
+                        ...(theme?.light?.colors ?? {}),
+                    },
                 },
                 dark: {
-                    chroma: 0,
-                    lightness: 0,
-                    background: { lightness: 0, chroma: 0, hue: 0 },
-                    text: { lightness: 0, chroma: 0, hue: 0 },
-                    colors: {},
+                    ...DEFAULT_THEME.dark,
+                    ...(theme?.dark ?? {}),
+                    background: {
+                        ...DEFAULT_THEME.dark.background,
+                        ...(theme?.dark?.background ?? {}),
+                    },
+                    text: {
+                        ...DEFAULT_THEME.dark.text,
+                        ...(theme?.dark?.text ?? {}),
+                    },
+                    colors: {
+                        ...DEFAULT_THEME.dark.colors,
+                        ...(theme?.dark?.colors ?? {}),
+                    },
+                },
+                breakpoints: {
+                    ...DEFAULT_THEME.breakpoints,
+                    ...(theme?.breakpoints ?? {}),
                 },
             },
         },
     };
-    if (mergedOptions.config) {
-        // Deep merge or at least merge hues
-        const config = mergedOptions.config;
-        if (config.ui?.theme) {
-            config.ui.theme.hues = { ...DEFAULT_HUES, ...config.ui.theme.hues };
-        }
-        return {
-            config: config,
-            options: { ...mergedOptions, modeAttribute: "data-mode" },
-        };
-    }
-    // Return base config with defaults
+}
+export function loadConfig(options = {}) {
+    const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
     return {
-        config: baseConfig,
+        config: normalizeConfig(mergedOptions.config),
         options: { ...mergedOptions, modeAttribute: "data-mode" },
     };
 }