@brad-frost-web/eddie-web-components 0.1.0

package/components/text-passage/text-passage.js

@@ -0,0 +1,57 @@
+import { unsafeCSS as s, html as m } from "lit";
+import { property as o } from "lit/decorators.js";
+import { E as d } from "../EdElement.js";
+const g = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}ed-text-passage{font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform)}ed-text-passage h1{font-family:var(--ed-theme-typography-headline-lg-mobile-font-family);font-weight:var(--ed-theme-typography-headline-lg-mobile-font-weight);font-size:var(--ed-theme-typography-headline-lg-mobile-font-size);line-height:var(--ed-theme-typography-headline-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-mobile-text-transform)}@media all and (min-width:48rem){ed-text-passage h1{font-family:var(--ed-theme-typography-headline-lg-font-family);font-weight:var(--ed-theme-typography-headline-lg-font-weight);font-size:var(--ed-theme-typography-headline-lg-font-size);line-height:var(--ed-theme-typography-headline-lg-line-height);letter-spacing:var(--ed-theme-typography-headline-lg-letter-spacing);text-transform:var(--ed-theme-typography-headline-lg-text-transform)}}ed-text-passage h1{margin-bottom:.75rem}ed-text-passage h2{font-family:var(--ed-theme-typography-headline-default-mobile-font-family);font-weight:var(--ed-theme-typography-headline-default-mobile-font-weight);font-size:var(--ed-theme-typography-headline-default-mobile-font-size);line-height:var(--ed-theme-typography-headline-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-mobile-text-transform)}@media all and (min-width:48rem){ed-text-passage h2{font-family:var(--ed-theme-typography-headline-default-font-family);font-weight:var(--ed-theme-typography-headline-default-font-weight);font-size:var(--ed-theme-typography-headline-default-font-size);line-height:var(--ed-theme-typography-headline-default-line-height);letter-spacing:var(--ed-theme-typography-headline-default-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-text-transform)}}ed-text-passage h2{margin-bottom:.75rem}ed-text-passage h3{font-family:var(--ed-theme-typography-headline-sm-mobile-font-family);font-weight:var(--ed-theme-typography-headline-sm-mobile-font-weight);font-size:var(--ed-theme-typography-headline-sm-mobile-font-size);line-height:var(--ed-theme-typography-headline-sm-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-mobile-text-transform)}@media all and (min-width:48rem){ed-text-passage h3{font-family:var(--ed-theme-typography-headline-sm-font-family);font-weight:var(--ed-theme-typography-headline-sm-font-weight);font-size:var(--ed-theme-typography-headline-sm-font-size);line-height:var(--ed-theme-typography-headline-sm-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-text-transform)}}ed-text-passage h3{margin-bottom:.75rem}ed-text-passage h4{font-family:var(--ed-theme-typography-title-lg-mobile-font-family);font-weight:var(--ed-theme-typography-title-lg-mobile-font-weight);font-size:var(--ed-theme-typography-title-lg-mobile-font-size);line-height:var(--ed-theme-typography-title-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-title-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-mobile-text-transform)}@media all and (min-width:48rem){ed-text-passage h4{font-family:var(--ed-theme-typography-title-lg-font-family);font-weight:var(--ed-theme-typography-title-lg-font-weight);font-size:var(--ed-theme-typography-title-lg-font-size);line-height:var(--ed-theme-typography-title-lg-line-height);letter-spacing:var(--ed-theme-typography-title-lg-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-text-transform)}}ed-text-passage h4{margin-bottom:.75rem}ed-text-passage h5{font-family:var(--ed-theme-typography-title-default-font-family);font-weight:var(--ed-theme-typography-title-default-font-weight);font-size:var(--ed-theme-typography-title-default-font-size);line-height:var(--ed-theme-typography-title-default-line-height);letter-spacing:var(--ed-theme-typography-title-default-letter-spacing);text-transform:var(--ed-theme-typography-title-default-text-transform);margin-bottom:.75rem}ed-text-passage h6{font-family:var(--ed-theme-typography-title-sm-font-family);font-weight:var(--ed-theme-typography-title-sm-font-weight);font-size:var(--ed-theme-typography-title-sm-font-size);line-height:var(--ed-theme-typography-title-sm-line-height);letter-spacing:var(--ed-theme-typography-title-sm-letter-spacing);text-transform:var(--ed-theme-typography-title-sm-text-transform);margin-bottom:.75rem}ed-text-passage ul,ed-text-passage ol{margin-top:0}ed-text-passage ul{margin-left:1.25rem;padding-left:0}ed-text-passage ol{margin-left:1.125rem;padding-left:0}ed-text-passage a{color:var(--ed-theme-color-link-default);text-decoration:none}ed-text-passage a:hover,ed-text-passage a:focus{text-decoration:underline;color:var(--ed-theme-color-link-hover)}ed-text-passage p{margin-top:0;margin-bottom:1.5rem}ed-text-passage blockquote{font-style:italic;border-left:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle);color:var(--ed-theme-color-content-subtle);padding-left:1rem;margin-left:0;margin-bottom:1rem}ed-text-passage :last-child{margin-bottom:0}ed-text-passage[size=sm]{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform)}ed-text-passage[size=sm] ul{margin-left:1.125rem;padding-left:0}ed-text-passage[size=sm] ol{margin-left:1rem;padding-left:0}ed-text-passage[size=sm] p{margin-bottom:1rem}ed-text-passage[size=sm] h1{font-family:var(--ed-theme-typography-headline-default-mobile-font-family);font-weight:var(--ed-theme-typography-headline-default-mobile-font-weight);font-size:var(--ed-theme-typography-headline-default-mobile-font-size);line-height:var(--ed-theme-typography-headline-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-mobile-text-transform)}@media all and (min-width:48rem){ed-text-passage[size=sm] h1{font-family:var(--ed-theme-typography-headline-default-font-family);font-weight:var(--ed-theme-typography-headline-default-font-weight);font-size:var(--ed-theme-typography-headline-default-font-size);line-height:var(--ed-theme-typography-headline-default-line-height);letter-spacing:var(--ed-theme-typography-headline-default-letter-spacing);text-transform:var(--ed-theme-typography-headline-default-text-transform)}}ed-text-passage[size=sm] h1{margin-bottom:.75rem}ed-text-passage[size=sm] h2{font-family:var(--ed-theme-typography-headline-sm-mobile-font-family);font-weight:var(--ed-theme-typography-headline-sm-mobile-font-weight);font-size:var(--ed-theme-typography-headline-sm-mobile-font-size);line-height:var(--ed-theme-typography-headline-sm-mobile-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-mobile-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-mobile-text-transform)}@media all and (min-width:48rem){ed-text-passage[size=sm] h2{font-family:var(--ed-theme-typography-headline-sm-font-family);font-weight:var(--ed-theme-typography-headline-sm-font-weight);font-size:var(--ed-theme-typography-headline-sm-font-size);line-height:var(--ed-theme-typography-headline-sm-line-height);letter-spacing:var(--ed-theme-typography-headline-sm-letter-spacing);text-transform:var(--ed-theme-typography-headline-sm-text-transform)}}ed-text-passage[size=sm] h2{margin-bottom:.75rem}ed-text-passage[size=sm] h3{font-family:var(--ed-theme-typography-title-lg-mobile-font-family);font-weight:var(--ed-theme-typography-title-lg-mobile-font-weight);font-size:var(--ed-theme-typography-title-lg-mobile-font-size);line-height:var(--ed-theme-typography-title-lg-mobile-line-height);letter-spacing:var(--ed-theme-typography-title-lg-mobile-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-mobile-text-transform)}@media all and (min-width:48rem){ed-text-passage[size=sm] h3{font-family:var(--ed-theme-typography-title-lg-font-family);font-weight:var(--ed-theme-typography-title-lg-font-weight);font-size:var(--ed-theme-typography-title-lg-font-size);line-height:var(--ed-theme-typography-title-lg-line-height);letter-spacing:var(--ed-theme-typography-title-lg-letter-spacing);text-transform:var(--ed-theme-typography-title-lg-text-transform)}}ed-text-passage[size=sm] h3{margin-bottom:.75rem}ed-text-passage[size=sm] h4{font-family:var(--ed-theme-typography-title-sm-font-family);font-weight:var(--ed-theme-typography-title-sm-font-weight);font-size:var(--ed-theme-typography-title-sm-font-size);line-height:var(--ed-theme-typography-title-sm-line-height);letter-spacing:var(--ed-theme-typography-title-sm-letter-spacing);text-transform:var(--ed-theme-typography-title-sm-text-transform);margin-bottom:.75rem}ed-text-passage[inverted]{color:var(--ed-theme-color-content-knockout)}ed-text-passage[inverted] blockquote{border-left-color:var(--ed-theme-color-border-knockout);color:var(--ed-theme-color-content-knockout)}", p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}";
+var y = Object.defineProperty, l = (r, e, t, f) => {
+  for (var a = void 0, h = r.length - 1, n; h >= 0; h--)
+    (n = r[h]) && (a = n(e, t, a) || a);
+  return a && y(e, t, a), a;
+};
+class i extends d {
+  constructor() {
+    super(...arguments), this.size = void 0;
+  }
+  static get styles() {
+    return s(p);
+  }
+  /**
+   * Add the light dom styles when this component is connected to a page
+   */
+  connectedCallback() {
+    if (super.connectedCallback(), !document.head.querySelector("#ed-text-passage-styles")) {
+      const t = document.createElement("style");
+      t.id = "ed-text-passage-styles", t.innerHTML = g, document.head.appendChild(t);
+    }
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-text-passage", {
+      "ed-c-text-passage--inverted": this.inverted,
+      "ed-c-text-passage--sm": this.size === "sm",
+      "ed-c-text-passage--xs": this.size === "xs"
+    });
+    return this.capLinelength ? m`
+        <div class="${e}">
+          <ed-linelength-container>
+            <slot></slot>
+          </ed-linelength-container>
+        </div>
+      ` : m`
+        <div class="${e}">
+          <slot></slot>
+        </div>
+      `;
+  }
+}
+l([
+  o({ type: Boolean })
+], i.prototype, "inverted");
+l([
+  o()
+], i.prototype, "size");
+l([
+  o({ type: Boolean })
+], i.prototype, "capLinelength");
+customElements.get("ed-text-passage") === void 0 && customElements.define("ed-text-passage", i);
+export {
+  i as EdTextPassage
+};

