@nuralyui/icon 0.0.7 → 0.0.9

package/icon.variables.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.variables.js","sourceRoot":"","sources":["../../../src/components/icon/icon.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEhC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Icon component CSS custom properties (design tokens)\n * \n * This file contains all the CSS custom properties used by the hy-icon component,\n * organized by functionality and including both light and dark theme variants.\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of icon appearance.\n */\nexport const styleVariables = css`\n  :host {\n    /* ----------------------------------------\n     * BASIC ICON PROPERTIES\n     * ---------------------------------------- */\n    --hybrid-icon-local-color: #000000;\n    --hybrid-icon-local-width: 18px;\n    --hybrid-icon-local-height: 18px;\n\n    /* ----------------------------------------\n     * INTERACTIVE STATES\n     * ---------------------------------------- */\n    --hybrid-icon-local-transition: opacity 0.2s ease, transform 0.2s ease;\n    --hybrid-icon-local-hover-opacity: 0.8;\n    --hybrid-icon-local-hover-transform: scale(1.1);\n    --hybrid-icon-local-hover-color: #0f62fe;\n    --hybrid-icon-local-active-opacity: 0.6;\n    --hybrid-icon-local-active-transform: scale(0.95);\n    --hybrid-icon-local-active-color: #054ada;\n    --hybrid-icon-local-disabled-opacity: 0.4;\n    --hybrid-icon-local-disabled-color: #c6c6c6;\n    \n    /* ----------------------------------------\n     * FOCUS STYLES\n     * ---------------------------------------- */\n    --hybrid-icon-local-focus-outline: 2px solid #0f62fe;\n    --hybrid-icon-local-focus-outline-offset: 2px;\n    --hybrid-icon-local-focus-background: rgba(15, 98, 254, 0.1);\n    --hybrid-icon-local-focus-border-radius: 4px;\n\n    /* ----------------------------------------\n     * CURSOR STYLES\n     * ---------------------------------------- */\n    --hybrid-icon-local-cursor: pointer;\n    --hybrid-icon-local-disabled-cursor: not-allowed;\n  }\n\n  /* ========================================\n   * DARK THEME OVERRIDES\n   * ======================================== */\n  \n  /**\n   * Dark theme styles using data-theme attribute on the SVG element\n   * These override the light theme defaults when data-theme=\"dark\" is applied\n   */\n  .svg-icon[data-theme=\"dark\"] {\n    --hybrid-icon-local-color: #ffffff;\n    --hybrid-icon-local-hover-color: #78a9ff;\n    --hybrid-icon-local-active-color: #a6c8ff;\n    --hybrid-icon-local-disabled-color: #6f6f6f;\n    --hybrid-icon-local-focus-outline: 2px solid #78a9ff;\n    --hybrid-icon-local-focus-background: rgba(120, 169, 255, 0.1);\n  }\n\n  /* ========================================\n   * REDUCED MOTION SUPPORT\n   * ======================================== */\n  \n  /**\n   * Accessibility: Respect user's motion preferences\n   * Disables animations when user prefers reduced motion\n   */\n  @media (prefers-reduced-motion: reduce) {\n    :host {\n      --hybrid-icon-local-transition: none;\n      --hybrid-icon-local-hover-transform: none;\n      --hybrid-icon-local-active-transform: none;\n    }\n  }\n`;\n"]}
+{"version":3,"file":"icon.variables.js","sourceRoot":"","sources":["../../../src/components/icon/icon.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHhC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Icon component CSS custom properties (design tokens)\n * \n * This file contains all the CSS custom properties used by the nr-icon component,\n * organized by functionality and including comprehensive theme support for multiple design systems.\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of icon appearance across different themes:\n * - Light theme (default)\n * - Dark theme\n * - Carbon Design System (light/dark)\n * - Default Design System (light/dark)\n * \n * Design tokens follow the pattern: --nuraly-[component]-[property]-[variant]\n */\nexport const styleVariables = css`\n  :host {\n    /* ========================================\n     * BASE ICON PROPERTIES\n     * ======================================== */\n    \n    /* Size properties with fallbacks */\n    --nuraly-icon-size-fallback: 18px;\n    --nuraly-icon-size-small-fallback: 14px;\n    --nuraly-icon-size-medium-fallback: 20px;\n    --nuraly-icon-size-large-fallback: 24px;\n    --nuraly-icon-size-xlarge-fallback: 32px;\n    --nuraly-icon-size-xxlarge-fallback: 40px;\n    --nuraly-icon-min-size-fallback: 12px;\n    \n    /* Color properties with theme-aware fallbacks */\n    --nuraly-color-icon-fallback: #161616;\n    \n    /* ========================================\n     * INTERACTIVE STATE PROPERTIES\n     * ======================================== */\n    \n    /* Transition properties */\n    --nuraly-icon-transition-fallback: opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease;\n    \n    /* Hover state properties */\n    --nuraly-icon-hover-opacity-fallback: 0.8;\n    --nuraly-icon-hover-transform-fallback: scale(1.05);\n    --nuraly-color-icon-hover-fallback: #0f62fe;\n    \n    /* Active state properties */\n    --nuraly-icon-active-opacity-fallback: 0.6;\n    --nuraly-icon-active-transform-fallback: scale(0.95);\n    --nuraly-color-icon-active-fallback: #054ada;\n    \n    /* Disabled state properties */\n    --nuraly-icon-disabled-opacity-fallback: 0.25;\n    --nuraly-color-icon-disabled-fallback: #c6c6c6;\n    \n    /* ========================================\n     * FOCUS STATE PROPERTIES\n     * ======================================== */\n    \n    --nuraly-icon-focus-outline-fallback: 2px solid #0f62fe;\n    --nuraly-icon-focus-outline-offset-fallback: 2px;\n    --nuraly-icon-focus-background-fallback: rgba(15, 98, 254, 0.1);\n    --nuraly-icon-focus-border-radius-fallback: 4px;\n    --nuraly-icon-focus-shadow-fallback: none;\n    \n    /* ========================================\n     * CURSOR PROPERTIES\n     * ======================================== */\n    \n    --nuraly-cursor-default: default;\n    --nuraly-cursor-interactive: pointer;\n    --nuraly-cursor-disabled: not-allowed;\n  }\n\n  /* ========================================\n   * SIZE-SPECIFIC DESIGN TOKENS\n   * ======================================== */\n  \n  /**\n   * Size-specific customizations that can be overridden in themes\n   * These provide defaults that themes can customize for different design systems\n   */\n  \n  :host([size=\"small\"]) {\n    --nuraly-icon-size: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback));\n  }\n  \n  :host([size=\"medium\"]) {\n    --nuraly-icon-size: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback));\n  }\n  \n  :host([size=\"large\"]) {\n    --nuraly-icon-size: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback));\n  }\n  \n  :host([size=\"xlarge\"]) {\n    --nuraly-icon-size: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback));\n  }\n  \n  :host([size=\"xxlarge\"]) {\n    --nuraly-icon-size: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback));\n  }\n\n  /* ========================================\n   * ACCESSIBILITY DESIGN TOKENS\n   * ======================================== */\n  \n  /**\n   * Accessibility features that respect user preferences\n   * These ensure the component works well for all users\n   */\n  \n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    :host {\n      --nuraly-color-icon: CanvasText;\n      --nuraly-color-icon-hover: CanvasText;\n      --nuraly-color-icon-active: CanvasText;\n      --nuraly-icon-focus-outline: 3px solid CanvasText;\n      --nuraly-icon-focus-background: Canvas;\n    }\n  }\n  \n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    :host {\n      --nuraly-icon-transition: none;\n      --nuraly-icon-hover-transform: none;\n      --nuraly-icon-active-transform: none;\n    }\n`;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/icon",
-    "version": "0.0.7",
+    "version": "0.0.9",
     "description": "",
     "main": "index.js",
     "type": "module",
@@ -8,5 +8,19 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Labidi Aymen",
-    "license": "ISC"
+    "license": "ISC",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "bundle.js",
+        "*.js",
+        "*.d.ts",
+        "*.js.map"
+    ]
 }

