@nuralyui/icon 0.0.6 → 0.0.8

package/icon.component.d.ts

@@ -3,24 +3,57 @@
  * Copyright 2023 Nuraly Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-/// <reference types="react" />
 import { LitElement } from 'lit';
 import { IconTypes } from './icon.types.js';
-export declare class HyIconElement extends LitElement {
+/**
+ * Enhanced Icon component with clickable functionality, custom styling, and comprehensive theming
+ *
+ * @example
+ * ```html
+ * <nr-icon name="envelope"></nr-icon>
+ * <nr-icon name="check" clickable @icon-click="${this.handleIconClick}"></nr-icon>
+ * <nr-icon name="warning" type="regular" disabled></nr-icon>
+ * <nr-icon name="star" color="#ffd700" size="large"></nr-icon>
+ * ```
+ *
+ * @fires icon-click - Dispatched when icon is clicked (contains iconName, iconType, originalEvent, timestamp)
+ * @fires icon-keyboard-activation - Dispatched when icon is activated via keyboard (contains iconName, iconType, key, originalEvent, timestamp)
+ */
+declare const IconBaseMixin: (new (...args: any[]) => import("./mixins/clickable-mixin.js").ClickableCapable) & (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+export declare class HyIconElement extends IconBaseMixin {
+    static readonly styles: import("lit").CSSResult[];
+    /** The FontAwesome icon name */
     name: string;
+    /** The icon type (solid or regular) */
     type: IconTypes;
-    static readonly styles: import("lit").CSSResult[];
+    /** Alternative text for accessibility */
+    alt: string;
+    /** Icon size (small, medium, large, xlarge, xxlarge) */
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    /** Icon color override */
+    color?: string;
+    /** Custom width override */
+    width?: string;
+    /** Custom height override */
+    height?: string;
+    /**
+     * Validate component properties on update
+     */
+    willUpdate(changedProperties: Map<string, any>): void;
     render(): import("lit").TemplateResult<1>;
-    getIconPath(): any;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'hy-icon': HyIconElement;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'hy-icon': React.DetailedHTMLProps<React.HTMLAttributes<HyIconElement>, HyIconElement> | Partial<HyIconElement>;
-        }
-    }
+    getIconPath(): string;
+    /**
+     * Get the appropriate ARIA role for the icon
+     */
+    getIconRole(): string;
+    /**
+     * Get the appropriate tabindex for the icon
+     */
+    getIconTabIndex(): string;
+    /**
+     * Get the appropriate aria-disabled value
+     */
+    getAriaDisabled(): string | undefined;
 }
+export {};
 //# sourceMappingURL=icon.component.d.ts.map

package/icon.component.js

@@ -19,22 +19,144 @@ library.add(fas, far);
 dom.watch();
 import { styles } from './icon.style.js';
 import { regularIconPack, solidIconPack } from './icon.types.js';
