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

package/components/table/table.js

@@ -0,0 +1,39 @@
+import { unsafeCSS as h, html as b } from "lit";
+import { property as l } from "lit/decorators.js";
+import { E as c } from "../EdElement.js";
+const i = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:contents}.ed-c-table{border-collapse:collapse;min-width:var(--ed-table-min-width)}.ed-c-table--full-width{width:100%}.ed-c-table--zebra{--ed-table-row-even-background: var(--ed-theme-color-background-subtle);--ed-table-row-even-hover-background: var(--ed-theme-color-background-subtle-hover)}.ed-c-table--hover-rows{--ed-table-row-hover-background: var(--ed-theme-color-background-subtle);--ed-table-row-even-hover-background: var(--ed-theme-color-background-subtle)}";
+var u = Object.defineProperty, s = (r, t, d, m) => {
+  for (var e = void 0, a = r.length - 1, n; a >= 0; a--)
+    (n = r[a]) && (e = n(t, d, e) || e);
+  return e && u(t, d, e), e;
+};
+class o extends c {
+  static get styles() {
+    return h(i);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-table", {
+      "ed-c-table--zebra": this.variant === "zebra",
+      "ed-c-table--hover-rows": this.hoverRows === !0,
+      "ed-c-table--full-width": this.fullWidth === !0
+    });
+    return b`
+      <table class=${t}>
+        ${b`<slot></slot>`}
+      </table>
+    `;
+  }
+}
+s([
+  l()
+], o.prototype, "variant");
+s([
+  l({ type: Boolean })
+], o.prototype, "hoverRows");
+s([
+  l({ type: Boolean })
+], o.prototype, "fullWidth");
+customElements.get("ed-table") === void 0 && customElements.define("ed-table", o);
+export {
+  o as EdTable
+};

package/components/table-body/table-body.d.ts

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

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

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

package/components/table-body/table-body.js

@@ -0,0 +1,20 @@
+import { unsafeCSS as o, html as e } from "lit";
+import { E as s } 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}:host{display:contents;--ed-table-header-cell-border-bottom-color: var(--ed-theme-color-border-default);--ed-table-cell-border-bottom-color: var(--ed-theme-color-border-default)}";
+class l extends s {
+  static get styles() {
+    return o(r);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-table-body", {});
+    return e`
+      <tbody class="${t}">
+        ${e`<slot></slot>`}
+      </tbody>
+    `;
+  }
+}
+customElements.get("ed-table-body") === void 0 && customElements.define("ed-table-body", l);
+export {
+  l as EdTableBody
+};

package/components/table-cell/table-cell.d.ts

@@ -0,0 +1,38 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The table cell content
+ */
+export declare class EdTableCell extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Align variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**right** renders a table cell with horizontally right aligned content</li>
+     * <li>**center** renders a table cell with horizontally center aligned content</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    align?: 'right' | 'center';
+    /**
+     * Vertical align variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**center** Vertically aligns content to the middle of the cell</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    verticalAlign?: 'center';
+    /**
+     * Column span prop
+     * 1) Used for spanning cells to a set number of columns
+     */
+    colSpan?: number;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-table-cell': EdTableCell;
+    }
+}
+//# sourceMappingURL=table-cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/table-cell/table-cell.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;;OAQG;IAEH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE3B;;;;;;;OAOG;IAEH,aAAa,CAAC,EAAE,QAAQ,CAAC;IAEzB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM;CASP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/components/table-cell/table-cell.js

@@ -0,0 +1,36 @@
+import { unsafeCSS as c, html as s } from "lit";
+import { ifDefined as p } from "lit-html/directives/if-defined.js";
+import { property as o } from "lit/decorators.js";
+import { E as h } 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}:host{display:contents}.ed-c-table__cell{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);padding:.5rem .75rem;border-bottom:1px solid var(--ed-table-cell-border-bottom-color)}.ed-c-table__cell--align-center{text-align:center}.ed-c-table__cell--align-right{text-align:right}.ed-c-table__cell--valign-center{vertical-align:middle}";
+var g = Object.defineProperty, n = (r, t, i, f) => {
+  for (var e = void 0, a = r.length - 1, d; a >= 0; a--)
+    (d = r[a]) && (e = d(t, i, e) || e);
+  return e && g(t, i, e), e;
+};
+class l extends h {
+  static get styles() {
+    return c(m);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-table__cell", {
+      "ed-c-table__cell--align-right": this.align === "right",
+      "ed-c-table__cell--align-center": this.align === "center",
+      "ed-c-table__cell--valign-center": this.verticalAlign === "center"
+    });
+    return s` <td class="${t}" colspan="${p(this.colSpan)}">${s` <slot></slot> `}</td> `;
+  }
+}
+n([
+  o()
+], l.prototype, "align");
+n([
+  o()
+], l.prototype, "verticalAlign");
+n([
+  o({ type: Number })
+], l.prototype, "colSpan");
+customElements.get("ed-table-cell") === void 0 && customElements.define("ed-table-cell", l);
+export {
+  l as EdTableCell
+};