package/components/textarea-field/textarea-field.d.ts

@@ -0,0 +1,82 @@
+import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/EdFormElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdTextareaField extends EdFormElement {
+    readonly type = "textarea";
+    static get styles(): import('lit').CSSResult;
+    /**
+     * The unique id of the field
+     */
+    fieldId: string;
+    /**
+     * The form field's label
+     */
+    label: string;
+    /**
+     * Checkbox name attribute property
+     */
+    name: string;
+    /**
+     * Fieldnote text
+     */
+    fieldNote?: string;
+    /**
+     * Aria describedby
+     * 1) Used to connect the field note in select field to the select menu for accessibility
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Required attribute
+     */
+    required: boolean;
+    /**
+     * Disabled attribute
+     */
+    disabled?: boolean;
+    /**
+     * Style variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li> **display** applies branded, bolder display form fields</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'display';
+    /**
+     * Columns
+     * 1) Used to initiate the number of columns height the textarea field should be
+     */
+    cols?: number;
+    /**
+     * Inverted variant
+     * 1) Used for dark backgrounds
+     */
+    inverted?: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Error state
+     */
+    isError?: boolean;
+    /**
+     * Success state
+     */
+    isSuccess?: boolean;
+    /**
+     * Field note icon name
+     */
+    iconName?: string;
+    field: HTMLTextAreaElement;
+    connectedCallback(): void;
+    handleInput(event: Event): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-textarea-field': EdTextareaField;
+    }
+}
+//# sourceMappingURL=textarea-field.d.ts.map

