@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/feature/feature.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}.cre8-c-feature{display:flex;flex-direction:column;align-items:stretch;color:var(--cre8-feature-text-color, var(--cre8-theme-color-core-text, var(--cre8-color-neutral-black)));border-radius:var(--cre8-feature-border-radius, var(--cre8-border-radius-default, 0))}@media all and (min-width: 768px){.cre8-c-feature{flex-direction:row}}.cre8-c-feature--inverted{color:var(--cre8-feature-inverted-text-color, var(--cre8-theme-color-inverted, var(--cre8-color-neutral-white)))}.cre8-c-feature__body{margin-bottom:2rem}@media all and (min-width: 768px){.cre8-c-feature__body{display:flex;flex-direction:column;flex:1;padding-right:2rem;margin-bottom:0}}.cre8-c-feature__media{width:100%}@media all and (min-width: 768px){.cre8-c-feature__media{width:45%}}.cre8-c-feature__image{display:block;width:100%}`;
+export default styles;
+//# sourceMappingURL=feature.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feature.styles.js","sourceRoot":"","sources":["../../../components/feature/feature.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,siFAAsiF,CAAC;AACzjF,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}.cre8-c-feature{display:flex;flex-direction:column;align-items:stretch;color:var(--cre8-feature-text-color, var(--cre8-theme-color-core-text, var(--cre8-color-neutral-black)));border-radius:var(--cre8-feature-border-radius, var(--cre8-border-radius-default, 0))}@media all and (min-width: 768px){.cre8-c-feature{flex-direction:row}}.cre8-c-feature--inverted{color:var(--cre8-feature-inverted-text-color, var(--cre8-theme-color-inverted, var(--cre8-color-neutral-white)))}.cre8-c-feature__body{margin-bottom:2rem}@media all and (min-width: 768px){.cre8-c-feature__body{display:flex;flex-direction:column;flex:1;padding-right:2rem;margin-bottom:0}}.cre8-c-feature__media{width:100%}@media all and (min-width: 768px){.cre8-c-feature__media{width:45%}}.cre8-c-feature__image{display:block;width:100%}`;\nexport default styles;\n"]}

package/lib/components/field/field.js