package/components/table-header/table-header.d.ts

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

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

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

package/components/table-header/table-header.js

@@ -0,0 +1,20 @@
+import { unsafeCSS as o, html as e } from "lit";
+import { E as r } from "../EdElement.js";
+const s = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:contents}::slotted(ed-table-row){--ed-table-header-cell-border-bottom-color: var(--ed-theme-color-border-default);--ed-table-row-hover-background: none;--ed-table-row-even-hover-background: none}";
+class a extends r {
+  static get styles() {
+    return o(s);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-table__header", {});
+    return e`
+      <thead class="${t}">
+        ${e`<slot></slot>`}
+      </thead>
+    `;
+  }
+}
+customElements.get("ed-table-header") === void 0 && customElements.define("ed-table-header", a);
+export {
+  a as EdTableHeader
+};

package/components/table-header-cell/table-header-cell.d.ts

@@ -0,0 +1,62 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The table header cell content
+ */
+export declare class EdTableHeaderCell extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Column span prop
+     * 1) Used for spanning cells to a set number of columns
+     */
+    colSpan?: number;
+    /**
+     * Align variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**right** renders a table cell with horizontally right aligned content</li>
+     * <li>**center** renders a table cell with horizontally center aligned content</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    align?: 'right' | 'center';
+    /**
+     * Vertical align variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**center** Vertically aligns content to the middle of the cell</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    verticalAlign?: 'center';
+    /**
+     * Behavior variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**sortable** renders a button inside the cell to trigger sortable table columns</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    behavior?: 'sortable';
+    /**
+     * Sort direction
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**ascending** renders a delta-up icon to represent ascending order of column cells</li>
+     * <li>**descending** renders a delta-down icon to represent descending order of column cells</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    sortDirection?: 'ascending' | 'descending';
+    /**
+     * Sort change
+     * 1) Used to toggle the sort direction to render the various table column order states for the button
+     */
+    sortChange(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-table-header-cell': EdTableHeaderCell;
+    }
+}
+//# sourceMappingURL=table-header-cell.d.ts.map

package/components/table-header-cell/table-header-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/table-header-cell/table-header-cell.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;IAC9C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;;OAQG;IAEH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE3B;;;;;;;OAOG;IAEH,aAAa,CAAC,EAAE,QAAQ,CAAC;IAEzB;;;;;;;OAOG;IAEH,QAAQ,CAAC,EAAE,UAAU,CAAC;IAEtB;;;;;;;;OAQG;IAEH,aAAa,CAAC,EAAE,WAAW,GAAG,YAAY,CAAgB;IAE1D;;;OAGG;IACH,UAAU;IAQV,MAAM;CAyBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}

package/components/table-header-cell/table-header-cell.js

