kemet-ui 5.0.3 → 5.0.4
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.
- package/custom-elements.json +1389 -1393
- package/dist/{constants-Dj9X-JwG.d.ts → constants-C4-3KYlX.d.ts} +1 -2
- package/dist/elements/alert/index.d.ts +1 -1
- package/dist/elements/alert/index.js +4 -4
- package/dist/elements/alert/index.js.map +1 -1
- package/dist/elements/alert/styles.css.js +4 -4
- package/dist/elements/alert/styles.css.js.map +1 -1
- package/dist/elements/avatar/index.d.ts +1 -1
- package/dist/elements/badge/index.d.ts +1 -1
- package/dist/elements/badge/index.js +1 -1
- package/dist/elements/badge/index.js.map +1 -1
- package/dist/elements/badge/styles.css.js +1 -1
- package/dist/elements/badge/styles.css.js.map +1 -1
- package/dist/elements/button/index.d.ts +1 -1
- package/dist/elements/button/index.js +4 -4
- package/dist/elements/button/index.js.map +1 -1
- package/dist/elements/button/styles.css.js +4 -4
- package/dist/elements/button/styles.css.js.map +1 -1
- package/dist/elements/card/index.d.ts +1 -1
- package/dist/elements/checkbox/index.d.ts +1 -1
- package/dist/elements/checkbox/index.js +7 -4
- package/dist/elements/checkbox/index.js.map +1 -1
- package/dist/elements/checkbox/styles.css.js +1 -1
- package/dist/elements/checkbox/styles.css.js.map +1 -1
- package/dist/elements/combo/index.d.ts +1 -1
- package/dist/elements/count/index.d.ts +1 -1
- package/dist/elements/dialog/index.d.ts +1 -1
- package/dist/elements/fab/index.d.ts +1 -1
- package/dist/elements/fab/index.js +1 -1
- package/dist/elements/fab/index.js.map +1 -1
- package/dist/elements/fab/styles.css.js +1 -1
- package/dist/elements/fab/styles.css.js.map +1 -1
- package/dist/elements/field/index.d.ts +1 -1
- package/dist/elements/flipcard/index.d.ts +1 -1
- package/dist/elements/input/index.d.ts +1 -1
- package/dist/elements/input/index.js +8 -5
- package/dist/elements/input/index.js.map +1 -1
- package/dist/elements/input/styles.css.js +2 -2
- package/dist/elements/input/styles.css.js.map +1 -1
- package/dist/elements/input-combo/index.d.ts +1 -1
- package/dist/elements/input-combo/index.js +2 -2
- package/dist/elements/input-combo/index.js.map +1 -1
- package/dist/elements/input-combo/styles.css.js +2 -2
- package/dist/elements/input-combo/styles.css.js.map +1 -1
- package/dist/elements/password/index.d.ts +1 -1
- package/dist/elements/radio/index.js +2 -8
- package/dist/elements/radio/index.js.map +1 -1
- package/dist/elements/radio/styles.css.js +1 -1
- package/dist/elements/radio/styles.css.js.map +1 -1
- package/dist/elements/radios/index.d.ts +1 -2
- package/dist/elements/radios/index.js +7 -21
- package/dist/elements/radios/index.js.map +1 -1
- package/dist/elements/select/index.d.ts +1 -1
- package/dist/elements/select/index.js +8 -5
- package/dist/elements/select/index.js.map +1 -1
- package/dist/elements/select/styles.css.js +2 -2
- package/dist/elements/select/styles.css.js.map +1 -1
- package/dist/elements/tabs/index.d.ts +1 -1
- package/dist/elements/textarea/index.d.ts +1 -1
- package/dist/elements/textarea/index.js +8 -5
- package/dist/elements/textarea/index.js.map +1 -1
- package/dist/elements/textarea/styles.css.js +2 -2
- package/dist/elements/textarea/styles.css.js.map +1 -1
- package/dist/elements/toggle/index.js +6 -3
- package/dist/elements/toggle/index.js.map +1 -1
- package/dist/wrappers/react.d.ts +1 -1
- package/dist/wrappers/react.js +26 -46
- package/dist/wrappers/react.js.map +1 -1
- package/package.json +1 -1
|
@@ -179,7 +179,6 @@ declare enum EnumInputModes {
|
|
|
179
179
|
*
|
|
180
180
|
*/
|
|
181
181
|
declare class HTMLKemetInputElement extends LitElement {
|
|
182
|
-
/** @internal */
|
|
183
182
|
formSubmitController: FormSubmitController;
|
|
184
183
|
static styles: lit.CSSResult[];
|
|
185
184
|
slug: string;
|
|
@@ -573,4 +572,4 @@ interface InterfaceInputDetails {
|
|
|
573
572
|
value?: string;
|
|
574
573
|
}
|
|
575
574
|
|
|
576
|
-
export {
|
|
575
|
+
export { EnumAppearances as E, HTMLKemetFieldElement as H, type InterfaceKemetSelectionEvent as I, KemetCombo as K, type TypeRoundedSizes as T, KemetCount as a, type InterfaceInputDetails as b, HTMLKemetInputElement as c, EnumRoundedSizes as d, type TypeAppearance as e, HTMLKemetTextareaElement as f, EnumAxis as g, EnumDirections as h, EnumAriaAutoComplete as i, EnumAutoComplete as j, EnumInputModes as k, EnumInputTypes as l, type InterfaceAppearanceChangeEvent as m };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
2
|
import * as lit from 'lit';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
|
-
import {
|
|
4
|
+
import { e as TypeAppearance, T as TypeRoundedSizes } from '../../constants-C4-3KYlX.js';
|
|
5
5
|
import '../../form-controller-3q581XcZ.js';
|
|
6
6
|
|
|
7
7
|
declare enum EnumOverlayPositions {
|
|
@@ -67,8 +67,8 @@ var styles_css_default = css`:host {
|
|
|
67
67
|
--_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
:host([filled][appearance=
|
|
71
|
-
--_kemet-alert-appearance-color: var(--kemet-color-brand-primary-
|
|
70
|
+
:host([filled][appearance=brand]) {
|
|
71
|
+
--_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
:host([filled][appearance="success"]) {
|
|
@@ -111,8 +111,8 @@ var styles_css_default = css`:host {
|
|
|
111
111
|
border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
:host([appearance=
|
|
115
|
-
--_kemet-alert-appearance-color: var(--kemet-color-brand-primary-
|
|
114
|
+
:host([appearance=brand]) {
|
|
115
|
+
--_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
:host([appearance="success"]) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumOverlayPositions {\n FIXED = 'fixed',\n TOP_FULL = 'top-full',\n BOTTOM_FULL = 'bottom-full',\n TOP_RIGHT = 'top-right',\n TOP_LEFT = 'top-left',\n BOTTOM_RIGHT = 'bottom-right',\n BOTTOM_LEFT = 'bottom-left'\n}\n\nexport enum EnumBorderAppearances {\n Top = 'top',\n Right = 'right',\n Bottom = 'bottom',\n Left = 'left'\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {EnumBorderAppearances} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n static styles = [styles];\n\n @property({ type: Boolean, reflect: true })\n opened!: boolean;\n\n @property({ type: Boolean, reflect: true })\n reveal: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n closable: boolean = false;\n\n @property({ type: String, reflect: true })\n appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n @property({ type: String, reflect: true, attribute: 'border-appearance' })\n borderAppearance!: string;\n\n @property({ type: Boolean, reflect: true })\n hidden!: boolean;\n\n @property({ type: String, reflect: true })\n overlay!: string;\n\n @property({ type: String, reflect: true })\n rounded!: constants.TypeRoundedSizes;\n\n @property({ type: Boolean, reflect: true })\n filled!: boolean;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' | 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n private handleTransitionEnd = () => {\n if (!this.opened) {\n this.hidden = true;\n }\n };\n\n private handleAnimationEnd = () => {\n this.reveal = false;\n };\n\n shouldUpdate(prevProps: Map<string, never>) {\n if (prevProps.has('opened') && !prevProps.get('opened')) {\n this.hidden = false;\n this.reveal = true;\n }\n\n return true;\n }\n\n firstUpdated() {\n emitEvent(this, 'kemet-alert-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n this.handleMotion();\n }\n\n updated(prevProps: Map<string, never>) {\n if (!prevProps.get('opened') && this.opened === true) {\n emitEvent(this, 'kemet-opened', this);\n } else {\n emitEvent(this, 'kemet-closed', this);\n }\n }\n\n render() {\n return html`\n <slot name=\"icon\"></slot>\n <div part=\"message\">\n <slot></slot>\n </div>\n <div class=\"close\" part=\"close\">\n ${this.makeCloseBtn()}\n </div>\n `;\n }\n\n private makeCloseBtn() {\n if (this.closable) {\n return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n }\n\n return null;\n }\n\n private handleMotion() {\n this.addEventListener('transitionend', this.handleTransitionEnd);\n this.addEventListener('animationend', this.handleAnimationEnd);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('transitionend', this.handleTransitionEnd);\n this.removeEventListener('animationend', this.handleAnimationEnd);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-alert': KemetAlert\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-alert-align-items: center;\n --kemet-alert-padding: 1rem;\n --kemet-alert-border-thickness: 4px;\n\n /* private */\n --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n --_kemet-alert-border: 1px solid;\n --_kemet-alert-radius: 0;\n --_kemet-alert-color: inherit;\n --_kemet-alert-background-color: transparent;\n\n color: var(--_kemet-alert-color);\n display: flex;\n grid-template-columns: auto 1fr auto;\n gap: var(--kemet-alert-padding);\n align-items: var(--kemet-alert-align-items);\n opacity: 0;\n padding: var(--kemet-alert-padding);\n border: var(--_kemet-alert-border);\n transition: opacity 300ms ease;\n border-radius: var(--_kemet-alert-radius);\n background-color: var(--_kemet-alert-background-color);\n }\n\n :host([polarity=dark]) {\n --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n }\n\n :host([opened]) {\n opacity: 1;\n }\n\n :host([filled]) {\n --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n }\n\n :host([filled][appearance=\"brand\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n }\n\n :host([filled][appearance=\"success\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n }\n\n :host([filled][appearance=\"warning\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n }\n\n :host([filled][appearance=\"error\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n }\n\n :host([filled][appearance=\"info\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n }\n\n :host([filled][appearance=\"link\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n }\n\n :host([appearance]) {\n border-color: var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"top\"]) {\n border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"right\"]) {\n border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"bottom\"]) {\n border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"left\"]) {\n border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([appearance=\"brand\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-base);\n }\n\n :host([appearance=\"success\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n }\n\n :host([appearance=\"warning\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n }\n\n :host([appearance=\"error\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n }\n\n :host([appearance=\"info\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n }\n\n :host([appearance=\"link\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([reveal]) {\n animation: fadeIn 300ms ease forwards;\n }\n\n :host([overlay]) {\n position: fixed;\n }\n\n :host([overlay*=\"full\"]) {\n width: 100%;\n }\n\n :host([overlay*=\"top\"]) {\n top: 0;\n }\n\n :host([overlay*=\"bottom\"]) {\n bottom: 0;\n }\n\n :host([overlay*=\"left\"]) {\n left: 0;\n }\n\n :host([overlay*=\"right\"]) {\n right: 0;\n }\n\n :host([rounded]) {\n --_kemet-alert-radius: var(--kemet-border-radius-md);\n }\n\n :host([rounded=\"sm\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-sm);\n }\n\n :host([rounded=\"md\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-md);\n }\n\n :host([rounded=\"lg\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-lg);\n }\n\n :host([rounded=\"xl\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-xl);\n }\n\n :host([rounded=\"circle\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-circle);\n }\n\n :host([rounded=\"pill\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-pill);\n }\n\n [part=message] {\n display: flex;\n gap: 0.75rem;\n align-items: center;\n }\n\n .close {\n cursor: pointer;\n margin-left: auto;\n }\n\n :host(:not([filled])) ::slotted(kemet-icon) {\n color: var(--_kemet-alert-appearance-color);\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions","EnumBorderAppearances"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/alert/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from '../../utilities/decorators';\nimport { emitEvent } from '../../utilities/events';\nimport * as constants from '../../utilities/constants';\nimport styles from './styles.css.ts';\n\nexport enum EnumOverlayPositions {\n FIXED = 'fixed',\n TOP_FULL = 'top-full',\n BOTTOM_FULL = 'bottom-full',\n TOP_RIGHT = 'top-right',\n TOP_LEFT = 'top-left',\n BOTTOM_RIGHT = 'bottom-right',\n BOTTOM_LEFT = 'bottom-left'\n}\n\nexport enum EnumBorderAppearances {\n Top = 'top',\n Right = 'right',\n Bottom = 'bottom',\n Left = 'left'\n}\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n * @ssrsafe yes\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {EnumBorderAppearances} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @fires kemet-opened - Fires when alert is opened.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-closed - Fires when alert is closed.\n * @detail {HTMLElement} element - The alert element\n *\n * @fires kemet-alert-mounted - Fired when the alert is mounted to the DOM\n * @detail {HTMLElement} element - The alert element\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n static styles = [styles];\n\n @property({ type: Boolean, reflect: true })\n opened!: boolean;\n\n @property({ type: Boolean, reflect: true })\n reveal: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n closable: boolean = false;\n\n @property({ type: String, reflect: true })\n appearance: constants.TypeAppearance = constants.EnumAppearances.Neutral;\n\n @property({ type: String, reflect: true, attribute: 'border-appearance' })\n borderAppearance!: string;\n\n @property({ type: Boolean, reflect: true })\n hidden!: boolean;\n\n @property({ type: String, reflect: true })\n overlay!: string;\n\n @property({ type: String, reflect: true })\n rounded!: constants.TypeRoundedSizes;\n\n @property({ type: Boolean, reflect: true })\n filled!: boolean;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' | 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n private handleTransitionEnd = () => {\n if (!this.opened) {\n this.hidden = true;\n }\n };\n\n private handleAnimationEnd = () => {\n this.reveal = false;\n };\n\n shouldUpdate(prevProps: Map<string, never>) {\n if (prevProps.has('opened') && !prevProps.get('opened')) {\n this.hidden = false;\n this.reveal = true;\n }\n\n return true;\n }\n\n firstUpdated() {\n emitEvent(this, 'kemet-alert-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n this.handleMotion();\n }\n\n updated(prevProps: Map<string, never>) {\n if (!prevProps.get('opened') && this.opened === true) {\n emitEvent(this, 'kemet-opened', this);\n } else {\n emitEvent(this, 'kemet-closed', this);\n }\n }\n\n render() {\n return html`\n <slot name=\"icon\"></slot>\n <div part=\"message\">\n <slot></slot>\n </div>\n <div class=\"close\" part=\"close\">\n ${this.makeCloseBtn()}\n </div>\n `;\n }\n\n private makeCloseBtn() {\n if (this.closable) {\n return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n }\n\n return null;\n }\n\n private handleMotion() {\n this.addEventListener('transitionend', this.handleTransitionEnd);\n this.addEventListener('animationend', this.handleAnimationEnd);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('transitionend', this.handleTransitionEnd);\n this.removeEventListener('animationend', this.handleAnimationEnd);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-alert': KemetAlert\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-alert-align-items: center;\n --kemet-alert-padding: 1rem;\n --kemet-alert-border-thickness: 4px;\n\n /* private */\n --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n --_kemet-alert-border: 1px solid;\n --_kemet-alert-radius: 0;\n --_kemet-alert-color: inherit;\n --_kemet-alert-background-color: transparent;\n\n color: var(--_kemet-alert-color);\n display: flex;\n grid-template-columns: auto 1fr auto;\n gap: var(--kemet-alert-padding);\n align-items: var(--kemet-alert-align-items);\n opacity: 0;\n padding: var(--kemet-alert-padding);\n border: var(--_kemet-alert-border);\n transition: opacity 300ms ease;\n border-radius: var(--_kemet-alert-radius);\n background-color: var(--_kemet-alert-background-color);\n }\n\n :host([polarity=dark]) {\n --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n }\n\n :host([opened]) {\n opacity: 1;\n }\n\n :host([filled]) {\n --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n }\n\n :host([filled][appearance=brand]) {\n --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n }\n\n :host([filled][appearance=\"success\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n }\n\n :host([filled][appearance=\"warning\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n }\n\n :host([filled][appearance=\"error\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n }\n\n :host([filled][appearance=\"info\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n }\n\n :host([filled][appearance=\"link\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n }\n\n :host([appearance]) {\n border-color: var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"top\"]) {\n border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"right\"]) {\n border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"bottom\"]) {\n border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"left\"]) {\n border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([appearance=brand]) {\n --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n }\n\n :host([appearance=\"success\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n }\n\n :host([appearance=\"warning\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n }\n\n :host([appearance=\"error\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n }\n\n :host([appearance=\"info\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n }\n\n :host([appearance=\"link\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([reveal]) {\n animation: fadeIn 300ms ease forwards;\n }\n\n :host([overlay]) {\n position: fixed;\n }\n\n :host([overlay*=\"full\"]) {\n width: 100%;\n }\n\n :host([overlay*=\"top\"]) {\n top: 0;\n }\n\n :host([overlay*=\"bottom\"]) {\n bottom: 0;\n }\n\n :host([overlay*=\"left\"]) {\n left: 0;\n }\n\n :host([overlay*=\"right\"]) {\n right: 0;\n }\n\n :host([rounded]) {\n --_kemet-alert-radius: var(--kemet-border-radius-md);\n }\n\n :host([rounded=\"sm\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-sm);\n }\n\n :host([rounded=\"md\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-md);\n }\n\n :host([rounded=\"lg\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-lg);\n }\n\n :host([rounded=\"xl\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-xl);\n }\n\n :host([rounded=\"circle\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-circle);\n }\n\n :host([rounded=\"pill\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-pill);\n }\n\n [part=message] {\n display: flex;\n gap: 0.75rem;\n align-items: center;\n }\n\n .close {\n cursor: pointer;\n margin-left: auto;\n }\n\n :host(:not([filled])) ::slotted(kemet-icon) {\n color: var(--_kemet-alert-appearance-color);\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions","EnumBorderAppearances"]}
|
|
@@ -41,8 +41,8 @@ var styles_css_default = css`:host {
|
|
|
41
41
|
--_kemet-alert-appearance-color: var(--kemet-color-background-inverse);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
:host([filled][appearance=
|
|
45
|
-
--_kemet-alert-appearance-color: var(--kemet-color-brand-primary-
|
|
44
|
+
:host([filled][appearance=brand]) {
|
|
45
|
+
--_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
:host([filled][appearance="success"]) {
|
|
@@ -85,8 +85,8 @@ var styles_css_default = css`:host {
|
|
|
85
85
|
border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
:host([appearance=
|
|
89
|
-
--_kemet-alert-appearance-color: var(--kemet-color-brand-primary-
|
|
88
|
+
:host([appearance=brand]) {
|
|
89
|
+
--_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
:host([appearance="success"]) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-alert-align-items: center;\n --kemet-alert-padding: 1rem;\n --kemet-alert-border-thickness: 4px;\n\n /* private */\n --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n --_kemet-alert-border: 1px solid;\n --_kemet-alert-radius: 0;\n --_kemet-alert-color: inherit;\n --_kemet-alert-background-color: transparent;\n\n color: var(--_kemet-alert-color);\n display: flex;\n grid-template-columns: auto 1fr auto;\n gap: var(--kemet-alert-padding);\n align-items: var(--kemet-alert-align-items);\n opacity: 0;\n padding: var(--kemet-alert-padding);\n border: var(--_kemet-alert-border);\n transition: opacity 300ms ease;\n border-radius: var(--_kemet-alert-radius);\n background-color: var(--_kemet-alert-background-color);\n }\n\n :host([polarity=dark]) {\n --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n }\n\n :host([opened]) {\n opacity: 1;\n }\n\n :host([filled]) {\n --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n }\n\n :host([filled][appearance
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/alert/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-alert-align-items: center;\n --kemet-alert-padding: 1rem;\n --kemet-alert-border-thickness: 4px;\n\n /* private */\n --_kemet-alert-appearance-color: var(--kemet-color-font-base);\n --_kemet-alert-border: 1px solid;\n --_kemet-alert-radius: 0;\n --_kemet-alert-color: inherit;\n --_kemet-alert-background-color: transparent;\n\n color: var(--_kemet-alert-color);\n display: flex;\n grid-template-columns: auto 1fr auto;\n gap: var(--kemet-alert-padding);\n align-items: var(--kemet-alert-align-items);\n opacity: 0;\n padding: var(--kemet-alert-padding);\n border: var(--_kemet-alert-border);\n transition: opacity 300ms ease;\n border-radius: var(--_kemet-alert-radius);\n background-color: var(--_kemet-alert-background-color);\n }\n\n :host([polarity=dark]) {\n --_kemet-alert-appearance-color: var(--kemet-color-font-inverse-base);\n }\n\n :host([opened]) {\n opacity: 1;\n }\n\n :host([filled]) {\n --_kemet-alert-border: 2px solid var(--kemet-color-font-inverse-base);\n --_kemet-alert-color: var(--kemet-color-font-inverse-base);\n --_kemet-alert-background-color: var(--_kemet-alert-appearance-color);\n --_kemet-alert-appearance-color: var(--kemet-color-background-inverse);\n }\n\n :host([filled][appearance=brand]) {\n --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n }\n\n :host([filled][appearance=\"success\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n }\n\n :host([filled][appearance=\"warning\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n }\n\n :host([filled][appearance=\"error\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n }\n\n :host([filled][appearance=\"info\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n }\n\n :host([filled][appearance=\"link\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n }\n\n :host([appearance]) {\n border-color: var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"top\"]) {\n border-top: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"right\"]) {\n border-right: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"bottom\"]) {\n border-bottom: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([border-appearance=\"left\"]) {\n border-left: var(--kemet-alert-border-thickness) solid var(--_kemet-alert-appearance-color);\n }\n\n :host([appearance=brand]) {\n --_kemet-alert-appearance-color: var(--kemet-color-brand-primary-darker);\n }\n\n :host([appearance=\"success\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-success);\n }\n\n :host([appearance=\"warning\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-warning);\n }\n\n :host([appearance=\"error\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-error);\n }\n\n :host([appearance=\"info\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-info);\n }\n\n :host([appearance=\"link\"]) {\n --_kemet-alert-appearance-color: var(--kemet-color-background-link);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([reveal]) {\n animation: fadeIn 300ms ease forwards;\n }\n\n :host([overlay]) {\n position: fixed;\n }\n\n :host([overlay*=\"full\"]) {\n width: 100%;\n }\n\n :host([overlay*=\"top\"]) {\n top: 0;\n }\n\n :host([overlay*=\"bottom\"]) {\n bottom: 0;\n }\n\n :host([overlay*=\"left\"]) {\n left: 0;\n }\n\n :host([overlay*=\"right\"]) {\n right: 0;\n }\n\n :host([rounded]) {\n --_kemet-alert-radius: var(--kemet-border-radius-md);\n }\n\n :host([rounded=\"sm\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-sm);\n }\n\n :host([rounded=\"md\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-md);\n }\n\n :host([rounded=\"lg\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-lg);\n }\n\n :host([rounded=\"xl\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-xl);\n }\n\n :host([rounded=\"circle\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-circle);\n }\n\n :host([rounded=\"pill\"]) {\n --_kemet-alert-radius: var(--kemet-border-radius-pill);\n }\n\n [part=message] {\n display: flex;\n gap: 0.75rem;\n align-items: center;\n }\n\n .close {\n cursor: pointer;\n margin-left: auto;\n }\n\n :host(:not([filled])) ::slotted(kemet-icon) {\n color: var(--_kemet-alert-appearance-color);\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
2
|
import * as lit from 'lit';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
|
-
import {
|
|
4
|
+
import { T as TypeRoundedSizes } from '../../constants-C4-3KYlX.js';
|
|
5
5
|
import '../../form-controller-3q581XcZ.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
2
|
import * as lit from 'lit';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
|
-
import {
|
|
4
|
+
import { E as EnumAppearances, d as EnumRoundedSizes } from '../../constants-C4-3KYlX.js';
|
|
5
5
|
import '../../form-controller-3q581XcZ.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n * @ssrsafe yes\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n static styles = [styles];\n\n @property({ reflect: true })\n appearance!: EnumAppearances;\n\n @property({ type: Number, attribute: 'circle-padding' })\n circlePadding: number = 0;\n\n @property({ type: String, reflect: true })\n rounded!: EnumRoundedSizes;\n\n @property({ type: Boolean, reflect: true })\n outlined: boolean = false;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' | 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n @state()\n iconLeft: boolean = false;\n\n @state()\n iconRight: boolean = false;\n\n firstUpdated() {\n emitEvent(this, 'kemet-badge-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n render() {\n return html`\n <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n ${this.iconLeft ? html` ` : ''}\n <slot @slotchange=${() => this.handleSlotChange()}></slot>\n ${this.iconRight ? html` ` : ''}\n <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n `;\n }\n\n handleSlotChange() {\n if (this.rounded === EnumRoundedSizes.Circle) {\n this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n }\n }\n\n handleLeftChange() {\n const left = this.querySelector('[slot=\"left\"]');\n if (left) this.iconLeft = true;\n }\n\n handleRightChange() {\n const right = this.querySelector('[slot=\"right\"]');\n if (right) this.iconRight = true;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-badge': KemetBadge\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-badge-padding: 10px;\n --kemet-badge-border-width: 1px;\n --kemet-badge-border-style: solid;\n\n /* private */\n --_kemet-badge-background-color: var(--_kemet-badge-color);\n --_kemet-badge-border: 0;\n --_kemet-badge-border-color: var(--_kemet-badge-color);\n --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--kemet-badge-padding);\n line-height: 1;\n color: var(--_kemet-badge-font-color);\n background-color: var(--_kemet-badge-background-color);\n border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n --_kemet-badge-font-color: var(--kemet-color-font-base);\n --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n --_kemet-badge-color: var(--kemet-color-brand-primary-
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/badge/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from '../../utilities/decorators';\nimport { EnumRoundedSizes, EnumAppearances } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n * @ssrsafe yes\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n * @prop {EnumAppearance} appearance - The appearance of the badge's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @fires kemet-badge-mounted - Fires when the badge is mounted\n * @detail {HTMLElement} element - The badge element\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge.\n * @cssproperty --kemet-badge-border-width - The border width of the badge.\n * @cssproperty --kemet-badge-border-style - The border style of the badge.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n static styles = [styles];\n\n @property({ reflect: true })\n appearance!: EnumAppearances;\n\n @property({ type: Number, attribute: 'circle-padding' })\n circlePadding: number = 0;\n\n @property({ type: String, reflect: true })\n rounded!: EnumRoundedSizes;\n\n @property({ type: Boolean, reflect: true })\n outlined: boolean = false;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' | 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n @state()\n iconLeft: boolean = false;\n\n @state()\n iconRight: boolean = false;\n\n firstUpdated() {\n emitEvent(this, 'kemet-badge-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n render() {\n return html`\n <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n ${this.iconLeft ? html` ` : ''}\n <slot @slotchange=${() => this.handleSlotChange()}></slot>\n ${this.iconRight ? html` ` : ''}\n <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n `;\n }\n\n handleSlotChange() {\n if (this.rounded === EnumRoundedSizes.Circle) {\n this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n }\n }\n\n handleLeftChange() {\n const left = this.querySelector('[slot=\"left\"]');\n if (left) this.iconLeft = true;\n }\n\n handleRightChange() {\n const right = this.querySelector('[slot=\"right\"]');\n if (right) this.iconRight = true;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-badge': KemetBadge\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-badge-padding: 10px;\n --kemet-badge-border-width: 1px;\n --kemet-badge-border-style: solid;\n\n /* private */\n --_kemet-badge-background-color: var(--_kemet-badge-color);\n --_kemet-badge-border: 0;\n --_kemet-badge-border-color: var(--_kemet-badge-color);\n --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--kemet-badge-padding);\n line-height: 1;\n color: var(--_kemet-badge-font-color);\n background-color: var(--_kemet-badge-background-color);\n border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n --_kemet-badge-font-color: var(--kemet-color-font-base);\n --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n --_kemet-badge-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]) {\n --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n --_kemet-badge-font-color: var(--_kemet-badge-color);\n --_kemet-badge-background-color: transparent;\n --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":"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","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-badge-padding: 10px;\n --kemet-badge-border-width: 1px;\n --kemet-badge-border-style: solid;\n\n /* private */\n --_kemet-badge-background-color: var(--_kemet-badge-color);\n --_kemet-badge-border: 0;\n --_kemet-badge-border-color: var(--_kemet-badge-color);\n --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--kemet-badge-padding);\n line-height: 1;\n color: var(--_kemet-badge-font-color);\n background-color: var(--_kemet-badge-background-color);\n border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n --_kemet-badge-font-color: var(--kemet-color-font-base);\n --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n --_kemet-badge-color: var(--kemet-color-brand-primary-
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/badge/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-badge-padding: 10px;\n --kemet-badge-border-width: 1px;\n --kemet-badge-border-style: solid;\n\n /* private */\n --_kemet-badge-background-color: var(--_kemet-badge-color);\n --_kemet-badge-border: 0;\n --_kemet-badge-border-color: var(--_kemet-badge-color);\n --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-badge-color: var(--kemet-color-background-badge-primary-base);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--kemet-badge-padding);\n line-height: 1;\n color: var(--_kemet-badge-font-color);\n background-color: var(--_kemet-badge-background-color);\n border: var(--_kemet-badge-border);\n}\n\n:host([polarity=dark]) {\n --_kemet-badge-font-color: var(--kemet-color-font-base);\n --_kemet-badge-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance]) {\n --_kemet-badge-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]) {\n --_kemet-badge-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]) {\n --_kemet-badge-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]) {\n --_kemet-badge-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]) {\n --_kemet-badge-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]) {\n --_kemet-badge-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]) {\n --_kemet-badge-color: var(--kemet-color-background-link);\n}\n\n\n:host([rounded]) {\n border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=md]) {\n border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=lg]) {\n border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n border-radius: var(--kemet-border-radius-circle);\n}\n\n:host([rounded=pill]) {\n border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([outlined]) {\n --_kemet-badge-font-color: var(--_kemet-badge-color);\n --_kemet-badge-background-color: transparent;\n --_kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--_kemet-badge-color);\n}\n\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
2
|
import * as lit from 'lit';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
|
-
import {
|
|
4
|
+
import { T as TypeRoundedSizes, e as TypeAppearance } from '../../constants-C4-3KYlX.js';
|
|
5
5
|
import '../../form-controller-3q581XcZ.js';
|
|
6
6
|
|
|
7
7
|
declare enum EnumVariants {
|
|
@@ -133,7 +133,7 @@ var styles_css_default = css`:host {
|
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
|
|
136
|
-
--_kemet-button-background-color: var(--kemet-color-brand-primary-
|
|
136
|
+
--_kemet-button-background-color: var(--kemet-color-brand-primary-darker);
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
|
|
@@ -158,7 +158,7 @@ var styles_css_default = css`:host {
|
|
|
158
158
|
|
|
159
159
|
:host([variant=text][appearance=brand]:not([disabled])),
|
|
160
160
|
:host([variant=plain][appearance=brand]:not([disabled])) {
|
|
161
|
-
--_kemet-button-font-color: var(--kemet-color-brand-primary-
|
|
161
|
+
--_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
:host([variant=text][appearance=success]:not([disabled])),
|
|
@@ -223,9 +223,9 @@ var styles_css_default = css`:host {
|
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
:host([variant=outlined][appearance=brand]:not([disabled])) {
|
|
226
|
-
--_kemet-button-font-color: var(--kemet-color-brand-primary-
|
|
226
|
+
--_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
|
|
227
227
|
--_kemet-button-background-color: transparent;
|
|
228
|
-
--_kemet-button-border-color: var(--kemet-color-brand-primary-
|
|
228
|
+
--_kemet-button-border-color: var(--kemet-color-brand-primary-darker);
|
|
229
229
|
--_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
|
|
230
230
|
}
|
|
231
231
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/button/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from '../../utilities/decorators';\nimport type { TypeRoundedSizes, TypeAppearance } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumVariants {\n Standard = 'standard',\n Text = 'text',\n Outlined = 'outlined',\n Plain = 'plain',\n Edge = 'edge',\n}\n\nexport enum EnumTargets {\n Blank = '_blank',\n Self = '_self',\n Parent = '_parent',\n Top = '_top'\n}\n\nexport enum EnumTypes {\n Button = 'button',\n Submit = 'submit',\n Reset = 'reset'\n}\n\nexport enum EnumSizes {\n XSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n XLarge = 'xl'\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n * @ssrsafe yes\n *\n * @prop {string} href - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {TypeVariants} variant - Controls the type of button.\n * @prop {TypeTargets} target - The target attribute for a link\n * @prop {TypeTypes} type - The type attribute for a button\n * @prop {TypeRoundedSizes} rounded - The border radius of the button\n * @prop {EnumSizes} size - The size of the button\n * @prop {boolean} loading - Determines if the button is in a loading state\n * @prop {EnumAppearance} appearance - The appearance of the button's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover state.\n * @cssproperty --kemet-button-active-brightness - The brightness of the active state.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-border-width - The width of the outline border.\n * @cssproperty --kemet-button-border-style - The style of the outline border.\n *\n * @fires kemet-button-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n static styles = [styles];\n\n @property({ type: String })\n href!: string;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ reflect: true })\n variant: EnumVariants = EnumVariants.Standard;\n\n @property()\n target: EnumTargets = EnumTargets.Self;\n\n @property()\n type: EnumTypes = EnumTypes.Button;\n\n @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n iconLeft: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n iconRight: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'icon-button' })\n iconButton: boolean = false;\n\n @property({ type: String, reflect: true })\n rounded!: TypeRoundedSizes;\n\n @property({ type: Boolean, reflect: true })\n loading: boolean = false;\n\n @property({ type: String, reflect: true })\n appearance!: TypeAppearance;\n\n @property({ type: String, reflect: true })\n size!: EnumSizes;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' | 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n\n @query('button')\n internalButton!: HTMLButtonElement;\n\n firstUpdated() {\n emitEvent(this, 'kemet-button-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n render() {\n if (this.href && !this.disabled) {\n return html`\n <a\n href=${this.href}\n target=${this.target}\n class=\"button\"\n part=\"button\"\n @click=${(event: PointerEvent) => this.handleClick(event)}\n >\n <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n <span class=\"text\"><slot></slot></span>\n <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n </a>\n `;\n }\n\n return html`\n <button\n class=\"button\"\n part=\"button\"\n type=${this.type}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-label=${this.loading ? 'Loading' : ''}\n @click=${(event: PointerEvent) => this.handleClick(event)}\n >\n <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n <span class=\"text\"><slot></slot></span>\n <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n </button>\n `;\n }\n\n private handleLeftChange() {\n const left = this.querySelector('[slot=\"left\"]');\n if (left) this.iconLeft = true;\n }\n\n private handleRightChange() {\n const right = this.querySelector('[slot=\"right\"]');\n if (right) this.iconRight = true;\n }\n\n private handleIconButtonChange() {\n const iconButton = this.querySelector('[slot=\"icon-button\"]');\n if (iconButton) this.iconButton = true;\n }\n\n private makeLightDOMButton() {\n const button = document.createElement('button');\n\n for (const attribute of this.attributes) {\n button.setAttribute(attribute.name, attribute.value);\n }\n\n button.type = this.type;\n button.style.position = 'absolute !important';\n button.style.width = '0 !important';\n button.style.height = '0 !important';\n button.style.clipPath = 'inset(50%) !important';\n button.style.overflow = 'hidden !important';\n button.style.whiteSpace = 'nowrap !important';\n button.value = '';\n\n return button;\n }\n\n private handleClick(event: PointerEvent) {\n if (this.disabled || this.loading) {\n event?.preventDefault();\n return;\n }\n\n const form = this.closest('form');\n\n if (!form || (this.type !== EnumTypes.Submit && this.type !== EnumTypes.Reset)) {\n return;\n }\n\n const lightDOMButton = this.makeLightDOMButton();\n\n form.appendChild(lightDOMButton);\n lightDOMButton.click();\n lightDOMButton.remove();\n }\n\n\n /**\n * Triggers a click event on the button element.\n * @method click\n * @public\n * @returns {void}\n */\n click() {\n if (!this.internalButton) {\n return;\n }\n this.internalButton.click();\n }\n\n /**\n * Triggers a blur on the button element.\n * @method blur\n * @public\n * @returns {void}\n */\n blur() {\n if (!this.internalButton) {\n return;\n }\n this.internalButton.blur();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-button': KemetButton\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-button-hover-brightness: 1.25;\n --kemet-button-active-brightness: 1.75;\n --kemet-button-circle-size: 50px;\n --kemet-button-transition-speed: 300ms;\n --kemet-button-gap: 0.5rem;\n --kemet-button-border-width: 1.5px;\n --kemet-button-border-style: solid;\n\n /* private */\n --_kemet-button-brightness: 1;\n --_kemet-button-font-size: inherit;\n --_kemet-button-width: auto;\n --_kemet-button-height: auto;\n --_kemet-button-padding: 1rem 1.25rem;\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-button-border: 0;\n --_kemet-button-border-radius: 0;\n --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n --_kemet-button-hover-decoration: underline;\n --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_kemet-button-font-size);\n color: var(--_kemet-button-font-color);\n width: var(--_kemet-button-width);\n height: var(--_kemet-button-height);\n border: var(--_kemet-button-border);\n border-radius: var(--_kemet-button-border-radius);\n filter: brightness(var(--_kemet-button-brightness));\n transition: filter var(--kemet-button-transition-speed) ease;\n background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n --_kemet-button-font-color: var(--kemet-color-font-disabled);\n --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n cursor: pointer;\n text-decoration: none;\n display: flex;\n gap: var(--kemet-button-gap);\n align-items: center;\n justify-content: center;\n color: inherit;\n font-size: inherit;\n width: 100%;\n padding: var(--_kemet-button-padding);\n border: 0;\n background: none;\n}\n\n:host([disabled]) .button {\n cursor: not-allowed;\n}\n\n:host([variant=text]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n --_kemet-button-width: var(--kemet-button-circle-size);\n --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-brand-primary-base);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-success);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-success);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-warning);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-warning);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-error);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-error);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-info);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-info);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-link);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-link);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-padding: 0;\n --_kemet-button-border: none;\n --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n --_kemet-button-font-size: 0.8rem;\n --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n --_kemet-button-font-size: 0.9rem;\n --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n --_kemet-button-font-size: 1.1rem;\n --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n --_kemet-button-font-size: 1.2rem;\n --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n --_kemet-button-padding: 1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n --kemet-loader-color: var(--_kemet-button-font-color);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n visibility: hidden;\n}\n\n:host([icon-button]) .text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n`;\n"],"mappings":"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","names":["EnumVariants","EnumTargets","EnumTypes","EnumSizes"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/button/index.ts","../../../src/utilities/decorators.ts","../../../src/utilities/events.ts","../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, query } from '../../utilities/decorators';\nimport type { TypeRoundedSizes, TypeAppearance } from '../../utilities/constants';\nimport { emitEvent } from '../../utilities/events';\nimport styles from './styles.css.ts';\n\nexport enum EnumVariants {\n Standard = 'standard',\n Text = 'text',\n Outlined = 'outlined',\n Plain = 'plain',\n Edge = 'edge',\n}\n\nexport enum EnumTargets {\n Blank = '_blank',\n Self = '_self',\n Parent = '_parent',\n Top = '_top'\n}\n\nexport enum EnumTypes {\n Button = 'button',\n Submit = 'submit',\n Reset = 'reset'\n}\n\nexport enum EnumSizes {\n XSmall = 'xs',\n Small = 'sm',\n Medium = 'md',\n Large = 'lg',\n XLarge = 'xl'\n}\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-button\n * @summary A versatile button that can be used either to submit a form, trigger an action, or link to content.\n * @ssrsafe yes\n *\n * @prop {string} href - The url a button should link too\n * @prop {boolean} outlined - Outline style for a button\n * @prop {boolean} disabled - Determines whether not a button is disabled\n * @prop {TypeVariants} variant - Controls the type of button.\n * @prop {TypeTargets} target - The target attribute for a link\n * @prop {TypeTypes} type - The type attribute for a button\n * @prop {TypeRoundedSizes} rounded - The border radius of the button\n * @prop {EnumSizes} size - The size of the button\n * @prop {boolean} loading - Determines if the button is in a loading state\n * @prop {EnumAppearance} appearance - The appearance of the button's color\n * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background\n * @prop {string} dom - The status of dom initalization.\n *\n * @slot left - Allows you to place an icon to the left of the button text.\n * @slot right - Allows you to place an icon to the right of the button text.\n *\n * @csspart button - The button or anchor element.\n *\n * @cssproperty --kemet-button-hover-brightness - The brightness of the hover state.\n * @cssproperty --kemet-button-active-brightness - The brightness of the active state.\n * @cssproperty --kemet-button-circle-size - The diameter of a circle button.\n * @cssproperty --kemet-button-transition-speed - The transition speed of the hover effect.\n * @cssproperty --kemet-button-gap - The gap between the button and icons.\n * @cssproperty --kemet-button-border-width - The width of the outline border.\n * @cssproperty --kemet-button-border-style - The style of the outline border.\n *\n * @fires kemet-button-mounted - Fired when the button is mounted to the DOM\n * @detail {HTMLElement} element - The button element\n */\n\n@customElement('kemet-button')\nexport default class KemetButton extends LitElement {\n static styles = [styles];\n\n @property({ type: String })\n href!: string;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n @property({ reflect: true })\n variant: EnumVariants = EnumVariants.Standard;\n\n @property()\n target: EnumTargets = EnumTargets.Self;\n\n @property()\n type: EnumTypes = EnumTypes.Button;\n\n @property({ type: Boolean, reflect: true, attribute: 'icon-left' })\n iconLeft: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'icon-right' })\n iconRight: boolean = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'icon-button' })\n iconButton: boolean = false;\n\n @property({ type: String, reflect: true })\n rounded!: TypeRoundedSizes;\n\n @property({ type: Boolean, reflect: true })\n loading: boolean = false;\n\n @property({ type: String, reflect: true })\n appearance!: TypeAppearance;\n\n @property({ type: String, reflect: true })\n size!: EnumSizes;\n\n @property({ type: String, reflect: true })\n polarity?: 'light' | 'dark';\n\n @property({ type: String, reflect: true })\n dom: string = 'initializing';\n\n\n @query('button')\n internalButton!: HTMLButtonElement;\n\n firstUpdated() {\n emitEvent(this, 'kemet-button-mounted', {\n bubbles: true,\n composed: true,\n detail: {\n element: this,\n },\n });\n this.dom = 'mounted';\n }\n\n render() {\n if (this.href && !this.disabled) {\n return html`\n <a\n href=${this.href}\n target=${this.target}\n class=\"button\"\n part=\"button\"\n @click=${(event: PointerEvent) => this.handleClick(event)}\n >\n <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n <span class=\"text\"><slot></slot></span>\n <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n </a>\n `;\n }\n\n return html`\n <button\n class=\"button\"\n part=\"button\"\n type=${this.type}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n aria-label=${this.loading ? 'Loading' : ''}\n @click=${(event: PointerEvent) => this.handleClick(event)}\n >\n <slot name=\"left\" @slotchange=${this.handleLeftChange}></slot>\n <slot name=\"icon-button\" @slotchange=${this.handleIconButtonChange}></slot>\n ${this.loading ? html`<slot name=\"loader\"></slot>` : ''}\n <span class=\"text\"><slot></slot></span>\n <slot name=\"right\" @slotchange=${this.handleRightChange}></slot>\n </button>\n `;\n }\n\n private handleLeftChange() {\n const left = this.querySelector('[slot=\"left\"]');\n if (left) this.iconLeft = true;\n }\n\n private handleRightChange() {\n const right = this.querySelector('[slot=\"right\"]');\n if (right) this.iconRight = true;\n }\n\n private handleIconButtonChange() {\n const iconButton = this.querySelector('[slot=\"icon-button\"]');\n if (iconButton) this.iconButton = true;\n }\n\n private makeLightDOMButton() {\n const button = document.createElement('button');\n\n for (const attribute of this.attributes) {\n button.setAttribute(attribute.name, attribute.value);\n }\n\n button.type = this.type;\n button.style.position = 'absolute !important';\n button.style.width = '0 !important';\n button.style.height = '0 !important';\n button.style.clipPath = 'inset(50%) !important';\n button.style.overflow = 'hidden !important';\n button.style.whiteSpace = 'nowrap !important';\n button.value = '';\n\n return button;\n }\n\n private handleClick(event: PointerEvent) {\n if (this.disabled || this.loading) {\n event?.preventDefault();\n return;\n }\n\n const form = this.closest('form');\n\n if (!form || (this.type !== EnumTypes.Submit && this.type !== EnumTypes.Reset)) {\n return;\n }\n\n const lightDOMButton = this.makeLightDOMButton();\n\n form.appendChild(lightDOMButton);\n lightDOMButton.click();\n lightDOMButton.remove();\n }\n\n\n /**\n * Triggers a click event on the button element.\n * @method click\n * @public\n * @returns {void}\n */\n click() {\n if (!this.internalButton) {\n return;\n }\n this.internalButton.click();\n }\n\n /**\n * Triggers a blur on the button element.\n * @method blur\n * @public\n * @returns {void}\n */\n blur() {\n if (!this.internalButton) {\n return;\n }\n this.internalButton.blur();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-button': KemetButton\n }\n}\n","export { property, state, query, queryAll } from 'lit/decorators.js';\nimport { customElement as litCustomElement } from 'lit/decorators.js';\n\n/**\n * A drop-in replacement for lit's `customElement` decorator that is safe under\n * hot-module-replacement / live-reload environments where the module may be\n * re-evaluated.\n */\nexport const customElement = (tagName: string) => (classOrDescriptor: any) =>\n typeof customElements !== 'undefined' && !customElements.get(tagName)\n ? litCustomElement(tagName)(classOrDescriptor)\n : classOrDescriptor;\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n element.dispatchEvent(\n new CustomEvent(name, { bubbles, composed, detail }),\n );\n};\n","import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-button-hover-brightness: 1.25;\n --kemet-button-active-brightness: 1.75;\n --kemet-button-circle-size: 50px;\n --kemet-button-transition-speed: 300ms;\n --kemet-button-gap: 0.5rem;\n --kemet-button-border-width: 1.5px;\n --kemet-button-border-style: solid;\n\n /* private */\n --_kemet-button-brightness: 1;\n --_kemet-button-font-size: inherit;\n --_kemet-button-width: auto;\n --_kemet-button-height: auto;\n --_kemet-button-padding: 1rem 1.25rem;\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-button-border: 0;\n --_kemet-button-border-radius: 0;\n --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n --_kemet-button-hover-decoration: underline;\n --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_kemet-button-font-size);\n color: var(--_kemet-button-font-color);\n width: var(--_kemet-button-width);\n height: var(--_kemet-button-height);\n border: var(--_kemet-button-border);\n border-radius: var(--_kemet-button-border-radius);\n filter: brightness(var(--_kemet-button-brightness));\n transition: filter var(--kemet-button-transition-speed) ease;\n background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n --_kemet-button-font-color: var(--kemet-color-font-disabled);\n --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n cursor: pointer;\n text-decoration: none;\n display: flex;\n gap: var(--kemet-button-gap);\n align-items: center;\n justify-content: center;\n color: inherit;\n font-size: inherit;\n width: 100%;\n padding: var(--_kemet-button-padding);\n border: 0;\n background: none;\n}\n\n:host([disabled]) .button {\n cursor: not-allowed;\n}\n\n:host([variant=text]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n --_kemet-button-width: var(--kemet-button-circle-size);\n --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-brand-primary-darker);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-success);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-success);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-warning);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-warning);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-error);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-error);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-info);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-info);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-link);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-link);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-padding: 0;\n --_kemet-button-border: none;\n --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n --_kemet-button-font-size: 0.8rem;\n --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n --_kemet-button-font-size: 0.9rem;\n --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n --_kemet-button-font-size: 1.1rem;\n --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n --_kemet-button-font-size: 1.2rem;\n --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n --_kemet-button-padding: 1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n --kemet-loader-color: var(--_kemet-button-font-color);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n visibility: hidden;\n}\n\n:host([icon-button]) .text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n`;\n"],"mappings":"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","names":["EnumVariants","EnumTargets","EnumTypes","EnumSizes"]}
|
|
@@ -107,7 +107,7 @@ var styles_css_default = css`:host {
|
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
|
|
110
|
-
--_kemet-button-background-color: var(--kemet-color-brand-primary-
|
|
110
|
+
--_kemet-button-background-color: var(--kemet-color-brand-primary-darker);
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {
|
|
@@ -132,7 +132,7 @@ var styles_css_default = css`:host {
|
|
|
132
132
|
|
|
133
133
|
:host([variant=text][appearance=brand]:not([disabled])),
|
|
134
134
|
:host([variant=plain][appearance=brand]:not([disabled])) {
|
|
135
|
-
--_kemet-button-font-color: var(--kemet-color-brand-primary-
|
|
135
|
+
--_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
:host([variant=text][appearance=success]:not([disabled])),
|
|
@@ -197,9 +197,9 @@ var styles_css_default = css`:host {
|
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
:host([variant=outlined][appearance=brand]:not([disabled])) {
|
|
200
|
-
--_kemet-button-font-color: var(--kemet-color-brand-primary-
|
|
200
|
+
--_kemet-button-font-color: var(--kemet-color-brand-primary-darker);
|
|
201
201
|
--_kemet-button-background-color: transparent;
|
|
202
|
-
--_kemet-button-border-color: var(--kemet-color-brand-primary-
|
|
202
|
+
--_kemet-button-border-color: var(--kemet-color-brand-primary-darker);
|
|
203
203
|
--_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);
|
|
204
204
|
}
|
|
205
205
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-button-hover-brightness: 1.25;\n --kemet-button-active-brightness: 1.75;\n --kemet-button-circle-size: 50px;\n --kemet-button-transition-speed: 300ms;\n --kemet-button-gap: 0.5rem;\n --kemet-button-border-width: 1.5px;\n --kemet-button-border-style: solid;\n\n /* private */\n --_kemet-button-brightness: 1;\n --_kemet-button-font-size: inherit;\n --_kemet-button-width: auto;\n --_kemet-button-height: auto;\n --_kemet-button-padding: 1rem 1.25rem;\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-button-border: 0;\n --_kemet-button-border-radius: 0;\n --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n --_kemet-button-hover-decoration: underline;\n --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_kemet-button-font-size);\n color: var(--_kemet-button-font-color);\n width: var(--_kemet-button-width);\n height: var(--_kemet-button-height);\n border: var(--_kemet-button-border);\n border-radius: var(--_kemet-button-border-radius);\n filter: brightness(var(--_kemet-button-brightness));\n transition: filter var(--kemet-button-transition-speed) ease;\n background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n --_kemet-button-font-color: var(--kemet-color-font-disabled);\n --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n cursor: pointer;\n text-decoration: none;\n display: flex;\n gap: var(--kemet-button-gap);\n align-items: center;\n justify-content: center;\n color: inherit;\n font-size: inherit;\n width: 100%;\n padding: var(--_kemet-button-padding);\n border: 0;\n background: none;\n}\n\n:host([disabled]) .button {\n cursor: not-allowed;\n}\n\n:host([variant=text]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n --_kemet-button-width: var(--kemet-button-circle-size);\n --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-brand-primary-base);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-brand-primary-base);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-success);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-success);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-warning);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-warning);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-error);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-error);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-info);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-info);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-link);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-link);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-padding: 0;\n --_kemet-button-border: none;\n --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n --_kemet-button-font-size: 0.8rem;\n --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n --_kemet-button-font-size: 0.9rem;\n --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n --_kemet-button-font-size: 1.1rem;\n --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n --_kemet-button-font-size: 1.2rem;\n --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n --_kemet-button-padding: 1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n --kemet-loader-color: var(--_kemet-button-font-color);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n visibility: hidden;\n}\n\n:host([icon-button]) .text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/elements/button/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`:host {\n /* public */\n --kemet-button-hover-brightness: 1.25;\n --kemet-button-active-brightness: 1.75;\n --kemet-button-circle-size: 50px;\n --kemet-button-transition-speed: 300ms;\n --kemet-button-gap: 0.5rem;\n --kemet-button-border-width: 1.5px;\n --kemet-button-border-style: solid;\n\n /* private */\n --_kemet-button-brightness: 1;\n --_kemet-button-font-size: inherit;\n --_kemet-button-width: auto;\n --_kemet-button-height: auto;\n --_kemet-button-padding: 1rem 1.25rem;\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-button-border: 0;\n --_kemet-button-border-radius: 0;\n --_kemet-button-background-color: var(--kemet-color-background-button-primary-base);\n --_kemet-button-hover-decoration: underline;\n --_kemet-button-border-color: var(--kemet-color-background-button-primary-base);\n\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_kemet-button-font-size);\n color: var(--_kemet-button-font-color);\n width: var(--_kemet-button-width);\n height: var(--_kemet-button-height);\n border: var(--_kemet-button-border);\n border-radius: var(--_kemet-button-border-radius);\n filter: brightness(var(--_kemet-button-brightness));\n transition: filter var(--kemet-button-transition-speed) ease;\n background-color: var(--_kemet-button-background-color);\n}\n\n:host(:hover:not([disabled])) {\n --_kemet-button-brightness: var(--kemet-button-hover-brightness);\n}\n\n:host(:active:not([disabled])) {\n --_kemet-button-brightness: var(--kemet-button-active-brightness);\n}\n\n:host([disabled]) {\n --_kemet-button-font-color: var(--kemet-color-font-disabled);\n --_kemet-button-background-color: var(--kemet-color-background-disabled);\n}\n\n:host([disabled][variant=outlined]) {\n --_kemet-button-border-color: var(--kemet-color-font-disabled);\n}\n\n:host([polarity=dark]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-background-color: var(--kemet-color-background-base);\n}\n\n:host([polarity=dark][appearance]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=text]),\n:host([polarity=dark][variant=plain]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([polarity=dark][variant=outlined]) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n --_kemet-button-border-color: var(--kemet-color-font-inverse-base);\n}\n\n.button {\n cursor: pointer;\n text-decoration: none;\n display: flex;\n gap: var(--kemet-button-gap);\n align-items: center;\n justify-content: center;\n color: inherit;\n font-size: inherit;\n width: 100%;\n padding: var(--_kemet-button-padding);\n border: 0;\n background: none;\n}\n\n:host([disabled]) .button {\n cursor: not-allowed;\n}\n\n:host([variant=text]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-background-color: none;\n}\n\n:host([variant=text]:hover) {\n text-decoration: var(--_kemet-button-hover-decoration);\n}\n\n:host([appearance]:not([disabled]):not([variant])) {\n --_kemet-button-font-color: var(--kemet-color-font-inverse-base);\n}\n\n:host([appearance=brand]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([appearance=success]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-success);\n}\n\n:host([appearance=warning]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-warning);\n}\n\n:host([appearance=error]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-error);\n}\n\n:host([appearance=info]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-info);\n}\n\n:host([appearance=link]:not([disabled]):not([variant=text]):not([variant=outlined]):not([variant=plain])) {\n --_kemet-button-background-color: var(--kemet-color-background-link);\n}\n\n:host([variant=text][appearance=brand]:not([disabled])),\n:host([variant=plain][appearance=brand]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);\n}\n\n:host([variant=text][appearance=success]:not([disabled])),\n:host([variant=plain][appearance=success]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-success);\n}\n\n:host([variant=text][appearance=warning]:not([disabled])),\n:host([variant=plain][appearance=warning]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-warning);\n}\n\n:host([variant=text][appearance=error]:not([disabled])),\n:host([variant=plain][appearance=error]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-error);\n}\n\n:host([variant=text][appearance=info]:not([disabled])),\n:host([variant=plain][appearance=info]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-info);\n}\n\n:host([variant=text][appearance=link]:not([disabled])),\n:host([variant=plain][appearance=link]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-link);\n}\n\n:host([appearance=neutral][polarity=dark]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n}\n\n:host([rounded]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-md);\n}\n\n:host([rounded=sm]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-sm);\n}\n\n:host([rounded=lg]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-lg);\n}\n\n:host([rounded=xl]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-xl);\n}\n\n:host([rounded=circle]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-circle);\n --_kemet-button-width: var(--kemet-button-circle-size);\n --_kemet-button-height: var(--kemet-button-circle-size);\n}\n\n:host([rounded=pill]) {\n --_kemet-button-border-radius: var(--kemet-border-radius-pill);\n}\n\n:host([variant=outlined]) {\n --_kemet-button-font-color: var(--kemet-color-background-button-primary-base);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=brand]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-brand-primary-darker);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-brand-primary-darker);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=success]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-success);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-success);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=warning]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-warning);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-warning);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=error]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-error);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-error);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=info]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-info);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-info);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n:host([variant=outlined][appearance=link]:not([disabled])) {\n --_kemet-button-font-color: var(--kemet-color-background-link);\n --_kemet-button-background-color: transparent;\n --_kemet-button-border-color: var(--kemet-color-background-link);\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) var(--_kemet-button-border-color);\n}\n\n\n\n:host([variant=edge]) {\n --_kemet-button-border: var(--kemet-button-border-width) var(--kemet-button-border-style) rgba(255, 255, 255, 0.25);\n}\n\n:host([variant=plain]) {\n --_kemet-button-font-color: var(--kemet-color-font-base);\n --_kemet-button-padding: 0;\n --_kemet-button-border: none;\n --_kemet-button-background-color: transparent;\n}\n\n:host([size=xs]) {\n --_kemet-button-font-size: 0.8rem;\n --_kemet-button-padding: 0.5rem 0.75rem;\n}\n\n:host([size=sm]) {\n --_kemet-button-font-size: 0.9rem;\n --_kemet-button-padding: 0.75rem 1rem;\n}\n\n:host([size=lg]) {\n --_kemet-button-font-size: 1.1rem;\n --_kemet-button-padding: 1.25rem 1.5rem;\n}\n\n:host([size=xl]) {\n --_kemet-button-font-size: 1.2rem;\n --_kemet-button-padding: 1.5rem 2rem;\n}\n\n:host([icon-left]) {\n --_kemet-button-padding: 1rem 1.25rem 1rem .75rem;\n}\n\n:host([icon-right]) {\n --_kemet-button-padding: 1rem .75rem 1rem 1.25rem;\n}\n\n\n::slotted([slot=\"loader\"]) {\n --kemet-loader-color: var(--_kemet-button-font-color);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n:host([loading]) .text {\n visibility: hidden;\n}\n\n:host([icon-button]) .text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
2
|
import * as lit from 'lit';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
|
-
import {
|
|
4
|
+
import { d as EnumRoundedSizes } from '../../constants-C4-3KYlX.js';
|
|
5
5
|
import '../../form-controller-3q581XcZ.js';
|
|
6
6
|
|
|
7
7
|
declare enum EnumElevation {
|
|
@@ -2,7 +2,7 @@ import * as lit_html from 'lit-html';
|
|
|
2
2
|
import * as lit from 'lit';
|
|
3
3
|
import { LitElement } from 'lit';
|
|
4
4
|
import { F as FormSubmitController } from '../../form-controller-3q581XcZ.js';
|
|
5
|
-
import {
|
|
5
|
+
import { E as EnumAppearances } from '../../constants-C4-3KYlX.js';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* @since 1.0.0
|
|
@@ -36,8 +36,10 @@ var FormSubmitController = class {
|
|
|
36
36
|
this.handleFormSubmit = this.handleFormSubmit.bind(this);
|
|
37
37
|
}
|
|
38
38
|
hostConnected() {
|
|
39
|
+
console.log("what?!");
|
|
39
40
|
this.form = this.options.form(this.host);
|
|
40
41
|
if (this.form) {
|
|
42
|
+
console.log("Adding form listeners");
|
|
41
43
|
this.form.addEventListener("formdata", this.handleFormData);
|
|
42
44
|
this.form.addEventListener("submit", this.handleFormSubmit);
|
|
43
45
|
}
|
|
@@ -58,6 +60,7 @@ var FormSubmitController = class {
|
|
|
58
60
|
}
|
|
59
61
|
}
|
|
60
62
|
handleFormSubmit(event) {
|
|
63
|
+
console.log("~~Form submitted~~");
|
|
61
64
|
event.preventDefault();
|
|
62
65
|
event.stopImmediatePropagation();
|
|
63
66
|
const disabled = this.options.disabled(this.host);
|
|
@@ -68,14 +71,14 @@ var FormSubmitController = class {
|
|
|
68
71
|
if (component.checkValidity) {
|
|
69
72
|
component.checkValidity();
|
|
70
73
|
if (!component.checkValidity()) {
|
|
71
|
-
component.
|
|
74
|
+
component.appearance = "error" /* Error */;
|
|
72
75
|
component.invalid = true;
|
|
73
76
|
component.dispatchEvent(
|
|
74
77
|
new CustomEvent("kemet-input-status", {
|
|
75
78
|
bubbles: true,
|
|
76
79
|
composed: true,
|
|
77
80
|
detail: {
|
|
78
|
-
status: "error"
|
|
81
|
+
status: "error" /* Error */,
|
|
79
82
|
validity: component.validity ? component.validity : {},
|
|
80
83
|
element: component
|
|
81
84
|
}
|
|
@@ -83,7 +86,7 @@ var FormSubmitController = class {
|
|
|
83
86
|
);
|
|
84
87
|
}
|
|
85
88
|
if (component.checkLimitValidity && !component.checkLimitValidity()) {
|
|
86
|
-
component.
|
|
89
|
+
component.appearance = "error" /* Error */;
|
|
87
90
|
component.invalid = true;
|
|
88
91
|
component.dispatchEvent(
|
|
89
92
|
new CustomEvent("kemet-input-status", {
|
|
@@ -210,7 +213,7 @@ button {
|
|
|
210
213
|
}
|
|
211
214
|
|
|
212
215
|
:host([appearance=brand]) {
|
|
213
|
-
--kemet-checkbox-color: var(--kemet-color-brand-primary-
|
|
216
|
+
--kemet-checkbox-color: var(--kemet-color-brand-primary-darker);
|
|
214
217
|
}
|
|
215
218
|
|
|
216
219
|
:host([appearance=error]) {
|