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

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

@@ -0,0 +1,94 @@
+import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/EdFormElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdSelectField extends EdFormElement {
+    readonly type = "select";
+    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;
+    /**
+     * Field note
+     */
+    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;
+    /**
+     * Select field option items
+     * 1) optGroupLabel groups `options` items. Only use `label` when not grouping items
+     * 2) `label` represents the `<option>` label
+     */
+    items: string[];
+    /**
+     * Style variant
+     * * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**display** applies branded, bolder display form fields</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'display';
+    /**
+     * Inverted variation for dark backgrounds
+     */
+    inverted?: boolean;
+    /**
+     * Error state
+     */
+    isError?: boolean;
+    /**
+     * Success state
+     */
+    isSuccess?: boolean;
+    /**
+     * Field note icon name
+     */
+    iconName?: string;
+    /**
+     * Select input querySelector
+     */
+    field: HTMLSelectElement;
+    /**
+     * Get all select option elements
+     */
+    selectOptions: HTMLOptionElement[];
+    /**
+     * Selected item value
+     */
+    private selectedItem;
+    firstUpdated(): void;
+    handleChange(event: Event): void;
+    /**
+     * Set form data
+     * 1) Set the element internals to the selected item value if it exists, otherwise the default selected item is the first one
+     */
+    private setFormData;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-select-field': EdSelectField;
+    }
+}
+//# sourceMappingURL=select-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/select-field/select-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAK9F,OAAO,0BAA0B,CAAC;AAGlC;;GAEG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,QAAQ,CAAC,IAAI,YAAY;IACzB,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAW;IAExB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;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;;;;OAIG;IAEH,KAAK,EAAE,MAAM,EAAE,CAAM;IAErB;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,KAAK,EAAG,iBAAiB,CAAC;IAE1B;;OAEG;IAEH,aAAa,EAAE,iBAAiB,EAAE,CAAC;IAEnC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B,YAAY;IAgBZ,YAAY,CAAC,KAAK,EAAE,KAAK;IAOzB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAInB,MAAM;CAgDP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/components/select-field/select-field.js