@@ -0,0 +1,62 @@
+import { unsafeCSS as h, html as a } from "lit";
+import { ifDefined as c } from "lit-html/directives/if-defined.js";
+import { property as l } from "lit/decorators.js";
+import { E as g } from "../EdElement.js";
+const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:contents}.ed-c-table__header-cell{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);padding:.5rem .75rem;min-width:var(--ed-table-header-cell-min-width);text-align:left;border-bottom:1px solid var(--ed-table-header-cell-border-bottom-color)}.ed-c-table__header-cell-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;appearance:none;border:0;background:0;margin:0;padding:0;width:100%;cursor:pointer}.ed-c-table__header-cell-button ed-icon{margin-left:.5rem;position:relative;top:4px;--ed-icon-height: .5625rem ;--ed-icon-width: .5625rem }.ed-c-table__header-cell--align-center{text-align:center}.ed-c-table__header-cell--align-right{text-align:right}.ed-c-table__header-cell--valign-center{vertical-align:middle}";
+var m = Object.defineProperty, r = (n, i, d, b) => {
+  for (var e = void 0, o = n.length - 1, s; o >= 0; o--)
+    (s = n[o]) && (e = s(i, d, e) || e);
+  return e && m(i, d, e), e;
+};
+class t extends g {
+  constructor() {
+    super(...arguments), this.sortDirection = "descending";
+  }
+  static get styles() {
+    return h(p);
+  }
+  /**
+   * Sort change
+   * 1) Used to toggle the sort direction to render the various table column order states for the button
+   */
+  sortChange() {
+    this.sortDirection === "ascending" ? this.sortDirection = "descending" : this.sortDirection = "ascending";
+  }
+  render() {
+    const i = this.componentClassNames("ed-c-table__header-cell", {
+      "ed-c-table__header-cell--align-right": this.align === "right",
+      "ed-c-table__header-cell--align-center": this.align === "center",
+      "ed-c-table__header-cell--valign-center": this.verticalAlign === "center",
+      "ed-c-table__header-cell--sortable": this.behavior === "sortable",
+      "ed-c-table__header-cell--ascending": this.sortDirection === "ascending",
+      "ed-c-table__header-cell--descending": this.sortDirection === "descending"
+    });
+    return a`
+      <th class="${i}" colspan="${c(this.colSpan)}">
+        ${this.behavior === "sortable" ? a`<button class="ed-c-table__header-cell-button" @click=${this.sortChange}>
+              <slot></slot>
+              ${this.sortDirection === "descending" ? a`<ed-icon name="delta-down"></ed-icon>` : this.sortDirection === "ascending" ? a`<ed-icon name="delta-up"></ed-icon>` : ""}
+            </button>` : a`<slot></slot>`}
+      </th>
+    `;
+  }
+}
+r([
+  l({ type: Number })
+], t.prototype, "colSpan");
+r([
+  l()
+], t.prototype, "align");
+r([
+  l()
+], t.prototype, "verticalAlign");
+r([
+  l()
+], t.prototype, "behavior");
+r([
+  l()
+], t.prototype, "sortDirection");
+customElements.get("ed-table-header-cell") === void 0 && customElements.define("ed-table-header-cell", t);
+export {
+  t as EdTableHeaderCell
+};

package/components/table-object/table-object.d.ts

@@ -0,0 +1,66 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The contained element, usually a table or `ed-table`
+ * @slot header - Content to appear above the table
+ * @slot footer - Content to appear below the table
+ */
+export declare class EdTableObject extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * isStart state
+     * 1) Controls the beginning gradient on the overflow list
+     */
+    isStart?: boolean;
+    /**
+     * isEnd state
+     * 1) Controls the ending gradient on the overflow list
+     */
+    isEnd?: boolean;
+    /**
+     * Align variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**overflow** creates the overflow gradient treatment on the table object.</li>
+     * <li>**overflow-small** starts the overflow treatment at a smaller viewport than `overflow`</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    behavior?: 'overflow' | 'overflow-small';
+    /**
+     * Initialization
+     */
+    constructor();
+    /**
+     * Connected callback lifecycle
+     * 1) Add globalThis resize event listener
+     */
+    connectedCallback(): void;
+    /**
+     * Disconnected callback lifecycle
+     * 1) Remove globalThis resize event listener
+     */
+    disconnectedCallback(): void;
+    /**
+     * 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(): void;
+    /**
+     * Set right and left gradients on tables
+     * 1) Target the actual table inside table object body
+     * 2) Get the width of the table offscreen when table overflows
+     * 3) If table width is less than or equal to table object body width, remove all shadows
+     * 4) If table object body inner scroll isn't all the way to the left or to the right, turn all shadows on
+     * 5) If table body inner scroll is >= to width of table offscreen, turn off right shadow and turn left shadow on
+     * 6) Else, set the right shadow to true and the left shadow to false
+     */
+    setShadows(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-table-object': EdTableObject;
+    }
+}
+//# sourceMappingURL=table-object.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-object.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/table-object/table-object.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;;;GAIG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;;;;;OAQG;IAEH,QAAQ,CAAC,EAAE,UAAU,GAAG,gBAAgB,CAAC;IAEzC;;OAEG;;IAOH;;;OAGG;IACH,iBAAiB;IASjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;OAIG;IACH,QAAQ;IAIR;;;;;;;;OAQG;IACH,UAAU;IA6BV,MAAM;CA0BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/components/table-object/table-object.js

