@nuralyui/button 0.0.12 → 0.0.13

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

@@ -4,16 +4,21 @@
  * SPDX-License-Identifier: MIT
  */
 import { LitElement } from 'lit';
-import { ButtonType, IconPosition } from './nr-button.types.js';
+import { ButtonType, ButtonShape, IconPosition } from './button.types.js';
 declare const NrButtonElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & typeof LitElement;
 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;
     /**
      * Required components that must be registered for this component to work properly
      * Can be overridden by parent implementations
@@ -23,14 +28,35 @@ export declare class NrButtonElement extends NrButtonElement_base {
      * Check for required dependencies when component is connected to DOM
      */
     connectedCallback(): void;
+    /**
+     * Get the appropriate element tag based on button type
+     */
+    private getElementTag;
+    /**
+     * Get attributes for accessibility and functionality
+     */
+    private getElementAttributes;
+    buttonAriaLabel: string;
+    ariaDescribedBy: string;
+    htmlType: string;
     /**
      * 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;
+    /**
+     * Creates ripple effect on button click
+     * @param event - The click event
+     */
+    private createRipple;
+    /**
+     * Handle click events with ripple effect
+     * @param event - The click event
+     */
+    private handleClick;
     render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 export {};
-//# sourceMappingURL=nr-button.component.d.ts.map
+//# 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;;AAIxF,qBACa,eAAgB,SAAQ,oBAA6B;IAEhE,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,IAAI,SAAgB;IAGpB,IAAI,EAAE,UAAU,CAAsB;IAGtC,KAAK,EAAE,WAAW,CAAuB;IAGzC,KAAK,UAAS;IAGd,MAAM,UAAS;IAGf,IAAI,EAAE,MAAM,EAAE,CAAM;IAGpB,YAAY,eAAqB;IAGjC,IAAI,SAAgB;IAGpB,MAAM,SAAgB;IAGtB,MAAM,UAAQ;IAEd;;;OAGG;IACM,kBAAkB,WAAe;IAE1C;;OAEG;IACM,iBAAiB;IAK1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAIrB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAoC5B,eAAe,SAAgB;IAG/B,eAAe,SAAgB;IAG/B,QAAQ,SAAgB;IAExB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAWlB;;;OAGG;IACH,OAAO,CAAC,YAAY;IA2BpB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAIV,MAAM;IAwDf,OAAgB,MAAM,4BAAU;CACjC"}

package/button.component.js

