@nuralyui/button 0.0.12 → 0.0.14

package/button.style.variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.style.variables.js","sourceRoot":"","sources":["../../../src/components/button/button.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLjC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component CSS custom properties (design tokens)\n * \n * This file contains all the CSS custom properties used by the nr-button component,\n * organized by functionality and including both light and dark theme variants.\n * \n * The styling system uses CSS custom properties with fallbacks to allow\n * for both global and local customization of button appearance.\n */\nexport const buttonVariables = css`\n  :host {\n    /* ----------------------------------------\n     * DEFAULT BUTTON STYLES\n     * ---------------------------------------- */\n    --hybrid-button-local-border-top: 2px solid #d0d0d0;\n    --hybrid-button-local-border-bottom: 2px solid #d0d0d0;\n    --hybrid-button-local-border-left: 2px solid #d0d0d0;\n    --hybrid-button-local-border-right: 2px solid #d0d0d0;\n    --hybrid-button-local-border-top-left-radius: 0px;\n    --hybrid-button-local-border-top-right-radius: 0px;\n    --hybrid-button-local-border-bottom-left-radius: 0px;\n    --hybrid-button-local-border-bottom-right-radius: 0px;\n    --hybrid-button-local-background-color: #f9f9f9;\n    --hybrid-button-local-text-color: #393939;\n    --hybrid-button-local-hover-border-color: #1677ff;\n    --hybrid-button-local-hover-color: #1677ff;\n    --hybrid-button-local-font-size: 0.9rem;\n    --hybrid-button-local-font-weight: normal;\n    --hybrid-button-local-text-transform: none;\n    --hybrid-button-local-active-border-color: #1661b1;\n    --hybrid-button-local-active-color: #184d86;\n    --hybrid-button-local-disabled-background-color: #c6c6c6;\n    --hybrid-button-local-disabled-text-color: #8d8d8d;\n    --hybrid-button-local-disabled-border-color: #bbb;\n    --hybrid-button-local-height: auto;\n    --hybrid-button-local-width: auto;\n    --hybrid-button-local-padding-y: 0.5rem;\n    --hybrid-button-local-padding-x: 0.6rem;\n    --hybrid-button-local-icon-width: 18px;\n    --hybrid-button-local-icon-height: 14px;\n\n    /* ----------------------------------------\n     * PRIMARY BUTTON STYLES\n     * ---------------------------------------- */\n    --hybrid-button-local-primary-border-color: #0f62fe;\n    --hybrid-button-local-primary-background-color: #0f62fe;\n    --hybrid-button-local-primary-text-color: #ffffff;\n    --hybrid-button-local-primary-outline: 1px solid white;\n    --hybrid-button-local-primary-outline-offset: -3px;\n    --hybrid-button-local-primary-hover-background-color: #0353e9;\n    --hybrid-button-local-primary-hover-border-color: #0353e9;\n    --hybrid-button-local-primary-active-background-color: #0f62fe;\n    --hybrid-button-local-primary-active-border-color: #0f62fe;\n    --hybrid-button-local-primary-disabled-text-color: #8d8d8d;\n    --hybrid-button-local-primary-disabled-background-color: #c6c6c6;\n    --hybrid-button-local-primary-disabled-border-color: #c6c6c6;\n    --hybrid-button-local-primary-dashed-border-color: #ffffff;\n\n    /* ----------------------------------------\n     * DANGER BUTTON STYLES\n     * ---------------------------------------- */\n    --hybrid-button-local-danger-background-color: #da1e28;\n    --hybrid-button-local-danger-text-color: #ffffff;\n    --hybrid-button-local-danger-border-color: #da1e28;\n    --hybrid-button-local-danger-outline: 1px solid white;\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: #0f62fe;\n    --hybrid-button-local-danger-disabled-background-color: #c6c6c6;\n    --hybrid-button-local-danger-disabled-text-color: #8d8d8d;\n    --hybrid-button-local-danger-disabled-border-color: #c6c6c6;\n    --hybrid-button-local-danger-dashed-border-color: #ffffff;\n\n    /* ----------------------------------------\n     * GHOST BUTTON STYLES\n     * ---------------------------------------- */\n    --hybrid-button-local-ghost-background-color: #ffffff;\n    --hybrid-button-local-ghost-text-color: #0f62fe;\n    --hybrid-button-local-ghost-border-color: #ffffff;\n    --hybrid-button-local-ghost-active-background-color: #ffffff;\n    --hybrid-button-local-ghost-active-text-color: #054ada;\n    --hybrid-button-local-ghost-active-border-color: #0f62fe;\n    --hybrid-button-local-ghost-hover-background-color: #e5e5e5;\n    --hybrid-button-local-ghost-hover-border-color: #e5e5e5;\n    --hybrid-button-local-ghost-hover-text-color: #054ada;\n    --hybrid-button-local-ghost-disabled-background-color: #ffffff;\n    --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;\n    --hybrid-button-local-ghost-disabled-border-color: #ffffff;\n    --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;\n\n    /* ----------------------------------------\n     * SECONDARY BUTTON STYLES\n     * ---------------------------------------- */\n    --hybrid-button-local-secondary-background-color: #393939;\n    --hybrid-button-local-secondary-border-color: #393939;\n    --hybrid-button-local-secondary-text-color: #ffffff;\n    --hybrid-button-local-secondary-outline: 1px solid white;\n    --hybrid-button-local-secondary-outline-offset: -3px;\n    --hybrid-button-local-secondary-hover-background-color: #4c4c4c;\n    --hybrid-button-local-secondary-hover-border-color: #4c4c4c;\n    --hybrid-button-local-secondary-active-background-color: #393939;\n    --hybrid-button-local-secondary-active-border-color: #0f62fe;\n    --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;\n    --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;\n    --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;\n    --hybrid-button-local-secondary-dashed-border-color: #ffffff;\n\n    /* ----------------------------------------\n     * SIZE VARIANTS\n     * ---------------------------------------- */\n    /* Large button sizing */\n    --hybrid-large-button-local-padding-y: 0.5rem;\n    --hybrid-large-button-local-padding-x: 0.9rem;\n    --hybrid-large-button-local-font-size: 1rem;\n\n    /* Small button sizing */\n    --hybrid-small-button-local-padding-y: 0.5rem;\n    --hybrid-small-button-local-padding-x: 0.4rem;\n    --hybrid-small-button-local-font-size: 0.7rem;\n  }\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  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`;\n"]}

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