-let HyIconElement = class HyIconElement extends LitElement {
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { ClickableMixin } from './mixins/index.js';
+/**
+ * Enhanced Icon component with clickable functionality, custom styling, and comprehensive theming
+ *
+ * @example
+ * ```html
+ * <nr-icon name="envelope"></nr-icon>
+ * <nr-icon name="check" clickable @icon-click="${this.handleIconClick}"></nr-icon>
+ * <nr-icon name="warning" type="regular" disabled></nr-icon>
+ * <nr-icon name="star" color="#ffd700" size="large"></nr-icon>
+ * ```
+ *
+ * @fires icon-click - Dispatched when icon is clicked (contains iconName, iconType, originalEvent, timestamp)
+ * @fires icon-keyboard-activation - Dispatched when icon is activated via keyboard (contains iconName, iconType, key, originalEvent, timestamp)
+ */
+const IconBaseMixin = ClickableMixin(NuralyUIBaseMixin(LitElement));
+let HyIconElement = class HyIconElement extends IconBaseMixin {
     constructor() {
         super(...arguments);
+        /** The icon type (solid or regular) */
         this.type = "solid" /* IconTypes.Solid */;
+        /** Alternative text for accessibility */
+        this.alt = '';
+    }
+    /**
+     * Validate component properties on update
+     */
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('name') && !this.name) {
+            console.error('HyIconElement: "name" property is required');
+        }
+        if (changedProperties.has('type') &&
+            this.type !== "solid" /* IconTypes.Solid */ && this.type !== "regular" /* IconTypes.Regular */) {
+            console.warn(`HyIconElement: Invalid type "${this.type}". Using default "${"solid" /* IconTypes.Solid */}"`);
+            this.type = "solid" /* IconTypes.Solid */;
+        }
+        if (changedProperties.has('size') && this.size) {
+            const validSizes = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];
+            if (!validSizes.includes(this.size)) {
+                console.warn(`HyIconElement: Invalid size "${this.size}". Valid sizes are: ${validSizes.join(', ')}`);
+            }
+        }
     }
     render() {
+        const iconPath = this.getIconPath();
+        const role = this.getIconRole();
+        const tabIndex = this.getIconTabIndex();
+        const ariaDisabled = this.getAriaDisabled();
+        // Build dynamic styles using CSS custom properties
+        let dynamicStyles = '';
+        if (this.color) {
+            dynamicStyles += `--nuraly-color-icon: ${this.color};`;
+        }
+        if (this.width) {
+            dynamicStyles += `width: ${this.width};`;
+        }
+        if (this.height) {
+            dynamicStyles += `height: ${this.height};`;
+        }
+        // Build CSS classes
+        const cssClasses = [
+            'svg-icon',
+            this.clickable ? 'clickable' : '',
+            this.disabled ? 'disabled' : ''
+        ].filter(Boolean).join(' ');
         return html `
-      <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
-        <path d="${this.getIconPath()}" />
+      <svg 
+        class="${cssClasses}"
+        style="${dynamicStyles}"
+        xmlns="http://www.w3.org/2000/svg" 
+        viewBox="0 0 550 550"
+        role="${role}"
+        tabindex="${tabIndex}"
+        aria-label="${this.alt || this.name}"
+        aria-disabled="${ariaDisabled || 'false'}"
+        data-theme="${this.currentTheme}"
+        @click="${this.clickable ? this.handleIconClick : undefined}"
+        @keydown="${this.clickable ? this.handleIconKeydown : undefined}"
+      >
+        <path d="${iconPath}" />
       </svg>
     `;
     }
     getIconPath() {
+        if (!this.name) {
+            console.warn('HyIconElement: Icon name is required');
+            return '';
+        }
         const iconPack = this.type == "solid" /* IconTypes.Solid */ ? solidIconPack : regularIconPack;
-        const iconDefinition = library.definitions[iconPack][this.name];
-        return iconDefinition ? iconDefinition[4] : '';
+        try {
+            const definitions = library.definitions;
+            if (!definitions || !definitions[iconPack]) {
+                console.warn(`HyIconElement: Icon pack "${iconPack}" not found`);
+                return '';
+            }
+            const iconDefinition = definitions[iconPack][this.name];
+            if (!iconDefinition) {
+                console.warn(`HyIconElement: Icon "${this.name}" not found in ${iconPack} pack`);
+                return '';
+            }
+            // Validate that the path data exists
+            const pathData = iconDefinition[4];
+            if (!pathData || typeof pathData !== 'string') {
+                console.warn(`HyIconElement: Invalid path data for icon "${this.name}"`);
+                return '';
+            }
+            return pathData;
+        }
+        catch (error) {
+            console.error(`HyIconElement: Error loading icon "${this.name}":`, error);
+            return '';
+        }
+    }
+    /**
+     * Get the appropriate ARIA role for the icon
+     */
+    getIconRole() {
+        if (this.clickable) {
+            return 'button';
+        }
+        return this.alt ? 'img' : 'presentation';
+    }
+    /**
+     * Get the appropriate tabindex for the icon
+     */
+    getIconTabIndex() {
+        if (this.clickable && !this.disabled) {
+            return '0';
+        }
+        return '-1';
+    }
+    /**
+     * Get the appropriate aria-disabled value
+     */
+    getAriaDisabled() {
+        return this.disabled ? 'true' : undefined;
     }
 };
 HyIconElement.styles = styles;
@@ -44,8 +166,23 @@ __decorate([
 __decorate([
     property()
 ], HyIconElement.prototype, "type", void 0);
+__decorate([
+    property({ type: String, attribute: 'alt' })
+], HyIconElement.prototype, "alt", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], HyIconElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], HyIconElement.prototype, "color", void 0);
+__decorate([
+    property({ type: String })
+], HyIconElement.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], HyIconElement.prototype, "height", void 0);
 HyIconElement = __decorate([
-    customElement('hy-icon')
+    customElement('nr-icon')
 ], HyIconElement);
 export { HyIconElement };
 //# sourceMappingURL=icon.component.js.map