@@ -1,183 +1,248 @@
-import { css as f, html as l, nothing as u } from "lit";
-import { ifDefined as i } from "lit-html/directives/if-defined.js";
-import { property as t, query as y } from "lit/decorators.js";
-import { nanoid as d } from "nanoid";
-import { Cre8FormElement as m } from "../cre8-form-element.js";
-import "../field-note/field-note.js";
-const b = f`*,::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:block}.cre8-c-field__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-field__body{position:relative}.cre8-c-field__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-field__input:hover:not(:disabled),.cre8-c-field__input:focus:not(:disabled),.cre8-c-field__input:active:not(:disabled),.cre8-c-field__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-field__input:hover:not(:disabled),.cre8-is-error .cre8-c-field__input:focus:not(:disabled),.cre8-is-error .cre8-c-field__input:active:not(:disabled),.cre8-is-error .cre8-c-field__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-field__input:hover:not(:disabled),.cre8-is-success .cre8-c-field__input:focus:not(:disabled),.cre8-is-success .cre8-c-field__input:active:not(:disabled),.cre8-is-success .cre8-c-field__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-field__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-field__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-field__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-field__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-field__input{border-color:var(--cre8-color-border-success)}.cre8-c-field__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`;
-var v = Object.defineProperty, r = (p, o, s, g) => {
-  for (var a = void 0, c = p.length - 1, h; c >= 0; c--)
-    (h = p[c]) && (a = h(o, s, a) || a);
-  return a && v(o, 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 m {
-  constructor() {
-    super(...arguments), this.type = "text", this.label = "Label", this.ariaLive = "polite", this.errorText = "Error", this.successText = "Success";
-  }
-  /**
-   * First update lifecycle hook
-   * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
-   */
-  firstUpdated() {
-    return this.initializeAria(), super.firstUpdated();
-  }
-  /**
-   * Initialize aria attributes
-   */
-  initializeAria() {
-    this.fieldId = this.fieldId || d(), (this.fieldNote || this.slotNotEmpty("fieldNote")) && (this.ariaDescribedBy = this.ariaDescribedBy || `Field_${d()}`), (this.successNote || this.errorNote) && (this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${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;
-  }
-  /**
-   * Handle On Input
-   * 1) Set the input's value equal to the event.target.value when the input is changed.
-   * 2) Set the internal form value of the input to the updated value
-   */
-  _handleOnInput(o) {
-    const s = o.target.value;
-    this.value = s, this._internals.setFormValue(this.value);
-  }
-  /**
-   * 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 ? l` <cre8-field-note
+import { html, nothing, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property, query } from 'lit/decorators.js';
+import { nanoid } from 'nanoid';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../field-note/field-note';
+import styles from './field.styles.js';
+/**
+ * The Field component renders a form group with label, control, help text and validation styling. There are
+ * convenience variants of Field to support HTML5 input types and static content.
+ */
+export class Cre8Field extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Type variants
+         * - **text** renders a standard text input
+         * - **email** renders a text input for an email format
+         * - **number** renders an input for number values only
+         * - **url** renders an input for urls only
+         * - **tel** renders an input for telephone number values only
+         *
+         * @attr {string}
+         */
+        this.type = 'text';
+        /**
+         * The required label that appears above the input
+         *
+         * @attr {string}
+         */
+        this.label = 'Label';
+        /**
+         * Controls how the voiceover will experience the new information when field note changes,
+         * immediately (used for more urgently needed updates) using `assertive` or at the next convenient
+         * pause in their navigation using `polite`.
+         */
+        this.ariaLive = 'polite';
+        /**
+         * Visually hidden text that always signifies that this is an error for screen reader usage
+         *
+         * @attr {string}
+         */
+        this.errorText = 'Error';
+        /**
+         * Visually hidden text that always signifies that this is successful for screen reader usage
+         *
+         * @attr {string}
+         */
+        this.successText = 'Success';
+    }
+    /**
+     * First update lifecycle hook
+     * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement
+     */
+    firstUpdated() {
+        this.initializeAria();
+        return super.firstUpdated();
+    }
+    /**
+     * Initialize aria attributes
+     */
+    initializeAria() {
+        this.fieldId = this.fieldId || nanoid();
+        if (this.fieldNote || this.slotNotEmpty('fieldNote')) {
+            this.ariaDescribedBy = this.ariaDescribedBy || `Field_${nanoid()}`;
+        }
+        if (this.successNote || this.errorNote) {
+            this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${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 */
+    }
+    /**
+     * Handle On Input
+     * 1) Set the input's value equal to the event.target.value when the input is changed.
+     * 2) Set the internal form value of the input to the updated value
+     */
+    _handleOnInput(e) {
+        /* 1 */
+        const inputValue = e.target.value;
+        this.value = inputValue;
+        /* 2 */
+        this._internals.setFormValue(this.value);
+    }
+    /**
+     * 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}
         class="cre8-c-field__field-note-success"
         id=${this.validationAriaDescribedBy}
         iconName="success"
       >
         ${this.successNote}
-      </cre8-field-note>` : this.errorNote ? l` <cre8-field-note
+      </cre8-field-note>`;
+        }
+        if (this.errorNote) {
+            /* 2 */
+            return html ` <cre8-field-note
         ?isError=${this.isError}
         class="cre8-c-field__field-note-error"
         id=${this.validationAriaDescribedBy}
         iconName="error-alt"
       >
         ${this.errorNote}
-      </cre8-field-note>` : null;
-  }
-  render() {
-    const o = this.componentClassNames("cre8-c-field", {
-      "cre8-is-error": this.isError,
-      "cre8-is-success": this.isSuccess
-    });
-    return l`
-      <div class="${o}">
+      </cre8-field-note>`;
+        }
+        return null;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-field', {
+            'cre8-is-error': this.isError,
+            'cre8-is-success': this.isSuccess,
+        });
+        return html `
+      <div class="${componentClassNames}">
         <label class="cre8-c-field__label" for="${this.fieldId}">${this.label}</label>
         <div class="cre8-c-field__body">
           <input
             class="cre8-c-field__input"
-            autocomplete=${i(this.autocomplete)}
+            autocomplete=${ifDefined(this.autocomplete)}
             type="${this.type}"
             id="${this.fieldId}"
-            max=${this.type === "date" && i(this.max).toString()}
-            min=${this.type === "date" && i(this.max).toString()}
-            maxlength=${i(this.maxlength)}
+            max=${(this.type === 'date') && ifDefined(this.max).toString()}
+            min=${(this.type === 'date') && ifDefined(this.max).toString()}
+            maxlength=${ifDefined(this.maxlength)}
             ?readonly=${this.readonly}
             ?required=${this.required}
-            aria-invalid=${this.isError ? "true" : "false"}
+            aria-invalid=${this.isError ? 'true' : 'false'}
             ?disabled="${this.disabled}"
-            pattern=${i(this.pattern)}
-            aria-describedby="${i(this.fieldNoteAria())}"
-            placeholder="${i(this.placeholder)}"
+            pattern=${ifDefined(this.pattern)}
+            aria-describedby="${ifDefined(this.fieldNoteAria())}"
+            placeholder="${ifDefined(this.placeholder)}"
             .value="${this.value}"
             @input=${this._handleOnInput}
           />
         </div>
-        ${this.fieldNote || this.slotNotEmpty("fieldNote") ? l`<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-field__field-note"
+        ${this.fieldNote || this.slotNotEmpty('fieldNote')
+            ? html `<cre8-field-note id=${this.ariaDescribedBy} class="cre8-c-field__field-note"
               ><slot name="fieldNote">${this.fieldNote}</slot></cre8-field-note
-            >` : u}
+            >`
+            : nothing}
         ${this.renderSuccessErrorFieldNote()}
       </div>
     `;
-  }
-};
-n.styles = [b];
-let e = n;
-r([
-  t()
-], e.prototype, "autocomplete");
-r([
-  t()
-], e.prototype, "pattern");
-r([
-  t()
-], e.prototype, "type");
-r([
-  t()
-], e.prototype, "placeholder");
-r([
-  t()
-], e.prototype, "label");
-r([
-  t()
-], e.prototype, "fieldId");
-r([
-  t()
-], e.prototype, "fieldNote");
-r([
-  t()
-], e.prototype, "ariaLive");
-r([
-  t()
-], e.prototype, "ariaDescribedBy");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "required");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "isError");
-r([
-  t()
-], e.prototype, "errorText");
-r([
-  t()
-], e.prototype, "errorNote");
-r([
-  t()
-], e.prototype, "max");
-r([
-  t()
-], e.prototype, "min");
-r([
-  t({ type: Number })
-], e.prototype, "maxlength");
-r([
-  t()
-], e.prototype, "validationAriaDescribedBy");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "isSuccess");
-r([
-  t()
-], e.prototype, "successText");
-r([
-  t({ type: Boolean, reflect: !0 })
-], e.prototype, "readonly");
-r([
-  t()
-], e.prototype, "successNote");
-r([
-  y("input")
-], e.prototype, "field");
-customElements.get("cre8-field") === void 0 && customElements.define("cre8-field", e);
-export {
-  e as Cre8Field,
-  e as default
-};
+    }
+}
+Cre8Field.styles = [styles];
+__decorate([
+    property()
+], Cre8Field.prototype, "autocomplete", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "pattern", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "type", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "label", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "fieldNote", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "ariaLive", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "isError", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "errorText", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "errorNote", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "max", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], Cre8Field.prototype, "maxlength", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "validationAriaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "successText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Field.prototype, "readonly", void 0);
+__decorate([
+    property()
+], Cre8Field.prototype, "successNote", void 0);
+__decorate([
+    query('input')
+], Cre8Field.prototype, "field", void 0);
+if (customElements.get('cre8-field') === undefined) {
+    customElements.define('cre8-field', Cre8Field);
+}
+export default Cre8Field;
+//# sourceMappingURL=field.js.map

