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

package/components/EdElement.d.ts

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+export interface EdElementProps {
+    styleModifier?: string;
+}
+export interface DetailObj {
+    [key: string]: unknown;
+}
+export interface EdDispatchProps {
+    e?: Event;
+    eventName: string;
+    detailObj?: DetailObj;
+    optionsObj?: {
+        [key: string]: unknown;
+    };
+}
+export interface EdEvent extends Event {
+    detail: {
+        originalEvent: Event;
+        detailObj: DetailObj;
+    };
+}
+/**
+ * A base element.
+ */
+export declare class EdElement extends LitElement {
+    /**
+     * Append to the class name. Used for passing in utility classes
+     */
+    styleModifier?: string;
+    /**
+     * Abstraction of `classnames` that automatically includes any style modifier
+     * as well as any set variants.
+     *
+     * It is expected that `variant` would be overridden in a subclass with more
+     * specific types, `@property() variant?: 'foo' | 'bar'`
+     *
+     * @param baseClassName
+     */
+    componentClassNames(baseClassName: string, additionalClassNames?: {}): string;
+    /**
+     * Check if a slot is empty
+     *
+     * @param slotName
+     */
+    slotEmpty(slotName: string): boolean;
+    /**
+     * Check if a slot is not empty
+     *
+     * @param slotName
+     */
+    slotNotEmpty(slotName: string): boolean;
+    /**
+     * Dispatch a custom event.
+     */
+    dispatch({ e, eventName, detailObj, optionsObj }: EdDispatchProps): CustomEvent;
+    /**
+     * Example render, should not be used
+     */
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=EdElement.d.ts.map

package/components/EdElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdElement.d.ts","sourceRoot":"","sources":["../../../packages/eddie-web-components/components/EdElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,SAAS;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,CAAC,CAAC,EAAE,KAAK,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAC,CAAC;CACvC;AAED,MAAM,WAAW,OAAQ,SAAQ,KAAK;IACpC,MAAM,EAAE;QACN,aAAa,EAAE,KAAK,CAAC;QACrB,SAAS,EAAE,SAAS,CAAC;KACtB,CAAC;CACH;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;OAQG;IACH,mBAAmB,CAAC,aAAa,EAAE,MAAM,EAAE,oBAAoB,KAAK;IAIpE;;;;OAIG;IACH,SAAS,CAAC,QAAQ,EAAE,MAAM;IAI1B;;;;OAIG;IACH,YAAY,CAAC,QAAQ,EAAE,MAAM;IAQ7B;;OAEG;IACH,QAAQ,CAAC,EAAC,CAAC,EAAE,SAAS,EAAE,SAAc,EAAE,UAAe,EAAC,EAAE,eAAe,GAAG,WAAW;IAYvF;;OAEG;IACH,MAAM;CAGP"}

package/components/EdElement.js

@@ -0,0 +1,63 @@
+import i from "classnames";
+import { LitElement as p, html as m } from "lit";
+import { property as a } from "lit/decorators.js";
+var u = Object.defineProperty, d = (n, t, r, l) => {
+  for (var e = void 0, s = n.length - 1, o; s >= 0; s--)
+    (o = n[s]) && (e = o(t, r, e) || e);
+  return e && u(t, r, e), e;
+};
+class f extends p {
+  /**
+   * Abstraction of `classnames` that automatically includes any style modifier
+   * as well as any set variants.
+   *
+   * It is expected that `variant` would be overridden in a subclass with more
+   * specific types, `@property() variant?: 'foo' | 'bar'`
+   *
+   * @param baseClassName
+   */
+  componentClassNames(t, r = {}) {
+    return i(t, r);
+  }
+  /**
+   * Check if a slot is empty
+   *
+   * @param slotName
+   */
+  slotEmpty(t) {
+    return !this.querySelector(`[slot="${t}"]`);
+  }
+  /**
+   * Check if a slot is not empty
+   *
+   * @param slotName
+   */
+  slotNotEmpty(t) {
+    if (!this.slotEmpty(t))
+      return !this.slotEmpty(t);
+  }
+  /**
+   * Dispatch a custom event.
+   */
+  dispatch({ e: t, eventName: r, detailObj: l = {}, optionsObj: e = {} }) {
+    const s = {
+      bubbles: !0,
+      composed: !0,
+      ...e,
+      detail: { ...t && { originalEvent: t }, ...l }
+    }, o = new CustomEvent(r, s);
+    return this.dispatchEvent(o), o;
+  }
+  /**
+   * Example render, should not be used
+   */
+  render() {
+    return m`<slot></slot>`;
+  }
+}
+d([
+  a()
+], f.prototype, "styleModifier");
+export {
+  f as E
+};

package/components/EdFormElement.d.ts

@@ -0,0 +1,65 @@
+import { EdElement } from './EdElement';
+export interface EdElementInternals extends ElementInternals {
+    formResetCallback: () => void;
+    ariaRole: string;
+    form: any;
+    setFormValue: any;
+}
+export declare abstract class EdFormElement extends EdElement {
+    /**
+     * @internal
+     *
+     * Tells the browser to treat the element like a form field.
+     * Ties the element to the HTML form it is in.
+     *
+     */
+    static formAssociated: boolean;
+    abstract type: string;
+    /**
+     * @internal
+     *
+     * An instance of element internals.
+     * Contains properties and methods that allows the element
+     * to participate fully in the HTML form it's in.
+     */
+    internals: EdElementInternals;
+    /**
+     * @internal
+     *
+     * Stores the value for the `value` getter and setter.
+     */
+    internalValue: string;
+    /**
+     * @internal
+     *
+     * Stores the intial value of the field so that it can be reset
+     */
+    protected defaultValue: string | boolean;
+    /**
+     * @internal
+     * The underlying HTML form field.
+     * This should be implemented with `@query`
+     * in the implementing class.
+     */
+    abstract field: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
+    /**
+     * The value of the form field.
+     */
+    get value(): string;
+    /**
+     * Sets the value of the form field.
+     * 1. Stores the new value so it can be retrieved by the getter.
+     * 2. Sets the current value of the control.
+     * 3. Updates the actual field.
+     * 4. Rerenders the component.
+     */
+    set value(newValue: string);
+    /**
+     * update the actual field's value
+     */
+    protected updateField(): void;
+    protected firstUpdated(): void;
+    formResetCallback(): void;
+    constructor();
+}
+//# sourceMappingURL=EdFormElement.d.ts.map

package/components/EdFormElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdFormElement.d.ts","sourceRoot":"","sources":["../../../packages/eddie-web-components/components/EdFormElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IAC1D,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,GAAG,CAAC;IACV,YAAY,EAAE,GAAG,CAAC;CACnB;AAED,8BAAsB,aAAc,SAAQ,SAAS;IACnD;;;;;;OAMG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,SAAS,EAAE,kBAAkB,CAAC;IAE9B;;;;OAIG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;IAEzC;;;;;OAKG;IACH,QAAQ,CAAC,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAC/F;;OAEG;IACH,IACI,KAAK,WAER;IAED;;;;;;OAMG;IACH,IAAI,KAAK,CAAC,QAAQ,QAAA,EAYjB;IAED;;OAEG;IACH,SAAS,CAAC,WAAW;IAKrB,SAAS,CAAC,YAAY;IAOtB,iBAAiB;;CASlB"}

package/components/EdFormElement.js

@@ -0,0 +1,46 @@
+import { property as h } from "lit/decorators.js";
+import { E as d } from "./EdElement.js";
+var p = Object.defineProperty, o = Object.getOwnPropertyDescriptor, n = (r, t, i, f) => {
+  for (var e = o(t, i), s = r.length - 1, u; s >= 0; s--)
+    (u = r[s]) && (e = u(t, i, e) || e);
+  return e && p(t, i, e), e;
+};
+const l = class l extends d {
+  get value() {
+    return this.internalValue;
+  }
+  /**
+   * Sets the value of the form field.
+   * 1. Stores the new value so it can be retrieved by the getter.
+   * 2. Sets the current value of the control.
+   * 3. Updates the actual field.
+   * 4. Rerenders the component.
+   */
+  set value(t) {
+    const i = this.value;
+    this.internalValue = t, this.type !== "checkbox" && this.type !== "radio" && this.internals.setFormValue(t), this.updateField(), this.requestUpdate("value", i);
+  }
+  /**
+   * update the actual field's value
+   */
+  updateField() {
+    this.field && (this.value == null ? this.field.value = "" : this.field.value = this.value);
+  }
+  firstUpdated() {
+    this.type !== "checkbox" && this.type !== "radio" && (this.defaultValue = this.value || this.getAttribute("value") || null), this.updateField();
+  }
+  formResetCallback() {
+    this.value = this.defaultValue, this.updateField();
+  }
+  constructor() {
+    super(), this.internals = this.attachInternals();
+  }
+};
+l.formAssociated = !0;
+let a = l;
+n([
+  h()
+], a.prototype, "value");
+export {
+  a as E
+};

package/components/accordion/accordion.d.ts

@@ -0,0 +1,19 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdAccordion extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Inverted variant
+     * 1) Used for dark backgrounds
+     */
+    inverted?: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-accordion': EdAccordion;
+    }
+}
+//# sourceMappingURL=accordion.d.ts.map

