@nuralyui/button 0.0.14 → 0.0.15

package/button.component.d.ts

@@ -4,54 +4,94 @@
  * SPDX-License-Identifier: MIT
  */
 import { LitElement } from 'lit';
-import { ButtonType, ButtonShape, IconPosition } from './button.types.js';
-declare const NrButtonElement_base: (new (...args: any[]) => import("./mixins/ripple-mixin.js").RippleCapable) & (new (...args: any[]) => import("./mixins/keyboard-mixin.js").KeyboardCapable) & (new (...args: any[]) => import("./mixins/link-mixin.js").LinkCapable) & (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;
+import { ButtonType, ButtonSize, ButtonShape, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';
+import '../icon/icon.component.js';
+import { ButtonHost } from './interfaces/index.js';
+declare const NrButtonElement_base: (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;
 /**
- * - NuralyUIBaseMixin: Core functionality (theme, dependencies, events)
- * - RippleMixin: Ripple effect handling
- * - KeyboardMixin: Keyboard interaction (Enter/Space activation)
- * - LinkMixin: Link-specific behavior for ButtonType.Link
+ * Versatile button component with multiple variants, loading states, and enhanced icon support.
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage -->
+ * <nr-button type="primary">Click me</nr-button>
+ *
+ * <!-- Array-based icons (original API) -->
+ * <nr-button type="primary" .icon=${['add']}>Add Item</nr-button>
+ * <nr-button type="primary" .icon=${['home', 'arrow-right']}>Home</nr-button>
+ *
+ * <!-- Separate icon properties (new API) -->
+ * <nr-button type="primary" iconLeft="home" iconRight="arrow-right">Navigate</nr-button>
+ * <nr-button type="primary" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>
+ *
+ * <!-- Object-based icons (new API) -->
+ * <nr-button type="primary" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>
+ *
+ * <!-- Loading state -->
+ * <nr-button loading>Processing...</nr-button>
+ * ```
+ *
+ * @fires button-clicked - Button clicked
+ * @fires link-navigation - Link navigation
+ *
+ * @slot default - Button text content
  */
-export declare class NrButtonElement extends NrButtonElement_base {
+export declare class NrButtonElement extends NrButtonElement_base implements ButtonHost {
+    static styles: import("lit").CSSResult;
+    /** Disables the button */
     disabled: boolean;
+    /** Shows loading spinner */
     loading: boolean;
-    size: string;
+    /** Button size (small, medium, large) */
+    size: ButtonSize | '';
+    /** Button type (default, primary, secondary, danger, ghost, link) */
     type: ButtonType;
+    /** Button shape (default, circle, round) */
     shape: ButtonShape;
+    /** Makes button full width */
     block: boolean;
+    /** Applies dashed border */
     dashed: boolean;
-    icon: string[];
+    /** Icon configuration (supports strings or enhanced config objects) */
+    icon: ButtonIcons;
+    /** Left icon (alternative to icon array) */
+    iconLeft?: ButtonIcon;
+    /** Right icon (alternative to icon array) */
+    iconRight?: ButtonIcon;
+    /** Icon configuration object (alternative to icon array) */
+    icons?: ButtonIconsConfig;
+    /** Icon position relative to text */
     iconPosition: IconPosition;
+    /** URL for link-type buttons */
     href: string;
+    /** Target attribute for links */
     target: string;
+    /** Enables ripple effect */
     ripple: boolean;
+    /** Custom aria-label */
     buttonAriaLabel: string;
+    /** References to descriptive elements */
     ariaDescribedBy: string;
+    /** HTML button type */
     htmlType: string;
-    /**
-     * Required components that must be registered for this component to work properly
-     */
     requiredComponents: string[];
-    /**
-     * Check for required dependencies when component is connected to DOM
-     */
+    private rippleController;
+    private keyboardController;
+    private linkController;
     connectedCallback(): void;
-    /**
-     * Get common attributes for both button and anchor elements
-     */
     private getCommonAttributes;
+    private renderIcon;
+    private handleClick;
+    private handleKeydown;
     /**
-     * Renders an icon if the hy-icon component is available
-     * @param iconName - The name of the icon to render
-     * @returns TemplateResult or nothing
+     * Get the resolved left icon from various sources
      */
-    private renderIcon;
+    private getResolvedLeftIcon;
     /**
-     * Handle comprehensive click events with proper event dispatching
+     * Get the resolved right icon from various sources
      */
-    private handleClick;
+    private getResolvedRightIcon;
     render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResult[];
 }
 export {};
 //# sourceMappingURL=button.component.d.ts.map

package/button.component.js

@@ -11,54 +11,85 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { EMPTY_STRING } from './button.types.js';
 import { styles } from './button.style.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
-import { RippleMixin, KeyboardMixin, LinkMixin } from './mixins/index.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+// Import icon component
+import '../icon/icon.component.js';
+// Import controllers
+import { ButtonRippleController, ButtonKeyboardController, ButtonLinkController } from './controllers/index.js';
 /**
- * - NuralyUIBaseMixin: Core functionality (theme, dependencies, events)
- * - RippleMixin: Ripple effect handling
- * - KeyboardMixin: Keyboard interaction (Enter/Space activation)
- * - LinkMixin: Link-specific behavior for ButtonType.Link
+ * Versatile button component with multiple variants, loading states, and enhanced icon support.
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage -->
+ * <nr-button type="primary">Click me</nr-button>
+ *
+ * <!-- Array-based icons (original API) -->
+ * <nr-button type="primary" .icon=${['add']}>Add Item</nr-button>
+ * <nr-button type="primary" .icon=${['home', 'arrow-right']}>Home</nr-button>
+ *
+ * <!-- Separate icon properties (new API) -->
+ * <nr-button type="primary" iconLeft="home" iconRight="arrow-right">Navigate</nr-button>
+ * <nr-button type="primary" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>
+ *
+ * <!-- Object-based icons (new API) -->
+ * <nr-button type="primary" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>
+ *
+ * <!-- Loading state -->
+ * <nr-button loading>Processing...</nr-button>
+ * ```
+ *
+ * @fires button-clicked - Button clicked
+ * @fires link-navigation - Link navigation
+ *
+ * @slot default - Button text content
  */
-let NrButtonElement = class NrButtonElement extends RippleMixin(KeyboardMixin(LinkMixin(NuralyUIBaseMixin(LitElement)))) {
+let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
-        // Button state properties
+        /** Disables the button */
         this.disabled = false;
+        /** Shows loading spinner */
         this.loading = false;
+        /** Button size (small, medium, large) */
         this.size = EMPTY_STRING;
+        /** Button type (default, primary, secondary, danger, ghost, link) */
         this.type = "default" /* ButtonType.Default */;
+        /** Button shape (default, circle, round) */
         this.shape = "default" /* ButtonShape.Default */;
+        /** Makes button full width */
         this.block = false;
+        /** Applies dashed border */
         this.dashed = false;
-        // Icon properties
+        /** Icon configuration (supports strings or enhanced config objects) */
         this.icon = [];
+        /** Icon position relative to text */
         this.iconPosition = "left" /* IconPosition.Left */;
-        // Link properties (inherited from LinkMixin)
+        /** URL for link-type buttons */
         this.href = EMPTY_STRING;
+        /** Target attribute for links */
         this.target = EMPTY_STRING;
-        // Ripple property (inherited from RippleMixin)
+        /** Enables ripple effect */
         this.ripple = true;
-        // Accessibility properties
+        /** Custom aria-label */
         this.buttonAriaLabel = EMPTY_STRING;
+        /** References to descriptive elements */
         this.ariaDescribedBy = EMPTY_STRING;
+        /** HTML button type */
         this.htmlType = EMPTY_STRING;
-        /**
-         * Required components that must be registered for this component to work properly
-         */
-        this.requiredComponents = ['hy-icon'];
+        this.requiredComponents = ['nr-icon'];
+        // Controllers
+        this.rippleController = new ButtonRippleController(this);
+        this.keyboardController = new ButtonKeyboardController(this);
+        this.linkController = new ButtonLinkController(this);
     }
-    /**
-     * Check for required dependencies when component is connected to DOM
-     */
     connectedCallback() {
         super.connectedCallback();
         this.validateDependencies();
     }
-    /**
-     * Get common attributes for both button and anchor elements
-     */
     getCommonAttributes() {
         return {
             'data-type': this.type,
@@ -74,39 +105,53 @@ let NrButtonElement = class NrButtonElement extends RippleMixin(KeyboardMixin(Li
             'tabindex': this.disabled ? '-1' : '0'
         };
     }
-    /**
-     * Renders an icon if the hy-icon component is available
-     * @param iconName - The name of the icon to render
-     * @returns TemplateResult or nothing
-     */
-    renderIcon(iconName) {
-        if (!this.isComponentAvailable('hy-icon')) {
-            console.warn(`hy-icon component not found. Icon "${iconName}" will not be displayed. ` +
-                `Please import hy-icon component.`);
+    renderIcon(iconConfig) {
+        if (!this.isComponentAvailable('nr-icon')) {
+            const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;
+            console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${iconName}" will not render. ` +
+                `Ensure the icon component is imported and registered.`);
             return nothing;
         }
-        return html `<hy-icon name=${iconName}></hy-icon>`;
+        // Get appropriate icon size based on button size
+        const getIconSizeForButtonSize = () => {
+            switch (this.size) {
+                case "small" /* ButtonSize.Small */:
+                    return 'small';
+                case "medium" /* ButtonSize.Medium */:
+                    return 'medium';
+                case "large" /* ButtonSize.Large */:
+                    return 'large';
+                default:
+                    return 'medium'; // Default to medium if no size specified
+            }
+        };
+        // Handle simple string input (backward compatibility)
+        if (typeof iconConfig === 'string') {
+            const iconSize = getIconSizeForButtonSize();
+            return html `<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;
+        }
+        // Handle enhanced icon configuration
+        const { name, type = 'solid', size, color, alt } = iconConfig;
+        // Use explicit size if provided, otherwise use size based on button size
+        const resolvedSize = size || getIconSizeForButtonSize();
+        const iconSize = resolvedSize;
+        return html `<nr-icon 
+      name=${name}
+      type=${type}
+      alt=${alt || ''}
+      size=${ifDefined(iconSize)}
+      color=${color || ''}
+    ></nr-icon>`;
     }
-    /**
-     * Handle comprehensive click events with proper event dispatching
-     */
     handleClick(event) {
         if (this.disabled) {
             event.preventDefault();
             return;
         }
-        // Use RippleMixin method
-        this.handleRippleClick(event);
-        // Handle link navigation if it's a link type
-        if (this.isLinkType()) {
-            this.dispatchCustomEvent('link-navigation', {
-                href: this.href,
-                target: this.target,
-                timestamp: Date.now(),
-                originalEvent: event
-            });
+        this.rippleController.handleRippleClick(event);
+        if (this.linkController.isLinkType()) {
+            this.linkController.handleLinkNavigation(event);
         }
-        // Dispatch button event with metadata using EventHandlerMixin
         this.dispatchEventWithMetadata('button-clicked', {
             type: this.type,
             disabled: this.disabled,
@@ -114,16 +159,48 @@ let NrButtonElement = class NrButtonElement extends RippleMixin(KeyboardMixin(Li
             href: this.href || null
         });
     }
-    render() {
+    handleKeydown(event) {
+        this.keyboardController.handleKeydown(event);
+    }
+    /**
+     * Get the resolved left icon from various sources
+     */
+    getResolvedLeftIcon() {
+        var _a, _b;
+        // Priority: iconLeft > icons.left > icon[0]
+        if (this.iconLeft)
+            return this.iconLeft;
+        if ((_a = this.icons) === null || _a === void 0 ? void 0 : _a.left)
+            return this.icons.left;
+        if (((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) > 0)
+            return this.icon[0];
+        return undefined;
+    }
+    /**
+     * Get the resolved right icon from various sources
+     */
+    getResolvedRightIcon() {
         var _a, _b;
-        const elementTag = this.getElementTag(); // From LinkMixin
+        // Priority: iconRight > icons.right > icon[1]
+        if (this.iconRight)
+            return this.iconRight;
+        if ((_a = this.icons) === null || _a === void 0 ? void 0 : _a.right)
+            return this.icons.right;
+        if (((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) === 2)
+            return this.icon[1];
+        return undefined;
+    }
+    render() {
+        const elementTag = this.linkController.getElementTag();
         const commonAttributes = this.getCommonAttributes();
-        const linkAttributes = this.getLinkAttributes(); // From LinkMixin
+        const linkAttributes = this.linkController.getLinkAttributes();
+        const leftIcon = this.getResolvedLeftIcon();
+        const rightIcon = this.getResolvedRightIcon();
         const content = html `
-      <span id="container">
-        ${((_a = this.icon) === null || _a === void 0 ? void 0 : _a.length) ? this.renderIcon(this.icon[0]) : nothing}
+      <span id="container" part="container">
+        ${leftIcon ? this.renderIcon(leftIcon) : nothing}
         <slot id="slot"></slot>
-        ${((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) === 2 ? this.renderIcon(this.icon[1]) : nothing}
+        ${rightIcon ? this.renderIcon(rightIcon) : nothing}
       </span>
     `;
         if (elementTag === 'a') {
@@ -200,6 +277,15 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], NrButtonElement.prototype, "icon", void 0);
+__decorate([
+    property({ type: Object })
+], NrButtonElement.prototype, "iconLeft", void 0);
+__decorate([
+    property({ type: Object })
+], NrButtonElement.prototype, "iconRight", void 0);
+__decorate([
+    property({ type: Object })
+], NrButtonElement.prototype, "icons", void 0);
 __decorate([
     property({ reflect: true })
 ], NrButtonElement.prototype, "iconPosition", void 0);

package/button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ButtonType, ButtonShape, EMPTY_STRING, IconPosition } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { RippleMixin, KeyboardMixin, LinkMixin } from './mixins/index.js';\n\n/**\n * - NuralyUIBaseMixin: Core functionality (theme, dependencies, events)\n * - RippleMixin: Ripple effect handling\n * - KeyboardMixin: Keyboard interaction (Enter/Space activation)\n * - LinkMixin: Link-specific behavior for ButtonType.Link\n */\n@customElement('nr-button')\nexport class NrButtonElement extends RippleMixin(\n  KeyboardMixin(\n    LinkMixin(\n      NuralyUIBaseMixin(LitElement)\n    )\n  )\n) {\n  // Button state properties\n  @property({ type: Boolean })\n  override disabled = false;\n\n  @property({ type: Boolean })\n  loading = false;\n\n  @property({ type: String })\n  size = EMPTY_STRING;\n\n  @property({ type: String })\n  override type: ButtonType = ButtonType.Default;\n\n  @property({ type: String })\n  shape: ButtonShape = ButtonShape.Default;\n\n  @property({ type: Boolean })\n  block = false;\n\n  @property({ type: Boolean })\n  dashed = false;\n\n  // Icon properties\n  @property({ type: Array })\n  icon: string[] = [];\n\n  @property({ reflect: true })\n  iconPosition = IconPosition.Left;\n\n  // Link properties (inherited from LinkMixin)\n  @property({ type: String })\n  override href = EMPTY_STRING;\n\n  @property({ type: String })\n  override target = EMPTY_STRING;\n\n  // Ripple property (inherited from RippleMixin)\n  @property({ type: Boolean })\n  override ripple = true;\n\n  // Accessibility properties\n  @property({ type: String })\n  buttonAriaLabel = EMPTY_STRING;\n\n  @property({ type: String })\n  ariaDescribedBy = EMPTY_STRING;\n\n  @property({ type: String })\n  htmlType = EMPTY_STRING;\n\n  /**\n   * Required components that must be registered for this component to work properly\n   */\n  override requiredComponents = ['hy-icon'];\n\n  /**\n   * Check for required dependencies when component is connected to DOM\n   */\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  /**\n   * Get common attributes for both button and anchor elements\n   */\n  private getCommonAttributes() {\n    return {\n      'data-type': this.type,\n      'data-shape': this.shape,\n      'data-size': this.size || nothing,\n      'data-state': this.loading ? 'loading' : nothing,\n      'data-theme': this.currentTheme,\n      'data-block': this.block ? 'true' : nothing,\n      'class': this.dashed ? 'button-dashed' : '',\n      'aria-disabled': this.disabled ? 'true' : 'false',\n      'aria-label': this.buttonAriaLabel || nothing,\n      'aria-describedby': this.ariaDescribedBy || nothing,\n      'tabindex': this.disabled ? '-1' : '0'\n    };\n  }\n\n  /**\n   * Renders an icon if the hy-icon component is available\n   * @param iconName - The name of the icon to render\n   * @returns TemplateResult or nothing\n   */\n  private renderIcon(iconName: string) {\n    if (!this.isComponentAvailable('hy-icon')) {\n      console.warn(\n        `hy-icon component not found. Icon \"${iconName}\" will not be displayed. ` +\n        `Please import hy-icon component.`\n      );\n      return nothing;\n    }\n    return html`<hy-icon name=${iconName}></hy-icon>`;\n  }\n\n  /**\n   * Handle comprehensive click events with proper event dispatching\n   */\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // Use RippleMixin method\n    this.handleRippleClick(event);\n    \n    // Handle link navigation if it's a link type\n    if (this.isLinkType()) {\n      this.dispatchCustomEvent('link-navigation', {\n        href: this.href,\n        target: this.target,\n        timestamp: Date.now(),\n        originalEvent: event\n      });\n    }\n    \n    // Dispatch button event with metadata using EventHandlerMixin\n    this.dispatchEventWithMetadata('button-clicked', {\n      type: this.type,\n      disabled: this.disabled,\n      loading: this.loading,\n      href: this.href || null\n    });\n  }\n\n  override render() {\n    const elementTag = this.getElementTag(); // From LinkMixin\n    const commonAttributes = this.getCommonAttributes();\n    const linkAttributes = this.getLinkAttributes(); // From LinkMixin\n    \n    const content = html`\n      <span id=\"container\">\n        ${this.icon?.length ? this.renderIcon(this.icon[0]) : nothing}\n        <slot id=\"slot\"></slot>\n        ${this.icon?.length === 2 ? this.renderIcon(this.icon[1]) : nothing}\n      </span>\n    `;\n    \n    if (elementTag === 'a') {\n      return html`\n        <a\n          href=\"${linkAttributes.href}\"\n          target=\"${linkAttributes.target || nothing}\"\n          rel=\"${linkAttributes.rel || nothing}\"\n          role=\"${linkAttributes.role}\"\n          data-type=\"${commonAttributes['data-type']}\"\n          data-shape=\"${commonAttributes['data-shape']}\"\n          data-size=\"${commonAttributes['data-size']}\"\n          data-state=\"${commonAttributes['data-state']}\"\n          data-theme=\"${commonAttributes['data-theme']}\"\n          data-block=\"${commonAttributes['data-block']}\"\n          class=\"${commonAttributes.class}\"\n          aria-disabled=\"${this.disabled}\"\n          aria-label=\"${this.buttonAriaLabel || nothing}\"\n          aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n          tabindex=\"${this.disabled ? -1 : 0}\"\n          @click=\"${this.handleClick}\"\n          @keydown=\"${this.handleKeydown}\"\n        >\n          ${content}\n        </a>\n      `;\n    }\n    \n    return html`\n      <button\n        ?disabled=\"${this.disabled}\"\n        type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n        role=\"${linkAttributes.role}\"\n        data-type=\"${commonAttributes['data-type']}\"\n        data-shape=\"${commonAttributes['data-shape']}\"\n        data-size=\"${commonAttributes['data-size']}\" \n        data-state=\"${commonAttributes['data-state']}\"\n        data-theme=\"${commonAttributes['data-theme']}\"\n        data-block=\"${commonAttributes['data-block']}\"\n        class=\"${commonAttributes.class}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-label=\"${this.buttonAriaLabel || nothing}\"\n        aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        @click=\"${this.handleClick}\"\n        @keydown=\"${this.handleKeydown}\"\n      >\n        ${content}\n      </button>\n    `;\n  }\n  static override styles = styles;\n}\n"]}
+{"version":3,"file":"button.component.js","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonType, ButtonSize, ButtonShape, EMPTY_STRING, IconPosition, ButtonIcons, ButtonIcon, ButtonIconsConfig } from './button.types.js';\nimport { styles } from './button.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import icon component\nimport '../icon/icon.component.js';\n\n// Import controllers\nimport {\n    ButtonRippleController,\n    ButtonKeyboardController,\n    ButtonLinkController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { ButtonHost } from './interfaces/index.js';\n\n/**\n * Versatile button component with multiple variants, loading states, and enhanced icon support.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-button type=\"primary\">Click me</nr-button>\n * \n * <!-- Array-based icons (original API) -->\n * <nr-button type=\"primary\" .icon=${['add']}>Add Item</nr-button>\n * <nr-button type=\"primary\" .icon=${['home', 'arrow-right']}>Home</nr-button>\n * \n * <!-- Separate icon properties (new API) -->\n * <nr-button type=\"primary\" iconLeft=\"home\" iconRight=\"arrow-right\">Navigate</nr-button>\n * <nr-button type=\"primary\" .iconLeft=${{name: 'home', color: 'blue'}}>Enhanced</nr-button>\n * \n * <!-- Object-based icons (new API) -->\n * <nr-button type=\"primary\" .icons=${{left: 'home', right: 'arrow-right'}}>Navigate</nr-button>\n * \n * <!-- Loading state -->\n * <nr-button loading>Processing...</nr-button>\n * ```\n * \n * @fires button-clicked - Button clicked\n * @fires link-navigation - Link navigation\n * \n * @slot default - Button text content\n */\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) implements ButtonHost {\n  static override styles = styles;\n  /** Disables the button */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Shows loading spinner */\n  @property({ type: Boolean })\n  loading = false;\n\n  /** Button size (small, medium, large) */\n  @property({ type: String })\n  size: ButtonSize | '' = EMPTY_STRING;\n\n  /** Button type (default, primary, secondary, danger, ghost, link) */\n  @property({ type: String })\n  type: ButtonType = ButtonType.Default;\n\n  /** Button shape (default, circle, round) */\n  @property({ type: String })\n  shape: ButtonShape = ButtonShape.Default;\n\n  /** Makes button full width */\n  @property({ type: Boolean })\n  block = false;\n\n  /** Applies dashed border */\n  @property({ type: Boolean })\n  dashed = false;\n\n  /** Icon configuration (supports strings or enhanced config objects) */\n  @property({ type: Array })\n  icon: ButtonIcons = [];\n\n  /** Left icon (alternative to icon array) */\n  @property({ type: Object })\n  iconLeft?: ButtonIcon;\n\n  /** Right icon (alternative to icon array) */\n  @property({ type: Object })\n  iconRight?: ButtonIcon;\n\n  /** Icon configuration object (alternative to icon array) */\n  @property({ type: Object })\n  icons?: ButtonIconsConfig;\n\n  /** Icon position relative to text */\n  @property({ reflect: true })\n  iconPosition: IconPosition = IconPosition.Left;\n\n  /** URL for link-type buttons */\n  @property({ type: String })\n  href = EMPTY_STRING;\n\n  /** Target attribute for links */\n  @property({ type: String })\n  target = EMPTY_STRING;\n\n  /** Enables ripple effect */\n  @property({ type: Boolean })\n  ripple = true;\n\n  /** Custom aria-label */\n  @property({ type: String })\n  buttonAriaLabel = EMPTY_STRING;\n\n  /** References to descriptive elements */\n  @property({ type: String })\n  ariaDescribedBy = EMPTY_STRING;\n\n  /** HTML button type */\n  @property({ type: String })\n  htmlType = EMPTY_STRING;\n\n  override requiredComponents = ['nr-icon'];\n\n  // Controllers\n  private rippleController = new ButtonRippleController(this);\n  private keyboardController = new ButtonKeyboardController(this);\n  private linkController = new ButtonLinkController(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  private getCommonAttributes() {\n    return {\n      'data-type': this.type,\n      'data-shape': this.shape,\n      'data-size': this.size || nothing,\n      'data-state': this.loading ? 'loading' : nothing,\n      'data-theme': this.currentTheme,\n      'data-block': this.block ? 'true' : nothing,\n      'class': this.dashed ? 'button-dashed' : '',\n      'aria-disabled': this.disabled ? 'true' : 'false',\n      'aria-label': this.buttonAriaLabel || nothing,\n      'aria-describedby': this.ariaDescribedBy || nothing,\n      'tabindex': this.disabled ? '-1' : '0'\n    };\n  }\n\n  private renderIcon(iconConfig: ButtonIcon) {\n    if (!this.isComponentAvailable('nr-icon')) {\n      const iconName = typeof iconConfig === 'string' ? iconConfig : iconConfig.name;\n      console.warn(\n        `[nr-button] Icon component 'nr-icon' not available. Icon \"${iconName}\" will not render. ` +\n        `Ensure the icon component is imported and registered.`\n      );\n      return nothing;\n    }\n\n    // Get appropriate icon size based on button size\n    const getIconSizeForButtonSize = (): 'small' | 'medium' | 'large' | undefined => {\n      switch (this.size) {\n        case ButtonSize.Small:\n          return 'small';\n        case ButtonSize.Medium:\n          return 'medium';\n        case ButtonSize.Large:\n          return 'large';\n        default:\n          return 'medium'; // Default to medium if no size specified\n      }\n    };\n\n    // Handle simple string input (backward compatibility)\n    if (typeof iconConfig === 'string') {\n      const iconSize = getIconSizeForButtonSize();\n      return html`<nr-icon name=${iconConfig} size=${ifDefined(iconSize)}></nr-icon>`;\n    }\n\n    // Handle enhanced icon configuration\n    const {\n      name,\n      type = 'solid',\n      size,\n      color,\n      alt\n    } = iconConfig;\n\n    // Use explicit size if provided, otherwise use size based on button size\n    const resolvedSize = size || getIconSizeForButtonSize();\n    const iconSize = resolvedSize as 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | undefined;\n\n    return html`<nr-icon \n      name=${name}\n      type=${type}\n      alt=${alt || ''}\n      size=${ifDefined(iconSize)}\n      color=${color || ''}\n    ></nr-icon>`;\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    this.rippleController.handleRippleClick(event);\n    \n    if (this.linkController.isLinkType()) {\n      this.linkController.handleLinkNavigation(event);\n    }\n    \n    this.dispatchEventWithMetadata('button-clicked', {\n      type: this.type,\n      disabled: this.disabled,\n      loading: this.loading,\n      href: this.href || null\n    });\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    this.keyboardController.handleKeydown(event);\n  }\n\n  /**\n   * Get the resolved left icon from various sources\n   */\n  private getResolvedLeftIcon(): ButtonIcon | undefined {\n    // Priority: iconLeft > icons.left > icon[0]\n    if (this.iconLeft) return this.iconLeft;\n    if (this.icons?.left) return this.icons.left;\n    if (this.icon?.length > 0) return this.icon[0];\n    return undefined;\n  }\n\n  /**\n   * Get the resolved right icon from various sources\n   */\n  private getResolvedRightIcon(): ButtonIcon | undefined {\n    // Priority: iconRight > icons.right > icon[1]\n    if (this.iconRight) return this.iconRight;\n    if (this.icons?.right) return this.icons.right;\n    if (this.icon?.length === 2) return this.icon[1];\n    return undefined;\n  }\n\n  override render() {\n    const elementTag = this.linkController.getElementTag();\n    const commonAttributes = this.getCommonAttributes();\n    const linkAttributes = this.linkController.getLinkAttributes();\n    \n    const leftIcon = this.getResolvedLeftIcon();\n    const rightIcon = this.getResolvedRightIcon();\n    \n    const content = html`\n      <span id=\"container\" part=\"container\">\n        ${leftIcon ? this.renderIcon(leftIcon) : nothing}\n        <slot id=\"slot\"></slot>\n        ${rightIcon ? this.renderIcon(rightIcon) : nothing}\n      </span>\n    `;\n    if (elementTag === 'a') {\n      return html`\n        <a\n          href=\"${linkAttributes.href}\"\n          target=\"${linkAttributes.target || nothing}\"\n          rel=\"${linkAttributes.rel || nothing}\"\n          role=\"${linkAttributes.role}\"\n          data-type=\"${commonAttributes['data-type']}\"\n          data-shape=\"${commonAttributes['data-shape']}\"\n          data-size=\"${commonAttributes['data-size']}\"\n          data-state=\"${commonAttributes['data-state']}\"\n          data-theme=\"${commonAttributes['data-theme']}\"\n          data-block=\"${commonAttributes['data-block']}\"\n          class=\"${commonAttributes.class}\"\n          aria-disabled=\"${this.disabled}\"\n          aria-label=\"${this.buttonAriaLabel || nothing}\"\n          aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n          tabindex=\"${this.disabled ? -1 : 0}\"\n          @click=\"${this.handleClick}\"\n          @keydown=\"${this.handleKeydown}\"\n        >\n          ${content}\n        </a>\n      `;\n    }\n    \n    return html`\n      <button\n        ?disabled=\"${this.disabled}\"\n        type=\"${(this.htmlType || 'button') as 'button' | 'submit' | 'reset'}\"\n        role=\"${linkAttributes.role}\"\n        data-type=\"${commonAttributes['data-type']}\"\n        data-shape=\"${commonAttributes['data-shape']}\"\n        data-size=\"${commonAttributes['data-size']}\" \n        data-state=\"${commonAttributes['data-state']}\"\n        data-theme=\"${commonAttributes['data-theme']}\"\n        data-block=\"${commonAttributes['data-block']}\"\n        class=\"${commonAttributes.class}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-label=\"${this.buttonAriaLabel || nothing}\"\n        aria-describedby=\"${this.ariaDescribedBy || nothing}\"\n        tabindex=\"${this.disabled ? -1 : 0}\"\n        @click=\"${this.handleClick}\"\n        @keydown=\"${this.handleKeydown}\"\n      >\n        ${content}\n      </button>\n    `;\n  }\n}\n"]}

package/button.style.d.ts

@@ -1,19 +1,10 @@
 /**
- * Exported styles for the nr-button component
+ * Button component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
  *
- * @description
- * This export provides the complete styling system for the button component,
- * including all variants, states, sizes, theme support, and CSS custom properties.
- *
- * @usage
- * Import and use in the component's styles property:
- * ```typescript
- * import { styles } from './nr-button.style.ts';
- *
- * @Component({
- *   styles: styles
- * })
- * ```
+ * This file contains all the styling for the nr-button component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
  */
-export declare const styles: import("lit").CSSResult[];
+export declare const buttonStyles: import("lit").CSSResult;
+export declare const styles: import("lit").CSSResult;
 //# sourceMappingURL=button.style.d.ts.map