@@ -3,16 +3,23 @@ export declare const enum ButtonType {
     Secondary = "secondary",
     Danger = "danger",
     Ghost = "ghost",
-    Default = "default"
+    Default = "default",
+    Text = "text",
+    Link = "link"
 }
 export declare const enum ButtonSize {
     Small = "small",
     Default = "default",
     Large = "large"
 }
+export declare const enum ButtonShape {
+    Default = "default",
+    Circle = "circle",
+    Round = "round"
+}
 export declare const enum IconPosition {
     Left = "left",
     Right = "right"
 }
 export declare const EMPTY_STRING = "";
-//# sourceMappingURL=nr-button.types.d.ts.map
+//# sourceMappingURL=button.types.d.ts.map

package/button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.types.ts"],"names":[],"mappings":"AAAA,0BAAkB,UAAU;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,0BAAkB,WAAW;IAC3B,OAAO,YAAY;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,0BAAkB,YAAY;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AACD,eAAO,MAAM,YAAY,KAAK,CAAC"}

package/button.types.js

@@ -0,0 +1,2 @@
+export const EMPTY_STRING = '';
+//# sourceMappingURL=button.types.js.map

package/button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.js","sourceRoot":"","sources":["../../../src/components/button/button.types.ts"],"names":[],"mappings":"AA0BA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum ButtonType {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Danger = 'danger',\n  Ghost = 'ghost',\n  Default = 'default',\n  Text = 'text',\n  Link = 'link',\n}\n\nexport const enum ButtonSize {\n  Small = 'small',\n  Default = 'default',\n  Large = 'large',\n}\n\nexport const enum ButtonShape {\n  Default = 'default',\n  Circle = 'circle',\n  Round = 'round',\n}\n\nexport const enum IconPosition {\n  Left = 'left',\n  Right = 'right',\n}\nexport const EMPTY_STRING = '';\n"]}

package/demo/{nr-buttons-demo.d.ts → buttons-demo.d.ts}

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { LitElement } from 'lit';
-import '../nr-button.component';
+import '../button.component';
 import '../../../helpers/ThemeHandler';
 export declare class ElButtonDemoElement extends LitElement {
     render(): import("lit").TemplateResult<1>;
@@ -14,4 +14,4 @@ declare global {
         'nr-buttons-demo': ElButtonDemoElement;
     }
 }
-//# sourceMappingURL=nr-buttons-demo.d.ts.map
+//# sourceMappingURL=buttons-demo.d.ts.map

package/demo/buttons-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/button/demo/buttons-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,qBACa,mBAAoB,SAAQ,UAAU;IACxC,MAAM;CA2PhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,mBAAmB,CAAC;KACxC;CACF"}

package/demo/{nr-buttons-demo.js → buttons-demo.js}

