darkify-js 1.1.13-beta.0 → 1.1.13-beta.2

package/dist/darkify.d.ts

@@ -1,13 +1,13 @@
-interface DarkifyPlugin {
-  el?: HTMLElement | ShadowRoot;
-  render(): void | HTMLElement | ShadowRoot;
+interface DarkifyPlugin<T extends HTMLElement = HTMLElement> {
+  el?: T;
+  render(): void | T;
   onThemeChange?: (theme: string) => void;
   onDestroy?: () => void;
 }
 
-interface DarkifyPluginElement {
-  new (host: any, options?: object): DarkifyPlugin;
+interface DarkifyPluginConstructor {
   pluginId: string;
+  new (host: any, options?: any): DarkifyPlugin;
 }
 
 type StorageType = 'local' | 'session' | 'none';
@@ -16,7 +16,7 @@ interface Options {
   autoMatchTheme: boolean;
   useColorScheme: [string, string?];
   useStorage: StorageType;
-  usePlugins?: (DarkifyPluginElement | [DarkifyPluginElement, any])[];
+  usePlugins?: (DarkifyPluginConstructor | [DarkifyPluginConstructor, any])[];
 }
 
 declare class Darkify {
@@ -27,10 +27,20 @@ declare class Darkify {
     private _elm;
     private _meta;
     private _style;
+    /**
+     * Creates a new Darkify instance with default options
+     * @param element - Button ID (recommended) or HTML element selector
+     */
+    constructor(element: string);
+    /**
+     * Creates a new Darkify instance with custom options only
+     * @param options - Options
+     */
+    constructor(options: Partial<Options>);
     /**
      * Creates a new Darkify instance for managing dark/light theme
      * @param element - Button ID (recommended) or HTML element selector
-     * @param options - Configuration options for customizing behavior
+     * @param options - Options
      * @see {@link https://github.com/emrocode/darkify-js/wiki|Documentation}
      */
     constructor(element: string, options: Partial<Options>);

package/dist/darkify.esm.js

@@ -1,7 +1,7 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.13-beta.0
+ * @version 1.1.13-beta.2
  * @license MIT
  */
 class EventListenerManager {
@@ -36,13 +36,15 @@ class Darkify {
         if (!isBrowser)
             return;
         this._elm = new EventListenerManager();
-        const opts = Object.assign(Object.assign({}, defaultOptions), options);
+        const el = typeof element === 'string' ? element : undefined;
+        const inputOpts = element && typeof element === 'object' ? element : options;
+        const opts = Object.assign(Object.assign({}, defaultOptions), inputOpts);
         this.options = opts;
         this.theme = this.getOsPreference();
         this._style = document.createElement('style');
         this._meta = document.createElement('meta');
-        this.init(element);
         this.createAttribute();
+        this.init(el);
         this.syncThemeBetweenTabs();
     }
     init(element) {
@@ -50,16 +52,20 @@ class Darkify {
             this.theme = isDark ? 'dark' : 'light';
             this.createAttribute();
         });
-        this.initPlugins();
-        const hasWidget = this.plugins.some(p => p.el !== undefined);
-        if (element && !hasWidget) {
-            this._elm.addListener(document, 'DOMContentLoaded', () => {
+        const setup = () => {
+            this.initPlugins();
+            const hasWidget = this.plugins.some(p => p.el !== undefined);
+            if (element && !hasWidget) {
                 const htmlElement = document.querySelector(element);
                 if (htmlElement) {
                     this._elm.addListener(htmlElement, 'click', () => this.toggleTheme());
                 }
-            });
+            }
+        };
+        if (document.readyState !== 'loading') {
+            return setup();
         }
+        this._elm.addListener(document, 'DOMContentLoaded', setup);
     }
     initPlugins() {
         var _a;
@@ -67,7 +73,7 @@ class Darkify {
             const [Plugin, pluginOptions] = Array.isArray(p) ? p : [p, undefined];
             const plugin = new Plugin(this, pluginOptions);
             const renderedNode = plugin.render();
-            if (renderedNode instanceof HTMLElement || renderedNode instanceof ShadowRoot) {
+            if (renderedNode) {
                 plugin.el = renderedNode;
             }
             this.plugins.push(plugin);
@@ -155,9 +161,6 @@ class Darkify {
         if (this.plugins.length > 0) {
             this.plugins.forEach(plugin => {
                 var _a;
-                if (plugin.el) {
-                    (plugin.el instanceof ShadowRoot ? plugin.el.host : plugin.el).remove();
-                }
                 (_a = plugin.onDestroy) === null || _a === void 0 ? void 0 : _a.call(plugin);
             });
             this.plugins = [];

package/dist/darkify.umd.js

@@ -1,7 +1,7 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.13-beta.0
+ * @version 1.1.13-beta.2
  * @license MIT
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Darkify=t()}(this,function(){"use strict";class e{constructor(){this.listeners=[]}addListener(e,t,s,i){e.addEventListener(t,s,i),this.listeners.push({target:e,event:t,handler:s,options:i})}clearListeners(){this.listeners.forEach(({target:e,event:t,handler:s,options:i})=>{e.removeEventListener(t,s,i)}),this.listeners=[]}}const t={autoMatchTheme:!0,useColorScheme:["#ffffff","#000000"],useStorage:"local"},s="undefined"!=typeof window;class i{constructor(i,n){if(this.options=t,this.plugins=[],this.theme="light",!s)return;this._elm=new e;const o=Object.assign(Object.assign({},t),n);this.options=o,this.theme=this.getOsPreference(),this._style=document.createElement("style"),this._meta=document.createElement("meta"),this.init(i),this.createAttribute(),this.syncThemeBetweenTabs()}init(e){this._elm.addListener(window.matchMedia("(prefers-color-scheme: dark)"),"change",({matches:e})=>{this.theme=e?"dark":"light",this.createAttribute()}),this.initPlugins();const t=this.plugins.some(e=>void 0!==e.el);e&&!t&&this._elm.addListener(document,"DOMContentLoaded",()=>{const t=document.querySelector(e);t&&this._elm.addListener(t,"click",()=>this.toggleTheme())})}initPlugins(){var e;null===(e=this.options.usePlugins)||void 0===e||e.forEach(e=>{const[t,s]=Array.isArray(e)?e:[e,void 0],i=new t(this,s),n=i.render();(n instanceof HTMLElement||n instanceof ShadowRoot)&&(i.el=n),this.plugins.push(i)})}notifyPlugins(e){this.plugins.forEach(t=>{var s;null===(s=t.onThemeChange)||void 0===s||s.call(t,e)})}getStorage(){const{useStorage:e}=this.options;if("none"!==e)return"local"===e?window.localStorage:window.sessionStorage}getOsPreference(){const e=this.getStorage();if(e){const t=e.getItem(i.storageKey);if(t)return t}return this.options.autoMatchTheme&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}createAttribute(){const e=document.documentElement,{useColorScheme:t}=this.options,s=`/**! Darkify / A simple dark mode toggle library **/\n:root:where([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;e.dataset.theme=this.theme,this.updateTags(s,t),this.savePreference()}updateTags(e,t){const[s,i]=t;this._meta.name="theme-color",this._meta.media=`(prefers-color-scheme: ${this.theme})`,this._meta.content="light"===this.theme?s:null!=i?i:s,this._style.innerHTML=e;const n=document.head;this._meta.parentNode||n.appendChild(this._meta),this._style.parentNode||n.appendChild(this._style)}savePreference(){const{useStorage:e}=this.options;if("none"===e)return;const t="local"===e,s=t?window.localStorage:window.sessionStorage;(t?window.sessionStorage:window.localStorage).removeItem(i.storageKey),s.setItem(i.storageKey,this.theme)}syncThemeBetweenTabs(){this._elm.addListener(window,"storage",e=>{e.key===i.storageKey&&e.newValue&&(this.theme=e.newValue,this.createAttribute(),this.notifyPlugins(e.newValue))})}setTheme(e){this.theme=e,this.createAttribute(),this.notifyPlugins(e)}toggleTheme(){this.setTheme("light"===this.theme?"dark":"light")}getCurrentTheme(){return this.theme}destroy(){var e,t,s,i;this._elm.clearListeners(),null===(t=null===(e=this._style)||void 0===e?void 0:e.parentNode)||void 0===t||t.removeChild(this._style),null===(i=null===(s=this._meta)||void 0===s?void 0:s.parentNode)||void 0===i||i.removeChild(this._meta),this.plugins.length>0&&(this.plugins.forEach(e=>{var t;e.el&&(e.el instanceof ShadowRoot?e.el.host:e.el).remove(),null===(t=e.onDestroy)||void 0===t||t.call(e)}),this.plugins=[])}}return i.storageKey="theme",i});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Darkify=t()}(this,function(){"use strict";class e{constructor(){this.listeners=[]}addListener(e,t,s,i){e.addEventListener(t,s,i),this.listeners.push({target:e,event:t,handler:s,options:i})}clearListeners(){this.listeners.forEach(({target:e,event:t,handler:s,options:i})=>{e.removeEventListener(t,s,i)}),this.listeners=[]}}const t={autoMatchTheme:!0,useColorScheme:["#ffffff","#000000"],useStorage:"local"},s="undefined"!=typeof window;class i{constructor(i,n){if(this.options=t,this.plugins=[],this.theme="light",!s)return;this._elm=new e;const o="string"==typeof i?i:void 0,h=i&&"object"==typeof i?i:n,r=Object.assign(Object.assign({},t),h);this.options=r,this.theme=this.getOsPreference(),this._style=document.createElement("style"),this._meta=document.createElement("meta"),this.createAttribute(),this.init(o),this.syncThemeBetweenTabs()}init(e){this._elm.addListener(window.matchMedia("(prefers-color-scheme: dark)"),"change",({matches:e})=>{this.theme=e?"dark":"light",this.createAttribute()});const t=()=>{this.initPlugins();const t=this.plugins.some(e=>void 0!==e.el);if(e&&!t){const t=document.querySelector(e);t&&this._elm.addListener(t,"click",()=>this.toggleTheme())}};if("loading"!==document.readyState)return t();this._elm.addListener(document,"DOMContentLoaded",t)}initPlugins(){var e;null===(e=this.options.usePlugins)||void 0===e||e.forEach(e=>{const[t,s]=Array.isArray(e)?e:[e,void 0],i=new t(this,s),n=i.render();n&&(i.el=n),this.plugins.push(i)})}notifyPlugins(e){this.plugins.forEach(t=>{var s;null===(s=t.onThemeChange)||void 0===s||s.call(t,e)})}getStorage(){const{useStorage:e}=this.options;if("none"!==e)return"local"===e?window.localStorage:window.sessionStorage}getOsPreference(){const e=this.getStorage();if(e){const t=e.getItem(i.storageKey);if(t)return t}return this.options.autoMatchTheme&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}createAttribute(){const e=document.documentElement,{useColorScheme:t}=this.options,s=`/**! Darkify / A simple dark mode toggle library **/\n:root:where([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;e.dataset.theme=this.theme,this.updateTags(s,t),this.savePreference()}updateTags(e,t){const[s,i]=t;this._meta.name="theme-color",this._meta.media=`(prefers-color-scheme: ${this.theme})`,this._meta.content="light"===this.theme?s:null!=i?i:s,this._style.innerHTML=e;const n=document.head;this._meta.parentNode||n.appendChild(this._meta),this._style.parentNode||n.appendChild(this._style)}savePreference(){const{useStorage:e}=this.options;if("none"===e)return;const t="local"===e,s=t?window.localStorage:window.sessionStorage;(t?window.sessionStorage:window.localStorage).removeItem(i.storageKey),s.setItem(i.storageKey,this.theme)}syncThemeBetweenTabs(){this._elm.addListener(window,"storage",e=>{e.key===i.storageKey&&e.newValue&&(this.theme=e.newValue,this.createAttribute(),this.notifyPlugins(e.newValue))})}setTheme(e){this.theme=e,this.createAttribute(),this.notifyPlugins(e)}toggleTheme(){this.setTheme("light"===this.theme?"dark":"light")}getCurrentTheme(){return this.theme}destroy(){var e,t,s,i;this._elm.clearListeners(),null===(t=null===(e=this._style)||void 0===e?void 0:e.parentNode)||void 0===t||t.removeChild(this._style),null===(i=null===(s=this._meta)||void 0===s?void 0:s.parentNode)||void 0===i||i.removeChild(this._meta),this.plugins.length>0&&(this.plugins.forEach(e=>{var t;null===(t=e.onDestroy)||void 0===t||t.call(e)}),this.plugins=[])}}return i.storageKey="theme",i});

package/dist/plugins/index.d.ts

@@ -1,31 +1,42 @@
-interface DarkifyPlugin {
-  el?: HTMLElement | ShadowRoot;
-  render(): void | HTMLElement | ShadowRoot;
-  onThemeChange?: (theme: string) => void;
-  onDestroy?: () => void;
-}
+import { DarkifyPlugin } from '../darkify';
 
 interface ThemeWidgetOptions {
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    size?: 'small' | 'medium' | 'large';
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    size: 'small' | 'medium' | 'large';
     shortcut?: string;
 }
-declare class ThemeWidget implements DarkifyPlugin {
-    el?: ShadowRoot;
+declare class ThemeWidgetElement extends HTMLElement {
     private _host;
+    private _theme;
+    private _initialized;
+    private _wrapper;
+    private _button;
+    private _span;
+    options: ThemeWidgetOptions;
+    private static _styles;
+    static get observedAttributes(): string[];
+    constructor();
+    init(host: any, options: Required<ThemeWidgetOptions>): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    onThemeChange(theme: string): void;
+    render(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'd-widget': ThemeWidgetElement;
+    }
+}
+
+declare class ThemeWidget implements DarkifyPlugin<ThemeWidgetElement> {
     static readonly pluginId = "d-widget";
+    el: ThemeWidgetElement;
     private options;
-    /**
-     * Creates a theme toggle widget button
-     * @param host - The darkify instance that controls theme state
-     * @param options - Widget configuration (position, size, shortcut)
-     */
     constructor(host: any, options?: ThemeWidgetOptions);
-    render(): ShadowRoot;
+    render(): ThemeWidgetElement;
     onThemeChange(theme: string): void;
     onDestroy(): void;
-    private getPositionVars;
-    private getSizeVar;
 }
 
 interface KeyboardShortcutOptions {
@@ -33,15 +44,13 @@ interface KeyboardShortcutOptions {
     ctrl?: boolean;
     shift?: boolean;
     target?: 'body' | 'input' | 'all';
+    cooldown?: number;
 }
 declare class KeyboardShortcut implements DarkifyPlugin {
+    static readonly pluginId = "d-keyboard-shortcut";
     private _host;
     private options;
-    /**
-     * Creates a keyboard shortcut listener for theme toggling
-     * @param host - The darkify instance that controls theme state
-     * @param options - Shortcut configuration (key, ctrl, shift, target)
-     */
+    private _lastTriggered;
     constructor(host: any, options?: KeyboardShortcutOptions);
     private handleKeyDown;
     render(): void;
@@ -51,4 +60,3 @@ declare class KeyboardShortcut implements DarkifyPlugin {
 }
 
 export { KeyboardShortcut, ThemeWidget };
-export type { KeyboardShortcutOptions, ThemeWidgetOptions };

package/dist/plugins/index.esm.js

@@ -0,0 +1,249 @@
+const pluginId = 'd-widget';
+class ThemeWidgetElement extends HTMLElement {
+    static get observedAttributes() {
+        return ['position', 'size'];
+    }
+    constructor() {
+        super();
+        this._initialized = false;
+        const shadow = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = ThemeWidgetElement._styles;
+        shadow.appendChild(style);
+    }
+    init(host, options) {
+        this._host = host;
+        this._theme = host.getCurrentTheme();
+        this.options = options;
+        this.setAttribute('position', this.options.position);
+        this.setAttribute('size', this.options.size);
+        this.render();
+    }
+    connectedCallback() {
+        this.render();
+    }
+    disconnectedCallback() {
+        this._host._elm.clearListeners();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && (name === 'position' || name === 'size')) {
+            this.render();
+        }
+    }
+    onThemeChange(theme) {
+        this._theme = theme;
+        this.render();
+    }
+    render() {
+        const icon = this._theme === 'light' ? '🌞' : '🌚';
+        if (!this._initialized) {
+            this._wrapper = document.createElement('div');
+            this._wrapper.className = 'd-wrapper';
+            this._button = document.createElement('button');
+            this._button.className = 'd-button';
+            this._button.setAttribute('aria-label', 'Toggle theme');
+            this._host._elm.addListener(this._button, 'click', () => this._host.toggleTheme());
+            this._span = document.createElement('span');
+            this._span.className = 'd-icon';
+            this._button.appendChild(this._span);
+            if (this.options.shortcut) {
+                const kbd = document.createElement('kbd');
+                kbd.className = 'd-kbd';
+                kbd.textContent = this.options.shortcut;
+                this.options.position.includes('left')
+                    ? this._wrapper.append(this._button, kbd)
+                    : this._wrapper.append(kbd, this._button);
+            }
+            else {
+                this._wrapper.appendChild(this._button);
+            }
+            this.shadowRoot.appendChild(this._wrapper);
+            this._initialized = true;
+            return;
+        }
+        this._span.textContent = icon;
+    }
+}
+ThemeWidgetElement._styles = `
+:host {
+  --widget-safe-top: env(safe-area-inset-top, 0px);
+  --widget-safe-right: env(safe-area-inset-right, 0px);
+  --widget-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --widget-safe-left: env(safe-area-inset-left, 0px);
+  --margin: 24px;
+  --top: var(--margin);
+  --right: var(--margin);
+  --bottom: auto;
+  --left: auto;
+}
+:host([position='top-left']) {
+  --top: var(--margin);
+  --right: auto;
+  --bottom: auto;
+  --left: var(--margin);
+}
+:host([position='top-right']) {
+  --top: var(--margin);
+  --right: var(--margin);
+  --bottom: auto;
+  --left: auto;
+}
+:host([position='bottom-left']) {
+  --top: auto;
+  --right: auto;
+  --bottom: calc(var(--margin) * 2);
+  --left: var(--margin);
+}
+:host([position='bottom-right']) {
+  --top: auto;
+  --right: var(--margin);
+  --bottom: calc(var(--margin) * 2);
+  --left: auto;
+}
+:host([size='small']) { --size: 36px; }
+:host([size='medium']) { --size: 56px; }
+:host([size='large']) { --size: 72px; }
+.d-wrapper {
+  position: fixed;
+  top: calc(var(--top) + var(--widget-safe-top));
+  right: calc(var(--right) + var(--widget-safe-right));
+  bottom: calc(var(--bottom) + var(--widget-safe-bottom));
+  left: calc(var(--left) + var(--widget-safe-left));
+  z-index: 9999;
+  max-width: fit-content;
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+}
+.d-button {
+  --icon-size: calc(var(--size) * 0.4);
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  border: none;
+  border-bottom: 1px solid hsl(from canvastext h s l / calc(alpha * 0.5));
+  border-radius: 50%;
+  box-shadow: 0 1px 3px 0 hsla(210, 6%, 25%, 0.3), 0 4px 8px 3px hsla(210, 6%, 25%, 0.3);
+  background-color: transparent;
+  color: canvastext;
+  cursor: pointer;
+  font-size: var(--icon-size);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.d-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border: none;
+  background-color: canvas;
+  filter: invert(90%);
+}
+.d-button:focus-visible {
+  outline: 2px solid currentcolor;
+  outline-offset: 2px;
+}
+.d-button:active {
+  transform: scale(0.98);
+  transition: transform 0.4s ease-in-out;
+}
+.d-kbd {
+  position: relative;
+  padding: 0.25em 0.4em;
+  font-size: 11px;
+  font-family: ui-monospace, monospace;
+  line-height: 1;
+  letter-spacing: -0.025em;
+  background-color: canvas;
+  color: canvastext;
+  filter: invert(90%);
+  border: none;
+  border-bottom: 1px solid hsl(from canvastext h s l / calc(alpha * 0.5));
+  border-radius: 0.25rem;
+  box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.1);
+  user-select: none;
+  -webkit-user-select: none;
+}
+`;
+customElements.define(pluginId, ThemeWidgetElement);
+
+class ThemeWidget {
+    constructor(host, options) {
+        var _a, _b, _c;
+        this.options = {
+            position: (_a = options === null || options === void 0 ? void 0 : options.position) !== null && _a !== void 0 ? _a : 'bottom-right',
+            size: (_b = options === null || options === void 0 ? void 0 : options.size) !== null && _b !== void 0 ? _b : 'medium',
+            shortcut: (_c = options === null || options === void 0 ? void 0 : options.shortcut) !== null && _c !== void 0 ? _c : '',
+        };
+        this.el = document.createElement(pluginId);
+        this.el.init(host, this.options);
+    }
+    render() {
+        document.body.appendChild(this.el);
+        return this.el;
+    }
+    onThemeChange(theme) {
+        this.el.onThemeChange(theme);
+    }
+    onDestroy() {
+        this.el.remove();
+    }
+}
+ThemeWidget.pluginId = pluginId;
+
+class KeyboardShortcut {
+    constructor(host, options) {
+        var _a, _b, _c, _d, _e;
+        this._lastTriggered = 0;
+        this.handleKeyDown = (e) => {
+            if (this.options.target === 'body' && this.isTyping(e))
+                return;
+            if (this.options.target === 'input' && !this.isTyping(e))
+                return;
+            if (this.matches(e)) {
+                e.preventDefault();
+                const now = Date.now();
+                if (now - this._lastTriggered < this.options.cooldown)
+                    return;
+                this._lastTriggered = now;
+                this._host.toggleTheme();
+            }
+        };
+        this._host = host;
+        this.options = {
+            key: (_a = options === null || options === void 0 ? void 0 : options.key) !== null && _a !== void 0 ? _a : 'd',
+            ctrl: (_b = options === null || options === void 0 ? void 0 : options.ctrl) !== null && _b !== void 0 ? _b : false,
+            shift: (_c = options === null || options === void 0 ? void 0 : options.shift) !== null && _c !== void 0 ? _c : false,
+            target: (_d = options === null || options === void 0 ? void 0 : options.target) !== null && _d !== void 0 ? _d : 'body',
+            cooldown: (_e = options === null || options === void 0 ? void 0 : options.cooldown) !== null && _e !== void 0 ? _e : 300,
+        };
+    }
+    render() {
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    onDestroy() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    matches(e) {
+        return (e.key.toLowerCase() === this.options.key.toLowerCase() &&
+            (!this.options.ctrl || e.ctrlKey || e.metaKey) &&
+            (!this.options.shift || e.shiftKey) &&
+            (this.options.ctrl || (!e.ctrlKey && !e.metaKey && !e.altKey)));
+    }
+    isTyping(e) {
+        const target = e.target;
+        const tagName = target.tagName.toLowerCase();
+        const isEditable = target.isContentEditable || tagName === 'input' || tagName === 'textarea';
+        return isEditable;
+    }
+}
+KeyboardShortcut.pluginId = 'd-keyboard-shortcut';
+
+export { KeyboardShortcut, ThemeWidget };

package/dist/plugins/index.umd.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).DarkifyPlugins={})}(this,function(t){"use strict";class e{constructor(t,e){var n,o,i;this._host=t,this.options={position:null!==(n=null==e?void 0:e.position)&&void 0!==n?n:"bottom-right",size:null!==(o=null==e?void 0:e.size)&&void 0!==o?o:"medium",shortcut:null!==(i=null==e?void 0:e.shortcut)&&void 0!==i?i:""}}render(){var t;const n=document.createElement("div");n.id=e.pluginId,this.el=n.attachShadow({mode:"open"});const o=this.getPositionVars(),i=this.getSizeVar(),s=new CSSStyleSheet;s.replaceSync(`\n      :host {\n        --widget-safe-top: env(safe-area-inset-top, 0px);\n        --widget-safe-right: env(safe-area-inset-right, 0px);\n        --widget-safe-bottom: env(safe-area-inset-bottom, 0px);\n        --widget-safe-left: env(safe-area-inset-left, 0px);\n        --widget-margin: 24px;\n      }\n\n      .d-wrapper {\n        --margin: max(var(--widget-margin), var(--widget-safe-bottom));\n        ${o}\n        ${i}\n        position: fixed;\n        top: calc(var(--pos-top) + var(--widget-safe-top));\n        right: calc(var(--pos-right) + var(--widget-safe-right));\n        bottom: calc(var(--pos-bottom) + var(--widget-safe-bottom));\n        left: calc(var(--pos-left) + var(--widget-safe-left));\n        z-index: 9999;\n        max-width: fit-content;\n        display: flex;\n        align-items: center;\n        column-gap: 0.5rem;\n      }\n\n      .d-button {\n        --icon-size: calc(var(--size) * 0.4);\n        position: relative;\n        width: var(--size);\n        height: var(--size);\n        border-radius: 50%;\n        border: none;\n        border-bottom: 2px solid var(--widget-accent, hsl(0,0%,0%,0.30));\n        box-shadow: 0 1px 3px 0 hsla(210,6%,25%,0.30), 0 4px 8px 3px hsla(210,6%,25%,0.30);\n        background-color: transparent;\n        color: canvastext;\n        cursor: pointer;\n        font-size: var(--icon-size);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        transition: transform 0.4s ease-in-out;\n        user-select: none;\n        -webkit-user-select: none;\n        -webkit-tap-highlight-color: transparent;\n      }\n\n      .d-button::before {\n        content: "";\n        position: absolute;\n        inset: 0;\n        z-index: -1;\n        border: none;\n        border-radius: 50%;\n        background-color: canvas;\n        filter: invert(90%);\n      }\n\n      .d-button.light { --widget-accent: hsl(45,99%,54%); }\n      .d-button.dark { --widget-accent: hsl(200,29%,43%); }\n\n      @media (prefers-reduced-motion: no-preference) {\n        .d-button {\n          animation: dEnter 0.4s cubic-bezier(0.34,1.56,0.64,1);\n          animation-fill-mode: backwards;\n        }\n      }\n\n      @keyframes dEnter {\n        from {\n          opacity: 0;\n          transform: scale(0.6);\n        }\n        to {\n          opacity: 1;\n          transform: scale(1);\n        }\n      }\n\n      .d-kbd {\n        position: relative;\n        padding: 0.25em 0.4em;\n        font-size: 11px;\n        font-family: ui-monospace, monospace;\n        line-height: 1;\n        letter-spacing: -0.025em;\n        background-color: canvas;\n        color: canvastext;\n        filter: invert(90%);\n        border: none;\n        border-bottom: 2px solid hsl(from canvastext h s l / calc(alpha * 0.5));\n        border-radius: 0.25rem;\n        box-shadow: 0 0 2px hsla(0,0%,0%,0.10);\n        user-select: none;\n        -webkit-user-select: none;\n      }\n    `),this.el.adoptedStyleSheets=[s];const a=document.createElement("div");a.className="d-wrapper";const r=document.createElement("button");r.className="d-button",r.setAttribute("aria-label","Toggle theme"),r.addEventListener("click",()=>this._host.toggleTheme());const l=document.createElement("span");l.className="d-icon",r.appendChild(l);const d=null===(t=this.options.position)||void 0===t?void 0:t.includes("left");if(this.options.shortcut){const t=document.createElement("kbd");t.className="d-kbd",t.textContent=this.options.shortcut,d?(a.appendChild(r),a.appendChild(t)):(a.appendChild(t),a.appendChild(r))}else a.appendChild(r);return this.el.appendChild(a),document.body.appendChild(n),this.onThemeChange(this._host.getCurrentTheme()),this.el}onThemeChange(t){var e,n;const o=null===(e=this.el)||void 0===e?void 0:e.querySelector("button.d-button"),i=null===(n=this.el)||void 0===n?void 0:n.querySelector("span.d-icon");o&&i&&(o.className=`d-button ${t}`,i.textContent="light"===t?"🌞":"🌚")}onDestroy(){this.el&&this.el.host&&this.el.host.remove()}getPositionVars(){return{"top-left":"--pos-top:var(--margin);--pos-right:auto;--pos-bottom:auto;--pos-left:var(--margin);","top-right":"--pos-top:var(--margin);--pos-right:var(--margin);--pos-bottom:auto;--pos-left:auto;","bottom-left":"--pos-top:auto;--pos-right:auto;--pos-bottom:calc(var(--margin)*2);--pos-left:var(--margin);","bottom-right":"--pos-top:auto;--pos-right:var(--margin);--pos-bottom:calc(var(--margin)*2);--pos-left:auto;"}[this.options.position]}getSizeVar(){return{small:"--size:36px;",medium:"--size:56px;",large:"--size:72px;"}[this.options.size]}}e.pluginId="d-widget";t.KeyboardShortcut=class{constructor(t,e){var n,o,i,s;this.handleKeyDown=t=>{"body"===this.options.target&&this.isTyping(t)||("input"!==this.options.target||this.isTyping(t))&&this.matches(t)&&(t.preventDefault(),this._host.toggleTheme())},this._host=t,this.options={key:null!==(n=null==e?void 0:e.key)&&void 0!==n?n:"d",ctrl:null!==(o=null==e?void 0:e.ctrl)&&void 0!==o&&o,shift:null!==(i=null==e?void 0:e.shift)&&void 0!==i&&i,target:null!==(s=null==e?void 0:e.target)&&void 0!==s?s:"body"}}render(){document.addEventListener("keydown",this.handleKeyDown)}onDestroy(){document.removeEventListener("keydown",this.handleKeyDown)}matches(t){return t.key.toLowerCase()===this.options.key.toLowerCase()&&(!this.options.ctrl||t.ctrlKey||t.metaKey)&&(!this.options.shift||t.shiftKey)&&(this.options.ctrl||!t.ctrlKey&&!t.metaKey&&!t.altKey)}isTyping(t){const e=t.target,n=e.tagName.toLowerCase();return e.isContentEditable||"input"===n||"textarea"===n}},t.ThemeWidget=e});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).DarkifyPlugins={})}(this,function(t){"use strict";const e="d-widget";class n extends HTMLElement{static get observedAttributes(){return["position","size"]}constructor(){super(),this._initialized=!1;const t=this.attachShadow({mode:"open"}),e=document.createElement("style");e.textContent=n._styles,t.appendChild(e)}init(t,e){this._host=t,this._theme=t.getCurrentTheme(),this.options=e,this.setAttribute("position",this.options.position),this.setAttribute("size",this.options.size),this.render()}connectedCallback(){this.render()}disconnectedCallback(){this._host._elm.clearListeners()}attributeChangedCallback(t,e,n){e===n||"position"!==t&&"size"!==t||this.render()}onThemeChange(t){this._theme=t,this.render()}render(){const t="light"===this._theme?"🌞":"🌚";if(!this._initialized){if(this._wrapper=document.createElement("div"),this._wrapper.className="d-wrapper",this._button=document.createElement("button"),this._button.className="d-button",this._button.setAttribute("aria-label","Toggle theme"),this._host._elm.addListener(this._button,"click",()=>this._host.toggleTheme()),this._span=document.createElement("span"),this._span.className="d-icon",this._button.appendChild(this._span),this.options.shortcut){const t=document.createElement("kbd");t.className="d-kbd",t.textContent=this.options.shortcut,this.options.position.includes("left")?this._wrapper.append(this._button,t):this._wrapper.append(t,this._button)}else this._wrapper.appendChild(this._button);return this.shadowRoot.appendChild(this._wrapper),void(this._initialized=!0)}this._span.textContent=t}}n._styles="\n:host {\n  --widget-safe-top: env(safe-area-inset-top, 0px);\n  --widget-safe-right: env(safe-area-inset-right, 0px);\n  --widget-safe-bottom: env(safe-area-inset-bottom, 0px);\n  --widget-safe-left: env(safe-area-inset-left, 0px);\n  --margin: 24px;\n  --top: var(--margin);\n  --right: var(--margin);\n  --bottom: auto;\n  --left: auto;\n}\n:host([position='top-left']) {\n  --top: var(--margin);\n  --right: auto;\n  --bottom: auto;\n  --left: var(--margin);\n}\n:host([position='top-right']) {\n  --top: var(--margin);\n  --right: var(--margin);\n  --bottom: auto;\n  --left: auto;\n}\n:host([position='bottom-left']) {\n  --top: auto;\n  --right: auto;\n  --bottom: calc(var(--margin) * 2);\n  --left: var(--margin);\n}\n:host([position='bottom-right']) {\n  --top: auto;\n  --right: var(--margin);\n  --bottom: calc(var(--margin) * 2);\n  --left: auto;\n}\n:host([size='small']) { --size: 36px; }\n:host([size='medium']) { --size: 56px; }\n:host([size='large']) { --size: 72px; }\n.d-wrapper {\n  position: fixed;\n  top: calc(var(--top) + var(--widget-safe-top));\n  right: calc(var(--right) + var(--widget-safe-right));\n  bottom: calc(var(--bottom) + var(--widget-safe-bottom));\n  left: calc(var(--left) + var(--widget-safe-left));\n  z-index: 9999;\n  max-width: fit-content;\n  display: flex;\n  align-items: center;\n  column-gap: 0.5rem;\n}\n.d-button {\n  --icon-size: calc(var(--size) * 0.4);\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  border: none;\n  border-bottom: 1px solid hsl(from canvastext h s l / calc(alpha * 0.5));\n  border-radius: 50%;\n  box-shadow: 0 1px 3px 0 hsla(210, 6%, 25%, 0.3), 0 4px 8px 3px hsla(210, 6%, 25%, 0.3);\n  background-color: transparent;\n  color: canvastext;\n  cursor: pointer;\n  font-size: var(--icon-size);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  user-select: none;\n  -webkit-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.d-button::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n  border: none;\n  background-color: canvas;\n  filter: invert(90%);\n}\n.d-button:focus-visible {\n  outline: 2px solid currentcolor;\n  outline-offset: 2px;\n}\n.d-button:active {\n  transform: scale(0.98);\n  transition: transform 0.4s ease-in-out;\n}\n.d-kbd {\n  position: relative;\n  padding: 0.25em 0.4em;\n  font-size: 11px;\n  font-family: ui-monospace, monospace;\n  line-height: 1;\n  letter-spacing: -0.025em;\n  background-color: canvas;\n  color: canvastext;\n  filter: invert(90%);\n  border: none;\n  border-bottom: 1px solid hsl(from canvastext h s l / calc(alpha * 0.5));\n  border-radius: 0.25rem;\n  box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.1);\n  user-select: none;\n  -webkit-user-select: none;\n}\n",customElements.define(e,n);class o{constructor(t,n){var o,i,s;this.options={position:null!==(o=null==n?void 0:n.position)&&void 0!==o?o:"bottom-right",size:null!==(i=null==n?void 0:n.size)&&void 0!==i?i:"medium",shortcut:null!==(s=null==n?void 0:n.shortcut)&&void 0!==s?s:""},this.el=document.createElement(e),this.el.init(t,this.options)}render(){return document.body.appendChild(this.el),this.el}onThemeChange(t){this.el.onThemeChange(t)}onDestroy(){this.el.remove()}}o.pluginId=e;class i{constructor(t,e){var n,o,i,s,r;this._lastTriggered=0,this.handleKeyDown=t=>{if(("body"!==this.options.target||!this.isTyping(t))&&("input"!==this.options.target||this.isTyping(t))&&this.matches(t)){t.preventDefault();const e=Date.now();if(e-this._lastTriggered<this.options.cooldown)return;this._lastTriggered=e,this._host.toggleTheme()}},this._host=t,this.options={key:null!==(n=null==e?void 0:e.key)&&void 0!==n?n:"d",ctrl:null!==(o=null==e?void 0:e.ctrl)&&void 0!==o&&o,shift:null!==(i=null==e?void 0:e.shift)&&void 0!==i&&i,target:null!==(s=null==e?void 0:e.target)&&void 0!==s?s:"body",cooldown:null!==(r=null==e?void 0:e.cooldown)&&void 0!==r?r:300}}render(){document.addEventListener("keydown",this.handleKeyDown)}onDestroy(){document.removeEventListener("keydown",this.handleKeyDown)}matches(t){return t.key.toLowerCase()===this.options.key.toLowerCase()&&(!this.options.ctrl||t.ctrlKey||t.metaKey)&&(!this.options.shift||t.shiftKey)&&(this.options.ctrl||!t.ctrlKey&&!t.metaKey&&!t.altKey)}isTyping(t){const e=t.target,n=e.tagName.toLowerCase();return e.isContentEditable||"input"===n||"textarea"===n}}i.pluginId="d-keyboard-shortcut",t.KeyboardShortcut=i,t.ThemeWidget=o});

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "darkify-js",
-  "version": "1.1.13-beta.0",
+  "version": "1.1.13-beta.2",
   "description": "A simple dark mode toggle library",
   "type": "module",
-  "main": "dist/darkify.umd.js",
-  "module": "dist/darkify.esm.js",
-  "types": "dist/darkify.d.ts",
   "exports": {
     ".": {
       "import": "./dist/darkify.esm.js",
@@ -13,10 +10,11 @@
       "types": "./dist/darkify.d.ts"
     },
     "./plugins": {
-      "import": "./dist/plugins/index.mjs",
+      "import": "./dist/plugins/index.esm.js",
       "require": "./dist/plugins/index.umd.js",
       "types": "./dist/plugins/index.d.ts"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist"
@@ -27,7 +25,8 @@
     "build": "npm run _cls && npm run _bundle",
     "format": "prettier --write src/",
     "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest",
-    "prepublishOnly": "npm run test && npm run build"
+    "demo": "npm run build && sh demo.sh",
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -46,18 +45,19 @@
   "author": "Emilio Romero <emrocode@gmail.com>",
   "license": "MIT",
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@types/jest": "^30.0.0",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
     "prettier": "^3.8.1",
-    "rollup": "^4.59.0",
+    "rollup": "^4.60.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^6.4.0",
+    "rollup-plugin-dts": "^6.4.1",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "~5.9.3"
   }
 }

package/dist/plugins/index.js

@@ -1,226 +0,0 @@
-class ThemeWidget {
-    constructor(host, options) {
-        var _a, _b, _c;
-        this._host = host;
-        this.options = {
-            position: (_a = options === null || options === void 0 ? void 0 : options.position) !== null && _a !== void 0 ? _a : 'bottom-right',
-            size: (_b = options === null || options === void 0 ? void 0 : options.size) !== null && _b !== void 0 ? _b : 'medium',
-            shortcut: (_c = options === null || options === void 0 ? void 0 : options.shortcut) !== null && _c !== void 0 ? _c : '',
-        };
-    }
-    render() {
-        var _a;
-        const container = document.createElement('div');
-        container.id = ThemeWidget.pluginId;
-        this.el = container.attachShadow({ mode: 'open' });
-        const positionVars = this.getPositionVars();
-        const sizeVars = this.getSizeVar();
-        const sheet = new CSSStyleSheet();
-        sheet.replaceSync(`
-      :host {
-        --widget-safe-top: env(safe-area-inset-top, 0px);
-        --widget-safe-right: env(safe-area-inset-right, 0px);
-        --widget-safe-bottom: env(safe-area-inset-bottom, 0px);
-        --widget-safe-left: env(safe-area-inset-left, 0px);
-        --widget-margin: 24px;
-      }
-
-      .d-wrapper {
-        --margin: max(var(--widget-margin), var(--widget-safe-bottom));
-        ${positionVars}
-        ${sizeVars}
-        position: fixed;
-        top: calc(var(--pos-top) + var(--widget-safe-top));
-        right: calc(var(--pos-right) + var(--widget-safe-right));
-        bottom: calc(var(--pos-bottom) + var(--widget-safe-bottom));
-        left: calc(var(--pos-left) + var(--widget-safe-left));
-        z-index: 9999;
-        max-width: fit-content;
-        display: flex;
-        align-items: center;
-        column-gap: 0.5rem;
-      }
-
-      .d-button {
-        --icon-size: calc(var(--size) * 0.4);
-        position: relative;
-        width: var(--size);
-        height: var(--size);
-        border-radius: 50%;
-        border: none;
-        border-bottom: 2px solid var(--widget-accent, hsl(0,0%,0%,0.30));
-        box-shadow: 0 1px 3px 0 hsla(210,6%,25%,0.30), 0 4px 8px 3px hsla(210,6%,25%,0.30);
-        background-color: transparent;
-        color: canvastext;
-        cursor: pointer;
-        font-size: var(--icon-size);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        transition: transform 0.4s ease-in-out;
-        user-select: none;
-        -webkit-user-select: none;
-        -webkit-tap-highlight-color: transparent;
-      }
-
-      .d-button::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        border: none;
-        border-radius: 50%;
-        background-color: canvas;
-        filter: invert(90%);
-      }
-
-      .d-button.light { --widget-accent: hsl(45,99%,54%); }
-      .d-button.dark { --widget-accent: hsl(200,29%,43%); }
-
-      @media (prefers-reduced-motion: no-preference) {
-        .d-button {
-          animation: dEnter 0.4s cubic-bezier(0.34,1.56,0.64,1);
-          animation-fill-mode: backwards;
-        }
-      }
-
-      @keyframes dEnter {
-        from {
-          opacity: 0;
-          transform: scale(0.6);
-        }
-        to {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      .d-kbd {
-        position: relative;
-        padding: 0.25em 0.4em;
-        font-size: 11px;
-        font-family: ui-monospace, monospace;
-        line-height: 1;
-        letter-spacing: -0.025em;
-        background-color: canvas;
-        color: canvastext;
-        filter: invert(90%);
-        border: none;
-        border-bottom: 2px solid hsl(from canvastext h s l / calc(alpha * 0.5));
-        border-radius: 0.25rem;
-        box-shadow: 0 0 2px hsla(0,0%,0%,0.10);
-        user-select: none;
-        -webkit-user-select: none;
-      }
-    `);
-        this.el.adoptedStyleSheets = [sheet];
-        const wrapper = document.createElement('div');
-        wrapper.className = 'd-wrapper';
-        const button = document.createElement('button');
-        button.className = 'd-button';
-        button.setAttribute('aria-label', 'Toggle theme');
-        button.addEventListener('click', () => this._host.toggleTheme());
-        const icon = document.createElement('span');
-        icon.className = 'd-icon';
-        button.appendChild(icon);
-        const isLeftPosition = (_a = this.options.position) === null || _a === void 0 ? void 0 : _a.includes('left');
-        if (this.options.shortcut) {
-            const kbd = document.createElement('kbd');
-            kbd.className = 'd-kbd';
-            kbd.textContent = this.options.shortcut;
-            if (isLeftPosition) {
-                wrapper.appendChild(button);
-                wrapper.appendChild(kbd);
-            }
-            else {
-                wrapper.appendChild(kbd);
-                wrapper.appendChild(button);
-            }
-        }
-        else {
-            wrapper.appendChild(button);
-        }
-        this.el.appendChild(wrapper);
-        document.body.appendChild(container);
-        this.onThemeChange(this._host.getCurrentTheme());
-        return this.el;
-    }
-    onThemeChange(theme) {
-        var _a, _b;
-        const button = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('button.d-button');
-        const icon = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector('span.d-icon');
-        if (button && icon) {
-            button.className = `d-button ${theme}`;
-            icon.textContent = theme === 'light' ? '🌞' : '🌚';
-        }
-    }
-    onDestroy() {
-        if (this.el && this.el.host) {
-            this.el.host.remove();
-        }
-    }
-    getPositionVars() {
-        const vars = {
-            'top-left': '--pos-top:var(--margin);--pos-right:auto;--pos-bottom:auto;--pos-left:var(--margin);',
-            'top-right': '--pos-top:var(--margin);--pos-right:var(--margin);--pos-bottom:auto;--pos-left:auto;',
-            'bottom-left': '--pos-top:auto;--pos-right:auto;--pos-bottom:calc(var(--margin)*2);--pos-left:var(--margin);',
-            'bottom-right': '--pos-top:auto;--pos-right:var(--margin);--pos-bottom:calc(var(--margin)*2);--pos-left:auto;',
-        };
-        return vars[this.options.position];
-    }
-    getSizeVar() {
-        const vars = {
-            small: '--size:36px;',
-            medium: '--size:56px;',
-            large: '--size:72px;',
-        };
-        return vars[this.options.size];
-    }
-}
-ThemeWidget.pluginId = 'd-widget';
-
-class KeyboardShortcut {
-    constructor(host, options) {
-        var _a, _b, _c, _d;
-        this.handleKeyDown = (e) => {
-            if (this.options.target === 'body' && this.isTyping(e))
-                return;
-            if (this.options.target === 'input' && !this.isTyping(e))
-                return;
-            if (this.matches(e)) {
-                e.preventDefault();
-                this._host.toggleTheme();
-            }
-        };
-        this._host = host;
-        this.options = {
-            key: (_a = options === null || options === void 0 ? void 0 : options.key) !== null && _a !== void 0 ? _a : 'd',
-            ctrl: (_b = options === null || options === void 0 ? void 0 : options.ctrl) !== null && _b !== void 0 ? _b : false,
-            shift: (_c = options === null || options === void 0 ? void 0 : options.shift) !== null && _c !== void 0 ? _c : false,
-            target: (_d = options === null || options === void 0 ? void 0 : options.target) !== null && _d !== void 0 ? _d : 'body',
-        };
-    }
-    render() {
-        document.addEventListener('keydown', this.handleKeyDown);
-        return;
-    }
-    onDestroy() {
-        document.removeEventListener('keydown', this.handleKeyDown);
-    }
-    matches(e) {
-        return (e.key.toLowerCase() === this.options.key.toLowerCase() &&
-            (!this.options.ctrl || e.ctrlKey || e.metaKey) &&
-            (!this.options.shift || e.shiftKey) &&
-            (this.options.ctrl || (!e.ctrlKey && !e.metaKey && !e.altKey)));
-    }
-    isTyping(e) {
-        const target = e.target;
-        const tagName = target.tagName.toLowerCase();
-        const isEditable = target.isContentEditable || tagName === 'input' || tagName === 'textarea';
-        return isEditable;
-    }
-}
-
-export { KeyboardShortcut, ThemeWidget };