@@ -0,0 +1,123 @@
+import { E as f } from "../EdFormElement.js";
+import { unsafeCSS as p, html as a } from "lit";
+import { property as o, query as m, queryAll as b } from "lit/decorators.js";
+import { ifDefined as i } from "lit-html/directives/if-defined.js";
+import { n as u } from "../index.browser.js";
+import "../field-note/field-note.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-select-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-select-field--inverted .ed-c-select-field__label{color:var(--ed-theme-color-content-knockout)}.ed-c-select-field.ed-is-error .ed-c-select-field__label{color:var(--ed-theme-color-content-utility-error)}.ed-c-select-field.ed-is-success .ed-c-select-field__label{color:var(--ed-theme-color-content-utility-success)}.ed-c-select-field__body{position:relative}.ed-c-select-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-select-field__input:hover{border-color:var(--ed-theme-color-border-brand);background-color:var(--ed-theme-form-color-background-hover)}.ed-c-select-field__input:focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus)}.ed-c-select-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-select-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-error)}.ed-is-success .ed-c-select-field__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-success)}.ed-c-select-field__input:active:not(:disabled){border-color:var(--ed-theme-form-color-border)}.ed-c-select-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-select-field__input:disabled~.ed-c-text-field__label,.ed-c-select-field__input:disabled:hover~.ed-c-text-field__label,.ed-c-select-field__input:disabled::placeholder{color:var(--ed-theme-color-content-disabled)}.ed-c-select-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-select-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-select-field__input::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-select-field__input:hover::placeholder{color:var(--ed-theme-color-content-utility-error-hover)}.ed-is-error .ed-c-select-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-select-field__input:hover,.ed-is-error .ed-c-select-field__input:focus{background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-select-field__input:not(:focus){color:var(--ed-theme-color-content-default)}.ed-is-success .ed-c-select-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-select-field__input:hover,.ed-is-success .ed-c-select-field__input:focus{background-color:var(--ed-theme-color-background-utility-success)}.ed-c-select-field__input{padding-right:2rem}.ed-c-select-field--inverted .ed-c-select-field__input{border-color:var(--ed-theme-color-border-subtle)}select::-ms-expand{display:none}ed-icon{position:absolute;top:50%;transform:translateY(-50%);right:.75rem;pointer-events:none;--ed-icon-fill: var(--ed-theme-color-content-brand-knockout);--ed-icon-height: .75rem ;--ed-icon-width: .75rem }";
+var v = Object.defineProperty, t = (c, d, r, s) => {
+  for (var l = void 0, n = c.length - 1, h; n >= 0; n--)
+    (h = c[n]) && (l = h(d, r, l) || l);
+  return l && v(d, r, l), l;
+};
+class e extends f {
+  constructor() {
+    super(...arguments), this.type = "select", this.label = "Label", this.required = !1, this.items = [];
+  }
+  static get styles() {
+    return p(y.toString());
+  }
+  firstUpdated() {
+    super.connectedCallback(), this.selectOptions.forEach((d) => {
+      d.selected === !0 && (this.selectedItem = d.value);
+    }), this.defaultValue = this.selectedItem ? this.selectedItem : this.selectOptions[0].value, this.fieldId = this.fieldId || u(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || u()), this.setFormData();
+  }
+  handleChange(d) {
+    const r = d.target;
+    this.value = r.value, console.log("event", this.value), this.dispatchEvent(new Event("change"));
+  }
+  /**
+   * Set form data
+   * 1) Set the element internals to the selected item value if it exists, otherwise the default selected item is the first one
+   */
+  setFormData() {
+    this.selectedItem ? this.internals.setFormValue(this.selectedItem) : this.internals.setFormValue(this.defaultValue.toString());
+  }
+  render() {
+    const d = this.componentClassNames("ed-c-select-field", {
+      "ed-c-select-field--display": this.variant === "display",
+      "ed-c-select-field--inverted": this.inverted === !0,
+      "ed-is-error": this.isError,
+      "ed-is-success": this.isSuccess
+    });
+    return a`
+      <div class="${d}">
+        <label class="ed-c-select-field__label" for="${this.fieldId}">${this.label}</label>
+        <div class="ed-c-select-field__body">
+          <select
+            class="ed-c-select-field__input"
+            id="${this.fieldId}"
+            name="${i(this.name)}"
+            value="${i(this.value)}"
+            ?required="${this.required}"
+            ?disabled="${this.disabled}"
+            aria-describedby="${i(this.ariaDescribedBy)}"
+            @change="${this.handleChange}"
+          >
+            ${this.items.map((r) => r.optGroupLabel ? a`<optgroup label="${r.optGroupLabel}">
+                  ${r.options.map((s) => a`<option value="${s.value}" selected=${i(s.selected)}>${s.label}</option>`)}
+                </optgroup>` : a`<option value="${r.value}">${r.label}</option>`)}
+          </select>
+          <ed-icon name="keyboard-arrow-down" styleModifier="ed-c-select-field__icon"></ed-icon>
+        </div>
+        ${this.fieldNote && a`<ed-field-note
+          id=${i(this.ariaDescribedBy)}
+          iconName=${i(this.iconName)}
+          ?isSuccess=${this.isSuccess}
+          ?isError=${this.isError}
+          ?inverted=${this.inverted}
+          >${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({ type: Array })
+], e.prototype, "items");
+t([
+  o()
+], e.prototype, "variant");
+t([
+  o({ type: Boolean })
+], e.prototype, "inverted");
+t([
+  o({ type: Boolean })
+], e.prototype, "isError");
+t([
+  o({ type: Boolean })
+], e.prototype, "isSuccess");
+t([
+  o()
+], e.prototype, "iconName");
+t([
+  m("select")
+], e.prototype, "field");
+t([
+  b("option")
+], e.prototype, "selectOptions");
+customElements.get("ed-select-field") === void 0 && customElements.define("ed-select-field", e);
+export {
+  e as EdSelectField
+};

package/components/show-hide/show-hide.d.ts

@@ -0,0 +1,61 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdShowHide extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Active state of the show more
+     * 1) Reveals hidden information when `true`. Hides when `false`
+     */
+    isActive?: boolean;
+    /**
+     * Button style variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**primary** renders the button used for primary actions</li>
+     * <li>**bare** renders a button that has padding and margin removed and a bare background</li>
+     * <li>**link** renders a button that looks like a text link</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    buttonVariant?: 'primary' | 'bare' | 'link';
+    /**
+     * Name of SVG icon
+     */
+    iconName: string;
+    /**
+     * Button icon position
+     */
+    iconPosition: 'before' | 'after';
+    /**
+     * Size variations:
+     *<ed-text-passage size="sm">
+     * <ul>
+     * <li>**sm** yields a small button</li>
+     * <li>**lg** yields a large button</li>
+     * </ed-text-passage>
+     */
+    size: 'sm' | 'lg';
+    /**
+     * Button text
+     */
+    buttonText: string;
+    /**
+     * Hide button text
+     * 1) Button text when panel content is exposed to hide the content again
+     */
+    hideButtonText: string;
+    /**
+     * Handle click function
+     * 1) Toggle the active state to true/false
+     */
+    handleClick(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-show-hide': EdShowHide;
+    }
+}
+//# sourceMappingURL=show-hide.d.ts.map