package/components/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/accordion/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AAEH,qBAAa,WAAY,SAAQ,SAAS;IACxC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/components/accordion/accordion.js

@@ -0,0 +1,31 @@
+import { unsafeCSS as d, html as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { E as l } from "../EdElement.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-accordion--inverted{color:var(--ed-theme-color-content-knockout);--ed-accordion-panel-button-hover-text-color: var(--ed-theme-color-content-subtle)}";
+var h = Object.defineProperty, p = (t, o, n, f) => {
+  for (var e = void 0, r = t.length - 1, s; r >= 0; r--)
+    (s = t[r]) && (e = s(o, n, e) || e);
+  return e && h(o, n, e), e;
+};
+class c extends l {
+  static get styles() {
+    return d(m.toString());
+  }
+  render() {
+    const o = this.componentClassNames("ed-c-accordion", {
+      "ed-c-accordion--inverted": this.inverted === !0
+    });
+    return i`
+      <dl class="${o}">
+        <slot></slot>
+      </dl>
+    `;
+  }
+}
+p([
+  a({ type: Boolean })
+], c.prototype, "inverted");
+customElements.get("ed-accordion") === void 0 && customElements.define("ed-accordion", c);
+export {
+  c as EdAccordion
+};

package/components/accordion-panel/accordion-panel.d.ts

@@ -0,0 +1,57 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdAccordionPanel extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * is Active
+     * 1) Panel is open when set to true. Close when set to false
+     */
+    isActive?: boolean;
+    /**
+     * FullyOpen property
+     * 1) When true: panel = fully open
+     */
+    fullyOpen?: boolean;
+    /**
+     * Aria labelled by attribute
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Height property
+     */
+    height?: string;
+    /**
+     * Initialize functions
+     */
+    constructor();
+    /**
+     * Initialize/Update
+     * 1) Set panel height on load. Active state should set panel height to content within panel
+     */
+    connectedCallback(): void;
+    /**
+     * Set panel height
+     * 1) If isActive is true and fullyOpen is false or this fullyOpen is true and isActive is false, set the height to the accordion
+     * panel body scroll height
+     * 2) If isActive and fullyOpen are true, set the height to auto
+     * 3) If isActive and fullyOpen are false, set the height to 0
+     */
+    setPanelHeight(): Promise<void>;
+    /**
+     * Set panel height
+     * 1) If isActive is true and fullyOpen is false or this fullyOpen is true and isActive is false, set the height to the accordion
+     * panel body scroll height
+     * 2) If isActive and fullyOpen are true, set the height to auto
+     * 3) If isActive and fullyOpen are false, set the height to 0
+     */
+    togglePanel(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-accordion-panel': EdAccordionPanel;
+    }
+}
+//# sourceMappingURL=accordion-panel.d.ts.map