@@ -11,7 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import '../nr-button.component';
+import '../button.component';
 import '../../../helpers/ThemeHandler';
 let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
     render() {
@@ -45,6 +45,8 @@ let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
               <td>Ghost</td>
               <td>Danger</td>
               <td>Default</td>
+              <td>Text</td>
+              <td>Link</td>
             </tr>
             <tr>
               <td>Default</td>
@@ -63,6 +65,12 @@ let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
               <td>
                 <nr-button><span>Default Button</span></nr-button>
               </td>
+              <td>
+                <nr-button type="text"><span>Text Button</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="link" href="https://example.com"><span>Link Button</span></nr-button>
+              </td>
             </tr>
             <tr>
               <td>Dashed</td>
@@ -81,6 +89,12 @@ let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
               <td>
                 <nr-button ?dashed=${true}><span>Default dashed</span></nr-button>
               </td>
+              <td>
+                <nr-button type="text" ?dashed=${true}><span>Text dashed</span></nr-button>
+              </td>
+              <td>
+                <nr-button type="link" href="https://example.com" ?dashed=${true}><span>Link dashed</span></nr-button>
+              </td>
             </tr>
             <tr>
               <td>Loading</td>
@@ -197,9 +211,57 @@ let ElButtonDemoElement = class ElButtonDemoElement extends LitElement {
               <td><nr-button type="ghost" .icon="${['search']}"></nr-button></td>
               <td><nr-button type="danger" .icon="${['search']}"></nr-button></td>
               <td><nr-button .icon="${['search']}"></nr-button></td>
+              <td><nr-button type="text" .icon="${['search']}"></nr-button></td>
+              <td><nr-button type="link" href="https://example.com" .icon="${['search']}"></nr-button></td>
             </tr>
           </tbody>
         </table>
+
+        <h1>Button Shapes</h1>
+        <br />
+        <h3>Default Shape</h3>
+        <nr-button type="primary">Default Button</nr-button>
+        <nr-button type="primary" .icon="${['search']}">With Icon</nr-button>
+        <nr-button type="primary" .icon="${['search']}"></nr-button>
+        
+        <h3>Round Shape</h3>
+        <nr-button type="primary" shape="round">Round Button</nr-button>
+        <nr-button type="primary" shape="round" .icon="${['search']}">Round With Icon</nr-button>
+        <nr-button type="primary" shape="round" .icon="${['search']}"></nr-button>
+        
+        <h3>Circle Shape</h3>
+        <nr-button type="primary" shape="circle" .icon="${['search']}"></nr-button>
+        <nr-button type="secondary" shape="circle" .icon="${['user']}"></nr-button>
+        <nr-button type="danger" shape="circle" .icon="${['trash']}"></nr-button>
+
+        <h3>Circle Shape - Different Sizes</h3>
+        <nr-button type="primary" shape="circle" size="small" .icon="${['search']}"></nr-button>
+        <nr-button type="primary" shape="circle" .icon="${['search']}"></nr-button>
+        <nr-button type="primary" shape="circle" size="large" .icon="${['search']}"></nr-button>
+
+        <h1>Block Buttons</h1>
+        <br />
+        <nr-button type="primary" block>Primary Block Button</nr-button>
+        <br />
+        <nr-button type="secondary" block>Secondary Block Button</nr-button>
+        <br />
+        <nr-button type="text" block>Text Block Button</nr-button>
+        <br />
+        <nr-button type="link" href="https://example.com" block>Link Block Button</nr-button>
+        <br />
+
+        <h1>Link Buttons with Target</h1>
+        <br />
+        <nr-button type="link" href="https://example.com">Same Tab Link</nr-button>
+        <nr-button type="link" href="https://example.com" target="_blank">New Tab Link</nr-button>
+        <nr-button type="link" href="https://example.com" target="_blank" .icon="${['external-link']}">External Link</nr-button>
+        <br />
+
+        <h1>Accessibility Examples</h1>
+        <br />
+        <nr-button type="primary" buttonAriaLabel="Save document">Save</nr-button>
+        <nr-button type="danger" buttonAriaLabel="Delete item permanently" .icon="${['trash']}">Delete</nr-button>
+        <nr-button type="text" buttonAriaLabel="Close dialog" .icon="${['close']}"></nr-button>
       </theme-handler>
     `;
     }
@@ -208,4 +270,4 @@ ElButtonDemoElement = __decorate([
     customElement('nr-buttons-demo')
 ], ElButtonDemoElement);
 export { ElButtonDemoElement };
-//# sourceMappingURL=nr-buttons-demo.js.map
+//# sourceMappingURL=buttons-demo.js.map

package/demo/buttons-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons-demo.js","sourceRoot":"","sources":["../../../../src/components/button/demo/buttons-demo.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AAEvC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IACxC,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;4BAQa,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;;;4BAGV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;4BACV,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDA6Cc,IAAI;;;sDAGF,IAAI;;;kDAGR,IAAI;;;mDAGH,IAAI;;;qCAGlB,IAAI;;;iDAGQ,IAAI;;;4EAGuB,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA0C7B,CAAC,QAAQ,CAAC;;;qDAGR,CAAC,QAAQ,CAAC;;;iDAGd,CAAC,QAAQ,CAAC;;;kDAGT,CAAC,QAAQ,CAAC;;;oCAGxB,CAAC,QAAQ,CAAC;;;;;;mDAMK,CAAC,QAAQ,CAAC;;;;;qDAKR,CAAC,QAAQ,CAAC;;;;;iDAKd,CAAC,QAAQ,CAAC;;;;;kDAKT,CAAC,QAAQ,CAAC;;;;;oCAKxB,CAAC,QAAQ,CAAC;;;;;;mDAMK,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;qDAKhB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;iDAKtB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;kDAKjB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;oCAKhC,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;;;qDAOD,CAAC,QAAQ,CAAC;uDACR,CAAC,QAAQ,CAAC;mDACd,CAAC,QAAQ,CAAC;oDACT,CAAC,QAAQ,CAAC;sCACxB,CAAC,QAAQ,CAAC;kDACE,CAAC,QAAQ,CAAC;6EACiB,CAAC,QAAQ,CAAC;;;;;;;;;2CAS5C,CAAC,QAAQ,CAAC;2CACV,CAAC,QAAQ,CAAC;;;;yDAII,CAAC,QAAQ,CAAC;yDACV,CAAC,QAAQ,CAAC;;;0DAGT,CAAC,QAAQ,CAAC;4DACR,CAAC,MAAM,CAAC;yDACX,CAAC,OAAO,CAAC;;;uEAGK,CAAC,QAAQ,CAAC;0DACvB,CAAC,QAAQ,CAAC;uEACG,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;mFAiBE,CAAC,eAAe,CAAC;;;;;;oFAMhB,CAAC,OAAO,CAAC;uEACtB,CAAC,OAAO,CAAC;;KAE3E,CAAC;IACJ,CAAC;CACF,CAAA;AA5PY,mBAAmB;IAD/B,aAAa,CAAC,iBAAiB,CAAC;GACpB,mBAAmB,CA4P/B;SA5PY,mBAAmB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport '../button.component';\nimport '../../../helpers/ThemeHandler';\n@customElement('nr-buttons-demo')\nexport class ElButtonDemoElement extends LitElement {\n  override render() {\n    return html`\n      <theme-handler>\n        <h1>Sizes</h1>\n        <br />\n        <nr-button> Default Button</nr-button>\n        <nr-button size=\"small\">Small Button</nr-button>\n        <nr-button size=\"large\">Large Button</nr-button>\n        <br /><br />\n        <nr-button .icon=\"${['search']}\"> Default Button</nr-button>\n        <nr-button .icon=\"${['search']}\" size=\"small\">Small Button</nr-button>\n        <nr-button .icon=\"${['search']}\" size=\"large\">Large Button</nr-button>\n\n        <br /><br />\n        <nr-button .icon=\"${['search']}\"></nr-button>\n        <nr-button .icon=\"${['search']}\" size=\"small\"></nr-button>\n        <nr-button .icon=\"${['search']}\" size=\"large\"></nr-button>\n        <br /><br />\n\n        <h1>Types</h1>\n        <br /><br />\n\n        <table>\n          <tbody>\n            <tr>\n              <td></td>\n              <td>Primary</td>\n              <td>Secondary</td>\n              <td>Ghost</td>\n              <td>Danger</td>\n              <td>Default</td>\n              <td>Text</td>\n              <td>Link</td>\n            </tr>\n            <tr>\n              <td>Default</td>\n              <td>\n                <nr-button type=\"primary\"><span>Primary Button</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\"><span>Secondary Button </span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\"> <span>Ghost button</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\"><span>Danger Button </span></nr-button>\n              </td>\n              <td>\n                <nr-button><span>Default Button</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"text\"><span>Text Button</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"link\" href=\"https://example.com\"><span>Link Button</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Dashed</td>\n              <td>\n                <nr-button type=\"primary\" ?dashed=${true}><span>Primary Button text only</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\" ?dashed=${true}><span>Secondary dashed</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\" ?dashed=${true}><span>Ghost dashed</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\" ?dashed=${true}><span>Danger dashed</span></nr-button>\n              </td>\n              <td>\n                <nr-button ?dashed=${true}><span>Default dashed</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"text\" ?dashed=${true}><span>Text dashed</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"link\" href=\"https://example.com\" ?dashed=${true}><span>Link dashed</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Loading</td>\n              <td>\n                <nr-button type=\"primary\" loading><span>Primary Button loading</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\" loading><span>Secondary button loading </span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\" loading><span>Ghost button loading</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\" loading><span>Danger button loading</span></nr-button>\n              </td>\n              <td>\n                <nr-button loading><span>Default button loading</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Disabled</td>\n              <td>\n                <nr-button type=\"primary\" disabled><span>Primary Button disabled</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\" disabled><span>Secondary Button disabled</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\" disabled> <span>Ghost button disabled</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\" disabled><span>Danger Button disabled</span></nr-button>\n              </td>\n              <td>\n                <nr-button disabled><span>Default Button disabled</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Icon with text default: icon left</td>\n              <td>\n                <nr-button type=\"primary\" .icon=\"${['search']}\"><span> Primary button icon+text</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"secondary\" .icon=\"${['search']}\"><span> Secondary button icon+text</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"ghost\" .icon=\"${['search']}\"><span> Ghost button icon+text</span></nr-button>\n              </td>\n              <td>\n                <nr-button type=\"danger\" .icon=\"${['search']}\"><span> Danger button icon+text</span></nr-button>\n              </td>\n              <td>\n                <nr-button .icon=\"${['search']}\"><span> Default button icon+text</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Icon with text: icon right</td>\n              <td>\n                <nr-button type=\"primary\" .icon=\"${['search']}\" iconPosition=\"right\"\n                  ><span> Primary button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"secondary\" .icon=\"${['search']}\" iconPosition=\"right\"\n                  ><span> Secondary button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"ghost\" .icon=\"${['search']}\" iconPosition=\"right\"\n                  ><span> Ghost button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"danger\" .icon=\"${['search']}\" iconPosition=\"right\"\n                  ><span> Danger button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button .icon=\"${['search']}\" iconPosition=\"right\"><span> Default button icon+text</span></nr-button>\n              </td>\n            </tr>\n            <tr>\n              <td>Icon with text: icon both side</td>\n              <td>\n                <nr-button type=\"primary\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Primary button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"secondary\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Secondary button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"ghost\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Ghost button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button type=\"danger\" .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Danger button icon+text</span></nr-button\n                >\n              </td>\n              <td>\n                <nr-button .icon=\"${['search', 'bomb']}\" iconPosition=\"right\"\n                  ><span> Default button icon+text</span></nr-button\n                >\n              </td>\n            </tr>\n            <tr>\n              <td>Icon only</td>\n              <td><nr-button type=\"primary\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button type=\"secondary\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button type=\"ghost\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button type=\"danger\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button type=\"text\" .icon=\"${['search']}\"></nr-button></td>\n              <td><nr-button type=\"link\" href=\"https://example.com\" .icon=\"${['search']}\"></nr-button></td>\n            </tr>\n          </tbody>\n        </table>\n\n        <h1>Button Shapes</h1>\n        <br />\n        <h3>Default Shape</h3>\n        <nr-button type=\"primary\">Default Button</nr-button>\n        <nr-button type=\"primary\" .icon=\"${['search']}\">With Icon</nr-button>\n        <nr-button type=\"primary\" .icon=\"${['search']}\"></nr-button>\n        \n        <h3>Round Shape</h3>\n        <nr-button type=\"primary\" shape=\"round\">Round Button</nr-button>\n        <nr-button type=\"primary\" shape=\"round\" .icon=\"${['search']}\">Round With Icon</nr-button>\n        <nr-button type=\"primary\" shape=\"round\" .icon=\"${['search']}\"></nr-button>\n        \n        <h3>Circle Shape</h3>\n        <nr-button type=\"primary\" shape=\"circle\" .icon=\"${['search']}\"></nr-button>\n        <nr-button type=\"secondary\" shape=\"circle\" .icon=\"${['user']}\"></nr-button>\n        <nr-button type=\"danger\" shape=\"circle\" .icon=\"${['trash']}\"></nr-button>\n\n        <h3>Circle Shape - Different Sizes</h3>\n        <nr-button type=\"primary\" shape=\"circle\" size=\"small\" .icon=\"${['search']}\"></nr-button>\n        <nr-button type=\"primary\" shape=\"circle\" .icon=\"${['search']}\"></nr-button>\n        <nr-button type=\"primary\" shape=\"circle\" size=\"large\" .icon=\"${['search']}\"></nr-button>\n\n        <h1>Block Buttons</h1>\n        <br />\n        <nr-button type=\"primary\" block>Primary Block Button</nr-button>\n        <br />\n        <nr-button type=\"secondary\" block>Secondary Block Button</nr-button>\n        <br />\n        <nr-button type=\"text\" block>Text Block Button</nr-button>\n        <br />\n        <nr-button type=\"link\" href=\"https://example.com\" block>Link Block Button</nr-button>\n        <br />\n\n        <h1>Link Buttons with Target</h1>\n        <br />\n        <nr-button type=\"link\" href=\"https://example.com\">Same Tab Link</nr-button>\n        <nr-button type=\"link\" href=\"https://example.com\" target=\"_blank\">New Tab Link</nr-button>\n        <nr-button type=\"link\" href=\"https://example.com\" target=\"_blank\" .icon=\"${['external-link']}\">External Link</nr-button>\n        <br />\n\n        <h1>Accessibility Examples</h1>\n        <br />\n        <nr-button type=\"primary\" buttonAriaLabel=\"Save document\">Save</nr-button>\n        <nr-button type=\"danger\" buttonAriaLabel=\"Delete item permanently\" .icon=\"${['trash']}\">Delete</nr-button>\n        <nr-button type=\"text\" buttonAriaLabel=\"Close dialog\" .icon=\"${['close']}\"></nr-button>\n      </theme-handler>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-buttons-demo': ElButtonDemoElement;\n  }\n}\n"]}

