@tmorrow/cre8-wc 1.1.2 → 1.1.4

package/lib/components/select/select.js

@@ -1,103 +1,181 @@
-import { a as f } from "../../icon-D22g8aWB.js";
-import { css as m, html as o, nothing as b } from "lit";
-import { ifDefined as u } from "lit-html/directives/if-defined.js";
-import { property as i, queryAll as y } from "lit/decorators.js";
-import { nanoid as d } from "nanoid";
-import "../field-note/field-note.js";
-import { Cre8FormElement as v } from "../cre8-form-element.js";
-const _ = m`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex;flex-wrap:wrap}.cre8-c-select__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-select__body{position:relative}.cre8-c-select__input{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-select__input:hover:not(:disabled),.cre8-c-select__input:focus:not(:disabled),.cre8-c-select__input:active:not(:disabled),.cre8-c-select__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-select__input:hover:not(:disabled),.cre8-is-error .cre8-c-select__input:focus:not(:disabled),.cre8-is-error .cre8-c-select__input:active:not(:disabled),.cre8-is-error .cre8-c-select__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-select__input:hover:not(:disabled),.cre8-is-success .cre8-c-select__input:focus:not(:disabled),.cre8-is-success .cre8-c-select__input:active:not(:disabled),.cre8-is-success .cre8-c-select__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-select__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-select__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-select__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-select__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-select__input{border-color:var(--cre8-color-border-success)}.cre8-c-select__input{padding-inline-end:2.75rem;cursor:pointer}.cre8-c-select__icons{position:absolute;inset-block-start:50%;transform:translateY(-50%);inset-inline-end:0.5rem;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;pointer-events:none}.cre8-c-select__icon-arrow{margin-right:0.375rem;width:0.75rem;height:0.75rem}.cre8-c-select__field-note,.cre8-c-select__field-note-success,.cre8-c-select__field-note-error{flex-basis:100%}`;
-var g = Object.defineProperty, t = (p, r, s, c) => {
-  for (var a = void 0, l = p.length - 1, h; l >= 0; l--)
-    (h = p[l]) && (a = h(r, s, a) || a);
-  return a && g(r, s, a), a;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const n = class n extends v {
-  constructor() {
-    super(...arguments), this.type = "select", this.items = [], this.label = "Label", this.required = !1;
-  }
-  /**
-   * Initialize aria attributes
+import svgCaretUp from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import { html, nothing, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, queryAll } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import '../field-note/field-note';
+import styles from './select.styles.js';
+import Cre8FormElement from '../cre8-form-element.js';
+/**
+ * The Select control is designed and built to be used for selecting between choices in a form.
+ * It is not a Dropdown control which is generally used for displaying lists of choices
+ * that act as links or actions, like filter options.
+ *
+ * Consider the use of a Select control carefully.
+ * When you have less than 5 options for the user to choose from,
+ * Radio or Checkbox inputs may be a better choice to display all of the options at once.
+ * Users have to slow down to scan a list with more than 15 options,
+ * so using an option group to give the options hierarchy may help users find their choice faster.
+ * Alternately, a text input field might be a more appropriate control to use when there are too many options,
+ * especially when used with typeahead/auto-complete.
+ *
+ * ## How to use
+ * 1. The collapsed default state always shows a default placeholder value or a selected value.
+ * 2. Sort list items in a logical order, such as grouping highly related options together,
+ *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.
+ * 3. A list that includes 6+ items should show a scrollbar.
+ * 4. Users should be able to use a keystroke to quickly jump
+ *    to selecting an option that begins with the entered letter.
+ * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.
+ * 6. Adhere to our common form field conventions and always include a Label,
+ *    provide short and clear error messages in context, avoid using the Read-only
+ *    and Disabled states as much as possible, and utilize the info/formatting tip
+ *    or helpful link rather than placeholder text.
+ *
+ * @slot fieldNote - Container for optional field note content
+ */
+export class Cre8Select extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'select';
+        /**
+         * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:
+         * - Cre8SelectOption
+         *   - label: option label text - `string`
+         *   - value: option value - `number | string`
+         * - Cre8SelectOptionGroup
+         *  - optGroupLabel: optgroup label text - `string`
+         *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`
+         */
+        this.items = [];
+        /**
+         * The required label that appears above the select
+         * @attr {string}
+         */
+        this.label = 'Label';
+        /**
+         * The required attribute on the select
+         * @attr {boolean}
+         */
+        this.required = false;
+    }
+    /**
+     * Initialize aria attributes
+     */
+    _initializeAria() {
+        this.fieldId = this.fieldId || nanoid();
+        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {
+            this.ariaDescribedBy = this.ariaDescribedBy || nanoid();
+        }
+        if (this.successNote || this.errorNote) {
+            this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();
+        }
+    }
+    /**
+     * Aria describedby string based on field notes and error/success notes
+     * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
+     * render both in the input's `aria-describedby` attribute
+     * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
+     * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
+     * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
+     */
+    _fieldNoteAria() {
+        if (this.validationAriaDescribedBy && this.ariaDescribedBy) {
+            return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */
+        }
+        if (this.validationAriaDescribedBy && (!this.ariaDescribedBy)) {
+            return this.validationAriaDescribedBy; /* 2 */
+        }
+        return this.ariaDescribedBy; /* 3 */
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.field.setAttribute('name', this.name ?? '');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    /**
+     * First updatedLifecycle
+     * 1) Get the option in the items array with selected set to true. Set that as the selected item
+     * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the
+     * select the first item value like the native select.
+     */
+    firstUpdated() {
+        super.firstUpdated();
+        [...this._selectOptions].forEach((item) => {
+            if (item.selected === true) {
+                this.selectedItem = item.value; /* 1 */
+            }
+        });
+        this.defaultValue = this.selectedItem ? this.selectedItem : (this._selectOptions[0].value ?? 'Select An Option'); /* 2 */
+        this._setFormData();
+        this._initializeAria();
+        this.updateField();
+    }
+    /**
+   * Set form data
+   * 1) Set the element internals to the selected item value if it exists,
+   *    otherwise the default selected item is the first one
    */
-  _initializeAria() {
-    this.fieldId = this.fieldId || d(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || d()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || d());
-  }
-  /**
-   * Aria describedby string based on field notes and error/success notes
-   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,
-   * render both in the input's `aria-describedby` attribute
-   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as
-   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).
-   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)
-   */
-  _fieldNoteAria() {
-    return this.validationAriaDescribedBy && this.ariaDescribedBy ? `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}` : this.validationAriaDescribedBy && !this.ariaDescribedBy ? this.validationAriaDescribedBy : this.ariaDescribedBy;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.field.setAttribute("name", this.name ?? "");
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  /**
-   * First updatedLifecycle
-   * 1) Get the option in the items array with selected set to true. Set that as the selected item
-   * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the
-   * select the first item value like the native select.
-   */
-  firstUpdated() {
-    super.firstUpdated(), [...this._selectOptions].forEach((r) => {
-      r.selected === !0 && (this.selectedItem = r.value);
-    }), this.defaultValue = this.selectedItem ? this.selectedItem : this._selectOptions[0].value ?? "Select An Option", this._setFormData(), this._initializeAria(), this.updateField();
-  }
-  /**
-  * Set form data
-  * 1) Set the element internals to the selected item value if it exists,
-  *    otherwise the default selected item is the first one
-  */
-  _setFormData() {
-    return this.selectedItem ? this._internals?.setFormValue(this.selectedItem) : this._internals?.setFormValue(this.defaultValue.toString());
-  }
-  /**
-   * Handle On Change
-   * 1. Set the value when the select is changed.
-   * 2. Fire the custom event with the current value.
-   */
-  _handleOnChange(r) {
-    const s = r.target;
-    this.value = s.options[s.selectedIndex].value, this._internals.setFormValue(this.value);
-    const c = new CustomEvent("change", {
-      detail: {
-        name: this.name,
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(c);
-  }
-  /**
-   * Render the select options
-   */
-  _renderSelectOptions() {
-    return this.items.map((r) => {
-      if ("options" in r) {
-        const s = r.options.map((c) => o`
-                  <option value="${c.value}">${c.label}</option>
+    _setFormData() {
+        if (this.selectedItem) {
+            return this._internals?.setFormValue(this.selectedItem);
+        }
+        return this._internals?.setFormValue(this.defaultValue.toString());
+    }
+    /**
+     * Handle On Change
+     * 1. Set the value when the select is changed.
+     * 2. Fire the custom event with the current value.
+     */
+    _handleOnChange(e) {
+        /* 1 */
+        const target = e.target;
+        this.value = target.options[target.selectedIndex].value;
+        this._internals.setFormValue(this.value);
+        /* 2 */
+        const customEvent = new CustomEvent('change', {
+            detail: {
+                name: this.name,
+                value: this.value,
+            },
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(customEvent);
+    }
+    /**
+     * Render the select options
+     */
+    _renderSelectOptions() {
+        return this.items.map((item) => {
+            if ('options' in item) {
+                const selectedGroup = item.options.map((option) => html `
+                  <option value="${option.value}">${option.label}</option>
               `);
-        return o`<optgroup label="${r.optGroupLabel}">
-          ${s}
+                return html `<optgroup label="${item.optGroupLabel}">
+          ${selectedGroup}
         </optgroup>`;
-      }
-      return o`<option value="${r.value}">${r.label}</option>`;
-    });
-  }
-  /**
-   * Render the success or error field notes
-   * 1. If there is a successNote, then return the field note with the success message and state.
-   * 2. If there is a errorNote, then return the field note with the error message and state.
-   */
-  _renderSuccessErrorFieldNote() {
-    return this.successNote ? o`
+            }
+            return html `<option value="${item.value}">${item.label}</option>`;
+        });
+    }
+    /**
+     * Render the success or error field notes
+     * 1. If there is a successNote, then return the field note with the success message and state.
+     * 2. If there is a errorNote, then return the field note with the error message and state.
+     */
+    _renderSuccessErrorFieldNote() {
+        if (this.successNote) {
+            /* 1 */
+            return html `
         <cre8-field-note
           ?isSuccess=${this.isSuccess}
           id=${this.validationAriaDescribedBy}
@@ -105,7 +183,11 @@ const n = class n extends v {
           iconName="success"
         >
           ${this.successNote}
-        </cre8-field-note>` : this.errorNote ? o`
+        </cre8-field-note>`;
+        }
+        if (this.errorNote) {
+            /* 2 */
+            return html `
         <cre8-field-note
           ?isError=${this.isError}
           id=${this.validationAriaDescribedBy}
@@ -113,84 +195,87 @@ const n = class n extends v {
           iconName="error-alt"
         >
           ${this.errorNote}
-        </cre8-field-note>` : null;
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-select", {
-      "cre8-is-error": this.isError,
-      "cre8-is-success": this.isSuccess
-    });
-    return o`
-      <div class="${r}">
+        </cre8-field-note>`;
+        }
+        return null;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-select', {
+            'cre8-is-error': this.isError,
+            'cre8-is-success': this.isSuccess,
+        });
+        return html `
+      <div class="${componentClassNames}">
         <label class="cre8-c-select__label" for="${this.fieldId}">${this.label}</label>
         <div class="cre8-c-select__body">
           <select
             class="cre8-c-select__input"
             id=${this.fieldId}
-            name=${u(this.name)}
+            name=${ifDefined(this.name)}
             ?required=${this.required}
             ?disabled=${this.disabled}
-            aria-describedby="${u(this._fieldNoteAria())}"
+            aria-describedby="${ifDefined(this._fieldNoteAria())}"
             @change=${this._handleOnChange}
           >
             ${this._renderSelectOptions()}
           </select>
           <div class="cre8-c-select__icons">
-            <cre8-icon svg='${f}' rotate="180" class="cre8-c-select__icon-arrow" aria-hidden='true'>
+            <cre8-icon svg='${svgCaretUp}' rotate="180" class="cre8-c-select__icon-arrow" aria-hidden='true'>
           </div>
         </div>
       </div>
-      ${this.fieldNote || this.slotNotEmpty("fieldNote") ? o`
+      ${this.fieldNote || this.slotNotEmpty('fieldNote')
+            ? html `
           <cre8-field-note
             id=${this.ariaDescribedBy}
             class="cre8-c-select__field-note"
-          ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note>` : b}
+          ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note>`
+            : nothing}
       ${this._renderSuccessErrorFieldNote()}
     `;
-  }
-};
-n.styles = [_];
-let e = n;
-t([
-  i({ type: Array })
-], e.prototype, "items");
-t([
-  i()
-], e.prototype, "label");
-t([
-  i()
-], e.prototype, "fieldId");
-t([
-  i()
-], e.prototype, "fieldNote");
-t([
-  i()
-], e.prototype, "ariaDescribedBy");
-t([
-  i()
-], e.prototype, "validationAriaDescribedBy");
-t([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "required");
-t([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-t([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "isError");
-t([
-  i()
-], e.prototype, "errorNote");
-t([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "isSuccess");
-t([
-  i()
-], e.prototype, "successNote");
-t([
-  y("option")
-], e.prototype, "_selectOptions");
-customElements.get("cre8-select") === void 0 && customElements.define("cre8-select", e);
-export {
-  e as Cre8Select
-};
+    }
+}
+Cre8Select.styles = [styles];
+__decorate([
+    property({ type: Array })
+], Cre8Select.prototype, "items", void 0);
+__decorate([
+    property()
+], Cre8Select.prototype, "label", void 0);
+__decorate([
+    property()
+], Cre8Select.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8Select.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8Select.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property()
+], Cre8Select.prototype, "validationAriaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Select.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Select.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Select.prototype, "isError", void 0);
+__decorate([
+    property()
+], Cre8Select.prototype, "errorNote", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Select.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8Select.prototype, "successNote", void 0);
+__decorate([
+    queryAll('option')
+], Cre8Select.prototype, "_selectOptions", void 0);
+if (customElements.get('cre8-select') === undefined) {
+    customElements.define('cre8-select', Cre8Select);
+}
+//# sourceMappingURL=select.js.map

package/lib/components/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":"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","sourcesContent":["import svgCaretUp from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../field-note/field-note';\nimport styles from './select.styles.js';\nimport Cre8FormElement from '../cre8-form-element.js';\n\nexport interface Cre8SelectOption {\n  label: string;\n  value: number | string;\n}\n\nexport interface Cre8SelectOptionGroup {\n  optGroupLabel: string;\n  options: Cre8SelectOption[];\n}\n\n/**\n * The Select control is designed and built to be used for selecting between choices in a form.\n * It is not a Dropdown control which is generally used for displaying lists of choices\n * that act as links or actions, like filter options.\n *\n * Consider the use of a Select control carefully.\n * When you have less than 5 options for the user to choose from,\n * Radio or Checkbox inputs may be a better choice to display all of the options at once.\n * Users have to slow down to scan a list with more than 15 options,\n * so using an option group to give the options hierarchy may help users find their choice faster.\n * Alternately, a text input field might be a more appropriate control to use when there are too many options,\n * especially when used with typeahead/auto-complete.\n *\n * ## How to use\n * 1. The collapsed default state always shows a default placeholder value or a selected value.\n * 2. Sort list items in a logical order, such as grouping highly related options together,\n *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.\n * 3. A list that includes 6+ items should show a scrollbar.\n * 4. Users should be able to use a keystroke to quickly jump\n *    to selecting an option that begins with the entered letter.\n * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.\n * 6. Adhere to our common form field conventions and always include a Label,\n *    provide short and clear error messages in context, avoid using the Read-only\n *    and Disabled states as much as possible, and utilize the info/formatting tip\n *    or helpful link rather than placeholder text.\n *\n * @slot fieldNote - Container for optional field note content\n */\n\nexport class Cre8Select extends Cre8FormElement {\n\n  readonly type = 'select';\n  static styles = [styles];\n\n  /**\n   * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:\n   * - Cre8SelectOption\n   *   - label: option label text - `string`\n   *   - value: option value - `number | string`\n   * - Cre8SelectOptionGroup\n   *  - optGroupLabel: optgroup label text - `string`\n   *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`\n   */\n  @property({ type: Array })\n  items: Array<Cre8SelectOption | Cre8SelectOptionGroup> = [];\n\n  /**\n   * The required label that appears above the select\n   * @attr {string}\n   */\n  @property()\n  label: string = 'Label';\n\n\n  /**\n  * The unique id of the select\n  * @attr {string}\n  */\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\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   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The required attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\n\n  /**\n   * The disabled attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\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   * The error field note that appears below the default field note\n   * @attr {string}\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   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /**\n   * Select input querySelector\n   */\n\n\n\n  /**\n   * Get all select option elements\n   */\n  @queryAll('option')\n  _selectOptions: HTMLOptionsCollection;\n\n\n  /**\n   * Selected item value\n   */\n  private selectedItem: string;\n\n  /**\n   * Initialize aria attributes\n   */\n  private _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  private _fieldNoteAria() {\n    if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n      return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n    }\n    if (this.validationAriaDescribedBy && (!this.ariaDescribedBy)) {\n      return this.validationAriaDescribedBy; /* 2 */\n    }\n    return this.ariaDescribedBy; /* 3 */\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.field.setAttribute('name', this.name ?? '')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n  /**\n   * First updatedLifecycle\n   * 1) Get the option in the items array with selected set to true. Set that as the selected item\n   * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the\n   * select the first item value like the native select.\n   */\n  firstUpdated() {\n    super.firstUpdated();\n    [...this._selectOptions].forEach((item: { selected: boolean; value: string; }) => { /* 1 */\n      if (item.selected === true) {\n        this.selectedItem = item.value; /* 1 */\n      }\n    });\n    this.defaultValue = this.selectedItem ? this.selectedItem : (this._selectOptions[0].value ?? 'Select An Option'); /* 2 */\n    this._setFormData();\n    this._initializeAria();\n    this.updateField();\n  }\n\n  /**\n * Set form data\n * 1) Set the element internals to the selected item value if it exists,\n *    otherwise the default selected item is the first one\n */\n  private _setFormData() {\n    if (this.selectedItem) {\n      return this._internals?.setFormValue(this.selectedItem);\n    }\n    return this._internals?.setFormValue(this.defaultValue.toString());\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.options[target.selectedIndex].value;\n    this._internals.setFormValue(this.value);\n\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   * Render the select options\n   */\n  private _renderSelectOptions() {\n    return this.items.map((item: Cre8SelectOption | Cre8SelectOptionGroup) => {\n      if ('options' in item) {\n        const selectedGroup = item.options.map((option: Cre8SelectOption) => html`\n                  <option value=\"${option.value}\">${option.label}</option>\n              `);\n        return html`<optgroup label=\"${item.optGroupLabel}\">\n          ${selectedGroup}\n        </optgroup>`;\n      }\n      return html`<option value=\"${item.value}\">${item.label}</option>`;\n    });\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  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html`\n        <cre8-field-note\n          ?isSuccess=${this.isSuccess}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-success\"\n          iconName=\"success\"\n        >\n          ${this.successNote}\n        </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html`\n        <cre8-field-note\n          ?isError=${this.isError}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-select__field-note-error\"\n          iconName=\"error-alt\"\n        >\n          ${this.errorNote}\n        </cre8-field-note>`;\n    }\n    return null;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-select', {\n      'cre8-is-error': this.isError,\n      'cre8-is-success': this.isSuccess,\n    });\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-select__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-select__body\">\n          <select\n            class=\"cre8-c-select__input\"\n            id=${this.fieldId}\n            name=${ifDefined(this.name)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n            @change=${this._handleOnChange}\n          >\n            ${this._renderSelectOptions()}\n          </select>\n          <div class=\"cre8-c-select__icons\">\n            <cre8-icon svg='${svgCaretUp}' rotate=\"180\" class=\"cre8-c-select__icon-arrow\" aria-hidden='true'>\n          </div>\n        </div>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`\n          <cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-select__field-note\"\n          ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-select') === undefined) {\n  customElements.define('cre8-select', Cre8Select);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-select': Cre8Select;\n  }\n}\n"]}

package/lib/components/select/select.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex;flex-wrap:wrap}.cre8-c-select__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-select__body{position:relative}.cre8-c-select__input{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-select__input:hover:not(:disabled),.cre8-c-select__input:focus:not(:disabled),.cre8-c-select__input:active:not(:disabled),.cre8-c-select__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-select__input:hover:not(:disabled),.cre8-is-error .cre8-c-select__input:focus:not(:disabled),.cre8-is-error .cre8-c-select__input:active:not(:disabled),.cre8-is-error .cre8-c-select__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-select__input:hover:not(:disabled),.cre8-is-success .cre8-c-select__input:focus:not(:disabled),.cre8-is-success .cre8-c-select__input:active:not(:disabled),.cre8-is-success .cre8-c-select__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-select__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-select__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-select__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-select__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-select__input{border-color:var(--cre8-color-border-success)}.cre8-c-select__input{padding-inline-end:2.75rem;cursor:pointer}.cre8-c-select__icons{position:absolute;inset-block-start:50%;transform:translateY(-50%);inset-inline-end:0.5rem;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;pointer-events:none}.cre8-c-select__icon-arrow{margin-right:0.375rem;width:0.75rem;height:0.75rem}.cre8-c-select__field-note,.cre8-c-select__field-note-success,.cre8-c-select__field-note-error{flex-basis:100%}`;
+export default styles;
+//# sourceMappingURL=select.styles.js.map

package/lib/components/select/select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.js","sourceRoot":"","sources":["../../../components/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,4gKAA4gK,CAAC;AAC/hK,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex;flex-wrap:wrap}.cre8-c-select__label{font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform);display:block;margin-bottom:0.5rem}.cre8-c-select__body{position:relative}.cre8-c-select__input{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform);outline:var(--cre8-border-width-focus) solid rgba(0,0,0,0);outline-offset:0.125rem;-webkit-appearance:none;width:100%;border-width:var(--cre8-border-width-default);border-style:solid;border-color:var(--cre8-color-border-strong);border-radius:var(--cre8-border-radius-default);padding:0.75rem 0.5rem;color:var(--cre8-color-content-default);background-color:var(--cre8-color-bg-default);transition:outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease),color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-select__input:hover:not(:disabled),.cre8-c-select__input:focus:not(:disabled),.cre8-c-select__input:active:not(:disabled),.cre8-c-select__input:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-is-error .cre8-c-select__input:hover:not(:disabled),.cre8-is-error .cre8-c-select__input:focus:not(:disabled),.cre8-is-error .cre8-c-select__input:active:not(:disabled),.cre8-is-error .cre8-c-select__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-select__input:hover:not(:disabled),.cre8-is-success .cre8-c-select__input:focus:not(:disabled),.cre8-is-success .cre8-c-select__input:active:not(:disabled),.cre8-is-success .cre8-c-select__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-select__input:disabled{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);color:var(--cre8-color-content-disabled);cursor:not-allowed}.cre8-c-select__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-select__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-select__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-select__input{border-color:var(--cre8-color-border-success)}.cre8-c-select__input{padding-inline-end:2.75rem;cursor:pointer}.cre8-c-select__icons{position:absolute;inset-block-start:50%;transform:translateY(-50%);inset-inline-end:0.5rem;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;pointer-events:none}.cre8-c-select__icon-arrow{margin-right:0.375rem;width:0.75rem;height:0.75rem}.cre8-c-select__field-note,.cre8-c-select__field-note-success,.cre8-c-select__field-note-error{flex-basis:100%}`;\nexport default styles;\n"]}

package/lib/components/select-tile/select-tile-checkbox-controller.js

@@ -0,0 +1,60 @@
+/**
+ * This Controller handles the special checkbox logic.
+ * This should be a lot simpler than the radio version.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role
+ */
+export class SelectTileCheckboxController {
+    constructor(host) {
+        /**
+         * Handle clicking on the radio button
+         * @see _checkAndFocus
+         */
+        this._clickHandler = (e) => {
+            this._checkAndFocus();
+            e.preventDefault();
+        };
+        /**
+         * Set the element to `checked`
+         * 2) Set us to checked.
+         */
+        this._checkAndFocus = () => {
+            this.host.checked = !this.host.checked;
+            this.host.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.host.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+        /**
+         * Handle keydown
+         */
+        this._handleKeyDown = (e) => {
+            // Enter and Space
+            if (['Enter', ' '].includes(e.key)) {
+                this._handleEnterSpace(e);
+            }
+        };
+        /**
+         * Handle Enter and Space
+         * @see _checkAndFocus
+         */
+        this._handleEnterSpace = (e) => {
+            this._checkAndFocus();
+            e.preventDefault();
+        };
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host._internals.role = 'checkbox';
+        this.host.setAttribute('tabindex', '0');
+        this.host.addEventListener('click', this._clickHandler);
+        this.host.addEventListener('keydown', this._handleKeyDown);
+    }
+    hostDisconnected() {
+        this.host._internals.role = undefined;
+        this.host.removeAttribute('tabindex');
+        this.host.removeEventListener('click', this._clickHandler);
+        this.host.removeEventListener('keydown', this._handleKeyDown);
+    }
+}
+export default SelectTileCheckboxController;
+//# sourceMappingURL=select-tile-checkbox-controller.js.map

package/lib/components/select-tile/select-tile-checkbox-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-checkbox-controller.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile-checkbox-controller.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,MAAM,OAAO,4BAA4B;IAGrC,YAAY,IAAiB;QAqB/B;;;WAGG;QACO,kBAAa,GAAG,CAAC,CAA6B,EAAE,EAAE;YACtD,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC,CAAC;QAEJ;;;WAGG;QACO,mBAAc,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;YACvC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAC/E,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACpE,CAAC,CAAC;QAEJ;;WAEG;QACO,mBAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC9C,kBAAkB;YACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC9B,CAAC;QACL,CAAC,CAAC;QAEJ;;;WAGG;QACO,sBAAiB,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC7C,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC,CAAC;QAxDE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,aAAa;QACT,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAExC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACxD,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC/D,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAEtC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAClE,CAAC;CAuCJ;AAED,eAAe,4BAA4B,CAAC","sourcesContent":["import { ReactiveController } from 'lit';\nimport { Cre8FormElement } from '../cre8-form-element';\n\ntype FormElement = Cre8FormElement & { form: HTMLFormElement, name?: string, checked?: boolean };\n\n\n/**\n * This Controller handles the special checkbox logic.\n * This should be a lot simpler than the radio version.\n *\n * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role\n */\nexport class SelectTileCheckboxController implements ReactiveController {\n    private host: FormElement;\n\n    constructor(host: FormElement) {\n        this.host = host;\n        host.addController(this);\n    }\n\n    hostConnected(): void {\n        this.host._internals.role = 'checkbox';\n        this.host.setAttribute('tabindex', '0');\n\n        this.host.addEventListener('click', this._clickHandler);\n        this.host.addEventListener('keydown', this._handleKeyDown);\n    }\n\n    hostDisconnected(): void {\n        this.host._internals.role = undefined;\n        this.host.removeAttribute('tabindex');\n\n        this.host.removeEventListener('click', this._clickHandler);\n        this.host.removeEventListener('keydown', this._handleKeyDown);\n    }\n\n  /**\n   * Handle clicking on the radio button\n   * @see _checkAndFocus\n   */\n    private _clickHandler = (e: MouseEvent | KeyboardEvent) => {\n        this._checkAndFocus();\n        e.preventDefault();\n    };\n\n  /**\n   * Set the element to `checked`\n   * 2) Set us to checked.\n   */\n    private _checkAndFocus = () => {\n        this.host.checked = !this.host.checked;\n        this.host.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.host.dispatchEvent(new Event('change', { bubbles: true }));\n    };\n\n  /**\n   * Handle keydown\n   */\n    private _handleKeyDown = (e: KeyboardEvent) => {\n    // Enter and Space\n        if (['Enter', ' '].includes(e.key)) {\n            this._handleEnterSpace(e);\n        }\n    };\n\n  /**\n   * Handle Enter and Space\n   * @see _checkAndFocus\n   */\n    private _handleEnterSpace = (e: KeyboardEvent) => {\n        this._checkAndFocus();\n        e.preventDefault();\n    };\n}\n\nexport default SelectTileCheckboxController;\n"]}