@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/select/select.js

@@ -1,843 +1,181 @@
-import { css as g, html as o, nothing as h } from "lit";
-import { ifDefined as u } from "lit-html/directives/if-defined.js";
-import { property as i, queryAll as f } from "lit/decorators.js";
-import { nanoid as d } from "nanoid";
-import "../field-note/field-note.js";
-import { C as b } from "../../cre8-form-element-BymRdQUC.js";
-const y = g`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  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);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
+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;
+};
+import svgCaretUp from '@tmorrow/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';
 /**
- * Visually hidden from display
+ * 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
  */
-/*
-=======
-Animations
-=======
-*/
-: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;
+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;
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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();
+        }
     }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+    /**
+     * 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 */
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    connectedCallback() {
+        super.connectedCallback();
+        this.field.setAttribute('name', this.name ?? '');
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    disconnectedCallback() {
+        super.disconnectedCallback();
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * 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();
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    /**
+   * 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() {
+        if (this.selectedItem) {
+            return this._internals?.setFormValue(this.selectedItem);
+        }
+        return this._internals?.setFormValue(this.defaultValue.toString());
     }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
+    /**
+     * 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);
     }
-  }
-}
-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;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*------------------------------------*\\
- #SELECT
-\\*------------------------------------*/
-:host {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-
-/**
- * Select Label
- */
-.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;
-  margin-left: var(--cre8-input-label-margin-left, 0px);
-}
-
-/**
- * Select Body
- * 1) The div that contains the input and icons
- */
-.cre8-c-select__body {
-  position: relative;
-}
-
-/**
- * Select Input
- * 1) The html5 select element
- */
-.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 transparent;
-  outline-offset: 0.125rem;
-  --size-base-unit: .5rem;
-  -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: var(--cre8-input-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);
-  /**
-   * Hover, focus, active, and focus-visible styles for default input elements
-   */
-}
-.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;
-  /**
-   * Error state
-   */
-}
-.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-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 {
-  /**
-   * Success state
-   */
-}
-.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 styles for default input elements
-   */
-}
-.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;
-  /**
-   * Disabled text colors
-   */
-}
-.cre8-c-select__input:disabled::placeholder {
-  color: var(--cre8-color-content-disabled);
-}
-.cre8-c-select__input {
-  /**
-   * Placeholder styles for default input elements
-   */
-}
-.cre8-c-select__input::placeholder {
-  color: var(--cre8-color-content-subtle);
-}
-.cre8-c-select__input {
-  /**
-   * Error state for default input elements
-   */
-}
-.cre8-is-error .cre8-c-select__input {
-  border-color: var(--cre8-color-border-error);
-}
-.cre8-c-select__input {
-  /**
-   * Success state for default input elements
-   */
-}
-.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;
-}
-
-/**
- * Select Icon
- * 1) The icons within the body container positioned absolutely over the input
- */
-.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;
-}
-
-/**
- * Select Arrow Icon
- */
-.cre8-c-select__icon-arrow {
-  margin-right: 0.375rem;
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-/**
- * Select field notes
- */
-.cre8-c-select__field-note,
-.cre8-c-select__field-note-success,
-.cre8-c-select__field-note-error {
-  flex-basis: 100%;
-}`;
-var v = Object.defineProperty, r = (p, t, a, s) => {
-  for (var n = void 0, l = p.length - 1, m; l >= 0; l--)
-    (m = p[l]) && (n = m(t, a, n) || n);
-  return n && v(t, a, n), n;
-};
-const x = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7867 12.1506C15.7192 12.2183 15.639 12.2719 15.5507 12.3085C15.4624 12.3451 15.3678 12.3639 15.2722 12.3639C15.1766 12.3639 15.082 12.3451 14.9937 12.3085C14.9054 12.2719 14.8252 12.2183 14.7577 12.1506L7.99992 5.39197L1.24215 12.1506C1.10569 12.2871 0.920613 12.3638 0.727633 12.3638C0.534652 12.3638 0.349576 12.2871 0.213119 12.1506C0.076661 12.0142 3.8041e-09 11.8291 0 11.6361C-3.8041e-09 11.4432 0.076661 11.2581 0.213119 11.1216L7.4854 3.84933C7.55294 3.78172 7.63315 3.72808 7.72143 3.69148C7.80972 3.65488 7.90435 3.63605 7.99992 3.63605C8.09548 3.63605 8.19012 3.65488 8.2784 3.69148C8.36668 3.72808 8.44689 3.78172 8.51443 3.84933L15.7867 11.1216C15.8543 11.1892 15.908 11.2694 15.9446 11.3576C15.9812 11.4459 16 11.5406 16 11.6361C16 11.7317 15.9812 11.8263 15.9446 11.9146C15.908 12.0029 15.8543 12.0831 15.7867 12.1506Z"/>
-</svg>
-`, c = class c extends b {
-  constructor() {
-    super(...arguments), this.type = "select", this.items = [], this.label = "Label", this.required = !1;
-  }
-  /**
-   * Initialize aria attributes
-   */
-  _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((t) => {
-      t.selected === !0 && (this.selectedItem = t.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(t) {
-    const a = t.target;
-    this.value = a.options[a.selectedIndex].value, this._internals.setFormValue(this.value);
-    const s = new CustomEvent("change", {
-      detail: {
-        name: this.name,
-        value: this.value
-      },
-      bubbles: !0,
-      composed: !0
-    });
-    this.dispatchEvent(s);
-  }
-  /**
-   * Render the select options
-   */
-  _renderSelectOptions() {
-    return this.items.map((t) => {
-      if ("options" in t) {
-        const a = t.options.map((s) => o`
-                  <option value="${s.value}">${s.label}</option>
+    /**
+     * 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="${t.optGroupLabel}">
-          ${a}
+                return html `<optgroup label="${item.optGroupLabel}">
+          ${selectedGroup}
         </optgroup>`;
-      }
-      return o`<option value="${t.value}">${t.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}
@@ -845,7 +183,11 @@ const x = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
           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}
@@ -853,84 +195,87 @@ const x = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
           iconName="error-alt"
         >
           ${this.errorNote}
-        </cre8-field-note>` : null;
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-select", {
-      "cre8-is-error": this.isError,
-      "cre8-is-success": this.isSuccess
-    });
-    return o`
-      <div class="${t}">
+        </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='${x}' 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>` : h}
+          ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note>`
+            : nothing}
       ${this._renderSuccessErrorFieldNote()}
     `;
-  }
-};
-c.styles = [y];
-let e = c;
-r([
-  i({ type: Array })
-], e.prototype, "items");
-r([
-  i()
-], e.prototype, "label");
-r([
-  i()
-], e.prototype, "fieldId");
-r([
-  i()
-], e.prototype, "fieldNote");
-r([
-  i()
-], e.prototype, "ariaDescribedBy");
-r([
-  i()
-], e.prototype, "validationAriaDescribedBy");
-r([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "required");
-r([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-r([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "isError");
-r([
-  i()
-], e.prototype, "errorNote");
-r([
-  i({ type: Boolean, reflect: !0 })
-], e.prototype, "isSuccess");
-r([
-  i()
-], e.prototype, "successNote");
-r([
-  f("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