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

package/components/badge/badge.js

@@ -0,0 +1,33 @@
+import l from "classnames";
+import { unsafeCSS as c, html as g } from "lit";
+import { property as i } 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}.ed-c-badge{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);background:var(--ed-theme-color-background-utility-info);color:var(--ed-theme-color-content-default);display:inline-flex;border-radius:var(--ed-theme-border-radius-md);padding:.5rem}.ed-c-badge--success{background:var(--ed-theme-color-background-utility-success)}.ed-c-badge--warning{background:var(--ed-theme-color-background-utility-warning)}.ed-c-badge--error{background:var(--ed-theme-color-background-utility-error)}";
+var f = Object.defineProperty, s = (r, t, d, u) => {
+  for (var e = void 0, a = r.length - 1, n; a >= 0; a--)
+    (n = r[a]) && (e = n(t, d, e) || e);
+  return e && f(t, d, e), e;
+};
+class o extends h {
+  static get styles() {
+    return c(m.toString());
+  }
+  render() {
+    const t = l("ed-c-badge", {
+      "ed-c-badge--success": this.variant === "success",
+      "ed-c-badge--warning": this.variant === "warning",
+      "ed-c-badge--error": this.variant === "error"
+    });
+    return g` <div class="${t}">${this.text}</div> `;
+  }
+}
+s([
+  i()
+], o.prototype, "text");
+s([
+  i()
+], o.prototype, "variant");
+customElements.get("ed-badge") === void 0 && customElements.define("ed-badge", o);
+export {
+  o as EdBadge
+};

package/components/band/band.d.ts

@@ -0,0 +1,24 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The band content
+ */
+export declare class EdBand extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Gradient variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**brand** renders the band with the brand token background</li>
+     * <li>**brand-knockout** renders the band with the brand-knockout token background</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'brand' | 'brand-knockout';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-band': EdBand;
+    }
+}
+//# sourceMappingURL=band.d.ts.map

package/components/band/band.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"band.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/band/band.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAC;IAErC,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/components/band/band.js