package/icon.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.component.js","sourceRoot":"","sources":["../../../src/components/icon/icon.component.ts"],"names":[],"mappings":"AAAA,uDAAuD;AACvD;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,GAAG,EAAE,MAAM,qCAAqC,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,mCAAmC,CAAC;AACxD,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AACtB,GAAG,CAAC,KAAK,EAAE,CAAC;AAEZ,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAa,eAAe,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAG5E,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAIE,SAAI,iCAAmB;IAezB,CAAC;IAZU,MAAM;QACb,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,WAAW,EAAE;;KAEhC,CAAC;IACJ,CAAC;IACD,WAAW;QACT,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,iCAAmB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAChF,MAAM,cAAc,GAAI,OAAe,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzE,OAAO,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACjD,CAAC;CACF,CAAA;AAb0B,oBAAM,GAAG,MAAO,CAAA;AAJzC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CACX;AAEd;IADC,QAAQ,EAAE;2CACY;AAJZ,aAAa;IADzB,aAAa,CAAC,SAAS,CAAC;GACZ,aAAa,CAmBzB;SAnBY,aAAa","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Nuraly Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { library, dom } from '@fortawesome/fontawesome-svg-core';\nimport { far } from '@fortawesome/free-regular-svg-icons';\nimport { fas } from '@fortawesome/free-solid-svg-icons';\nlibrary.add(fas, far);\ndom.watch();\n\nimport { styles } from './icon.style.js';\nimport { IconTypes, regularIconPack, solidIconPack } from './icon.types.js';\n\n@customElement('hy-icon')\nexport class HyIconElement extends LitElement {\n  @property({type: String})\n  name!: string;\n  @property()\n  type = IconTypes.Solid;\n\n  static override readonly styles = styles;\n  override render() {\n    return html`\n      <svg class=\"svg-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 550 550\">\n        <path d=\"${this.getIconPath()}\" />\n      </svg>\n    `;\n  }\n  getIconPath() {\n    const iconPack = this.type == IconTypes.Solid ? solidIconPack : regularIconPack;\n    const iconDefinition = (library as any).definitions[iconPack][this.name];\n    return iconDefinition ? iconDefinition[4] : '';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hy-icon': HyIconElement;\n  }\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'hy-icon': React.DetailedHTMLProps<React.HTMLAttributes<HyIconElement>, HyIconElement> | Partial<HyIconElement>;\n    }\n  }\n}\n"]}
+{"version":3,"file":"icon.component.js","sourceRoot":"","sources":["../../../src/components/icon/icon.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Nuraly Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { library, dom } from '@fortawesome/fontawesome-svg-core';\nimport { far } from '@fortawesome/free-regular-svg-icons';\nimport { fas } from '@fortawesome/free-solid-svg-icons';\nlibrary.add(fas, far);\ndom.watch();\n\nimport { styles } from './icon.style.js';\nimport { IconTypes, regularIconPack, solidIconPack } from './icon.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ClickableMixin } from './mixins/index.js';\n\n/**\n * Enhanced Icon component with clickable functionality, custom styling, and comprehensive theming\n * \n * @example\n * ```html\n * <nr-icon name=\"envelope\"></nr-icon>\n * <nr-icon name=\"check\" clickable @icon-click=\"${this.handleIconClick}\"></nr-icon>\n * <nr-icon name=\"warning\" type=\"regular\" disabled></nr-icon>\n * <nr-icon name=\"star\" color=\"#ffd700\" size=\"large\"></nr-icon>\n * ```\n * \n * @fires icon-click - Dispatched when icon is clicked (contains iconName, iconType, originalEvent, timestamp)\n * @fires icon-keyboard-activation - Dispatched when icon is activated via keyboard (contains iconName, iconType, key, originalEvent, timestamp)\n */\n\nconst IconBaseMixin = ClickableMixin(NuralyUIBaseMixin(LitElement));\n@customElement('nr-icon')\nexport class HyIconElement extends IconBaseMixin {\n  static override readonly styles = styles;\n\n  /** The FontAwesome icon name */\n  @property({type: String})\n  name!: string;\n\n  /** The icon type (solid or regular) */\n  @property()\n  type = IconTypes.Solid;\n\n  /** Alternative text for accessibility */\n  @property({type: String, attribute: 'alt'})\n  alt = '';\n\n  /** Icon size (small, medium, large, xlarge, xxlarge) */\n  @property({type: String, reflect: true})\n  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';\n\n  /** Icon color override */\n  @property({type: String})\n  color?: string;\n\n  /** Custom width override */\n  @property({type: String})\n  width?: string;\n\n  /** Custom height override */\n  @property({type: String})\n  height?: string;\n\n  /**\n   * Validate component properties on update\n   */\n  override willUpdate(changedProperties: Map<string, any>) {\n    super.willUpdate(changedProperties);\n    \n    if (changedProperties.has('name') && !this.name) {\n      console.error('HyIconElement: \"name\" property is required');\n    }\n    \n    if (changedProperties.has('type') && \n        this.type !== IconTypes.Solid && this.type !== IconTypes.Regular) {\n      console.warn(`HyIconElement: Invalid type \"${this.type}\". Using default \"${IconTypes.Solid}\"`);\n      this.type = IconTypes.Solid;\n    }\n\n    if (changedProperties.has('size') && this.size) {\n      const validSizes = ['small', 'medium', 'large', 'xlarge', 'xxlarge'];\n      if (!validSizes.includes(this.size)) {\n        console.warn(`HyIconElement: Invalid size \"${this.size}\". Valid sizes are: ${validSizes.join(', ')}`);\n      }\n    }\n  }\n  override render() {\n    const iconPath = this.getIconPath();\n    const role = this.getIconRole();\n    const tabIndex = this.getIconTabIndex();\n    const ariaDisabled = this.getAriaDisabled();\n    \n    // Build dynamic styles using CSS custom properties\n    let dynamicStyles = '';\n    if (this.color) {\n      dynamicStyles += `--nuraly-color-icon: ${this.color};`;\n    }\n    if (this.width) {\n      dynamicStyles += `width: ${this.width};`;\n    }\n    if (this.height) {\n      dynamicStyles += `height: ${this.height};`;\n    }\n    \n    // Build CSS classes\n    const cssClasses = [\n      'svg-icon',\n      this.clickable ? 'clickable' : '',\n      this.disabled ? 'disabled' : ''\n    ].filter(Boolean).join(' ');\n    \n    return html`\n      <svg \n        class=\"${cssClasses}\"\n        style=\"${dynamicStyles}\"\n        xmlns=\"http://www.w3.org/2000/svg\" \n        viewBox=\"0 0 550 550\"\n        role=\"${role}\"\n        tabindex=\"${tabIndex}\"\n        aria-label=\"${this.alt || this.name}\"\n        aria-disabled=\"${ariaDisabled || 'false'}\"\n        data-theme=\"${this.currentTheme}\"\n        @click=\"${this.clickable ? this.handleIconClick : undefined}\"\n        @keydown=\"${this.clickable ? this.handleIconKeydown : undefined}\"\n      >\n        <path d=\"${iconPath}\" />\n      </svg>\n    `;\n  }\n  getIconPath() {\n    if (!this.name) {\n      console.warn('HyIconElement: Icon name is required');\n      return '';\n    }\n\n    const iconPack = this.type == IconTypes.Solid ? solidIconPack : regularIconPack;\n    \n    try {\n      const definitions = (library as any).definitions;\n      if (!definitions || !definitions[iconPack]) {\n        console.warn(`HyIconElement: Icon pack \"${iconPack}\" not found`);\n        return '';\n      }\n\n      const iconDefinition = definitions[iconPack][this.name];\n      if (!iconDefinition) {\n        console.warn(`HyIconElement: Icon \"${this.name}\" not found in ${iconPack} pack`);\n        return '';\n      }\n\n      // Validate that the path data exists\n      const pathData = iconDefinition[4];\n      if (!pathData || typeof pathData !== 'string') {\n        console.warn(`HyIconElement: Invalid path data for icon \"${this.name}\"`);\n        return '';\n      }\n\n      return pathData;\n    } catch (error) {\n      console.error(`HyIconElement: Error loading icon \"${this.name}\":`, error);\n      return '';\n    }\n  }\n\n  /**\n   * Get the appropriate ARIA role for the icon\n   */\n  override getIconRole(): string {\n    if (this.clickable) {\n      return 'button';\n    }\n    return this.alt ? 'img' : 'presentation';\n  }\n\n  /**\n   * Get the appropriate tabindex for the icon\n   */\n  override getIconTabIndex(): string {\n    if (this.clickable && !this.disabled) {\n      return '0';\n    }\n    return '-1';\n  }\n\n  /**\n   * Get the appropriate aria-disabled value\n   */\n  override getAriaDisabled(): string | undefined {\n    return this.disabled ? 'true' : undefined;\n  }\n}\n"]}

package/icon.style.js

@@ -1,11 +1,184 @@
 import { css } from 'lit';
 import { styleVariables } from './icon.variables.js';
-const iconStyles = css `
+/**
+ * Icon component styles for the Hybrid UI Library
+ *
+ * This file contains all the styling for the nr-icon component, including:
+ * - Base icon styles with CSS custom properties for theming
+ * - Multiple icon states (default, hover, active, disabled, focus)
+ * - Size variations (small, medium, large, custom)
+ * - Interactive states for clickable icons
+ * - Theme compatibility (light, dark, carbon, default design systems)
+ * - Accessibility features and reduced motion support
+ *
+ * The styling system uses CSS custom properties with fallbacks to allow
+ * for both global and local customization of icon appearance.
+ */
+const iconStyle = css `
+  /* 
+   * Host element base styles
+   * Container for the icon component with flexible positioning
+   */
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    vertical-align: baseline;
+    position: relative;
+    font-family: var(--nuraly-font-family-icon, 'IBM Plex Sans', ui-sans-serif, system-ui);
+  }
+
+  /* 
+   * Base SVG icon styles
+   * Uses theme CSS custom properties for comprehensive theming support
+   */
   .svg-icon {
-    fill: var(--hybrid-icon-color, #000000);
-    width: var(--hybrid-icon-width);
-    height: var(--hybrid-icon-height);
+    /* Basic properties with theme support */
+    fill: var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616));
+    width: var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px));
+    height: var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px));
+    min-width: var(--nuraly-icon-min-size, var(--nuraly-icon-min-size-fallback, 16px));
+    min-height: var(--nuraly-icon-min-size, var(--nuraly-icon-min-size-fallback, 16px));
+    
+    /* Transition and display properties */
+    transition: var(--nuraly-icon-transition, var(--nuraly-icon-transition-fallback, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease));
+    display: block;
+    flex-shrink: 0;
+    
+    /* Cursor handling */
+    cursor: var(--nuraly-cursor-default, default);
+  }
+
+  /* ========================================
+   * CLICKABLE STATES
+   * ======================================== */
+  
+  .svg-icon.clickable {
+    cursor: var(--nuraly-cursor-interactive, pointer);
+  }
+
+  .svg-icon.clickable:hover {
+    opacity: var(--nuraly-icon-hover-opacity, var(--nuraly-icon-hover-opacity-fallback, 0.8));
+    transform: var(--nuraly-icon-hover-transform, var(--nuraly-icon-hover-transform-fallback, scale(1.05)));
+    fill: var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe));
+  }
+
+  .svg-icon.clickable:active {
+    opacity: var(--nuraly-icon-active-opacity, var(--nuraly-icon-active-opacity-fallback, 0.6));
+    transform: var(--nuraly-icon-active-transform, var(--nuraly-icon-active-transform-fallback, scale(0.95)));
+    fill: var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada));
+  }
+
+  .svg-icon.clickable:focus {
+    outline: var(--nuraly-icon-focus-outline, var(--nuraly-icon-focus-outline-fallback, 2px solid #0f62fe));
+    outline-offset: var(--nuraly-icon-focus-outline-offset, var(--nuraly-icon-focus-outline-offset-fallback, 2px));
+    background: var(--nuraly-icon-focus-background, var(--nuraly-icon-focus-background-fallback, rgba(15, 98, 254, 0.1)));
+    border-radius: var(--nuraly-icon-focus-border-radius, var(--nuraly-icon-focus-border-radius-fallback, 4px));
+    box-shadow: var(--nuraly-icon-focus-shadow, var(--nuraly-icon-focus-shadow-fallback, none));
+  }
+
+  /* ========================================
+   * DISABLED STATE
+   * ======================================== */
+  
+  .svg-icon.disabled {
+    opacity: var(--nuraly-icon-disabled-opacity, var(--nuraly-icon-disabled-opacity-fallback, 0.25));
+    fill: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));
+    cursor: var(--nuraly-cursor-disabled, not-allowed);
+  }
+
+  .svg-icon.clickable.disabled:hover,
+  .svg-icon.clickable.disabled:active {
+    opacity: var(--nuraly-icon-disabled-opacity, var(--nuraly-icon-disabled-opacity-fallback, 0.25));
+    fill: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));
+    transform: none;
+  }
+
+  .svg-icon.clickable.disabled:focus {
+    outline: none;
+    background: none;
+    box-shadow: none;
+  }
+
+  /* ========================================
+   * ACCESSIBILITY FEATURES
+   * ======================================== */
+
+  /* Screen reader only text for better accessibility */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .svg-icon {
+      fill: CanvasText;
+    }
+    
+    .svg-icon.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    .svg-icon {
+      transition: none;
+    }
+    
+    .svg-icon.clickable:hover,
+    .svg-icon.clickable:active {
+      transform: none;
+    }
+  }
+`;
+/**
+ * Size variation styles for the icon component
+ * Defines size variations for different icon use cases
+ */
+const sizeIconStyle = css `
+  /* ========================================
+   * SIZE VARIATIONS
+   * ======================================== */
+
+  /* Small icon size */
+  :host([size='small']) .svg-icon {
+    width: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback, 16px));
+    height: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback, 16px));
+  }
+
+  /* Medium icon size (default) */
+  :host([size='medium']) .svg-icon {
+    width: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback, 20px));
+    height: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback, 20px));
+  }
+
+  /* Large icon size */
+  :host([size='large']) .svg-icon {
+    width: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback, 24px));
+    height: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback, 24px));
+  }
+
+  /* Extra large icon size */
+  :host([size='xlarge']) .svg-icon {
+    width: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback, 32px));
+    height: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback, 32px));
+  }
+
+  /* 2X large icon size */
+  :host([size='xxlarge']) .svg-icon {
+    width: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback, 40px));
+    height: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback, 40px));
   }
 `;
-export const styles = [iconStyles, styleVariables];
+export const styles = [iconStyle, sizeIconStyle, styleVariables];
 //# sourceMappingURL=icon.style.js.map

package/icon.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.style.js","sourceRoot":"","sources":["../../../src/components/icon/icon.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AAEnD,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;CAMrB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './icon.variables.js';\n\nconst iconStyles = css`\n  .svg-icon {\n    fill: var(--hybrid-icon-color, #000000);\n    width: var(--hybrid-icon-width);\n    height: var(--hybrid-icon-height);\n  }\n`;\nexport const styles = [iconStyles, styleVariables];\n"]}
+{"version":3,"file":"icon.style.js","sourceRoot":"","sources":["../../../src/components/icon/icon.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD;;;;;;;;;;;;;GAaG;AAEH,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8HpB,CAAC;AAEF;;;GAGG;AACH,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,aAAa,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styleVariables } from './icon.variables.js';\n\n/**\n * Icon component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-icon component, including:\n * - Base icon styles with CSS custom properties for theming\n * - Multiple icon states (default, hover, active, disabled, focus)\n * - Size variations (small, medium, large, custom)\n * - Interactive states for clickable icons\n * - Theme compatibility (light, dark, carbon, default design systems)\n * - Accessibility features and reduced motion support\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of icon appearance.\n */\n\nconst iconStyle = css`\n  /* \n   * Host element base styles\n   * Container for the icon component with flexible positioning\n   */\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    vertical-align: baseline;\n    position: relative;\n    font-family: var(--nuraly-font-family-icon, 'IBM Plex Sans', ui-sans-serif, system-ui);\n  }\n\n  /* \n   * Base SVG icon styles\n   * Uses theme CSS custom properties for comprehensive theming support\n   */\n  .svg-icon {\n    /* Basic properties with theme support */\n    fill: var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616));\n    width: var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px));\n    height: var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px));\n    min-width: var(--nuraly-icon-min-size, var(--nuraly-icon-min-size-fallback, 16px));\n    min-height: var(--nuraly-icon-min-size, var(--nuraly-icon-min-size-fallback, 16px));\n    \n    /* Transition and display properties */\n    transition: var(--nuraly-icon-transition, var(--nuraly-icon-transition-fallback, opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease));\n    display: block;\n    flex-shrink: 0;\n    \n    /* Cursor handling */\n    cursor: var(--nuraly-cursor-default, default);\n  }\n\n  /* ========================================\n   * CLICKABLE STATES\n   * ======================================== */\n  \n  .svg-icon.clickable {\n    cursor: var(--nuraly-cursor-interactive, pointer);\n  }\n\n  .svg-icon.clickable:hover {\n    opacity: var(--nuraly-icon-hover-opacity, var(--nuraly-icon-hover-opacity-fallback, 0.8));\n    transform: var(--nuraly-icon-hover-transform, var(--nuraly-icon-hover-transform-fallback, scale(1.05)));\n    fill: var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe));\n  }\n\n  .svg-icon.clickable:active {\n    opacity: var(--nuraly-icon-active-opacity, var(--nuraly-icon-active-opacity-fallback, 0.6));\n    transform: var(--nuraly-icon-active-transform, var(--nuraly-icon-active-transform-fallback, scale(0.95)));\n    fill: var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada));\n  }\n\n  .svg-icon.clickable:focus {\n    outline: var(--nuraly-icon-focus-outline, var(--nuraly-icon-focus-outline-fallback, 2px solid #0f62fe));\n    outline-offset: var(--nuraly-icon-focus-outline-offset, var(--nuraly-icon-focus-outline-offset-fallback, 2px));\n    background: var(--nuraly-icon-focus-background, var(--nuraly-icon-focus-background-fallback, rgba(15, 98, 254, 0.1)));\n    border-radius: var(--nuraly-icon-focus-border-radius, var(--nuraly-icon-focus-border-radius-fallback, 4px));\n    box-shadow: var(--nuraly-icon-focus-shadow, var(--nuraly-icon-focus-shadow-fallback, none));\n  }\n\n  /* ========================================\n   * DISABLED STATE\n   * ======================================== */\n  \n  .svg-icon.disabled {\n    opacity: var(--nuraly-icon-disabled-opacity, var(--nuraly-icon-disabled-opacity-fallback, 0.25));\n    fill: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));\n    cursor: var(--nuraly-cursor-disabled, not-allowed);\n  }\n\n  .svg-icon.clickable.disabled:hover,\n  .svg-icon.clickable.disabled:active {\n    opacity: var(--nuraly-icon-disabled-opacity, var(--nuraly-icon-disabled-opacity-fallback, 0.25));\n    fill: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));\n    transform: none;\n  }\n\n  .svg-icon.clickable.disabled:focus {\n    outline: none;\n    background: none;\n    box-shadow: none;\n  }\n\n  /* ========================================\n   * ACCESSIBILITY FEATURES\n   * ======================================== */\n\n  /* Screen reader only text for better accessibility */\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    .svg-icon {\n      fill: CanvasText;\n    }\n    \n    .svg-icon.disabled {\n      opacity: 0.5;\n    }\n  }\n\n  /* Reduced motion support */\n  @media (prefers-reduced-motion: reduce) {\n    .svg-icon {\n      transition: none;\n    }\n    \n    .svg-icon.clickable:hover,\n    .svg-icon.clickable:active {\n      transform: none;\n    }\n  }\n`;\n\n/**\n * Size variation styles for the icon component\n * Defines size variations for different icon use cases\n */\nconst sizeIconStyle = css`\n  /* ========================================\n   * SIZE VARIATIONS\n   * ======================================== */\n\n  /* Small icon size */\n  :host([size='small']) .svg-icon {\n    width: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback, 16px));\n    height: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback, 16px));\n  }\n\n  /* Medium icon size (default) */\n  :host([size='medium']) .svg-icon {\n    width: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback, 20px));\n    height: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback, 20px));\n  }\n\n  /* Large icon size */\n  :host([size='large']) .svg-icon {\n    width: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback, 24px));\n    height: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback, 24px));\n  }\n\n  /* Extra large icon size */\n  :host([size='xlarge']) .svg-icon {\n    width: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback, 32px));\n    height: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback, 32px));\n  }\n\n  /* 2X large icon size */\n  :host([size='xxlarge']) .svg-icon {\n    width: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback, 40px));\n    height: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback, 40px));\n  }\n`;\n\nexport const styles = [iconStyle, sizeIconStyle, styleVariables];\n"]}

package/icon.variables.d.ts

@@ -1,2 +1,17 @@
+/**
+ * Icon component CSS custom properties (design tokens)
+ *
+ * This file contains all the CSS custom properties used by the nr-icon component,
+ * organized by functionality and including comprehensive theme support for multiple design systems.
+ *
+ * The styling system uses CSS custom properties with fallbacks to allow
+ * for both global and local customization of icon appearance across different themes:
+ * - Light theme (default)
+ * - Dark theme
+ * - Carbon Design System (light/dark)
+ * - Default Design System (light/dark)
+ *
+ * Design tokens follow the pattern: --nuraly-[component]-[property]-[variant]
+ */
 export declare const styleVariables: import("lit").CSSResult;
 //# sourceMappingURL=icon.variables.d.ts.map

package/icon.variables.js

@@ -1,14 +1,132 @@
 import { css } from 'lit';
+/**
+ * Icon component CSS custom properties (design tokens)
+ *
+ * This file contains all the CSS custom properties used by the nr-icon component,
+ * organized by functionality and including comprehensive theme support for multiple design systems.
+ *
+ * The styling system uses CSS custom properties with fallbacks to allow
+ * for both global and local customization of icon appearance across different themes:
+ * - Light theme (default)
+ * - Dark theme
+ * - Carbon Design System (light/dark)
+ * - Default Design System (light/dark)
+ *
+ * Design tokens follow the pattern: --nuraly-[component]-[property]-[variant]
+ */
 export const styleVariables = css `
   :host {
-    /* --hybrid-icon-color: #000000; */
-    --hybrid-icon-width: 18px;
-    --hybrid-icon-height: 18px;
+    /* ========================================
+     * BASE ICON PROPERTIES
+     * ======================================== */
+    
+    /* Size properties with fallbacks */
+    --nuraly-icon-size-fallback: 18px;
+    --nuraly-icon-size-small-fallback: 14px;
+    --nuraly-icon-size-medium-fallback: 20px;
+    --nuraly-icon-size-large-fallback: 24px;
+    --nuraly-icon-size-xlarge-fallback: 32px;
+    --nuraly-icon-size-xxlarge-fallback: 40px;
+    --nuraly-icon-min-size-fallback: 12px;
+    
+    /* Color properties with theme-aware fallbacks */
+    --nuraly-color-icon-fallback: #161616;
+    
+    /* ========================================
+     * INTERACTIVE STATE PROPERTIES
+     * ======================================== */
+    
+    /* Transition properties */
+    --nuraly-icon-transition-fallback: opacity 0.2s ease, transform 0.2s ease, fill 0.2s ease;
+    
+    /* Hover state properties */
+    --nuraly-icon-hover-opacity-fallback: 0.8;
+    --nuraly-icon-hover-transform-fallback: scale(1.05);
+    --nuraly-color-icon-hover-fallback: #0f62fe;
+    
+    /* Active state properties */
+    --nuraly-icon-active-opacity-fallback: 0.6;
+    --nuraly-icon-active-transform-fallback: scale(0.95);
+    --nuraly-color-icon-active-fallback: #054ada;
+    
+    /* Disabled state properties */
+    --nuraly-icon-disabled-opacity-fallback: 0.25;
+    --nuraly-color-icon-disabled-fallback: #c6c6c6;
+    
+    /* ========================================
+     * FOCUS STATE PROPERTIES
+     * ======================================== */
+    
+    --nuraly-icon-focus-outline-fallback: 2px solid #0f62fe;
+    --nuraly-icon-focus-outline-offset-fallback: 2px;
+    --nuraly-icon-focus-background-fallback: rgba(15, 98, 254, 0.1);
+    --nuraly-icon-focus-border-radius-fallback: 4px;
+    --nuraly-icon-focus-shadow-fallback: none;
+    
+    /* ========================================
+     * CURSOR PROPERTIES
+     * ======================================== */
+    
+    --nuraly-cursor-default: default;
+    --nuraly-cursor-interactive: pointer;
+    --nuraly-cursor-disabled: not-allowed;
   }
-  @media (prefers-color-scheme: dark) {
+
+  /* ========================================
+   * SIZE-SPECIFIC DESIGN TOKENS
+   * ======================================== */
+  
+  /**
+   * Size-specific customizations that can be overridden in themes
+   * These provide defaults that themes can customize for different design systems
+   */
+  
+  :host([size="small"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-small, var(--nuraly-icon-size-small-fallback));
+  }
+  
+  :host([size="medium"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-medium, var(--nuraly-icon-size-medium-fallback));
+  }
+  
+  :host([size="large"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-large, var(--nuraly-icon-size-large-fallback));
+  }
+  
+  :host([size="xlarge"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-xlarge, var(--nuraly-icon-size-xlarge-fallback));
+  }
+  
+  :host([size="xxlarge"]) {
+    --nuraly-icon-size: var(--nuraly-icon-size-xxlarge, var(--nuraly-icon-size-xxlarge-fallback));
+  }
+
+  /* ========================================
+   * ACCESSIBILITY DESIGN TOKENS
+   * ======================================== */
+  
+  /**
+   * Accessibility features that respect user preferences
+   * These ensure the component works well for all users
+   */
+  
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
     :host {
-      --hybrid-icon-color: #ffffff;
+      --nuraly-color-icon: CanvasText;
+      --nuraly-color-icon-hover: CanvasText;
+      --nuraly-color-icon-active: CanvasText;
+      --nuraly-icon-focus-outline: 3px solid CanvasText;
+      --nuraly-icon-focus-background: Canvas;
     }
   }
+  
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --nuraly-icon-transition: none;
+      --nuraly-icon-hover-transform: none;
+      --nuraly-icon-active-transform: none;
+    }
 `;
 //# sourceMappingURL=icon.variables.js.map

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,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;CAWhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n  :host {\n    /* --hybrid-icon-color: #000000; */\n    --hybrid-icon-width: 18px;\n    --hybrid-icon-height: 18px;\n  }\n  @media (prefers-color-scheme: dark) {\n    :host {\n      --hybrid-icon-color: #ffffff;\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"]}