package/components/accordion-panel/accordion-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-panel.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/accordion-panel/accordion-panel.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAEtF,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,SAAS;IAC7C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IAEH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;;IAOH;;;OAGG;IACH,iBAAiB;IAejB;;;;;;OAMG;IACG,cAAc;IAYpB;;;;;;OAMG;IACH,WAAW;IAoBX,MAAM;CA2BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/components/accordion-panel/accordion-panel.js

@@ -0,0 +1,95 @@
+import { unsafeCSS as c, html as h } from "lit";
+import { property as o } from "lit/decorators.js";
+import { n as l } from "../index.browser.js";
+import { E as p } from "../EdElement.js";
+import "../icon/icon.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-accordion-panel{border-bottom:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle)}.ed-c-accordion-panel__button{display:flex;align-items:center;appearance:none;background:none;border:none;padding:1rem 0;width:100%;cursor:pointer;color:inherit;overflow-x:hidden;transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-accordion-panel__button:hover,.ed-c-accordion-panel__button:focus{color:var(--ed-accordion-panel-button-hover-text-color, var(--ed-theme-color-content-default-hover))}ed-icon{margin-left:auto;transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-accordion-panel.ed-is-active ed-icon{transform:rotate(-180deg)}.ed-c-accordion-panel__body{margin:0;padding:0;overflow:hidden;visibility:hidden;transition:height var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),visibility var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-accordion-panel.ed-is-active .ed-c-accordion-panel__body{visibility:visible}.ed-c-accordion-panel__body-inner{padding-bottom:1rem;padding-top:1rem}.ed-c-accordion--condensed .ed-c-accordion-panel__body-inner{padding-top:.5rem;padding-bottom:.5rem}";
+var b = Object.defineProperty, a = (n, i, s, u) => {
+  for (var e = void 0, d = n.length - 1, r; d >= 0; d--)
+    (r = n[d]) && (e = r(i, s, e) || e);
+  return e && b(i, s, e), e;
+};
+class t extends p {
+  static get styles() {
+    return c(m.toString());
+  }
+  /**
+   * Initialize functions
+   */
+  constructor() {
+    super(), this.togglePanel = this.togglePanel.bind(this), this.setPanelHeight = this.setPanelHeight.bind(this);
+  }
+  /**
+   * Initialize/Update
+   * 1) Set panel height on load. Active state should set panel height to content within panel
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.id = this.id || l(), this.ariaLabelledBy = this.ariaLabelledBy || l(), this.setPanelHeight(), this.isActive && (this.fullyOpen = !0, this.setPanelHeight());
+  }
+  /**
+   * Set panel height
+   * 1) If isActive is true and fullyOpen is false or this fullyOpen is true and isActive is false, set the height to the accordion
+   * panel body scroll height
+   * 2) If isActive and fullyOpen are true, set the height to auto
+   * 3) If isActive and fullyOpen are false, set the height to 0
+   */
+  async setPanelHeight() {
+    await this.updateComplete, this.isActive && !this.fullyOpen || !this.isActive && this.fullyOpen ? this.height = this.shadowRoot.querySelector(".ed-c-accordion-panel__body-inner").scrollHeight + "px" : this.isActive && this.fullyOpen ? this.height = "auto" : !this.isActive && !this.fullyOpen && (this.height = "0");
+  }
+  /**
+   * Set panel height
+   * 1) If isActive is true and fullyOpen is false or this fullyOpen is true and isActive is false, set the height to the accordion
+   * panel body scroll height
+   * 2) If isActive and fullyOpen are true, set the height to auto
+   * 3) If isActive and fullyOpen are false, set the height to 0
+   */
+  togglePanel() {
+    this.isActive = !this.isActive, this.isActive ? (this.setPanelHeight(), setTimeout(() => {
+      this.fullyOpen = !0, this.setPanelHeight();
+    }, 150)) : (this.setPanelHeight(), setTimeout(() => {
+      this.fullyOpen = !1, this.setPanelHeight();
+    }, 50));
+  }
+  render() {
+    const i = this.componentClassNames("ed-c-accordion-panel", {
+      "ed-is-active": this.isActive === !0
+    });
+    return h`
+      <div class="${i}">
+        <dt class="ed-c-accordion-panel__header">
+          <button
+            class="ed-c-accordion-panel__button"
+            aria-expanded="${!!this.isActive}"
+            id="${this.ariaLabelledBy}"
+            aria-controls="${this.id}"
+            @click=${this.togglePanel}
+          >
+            <slot name="header"></slot>
+            <ed-icon name="keyboard-arrow-down"></ed-icon>
+          </button>
+        </dt>
+        <dd class="ed-c-accordion-panel__body" aria-labelledby="${this.ariaLabelledBy}" id="${this.id}" style=${"height: " + this.height}>
+          <div class="ed-c-accordion-panel__body-inner" #bodyInner>
+            <slot></slot>
+          </div>
+        </dd>
+      </div>
+    `;
+  }
+}
+a([
+  o({ type: Boolean })
+], t.prototype, "isActive");
+a([
+  o({ type: Boolean })
+], t.prototype, "fullyOpen");
+a([
+  o()
+], t.prototype, "ariaLabelledBy");
+a([
+  o()
+], t.prototype, "height");
+customElements.get("ed-accordion-panel") === void 0 && customElements.define("ed-accordion-panel", t);
+export {
+  t as EdAccordionPanel
+};