package/react.js

@@ -2,7 +2,7 @@ import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 import { HyIconElement } from './icon.component.js';
 export const HyIcon = createComponent({
-    tagName: 'hy-icon',
+    tagName: 'nr-icon',
     elementClass: HyIconElement,
     react: React,
 });

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/icon/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import {createComponent} from '@lit-labs/react';\nimport * as React from 'react';\nimport {HyIconElement} from './icon.component.js';\nexport const HyIcon = createComponent({\n  tagName: 'hy-icon',\n  elementClass: HyIconElement,\n  react: React,\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/icon/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,eAAe,CAAC;IACpC,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { HyIconElement } from './icon.component.js';\nexport const HyIcon = createComponent({\n  tagName: 'nr-icon',\n  elementClass: HyIconElement,\n  react: React,\n});\n"]}

package/demo/hy-icon-demo.d.ts

@@ -1,17 +0,0 @@
-import { LitElement } from 'lit';
-import '../icon.component.js';
-export declare class HyIconDemo extends LitElement {
-    private currentTheme;
-    static readonly styles: import("lit").CSSResult;
-    private handleIconClick;
-    private logEvent;
-    private toggleTheme;
-    private clearLog;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'hy-icon-demo': HyIconDemo;
-    }
-}
-//# sourceMappingURL=hy-icon-demo.d.ts.map

package/demo/hy-icon-demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-icon-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/demo/hy-icon-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,sBAAsB,CAAC;AAE9B,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAO,CAAC,YAAY,CAA6B;IAEjD,gBAAyB,MAAM,0BAmG7B;IAEF,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,QAAQ;IAOP,MAAM;CA2EhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/demo/hy-icon-demo.js

@@ -1,223 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, css, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import '../icon.component.js';
-let HyIconDemo = class HyIconDemo extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.currentTheme = 'light';
-    }
-    handleIconClick(event) {
-        const detail = event.detail;
-        this.logEvent('icon-click', detail);
-    }
-    logEvent(eventType, detail) {
-        var _a;
-        const eventLog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.event-log');
-        if (eventLog) {
-            const timestamp = new Date().toLocaleTimeString();
-            const logEntry = `[${timestamp}] ${eventType}: ${JSON.stringify(detail)}\n`;
-            eventLog.textContent = logEntry + (eventLog.textContent || '');
-        }
-    }
-    toggleTheme() {
-        this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';
-        // Apply theme to document for global effect
-        document.documentElement.setAttribute('data-theme', this.currentTheme);
-    }
-    clearLog() {
-        var _a;
-        const eventLog = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.event-log');
-        if (eventLog) {
-            eventLog.textContent = '';
-        }
-    }
-    render() {
-        return html `
-      <div class="theme-controls" data-theme="${this.currentTheme}">
-        <h2>Icon Component Demo - Theme: ${this.currentTheme}</h2>
-        <button @click="${this.toggleTheme}" data-theme="${this.currentTheme}">
-          Switch to ${this.currentTheme === 'light' ? 'Dark' : 'Light'} Theme
-        </button>
-        <button @click="${this.clearLog}" data-theme="${this.currentTheme}">
-          Clear Event Log
-        </button>
-      </div>
-
-      <div class="demo-container" data-theme="${this.currentTheme}">
-        <h3>Basic Icons</h3>
-        
-        <div class="icon-group" data-theme="${this.currentTheme}">
-          <span>Default solid:</span>
-          <hy-icon name="envelope"></hy-icon>
-          <span>Regular:</span>
-          <hy-icon name="envelope" type="regular"></hy-icon>
-          <span>Different icons:</span>
-          <hy-icon name="check"></hy-icon>
-          <hy-icon name="warning"></hy-icon>
-          <hy-icon name="bug"></hy-icon>
-          <hy-icon name="heart"></hy-icon>
-        </div>
-
-        <h3>Custom Styling</h3>
-        
-        <div class="icon-group" data-theme="${this.currentTheme}">
-          <span>Custom red color:</span>
-          <hy-icon id="custom-red-icon" name="exclamation-triangle"></hy-icon>
-          <span>Custom size:</span>
-          <hy-icon id="custom-size-icon" name="star"></hy-icon>
-          <span>Custom size + color:</span>
-          <hy-icon id="custom-both-icon" name="check-circle"></hy-icon>
-        </div>
-
-        <h3>Interactive Icons</h3>
-        
-        <div class="interactive-examples">
-          <span>Clickable icons:</span>
-          <hy-icon 
-            name="thumbs-up" 
-            clickable 
-            alt="Like button"
-            @icon-click="${this.handleIconClick}">
-          </hy-icon>
-          <hy-icon 
-            name="heart" 
-            clickable 
-            alt="Favorite button"
-            @icon-click="${this.handleIconClick}">
-          </hy-icon>
-          <hy-icon 
-            name="share" 
-            clickable 
-            alt="Share button"
-            @icon-click="${this.handleIconClick}">
-          </hy-icon>
-          <hy-icon 
-            name="bookmark" 
-            clickable 
-            disabled
-            alt="Disabled bookmark button"
-            @icon-click="${this.handleIconClick}">
-          </hy-icon>
-        </div>
-
-        <div class="event-log" data-theme="${this.currentTheme}">
-          Event log (click icons above to see events)...
-        </div>
-      </div>
-    `;
-    }
-};
-HyIconDemo.styles = css `
-    :host {
-      display: block;
-      padding: 20px;
-      font-family: system-ui, sans-serif;
-    }
-
-    .demo-container {
-      border: 1px solid #e0e0e0;
-      padding: 20px;
-      border-radius: 8px;
-      margin-bottom: 20px;
-    }
-
-    .demo-container[data-theme="dark"] {
-      background: #1a1a1a;
-      border-color: #404040;
-      color: #ffffff;
-    }
-
-    .theme-controls {
-      margin-bottom: 30px;
-      padding: 15px;
-      background: #f5f5f5;
-      border-radius: 8px;
-    }
-
-    .theme-controls[data-theme="dark"] {
-      background: #2d2d2d;
-      color: #ffffff;
-    }
-
-    .icon-group {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-      margin: 15px 0;
-      padding: 10px;
-      border: 1px dashed #ccc;
-      border-radius: 4px;
-    }
-
-    .icon-group[data-theme="dark"] {
-      border-color: #555;
-    }
-
-    #custom-red-icon {
-      --hybrid-icon-local-color: #dc3545;
-    }
-
-    #custom-size-icon {
-      --hybrid-icon-local-width: 32px;
-      --hybrid-icon-local-height: 32px;
-    }
-
-    #custom-both-icon {
-      --hybrid-icon-local-width: 24px;
-      --hybrid-icon-local-height: 24px;
-      --hybrid-icon-local-color: #28a745;
-    }
-
-    .interactive-examples {
-      display: flex;
-      gap: 10px;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-
-    button {
-      padding: 8px 16px;
-      border: 1px solid #ddd;
-      background: #fff;
-      border-radius: 4px;
-      cursor: pointer;
-    }
-
-    button[data-theme="dark"] {
-      background: #333;
-      border-color: #555;
-      color: #fff;
-    }
-
-    .event-log {
-      background: #f8f9fa;
-      border: 1px solid #dee2e6;
-      border-radius: 4px;
-      padding: 10px;
-      font-family: monospace;
-      font-size: 12px;
-      max-height: 150px;
-      overflow-y: auto;
-      margin-top: 15px;
-    }
-
-    .event-log[data-theme="dark"] {
-      background: #1e1e1e;
-      border-color: #404040;
-      color: #ffffff;
-    }
-  `;
-__decorate([
-    state()
-], HyIconDemo.prototype, "currentTheme", void 0);
-HyIconDemo = __decorate([
-    customElement('hy-icon-demo')
-], HyIconDemo);
-export { HyIconDemo };
-//# sourceMappingURL=hy-icon-demo.js.map

