npm - @aquera/nile-elements - Versions diffs - 0.1.40-beta-1.8 → 0.1.40-beta-2.1 - Mend

@aquera/nile-elements 0.1.40-beta-1.8 → 0.1.40-beta-2.1

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

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

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

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