package/components/textarea-field/textarea-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-field.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/textarea-field/textarea-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,0BAA0B,CAAC;AAGlC;;GAEG;AACH,qBAAa,eAAgB,SAAQ,aAAa;IAChD,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAW;IAExB;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,KAAK,EAAG,mBAAmB,CAAC;IAE5B,iBAAiB;IAQjB,WAAW,CAAC,KAAK,EAAE,KAAK;IAKxB,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/components/textarea-field/textarea-field.js

@@ -0,0 +1,111 @@
+import { E as f } from "../EdFormElement.js";
+import { unsafeCSS as u, html as n } from "lit";
+import { property as r, query as p } from "lit/decorators.js";
+import { ifDefined as o } from "lit-html/directives/if-defined.js";
+import { n as h } from "../index.browser.js";
+import "../field-note/field-note.js";
+const m = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-textarea-field__label{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);display:block;margin-bottom:.5rem}.ed-c-textarea-field--inverted .ed-c-textarea-field__label{color:var(--ed-theme-color-content-knockout)}.ed-c-textarea-field.ed-is-error .ed-c-textarea-field__label{color:var(--ed-theme-color-content-utility-error)}.ed-c-textarea-field.ed-is-success .ed-c-textarea-field__label{color:var(--ed-theme-color-content-utility-success)}.ed-c-textarea-field__input{-webkit-appearance:none;width:100%;border-width:var(--ed-theme-border-width-sm);border-style:solid;border-color:var(--ed-theme-form-color-border-default);border-radius:var(--ed-theme-border-radius-sm);outline:none;padding:.8125rem .5rem;font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);color:var(--ed-theme-form-color-content-default);background-color:var(--ed-theme-form-color-background-default);transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),background-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),box-shadow var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-textarea-field__input:hover{border-color:var(--ed-theme-color-border-brand);background-color:var(--ed-theme-form-color-background-hover)}.ed-c-textarea-field__input:focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus)}.ed-c-textarea-field__input:not(:placeholder-shown):focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus);background-color:var(--ed-theme-form-color-background-hover)}.ed-is-error .ed-c-textarea-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-error)}.ed-is-success .ed-c-textarea-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-success)}.ed-c-textarea-field__input:active:not(:disabled){border-color:var(--ed-theme-form-color-border)}.ed-c-textarea-field__input:disabled{background-color:var(--ed-theme-color-background-subtle);border-color:var(--ed-theme-color-border-disabled);color:var(--ed-theme-color-content-disabled);cursor:not-allowed}.ed-c-textarea-field__input:disabled~.ed-c-text-field__label,.ed-c-textarea-field__input:disabled:hover~.ed-c-text-field__label,.ed-c-textarea-field__input:disabled::placeholder{color:var(--ed-theme-color-content-disabled)}.ed-c-textarea-field__input:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-textarea-field__input::placeholder{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform);color:var(--ed-theme-color-content-subtle);transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-is-error .ed-c-textarea-field__input::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-textarea-field__input:hover::placeholder{color:var(--ed-theme-color-content-utility-error-hover)}.ed-is-error .ed-c-textarea-field__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-error);background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-textarea-field__input:hover,.ed-is-error .ed-c-textarea-field__input:focus{background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-textarea-field__input:not(:focus){color:var(--ed-theme-color-content-default)}.ed-is-success .ed-c-textarea-field__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-success);background-color:var(--ed-theme-color-background-utility-success)}.ed-is-success .ed-c-textarea-field__input:hover,.ed-is-success .ed-c-textarea-field__input:focus{background-color:var(--ed-theme-color-background-utility-success)}.ed-c-textarea-field__input{width:100%;padding:.5rem}.ed-c-textarea-field--inverted .ed-c-textarea-field__input{border-color:var(--ed-theme-color-border-subtle)}";
+var b = Object.defineProperty, t = (i, a, c, y) => {
+  for (var d = void 0, l = i.length - 1, s; l >= 0; l--)
+    (s = i[l]) && (d = s(a, c, d) || d);
+  return d && b(a, c, d), d;
+};
+class e extends f {
+  constructor() {
+    super(...arguments), this.type = "textarea", this.label = "Label", this.required = !1;
+  }
+  static get styles() {
+    return u(m);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.fieldId = this.fieldId || h(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || h());
+  }
+  handleInput(a) {
+    this.value = a.target.value, this.internals.setFormValue(this.value);
+  }
+  render() {
+    const a = this.componentClassNames("ed-c-textarea-field", {
+      "ed-c-textarea-field--display": this.variant === "display",
+      "ed-c-textarea-field--inverted": this.inverted === !0,
+      "ed-is-error": this.isError,
+      "ed-is-success": this.isSuccess
+    });
+    return n`
+      <div class="${a}">
+        <label class="ed-c-textarea-field__label" for="${this.fieldId}">${this.label}</label>
+        <div class="ed-c-textarea-field__body">
+          <textarea
+            class="ed-c-textarea-field__input"
+            id="${this.fieldId}"
+            cols="${o(this.cols)}"
+            name="${o(this.name)}"
+            value="${o(this.value)}"
+            @input="${this.handleInput}"
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            aria-describedby="${o(this.ariaDescribedBy)}"
+            placeholder="${o(this.placeholder)}"
+          ></textarea>
+        </div>
+        ${this.fieldNote && n`<ed-field-note
+          ?inverted=${this.inverted}
+          id=${o(this.ariaDescribedBy)}
+          iconName=${o(this.iconName)}
+          ?isSuccess=${this.isSuccess}
+          ?isError=${this.isError}
+        >
+          ${this.fieldNote}
+        </ed-field-note>`}
+      </div>
+    `;
+  }
+}
+t([
+  r()
+], e.prototype, "fieldId");
+t([
+  r()
+], e.prototype, "label");
+t([
+  r()
+], e.prototype, "name");
+t([
+  r()
+], e.prototype, "fieldNote");
+t([
+  r()
+], e.prototype, "ariaDescribedBy");
+t([
+  r({ type: Boolean })
+], e.prototype, "required");
+t([
+  r({ type: Boolean })
+], e.prototype, "disabled");
+t([
+  r()
+], e.prototype, "variant");
+t([
+  r({ type: Number })
+], e.prototype, "cols");
+t([
+  r({ type: Boolean })
+], e.prototype, "inverted");
+t([
+  r()
+], e.prototype, "placeholder");
+t([
+  r({ type: Boolean })
+], e.prototype, "isError");
+t([
+  r({ type: Boolean })
+], e.prototype, "isSuccess");
+t([
+  r()
+], e.prototype, "iconName");
+t([
+  p("textarea")
+], e.prototype, "field");
+customElements.get("ed-textarea-field") === void 0 && customElements.define("ed-textarea-field", e);
+export {
+  e as EdTextareaField
+};

