@nuraly/lumenui 0.1.0

package/dist/src/components/icon/icon.component.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { IconTypes } from './icon.types.js';
+/**
+ * Enhanced Icon component with clickable functionality, custom styling, and comprehensive theming
+ *
+ * @example
+ * ```html
+ * <nr-icon name="mail"></nr-icon>
+ * <nr-icon name="check" clickable @icon-click="${this.handleIconClick}"></nr-icon>
+ * <nr-icon name="alert-triangle" 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 Lucide icon name */
+    name: string;
+    /** The icon type (solid or regular) */
+    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
+     */
+    willUpdate(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Create and mount the Lucide SVG icon using createElement
+     */
+    private mountIcon;
+    firstUpdated(changedProperties: Map<string, any>): void;
+    updated(changedProperties: Map<string, any>): void;
+    /**
+     * 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/dist/src/components/icon/icon.component.js

@@ -0,0 +1,207 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { icons, createElement } from 'lucide';
+import { styles } from './icon.style.js';
+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="mail"></nr-icon>
+ * <nr-icon name="check" clickable @icon-click="${this.handleIconClick}"></nr-icon>
+ * <nr-icon name="alert-triangle" 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 = "regular" /* IconTypes.Regular */;
+        /** 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() {
+        // Build dynamic styles using CSS custom properties
+        let dynamicStyles = '';
+        if (this.color) {
+            dynamicStyles += `color: ${this.color};`;
+        }
+        if (this.width) {
+            dynamicStyles += `width: ${this.width};`;
+        }
+        if (this.height) {
+            dynamicStyles += `height: ${this.height};`;
+        }
+        return html `
+      <div 
+        id="icon-slot" 
+        class="icon-container ${this.clickable ? 'clickable' : ''} ${this.disabled ? 'disabled' : ''}"
+        style="${dynamicStyles}"
+        data-theme="${this.currentTheme}"
+      ></div>
+    `;
+    }
+    /**
+     * Create and mount the Lucide SVG icon using createElement
+     */
+    mountIcon() {
+        var _a;
+        const slot = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon-slot');
+        if (!slot)
+            return;
+        // Clear previous content
+        while (slot.firstChild) {
+            slot.removeChild(slot.firstChild);
+        }
+        if (!this.name) {
+            console.warn('HyIconElement: Icon name is required');
+            return;
+        }
+        try {
+            // Convert kebab-case to PascalCase for Lucide icon names
+            const pascalCaseName = this.name
+                .split('-')
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                .join('');
+            // Get the icon data from Lucide
+            const iconData = icons[pascalCaseName];
+            if (!iconData) {
+                console.warn(`HyIconElement: Icon "${this.name}" (${pascalCaseName}) not found in Lucide icons`);
+                return;
+            }
+            // Use Lucide's createElement to generate the SVG element
+            const svgClasses = [
+                'svg-icon',
+                this.clickable ? 'clickable' : '',
+                this.disabled ? 'disabled' : ''
+            ].filter(Boolean);
+            const svgElement = createElement(iconData, {
+                class: svgClasses,
+                'stroke-width': 2,
+            });
+            // Set accessibility attributes
+            svgElement.setAttribute('role', this.getIconRole());
+            svgElement.setAttribute('tabindex', this.getIconTabIndex());
+            svgElement.setAttribute('aria-label', this.alt || this.name);
+            if (this.disabled) {
+                svgElement.setAttribute('aria-disabled', 'true');
+            }
+            // Add event listeners for clickable icons
+            if (this.clickable) {
+                svgElement.addEventListener('click', (e) => this.handleIconClick(e));
+                svgElement.addEventListener('keydown', (e) => this.handleIconKeydown(e));
+            }
+            // Append to slot
+            slot.appendChild(svgElement);
+        }
+        catch (error) {
+            console.error(`HyIconElement: Error loading icon "${this.name}":`, error);
+        }
+    }
+    firstUpdated(changedProperties) {
+        var _a;
+        (_a = super.firstUpdated) === null || _a === void 0 ? void 0 : _a.call(this, changedProperties);
+        this.mountIcon();
+    }
+    updated(changedProperties) {
+        var _a;
+        (_a = super.updated) === null || _a === void 0 ? void 0 : _a.call(this, changedProperties);
+        // Re-mount icon if any relevant property changed
+        if (changedProperties.has('name') ||
+            changedProperties.has('color') ||
+            changedProperties.has('clickable') ||
+            changedProperties.has('disabled')) {
+            this.mountIcon();
+        }
+    }
+    /**
+     * 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;
+__decorate([
+    property({ type: String })
+], HyIconElement.prototype, "name", void 0);
+__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('nr-icon')
+], HyIconElement);
+export { HyIconElement };
+//# sourceMappingURL=icon.component.js.map

package/dist/src/components/icon/icon.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult[];
+//# sourceMappingURL=icon.style.d.ts.map

package/dist/src/components/icon/icon.style.js

@@ -0,0 +1,211 @@
+import { css } from 'lit';
+import { styleVariables } from './icon.variables.js';
+/**
+ * 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);
+    /* Ensure currentColor has a sensible default for Lucide stroke inheritance */
+    color: var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616));
+  }
+
+  /* Icon container that holds the dynamically created SVG */
+  .icon-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  /* 
+   * Base SVG icon styles - targets the SVG element created by Lucide's createElement
+   * Uses stroke-based rendering for Lucide icons
+   */
+  .svg-icon {
+    stroke: currentColor;
+    fill: none;
+    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, stroke 0.2s ease));
+    display: block;
+    flex-shrink: 0;
+    
+    /* Cursor handling */
+    cursor: var(--nuraly-cursor-default, default);
+  }
+
+  /* Ensure all SVG primitives inherit stroke and have no fill */
+  .svg-icon path,
+  .svg-icon line,
+  .svg-icon polyline,
+  .svg-icon polygon,
+  .svg-icon circle,
+  .svg-icon rect,
+  .svg-icon ellipse {
+    stroke: currentColor;
+    fill: none;
+  }
+
+  /* ========================================
+   * 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)));
+    stroke: var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe));
+    color: 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)));
+    stroke: var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada));
+    color: 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));
+    stroke: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));
+    color: 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));
+    stroke: var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6));
+    color: 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 {
+      stroke: CanvasText;
+      color: 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 = [iconStyle, sizeIconStyle, styleVariables];
+//# sourceMappingURL=icon.style.js.map

package/dist/src/components/icon/icon.types.d.ts

@@ -0,0 +1,5 @@
+export declare const enum IconTypes {
+    Solid = "solid",
+    Regular = "regular"
+}
+//# sourceMappingURL=icon.types.d.ts.map

package/dist/src/components/icon/icon.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=icon.types.js.map

package/dist/src/components/icon/icon.variables.d.ts

@@ -0,0 +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/dist/src/components/icon/icon.variables.js

@@ -0,0 +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 {
+    /* ========================================
+     * 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;
+  }
+
+  /* ========================================
+   * 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 {
+      --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/dist/src/components/icon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon.component.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/icon/index.js

@@ -0,0 +1,2 @@
+export * from './icon.component.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/icon/react.d.ts

@@ -0,0 +1,3 @@
+import { HyIconElement } from './icon.component.js';
+export declare const HyIcon: import("@lit-labs/react").ReactWebComponent<HyIconElement, {}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/icon/react.js

@@ -0,0 +1,9 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { HyIconElement } from './icon.component.js';
+export const HyIcon = createComponent({
+    tagName: 'nr-icon',
+    elementClass: HyIconElement,
+    react: React,
+});
+//# sourceMappingURL=react.js.map