@nuralyui/button 0.0.12 → 0.0.14

package/button.component.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * 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;
+/**
+ * - NuralyUIBaseMixin: Core functionality (theme, dependencies, events)
+ * - RippleMixin: Ripple effect handling
+ * - KeyboardMixin: Keyboard interaction (Enter/Space activation)
+ * - LinkMixin: Link-specific behavior for ButtonType.Link
+ */
+export declare class NrButtonElement extends NrButtonElement_base {
+    disabled: boolean;
+    loading: boolean;
+    size: string;
+    type: ButtonType;
+    shape: ButtonShape;
+    block: boolean;
+    dashed: boolean;
+    icon: string[];
+    iconPosition: IconPosition;
+    href: string;
+    target: string;
+    ripple: boolean;
+    buttonAriaLabel: string;
+    ariaDescribedBy: string;
+    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
+     */
+    connectedCallback(): void;
+    /**
+     * Get common attributes for both button and anchor elements
+     */
+    private getCommonAttributes;
+    /**
+     * Renders an icon if the hy-icon component is available
+     * @param iconName - The name of the icon to render
+     * @returns TemplateResult or nothing
+     */
+    private renderIcon;
+    /**
+     * Handle comprehensive click events with proper event dispatching
+     */
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export {};
+//# sourceMappingURL=button.component.d.ts.map

package/button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAgB,YAAY,EAAE,MAAM,mBAAmB,CAAC;;AAKxF;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,oBAMpC;IAGU,QAAQ,UAAS;IAG1B,OAAO,UAAS;IAGhB,IAAI,SAAgB;IAGX,IAAI,EAAE,UAAU,CAAsB;IAG/C,KAAK,EAAE,WAAW,CAAuB;IAGzC,KAAK,UAAS;IAGd,MAAM,UAAS;IAIf,IAAI,EAAE,MAAM,EAAE,CAAM;IAGpB,YAAY,eAAqB;IAIxB,IAAI,SAAgB;IAGpB,MAAM,SAAgB;IAItB,MAAM,UAAQ;IAIvB,eAAe,SAAgB;IAG/B,eAAe,SAAgB;IAG/B,QAAQ,SAAgB;IAExB;;OAEG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAK1B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAgB3B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAWlB;;OAEG;IACH,OAAO,CAAC,WAAW;IA4BV,MAAM;IA8Df,OAAgB,MAAM,4BAAU;CACjC"}

package/button.component.js

@@ -0,0 +1,228 @@
+/**
+ * @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 { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.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';
+/**
+ * - NuralyUIBaseMixin: Core functionality (theme, dependencies, events)
+ * - RippleMixin: Ripple effect handling
+ * - KeyboardMixin: Keyboard interaction (Enter/Space activation)
+ * - LinkMixin: Link-specific behavior for ButtonType.Link
+ */
+let NrButtonElement = class NrButtonElement extends RippleMixin(KeyboardMixin(LinkMixin(NuralyUIBaseMixin(LitElement)))) {
+    constructor() {
+        super(...arguments);
+        // Button state properties
+        this.disabled = false;
+        this.loading = false;
+        this.size = EMPTY_STRING;
+        this.type = "default" /* ButtonType.Default */;
+        this.shape = "default" /* ButtonShape.Default */;
+        this.block = false;
+        this.dashed = false;
+        // Icon properties
+        this.icon = [];
+        this.iconPosition = "left" /* IconPosition.Left */;
+        // Link properties (inherited from LinkMixin)
+        this.href = EMPTY_STRING;
+        this.target = EMPTY_STRING;
+        // Ripple property (inherited from RippleMixin)
+        this.ripple = true;
+        // Accessibility properties
+        this.buttonAriaLabel = EMPTY_STRING;
+        this.ariaDescribedBy = EMPTY_STRING;
+        this.htmlType = EMPTY_STRING;
+        /**
+         * Required components that must be registered for this component to work properly
+         */
+        this.requiredComponents = ['hy-icon'];
+    }
+    /**
+     * 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,
+            'data-shape': this.shape,
+            'data-size': this.size || nothing,
+            'data-state': this.loading ? 'loading' : nothing,
+            'data-theme': this.currentTheme,
+            'data-block': this.block ? 'true' : nothing,
+            'class': this.dashed ? 'button-dashed' : '',
+            'aria-disabled': this.disabled ? 'true' : 'false',
+            'aria-label': this.buttonAriaLabel || nothing,
+            'aria-describedby': this.ariaDescribedBy || nothing,
+            '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.`);
+            return nothing;
+        }
+        return html `<hy-icon name=${iconName}></hy-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
+            });
+        }
+        // Dispatch button event with metadata using EventHandlerMixin
+        this.dispatchEventWithMetadata('button-clicked', {
+            type: this.type,
+            disabled: this.disabled,
+            loading: this.loading,
+            href: this.href || null
+        });
+    }
+    render() {
+        var _a, _b;
+        const elementTag = this.getElementTag(); // From LinkMixin
+        const commonAttributes = this.getCommonAttributes();
+        const linkAttributes = this.getLinkAttributes(); // From LinkMixin
+        const content = html `
+      <span id="container">
+        ${((_a = this.icon) === null || _a === void 0 ? void 0 : _a.length) ? this.renderIcon(this.icon[0]) : nothing}
+        <slot id="slot"></slot>
+        ${((_b = this.icon) === null || _b === void 0 ? void 0 : _b.length) === 2 ? this.renderIcon(this.icon[1]) : nothing}
+      </span>
+    `;
+        if (elementTag === 'a') {
+            return html `
+        <a
+          href="${linkAttributes.href}"
+          target="${linkAttributes.target || nothing}"
+          rel="${linkAttributes.rel || nothing}"
+          role="${linkAttributes.role}"
+          data-type="${commonAttributes['data-type']}"
+          data-shape="${commonAttributes['data-shape']}"
+          data-size="${commonAttributes['data-size']}"
+          data-state="${commonAttributes['data-state']}"
+          data-theme="${commonAttributes['data-theme']}"
+          data-block="${commonAttributes['data-block']}"
+          class="${commonAttributes.class}"
+          aria-disabled="${this.disabled}"
+          aria-label="${this.buttonAriaLabel || nothing}"
+          aria-describedby="${this.ariaDescribedBy || nothing}"
+          tabindex="${this.disabled ? -1 : 0}"
+          @click="${this.handleClick}"
+          @keydown="${this.handleKeydown}"
+        >
+          ${content}
+        </a>
+      `;
+        }
+        return html `
+      <button
+        ?disabled="${this.disabled}"
+        type="${(this.htmlType || 'button')}"
+        role="${linkAttributes.role}"
+        data-type="${commonAttributes['data-type']}"
+        data-shape="${commonAttributes['data-shape']}"
+        data-size="${commonAttributes['data-size']}" 
+        data-state="${commonAttributes['data-state']}"
+        data-theme="${commonAttributes['data-theme']}"
+        data-block="${commonAttributes['data-block']}"
+        class="${commonAttributes.class}"
+        aria-disabled="${this.disabled}"
+        aria-label="${this.buttonAriaLabel || nothing}"
+        aria-describedby="${this.ariaDescribedBy || nothing}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @click="${this.handleClick}"
+        @keydown="${this.handleKeydown}"
+      >
+        ${content}
+      </button>
+    `;
+    }
+};
+NrButtonElement.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "block", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "dashed", void 0);
+__decorate([
+    property({ type: Array })
+], NrButtonElement.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true })
+], NrButtonElement.prototype, "iconPosition", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrButtonElement.prototype, "ripple", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "buttonAriaLabel", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: String })
+], NrButtonElement.prototype, "htmlType", void 0);
+NrButtonElement = __decorate([
+    customElement('nr-button')
+], NrButtonElement);
+export { NrButtonElement };
+//# sourceMappingURL=button.component.js.map

package/button.component.js.map

@@ -0,0 +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"]}

package/{nr-button.style.d.ts → button.style.d.ts}

@@ -16,4 +16,4 @@
  * ```
  */
 export declare const styles: import("lit").CSSResult[];
-//# sourceMappingURL=nr-button.style.d.ts.map
+//# sourceMappingURL=button.style.d.ts.map

package/button.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.style.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.style.ts"],"names":[],"mappings":"AA4mBA;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,2BAAkC,CAAC"}

package/{nr-button.style.js → button.style.js}

@@ -1,5 +1,5 @@
 import { css } from 'lit';
-import { buttonVariables } from './nr-button.style.variables.js';
+import { buttonVariables } from './button.style.variables.js';
 /**
  * Button component styles for the Hybrid UI Library
  *
@@ -82,6 +82,10 @@ const buttonStyles = css `
     padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
     padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));
     font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));
+
+    /* Positioning for ripple effect */
+    position: relative;
+    overflow: hidden;
   }
   
   /* Icon styling within button - inherits text color and size */
@@ -359,6 +363,113 @@ const buttonStyles = css `
     border-style: dashed;
   }
 
+  /* ========================================
+   * NEW BUTTON TYPES
+   * ======================================== */
+
+  /* TEXT BUTTON VARIANT */
+  button[data-type='text'] {
+    background-color: var(--hybrid-button-text-background-color, var(--hybrid-button-local-text-background-color, transparent));
+    color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));
+    border: none;
+    box-shadow: none;
+  }
+
+  button[data-type='text'] hy-icon {
+    --hybrid-icon-color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));
+  }
+
+  button[data-type='text']:hover:not(:disabled) {
+    background-color: var(--hybrid-button-text-hover-background-color, var(--hybrid-button-local-text-hover-background-color, rgba(24, 144, 255, 0.06)));
+    color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));
+  }
+
+  button[data-type='text']:hover:not(:disabled) hy-icon {
+    --hybrid-icon-color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));
+  }
+
+  button[data-type='text']:active:not(:disabled) {
+    background-color: var(--hybrid-button-text-active-background-color, var(--hybrid-button-local-text-active-background-color, rgba(24, 144, 255, 0.15)));
+    color: var(--hybrid-button-text-active-text-color, var(--hybrid-button-local-text-active-text-color, #096dd9));
+  }
+
+  button[data-type='text']:disabled {
+    background-color: transparent;
+    color: var(--hybrid-button-text-disabled-text-color, var(--hybrid-button-local-text-disabled-text-color, rgba(0, 0, 0, 0.25)));
+    border: none;
+  }
+
+  /* LINK BUTTON VARIANT */
+  a[data-type='link'], button[data-type='link'] {
+    background-color: transparent;
+    color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));
+    border: none;
+    box-shadow: none;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  a[data-type='link'] hy-icon, button[data-type='link'] hy-icon {
+    --hybrid-icon-color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));
+  }
+
+  a[data-type='link']:hover, button[data-type='link']:hover:not(:disabled) {
+    color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));
+  }
+
+  a[data-type='link']:hover hy-icon, button[data-type='link']:hover:not(:disabled) hy-icon {
+    --hybrid-icon-color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));
+  }
+
+  a[data-type='link']:active, button[data-type='link']:active:not(:disabled) {
+    color: var(--hybrid-button-link-active-text-color, var(--hybrid-button-local-link-active-text-color, #096dd9));
+  }
+
+  button[data-type='link']:disabled {
+    color: var(--hybrid-button-link-disabled-text-color, var(--hybrid-button-local-link-disabled-text-color, rgba(0, 0, 0, 0.25)));
+    text-decoration: none;
+    cursor: not-allowed;
+  }
+
+  /* ========================================
+   * SHAPE VARIANTS
+   * ======================================== */
+
+  /* Circle button shape */
+  button[data-shape='circle'], a[data-shape='circle'] {
+    border-radius: 50%;
+    width: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));
+    height: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  button[data-shape='circle'][data-size='small'], a[data-shape='circle'][data-size='small'] {
+    width: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));
+    height: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));
+  }
+
+  button[data-shape='circle'][data-size='large'], a[data-shape='circle'][data-size='large'] {
+    width: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));
+    height: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));
+  }
+
+  /* Round button shape */
+  button[data-shape='round'], a[data-shape='round'] {
+    border-radius: var(--hybrid-button-round-border-radius, var(--hybrid-button-local-round-border-radius, 16px));
+  }
+
+  /* ========================================
+   * BLOCK BUTTON
+   * ======================================== */
+
+  button[data-block='true'], a[data-block='true'] {
+    width: 100%;
+    display: block;
+  }
+
   /* ========================================
    * VARIANT STYLES
    * ======================================== */
@@ -436,6 +547,73 @@ const buttonStyles = css `
     --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
     --hybrid-button-local-danger-disabled-border-color: #6f6f6f;
     --hybrid-button-local-danger-dashed-border-color: #ffffff;
+
+    /* Text button dark theme overrides */
+    --hybrid-button-local-text-background-color: transparent;
+    --hybrid-button-local-text-text-color: #ffffff;
+    --hybrid-button-local-text-border-color: transparent;
+    --hybrid-button-local-text-hover-background-color: rgba(255, 255, 255, 0.1);
+    --hybrid-button-local-text-hover-text-color: #ffffff;
+    --hybrid-button-local-text-hover-border-color: transparent;
+    --hybrid-button-local-text-active-background-color: rgba(255, 255, 255, 0.15);
+    --hybrid-button-local-text-active-text-color: #ffffff;
+    --hybrid-button-local-text-active-border-color: transparent;
+    --hybrid-button-local-text-disabled-background-color: transparent;
+    --hybrid-button-local-text-disabled-text-color: #6f6f6f;
+    --hybrid-button-local-text-disabled-border-color: transparent;
+
+    /* Link button dark theme overrides */
+    --hybrid-button-local-link-background-color: transparent;
+    --hybrid-button-local-link-text-color: #78a9ff;
+    --hybrid-button-local-link-border-color: transparent;
+    --hybrid-button-local-link-hover-background-color: transparent;
+    --hybrid-button-local-link-hover-text-color: #a6c8ff;
+    --hybrid-button-local-link-hover-border-color: transparent;
+    --hybrid-button-local-link-active-background-color: transparent;
+    --hybrid-button-local-link-active-text-color: #a6c8ff;
+    --hybrid-button-local-link-active-border-color: transparent;
+    --hybrid-button-local-link-disabled-background-color: transparent;
+    --hybrid-button-local-link-disabled-text-color: #6f6f6f;
+    --hybrid-button-local-link-disabled-border-color: transparent;
+  }
+
+  /* ========================================
+   * RIPPLE EFFECT STYLES
+   * ======================================== */
+
+  /* Ripple effect animation */
+  .ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.4);
+    transform: scale(0);
+    animation: ripple-animation 0.6s linear;
+    pointer-events: none;
+  }
+
+  /* Darker ripple for light buttons */
+  button[data-type='default'] .ripple,
+  button[data-type='ghost'] .ripple {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  /* Lighter ripple for dark buttons */
+  button[data-type='primary'] .ripple,
+  button[data-type='danger'] .ripple {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+
+  /* Ripple animation keyframes */
+  @keyframes ripple-animation {
+    to {
+      transform: scale(4);
+      opacity: 0;
+    }
+  }
+
+  /* Disable ripple when component is disabled */
+  button:disabled .ripple {
+    display: none;
   }
 `;
 /**
@@ -456,4 +634,4 @@ const buttonStyles = css `
  * ```
  */
 export const styles = [buttonStyles, buttonVariables];
-//# sourceMappingURL=nr-button.style.js.map
+//# sourceMappingURL=button.style.js.map

package/button.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../../src/components/button/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE9D;;;;;;;;;;;;;;GAcG;AACH,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwlBvB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\nimport { buttonVariables } from './button.style.variables.js';\n\n/**\n * Button component styles for the Hybrid UI Library\n * \n * This file contains all the styling for the nr-button component, including:\n * - Base button styles with CSS custom properties for theming\n * - Multiple button variants (primary, secondary, ghost, danger)\n * - Size variations (small, large)\n * - State styles (hover, active, disabled, loading)\n * - Dark theme support\n * - Icon positioning and styling\n * - Responsive design considerations\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of button appearance.\n */\nconst buttonStyles = css`\n  /* Container for button content and icon positioning */\n  #container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  /* Icon positioned to the right of text when iconPosition='right' */\n  :host([iconPosition='right']) #container {\n    flex-direction: row-reverse;\n  }\n\n  /* Icon styling within button */\n  hy-icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 2px;\n  }\n\n  /* \n   * Base button element styles\n   * Uses CSS custom properties with fallbacks for comprehensive theming support\n   * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}\n   */\n\n  /* \n   * Base button element styles\n   * Uses CSS custom properties with fallbacks for comprehensive theming support\n   * Properties follow the pattern: --hybrid-button-{property}, --hybrid-button-local-{property}\n   */\n  button {\n    /* Dimensions */\n    height: var(--hybrid-button-height,var(--hybrid-button-local-height));\n    width: var(--hybrid-button-width,var(--hybrid-button-local-width));\n    \n    /* Border properties - individual sides for granular control */\n    border-left: var(--hybrid-button-border-left,var(--hybrid-button-local-border-left));\n    border-right: var(--hybrid-button-border-right,var(--hybrid-button-local-border-right));\n    border-top: var(--hybrid-button-border-top,var(--hybrid-button-local-border-top));\n    border-bottom: var(--hybrid-button-border-bottom,var(--hybrid-button-local-border-bottom));\n    \n    /* Border radius - individual corners for design flexibility */\n    border-top-left-radius:var(--hybrid-button-border-top-left-radius,var(--hybrid-button-local-border-top-left-radius)) ;\n    border-top-right-radius: var(--hybrid-button-border-top-right-radius,var(--hybrid-button-local-border-top-right-radius));\n    border-bottom-left-radius: var(--hybrid-button-border-bottom-left-radius,var(--hybrid-button-local-border-bottom-left-radius));\n    border-bottom-right-radius: var(--hybrid-button-border-bottom-right-radius,var(--hybrid-button-local-border-bottom-right-radius));\n    \n    /* Colors */\n    background-color: var(--hybrid-button-background-color,var(--hybrid-button-local-background-color));\n    color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n    \n    /* Typography */\n    font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n    font-weight: var(--hybrid-button-font-weight,var(--hybrid-button-local-font-weight));\n    text-transform: var(--hybrid-button-text-transform,var(--hybrid-button-local-text-transform));\n    \n    /* Spacing */\n    padding-top: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n    margin-top: var(--hybrid-button-margin-y,var(--hybrid-button-local-margin-y));\n    padding-bottom: var(--hybrid-button-padding-y,var(--hybrid-button-local-padding-y));\n    padding-right: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n    padding-left: var(--hybrid-button-padding-x,var(--hybrid-button-local-padding-x));\n    font-size: var(--hybrid-button-font-size,var(--hybrid-button-local-font-size));\n\n    /* Positioning for ripple effect */\n    position: relative;\n    overflow: hidden;\n  }\n  \n  /* Icon styling within button - inherits text color and size */\n  button hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-text-color,var(--hybrid-button-local-text-color));\n    --hybrid-icon-width: var(--hybrid-button-icon-width,var(--hybrid-button-local-icon-width));\n    --hybrid-icon-height: var(--hybrid-button-icon-height,var(--hybrid-button-local-icon-height));\n  }\n\n  /* \n   * Hover state styles\n   * Applied when button is hovered but not disabled\n   */\n\n  /* \n   * Hover state styles\n   * Applied when button is hovered but not disabled\n   */\n  button:hover:not(:disabled) {\n    cursor: pointer;\n    border-color: var(--hybrid-button-hover-border-color,var(--hybrid-button-local-hover-border-color));\n    background-color: var(--hybrid-button-hover-background-color,var(--hybrid-button-local-hover-background-color));\n    color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n  }\n  \n  /* Icon color on hover */\n  button:hover:not(:disabled) hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-hover-color,var(--hybrid-button-local-hover-color));\n  }\n\n  /* \n   * Active state styles\n   * Applied when button is being clicked/pressed but not disabled\n   */\n  button:active:not(:disabled) {\n    outline: none;\n    border-color: var(--hybrid-button-active-border-color,var(--hybrid-button-local-active-border-color));\n    color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n  }\n  \n  /* Icon color on active state */\n  button:active:not(:disabled) hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-active-color,var(--hybrid-button-local-active-color));\n  }\n\n  /* \n   * Disabled state styles\n   * Applied when button is disabled - removes interactivity and applies muted colors\n   */\n\n  /* \n   * Disabled state styles\n   * Applied when button is disabled - removes interactivity and applies muted colors\n   */\n  button:disabled {\n    cursor: auto;\n    background-color: var(--hybrid-button-disabled-background-color,var(--hybrid-button-local-disabled-background-color));\n    color: var(--hybrid-button-disabled-text-color,var(--hybrid-button-local-disabled-text-color));\n    border-color: var(--hybrid-button-disabled-border-color,var(--hybrid-button-local-disabled-border-color));\n  }\n\n  /* ========================================\n   * SIZE VARIATIONS\n   * ======================================== */\n\n  /* Small button size variant */\n\n  /* Small button size variant */\n  button[data-size='small'] {\n    padding-top: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n    padding-bottom: var(--hybrid-small-button-padding-y,var(--hybrid-small-button-local-padding-y));\n    padding-right: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n    padding-left: var(--hybrid-small-button-padding-x,var(--hybrid-small-button-local-padding-x));\n    font-size: var(--hybrid-small-button-font-size,var(--hybrid-small-button-local-font-size));\n  }\n\n  /* Large button size variant */\n  button[data-size='large'] {\n    padding-top: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n    padding-bottom: var(--hybrid-large-button-padding-y,var(--hybrid-large-button-local-padding-y));\n    padding-right: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n    padding-left: var(--hybrid-large-button-padding-x,var(--hybrid-large-button-local-padding-x));\n    font-size: var(--hybrid-large-button-font-size,var(--hybrid-large-button-local-font-size));\n  }\n\n  /* ========================================\n   * BUTTON STATES\n   * ======================================== */\n\n  /* Loading state - reduces opacity to indicate processing */\n  button[data-state='loading'] {\n    opacity: 0.5;\n  }\n\n  /* ========================================\n   * BUTTON TYPE VARIANTS\n   * ======================================== */\n\n  /* DANGER BUTTON VARIANT */\n  /* DANGER BUTTON VARIANT */\n  \n  /* Danger button base styles and icon */\n  button[data-type='danger'] hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n  }\n  button[data-type='danger'] {\n    border-color: var(--hybrid-button-danger-border-color,var(--hybrid-button-local-danger-border-color));\n    background-color: var(--hybrid-button-danger-background-color,var(--hybrid-button-local-danger-background-color));\n    color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n  }\n  \n  /* Danger button with dashed border variant */\n  button[data-type='danger'].button-dashed {\n    border-color: var(--hybrid-button-danger-dashed-border-color,var(--hybrid-button-local-danger-dashed-border-color));\n  }\n  \n  /* Danger button disabled state */\n  button[data-type='danger']:disabled {\n    border-color: var(--hybrid-button-danger-disabled-border-color,var(--hybrid-button-local-danger-disabled-border-color));\n    background-color: var(--hybrid-button-danger-disabled-background-color,var(--hybrid-button-local-danger-disabled-background-color));\n    color: var(--hybrid-button-danger-disabled-text-color,var(--hybrid-button-local-danger-disabled-text-color));\n  }\n\n  /* Danger button hover state */\n  button[data-type='danger']:hover:not(:disabled) {\n    background-color: var(--hybrid-button-danger-hover-background-color,var(--hybrid-button-local-danger-hover-background-color));\n    border-color: var(--hybrid-button-danger-hover-border-color,var(--hybrid-button-local-danger-hover-border-color));\n    color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n  }\n  button[data-type='danger']:hover:not(:disabled) hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-danger-text-color,var(--hybrid-button-local-danger-text-color));\n  }\n\n  /* Danger button active state */\n  button[data-type='danger']:active:not(:disabled) {\n    background-color: var(--hybrid-button-danger-active-background-color,var(--hybrid-button-local-danger-active-background-color));\n    border-color: var(--hybrid-button-danger-active-border-color,var(--hybrid-button-local-danger-active-border-color));\n    outline: var(--hybrid-button-danger-outline,var(--hybrid-button-local-danger-outline));\n    outline-offset: var(--hybrid-button-danger-outline-offset,var(--hybrid-button-local-danger-outline-offset));\n  }\n\n  /* PRIMARY BUTTON VARIANT */\n  /* PRIMARY BUTTON VARIANT */\n  \n  /* Primary button base styles and icon */\n  button[data-type='primary'] hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n  }\n  button[data-type='primary'] {\n    border-color: var(--hybrid-button-primary-border-color,var(--hybrid-button-local-primary-border-color));\n    background-color: var(--hybrid-button-primary-background-color,var(--hybrid-button-local-primary-background-color));\n    color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n  }\n  \n  /* Primary button with dashed border variant */\n  button[data-type='primary'].button-dashed {\n    border-color: var(--hybrid-button-primary-dashed-border-color,var(--hybrid-button-local-primary-dashed-border-color));\n  }\n\n  /* Primary button disabled state */\n  button[data-type='primary']:disabled {\n    border-color: var(--hybrid-button-primary-disabled-border-color,var(--hybrid-button-local-primary-disabled-border-color));\n    background-color: var(--hybrid-button-primary-disabled-background-color,var(--hybrid-button-local-primary-disabled-background-color));\n    color: var(--hybrid-button-primary-disabled-text-color,var(--hybrid-button-local-primary-disabled-text-color));\n  }\n\n  /* Primary button hover state */\n  button[data-type='primary']:hover:not(:disabled) {\n    background-color: var(--hybrid-button-primary-hover-background-color,var(--hybrid-button-local-primary-hover-background-color));\n    border-color: var(--hybrid-button-primary-hover-border-color,var(--hybrid-button-local-primary-hover-border-color));\n    color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n  }\n  button[data-type='primary']:hover:not(:disabled) hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-primary-text-color,var(--hybrid-button-local-primary-text-color));\n  }\n  \n  /* Primary button active state */\n  button[data-type='primary']:active:not(:disabled) {\n    border-color: var(--hybrid-button-primary-active-border-color,var(--hybrid-button-local-primary-active-border-color));\n    background-color: var(--hybrid-button-primary-active-background-color,var(--hybrid-button-local-primary-active-background-color));\n    outline: var(--hybrid-button-primary-outline,var(--hybrid-button-local-primary-outline));\n    outline-offset: var(--hybrid-button-primary-outline-offset,var(--hybrid-button-local-primary-outline-offset));\n  }\n\n  /* GHOST BUTTON VARIANT */\n  /* GHOST BUTTON VARIANT */\n  \n  /* Ghost button base styles and icon */\n  button[data-type='ghost'] hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n  }\n  button[data-type='ghost'] {\n    background-color: var(--hybrid-button-ghost-background-color,var(--hybrid-button-local-ghost-background-color));\n    color: var(--hybrid-button-ghost-text-color,var(--hybrid-button-local-ghost-text-color));\n    border-color: var(--hybrid-button-ghost-border-color,var(--hybrid-button-local-ghost-border-color));\n  }\n  \n  /* Ghost button with dashed border variant */\n  button[data-type='ghost'].button-dashed {\n    border-color: var(--hybrid-button-ghost-dashed-border-color,var(--hybrid-button-local-ghost-dashed-border-color));\n  }\n  \n  /* Ghost button disabled state */\n  button[data-type='ghost']:disabled {\n    background-color: var(--hybrid-button-ghost-disabled-background-color,var(--hybrid-button-local-ghost-disabled-background-color));\n    color: var(--hybrid-button-ghost-disabled-text-color,var(--hybrid-button-local-ghost-disabled-text-color));\n    border-color: var(--hybrid-button-ghost-disabled-border-color,var(--hybrid-button-local-ghost-disabled-border-color));\n  }\n\n  /* Ghost button hover state */\n  button[data-type='ghost']:hover:not(:disabled) {\n    background-color: var(--hybrid-button-ghost-hover-background-color,var(--hybrid-button-local-ghost-hover-background-color));\n    color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n    border-color: var(--hybrid-button-local-ghost-hover-border-color,var(--hybrid-button-local-ghost-hover-border-color));\n  }\n  button[data-type='ghost']:hover:not(:disabled) hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-ghost-hover-text-color,var(--hybrid-button-local-ghost-hover-text-color));\n  }\n  \n  /* Ghost button active state */\n  button[data-type='ghost']:active:not(:disabled) {\n    background-color: var(--hybrid-button-ghost-active-background-color,var(--hybrid-button-local-ghost-active-background-color));\n    border-color: var(--hybrid-button-ghost-active-border-color,var(--hybrid-button-local-ghost-active-border-color));\n  }\n\n  /* SECONDARY BUTTON VARIANT */\n  /* SECONDARY BUTTON VARIANT */\n  \n  /* Secondary button base styles and icon */\n  button[data-type='secondary'] hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n  }\n  button[data-type='secondary'] {\n    background-color: var(--hybrid-button-secondary-background-color,var(--hybrid-button-local-secondary-background-color));\n    color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n    border-color: var(--hybrid-button-secondary-border-color,var(--hybrid-button-local-secondary-border-color));\n  }\n  \n  /* Secondary button with dashed border variant */\n  button[data-type='secondary'].button-dashed {\n    border-color: var(--hybrid-button-secondary-dashed-border-color,var(--hybrid-button-local-secondary-dashed-border-color));\n  }\n  \n  /* Secondary button disabled state */\n  button[data-type='secondary']:disabled {\n    background-color: var(--hybrid-button-secondary-disabled-background-color,var(--hybrid-button-local-secondary-disabled-background-color));\n    color: var(--hybrid-button-secondary-disabled-text-color,var(--hybrid-button-local-secondary-disabled-text-color));\n    border-color: var(--hybrid-button-secondary-disabled-border-color,var(--hybrid-button-local-secondary-disabled-border-color));\n  }\n  \n  /* Secondary button hover state */\n  button[data-type='secondary']:hover:not(:disabled) {\n    background-color: var(--hybrid-button-secondary-hover-background-color,var(--hybrid-button-local-secondary-hover-background-color));\n    color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n    border-color: var(--hybrid-button-secondary-hover-border-color,var(--hybrid-button-local-secondary-hover-border-color));\n  }\n  button[data-type='secondary']:hover:not(:disabled) hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-secondary-text-color,var(--hybrid-button-local-secondary-text-color));\n  }\n\n  /* Secondary button active state */\n  button[data-type='secondary']:active:not(:disabled) {\n    background-color: var(--hybrid-button-secondary-active-background-color,var(--hybrid-button-local-secondary-active-background-color));\n    border-color: var(--hybrid-button-secondary-active-border-color,var(--hybrid-button-local-secondary-active-border-color));\n    outline: var(--hybrid-button-secondary-outline,var(--hybrid-button-local-secondary-outline));\n    outline-offset: var(--hybrid-button-secondary-outline-offset,var(--hybrid-button-local-secondary-outline-offset));\n  }\n\n  /* ========================================\n   * UTILITY CLASSES\n   * ======================================== */\n\n  /* Dashed border style modifier */\n  .button-dashed {\n    border-style: dashed;\n  }\n\n  /* ========================================\n   * NEW BUTTON TYPES\n   * ======================================== */\n\n  /* TEXT BUTTON VARIANT */\n  button[data-type='text'] {\n    background-color: var(--hybrid-button-text-background-color, var(--hybrid-button-local-text-background-color, transparent));\n    color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));\n    border: none;\n    box-shadow: none;\n  }\n\n  button[data-type='text'] hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-text-text-color, var(--hybrid-button-local-text-text-color, #1890ff));\n  }\n\n  button[data-type='text']:hover:not(:disabled) {\n    background-color: var(--hybrid-button-text-hover-background-color, var(--hybrid-button-local-text-hover-background-color, rgba(24, 144, 255, 0.06)));\n    color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));\n  }\n\n  button[data-type='text']:hover:not(:disabled) hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-text-hover-text-color, var(--hybrid-button-local-text-hover-text-color, #40a9ff));\n  }\n\n  button[data-type='text']:active:not(:disabled) {\n    background-color: var(--hybrid-button-text-active-background-color, var(--hybrid-button-local-text-active-background-color, rgba(24, 144, 255, 0.15)));\n    color: var(--hybrid-button-text-active-text-color, var(--hybrid-button-local-text-active-text-color, #096dd9));\n  }\n\n  button[data-type='text']:disabled {\n    background-color: transparent;\n    color: var(--hybrid-button-text-disabled-text-color, var(--hybrid-button-local-text-disabled-text-color, rgba(0, 0, 0, 0.25)));\n    border: none;\n  }\n\n  /* LINK BUTTON VARIANT */\n  a[data-type='link'], button[data-type='link'] {\n    background-color: transparent;\n    color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));\n    border: none;\n    box-shadow: none;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  a[data-type='link'] hy-icon, button[data-type='link'] hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-link-text-color, var(--hybrid-button-local-link-text-color, #1890ff));\n  }\n\n  a[data-type='link']:hover, button[data-type='link']:hover:not(:disabled) {\n    color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));\n  }\n\n  a[data-type='link']:hover hy-icon, button[data-type='link']:hover:not(:disabled) hy-icon {\n    --hybrid-icon-color: var(--hybrid-button-link-hover-text-color, var(--hybrid-button-local-link-hover-text-color, #40a9ff));\n  }\n\n  a[data-type='link']:active, button[data-type='link']:active:not(:disabled) {\n    color: var(--hybrid-button-link-active-text-color, var(--hybrid-button-local-link-active-text-color, #096dd9));\n  }\n\n  button[data-type='link']:disabled {\n    color: var(--hybrid-button-link-disabled-text-color, var(--hybrid-button-local-link-disabled-text-color, rgba(0, 0, 0, 0.25)));\n    text-decoration: none;\n    cursor: not-allowed;\n  }\n\n  /* ========================================\n   * SHAPE VARIANTS\n   * ======================================== */\n\n  /* Circle button shape */\n  button[data-shape='circle'], a[data-shape='circle'] {\n    border-radius: 50%;\n    width: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));\n    height: var(--hybrid-button-circle-size, var(--hybrid-button-local-circle-size, 32px));\n    padding: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  button[data-shape='circle'][data-size='small'], a[data-shape='circle'][data-size='small'] {\n    width: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));\n    height: var(--hybrid-button-circle-size-small, var(--hybrid-button-local-circle-size-small, 24px));\n  }\n\n  button[data-shape='circle'][data-size='large'], a[data-shape='circle'][data-size='large'] {\n    width: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));\n    height: var(--hybrid-button-circle-size-large, var(--hybrid-button-local-circle-size-large, 40px));\n  }\n\n  /* Round button shape */\n  button[data-shape='round'], a[data-shape='round'] {\n    border-radius: var(--hybrid-button-round-border-radius, var(--hybrid-button-local-round-border-radius, 16px));\n  }\n\n  /* ========================================\n   * BLOCK BUTTON\n   * ======================================== */\n\n  button[data-block='true'], a[data-block='true'] {\n    width: 100%;\n    display: block;\n  }\n\n  /* ========================================\n   * VARIANT STYLES\n   * ======================================== */\n\n  /* Primary button variant */\n\n  /* ========================================\n   * DARK THEME OVERRIDES\n   * ======================================== */\n  \n  /**\n   * Dark theme styles using data-theme attribute on button element\n   * These override the light theme defaults when data-theme=\"dark\" is applied\n   */\n  /**\n   * Dark theme styles using data-theme attribute on button element\n   * These override the light theme defaults when data-theme=\"dark\" is applied\n   */\n  button[data-theme=\"dark\"] {\n    /* Default button dark theme overrides */\n    --hybrid-button-local-background-color: #000000;\n    --hybrid-button-local-text-color: #ffffff;\n    --hybrid-button-local-hover-border-color: #6f6f6f;\n    --hybrid-button-local-hover-color: #6f6f6f;\n    --hybrid-button-local-active-border-color: #c6c6c6;\n    --hybrid-button-local-active-color: #c6c6c6;\n    --hybrid-button-local-disabled-background-color: #c6c6c6;\n\n    /* Primary button dark theme overrides */\n    --hybrid-button-local-primary-outline: 1px solid black;\n    --hybrid-button-local-primary-outline-offset: -3px;\n    --hybrid-button-local-primary-active-border-color: #ffffff;\n    --hybrid-button-local-primary-disabled-text-color: #c6c6c6;\n    --hybrid-button-local-primary-disabled-background-color: #8d8d8d;\n    --hybrid-button-local-primary-disabled-border-color: #8d8d8d;\n\n    /* Secondary button dark theme overrides */\n    --hybrid-button-local-secondary-background-color: #6f6f6f;\n    --hybrid-button-local-secondary-border-color: #6f6f6f;\n    --hybrid-button-local-secondary-text-color: #ffffff;\n    --hybrid-button-local-secondary-active-border-color: #ffffff;\n    --hybrid-button-local-secondary-active-background-color: #6f6f6f;\n    --hybrid-button-local-secondary-outline: 1px solid black;\n    --hybrid-button-local-secondary-outline-offset: -3px;\n    --hybrid-button-local-secondary-hover-background-color: #606060;\n    --hybrid-button-local-secondary-hover-border-color: #606060;\n    --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;\n    --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n    --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;\n    --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n    /* Ghost button dark theme overrides */\n    --hybrid-button-local-ghost-background-color: transparent;\n    --hybrid-button-local-ghost-text-color: #78a9ff;\n    --hybrid-button-local-ghost-border-color: transparent;\n    --hybrid-button-local-ghost-active-background-color: transparent;\n    --hybrid-button-local-ghost-active-text-color: #a6c8ff;\n    --hybrid-button-local-ghost-active-border-color: #ffffff;\n    --hybrid-button-local-ghost-hover-background-color: #4c4c4c;\n    --hybrid-button-local-ghost-hover-border-color: #4c4c4c;\n    --hybrid-button-local-ghost-hover-text-color: #a6c8ff;\n    --hybrid-button-local-ghost-disabled-background-color: transparent;\n    --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;\n    --hybrid-button-local-ghost-disabled-border-color: transparent;\n    --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n    /* Danger button dark theme overrides */\n    --hybrid-button-local-danger-outline: 1px solid #000000;\n    --hybrid-button-local-danger-outline-offset: -3px;\n    --hybrid-button-local-danger-hover-background-color: #ba1b23;\n    --hybrid-button-local-danger-hover-border-color: #ba1b23;\n    --hybrid-button-local-danger-active-background-color: #da1e28;\n    --hybrid-button-local-danger-active-border-color: #ffffff;\n    --hybrid-button-local-danger-disabled-background-color: #6f6f6f;\n    --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n    --hybrid-button-local-danger-disabled-border-color: #6f6f6f;\n    --hybrid-button-local-danger-dashed-border-color: #ffffff;\n\n    /* Text button dark theme overrides */\n    --hybrid-button-local-text-background-color: transparent;\n    --hybrid-button-local-text-text-color: #ffffff;\n    --hybrid-button-local-text-border-color: transparent;\n    --hybrid-button-local-text-hover-background-color: rgba(255, 255, 255, 0.1);\n    --hybrid-button-local-text-hover-text-color: #ffffff;\n    --hybrid-button-local-text-hover-border-color: transparent;\n    --hybrid-button-local-text-active-background-color: rgba(255, 255, 255, 0.15);\n    --hybrid-button-local-text-active-text-color: #ffffff;\n    --hybrid-button-local-text-active-border-color: transparent;\n    --hybrid-button-local-text-disabled-background-color: transparent;\n    --hybrid-button-local-text-disabled-text-color: #6f6f6f;\n    --hybrid-button-local-text-disabled-border-color: transparent;\n\n    /* Link button dark theme overrides */\n    --hybrid-button-local-link-background-color: transparent;\n    --hybrid-button-local-link-text-color: #78a9ff;\n    --hybrid-button-local-link-border-color: transparent;\n    --hybrid-button-local-link-hover-background-color: transparent;\n    --hybrid-button-local-link-hover-text-color: #a6c8ff;\n    --hybrid-button-local-link-hover-border-color: transparent;\n    --hybrid-button-local-link-active-background-color: transparent;\n    --hybrid-button-local-link-active-text-color: #a6c8ff;\n    --hybrid-button-local-link-active-border-color: transparent;\n    --hybrid-button-local-link-disabled-background-color: transparent;\n    --hybrid-button-local-link-disabled-text-color: #6f6f6f;\n    --hybrid-button-local-link-disabled-border-color: transparent;\n  }\n\n  /* ========================================\n   * RIPPLE EFFECT STYLES\n   * ======================================== */\n\n  /* Ripple effect animation */\n  .ripple {\n    position: absolute;\n    border-radius: 50%;\n    background-color: rgba(255, 255, 255, 0.4);\n    transform: scale(0);\n    animation: ripple-animation 0.6s linear;\n    pointer-events: none;\n  }\n\n  /* Darker ripple for light buttons */\n  button[data-type='default'] .ripple,\n  button[data-type='ghost'] .ripple {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n\n  /* Lighter ripple for dark buttons */\n  button[data-type='primary'] .ripple,\n  button[data-type='danger'] .ripple {\n    background-color: rgba(255, 255, 255, 0.3);\n  }\n\n  /* Ripple animation keyframes */\n  @keyframes ripple-animation {\n    to {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n\n  /* Disable ripple when component is disabled */\n  button:disabled .ripple {\n    display: none;\n  }\n`;\n\n/**\n * Exported styles for the nr-button component\n * \n * @description\n * This export provides the complete styling system for the button component,\n * including all variants, states, sizes, theme support, and CSS custom properties.\n * \n * @usage\n * Import and use in the component's styles property:\n * ```typescript\n * import { styles } from './nr-button.style.ts';\n * \n * @Component({\n *   styles: styles\n * })\n * ```\n */\nexport const styles = [buttonStyles, buttonVariables];\n"]}

package/{nr-button.style.variables.d.ts → button.style.variables.d.ts}

@@ -8,4 +8,4 @@
  * for both global and local customization of button appearance.
  */
 export declare const buttonVariables: import("lit").CSSResult;
-//# sourceMappingURL=nr-button.style.variables.d.ts.map
+//# sourceMappingURL=button.style.variables.d.ts.map

package/button.style.variables.d.ts.map

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

package/{nr-button.style.variables.js → button.style.variables.js}

@@ -191,4 +191,4 @@ export const buttonVariables = css `
     --hybrid-button-local-danger-dashed-border-color: #ffffff;
   }
 `;
-//# sourceMappingURL=nr-button.style.variables.js.map
+//# sourceMappingURL=button.style.variables.js.map