npm - @tmorrow/cre8-wc - Versions diffs - 2.0.4 → 2.0.5 - Mend

@tmorrow/cre8-wc 2.0.4 → 2.0.5

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

package/lib/components/checkbox-field-item/checkbox-field-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox-field-item.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAClC,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,MAAM,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,qBAAsB,SAAQ,eAAe;IAA1D;;QACa,SAAI,GAAG,UAAU,CAAC;QAiB3B;;;WAGG;QAEH,cAAS,GAAW,OAAO,CAAC;QAe5B;;WAEG;QAEH,gBAAW,GAAW,SAAS,CAAC;IAmQpC,CAAC;IA5LG;;;;;;;MAOE;IAEF,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,OAAO;QAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO;IAC7C,CAAC;IAED;;OAEG;IACK,OAAO;QACX,MAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACnE,IAAI,sBAAsB,EAAE,CAAC;YACzB,OAAO,UAAU,CAAC;QACtB,CAAC;QACD,OAAO,EAAE,CAAC;IACd,CAAC;IAED;;;;OAIG;IACK,WAAW;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;IACxH,CAAC;IAED;;;OAGG;IACK,aAAa;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO;QACrC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IAChH,CAAC;IAED;;;;OAIG;IACK,eAAe,CAAC,CAAQ;QAC5B,OAAO;QACP,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAC7C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEzC,OAAO;QACP,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC1C,MAAM,EAAE;gBACJ,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aACpB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED;;;;;;OAMG;IACH,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO;QACzC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,OAAO;QAC/C,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,YAAY;QACR,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO;QAC9B,OAAO,KAAK,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAED;;OAEG;IACH,cAAc;QACV,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;QACxC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,EAAE,CAAC;QAC5D,CAAC;QACD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACrC,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,IAAI,MAAM,EAAE,CAAC;QAChF,CAAC;IACL,CAAC;IAED;;;;;;;OAOG;IACH,aAAa;QACT,IAAI,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzD,OAAO,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC,OAAO;QAC/E,CAAC;QAAC,IAAI,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAC,yBAAyB,CAAC,CAAC,OAAO;QAClD,CAAC;QACD,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO;IACxC,CAAC;IAED;;;;OAIG;IACH,2BAA2B;QACvB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,OAAO;YACP,OAAO,IAAI,CAAA;qBACF,IAAI,CAAC,SAAS;aACtB,IAAI,CAAC,yBAAyB;;;;4CAIC,IAAI,CAAC,WAAW,WAAW,IAAI,CAAC,WAAW;yBAC9D,CAAC;QAClB,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,OAAO;YACP,OAAO,IAAI,CAAA;mBACJ,IAAI,CAAC,OAAO;aAClB,IAAI,CAAC,yBAAyB;;;;4CAIC,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,SAAS;yBAC1D,CAAC;QAClB,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,4BAA4B,EAAE;YAC/E,mCAAmC,EAAE,IAAI,CAAC,OAAO;YACjD,qCAAqC,EAAE,IAAI,CAAC,SAAS;YACrD,sCAAsC,EAAE,IAAI,CAAC,QAAQ;SACxD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;kBACD,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,WAAW,mBAAmB;;;mBAGtD,IAAI,CAAC,aAAa;eACtB,IAAI,CAAC,OAAO;iBACV,IAAI,CAAC,IAAI,IAAI,SAAS;mBACpB,IAAI,CAAC,KAAK;qBACR,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;yBACpB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;sBAC3D,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;8BAC5C,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;sBACvC,IAAI,CAAC,OAAO;oBACd,IAAI,CAAC,eAAe;;;4BAGZ,QAAQ;yBACX,CAAC,IAAI,CAAC,OAAO;;+DAEyB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK;;QAEjF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,eAAe;wCACzB,IAAI,CAAC,SAAS;cACxC;YACE,CAAC,CAAC,OACN;UACF,IAAI,CAAC,2BAA2B,EAAE;KACvC,CAAC;IACF,CAAC;;AAzSM,4BAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACZ;AAOf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACzB;AAOlB;IADC,QAAQ,EAAE;wDACiB;AAM5B;IADC,QAAQ,EAAE;wDACQ;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACvB;AAMpB;IADC,QAAQ,EAAE;0DACqB;AAMhC;IADC,QAAQ,EAAE;0DACU;AAOrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACxB;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACzB;AAOlB;IADC,QAAQ,EAAE;sDACM;AAMjB;IADC,QAAQ,EAAE;wDACQ;AAOnB;IADC,QAAQ,EAAE;8DACc;AAMzB;IADC,QAAQ,EAAE;wEACwB;AASnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDACxB;AAMnB;IADC,QAAQ,EAAE;gEACgB;AAM3B;IADC,KAAK,CAAC,OAAO,CAAC;oDACU;AAkM7B,IAAI,cAAc,CAAC,GAAG,CAAC,0BAA0B,CAAC,KAAK,SAAS,EAAE,CAAC;IAC/D,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,qBAAqB,CAAC,CAAC;AAC7E,CAAC;AAQD,eAAe,qBAAqB,CAAC","sourcesContent":["import { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../icon/icon';\nimport '../field-note/field-note';\nimport svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport styles from './checkbox-field-item.styles.js';\nimport { Cre8FormElement } from '../cre8-form-element';\n\n/*\n Checkbox Field Item is the combination of a checkbox input, label and field note.\n * Checkboxes can turn an option on or off.\n \n Checkboxes should be used when the user is allowed to select one, none or multiple options\n * OR to \"opt-in\" (ex. I would like to receive the newsletter by email)\n * or as a required acknowledgement(ex. I've read the Terms and Conditions).\n * If the user can only chose one option from many, use `radio-field-item`.\n \n ## How to Use\n \n - A checkbox is independent of all other checkboxes in the list,\n * so checking one box should not uncheck the others in the group.\n * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.\n * - Avoid disabled and read-only states as much as possible.\n \n ## Universal Form Field Rules\n * - Unless indicated with the \"(Optional)\" label, all fields are assumed required.\n * Minimize the number of optional fields to keep forms as short as possible.\n * - Always include a label written in sentence case.\n * - Avoid using the read-only and disabled states as much as possible.\n /\nexport class Cre8CheckboxFieldItem extends Cre8FormElement {\n readonly type = 'checkbox';\n\n static styles = [styles];\n\n /\n The checkbox label\n /\n @property({ type: String })\n label?: string;\n\n /\n Changes the component's treatment to represent an error state\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n isError?: boolean;\n\n /\n Visually hidden text that always signifies that this is an error for screen reader usage\n * @attr {string}\n /\n @property()\n errorText: string = 'Error';\n\n /\n The error field note that appears below the default field note\n /\n @property()\n errorNote?: string;\n\n /\n Changes the component's treatment to represent a success state\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n isSuccess?: boolean;\n\n /\n Visually hidden text that always signifies that this is successful for screen reader usage\n /\n @property()\n successText: string = 'Success';\n\n /\n The success field note that appears below the default field note\n /\n @property()\n successNote?: string;\n\n /\n Disabled State\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n disabled?: boolean;\n\n /\n Checked State\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n checked?: boolean;\n\n /\n Checkbox FieldId\n * @attr {string}\n /\n @property()\n fieldId?: string;\n\n /\n Checkbox FieldNote\n /\n @property()\n fieldNote?: string;\n\n /\n Checkbox fieldnote ariaDescribeBy\n * @attr {string}\n /\n @property()\n ariaDescribedBy?: string;\n\n /\n Additional aria-describedby connection to id for additional success and error notes to be accessible\n /\n @property()\n validationAriaDescribedBy?: string;\n\n\n\n /\n Required property\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n required?: boolean;\n\n /\n Checkbox fieldnote icon name\n /\n @property()\n fieldNoteIconName?: string;\n\n /\n Get the input element within the shadow root and set it to this.field\n /\n @query('input')\n field!: HTMLInputElement;\n\n protected override defaultValue: boolean;\n\n /\n Connected callback lifecycle\n * 1) Set the fieldID to a random string if not provided so form is always accessible\n * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property\n * or a random string to always make the form field accessible.\n * 3) Set the form internal data to set that to the default checked state.\n * 4) Set the default value of the checkbox field item to the checked property\n /\n\n connectedCallback() {\n super.connectedCallback();\n this.setFormData(); / 3 /\n this.defaultValue = this.checked; / 4 /\n }\n\n /\n access role when check-box-field-item embedded in checkbox-field\n /\n private getRole() {\n const checkboxFieldContainer = this.closest('cre8-checkbox-field');\n if (checkboxFieldContainer) {\n return 'listitem';\n }\n return '';\n }\n\n /\n Set form data\n * 1) If a checked property is provided, set the form value the checkbox value attribute.\n * Otherwise, don't provide a value for the checkbox data array\n /\n private setFormData() {\n return this.checked ? this._internals.setFormValue(this.value \|\| 'on') : this._internals.setFormValue(null); / 1 /\n }\n\n /\n Handle on checkbox change\n * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.\n /\n private _clickHandler() {\n this.checked = !this.checked; / 2 /\n return this.checked ? this._internals.setFormValue(this.value \|\| 'on') : this._internals.setFormValue(null);\n }\n\n /\n Handle On Change\n * 1. Set the value when the select is changed.\n * 2. Fire the custom event with the current value.\n /\n private _handleOnChange(e: Event) {\n / 1 /\n const target = e.target as HTMLSelectElement;\n this.value = target.value;\n this._internals.setFormValue(this.value);\n\n / 2 /\n const customEvent = new CustomEvent('change', {\n detail: {\n name: this.name,\n value: this.value,\n },\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(customEvent);\n }\n\n /\n Form reset callback\n * 1) Set checked property to the default value and then set the input's checked attribute to that default value\n * 2) Set the input's checked attribute to that default value\n * 3) Set the element internals form data when the form is reset\n * 4) Change the new value to the old value on reset\n /\n formResetCallback(): void {\n this.checked = this.defaultValue; / 1 /\n this.field.checked = this.defaultValue; / 2 /\n this.setFormData();\n this.requestUpdate();\n }\n\n /\n First update lifecycle hook\n * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n /\n firstUpdated() {\n this.initializeAria(); / 1 /\n return super.firstUpdated();\n }\n\n /\n Initialize aria attributes\n /\n initializeAria() {\n this.fieldId = this.fieldId \|\| nanoid();\n if (this.fieldNote \|\| this.slotNotEmpty('fieldNote')) {\n this.ariaDescribedBy = this.ariaDescribedBy \|\| nanoid();\n }\n if (this.successNote \|\| this.errorNote) {\n this.validationAriaDescribedBy = this.validationAriaDescribedBy \|\| nanoid();\n }\n }\n\n /\n Aria describedby string based on field notes and error/success notes\n * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n * render both in the input's `aria-describedby` attribute\n * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n /\n fieldNoteAria(): string {\n if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; / 1 /\n } if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n return this.validationAriaDescribedBy; / 2 /\n }\n return this.ariaDescribedBy; / 3 /\n }\n\n /\n Render the success or error field notes\n * 1. If there is a successNote, then return the field note with the success message and state.\n * 2. If there is a errorNote, then return the field note with the error message and state.\n /\n renderSuccessErrorFieldNote() {\n if (this.successNote) {\n / 1 /\n return html`<cre8-field-note\n ?isSuccess=${this.isSuccess}\n id=${this.validationAriaDescribedBy}\n class=\"cre8-c-checkbox-field-item__field-note-success\"\n iconName=\"success\"\n >\n <span class=\"cre8-u-is-vishidden\">${this.successText}</span> ${this.successNote}\n </cre8-field-note>`;\n }\n if (this.errorNote) {\n / 2 */\n return html` <cre8-field-note\n ?isError=${this.isError}\n id=${this.validationAriaDescribedBy}\n class=\"cre8-c-checkbox-field-item__field-note-error\"\n iconName=\"error-alt\"\n >\n <span class=\"cre8-u-is-vishidden\">${this.errorText}</span> ${this.errorNote}\n </cre8-field-note>`;\n }\n return null;\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-checkbox-field-item', {\n 'cre8-c-checkbox-field-item--error': this.isError,\n 'cre8-c-checkbox-field-item--success': this.isSuccess,\n 'cre8-c-checkbox-field-item--disabled': this.disabled,\n });\n\n return html`\n <div role=${ifDefined(this.getRole())} class=\"${componentClassNames}\">\n <input class=\"cre8-c-checkbox-field-item__input\"\n type=\"checkbox\"\n @input=${this._clickHandler}\n id=${this.fieldId}\n name=${this.name ?? undefined}\n .value=${this.value}\n required=${ifDefined(this.required)}\n aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}\n disabled=\"${ifDefined(this.disabled ? this.disabled : undefined)}\"\n aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n .checked=\"${this.checked}\"\n @change=${this._handleOnChange}\n />\n <span class=\"cre8-c-checkbox-field-item__custom-checkbox\">\n <cre8-icon svg='${svgCheck}' class=\"cre8-c-checkbox-field-item__icon\" aria-label=\"checkbox\"\n aria-hidden=\"${!this.checked}\"></cre8-icon>\n </span>\n <label class=\"cre8-c-checkbox-field-item__label\" for=${this.fieldId}>${this.label}</label>\n </div>\n ${this.fieldNote \|\| this.slotNotEmpty('fieldNote')\n ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-checkbox-field-item__field-note\"\n ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n >`\n : nothing\n }\n ${this.renderSuccessErrorFieldNote()}\n `;\n }\n}\n\nif (customElements.get('cre8-checkbox-field-item') === undefined) {\n customElements.define('cre8-checkbox-field-item', Cre8CheckboxFieldItem);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-checkbox-field-item': Cre8CheckboxFieldItem;\n }\n}\n\nexport default Cre8CheckboxFieldItem;\n"]}
1	+ {"version":3,"file":"checkbox-field-item.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../icon/icon';\nimport '../field-note/field-note';\nimport svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';\nimport styles from './checkbox-field-item.styles.js';\nimport { Cre8FormElement } from '../cre8-form-element';\n\n/*\n Checkbox Field Item is the combination of a checkbox input, label and field note.\n * Checkboxes can turn an option on or off.\n \n Checkboxes should be used when the user is allowed to select one, none or multiple options\n * OR to \"opt-in\" (ex. I would like to receive the newsletter by email)\n * or as a required acknowledgement(ex. I've read the Terms and Conditions).\n * If the user can only chose one option from many, use `radio-field-item`.\n \n ## How to Use\n \n - A checkbox is independent of all other checkboxes in the list,\n * so checking one box should not uncheck the others in the group.\n * - Place checkbox options one on top of another vertically. Do not display them in a row horizontally.\n * - Avoid disabled and read-only states as much as possible.\n \n ## Universal Form Field Rules\n * - Unless indicated with the \"(Optional)\" label, all fields are assumed required.\n * Minimize the number of optional fields to keep forms as short as possible.\n * - Always include a label written in sentence case.\n * - Avoid using the read-only and disabled states as much as possible.\n \n @slot fieldNote - Container for optional field note content\n \n @cssproperty \"--cre8-border-radius-checkbox\" - border radius of the checkbox box; falls back to --cre8-border-radius-small\n \n @fires change - Fires when the checkbox is toggled. `event.detail` is `{ name, value }`.\n /\nexport class Cre8CheckboxFieldItem extends Cre8FormElement {\n readonly type = 'checkbox';\n\n static styles = [styles];\n\n /\n The checkbox label\n /\n @property({ type: String })\n label?: string;\n\n /\n Changes the component's treatment to represent an error state\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n isError?: boolean;\n\n /\n Visually hidden text that always signifies that this is an error for screen reader usage\n * @attr {string}\n /\n @property()\n errorText: string = 'Error';\n\n /\n The error field note that appears below the default field note\n /\n @property()\n errorNote?: string;\n\n /\n Changes the component's treatment to represent a success state\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n isSuccess?: boolean;\n\n /\n Visually hidden text that always signifies that this is successful for screen reader usage\n /\n @property()\n successText: string = 'Success';\n\n /\n The success field note that appears below the default field note\n /\n @property()\n successNote?: string;\n\n /\n Disabled State\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n disabled?: boolean;\n\n /\n Checked State\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n checked?: boolean;\n\n /\n Checkbox FieldId\n * @attr {string}\n /\n @property()\n fieldId?: string;\n\n /\n Checkbox FieldNote\n /\n @property()\n fieldNote?: string;\n\n /\n Checkbox fieldnote ariaDescribeBy\n * @attr {string}\n /\n @property()\n ariaDescribedBy?: string;\n\n /\n Additional aria-describedby connection to id for additional success and error notes to be accessible\n /\n @property()\n validationAriaDescribedBy?: string;\n\n\n\n /\n Required property\n * @attr {boolean}\n /\n @property({ type: Boolean, reflect: true })\n required?: boolean;\n\n /\n Checkbox fieldnote icon name\n /\n @property()\n fieldNoteIconName?: string;\n\n /\n Get the input element within the shadow root and set it to this.field\n /\n @query('input')\n field!: HTMLInputElement;\n\n protected override defaultValue: boolean;\n\n /\n Connected callback lifecycle\n * 1) Set the fieldID to a random string if not provided so form is always accessible\n * 2) If a fieldnote is added, set the aria-describedby property to the `ariaDescribedBy` property\n * or a random string to always make the form field accessible.\n * 3) Set the form internal data to set that to the default checked state.\n * 4) Set the default value of the checkbox field item to the checked property\n /\n\n connectedCallback() {\n super.connectedCallback();\n this.setFormData(); / 3 /\n this.defaultValue = this.checked; / 4 /\n }\n\n /\n access role when check-box-field-item embedded in checkbox-field\n /\n private getRole() {\n const checkboxFieldContainer = this.closest('cre8-checkbox-field');\n if (checkboxFieldContainer) {\n return 'listitem';\n }\n return '';\n }\n\n /\n Set form data\n * 1) If a checked property is provided, set the form value the checkbox value attribute.\n * Otherwise, don't provide a value for the checkbox data array\n /\n private setFormData() {\n return this.checked ? this._internals.setFormValue(this.value \|\| 'on') : this._internals.setFormValue(null); / 1 /\n }\n\n /\n Handle on checkbox change\n * 1) On change of the checkbox input, if `checked` is true, then set it to false and vice versa.\n /\n private _clickHandler() {\n this.checked = !this.checked; / 2 /\n return this.checked ? this._internals.setFormValue(this.value \|\| 'on') : this._internals.setFormValue(null);\n }\n\n /\n Handle On Change\n * 1. Set the value when the select is changed.\n * 2. Fire the custom event with the current value.\n /\n private _handleOnChange(e: Event) {\n / 1 /\n const target = e.target as HTMLSelectElement;\n this.value = target.value;\n this._internals.setFormValue(this.value);\n\n / 2 /\n const customEvent = new CustomEvent('change', {\n detail: {\n name: this.name,\n value: this.value,\n },\n bubbles: true,\n composed: true,\n });\n this.dispatchEvent(customEvent);\n }\n\n /\n Form reset callback\n * 1) Set checked property to the default value and then set the input's checked attribute to that default value\n * 2) Set the input's checked attribute to that default value\n * 3) Set the element internals form data when the form is reset\n * 4) Change the new value to the old value on reset\n /\n formResetCallback(): void {\n this.checked = this.defaultValue; / 1 /\n this.field.checked = this.defaultValue; / 2 /\n this.setFormData();\n this.requestUpdate();\n }\n\n /\n First update lifecycle hook\n * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n /\n firstUpdated() {\n this.initializeAria(); / 1 /\n return super.firstUpdated();\n }\n\n /\n Initialize aria attributes\n /\n initializeAria() {\n this.fieldId = this.fieldId \|\| nanoid();\n if (this.fieldNote \|\| this.slotNotEmpty('fieldNote')) {\n this.ariaDescribedBy = this.ariaDescribedBy \|\| nanoid();\n }\n if (this.successNote \|\| this.errorNote) {\n this.validationAriaDescribedBy = this.validationAriaDescribedBy \|\| nanoid();\n }\n }\n\n /\n Aria describedby string based on field notes and error/success notes\n * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n * render both in the input's `aria-describedby` attribute\n * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n /\n fieldNoteAria(): string {\n if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; / 1 /\n } if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n return this.validationAriaDescribedBy; / 2 /\n }\n return this.ariaDescribedBy; / 3 /\n }\n\n /\n Render the success or error field notes\n * 1. If there is a successNote, then return the field note with the success message and state.\n * 2. If there is a errorNote, then return the field note with the error message and state.\n /\n renderSuccessErrorFieldNote() {\n if (this.successNote) {\n / 1 /\n return html`<cre8-field-note\n ?isSuccess=${this.isSuccess}\n id=${this.validationAriaDescribedBy}\n class=\"cre8-c-checkbox-field-item__field-note-success\"\n iconName=\"success\"\n >\n <span class=\"cre8-u-is-vishidden\">${this.successText}</span> ${this.successNote}\n </cre8-field-note>`;\n }\n if (this.errorNote) {\n / 2 */\n return html` <cre8-field-note\n ?isError=${this.isError}\n id=${this.validationAriaDescribedBy}\n class=\"cre8-c-checkbox-field-item__field-note-error\"\n iconName=\"error-alt\"\n >\n <span class=\"cre8-u-is-vishidden\">${this.errorText}</span> ${this.errorNote}\n </cre8-field-note>`;\n }\n return null;\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-checkbox-field-item', {\n 'cre8-c-checkbox-field-item--error': this.isError,\n 'cre8-c-checkbox-field-item--success': this.isSuccess,\n 'cre8-c-checkbox-field-item--disabled': this.disabled,\n });\n\n return html`\n <div role=${ifDefined(this.getRole())} class=\"${componentClassNames}\">\n <input class=\"cre8-c-checkbox-field-item__input\"\n type=\"checkbox\"\n @input=${this._clickHandler}\n id=${this.fieldId}\n name=${this.name ?? undefined}\n .value=${this.value}\n required=${ifDefined(this.required)}\n aria-invalid=${this.required ? !!this.isError : ifDefined(this.isError)}\n disabled=\"${ifDefined(this.disabled ? this.disabled : undefined)}\"\n aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n .checked=\"${this.checked}\"\n @change=${this._handleOnChange}\n />\n <span class=\"cre8-c-checkbox-field-item__custom-checkbox\">\n <cre8-icon svg='${svgCheck}' class=\"cre8-c-checkbox-field-item__icon\" aria-label=\"checkbox\"\n aria-hidden=\"${!this.checked}\"></cre8-icon>\n </span>\n <label class=\"cre8-c-checkbox-field-item__label\" for=${this.fieldId}>${this.label}</label>\n </div>\n ${this.fieldNote \|\| this.slotNotEmpty('fieldNote')\n ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-checkbox-field-item__field-note\"\n ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n >`\n : nothing\n }\n ${this.renderSuccessErrorFieldNote()}\n `;\n }\n}\n\nif (customElements.get('cre8-checkbox-field-item') === undefined) {\n customElements.define('cre8-checkbox-field-item', Cre8CheckboxFieldItem);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-checkbox-field-item': Cre8CheckboxFieldItem;\n }\n}\n\nexport default Cre8CheckboxFieldItem;\n"]}

