@tmorrow/cre8-wc 1.0.26 → 1.1.2

package/lib/components/select/select.js

@@ -1,390 +1,17 @@
-import { a as f } from "../../icon-DImqxDiW.js";
-import { css as b, html as o, nothing as m } from "lit";
-import { ifDefined as h } from "lit-html/directives/if-defined.js";
+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 n } from "nanoid";
+import { nanoid as d } from "nanoid";
 import "../field-note/field-note.js";
 import { Cre8FormElement as v } from "../cre8-form-element.js";
-const g = b`
-/**
- * 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
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-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;
-    }
-  }
-  @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;
-}
-
-/**
- * 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);
-  -webkit-text-decoration: var(--cre8-typography-label-small-text-decoration);
-          text-decoration: var(--cre8-typography-label-small-text-decoration);
-  text-transform: var(--cre8-typography-label-small-text-transform);
-  display: block;
-  margin-bottom: 8px;
-}
-
-/**
- * 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);
-  -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);
-  outline: var(--cre8-border-width-focus) solid transparent;
-  outline-offset: 2px;
-  -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: 12px 8px;
-  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
-   */
-  /**
-   * Disabled styles for default input elements
-   */
-  /**
-   * Placeholder styles for default input elements
-   */
-  /**
-   * Error state for default input elements
-   */
-  /**
-   * Success state for default input elements
-   */
-  padding-inline-end: 44px;
-  cursor: pointer;
-}
-.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: 2px;
-  /**
-   * Error state
-   */
-  /**
-   * Success 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-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;
-  /**
-   * Disabled text colors
-   */
-}
-.cre8-c-select__input:disabled::-moz-placeholder {
-  color: var(--cre8-color-content-disabled);
-}
-.cre8-c-select__input:disabled::placeholder {
-  color: var(--cre8-color-content-disabled);
-}
-.cre8-c-select__input::-moz-placeholder {
-  color: var(--cre8-color-content-subtle);
-}
-.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);
-}
-
-/**
- * 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: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  pointer-events: none;
-}
-
-/**
- * Select Arrow Icon
- */
-.cre8-c-select__icon-arrow {
-  margin-right: 6px;
-  width: 12px;
-  height: 12px;
-}
-
-/**
- * Select field notes
- */
-.cre8-c-select__field-note,
-.cre8-c-select__field-note-success,
-.cre8-c-select__field-note-error {
-  flex-basis: 100%;
-}
-  /* sourceMappingURL=select.module.css.map */
-`;
-var _ = Object.defineProperty, r = (p, t, s, l) => {
-  for (var a = void 0, c = p.length - 1, u; c >= 0; c--)
-    (u = p[c]) && (a = u(t, s, a) || a);
-  return a && _(t, s, a), a;
+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;
 };
-const d = class d extends v {
+const n = class n extends v {
   constructor() {
     super(...arguments), this.type = "select", this.items = [], this.label = "Label", this.required = !1;
   }
@@ -392,7 +19,7 @@ const d = class d extends v {
    * Initialize aria attributes
    */
   _initializeAria() {
-    this.fieldId = this.fieldId || n(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || n()), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || n());
+    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
@@ -418,8 +45,8 @@ const d = class d extends v {
    * select the first item value like the native select.
    */
   firstUpdated() {
-    super.firstUpdated(), [...this._selectOptions].forEach((t) => {
-      t.selected === !0 && (this.selectedItem = t.value);
+    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();
   }
   /**
@@ -435,10 +62,10 @@ const d = class d extends v {
    * 1. Set the value when the select is changed.
    * 2. Fire the custom event with the current value.
    */
-  _handleOnChange(t) {
-    const s = t.target;
+  _handleOnChange(r) {
+    const s = r.target;
     this.value = s.options[s.selectedIndex].value, this._internals.setFormValue(this.value);
-    const l = new CustomEvent("change", {
+    const c = new CustomEvent("change", {
       detail: {
         name: this.name,
         value: this.value
@@ -446,22 +73,22 @@ const d = class d extends v {
       bubbles: !0,
       composed: !0
     });
-    this.dispatchEvent(l);
+    this.dispatchEvent(c);
   }
   /**
    * Render the select options
    */
   _renderSelectOptions() {
-    return this.items.map((t) => {
-      if ("options" in t) {
-        const s = t.options.map((l) => o`
-                  <option value="${l.value}">${l.label}</option>
+    return this.items.map((r) => {
+      if ("options" in r) {
+        const s = r.options.map((c) => o`
+                  <option value="${c.value}">${c.label}</option>
               `);
-        return o`<optgroup label="${t.optGroupLabel}">
+        return o`<optgroup label="${r.optGroupLabel}">
           ${s}
         </optgroup>`;
       }
-      return o`<option value="${t.value}">${t.label}</option>`;
+      return o`<option value="${r.value}">${r.label}</option>`;
     });
   }
   /**
@@ -489,21 +116,21 @@ const d = class d extends v {
         </cre8-field-note>` : null;
   }
   render() {
-    const t = this.componentClassNames("cre8-c-select", {
+    const r = this.componentClassNames("cre8-c-select", {
       "cre8-is-error": this.isError,
       "cre8-is-success": this.isSuccess
     });
     return o`
-      <div class="${t}">
+      <div class="${r}">
         <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=${h(this.name)}
+            name=${u(this.name)}
             ?required=${this.required}
             ?disabled=${this.disabled}
-            aria-describedby="${h(this._fieldNoteAria())}"
+            aria-describedby="${u(this._fieldNoteAria())}"
             @change=${this._handleOnChange}
           >
             ${this._renderSelectOptions()}
@@ -517,50 +144,50 @@ const d = class d extends v {
           <cre8-field-note
             id=${this.ariaDescribedBy}
             class="cre8-c-select__field-note"
-          ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note>` : m}
+          ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note>` : b}
       ${this._renderSuccessErrorFieldNote()}
     `;
   }
 };
-d.styles = [g];
-let e = d;
-r([
+n.styles = [_];
+let e = n;
+t([
   i({ type: Array })
 ], e.prototype, "items");
-r([
+t([
   i()
 ], e.prototype, "label");
-r([
+t([
   i()
 ], e.prototype, "fieldId");
-r([
+t([
   i()
 ], e.prototype, "fieldNote");
-r([
+t([
   i()
 ], e.prototype, "ariaDescribedBy");
-r([
+t([
   i()
 ], e.prototype, "validationAriaDescribedBy");
-r([
+t([
   i({ type: Boolean, reflect: !0 })
 ], e.prototype, "required");
-r([
+t([
   i({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
-r([
+t([
   i({ type: Boolean, reflect: !0 })
 ], e.prototype, "isError");
-r([
+t([
   i()
 ], e.prototype, "errorNote");
-r([
+t([
   i({ type: Boolean, reflect: !0 })
 ], e.prototype, "isSuccess");
-r([
+t([
   i()
 ], e.prototype, "successNote");
-r([
+t([
   y("option")
 ], e.prototype, "_selectOptions");
 customElements.get("cre8-select") === void 0 && customElements.define("cre8-select", e);

package/lib/components/select/select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../components/select/select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAqXX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../components/select/select.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAkhK,CAAC;AAC/hK,eAAe,MAAM,CAAC"}