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

package/components/icon-link-list-item/icon-link-list-item.d.ts

@@ -0,0 +1,23 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+export declare class EdIconLinkListItem extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Icon name next to the text
+     */
+    iconName?: string;
+    /**
+     * Link URL
+     */
+    href?: string;
+    /**
+     * Link title
+     */
+    linkTitle?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-icon-link-list-item': EdIconLinkListItem;
+    }
+}
+//# sourceMappingURL=icon-link-list-item.d.ts.map

package/components/icon-link-list-item/icon-link-list-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-link-list-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/icon-link-list-item/icon-link-list-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAItF,OAAO,cAAc,CAAC;AAGtB,qBAAa,kBAAmB,SAAQ,SAAS;IAC/C,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,kBAAkB,CAAC;KAC9C;CACF"}

package/components/icon-link-list-item/icon-link-list-item.js

@@ -0,0 +1,39 @@
+import { E as a } from "../EdElement.js";
+import { unsafeCSS as d, html as f } from "lit";
+import { property as r } from "lit/decorators.js";
+import { ifDefined as s } from "lit-html/directives/if-defined.js";
+import "../icon/icon.js";
+const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-icon-link-list__link{color:var(--ed-theme-link-color-content-default)}";
+var h = Object.defineProperty, l = (o, t, m, k) => {
+  for (var e = void 0, n = o.length - 1, c; n >= 0; n--)
+    (c = o[n]) && (e = c(t, m, e) || e);
+  return e && h(t, m, e), e;
+};
+class i extends a {
+  static get styles() {
+    return d(p);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-icon-link-list__item", {});
+    return f`
+      <li class="${t}">
+        <a class="ed-c-icon-link-list__link" href="${s(this.href)}" title="${s(this.linkTitle)}">
+          <ed-icon name="${s(this.iconName)}"></ed-icon>
+        </a>
+      </li>
+    `;
+  }
+}
+l([
+  r()
+], i.prototype, "iconName");
+l([
+  r()
+], i.prototype, "href");
+l([
+  r()
+], i.prototype, "linkTitle");
+customElements.get("ed-icon-link-list-item") === void 0 && customElements.define("ed-icon-link-list-item", i);
+export {
+  i as EdIconLinkListItem
+};

package/components/index.browser.js

@@ -0,0 +1,4 @@
+let o = (n = 21) => crypto.getRandomValues(new Uint8Array(n)).reduce((r, e) => (e &= 63, e < 36 ? r += e.toString(36) : e < 62 ? r += (e - 26).toString(36).toUpperCase() : e > 62 ? r += "-" : r += "_", r), "");
+export {
+  o as n
+};

package/components/inline-checkbox/inline-checkbox.d.ts

@@ -0,0 +1,73 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdInlineCheckbox extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Error switch
+     */
+    isError?: boolean;
+    /**
+     * Success switch
+     */
+    isSuccess?: boolean;
+    /**
+     * value attribute
+     */
+    readOnly?: boolean;
+    /**
+     * disabled attribute
+     */
+    disabled?: boolean;
+    /**
+     * value attribute
+     */
+    value?: string;
+    /**
+     * Id
+     */
+    fieldId?: string;
+    /**
+     * Name attribute
+     */
+    name?: string;
+    /**
+     * Checked property
+     */
+    checked?: boolean;
+    /**
+     * Description or Error message for the field
+     */
+    fieldNote?: any;
+    /**
+     * Required attribute
+     */
+    required?: boolean;
+    /**
+     * Optional label to appear after label text
+     */
+    optionalLabel?: string;
+    /**
+     * Icon to display in field note
+     */
+    iconName?: string;
+    /**
+     * Inverted variant
+     * 1) Used for dark backgrounds
+     */
+    inverted?: boolean;
+    /**
+     * aria-describedby attribute property
+     */
+    ariaDescribedBy?: string;
+    connectedCallback(): void;
+    handleOnChange(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-inline-checkbox': EdInlineCheckbox;
+    }
+}
+//# sourceMappingURL=inline-checkbox.d.ts.map