@@ -0,0 +1,32 @@
+import { unsafeCSS as s, html as c } from "lit";
+import { property as b } from "lit/decorators.js";
+import { E as i } 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-band{background:var(--ed-theme-color-background-subtle);padding:1.5rem 0}@media all and (min-width:75rem){.ed-c-band{padding:2rem 0}}.ed-c-band--brand{background:var(--ed-theme-color-background-brand)}.ed-c-band--brand-knockout{color:var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand-knockout)}";
+var l = Object.defineProperty, u = (r, n, o, h) => {
+  for (var e = void 0, d = r.length - 1, t; d >= 0; d--)
+    (t = r[d]) && (e = t(n, o, e) || e);
+  return e && l(n, o, e), e;
+};
+class a extends i {
+  static get styles() {
+    return s(m);
+  }
+  render() {
+    const n = this.componentClassNames("ed-c-band", {
+      "ed-c-band--brand": this.variant === "brand",
+      "ed-c-band--brand-knockout": this.variant === "brand-knockout"
+    });
+    return c`
+      <div class="${n}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+u([
+  b()
+], a.prototype, "variant");
+customElements.get("ed-band") === void 0 && customElements.define("ed-band", a);
+export {
+  a as EdBand
+};

package/components/box/box.d.ts

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

package/components/box/box.d.ts.map

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

package/components/box/box.js

@@ -0,0 +1,20 @@
+import { unsafeCSS as o, html as r } from "lit";
+import { E as t } from "../EdElement.js";
+const d = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-box{flex-direction:column;padding:1rem;height:100%;width:100%;border-width:var(--ed-theme-border-width-sm);border-style:solid;border-color:var(--ed-theme-color-border-subtle);border-radius:var(--ed-theme-border-radius-md);box-shadow:var(--ed-theme-box-shadow-md);background:var(--ed-theme-color-background-default)}";
+class s extends t {
+  static get styles() {
+    return o(d.toString());
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-box", {});
+    return r`
+      <div class="${e}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.get("ed-box") === void 0 && customElements.define("ed-box", s);
+export {
+  s as EdBox
+};

package/components/breadcrumbs/breadcrumbs.d.ts

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

package/components/breadcrumbs/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/breadcrumbs/breadcrumbs.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;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,22 @@
+import { unsafeCSS as s, html as t } from "lit";
+import { E as r } 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-breadcrumbs__list{display:flex;margin:-.5rem 0 0 -.5rem;padding:0;list-style:none}.ed-c-breadcrumbs__list ::slotted(ed-breadcrumbs-item){margin-left:.5rem;margin-top:.5rem}";
+class o extends r {
+  static get styles() {
+    return s(m.toString());
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-breadcrumbs", {});
+    return t`
+      <nav class="${e}">
+        <ol class="ed-c-breadcrumbs__list">
+          <slot></slot>
+        </ol>
+      </nav>
+    `;
+  }
+}
+customElements.get("ed-breadcrumbs") === void 0 && customElements.define("ed-breadcrumbs", o);
+export {
+  o as EdBreadcrumbs
+};

package/components/breadcrumbs-item/breadcrumbs-item.d.ts

@@ -0,0 +1,31 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdBreadcrumbsItem extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Item link URL
+     */
+    href?: string;
+    /**
+     * Target attribute
+     * 1) Default target uses the same tab when the link is clicked
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**_blank** opens a link in a new window/tab</li>
+     * <li>**_self** opens a link in the same tab/frame </li>
+     * <li>**_parent** opens the link in a parent frame </li>
+     * <li>**_top** opens the link in the full body of the window</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-breadcrumbs-item': EdBreadcrumbsItem;
+    }
+}
+//# sourceMappingURL=breadcrumbs-item.d.ts.map

package/components/breadcrumbs-item/breadcrumbs-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/breadcrumbs-item/breadcrumbs-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;IAC9C,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;OAWG;IAEH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAEjD,MAAM;CAcP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/components/breadcrumbs-item/breadcrumbs-item.js

@@ -0,0 +1,36 @@
+import { unsafeCSS as c, html as s } from "lit";
+import { ifDefined as m } from "lit-html/directives/if-defined.js";
+import { property as d } from "lit/decorators.js";
+import { E as h } from "../EdElement.js";
+const b = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-breadcrumbs__item{display:inline-flex;align-items:center;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)}:host(:last-child) .ed-c-breadcrumbs__item{color:var(--ed-theme-color-content-subtle)}.ed-c-breadcrumbs__link{margin-right:.5rem;text-decoration:none;color:var(--ed-theme-color-content-link-default)}.ed-c-breadcrumbs__link:hover,.ed-c-breadcrumbs__link:focus{text-decoration:underline;color:var(--ed-theme-color-content-link-hover)}ed-icon{--ed-icon-fill: var(--ed-theme-color-content-subtle);--ed-icon-height: .5rem;--ed-icon-width: .5rem}";
+var f = Object.defineProperty, l = (r, t, n, p) => {
+  for (var e = void 0, o = r.length - 1, a; o >= 0; o--)
+    (a = r[o]) && (e = a(t, n, e) || e);
+  return e && f(t, n, e), e;
+};
+class i extends h {
+  static get styles() {
+    return c(b.toString());
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-breadcrumbs__item", {});
+    return s`
+      <li class="${t}">
+        ${this.href ? s`<a class="ed-c-breadcrumbs__link" href=${m(this.href)} target=${m(this.target)}>
+                <slot></slot>
+              </a>
+              <ed-icon name="keyboard-arrow-right"> </ed-icon>` : s`<slot></slot>`}
+      </li>
+    `;
+  }
+}
+l([
+  d()
+], i.prototype, "href");
+l([
+  d()
+], i.prototype, "target");
+customElements.get("ed-breadcrumbs-item") === void 0 && customElements.define("ed-breadcrumbs-item", i);
+export {
+  i as EdBreadcrumbsItem
+};

package/components/button/button.d.ts

@@ -0,0 +1,93 @@
+import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/EdFormElement';
+export declare class EdButton extends EdFormElement {
+    static formAssociated: boolean;
+    static get styles(): import('lit').CSSResult;
+    /**
+     * The button text
+     */
+    text?: string;
+    /**
+     * Style variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**primary** renders the button used for primary actions</li>
+     * <li>**danger** renders the button used for caution actions</li>
+     * <li>**bare** renders a button a bare background and no border</li>
+     * <li>**link** renders a button that looks like a text link</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'primary' | 'danger' | 'bare' | 'link';
+    /**
+     * Disabled attribute
+     */
+    disabled?: boolean;
+    /**
+     * Target attribute for a link (i.e. set to _blank to open in new tab)
+     * - **_blank** yields a link that opens in a new tab
+     * - **_self** yields a link that loads the URL into the same browsing context as the current one. This is the default behavior
+     * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.
+     *   If there is no parent, this behaves the same way as _self
+     * - **_top** yields a link that loads the URL into the top-level browsing context. If there is no parent, this behaves the same way as _self.
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Strong variation for dark backgrounds
+     */
+    strong?: boolean;
+    /**
+     * URL if this is an <a> element - this swaps <button> for <a>
+     */
+    href?: string;
+    /**
+     * Icon name
+     */
+    iconName?: string;
+    /**
+     * Icon position
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**top** places the icon on top of the button text</li>
+     * <li>**before** places the icon before the button text</li>
+     * <li>**after** places the icon after the button text</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    iconPosition?: 'top' | 'before' | 'after';
+    /**
+     * Size variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**sm** shrinks the button typography and overall size</li>
+     * <li>**lg** increases the button typography size and overall size</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * Visually hide button text (but text is still accessible to assistive technology)
+     * 1) Use this for icon-only buttons for accessibility
+     */
+    hideText?: boolean;
+    /**
+     * Full width button
+     */
+    fullWidth: boolean;
+    /**
+     * Round button
+     */
+    round: boolean;
+    /**
+     * What type of button is this. Defaults to 'button'
+     */
+    type: 'button' | 'submit' | 'reset';
+    field: HTMLButtonElement;
+    clickHandler(): void;
+    formSubmit(): void;
+    formReset(): void;
+    private getIconElement;
+    private createButton;
+    private createAnchorButton;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=button.d.ts.map

package/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAI9F,OAAO,cAAc,CAAC;AAGtB,qBAAa,QAAS,SAAQ,aAAa;IACzC,MAAM,CAAC,cAAc,UAAQ;IAE7B,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;OAUG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAEjD;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IAEH,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAEjD;;OAEG;IAEH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;OASG;IAEH,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAa;IAEtD;;;;;;;;OAQG;IAEH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,KAAK,UAAS;IAEd;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG/C,KAAK,EAAG,iBAAiB,CAAC;IAE1B,YAAY;IAQZ,UAAU;IAYV,SAAS;IAOT,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,kBAAkB;IAW1B,MAAM;CAYP"}

package/components/button/button.js

@@ -0,0 +1,118 @@
+import { E as b } from "../EdFormElement.js";
+import { unsafeCSS as m, nothing as a, html as l } from "lit";
+import { property as r, query as u } from "lit/decorators.js";
+import { ifDefined as p } from "lit-html/directives/if-defined.js";
+import "../icon/icon.js";
+const y = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-u-is-hidden{display:none!important;visibility:hidden!important}.ed-u-is-vishidden{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}@media all and (min-width:23.4375rem){.ed-u-hide-sm{display:none!important}}@media all and (min-width:48rem){.ed-u-hide-md{display:none!important}}@media all and (min-width:60rem){.ed-u-hide-lg{display:none!important}}@media all and (min-width:75rem){.ed-u-hide-xl{display:none!important}}@media all and (max-width:23.4375rem){.ed-u-show-sm{display:none!important}}@media all and (max-width:48rem){.ed-u-show-md{display:none!important}}@media all and (max-width:60rem){.ed-u-show-lg{display:none!important}}@media all and (max-width:75rem){.ed-u-show-xl{display:none!important}}.ed-c-button{font-family:var(--ed-theme-typography-button-default-font-family);font-weight:var(--ed-theme-typography-button-default-font-weight);font-size:var(--ed-theme-typography-button-default-font-size);line-height:var(--ed-theme-typography-button-default-line-height);letter-spacing:var(--ed-theme-typography-button-default-letter-spacing);text-transform:var(--ed-theme-typography-button-default-text-transform);display:inline-flex;align-items:center;padding:.75rem 1.75rem;margin:0;background:var(--ed-theme-button-color-background-default);border-width:var(--ed-theme-border-width-md);border-style:solid;border-color:var(--ed-theme-button-color-border-default);border-radius:var(--ed-theme-border-radius-md);color:var(--ed-theme-button-color-content-default);cursor:pointer;white-space:nowrap;transition:all .15s ease}.ed-c-button:hover,.ed-c-button:focus{color:var(--ed-theme-button-color-content-hover);border-color:var(--ed-theme-button-color-border-hover);background:var(--ed-theme-button-color-background-hover);text-decoration:none}.ed-c-button: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-button:active{background-color:var(--ed-theme-button-color-background-active);border-color:var(--ed-theme-button-color-border-active);color:var(--ed-theme-button-color-content-active)}a.ed-c-button{text-decoration:none}.ed-c-button:disabled{background-color:var(--ed-theme-button-color-background-disabled);border-color:var(--ed-theme-button-color-border-disabled);color:var(--ed-theme-button-color-content-disabled);cursor:not-allowed}.ed-c-button:disabled:hover,.ed-c-button:disabled:focus,.ed-c-button:disabled:active{background-color:var(--ed-theme-button-color-background-disabled);border-color:var(--ed-theme-button-color-border-disabled);color:var(--ed-theme-button-color-content-disabled)}.ed-c-button--primary{background-color:var(--ed-theme-button-primary-color-background-default);border-color:var(--ed-theme-button-primary-color-border-default);color:var(--ed-theme-button-primary-color-content-default)}.ed-c-button--primary:hover,.ed-c-button--primary:focus{background-color:var(--ed-theme-button-primary-color-background-hover);border-color:var(--ed-theme-button-primary-color-border-hover);color:var(--ed-theme-button-primary-color-content-hover)}.ed-c-button--primary:active{background-color:var(--ed-theme-button-primary-color-background-active);border-color:var(--ed-theme-button-primary-color-border-active);color:var(--ed-theme-button-primary-color-content-active)}.ed-c-button--primary:disabled{background-color:var(--ed-theme-button-primary-color-background-disabled);border-color:var(--ed-theme-button-primary-color-border-disabled);color:var(--ed-theme-button-primary-color-content-disabled)}.ed-c-button--primary:disabled:hover,.ed-c-button--primary:disabled:focus,.ed-c-button--primary:disabled:active{background-color:var(--ed-theme-button-primary-color-background-disabled);border-color:var(--ed-theme-button-primary-color-border-disabled);color:var(--ed-theme-button-primary-color-content-disabled)}.ed-c-button--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);background-color:transparent;border:none;color:var(--ed-theme-link-color-content-default);padding:0}.ed-c-button--link:hover,.ed-c-button--link:focus{background-color:transparent;border:none;color:var(--ed-theme-link-color-content-hover);text-decoration:underline}.ed-c-button--link:active{background-color:transparent;border:none;color:var(--ed-theme-link-color-content-active)}.ed-c-button--link:visited{color:var(--ed-theme-link-color-content-visited)}.ed-c-button--link:disabled{background-color:transparent;border:none;color:var(--ed-theme-color-content-disabled)}.ed-c-button--link:disabled:hover,.ed-c-button--link:disabled:focus,.ed-c-button--link:disabled:active{background-color:transparent;border:none;color:var(--ed-theme-color-content-disabled)}.ed-c-button--link.ed-c-button--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-button--link.ed-c-button--lg{font-family:var(--ed-theme-typography-body-lg-font-family);font-weight:var(--ed-theme-typography-body-lg-font-weight);font-size:var(--ed-theme-typography-body-lg-font-size);line-height:var(--ed-theme-typography-body-lg-line-height);letter-spacing:var(--ed-theme-typography-body-lg-letter-spacing);text-transform:var(--ed-theme-typography-body-lg-text-transform)}.ed-c-button--bare{padding:0;border:0;background:none;color:var(--ed-theme-color-content-default)}.ed-c-button--bare:hover,.ed-c-button--bare:focus{color:var(--ed-theme-color-content-hover);background:none}.ed-c-button--bare:disabled{color:var(--ed-theme-button-bare-color-content-disabled);background:none;cursor:not-allowed}.ed-c-button--bare:disabled:hover,.ed-c-button--bare:disabled:focus{background:none;color:var(--ed-theme-button-bare-color-content-disabled)}.ed-c-button--full-width{width:100%;justify-content:center;text-align:center}.ed-c-button--sm{font-family:var(--ed-theme-typography-button-sm-font-family);font-weight:var(--ed-theme-typography-button-sm-font-weight);font-size:var(--ed-theme-typography-button-sm-font-size);line-height:var(--ed-theme-typography-button-sm-line-height);letter-spacing:var(--ed-theme-typography-button-sm-letter-spacing);text-transform:var(--ed-theme-typography-button-sm-text-transform);padding:.5rem 1rem}.ed-c-button--sm.ed-c-button--bare{padding:0}.ed-c-button--lg{font-family:var(--ed-theme-typography-button-lg-font-family);font-weight:var(--ed-theme-typography-button-lg-font-weight);font-size:var(--ed-theme-typography-button-lg-font-size);line-height:var(--ed-theme-typography-button-lg-line-height);letter-spacing:var(--ed-theme-typography-button-lg-letter-spacing);text-transform:var(--ed-theme-typography-button-lg-text-transform)}.ed-c-button--lg.ed-c-button--bare{padding:0}ed-icon{--ed-icon-height: .75rem ;--ed-icon-width: .75rem ;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);transform:var(--ed-button-icon-transform, none)}.ed-c-button--sm ed-icon{--ed-icon-height: .5rem ;--ed-icon-width: .5rem }.ed-c-button--lg ed-icon{--ed-icon-height: .875rem ;--ed-icon-width: .875rem }ed-icon+.ed-c-button__text{margin-left:.5rem}.ed-c-button--sm ed-icon+.ed-c-button__text{margin-left:.25rem}.ed-c-button__text:not(.ed-u-is-vishidden)+ed-icon{margin-left:.5rem}.ed-c-button--sm .ed-c-button__text:not(.ed-u-is-vishidden)+ed-icon{margin-left:.25rem}';
+var g = Object.defineProperty, o = (s, e, n, f) => {
+  for (var d = void 0, i = s.length - 1, h; i >= 0; i--)
+    (h = s[i]) && (d = h(e, n, d) || d);
+  return d && g(e, n, d), d;
+};
+const c = class c extends b {
+  constructor() {
+    super(...arguments), this.iconPosition = void 0, this.fullWidth = !1, this.round = !1, this.type = "button";
+  }
+  static get styles() {
+    return m(y);
+  }
+  clickHandler() {
+    this.type === "submit" ? this.formSubmit() : this.type === "reset" && this.formReset();
+  }
+  formSubmit() {
+    const e = this.internals.form;
+    if (e) {
+      const n = new Event("submit", {
+        bubbles: !0,
+        cancelable: !0
+      });
+      e.dispatchEvent(n), e.submit();
+    }
+  }
+  formReset() {
+    const e = this.internals.form;
+    e && e.reset();
+  }
+  getIconElement() {
+    return this.iconName ? l`<ed-icon styleModifier="ed-c-button__icon" aria-hidden="true" name="${this.iconName}"></ed-icon>` : a;
+  }
+  createButton(e) {
+    const n = this.getIconElement();
+    return l`
+      <button type="${this.type}" class="${e}" ?disabled=${this.disabled} @click=${this.clickHandler}>
+        ${this.iconPosition === "before" || this.iconPosition === "top" ? n : a}
+        <span class="${this.hideText ? "ed-u-is-vishidden ed-c-button__text" : "ed-c-button__text"}"><slot>${this.text}</slot></span>
+        ${this.iconPosition === "after" ? n : a}
+      </button>
+    `;
+  }
+  createAnchorButton(e) {
+    const n = this.getIconElement();
+    return l`
+      <a href="${p(this.href)}" class="${e}" target=${this.target}>
+        ${this.iconPosition === "before" || this.iconPosition === "top" ? n : a}
+        <span class="${this.hideText ? "ed-u-is-vishidden ed-c-button__text" : "ed-c-button__text"}">${this.text}</span>
+        ${this.iconPosition === "after" ? n : a}
+      </a>
+    `;
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-button", {
+      "ed-c-button--primary": this.variant === "primary",
+      "ed-c-button--bare": this.variant === "bare",
+      "ed-c-button--link": this.variant === "link",
+      "ed-c-button--full-width": this.fullWidth === !0,
+      "ed-c-button--sm": this.size === "sm",
+      "ed-c-button--lg": this.size === "lg"
+    });
+    return this.href ? this.createAnchorButton(e) : this.createButton(e);
+  }
+};
+c.formAssociated = !0;
+let t = c;
+o([
+  r()
+], t.prototype, "text");
+o([
+  r()
+], t.prototype, "variant");
+o([
+  r({ type: Boolean })
+], t.prototype, "disabled");
+o([
+  r()
+], t.prototype, "target");
+o([
+  r({ type: Boolean })
+], t.prototype, "strong");
+o([
+  r()
+], t.prototype, "href");
+o([
+  r()
+], t.prototype, "iconName");
+o([
+  r()
+], t.prototype, "iconPosition");
+o([
+  r()
+], t.prototype, "size");
+o([
+  r({ type: Boolean })
+], t.prototype, "hideText");
+o([
+  r({ type: Boolean })
+], t.prototype, "fullWidth");
+o([
+  r({ type: Boolean })
+], t.prototype, "round");
+o([
+  r({ type: String })
+], t.prototype, "type");
+o([
+  u("button")
+], t.prototype, "field");
+customElements.get("ed-button") === void 0 && customElements.define("ed-button", t);
+export {
+  t as EdButton
+};

