npm - kemet-ui - Versions diffs - 2.0.2 → 3.0.0 - Mend

kemet-ui 2.0.2 → 3.0.0

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

Files changed (297) hide show

package/dist/components/kemet-input/kemet-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-input.js","sourceRoot":"","sources":["../../../src/components/kemet-input/kemet-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesBase } from './styles';\nimport { TypeAriaAutoComplete, TypeAutoComplete, TypeStatus } from './types';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-input\n * @summary An enhanced input element.\n \n @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {string} minlength - The minlength attribute\n * @prop {string} maxlength - The maxlength attribute\n * @prop {string} min - The min attribute\n * @prop {string} max - The max attribute\n * @prop {string} step - The step attribute\n * @prop {string} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {string} inputmode - The input mode attribute\n * @prop {boolean} autofocus - The autofocus attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} readonly - The readonly attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} type - The type of input\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether or not the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {string} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {boolean} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {string} iconRight - Custom Icon to the right of the input\n * @prop {string} iconLeft - Custom Icon to the left of the input\n * @prop {number} iconSize - Size of the icons\n * @prop {object} validity - The HTML5 validity object.\n * @prop {boolean} isPasswordVisible - Manages password visibility\n * @prop {string} inputType - Input Type of keypress handled through handleInput(e)\n * @prop {boolean} focused - Determines if the input is focused\n \n @csspart input\n \n @cssproperty --kemet-input-height - The height of the input. Default: 50px.\n * @cssproperty -kemet-input-padding - The padding on the input. Default: 0.5rem 1rem.\n * @cssproperty -kemet-input-border - The border of the input. Default: 1px solid var(--kemet-color-primary).\n * @cssproperty -kemet-input-border-color-error - The border of the error state. Default: 1px solid var(--kemet-color-error).\n * @cssproperty -kemet-input-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).\n * @cssproperty -kemet-input-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning) \|\n * @cssproperty -kemet-input-icon-left-padding - The icon-left padding. Default: 3rem.\n * @cssproperty -kemet-input-icon-right-padding - The icon-right padding. Default: 3rem.\n * @cssproperty -kemet-input-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).\n * @cssproperty -kemet-input-border-filled - The border on filled. Default: none.\n * @cssproperty -kemet-input-color-filled - The color on filled. Default: var(--kemet-color-white).\n * @cssproperty -kemet-input-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).\n * @cssproperty -kemet-input-background-color-error - The error state background color. Default: var(--kemet-color-error).\n * @cssproperty -kemet-input-background-color-success - The success state background color. Default: var(--kemet-color-success).\n * @cssproperty -kemet-input-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).\n \n @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.\n * Use the validity object to support custom validation messages.\n * @event kemet-input-input - Fires when the input receives input\n \n /\n\n@customElement('kemet-input')\nexport default class KemetInput extends LitElement {\n /** @internal /\n formSubmitController: FormSubmitController;\n\n static styles = [stylesBase];\n\n @property({ type: String })\n slug: string;\n\n @property({ type: String })\n name: string = 'input';\n\n @property({ type: String })\n placeholder: string;\n\n @property({ type: Number })\n minlength: number;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: String })\n min: string;\n\n @property({ type: String })\n max: string;\n\n @property({ type: Number })\n step: number;\n\n @property({ type: String })\n autocomplete: TypeAutoComplete;\n\n @property({ type: String })\n pattern: string;\n\n @property({ type: String })\n inputmode: string;\n\n @property({ type: Boolean })\n autofocus: boolean;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean;\n\n @property({ type: Boolean })\n readonly: boolean;\n\n @property({ type: Boolean, reflect: true })\n required: boolean;\n\n @property({ type: String })\n type: string = 'text';\n\n @property({ type: String, reflect: true })\n value: string = '';\n\n @property({ type: Boolean, reflect: true })\n invalid: boolean;\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlur: boolean = false;\n\n @property({ type: String, attribute: 'aria-autocomplete' })\n ariaAutoComplete: TypeAriaAutoComplete;\n\n @property({ type: String, attribute: 'aria-controls' })\n ariaControls: string;\n\n @property({ type: String, attribute: 'aria-activedescendant' })\n ariaActiveDescendant: string;\n\n @property({ type: Boolean, reflect: true })\n rounded: boolean;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean;\n\n @property({ type: String, reflect: true, attribute: 'icon-right' })\n iconRight: string;\n\n @property({ type: String, reflect: true, attribute: 'icon-left' })\n iconLeft: string;\n\n @property({ type: Number })\n iconSize: number = 20;\n\n @property({ type: Object })\n validity: object;\n\n @property({ type: Boolean })\n isPasswordVisible: boolean = false;;\n\n @property({ type: String })\n inputType: string;\n\n @property({ type: Boolean, reflect: true })\n focused: boolean = false;\n\n @state()\n field: KemetFieldInterface;\n\n @state()\n form: HTMLFormElement;\n\n @state()\n input: HTMLInputElement;\n\n constructor() {\n super();\n\n /* @internal /\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n // elements\n this.input = this.shadowRoot.querySelector('input');\n this.field = this.closest('kemet-field');\n this.form = this.closest('form');\n this.slug = this.field ? this.field.slug : 'input';\n\n if (this.field) {\n this.field.addEventListener('fmc-password-status', event => this.handleStatus(event));\n }\n }\n\n render() {\n return html`\n <div>\n ${this.makeIconLeft()}\n <input\n part=\"input\"\n id=${this.slug}\n name=${this.name}\n placeholder=${ifDefined(this.placeholder)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${ifDefined(this.step)}\n autocomplete=${ifDefined(this.autocomplete)}\n aria-autocomplete=${ifDefined(this.ariaAutoComplete)}\n aria-controls=${ifDefined(this.ariaControls)}\n aria-activedescendant=${ifDefined(this.ariaActiveDescendant)}\n pattern=${ifDefined(this.pattern)}\n inputmode=${ifDefined(this.inputmode)}\n aria-invalid=${this.invalid ? 'true' : 'false'}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .type=\"${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\"\n .value=${live(this.value)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n </div>\n `;\n }\n\n /\n Makes the right icon\n * @private\n * @returns {templateResult} A right icon\n /\n makeIconRight() {\n if (this.iconRight) {\n return html`\n <kemet-icon class=\"right\" icon=\"${this.iconRight}\" size=\"${this.iconSize ? this.iconSize : 20}\"></kemet-icon>\n `;\n }\n\n return null;\n }\n\n /\n Makes the left icon\n * @private\n * @returns {templateResult} A left icon\n /\n makeIconLeft() {\n if (this.iconLeft) {\n return html`\n <kemet-icon class=\"left\" icon=\"${this.iconLeft}\" size=\"${this.iconSize ? this.iconSize : 16}\"></kemet-icon>\n `;\n }\n\n return null;\n }\n\n /\n Makes a clear icon for search.\n * @private\n * @returns {templateResult} A search icon\n /\n makeIconClear() {\n if (this.type === 'search' && this.value !== '') {\n return html`\n <kemet-icon class=\"search right\" icon=\"x-lg\" size=\"${this.iconSize}\" @click=${() => this.handleClear()}></kemet-icon>\n `;\n }\n\n return null;\n }\n\n /\n Makes a password visibility toggle button\n * @returns {templateResult} A mask or unmask icon\n /\n makeVisibilityToggle() {\n if (this.type === 'password') {\n return html`<kemet-icon\n class=\"eye right\"\n icon=\"${this.setPasswordIcon()}\"\n @click=${() => this.togglePasswordVisibility()}\n ></kemet-icon>`;\n }\n\n return null;\n }\n\n setPasswordIcon() {\n if (this.isPasswordVisible) {\n return 'eye';\n }\n\n return 'eye-slash';\n }\n\n /\n Handles when the input receives focus\n * @private\n /\n handleFocus() {\n this.focused = true;\n emitEvent(this, 'kemet-input-focused', true);\n }\n\n /\n Handles when the input loses focus\n * @private\n /\n handleBlur() {\n if (this.validateOnBlur && this.form && !this.form.noValidate) {\n this.input?.checkValidity();\n this.validity = this.input?.validity;\n }\n\n this.focused = false;\n emitEvent(this, 'kemet-input-focused', false);\n }\n\n /\n Handles when the input changes value\n * @private\n /\n handleChange() {\n this.value = this.input.value;\n\n if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {\n this.invalid = false;\n this.status = 'standard';\n this.validity = this.input.validity;\n\n emitEvent(this, 'kemet-input-status', {\n status: 'standard',\n validity: this.input.validity,\n element: this,\n });\n }\n }\n\n /\n Handles when the input receives input\n * @private\n /\n handleInput() {\n this.value = this.input.value;\n emitEvent(this, 'kemet-input-input', this.value);\n }\n\n /\n Handles when the input has an error\n * @private\n /\n handleInvalid() {\n this.validity = this.input?.validity;\n\n if (this.validateOnBlur) {\n this.invalid = true;\n this.status = 'error';\n\n emitEvent(this, 'kemet-input-status', {\n status: 'error',\n validity: this.input?.validity,\n element: this,\n });\n }\n }\n\n handleStatus(event) {\n this.status = event.detail.status;\n }\n\n /\n Toggles password visibility\n * @private\n /\n togglePasswordVisibility() {\n this.isPasswordVisible = !this.isPasswordVisible;\n }\n\n /\n Handles the clear button for search\n * @private\n /\n handleClear() {\n this.value = '';\n emitEvent(this, 'kemet-input-input', this.value);\n }\n\n /\n Checks the validity of the character limit for the count component\n * @private\n * @returns {boolean}\n /\n checkLimitValidity() {\n if (this.field) {\n const count = this.field.querySelector('kemet-count');\n if (count) {\n return this.value.length < count.limit;\n }\n }\n\n return true;\n }\n\n /\n Checks the validity of the standard input\n * @public\n * @returns {boolean}\n /\n checkValidity() {\n return this.input?.checkValidity();\n }\n\n /\n Focuses the standard input\n * @public\n */\n focus() {\n this.input?.focus();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input': KemetInput\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-input.js","sourceRoot":"","sources":["../../../src/components/kemet-input/kemet-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesBase } from './styles';\nimport { TypeAriaAutoComplete, TypeAutoComplete, TypeStatus } from './types';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-input\n * @summary An enhanced input element.\n \n @prop {string} slug - Used for the id of the input. Should match the slug used in a control if applicable.\n * @prop {string} name - The name of the input\n * @prop {string} placeholder - The placeholder attribute\n * @prop {string} minlength - The minlength attribute\n * @prop {string} maxlength - The maxlength attribute\n * @prop {string} min - The min attribute\n * @prop {string} max - The max attribute\n * @prop {string} step - The step attribute\n * @prop {string} autocomplete - The autocomplete attribute\n * @prop {string} pattern - The pattern attribute\n * @prop {string} inputmode - The input mode attribute\n * @prop {boolean} autofocus - The autofocus attribute\n * @prop {boolean} disabled - The disable attribute\n * @prop {boolean} readonly - The readonly attribute\n * @prop {boolean} required - The required attribute\n * @prop {string} type - The type of input\n * @prop {string} value - The input's value\n * @prop {boolean} invalid - States whether or not the input is invalid\n * @prop {string} status - The status of the input\n * @prop {boolean} validateOnBlur - Activates validation on blur\n * @prop {string} ariaAutoComplete - Aria Autocomplete\n * @prop {string} ariaControls - Aria Controls\n * @prop {string} ariaActiveDescendant - Aria Active Descendant\n * @prop {boolean} rounded - Displays rounded corners\n * @prop {boolean} filled - Displays a filled input box\n * @prop {string} iconRight - Custom Icon to the right of the input\n * @prop {string} iconLeft - Custom Icon to the left of the input\n * @prop {number} iconSize - Size of the icons\n * @prop {object} validity - The HTML5 validity object.\n * @prop {boolean} isPasswordVisible - Manages password visibility\n * @prop {string} inputType - Input Type of keypress handled through handleInput(e)\n * @prop {boolean} focused - Determines if the input is focused\n \n @csspart input\n \n @cssproperty --kemet-input-height - The height of the input.\n * @cssproperty --kemet-input-padding - The padding on the input.\n * @cssproperty --kemet-input-border - The border of the input.\n * @cssproperty --kemet-input-border-color-error - The border of the error state.\n * @cssproperty --kemet-input-border-color-success - The border of the success state.\n * @cssproperty --kemet-input-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-input-icon-left-padding - The icon-left padding.\n * @cssproperty --kemet-input-icon-right-padding - The icon-right padding.\n * @cssproperty --kemet-input-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-input-border-filled - The border on filled.\n * @cssproperty --kemet-input-color-filled - The color on filled.\n * @cssproperty --kemet-input-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-input-background-color-error - The error state background color.\n * @cssproperty --kemet-input-background-color-success - The success state background color.\n * @cssproperty --kemet-input-background-color-warning - The warning state background color.\n \n @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status Fires when there's a change in status. This event includes an object that reports: 1) the status. 2) HTML5 validity object. 3) the component element.\n * Use the validity object to support custom validation messages.\n * @event kemet-input-input - Fires when the input receives input\n \n /\n\n@customElement('kemet-input')\nexport default class KemetInput extends LitElement {\n /** @internal /\n formSubmitController: FormSubmitController;\n\n static styles = [stylesBase];\n\n @property({ type: String })\n slug: string;\n\n @property({ type: String })\n name: string = 'input';\n\n @property({ type: String })\n placeholder: string;\n\n @property({ type: Number })\n minlength: number;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: String })\n min: string;\n\n @property({ type: String })\n max: string;\n\n @property({ type: Number })\n step: number;\n\n @property({ type: String })\n autocomplete: TypeAutoComplete;\n\n @property({ type: String })\n pattern: string;\n\n @property({ type: String })\n inputmode: string;\n\n @property({ type: Boolean })\n autofocus: boolean;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean;\n\n @property({ type: Boolean })\n readonly: boolean;\n\n @property({ type: Boolean, reflect: true })\n required: boolean;\n\n @property({ type: String })\n type: string = 'text';\n\n @property({ type: String, reflect: true })\n value: string = '';\n\n @property({ type: Boolean, reflect: true })\n invalid: boolean;\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlur: boolean = false;\n\n @property({ type: String, attribute: 'aria-autocomplete' })\n ariaAutoComplete: TypeAriaAutoComplete;\n\n @property({ type: String, attribute: 'aria-controls' })\n ariaControls: string;\n\n @property({ type: String, attribute: 'aria-activedescendant' })\n ariaActiveDescendant: string;\n\n @property({ type: Boolean, reflect: true })\n rounded: boolean;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean;\n\n @property({ type: String, reflect: true, attribute: 'icon-right' })\n iconRight: string;\n\n @property({ type: String, reflect: true, attribute: 'icon-left' })\n iconLeft: string;\n\n @property({ type: Number })\n iconSize: number = 20;\n\n @property({ type: Object })\n validity: object;\n\n @property({ type: Boolean })\n isPasswordVisible: boolean = false;;\n\n @property({ type: String })\n inputType: string;\n\n @property({ type: Boolean, reflect: true })\n focused: boolean = false;\n\n @state()\n field: KemetFieldInterface;\n\n @state()\n form: HTMLFormElement;\n\n @state()\n input: HTMLInputElement;\n\n constructor() {\n super();\n\n /* @internal /\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n // elements\n this.input = this.shadowRoot.querySelector('input');\n this.field = this.closest('kemet-field');\n this.form = this.closest('form');\n this.slug = this.field ? this.field.slug : 'input';\n\n if (this.field) {\n this.field.addEventListener('fmc-password-status', event => this.handleStatus(event));\n }\n }\n\n render() {\n return html`\n <div>\n ${this.makeIconLeft()}\n <input\n part=\"input\"\n id=${this.slug}\n name=${this.name}\n placeholder=${ifDefined(this.placeholder)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n step=${ifDefined(this.step)}\n autocomplete=${ifDefined(this.autocomplete)}\n aria-autocomplete=${ifDefined(this.ariaAutoComplete)}\n aria-controls=${ifDefined(this.ariaControls)}\n aria-activedescendant=${ifDefined(this.ariaActiveDescendant)}\n pattern=${ifDefined(this.pattern)}\n inputmode=${ifDefined(this.inputmode)}\n aria-invalid=${this.invalid ? 'true' : 'false'}\n ?autofocus=${this.autofocus}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n .type=\"${this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\"\n .value=${live(this.value)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @invalid=${this.handleInvalid}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n ${this.makeIconRight()} ${this.makeIconClear()} ${this.makeVisibilityToggle()}\n </div>\n `;\n }\n\n /\n Makes the right icon\n * @private\n * @returns {templateResult} A right icon\n /\n makeIconRight() {\n if (this.iconRight) {\n return html`\n <kemet-icon class=\"right\" icon=\"${this.iconRight}\" size=\"${this.iconSize ? this.iconSize : 20}\"></kemet-icon>\n `;\n }\n\n return null;\n }\n\n /\n Makes the left icon\n * @private\n * @returns {templateResult} A left icon\n /\n makeIconLeft() {\n if (this.iconLeft) {\n return html`\n <kemet-icon class=\"left\" icon=\"${this.iconLeft}\" size=\"${this.iconSize ? this.iconSize : 16}\"></kemet-icon>\n `;\n }\n\n return null;\n }\n\n /\n Makes a clear icon for search.\n * @private\n * @returns {templateResult} A search icon\n /\n makeIconClear() {\n if (this.type === 'search' && this.value !== '') {\n return html`\n <kemet-icon class=\"search right\" icon=\"x-lg\" size=\"${this.iconSize}\" @click=${() => this.handleClear()}></kemet-icon>\n `;\n }\n\n return null;\n }\n\n /\n Makes a password visibility toggle button\n * @returns {templateResult} A mask or unmask icon\n /\n makeVisibilityToggle() {\n if (this.type === 'password') {\n return html`<kemet-icon\n class=\"eye right\"\n icon=\"${this.setPasswordIcon()}\"\n @click=${() => this.togglePasswordVisibility()}\n ></kemet-icon>`;\n }\n\n return null;\n }\n\n setPasswordIcon() {\n if (this.isPasswordVisible) {\n return 'eye';\n }\n\n return 'eye-slash';\n }\n\n /\n Handles when the input receives focus\n * @private\n /\n handleFocus() {\n this.focused = true;\n emitEvent(this, 'kemet-input-focused', true);\n }\n\n /\n Handles when the input loses focus\n * @private\n /\n handleBlur() {\n if (this.validateOnBlur && this.form && !this.form.noValidate) {\n this.input?.checkValidity();\n this.validity = this.input?.validity;\n }\n\n this.focused = false;\n emitEvent(this, 'kemet-input-focused', false);\n }\n\n /\n Handles when the input changes value\n * @private\n /\n handleChange() {\n this.value = this.input.value;\n\n if (this.input.checkValidity() && this.checkLimitValidity() && this.status !== 'success') {\n this.invalid = false;\n this.status = 'standard';\n this.validity = this.input.validity;\n\n emitEvent(this, 'kemet-input-status', {\n status: 'standard',\n validity: this.input.validity,\n element: this,\n });\n }\n }\n\n /\n Handles when the input receives input\n * @private\n /\n handleInput() {\n this.value = this.input.value;\n emitEvent(this, 'kemet-input-input', this.value);\n }\n\n /\n Handles when the input has an error\n * @private\n /\n handleInvalid() {\n this.validity = this.input?.validity;\n\n if (this.validateOnBlur) {\n this.invalid = true;\n this.status = 'error';\n\n emitEvent(this, 'kemet-input-status', {\n status: 'error',\n validity: this.input?.validity,\n element: this,\n });\n }\n }\n\n handleStatus(event) {\n this.status = event.detail.status;\n }\n\n /\n Toggles password visibility\n * @private\n /\n togglePasswordVisibility() {\n this.isPasswordVisible = !this.isPasswordVisible;\n }\n\n /\n Handles the clear button for search\n * @private\n /\n handleClear() {\n this.value = '';\n emitEvent(this, 'kemet-input-input', this.value);\n }\n\n /\n Checks the validity of the character limit for the count component\n * @private\n * @returns {boolean}\n /\n checkLimitValidity() {\n if (this.field) {\n const count = this.field.querySelector('kemet-count');\n if (count) {\n return this.value.length < count.limit;\n }\n }\n\n return true;\n }\n\n /\n Checks the validity of the standard input\n * @public\n * @returns {boolean}\n /\n checkValidity() {\n return this.input?.checkValidity();\n }\n\n /\n Focuses the standard input\n * @public\n */\n focus() {\n this.input?.focus();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-input': KemetInput\n }\n}\n"]}