package/components/toggle/toggle.d.ts

@@ -0,0 +1,89 @@
+import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/EdFormElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdToggle extends EdFormElement {
+    readonly type = "checkbox";
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Variant
+     * <ul>
+     * <li> **primary** renders a toggle with the brand background color</li>
+     * </ul>
+     */
+    variant?: 'primary';
+    /**
+     * Disabled state
+     * - If true, makes the checkbox within the toggle disabled
+     */
+    disabled?: boolean;
+    /**
+     * Checked state
+     * - If true, sets toggle the checkbox to active
+     * - If false, sets toggle the checkbox to active
+     */
+    checked?: boolean;
+    /**
+     * Aria describedby
+     * 1) Used to connect the field note and errorNote for accessibility
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Field ID
+     * - Links the label to the checkbox
+     * - By default it is autogenerated by nanoid
+     */
+    fieldId?: string;
+    /**
+     * Label
+     * - The text that appears inside the label tag
+     * - This does not display on the front-end, but is used for accessibility
+     */
+    label: string;
+    /**
+     * Name attribute
+     * - The name attribute used on the checkbox
+     */
+    name?: string;
+    /**
+     * Success state
+     */
+    isSuccess?: boolean;
+    /**
+     * Error state
+     */
+    isError?: boolean;
+    /**
+     * Description  for the field
+     */
+    fieldNote?: string;
+    /**
+     * Required attribute
+     */
+    required: boolean;
+    field: HTMLInputElement;
+    protected defaultValue: boolean;
+    /**
+     * Connected callback lifecycle
+     * 1) Autogenerates ids to make this accessible if these properties aren't provided
+     */
+    connectedCallback(): void;
+    private setFormData;
+    formResetCallback(): void;
+    /**
+     * Trigger toggle event
+     */
+    triggerToggleEvent(): void;
+    /**
+     * Handle on keydown events
+     * 1) If the Enter key is pressed, then check the checkbox
+     */
+    handleKeydown(e: KeyboardEvent): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-toggle': EdToggle;
+    }
+}
+//# sourceMappingURL=toggle.d.ts.map