@@ -0,0 +1,96 @@
+import { unsafeCSS as n, html as a } from "lit";
+import { state as b, property as h } from "lit/decorators.js";
+import { E as f } from "../EdElement.js";
+const v = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:contents}.ed-c-table-object{overflow:hidden;width:100%}.ed-c-table-object--overflow-small{--ed-table-min-width: 750px}.ed-c-table-object--overflow{--ed-table-header-cell-min-width: 7rem}.ed-c-table-object__body{position:relative}.ed-c-table-object.ed-is-overflow-left .ed-c-table-object__body:before{content:"";display:block;position:absolute;background:linear-gradient(to right,var(--ed-theme-color-background-default),rgba(255,255,255,.001) 30%);height:100%;top:0;left:0;width:3rem;z-index:1}.ed-c-table-object.ed-is-overflow-right .ed-c-table-object__body:after{content:"";display:block;position:absolute;background:linear-gradient(to right,rgba(255,255,255,.001) 30%,var(--ed-theme-color-background-default));height:100%;top:0;right:0;width:3rem;z-index:1}.ed-c-table-object__body-inner{overflow:auto;width:100%}';
+var m = Object.defineProperty, c = (d, e, o, s) => {
+  for (var t = void 0, l = d.length - 1, i; l >= 0; l--)
+    (i = d[l]) && (t = i(e, o, t) || t);
+  return t && m(e, o, t), t;
+};
+class r extends f {
+  static get styles() {
+    return n(v);
+  }
+  /**
+   * Initialization
+   */
+  constructor() {
+    super(), this.setShadows = this.setShadows.bind(this);
+  }
+  /**
+   * Connected callback lifecycle
+   * 1) Add globalThis resize event listener
+   */
+  connectedCallback() {
+    super.connectedCallback(), setTimeout(() => {
+      this.setShadows();
+    }, 1), globalThis.addEventListener("resize", this.setShadows);
+  }
+  /**
+   * Disconnected callback lifecycle
+   * 1) Remove globalThis resize event listener
+   */
+  disconnectedCallback() {
+    globalThis.removeEventListener("resize", this.setShadows), super.disconnectedCallback();
+  }
+  /**
+   * 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.setShadows();
+  }
+  /**
+   * Set right and left gradients on tables
+   * 1) Target the actual table inside table object body
+   * 2) Get the width of the table offscreen when table overflows
+   * 3) If table width is less than or equal to table object body width, remove all shadows
+   * 4) If table object body inner scroll isn't all the way to the left or to the right, turn all shadows on
+   * 5) If table body inner scroll is >= to width of table offscreen, turn off right shadow and turn left shadow on
+   * 6) Else, set the right shadow to true and the left shadow to false
+   */
+  setShadows() {
+    const e = this.querySelector("ed-table")?.shadowRoot?.querySelector(".ed-c-table"), o = this.shadowRoot?.querySelector(".ed-c-table-object__body"), s = this.shadowRoot?.querySelector(".ed-c-table-object__body-inner");
+    if (e && o && s) {
+      const t = o.clientWidth, l = e.clientWidth, i = e.clientWidth - o.clientWidth;
+      l <= t ? (this.isEnd = !1, this.isStart = !1) : s.scrollLeft > 0 && s.scrollLeft < i ? (this.isEnd = !0, this.isStart = !0) : s.scrollLeft >= i ? (this.isEnd = !1, this.isStart = !0) : (this.isEnd = !0, this.isStart = !1);
+    }
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-table-object", {
+      "ed-c-table-object--overflow": this.behavior === "overflow",
+      "ed-c-table-object--overflow-small": this.behavior === "overflow-small",
+      "ed-is-overflow-left": this.isStart === !0,
+      "ed-is-overflow-right": this.isEnd === !0
+    });
+    return a`
+      <div class="${e}">
+        ${this.slotNotEmpty("header") && a`<div class="ed-c-table-object__header">
+          <slot name="header"></slot>
+        </div>`}
+        <div class="ed-c-table-object__body">
+          <div class="ed-c-table-object__body-inner" @scroll=${this.onScroll}>
+            <slot></slot>
+          </div>
+        </div>
+        ${this.slotNotEmpty("footer") && a`<div class="ed-c-table-object__footer">
+          <slot name="footer"></slot>
+        </div>`}
+      </div>
+    `;
+  }
+}
+c([
+  b()
+], r.prototype, "isStart");
+c([
+  b()
+], r.prototype, "isEnd");
+c([
+  h()
+], r.prototype, "behavior");
+customElements.get("ed-table-object") === void 0 && customElements.define("ed-table-object", r);
+export {
+  r as EdTableObject
+};

