npm - @aquera/nile-elements - Versions diffs - 0.0.49 → 0.0.51 - Mend

@aquera/nile-elements 0.0.49 → 0.0.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2154) hide show

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

	@@ -1 +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, literal } from 'lit/static-html.js';\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';\n\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(this, '[default]', 'prefix', 'suffix');\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: 'primary' \| 'secondary' \| 'tertiary' \| 'caution'\|'ghost' = '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: 'application/x-www-form-urlencoded' \| 'multipart/form-data' \| '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 }) formNoValidate: boolean;\n\n /* Used to override the form owner's `target` attribute. /\n @property({ attribute: 'formtarget' }) formTarget: '_self' \| '_blank' \| '_parent' \| '_top' \| string;\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 / eslint-disable lit/no-invalid-html /\n / eslint-disable lit/binding-positions /\n return html`\n <${tag}\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--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=${ifDefined(isLink ? undefined : this.disabled)}\n type=${ifDefined(isLink ? undefined : this.type)}\n title=${this.title / An empty title prevents browser validation tooltips from appearing on hover */}\n name=${ifDefined(isLink ? undefined : this.name)}\n value=${ifDefined(isLink ? undefined : this.value)}\n href=${ifDefined(isLink ? this.href : undefined)}\n target=${ifDefined(isLink ? this.target : undefined)}\n download=${ifDefined(isLink ? this.download : undefined)}\n rel=${ifDefined(isLink ? this.rel : undefined)}\n role=${ifDefined(isLink ? undefined : 'button')}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n tabindex=${this.disabled ? '-1' : '0'}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @invalid=${this.isButton() ? this.handleInvalid : null}\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 ${\n this.caret ? html` <nile-icon part=\"caret\" class=\"button__caret\" color=\"white\" name=\"arrowdown\"></nile-icon> ` : ''\n }\n ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}\n </${tag}>\n `;\n }\n}\n\nexport default NileButton;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-button': NileButton;\n }\n}\n"],"names":["NileButton","d","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","_this","_createClass","key","get","validity","isButton","button","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","tag","literal","_templateObject","_taggedTemplateLiteral","_templateObject2","html","_templateObject3","classMap","test","ifDefined","undefined","target","download","_templateObject4","_templateObject5","NileElement","styles","__decorate","query","prototype","state","property","reflect","Boolean","attribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
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, literal } from 'lit/static-html.js';\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';\n\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 / eslint-disable lit/no-invalid-html /\n / eslint-disable lit/binding-positions /\n return html`\n <${tag}\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=${ifDefined(isLink ? undefined : this.disabled)}\n type=${ifDefined(isLink ? undefined : this.type)}\n title=${\n this\n .title / An empty title prevents browser validation tooltips from appearing on hover */\n }\n name=${ifDefined(isLink ? undefined : this.name)}\n value=${ifDefined(isLink ? undefined : this.value)}\n href=${ifDefined(isLink ? this.href : undefined)}\n target=${ifDefined(isLink ? this.target : undefined)}\n download=${ifDefined(isLink ? this.download : undefined)}\n rel=${ifDefined(isLink ? this.rel : undefined)}\n role=${ifDefined(isLink ? undefined : 'button')}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n tabindex=${this.disabled ? '-1' : '0'}\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n @invalid=${this.isButton() ? this.handleInvalid : null}\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 ${\n this.caret\n ? html`\n <nile-icon\n part=\"caret\"\n class=\"button__caret\"\n color=\"white\"\n name=\"arrowdown\"\n ></nile-icon>\n `\n : ''\n }\n ${this.loading ? html`<nile-spinner></nile-spinner>` : ''}\n </${tag}>\n `;\n }\n}\n\nexport default NileButton;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-button': NileButton;\n }\n}\n"],"names":["NileButton","_a","_inherits","d","_super","_createSuper","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","_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","tag","literal","_templateObject","_taggedTemplateLiteral","_templateObject2","html","_templateObject3","classMap","test","ifDefined","undefined","target","download","_templateObject4","_templateObject5","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 CHANGED Viewed