package/dist/components/kemet-input/styles.js CHANGED Viewed

@@ -1,18 +1,35 @@
 import { css } from 'lit';
 export const stylesBase = css `
   :host {
+    --kemet-input-height: 50px;
+    --kemet-input-padding: 0.5rem 1rem;
+    --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));
+    --kemet-input-border-color-error: 1px solid rgb(var(--kemet-color-error));
+    --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));
+    --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));
+    --kemet-input-icon-left-padding: 3rem;
+    --kemet-input-icon-right-padding: 3rem;
+    --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);
+    --kemet-input-border-filled: none;
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));
+    --kemet-input-color-filled: rgb(var(--kemet-color-white));
+    --kemet-input-background-color-error: rgb(var(--kemet-color-error));
+    --kemet-input-background-color-success: rgb(var(--kemet-color-success));
+    --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));
     position: relative;
     display: block;
   }
   input {
-    color: var(--kemet-color-text);
+    color: rgb(var(--kemet-color-text));
     display: block;
     font-size: 1rem;
     width: 100%;
-    height: var(--kemet-input-height, 50px);
-    padding: var(--kemet-input-padding, 0.5rem 1rem);
-    border: var(--kemet-input-border, 1px solid var(--kemet-color-background));
+    height: var(--kemet-input-height);
+    padding: var(--kemet-input-padding);
+    border: var(--kemet-input-border);
     appearance: none;
     box-sizing: border-box;
     background-color: transparent;
@@ -30,15 +47,15 @@ export const stylesBase = css `
   }
   :host([status='error']) input {
-    border: var(--kemet-input-border-color-error, 1px solid var(--kemet-color-error));
+    border: var(--kemet-input-border-color-error);
   }
   :host([status='success']) input {
-    border: var(--kemet-input-border-color-success, 1px solid var(--kemet-color-success));
+    border: var(--kemet-input-border-color-success);
   }
   :host([status='warning']) input {
-    border: var(--kemet-input-border-color-warning, 1px solid var(--kemet-color-warning));
+    border: var(--kemet-input-border-color-warning);
   }
   :host([disabled]) input {
@@ -46,42 +63,42 @@ export const stylesBase = css `
   }
   :host([icon-left]) input {
-    padding-left: var(--kemet-input-icon-left-padding, 3rem);
+    padding-left: var(--kemet-input-icon-left-padding);
   }
   :host([icon-right]) input {
-    padding-right: var(--kemet-input-icon-right-padding, 3rem);
+    padding-right: var(--kemet-input-icon-right-padding);
   }
   :host([rounded]) input {
-    border-radius: var(--kemet-input-border-radius-rounded, var(--kemet-border-radius));
+    border-radius: var(--kemet-input-border-radius-rounded);
   }
   :host([filled]) input {
-    border: var(--kemet-input-border-filled, none);
-    color: var(--kemet-input-color-filled, var(--kemet-color-white));
-    background-color: var(--kemet-input-background-color-filled, var(--kemet-color-primary));
+    border: var(--kemet-input-border-filled);
+    color: var(--kemet-input-color-filled);
+    background-color: var(--kemet-input-background-color-filled);
   }
   :host([filled]) kemet-icon,
   :host([filled]) input::placeholder {
-    color: var(--kemet-input-color-filled, var(--kemet-color-white));
+    color: var(--kemet-input-color-filled);
   }
   :host([status='error'][filled]) input {
-    background-color: var(--kemet-input-background-color-error, var(--kemet-color-error));
+    background-color: var(--kemet-input-background-color-error);
   }
   :host([status='success'][filled]) input {
-    background-color: var(--kemet-input-background-color-success, var(--kemet-color-success));
+    background-color: var(--kemet-input-background-color-success);
   }
   :host([status='warning'][filled]) input {
-    background-color: var(--kemet-input-background-color-warning, var(--kemet-color-warning));
+    background-color: var(--kemet-input-background-color-warning);
   }
   kemet-icon {
-    color: var(--kemet-color-text);
+    color: rgb(var(--kemet-color-text));
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -101,15 +118,15 @@ export const stylesBase = css `
   }
   :host([status='error']) kemet-icon {
-    color: var(--kemet-color-error);
+    color: rgb(var(--kemet-color-error));
   }
   :host([status='warning']) kemet-icon {
-    color: var(--kemet-color-error);
+    color: rgb(var(--kemet-color-error));
   }
   :host([status='success']) kemet-icon {
-    color: var(--kemet-color-success);
+    color: rgb(var(--kemet-color-success));
   }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/components/kemet-input/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgH5B~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n :host {\n position: relative;\n display: block;\n }\n\n input {\n color: var(--kemet-color-text);\n display: block;\n font-size: 1rem;\n width: 100%;\n height: var(--kemet-input-height~~, 50px~~);\n padding: var(--kemet-input-padding~~, 0.5rem 1rem~~);\n border: var(--kemet-input-border~~, 1px solid var(--kemet-color-background~~));\n appearance: none;\n box-sizing: border-box;\n background-color: transparent;\n }\n\n input[type='color'] {\n min-width: 10rem;\n }\n\n input[type='search']::-webkit-search-decoration,\n input[type='search']::-webkit-search-cancel-button,\n input[type='search']::-webkit-search-results-button,\n input[type='search']::-webkit-search-results-decoration {\n display: none;\n }\n\n :host([status='error']) input {\n border: var(--kemet-input-border-color-error~~, 1px solid var(--kemet-color-error~~));\n }\n\n :host([status='success']) input {\n border: var(--kemet-input-border-color-success~~, 1px solid var(--kemet-color-success~~));\n }\n\n :host([status='warning']) input {\n border: var(--kemet-input-border-color-warning~~, 1px solid var(--kemet-color-warning~~));\n }\n\n :host([disabled]) input {\n opacity: 0.5;\n }\n\n :host([icon-left]) input {\n padding-left: var(--kemet-input-icon-left-padding~~, 3rem~~);\n }\n\n :host([icon-right]) input {\n padding-right: var(--kemet-input-icon-right-padding~~, 3rem~~);\n }\n\n :host([rounded]) input {\n border-radius: var(--kemet-input-border-radius-rounded~~, var(--kemet-border-radius~~));\n }\n\n :host([filled]) input {\n border: var(--kemet-input-border-filled~~, none~~);\n color: var(--kemet-input-color-filled~~, var(--kemet-color-white~~));\n background-color: var(--kemet-input-background-color-filled~~, var(--kemet-color-primary~~));\n }\n\n :host([filled]) kemet-icon,\n :host([filled]) input::placeholder {\n color: var(--kemet-input-color-filled~~, var(--kemet-color-white~~));\n }\n\n :host([status='error'][filled]) input {\n background-color: var(--kemet-input-background-color-error~~, var(--kemet-color-error~~));\n }\n\n :host([status='success'][filled]) input {\n background-color: var(--kemet-input-background-color-success~~, var(--kemet-color-success~~));\n }\n\n :host([status='warning'][filled]) input {\n background-color: var(--kemet-input-background-color-warning~~, var(--kemet-color-warning~~));\n }\n\n kemet-icon {\n color: var(--kemet-color-text);\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n kemet-icon.left {\n left: 1rem;\n }\n\n kemet-icon.right {\n right: 1rem;\n }\n\n kemet-icon.eye,\n kemet-icon.search {\n cursor: pointer;\n }\n\n :host([status='error']) kemet-icon {\n color: var(--kemet-color-error);\n }\n\n :host([status='warning']) kemet-icon {\n color: var(--kemet-color-error);\n }\n\n :host([status='success']) kemet-icon {\n color: var(--kemet-color-success);\n }\n`;\n"]}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiI5B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesBase = css`\n :host {\n --kemet-input-height: 50px;\n --kemet-input-padding: 0.5rem 1rem;\n --kemet-input-border: 1px solid rgb(var(--kemet-color-foreground));\n --kemet-input-border-color-error: 1px solid rgb(var(--kemet-color-error));\n --kemet-input-border-color-success: 1px solid rgb(var(--kemet-color-success));\n --kemet-input-border-color-warning: 1px solid rgb(var(--kemet-color-warning));\n --kemet-input-icon-left-padding: 3rem;\n --kemet-input-icon-right-padding: 3rem;\n --kemet-input-border-radius-rounded: var(--kemet-border-radius-md);\n --kemet-input-border-filled: none;\n --kemet-input-color-filled: rgb(var(--kemet-color-white));\n --kemet-input-background-color-filled: rgb(var(--kemet-color-primary));\n --kemet-input-color-filled: rgb(var(--kemet-color-white));\n --kemet-input-background-color-error: rgb(var(--kemet-color-error));\n --kemet-input-background-color-success: rgb(var(--kemet-color-success));\n --kemet-input-background-color-warning: rgb(var(--kemet-color-warning));\n\n position: relative;\n display: block;\n }\n\n input {\n color: rgb(var(--kemet-color-text));\n display: block;\n font-size: 1rem;\n width: 100%;\n height: var(--kemet-input-height);\n padding: var(--kemet-input-padding);\n border: var(--kemet-input-border);\n appearance: none;\n box-sizing: border-box;\n background-color: transparent;\n }\n\n input[type='color'] {\n min-width: 10rem;\n }\n\n input[type='search']::-webkit-search-decoration,\n input[type='search']::-webkit-search-cancel-button,\n input[type='search']::-webkit-search-results-button,\n input[type='search']::-webkit-search-results-decoration {\n display: none;\n }\n\n :host([status='error']) input {\n border: var(--kemet-input-border-color-error);\n }\n\n :host([status='success']) input {\n border: var(--kemet-input-border-color-success);\n }\n\n :host([status='warning']) input {\n border: var(--kemet-input-border-color-warning);\n }\n\n :host([disabled]) input {\n opacity: 0.5;\n }\n\n :host([icon-left]) input {\n padding-left: var(--kemet-input-icon-left-padding);\n }\n\n :host([icon-right]) input {\n padding-right: var(--kemet-input-icon-right-padding);\n }\n\n :host([rounded]) input {\n border-radius: var(--kemet-input-border-radius-rounded);\n }\n\n :host([filled]) input {\n border: var(--kemet-input-border-filled);\n color: var(--kemet-input-color-filled);\n background-color: var(--kemet-input-background-color-filled);\n }\n\n :host([filled]) kemet-icon,\n :host([filled]) input::placeholder {\n color: var(--kemet-input-color-filled);\n }\n\n :host([status='error'][filled]) input {\n background-color: var(--kemet-input-background-color-error);\n }\n\n :host([status='success'][filled]) input {\n background-color: var(--kemet-input-background-color-success);\n }\n\n :host([status='warning'][filled]) input {\n background-color: var(--kemet-input-background-color-warning);\n }\n\n kemet-icon {\n color: rgb(var(--kemet-color-text));\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n }\n\n kemet-icon.left {\n left: 1rem;\n }\n\n kemet-icon.right {\n right: 1rem;\n }\n\n kemet-icon.eye,\n kemet-icon.search {\n cursor: pointer;\n }\n\n :host([status='error']) kemet-icon {\n color: rgb(var(--kemet-color-error));\n }\n\n :host([status='warning']) kemet-icon {\n color: rgb(var(--kemet-color-error));\n }\n\n :host([status='success']) kemet-icon {\n color: rgb(var(--kemet-color-success));\n }\n`;\n"]}

package/dist/components/kemet-modal/docs/stories.d.ts CHANGED Viewed

@@ -4,7 +4,9 @@ import '../kemet-modal-close';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-button/kemet-button';
 declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Rounded: Story;

package/dist/components/kemet-modal/docs/stories.js CHANGED Viewed

@@ -1,15 +1,26 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-modal';
 import '../kemet-modal-close';
 import '../../kemet-tabs/kemet-tabs';
 import '../../kemet-tabs/kemet-tab';
 import '../../kemet-tabs/kemet-tab-panel';
+import '../../kemet-button/kemet-button';
 const meta = {
     title: 'Components / Modal',
     component: 'kemet-modal',
+    args: {
+        displayCloseBtn: true,
+    },
+    argTypes: {
+        effect: {
+            control: { type: 'select' },
+            options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],
+        },
+    },
 };
 export default meta;
-const Template = ({ displayCloseBtn = true, minWidth = '0', maxWidth = 'none', overlayColor = 'rgba(0,0,0,0.2)', transitionSpeed = '0.3s', opened = false, effect = 'fall', closeOnClick = false, }) => {
+const Template = (args) => {
     const openModal = () => {
         const modal = document.querySelector('kemet-modal');
         modal.opened = true;
@@ -17,85 +28,31 @@ const Template = ({ displayCloseBtn = true, minWidth = '0', maxWidth = 'none', o
     const makeCloseBtn = (display) => {
         if (display) {
             return html `
-        <kemet-modal-close tabindex="0" role="button" aria-label="Close Button">
-          <kemet-icon icon="x-circle" size="24"></kemet-icon>
+        <kemet-modal-close tabindex="0" role="button" aria-label="Close Button" style="display:flex;">
+          <kemet-icon icon="x-circle" size="24" kemet-background-color="white" kemet-border-radius="circle"></kemet-icon>
         </kemet-modal-close>
       `;
         }
         return null;
     };
-    const temp = html `
-    <style>
-      kemet-modal {
-        --kemet-modal-min-width: ${minWidth};
-        --kemet-modal-max-width: ${maxWidth};
-        --kemet-modal-overlay-background-color: ${overlayColor};
-        --kemet-modal-transition-speed: ${transitionSpeed};
-      }
-    </style>
+    return html `
     <kemet-button @click="${() => openModal()}">Open Modal</kemet-button>
-    <kemet-modal ?opened=${opened} effect="${effect}" ?close-on-click="${closeOnClick}">
-      <div kemet-elevation="layer5" kemet-padding="tiny:normal">
-        ${makeCloseBtn(displayCloseBtn)}
-        <h2 kemet-margin="tiny:none">Modal Title</h2>
-        <p>Your modal contents <a href="http://google.com">here</a>.</p>
+    <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect="${ifDefined(args.effect)}" ?close-on-click="${args.closeOnClick}">
+      <div kemet-padding="xl">
+        ${makeCloseBtn(args.displayCloseBtn)}
+        <h2 kemet-margin="none">Modal Title</h2>
+        <p>Your modal contents <a href="http://google.com" kemet-color="primary"><strong>here</strong></a>.</p>
       </div>
     </kemet-modal>
   `;
-    return temp;
 };
 export const Standard = {
     render: (args) => Template(args),
-    argTypes: {
-        displayCloseBtn: {
-            control: { type: 'boolean' },
-        },
-        minWidth: {
-            control: { type: 'text' },
-        },
-        maxWidth: {
-            control: { type: 'text' },
-        },
-        overlayColor: {
-            control: { type: 'color' },
-        },
-        transitionSpeed: {
-            control: { type: 'text' },
-        },
-        opened: {
-            control: { type: 'boolean' },
-        },
-        effect: {
-            control: { type: 'select' },
-            options: [
-                'fadein-scaleup',
-                'slide-right',
-                'slide-bottom',
-                'newspaper',
-                'fall',
-                'side-fall',
-                'flip-horizontal',
-                'flip-vertical',
-                'sign-3d',
-                'super-scaled',
-                'slit',
-                'rotate-bottom',
-                'rotate-left',
-            ],
-        },
-        closeOnClick: {
-            control: { type: 'boolean' },
-        },
-    },
+};
+export const Rounded = {
+    render: (args) => Template(args),
     args: {
-        displayCloseBtn: true,
-        minWidth: '0',
-        maxWidth: 'none',
-        overlayColor: 'rgba(0,0,0,0.2)',
-        transitionSpeed: '0.3s',
-        opened: false,
-        effect: 'fall',
-        closeOnClick: false,
-    },
+        rounded: true
+    }
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/kemet-modal/docs/stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;~~AAG3B~~,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;~~AAE1C~~,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;~~CACzB~~,~~CAAC~~;~~AACF~~,eAAe,IAAI,~~CAAC~~;~~AAIpB~~,MAAM,QAAQ,~~GAAG~~,~~CAAC~~,~~EAChB~~,~~eAAe~~,~~GAAG~~,~~IAAI~~,~~EACtB~~,~~QAAQ~~,~~GAAG~~,~~GAAG~~,~~EACd~~,~~QAAQ~~,~~GAAG,~~MAAM,~~EACjB~~,~~YAAY~~,~~GAAG~~,iBAAiB,~~EAChC~~,eAAe,~~GAAG~~,~~MAAM~~,~~EACxB~~,MAAM,~~GAAG~~,~~KAAK~~,~~EACd~~,~~MAAM~~,~~GAAG~~,MAAM,~~EACf~~,~~YAAY,~~GAAG,~~KAAK~~,~~GACrB~~,EAAE,EAAE;~~IACH~~,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;;OAIV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,~~MAAM~~,IAAI,~~GAAG,IAAI,~~CAAA~~;;;mCAGgB,QAAQ~~;~~mCACR~~,~~QAAQ;kDACO,YAAY;0CACpB,eAAe;;;4BAG7B,~~GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,MAAM,YAAY,MAAM,sBAAsB,YAAY;;~~UAE3E~~,YAAY,CAAC,eAAe,CAAC;;;;;~~GAKpC~~,CAAC;~~IAEF~~,~~OAAO,IAAI,~~CAAC~~;AACd~~,CAAC~~,CAAC~~;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;~~IAEhC~~,~~QAAQ,EAAE~~;~~QACR~~,~~eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,~~MAAM,~~EAAE;SAC1B;QACD~~,~~QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,~~MAAM,~~EAAE;SAC1B;QACD,YAAY,EAAE;YACZ,~~OAAO,~~EAAE,EAAE,IAAI,EAAE,OAAO,EAAE~~;~~SAC3B;QACD~~,~~eAAe,EAAE;YACf,OAAO,EAAE,EAAE,IAAI,EAAE,~~MAAM,EAAE~~;SAC1B;QACD~~,~~MAAM~~,~~EAAE;YACN,OAAO,EAAE,EAAE,~~IAAI,EAAE,~~SAAS,~~EAAE~~;SAC7B;QACD~~,~~MAAM~~,~~EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,~~QAAQ,~~EAAE;YAC3B~~,OAAO,EAAE;gBACP,gBAAgB;gBAChB,aAAa;gBACb,cAAc;gBACd,WAAW;gBACX,MAAM;gBACN,WAAW;gBACX,iBAAiB;gBACjB,eAAe;gBACf,SAAS;gBACT,cAAc;gBACd,MAAM;gBACN,eAAe;gBACf,aAAa;aACd;SACF;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,EAAE,IAAI,~~EAAE,SAAS,EAAE~~;~~SAC7B;KACF;IAED~~,IAAI,EAAE;QACJ,~~eAAe~~,EAAE,IAAI;~~QACrB,QAAQ,EAAE,GAAG~~;~~QACb,QAAQ,EAAE,MAAM;QAChB,YAAY,EAAE,iBAAiB;QAC/B,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,KAAK;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;KACpB;~~CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / Modal',\n component: 'kemet-modal',\n~~};\nexport~~ ~~default~~ ~~meta;\~~n\~~ntype Story = StoryObj;\~~n~~\nconst~~ ~~Template = (~~{\n ~~displayCloseBtn~~ = ~~true~~,\n ~~minWidth~~ = '0'~~,\n maxWidth~~ = '~~none~~'~~,\n overlayColor~~ = '~~rgba(0~~,0,0,~~0.2)~~'~~,\n transitionSpeed~~ = '~~0.3s~~',\n ~~opened~~ = ~~false,\~~n ~~effect~~ = ~~'fall',\~~n ~~closeOnClick~~ = ~~false,\n}~~) => {\n const openModal = () => {\n const modal = document.querySelector('kemet-modal');\n modal.opened = true;\n };\n\n const makeCloseBtn = (display) => {\n if (display) {\n return html`\n <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\">\n <kemet-icon icon=\"x-circle\" size=\"24\"></kemet-icon>\n </kemet-modal-close>\n `;\n }\n\n return null;\n };\n\n ~~const~~ ~~temp =~~ html`\n <~~style>\n~~ kemet-modal {\n --kemet-modal-min-width: ${minWidth};\n --kemet-modal-max-width: ${maxWidth};\n --kemet-modal-overlay-background-color: ${overlayColor};\n --kemet-modal-transition-speed: ${transitionSpeed};\n }\n </style>\n <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n <kemet-modal ?opened=${opened} effect=\"${effect}\" ?close-on-click=\"${closeOnClick}\">\n <div kemet-~~elevation=\"layer5\" kemet-~~padding=\"~~tiny:normal~~\">\n ${makeCloseBtn(displayCloseBtn)}\n <h2 kemet-margin=\"~~tiny:~~none\">Modal Title</h2>\n <p>Your modal contents <a href=\"http://google.com\">here</a>.</p>\n </div>\n </kemet-modal>\n `;\n~~\n return temp;\n~~};\n\nexport const Standard: Story = {\n render: (args) => Template(args),\n~~\n argTypes: {\n displayCloseBtn: {\n control: { type: 'boolean'~~ },\n ~~},\n minWidth: {~~\~~n control:~~ { ~~type~~: ~~'text'~~ ~~},\n },\n maxWidth:~~ {\n ~~control~~: { ~~type:~~ ~~'text' }~~,\n },\n overlayColor: {\n control: { type: 'color' },\n },\n transitionSpeed: {\n control: { type: 'text' },\n },\n opened: {\n control: { type: 'boolean' },\n },\n effect: {\n control: { type: 'select' },\n options: [\n 'fadein-scaleup',\n 'slide-right',\n 'slide-bottom',\n 'newspaper',\n 'fall',\n 'side-fall',\n 'flip-horizontal',\n 'flip-vertical',\n 'sign-3d',\n 'super-scaled',\n 'slit',\n 'rotate-bottom',\n 'rotate-left',\n ],\n },\n closeOnClick: {\n control: { type: 'boolean' },\n },\n ~~},\n\n~~ args: {\n ~~displayCloseBtn~~: true,\n ~~minWidth: '0',\n maxWidth: 'none',\n overlayColor: 'rgba(0,0,0,0.2)',\n transitionSpeed: '0.3s',\n opened: false,\n effect: 'fall',\n closeOnClick: false,\n~~ },\n};\n"]}
1	+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-modal/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAIxD,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAE9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AAEzC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE;QACJ,eAAe,EAAE,IAAI;KACtB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,gBAAgB,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC;SACpM;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACpD,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;;OAIV,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;4BACe,GAAG,EAAE,CAAC,SAAS,EAAE;2BAClB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO,YAAY,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,sBAAsB,IAAI,CAAC,YAAY;;UAE9H,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;GAKzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { TypeEffect } from '../types';\n\nimport '../kemet-modal';\nimport '../kemet-modal-close';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\nimport '../../kemet-button/kemet-button';\n\nconst meta: Meta = {\n title: 'Components / Modal',\n component: 'kemet-modal',\n args: {\n displayCloseBtn: true,\n },\n argTypes: {\n effect: {\n control: { type: 'select' },\n options: ['fadein-scaleup', 'slide-right', 'slide-bottom', 'newspaper', 'fall', 'side-fall', 'flip-horizontal', 'flip-vertical', 'sign-3d', 'super-scaled', 'slit', 'rotate-bottom', 'rotate-left'],\n },\n },\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n const openModal = () => {\n const modal = document.querySelector('kemet-modal');\n modal.opened = true;\n };\n\n const makeCloseBtn = (display) => {\n if (display) {\n return html`\n <kemet-modal-close tabindex=\"0\" role=\"button\" aria-label=\"Close Button\" style=\"display:flex;\">\n <kemet-icon icon=\"x-circle\" size=\"24\" kemet-background-color=\"white\" kemet-border-radius=\"circle\"></kemet-icon>\n </kemet-modal-close>\n `;\n }\n\n return null;\n };\n\n return html`\n <kemet-button @click=\"${() => openModal()}\">Open Modal</kemet-button>\n <kemet-modal ?opened=${args.opened} ?rounded=${args.rounded} effect=\"${ifDefined(args.effect)}\" ?close-on-click=\"${args.closeOnClick}\">\n <div kemet-padding=\"xl\">\n ${makeCloseBtn(args.displayCloseBtn)}\n <h2 kemet-margin=\"none\">Modal Title</h2>\n <p>Your modal contents <a href=\"http://google.com\" kemet-color=\"primary\"><strong>here</strong></a>.</p>\n </div>\n </kemet-modal>\n `;\n};\n\nexport const Standard: Story = {\n render: (args) => Template(args),\n};\n\nexport const Rounded: Story = {\n render: (args) => Template(args),\n args: {\n rounded: true\n }\n};\n"]}

