@nuralyui/icon 0.0.7 → 0.0.9

package/icon.component.d.ts

@@ -6,19 +6,20 @@
 import { LitElement } from 'lit';
 import { IconTypes } from './icon.types.js';
 /**
- * Enhanced Icon component with clickable functionality and proper event handling
+ * Enhanced Icon component with clickable functionality, custom styling, and comprehensive theming
  *
  * @example
  * ```html
- * <hy-icon name="envelope"></hy-icon>
- * <hy-icon name="check" clickable @icon-click="${this.handleIconClick}"></hy-icon>
- * <hy-icon name="warning" type="regular" disabled></hy-icon>
+ * <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("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+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 */
@@ -27,6 +28,14 @@ export declare class HyIconElement extends IconBaseMixin {
     type: IconTypes;
     /** 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
      */

package/icon.component.js

@@ -19,16 +19,17 @@ library.add(fas, far);
 dom.watch();
 import { styles } from './icon.style.js';
 import { regularIconPack, solidIconPack } from './icon.types.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { ClickableMixin } from './mixins/index.js';
 /**
- * Enhanced Icon component with clickable functionality and proper event handling
+ * Enhanced Icon component with clickable functionality, custom styling, and comprehensive theming
  *
  * @example
  * ```html
- * <hy-icon name="envelope"></hy-icon>
- * <hy-icon name="check" clickable @icon-click="${this.handleIconClick}"></hy-icon>
- * <hy-icon name="warning" type="regular" disabled></hy-icon>
+ * <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)
@@ -56,15 +57,39 @@ let HyIconElement = class HyIconElement extends IconBaseMixin {
             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 ${this.clickable ? 'clickable' : ''} ${this.disabled ? 'disabled' : ''}"
+        class="${cssClasses}"
+        style="${dynamicStyles}"
         xmlns="http://www.w3.org/2000/svg" 
         viewBox="0 0 550 550"
         role="${role}"
@@ -144,8 +169,20 @@ __decorate([
 __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":"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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 '../../shared/base-mixin.js';\nimport { ClickableMixin } from './mixins/index.js';\n\n/**\n * Enhanced Icon component with clickable functionality and proper event handling\n * \n * @example\n * ```html\n * <hy-icon name=\"envelope\"></hy-icon>\n * <hy-icon name=\"check\" clickable @icon-click=\"${this.handleIconClick}\"></hy-icon>\n * <hy-icon name=\"warning\" type=\"regular\" disabled></hy-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('hy-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  /**\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  override render() {\n    const iconPath = this.getIconPath();\n    const role = this.getIconRole();\n    const tabIndex = this.getIconTabIndex();\n    const ariaDisabled = this.getAriaDisabled();\n    \n    return html`\n      <svg \n        class=\"svg-icon ${this.clickable ? 'clickable' : ''} ${this.disabled ? 'disabled' : ''}\"\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"]}
+{"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,26 +1,53 @@
 import { css } from 'lit';
 import { styleVariables } from './icon.variables.js';
 /**
- * Icon component styles with theme support and interactive states
+ * Icon component styles for the Hybrid UI Library
  *
- * Uses CSS custom properties for theming with fallbacks for backwards compatibility.
- * Supports both light and dark themes via data-theme attribute.
+ * 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 iconStyles = css `
+const iconStyle = css `
+  /* 
+   * Host element base styles
+   * Container for the icon component with flexible positioning
+   */
   :host {
-    display: inline-block;
-    line-height: 0;
+    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 {
-    /* Basic properties */
-    fill: var(--hybrid-icon-local-color, var(--hybrid-icon-color, #000000));
-    width: var(--hybrid-icon-local-width, var(--hybrid-icon-width, 18px));
-    height: var(--hybrid-icon-local-height, var(--hybrid-icon-height, 18px));
-    transition: var(--hybrid-icon-local-transition, opacity 0.2s ease, transform 0.2s ease);
+    /* 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: default;
+    cursor: var(--nuraly-cursor-default, default);
   }
 
   /* ========================================
@@ -28,26 +55,27 @@ const iconStyles = css `
    * ======================================== */
   
   .svg-icon.clickable {
-    cursor: var(--hybrid-icon-local-cursor, pointer);
+    cursor: var(--nuraly-cursor-interactive, pointer);
   }
 
   .svg-icon.clickable:hover {
-    opacity: var(--hybrid-icon-local-hover-opacity, 0.8);
-    transform: var(--hybrid-icon-local-hover-transform, scale(1.1));
-    fill: var(--hybrid-icon-local-hover-color, var(--hybrid-icon-local-color, #0f62fe));
+    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(--hybrid-icon-local-active-opacity, 0.6);
-    transform: var(--hybrid-icon-local-active-transform, scale(0.95));
-    fill: var(--hybrid-icon-local-active-color, var(--hybrid-icon-local-color, #054ada));
+    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(--hybrid-icon-local-focus-outline, 2px solid #0f62fe);
-    outline-offset: var(--hybrid-icon-local-focus-outline-offset, 2px);
-    background: var(--hybrid-icon-local-focus-background, rgba(15, 98, 254, 0.1));
-    border-radius: var(--hybrid-icon-local-focus-border-radius, 4px);
+    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));
   }
 
   /* ========================================
@@ -55,22 +83,102 @@ const iconStyles = css `
    * ======================================== */
   
   .svg-icon.disabled {
-    opacity: var(--hybrid-icon-local-disabled-opacity, 0.4);
-    fill: var(--hybrid-icon-local-disabled-color, #c6c6c6);
-    cursor: var(--hybrid-icon-local-disabled-cursor, not-allowed);
+    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(--hybrid-icon-local-disabled-opacity, 0.4);
-    fill: var(--hybrid-icon-local-disabled-color, #c6c6c6);
+    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;;;;;GAKG;AACH,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiErB,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\n/**\n * Icon component styles with theme support and interactive states\n * \n * Uses CSS custom properties for theming with fallbacks for backwards compatibility.\n * Supports both light and dark themes via data-theme attribute.\n */\nconst iconStyles = css`\n  :host {\n    display: inline-block;\n    line-height: 0;\n  }\n\n  .svg-icon {\n    /* Basic properties */\n    fill: var(--hybrid-icon-local-color, var(--hybrid-icon-color, #000000));\n    width: var(--hybrid-icon-local-width, var(--hybrid-icon-width, 18px));\n    height: var(--hybrid-icon-local-height, var(--hybrid-icon-height, 18px));\n    transition: var(--hybrid-icon-local-transition, opacity 0.2s ease, transform 0.2s ease);\n    \n    /* Cursor handling */\n    cursor: default;\n  }\n\n  /* ========================================\n   * CLICKABLE STATES\n   * ======================================== */\n  \n  .svg-icon.clickable {\n    cursor: var(--hybrid-icon-local-cursor, pointer);\n  }\n\n  .svg-icon.clickable:hover {\n    opacity: var(--hybrid-icon-local-hover-opacity, 0.8);\n    transform: var(--hybrid-icon-local-hover-transform, scale(1.1));\n    fill: var(--hybrid-icon-local-hover-color, var(--hybrid-icon-local-color, #0f62fe));\n  }\n\n  .svg-icon.clickable:active {\n    opacity: var(--hybrid-icon-local-active-opacity, 0.6);\n    transform: var(--hybrid-icon-local-active-transform, scale(0.95));\n    fill: var(--hybrid-icon-local-active-color, var(--hybrid-icon-local-color, #054ada));\n  }\n\n  .svg-icon.clickable:focus {\n    outline: var(--hybrid-icon-local-focus-outline, 2px solid #0f62fe);\n    outline-offset: var(--hybrid-icon-local-focus-outline-offset, 2px);\n    background: var(--hybrid-icon-local-focus-background, rgba(15, 98, 254, 0.1));\n    border-radius: var(--hybrid-icon-local-focus-border-radius, 4px);\n  }\n\n  /* ========================================\n   * DISABLED STATE\n   * ======================================== */\n  \n  .svg-icon.disabled {\n    opacity: var(--hybrid-icon-local-disabled-opacity, 0.4);\n    fill: var(--hybrid-icon-local-disabled-color, #c6c6c6);\n    cursor: var(--hybrid-icon-local-disabled-cursor, not-allowed);\n  }\n\n  .svg-icon.clickable.disabled:hover,\n  .svg-icon.clickable.disabled:active {\n    opacity: var(--hybrid-icon-local-disabled-opacity, 0.4);\n    fill: var(--hybrid-icon-local-disabled-color, #c6c6c6);\n    transform: none;\n  }\n\n  .svg-icon.clickable.disabled:focus {\n    outline: none;\n    background: none;\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,11 +1,17 @@
 /**
  * Icon component CSS custom properties (design tokens)
  *
- * This file contains all the CSS custom properties used by the hy-icon component,
- * organized by functionality and including both light and dark theme variants.
+ * 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.
+ * 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

@@ -2,80 +2,131 @@ import { css } from 'lit';
 /**
  * Icon component CSS custom properties (design tokens)
  *
- * This file contains all the CSS custom properties used by the hy-icon component,
- * organized by functionality and including both light and dark theme variants.
+ * 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.
+ * 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 {
-    /* ----------------------------------------
-     * BASIC ICON PROPERTIES
-     * ---------------------------------------- */
-    --hybrid-icon-local-color: #000000;
-    --hybrid-icon-local-width: 18px;
-    --hybrid-icon-local-height: 18px;
-
-    /* ----------------------------------------
-     * INTERACTIVE STATES
-     * ---------------------------------------- */
-    --hybrid-icon-local-transition: opacity 0.2s ease, transform 0.2s ease;
-    --hybrid-icon-local-hover-opacity: 0.8;
-    --hybrid-icon-local-hover-transform: scale(1.1);
-    --hybrid-icon-local-hover-color: #0f62fe;
-    --hybrid-icon-local-active-opacity: 0.6;
-    --hybrid-icon-local-active-transform: scale(0.95);
-    --hybrid-icon-local-active-color: #054ada;
-    --hybrid-icon-local-disabled-opacity: 0.4;
-    --hybrid-icon-local-disabled-color: #c6c6c6;
+    /* ========================================
+     * BASE ICON PROPERTIES
+     * ======================================== */
     
-    /* ----------------------------------------
-     * FOCUS STYLES
-     * ---------------------------------------- */
-    --hybrid-icon-local-focus-outline: 2px solid #0f62fe;
-    --hybrid-icon-local-focus-outline-offset: 2px;
-    --hybrid-icon-local-focus-background: rgba(15, 98, 254, 0.1);
-    --hybrid-icon-local-focus-border-radius: 4px;
-
-    /* ----------------------------------------
-     * CURSOR STYLES
-     * ---------------------------------------- */
-    --hybrid-icon-local-cursor: pointer;
-    --hybrid-icon-local-disabled-cursor: not-allowed;
+    /* 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;
   }
 
   /* ========================================
-   * DARK THEME OVERRIDES
+   * SIZE-SPECIFIC DESIGN TOKENS
    * ======================================== */
   
   /**
-   * Dark theme styles using data-theme attribute on the SVG element
-   * These override the light theme defaults when data-theme="dark" is applied
+   * Size-specific customizations that can be overridden in themes
+   * These provide defaults that themes can customize for different design systems
    */
-  .svg-icon[data-theme="dark"] {
-    --hybrid-icon-local-color: #ffffff;
-    --hybrid-icon-local-hover-color: #78a9ff;
-    --hybrid-icon-local-active-color: #a6c8ff;
-    --hybrid-icon-local-disabled-color: #6f6f6f;
-    --hybrid-icon-local-focus-outline: 2px solid #78a9ff;
-    --hybrid-icon-local-focus-background: rgba(120, 169, 255, 0.1);
+  
+  :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));
   }
 
   /* ========================================
-   * REDUCED MOTION SUPPORT
+   * ACCESSIBILITY DESIGN TOKENS
    * ======================================== */
   
   /**
-   * Accessibility: Respect user's motion preferences
-   * Disables animations when user prefers reduced motion
+   * Accessibility features that respect user preferences
+   * These ensure the component works well for all users
    */
-  @media (prefers-reduced-motion: reduce) {
+  
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
     :host {
-      --hybrid-icon-local-transition: none;
-      --hybrid-icon-local-hover-transform: none;
-      --hybrid-icon-local-active-transform: none;
+      --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