package/demo/hy-icon-demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hy-icon-demo.js","sourceRoot":"","sources":["../../../../src/components/icon/demo/hy-icon-demo.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,sBAAsB,CAAC;AAG9B,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QAEU,iBAAY,GAAqB,OAAO,CAAC;IA6MnD,CAAC;IAtGS,eAAe,CAAC,KAAkB;QACxC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACtC,CAAC;IAEO,QAAQ,CAAC,SAAiB,EAAE,MAAW;;QAC7C,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC9D,IAAI,QAAQ,EAAE;YACZ,MAAM,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,CAAC;YAClD,MAAM,QAAQ,GAAG,IAAI,SAAS,KAAK,SAAS,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC;YAC5E,QAAQ,CAAC,WAAW,GAAG,QAAQ,GAAG,CAAC,QAAQ,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;SAChE;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACrE,4CAA4C;QAC5C,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACzE,CAAC;IAEO,QAAQ;;QACd,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,CAAC;QAC9D,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,WAAW,GAAG,EAAE,CAAC;SAC3B;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;gDACiC,IAAI,CAAC,YAAY;2CACtB,IAAI,CAAC,YAAY;0BAClC,IAAI,CAAC,WAAW,iBAAiB,IAAI,CAAC,YAAY;sBACtD,IAAI,CAAC,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;0BAE5C,IAAI,CAAC,QAAQ,iBAAiB,IAAI,CAAC,YAAY;;;;;gDAKzB,IAAI,CAAC,YAAY;;;8CAGnB,IAAI,CAAC,YAAY;;;;;;;;;;;;;;8CAcjB,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;2BAiBpC,IAAI,CAAC,eAAe;;;;;;2BAMpB,IAAI,CAAC,eAAe;;;;;;2BAMpB,IAAI,CAAC,eAAe;;;;;;;2BAOpB,IAAI,CAAC,eAAe;;;;6CAIF,IAAI,CAAC,YAAY;;;;KAIzD,CAAC;IACJ,CAAC;CACF,CAAA;AA3M0B,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmGnC,CAAA;AArGF;IADC,KAAK,EAAE;gDACyC;AAFtC,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CA+MtB;SA/MY,UAAU","sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\nimport '../icon.component.js';\n\n@customElement('hy-icon-demo')\nexport class HyIconDemo extends LitElement {\n  @state() \n  private currentTheme: 'light' | 'dark' = 'light';\n\n  static override readonly styles = css`\n    :host {\n      display: block;\n      padding: 20px;\n      font-family: system-ui, sans-serif;\n    }\n\n    .demo-container {\n      border: 1px solid #e0e0e0;\n      padding: 20px;\n      border-radius: 8px;\n      margin-bottom: 20px;\n    }\n\n    .demo-container[data-theme=\"dark\"] {\n      background: #1a1a1a;\n      border-color: #404040;\n      color: #ffffff;\n    }\n\n    .theme-controls {\n      margin-bottom: 30px;\n      padding: 15px;\n      background: #f5f5f5;\n      border-radius: 8px;\n    }\n\n    .theme-controls[data-theme=\"dark\"] {\n      background: #2d2d2d;\n      color: #ffffff;\n    }\n\n    .icon-group {\n      display: flex;\n      align-items: center;\n      gap: 15px;\n      margin: 15px 0;\n      padding: 10px;\n      border: 1px dashed #ccc;\n      border-radius: 4px;\n    }\n\n    .icon-group[data-theme=\"dark\"] {\n      border-color: #555;\n    }\n\n    #custom-red-icon {\n      --hybrid-icon-local-color: #dc3545;\n    }\n\n    #custom-size-icon {\n      --hybrid-icon-local-width: 32px;\n      --hybrid-icon-local-height: 32px;\n    }\n\n    #custom-both-icon {\n      --hybrid-icon-local-width: 24px;\n      --hybrid-icon-local-height: 24px;\n      --hybrid-icon-local-color: #28a745;\n    }\n\n    .interactive-examples {\n      display: flex;\n      gap: 10px;\n      flex-wrap: wrap;\n      align-items: center;\n    }\n\n    button {\n      padding: 8px 16px;\n      border: 1px solid #ddd;\n      background: #fff;\n      border-radius: 4px;\n      cursor: pointer;\n    }\n\n    button[data-theme=\"dark\"] {\n      background: #333;\n      border-color: #555;\n      color: #fff;\n    }\n\n    .event-log {\n      background: #f8f9fa;\n      border: 1px solid #dee2e6;\n      border-radius: 4px;\n      padding: 10px;\n      font-family: monospace;\n      font-size: 12px;\n      max-height: 150px;\n      overflow-y: auto;\n      margin-top: 15px;\n    }\n\n    .event-log[data-theme=\"dark\"] {\n      background: #1e1e1e;\n      border-color: #404040;\n      color: #ffffff;\n    }\n  `;\n\n  private handleIconClick(event: CustomEvent) {\n    const detail = event.detail;\n    this.logEvent('icon-click', detail);\n  }\n\n  private logEvent(eventType: string, detail: any) {\n    const eventLog = this.shadowRoot?.querySelector('.event-log');\n    if (eventLog) {\n      const timestamp = new Date().toLocaleTimeString();\n      const logEntry = `[${timestamp}] ${eventType}: ${JSON.stringify(detail)}\\n`;\n      eventLog.textContent = logEntry + (eventLog.textContent || '');\n    }\n  }\n\n  private toggleTheme() {\n    this.currentTheme = this.currentTheme === 'light' ? 'dark' : 'light';\n    // Apply theme to document for global effect\n    document.documentElement.setAttribute('data-theme', this.currentTheme);\n  }\n\n  private clearLog() {\n    const eventLog = this.shadowRoot?.querySelector('.event-log');\n    if (eventLog) {\n      eventLog.textContent = '';\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"theme-controls\" data-theme=\"${this.currentTheme}\">\n        <h2>Icon Component Demo - Theme: ${this.currentTheme}</h2>\n        <button @click=\"${this.toggleTheme}\" data-theme=\"${this.currentTheme}\">\n          Switch to ${this.currentTheme === 'light' ? 'Dark' : 'Light'} Theme\n        </button>\n        <button @click=\"${this.clearLog}\" data-theme=\"${this.currentTheme}\">\n          Clear Event Log\n        </button>\n      </div>\n\n      <div class=\"demo-container\" data-theme=\"${this.currentTheme}\">\n        <h3>Basic Icons</h3>\n        \n        <div class=\"icon-group\" data-theme=\"${this.currentTheme}\">\n          <span>Default solid:</span>\n          <hy-icon name=\"envelope\"></hy-icon>\n          <span>Regular:</span>\n          <hy-icon name=\"envelope\" type=\"regular\"></hy-icon>\n          <span>Different icons:</span>\n          <hy-icon name=\"check\"></hy-icon>\n          <hy-icon name=\"warning\"></hy-icon>\n          <hy-icon name=\"bug\"></hy-icon>\n          <hy-icon name=\"heart\"></hy-icon>\n        </div>\n\n        <h3>Custom Styling</h3>\n        \n        <div class=\"icon-group\" data-theme=\"${this.currentTheme}\">\n          <span>Custom red color:</span>\n          <hy-icon id=\"custom-red-icon\" name=\"exclamation-triangle\"></hy-icon>\n          <span>Custom size:</span>\n          <hy-icon id=\"custom-size-icon\" name=\"star\"></hy-icon>\n          <span>Custom size + color:</span>\n          <hy-icon id=\"custom-both-icon\" name=\"check-circle\"></hy-icon>\n        </div>\n\n        <h3>Interactive Icons</h3>\n        \n        <div class=\"interactive-examples\">\n          <span>Clickable icons:</span>\n          <hy-icon \n            name=\"thumbs-up\" \n            clickable \n            alt=\"Like button\"\n            @icon-click=\"${this.handleIconClick}\">\n          </hy-icon>\n          <hy-icon \n            name=\"heart\" \n            clickable \n            alt=\"Favorite button\"\n            @icon-click=\"${this.handleIconClick}\">\n          </hy-icon>\n          <hy-icon \n            name=\"share\" \n            clickable \n            alt=\"Share button\"\n            @icon-click=\"${this.handleIconClick}\">\n          </hy-icon>\n          <hy-icon \n            name=\"bookmark\" \n            clickable \n            disabled\n            alt=\"Disabled bookmark button\"\n            @icon-click=\"${this.handleIconClick}\">\n          </hy-icon>\n        </div>\n\n        <div class=\"event-log\" data-theme=\"${this.currentTheme}\">\n          Event log (click icons above to see events)...\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-icon-demo': HyIconDemo;\n  }\n}\n"]}

package/icon.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.component.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.component.ts"],"names":[],"mappings":"AACA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,EAAE,SAAS,EAAkC,MAAM,iBAAiB,CAAC;AAI5E;;;;;;;;;;;;GAYG;AAEH,QAAA,MAAM,aAAa,wWAAgD,CAAC;AACpE,qBACa,aAAc,SAAQ,aAAa;IAC9C,gBAAyB,MAAM,4BAAU;IAEzC,gCAAgC;IAEhC,IAAI,EAAG,MAAM,CAAC;IAEd,uCAAuC;IAEvC,IAAI,YAAmB;IAEvB,yCAAyC;IAEzC,GAAG,SAAM;IAET;;OAEG;IACM,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAa9C,MAAM;IAuBf,WAAW;IAmCX;;OAEG;IACM,WAAW,IAAI,MAAM;IAO9B;;OAEG;IACM,eAAe,IAAI,MAAM;IAOlC;;OAEG;IACM,eAAe,IAAI,MAAM,GAAG,SAAS;CAG/C"}

package/icon.style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.style.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.style.ts"],"names":[],"mappings":"AA2EA,eAAO,MAAM,MAAM,2BAA+B,CAAC"}

package/icon.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.types.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,SAAS;IACzB,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AACD,eAAO,MAAM,aAAa,QAAQ,CAAC;AACnC,eAAO,MAAM,eAAe,QAAQ,CAAC"}

package/icon.variables.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon.variables.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.variables.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,yBAqE1B,CAAC"}

package/index.d.ts.map

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

package/mixins/clickable-mixin.d.ts

@@ -1,57 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-declare type Constructor<T = {}> = new (...args: any[]) => T;
-/**
- * Interface for components that support clickable icon functionality
- */
-export interface ClickableCapable {
-    /**
-     * Whether the icon is clickable/interactive
-     */
-    clickable: boolean;
-    /**
-     * Whether the icon is disabled
-     */
-    disabled: boolean;
-    /**
-     * Handle click events on the icon
-     */
-    handleIconClick(event: MouseEvent): void;
-    /**
-     * Handle keyboard events for accessibility
-     */
-    handleIconKeydown(event: KeyboardEvent): void;
-    /**
-     * Get appropriate role for accessibility
-     */
-    getIconRole(): string;
-    /**
-     * Get appropriate tabindex for accessibility
-     */
-    getIconTabIndex(): string;
-    /**
-     * Get appropriate aria-disabled attribute
-     */
-    getAriaDisabled(): string | undefined;
-}
-/**
- * Mixin that provides clickable icon functionality with proper event handling
- * and accessibility support.
- *
- * @param superClass - The base class to extend
- * @returns Enhanced class with clickable capabilities
- *
- * @example
- * ```typescript
- * export class IconComponent extends ClickableMixin(NuralyUIBaseMixin(LitElement)) {
- *   // Component implementation
- * }
- * ```
- */
-export declare const ClickableMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ClickableCapable> & T;
-export {};
-//# sourceMappingURL=clickable-mixin.d.ts.map

package/mixins/clickable-mixin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"clickable-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/mixins/clickable-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IAEzC;;OAEG;IACH,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAE9C;;OAEG;IACH,WAAW,IAAI,MAAM,CAAC;IAEtB;;OAEG;IACH,eAAe,IAAI,MAAM,CAAC;IAE1B;;OAEG;IACH,eAAe,IAAI,MAAM,GAAG,SAAS,CAAC;CACvC;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc,yFAwF1B,CAAC"}

package/mixins/clickable-mixin.js

@@ -1,111 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { property } from 'lit/decorators.js';
-/**
- * Mixin that provides clickable icon functionality with proper event handling
- * and accessibility support.
- *
- * @param superClass - The base class to extend
- * @returns Enhanced class with clickable capabilities
- *
- * @example
- * ```typescript
- * export class IconComponent extends ClickableMixin(NuralyUIBaseMixin(LitElement)) {
- *   // Component implementation
- * }
- * ```
- */
-export const ClickableMixin = (superClass) => {
-    class ClickableMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /** Whether the icon is clickable/interactive */
-            this.clickable = false;
-            /** Whether the icon is disabled */
-            this.disabled = false;
-        }
-        /**
-         * Handle click events on the icon
-         */
-        handleIconClick(event) {
-            if (this.disabled || !this.clickable) {
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            }
-            // Dispatch custom click event with icon details
-            this.dispatchCustomEvent('icon-click', {
-                iconName: this.name,
-                iconType: this.type,
-                originalEvent: event,
-                timestamp: Date.now()
-            });
-        }
-        /**
-         * Handle keyboard events for accessibility
-         */
-        handleIconKeydown(event) {
-            if (this.disabled || !this.clickable) {
-                return;
-            }
-            // Check if it's an activation key (Enter or Space)
-            // Use isActivationKey from EventHandlerMixin if available, otherwise fallback
-            const isActivationKey = typeof this.isActivationKey === 'function'
-                ? this.isActivationKey(event)
-                : (event.key === 'Enter' || event.key === ' ');
-            if (isActivationKey) {
-                event.preventDefault();
-                event.stopPropagation();
-                // Simulate click event
-                this.handleIconClick(event);
-                // Dispatch keyboard activation event with improved naming consistency
-                if (typeof this.dispatchCustomEvent === 'function') {
-                    this.dispatchCustomEvent('icon-keyboard-activation', {
-                        iconName: this.name,
-                        iconType: this.type,
-                        key: event.key,
-                        originalEvent: event,
-                        timestamp: Date.now()
-                    });
-                }
-            }
-        }
-        /**
-         * Get appropriate role for accessibility
-         */
-        getIconRole() {
-            return this.clickable ? 'button' : 'img';
-        }
-        /**
-         * Get appropriate tabindex for accessibility
-         */
-        getIconTabIndex() {
-            if (!this.clickable)
-                return '-1';
-            return this.disabled ? '-1' : '0';
-        }
-        /**
-         * Get appropriate aria-disabled attribute
-         */
-        getAriaDisabled() {
-            return this.clickable && this.disabled ? 'true' : undefined;
-        }
-    }
-    __decorate([
-        property({ type: Boolean, reflect: true })
-    ], ClickableMixinClass.prototype, "clickable", void 0);
-    __decorate([
-        property({ type: Boolean, reflect: true })
-    ], ClickableMixinClass.prototype, "disabled", void 0);
-    return ClickableMixinClass;
-};
-//# sourceMappingURL=clickable-mixin.js.map

