@aquera/nile-elements 0.1.40-beta-1.3 → 0.1.40-beta-1.6

package/dist/nile-button/nile-button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button.cjs.js","sources":["../../../src/nile-button/nile-button.ts"],"sourcesContent":["import '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FormControlController, validValidityState } from '../internal/form';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport { styles } from './nile-button.css';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\nimport type { NileFormControl } from '../internal/nile-element';\nimport NileElement from '../internal/nile-element';\nimport { literal } from 'lit/static-html.js';\n/**\n * @summary Buttons represent actions that are available to the user.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n * @dependency nile-spinner\n *\n * @event nile-blur - Emitted when the button loses focus.\n * @event nile-focus - Emitted when the button gains focus.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `<nile-icon>` element.\n */\n\n@customElement('nile-button')\nexport class NileButton extends NileElement implements NileFormControl {\n  static styles: CSSResultGroup = styles;\n\n  private readonly formControlController = new FormControlController(this, {\n    form: input => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute('form')) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute('form')!;\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest('form');\n    },\n    assumeInteractionOn: ['click'],\n  });\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    '[default]',\n    'prefix',\n    'suffix'\n  );\n\n  @query('.button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n  @state() invalid = false;\n  @property() title = ''; // make reactive to pass through\n\n  /** The button's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'caution'\n    | 'ghost'\n    | 'destructive'\n    | 'secondary-grey'\n    | 'secondary-blue' = 'primary';\n\n  /** The button's size. */\n  @property({ reflect: true }) size: 'medium' = 'medium';\n\n  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */\n  @property({ type: Boolean, reflect: true }) caret = false;\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the button in a loading state. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Draws an outlined button. */\n  @property({ type: Boolean, reflect: true }) outline = false;\n\n  /** Draws a pill-style button with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /**\n   * Draws a circular icon button. When this attribute is present, the button expects a single `<nile-icon>` in the\n   * default slot.\n   */\n  @property({ type: Boolean, reflect: true }) circle = false;\n\n  /**\n   * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n   * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.\n   */\n  @property() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\n   * This attribute is ignored when `href` is present.\n   */\n  @property() name = '';\n\n  /**\n   * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\n   * button is the submitter. This attribute is ignored when `href` is present.\n   */\n  @property() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href = '';\n\n  /** Tells the browser where to open the link. Only used when `href` is present. */\n  @property() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\n   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\n   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by\n   * setting the attribute to an empty string or a value of your choice, respectively.\n   */\n  @property() rel = 'noreferrer noopener';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */\n  @property() download?: string;\n\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property() form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ attribute: 'formaction' }) formAction: string;\n\n  /** Used to override the form owner's `enctype` attribute.  */\n  @property({ attribute: 'formenctype' })\n  formEnctype:\n    | 'application/x-www-form-urlencoded'\n    | 'multipart/form-data'\n    | 'text/plain';\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: 'formnovalidate', type: Boolean })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ attribute: 'formtarget' }) formTarget:\n    | '_self'\n    | '_blank'\n    | '_parent'\n    | '_top'\n    | string;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-border' })\n  hideBorder = false;\n\n  /** Gets the validity state object */\n  get validity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validity;\n    }\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validationMessage;\n    }\n\n    return '';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n    this.emit('nile-destroy');\n  }\n\n  firstUpdated() {\n    if (this.isButton()) {\n      this.formControlController.updateValidity();\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick() {\n    if (this.type === 'submit') {\n      this.formControlController.submit(this);\n    }\n\n    if (this.type === 'reset') {\n      this.formControlController.reset(this);\n    }\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled or loading\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private isButton() {\n    return this.href ? false : true;\n  }\n\n  private isLink() {\n    return this.href ? true : false;\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.isButton()) {\n      // Disabled form controls are always valid\n      this.formControlController.setValidity(this.disabled);\n    }\n  }\n\n  /** Simulates a click on the button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  blur() {\n    this.button.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).checkValidity();\n    }\n\n    return true;\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).reportValidity();\n    }\n\n    return true;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    if (this.isButton()) {\n      (this.button as HTMLButtonElement).setCustomValidity(message);\n      this.formControlController.updateValidity();\n    }\n  }\n\n  render(): TemplateResult {\n    const isLink = this.isLink();\n    const tag = isLink ? literal`a` : literal`button`;\n\n    const variantCaretColors = {\n      primary: 'white',\n      secondary: 'black',\n      tertiary: 'black',\n      caution: 'white',\n      ghost: 'black',\n      destructive: 'white',\n      'secondary-grey': 'black',\n      'secondary-blue': 'black',\n      'tertiary-blue': 'black',\n    };\n\n    if(this.isLink()){\n      return html`\n        <a\n          part=\"base\"\n          class=${classMap({\n            button: true,\n            'button--primary': this.variant === 'primary',\n            'button--secondary': this.variant === 'secondary',\n            'button--tertiary': this.variant === 'tertiary',\n            'button--caution': this.variant === 'caution',\n            'button--ghost': this.variant === 'ghost',\n            'button--destructive': this.variant === 'destructive',\n            'button--secondary-grey': this.variant === 'secondary-grey',\n            'button--secondary-blue': this.variant === 'secondary-blue',\n            'button--hideborder': this.hideBorder,\n            'button--medium': this.size === 'medium',\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--standard': !this.outline,\n            'button--outline': this.outline,\n            'button--pill': this.pill,\n            'button--has-label': this.hasSlotController.test('[default]'),\n            'button--has-prefix': this.hasSlotController.test('prefix'),\n            'button--has-suffix': this.hasSlotController.test('suffix'),\n          })}\n          href=${ifDefined(this.href)}\n          target=${ifDefined(this.target)}\n          download=${ifDefined(this.download)}\n          rel=${ifDefined(this.rel)}\n          title=${this.title}\n          role=\"button\"\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n        >\n          <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n          <slot part=\"label\" class=\"button__label\"></slot>\n          <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n          ${this.caret\n            ? html`\n                <nile-icon\n                  part=\"caret\"\n                  class=\"button__caret\"\n                  color=\"${variantCaretColors[this.variant]}\"\n                  name=\"arrowdown\"\n                ></nile-icon>\n              `\n            : ''}\n          ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}\n        </a>\n      `;\n    }\n    else{\n      return html`\n      <button\n        part=\"base\"\n        class=${classMap({\n          button: true,\n          'button--primary': this.variant === 'primary',\n          'button--secondary': this.variant === 'secondary',\n          'button--tertiary': this.variant === 'tertiary',\n          'button--caution': this.variant === 'caution',\n          'button--ghost': this.variant === 'ghost',\n          'button--destructive': this.variant === 'destructive',\n          'button--secondary-grey': this.variant === 'secondary-grey',\n          'button--secondary-blue': this.variant === 'secondary-blue',\n          'button--hideborder': this.hideBorder,\n          'button--medium': this.size === 'medium',\n          'button--caret': this.caret,\n          'button--circle': this.circle,\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--loading': this.loading,\n          'button--standard': !this.outline,\n          'button--outline': this.outline,\n          'button--pill': this.pill,\n          'button--has-label': this.hasSlotController.test('[default]'),\n          'button--has-prefix': this.hasSlotController.test('prefix'),\n          'button--has-suffix': this.hasSlotController.test('suffix'),\n        })}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        title=${this.title}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @invalid=${this.handleInvalid}\n        @click=${this.handleClick}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n        <slot part=\"label\" class=\"button__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        ${this.caret\n          ? html`\n              <nile-icon\n                part=\"caret\"\n                class=\"button__caret\"\n                color=\"${variantCaretColors[this.variant]}\"\n                name=\"arrowdown\"\n              ></nile-icon>\n            `\n          : ''}\n        ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}\n      </button>\n    `;\n    }\n  }\n}\n\nexport default NileButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-button': NileButton;\n  }\n}\n"],"names":["NileButton","_a","d","constructor","this","formControlController","FormControlController","form","input","hasAttribute","doc","getRootNode","formId","getAttribute","getElementById","closest","assumeInteractionOn","hasSlotController","HasSlotController","hasFocus","invalid","title","variant","size","caret","disabled","loading","outline","pill","circle","type","name","value","href","rel","hideBorder","_this","_inherits","_createClass","key","get","isButton","button","validity","validValidityState","validationMessage","connectedCallback","super","handleHostClick","bind","addEventListener","emit","disconnectedCallback","removeEventListener","firstUpdated","updateValidity","handleBlur","handleFocus","handleClick","submit","reset","event","preventDefault","stopImmediatePropagation","handleInvalid","setValidity","emitInvalidEvent","isLink","handleDisabledChange","click","focus","options","blur","checkValidity","getForm","reportValidity","setCustomValidity","message","render","literal","_templateObject","_taggedTemplateLiteral","_templateObject2","variantCaretColors","primary","secondary","tertiary","caution","ghost","destructive","html","_templateObject3","classMap","test","ifDefined","target","download","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","NileElement","styles","__decorate","query","prototype","state","property","reflect","Boolean","attribute","watch","waitUntilFirstUpdate","_export","customElement"],"mappings":"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"}
+{"version":3,"file":"nile-button.cjs.js","sources":["../../../src/nile-button/nile-button.ts"],"sourcesContent":["import '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { FormControlController, validValidityState } from '../internal/form';\nimport { HasSlotController } from '../internal/slot';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { watch } from '../internal/watch';\nimport { styles } from './nile-button.css';\nimport type { CSSResultGroup, TemplateResult } from 'lit';\nimport type { NileFormControl } from '../internal/nile-element';\nimport NileElement from '../internal/nile-element';\nimport { literal } from 'lit/static-html.js';\n/**\n * @summary Buttons represent actions that are available to the user.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n * @dependency nile-spinner\n *\n * @event nile-blur - Emitted when the button loses focus.\n * @event nile-focus - Emitted when the button gains focus.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @slot - The button's label.\n * @slot prefix - A presentational prefix icon or similar element.\n * @slot suffix - A presentational suffix icon or similar element.\n *\n * @csspart base - The component's base wrapper.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart label - The button's label.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart caret - The button's caret icon, an `<nile-icon>` element.\n */\n\n@customElement('nile-button')\nexport class NileButton extends NileElement implements NileFormControl {\n  static styles: CSSResultGroup = styles;\n\n  private readonly formControlController = new FormControlController(this, {\n    form: input => {\n      // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query\n      // the form from the same root using its id\n      if (input.hasAttribute('form')) {\n        const doc = input.getRootNode() as Document | ShadowRoot;\n        const formId = input.getAttribute('form')!;\n        return doc.getElementById(formId) as HTMLFormElement;\n      }\n\n      // Fall back to the closest containing form\n      return input.closest('form');\n    },\n    assumeInteractionOn: ['click'],\n  });\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    '[default]',\n    'prefix',\n    'suffix'\n  );\n\n  @query('.button') button: HTMLButtonElement | HTMLLinkElement;\n\n  @state() private hasFocus = false;\n  @state() invalid = false;\n  @property() title = ''; // make reactive to pass through\n\n  /** The button's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'caution'\n    | 'ghost'\n    | 'destructive'\n    | 'secondary-grey'\n    | 'secondary-blue' = 'primary';\n\n  /** The button's size. */\n  @property({ reflect: true }) size: 'medium' = 'medium';\n\n  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */\n  @property({ type: Boolean, reflect: true }) caret = false;\n\n  /** Disables the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the button in a loading state. */\n  @property({ type: Boolean, reflect: true }) loading = false;\n\n  /** Draws an outlined button. */\n  @property({ type: Boolean, reflect: true }) outline = false;\n\n  /** Draws a pill-style button with rounded edges. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /**\n   * Draws a circular icon button. When this attribute is present, the button expects a single `<nile-icon>` in the\n   * default slot.\n   */\n  @property({ type: Boolean, reflect: true }) circle = false;\n\n  /**\n   * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native\n   * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.\n   */\n  @property() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.\n   * This attribute is ignored when `href` is present.\n   */\n  @property() name = '';\n\n  /**\n   * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this\n   * button is the submitter. This attribute is ignored when `href` is present.\n   */\n  @property() value = '';\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */\n  @property() href = '';\n\n  /** Tells the browser where to open the link. Only used when `href` is present. */\n  @property() target: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the\n   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a\n   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by\n   * setting the attribute to an empty string or a value of your choice, respectively.\n   */\n  @property() rel = 'noreferrer noopener';\n\n  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */\n  @property() download?: string;\n\n  /**\n   * The \"form owner\" to associate the button with. If omitted, the closest containing form will be used instead. The\n   * value of this attribute must be an id of a form in the same document or shadow root as the button.\n   */\n  @property() form: string;\n\n  /** Used to override the form owner's `action` attribute. */\n  @property({ attribute: 'formaction' }) formAction: string;\n\n  /** Used to override the form owner's `enctype` attribute.  */\n  @property({ attribute: 'formenctype' })\n  formEnctype:\n    | 'application/x-www-form-urlencoded'\n    | 'multipart/form-data'\n    | 'text/plain';\n\n  /** Used to override the form owner's `method` attribute.  */\n  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';\n\n  /** Used to override the form owner's `novalidate` attribute. */\n  @property({ attribute: 'formnovalidate', type: Boolean })\n  formNoValidate: boolean;\n\n  /** Used to override the form owner's `target` attribute. */\n  @property({ attribute: 'formtarget' }) formTarget:\n    | '_self'\n    | '_blank'\n    | '_parent'\n    | '_top'\n    | string;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-border' })\n  hideBorder = false;\n\n  /** Gets the validity state object */\n  get validity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validity;\n    }\n\n    return validValidityState;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).validationMessage;\n    }\n\n    return '';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n    this.emit('nile-destroy');\n  }\n\n  firstUpdated() {\n    if (this.isButton()) {\n      this.formControlController.updateValidity();\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('nile-blur');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('nile-focus');\n  }\n\n  private handleClick() {\n    if (this.type === 'submit') {\n      this.formControlController.submit(this);\n    }\n\n    if (this.type === 'reset') {\n      this.formControlController.reset(this);\n    }\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled or loading\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private isButton() {\n    return this.href ? false : true;\n  }\n\n  private isLink() {\n    return this.href ? true : false;\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.isButton()) {\n      // Disabled form controls are always valid\n      this.formControlController.setValidity(this.disabled);\n    }\n  }\n\n  /** Simulates a click on the button. */\n  click() {\n    this.button.click();\n  }\n\n  /** Sets focus on the button. */\n  focus(options?: FocusOptions) {\n    this.button.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  blur() {\n    this.button.blur();\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).checkValidity();\n    }\n\n    return true;\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    if (this.isButton()) {\n      return (this.button as HTMLButtonElement).reportValidity();\n    }\n\n    return true;\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    if (this.isButton()) {\n      (this.button as HTMLButtonElement).setCustomValidity(message);\n      this.formControlController.updateValidity();\n    }\n  }\n\n  render(): TemplateResult {\n    const isLink = this.isLink();\n    const tag = isLink ? literal`a` : literal`button`;\n\n    const variantCaretColors = {\n      primary: 'white',\n      secondary: 'black',\n      tertiary: 'black',\n      caution: 'white',\n      ghost: 'black',\n      destructive: 'white',\n      'secondary-grey': 'black',\n      'secondary-blue': 'black',\n      'tertiary-blue': 'black',\n    };\n\n    if(this.isLink()){\n      return html`\n        <a\n          part=\"base\"\n          class=${classMap({\n            button: true,\n            'button--primary': this.variant === 'primary',\n            'button--secondary': this.variant === 'secondary',\n            'button--tertiary': this.variant === 'tertiary',\n            'button--caution': this.variant === 'caution',\n            'button--ghost': this.variant === 'ghost',\n            'button--destructive': this.variant === 'destructive',\n            'button--secondary-grey': this.variant === 'secondary-grey',\n            'button--secondary-blue': this.variant === 'secondary-blue',\n            'button--hideborder': this.hideBorder,\n            'button--medium': this.size === 'medium',\n            'button--caret': this.caret,\n            'button--circle': this.circle,\n            'button--disabled': this.disabled,\n            'button--focused': this.hasFocus,\n            'button--loading': this.loading,\n            'button--standard': !this.outline,\n            'button--outline': this.outline,\n            'button--pill': this.pill,\n            'button--has-label': this.hasSlotController.test('[default]'),\n            'button--has-prefix': this.hasSlotController.test('prefix'),\n            'button--has-suffix': this.hasSlotController.test('suffix'),\n          })}\n          href=${ifDefined(this.href)}\n          target=${ifDefined(this.target)}\n          download=${ifDefined(this.download)}\n          rel=${ifDefined(this.rel)}\n          title=${this.title}\n          role=\"button\"\n          aria-disabled=${this.disabled ? 'true' : 'false'}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @click=${this.handleClick}\n        >\n          <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n          <slot part=\"label\" class=\"button__label\"></slot>\n          <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n          ${this.caret\n            ? html`\n                <nile-icon\n                  part=\"caret\"\n                  class=\"button__caret\"\n                  color=\"${variantCaretColors[this.variant]}\"\n                  name=\"arrowdown\"\n                ></nile-icon>\n              `\n            : ''}\n          ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}\n        </a>\n      `;\n    }\n    else{\n      return html`\n      <button\n        part=\"base\"\n        class=${classMap({\n          button: true,\n          'button--primary': this.variant === 'primary',\n          'button--secondary': this.variant === 'secondary',\n          'button--tertiary': this.variant === 'tertiary',\n          'button--caution': this.variant === 'caution',\n          'button--ghost': this.variant === 'ghost',\n          'button--destructive': this.variant === 'destructive',\n          'button--secondary-grey': this.variant === 'secondary-grey',\n          'button--secondary-blue': this.variant === 'secondary-blue',\n          'button--hideborder': this.hideBorder,\n          'button--medium': this.size === 'medium',\n          'button--caret': this.caret,\n          'button--circle': this.circle,\n          'button--disabled': this.disabled,\n          'button--focused': this.hasFocus,\n          'button--loading': this.loading,\n          'button--standard': !this.outline,\n          'button--outline': this.outline,\n          'button--pill': this.pill,\n          'button--has-label': this.hasSlotController.test('[default]'),\n          'button--has-prefix': this.hasSlotController.test('prefix'),\n          'button--has-suffix': this.hasSlotController.test('suffix'),\n        })}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        title=${this.title}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        tabindex=${this.disabled ? '-1' : '0'}\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        @invalid=${this.handleInvalid}\n        @click=${this.handleClick}\n      >\n        <slot name=\"prefix\" part=\"prefix\" class=\"button__prefix\"></slot>\n        <slot part=\"label\" class=\"button__label\"></slot>\n        <slot name=\"suffix\" part=\"suffix\" class=\"button__suffix\"></slot>\n        ${this.caret\n          ? html`\n              <nile-icon\n                part=\"caret\"\n                class=\"button__caret\"\n                color=\"${variantCaretColors[this.variant]}\"\n                name=\"arrowdown\"\n              ></nile-icon>\n            `\n          : ''}\n        ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}\n      </button>\n    `;\n    }\n  }\n}\n\nexport default NileButton;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-button': NileButton;\n  }\n}\n"],"names":["NileButton","d","constructor","this","formControlController","FormControlController","form","input","hasAttribute","doc","getRootNode","formId","getAttribute","getElementById","closest","assumeInteractionOn","hasSlotController","HasSlotController","hasFocus","invalid","title","variant","size","caret","disabled","loading","outline","pill","circle","type","name","value","href","rel","hideBorder","_this","_inherits","_v","_createClass","key","get","isButton","button","validity","validValidityState","validationMessage","connectedCallback","super","handleHostClick","bind","addEventListener","emit","disconnectedCallback","removeEventListener","firstUpdated","updateValidity","handleBlur","handleFocus","handleClick","submit","reset","event","preventDefault","stopImmediatePropagation","handleInvalid","setValidity","emitInvalidEvent","isLink","handleDisabledChange","click","focus","options","blur","checkValidity","getForm","reportValidity","setCustomValidity","message","render","literal","_templateObject","_taggedTemplateLiteral","_templateObject2","variantCaretColors","primary","secondary","tertiary","caution","ghost","destructive","html","_templateObject3","classMap","test","ifDefined","target","download","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","NileElement","styles","__decorate","query","prototype","state","property","reflect","Boolean","attribute","watch","waitUntilFirstUpdate","_export","customElement"],"mappings":"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"}