package/index.d.ts

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

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/index.js

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

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './nr-button.component.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC","sourcesContent":["export * from './button.component.js';\n"]}

package/mixins/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { RippleMixin, type RippleCapable } from './ripple-mixin.js';
+export { KeyboardMixin, type KeyboardCapable } from './keyboard-mixin.js';
+export { LinkMixin, type LinkCapable } from './link-mixin.js';
+import type { RippleCapable } from './ripple-mixin.js';
+import type { KeyboardCapable } from './keyboard-mixin.js';
+import type { LinkCapable } from './link-mixin.js';
+export interface ButtonMixinCapable extends RippleCapable, KeyboardCapable, LinkCapable {
+}
+//# sourceMappingURL=index.d.ts.map

package/mixins/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,WAAW,kBAAmB,SAAQ,aAAa,EAAE,eAAe,EAAE,WAAW;CAAG"}

package/mixins/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+// Export all button-specific mixins
+export { RippleMixin } from './ripple-mixin.js';
+export { KeyboardMixin } from './keyboard-mixin.js';
+export { LinkMixin } from './link-mixin.js';
+//# sourceMappingURL=index.js.map

package/mixins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,oCAAoC;AACpC,OAAO,EAAE,WAAW,EAAsB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAwB,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAoB,MAAM,iBAAiB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n// Export all button-specific mixins\nexport { RippleMixin, type RippleCapable } from './ripple-mixin.js';\nexport { KeyboardMixin, type KeyboardCapable } from './keyboard-mixin.js';\nexport { LinkMixin, type LinkCapable } from './link-mixin.js';\n\n// Import types for combined interface\nimport type { RippleCapable } from './ripple-mixin.js';\nimport type { KeyboardCapable } from './keyboard-mixin.js';\nimport type { LinkCapable } from './link-mixin.js';\n\n// Combined interface for button components using all mixins\nexport interface ButtonMixinCapable extends RippleCapable, KeyboardCapable, LinkCapable {}\n"]}