package/mixins/clickable-mixin.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"clickable-mixin.js","sourceRoot":"","sources":["../../../../src/components/icon/mixins/clickable-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AA4C7C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAoC,UAAa,EAAE,EAAE;IACjF,MAAM,mBAAoB,SAAQ,UAAU;QAA5C;;YAEE,gDAAgD;YAEhD,cAAS,GAAG,KAAK,CAAC;YAElB,mCAAmC;YAEnC,aAAQ,GAAG,KAAK,CAAC;QA4EnB,CAAC;QA1EC;;WAEG;QACH,eAAe,CAAC,KAAiB;YAC/B,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACpC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO;aACR;YAED,gDAAgD;YAC/C,IAAY,CAAC,mBAAmB,CAAC,YAAY,EAAE;gBAC9C,QAAQ,EAAG,IAAY,CAAC,IAAI;gBAC5B,QAAQ,EAAG,IAAY,CAAC,IAAI;gBAC5B,aAAa,EAAE,KAAK;gBACpB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;aACtB,CAAC,CAAC;QACL,CAAC;QAED;;WAEG;QACH,iBAAiB,CAAC,KAAoB;YACpC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACpC,OAAO;aACR;YAED,mDAAmD;YACnD,8EAA8E;YAC9E,MAAM,eAAe,GAAG,OAAQ,IAAY,CAAC,eAAe,KAAK,UAAU;gBACzE,CAAC,CAAE,IAAY,CAAC,eAAe,CAAC,KAAK,CAAC;gBACtC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;YAEjD,IAAI,eAAe,EAAE;gBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBAExB,uBAAuB;gBACvB,IAAI,CAAC,eAAe,CAAC,KAAY,CAAC,CAAC;gBAEnC,sEAAsE;gBACtE,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;oBAC1D,IAAY,CAAC,mBAAmB,CAAC,0BAA0B,EAAE;wBAC5D,QAAQ,EAAG,IAAY,CAAC,IAAI;wBAC5B,QAAQ,EAAG,IAAY,CAAC,IAAI;wBAC5B,GAAG,EAAE,KAAK,CAAC,GAAG;wBACd,aAAa,EAAE,KAAK;wBACpB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;qBACtB,CAAC,CAAC;iBACJ;aACF;QACH,CAAC;QAED;;WAEG;QACH,WAAW;YACT,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;QAC3C,CAAC;QAED;;WAEG;QACH,eAAe;YACb,IAAI,CAAC,IAAI,CAAC,SAAS;gBAAE,OAAO,IAAI,CAAC;YACjC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;QACpC,CAAC;QAED;;WAEG;QACH,eAAe;YACb,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9D,CAAC;KACF;IAhFC;QADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0DACvB;IAIlB;QADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yDACxB;IA8EnB,OAAO,mBAAwD,CAAC;AAClE,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support clickable icon functionality\n */\nexport interface ClickableCapable {\n  /**\n   * Whether the icon is clickable/interactive\n   */\n  clickable: boolean;\n  \n  /**\n   * Whether the icon is disabled\n   */\n  disabled: boolean;\n  \n  /**\n   * Handle click events on the icon\n   */\n  handleIconClick(event: MouseEvent): void;\n  \n  /**\n   * Handle keyboard events for accessibility\n   */\n  handleIconKeydown(event: KeyboardEvent): void;\n  \n  /**\n   * Get appropriate role for accessibility\n   */\n  getIconRole(): string;\n  \n  /**\n   * Get appropriate tabindex for accessibility\n   */\n  getIconTabIndex(): string;\n  \n  /**\n   * Get appropriate aria-disabled attribute\n   */\n  getAriaDisabled(): string | undefined;\n}\n\n/**\n * Mixin that provides clickable icon functionality with proper event handling\n * and accessibility support.\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with clickable capabilities\n * \n * @example\n * ```typescript\n * export class IconComponent extends ClickableMixin(NuralyUIBaseMixin(LitElement)) {\n *   // Component implementation\n * }\n * ```\n */\nexport const ClickableMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ClickableMixinClass extends superClass implements ClickableCapable {\n    \n    /** Whether the icon is clickable/interactive */\n    @property({type: Boolean, reflect: true})\n    clickable = false;\n    \n    /** Whether the icon is disabled */\n    @property({type: Boolean, reflect: true})\n    disabled = false;\n\n    /**\n     * Handle click events on the icon\n     */\n    handleIconClick(event: MouseEvent): void {\n      if (this.disabled || !this.clickable) {\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      // Dispatch custom click event with icon details\n      (this as any).dispatchCustomEvent('icon-click', {\n        iconName: (this as any).name,\n        iconType: (this as any).type,\n        originalEvent: event,\n        timestamp: Date.now()\n      });\n    }\n\n    /**\n     * Handle keyboard events for accessibility\n     */\n    handleIconKeydown(event: KeyboardEvent): void {\n      if (this.disabled || !this.clickable) {\n        return;\n      }\n\n      // Check if it's an activation key (Enter or Space)\n      // Use isActivationKey from EventHandlerMixin if available, otherwise fallback\n      const isActivationKey = typeof (this as any).isActivationKey === 'function'\n        ? (this as any).isActivationKey(event)\n        : (event.key === 'Enter' || event.key === ' ');\n\n      if (isActivationKey) {\n        event.preventDefault();\n        event.stopPropagation();\n        \n        // Simulate click event\n        this.handleIconClick(event as any);\n        \n        // Dispatch keyboard activation event with improved naming consistency\n        if (typeof (this as any).dispatchCustomEvent === 'function') {\n          (this as any).dispatchCustomEvent('icon-keyboard-activation', {\n            iconName: (this as any).name,\n            iconType: (this as any).type,\n            key: event.key,\n            originalEvent: event,\n            timestamp: Date.now()\n          });\n        }\n      }\n    }\n\n    /**\n     * Get appropriate role for accessibility\n     */\n    getIconRole(): string {\n      return this.clickable ? 'button' : 'img';\n    }\n\n    /**\n     * Get appropriate tabindex for accessibility\n     */\n    getIconTabIndex(): string {\n      if (!this.clickable) return '-1';\n      return this.disabled ? '-1' : '0';\n    }\n\n    /**\n     * Get appropriate aria-disabled attribute\n     */\n    getAriaDisabled(): string | undefined {\n      return this.clickable && this.disabled ? 'true' : undefined;\n    }\n  }\n\n  return ClickableMixinClass as Constructor<ClickableCapable> & T;\n};\n"]}

package/mixins/index.d.ts

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-export * from './clickable-mixin.js';
-//# sourceMappingURL=index.d.ts.map

package/mixins/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/icon/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC"}

package/mixins/index.js

@@ -1,7 +0,0 @@
-/**
- * @license
- * Copyright 2023 Nuraly, Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-export * from './clickable-mixin.js';
-//# sourceMappingURL=index.js.map

package/mixins/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/icon/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nexport * from './clickable-mixin.js';\n"]}

package/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/icon/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAClD,eAAO,MAAM,MAAM,gEAIjB,CAAC"}