package/components/button-group/button-group.d.ts

@@ -0,0 +1,24 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - A slot for the buttons within the group
+ */
+export declare class EdButtonGroup extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Behavior variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**stacked** renders a button group that is stacked on top of each other</li>
+     * <li>**responsive** renders a button group that is stacked on small screens and side by side when space becomes available</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    behavior?: 'stacked' | 'responsive';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-button-group': EdButtonGroup;
+    }
+}
+//# sourceMappingURL=button-group.d.ts.map

package/components/button-group/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/button-group/button-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;;OAQG;IAEH,QAAQ,CAAC,EAAE,SAAS,GAAG,YAAY,CAAa;IAEhD,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/components/button-group/button-group.js

@@ -0,0 +1,35 @@
+import { unsafeCSS as d, html as a } from "lit";
+import { property as u } from "lit/decorators.js";
+import { E as m } from "../EdElement.js";
+const l = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-button-group{display:flex;align-items:center}.ed-c-button-group ::slotted(ed-button){margin-right:1rem}.ed-c-button-group ::slotted(ed-button:last-child){margin-right:0}.ed-c-button-group--stacked{flex-direction:column;align-items:initial}.ed-c-button-group--stacked ::slotted(ed-button){margin-bottom:.5rem}.ed-c-button-group--stacked ::slotted(ed-button:last-child){margin-bottom:0}.ed-c-button-group--responsive ::slotted(ed-button){margin-bottom:.5rem;margin-right:0}@media all and (min-width:48rem){.ed-c-button-group--responsive ::slotted(ed-button){margin-right:1rem;margin-bottom:0}}@media all and (max-width:48rem){.ed-c-button-group--responsive{flex-direction:column;align-items:initial}}';
+var c = Object.defineProperty, b = (o, e, n, g) => {
+  for (var t = void 0, r = o.length - 1, i; r >= 0; r--)
+    (i = o[r]) && (t = i(e, n, t) || t);
+  return t && c(e, n, t), t;
+};
+class s extends m {
+  constructor() {
+    super(...arguments), this.behavior = void 0;
+  }
+  static get styles() {
+    return d(l);
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-button-group", {
+      "ed-c-button-group--stacked": this.behavior === "stacked",
+      "ed-c-button-group--responsive": this.behavior === "responsive"
+    });
+    return a`
+      <div class="${e}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+b([
+  u()
+], s.prototype, "behavior");
+customElements.get("ed-button-group") === void 0 && customElements.define("ed-button-group", s);
+export {
+  s as EdButtonGroup
+};

package/components/card/card.d.ts

@@ -0,0 +1,34 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * An example element.
+ *
+ * @slot - The card contents
+ */
+export declare class EdCard extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Style variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**bare** renders a card without a border and without padding around the content</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'bare';
+    /**
+     * Align variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**center** renders a card that has center aligned content/text</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    align?: 'center';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-card': EdCard;
+    }
+}
+//# sourceMappingURL=card.d.ts.map

package/components/card/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/card/card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;;;GAIG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;;;;OAOG;IAEH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,MAAM;CAsBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/components/card/card.js

@@ -0,0 +1,43 @@
+import { unsafeCSS as l, html as o } from "lit";
+import { property as i } from "lit/decorators.js";
+import { E as m } 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-card{display:flex;flex-direction:column;height:100%;width:100%;border-width:var(--ed-theme-border-width-sm);border-style:solid;border-color:var(--ed-theme-color-border-subtle);border-radius:var(--ed-theme-border-radius-md);box-shadow:var(--ed-theme-box-shadow-md);background:var(--ed-theme-color-background-default)}.ed-c-card--bare{border:0;padding:0;box-shadow:none}.ed-c-card--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.ed-c-card__header{display:block;flex:none}.ed-c-card__body{display:block;padding:1rem;flex:1 0 auto}.ed-c-card--bare .ed-c-card__body{padding:0}.ed-c-card__footer{display:block;flex:none;padding:1rem}.ed-c-card--bare .ed-c-card__footer{padding:0}";
+var b = Object.defineProperty, n = (r, d, s, f) => {
+  for (var e = void 0, t = r.length - 1, c; t >= 0; t--)
+    (c = r[t]) && (e = c(d, s, e) || e);
+  return e && b(d, s, e), e;
+};
+class a extends m {
+  static get styles() {
+    return l(h);
+  }
+  render() {
+    const d = this.componentClassNames("ed-c-card", {
+      "ed-c-card--bare": this.variant === "bare",
+      "ed-c-card--align-center": this.align === "center"
+    });
+    return o`
+      <div class="${d}">
+        ${this.slotNotEmpty("header") && o`<div class="ed-c-card__header">
+          <slot name="header"></slot>
+        </div>`}
+        <div class="ed-c-card__body">
+          <slot></slot>
+        </div>
+        ${this.slotNotEmpty("footer") && o`<div class="ed-c-card__footer">
+          <slot name="footer"></slot>
+        </div>`}
+      </div>
+    `;
+  }
+}
+n([
+  i()
+], a.prototype, "variant");
+n([
+  i()
+], a.prototype, "align");
+customElements.get("ed-card") === void 0 && customElements.define("ed-card", a);
+export {
+  a as EdCard
+};