package/mixins/keyboard-mixin.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Interface for components that support keyboard interaction
+ */
+export interface KeyboardCapable {
+    /**
+     * Whether the component is disabled
+     */
+    disabled: boolean;
+    /**
+     * Handle keyboard activation (Enter/Space)
+     */
+    handleKeyboardActivation(event: KeyboardEvent): void;
+    /**
+     * Handle keydown events with proper focus management
+     */
+    handleKeydown(event: KeyboardEvent): void;
+}
+/**
+ * Mixin that provides keyboard interaction capabilities for button-like components
+ * Handles Enter and Space key activation following ARIA best practices
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with keyboard interaction capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends KeyboardMixin(LitElement) {
+ *   @property({ type: Boolean }) disabled = false;
+ *
+ *   render() {
+ *     return html`
+ *       <button
+ *         @keydown="${this.handleKeydown}"
+ *         tabindex="${this.disabled ? '-1' : '0'}"
+ *       >
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare const KeyboardMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<KeyboardCapable> & T;
+export {};
+//# sourceMappingURL=keyboard-mixin.d.ts.map

package/mixins/keyboard-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/keyboard-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,wBAAwB,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAErD;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;CAC3C;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,wFAwDzB,CAAC"}

package/mixins/keyboard-mixin.js

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides keyboard interaction capabilities for button-like components
+ * Handles Enter and Space key activation following ARIA best practices
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with keyboard interaction capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends KeyboardMixin(LitElement) {
+ *   @property({ type: Boolean }) disabled = false;
+ *
+ *   render() {
+ *     return html`
+ *       <button
+ *         @keydown="${this.handleKeydown}"
+ *         tabindex="${this.disabled ? '-1' : '0'}"
+ *       >
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export const KeyboardMixin = (superClass) => {
+    class KeyboardMixinClass extends superClass {
+        /**
+         * Handle keyboard activation (Enter/Space keys)
+         * @param event - The keyboard event
+         */
+        handleKeyboardActivation(event) {
+            if (this.disabled)
+                return;
+            // Check if EventHandlerMixin is available for proper key checking
+            const isActivationKey = typeof this.isActivationKey === 'function'
+                ? this.isActivationKey(event)
+                : (event.key === 'Enter' || event.key === ' ');
+            if (isActivationKey) {
+                event.preventDefault();
+                // Trigger click event for consistency
+                this.click();
+                // Dispatch custom keyboard activation event if EventHandling mixin is available
+                if (typeof this.dispatchCustomEvent === 'function') {
+                    this.dispatchCustomEvent('keyboard-activation', {
+                        key: event.key,
+                        timestamp: Date.now(),
+                        target: this
+                    });
+                }
+            }
+        }
+        /**
+         * Handle keydown events with proper disabled state checking
+         * @param event - The keyboard event
+         */
+        handleKeydown(event) {
+            if (this.disabled) {
+                // Allow readonly navigation keys even when disabled
+                const isNavigationKey = typeof this.isReadonlyKeyAllowed === 'function'
+                    ? this.isReadonlyKeyAllowed(event)
+                    : ['Tab', 'Shift', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key);
+                if (!isNavigationKey) {
+                    event.preventDefault();
+                    return;
+                }
+            }
+            this.handleKeyboardActivation(event);
+        }
+    }
+    return KeyboardMixinClass;
+};
+//# sourceMappingURL=keyboard-mixin.js.map

