@nuralyui/button 0.0.14 → 0.0.15

package/button.style.js.map

@@ -1 +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"]}
+{"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../../src/components/button/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAue9B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Button component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-button component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const buttonStyles = css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    \n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n    border-color: var(--nuraly-color-border);\n    \n    /* Ensure clean state transitions when theme changes */\n    * {\n      transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    }\n  }\n\n  /* Force re-evaluation of theme-dependent properties on theme change */\n  :host([data-theme]) {\n    color: inherit;\n    background-color: inherit;\n  }\n\n  button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    font-family: var(--nuraly-font-family);\n    font-size: 0.875rem;\n    font-weight: var(--nuraly-font-weight-regular);\n    line-height: 1.125rem;\n    letter-spacing: 0.16px;\n    min-width: 5rem;\n    height: 3rem;\n    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n    border: 1px solid transparent;\n    border-radius: var(--nuraly-border-radius-button, var(--nuraly-border-radius-medium, 0));\n    background-color: var(--nuraly-color-background);\n    color: var(--nuraly-color-text);\n    text-decoration: none;\n    cursor: pointer;\n    transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    /* Reset any inherited styles that might interfere with theme switching */\n    box-shadow: none;\n    text-shadow: none;\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline);\n      outline-offset: var(--nuraly-focus-outline-offset);\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      /* Remove generic opacity - use specific disabled colors instead */\n    }\n\n    /* Icon styling */\n    nr-icon {\n      flex-shrink: 0;\n      width: var(--nuraly-button-icon-size, 1rem);\n      height: var(--nuraly-button-icon-size, 1rem);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      /* Better text alignment */\n      vertical-align: middle;\n      line-height: 1;\n      /* Ensure icon inherits text color */\n      color: inherit;\n      /* Override any size attribute with CSS variable */\n      font-size: var(--nuraly-button-icon-size, 1rem) !important;\n      transition: all var(--nuraly-transition-fast, 0.15s) ease;\n      /* Inherit cursor from button */\n      cursor: inherit;\n      /* Prevent icon from being focusable */\n      pointer-events: none;\n    }\n\n    /* Icon focus state */\n    &:focus:not(:disabled) nr-icon {\n      opacity: 1;\n      filter: brightness(1.1);\n    }\n\n    /* Icon active state */\n    &:active:not(:disabled) nr-icon {\n      opacity: 0.9;\n      transform: scale(0.95);\n    }\n\n    /* Icon hover state */\n    &:hover:not(:disabled) nr-icon {\n      opacity: 1;\n    }\n\n    /* Icon spacing - use gap for cleaner spacing */\n    gap: 0.5rem;\n    \n    /* Ensure proper alignment of content */\n    #container, [part=\"container\"] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: inherit;\n    }\n  }\n\n  /* Primary Button - Carbon Design System compliant */\n  :host([type=\"primary\"]) button {\n    background-color: var(--nuraly-color-button-primary);\n    border-color: var(--nuraly-color-button-primary);\n    color: var(--nuraly-color-button-primary-text, var(--nuraly-color-text-on-color));\n\n    &:hover:not(:disabled) {\n      background-color: var(--nuraly-color-button-primary-hover);\n      border-color: var(--nuraly-color-button-primary-hover);\n      color: var(--nuraly-color-button-primary-text-hover, var(--nuraly-color-text-on-color));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--nuraly-color-button-primary-active);\n      border-color: var(--nuraly-color-button-primary-active);\n      color: var(--nuraly-color-button-primary-text-active, var(--nuraly-color-text-on-color));\n    }\n\n    &:focus:not(:disabled) {\n      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n      outline-offset: 2px;\n      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n    }\n\n    &:disabled {\n      background-color: var(--nuraly-color-button-disabled);\n      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n      color: var(--nuraly-color-button-disabled-text);\n      cursor: not-allowed;\n      opacity: 1; /* Reset opacity for proper disabled state */\n    }\n  }\n\n  /* Secondary Button - Carbon Design System compliant */\n  :host([type=\"secondary\"]) button {\n    background-color: var(--nuraly-color-button-secondary);\n    border-color: var(--nuraly-color-button-secondary);\n    color: var(--nuraly-color-button-secondary-text, var(--nuraly-color-text-on-color));\n\n    &:hover:not(:disabled) {\n      background-color: var(--nuraly-color-button-secondary-hover);\n      border-color: var(--nuraly-color-button-secondary-hover);\n      color: var(--nuraly-color-button-secondary-text-hover, var(--nuraly-color-text-on-color));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--nuraly-color-button-secondary-active);\n      border-color: var(--nuraly-color-button-secondary-active);\n      color: var(--nuraly-color-button-secondary-text-active, var(--nuraly-color-text-on-color));\n    }\n\n    &:focus:not(:disabled) {\n      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n      outline-offset: 2px;\n      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n    }\n\n    &:disabled {\n      background-color: var(--nuraly-color-button-disabled);\n      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n      color: var(--nuraly-color-button-disabled-text);\n      cursor: not-allowed;\n      opacity: 1; /* Reset opacity for proper disabled state */\n    }\n  }\n\n  /* Default Button - Clean white/light style with defined border */\n  :host([type=\"default\"]) button {\n    background-color: var(--nuraly-color-background, #ffffff);\n    border-color: var(--nuraly-color-border, #d0d0d0);\n    color: var(--nuraly-color-text, #161616);\n\n    &:hover:not(:disabled) {\n      background-color: var(--nuraly-color-background-hover, #f4f4f4);\n      border-color: var(--nuraly-color-border-hover, #a8a8a8);\n      color: var(--nuraly-color-text, #161616);\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--nuraly-color-background-active, #e0e0e0);\n      border-color: var(--nuraly-color-border-active, #8d8d8d);\n      color: var(--nuraly-color-text, #161616);\n    }\n\n    &:focus:not(:disabled) {\n      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n      outline-offset: 2px;\n      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n    }\n\n    &:disabled {\n      background-color: var(--nuraly-color-button-disabled, #f4f4f4);\n      border-color: var(--nuraly-color-button-disabled-border, #c6c6c6);\n      color: var(--nuraly-color-button-disabled-text, #c6c6c6);\n      cursor: not-allowed;\n      opacity: 1; /* Reset opacity for proper disabled state */\n    }\n  }\n\n  /* Tertiary/Ghost Button - Carbon Design System compliant */\n  :host([type=\"tertiary\"]), :host([type=\"ghost\"]) button {\n    background-color: var(--nuraly-color-button-outline, transparent);\n    border-color: var(--nuraly-color-button-outline-border, var(--nuraly-color-border));\n    color: var(--nuraly-color-button-outline-text, var(--nuraly-color-button-tertiary, var(--nuraly-color-button-primary)));\n\n    &:hover:not(:disabled) {\n      background-color: var(--nuraly-color-button-outline-hover, var(--nuraly-color-background-hover));\n      border-color: var(--nuraly-color-button-outline-border-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary)));\n      color: var(--nuraly-color-button-outline-text-hover, var(--nuraly-color-button-tertiary-hover, var(--nuraly-color-button-primary-hover)));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--nuraly-color-button-outline-active, var(--nuraly-color-background-active));\n      border-color: var(--nuraly-color-button-outline-border-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));\n      color: var(--nuraly-color-button-outline-text-active, var(--nuraly-color-button-tertiary-active, var(--nuraly-color-button-primary-active)));\n    }\n\n    &:focus:not(:disabled) {\n      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n      outline-offset: 2px;\n      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n    }\n\n    &:disabled {\n      background-color: transparent;\n      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n      color: var(--nuraly-color-button-disabled-text);\n      cursor: not-allowed;\n      opacity: 1; /* Reset opacity for proper disabled state */\n    }\n  }\n\n  /* Danger Button - Carbon Design System compliant */\n  :host([type=\"danger\"]) button {\n    background-color: var(--nuraly-color-button-danger);\n    border-color: var(--nuraly-color-button-danger);\n    color: var(--nuraly-color-button-danger-text, var(--nuraly-color-text-on-color));\n\n    &:hover:not(:disabled) {\n      background-color: var(--nuraly-color-button-danger-hover);\n      border-color: var(--nuraly-color-button-danger-hover);\n      color: var(--nuraly-color-button-danger-text-hover, var(--nuraly-color-text-on-color));\n    }\n\n    &:active:not(:disabled) {\n      background-color: var(--nuraly-color-button-danger-active);\n      border-color: var(--nuraly-color-button-danger-active);\n      color: var(--nuraly-color-button-danger-text-active, var(--nuraly-color-text-on-color));\n    }\n\n    &:focus:not(:disabled) {\n      outline: 2px solid var(--nuraly-color-button-focus-outline, var(--nuraly-focus-color));\n      outline-offset: 2px;\n      box-shadow: var(--nuraly-shadow-button-focus, 0 0 0 2px var(--nuraly-color-button-focus-ring));\n    }\n\n    &:disabled {\n      background-color: var(--nuraly-color-button-disabled);\n      border-color: var(--nuraly-color-button-disabled-border, var(--nuraly-color-button-disabled));\n      color: var(--nuraly-color-button-disabled-text);\n      cursor: not-allowed;\n      opacity: 1; /* Reset opacity for proper disabled state */\n    }\n  }\n\n  /* Default size when no size attribute is provided (medium) */\n  :host(:not([size])) button {\n    height: var(--nuraly-size-md);\n    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n  }\n\n  /* Size variants */\n  :host([size=\"small\"]) button {\n    height: var(--nuraly-size-sm);\n    padding: var(--nuraly-spacing-01) var(--nuraly-spacing-03);\n    font-size: 0.75rem;\n    min-width: 4rem;\n  }\n\n  :host([size=\"medium\"]) button {\n    height: var(--nuraly-size-md);\n    padding: var(--nuraly-spacing-2) var(--nuraly-spacing-4);\n  }\n\n  :host([size=\"large\"]) button {\n    height: var(--nuraly-size-lg);\n    padding: var(--nuraly-spacing-05) var(--nuraly-spacing-06);\n    font-size: 1rem;\n    min-width: 6rem;\n  }\n\n  /* Full width */\n  :host([full-width]) {\n    width: 100%;\n  }\n\n  :host([full-width]) button {\n    width: 100%;\n  }\n\n  /* Loading state */\n  :host([loading]) button {\n    cursor: not-allowed;\n    opacity: 0.7;\n  }\n\n  /* Shape variants */\n  :host([shape=\"round\"]) button {\n    border-radius: 50%;\n    min-width: auto;\n    width: var(--nuraly-size-md);\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  :host([shape=\"round\"][size=\"small\"]) button {\n    width: var(--nuraly-size-sm);\n  }\n\n  :host([shape=\"round\"][size=\"medium\"]) button {\n    width: var(--nuraly-size-md);\n  }\n\n  :host([shape=\"round\"][size=\"large\"]) button {\n    width: var(--nuraly-size-lg);\n  }\n\n  /* Enhanced Ripple Effect Animation - Theme-aware */\n  .ripple {\n    position: absolute;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.6);\n    transform: scale(0);\n    animation: ripple-animation 0.6s linear;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  @keyframes ripple-animation {\n    0% {\n      transform: scale(0);\n      opacity: 1;\n    }\n    70% {\n      transform: scale(3);\n      opacity: 0.5;\n    }\n    100% {\n      transform: scale(4);\n      opacity: 0;\n    }\n  }\n\n  /* Ripple effect for different button types - Carbon Design System compliant */\n  :host([type=\"primary\"]) .ripple {\n    background: rgba(255, 255, 255, 0.4);\n  }\n\n  :host([type=\"secondary\"]) .ripple {\n    background: rgba(255, 255, 255, 0.3);\n  }\n\n  :host([type=\"default\"]) .ripple {\n    background: var(--nuraly-color-text, #161616);\n    opacity: 0.1;\n  }\n\n  :host([type=\"ghost\"]) .ripple,\n  :host([type=\"tertiary\"]) .ripple {\n    background: var(--nuraly-color-button-tertiary, #0f62fe);\n    opacity: 0.2;\n  }\n\n  :host([type=\"danger\"]) .ripple {\n    background: rgba(255, 255, 255, 0.4);\n  }\n\n  /* Theme-specific ripple adjustments for dark theme */\n  [data-theme=\"carbon-dark\"] :host([type=\"default\"]) .ripple {\n    background: var(--nuraly-color-text, #f4f4f4);\n    opacity: 0.1;\n  }\n\n  [data-theme=\"carbon-dark\"] :host([type=\"ghost\"]) .ripple,\n  [data-theme=\"carbon-dark\"] :host([type=\"tertiary\"]) .ripple {\n    background: var(--nuraly-color-button-tertiary, #78a9ff);\n    opacity: 0.2;\n  }\n\n  [data-theme=\"carbon-dark\"] :host([type=\"primary\"]) .ripple {\n    background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n  }\n\n  [data-theme=\"carbon-dark\"] :host([type=\"secondary\"]) .ripple {\n    background: rgba(22, 22, 22, 0.3); /* Dark ripple for light buttons */\n  }\n\n  [data-theme=\"carbon-dark\"] :host([type=\"danger\"]) .ripple {\n    background: rgba(22, 22, 22, 0.4); /* Dark ripple for light buttons */\n  }\n\n  /* ========================================\n   * CARBON THEME SPECIFIC STYLING\n   * Enhanced padding and icon centering for Carbon Design System\n   * ======================================== */\n  \n  /* Carbon theme button styling - apply to all carbon themes */\n  :host([data-theme*=\"carbon\"]) button,\n  [data-theme*=\"carbon\"] :host button {\n    /* Better baseline alignment for icon and text */\n    align-items: center;\n    \n    /* Enhanced icon alignment and spacing for Carbon */\n    nr-icon {\n      width: var(--nuraly-button-icon-size, 1rem);\n      height: var(--nuraly-button-icon-size, 1rem);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      /* Perfect vertical alignment with text baseline */\n      vertical-align: middle;\n      line-height: 1;\n    }\n    \n    /* Icon spacing for Carbon theme - improved approach */\n    gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n  }\n  \n  /* Specific Carbon theme selectors for better targeting */\n  [data-theme=\"carbon-light\"] nr-button button,\n  [data-theme=\"carbon-dark\"] nr-button button,\n  [data-theme=\"carbon\"] nr-button button {\n    /* Better baseline alignment for icon and text */\n    align-items: center;\n    \n    /* Enhanced icon alignment and spacing for Carbon */\n    nr-icon {\n      width: var(--nuraly-button-icon-size, 1rem);\n      height: var(--nuraly-button-icon-size, 1rem);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      /* Perfect vertical alignment with text baseline */\n      vertical-align: middle;\n      line-height: 1;\n      /* Slight adjustment for perfect optical centering */\n      margin-top: -1px;\n    }\n    \n    /* Target the SVG inside nr-icon for better alignment */\n    nr-icon svg {\n      display: block;\n      margin: 0 auto;\n    }\n    \n    /* Icon spacing for Carbon theme */\n    gap: var(--nuraly-button-icon-spacing, var(--nuraly-spacing-03, 0.5rem));\n    \n    /* Ensure text is also properly centered */\n    span#container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      height: 100%;\n      line-height: 1;\n    }\n    \n    /* Ensure slot content aligns properly */\n    slot#slot {\n      display: inline-block;\n      line-height: inherit;\n    }\n  }\n`;\n\nexport const styles = buttonStyles;\n"]}