@@ -0,0 +1,240 @@
+/**
+ * @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';
+let NrButtonElement = class NrButtonElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        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;
+        this.icon = [];
+        this.iconPosition = "left" /* IconPosition.Left */;
+        this.href = EMPTY_STRING;
+        this.target = EMPTY_STRING;
+        this.ripple = true;
+        /**
+         * Required components that must be registered for this component to work properly
+         * Can be overridden by parent implementations
+         */
+        this.requiredComponents = ['hy-icon'];
+        this.buttonAriaLabel = EMPTY_STRING;
+        this.ariaDescribedBy = EMPTY_STRING;
+        this.htmlType = EMPTY_STRING;
+    }
+    /**
+     * Check for required dependencies when component is connected to DOM
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.validateDependencies();
+    }
+    /**
+     * Get the appropriate element tag based on button type
+     */
+    getElementTag() {
+        return this.type === "link" /* ButtonType.Link */ && this.href ? 'a' : 'button';
+    }
+    /**
+     * Get attributes for accessibility and functionality
+     */
+    getElementAttributes() {
+        const attributes = {
+            '?disabled': this.disabled && this.type !== "link" /* ButtonType.Link */,
+            'data-type': this.type,
+            'data-shape': this.shape,
+            'data-size': this.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' : '',
+            'role': this.type === "link" /* ButtonType.Link */ ? 'link' : 'button',
+            'aria-disabled': this.disabled ? 'true' : 'false',
+            'aria-label': this.buttonAriaLabel || nothing,
+            'aria-describedby': this.ariaDescribedBy || nothing,
+        };
+        // Add link-specific attributes
+        if (this.type === "link" /* ButtonType.Link */ && this.href) {
+            attributes.href = this.href;
+            if (this.target) {
+                attributes.target = this.target;
+            }
+            if (this.target === '_blank') {
+                attributes.rel = 'noopener noreferrer';
+            }
+        }
+        // Add button-specific attributes
+        if (this.type !== "link" /* ButtonType.Link */) {
+            attributes.type = this.htmlType || 'button';
+        }
+        return attributes;
+    }
+    /**
+     * 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>`;
+    }
+    /**
+     * Creates ripple effect on button click
+     * @param event - The click event
+     */
+    createRipple(event) {
+        if (!this.ripple || this.disabled)
+            return;
+        const button = event.currentTarget;
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+        const x = event.clientX - rect.left - size / 2;
+        const y = event.clientY - rect.top - size / 2;
+        const ripple = document.createElement('span');
+        ripple.className = 'ripple';
+        ripple.style.width = ripple.style.height = size + 'px';
+        ripple.style.left = x + 'px';
+        ripple.style.top = y + 'px';
+        // Remove any existing ripples
+        const existingRipples = button.querySelectorAll('.ripple');
+        existingRipples.forEach(r => r.remove());
+        button.appendChild(ripple);
+        // Remove ripple after animation
+        setTimeout(() => {
+            ripple.remove();
+        }, 600);
+    }
+    /**
+     * Handle click events with ripple effect
+     * @param event - The click event
+     */
+    handleClick(event) {
+        this.createRipple(event);
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const elementTag = this.getElementTag();
+        const attributes = this.getElementAttributes();
+        if (elementTag === 'a') {
+            return html `
+        <a
+          href="${attributes.href}"
+          target="${attributes.target || nothing}"
+          rel="${attributes.rel || nothing}"
+          data-type="${attributes['data-type']}"
+          data-shape="${attributes['data-shape']}"
+          data-size="${attributes['data-size']}"
+          data-state="${attributes['data-state']}"
+          data-theme="${attributes['data-theme']}"
+          data-block="${attributes['data-block']}"
+          class="${attributes.class}"
+          role="${attributes.role}"
+          aria-disabled="${attributes['aria-disabled']}"
+          aria-label="${attributes['aria-label']}"
+          aria-describedby="${attributes['aria-describedby']}"
+        >
+          <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>
+        </a>
+      `;
+        }
+        return html `
+      <button
+        ?disabled="${attributes['?disabled']}"
+        type="${attributes.type || nothing}"
+        data-type="${attributes['data-type']}"
+        data-shape="${attributes['data-shape']}"
+        data-size="${attributes['data-size']}"
+        data-state="${attributes['data-state']}"
+        data-theme="${attributes['data-theme']}"
+        data-block="${attributes['data-block']}"
+        class="${attributes.class}"
+        role="${attributes.role}"
+        aria-disabled="${attributes['aria-disabled']}"
+        aria-label="${attributes['aria-label']}"
+        aria-describedby="${attributes['aria-describedby']}"
+        @click="${this.handleClick}"
+      >
+        <span id="container">
+          ${((_c = this.icon) === null || _c === void 0 ? void 0 : _c.length) ? this.renderIcon(this.icon[0]) : nothing}
+          <slot id="slot"></slot>
+          ${((_d = this.icon) === null || _d === void 0 ? void 0 : _d.length) == 2 ? this.renderIcon(this.icon[1]) : nothing}
+        </span>
+      </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';\n\n@customElement('nr-button')\nexport class NrButtonElement extends NuralyUIBaseMixin(LitElement) {\n  @property({type: Boolean})\n  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  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  @property({type: Array})\n  icon: string[] = [];\n\n  @property({reflect: true})\n  iconPosition = IconPosition.Left;\n\n  @property({type: String})\n  href = EMPTY_STRING;\n\n  @property({type: String})\n  target = EMPTY_STRING;\n\n  @property({type: Boolean})\n  ripple = true;\n\n  /**\n   * Required components that must be registered for this component to work properly\n   * Can be overridden by parent implementations\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 the appropriate element tag based on button type\n   */\n  private getElementTag() {\n    return this.type === ButtonType.Link && this.href ? 'a' : 'button';\n  }\n\n  /**\n   * Get attributes for accessibility and functionality\n   */\n  private getElementAttributes() {\n    const attributes: any = {\n      '?disabled': this.disabled && this.type !== ButtonType.Link,\n      'data-type': this.type,\n      'data-shape': this.shape,\n      'data-size': this.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      'role': this.type === ButtonType.Link ? 'link' : 'button',\n      'aria-disabled': this.disabled ? 'true' : 'false',\n      'aria-label': this.buttonAriaLabel || nothing,\n      'aria-describedby': this.ariaDescribedBy || nothing,\n    };\n\n    // Add link-specific attributes\n    if (this.type === ButtonType.Link && this.href) {\n      attributes.href = this.href;\n      if (this.target) {\n        attributes.target = this.target;\n      }\n      if (this.target === '_blank') {\n        attributes.rel = 'noopener noreferrer';\n      }\n    }\n\n    // Add button-specific attributes\n    if (this.type !== ButtonType.Link) {\n      attributes.type = this.htmlType || 'button';\n    }\n\n    return attributes;\n  }\n\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   * 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   * Creates ripple effect on button click\n   * @param event - The click event\n   */\n  private createRipple(event: MouseEvent) {\n    if (!this.ripple || this.disabled) return;\n\n    const button = event.currentTarget as HTMLElement;\n    const rect = button.getBoundingClientRect();\n    const size = Math.max(rect.width, rect.height);\n    const x = event.clientX - rect.left - size / 2;\n    const y = event.clientY - rect.top - size / 2;\n\n    const ripple = document.createElement('span');\n    ripple.className = 'ripple';\n    ripple.style.width = ripple.style.height = size + 'px';\n    ripple.style.left = x + 'px';\n    ripple.style.top = y + 'px';\n\n    // Remove any existing ripples\n    const existingRipples = button.querySelectorAll('.ripple');\n    existingRipples.forEach(r => r.remove());\n\n    button.appendChild(ripple);\n\n    // Remove ripple after animation\n    setTimeout(() => {\n      ripple.remove();\n    }, 600);\n  }\n\n  /**\n   * Handle click events with ripple effect\n   * @param event - The click event\n   */\n  private handleClick(event: MouseEvent) {\n    this.createRipple(event);\n  }\n\n  override render() {\n    const elementTag = this.getElementTag();\n    const attributes = this.getElementAttributes();\n    \n    if (elementTag === 'a') {\n      return html`\n        <a\n          href=\"${attributes.href}\"\n          target=\"${attributes.target || nothing}\"\n          rel=\"${attributes.rel || nothing}\"\n          data-type=\"${attributes['data-type']}\"\n          data-shape=\"${attributes['data-shape']}\"\n          data-size=\"${attributes['data-size']}\"\n          data-state=\"${attributes['data-state']}\"\n          data-theme=\"${attributes['data-theme']}\"\n          data-block=\"${attributes['data-block']}\"\n          class=\"${attributes.class}\"\n          role=\"${attributes.role}\"\n          aria-disabled=\"${attributes['aria-disabled']}\"\n          aria-label=\"${attributes['aria-label']}\"\n          aria-describedby=\"${attributes['aria-describedby']}\"\n        >\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        </a>\n      `;\n    }\n    \n    return html`\n      <button\n        ?disabled=\"${attributes['?disabled']}\"\n        type=\"${attributes.type || nothing}\"\n        data-type=\"${attributes['data-type']}\"\n        data-shape=\"${attributes['data-shape']}\"\n        data-size=\"${attributes['data-size']}\"\n        data-state=\"${attributes['data-state']}\"\n        data-theme=\"${attributes['data-theme']}\"\n        data-block=\"${attributes['data-block']}\"\n        class=\"${attributes.class}\"\n        role=\"${attributes.role}\"\n        aria-disabled=\"${attributes['aria-disabled']}\"\n        aria-label=\"${attributes['aria-label']}\"\n        aria-describedby=\"${attributes['aria-describedby']}\"\n        @click=\"${this.handleClick}\"\n      >\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      </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