package/components/alert/alert.d.ts

@@ -0,0 +1,72 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdAlert extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Icon name used for the icon next to the text
+     */
+    iconName?: string;
+    /**
+     * Heading variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**headline-lg** renders a heading with the heading headline-lg preset treatment</li>
+     * <li>**headline** renders a heading with the heading headline preset treatment</li>
+     * <li>**headline-sm** renders a heading with the heading headline-sm preset treatment</li>
+     * <li>**title-lg** renders a heading with the heading title-lg preset treatment</li>
+     * <li>**title** renders a heading with the heading title preset treatment</li>
+     * <li>**title-sm** renders a heading with the heading title-sm preset treatment</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    headingVariant?: 'headline-lg' | 'headline' | 'headline-sm' | 'title-lg' | 'title' | 'title-sm';
+    /**
+     * Dynamic tag name for the component
+     * 1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**h1** renders an `h1` tag</li>
+     * <li>**h2** renders an `h2` tag. This is the default</li>
+     * <li>**h3** renders an `h3` tag</li>
+     * <li>**h4** renders an `h4` tag</li>
+     * <li>**h5** renders an `h5` tag</li>
+     * <li>**h6** renders an `h6` tag</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Text for the banner heading
+     */
+    heading?: string;
+    /**
+     * Dismissed property
+     * 1) State that changes to true and is removed when the banner is dismissed
+     */
+    dismissed?: boolean;
+    /**
+     * Style variants
+     <ed-text-passage size="sm">
+     * <ul>
+     * <li>**success** renders a banner that represents a success state</li>
+     * <li>**warning** renders a banner that represents and warning state</li>
+     * <li>**error** renders a banner that represents and error state</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'success' | 'error' | 'warning';
+    /**
+     * On banner dismiss
+     * 1) Function that toggles dismissed to true and removes the banner from the UI
+     */
+    onDismiss(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-alert': EdAlert;
+    }
+}
+//# sourceMappingURL=alert.d.ts.map