package/components/toggle/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/toggle/toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,0BAA0B,CAAC;AAClC,OAAO,cAAc,CAAC;AAGtB;;GAEG;AACH,qBAAa,QAAS,SAAQ,aAAa;IACzC,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;OAKG;IAEH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;OAIG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IAEH,KAAK,EAAE,MAAM,CAAY;IAEzB;;;OAGG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,QAAQ,UAAS;IAGjB,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;OAGG;IACH,iBAAiB;IAQjB,OAAO,CAAC,WAAW;IAInB,iBAAiB,IAAI,IAAI;IAOzB;;OAEG;IACH,kBAAkB;IASlB;;;OAGG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAM9B,MAAM;CA8CP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/components/toggle/toggle.js

@@ -0,0 +1,132 @@
+import { E as g } from "../EdFormElement.js";
+import { unsafeCSS as p, nothing as m, html as s } from "lit";
+import { property as o, query as b } from "lit/decorators.js";
+import { ifDefined as a } from "lit/directives/if-defined.js";
+import { n as h } from "../index.browser.js";
+import "../field-note/field-note.js";
+import "../icon/icon.js";
+const u = ':root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-toggle{position:relative}.ed-c-toggle__label{position:relative;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width:3rem;height:1.5rem;border-radius:1.5rem;background-color:var(--ed-theme-color-background-brand);overflow:hidden;white-space:nowrap;font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform)}.ed-is-disabled .ed-c-toggle__label{background-color:var(--ed-theme-color-background-subtle)}.ed-c-toggle__label-content{width:0;opacity:0}.ed-c-toggle__label:after{content:"";position:absolute;width:calc(50% - .25rem);height:calc(100% - .25rem);border-radius:50%;background-color:var(--ed-theme-color-background-default);inset-block-start:.125rem;inset-inline-start:.125rem;transition:all var(--ed-theme-animation-move-quick) var(--ed-theme-animation-ease);box-shadow:2px 2px 2px #00000040}.ed-c-toggle__label-text{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-toggle__on,.ed-c-toggle__off{padding:.25rem .5rem;min-width:50%;height:100%;position:relative;display:flex;align-items:center;justify-content:center}.ed-c-toggle__on{display:block;color:var(--ed-theme-color-content-knockout)}.ed-is-checked .ed-c-toggle__on{color:var(--ed-theme-color-content-knockout)}.ed-is-disabled .ed-c-toggle__on,.ed-is-checked.ed-is-disabled .ed-c-toggle__on{color:var(--ed-theme-color-content-disabled)}.ed-c-toggle__checkbox{display:block;width:var(--ed-toggle-width);height:var(--ed-toggle-height);border-radius:var(--ed-toggle-height);border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ed-c-toggle__checkbox:focus,.ed-c-toggle__checkbox:focus-visible{outline:1px solid var(--ed-theme-color-background-knockout);outline-offset:1px}.ed-c-toggle__checkbox:checked+.ed-c-toggle__label{background-color:var(--ed-theme-color-background-brand-knockout)}.ed-is-disabled .ed-c-toggle__checkbox:checked+.ed-c-toggle__label{background-color:var(--ed-theme-color-background-subtle)}.ed-c-toggle__checkbox:checked+.ed-c-toggle__label:after{inset-inline-start:calc(50% + .125rem)}.ed-c-toggle-wrapper{display:flex}.ed-is-disabled{pointer-events:none;cursor:disabled}.ed-c-toggle__asterisk{color:var(--ed-theme-color-border-utility-error);margin-inline-start:.25rem;display:inline-block}.ed-c-toggle__icon{opacity:0;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-toggle__checkbox:checked+.ed-c-toggle__label .ed-c-toggle__icon{opacity:1}';
+var f = Object.defineProperty, t = (l, i, c, _) => {
+  for (var d = void 0, r = l.length - 1, n; r >= 0; r--)
+    (n = l[r]) && (d = n(i, c, d) || d);
+  return d && f(i, c, d), d;
+};
+class e extends g {
+  constructor() {
+    super(...arguments), this.type = "checkbox", this.label = "Toggle", this.required = !1;
+  }
+  static get styles() {
+    return p(u.toString());
+  }
+  /**
+   * Connected callback lifecycle
+   * 1) Autogenerates ids to make this accessible if these properties aren't provided
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.fieldId = this.fieldId || h(), this.setFormData(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || h()), this.defaultValue = this.checked;
+  }
+  setFormData() {
+    this.checked ? this.internals.setFormValue(this.value) : this.internals.setFormValue(null);
+  }
+  formResetCallback() {
+    this.checked = this.defaultValue, this.field.checked = this.defaultValue, this.setFormData(), this.requestUpdate();
+  }
+  /**
+   * Trigger toggle event
+   */
+  triggerToggleEvent() {
+    this.checked = !this.checked, this.dispatch({
+      eventName: "change",
+      detailObj: { checked: this.checked }
+    }), this.setFormData();
+  }
+  /**
+   * Handle on keydown events
+   * 1) If the Enter key is pressed, then check the checkbox
+   */
+  handleKeydown(i) {
+    i.code === "Enter" && this.triggerToggleEvent();
+  }
+  render() {
+    const i = this.componentClassNames("ed-c-toggle", {
+      "ed-is-checked": this.checked === !0,
+      "ed-is-disabled": this.disabled === !0,
+      "ed-is-error": this.isError === !0,
+      "ed-is-success": this.isSuccess === !0
+    });
+    return s`
+      <div class="${i}">
+        <div class="ed-c-toggle-wrapper">
+          <input
+            class="ed-c-toggle__checkbox"
+            type="checkbox"
+            id="${this.fieldId}"
+            name="${a(this.name)}"
+            value="${a(this.value)}"
+            .checked=${this.checked}
+            ?disabled=${this.disabled}
+            @change=${this.triggerToggleEvent}
+            @keydown=${this.handleKeydown}
+          />
+          <label class="ed-c-toggle__label" for=${this.fieldId}>
+            <span class="ed-c-toggle__on">
+              <ed-icon class="ed-c-toggle__icon" name="check"></ed-icon>
+            </span>
+            ${this.slotNotEmpty("off") && s`
+              <span class="ed-c-toggle__off">
+                <slot name="off"></slot>
+              </span>
+            `}
+            <span class="ed-c-toggle__label-text">${this.label}</span>
+          </label>
+          ${this.required ? s`<span class="ed-c-toggle__asterisk">*</span>` : s``}
+        </div>
+        ${this.fieldNote ? s`
+              <ed-field-note ?isSuccess=${this.isSuccess} ?isDisabled=${this.disabled} id=${a(this.ariaDescribedBy)}>
+                <slot name="field-note">${this.fieldNote}</slot>
+              </ed-field-note>
+            ` : m}
+      </div>
+    `;
+  }
+}
+t([
+  o()
+], e.prototype, "variant");
+t([
+  o({ type: Boolean })
+], e.prototype, "disabled");
+t([
+  o({ type: Boolean })
+], e.prototype, "checked");
+t([
+  o()
+], e.prototype, "ariaDescribedBy");
+t([
+  o()
+], e.prototype, "fieldId");
+t([
+  o()
+], e.prototype, "label");
+t([
+  o()
+], e.prototype, "name");
+t([
+  o({ type: Boolean })
+], e.prototype, "isSuccess");
+t([
+  o({ type: Boolean })
+], e.prototype, "isError");
+t([
+  o()
+], e.prototype, "fieldNote");
+t([
+  o({ type: Boolean })
+], e.prototype, "required");
+t([
+  b("input")
+], e.prototype, "field");
+customElements.get("ed-toggle") === void 0 && customElements.define("ed-toggle", e);
+export {
+  e as EdToggle
+};