package/mixins/keyboard-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-mixin.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/keyboard-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0BH;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAoC,UAAa,EAAE,EAAE;IAChF,MAAM,kBAAmB,SAAQ,UAAU;QAIzC;;;WAGG;QACH,wBAAwB,CAAC,KAAoB;YAC3C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,kEAAkE;YAClE,MAAM,eAAe,GAAG,OAAQ,IAAY,CAAC,eAAe,KAAK,UAAU;gBACzE,CAAC,CAAE,IAAY,CAAC,eAAe,CAAC,KAAK,CAAC;gBACtC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;YAEjD,IAAI,eAAe,EAAE;gBACnB,KAAK,CAAC,cAAc,EAAE,CAAC;gBAEvB,sCAAsC;gBACtC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAEb,gFAAgF;gBAChF,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;oBAC1D,IAAY,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;wBACvD,GAAG,EAAE,KAAK,CAAC,GAAG;wBACd,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;wBACrB,MAAM,EAAE,IAAI;qBACb,CAAC,CAAC;iBACJ;aACF;QACH,CAAC;QAED;;;WAGG;QACH,aAAa,CAAC,KAAoB;YAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,oDAAoD;gBACpD,MAAM,eAAe,GAAG,OAAQ,IAAY,CAAC,oBAAoB,KAAK,UAAU;oBAC9E,CAAC,CAAE,IAAY,CAAC,oBAAoB,CAAC,KAAK,CAAC;oBAC3C,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAErH,IAAI,CAAC,eAAe,EAAE;oBACpB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,OAAO;iBACR;aACF;YAED,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;KACF;IAED,OAAO,kBAAsD,CAAC;AAChE,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support keyboard interaction\n */\nexport interface KeyboardCapable {\n  /**\n   * Whether the component is disabled\n   */\n  disabled: boolean;\n  \n  /**\n   * Handle keyboard activation (Enter/Space)\n   */\n  handleKeyboardActivation(event: KeyboardEvent): void;\n  \n  /**\n   * Handle keydown events with proper focus management\n   */\n  handleKeydown(event: KeyboardEvent): void;\n}\n\n/**\n * Mixin that provides keyboard interaction capabilities for button-like components\n * Handles Enter and Space key activation following ARIA best practices\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with keyboard interaction capabilities\n * \n * @example\n * ```typescript\n * export class MyButton extends KeyboardMixin(LitElement) {\n *   @property({ type: Boolean }) disabled = false;\n *   \n *   render() {\n *     return html`\n *       <button \n *         @keydown=\"${this.handleKeydown}\"\n *         tabindex=\"${this.disabled ? '-1' : '0'}\"\n *       >\n *         <slot></slot>\n *       </button>\n *     `;\n *   }\n * }\n * ```\n */\nexport const KeyboardMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class KeyboardMixinClass extends superClass implements KeyboardCapable {\n    \n    declare disabled: boolean;\n    \n    /**\n     * Handle keyboard activation (Enter/Space keys)\n     * @param event - The keyboard event\n     */\n    handleKeyboardActivation(event: KeyboardEvent): void {\n      if (this.disabled) return;\n      \n      // Check if EventHandlerMixin is available for proper key checking\n      const isActivationKey = typeof (this as any).isActivationKey === 'function'\n        ? (this as any).isActivationKey(event)\n        : (event.key === 'Enter' || event.key === ' ');\n      \n      if (isActivationKey) {\n        event.preventDefault();\n        \n        // Trigger click event for consistency\n        this.click();\n        \n        // Dispatch custom keyboard activation event if EventHandling mixin is available\n        if (typeof (this as any).dispatchCustomEvent === 'function') {\n          (this as any).dispatchCustomEvent('keyboard-activation', {\n            key: event.key,\n            timestamp: Date.now(),\n            target: this\n          });\n        }\n      }\n    }\n\n    /**\n     * Handle keydown events with proper disabled state checking\n     * @param event - The keyboard event\n     */\n    handleKeydown(event: KeyboardEvent): void {\n      if (this.disabled) {\n        // Allow readonly navigation keys even when disabled\n        const isNavigationKey = typeof (this as any).isReadonlyKeyAllowed === 'function'\n          ? (this as any).isReadonlyKeyAllowed(event)\n          : ['Tab', 'Shift', 'Escape', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key);\n        \n        if (!isNavigationKey) {\n          event.preventDefault();\n          return;\n        }\n      }\n      \n      this.handleKeyboardActivation(event);\n    }\n  }\n\n  return KeyboardMixinClass as Constructor<KeyboardCapable> & T;\n};\n"]}

package/mixins/link-mixin.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { ButtonType } from '../button.types.js';
+declare type Constructor<T = {}> = new (...args: any[]) => T;
+/**
+ * Interface for components that support link behavior
+ */
+export interface LinkCapable {
+    /**
+     * Button type that determines if it should render as link
+     */
+    type: ButtonType;
+    /**
+     * URL for link buttons
+     */
+    href: string;
+    /**
+     * Target attribute for link buttons
+     */
+    target: string;
+    /**
+     * Get the appropriate element tag (button or a)
+     */
+    getElementTag(): string;
+    /**
+     * Get link-specific attributes
+     */
+    getLinkAttributes(): Record<string, any>;
+    /**
+     * Check if component should render as a link
+     */
+    isLinkType(): boolean;
+}
+/**
+ * Mixin that provides link behavior for button components
+ * Handles the distinction between button and anchor elements
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with link capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends LinkMixin(LitElement) {
+ *   @property({ type: String }) type = ButtonType.Default;
+ *   @property({ type: String }) href = '';
+ *   @property({ type: String }) target = '';
+ *
+ *   render() {
+ *     const tag = this.getElementTag();
+ *     const attrs = this.getLinkAttributes();
+ *
+ *     return html`
+ *       <${tag} ...${attrs}>
+ *         <slot></slot>
+ *       </${tag}>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare const LinkMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<LinkCapable> & T;
+export {};
+//# sourceMappingURL=link-mixin.d.ts.map

package/mixins/link-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-mixin.d.ts","sourceRoot":"","sources":["../../../../src/components/button/mixins/link-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,aAAK,WAAW,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,IAAI,MAAM,CAAC;IAExB;;OAEG;IACH,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAEzC;;OAEG;IACH,UAAU,IAAI,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,oFAkErB,CAAC"}

package/mixins/link-mixin.js

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Mixin that provides link behavior for button components
+ * Handles the distinction between button and anchor elements
+ *
+ * @param superClass - The base class to extend
+ * @returns Enhanced class with link capabilities
+ *
+ * @example
+ * ```typescript
+ * export class MyButton extends LinkMixin(LitElement) {
+ *   @property({ type: String }) type = ButtonType.Default;
+ *   @property({ type: String }) href = '';
+ *   @property({ type: String }) target = '';
+ *
+ *   render() {
+ *     const tag = this.getElementTag();
+ *     const attrs = this.getLinkAttributes();
+ *
+ *     return html`
+ *       <${tag} ...${attrs}>
+ *         <slot></slot>
+ *       </${tag}>
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export const LinkMixin = (superClass) => {
+    class LinkMixinClass extends superClass {
+        /**
+         * Check if the button should render as a link
+         */
+        isLinkType() {
+            return this.type === "link" /* ButtonType.Link */ && !!this.href;
+        }
+        /**
+         * Get the appropriate element tag based on button type
+         */
+        getElementTag() {
+            return this.isLinkType() ? 'a' : 'button';
+        }
+        /**
+         * Get link-specific attributes for anchor elements
+         */
+        getLinkAttributes() {
+            const attributes = {};
+            if (this.isLinkType()) {
+                attributes.href = this.href;
+                if (this.target) {
+                    attributes.target = this.target;
+                    // Add security attributes for external links
+                    if (this.target === '_blank') {
+                        attributes.rel = 'noopener noreferrer';
+                    }
+                }
+                attributes.role = 'link';
+            }
+            else {
+                attributes.role = 'button';
+            }
+            return attributes;
+        }
+        /**
+         * Handle link navigation with proper event dispatching
+         */
+        handleLinkNavigation(event) {
+            if (this.isLinkType()) {
+                // Dispatch custom navigation event if EventHandling mixin is available
+                if (typeof this.dispatchCustomEvent === 'function') {
+                    this.dispatchCustomEvent('link-navigation', {
+                        href: this.href,
+                        target: this.target,
+                        timestamp: Date.now(),
+                        originalEvent: event
+                    });
+                }
+            }
+        }
+    }
+    return LinkMixinClass;
+};
+//# sourceMappingURL=link-mixin.js.map