package/dist/components/kemet-modal/kemet-modal-close.js CHANGED Viewed

@@ -28,7 +28,7 @@ KemetModalClose.styles = [
         position: absolute;
         top: 0.5rem;
         right: 0.5rem;
-        border-radius: 50%;
+        border-radius: var(--kemet-border-radius-circle);
         cursor: pointer;
       }
     `,

package/dist/components/kemet-modal/kemet-modal-close.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAA;AArBQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-modal-close\n * @summary A close button for a modal.\n \n @event kemet-modal-close-pressed - Fires when the close button is pressed\n \n /\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n static styles = [\n css`\n :host {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n border-radius: ~~50%;\~~n cursor: pointer;\n }\n `,\n ];\n\n render() {\n return html`\n <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n `;\n }\n\n close() {\n emitEvent(this, 'kemet-modal-close-pressed', this);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-modal-close': KemetModalClose\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-modal-close.js","sourceRoot":"","sources":["../../../src/components/kemet-modal/kemet-modal-close.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD;;;;;;;;;GASG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAarD,MAAM;QACJ,OAAO,IAAI,CAAA;qBACM,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/D,CAAC;IACJ,CAAC;IAED,KAAK;QACH,SAAS,CAAC,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;CACF,CAAA;AArBQ,sBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;KAQF;CACF,CAAC;AAXiB,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,CAsBnC;eAtBoB,eAAe","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-modal-close\n * @summary A close button for a modal.\n \n @event kemet-modal-close-pressed - Fires when the close button is pressed\n \n /\n\n@customElement('kemet-modal-close')\nexport default class KemetModalClose extends LitElement {\n static styles = [\n css`\n :host {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n border-radius: var(--kemet-border-radius-circle);\n cursor: pointer;\n }\n `,\n ];\n\n render() {\n return html`\n <slot @keyup=${() => this.close()} @click=${() => this.close()}></slot>\n `;\n }\n\n close() {\n emitEvent(this, 'kemet-modal-close-pressed', this);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-modal-close': KemetModalClose\n }\n}\n"]}

package/dist/components/kemet-modal/kemet-modal.d.ts CHANGED Viewed

@@ -13,14 +13,17 @@ import { TypeEffect } from './types';
  * @prop {string} breakpoint
  * @prop {boolean} mobile
  *
- * @csspart content - The main contents of the modal.
+ * @csspart dialog - The main contents of the modal.
  * @csspart overlay - The surrounding scrim of the modal.
  *
- * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.
- * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.
- * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.
- * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.
- * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.
+ * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners
+ * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.
+ * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.
+ * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.
+ * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.
  *
  * @event kemet-modal-opened - Fires when the modal opens
  * @event kemet-modal-closed - Fires when the modal closes
@@ -33,13 +36,20 @@ export default class KemetModal extends LitElement {
     closeOnClick: boolean;
     breakpoint: string;
     mobile: boolean;
+    rounded: boolean;
+    /** @internal */
+    dialogElement: HTMLDialogElement;
+    /** @internal */
     focusableSelector: string;
+    /** @internal */
     focusableElements: any;
     constructor();
     firstUpdated(): void;
     updated(prevProps: any): void;
     render(): import("lit-html").TemplateResult<1>;
     isMobile(): void;
+    handleOpen(): void;
+    handleClose(): void;
     handleFocusableDown(event: any): void;
 }
 declare global {

package/dist/components/kemet-modal/kemet-modal.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { stylesBase, stylesEffects } from './styles';
 import { emitEvent } from '../../utilities/misc/events';
 /**
@@ -16,14 +16,17 @@ import { emitEvent } from '../../utilities/misc/events';
  * @prop {string} breakpoint
  * @prop {boolean} mobile
  *
- * @csspart content - The main contents of the modal.
+ * @csspart dialog - The main contents of the modal.
  * @csspart overlay - The surrounding scrim of the modal.
  *
- * @cssproperty --kemet-modal-content-min-width - The minimum width of the content. Default: 0.
- * @cssproperty --kemet-modal-content-max-width - The maximum width of the content. Default: none.
- * @cssproperty --kemet-modal-content-background-color - The background color of the content. Default: --kemet-color-white.
- * @cssproperty --kemet-modal-content-mobile-min-width - The min with of the mobile content. Default: 100%.
- * @cssproperty --kemet-modal-content-mobile-min-height - The min height of the mobile content. Default: 80vh.
+ * @cssproperty --kemet-modal-radius - The mount of rounding for rounded corners
+ * @cssproperty --kemet-modal-dialog-min-width - The minimum width of the dialog.
+ * @cssproperty --kemet-modal-dialog-max-width - The maximum width of the dialog.
+ * @cssproperty --kemet-modal-dialog-background-color - The background color of the dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-width - The width of the mobile dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-margin - The margins of the mobile dialog.
+ * @cssproperty --kemet-modal-dialog-mobile-padding - The padding of the mobile dialog.
+ * @cssproperty --kemet-modal-overlay-background-color - The color of the backdrop overlay.
  *
  * @event kemet-modal-opened - Fires when the modal opens
  * @event kemet-modal-closed - Fires when the modal closes
@@ -36,7 +39,7 @@ let KemetModal = class KemetModal extends LitElement {
         this.closeOnClick = false;
         this.breakpoint = '600px';
         // bindings
-        this.addEventListener('kemet-modal-close-pressed', () => { this.opened = false; });
+        this.addEventListener('kemet-modal-close-pressed', () => { this.handleClose(); });
     }
     firstUpdated() {
         // standard properties
@@ -46,13 +49,13 @@ let KemetModal = class KemetModal extends LitElement {
         // events
         this.addEventListener('keyup', (event) => {
             if (event.key === 'Escape') {
-                this.opened = false;
+                this.handleClose();
             }
         });
         this.addEventListener('click', (event) => {
             const targetElement = event.target;
             if (this.opened && this.closeOnClick && targetElement.tagName.toLowerCase() === 'kemet-modal') {
-                this.opened = false;
+                this.handleClose();
             }
         });
         window.addEventListener('resize', () => {
@@ -64,22 +67,18 @@ let KemetModal = class KemetModal extends LitElement {
     }
     updated(prevProps) {
         if (!prevProps.get('opened') && this.opened === true) {
-            setTimeout(() => {
-                var _a;
-                (_a = this.focusableElements[0]) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 100);
-            emitEvent(this, 'kemet-modal-opened', this);
+            this.handleOpen();
         }
         if (prevProps.get('opened') && this.opened === false) {
-            emitEvent(this, 'kemet-modal-closed', this);
+            this.handleClose();
         }
         this.isMobile();
     }
     render() {
         return html `
-      <div class="content" part="content">
+      <dialog part="dialog" @close=${() => this.handleClose()}>
         <slot></slot>
-      </div>
+      </dialog>
       <div class="overlay" part="overlay"></div>
     `;
     }
@@ -87,6 +86,20 @@ let KemetModal = class KemetModal extends LitElement {
         const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
         this.mobile = mediaQuery.matches;
     }
+    handleOpen() {
+        var _a;
+        this.opened = true;
+        if ((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal)
+            this.dialogElement.showModal();
+        emitEvent(this, 'kemet-modal-opened', this);
+    }
+    handleClose() {
+        var _a;
+        this.opened = false;
+        if ((_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close)
+            this.dialogElement.close();
+        emitEvent(this, 'kemet-modal-closed', this);
+    }
     handleFocusableDown(event) {
         const firstFocusable = this.focusableElements[0];
         const lastFocusable = this.focusableElements[this.focusableElements.length - 1];
@@ -118,6 +131,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], KemetModal.prototype, "mobile", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetModal.prototype, "rounded", void 0);
+__decorate([
+    query('dialog')
+], KemetModal.prototype, "dialogElement", void 0);
 __decorate([
     state()
 ], KemetModal.prototype, "focusableSelector", void 0);