package/components/toolbar/toolbar.d.ts

@@ -0,0 +1,32 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdToolbar extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Behavioral variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**responsive** renders stacked toolbar containers on small screens to side-by-side containers on large screens</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    behavior?: 'responsive';
+    /**
+     * Horizontal alignment variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li> **center** horizontally centers the content within toolbar</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    align?: 'center';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-toolbar': EdToolbar;
+    }
+}
+//# sourceMappingURL=toolbar.d.ts.map

package/components/toolbar/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/toolbar/toolbar.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;OAOG;IAEH,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB;;;;;;;OAOG;IAEH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,MAAM;CAmBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/components/toolbar/toolbar.js

@@ -0,0 +1,40 @@
+import { unsafeCSS as m, html as a } from "lit";
+import { property as n } from "lit/decorators.js";
+import { E as c } from "../EdElement.js";
+const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-toolbar{display:flex;align-items:center;padding:1rem 0}.ed-c-toolbar--align-center{justify-content:center}@media all and (max-width:48rem){.ed-c-toolbar--responsive{flex-direction:column;align-items:flex-start}}.ed-c-toolbar__left{display:flex;margin:-1rem 1rem 0 -1rem;flex-wrap:wrap}.ed-c-toolbar--align-center .ed-c-toolbar__left{justify-content:center;width:100%}.ed-c-toolbar__right{display:flex;margin:-1rem 0 0 auto}@media all and (max-width:48rem){.ed-c-toolbar--responsive .ed-c-toolbar__right{margin-top:0;margin-left:0}}@media all and (max-width:48rem){.ed-c-toolbar--responsive .ed-c-toolbar__right ::slotted(*){margin-top:1rem;margin-left:0}}::slotted(*){margin-left:1rem;margin-top:1rem}";
+var f = Object.defineProperty, d = (o, t, i, b) => {
+  for (var e = void 0, r = o.length - 1, s; r >= 0; r--)
+    (s = o[r]) && (e = s(t, i, e) || e);
+  return e && f(t, i, e), e;
+};
+class l extends c {
+  static get styles() {
+    return m(p.toString());
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-toolbar", {
+      "ed-c-toolbar--responsive": this.behavior === "responsive",
+      "ed-c-toolbar--align-center": this.align === "center"
+    });
+    return a`
+      <div class="${t}">
+        ${this.slotNotEmpty("left") && a`<div class="ed-c-toolbar__left">
+          <slot name="left"></slot>
+        </div>`}
+        ${this.slotNotEmpty("right") && a`<div class="ed-c-toolbar__right">
+          <slot name="right"></slot>
+        </div>`}
+      </div>
+    `;
+  }
+}
+d([
+  n()
+], l.prototype, "behavior");
+d([
+  n()
+], l.prototype, "align");
+customElements.get("ed-toolbar") === void 0 && customElements.define("ed-toolbar", l);
+export {
+  l as EdToolbar
+};

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdTooltip extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    align?: 'right' | 'bottom' | 'left';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-tooltip': EdTooltip;
+    }
+}
+//# sourceMappingURL=tooltip.d.ts.map

package/components/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,MAAM,KAAK,MAAM,4BAEhB;IAGD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEpC,MAAM;CAeP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/components/tooltip/tooltip.js

@@ -0,0 +1,35 @@
+import { unsafeCSS as l, html as a } from "lit";
+import { property as s } from "lit/decorators.js";
+import { E as p } from "../EdElement.js";
+const c = ':root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-tooltip{display:inline-block;position:relative;overflow:visible}.ed-c-tooltip__content{width:12rem;padding:.5rem;text-align:left;background:var(--ed-theme-color-background-brand);box-shadow:var(--ed-theme-box-shadow-sm);color:var(--ed-tooltip-content-text-color, var(--ed-theme-color-content-knockout));border-radius:var(--ed-theme-border-radius-md)}.ed-c-tooltip__content:after{content:"";display:block;position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--ed-theme-color-background-brand)}.ed-c-tooltip--align-left .ed-c-tooltip__content:after{top:50%;transform:translateY(-50%);left:100%;border-top:6px solid transparent;border-right:none;border-bottom:6px solid transparent;border-left:8px solid var(--ed-theme-color-background-brand)}.ed-c-tooltip--align-bottom .ed-c-tooltip__content:after{top:auto;bottom:100%;border-top:none;border-right:6px solid transparent;border-bottom:8px solid var(--ed-theme-color-background-brand);border-left:6px solid transparent}.ed-c-tooltip--align-right .ed-c-tooltip__content:after{top:50%;transform:translateY(-50%);left:auto;right:100%;border-top:6px solid transparent;border-right:8px solid var(--ed-theme-color-background-brand);border-bottom:6px solid transparent;border-left:none}';
+var b = Object.defineProperty, m = (e, o, n, h) => {
+  for (var t = void 0, r = e.length - 1, d; r >= 0; r--)
+    (d = e[r]) && (t = d(o, n, t) || t);
+  return t && b(o, n, t), t;
+};
+class i extends p {
+  static get styles() {
+    return l(c.toString());
+  }
+  render() {
+    const o = this.componentClassNames("ed-c-tooltip", {
+      "ed-c-tooltip--align-right": this.align === "right",
+      "ed-c-tooltip--align-bottom": this.align === "bottom",
+      "ed-c-tooltip--align-left": this.align === "left"
+    });
+    return a`
+      <div class="${o}">
+        <div class="ed-c-tooltip__content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+m([
+  s()
+], i.prototype, "align");
+customElements.get("ed-tooltip") === void 0 && customElements.define("ed-tooltip", i);
+export {
+  i as EdTooltip
+};