package/components/table-row/table-row.d.ts

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

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

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

package/components/table-row/table-row.js

@@ -0,0 +1,20 @@
+import { unsafeCSS as t, html as e } from "lit";
+import { E as r } from "../EdElement.js";
+const s = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}:host{display:contents}.ed-c-table-row{background:none}.ed-c-table-row:hover,.ed-c-table-row:focus{background:var(--ed-table-row-hover-background)}:host(:nth-of-type(even)) .ed-c-table-row{background:var(--ed-table-row-even-background)}:host(:nth-of-type(even)) .ed-c-table-row:hover,:host(:nth-of-type(even)) .ed-c-table-row:focus{background:var(--ed-table-row-even-hover-background)}";
+class n extends r {
+  static get styles() {
+    return t(s);
+  }
+  render() {
+    const o = this.componentClassNames("ed-c-table-row", {});
+    return e`
+      <tr class="${o}">
+        ${e`<slot></slot>`}
+      </tr>
+    `;
+  }
+}
+customElements.get("ed-table-row") === void 0 && customElements.define("ed-table-row", n);
+export {
+  n as EdTableRow
+};

package/components/tabs/tabs.d.ts

@@ -0,0 +1,101 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+import { EdTab } from '../tab/tab';
+/**
+ * An example element.
+ *
+ */
+export declare class EdTabs extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Inverted variant
+     * 1) Used on dark backgrounds
+     */
+    inverted?: boolean;
+    /**
+     * Active tab state
+     * 1) Sets the initial active tab (e.g. 0 sets the first tab, 1 sets the second tab, etc.)
+     */
+    activeIndex?: number;
+    /**
+     * Active tab state
+     */
+    activeTab?: Element;
+    isStart?: boolean;
+    isEnd?: boolean;
+    /**
+     * Align variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**center** aligns the tabs in the center of the screen on medium/large screens.</li>
+     * <li>**right** aligns the tabs on the right side of the screen on medium/large screens.</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    align?: 'center' | 'right';
+    /**
+     * Initialize
+     * 1) Activate the first tab, by default
+     */
+    constructor();
+    /**
+     * 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(tabItem: EdTab | null | undefined, shouldFocus: boolean, event: MouseEvent): void;
+    /**
+     * A handler to proxy key presses on a tabitem
+     * 1) Use left and right arrows to select previous/next item
+     */
+    handleKeyUp(event: KeyboardEvent): Promise<void>;
+    /**
+     * 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(): boolean;
+    /**
+     * 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(): void;
+    /**
+     * Set isStart state
+     * 1) If position from left is greater than 0, set isStart to false. Otherwise set isStart to true.
+     */
+    setIsStart(): void;
+    /**
+     * Set isEnd state
+     * 1) If last child is fully in the viewport, set isEnd to true. Otherwise, set isEnd to false.
+     */
+    setIsEnd(): void;
+    onResize(): void;
+    /**
+     * 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(): void;
+    /**
+     * Disconnected callback lifecycle
+     * 1) Remove window resize event listener
+     */
+    disconnectedCallback(): void;
+    /**
+     * A render block for the tab list items
+     * 1) For all tab items, render a list item with a trigger inside
+     */
+    renderTabListItems(): import('lit-html').TemplateResult<1>[];
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-tabs': EdTabs;
+    }
+}
+//# sourceMappingURL=tabs.d.ts.map

package/components/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAKtF,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAGnC;;;GAGG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,UAAS;IAElB;;;OAGG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,OAAO,CAAC,EAAE,OAAO,CAAQ;IAGzB,KAAK,CAAC,EAAE,OAAO,CAAS;IAExB;;;;;;;;OAQG;IAEH,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAE3B;;;OAGG;;IASH;;;;;;;OAOG;IACH,WAAW,CAAC,OAAO,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,EAAE,WAAW,SAAQ,EAAE,KAAK,EAAE,UAAU;IA8BrF;;;OAGG;IACG,WAAW,CAAC,KAAK,EAAE,aAAa;IAmBtC;;;;;OAKG;IACH,YAAY;IAMZ;;;;OAIG;IACH,QAAQ;IAKR;;;OAGG;IACH,UAAU;IAQV;;;OAGG;IACH,QAAQ;IAQR,QAAQ;IAKR;;;;OAIG;IACH,iBAAiB;IAsBjB;;;OAGG;IACH,oBAAoB;IAKpB;;;OAGG;IACH,kBAAkB;IA4BlB,MAAM;CA0BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}