package/components/inline-checkbox/inline-checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-checkbox.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/inline-checkbox/inline-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAKtF,OAAO,cAAc,CAAC;AAGtB;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,SAAS;IAC7C,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,GAAG,CAAC;IAEhB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAgB;IAEtC;;OAEG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,iBAAiB;IAQjB,cAAc;IAId,MAAM;CA4CP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/components/inline-checkbox/inline-checkbox.js

@@ -0,0 +1,114 @@
+import { E as b } from "../EdElement.js";
+import { unsafeCSS as p, html as l } from "lit";
+import { property as o } from "lit/decorators.js";
+import { ifDefined as n } from "lit-html/directives/if-defined.js";
+import { n as h } from "../index.browser.js";
+import "../icon/icon.js";
+const k = `@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-inline-checkbox__container{display:flex;position:relative}.ed-c-inline-checkbox__label{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);position:relative;top:1px;margin-left:.5rem;flex:1}.ed-c-inline-checkbox.ed-is-disabled .ed-c-inline-checkbox__label{color:var(--ed-theme-color-content-disabled);cursor:not-allowed}.ed-c-inline-checkbox--inverted .ed-c-inline-checkbox__label{color:var(--ed-theme-color-content-knockout)}.ed-c-checkbox__input{display:block;margin:0;z-index:4;width:1.5rem;height:1.5rem;cursor:pointer;opacity:0}.ed-c-checkbox__input:disabled{cursor:not-allowed}.ed-c-checkbox__custom-check{position:absolute;inset:0;width:1.5rem;height:1.5rem;flex-shrink:0;z-index:1}.ed-c-checkbox__custom-check:before{content:"";position:absolute;inset:0;z-index:1;display:block;border:var(--ed-theme-border-width-sm) solid var(--ed-theme-form-color-border-default);background-color:var(--ed-theme-form-color-background-default);border-radius:var(--ed-theme-border-radius-sm)}.ed-c-checkbox__input:hover+.ed-c-checkbox__custom-check:before{border-color:var(--ed-theme-form-color-border-hover)}.ed-c-checkbox__input:disabled+.ed-c-checkbox__custom-check:before{border-color:var(--ed-theme-color-border-disabled);background-color:var(--ed-theme-color-background-disabled);cursor:not-allowed}.ed-c-checkbox__input:checked+.ed-c-checkbox__custom-check:before{background-color:var(--ed-theme-color-background-brand-knockout);border-color:transparent}.ed-c-checkbox__input:checked:hover+.ed-c-checkbox__custom-check:before{background-color:var(--ed-theme-color-background-brand-hover);border-color:transparent}.ed-c-checkbox__input:checked:disabled+.ed-c-checkbox__custom-check:before{background-color:var(--ed-theme-color-background-brand-disabled);border-color:transparent}.ed-c-checkbox__input:focus-visible+.ed-c-checkbox__custom-check:before{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-checkbox__custom-check ed-icon{--ed-icon-fill: var(--ed-theme-color-content-knockout);position:absolute;top:.25rem;left:.25rem;display:block;background-repeat:no-repeat;opacity:0;z-index:2}.ed-c-checkbox__input:checked+.ed-c-checkbox__custom-check ed-icon{opacity:1}.ed-is-indeterminate .ed-c-checkbox__input:not(:checked):hover+.ed-c-checkbox__custom-check:before{background-color:var(--ed-theme-color-background-brand-hover);border-color:transparent}.ed-is-indeterminate .ed-c-checkbox__input:not(:checked):disabled+.ed-c-checkbox__custom-check:before{background-color:var(--ed-theme-color-background-brand-disabled);border-color:transparent}.ed-is-indeterminate .ed-c-checkbox__input:not(:checked)+.ed-c-checkbox__custom-check:before{background-color:var(--ed-theme-color-background-brand);border-color:transparent}.ed-is-indeterminate .ed-c-checkbox__input:not(:checked)+.ed-c-checkbox__custom-check:after{opacity:1;width:10px;height:4px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 1.52'%3E%3Cpath d='M9.24,1.52H.76A.76.76,0,0,1,.76,0H9.24a.76.76,0,0,1,0,1.52Z' fill='%23ffffff'/%3E%3C/svg%3E")}`;
+var u = Object.defineProperty, c = (d, r, a, m) => {
+  for (var t = void 0, i = d.length - 1, s; i >= 0; i--)
+    (s = d[i]) && (t = s(r, a, t) || t);
+  return t && u(r, a, t), t;
+};
+class e extends b {
+  constructor() {
+    super(...arguments), this.optionalLabel = "(optional)";
+  }
+  static get styles() {
+    return p(k.toString());
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.fieldId = this.fieldId || h(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || h());
+  }
+  handleOnChange() {
+    this.checked = !this.checked;
+  }
+  render() {
+    const r = this.componentClassNames("ed-c-inline-checkbox", {
+      "ed-c-inline-checkbox--inverted": this.inverted === !0,
+      "ed-is-error": this.isError === !0,
+      "ed-is-success": this.isSuccess === !0,
+      "ed-is-disabled": this.disabled === !0
+    });
+    return l`
+      <div class="${r}">
+        <div class="ed-c-inline-checkbox__container">
+          <input
+            id="${this.fieldId}"
+            type="checkbox"
+            name="${this.name}"
+            class="ed-c-checkbox__input"
+            value="${this.value}"
+            ?checked="${this.checked}"
+            ?disabled="${this.disabled}"
+            ?readonly="${this.readOnly}"
+            @change=${this.handleOnChange}
+            aria-describedby="${n(this.ariaDescribedBy)}"
+          />
+          <span class="ed-c-checkbox__custom-check">
+            <ed-icon name="check"></ed-icon>
+          </span>
+          <label class="ed-c-inline-checkbox__label" for="${this.fieldId}">
+            <slot></slot>
+          </label>
+        </div>
+
+        ${this.fieldNote && l`<ed-field-note
+          ?inverted=${this.inverted}
+          id=${n(this.ariaDescribedBy)}
+          iconName=${n(this.iconName)}
+          ?isSuccess=${this.isSuccess}
+          ?isError=${this.isError}
+        >
+          ${this.fieldNote}
+        </ed-field-note>`}
+      </div>
+    `;
+  }
+}
+c([
+  o({ type: Boolean })
+], e.prototype, "isError");
+c([
+  o({ type: Boolean })
+], e.prototype, "isSuccess");
+c([
+  o({ type: Boolean })
+], e.prototype, "readOnly");
+c([
+  o({ type: Boolean })
+], e.prototype, "disabled");
+c([
+  o()
+], e.prototype, "value");
+c([
+  o()
+], e.prototype, "fieldId");
+c([
+  o()
+], e.prototype, "name");
+c([
+  o({ type: Boolean })
+], e.prototype, "checked");
+c([
+  o()
+], e.prototype, "fieldNote");
+c([
+  o({ type: Boolean })
+], e.prototype, "required");
+c([
+  o()
+], e.prototype, "optionalLabel");
+c([
+  o()
+], e.prototype, "iconName");
+c([
+  o({ type: Boolean })
+], e.prototype, "inverted");
+c([
+  o()
+], e.prototype, "ariaDescribedBy");
+customElements.get("ed-inline-checkbox") === void 0 && customElements.define("ed-inline-checkbox", e);
+export {
+  e as EdInlineCheckbox
+};

