npm - @aquera/nile-elements - Versions diffs - 0.0.67 → 0.0.69 - Mend

@aquera/nile-elements 0.0.67 → 0.0.69

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 (656) hide show

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

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

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

@@ -1,2 +1,2 @@
-System.register(["../index-c7ad3b47.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function 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-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    background-color: #005ea6; /*for v2 */\n    border-color: var(--nile-colors-button-primary-border);\n    border-color: #005ea6; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-hover);\n    background-color: #005291; /*for v2 */\n    border-color: var(--nile-colors-button-primary-hover);\n    border-color: #005291; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    background-color: #005ea6; /*for v2 */\n    border-color: var(--nile-colors-button-primary-pressed-border);\n    border-color: #005ea6; /*for v2 */\n    color: var(--nile-colors-button-primary-text);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-button-primary-disabled);\n    background-color: #f2f4f7; /*for v2 */\n    border-color: var(--nile-colors-button-primary-disabled);\n    border-color: #eaecf0; /*for v2 */\n    color: var(--nile-colors-button-primary-disabled-text);\n    color: #98a2b3; /*for v2 */\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-button-primary-disabled);\n    background-color: #f2f4f7; /*for v2 */\n    border-color: var(--nile-colors-button-primary-disabled);\n    border-color: #eaecf0; /*for v2 */\n    color: var(--nile-colors-button-primary-disabled-text);\n    color: #98a2b3; /*for v2 */\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-button-caution);\n    border-color: var(--nile-colors-button-caution);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-hover);\n    border-color: var(--nile-colors-button-caution-hover);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-pressed);\n    border-color: var(--nile-colors-button-caution-pressed-border);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: #b42318;\n    border-color: #b42318;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover,\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: #fff;\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: #f9fafb;\n    border-color: #d0d5dd;\n    color: #182230;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: #fff;\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: #fff;\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: #eaf0f8;\n    border-color: #85aad1;\n    color: #004678;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: #fff;\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: #fff;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: #fff;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-secondary-disabled-text\n    ) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-tertiary-disabled-text\n    ) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-tertiary-disabled-text\n    ) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: #fda29b;\n    color: #b42318;\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #912018;\n    background-color: #fef3f2;\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: #344054;\n    background-color: #f9fafb;\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {\n    color: #004678;\n    background-color: #EAF0F8;\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n  \n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n"]))));}};});
+System.register(["../index-c7ad3b47.cjs.js"],function(_export,_context){"use strict";var o,_templateObject,t;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){o=_index001CjsJs.i;}],execute:function 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  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-button-primary);\n    border-color: var(--nile-colors-button-primary-border);\n    color: var(--nile-colors-button-primary-text);\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-button-primary-hover);\n    border-color: var(--nile-colors-button-primary-hover);\n    color: var(--nile-colors-button-primary-text);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-primary-pressed);\n    border-color: var(--nile-colors-button-primary-pressed-border);\n    color: var(--nile-colors-button-primary-text);\n    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-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-button-primary-disabled);\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: var(--nile-colors-button-primary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-button-secondary);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-hover);\n    border-color: var(--nile-colors-button-secondary-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-secondary-pressed);\n    border-color: var(--nile-colors-button-secondary-pressed-border);\n    color: var(--nile-colors-button-secondary-text);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-button-secondary-disabled);\n    border-color: var(--nile-colors-button-secondary-disabled-border);\n    color: var(--nile-colors-button-secondary-disabled-text);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: var(--nile-colors-button-tertiary-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: var(--nile-colors-button-tertiary-pressed-border);\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-button-tertiary);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-hover);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-tertiary-pressed);\n    border-color: transparent;\n    color: var(--nile-colors-button-tertiary-text);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-button-tertiary-disabled);\n    color: var(--nile-colors-button-tertiary-disabled-text);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-button-caution);\n    border-color: var(--nile-colors-button-caution);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-hover);\n    border-color: var(--nile-colors-button-caution-hover);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-button-caution-pressed);\n    border-color: var(--nile-colors-button-caution-pressed-border);\n    color: var(--nile-colors-button-caution-text);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-button-caution-disabled);\n    border-color: var(--nile-colors-button-caution-disabled);\n    color: var(--nile-colors-button-caution-disabled-text);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: #b42318;\n    border-color: #b42318;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover,\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: #fff;\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: #f9fafb;\n    border-color: #d0d5dd;\n    color: #182230;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: #fff;\n    border-color: #d0d5dd;\n    color: #344054;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: #eaecf0;\n    border-color: var(--nile-colors-button-primary-disabled);\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: #fff;\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: #eaf0f8;\n    border-color: #85aad1;\n    color: #004678;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: #fff;\n    border-color: #85aad1;\n    color: #005291;\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: #fff;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: #fff;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-text) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-secondary-disabled-text\n    ) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-tertiary-disabled-text\n    ) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon) {\n    --nile-svg-fill: var(\n      --nile-colors-button-tertiary-disabled-text\n    ) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-text) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {\n    --nile-svg-fill: #fff !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: #fda29b;\n    color: #b42318;\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #912018;\n    background-color: #fef3f2;\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\n    background-color: #fff;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: #344054;\n    background-color: #f9fafb;\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\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"]))));}};});
 //# sourceMappingURL=nile-button.css.cjs.js.map

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

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

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