package/mixins/link-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-mixin.js","sourceRoot":"","sources":["../../../../src/components/button/mixins/link-mixin.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0CH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAoC,UAAa,EAAE,EAAE;IAC5E,MAAM,cAAe,SAAQ,UAAU;QAMrC;;WAEG;QACH,UAAU;YACR,OAAO,IAAI,CAAC,IAAI,iCAAoB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QACtD,CAAC;QAED;;WAEG;QACH,aAAa;YACX,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC5C,CAAC;QAED;;WAEG;QACH,iBAAiB;YACf,MAAM,UAAU,GAAwB,EAAE,CAAC;YAE3C,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;gBACrB,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBAE5B,IAAI,IAAI,CAAC,MAAM,EAAE;oBACf,UAAU,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;oBAEhC,6CAA6C;oBAC7C,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;wBAC5B,UAAU,CAAC,GAAG,GAAG,qBAAqB,CAAC;qBACxC;iBACF;gBAED,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC;aAC1B;iBAAM;gBACL,UAAU,CAAC,IAAI,GAAG,QAAQ,CAAC;aAC5B;YAED,OAAO,UAAU,CAAC;QACpB,CAAC;QAED;;WAEG;QACH,oBAAoB,CAAC,KAAY;YAC/B,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE;gBACrB,uEAAuE;gBACvE,IAAI,OAAQ,IAAY,CAAC,mBAAmB,KAAK,UAAU,EAAE;oBAC1D,IAAY,CAAC,mBAAmB,CAAC,iBAAiB,EAAE;wBACnD,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,MAAM,EAAE,IAAI,CAAC,MAAM;wBACnB,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE;wBACrB,aAAa,EAAE,KAAK;qBACrB,CAAC,CAAC;iBACJ;aACF;QACH,CAAC;KACF;IAED,OAAO,cAA8C,CAAC;AACxD,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement } from 'lit';\nimport { ButtonType } from '../button.types.js';\n\ntype Constructor<T = {}> = new (...args: any[]) => T;\n\n/**\n * Interface for components that support link behavior\n */\nexport interface LinkCapable {\n  /**\n   * Button type that determines if it should render as link\n   */\n  type: ButtonType;\n  \n  /**\n   * URL for link buttons\n   */\n  href: string;\n  \n  /**\n   * Target attribute for link buttons\n   */\n  target: string;\n  \n  /**\n   * Get the appropriate element tag (button or a)\n   */\n  getElementTag(): string;\n  \n  /**\n   * Get link-specific attributes\n   */\n  getLinkAttributes(): Record<string, any>;\n  \n  /**\n   * Check if component should render as a link\n   */\n  isLinkType(): boolean;\n}\n\n/**\n * Mixin that provides link behavior for button components\n * Handles the distinction between button and anchor elements\n * \n * @param superClass - The base class to extend\n * @returns Enhanced class with link capabilities\n * \n * @example\n * ```typescript\n * export class MyButton extends LinkMixin(LitElement) {\n *   @property({ type: String }) type = ButtonType.Default;\n *   @property({ type: String }) href = '';\n *   @property({ type: String }) target = '';\n *   \n *   render() {\n *     const tag = this.getElementTag();\n *     const attrs = this.getLinkAttributes();\n *     \n *     return html`\n *       <${tag} ...${attrs}>\n *         <slot></slot>\n *       </${tag}>\n *     `;\n *   }\n * }\n * ```\n */\nexport const LinkMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class LinkMixinClass extends superClass implements LinkCapable {\n    \n    declare type: ButtonType;\n    declare href: string;\n    declare target: string;\n    \n    /**\n     * Check if the button should render as a link\n     */\n    isLinkType(): boolean {\n      return this.type === ButtonType.Link && !!this.href;\n    }\n    \n    /**\n     * Get the appropriate element tag based on button type\n     */\n    getElementTag(): string {\n      return this.isLinkType() ? 'a' : 'button';\n    }\n    \n    /**\n     * Get link-specific attributes for anchor elements\n     */\n    getLinkAttributes(): Record<string, any> {\n      const attributes: Record<string, any> = {};\n      \n      if (this.isLinkType()) {\n        attributes.href = this.href;\n        \n        if (this.target) {\n          attributes.target = this.target;\n          \n          // Add security attributes for external links\n          if (this.target === '_blank') {\n            attributes.rel = 'noopener noreferrer';\n          }\n        }\n        \n        attributes.role = 'link';\n      } else {\n        attributes.role = 'button';\n      }\n      \n      return attributes;\n    }\n    \n    /**\n     * Handle link navigation with proper event dispatching\n     */\n    handleLinkNavigation(event: Event): void {\n      if (this.isLinkType()) {\n        // Dispatch custom navigation event if EventHandling mixin is available\n        if (typeof (this as any).dispatchCustomEvent === 'function') {\n          (this as any).dispatchCustomEvent('link-navigation', {\n            href: this.href,\n            target: this.target,\n            timestamp: Date.now(),\n            originalEvent: event\n          });\n        }\n      }\n    }\n  }\n\n  return LinkMixinClass as Constructor<LinkCapable> & T;\n};\n"]}