package/components/show-hide/show-hide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-hide.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/show-hide/show-hide.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,OAAO,kBAAkB,CAAC;AAG1B;;GAEG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IAEH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAU;IAErD;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IAEH,YAAY,EAAE,QAAQ,GAAG,OAAO,CAAC;IAEjC;;;;;;;OAOG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAElB;;OAEG;IAEH,UAAU,EAAE,MAAM,CAAe;IAEjC;;;OAGG;IAEH,cAAc,EAAE,MAAM,CAAe;IAErC;;;OAGG;IACH,WAAW;IAIX,MAAM;CAuBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/components/show-hide/show-hide.js

@@ -0,0 +1,72 @@
+import { E as h } from "../EdElement.js";
+import { unsafeCSS as c, html as p } from "lit";
+import { property as e } from "lit/decorators.js";
+import "../button/button.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-show-hide__panel{display:none}.ed-c-show-hide.ed-is-active .ed-c-show-hide__panel{margin-top:.5rem;display:block}.ed-c-show-hide.ed-is-active{transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);--ed-button-icon-transform: rotate(90deg)}";
+var l = Object.defineProperty, i = (n, s, a, u) => {
+  for (var o = void 0, r = n.length - 1, d; r >= 0; r--)
+    (d = n[r]) && (o = d(s, a, o) || o);
+  return o && l(s, a, o), o;
+};
+class t extends h {
+  constructor() {
+    super(...arguments), this.buttonVariant = "bare", this.buttonText = "Show More", this.hideButtonText = "Show Less";
+  }
+  static get styles() {
+    return c(m.toString());
+  }
+  /**
+   * Handle click function
+   * 1) Toggle the active state to true/false
+   */
+  handleClick() {
+    this.isActive = !this.isActive;
+  }
+  render() {
+    const s = this.componentClassNames("ed-c-show-hide", {
+      "ed-is-active": this.isActive === !0
+    });
+    return p`
+      <div class="${s}">
+        <ed-button
+          class="ed-c-show-hide__btn"
+          @click=${this.handleClick}
+          text=${this.isActive ? this.hideButtonText : this.buttonText}
+          size=${this.size}
+          variant=${this.buttonVariant}
+          iconPosition=${this.iconPosition}
+          iconName=${this.iconName}
+          aria-expanded=${this.isActive}
+        ></ed-button>
+        <div class="ed-c-show-hide__panel">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+i([
+  e({ type: Boolean })
+], t.prototype, "isActive");
+i([
+  e()
+], t.prototype, "buttonVariant");
+i([
+  e()
+], t.prototype, "iconName");
+i([
+  e()
+], t.prototype, "iconPosition");
+i([
+  e()
+], t.prototype, "size");
+i([
+  e()
+], t.prototype, "buttonText");
+i([
+  e()
+], t.prototype, "hideButtonText");
+customElements.get("ed-show-hide") === void 0 && customElements.define("ed-show-hide", t);
+export {
+  t as EdShowHide
+};

package/components/show-more/show-more.d.ts

@@ -0,0 +1,33 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdShowMore extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Active state of the show more
+     * 1) Reveals hidden information when `true`. Hides when `false`
+     */
+    isActive?: boolean;
+    /**
+     * Button text
+     */
+    buttonText?: string;
+    /**
+     * Hide button text
+     * 1) Used for the button text when the content is expanded
+     */
+    hideButtonText?: string;
+    /**
+     * Handle click function
+     * 1) Toggle the active state to true/false
+     */
+    handleClick(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-show-more': EdShowMore;
+    }
+}
+//# sourceMappingURL=show-more.d.ts.map

package/components/show-more/show-more.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-more.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/show-more/show-more.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,OAAO,kBAAkB,CAAC;AAG1B;;GAEG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAe;IAElC;;;OAGG;IAEH,cAAc,CAAC,EAAE,MAAM,CAAe;IAEtC;;;OAGG;IACH,WAAW;IAIX,MAAM;CA0BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/components/show-more/show-more.js

@@ -0,0 +1,63 @@
+import { E as m } from "../EdElement.js";
+import { unsafeCSS as a, html as c } from "lit";
+import { property as r } from "lit/decorators.js";
+import "../button/button.js";
+const l = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-show-more__panel{padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--ed-theme-color-border-subtle)}.ed-c-show-more__hidden{display:none}.ed-c-show-more.ed-is-active .ed-c-show-more__hidden{display:block}";
+var p = Object.defineProperty, d = (s, t, n, v) => {
+  for (var e = void 0, i = s.length - 1, h; i >= 0; i--)
+    (h = s[i]) && (e = h(t, n, e) || e);
+  return e && p(t, n, e), e;
+};
+class o extends m {
+  constructor() {
+    super(...arguments), this.buttonText = "Show More", this.hideButtonText = "Show Less";
+  }
+  static get styles() {
+    return a(l.toString());
+  }
+  /**
+   * Handle click function
+   * 1) Toggle the active state to true/false
+   */
+  handleClick() {
+    this.isActive = !this.isActive;
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-show-more", {
+      "ed-is-active": this.isActive === !0
+    });
+    return c`
+      <div class="${t}">
+        <div class="ed-c-show-more__panel">
+          <div class="ed-c-show-more__shown">
+            <slot name="shown"></slot>
+          </div>
+          <div class="ed-c-show-more__hidden">
+            <slot name="hidden"></slot>
+          </div>
+        </div>
+        <ed-button
+          @click=${this.handleClick}
+          class="ed-c-show-more__button"
+          variant="bare"
+          text="${this.isActive ? this.hideButtonText : this.buttonText}"
+          iconPosition="after"
+          iconName="${this.isActive ? "minus" : "add"}"
+        ></ed-button>
+      </div>
+    `;
+  }
+}
+d([
+  r({ type: Boolean })
+], o.prototype, "isActive");
+d([
+  r()
+], o.prototype, "buttonText");
+d([
+  r()
+], o.prototype, "hideButtonText");
+customElements.get("ed-show-more") === void 0 && customElements.define("ed-show-more", o);
+export {
+  o as EdShowMore
+};

package/components/skeleton/skeleton.d.ts

@@ -0,0 +1,31 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdSkeleton extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Style variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**sm** renders a skeleton smaller in height than the default</li>
+     * <li>**lg** renders a skeleton larger in height than the default</li>
+     * <li>**xl** renders a skeleton larger in height than the `lg` variant</li>
+     * <li>**xxl** renders a skeleton larger in height than the `xl` variant</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    size?: 'sm' | 'lg' | 'xl' | 'xxl';
+    /**
+     * Width property
+     * 1) By default, the width is set to 100%. This property overrides the default for customization.
+     */
+    width?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-skeleton': EdSkeleton;
+    }
+}
+//# sourceMappingURL=skeleton.d.ts.map

package/components/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;;;;OAUG;IAEH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAElC;;;OAGG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM;CASP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/components/skeleton/skeleton.js

@@ -0,0 +1,33 @@
+import { unsafeCSS as a, html as m } from "lit";
+import { property as l } 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-skeleton{position:relative;padding:1rem;width:100%;background:linear-gradient(-90deg,#f9f9f9,#e1e1e6,#f9f9f9);background-size:400% 400%;animation:pulse 1.25s linear infinite}.ed-c-skeleton--small{padding:.5rem}.ed-c-skeleton--large{padding:2rem 1rem}.ed-c-skeleton--xl{padding:6rem 1rem}.ed-c-skeleton--xxl{padding:12rem 1rem}@keyframes pulse{0%{background-position:0% 0%}to{background-position:-135% 0%}}";
+var f = Object.defineProperty, d = (s, t, i, g) => {
+  for (var e = void 0, o = s.length - 1, r; o >= 0; o--)
+    (r = s[o]) && (e = r(t, i, e) || e);
+  return e && f(t, i, e), e;
+};
+class n extends p {
+  static get styles() {
+    return a(c.toString());
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-skeleton", {
+      "ed-c-skeleton--small": this.size == "sm",
+      "ed-c-skeleton--large": this.size == "lg",
+      "ed-c-skeleton--xl": this.size == "xl",
+      "ed-c-skeleton--xxl": this.size == "xxl"
+    });
+    return m` <div class="${t}" style="width: ${this.width};"></div> `;
+  }
+}
+d([
+  l()
+], n.prototype, "size");
+d([
+  l()
+], n.prototype, "width");
+customElements.get("ed-skeleton") === void 0 && customElements.define("ed-skeleton", n);
+export {
+  n as EdSkeleton
+};

package/components/tab/tab.d.ts

@@ -0,0 +1,45 @@
+import { TemplateResult } from 'lit';
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * An example element.
+ *
+ */
+export declare class EdTab extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Aria labelledby property
+     * 1) Used to connect tab trigger and tab panel for accessibility
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Tab URL
+     * 1) Set to the id to connect the tab trigger to the tab panel
+     *
+     * @required
+     */
+    href: string;
+    /**
+     * Tab ID
+     * 1) Used to connect the href of the tab trigger to the panel
+     */
+    tabId?: string;
+    /**
+     * Set tab label property
+     */
+    private _label?;
+    /**
+     * Sets the value of the tab label using the `label` attribute
+     */
+    set label(value: TemplateResult | string);
+    /**
+     * Gets the value of the tab text
+     */
+    get label(): TemplateResult | string;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-ta': EdTab;
+    }
+}
+//# sourceMappingURL=tab.d.ts.map

package/components/tab/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/tab/tab.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;;GAGG;AACH,qBAAa,KAAM,SAAQ,SAAS;IAClC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,CAA0B;IAEzC;;OAEG;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,EAEvC;IAED;;OAEG;IACH,IAAI,KAAK,IAPQ,cAAc,GAAG,MAAM,CASvC;IAED,MAAM;CASP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,KAAK,CAAC;KAChB;CACF"}

package/components/tab/tab.js

@@ -0,0 +1,47 @@
+import { unsafeCSS as n, html as b } from "lit";
+import { property as l } from "lit/decorators.js";
+import { E as p } 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-tab{padding:0;display:var(--ed-tab-hidden, block)}";
+var m = Object.defineProperty, o = (a, e, i, f) => {
+  for (var t = void 0, s = a.length - 1, d; s >= 0; s--)
+    (d = a[s]) && (t = d(e, i, t) || t);
+  return t && m(e, i, t), t;
+};
+class r extends p {
+  static get styles() {
+    return n(h);
+  }
+  /**
+   * Sets the value of the tab label using the `label` attribute
+   */
+  set label(e) {
+    this._label = e;
+  }
+  /**
+   * Gets the value of the tab text
+   */
+  get label() {
+    return this.getAttribute("label") || this._label;
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-tab", {});
+    return b`
+      <div id=${this.href} class="${e}" role="tabpanel" aria-labelledby=${this.ariaLabelledBy}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+o([
+  l()
+], r.prototype, "ariaLabelledBy");
+o([
+  l()
+], r.prototype, "href");
+o([
+  l()
+], r.prototype, "tabId");
+customElements.get("ed-tab") === void 0 && customElements.define("ed-tab", r);
+export {
+  r as EdTab
+};

package/components/table/table.d.ts

@@ -0,0 +1,33 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The table content
+ */
+export declare class EdTable extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Style variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**zebra** renders a table with alternating background colors every other row</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'zebra';
+    /**
+     * Hover rows variant
+     * 1) If set to true, rows can be hovered over and change color to help readability
+     */
+    hoverRows?: boolean;
+    /**
+     * Full-width variant
+     * 1) Table expands to the full width of its container when set to `true`
+     */
+    fullWidth?: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-table': EdTable;
+    }
+}
+//# sourceMappingURL=table.d.ts.map

package/components/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/table/table.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,MAAM;CAaP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}