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

package/components/tabs/tabs.js

@@ -0,0 +1,184 @@
+import { E as b } from "../EdElement.js";
+import u from "classnames";
+import { unsafeCSS as m, html as n } from "lit";
+import { property as l, state as c } from "lit/decorators.js";
+import { n as v } from "../index.browser.js";
+import "../tab/tab.js";
+const f = ':root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-tabs__header{position:relative;display:flex;flex-direction:column;overflow:hidden}.ed-c-tabs:not(.ed-is-start) .ed-c-tabs__header:before{content:"";display:block;position:absolute;pointer-events:none;background:linear-gradient(to right,var(--ed-tabs-header-before-background, var(--ed-theme-color-inverted)),rgba(255,255,255,.001) 30%);height:100%;top:0;left:0;width:3rem;z-index:1}.ed-c-tabs:not(.ed-is-end) .ed-c-tabs__header:after{content:"";display:block;position:absolute;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,.001) 30%,var(--ed-tabs-header-after-background, var(--ed-theme-color-inverted)));height:100%;top:0;right:0;width:3rem;z-index:1}.ed-c-tabs--inverted.ed-c-tabs:not(.ed-is-start) .ed-c-tabs__header:before{background:linear-gradient(to right,var(--ed-tabs-inverted-header-before-background, var(--ed-theme-color-neutral-dark)),rgba(255,255,255,.001) 30%)}.ed-c-tabs--inverted.ed-c-tabs:not(.ed-is-end) .ed-c-tabs__header:after{background:linear-gradient(to right,rgba(255,255,255,.001) 30%,var(--ed-tabs-inverted-header-after-background, var(--ed-theme-color-neutral-dark)))}@media all and (min-width:48rem){.ed-c-tabs__header{flex-direction:row;align-items:baseline}}.ed-c-tabs__list{display:flex;overflow:auto;width:100%;margin:0;padding:0 0 1rem;position:relative;order:2}.ed-c-tabs--inverted .ed-c-tabs__list{background:var(--ed-tabs-inverted-list-background, var(--ed-theme-color-core-text))}@media all and (min-width:48rem){.ed-c-tabs--align-center .ed-c-tabs__list{justify-content:center}}@media all and (min-width:48rem){.ed-c-tabs--align-right .ed-c-tabs__list{justify-content:flex-end}}@media all and (min-width:48rem){.ed-c-tabs__list{order:1}}.ed-c-tabs__after{order:1;margin-bottom:1rem}@media all and (min-width:48rem){.ed-c-tabs__after{order:2;margin-left:1rem}}.ed-c-tabs__item{display:block;margin:0;flex-shrink:0}.ed-c-tabs__button{display:block;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);-webkit-appearance:none;appearance:none;border:none;padding:.5rem;cursor:pointer;color:var(--ed-theme-color-content-default);text-decoration:none;background:none;transition:background var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-tabs__button:hover,.ed-c-tabs__button *:focus{background:var(--ed-theme-color-background-subtle)}.ed-c-tabs--inverted .ed-c-tabs__button{color:var(--ed-theme-color-content-knockout)}.ed-c-tabs--inverted .ed-c-tabs__button:hover,.ed-c-tabs--inverted .ed-c-tabs__button *:focus{background:var(--ed-theme-color-background-brand)}.ed-c-tabs__item.ed-is-active .ed-c-tabs__button{background:var(--ed-theme-color-background-brand);color:var(--ed-theme-color-content-knockout)}.ed-c-tabs__body{text-align:left}';
+var p = Object.defineProperty, o = (d, t, e, r) => {
+  for (var a = void 0, i = d.length - 1, h; i >= 0; i--)
+    (h = d[i]) && (a = h(t, e, a) || a);
+  return a && p(t, e, a), a;
+};
+class s extends b {
+  /**
+   * Initialize
+   * 1) Activate the first tab, by default
+   */
+  constructor() {
+    super(), this.inverted = !1, this.isStart = !0, this.isEnd = !1, this.onScroll = this.onScroll.bind(this), this.onResize = this.onResize.bind(this), this.setIsStart = this.setIsStart.bind(this), this.setIsEnd = this.setIsEnd.bind(this);
+  }
+  static get styles() {
+    return m(f);
+  }
+  /**
+   * A handler to select a new active tab
+   * 1) If tabItem doesn't exist, return
+   * 2) On tab select, remove hidden attribute from selected tab
+   * 3) Hide other tabs
+   * 4) Set the active tab to the tab item selected
+   * 5) Focus on the active tab panel of content
+   */
+  activateTab(t, e = !1, r) {
+    if (r && r.preventDefault(), !t)
+      return;
+    [...this.querySelectorAll(":scope > ed-tab")].forEach((i) => {
+      i === t ? (i.removeAttribute("aria-hidden"), i.style.removeProperty("--ed-tab-hidden")) : (i.setAttribute("aria-hidden", ""), i.style.setProperty("--ed-tab-hidden", "none"));
+    }), this.activeTab = t, e && t.focus();
+  }
+  /**
+   * A handler to proxy key presses on a tabitem
+   * 1) Use left and right arrows to select previous/next item
+   */
+  async handleKeyUp(t) {
+    const e = t.code;
+    if (e === "ArrowLeft" || e === "ArrowUp") {
+      const a = this.activeTab?.previousElementSibling;
+      this.activateTab(a, !0, void 0);
+    } else if (e === "ArrowRight" || e === "ArrowDown") {
+      const a = this.activeTab?.nextElementSibling;
+      this.activateTab(a, !0, void 0);
+    }
+    await this.updateComplete;
+    const r = this.shadowRoot?.querySelector(".ed-c-tabs__item.ed-is-active .ed-c-tabs__button");
+    r && r.focus();
+  }
+  /**
+   * Check if last overflow list item is in the viewport
+   * 1) Get children of the overflow list inner container and get bounding client rectangle of last child
+   * 2) Return true if the left property is greater than or equal to 0 and if the right property is less
+   * than or equal to the window inner width or document client width
+   */
+  isInViewport() {
+    const t = this.shadowRoot.querySelector(".ed-c-tabs__list").children, e = t[t.length - 1].querySelector(":first-child").getBoundingClientRect();
+    return e.left >= 0 && e.right <= (globalThis.innerWidth || document.documentElement.clientWidth);
+  }
+  /**
+   * On overflow list inner scroll
+   * 1) On scroll, if position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+   * 2) On scroll, If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+   */
+  onScroll() {
+    this.setIsStart(), this.setIsEnd();
+  }
+  /**
+   * Set isStart state
+   * 1) If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+   */
+  setIsStart() {
+    this.shadowRoot.querySelector(".ed-c-tabs__list").scrollLeft > 0 ? this.isStart = !1 : this.isStart = !0;
+  }
+  /**
+   * Set isEnd state
+   * 1) If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+   */
+  setIsEnd() {
+    this.isInViewport() === !0 ? this.isEnd = !0 : this.isEnd = !1;
+  }
+  onResize() {
+    this.setIsStart(), this.setIsEnd();
+  }
+  /**
+   * Initialize tabs
+   * 1) Set the active tab if activeIndex is defined. Otherwise, set the first tab as active by default
+   * 2) Auto set the `aria-labelledby` prop for accessible tabs if user doesn't define the `ariaLabelledBy` prop
+   */
+  connectedCallback() {
+    super.connectedCallback(), setTimeout(() => {
+      this.setIsStart(), this.setIsEnd();
+    }, 1), globalThis.addEventListener("resize", this.onResize);
+    const t = this.querySelectorAll("ed-tab");
+    this.activeIndex ? this.activateTab(t[this.activeIndex], !1, void 0) : this.activateTab(this.querySelector("ed-tab"), !1, void 0), [...t].map((e) => {
+      e.ariaLabelledBy = e.ariaLabelledBy || v();
+    });
+  }
+  /**
+   * Disconnected callback lifecycle
+   * 1) Remove window resize event listener
+   */
+  disconnectedCallback() {
+    globalThis.removeEventListener("resize", this.onResize), super.disconnectedCallback();
+  }
+  /**
+   * A render block for the tab list items
+   * 1) For all tab items, render a list item with a trigger inside
+   */
+  renderTabListItems() {
+    return [...this.querySelectorAll("ed-tab")].map((e) => n`<li
+        class=${u("ed-c-tabs__item", {
+      "ed-is-active": e === this.activeTab
+    })}
+        role="presentation"
+      >
+        <a
+          class="ed-c-tabs__button"
+          @keyup=${(r) => this.handleKeyUp(r)}
+          @click=${(r) => this.activateTab(e, !0, r)}
+          tabindex=${e === this.activeTab ? 0 : -1}
+          id=${e.ariaLabelledBy}
+          href=${"#" + e.href}
+          role="tab"
+          aria-selected=${e === this.activeTab}
+          aria-controls=${e.href}
+        >
+          ${e.label}
+        </a>
+      </li>`);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-tabs", {
+      "ed-c-tabs--inverted": this.inverted === !0,
+      "ed-c-tabs--align-center": this.align === "center",
+      "ed-c-tabs--align-right": this.align === "right",
+      "ed-is-start": this.isStart === !0,
+      "ed-is-end": this.isEnd === !0
+    });
+    return n`
+      <div class="${t}">
+        <header class="ed-c-tabs__header">
+          <ul class="ed-c-tabs__list" role="tablist" @scroll=${this.onScroll}>
+            ${this.renderTabListItems()}
+          </ul>
+          ${this.slotNotEmpty("tabsAfter") && n`<div class="ed-c-tabs__after">
+            <slot name="tabsAfter"></slot>
+          </div>`}
+        </header>
+        <div class="ed-c-tabs__body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+o([
+  l({ type: Boolean })
+], s.prototype, "inverted");
+o([
+  l({ type: Number })
+], s.prototype, "activeIndex");
+o([
+  c()
+], s.prototype, "activeTab");
+o([
+  c()
+], s.prototype, "isStart");
+o([
+  c()
+], s.prototype, "isEnd");
+o([
+  l()
+], s.prototype, "align");
+customElements.get("ed-tabs") === void 0 && customElements.define("ed-tabs", s);
+export {
+  s as EdTabs
+};

package/components/tag/tag.d.ts

@@ -0,0 +1,27 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdTag extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Dismissed state
+     */
+    dismissed: boolean;
+    /**
+     * Dismissible toggle
+     * 1) Show that the tag is dismissible
+     */
+    text: string;
+    /**
+     * Handle button click
+     */
+    handleClick(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-tag': EdTag;
+    }
+}
+//# sourceMappingURL=tag.d.ts.map

package/components/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/tag/tag.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,KAAM,SAAQ,SAAS;IAClC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,SAAS,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW;IAIX,MAAM;CAaP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/components/tag/tag.js

@@ -0,0 +1,41 @@
+import { unsafeCSS as l, html as m } from "lit";
+import { property as d } from "lit/decorators.js";
+import { E as c } from "../EdElement.js";
+const h = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-tag__button{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:inline-flex;align-items:center;appearance:none;border-radius:var(--ed-theme-border-radius-md);padding:.25rem .75rem;border:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-content-subtle);background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-theme-color-content-knockout);cursor:pointer;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-tag__button:hover,.ed-c-tag__button:focus{background:var(--ed-theme-color-background-subtle-hover)}ed-icon{--ed-icon-height: .625rem ;--ed-icon-width: .625rem ;margin-left:.5rem}";
+var p = Object.defineProperty, i = (a, t, n, g) => {
+  for (var e = void 0, o = a.length - 1, s; o >= 0; o--)
+    (s = a[o]) && (e = s(t, n, e) || e);
+  return e && p(t, n, e), e;
+};
+class r extends c {
+  static get styles() {
+    return l(h.toString());
+  }
+  /**
+   * Handle button click
+   */
+  handleClick() {
+    this.dismissed = !this.dismissed;
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-tag", {});
+    return this.dismissed ? null : m`
+          <li class="${t}">
+            <button class="ed-c-tag__button" @click=${this.handleClick}>
+              <span class="ed-c-tag__text">${this.text}</span>
+              <ed-icon class="ed-c-tag__icon" name="close"></ed-icon>
+            </button>
+          </li>
+        `;
+  }
+}
+i([
+  d({ type: Boolean })
+], r.prototype, "dismissed");
+i([
+  d()
+], r.prototype, "text");
+customElements.get("ed-tag") === void 0 && customElements.define("ed-tag", r);
+export {
+  r as EdTag
+};

package/components/tag-list/tag-list.d.ts

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

package/components/tag-list/tag-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-list.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/tag-list/tag-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CASP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/components/tag-list/tag-list.js

@@ -0,0 +1,20 @@
+import { unsafeCSS as e, html as s } from "lit";
+import { E as o } from "../EdElement.js";
+const r = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-tag-list{display:flex;margin:-.5rem 0 0 -.5rem;padding:0;list-style:none}::slotted(ed-tag){margin-left:.5rem;margin-top:.5rem}";
+class l extends o {
+  static get styles() {
+    return e(r.toString());
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-tag-list", {});
+    return s`
+      <ul class="${t}">
+        <slot></slot>
+      </ul>
+    `;
+  }
+}
+customElements.get("ed-tag-list") === void 0 && customElements.define("ed-tag-list", l);
+export {
+  l as EdTagList
+};

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

@@ -0,0 +1,89 @@
+import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/EdFormElement';
+export declare class EdTextField extends EdFormElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * The unique id of the field
+     */
+    fieldId: string;
+    /**
+     * The form field's label
+     */
+    label: string;
+    /**
+     * Text fields 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;
+    /**
+     * Type variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**text** renders a standar text input</li>
+     * <li>**email** renders a text input specificall for an email format.</li>
+     * <li>**number** renders an input for number values only</li>
+     * <li>**url** renders an input for urls only</li>
+     * <li>**tel** renders an input for telephone number values only</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    type: 'text' | 'email' | 'number' | 'url' | 'tel';
+    /**
+     * 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: HTMLInputElement;
+    connectedCallback(): void;
+    handleInput(event: Event): void;
+    /**
+     * Handles implicit form submission
+     * 1) By dispatching a 'submit' event on the form element. This is because calling the submit method on the form element does not trigger the submit event.
+     * 2) Calling the submit method on the form.
+     * @returns void
+     */
+    handleImplicitFormSubmission(): void;
+    /**
+     * Handle keydown event
+     * 1) Run implicit form submission on keybdown of Enter
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-text-field': EdTextField;
+    }
+}
+//# sourceMappingURL=text-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,0BAA0B,CAAC;AAGlC,qBAAa,WAAY,SAAQ,aAAa;IAC5C,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;IACnB;;;;;;;;;;;OAWG;IAEH,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAU;IAE3D;;;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,gBAAgB,CAAC;IAEzB,iBAAiB;IAQjB,WAAW,CAAC,KAAK,EAAE,KAAK;IAKxB;;;;;OAKG;IACH,4BAA4B;IAM5B;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,aAAa;IAMlC,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/components/text-field/text-field.js

@@ -0,0 +1,124 @@
+import { E as f } from "../EdFormElement.js";
+import { unsafeCSS as u, html as n } from "lit";
+import { property as o, query as m } from "lit/decorators.js";
+import { ifDefined as i } from "lit-html/directives/if-defined.js";
+import { n as h } from "../index.browser.js";
+import "../field-note/field-note.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-text-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-text-field--inverted .ed-c-text-field__label{color:var(--ed-theme-color-content-knockout)}.ed-c-text-field.ed-is-error .ed-c-text-field__label{color:var(--ed-theme-color-content-utility-error)}.ed-c-text-field.ed-is-success .ed-c-text-field__label{color:var(--ed-theme-color-content-utility-success)}.ed-c-text-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-text-field__input:hover{border-color:var(--ed-theme-color-border-brand);background-color:var(--ed-theme-form-color-background-hover)}.ed-c-text-field__input:focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus)}.ed-c-text-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-text-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-error)}.ed-is-success .ed-c-text-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-success)}.ed-c-text-field__input:active:not(:disabled){border-color:var(--ed-theme-form-color-border)}.ed-c-text-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-text-field__input:disabled~.ed-c-text-field__label,.ed-c-text-field__input:disabled:hover~.ed-c-text-field__label,.ed-c-text-field__input:disabled::placeholder{color:var(--ed-theme-color-content-disabled)}.ed-c-text-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-text-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-text-field__input::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-text-field__input:hover::placeholder{color:var(--ed-theme-color-content-utility-error-hover)}.ed-is-error .ed-c-text-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-text-field__input:hover,.ed-is-error .ed-c-text-field__input:focus{background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-text-field__input:not(:focus){color:var(--ed-theme-color-content-default)}.ed-is-success .ed-c-text-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-text-field__input:hover,.ed-is-success .ed-c-text-field__input:focus{background-color:var(--ed-theme-color-background-utility-success)}.ed-c-text-field__input{width:100%}.ed-c-text-field--inverted .ed-c-text-field__input{border-color:var(--ed-theme-color-border-subtle)}";
+var b = Object.defineProperty, t = (l, r, s, y) => {
+  for (var d = void 0, a = l.length - 1, c; a >= 0; a--)
+    (c = l[a]) && (d = c(r, s, d) || d);
+  return d && b(r, s, d), d;
+};
+class e extends f {
+  constructor() {
+    super(...arguments), this.label = "Label", this.required = !1, this.type = "text";
+  }
+  static get styles() {
+    return u(p);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.fieldId = this.fieldId || h(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || h());
+  }
+  handleInput(r) {
+    this.value = r.target.value, this.internals.setFormValue(this.value);
+  }
+  /**
+   * Handles implicit form submission
+   * 1) By dispatching a 'submit' event on the form element. This is because calling the submit method on the form element does not trigger the submit event.
+   * 2) Calling the submit method on the form.
+   * @returns void
+   */
+  handleImplicitFormSubmission() {
+    this.internals.form && (this.internals.form.dispatchEvent(new Event("submit", { bubbles: !0, composed: !0 })), this.internals.form.submit());
+  }
+  /**
+   * Handle keydown event
+   * 1) Run implicit form submission on keybdown of Enter
+   */
+  handleKeydown(r) {
+    r.key === "Enter" && this.handleImplicitFormSubmission();
+  }
+  render() {
+    const r = this.componentClassNames("ed-c-text-field", {
+      "ed-c-text-field--inverted": this.inverted === !0,
+      "ed-is-error": this.isError,
+      "ed-is-success": this.isSuccess
+    });
+    return n`
+      <div class="${r}">
+        <label class="ed-c-text-field__label" for="${this.fieldId}">${this.label}</label>
+        <div class="ed-c-text-field__body">
+          <input
+            class="ed-c-text-field__input"
+            type="${this.type}"
+            id="${this.fieldId}"
+            name="${i(this.name)}"
+            value="${i(this.value)}"
+            @keydown="${this.handleKeydown}"
+            @input="${this.handleInput}"
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            aria-describedby="${i(this.ariaDescribedBy)}"
+            placeholder="${i(this.placeholder)}"
+          />
+        </div>
+        ${this.fieldNote && n`<ed-field-note
+          ?inverted=${this.inverted}
+          id=${i(this.ariaDescribedBy)}
+          iconName=${i(this.iconName)}
+          ?isSuccess=${this.isSuccess}
+          ?isError=${this.isError}
+        >
+          ${this.fieldNote}
+        </ed-field-note>`}
+      </div>
+    `;
+  }
+}
+t([
+  o()
+], e.prototype, "fieldId");
+t([
+  o()
+], e.prototype, "label");
+t([
+  o()
+], e.prototype, "name");
+t([
+  o()
+], e.prototype, "fieldNote");
+t([
+  o()
+], e.prototype, "ariaDescribedBy");
+t([
+  o({ type: Boolean })
+], e.prototype, "required");
+t([
+  o({ type: Boolean })
+], e.prototype, "disabled");
+t([
+  o()
+], e.prototype, "type");
+t([
+  o({ type: Boolean })
+], e.prototype, "inverted");
+t([
+  o()
+], e.prototype, "placeholder");
+t([
+  o({ type: Boolean })
+], e.prototype, "isError");
+t([
+  o({ type: Boolean })
+], e.prototype, "isSuccess");
+t([
+  o()
+], e.prototype, "iconName");
+t([
+  m("input")
+], e.prototype, "field");
+customElements.get("ed-text-field") === void 0 && customElements.define("ed-text-field", e);
+export {
+  e as EdTextField
+};

package/components/text-link/text-link.d.ts

@@ -0,0 +1,42 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdTextLink extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * The link URL
+     */
+    href?: string;
+    /**
+     * Style variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li> **display** applies display treatment to the text link (e.g. article title link)</li>
+     * <li> **secondary** applies secondary treatment to the text link (e.g. non-prominent links)</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'display' | 'secondary';
+    /**
+     * Size variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li> **sm** renders a smaller typography preset than the default</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    size?: 'sm';
+    /**
+     * Inverted variant
+     * 1) Used for dark backgrounds
+     */
+    inverted?: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-text-link': EdTextLink;
+    }
+}
+//# sourceMappingURL=text-link.d.ts.map

package/components/text-link/text-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-link.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/text-link/text-link.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAElC;;;;;;;OAOG;IAEH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/components/text-link/text-link.js

@@ -0,0 +1,47 @@
+import { unsafeCSS as h, html as s } from "lit";
+import { ifDefined as m } from "lit-html/directives/if-defined.js";
+import { property as r } from "lit/decorators.js";
+import { E as c } from "../EdElement.js";
+const y = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-text-link{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);display:inline-flex;text-decoration:none;color:var(--ed-theme-link-color-content-default)}.ed-c-text-link:hover,.ed-c-text-link:focus{text-decoration:underline;color:var(--ed-theme-link-color-content-hover)}.ed-c-text-link:active{color:var(--ed-theme-link-color-content-active)}.ed-c-text-link:visited{color:var(--ed-theme-link-color-content-visited)}.ed-c-text-link--secondary{color:var(--ed-theme-color-content-subtle)}.ed-c-text-link--inverted{color:var(--ed-theme-color-content-knockout)}.ed-c-text-link--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-c-text-link__after{margin-left:.5rem}";
+var f = Object.defineProperty, n = (i, o, d, p) => {
+  for (var e = void 0, a = i.length - 1, l; a >= 0; a--)
+    (l = i[a]) && (e = l(o, d, e) || e);
+  return e && f(o, d, e), e;
+};
+class t extends c {
+  static get styles() {
+    return h(y.toString());
+  }
+  render() {
+    const o = this.componentClassNames("ed-c-text-link", {
+      "ed-c-text-link--inverted": this.inverted === !0,
+      "ed-c-text-link--display": this.variant === "display",
+      "ed-c-text-link--secondary": this.variant === "secondary",
+      "ed-c-text-link--sm": this.size === "sm"
+    });
+    return s`
+      <a href="${m(this.href)}" class="${o}">
+        <slot></slot>
+        ${this.slotNotEmpty("linkAfter") && s`<div class="ed-c-text-link__after">
+          <slot name="linkAfter"></slot>
+        </div>`}
+      </a>
+    `;
+  }
+}
+n([
+  r()
+], t.prototype, "href");
+n([
+  r()
+], t.prototype, "variant");
+n([
+  r()
+], t.prototype, "size");
+n([
+  r({ type: Boolean })
+], t.prototype, "inverted");
+customElements.get("ed-text-link") === void 0 && customElements.define("ed-text-link", t);
+export {
+  t as EdTextLink
+};

package/components/text-passage/text-passage.d.ts

@@ -0,0 +1,38 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The text passage content
+ */
+export declare class EdTextPassage extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Inverted variant
+     * 1) Used for dark backgrounds
+     */
+    inverted?: boolean;
+    /**
+     * Size variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li> **xs** renders smaller typography than the `sm` variant</li>
+     * <li> **sm** renders smaller typography than the default</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    size: 'xs' | 'sm';
+    /**
+     * Cap linelength
+     * 1) Applies linelength-container to the text passage
+     */
+    capLinelength: boolean;
+    /**
+     * Add the light dom styles when this component is connected to a page
+     */
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-text-passage': EdTextPassage;
+    }
+}
+//# sourceMappingURL=text-passage.d.ts.map

package/components/text-passage/text-passage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-passage.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/text-passage/text-passage.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAItF;;GAEG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;OAQG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,CAAa;IAE9B;;;OAGG;IAEH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,iBAAiB;IAYjB,MAAM;CAuBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}