@lukso/core 1.2.0-dev.b2635ca → 1.2.0

package/dist/{chunk-6VE73XQH.cjs → chunk-CUDG6NPH.cjs}

@@ -86,14 +86,12 @@ function withTheme(Base) {
       return this.themeRoot;
     }
     /**
-     * Update the host element's and theme root's class based on isDark state
+     * Update the host element's class based on isDark state
      */
     updateHostClass() {
       if (this.isDark) {
-        this.classList.add("dark");
         this.themeRoot.classList.add("dark");
       } else {
-        this.classList.remove("dark");
         this.themeRoot.classList.remove("dark");
       }
     }
@@ -110,4 +108,4 @@ function withTheme(Base) {
 
 
 exports.withTheme = withTheme;
-//# sourceMappingURL=chunk-6VE73XQH.cjs.map
+//# sourceMappingURL=chunk-CUDG6NPH.cjs.map

package/dist/chunk-CUDG6NPH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-CUDG6NPH.cjs","../src/mixins/theme.ts"],"names":[],"mappings":"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","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-CUDG6NPH.cjs","sourcesContent":[null,"/**\n * Theme Mixin\n *\n * Mixin to add theme detection and management to a Lit component\n */\n\nimport type { LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nexport type Theme = 'light' | 'dark' | 'auto'\n\n/**\n * Mixin to add theme management to a Lit component\n *\n * Provides a `theme` property and `isDark` state that automatically handles:\n * - Manual theme selection ('light' or 'dark')\n * - Auto theme detection based on system preferences\n * - Reactive updates when system theme changes\n * - Automatically wraps all rendered content in a themed div with 'dark' class when dark mode is active\n *\n * All content rendered by the component will be inside a theme-root div that receives the dark class.\n * Components can use render() normally - no changes needed.\n *\n * @typeParam T - The Lit component class being extended\n * @returns Extended class with theme management capabilities\n *\n * @example\n * ```typescript\n * import { LitElement, html } from 'lit';\n * import { customElement } from 'lit/decorators.js';\n * import { withTheme } from '@lukso/core/mixins';\n *\n * @customElement('my-component')\n * export class MyComponent extends withTheme(LitElement) {\n *   render() {\n *     return html`\n *       <div class=\"text-neutral-20 dark:text-neutral-100\">\n *         Current theme: ${this.theme}\n *       </div>\n *     `;\n *   }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function withTheme<T extends typeof LitElement>(Base: T): any {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  class Mixin extends (Base as any) {\n    /**\n     * Theme mode: 'light', 'dark', or 'auto' (follows system preference)\n     */\n    @property({ type: String, reflect: true })\n    theme: Theme = 'light'\n\n    /**\n     * Computed state indicating if dark mode is active\n     */\n    @state()\n    protected isDark = false\n\n    /**\n     * The theme root element that wraps all rendered content and receives the dark class\n     */\n    private themeRoot!: HTMLDivElement\n\n    private mediaQueryList: MediaQueryList | null = null\n\n    connectedCallback(): void {\n      super.connectedCallback()\n      this.updateTheme()\n      this.updateHostClass()\n\n      // Listen for system theme changes when in 'auto' mode\n      if (this.theme === 'auto') {\n        this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')\n        this.mediaQueryList.addEventListener(\n          'change',\n          this.handleMediaQueryChange\n        )\n      }\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback()\n\n      if (this.mediaQueryList) {\n        this.mediaQueryList.removeEventListener(\n          'change',\n          this.handleMediaQueryChange\n        )\n      }\n    }\n\n    updated(changedProperties: Map<string, any>): void {\n      super.updated(changedProperties)\n\n      // Handle theme changes\n      if (changedProperties.has('theme')) {\n        this.updateTheme()\n\n        // Update media query listener when theme mode changes\n        if (this.theme === 'auto' && !this.mediaQueryList) {\n          this.mediaQueryList = window.matchMedia(\n            '(prefers-color-scheme: dark)'\n          )\n          this.mediaQueryList.addEventListener(\n            'change',\n            this.handleMediaQueryChange\n          )\n        } else if (this.theme !== 'auto' && this.mediaQueryList) {\n          this.mediaQueryList.removeEventListener(\n            'change',\n            this.handleMediaQueryChange\n          )\n          this.mediaQueryList = null\n        }\n      }\n\n      // Update host class when isDark changes\n      if (changedProperties.has('isDark')) {\n        this.updateHostClass()\n      }\n    }\n\n    /**\n     * Handle system theme changes\n     *\n     * @param event - Media query list event\n     */\n    private handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      this.isDark = event.matches\n    }\n\n    /**\n     * Update isDark state based on theme property\n     */\n    protected updateTheme(): void {\n      if (this.theme === 'auto') {\n        this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n      } else {\n        this.isDark = this.theme === 'dark'\n      }\n    }\n\n    /**\n     * Create the render root with a themed wrapper div\n     */\n    createRenderRoot(): Element | ShadowRoot {\n      const root = super.createRenderRoot()\n\n      this.themeRoot = document.createElement('div')\n      this.themeRoot.setAttribute('data-theme-root', '')\n\n      root.appendChild(this.themeRoot)\n      return this.themeRoot\n    }\n\n    /**\n     * Update the host element's class based on isDark state\n     */\n    private updateHostClass(): void {\n      if (this.isDark) {\n        this.themeRoot.classList.add('dark')\n      } else {\n        this.themeRoot.classList.remove('dark')\n      }\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return Mixin as any\n}\n"]}

package/dist/{chunk-H3LA56KM.js → chunk-LQIOVPBE.js}

@@ -86,14 +86,12 @@ function withTheme(Base) {
       return this.themeRoot;
     }
     /**
-     * Update the host element's and theme root's class based on isDark state
+     * Update the host element's class based on isDark state
      */
     updateHostClass() {
       if (this.isDark) {
-        this.classList.add("dark");
         this.themeRoot.classList.add("dark");
       } else {
-        this.classList.remove("dark");
         this.themeRoot.classList.remove("dark");
       }
     }
@@ -110,4 +108,4 @@ function withTheme(Base) {
 export {
   withTheme
 };
-//# sourceMappingURL=chunk-H3LA56KM.js.map
+//# sourceMappingURL=chunk-LQIOVPBE.js.map

package/dist/{chunk-H3LA56KM.js.map → chunk-LQIOVPBE.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/mixins/theme.ts"],"sourcesContent":["/**\n * Theme Mixin\n *\n * Mixin to add theme detection and management to a Lit component\n */\n\nimport type { LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nexport type Theme = 'light' | 'dark' | 'auto'\n\n/**\n * Mixin to add theme management to a Lit component\n *\n * Provides a `theme` property and `isDark` state that automatically handles:\n * - Manual theme selection ('light' or 'dark')\n * - Auto theme detection based on system preferences\n * - Reactive updates when system theme changes\n * - Automatically wraps all rendered content in a themed div with 'dark' class when dark mode is active\n *\n * All content rendered by the component will be inside a theme-root div that receives the dark class.\n * Components can use render() normally - no changes needed.\n *\n * @typeParam T - The Lit component class being extended\n * @returns Extended class with theme management capabilities\n *\n * @example\n * ```typescript\n * import { LitElement, html } from 'lit';\n * import { customElement } from 'lit/decorators.js';\n * import { withTheme } from '@lukso/core/mixins';\n *\n * @customElement('my-component')\n * export class MyComponent extends withTheme(LitElement) {\n *   render() {\n *     return html`\n *       <div class=\"text-neutral-20 dark:text-neutral-100\">\n *         Current theme: ${this.theme}\n *       </div>\n *     `;\n *   }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function withTheme<T extends typeof LitElement>(Base: T): any {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  class Mixin extends (Base as any) {\n    /**\n     * Theme mode: 'light', 'dark', or 'auto' (follows system preference)\n     */\n    @property({ type: String, reflect: true })\n    theme: Theme = 'light'\n\n    /**\n     * Computed state indicating if dark mode is active\n     */\n    @state()\n    protected isDark = false\n\n    /**\n     * The theme root element that wraps all rendered content and receives the dark class\n     */\n    private themeRoot!: HTMLDivElement\n\n    private mediaQueryList: MediaQueryList | null = null\n\n    connectedCallback(): void {\n      super.connectedCallback()\n      this.updateTheme()\n      this.updateHostClass()\n\n      // Listen for system theme changes when in 'auto' mode\n      if (this.theme === 'auto') {\n        this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')\n        this.mediaQueryList.addEventListener(\n          'change',\n          this.handleMediaQueryChange\n        )\n      }\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback()\n\n      if (this.mediaQueryList) {\n        this.mediaQueryList.removeEventListener(\n          'change',\n          this.handleMediaQueryChange\n        )\n      }\n    }\n\n    updated(changedProperties: Map<string, any>): void {\n      super.updated(changedProperties)\n\n      // Handle theme changes\n      if (changedProperties.has('theme')) {\n        this.updateTheme()\n\n        // Update media query listener when theme mode changes\n        if (this.theme === 'auto' && !this.mediaQueryList) {\n          this.mediaQueryList = window.matchMedia(\n            '(prefers-color-scheme: dark)'\n          )\n          this.mediaQueryList.addEventListener(\n            'change',\n            this.handleMediaQueryChange\n          )\n        } else if (this.theme !== 'auto' && this.mediaQueryList) {\n          this.mediaQueryList.removeEventListener(\n            'change',\n            this.handleMediaQueryChange\n          )\n          this.mediaQueryList = null\n        }\n      }\n\n      // Update host class when isDark changes\n      if (changedProperties.has('isDark')) {\n        this.updateHostClass()\n      }\n    }\n\n    /**\n     * Handle system theme changes\n     *\n     * @param event - Media query list event\n     */\n    private handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      this.isDark = event.matches\n    }\n\n    /**\n     * Update isDark state based on theme property\n     */\n    protected updateTheme(): void {\n      if (this.theme === 'auto') {\n        this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n      } else {\n        this.isDark = this.theme === 'dark'\n      }\n    }\n\n    /**\n     * Create the render root with a themed wrapper div\n     */\n    createRenderRoot(): Element | ShadowRoot {\n      const root = super.createRenderRoot()\n\n      this.themeRoot = document.createElement('div')\n      this.themeRoot.setAttribute('data-theme-root', '')\n\n      root.appendChild(this.themeRoot)\n      return this.themeRoot\n    }\n\n    /**\n     * Update the host element's and theme root's class based on isDark state\n     */\n    private updateHostClass(): void {\n      if (this.isDark) {\n        this.classList.add('dark')\n        this.themeRoot.classList.add('dark')\n      } else {\n        this.classList.remove('dark')\n        this.themeRoot.classList.remove('dark')\n      }\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return Mixin as any\n}\n"],"mappings":";;;;;AAOA,SAAS,UAAU,aAAa;AAsCzB,SAAS,UAAuC,MAAc;AAAA,EAEnE,MAAM,cAAe,KAAa;AAAA,IAAlC;AAAA;AAKE,mBAAe;AAMf,WAAU,SAAS;AAOnB,WAAQ,iBAAwC;AAgEhD;AAAA;AAAA;AAAA;AAAA;AAAA,WAAQ,yBAAyB,CAAC,UAAqC;AACrE,aAAK,SAAS,MAAM;AAAA,MACtB;AAAA;AAAA,IAhEA,oBAA0B;AACxB,YAAM,kBAAkB;AACxB,WAAK,YAAY;AACjB,WAAK,gBAAgB;AAGrB,UAAI,KAAK,UAAU,QAAQ;AACzB,aAAK,iBAAiB,OAAO,WAAW,8BAA8B;AACtE,aAAK,eAAe;AAAA,UAClB;AAAA,UACA,KAAK;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IAEA,uBAA6B;AAC3B,YAAM,qBAAqB;AAE3B,UAAI,KAAK,gBAAgB;AACvB,aAAK,eAAe;AAAA,UAClB;AAAA,UACA,KAAK;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IAEA,QAAQ,mBAA2C;AACjD,YAAM,QAAQ,iBAAiB;AAG/B,UAAI,kBAAkB,IAAI,OAAO,GAAG;AAClC,aAAK,YAAY;AAGjB,YAAI,KAAK,UAAU,UAAU,CAAC,KAAK,gBAAgB;AACjD,eAAK,iBAAiB,OAAO;AAAA,YAC3B;AAAA,UACF;AACA,eAAK,eAAe;AAAA,YAClB;AAAA,YACA,KAAK;AAAA,UACP;AAAA,QACF,WAAW,KAAK,UAAU,UAAU,KAAK,gBAAgB;AACvD,eAAK,eAAe;AAAA,YAClB;AAAA,YACA,KAAK;AAAA,UACP;AACA,eAAK,iBAAiB;AAAA,QACxB;AAAA,MACF;AAGA,UAAI,kBAAkB,IAAI,QAAQ,GAAG;AACnC,aAAK,gBAAgB;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAcU,cAAoB;AAC5B,UAAI,KAAK,UAAU,QAAQ;AACzB,aAAK,SAAS,OAAO,WAAW,8BAA8B,EAAE;AAAA,MAClE,OAAO;AACL,aAAK,SAAS,KAAK,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAyC;AACvC,YAAM,OAAO,MAAM,iBAAiB;AAEpC,WAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,WAAK,UAAU,aAAa,mBAAmB,EAAE;AAEjD,WAAK,YAAY,KAAK,SAAS;AAC/B,aAAO,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKQ,kBAAwB;AAC9B,UAAI,KAAK,QAAQ;AACf,aAAK,UAAU,IAAI,MAAM;AACzB,aAAK,UAAU,UAAU,IAAI,MAAM;AAAA,MACrC,OAAO;AACL,aAAK,UAAU,OAAO,MAAM;AAC5B,aAAK,UAAU,UAAU,OAAO,MAAM;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AArHE;AAAA,IADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,KAJrC,MAKJ;AAMU;AAAA,IADT,MAAM;AAAA,KAVH,MAWM;AAkHZ,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../src/mixins/theme.ts"],"sourcesContent":["/**\n * Theme Mixin\n *\n * Mixin to add theme detection and management to a Lit component\n */\n\nimport type { LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nexport type Theme = 'light' | 'dark' | 'auto'\n\n/**\n * Mixin to add theme management to a Lit component\n *\n * Provides a `theme` property and `isDark` state that automatically handles:\n * - Manual theme selection ('light' or 'dark')\n * - Auto theme detection based on system preferences\n * - Reactive updates when system theme changes\n * - Automatically wraps all rendered content in a themed div with 'dark' class when dark mode is active\n *\n * All content rendered by the component will be inside a theme-root div that receives the dark class.\n * Components can use render() normally - no changes needed.\n *\n * @typeParam T - The Lit component class being extended\n * @returns Extended class with theme management capabilities\n *\n * @example\n * ```typescript\n * import { LitElement, html } from 'lit';\n * import { customElement } from 'lit/decorators.js';\n * import { withTheme } from '@lukso/core/mixins';\n *\n * @customElement('my-component')\n * export class MyComponent extends withTheme(LitElement) {\n *   render() {\n *     return html`\n *       <div class=\"text-neutral-20 dark:text-neutral-100\">\n *         Current theme: ${this.theme}\n *       </div>\n *     `;\n *   }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function withTheme<T extends typeof LitElement>(Base: T): any {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  class Mixin extends (Base as any) {\n    /**\n     * Theme mode: 'light', 'dark', or 'auto' (follows system preference)\n     */\n    @property({ type: String, reflect: true })\n    theme: Theme = 'light'\n\n    /**\n     * Computed state indicating if dark mode is active\n     */\n    @state()\n    protected isDark = false\n\n    /**\n     * The theme root element that wraps all rendered content and receives the dark class\n     */\n    private themeRoot!: HTMLDivElement\n\n    private mediaQueryList: MediaQueryList | null = null\n\n    connectedCallback(): void {\n      super.connectedCallback()\n      this.updateTheme()\n      this.updateHostClass()\n\n      // Listen for system theme changes when in 'auto' mode\n      if (this.theme === 'auto') {\n        this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')\n        this.mediaQueryList.addEventListener(\n          'change',\n          this.handleMediaQueryChange\n        )\n      }\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback()\n\n      if (this.mediaQueryList) {\n        this.mediaQueryList.removeEventListener(\n          'change',\n          this.handleMediaQueryChange\n        )\n      }\n    }\n\n    updated(changedProperties: Map<string, any>): void {\n      super.updated(changedProperties)\n\n      // Handle theme changes\n      if (changedProperties.has('theme')) {\n        this.updateTheme()\n\n        // Update media query listener when theme mode changes\n        if (this.theme === 'auto' && !this.mediaQueryList) {\n          this.mediaQueryList = window.matchMedia(\n            '(prefers-color-scheme: dark)'\n          )\n          this.mediaQueryList.addEventListener(\n            'change',\n            this.handleMediaQueryChange\n          )\n        } else if (this.theme !== 'auto' && this.mediaQueryList) {\n          this.mediaQueryList.removeEventListener(\n            'change',\n            this.handleMediaQueryChange\n          )\n          this.mediaQueryList = null\n        }\n      }\n\n      // Update host class when isDark changes\n      if (changedProperties.has('isDark')) {\n        this.updateHostClass()\n      }\n    }\n\n    /**\n     * Handle system theme changes\n     *\n     * @param event - Media query list event\n     */\n    private handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      this.isDark = event.matches\n    }\n\n    /**\n     * Update isDark state based on theme property\n     */\n    protected updateTheme(): void {\n      if (this.theme === 'auto') {\n        this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n      } else {\n        this.isDark = this.theme === 'dark'\n      }\n    }\n\n    /**\n     * Create the render root with a themed wrapper div\n     */\n    createRenderRoot(): Element | ShadowRoot {\n      const root = super.createRenderRoot()\n\n      this.themeRoot = document.createElement('div')\n      this.themeRoot.setAttribute('data-theme-root', '')\n\n      root.appendChild(this.themeRoot)\n      return this.themeRoot\n    }\n\n    /**\n     * Update the host element's class based on isDark state\n     */\n    private updateHostClass(): void {\n      if (this.isDark) {\n        this.themeRoot.classList.add('dark')\n      } else {\n        this.themeRoot.classList.remove('dark')\n      }\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return Mixin as any\n}\n"],"mappings":";;;;;AAOA,SAAS,UAAU,aAAa;AAsCzB,SAAS,UAAuC,MAAc;AAAA,EAEnE,MAAM,cAAe,KAAa;AAAA,IAAlC;AAAA;AAKE,mBAAe;AAMf,WAAU,SAAS;AAOnB,WAAQ,iBAAwC;AAgEhD;AAAA;AAAA;AAAA;AAAA;AAAA,WAAQ,yBAAyB,CAAC,UAAqC;AACrE,aAAK,SAAS,MAAM;AAAA,MACtB;AAAA;AAAA,IAhEA,oBAA0B;AACxB,YAAM,kBAAkB;AACxB,WAAK,YAAY;AACjB,WAAK,gBAAgB;AAGrB,UAAI,KAAK,UAAU,QAAQ;AACzB,aAAK,iBAAiB,OAAO,WAAW,8BAA8B;AACtE,aAAK,eAAe;AAAA,UAClB;AAAA,UACA,KAAK;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IAEA,uBAA6B;AAC3B,YAAM,qBAAqB;AAE3B,UAAI,KAAK,gBAAgB;AACvB,aAAK,eAAe;AAAA,UAClB;AAAA,UACA,KAAK;AAAA,QACP;AAAA,MACF;AAAA,IACF;AAAA,IAEA,QAAQ,mBAA2C;AACjD,YAAM,QAAQ,iBAAiB;AAG/B,UAAI,kBAAkB,IAAI,OAAO,GAAG;AAClC,aAAK,YAAY;AAGjB,YAAI,KAAK,UAAU,UAAU,CAAC,KAAK,gBAAgB;AACjD,eAAK,iBAAiB,OAAO;AAAA,YAC3B;AAAA,UACF;AACA,eAAK,eAAe;AAAA,YAClB;AAAA,YACA,KAAK;AAAA,UACP;AAAA,QACF,WAAW,KAAK,UAAU,UAAU,KAAK,gBAAgB;AACvD,eAAK,eAAe;AAAA,YAClB;AAAA,YACA,KAAK;AAAA,UACP;AACA,eAAK,iBAAiB;AAAA,QACxB;AAAA,MACF;AAGA,UAAI,kBAAkB,IAAI,QAAQ,GAAG;AACnC,aAAK,gBAAgB;AAAA,MACvB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAcU,cAAoB;AAC5B,UAAI,KAAK,UAAU,QAAQ;AACzB,aAAK,SAAS,OAAO,WAAW,8BAA8B,EAAE;AAAA,MAClE,OAAO;AACL,aAAK,SAAS,KAAK,UAAU;AAAA,MAC/B;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAyC;AACvC,YAAM,OAAO,MAAM,iBAAiB;AAEpC,WAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,WAAK,UAAU,aAAa,mBAAmB,EAAE;AAEjD,WAAK,YAAY,KAAK,SAAS;AAC/B,aAAO,KAAK;AAAA,IACd;AAAA;AAAA;AAAA;AAAA,IAKQ,kBAAwB;AAC9B,UAAI,KAAK,QAAQ;AACf,aAAK,UAAU,UAAU,IAAI,MAAM;AAAA,MACrC,OAAO;AACL,aAAK,UAAU,UAAU,OAAO,MAAM;AAAA,MACxC;AAAA,IACF;AAAA,EACF;AAnHE;AAAA,IADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,KAJrC,MAKJ;AAMU;AAAA,IADT,MAAM;AAAA,KAVH,MAWM;AAgHZ,SAAO;AACT;","names":[]}

package/dist/index.cjs

@@ -33,7 +33,7 @@ var _chunkFR74YPGJcjs = require('./chunk-FR74YPGJ.cjs');
 var _chunkRM42NG7Ecjs = require('./chunk-RM42NG7E.cjs');
 
 
-var _chunk6VE73XQHcjs = require('./chunk-6VE73XQH.cjs');
+var _chunkCUDG6NPHcjs = require('./chunk-CUDG6NPH.cjs');
 
 
 var _chunkNJQVWIZLcjs = require('./chunk-NJQVWIZL.cjs');
@@ -60,5 +60,5 @@ require('./chunk-ZBDE64SD.cjs');
 
 
 
-exports.EXTENSION_STORE_LINKS = _chunkQU6NUTY6cjs.EXTENSION_STORE_LINKS; exports.GRAPHQL_ENDPOINT_MAINNET = _chunkLUT5BHYLcjs.GRAPHQL_ENDPOINT_MAINNET; exports.GRAPHQL_ENDPOINT_TESTNET = _chunkLUT5BHYLcjs.GRAPHQL_ENDPOINT_TESTNET; exports.LUKSO_CHAINS_BY_ID = _chunkMCNNULYXcjs.LUKSO_CHAINS_BY_ID; exports.SUPPORTED_NETWORK_IDS = _chunkLUT5BHYLcjs.SUPPORTED_NETWORK_IDS; exports.UrlConverter = _chunkQU6NUTY6cjs.UrlConverter; exports.UrlResolver = _chunkQU6NUTY6cjs.UrlResolver; exports.browserInfo = _chunkQU6NUTY6cjs.browserInfo; exports.clearIntlService = _chunkRM42NG7Ecjs.clearIntlService; exports.createIntlService = _chunkRM42NG7Ecjs.createIntlService; exports.defaultConfig = _chunkRM42NG7Ecjs.defaultConfig; exports.deviceService = _chunkNJQVWIZLcjs.deviceService; exports.getChainById = _chunkMCNNULYXcjs.getChainById; exports.getIntlService = _chunkRM42NG7Ecjs.getIntlService; exports.luksoMainnet = _chunkMCNNULYXcjs.luksoMainnet; exports.luksoTestnet = _chunkMCNNULYXcjs.luksoTestnet; exports.setIntlService = _chunkRM42NG7Ecjs.setIntlService; exports.slug = _chunkQU6NUTY6cjs.slug; exports.withDeviceService = _chunkCC3LFUYYcjs.withDeviceService; exports.withIntlService = _chunkFR74YPGJcjs.withIntlService; exports.withTheme = _chunk6VE73XQHcjs.withTheme;
+exports.EXTENSION_STORE_LINKS = _chunkQU6NUTY6cjs.EXTENSION_STORE_LINKS; exports.GRAPHQL_ENDPOINT_MAINNET = _chunkLUT5BHYLcjs.GRAPHQL_ENDPOINT_MAINNET; exports.GRAPHQL_ENDPOINT_TESTNET = _chunkLUT5BHYLcjs.GRAPHQL_ENDPOINT_TESTNET; exports.LUKSO_CHAINS_BY_ID = _chunkMCNNULYXcjs.LUKSO_CHAINS_BY_ID; exports.SUPPORTED_NETWORK_IDS = _chunkLUT5BHYLcjs.SUPPORTED_NETWORK_IDS; exports.UrlConverter = _chunkQU6NUTY6cjs.UrlConverter; exports.UrlResolver = _chunkQU6NUTY6cjs.UrlResolver; exports.browserInfo = _chunkQU6NUTY6cjs.browserInfo; exports.clearIntlService = _chunkRM42NG7Ecjs.clearIntlService; exports.createIntlService = _chunkRM42NG7Ecjs.createIntlService; exports.defaultConfig = _chunkRM42NG7Ecjs.defaultConfig; exports.deviceService = _chunkNJQVWIZLcjs.deviceService; exports.getChainById = _chunkMCNNULYXcjs.getChainById; exports.getIntlService = _chunkRM42NG7Ecjs.getIntlService; exports.luksoMainnet = _chunkMCNNULYXcjs.luksoMainnet; exports.luksoTestnet = _chunkMCNNULYXcjs.luksoTestnet; exports.setIntlService = _chunkRM42NG7Ecjs.setIntlService; exports.slug = _chunkQU6NUTY6cjs.slug; exports.withDeviceService = _chunkCC3LFUYYcjs.withDeviceService; exports.withIntlService = _chunkFR74YPGJcjs.withIntlService; exports.withTheme = _chunkCUDG6NPHcjs.withTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -33,7 +33,7 @@ import {
 } from "./chunk-4TNWG4ME.js";
 import {
   withTheme
-} from "./chunk-H3LA56KM.js";
+} from "./chunk-LQIOVPBE.js";
 import {
   deviceService
 } from "./chunk-X2QNFZU7.js";

package/dist/mixins/index.cjs

@@ -8,12 +8,12 @@ var _chunkFR74YPGJcjs = require('../chunk-FR74YPGJ.cjs');
 require('../chunk-RM42NG7E.cjs');
 
 
-var _chunk6VE73XQHcjs = require('../chunk-6VE73XQH.cjs');
+var _chunkCUDG6NPHcjs = require('../chunk-CUDG6NPH.cjs');
 require('../chunk-NJQVWIZL.cjs');
 require('../chunk-ZBDE64SD.cjs');
 
 
 
 
-exports.withDeviceService = _chunkCC3LFUYYcjs.withDeviceService; exports.withIntlService = _chunkFR74YPGJcjs.withIntlService; exports.withTheme = _chunk6VE73XQHcjs.withTheme;
+exports.withDeviceService = _chunkCC3LFUYYcjs.withDeviceService; exports.withIntlService = _chunkFR74YPGJcjs.withIntlService; exports.withTheme = _chunkCUDG6NPHcjs.withTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/mixins/index.js

@@ -8,7 +8,7 @@ import {
 import "../chunk-4TNWG4ME.js";
 import {
   withTheme
-} from "../chunk-H3LA56KM.js";
+} from "../chunk-LQIOVPBE.js";
 import "../chunk-X2QNFZU7.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/mixins/theme.cjs

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunk6VE73XQHcjs = require('../chunk-6VE73XQH.cjs');
+var _chunkCUDG6NPHcjs = require('../chunk-CUDG6NPH.cjs');
 require('../chunk-ZBDE64SD.cjs');
 
 
-exports.withTheme = _chunk6VE73XQHcjs.withTheme;
+exports.withTheme = _chunkCUDG6NPHcjs.withTheme;
 //# sourceMappingURL=theme.cjs.map

package/dist/mixins/theme.js

@@ -1,6 +1,6 @@
 import {
   withTheme
-} from "../chunk-H3LA56KM.js";
+} from "../chunk-LQIOVPBE.js";
 import "../chunk-EUXUH3YW.js";
 export {
   withTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/core",
-  "version": "1.2.0-dev.b2635ca",
+  "version": "1.2.0",
   "description": "Core utilities, services, and mixins for LUKSO web components and applications",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/mixins/theme.ts

@@ -156,14 +156,12 @@ export function withTheme<T extends typeof LitElement>(Base: T): any {
     }
 
     /**
-     * Update the host element's and theme root's class based on isDark state
+     * Update the host element's class based on isDark state
      */
     private updateHostClass(): void {
       if (this.isDark) {
-        this.classList.add('dark')
         this.themeRoot.classList.add('dark')
       } else {
-        this.classList.remove('dark')
         this.themeRoot.classList.remove('dark')
       }
     }

package/dist/chunk-6VE73XQH.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-6VE73XQH.cjs","../src/mixins/theme.ts"],"names":[],"mappings":"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","file":"/home/runner/work/service-auth-simple/service-auth-simple/packages/core/dist/chunk-6VE73XQH.cjs","sourcesContent":[null,"/**\n * Theme Mixin\n *\n * Mixin to add theme detection and management to a Lit component\n */\n\nimport type { LitElement } from 'lit'\nimport { property, state } from 'lit/decorators.js'\n\nexport type Theme = 'light' | 'dark' | 'auto'\n\n/**\n * Mixin to add theme management to a Lit component\n *\n * Provides a `theme` property and `isDark` state that automatically handles:\n * - Manual theme selection ('light' or 'dark')\n * - Auto theme detection based on system preferences\n * - Reactive updates when system theme changes\n * - Automatically wraps all rendered content in a themed div with 'dark' class when dark mode is active\n *\n * All content rendered by the component will be inside a theme-root div that receives the dark class.\n * Components can use render() normally - no changes needed.\n *\n * @typeParam T - The Lit component class being extended\n * @returns Extended class with theme management capabilities\n *\n * @example\n * ```typescript\n * import { LitElement, html } from 'lit';\n * import { customElement } from 'lit/decorators.js';\n * import { withTheme } from '@lukso/core/mixins';\n *\n * @customElement('my-component')\n * export class MyComponent extends withTheme(LitElement) {\n *   render() {\n *     return html`\n *       <div class=\"text-neutral-20 dark:text-neutral-100\">\n *         Current theme: ${this.theme}\n *       </div>\n *     `;\n *   }\n * }\n * ```\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function withTheme<T extends typeof LitElement>(Base: T): any {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  class Mixin extends (Base as any) {\n    /**\n     * Theme mode: 'light', 'dark', or 'auto' (follows system preference)\n     */\n    @property({ type: String, reflect: true })\n    theme: Theme = 'light'\n\n    /**\n     * Computed state indicating if dark mode is active\n     */\n    @state()\n    protected isDark = false\n\n    /**\n     * The theme root element that wraps all rendered content and receives the dark class\n     */\n    private themeRoot!: HTMLDivElement\n\n    private mediaQueryList: MediaQueryList | null = null\n\n    connectedCallback(): void {\n      super.connectedCallback()\n      this.updateTheme()\n      this.updateHostClass()\n\n      // Listen for system theme changes when in 'auto' mode\n      if (this.theme === 'auto') {\n        this.mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')\n        this.mediaQueryList.addEventListener(\n          'change',\n          this.handleMediaQueryChange\n        )\n      }\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback()\n\n      if (this.mediaQueryList) {\n        this.mediaQueryList.removeEventListener(\n          'change',\n          this.handleMediaQueryChange\n        )\n      }\n    }\n\n    updated(changedProperties: Map<string, any>): void {\n      super.updated(changedProperties)\n\n      // Handle theme changes\n      if (changedProperties.has('theme')) {\n        this.updateTheme()\n\n        // Update media query listener when theme mode changes\n        if (this.theme === 'auto' && !this.mediaQueryList) {\n          this.mediaQueryList = window.matchMedia(\n            '(prefers-color-scheme: dark)'\n          )\n          this.mediaQueryList.addEventListener(\n            'change',\n            this.handleMediaQueryChange\n          )\n        } else if (this.theme !== 'auto' && this.mediaQueryList) {\n          this.mediaQueryList.removeEventListener(\n            'change',\n            this.handleMediaQueryChange\n          )\n          this.mediaQueryList = null\n        }\n      }\n\n      // Update host class when isDark changes\n      if (changedProperties.has('isDark')) {\n        this.updateHostClass()\n      }\n    }\n\n    /**\n     * Handle system theme changes\n     *\n     * @param event - Media query list event\n     */\n    private handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      this.isDark = event.matches\n    }\n\n    /**\n     * Update isDark state based on theme property\n     */\n    protected updateTheme(): void {\n      if (this.theme === 'auto') {\n        this.isDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n      } else {\n        this.isDark = this.theme === 'dark'\n      }\n    }\n\n    /**\n     * Create the render root with a themed wrapper div\n     */\n    createRenderRoot(): Element | ShadowRoot {\n      const root = super.createRenderRoot()\n\n      this.themeRoot = document.createElement('div')\n      this.themeRoot.setAttribute('data-theme-root', '')\n\n      root.appendChild(this.themeRoot)\n      return this.themeRoot\n    }\n\n    /**\n     * Update the host element's and theme root's class based on isDark state\n     */\n    private updateHostClass(): void {\n      if (this.isDark) {\n        this.classList.add('dark')\n        this.themeRoot.classList.add('dark')\n      } else {\n        this.classList.remove('dark')\n        this.themeRoot.classList.remove('dark')\n      }\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  return Mixin as any\n}\n"]}