package/components/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,OAAO,kBAAkB,CAAC;AAC1B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AAGtB;;GAEG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;OAYG;IAEH,cAAc,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAc;IAE7G;;;;;;;;;;;;;OAaG;IAEH,OAAO,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAExD;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;OASG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IAE1C;;;OAGG;IACH,SAAS;IAIT,MAAM;CAgCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/components/alert/alert.js

@@ -0,0 +1,77 @@
+import { E as c } from "../EdElement.js";
+import { unsafeCSS as m, html as s } from "lit";
+import { property as r } from "lit/decorators.js";
+import "../button/button.js";
+import "../heading/heading.js";
+import "../icon/icon.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-alert{position:relative;padding:1rem;background:var(--ed-theme-color-content-knockout);border-radius:var(--ed-theme-border-radius-md);border-top:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle);border-right:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle);border-bottom:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle);border-left:var(--ed-theme-border-width-xl) solid var(--ed-theme-color-border-utility-info)}.ed-c-alert__inner{display:flex;align-items:flex-start}.ed-c-alert--success{border-left-color:var(--ed-theme-color-border-utility-success)}.ed-c-alert--warning{border-left-color:var(--ed-theme-color-border-utility-warning)}.ed-c-alert--error{border-left-color:var(--ed-theme-color-border-utility-error)}ed-icon{position:relative;top:.375rem;margin-right:1rem;--ed-icon-fill: var(--ed-theme-color-content-utility-info);--ed-icon-width: 1.25rem ;--ed-icon-height: 1.25rem }.ed-c-alert--warning ed-icon{--ed-icon-fill: var(--ed-theme-color-content-utility-warning)}.ed-c-alert--error ed-icon{--ed-icon-fill: var(--ed-theme-color-content-utility-error)}.ed-c-alert--success ed-icon{--ed-icon-fill: var(--ed-theme-color-content-utility-success)}.ed-c-alert__body{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);flex:1}.ed-c-alert__description{display:block;margin-top:.5rem}.ed-c-alert__close-btn{position:relative;bottom:.25rem;margin-left:1.5rem}";
+var p = Object.defineProperty, o = (a, i, l, g) => {
+  for (var t = void 0, d = a.length - 1, n; d >= 0; d--)
+    (n = a[d]) && (t = n(i, l, t) || t);
+  return t && p(i, l, t), t;
+};
+class e extends c {
+  constructor() {
+    super(...arguments), this.headingVariant = "title-sm", this.tagName = "h2";
+  }
+  static get styles() {
+    return m(h.toString());
+  }
+  /**
+   * On banner dismiss
+   * 1) Function that toggles dismissed to true and removes the banner from the UI
+   */
+  onDismiss() {
+    this.dismissed = !0;
+  }
+  render() {
+    const i = this.componentClassNames("ed-c-alert", {
+      "ed-c-alert--success": this.variant === "success",
+      "ed-c-alert--error": this.variant === "error",
+      "ed-c-alert--warning": this.variant === "warning"
+    });
+    return this.dismissed ? null : s`
+          <div class="${i}">
+            <div class="ed-c-alert__inner">
+              ${this.iconName && s`<ed-icon name=${this.iconName} class="ed-c-alert__icon"></ed-icon>`}
+              <div class="ed-c-alert__body">
+                ${this.heading && s`<ed-heading class="ed-c-alert__title" tagName=${this.tagName} variant="${this.headingVariant}">${this.heading}</ed-heading>`}
+                <ed-text-passage class="ed-c-alert__description">
+                  <slot></slot>
+                </ed-text-passage>
+              </div>
+              <ed-button
+                class="ed-c-alert__close-btn"
+                variant="bare"
+                size="lg"
+                iconName="close"
+                iconPosition="after"
+                @click=${this.onDismiss}
+              ></ed-button>
+            </div>
+          </div>
+        `;
+  }
+}
+o([
+  r()
+], e.prototype, "iconName");
+o([
+  r()
+], e.prototype, "headingVariant");
+o([
+  r()
+], e.prototype, "tagName");
+o([
+  r()
+], e.prototype, "heading");
+o([
+  r({ type: Boolean })
+], e.prototype, "dismissed");
+o([
+  r()
+], e.prototype, "variant");
+customElements.get("ed-alert") === void 0 && customElements.define("ed-alert", e);
+export {
+  e as EdAlert
+};

package/components/badge/badge.d.ts

@@ -0,0 +1,29 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdBadge extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * The badge text
+     */
+    text?: string;
+    /**
+     * Size variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**success** renders a badge with success state treatment</li>
+     * <li>**warning** renders a badge with warning state treatment</li>
+     * <li>**error** renders a badge with error state treatment</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'success' | 'warning' | 'error';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-badge': EdBadge;
+    }
+}
+//# sourceMappingURL=badge.d.ts.map

package/components/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/badge/badge.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;;OASG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE1C,MAAM;CASP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}