package/lib/components/checkbox-field-item/checkbox-field-item.styles.js CHANGED Viewed

@@ -754,7 +754,7 @@ span.ripple {
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  border-radius: var(--cre8-border-radius-small);
+  border-radius: var(--cre8-border-radius-checkbox, var(--cre8-border-radius-small));
   border-width: var(--cre8-border-width-default);
   border-style: var(--cre8-border-style-default);
   background-color: var(--cre8-color-bg-default);

package/lib/components/checkbox-field-item/checkbox-field-item.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox-field-item.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+1BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n #VISIBILITY UTILITIES\n/\n/ Completely remove from the flow and screen readers. /\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n/ Completely remove from the flow but leave available to screen readers. /\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n/\n Hide element at sm breakpoint\n /\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n\n/\n Hide element at sm-2 breakpoint\n /\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n\n/\n Hide element at md breakpoint\n /\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n\n/\n Hide element at lg breakpoint\n /\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n\n/\n Hide element at xl breakpoint\n /\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n\n/\n Show element at sm breakpoint\n /\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n\n/\n Show element at sm-2 breakpoint\n /\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n\n/\n Show element at md breakpoint\n /\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n\n/\n Show element at lg breakpoint\n /\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n\n/\n Show element at xl breakpoint\n /\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n\n/------------------------------------\\\\\n #CHECKBOX-FIELD-ITEM\n\\\\------------------------------------/\n:host {\n display: inline-flex;\n flex-wrap: wrap;\n}\n\n/* \n * 1) Form field that is composed of a checkbox input, label, and an optional field note.\n /\n.cre8-c-checkbox-field-item {\n display: flex;\n position: relative;\n align-items: center;\n margin-bottom: 0.5rem;\n min-height: 1.5rem;\n /* \n * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset\n * 1) Remove margin bottom on last item\n /\n}\n:host(:last-child) .cre8-c-checkbox-field-item {\n margin-bottom: 0;\n / 1 /\n}\n\n/* \n * Checkbox field item input \n /\n.cre8-c-checkbox-field-item__input {\n opacity: 0;\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n height: 1.5rem;\n min-width: 1.5rem;\n margin: 0;\n z-index: 1;\n /* \n * Checkbox field item input error\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input {\n cursor: not-allowed;\n}\n\n/* \n * Checkbox field item custom checkbox container\n /\n.cre8-c-checkbox-field-item__custom-checkbox {\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: var(--cre8-border-radius-small);\n border-width: var(--cre8-border-width-default);\n border-style: var(--cre8-border-style-default);\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-strong);\n /* \n * Checkbox field item custom checkbox focus visible custom outline\n /\n}\n.cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox within checkbox field with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox within checkbox field with disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox {\n cursor: not-allowed;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n}\n\n/\n Checkbox field item custom checkbox when item is checked\n /\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-brand-strong);\n /* \n * Checkbox field item custom checkbox when item is checked with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox when item is checked with disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-disabled);\n}\n\n/* \n * Checkbox field item checkmark icon\n /\n.cre8-c-checkbox-field-item__icon {\n display: none;\n color: var(--cre8-color-content-knockout);\n /* \n * Checkbox field item icon within checkbox field with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon {\n color: var(--cre8-color-content-error);\n}\n.cre8-c-checkbox-field-item__icon {\n /* \n * Checkbox field item icon within checkbox field disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon {\n color: var(--cre8-color-content-disabled);\n}\n.cre8-c-checkbox-field-item__icon {\n /\n Checkbox field item icon will display in the box if the input is checked\n /\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon {\n display: flex;\n}\n\n/* \n * Checkbox field item input \n /\n.cre8-c-checkbox-field-item__label {\n margin-left: 2rem;\n font-family: var(--cre8-typography-label-small-font-family);\n font-size: var(--cre8-typography-label-small-font-size);\n font-weight: var(--cre8-typography-label-small-font-weight);\n line-height: var(--cre8-typography-label-small-line-height);\n text-decoration: var(--cre8-typography-label-small-text-decoration);\n text-transform: var(--cre8-typography-label-small-text-transform);\n}\n\n/* \n * Checkbox field item field notes\n */\n.cre8-c-checkbox-field-item__field-note,\n.cre8-c-checkbox-field-item__field-note-success,\n.cre8-c-checkbox-field-item__field-note-error {\n flex-basis: 100%;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"checkbox-field-item.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+1BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n #VISIBILITY UTILITIES\n/\n/ Completely remove from the flow and screen readers. /\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n/ Completely remove from the flow but leave available to screen readers. /\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n/\n Hide element at sm breakpoint\n /\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n\n/\n Hide element at sm-2 breakpoint\n /\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n\n/\n Hide element at md breakpoint\n /\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n\n/\n Hide element at lg breakpoint\n /\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n\n/\n Hide element at xl breakpoint\n /\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n\n/\n Show element at sm breakpoint\n /\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n\n/\n Show element at sm-2 breakpoint\n /\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n\n/\n Show element at md breakpoint\n /\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n\n/\n Show element at lg breakpoint\n /\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n\n/\n Show element at xl breakpoint\n /\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n\n/------------------------------------\\\\\n #CHECKBOX-FIELD-ITEM\n\\\\------------------------------------/\n:host {\n display: inline-flex;\n flex-wrap: wrap;\n}\n\n/* \n * 1) Form field that is composed of a checkbox input, label, and an optional field note.\n /\n.cre8-c-checkbox-field-item {\n display: flex;\n position: relative;\n align-items: center;\n margin-bottom: 0.5rem;\n min-height: 1.5rem;\n /* \n * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset\n * 1) Remove margin bottom on last item\n /\n}\n:host(:last-child) .cre8-c-checkbox-field-item {\n margin-bottom: 0;\n / 1 /\n}\n\n/* \n * Checkbox field item input \n /\n.cre8-c-checkbox-field-item__input {\n opacity: 0;\n cursor: pointer;\n position: absolute;\n top: 0;\n left: 0;\n height: 1.5rem;\n min-width: 1.5rem;\n margin: 0;\n z-index: 1;\n /* \n * Checkbox field item input error\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input {\n cursor: not-allowed;\n}\n\n/* \n * Checkbox field item custom checkbox container\n /\n.cre8-c-checkbox-field-item__custom-checkbox {\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n height: 1.5rem;\n width: 1.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border-radius: var(--cre8-border-radius-checkbox, var(--cre8-border-radius-small));\n border-width: var(--cre8-border-width-default);\n border-style: var(--cre8-border-style-default);\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-strong);\n /* \n * Checkbox field item custom checkbox focus visible custom outline\n /\n}\n.cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox within checkbox field with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n border-color: var(--cre8-color-border-error);\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox within checkbox field with disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox {\n cursor: not-allowed;\n background-color: var(--cre8-color-bg-disabled);\n border-color: var(--cre8-color-border-disabled);\n}\n\n/\n Checkbox field item custom checkbox when item is checked\n /\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-brand-strong);\n /* \n * Checkbox field item custom checkbox when item is checked with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-default);\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n /* \n * Checkbox field item custom checkbox when item is checked with disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n background-color: var(--cre8-color-bg-disabled);\n}\n\n/* \n * Checkbox field item checkmark icon\n /\n.cre8-c-checkbox-field-item__icon {\n display: none;\n color: var(--cre8-color-content-knockout);\n /* \n * Checkbox field item icon within checkbox field with error\n /\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon {\n color: var(--cre8-color-content-error);\n}\n.cre8-c-checkbox-field-item__icon {\n /* \n * Checkbox field item icon within checkbox field disabled\n /\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon {\n color: var(--cre8-color-content-disabled);\n}\n.cre8-c-checkbox-field-item__icon {\n /\n Checkbox field item icon will display in the box if the input is checked\n /\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon {\n display: flex;\n}\n\n/* \n * Checkbox field item input \n /\n.cre8-c-checkbox-field-item__label {\n margin-left: 2rem;\n font-family: var(--cre8-typography-label-small-font-family);\n font-size: var(--cre8-typography-label-small-font-size);\n font-weight: var(--cre8-typography-label-small-font-weight);\n line-height: var(--cre8-typography-label-small-line-height);\n text-decoration: var(--cre8-typography-label-small-text-decoration);\n text-transform: var(--cre8-typography-label-small-text-transform);\n}\n\n/* \n * Checkbox field item field notes\n */\n.cre8-c-checkbox-field-item__field-note,\n.cre8-c-checkbox-field-item__field-note-success,\n.cre8-c-checkbox-field-item__field-note-error {\n flex-basis: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/date-picker/date-picker.d.ts CHANGED Viewed

@@ -5,6 +5,8 @@ import { Cre8Field } from '../field/field';
  * The Date Picker component renders a form group with label, control, help text and validation styling much
  * like the Field component but exclusively for type=date.
  * Cre8DatePicker inherits the Cre8Field component.
+ *
+ * @slot fieldNote - Container for optional field note content
  */
 export declare class Cre8DatePicker extends Cre8Field {
     field: HTMLInputElement;
@@ -22,6 +24,9 @@ export declare class Cre8DatePicker extends Cre8Field {
      *
      */
     hasShortcuts?: boolean;
+    /**
+     * The label text for the date picker field.
+     */
     label: string;
     /**
      * Handle Date On Input

package/lib/components/date-picker/date-picker.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../components/date-picker/date-picker.ts"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,oBAAoB,EAAwB,MAAM,oCAAoC,CAAC;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C~~;;;;GAIG~~;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAU;IAG1F,UAAU,EAAE,oBAAoB,CAAC;IAEjC;;;OAGG;IACH,MAAM,CAAC,MAAM,4BAAY;IAEhB,YAAY,UAAS;IAE9B;;;;OAIG;IAEH,YAAY,CAAC,EAAE,OAAO,CAAC;~~IAGvB~~,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,cAAc;IAMtB,MAAM;CA8DP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../components/date-picker/date-picker.ts"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,oBAAoB,EAAwB,MAAM,oCAAoC,CAAC;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,KAAK,EAAG,gBAAgB,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAU;IAG1F,UAAU,EAAE,oBAAoB,CAAC;IAEjC;;;OAGG;IACH,MAAM,CAAC,MAAM,4BAAY;IAEhB,YAAY,UAAS;IAE9B;;;;OAIG;IAEH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,cAAc;IAMtB,MAAM;CA8DP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}

package/lib/components/date-picker/date-picker.js CHANGED Viewed

@@ -16,6 +16,8 @@ import { Cre8Field } from '../field/field';
  * The Date Picker component renders a form group with label, control, help text and validation styling much
  * like the Field component but exclusively for type=date.
  * Cre8DatePicker inherits the Cre8Field component.
+ *
+ * @slot fieldNote - Container for optional field note content
  */
 export class Cre8DatePicker extends Cre8Field {
     constructor() {
@@ -46,7 +48,7 @@ export class Cre8DatePicker extends Cre8Field {
         }
     }
     toggleCalendar() {
-        if (!this.disabled && !this._internals.readonly) {
+        if (!this.disabled && !this.readonly) {
             this.showCalendar = !this.showCalendar;
         }
     }
@@ -55,7 +57,7 @@ export class Cre8DatePicker extends Cre8Field {
             'cre8-is-error': this.isError,
             'cre8-is-success': this.isSuccess,
             'cre8-c-date-picker--disabled': this.disabled,
-            'cre8-c-date-picker--read-only': this._internals.readonly,
+            'cre8-c-date-picker--read-only': this.readonly,
         });
         this.type = 'date';
         return html `
@@ -66,24 +68,24 @@ export class Cre8DatePicker extends Cre8Field {
         <div class="cre8-c-date-picker__body">
           <input
             class="cre8-c-date-picker__input"
-            autocomplete=${ifDefined(this._internals.autocomplete)}
+            autocomplete=${ifDefined(this.autocomplete)}
             type="${this.type}"
-            id="${this.id}"
+            id="${this.fieldId}"
             name="${ifDefined(this.name)}"
-            max=${ifDefined(this._internals.max)}
-            min=${ifDefined(this._internals.min)}
-            value="${ifDefined(this.value)}"
-            ?readonly=${this._internals.readonly}
+            max=${ifDefined(this.max)}
+            min=${ifDefined(this.min)}
+            .value="${this.value ?? ''}"
+            ?readonly=${this.readonly}
             ?required=${this.required}
             ?disabled="${this.disabled}"
-            placeholder="${ifDefined(this._internals.placeholder)}"
+            placeholder="${ifDefined(this.placeholder)}"
             @input=${this.handleDateOnInput}
             @click=${this.toggleCalendar}
           />
           <cre8-button
             class="cre8-c-date-picker__calendar-icon-button"
             aria-expanded="${this.showCalendar}"
-            aria-label="Show Calendar"
+            text="Show Calendar"
             ?disabled="${this.disabled || this.readonly}"
             ?hideText=${true}
             iconName="calendar-datepicker"

package/lib/components/date-picker/date-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../components/date-picker/date-picker.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAwB,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C~~;;;;GAIG~~;AACH,MAAM,OAAO,cAAe,SAAQ,SAAS;IAA7C;;QAEW,SAAI,GAAsE,MAAM,CAAC;QAWjF,iBAAY,GAAG,KAAK,CAAC;~~IA6GhC~~,CAAC;IAhGC;;;;OAIG;IACK,iBAAiB,CAAC,CAAQ;QAChC,OAAO;QACP,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QAElD,OAAO;QACP,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAEO,oBAAoB,CAAC,CAAc;QACzC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC;QAE3B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IAEO,kBAAkB,CAAC,CAAc;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAE1E,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;YACvE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,~~UAAU,CAAC,~~QAAQ,EAAE,CAAC;~~YAChD~~,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACzC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE;YACzE,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,iBAAiB,EAAE,IAAI,CAAC,SAAS;YACjC,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,+BAA+B,EAAE,IAAI,CAAC,~~UAAU,CAAC,~~QAAQ;~~SAC1D~~,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QAEnB,OAAO,IAAI,CAAA;oBACK,mBAAmB;wDACiB,IAAI,CAAC,OAAO;aACvD,IAAI,CAAC,KAAK;;;;;2BAKI,SAAS,CAAC,IAAI,CAAC,~~UAAU,CAAC,~~YAAY,CAAC;~~oBAC9C~~,IAAI,CAAC,IAAI;kBACX,IAAI,CAAC,~~EAAE~~;~~oBACL~~,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBACtB,SAAS,CAAC,IAAI,CAAC,~~UAAU,CAAC,~~GAAG,CAAC;~~kBAC9B~~,SAAS,CAAC,IAAI,CAAC,~~UAAU,CAAC,~~GAAG,CAAC;~~qBAC3B~~,~~SAAS,CAAC,~~IAAI,CAAC,KAAK,~~CAAC~~;~~wBAClB~~,IAAI,CAAC,~~UAAU,CAAC,~~QAAQ;~~wBACxB~~,IAAI,CAAC,QAAQ;yBACZ,IAAI,CAAC,QAAQ;2BACX,SAAS,CAAC,IAAI,CAAC,~~UAAU,CAAC,~~WAAW,CAAC;~~qBAC5C~~,IAAI,CAAC,iBAAiB;qBACtB,IAAI,CAAC,cAAc;;;;6BAIX,IAAI,CAAC,YAAY;;yBAErB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;wBAC/B,IAAI;;;sBAGN,IAAI,CAAC,cAAc;;;UAG/B,IAAI,CAAC,YAAY;YACnB,CAAC,CAAC,IAAI,CAAA;2BACa,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;8BAClB,IAAI,CAAC,YAAY;6BAClB,IAAI,CAAC,oBAAoB;+BACvB,IAAI,CAAC,kBAAkB;8BACxB;YACtB,CAAC,CAAC,OAAO;UACP,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YAClD,CAAC,CAAC,IAAI,CAAA;mBACK,IAAI,CAAC,eAAe;;wCAEC,IAAI,CAAC,SAAS;cACxC;YACN,CAAC,CAAC,OAAO;UACP,IAAI,CAAC,2BAA2B,EAAE;;KAEvC,CAAC;IACJ,CAAC;;~~AAlHD~~;;;GAGG;AACI,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AANzB;IADC,OAAO,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,CAAC;kDACV;AAQxB;IAAR,KAAK,EAAE;oDAAsB;AAQ9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACpB;~~AAGvB~~;IADC,QAAQ,EAAE;6CACG;AAoGhB,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './date-picker.styles';\nimport './calendar/calendar';\nimport { consume } from '@lit/context';\nimport { Cre8ElementInternals, formInternalsContext } from '../contexts/form-internals-context';\nimport { Cre8Field } from '../field/field';\n\n/*\n The Date Picker component renders a form group with label, control, help text and validation styling much\n * like the Field component but exclusively for type=date.\n * Cre8DatePicker inherits the Cre8Field component.\n /\nexport class Cre8DatePicker extends Cre8Field {\n field!: HTMLInputElement;\n override type: 'text' \| 'email' \| 'number' \| 'url' \| 'tel' \| 'password' \| 'date' = 'date';\n\n @consume({ context: formInternalsContext })\n _internals: Cre8ElementInternals;\n\n /\n The type of the form field.\n * For Date Picker, this is always 'date'.\n /\n static styles = [styles];\n\n @state() showCalendar = false;\n\n /\n Quick Shortcuts Variant\n * @attr {boolean}\n \n /\n @property({ type: Boolean, reflect: true })\n hasShortcuts?: boolean;\n\n @property()\n label: string;\n\n /*\n Handle Date On Input\n * 1) Set the input's value equal to the event.target.value when the input is changed.\n * 2) Set the internal form value of the input to the updated value\n /\n private handleDateOnInput(e: Event) {\n / 1 /\n this.value = (e.target as HTMLInputElement).value;\n\n / 2 */\n this._internals.setFormValue(this.value);\n }\n\n private handleCalendarSelect(e: CustomEvent) {\n this.value = e.detail.date;\n\n this._internals.setFormValue(this.value);\n this.showCalendar = false;\n }\n\n private handleOutsideClick(e: CustomEvent) {\n const calendarIcon = this.renderRoot.querySelector('.cre8-c-date-picker');\n\n if (this.showCalendar && !e.detail.composedPath.includes(calendarIcon)) {\n this.showCalendar = false;\n }\n }\n\n private toggleCalendar() {\n if (!this.disabled && !this.~~_internals.~~readonly) {\n this.showCalendar = !this.showCalendar;\n }\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-date-picker', {\n 'cre8-is-error': this.isError,\n 'cre8-is-success': this.isSuccess,\n 'cre8-c-date-picker--disabled': this.disabled,\n 'cre8-c-date-picker--read-only': this.~~_internals.~~readonly,\n });\n\n this.type = 'date';\n\n return html`\n <div class=\"${componentClassNames}\">\n <label class=\"cre8-c-date-picker__label\" for=\"${this.fieldId}\"\n >${this.label}</label\n >\n <div class=\"cre8-c-date-picker__body\">\n <input\n class=\"cre8-c-date-picker__input\"\n autocomplete=${ifDefined(this.~~_internals.~~autocomplete)}\n type=\"${this.type}\"\n id=\"${this.id}\"\n name=\"${ifDefined(this.name)}\"\n max=${ifDefined(this.~~_internals.~~max)}\n min=${ifDefined(this.~~_internals.~~min)}\n value=\"${~~ifDefined(~~this.value)}\"\n ?readonly=${this.~~_internals.~~readonly}\n ?required=${this.required}\n ?disabled=\"${this.disabled}\"\n placeholder=\"${ifDefined(this.~~_internals.~~placeholder)}\"\n @input=${this.handleDateOnInput}\n @click=${this.toggleCalendar}\n />\n <cre8-button\n class=\"cre8-c-date-picker__calendar-icon-button\"\n aria-expanded=\"${this.showCalendar}\"\n ~~aria-label~~=\"Show Calendar\"\n ?disabled=\"${this.disabled \|\| this.readonly}\"\n ?hideText=${true}\n iconName=\"calendar-datepicker\"\n variant=\"tertiary\"\n @click=\"${this.toggleCalendar}\"\n ></cre8-button>\n </div>\n ${this.showCalendar\n ? html`<cre8-calendar\n fieldDate=\"${ifDefined(this.value)}\"\n ?hasShortcuts=${this.hasShortcuts}\n @dateSelect=\"${this.handleCalendarSelect}\"\n @outsideClick=\"${this.handleOutsideClick}\"\n ></cre8-calendar>`\n : nothing}\n ${this.fieldNote \|\| this.slotNotEmpty('fieldNote')\n ? html`<cre8-field-note\n id=${this.ariaDescribedBy}\n class=\"cre8-c-date-picker__field-note\"\n ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n >`\n : nothing}\n ${this.renderSuccessErrorFieldNote()}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-date-picker') === undefined) {\n customElements.define('cre8-date-picker', Cre8DatePicker);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-date-picker': Cre8DatePicker;\n }\n}\n\nexport default Cre8DatePicker;\n"]}
1	+ {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../components/date-picker/date-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './date-picker.styles';\nimport './calendar/calendar';\nimport { consume } from '@lit/context';\nimport { Cre8ElementInternals, formInternalsContext } from '../contexts/form-internals-context';\nimport { Cre8Field } from '../field/field';\n\n/*\n The Date Picker component renders a form group with label, control, help text and validation styling much\n * like the Field component but exclusively for type=date.\n * Cre8DatePicker inherits the Cre8Field component.\n \n @slot fieldNote - Container for optional field note content\n /\nexport class Cre8DatePicker extends Cre8Field {\n field!: HTMLInputElement;\n override type: 'text' \| 'email' \| 'number' \| 'url' \| 'tel' \| 'password' \| 'date' = 'date';\n\n @consume({ context: formInternalsContext })\n _internals: Cre8ElementInternals;\n\n /\n The type of the form field.\n * For Date Picker, this is always 'date'.\n /\n static styles = [styles];\n\n @state() showCalendar = false;\n\n /\n Quick Shortcuts Variant\n * @attr {boolean}\n \n /\n @property({ type: Boolean, reflect: true })\n hasShortcuts?: boolean;\n\n /*\n The label text for the date picker field.\n /\n @property()\n label: string;\n\n /\n Handle Date On Input\n * 1) Set the input's value equal to the event.target.value when the input is changed.\n * 2) Set the internal form value of the input to the updated value\n /\n private handleDateOnInput(e: Event) {\n / 1 /\n this.value = (e.target as HTMLInputElement).value;\n\n / 2 */\n this._internals.setFormValue(this.value);\n }\n\n private handleCalendarSelect(e: CustomEvent) {\n this.value = e.detail.date;\n\n this._internals.setFormValue(this.value);\n this.showCalendar = false;\n }\n\n private handleOutsideClick(e: CustomEvent) {\n const calendarIcon = this.renderRoot.querySelector('.cre8-c-date-picker');\n\n if (this.showCalendar && !e.detail.composedPath.includes(calendarIcon)) {\n this.showCalendar = false;\n }\n }\n\n private toggleCalendar() {\n if (!this.disabled && !this.readonly) {\n this.showCalendar = !this.showCalendar;\n }\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-date-picker', {\n 'cre8-is-error': this.isError,\n 'cre8-is-success': this.isSuccess,\n 'cre8-c-date-picker--disabled': this.disabled,\n 'cre8-c-date-picker--read-only': this.readonly,\n });\n\n this.type = 'date';\n\n return html`\n <div class=\"${componentClassNames}\">\n <label class=\"cre8-c-date-picker__label\" for=\"${this.fieldId}\"\n >${this.label}</label\n >\n <div class=\"cre8-c-date-picker__body\">\n <input\n class=\"cre8-c-date-picker__input\"\n autocomplete=${ifDefined(this.autocomplete)}\n type=\"${this.type}\"\n id=\"${this.fieldId}\"\n name=\"${ifDefined(this.name)}\"\n max=${ifDefined(this.max)}\n min=${ifDefined(this.min)}\n .value=\"${this.value ?? ''}\"\n ?readonly=${this.readonly}\n ?required=${this.required}\n ?disabled=\"${this.disabled}\"\n placeholder=\"${ifDefined(this.placeholder)}\"\n @input=${this.handleDateOnInput}\n @click=${this.toggleCalendar}\n />\n <cre8-button\n class=\"cre8-c-date-picker__calendar-icon-button\"\n aria-expanded=\"${this.showCalendar}\"\n text=\"Show Calendar\"\n ?disabled=\"${this.disabled \|\| this.readonly}\"\n ?hideText=${true}\n iconName=\"calendar-datepicker\"\n variant=\"tertiary\"\n @click=\"${this.toggleCalendar}\"\n ></cre8-button>\n </div>\n ${this.showCalendar\n ? html`<cre8-calendar\n fieldDate=\"${ifDefined(this.value)}\"\n ?hasShortcuts=${this.hasShortcuts}\n @dateSelect=\"${this.handleCalendarSelect}\"\n @outsideClick=\"${this.handleOutsideClick}\"\n ></cre8-calendar>`\n : nothing}\n ${this.fieldNote \|\| this.slotNotEmpty('fieldNote')\n ? html`<cre8-field-note\n id=${this.ariaDescribedBy}\n class=\"cre8-c-date-picker__field-note\"\n ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n >`\n : nothing}\n ${this.renderSuccessErrorFieldNote()}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-date-picker') === undefined) {\n customElements.define('cre8-date-picker', Cre8DatePicker);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-date-picker': Cre8DatePicker;\n }\n}\n\nexport default Cre8DatePicker;\n"]}

package/lib/components/dropdown/dropdown.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { Cre8Element } from '../cre8-element';
 /**
  * The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list
+ *
+ * @slot - The `cre8-dropdown-item` children of the menu
  */
 export declare class Cre8Dropdown extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/dropdown/dropdown.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../components/dropdown/dropdown.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C~~;;GAEG~~;AAEH,qBAAa,YAAa,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,4BAAY;IAEhB,IAAI,UAAS;IAExB;;OAEG;IAEC,UAAU,SAAM;IAEpB;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,eAAe,EAAG,WAAW,CAAC;IAElC;;OAEG;IAEC,gBAAgB,UAAS;;IAO7B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,cAAc;IAItB,MAAM;CA0BP;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF;AAED,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../components/dropdown/dropdown.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;GAIG;AAEH,qBAAa,YAAa,SAAQ,WAAW;IACzC,MAAM,CAAC,MAAM,4BAAY;IAEhB,IAAI,UAAS;IAExB;;OAEG;IAEC,UAAU,SAAM;IAEpB;;OAEG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,eAAe,EAAG,WAAW,CAAC;IAElC;;OAEG;IAEC,gBAAgB,UAAS;;IAO7B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,uBAAuB;IAY/B,OAAO,CAAC,cAAc;IAItB,MAAM;CA0BP;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF;AAED,eAAe,YAAY,CAAC"}

package/lib/components/dropdown/dropdown.js CHANGED Viewed

@@ -11,6 +11,8 @@ import { Cre8Element } from '../cre8-element';
 import styles from './dropdown.styles.js';
 /**
  * The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list
+ *
+ * @slot - The `cre8-dropdown-item` children of the menu
  */
 export class Cre8Dropdown extends Cre8Element {
     constructor() {

package/lib/components/dropdown/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../components/dropdown/dropdown.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,YAAY,MAAM,kDAAkD,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C~~;;GAEG~~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","sourcesContent":["import { html, nothing, } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down_Filled.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './dropdown.styles.js';\n\n/*\n The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list\n /\n\nexport class Cre8Dropdown extends Cre8Element {\n static styles = [styles];\n\n @state() open = false;\n\n /\n Dropdown header\n /\n @property({ type: String })\n buttonText = '';\n\n /\n Enables scrolling once content reached to specified height, the height should mention in px units, ex: 100px\n /\n @property()\n maxHeight?: string;\n\n @query('.cre8-c-dropdown')\n dropdownContent!: HTMLElement;\n\n /\n button text represents as a link\n */\n @property()\n dropdownWithLink = false;\n\n constructor() {\n super();\n this._closeDropdown.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this._closeDropdown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this._closeDropdown);\n }\n\n private _toggleDropdown(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n this.open = !this.open;\n if (this.open) {\n this._updateDropdownPosition();\n }\n }\n\n\n private _updateDropdownPosition() {\n if (this.dropdownContent && this.open) {\n if (this.maxHeight) {\n this.dropdownContent.style.maxHeight = this.maxHeight;\n this.dropdownContent.style.overflowY = 'auto';\n }\n if (this.dropdownWithLink) {\n this.dropdownContent.style.top = '85%';\n }\n }\n }\n\n private _closeDropdown() {\n this.open = false;\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-dropdown', {\n 'cre8-c-dropdown--close': !this.open,\n 'cre8-c-dropdown--open': this.open,\n });\n\n return html`\n <div class=\"cre8-c-dropdown-container\">\n ${this.dropdownWithLink\n ? html`<a href=\"#\" aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--link\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n ${this.buttonText\n ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-link\"></cre8-icon>`\n : nothing}\n </a>`\n : html`<button aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--button\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n ${this.buttonText\n ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-button\"></cre8-icon>`\n : nothing}\n </button>`\n}\n <ul role=\"list\" class=\"${componentClassNames}\">\n <slot></slot>\n </ul>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-dropdown') === undefined) {\n customElements.define('cre8-dropdown', Cre8Dropdown);\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-dropdown': Cre8Dropdown;\n }\n}\n\nexport default Cre8Dropdown;\n"]}
1	+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../components/dropdown/dropdown.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,YAAY,MAAM,kDAAkD,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAE1C;;;;GAIG;AAEH,MAAM,OAAO,YAAa,SAAQ,WAAW;IA0B3C;QACI,KAAK,EAAE,CAAC;QAxBD,SAAI,GAAG,KAAK,CAAC;QAExB;;WAEG;QAEC,eAAU,GAAG,EAAE,CAAC;QAWpB;;WAEG;QAEC,qBAAgB,GAAG,KAAK,CAAC;QAIzB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5D,CAAC;IAED,oBAAoB;QAChB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC/D,CAAC;IAEO,eAAe,CAAC,CAAQ;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACnC,CAAC;IACL,CAAC;IAGO,uBAAuB;QAC3B,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACpC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACjB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBACtD,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;YAClD,CAAC;YACD,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACxB,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC;YAC3C,CAAC;QACL,CAAC;IACL,CAAC;IAEO,cAAc;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACtB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,EAAE;YACpE,wBAAwB,EAAE,CAAC,IAAI,CAAC,IAAI;YACpC,uBAAuB,EAAE,IAAI,CAAC,IAAI;SACrC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;QAET,IAAI,CAAC,gBAAgB;YACrB,CAAC,CAAC,IAAI,CAAA,yGAAyG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,aAAa,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,UAAU;UAC9L,IAAI,CAAC,UAAU;gBACjB,CAAC,CAAC,IAAI,CAAA,mBAAmB,YAAY,sEAAsE;gBAC3G,CAAC,CAAC,OAAO;WACN;YACH,CAAC,CAAC,IAAI,CAAA,uGAAuG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,aAAa,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,UAAU;QAC9L,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,YAAY,wEAAwE;gBAC7G,CAAC,CAAC,OAAO;kBAEjB;iCACiC,mBAAmB;;;;KAI/C,CAAC;IACJ,CAAC;;AA3FQ,mBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEhB;IAAR,KAAK,EAAE;0CAAc;AAMpB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACP;AAMhB;IADH,QAAQ,EAAE;+CACY;AAGnB;IADH,KAAK,CAAC,kBAAkB,CAAC;qDACQ;AAM9B;IADH,QAAQ,EAAE;sDACkB;AAuE/B,IAAI,cAAc,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AACzD,CAAC;AAOD,eAAe,YAAY,CAAC","sourcesContent":["import { html, nothing, } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down_Filled.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './dropdown.styles.js';\n\n/*\n The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list\n \n @slot - The `cre8-dropdown-item` children of the menu\n /\n\nexport class Cre8Dropdown extends Cre8Element {\n static styles = [styles];\n\n @state() open = false;\n\n /\n Dropdown header\n /\n @property({ type: String })\n buttonText = '';\n\n /\n Enables scrolling once content reached to specified height, the height should mention in px units, ex: 100px\n /\n @property()\n maxHeight?: string;\n\n @query('.cre8-c-dropdown')\n dropdownContent!: HTMLElement;\n\n /\n button text represents as a link\n */\n @property()\n dropdownWithLink = false;\n\n constructor() {\n super();\n this._closeDropdown.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n document.addEventListener('click', this._closeDropdown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.removeEventListener('click', this._closeDropdown);\n }\n\n private _toggleDropdown(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n this.open = !this.open;\n if (this.open) {\n this._updateDropdownPosition();\n }\n }\n\n\n private _updateDropdownPosition() {\n if (this.dropdownContent && this.open) {\n if (this.maxHeight) {\n this.dropdownContent.style.maxHeight = this.maxHeight;\n this.dropdownContent.style.overflowY = 'auto';\n }\n if (this.dropdownWithLink) {\n this.dropdownContent.style.top = '85%';\n }\n }\n }\n\n private _closeDropdown() {\n this.open = false;\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-dropdown', {\n 'cre8-c-dropdown--close': !this.open,\n 'cre8-c-dropdown--open': this.open,\n });\n\n return html`\n <div class=\"cre8-c-dropdown-container\">\n ${this.dropdownWithLink\n ? html`<a href=\"#\" aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--link\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n ${this.buttonText\n ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-link\"></cre8-icon>`\n : nothing}\n </a>`\n : html`<button aria-haspopup=\"true\" class=\"cre8-c-dropdown--toggle cre8-c-dropdown--button\" aria-expanded=\"${this.open ? 'true' : 'false'}\" @click=\"${this._toggleDropdown}\">${this.buttonText}\n ${this.buttonText\n ? html`<cre8-icon svg='${svgCaretDown}' aria-hidden=\"true\" class=\"cre8-c-dropdown--icon-button\"></cre8-icon>`\n : nothing}\n </button>`\n}\n <ul role=\"list\" class=\"${componentClassNames}\">\n <slot></slot>\n </ul>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-dropdown') === undefined) {\n customElements.define('cre8-dropdown', Cre8Dropdown);\n}\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-dropdown': Cre8Dropdown;\n }\n}\n\nexport default Cre8Dropdown;\n"]}

package/lib/components/dropdown-item/dropdown-item.d.ts CHANGED Viewed

@@ -3,11 +3,19 @@ import { Cre8Element } from '../cre8-element';
  * The Dropdown item component is designed to be used with Dropdown component, each item represents a
  * selectable option or action within the dropdown menu. It can be configured to trigger actions, navigate
  * to links, initiate commands when clicked.
+ *
+ * @slot - The label content for the dropdown item.
+ *
+ * @fires dropdown-item-selected - Fires when the item is clicked. `event.detail.originalEvent` holds the source `MouseEvent`.
  */
 export declare class Cre8DropdownItem extends Cre8Element {
     static styles: import("lit").CSSResult[];
+    /**
+     * The accessible label for the item. Falls back to the item's text content when unset.
+     */
     ariaLabel: string;
     private _handleClick;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/lib/components/dropdown-item/dropdown-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../components/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C~~;;;;GAIG~~;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,4BAAY;~~IAGvB~~,SAAS,SAAM;IAEnB,OAAO,CAAC,YAAY;IAIpB,MAAM;CAOP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AAED,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../components/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;GAQG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,SAAS,SAAM;IAEnB,OAAO,CAAC,YAAY;IAIpB,iBAAiB;IAOjB,MAAM;CAOP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF;AAED,eAAe,gBAAgB,CAAC"}

package/lib/components/dropdown-item/dropdown-item.js CHANGED Viewed

@@ -12,19 +12,32 @@ import styles from './dropdown-item.styles.js';
  * The Dropdown item component is designed to be used with Dropdown component, each item represents a
  * selectable option or action within the dropdown menu. It can be configured to trigger actions, navigate
  * to links, initiate commands when clicked.
+ *
+ * @slot - The label content for the dropdown item.
+ *
+ * @fires dropdown-item-selected - Fires when the item is clicked. `event.detail.originalEvent` holds the source `MouseEvent`.
  */
 export class Cre8DropdownItem extends Cre8Element {
     constructor() {
         super(...arguments);
+        /**
+         * The accessible label for the item. Falls back to the item's text content when unset.
+         */
         this.ariaLabel = '';
     }
     _handleClick(e) {
-        this.dispatchEvent(new Event('dropdown-item-selected', e));
+        this.dispatch({ e, eventName: 'dropdown-item-selected' });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
     }
     render() {
         const componentClassNames = this.componentClassNames('cre8-dropdown-item', {});
         const linkAriaLabel = this.ariaLabel || `Link to ${this.textContent}` || 'Drop down Item';
-        return html `<li class="${componentClassNames}" role="listitem">
+        return html `<li class="${componentClassNames}" role="none">
         <button aria-label="${linkAriaLabel}" @click=${this._handleClick}><slot></slot></button>
       </li>`;
     }

package/lib/components/dropdown-item/dropdown-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../components/dropdown-item/dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C~~;;;;GAIG~~;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAAjD;;~~QAIM~~,cAAS,GAAG,EAAE,CAAC;~~IAarB~~,CAAC;~~IAXS~~,YAAY,CAAC,CAAa;QAC9B,IAAI,CAAC,~~aAAa~~,CAAC,~~IAAI~~,KAAK,CAAC,~~wBAAwB~~,EAAE,CAAC,CAAC,CAAC,CAAC;~~IAC/D~~,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,IAAI,WAAW,IAAI,CAAC,WAAW,EAAE,IAAI,gBAAgB,CAAC;QAC1F,OAAO,IAAI,CAAA,cAAc,mBAAmB;8BACpB,aAAa,YAAY,IAAI,CAAC,YAAY;YAC5D,CAAC;IACX,CAAC;;~~AAfQ~~,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;~~AAGvB~~;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACR;~~AAerB~~,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC;AAClE,CAAC;AAQD,eAAe,gBAAgB,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './dropdown-item.styles.js';\n\n/*\n The Dropdown item component is designed to be used with Dropdown component, each item represents a\n * selectable option or action within the dropdown menu. It can be configured to trigger actions, navigate\n * to links, initiate commands when clicked.\n */\nexport class Cre8DropdownItem extends Cre8Element {\n static styles = [styles];\n\n @property({ type: String })\n ariaLabel = '';\n\n private _handleClick(e: MouseEvent) {\n this.~~dispatchEvent~~(~~new~~ ~~Event(~~'dropdown-item-selected', e));\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-dropdown-item', {});\n const linkAriaLabel = this.ariaLabel \|\| `Link to ${this.textContent}` \|\| 'Drop down Item';\n return html`<li class=\"${componentClassNames}\" role=\"~~listitem~~\">\n <button aria-label=\"${linkAriaLabel}\" @click=${this._handleClick}><slot></slot></button>\n </li>`;\n }\n}\n\nif (customElements.get('cre8-dropdown-item') === undefined) {\n customElements.define('cre8-dropdown-item', Cre8DropdownItem);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-dropdown-item': Cre8DropdownItem;\n }\n}\n\nexport default Cre8DropdownItem;\n"]}
1	+ {"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../../components/dropdown-item/dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,OAAO,gBAAiB,SAAQ,WAAW;IAAjD;;QAGE;;WAEG;QAEC,cAAS,GAAG,EAAE,CAAC;IAoBrB,CAAC;IAlBS,YAAY,CAAC,CAAa;QAC9B,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC1C,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,IAAI,WAAW,IAAI,CAAC,WAAW,EAAE,IAAI,gBAAgB,CAAC;QAC1F,OAAO,IAAI,CAAA,cAAc,mBAAmB;8BACpB,aAAa,YAAY,IAAI,CAAC,YAAY;YAC5D,CAAC;IACX,CAAC;;AAzBQ,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACR;AAsBrB,IAAI,cAAc,CAAC,GAAG,CAAC,oBAAoB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC;AAClE,CAAC;AAQD,eAAe,gBAAgB,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './dropdown-item.styles.js';\n\n/*\n The Dropdown item component is designed to be used with Dropdown component, each item represents a\n * selectable option or action within the dropdown menu. It can be configured to trigger actions, navigate\n * to links, initiate commands when clicked.\n \n @slot - The label content for the dropdown item.\n \n @fires dropdown-item-selected - Fires when the item is clicked. `event.detail.originalEvent` holds the source `MouseEvent`.\n /\nexport class Cre8DropdownItem extends Cre8Element {\n static styles = [styles];\n\n /\n The accessible label for the item. Falls back to the item's text content when unset.\n */\n @property({ type: String })\n ariaLabel = '';\n\n private _handleClick(e: MouseEvent) {\n this.dispatch({ e, eventName: 'dropdown-item-selected' });\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n }\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-dropdown-item', {});\n const linkAriaLabel = this.ariaLabel \|\| `Link to ${this.textContent}` \|\| 'Drop down Item';\n return html`<li class=\"${componentClassNames}\" role=\"none\">\n <button aria-label=\"${linkAriaLabel}\" @click=${this._handleClick}><slot></slot></button>\n </li>`;\n }\n}\n\nif (customElements.get('cre8-dropdown-item') === undefined) {\n customElements.define('cre8-dropdown-item', Cre8DropdownItem);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-dropdown-item': Cre8DropdownItem;\n }\n}\n\nexport default Cre8DropdownItem;\n"]}

package/lib/components/feature/feature.d.ts CHANGED Viewed

@@ -17,6 +17,10 @@ export declare class Cre8Feature extends Cre8Element {
      * 1) Used for dark backgrounds
      */
     inverted?: boolean;
+    /**
+     * CSS aspect-ratio for the image (e.g. "4/3", "16/9", "1"). Defaults to natural image ratio.
+     */
+    aspectRatio?: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/lib/components/feature/feature.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feature.d.ts","sourceRoot":"","sources":["../../../components/feature/feature.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"feature.d.ts","sourceRoot":"","sources":["../../../components/feature/feature.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AACH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IAEC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEzB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}

package/lib/components/feature/feature.js CHANGED Viewed

@@ -23,7 +23,7 @@ export class Cre8Feature extends Cre8Element {
         </div>
         ${this.imgAlt
             ? html `<div class="cre8-c-feature__media">
-              <img class="cre8-c-feature__image" src=${this.imgSrc} alt=${this.imgAlt} part="image" />
+              <img class="cre8-c-feature__image" src=${this.imgSrc} alt=${this.imgAlt} part="image" style=${this.aspectRatio ? `aspect-ratio:${this.aspectRatio};object-fit:cover;width:100%` : ''} />
             </div>`
             : ''}
       </div>
@@ -40,6 +40,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Cre8Feature.prototype, "inverted", void 0);
+__decorate([
+    property()
+], Cre8Feature.prototype, "aspectRatio", void 0);
 if (customElements.get('cre8-feature') === undefined) {
     customElements.define('cre8-feature', Cre8Feature);
 }

package/lib/components/feature/feature.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feature.js","sourceRoot":"","sources":["../../../components/feature/feature.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;~~IAsB1C~~,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE;YACnE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SACrD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;;UAI7B,IAAI,CAAC,MAAM;YACb,CAAC,CAAC,IAAI,CAAA;uDACyC,IAAI,CAAC,MAAM,QAAQ,IAAI,CAAC,MAAM;~~mBAClE~~;YACX,CAAC,CAAC,EAAE;;KAEP,CAAC;IACJ,CAAC;;~~AAtCQ~~,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;2CACS;AAMhB;IADH,QAAQ,EAAE;2CACS;AAOhB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACpB;~~AAsBzB~~,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './feature.styles.js';\n\n/*\n @slot - The component content\n /\nexport class Cre8Feature extends Cre8Element {\n static styles = [styles];\n\n /\n Image source\n /\n @property()\n imgSrc?: string;\n\n /\n Image alt text\n /\n @property()\n imgAlt?: string;\n\n /\n Inverted variant\n * 1) Used for dark backgrounds\n */\n @property({ type: Boolean, reflect: true })\n inverted?: boolean;\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-feature', {\n 'cre8-c-feature--inverted': this.inverted === true,\n });\n\n return html`\n <div class=\"${componentClassNames}\" part=\"feature\">\n <div class=\"cre8-c-feature__body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.imgAlt\n ? html`<div class=\"cre8-c-feature__media\">\n <img class=\"cre8-c-feature__image\" src=${this.imgSrc} alt=${this.imgAlt} part=\"image\" />\n </div>`\n : ''}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-feature') === undefined) {\n customElements.define('cre8-feature', Cre8Feature);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-feature': Cre8Feature;\n }\n}\n\nexport default Cre8Feature;\n"]}
1	+ {"version":3,"file":"feature.js","sourceRoot":"","sources":["../../../components/feature/feature.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IA4B1C,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,EAAE;YACnE,0BAA0B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SACrD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;;UAI7B,IAAI,CAAC,MAAM;YACb,CAAC,CAAC,IAAI,CAAA;uDACyC,IAAI,CAAC,MAAM,QAAQ,IAAI,CAAC,MAAM,uBAAuB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,gBAAgB,IAAI,CAAC,WAAW,8BAA8B,CAAC,CAAC,CAAC,EAAE;mBAC/K;YACX,CAAC,CAAC,EAAE;;KAEP,CAAC;IACJ,CAAC;;AA5CQ,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;2CACS;AAMhB;IADH,QAAQ,EAAE;2CACS;AAOhB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACpB;AAMnB;IADH,QAAQ,EAAE;gDACc;AAsB3B,IAAI,cAAc,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,SAAS,EAAE,CAAC;IACnD,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;AACvD,CAAC;AAQD,eAAe,WAAW,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './feature.styles.js';\n\n/*\n @slot - The component content\n /\nexport class Cre8Feature extends Cre8Element {\n static styles = [styles];\n\n /\n Image source\n /\n @property()\n imgSrc?: string;\n\n /\n Image alt text\n /\n @property()\n imgAlt?: string;\n\n /\n Inverted variant\n * 1) Used for dark backgrounds\n /\n @property({ type: Boolean, reflect: true })\n inverted?: boolean;\n\n /\n CSS aspect-ratio for the image (e.g. \"4/3\", \"16/9\", \"1\"). Defaults to natural image ratio.\n */\n @property()\n aspectRatio?: string;\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-feature', {\n 'cre8-c-feature--inverted': this.inverted === true,\n });\n\n return html`\n <div class=\"${componentClassNames}\" part=\"feature\">\n <div class=\"cre8-c-feature__body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.imgAlt\n ? html`<div class=\"cre8-c-feature__media\">\n <img class=\"cre8-c-feature__image\" src=${this.imgSrc} alt=${this.imgAlt} part=\"image\" style=${this.aspectRatio ? `aspect-ratio:${this.aspectRatio};object-fit:cover;width:100%` : ''} />\n </div>`\n : ''}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-feature') === undefined) {\n customElements.define('cre8-feature', Cre8Feature);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-feature': Cre8Feature;\n }\n}\n\nexport default Cre8Feature;\n"]}

package/lib/components/field/field.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ import '../field-note/field-note';
 /**
  * The Field component renders a form group with label, control, help text and validation styling. There are
  * convenience variants of Field to support HTML5 input types and static content.
+ *
+ * @slot fieldNote - Container for optional field note content
  */
 export declare class Cre8Field extends Cre8FormElement {
     static styles: import("lit").CSSResult[];

package/lib/components/field/field.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../components/field/field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAGlC~~;;;GAGG~~;AACH,qBAAa,SAAU,SAAQ,eAAe;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAG3B;;;;;;;;;;;;;;;;;;;;;OAqBG;IAEC,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,kBAAkB,GAAG,KAAK,GAAG,KAAK,GAAG,eAAe,GAAG,eAAe,GAAG,SAAS,GAAG,aAAa,CAAC;IAEtL;;;;OAIG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;OASG;IAEC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAU;IAErF;;;;OAIG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IAEC,KAAK,EAAE,MAAM,CAAW;IAE5B;;;;OAIG;IAGH;;;;;OAKG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IAEC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAY;IAEhD;;;;OAIG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IAEC,SAAS,EAAE,MAAM,CAAW;IAEhC;;;;OAIG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IAEA,GAAG,CAAC,EAAE,MAAM,CAAC;IAEf;;;MAGE;IAEA,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;OAOG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IAEC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEvC;;;;OAIG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,WAAW,EAAE,MAAM,CAAa;IAEpC;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,KAAK,EAAG,gBAAgB,CAAC;IAE7B;;;OAGG;IACH,YAAY;IAKZ;;OAEG;IACH,cAAc;IAUd;;;;;;;OAOG;IACH,aAAa;IAUb;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAStB;;;;OAIG;IACH,2BAA2B;IA0B3B,MAAM;~~CAsCP~~;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF;AAED,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../components/field/field.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAGlC;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,eAAe;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAG3B;;;;;;;;;;;;;;;;;;;;;OAqBG;IAEC,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,kBAAkB,GAAG,KAAK,GAAG,KAAK,GAAG,eAAe,GAAG,eAAe,GAAG,SAAS,GAAG,aAAa,CAAC;IAEtL;;;;OAIG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;OASG;IAEC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,CAAU;IAErF;;;;OAIG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IAEC,KAAK,EAAE,MAAM,CAAW;IAE5B;;;;OAIG;IAGH;;;;;OAKG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IAEC,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAAY;IAEhD;;;;OAIG;IAEC,eAAe,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,OAAO,CAAC,EAAE,OAAO,CAAC;IAEtB;;;;OAIG;IAEC,SAAS,EAAE,MAAM,CAAW;IAEhC;;;;OAIG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IAEA,GAAG,CAAC,EAAE,MAAM,CAAC;IAEf;;;MAGE;IAEA,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;OAOG;IAEC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;OAIG;IAEC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEvC;;;;OAIG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,WAAW,EAAE,MAAM,CAAa;IAEpC;;;;OAIG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IAEC,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,KAAK,EAAG,gBAAgB,CAAC;IAE7B;;;OAGG;IACH,YAAY;IAKZ;;OAEG;IACH,cAAc;IAUd;;;;;;;OAOG;IACH,aAAa;IAUb;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAStB;;;;OAIG;IACH,2BAA2B;IA0B3B,MAAM;CAuCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF;AAED,eAAe,SAAS,CAAC"}

package/lib/components/field/field.js CHANGED Viewed

@@ -14,6 +14,8 @@ import styles from './field.styles.js';
 /**
  * The Field component renders a form group with label, control, help text and validation styling. There are
  * convenience variants of Field to support HTML5 input types and static content.
+ *
+ * @slot fieldNote - Container for optional field note content
  */
 export class Cre8Field extends Cre8FormElement {
     constructor() {
@@ -147,6 +149,7 @@ export class Cre8Field extends Cre8FormElement {
             autocomplete=${ifDefined(this.autocomplete)}
             type="${this.type}"
             id="${this.fieldId}"
+            name="${ifDefined(this.name)}"
             max=${(this.type === 'date') && ifDefined(this.max).toString()}
             min=${(this.type === 'date') && ifDefined(this.max).toString()}
             maxlength=${ifDefined(this.maxlength)}