package/lib/components/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../components/field/field.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAClC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,eAAe;IAA9C;;QAqCE;;;;;;;;;WASG;QAEC,SAAI,GAAsE,MAAM,CAAC;QAUrF;;;;WAIG;QAEC,UAAK,GAAW,OAAO,CAAC;QA0B5B;;;;WAIG;QAEC,aAAQ,GAA2B,QAAQ,CAAC;QAkChD;;;;WAIG;QAEC,cAAS,GAAW,OAAO,CAAC;QAmDhC;;;;WAIG;QAEC,gBAAW,GAAW,SAAS,CAAC;IAgJtC,CAAC;IA3HC;;;OAGG;IACH,YAAY;QACR,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,OAAO,KAAK,CAAC,YAAY,EAAE,CAAC;IAChC,CAAC;IAED;;OAEG;IACH,cAAc;QACV,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;QACxC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,SAAS,MAAM,EAAE,EAAE,CAAC;QACvE,CAAC;QACD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACrC,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,IAAI,oBAAoB,MAAM,EAAE,EAAE,CAAC;QACtG,CAAC;IACL,CAAC;IAED;;;;;;;OAOG;IACH,aAAa;QACT,IAAI,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzD,OAAO,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC,OAAO;QAC/E,CAAC;QACD,IAAI,IAAI,CAAC,yBAAyB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1D,OAAO,IAAI,CAAC,yBAAyB,CAAC,CAAC,OAAO;QAClD,CAAC;QACD,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO;IACxC,CAAC;IAED;;;;OAIG;IACK,cAAc,CAAC,CAAQ;QAC7B,OAAO;QACL,MAAM,UAAU,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;QAE1B,OAAO;QACL,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC;IAED;;;;OAIG;IACH,2BAA2B;QACvB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,OAAO;YACH,OAAO,IAAI,CAAA;qBACA,IAAI,CAAC,SAAS;;aAEtB,IAAI,CAAC,yBAAyB;;;UAGjC,IAAI,CAAC,WAAW;yBACD,CAAC;QACpB,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACrB,OAAO;YACH,OAAO,IAAI,CAAA;mBACF,IAAI,CAAC,OAAO;;aAElB,IAAI,CAAC,yBAAyB;;;UAGjC,IAAI,CAAC,SAAS;yBACC,CAAC;QACpB,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE;YACjE,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,iBAAiB,EAAE,IAAI,CAAC,SAAS;SACpC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;kDACW,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK;;;;2BAIlD,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC;oBACnC,IAAI,CAAC,IAAI;kBACX,IAAI,CAAC,OAAO;kBACZ,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE;kBACxD,CAAC,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE;wBAClD,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;wBACzB,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;2BACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;yBACjC,IAAI,CAAC,QAAQ;sBAChB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;gCACb,SAAS,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;2BACpC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;sBAChC,IAAI,CAAC,KAAK;qBACX,IAAI,CAAC,cAAc;;;UAG9B,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YAClD,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,eAAe;wCACjB,IAAI,CAAC,SAAS;cACxC;YACN,CAAC,CAAC,OAAO;UACP,IAAI,CAAC,2BAA2B,EAAE;;KAEvC,CAAC;IACJ,CAAC;;AA/UQ,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AA0BvB;IADH,QAAQ,EAAE;+CAC2K;AAQlL;IADH,QAAQ,EAAE;0CACU;AAajB;IADH,QAAQ,EAAE;uCAC0E;AAQjF;IADH,QAAQ,EAAE;8CACc;AAQrB;IADH,QAAQ,EAAE;wCACiB;AAgBxB;IADH,QAAQ,EAAE;0CACU;AAQjB;IADH,QAAQ,EAAE;4CACY;AAQnB;IADH,QAAQ,EAAE;2CACqC;AAQ5C;IADH,QAAQ,EAAE;kDACkB;AAQzB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACrB;AAQlB;IADH,QAAQ,EAAE;4CACqB;AAQ5B;IADH,QAAQ,EAAE;4CACY;AAOnB;IADH,QAAQ,EAAE;sCACM;AAOb;IADH,QAAQ,EAAE;sCACM;AAWb;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACJ;AAQnB;IADH,QAAQ,EAAE;4DAC4B;AAQnC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACnB;AAQpB;IADH,QAAQ,EAAE;8CACyB;AAQhC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACpB;AAQnB;IADH,QAAQ,EAAE;8CACc;AAGrB;IADH,KAAK,CAAC,OAAO,CAAC;wCACc;AA+H/B,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC;AAQD,eAAe,SAAS,CAAC","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, query } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../field-note/field-note';\nimport styles from './field.styles.js';\n\n/**\n * The Field component renders a form group with label, control, help text and validation styling. There are\n * convenience variants of Field to support HTML5 input types and static content.\n */\nexport class Cre8Field extends Cre8FormElement {\n    static styles = [styles];\n    \n\n  /**\n   * Autocomplete attribute that allows input to expect certain types of information. Note: autocomplete is supported\n   * by most browsers, but the suggested 'completions' are also sourced from those browsers. Values come\n   * from past user stored data from past interactions in that browser, such as:\n   *\n   *  1. From past values entered by the user, but they may also come from pre-configured values. For\n   *  instance, a browser might let the user save their name, address, phone number, and email addresses for\n   *  autocomplete purposes.\n   *\n   *  2. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion\n   *  following a an authentication procedure.\n   *  See: [MDN web docs_](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)\n   *\n   *  NOTE:: In order to provide autocompletion, user-agents might require input, select, textarea\n   *  elements to:\n   *\n   *  1. Have a {{name}} and/or {{id}} attribute\n   *  2. Be descendants of a form element\n   *  3. The form to have a [submit button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit)\n   *\n   * @attr {string}\n   */\n  @property()\n      autocomplete?: 'on' | 'off' | 'name' | 'email' | 'username' | 'new-password' | 'current-password' | 'tel' | 'url' | 'address-line1' | 'address-line2' | 'country' | 'postal-code';\n\n  /**\n   * Pattern attribute defines a regular expression to validate against input\n   *\n   * @attr {string}\n   */\n  @property()\n      pattern?: string;\n\n  /**\n   * Type variants\n   * - **text** renders a standard text input\n   * - **email** renders a text input for an email format\n   * - **number** renders an input for number values only\n   * - **url** renders an input for urls only\n   * - **tel** renders an input for telephone number values only\n   *\n   * @attr {string}\n   */\n  @property()\n      type: 'text' | 'email' | 'number' | 'url' | 'tel' | 'password' | 'date' = 'text';\n\n  /**\n   * The placeholder text that appears inside the input\n   *\n   * @attr {string}\n   */\n  @property()\n      placeholder?: string;\n\n  /**\n   * The required label that appears above the input\n   *\n   * @attr {string}\n   */\n  @property()\n      label: string = 'Label';\n\n  /**\n   * The name property on the input\n   *\n   * @attr {string}\n   */\n\n\n  /**\n   * The unique id of the field\n   * <br/><br/> _*This property is dynamically set_\n   *\n   * @attr {string}\n   */\n  @property()\n      fieldId?: string;\n\n  /**\n   * The text that displays below in text field input\n   *\n   * @attr {string}\n   */\n  @property()\n      fieldNote?: string;\n\n  /**\n   * Controls how the voiceover will experience the new information when field note changes,\n   * immediately (used for more urgently needed updates) using `assertive` or at the next convenient\n   * pause in their navigation using `polite`.\n   */\n  @property()\n      ariaLive: 'polite' | 'assertive' = 'polite';\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   *\n   * @attr {string}\n   */\n  @property()\n      ariaDescribedBy?: string;\n\n  /**\n   * The required attribute on the input\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      required?: boolean;\n\n  /**\n   * The disabled attribute on the input\n   *\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   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isError?: boolean;\n\n  /**\n   * Visually hidden text that always signifies that this is an error for screen reader usage\n   *\n   * @attr {string}\n   */\n  @property()\n      errorText: string = 'Error';\n\n  /**\n   * The error field note that appears below the default field note\n   *\n   * @attr {string}\n   */\n  @property()\n      errorNote?: string;\n\n   /**\n    * The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute.\n    * @attr {string | number}\n    */\n  @property()\n      max?: string;\n\n    /**\n    * The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute.\n    * @attr {string | number}\n    */\n  @property()\n      min?: string;\n\n  /**\n   * The maxlength is an integer above 0 that indicates the maximum allowed characters to be entered. When using the\n   * maxlength prop, you must also use the \"required\" prop to provide Constraint Validation on the input field.\n   * This allows users to know why the input they attempted didn't render in the input field. see\n   * [MDN maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength#constraint_validation)\n   *\n   * @attr {string}\n   */\n  @property({ type: Number })\n      maxlength?: number;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   *\n   * @attr {string}\n   */\n  @property()\n      validationAriaDescribedBy?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      isSuccess?: boolean;\n\n  /**\n   * Visually hidden text that always signifies that this is successful for screen reader usage\n   *\n   * @attr {string}\n   */\n  @property()\n      successText: string = 'Success';\n\n  /**\n   * Readonly attribute\n   *\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n      readonly?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   *\n   * @attr {string}\n   */\n  @property()\n      successNote?: string;\n\n  @query('input')\n      field!: HTMLInputElement;\n\n  /**\n   * First update lifecycle hook\n   * 1) super.firstUpdated also uses the firstUpdated from the Cre8FormElement\n   */\n  firstUpdated() {\n      this.initializeAria();\n      return super.firstUpdated();\n  }\n\n  /**\n   * Initialize aria attributes\n   */\n  initializeAria() {\n      this.fieldId = this.fieldId || nanoid();\n      if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n          this.ariaDescribedBy = this.ariaDescribedBy || `Field_${nanoid()}`;\n      }\n      if (this.successNote || this.errorNote) {\n          this.validationAriaDescribedBy = this.validationAriaDescribedBy || `Field_validation_${nanoid()}`;\n      }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  fieldNoteAria() {\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  /**\n   * Handle On Input\n   * 1) Set the input's value equal to the event.target.value when the input is changed.\n   * 2) Set the internal form value of the input to the updated value\n   */\n  private _handleOnInput(e: Event) {\n    /* 1 */\n      const inputValue = (e.target as HTMLInputElement).value;\n      this.value = inputValue;\n\n    /* 2 */\n      this._internals.setFormValue(this.value);\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  renderSuccessErrorFieldNote() {\n      if (this.successNote) {\n      /* 1 */\n          return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        class=\"cre8-c-field__field-note-success\"\n        id=${this.validationAriaDescribedBy}\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n      }\n      if (this.errorNote) {\n      /* 2 */\n          return html` <cre8-field-note\n        ?isError=${this.isError}\n        class=\"cre8-c-field__field-note-error\"\n        id=${this.validationAriaDescribedBy}\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-field', {\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-field__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-field__body\">\n          <input\n            class=\"cre8-c-field__input\"\n            autocomplete=${ifDefined(this.autocomplete)}\n            type=\"${this.type}\"\n            id=\"${this.fieldId}\"\n            max=${(this.type === 'date') && ifDefined(this.max).toString()}\n            min=${(this.type === 'date') && ifDefined(this.max).toString()}\n            maxlength=${ifDefined(this.maxlength)}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            aria-invalid=${this.isError ? 'true' : 'false'}\n            ?disabled=\"${this.disabled}\"\n            pattern=${ifDefined(this.pattern)}\n            aria-describedby=\"${ifDefined(this.fieldNoteAria())}\"\n            placeholder=\"${ifDefined(this.placeholder)}\"\n            .value=\"${this.value}\"\n            @input=${this._handleOnInput}\n          />\n        </div>\n        ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note id=${this.ariaDescribedBy} class=\"cre8-c-field__field-note\"\n              ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note\n            >`\n        : nothing}\n        ${this.renderSuccessErrorFieldNote()}\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-field') === undefined) {\n    customElements.define('cre8-field', Cre8Field);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-field': Cre8Field;\n  }\n}\n\nexport default Cre8Field;\n"]}

package/lib/components/field/field.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:block}.cre8-c-field__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-field__body{position:relative}.cre8-c-field__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-field__input:hover:not(:disabled),.cre8-c-field__input:focus:not(:disabled),.cre8-c-field__input:active:not(:disabled),.cre8-c-field__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-field__input:hover:not(:disabled),.cre8-is-error .cre8-c-field__input:focus:not(:disabled),.cre8-is-error .cre8-c-field__input:active:not(:disabled),.cre8-is-error .cre8-c-field__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-field__input:hover:not(:disabled),.cre8-is-success .cre8-c-field__input:focus:not(:disabled),.cre8-is-success .cre8-c-field__input:active:not(:disabled),.cre8-is-success .cre8-c-field__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-field__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-field__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-field__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-field__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-field__input{border-color:var(--cre8-color-border-success)}.cre8-c-field__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`;
+export default styles;
+//# sourceMappingURL=field.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,yqJAAyqJ,CAAC;AAC5rJ,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:block}.cre8-c-field__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-field__body{position:relative}.cre8-c-field__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-field__input:hover:not(:disabled),.cre8-c-field__input:focus:not(:disabled),.cre8-c-field__input:active:not(:disabled),.cre8-c-field__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-field__input:hover:not(:disabled),.cre8-is-error .cre8-c-field__input:focus:not(:disabled),.cre8-is-error .cre8-c-field__input:active:not(:disabled),.cre8-is-error .cre8-c-field__input:focus-visible{outline-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-field__input:hover:not(:disabled),.cre8-is-success .cre8-c-field__input:focus:not(:disabled),.cre8-is-success .cre8-c-field__input:active:not(:disabled),.cre8-is-success .cre8-c-field__input:focus-visible{outline-color:var(--cre8-color-border-success)}.cre8-c-field__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-field__input:disabled::placeholder{color:var(--cre8-color-content-disabled)}.cre8-c-field__input::placeholder{color:var(--cre8-color-content-subtle)}.cre8-is-error .cre8-c-field__input{border-color:var(--cre8-color-border-error)}.cre8-is-success .cre8-c-field__input{border-color:var(--cre8-color-border-success)}.cre8-c-field__input:read-only{background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled);cursor:default}`;\nexport default styles;\n"]}