@@ -13,9 +13,7 @@ import{i as o}from"../index-0a3007c5.esm.js";const t=o`
     border-style: solid;
     border-width: 1px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-regular);
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-3);
     text-align: center;
     letter-spacing: 0.2px;
     text-decoration: none;
@@ -27,12 +25,14 @@ import{i as o}from"../index-0a3007c5.esm.js";const t=o`
       var(--nile-transition-duration-default) border,
       var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
-    padding: var(--nile-spacing-2-x);
-    gap: var(--nile-spacing-2-x);
+    font-size: 14px;
+    font-weight: 500;
     border-radius: var(--nile-radius-base-standard);
-    line-height: var(--nile-type-scale-3);
+    padding: 10px 14px;
+    gap: 5px;
+    line-height: 20px;
     box-sizing: border-box;
-    height: 38px;
+    height: 40px;
   }
   .button::-moz-focus-inner {
@@ -64,49 +64,37 @@ import{i as o}from"../index-0a3007c5.esm.js";const t=o`
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
-    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-border);
-    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
-    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); /*for v2 */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-hover);
-    background-color: #005291; /*for v2 */
     border-color: var(--nile-colors-button-primary-hover);
-    border-color: #005291; /*for v2 */
     color: var(--nile-colors-button-primary-text);
   }
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-button-primary-pressed);
-    background-color: #005ea6; /*for v2 */
     border-color: var(--nile-colors-button-primary-pressed-border);
-    border-color: #005ea6; /*for v2 */
     color: var(--nile-colors-button-primary-text);
     box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
-      0px 0px 0px 4px rgba(0, 94, 166, 0.15); /*for v2 */
+      0px 0px 0px 4px rgba(0, 94, 166, 0.15);
   }
   .button--standard.button--primary.button--disabled {
     background-color: var(--nile-colors-button-primary-disabled);
-    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
-    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
-    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
   .button--standard.button--primary.button--disabled:hover,
   .button--standard.button--primary.button--disabled:active {
     background-color: var(--nile-colors-button-primary-disabled);
-    background-color: #f2f4f7; /*for v2 */
     border-color: var(--nile-colors-button-primary-disabled);
-    border-color: #eaecf0; /*for v2 */
     color: var(--nile-colors-button-primary-disabled-text);
-    color: #98a2b3; /*for v2 */
     cursor: not-allowed;
   }
@@ -605,9 +593,11 @@ import{i as o}from"../index-0a3007c5.esm.js";const t=o`
   }
   .button--outline.button--secondary-blue:hover:not(.button--disabled),
-  .button--outline.button--secondary-blue.button--checked:not(.button--disabled) {
+  .button--outline.button--secondary-blue.button--checked:not(
+      .button--disabled
+    ) {
     color: #004678;
-    background-color: #EAF0F8;
+    background-color: #eaf0f8;
   }
   .button--outline.button--secondary-blue:active:not(.button--disabled) {
@@ -617,7 +607,7 @@ import{i as o}from"../index-0a3007c5.esm.js";const t=o`
   .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {
     box-shadow: 0px;
   }
   @media (forced-colors: active) {
     .button.button--outline.button--checked:not(.button--disabled) {
       outline: solid 2px transparent;