package/dist/nile-button/nile-button.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",t=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-family: var(--nile-font-family-serif);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    border-radius: var(--nile-radius-base-standard);\n    padding: 10px 14px;\n    gap: 5px;\n    line-height: 20px;\n    box-sizing: border-box;\n    height: 40px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: #820B0B;\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: #b42318;\n    border-color: #b42318;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover,\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: #f9fafb;\n    border-color: #d0d5dd;\n    color: #182230;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-neutral-700);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-neutral-700);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: #eaf0f8;\n    border-color: #85aad1;\n    color: #004678;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: #fda29b;\n    color: #b42318;\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #912018;\n    background-color: #fef3f2;\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: #344054;\n    background-color: #f9fafb;\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: #004678;\n    background-color: #eaf0f8;\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-sm, var(--ng-spacing-xs));\n    line-height: var(--nile-line-height-small);\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  \n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(\n      --nile-textarea-standard-disabled-box-shadow,\n      var(--ng-shadow-xs-skeuomorphic)\n    ); //TODO: fix\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-4);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-button.css.cjs.js.map

package/dist/nile-button/nile-button.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-family: var(--nile-font-family-serif);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    border-radius: var(--nile-radius-base-standard);\n    padding: 10px 14px;\n    gap: 5px;\n    line-height: 20px;\n    box-sizing: border-box;\n    height: 40px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: #820B0B;\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: #b42318;\n    border-color: #b42318;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover,\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: #f9fafb;\n    border-color: #d0d5dd;\n    color: #182230;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-neutral-700);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-neutral-700);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: #eaf0f8;\n    border-color: #85aad1;\n    color: #004678;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: #fda29b;\n    color: #b42318;\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #912018;\n    background-color: #fef3f2;\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: #344054;\n    background-color: #f9fafb;\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: #004678;\n    background-color: #eaf0f8;\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-sm, var(--ng-spacing-xs));\n    line-height: var(--nile-line-height-small);\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  \n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(\n      --nile-textarea-standard-disabled-box-shadow,\n      var(--ng-shadow-xs-skeuomorphic)\n    ); //TODO: fix\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-4);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}