package/components/key-value-table/key-value-table.d.ts

@@ -0,0 +1,19 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The rows of the table body
+ */
+export declare class EdKeyValueTable extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Full width variant
+     * 1) Expands the key value table the full width of its container
+     */
+    fullWidth?: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-key-value-table': EdKeyValueTable;
+    }
+}
+//# sourceMappingURL=key-value-table.d.ts.map

package/components/key-value-table/key-value-table.d.ts.map

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

package/components/key-value-table/key-value-table.js

@@ -0,0 +1,33 @@
+import { unsafeCSS as b, html as r } from "lit";
+import { property as n } from "lit/decorators.js";
+import { E as i } from "../EdElement.js";
+const u = ":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-key-value-table{border-collapse:collapse}.ed-c-key-value-table--full-width{width:100%}.ed-c-key-value-table__body{border-top:1px solid var(--ed-theme-color-border-subtle)}";
+var c = Object.defineProperty, m = (l, t, s, y) => {
+  for (var e = void 0, o = l.length - 1, a; o >= 0; o--)
+    (a = l[o]) && (e = a(t, s, e) || e);
+  return e && c(t, s, e), e;
+};
+class d extends i {
+  static get styles() {
+    return b(u);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-key-value-table", {
+      "ed-c-key-value-table--full-width": this.fullWidth === !0
+    });
+    return r`
+      <table class="${t}">
+        <tbody class="ed-c-key-value-table__body">
+          ${r`<slot></slot>`}
+        </tbody>
+      </table>
+    `;
+  }
+}
+m([
+  n({ type: Boolean })
+], d.prototype, "fullWidth");
+customElements.get("ed-key-value-table") === void 0 && customElements.define("ed-key-value-table", d);
+export {
+  d as EdKeyValueTable
+};

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