package/button.types.d.ts

@@ -1,6 +1,7 @@
 export declare const enum ButtonType {
     Primary = "primary",
     Secondary = "secondary",
+    Tertiary = "tertiary",
     Danger = "danger",
     Ghost = "ghost",
     Default = "default",
@@ -9,8 +10,9 @@ export declare const enum ButtonType {
 }
 export declare const enum ButtonSize {
     Small = "small",
-    Default = "default",
-    Large = "large"
+    Medium = "medium",
+    Large = "large",
+    Default = "medium"
 }
 export declare const enum ButtonShape {
     Default = "default",
@@ -21,5 +23,39 @@ export declare const enum IconPosition {
     Left = "left",
     Right = "right"
 }
+/**
+ * Enhanced icon configuration for buttons
+ */
+export interface ButtonIconConfig {
+    /** Icon name (required) */
+    name: string;
+    /** Icon type - solid or regular */
+    type?: 'solid' | 'regular';
+    /** Icon size override */
+    size?: string;
+    /** Icon color override */
+    color?: string;
+    /** Alternative text for accessibility */
+    alt?: string;
+    /** Custom attributes to pass to icon */
+    attributes?: Record<string, string>;
+}
+/**
+ * Union type for icon input - supports both simple string and enhanced config
+ */
+export declare type ButtonIcon = string | ButtonIconConfig;
+/**
+ * Array of icons (supports 1-2 icons)
+ */
+export declare type ButtonIcons = ButtonIcon[];
+/**
+ * Alternative icon configuration using positioned properties
+ */
+export interface ButtonIconsConfig {
+    /** Left icon configuration */
+    left?: ButtonIcon;
+    /** Right icon configuration */
+    right?: ButtonIcon;
+}
 export declare const EMPTY_STRING = "";
 //# sourceMappingURL=button.types.d.ts.map

package/button.types.js.map

@@ -1 +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"]}
+{"version":3,"file":"button.types.js","sourceRoot":"","sources":["../../../src/components/button/button.types.ts"],"names":[],"mappings":"AAmEA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const enum ButtonType {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Tertiary = 'tertiary', // Carbon Ghost equivalent\n  Danger = 'danger',\n  Ghost = 'ghost', // Alias for tertiary for backward compatibility\n  Default = 'default',\n  Text = 'text',\n  Link = 'link',\n}\n\nexport const enum ButtonSize {\n  Small = 'small', // 32px -  small\n  Medium = 'medium', // 40px -  medium (default)\n  Large = 'large', // 48px -  large\n  Default = 'medium', // Default to medium for better UX\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}\n\n/**\n * Enhanced icon configuration for buttons\n */\nexport interface ButtonIconConfig {\n  /** Icon name (required) */\n  name: string;\n  /** Icon type - solid or regular */\n  type?: 'solid' | 'regular';\n  /** Icon size override */\n  size?: string;\n  /** Icon color override */\n  color?: string;\n  /** Alternative text for accessibility */\n  alt?: string;\n  /** Custom attributes to pass to icon */\n  attributes?: Record<string, string>;\n}\n\n/**\n * Union type for icon input - supports both simple string and enhanced config\n */\nexport type ButtonIcon = string | ButtonIconConfig;\n\n/**\n * Array of icons (supports 1-2 icons)\n */\nexport type ButtonIcons = ButtonIcon[];\n\n/**\n * Alternative icon configuration using positioned properties\n */\nexport interface ButtonIconsConfig {\n  /** Left icon configuration */\n  left?: ButtonIcon;\n  /** Right icon configuration */\n  right?: ButtonIcon;\n}\n\nexport const EMPTY_STRING = '';\n"]}

package/package.json

@@ -1,17 +1,44 @@
 {
     "name": "@nuralyui/button",
-    "version": "0.0.14",
+    "version": "0.0.15",
     "description": "Button component for NuralyUI library",
     "main": "index.js",
     "type": "module",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "*.js.map",
+        "button.bundled.js",
+        "bundle.js"
+    ],
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Nuralyio/NuralyUI.git",
+        "directory": "src/components/button"
+    },
+    "keywords": [
+        "web-components",
+        "lit-element",
+        "button",
+        "ui-components",
+        "typescript"
+    ],
     "author": "Labidi Aymen",
     "license": "ISC",
     "nuralyui": {
         "requiredComponents": [
-            "hy-icon"
+            "nr-icon"
         ]
     },
     "peerDependencies": {

package/button.component.d.ts.map

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

package/button.style.d.ts.map

@@ -1 +0,0 @@
-{"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/button.style.variables.d.ts

@@ -1,11 +0,0 @@
-/**
- * Button component CSS custom properties (design tokens)
- *
- * This file contains all the CSS custom properties used by the nr-button component,
- * organized by functionality and including both light and dark theme variants.
- *
- * The styling system uses CSS custom properties with fallbacks to allow
- * for both global and local customization of button appearance.
- */
-export declare const buttonVariables: import("lit").CSSResult;
-//# sourceMappingURL=button.style.variables.d.ts.map

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

@@ -1 +0,0 @@
-{"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/button.style.variables.js

@@ -1,194 +0,0 @@
-import { css } from 'lit';
-/**
- * Button component CSS custom properties (design tokens)
- *
- * This file contains all the CSS custom properties used by the nr-button component,
- * organized by functionality and including both light and dark theme variants.
- *
- * The styling system uses CSS custom properties with fallbacks to allow
- * for both global and local customization of button appearance.
- */
-export const buttonVariables = css `
-  :host {
-    /* ----------------------------------------
-     * DEFAULT BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-border-top: 2px solid #d0d0d0;
-    --hybrid-button-local-border-bottom: 2px solid #d0d0d0;
-    --hybrid-button-local-border-left: 2px solid #d0d0d0;
-    --hybrid-button-local-border-right: 2px solid #d0d0d0;
-    --hybrid-button-local-border-top-left-radius: 0px;
-    --hybrid-button-local-border-top-right-radius: 0px;
-    --hybrid-button-local-border-bottom-left-radius: 0px;
-    --hybrid-button-local-border-bottom-right-radius: 0px;
-    --hybrid-button-local-background-color: #f9f9f9;
-    --hybrid-button-local-text-color: #393939;
-    --hybrid-button-local-hover-border-color: #1677ff;
-    --hybrid-button-local-hover-color: #1677ff;
-    --hybrid-button-local-font-size: 0.9rem;
-    --hybrid-button-local-font-weight: normal;
-    --hybrid-button-local-text-transform: none;
-    --hybrid-button-local-active-border-color: #1661b1;
-    --hybrid-button-local-active-color: #184d86;
-    --hybrid-button-local-disabled-background-color: #c6c6c6;
-    --hybrid-button-local-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-disabled-border-color: #bbb;
-    --hybrid-button-local-height: auto;
-    --hybrid-button-local-width: auto;
-    --hybrid-button-local-padding-y: 0.5rem;
-    --hybrid-button-local-padding-x: 0.6rem;
-    --hybrid-button-local-icon-width: 18px;
-    --hybrid-button-local-icon-height: 14px;
-
-    /* ----------------------------------------
-     * PRIMARY BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-primary-border-color: #0f62fe;
-    --hybrid-button-local-primary-background-color: #0f62fe;
-    --hybrid-button-local-primary-text-color: #ffffff;
-    --hybrid-button-local-primary-outline: 1px solid white;
-    --hybrid-button-local-primary-outline-offset: -3px;
-    --hybrid-button-local-primary-hover-background-color: #0353e9;
-    --hybrid-button-local-primary-hover-border-color: #0353e9;
-    --hybrid-button-local-primary-active-background-color: #0f62fe;
-    --hybrid-button-local-primary-active-border-color: #0f62fe;
-    --hybrid-button-local-primary-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-primary-disabled-background-color: #c6c6c6;
-    --hybrid-button-local-primary-disabled-border-color: #c6c6c6;
-    --hybrid-button-local-primary-dashed-border-color: #ffffff;
-
-    /* ----------------------------------------
-     * DANGER BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-danger-background-color: #da1e28;
-    --hybrid-button-local-danger-text-color: #ffffff;
-    --hybrid-button-local-danger-border-color: #da1e28;
-    --hybrid-button-local-danger-outline: 1px solid white;
-    --hybrid-button-local-danger-outline-offset: -3px;
-    --hybrid-button-local-danger-hover-background-color: #ba1b23;
-    --hybrid-button-local-danger-hover-border-color: #ba1b23;
-    --hybrid-button-local-danger-active-background-color: #da1e28;
-    --hybrid-button-local-danger-active-border-color: #0f62fe;
-    --hybrid-button-local-danger-disabled-background-color: #c6c6c6;
-    --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-danger-disabled-border-color: #c6c6c6;
-    --hybrid-button-local-danger-dashed-border-color: #ffffff;
-
-    /* ----------------------------------------
-     * GHOST BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-ghost-background-color: #ffffff;
-    --hybrid-button-local-ghost-text-color: #0f62fe;
-    --hybrid-button-local-ghost-border-color: #ffffff;
-    --hybrid-button-local-ghost-active-background-color: #ffffff;
-    --hybrid-button-local-ghost-active-text-color: #054ada;
-    --hybrid-button-local-ghost-active-border-color: #0f62fe;
-    --hybrid-button-local-ghost-hover-background-color: #e5e5e5;
-    --hybrid-button-local-ghost-hover-border-color: #e5e5e5;
-    --hybrid-button-local-ghost-hover-text-color: #054ada;
-    --hybrid-button-local-ghost-disabled-background-color: #ffffff;
-    --hybrid-button-local-ghost-disabled-text-color: #c6c6c6;
-    --hybrid-button-local-ghost-disabled-border-color: #ffffff;
-    --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
-
-    /* ----------------------------------------
-     * SECONDARY BUTTON STYLES
-     * ---------------------------------------- */
-    --hybrid-button-local-secondary-background-color: #393939;
-    --hybrid-button-local-secondary-border-color: #393939;
-    --hybrid-button-local-secondary-text-color: #ffffff;
-    --hybrid-button-local-secondary-outline: 1px solid white;
-    --hybrid-button-local-secondary-outline-offset: -3px;
-    --hybrid-button-local-secondary-hover-background-color: #4c4c4c;
-    --hybrid-button-local-secondary-hover-border-color: #4c4c4c;
-    --hybrid-button-local-secondary-active-background-color: #393939;
-    --hybrid-button-local-secondary-active-border-color: #0f62fe;
-    --hybrid-button-local-secondary-disabled-background-color: #c6c6c6;
-    --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-secondary-disabled-border-color: #c6c6c6;
-    --hybrid-button-local-secondary-dashed-border-color: #ffffff;
-
-    /* ----------------------------------------
-     * SIZE VARIANTS
-     * ---------------------------------------- */
-    /* Large button sizing */
-    --hybrid-large-button-local-padding-y: 0.5rem;
-    --hybrid-large-button-local-padding-x: 0.9rem;
-    --hybrid-large-button-local-font-size: 1rem;
-
-    /* Small button sizing */
-    --hybrid-small-button-local-padding-y: 0.5rem;
-    --hybrid-small-button-local-padding-x: 0.4rem;
-    --hybrid-small-button-local-font-size: 0.7rem;
-  }
-
-  /* ========================================
-   * DARK THEME OVERRIDES
-   * ======================================== */
-  
-  /**
-   * Dark theme styles using data-theme attribute on button element
-   * These override the light theme defaults when data-theme="dark" is applied
-   */
-  button[data-theme="dark"] {
-    /* Default button dark theme overrides */
-    --hybrid-button-local-background-color: #000000;
-    --hybrid-button-local-text-color: #ffffff;
-    --hybrid-button-local-hover-border-color: #6f6f6f;
-    --hybrid-button-local-hover-color: #6f6f6f;
-    --hybrid-button-local-active-border-color: #c6c6c6;
-    --hybrid-button-local-active-color: #c6c6c6;
-    --hybrid-button-local-disabled-background-color: #c6c6c6;
-
-    /* Primary button dark theme overrides */
-    --hybrid-button-local-primary-outline: 1px solid black;
-    --hybrid-button-local-primary-outline-offset: -3px;
-    --hybrid-button-local-primary-active-border-color: #ffffff;
-    --hybrid-button-local-primary-disabled-text-color: #c6c6c6;
-    --hybrid-button-local-primary-disabled-background-color: #8d8d8d;
-    --hybrid-button-local-primary-disabled-border-color: #8d8d8d;
-
-    /* Secondary button dark theme overrides */
-    --hybrid-button-local-secondary-background-color: #6f6f6f;
-    --hybrid-button-local-secondary-border-color: #6f6f6f;
-    --hybrid-button-local-secondary-text-color: #ffffff;
-    --hybrid-button-local-secondary-active-border-color: #ffffff;
-    --hybrid-button-local-secondary-active-background-color: #6f6f6f;
-    --hybrid-button-local-secondary-outline: 1px solid black;
-    --hybrid-button-local-secondary-outline-offset: -3px;
-    --hybrid-button-local-secondary-hover-background-color: #606060;
-    --hybrid-button-local-secondary-hover-border-color: #606060;
-    --hybrid-button-local-secondary-disabled-background-color: #6f6f6f;
-    --hybrid-button-local-secondary-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-secondary-disabled-border-color: #6f6f6f;
-    --hybrid-button-local-secondary-dashed-border-color: #ffffff;
-
-    /* Ghost button dark theme overrides */
-    --hybrid-button-local-ghost-background-color: transparent;
-    --hybrid-button-local-ghost-text-color: #78a9ff;
-    --hybrid-button-local-ghost-border-color: transparent;
-    --hybrid-button-local-ghost-active-background-color: transparent;
-    --hybrid-button-local-ghost-active-text-color: #a6c8ff;
-    --hybrid-button-local-ghost-active-border-color: #ffffff;
-    --hybrid-button-local-ghost-hover-background-color: #4c4c4c;
-    --hybrid-button-local-ghost-hover-border-color: #4c4c4c;
-    --hybrid-button-local-ghost-hover-text-color: #a6c8ff;
-    --hybrid-button-local-ghost-disabled-background-color: transparent;
-    --hybrid-button-local-ghost-disabled-text-color: #6f6f6f;
-    --hybrid-button-local-ghost-disabled-border-color: transparent;
-    --hybrid-button-local-ghost-dashed-border-color: #c6c6c6;
-
-    /* Danger button dark theme overrides */
-    --hybrid-button-local-danger-outline: 1px solid #000000;
-    --hybrid-button-local-danger-outline-offset: -3px;
-    --hybrid-button-local-danger-hover-background-color: #ba1b23;
-    --hybrid-button-local-danger-hover-border-color: #ba1b23;
-    --hybrid-button-local-danger-active-background-color: #da1e28;
-    --hybrid-button-local-danger-active-border-color: #ffffff;
-    --hybrid-button-local-danger-disabled-background-color: #6f6f6f;
-    --hybrid-button-local-danger-disabled-text-color: #8d8d8d;
-    --hybrid-button-local-danger-disabled-border-color: #6f6f6f;
-    --hybrid-button-local-danger-dashed-border-color: #ffffff;
-  }
-`;
-//# sourceMappingURL=button.style.variables.js.map

package/button.style.variables.js.map

@@ -1 +0,0 @@
-{"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/button.types.d.ts.map

@@ -1 +0,0 @@
-{"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/demo/buttons-demo.d.ts

@@ -1,17 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-import '../button.component';
-import '../../../helpers/ThemeHandler';
-export declare class ElButtonDemoElement extends LitElement {
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'nr-buttons-demo': ElButtonDemoElement;
-    }
-}
-//# sourceMappingURL=buttons-demo.d.ts.map

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

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