package/lib/components/field-note/field-note.js

@@ -1,50 +1,63 @@
-import { b as h } from "../../icon-D22g8aWB.js";
-import { s as m } from "../../Error-aYunUubM.js";
-import { css as p, html as s } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const x = p`*,::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:flex}.cre8-c-field-note{display:flex;align-items:flex-start;gap:0.25rem;color:var(--cre8-color-content-default);margin-top:0.25rem}.cre8-field-note-icon{margin-top:0.25rem;height:1rem;width:1rem}.cre8-c-field-note.cre8-is-error{color:var(--cre8-color-content-error)}.cre8-c-field-note.cre8-is-success{color:var(--cre8-color-content-success)}.cre8-c-field-note--inverted{color:var(--cre8-color-content-knockout)}`;
-var g = Object.defineProperty, a = (l, t, n, u) => {
-  for (var e = void 0, i = l.length - 1, d; i >= 0; i--)
-    (d = l[i]) && (e = d(t, n, e) || e);
-  return e && g(t, n, e), e;
+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 c = class c extends f {
-  /**
-   * Check if there are success or error states and set "aria-live=polite"
-   */
-  fieldNoteAriaLive() {
-    return this.isError || this.isSuccess ? "polite" : null;
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-field-note", {
-      "cre8-is-error": this.isError,
-      "cre8-is-success": this.isSuccess
-    });
-    return s`
+import svgCheckCircle from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Check.svg?raw';
+import svgErrorFilled from '/Users/tylersmbp/Projects/cre8-web-components/packages/cre8-wc/icons/System/Filled/Error.svg?raw';
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import '../icon/icon';
+import styles from './field-note.styles.js';
+/**
+ * Field Note gives direction on how to fill out a form field and to alert users of form errors and successes.
+ * It’s used below an input field and never on its own.
+ * @slot - The note content
+ */
+export class Cre8FieldNote extends Cre8Element {
+    /**
+     * Check if there are success or error states and set "aria-live=polite"
+     */
+    fieldNoteAriaLive() {
+        if (this.isError || this.isSuccess) {
+            return 'polite';
+        }
+        return null;
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-field-note', {
+            'cre8-is-error': this.isError,
+            'cre8-is-success': this.isSuccess,
+        });
+        return html `
         <div
-          aria-live="${this.fieldNoteAriaLive() ?? "off"}"
-          class="${t}">
-        ${this.isError === !0 ? s`<cre8-icon class="cre8-field-note-icon" svg='${m}' aria-hidden="true" ></cre8-icon>` : ""}
-            ${this.isSuccess === !0 ? s`<cre8-icon class="cre8-field-note-icon" svg='${h}' aria-hidden="true"></cre8-icon>` : ""}
+          aria-live="${this.fieldNoteAriaLive() ?? 'off'}"
+          class="${componentClassName}">
+        ${this.isError === true
+            ? html `<cre8-icon class="cre8-field-note-icon" svg='${svgErrorFilled}' aria-hidden="true" ></cre8-icon>`
+            : ''}
+            ${this.isSuccess === true
+            ? html `<cre8-icon class="cre8-field-note-icon" svg='${svgCheckCircle}' aria-hidden="true"></cre8-icon>`
+            : ''}
           <div><slot></slot></div>
         </div>
     `;
-  }
-};
-c.styles = [x];
-let r = c;
-a([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "isError");
-a([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "isSuccess");
-a([
-  o()
-], r.prototype, "iconName");
-customElements.get("cre8-field-note") === void 0 && customElements.define("cre8-field-note", r);
-export {
-  r as Cre8FieldNote,
-  r as default
-};
+    }
+}
+Cre8FieldNote.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FieldNote.prototype, "isError", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FieldNote.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8FieldNote.prototype, "iconName", void 0);
+if (customElements.get('cre8-field-note') === undefined) {
+    customElements.define('cre8-field-note', Cre8FieldNote);
+}
+export default Cre8FieldNote;
+//# sourceMappingURL=field-note.js.map