@internetarchive/elements 0.2.8-webdev-8565.0 → 0.2.8-webdev-8565.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAEd,cAAc,EAEf,MAAM,KAAK,CAAC;AAKb,OAAO,4CAA4C,CAAC;AAEpD;;;;;;;;;GASG;AACH,qBACa,QAAS,SAAQ,UAAU;IAEV,IAAI,EAC5B,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,UAAU,GACV,aAAa,GACb,QAAQ,GACR,MAAM,GACN,aAAa,CAAa;IAGD,OAAO,EAAE,OAAO,CAAS;IAGzB,QAAQ,EAAE,OAAO,CAAS;IAG3B,WAAW,EAAE,MAAM,CAAM;IAGV,IAAI,EAC3C,QAAQ,GACR,QAAQ,GACR,OAAO,CAAY;IAGK,IAAI,CAAC,EAAE,MAAM,CAAC;IAGb,eAAe,EAAE,OAAO,CAAS;IAE9D,MAAM,IAAI,cAAc;IAaxB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAOnD,OAAO,KAAK,cAAc,GAUzB;IAGD,OAAO,KAAK,kBAAkB,GAE7B;IAGD,OAAO,KAAK,oBAAoB,GAQ/B;IAED,yDAAyD;IACzD,OAAO,CAAC,sBAAsB;IAc9B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAe5B;;;;;;;;OAQG;IACH,OAAO,CAAC,eAAe;IAevB,sFAAsF;IACtF,OAAO,CAAC,iBAAiB;IAwBzB,MAAM,KAAK,MAAM,IAAI,cAAc,
|
|
1
|
+
{"version":3,"file":"ia-button.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAEd,cAAc,EAEf,MAAM,KAAK,CAAC;AAKb,OAAO,4CAA4C,CAAC;AAEpD;;;;;;;;;GASG;AACH,qBACa,QAAS,SAAQ,UAAU;IAEV,IAAI,EAC5B,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,UAAU,GACV,aAAa,GACb,QAAQ,GACR,MAAM,GACN,aAAa,CAAa;IAGD,OAAO,EAAE,OAAO,CAAS;IAGzB,QAAQ,EAAE,OAAO,CAAS;IAG3B,WAAW,EAAE,MAAM,CAAM;IAGV,IAAI,EAC3C,QAAQ,GACR,QAAQ,GACR,OAAO,CAAY;IAGK,IAAI,CAAC,EAAE,MAAM,CAAC;IAGb,eAAe,EAAE,OAAO,CAAS;IAE9D,MAAM,IAAI,cAAc;IAaxB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAOnD,OAAO,KAAK,cAAc,GAUzB;IAGD,OAAO,KAAK,kBAAkB,GAE7B;IAGD,OAAO,KAAK,oBAAoB,GAQ/B;IAED,yDAAyD;IACzD,OAAO,CAAC,sBAAsB;IAc9B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAe5B;;;;;;;;OAQG;IACH,OAAO,CAAC,eAAe;IAevB,sFAAsF;IACtF,OAAO,CAAC,iBAAiB;IAwBzB,MAAM,KAAK,MAAM,IAAI,cAAc,CAkNlC;CACF"}
|
|
@@ -171,6 +171,7 @@ let IAButton = class IAButton extends LitElement {
|
|
|
171
171
|
--button-border-width--: var(--button-border-width);
|
|
172
172
|
--button-border-radius--: var(--button-border-radius);
|
|
173
173
|
--base-font-family--: var(--base-font-family);
|
|
174
|
+
--font-size-standard--: var(--font-size-standard);
|
|
174
175
|
|
|
175
176
|
--ia-button-transition--: var(
|
|
176
177
|
--ia-button-transition,
|
|
@@ -215,11 +216,11 @@ let IAButton = class IAButton extends LitElement {
|
|
|
215
216
|
border-width: var(--button-border-width--);
|
|
216
217
|
border-radius: var(--button-border-radius--);
|
|
217
218
|
transition: var(--ia-button-transition--);
|
|
218
|
-
outline-color: var(--primary-cta-text-color--);
|
|
219
219
|
|
|
220
|
+
outline-color: currentColor;
|
|
220
221
|
cursor: pointer;
|
|
221
222
|
line-height: normal;
|
|
222
|
-
border-style:
|
|
223
|
+
border-style: solid;
|
|
223
224
|
white-space: nowrap;
|
|
224
225
|
appearance: auto;
|
|
225
226
|
box-sizing: border-box;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n PropertyValues,\n render,\n} from 'lit';\nimport { msg } from '@lit/localize';\nimport { property, customElement } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\nimport '../ia-status-indicator/ia-status-indicator';\n\n/**\n * Renders a standardized button built off the ia-button styling and the activity indicator, with the option to show\n * a loading indicator instead of the text or to customize the text, and the ability to pass in any\n * function to run on click.\n *\n * Designed to behave exactly like a native type=\"submit\" or type=\"reset\" button if either type is supplied,\n * i.e. for an <ia-button type=\"submit\" @click=${doSideEffects}></ia-button>,\n * whether the form is submitted via enter or by clicking the button directly, the button will always\n * run doSideEffects() and then submit the form.\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n /* Which version of the button to display */\n @property({ type: String }) mode:\n | 'primary'\n | 'secondary'\n | 'danger'\n | 'warning'\n | 'disabled'\n | 'transparent'\n | 'custom'\n | 'link'\n | 'danger-link' = 'primary';\n\n /* Whether to show a loading indicator instead of the button */\n @property({ type: Boolean }) loading: boolean = false;\n\n /* Whether the button should be disabled, regardless of submission status */\n @property({ type: Boolean }) disabled: boolean = false;\n\n /* Optional text to include next to the loading indicator */\n @property({ type: String }) loadingText: string = '';\n\n /* Type of the button - defaults to 'button' to prevent form submission */\n @property({ type: String, reflect: true }) type:\n | 'button'\n | 'submit'\n | 'reset' = 'button';\n\n /* An optional href to wrap around the button */\n @property({ type: String }) href?: string;\n\n /* Whether to add a target=\"_blank\" to any wrapping link */\n @property({ type: Boolean }) openLinksNewTab: boolean = false;\n\n render(): TemplateResult {\n return html`\n ${this.href\n ? html`<a\n href=${this.href}\n target=${this.openLinksNewTab ? '_blank' : '_self'}\n >${this.buttonTemplate}</a\n >`\n : this.buttonTemplate}\n <slot name=\"hidden-button\"></slot>\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('type')) {\n this.setButtonTypeEmulation();\n }\n }\n\n /* The native button to render */\n private get buttonTemplate(): TemplateResult {\n return html`\n <button\n part=\"button\"\n class=${this.mode}\n ?disabled=${this.disabled || this.loading}\n >\n ${this.buttonTextTemplate}\n </button>\n `;\n }\n\n /* The text to render within the button */\n private get buttonTextTemplate(): TemplateResult {\n return this.loading ? this.loadingStateTemplate : html`<slot></slot>`;\n }\n\n /* Content to render while button is loading */\n private get loadingStateTemplate(): TemplateResult {\n return html`\n <span class=\"loading-indicator\" alt=\"Loading indicator\">\n <ia-status-indicator mode=\"loading\"></ia-status-indicator> ${msg(\n this.loadingText,\n )}\n </span>\n `;\n }\n\n /** Sets up or removes button type emulation as needed */\n private setButtonTypeEmulation(): void {\n const hiddenButton: HTMLInputElement | null = this.querySelector(\n 'input.hidden-button',\n );\n\n if (hiddenButton) {\n hiddenButton.type = this.type;\n return;\n }\n\n this.addHiddenButton();\n this.addEventListener('click', this.handleComponentClick);\n }\n\n /**\n * Triggers form actions (submit/reset) on click, if desired\n * and if actions not already in progress\n */\n private handleComponentClick(e: Event): void {\n if (this.type === 'button') return;\n\n // No need to submit/reset the form if it's already submitting/resetting\n const formActionsInProgress =\n e instanceof CustomEvent && e.detail.formActionsInProgress;\n if (formActionsInProgress) return;\n\n // Request form submission/reset by clicking the hidden native submit/reset button we added earlier\n const hiddenButton = this.querySelector(\n 'input.hidden-button',\n ) as HTMLInputElement;\n hiddenButton.dispatchEvent(new PointerEvent('click'));\n }\n\n /**\n * Adds a hidden button to the light DOM to\n * emulate native reset/submit button behavior.\n *\n * Used for:\n * - Submitting/resetting the form (on behalf of handleComponentClick)\n * - Activating any component click events if form is submitted with the enter key\n * (via handleFormActions)\n */\n private addHiddenButton(): void {\n if (this.type === 'button') return;\n\n render(\n html`<input\n type=${this.type}\n class=\"hidden-button\"\n style=\"display:none\"\n slot=\"hidden-button\"\n @click=${(e: Event) => this.handleFormActions(e)}\n />`,\n this,\n );\n }\n\n /** Triggers the component's click event manually to prevent extra submission/reset */\n private handleFormActions(e: Event): void {\n /**\n * Prevents the event from bubbling up to the ia-button component itself.\n * This way, if the click on this button is triggered by a click on the component,\n * we don't accidentally bubble up a second click and end up in an infinite loop.\n *\n * And if the click was triggered by form submission (via the enter key), we can hijack the click\n * event to pass that info to the component, so it knows not to\n * re-attempt submission.\n */\n e.stopPropagation();\n\n // Detect if click comes from the parent component,\n // in which case there's no need to trigger a second click on it\n const triggeredByComponentClick = !e.isTrusted;\n if (triggeredByComponentClick) return;\n\n // Trigger parent component click events manually,\n // so it knows not to try to re-submit/re-reset the form\n this.dispatchEvent(\n new CustomEvent('click', { detail: { formActionsInProgress: true } }),\n );\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --primary-cta-text-color--: var(--primary-cta-text-color);\n --primary-cta-fill--: var(--primary-cta-fill);\n --primary-cta-border--: var(--primary-cta-border);\n\n --secondary-cta-text-color--: var(--secondary-cta-text-color);\n --secondary-cta-fill--: var(--secondary-cta-fill);\n --secondary-cta-border--: var(--secondary-cta-border);\n\n --danger-cta-text-color--: var(--danger-cta-text-color);\n --danger-cta-fill--: var(--danger-cta-fill);\n --danger-cta-border--: var(--danger-cta-border);\n\n --warning-cta-text-color--: var(--warning-cta-text-color);\n --warning-cta-fill--: var(--warning-cta-fill);\n --warning-cta-border--: var(--warning-cta-border);\n\n --disabled-cta-text-color--: var(--disabled-cta-text-color);\n --disabled-cta-fill--: var(--disabled-cta-fill);\n --disabled-cta-border--: var(--disabled-cta-border);\n\n --link-color--: var(--link-color);\n --color-danger--: var(--color-danger);\n\n --button-padding--: var(--button-padding);\n --button-width--: var(--button-width);\n --button-height--: var(--button-height);\n --button-border-width--: var(--button-border-width);\n --button-border-radius--: var(--button-border-radius);\n --base-font-family--: var(--base-font-family);\n\n --ia-button-transition--: var(\n --ia-button-transition,\n all 0.1s ease 0s\n );\n\n --ia-button-custom-text-color--: var(\n --ia-button-custom-text-color,\n var(--primary-cta-text-color--)\n );\n --ia-button-custom-fill--: var(\n --ia-button-custom-fill,\n var(--primary-cta-fill--)\n );\n --ia-button-custom-border--: var(\n --ia-button-custom-border,\n var(--primary-cta-border--)\n );\n --ia-button-custom-active-text-color--: var(\n --ia-button-custom-active-text-color,\n var(--ia-button-custom-text-color--)\n );\n --ia-button-custom-active-fill--: var(\n --ia-button-custom-active-fill,\n var(--ia-button-custom-fill--)\n );\n --ia-button-custom-active-border--: var(\n --ia-button-custom-active-border,\n var(--ia-button-custom-border--)\n );\n\n display: inline-block; /* keeps host sized to button */\n }\n\n button {\n font-family: var(--base-font-family--);\n font-size: var(--font-size-standard--);\n height: var(--button-height--);\n min-height: var(--button-height--);\n width: var(--button-width--);\n padding: var(--button-padding--);\n border-width: var(--button-border-width--);\n border-radius: var(--button-border-radius--);\n transition: var(--ia-button-transition--);\n outline-color: var(--primary-cta-text-color--);\n\n cursor: pointer;\n line-height: normal;\n border-style: 'solid';\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n outline-offset: -4px;\n user-select: none;\n text-decoration: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n }\n\n a {\n text-decoration: none;\n }\n\n button:disabled,\n button.disabled {\n cursor: not-allowed;\n color: var(--disabled-cta-text-color--);\n background-color: var(--disabled-cta-fill--);\n border: 1px solid var(--disabled-cta-border--);\n opacity: 0.5;\n }\n\n button:enabled:hover {\n opacity: 0.9;\n }\n\n button:focus-visible {\n opacity: 0.8;\n outline-style: double;\n }\n\n button:active {\n opacity: 0.7;\n }\n\n button.primary {\n color: var(--primary-cta-text-color--);\n background-color: var(--primary-cta-fill--);\n border-color: var(--primary-cta-border--);\n }\n\n button.secondary {\n color: var(--secondary-cta-text-color--);\n background-color: var(--secondary-cta-fill--);\n border-color: var(--secondary-cta-border--);\n }\n\n button.danger {\n color: var(--danger-cta-text-color--);\n background-color: var(--danger-cta-fill--);\n border-color: var(--danger-cta-border--);\n }\n\n button.warning {\n color: var(--warning-cta-text-color--);\n background-color: var(--warning-cta-fill--);\n border-color: var(--warning-cta-border--);\n }\n\n button.transparent {\n color: inherit;\n border-width: 0;\n background-color: transparent;\n border-color: transparent;\n }\n\n button.custom {\n color: var(--ia-button-custom-text-color--);\n background-color: var(--ia-button-custom-fill--);\n border-color: var(--ia-button-custom-border--);\n }\n\n button.custom:enabled:is(:hover, :focus, :active) {\n color: var(--ia-button-custom-active-text-color--);\n background-color: var(--ia-button-custom-active-fill--);\n border-color: var(--ia-button-custom-active-border--);\n }\n\n :host(.fit-content) button {\n padding: 0;\n height: fit-content;\n }\n\n button.link:enabled:hover,\n button.danger-link:enabled:hover {\n text-decoration: underline;\n }\n\n button.link,\n button.danger-link {\n margin: 0;\n border: 0;\n appearance: none;\n background: none;\n text-decoration: none;\n cursor: pointer;\n padding: 0;\n }\n\n button.link {\n color: var(--link-color--);\n }\n\n button.danger-link {\n color: var(--color-danger--);\n }\n\n .loading-indicator {\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n }\n\n ia-status-indicator {\n --ia-theme-primary-text-color: currentColor;\n }\n `,\n ];\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ia-button.js","sourceRoot":"","sources":["../../../../src/elements/ia-button/ia-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n PropertyValues,\n render,\n} from 'lit';\nimport { msg } from '@lit/localize';\nimport { property, customElement } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\nimport '../ia-status-indicator/ia-status-indicator';\n\n/**\n * Renders a standardized button built off the ia-button styling and the activity indicator, with the option to show\n * a loading indicator instead of the text or to customize the text, and the ability to pass in any\n * function to run on click.\n *\n * Designed to behave exactly like a native type=\"submit\" or type=\"reset\" button if either type is supplied,\n * i.e. for an <ia-button type=\"submit\" @click=${doSideEffects}></ia-button>,\n * whether the form is submitted via enter or by clicking the button directly, the button will always\n * run doSideEffects() and then submit the form.\n */\n@customElement('ia-button')\nexport class IAButton extends LitElement {\n /* Which version of the button to display */\n @property({ type: String }) mode:\n | 'primary'\n | 'secondary'\n | 'danger'\n | 'warning'\n | 'disabled'\n | 'transparent'\n | 'custom'\n | 'link'\n | 'danger-link' = 'primary';\n\n /* Whether to show a loading indicator instead of the button */\n @property({ type: Boolean }) loading: boolean = false;\n\n /* Whether the button should be disabled, regardless of submission status */\n @property({ type: Boolean }) disabled: boolean = false;\n\n /* Optional text to include next to the loading indicator */\n @property({ type: String }) loadingText: string = '';\n\n /* Type of the button - defaults to 'button' to prevent form submission */\n @property({ type: String, reflect: true }) type:\n | 'button'\n | 'submit'\n | 'reset' = 'button';\n\n /* An optional href to wrap around the button */\n @property({ type: String }) href?: string;\n\n /* Whether to add a target=\"_blank\" to any wrapping link */\n @property({ type: Boolean }) openLinksNewTab: boolean = false;\n\n render(): TemplateResult {\n return html`\n ${this.href\n ? html`<a\n href=${this.href}\n target=${this.openLinksNewTab ? '_blank' : '_self'}\n >${this.buttonTemplate}</a\n >`\n : this.buttonTemplate}\n <slot name=\"hidden-button\"></slot>\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('type')) {\n this.setButtonTypeEmulation();\n }\n }\n\n /* The native button to render */\n private get buttonTemplate(): TemplateResult {\n return html`\n <button\n part=\"button\"\n class=${this.mode}\n ?disabled=${this.disabled || this.loading}\n >\n ${this.buttonTextTemplate}\n </button>\n `;\n }\n\n /* The text to render within the button */\n private get buttonTextTemplate(): TemplateResult {\n return this.loading ? this.loadingStateTemplate : html`<slot></slot>`;\n }\n\n /* Content to render while button is loading */\n private get loadingStateTemplate(): TemplateResult {\n return html`\n <span class=\"loading-indicator\" alt=\"Loading indicator\">\n <ia-status-indicator mode=\"loading\"></ia-status-indicator> ${msg(\n this.loadingText,\n )}\n </span>\n `;\n }\n\n /** Sets up or removes button type emulation as needed */\n private setButtonTypeEmulation(): void {\n const hiddenButton: HTMLInputElement | null = this.querySelector(\n 'input.hidden-button',\n );\n\n if (hiddenButton) {\n hiddenButton.type = this.type;\n return;\n }\n\n this.addHiddenButton();\n this.addEventListener('click', this.handleComponentClick);\n }\n\n /**\n * Triggers form actions (submit/reset) on click, if desired\n * and if actions not already in progress\n */\n private handleComponentClick(e: Event): void {\n if (this.type === 'button') return;\n\n // No need to submit/reset the form if it's already submitting/resetting\n const formActionsInProgress =\n e instanceof CustomEvent && e.detail.formActionsInProgress;\n if (formActionsInProgress) return;\n\n // Request form submission/reset by clicking the hidden native submit/reset button we added earlier\n const hiddenButton = this.querySelector(\n 'input.hidden-button',\n ) as HTMLInputElement;\n hiddenButton.dispatchEvent(new PointerEvent('click'));\n }\n\n /**\n * Adds a hidden button to the light DOM to\n * emulate native reset/submit button behavior.\n *\n * Used for:\n * - Submitting/resetting the form (on behalf of handleComponentClick)\n * - Activating any component click events if form is submitted with the enter key\n * (via handleFormActions)\n */\n private addHiddenButton(): void {\n if (this.type === 'button') return;\n\n render(\n html`<input\n type=${this.type}\n class=\"hidden-button\"\n style=\"display:none\"\n slot=\"hidden-button\"\n @click=${(e: Event) => this.handleFormActions(e)}\n />`,\n this,\n );\n }\n\n /** Triggers the component's click event manually to prevent extra submission/reset */\n private handleFormActions(e: Event): void {\n /**\n * Prevents the event from bubbling up to the ia-button component itself.\n * This way, if the click on this button is triggered by a click on the component,\n * we don't accidentally bubble up a second click and end up in an infinite loop.\n *\n * And if the click was triggered by form submission (via the enter key), we can hijack the click\n * event to pass that info to the component, so it knows not to\n * re-attempt submission.\n */\n e.stopPropagation();\n\n // Detect if click comes from the parent component,\n // in which case there's no need to trigger a second click on it\n const triggeredByComponentClick = !e.isTrusted;\n if (triggeredByComponentClick) return;\n\n // Trigger parent component click events manually,\n // so it knows not to try to re-submit/re-reset the form\n this.dispatchEvent(\n new CustomEvent('click', { detail: { formActionsInProgress: true } }),\n );\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --primary-cta-text-color--: var(--primary-cta-text-color);\n --primary-cta-fill--: var(--primary-cta-fill);\n --primary-cta-border--: var(--primary-cta-border);\n\n --secondary-cta-text-color--: var(--secondary-cta-text-color);\n --secondary-cta-fill--: var(--secondary-cta-fill);\n --secondary-cta-border--: var(--secondary-cta-border);\n\n --danger-cta-text-color--: var(--danger-cta-text-color);\n --danger-cta-fill--: var(--danger-cta-fill);\n --danger-cta-border--: var(--danger-cta-border);\n\n --warning-cta-text-color--: var(--warning-cta-text-color);\n --warning-cta-fill--: var(--warning-cta-fill);\n --warning-cta-border--: var(--warning-cta-border);\n\n --disabled-cta-text-color--: var(--disabled-cta-text-color);\n --disabled-cta-fill--: var(--disabled-cta-fill);\n --disabled-cta-border--: var(--disabled-cta-border);\n\n --link-color--: var(--link-color);\n --color-danger--: var(--color-danger);\n\n --button-padding--: var(--button-padding);\n --button-width--: var(--button-width);\n --button-height--: var(--button-height);\n --button-border-width--: var(--button-border-width);\n --button-border-radius--: var(--button-border-radius);\n --base-font-family--: var(--base-font-family);\n --font-size-standard--: var(--font-size-standard);\n\n --ia-button-transition--: var(\n --ia-button-transition,\n all 0.1s ease 0s\n );\n\n --ia-button-custom-text-color--: var(\n --ia-button-custom-text-color,\n var(--primary-cta-text-color--)\n );\n --ia-button-custom-fill--: var(\n --ia-button-custom-fill,\n var(--primary-cta-fill--)\n );\n --ia-button-custom-border--: var(\n --ia-button-custom-border,\n var(--primary-cta-border--)\n );\n --ia-button-custom-active-text-color--: var(\n --ia-button-custom-active-text-color,\n var(--ia-button-custom-text-color--)\n );\n --ia-button-custom-active-fill--: var(\n --ia-button-custom-active-fill,\n var(--ia-button-custom-fill--)\n );\n --ia-button-custom-active-border--: var(\n --ia-button-custom-active-border,\n var(--ia-button-custom-border--)\n );\n\n display: inline-block; /* keeps host sized to button */\n }\n\n button {\n font-family: var(--base-font-family--);\n font-size: var(--font-size-standard--);\n height: var(--button-height--);\n min-height: var(--button-height--);\n width: var(--button-width--);\n padding: var(--button-padding--);\n border-width: var(--button-border-width--);\n border-radius: var(--button-border-radius--);\n transition: var(--ia-button-transition--);\n\n outline-color: currentColor;\n cursor: pointer;\n line-height: normal;\n border-style: solid;\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n outline-offset: -4px;\n user-select: none;\n text-decoration: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n -o-user-select: none;\n }\n\n a {\n text-decoration: none;\n }\n\n button:disabled,\n button.disabled {\n cursor: not-allowed;\n color: var(--disabled-cta-text-color--);\n background-color: var(--disabled-cta-fill--);\n border: 1px solid var(--disabled-cta-border--);\n opacity: 0.5;\n }\n\n button:enabled:hover {\n opacity: 0.9;\n }\n\n button:focus-visible {\n opacity: 0.8;\n outline-style: double;\n }\n\n button:active {\n opacity: 0.7;\n }\n\n button.primary {\n color: var(--primary-cta-text-color--);\n background-color: var(--primary-cta-fill--);\n border-color: var(--primary-cta-border--);\n }\n\n button.secondary {\n color: var(--secondary-cta-text-color--);\n background-color: var(--secondary-cta-fill--);\n border-color: var(--secondary-cta-border--);\n }\n\n button.danger {\n color: var(--danger-cta-text-color--);\n background-color: var(--danger-cta-fill--);\n border-color: var(--danger-cta-border--);\n }\n\n button.warning {\n color: var(--warning-cta-text-color--);\n background-color: var(--warning-cta-fill--);\n border-color: var(--warning-cta-border--);\n }\n\n button.transparent {\n color: inherit;\n border-width: 0;\n background-color: transparent;\n border-color: transparent;\n }\n\n button.custom {\n color: var(--ia-button-custom-text-color--);\n background-color: var(--ia-button-custom-fill--);\n border-color: var(--ia-button-custom-border--);\n }\n\n button.custom:enabled:is(:hover, :focus, :active) {\n color: var(--ia-button-custom-active-text-color--);\n background-color: var(--ia-button-custom-active-fill--);\n border-color: var(--ia-button-custom-active-border--);\n }\n\n :host(.fit-content) button {\n padding: 0;\n height: fit-content;\n }\n\n button.link:enabled:hover,\n button.danger-link:enabled:hover {\n text-decoration: underline;\n }\n\n button.link,\n button.danger-link {\n margin: 0;\n border: 0;\n appearance: none;\n background: none;\n text-decoration: none;\n cursor: pointer;\n padding: 0;\n }\n\n button.link {\n color: var(--link-color--);\n }\n\n button.danger-link {\n color: var(--color-danger--);\n }\n\n .loading-indicator {\n display: flex;\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n }\n\n ia-status-indicator {\n --ia-theme-primary-text-color: currentColor;\n }\n `,\n ];\n }\n}\n"]}
|
package/package.json
CHANGED