@@ -1,2 +1,2 @@
-System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var t,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){t=_index001CjsJs.i;}],execute:function(){_export("s",o=t(_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-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\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    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\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  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\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-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    border-color: var(--nile-colors-button-primary-border);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-hover);\n    border-color: var(--nile-colors-button-primary-hover);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    border-color: var(--nile-colors-button-primary-pressed-border);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\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-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\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-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost{\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color:transparent;\n    color: var(--nile-colors-button-tertiary-text);\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-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-button-caution);\n    border-color: var(--nile-colors-button-caution);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-hover);\n    border-color: var(--nile-colors-button-caution-hover);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-pressed);\n    border-color: var(--nile-colors-button-caution-pressed-border);\n    color: var(--nile-colors-button-caution-text);\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-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n\n        /* Primary Variant - Nile Icon Fill */\n        .button--standard.button--primary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n      }\n      .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n      }\n\n      /* Secondary Variant */\n      .button--standard.button--secondary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n      }\n      .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;\n      }\n\n      /* Tertiary Variant */\n      .button--standard.button--tertiary ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n      }\n\n        /* Ghost Variant */\n      .button--standard.button--ghost ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--ghost:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--ghost:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n      }\n      .button--standard.button--ghost ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n      }\n\n      /* Caution Variant */\n      .button--standard.button--caution ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),\n      .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n      }\n      .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n        --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !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  @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"]))));}};});
+System.register(["../index-cd83c5c8.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function(){_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-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\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    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\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  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    background-color: #005ea6; /*for v2 */\n    border-color: var(--nile-colors-button-primary-border);\n    border-color: #005ea6; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-hover);\n    background-color: #005291; /*for v2 */\n    border-color: var(--nile-colors-button-primary-hover);\n    border-color: #005291; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    background-color: #005ea6; /*for v2 */\n    border-color: var(--nile-colors-button-primary-pressed-border);\n    border-color: #005ea6; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-button-primary-disabled);\n    background-color: #f2f4f7; /*for v2 */\n    border-color: var(--nile-colors-button-primary-disabled);\n    border-color: #eaecf0; /*for v2 */\n    color: var(--nile-colors-button-primary-disabled-text);\n    color: #98a2b3; /*for v2 */\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-button-primary-disabled);\n    background-color: #f2f4f7; /*for v2 */\n    border-color: var(--nile-colors-button-primary-disabled);\n    border-color: #eaecf0; /*for v2 */\n    color: var(--nile-colors-button-primary-disabled-text);\n    color: #98a2b3; /*for v2 */\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\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-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\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-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\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-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-button-caution);\n    border-color: var(--nile-colors-button-caution);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-hover);\n    border-color: var(--nile-colors-button-caution-hover);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-pressed);\n    border-color: var(--nile-colors-button-caution-pressed-border);\n    color: var(--nile-colors-button-caution-text);\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-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\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: #fff;\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: #fff;\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: #fff;\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: #fff;\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-button-primary-disabled);\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-button-primary-disabled);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: #fff;\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: #fff;\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: #fff;\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: #fff;\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) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-secondary-disabled-text\n    ) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-tertiary-disabled-text\n    ) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-tertiary-disabled-text\n    ) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !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: #fff;\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: #fff;\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(.button--disabled) {\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"]))));}};});
 //# sourceMappingURL=nile-button.css.cjs.js.map

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

	@@ -1 +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-element';\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-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\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 padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\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 .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; /\n }\n\n .button--standard.button--secondary {\n background-color: var(--nile-colors-button-secondary);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-hover);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-pressed);\n border-color: var(--nile-colors-button-secondary-pressed-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\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-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n / Primary /\n .button--standard.button--primary {\n background-color: var(--nile-colors-button-primary);\n border-color: var(--nile-colors-button-primary-border);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-hover);\n border-color: var(--nile-colors-button-primary-hover);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-pressed);\n border-color: var(--nile-colors-button-primary-pressed-border);\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-button-primary-disabled);\n border-color: var(--nile-colors-button-primary-disabled);\n color: var(--nile-colors-button-primary-disabled-text);\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-button-primary-disabled);\n border-color: var(--nile-colors-button-primary-disabled);\n color: var(--nile-colors-button-primary-disabled-text);\n cursor: not-allowed;\n }\n\n / Tertiary /\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-button-tertiary);\n border-color: var(--nile-colors-button-tertiary-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: var(--nile-colors-button-tertiary-pressed-border);\n color: var(--nile-colors-button-tertiary-text);\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-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / ghost /\n .button--standard.button--ghost{\n background-color: var(--nile-colors-button-tertiary);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color:transparent;\n color: var(--nile-colors-button-tertiary-text);\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-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / caution /\n .button--standard.button--caution {\n background-color: var(--nile-colors-button-caution);\n border-color: var(--nile-colors-button-caution);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-hover);\n border-color: var(--nile-colors-button-caution-hover);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-pressed);\n border-color: var(--nile-colors-button-caution-pressed-border);\n color: var(--nile-colors-button-caution-text);\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-button-caution-disabled);\n border-color: var(--nile-colors-button-caution-disabled);\n color: var(--nile-colors-button-caution-disabled-text);\n }\n\n\n / Primary Variant - Nile Icon Fill /\n .button--standard.button--primary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--primary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n }\n\n / Secondary Variant /\n .button--standard.button--secondary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--secondary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-disabled-text) !important;\n }\n\n / Tertiary Variant /\n .button--standard.button--tertiary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--tertiary:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n }\n\n / Ghost Variant /\n .button--standard.button--ghost ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--ghost:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;\n }\n\n / Caution Variant /\n .button--standard.button--caution ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled) ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled) ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !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 @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`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
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-element';\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-weight: var(--nile-font-weight-regular);\n font-family: var(--nile-font-family-serif);\n font-size: var(--nile-type-scale-3);\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 padding: var(--nile-spacing-2-x);\n gap: var(--nile-spacing-2-x);\n border-radius: var(--nile-radius-base-standard);\n line-height: var(--nile-type-scale-3);\n box-sizing: border-box;\n height: 38px;\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 .button__label::slotted(nile-icon) {\n /* vertical-align: -2px; /\n }\n\n / Primary /\n .button--standard.button--primary {\n background-color: var(--nile-colors-button-primary);\n background-color: #005ea6; /for v2 /\n border-color: var(--nile-colors-button-primary-border);\n border-color: #005ea6; /for v2 /\n color: var(--nile-colors-button-primary-text);\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /for v2 /\n }\n\n .button--standard.button--primary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-hover);\n background-color: #005291; /for v2 /\n border-color: var(--nile-colors-button-primary-hover);\n border-color: #005291; /for v2 /\n color: var(--nile-colors-button-primary-text);\n }\n\n .button--standard.button--primary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-primary-pressed);\n background-color: #005ea6; /for v2 /\n border-color: var(--nile-colors-button-primary-pressed-border);\n border-color: #005ea6; /for v2 /\n color: var(--nile-colors-button-primary-text);\n box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n 0px 0px 0px 4px rgba(0, 94, 166, 0.15); /for v2 /\n }\n\n .button--standard.button--primary.button--disabled {\n background-color: var(--nile-colors-button-primary-disabled);\n background-color: #f2f4f7; /for v2 /\n border-color: var(--nile-colors-button-primary-disabled);\n border-color: #eaecf0; /for v2 /\n color: var(--nile-colors-button-primary-disabled-text);\n color: #98a2b3; /for v2 /\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-button-primary-disabled);\n background-color: #f2f4f7; /for v2 /\n border-color: var(--nile-colors-button-primary-disabled);\n border-color: #eaecf0; /for v2 /\n color: var(--nile-colors-button-primary-disabled-text);\n color: #98a2b3; /for v2 /\n cursor: not-allowed;\n }\n\n / Secondary /\n .button--standard.button--secondary {\n background-color: var(--nile-colors-button-secondary);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-hover);\n border-color: var(--nile-colors-button-secondary-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-secondary-pressed);\n border-color: var(--nile-colors-button-secondary-pressed-border);\n color: var(--nile-colors-button-secondary-text);\n }\n\n .button--standard.button--secondary.button--disabled {\n background-color: var(--nile-colors-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\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-button-secondary-disabled);\n border-color: var(--nile-colors-button-secondary-disabled-border);\n color: var(--nile-colors-button-secondary-disabled-text);\n cursor: not-allowed;\n }\n\n / Tertiary /\n .button--standard.button--tertiary {\n background-color: var(--nile-colors-button-tertiary);\n border-color: var(--nile-colors-button-tertiary-border);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: var(--nile-colors-neutral-500);\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--tertiary:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: var(--nile-colors-button-tertiary-pressed-border);\n color: var(--nile-colors-button-tertiary-text);\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-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / ghost /\n .button--standard.button--ghost {\n background-color: var(--nile-colors-button-tertiary);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-hover);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\n }\n\n .button--standard.button--ghost:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-tertiary-pressed);\n border-color: transparent;\n color: var(--nile-colors-button-tertiary-text);\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-button-tertiary-disabled);\n color: var(--nile-colors-button-tertiary-disabled-text);\n cursor: not-allowed;\n box-shadow: none;\n }\n\n / caution /\n .button--standard.button--caution {\n background-color: var(--nile-colors-button-caution);\n border-color: var(--nile-colors-button-caution);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:hover:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-hover);\n border-color: var(--nile-colors-button-caution-hover);\n color: var(--nile-colors-button-caution-text);\n }\n\n .button--standard.button--caution:active:not(.button--disabled) {\n background-color: var(--nile-colors-button-caution-pressed);\n border-color: var(--nile-colors-button-caution-pressed-border);\n color: var(--nile-colors-button-caution-text);\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-button-caution-disabled);\n border-color: var(--nile-colors-button-caution-disabled);\n color: var(--nile-colors-button-caution-disabled-text);\n }\n\n / destructive /\n .button--standard.button--destructive {\n background-color: #d92d20;\n border-color: #d92d20;\n color: #fff;\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: #fff;\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: #fff;\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: #fff;\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: #fff;\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-button-primary-disabled);\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-button-primary-disabled);\n color: #98a2b3;\n cursor: not-allowed;\n }\n\n / secondary-blue /\n .button--standard.button--secondary-blue {\n background-color: #fff;\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: #fff;\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: #fff;\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: #fff;\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) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--primary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n }\n .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n }\n\n / Secondary Variant /\n .button--standard.button--secondary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--secondary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n }\n .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-secondary-disabled-text\n ) !important;\n }\n\n / Tertiary Variant /\n .button--standard.button--tertiary ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--tertiary:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-tertiary-disabled-text\n ) !important;\n }\n\n / Ghost Variant /\n .button--standard.button--ghost ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--ghost:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n }\n .button--standard.button--ghost ::slotted(nile-icon) {\n --nile-svg-fill: var(\n --nile-colors-button-tertiary-disabled-text\n ) !important;\n }\n\n / Caution Variant /\n .button--standard.button--caution ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n }\n .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n }\n\n / destructive /\n .button--standard.button--destructive ::slotted(nile-icon) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive:hover:not(.button--disabled)\n ::slotted(nile-icon),\n .button--standard.button--caution:active:not(.button--disabled)\n ::slotted(nile-icon) {\n --nile-svg-fill: #fff !important;\n }\n .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {\n --nile-svg-fill: #fff !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: #fff;\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: #fff;\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(.button--disabled) {\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":"gXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}