@@ -0,0 +1,30 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+export declare class EdKeyValueTableRow extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Key
+     * 1) The key in the key value pair that sits on the left
+     */
+    key?: string;
+    /**
+     * Value
+     * 1) The value in the key value pair that sits on the right
+     */
+    value?: string;
+    /**
+     * Alignment variant. Default is aligned right
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**left** aligns the key value table value to the leftmost edge of the component</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    align?: 'left';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-key-value-table-row': EdKeyValueTableRow;
+    }
+}
+//# sourceMappingURL=key-value-table-row.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-table-row.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/key-value-table-row/key-value-table-row.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF,qBAAa,kBAAmB,SAAQ,SAAS;IAC/C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;OAOG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,MAAM;CAYP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,kBAAkB,CAAC;KAC9C;CACF"}

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

@@ -0,0 +1,38 @@
+import { unsafeCSS as i, html as y } from "lit";
+import { property as l } from "lit/decorators.js";
+import { E as h } 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-key-value-table__row{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);width:100%;border-bottom:1px solid var(--ed-theme-color-border-subtle)}.ed-c-key-value-table-row__key{padding:.375rem 2rem .375rem 0;text-align:left}.ed-c-key-value-table-row__value{padding:.375rem 0;text-align:right}.ed-c-key-value-table__row--align-left .ed-c-key-value-table-row__value{text-align:left}";
+var f = Object.defineProperty, d = (o, t, s, m) => {
+  for (var e = void 0, r = o.length - 1, n; r >= 0; r--)
+    (n = o[r]) && (e = n(t, s, e) || e);
+  return e && f(t, s, e), e;
+};
+class a extends h {
+  static get styles() {
+    return i(p);
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-key-value-table__row", {
+      "ed-c-key-value-table__row--align-left": this.align === "left"
+    });
+    return y`
+      <tr class="${t}">
+        <th scope="row" class="ed-c-key-value-table-row__key">${this.key}</th>
+        <td class="ed-c-key-value-table-row__value">${this.value}</td>
+      </tr>
+    `;
+  }
+}
+d([
+  l()
+], a.prototype, "key");
+d([
+  l()
+], a.prototype, "value");
+d([
+  l()
+], a.prototype, "align");
+customElements.get("ed-key-value-table-row") === void 0 && customElements.define("ed-key-value-table-row", a);
+export {
+  a as EdKeyValueTableRow
+};

package/components/layout/layout.d.ts

@@ -0,0 +1,50 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The layout content
+ */
+export declare class EdLayout extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Break variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li> **faster** breaks the grid at a smaller width than the default.
+     * Example: Sidebar breaks underneath main layout section at smaller breakpoint than default</li>
+     * <li> **slower** breaks the grid at a larger width than the default.
+     * Example: Sidebar breaks underneath main layout section at wider breakpoint than default</li>
+     * <li> **none** the grid does not break.</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    break?: 'faster' | 'slower' | 'none';
+    /**
+     * Gap variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>The default spacing is 16px
+     * <li>**none** yields a layout whose layout sections are spaced without any gutter in between on large screens.
+     * Small screens gap sits at 16px.</li>
+     * <li>**sm** yields a layout whose layout sections are spaced 8px apart on large screens. Small screens gutters move to 16px between.</li>
+     * <li>**lg** yields a layout whose layout sections are spaced 24px apart on large screens. Small screens gutters move to 16px between.</li>
+     * <li>**xl** yields a layout whose layout sections are spaced 32px apart on large screens. Small screens gutters move to 16px between.</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    gap?: 'none' | 'sm' | 'lg' | 'xl';
+    /**
+     *  Style variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**left-sidebar** formats the first `layout-section` component as a left sidebar</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'left-sidebar';
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-layout': EdLayout;
+    }
+}
+//# sourceMappingURL=layout.d.ts.map

package/components/layout/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/layout/layout.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;;;;;OAWG;IAEH,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IAErC;;;;;;;;;;;;OAYG;IAEH,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAElC;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,MAAM;CAiBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/components/layout/layout.js

@@ -0,0 +1,43 @@
+import { unsafeCSS as o, html as s } from "lit";
+import { property as l } from "lit/decorators.js";
+import { E as c } from "../EdElement.js";
+const u = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-layout{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}@media all and (min-width:60rem){.ed-c-layout{grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 1)}}@media all and (min-width:48rem){.ed-c-layout--break-faster{grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 1)}}@media all and (min-width:60rem){.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr)}}@media all and (min-width:75rem){.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 1)}}@media all and (min-width:60rem){.ed-c-layout--gap-none{gap:0;grid-template-columns:minmax(0,1fr) var(--ed-sidebar-width, 40%)}}@media all and (min-width:48rem){.ed-c-layout--gap-none.ed-c-layout--break-faster{gap:0;grid-template-columns:minmax(0,1fr) var(--ed-sidebar-width, 40%)}}@media all and (min-width:60rem){.ed-c-layout--gap-none.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr);gap:1rem}}@media all and (min-width:75rem){.ed-c-layout--gap-none.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr) var(--ed-sidebar-width, 40%)}}@media all and (min-width:60rem){.ed-c-layout--gap-sm{gap:.5rem;grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * .5)}}@media all and (min-width:48rem){.ed-c-layout--gap-sm.ed-c-layout--break-faster{gap:0;grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * .5)}}@media all and (min-width:60rem){.ed-c-layout--gap-sm.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr);gap:1rem}}@media all and (min-width:75rem){.ed-c-layout--gap-sm.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * .5)}}@media all and (min-width:60rem){.ed-c-layout--gap-lg{gap:1.5rem;grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 1.5)}}@media all and (min-width:48rem){.ed-c-layout--gap-lg.ed-c-layout--break-faster{gap:0;grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 1.5)}}@media all and (min-width:60rem){.ed-c-layout--gap-lg.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr);gap:1rem}}@media all and (min-width:75rem){.ed-c-layout--gap-lg.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 1.5)}}@media all and (min-width:60rem){.ed-c-layout--gap-xl{gap:2rem;grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 2)}}@media all and (min-width:48rem){.ed-c-layout--gap-xl.ed-c-layout--break-faster{gap:0;grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 2)}}@media all and (min-width:60rem){.ed-c-layout--gap-xl.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr);gap:1rem}}@media all and (min-width:75rem){.ed-c-layout--gap-xl.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr) calc(var(--ed-sidebar-width, 40%) - .5rem * 2)}}@media all and (min-width:60rem){.ed-c-layout--left-sidebar{grid-template-columns:calc(var(--ed-sidebar-width, 40%) - .5rem * 1) minmax(0,1fr)}}@media all and (min-width:48rem){.ed-c-layout--left-sidebar.ed-c-layout--break-faster{grid-template-columns:calc(var(--ed-sidebar-width, 40%) - .5rem * 1) minmax(0,1fr)}}@media all and (min-width:60rem){.ed-c-layout--left-sidebar.ed-c-layout--break-slower{grid-template-columns:minmax(0,1fr)}}@media all and (min-width:75rem){.ed-c-layout--left-sidebar.ed-c-layout--break-slower{grid-template-columns:calc(var(--ed-sidebar-width, 40%) - .5rem * 1) minmax(0,1fr)}}";
+var p = Object.defineProperty, t = (m, e, i, g) => {
+  for (var a = void 0, r = m.length - 1, n; r >= 0; r--)
+    (n = m[r]) && (a = n(e, i, a) || a);
+  return a && p(e, i, a), a;
+};
+class d extends c {
+  static get styles() {
+    return o(u);
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-layout", {
+      "ed-c-layout--left-sidebar": this.variant === "left-sidebar",
+      "ed-c-layout--gap-none": this.gap === "none",
+      "ed-c-layout--gap-sm": this.gap === "sm",
+      "ed-c-layout--gap-lg": this.gap === "lg",
+      "ed-c-layout--gap-xl": this.gap === "xl",
+      "ed-c-layout--break-faster": this.break === "faster",
+      "ed-c-layout--break-slower": this.break === "slower"
+    });
+    return s`
+      <div class="${e}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+t([
+  l()
+], d.prototype, "break");
+t([
+  l()
+], d.prototype, "gap");
+t([
+  l()
+], d.prototype, "variant");
+customElements.get("ed-layout") === void 0 && customElements.define("ed-layout", d);
+export {
+  d as EdLayout
+};

package/components/layout-container/layout-container.d.ts

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

package/components/layout-container/layout-container.d.ts.map

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

package/components/layout-container/layout-container.js

@@ -0,0 +1,20 @@
+import { unsafeCSS as e, html as o } from "lit";
+import { E as s } from "../EdElement.js";
+const n = '@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-l-layout-container{width:100%;max-width:70rem;padding-right:1rem;padding-left:1rem;margin:0 auto}';
+class r extends s {
+  static get styles() {
+    return e(n);
+  }
+  render() {
+    const t = this.componentClassNames("ed-l-layout-container", {});
+    return o`
+      <div class="${t}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.get("ed-layout-container") === void 0 && customElements.define("ed-layout-container", r);
+export {
+  r as EdLayoutContainer
+};

package/components/layout-section/layout-section.d.ts

@@ -0,0 +1,28 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The content of the layout section
+ */
+export declare class EdLayoutSection extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Behavioral variants
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**sticky** allows the layout section to stick to the screen until the section reaches the bottom of the layout or the next layout section.</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    behavior?: 'sticky';
+    /**
+     * Top style
+     * 1) Used to create dynamic sticky containers that can be adjusted based on the content
+     */
+    top?: string;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-layout-section': EdLayoutSection;
+    }
+}
+//# sourceMappingURL=layout-section.d.ts.map

package/components/layout-section/layout-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-section.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/layout-section/layout-section.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AACH,qBAAa,eAAgB,SAAQ,SAAS;IAC5C,MAAM,KAAK,MAAM,4BAEhB;IAED;;;;;;;OAOG;IAEH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IAEH,GAAG,CAAC,EAAE,MAAM,CAAU;IAEtB,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/components/layout-section/layout-section.js

@@ -0,0 +1,37 @@
+import { unsafeCSS as l, html as m } from "lit";
+import { property as a } from "lit/decorators.js";
+import { E as d } 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}.ed-c-layout-section{width:100%}";
+var u = Object.defineProperty, c = (o, e, i, h) => {
+  for (var t = void 0, s = o.length - 1, n; s >= 0; s--)
+    (n = o[s]) && (t = n(e, i, t) || t);
+  return t && u(e, i, t), t;
+};
+class r extends d {
+  constructor() {
+    super(...arguments), this.top = "1rem";
+  }
+  static get styles() {
+    return l(p);
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-layout-section", {
+      "ed-c-layout-section--sticky": this.behavior === "sticky"
+    });
+    return m`
+      <div class="${e}" style=${"top: " + this.top}>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+c([
+  a()
+], r.prototype, "behavior");
+c([
+  a()
+], r.prototype, "top");
+customElements.get("ed-layout-section") === void 0 && customElements.define("ed-layout-section", r);
+export {
+  r as EdLayoutSection
+};

package/components/linelength-container/linelength-container.d.ts

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

package/components/linelength-container/linelength-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"linelength-container.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/linelength-container/linelength-container.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;GAEG;AAEH,qBAAa,qBAAsB,SAAQ,SAAS;IAClD,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CASP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}