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

package/components/radio-field/radio-field.js

@@ -0,0 +1,108 @@
+import { E as c } from "../EdElement.js";
+import { unsafeCSS as f, html as p } from "lit";
+import { property as t } from "lit/decorators.js";
+import { ifDefined as l } from "lit-html/directives/if-defined.js";
+import { n as y } from "../index.browser.js";
+import "../field-note/field-note.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-radio-field{border:none;margin:0;padding:0}.ed-c-radio-field--inverted{color:var(--ed-theme-color-content-knockout)}.ed-c-radio-field__legend{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);display:block;margin-bottom:.5rem;display:inline-block;margin-bottom:1rem}.ed-c-radio-field__list{list-style:none;margin:0;padding:0}";
+var m = Object.defineProperty, o = (d, r, s, b) => {
+  for (var i = void 0, a = d.length - 1, n; a >= 0; a--)
+    (n = d[a]) && (i = n(r, s, i) || i);
+  return i && m(r, s, i), i;
+};
+class e extends c {
+  constructor() {
+    super(...arguments), this.optionalLabel = "(optional)", this.label = "Label";
+  }
+  static get styles() {
+    return f(h.toString());
+  }
+  /**
+   * Autogenerate
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || y());
+  }
+  render() {
+    const r = this.componentClassNames("ed-c-radio-field", {
+      "ed-c-radio-field--inverted": this.inverted === !0
+    });
+    return p`
+      <fieldset class="${r}">
+        <legend
+          class=${this.hideLegend ? "ed-c-radio-field__legend ed-u-is-vishidden" : "ed-c-radio-field__legend"}
+          aria-describedby="${l(this.ariaDescribedBy)}"
+        >
+          ${this.label}
+        </legend>
+
+        <div class="ed-c-radio-field__body">
+          <ul class="ed-c-radio-field__list">
+            <slot></slot>
+          </ul>
+        </div>
+        ${this.fieldNote && p`<ed-field-note
+          ?inverted=${this.inverted}
+          id=${l(this.ariaDescribedBy)}
+          iconName=${l(this.iconName)}
+          ?isSuccess=${this.isSuccess}
+          ?isError=${this.isError}
+        >
+          ${this.fieldNote}
+        </ed-field-note>`}
+      </fieldset>
+    `;
+  }
+}
+o([
+  t({ type: Boolean })
+], e.prototype, "isError");
+o([
+  t({ type: Boolean })
+], e.prototype, "isSuccess");
+o([
+  t({ type: Boolean })
+], e.prototype, "readOnly");
+o([
+  t({ type: Boolean })
+], e.prototype, "disabled");
+o([
+  t()
+], e.prototype, "value");
+o([
+  t()
+], e.prototype, "fieldId");
+o([
+  t()
+], e.prototype, "name");
+o([
+  t({ type: Boolean })
+], e.prototype, "checked");
+o([
+  t()
+], e.prototype, "fieldNote");
+o([
+  t({ type: Boolean })
+], e.prototype, "required");
+o([
+  t({ type: Boolean })
+], e.prototype, "hideLegend");
+o([
+  t()
+], e.prototype, "optionalLabel");
+o([
+  t()
+], e.prototype, "iconName");
+o([
+  t({ type: Boolean })
+], e.prototype, "inverted");
+o([
+  t()
+], e.prototype, "ariaDescribedBy");
+o([
+  t()
+], e.prototype, "label");
+customElements.get("ed-radio-field") === void 0 && customElements.define("ed-radio-field", e);
+export {
+  e as EdRadioField
+};

package/components/radio-field-item/radio-field-item.d.ts

@@ -0,0 +1,100 @@
+import { EdFormElement } from '@brad-frost-web/eddie-web-components/components/EdFormElement';
+/**
+ * @slot - The component content
+ */
+export declare class EdRadioFieldItem extends EdFormElement {
+    type: string;
+    static get styles(): import('lit').CSSResult;
+    /**
+     * Error switch
+     */
+    isError?: boolean;
+    /**
+     * Success switch
+     */
+    isSuccess?: boolean;
+    /**
+     * value attribute
+     */
+    readOnly?: boolean;
+    /**
+     * disabled attribute
+     */
+    disabled?: boolean;
+    /**
+     * 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;
+    field: HTMLInputElement;
+    private initialChecked;
+    /**
+     * Initialize functions
+     */
+    constructor();
+    /**
+     * Autogenerate
+     */
+    firstUpdated(): void;
+    resetField(): void;
+    private setFormData;
+    /**
+     * Remove checked
+     * 1) Remove checked property from all items and set tabindex to -1
+     */
+    removeChecked(): void;
+    formResetCallback(): void;
+    /**
+     * Toggle active state of primary nav item
+     * 1) Remove isActive state from all sibling elements
+     * 2) Toggle active state of element selected
+     */
+    clickHandler(e: MouseEvent): void;
+    /**
+     * Handle keydown
+     * 1) If left or up arrow key is struck and radio field item exists before current item, remove checked from all items and
+     * add it to the next item
+     * 2) If right or down arrow key is struck and radio field item exists after current item, remove checked from all items and
+     * add checked to the next item. Focus on this item and set tabindex for when focusing out of radio field and back onto checked item.
+     */
+    handleKeyDown(e: KeyboardEvent): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-radio-field-item': EdRadioFieldItem;
+    }
+}
+//# sourceMappingURL=radio-field-item.d.ts.map

package/components/radio-field-item/radio-field-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-field-item.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/radio-field-item/radio-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,+DAA+D,CAAC;AAG9F;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,aAAa;IACjD,IAAI,SAAW;IACf,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,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;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;IAGzB,KAAK,EAAG,gBAAgB,CAAC;IAEzB,OAAO,CAAC,cAAc,CAAU;IAEhC;;OAEG;;IAQH;;OAEG;IACH,YAAY;IAML,UAAU;IAIjB,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,aAAa;IAYb,iBAAiB,IAAI,IAAI;IAOzB;;;;OAIG;IACH,YAAY,CAAC,CAAC,EAAE,UAAU;IAQ1B;;;;;;OAMG;IACH,aAAa,CAAC,CAAC,EAAE,aAAa;IAmB9B,MAAM;CA0BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}

package/components/radio-field-item/radio-field-item.js

@@ -0,0 +1,142 @@
+import { unsafeCSS as l, html as c } from "lit";
+import { ifDefined as h } from "lit-html/directives/if-defined.js";
+import { property as o, query as p } from "lit/decorators.js";
+import { n as m } from "../index.browser.js";
+import { E as u } from "../EdFormElement.js";
+const f = '@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}}:host{display:contents}.ed-c-radio-field-item{display:flex;position:relative;margin:.75rem 0 0;padding:0}:host(:first-child) .ed-c-radio-field-item{margin-top:0}.ed-c-radio-field-item__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-radio__input{display:block;margin:0;width:1.25rem;height:1.25rem;cursor:pointer;opacity:0;z-index:4}.ed-c-radio__input:disabled{cursor:not-allowed}.ed-c-radio__custom-radio{position:absolute;inset:0;width:1.5rem;height:1.5rem;flex-shrink:0;z-index:1}.ed-c-radio__custom-radio:before{content:"";position:absolute;inset:0;z-index:1;display:block;border:1px solid var(--ed-theme-form-color-border-default);border-radius:50%;background:var(--ed-theme-form-color-background-default);transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-radio__input:checked+.ed-c-radio__custom-radio:before{background:var(--ed-theme-color-background-brand-knockout)}.ed-c-radio__input:hover+.ed-c-radio__custom-radio:before{background:var(--ed-theme-form-color-background-hover)}.ed-c-radio__input:focus+.ed-c-radio__custom-radio:before{box-shadow:0 0 0 var(--ed-theme-border-width-md) var(--ed-theme-color-background-brand)}.ed-c-radio__input:disabled+.ed-c-radio__custom-radio:before{border-color:var(--ed-theme-color-content-disabled);background:var(--ed-theme-color-background-disabled);cursor:not-allowed}.ed-c-radio__custom-radio:after{content:"";position:absolute;top:6px;left:6px;z-index:2;display:block;border:6px solid var(--ed-theme-color-background-default);border-radius:50%;background:var(--ed-theme-color-background-brand);opacity:0}.ed-c-radio__input:checked+.ed-c-radio__custom-radio:after{opacity:1}';
+var y = Object.defineProperty, i = (a, d, t, b) => {
+  for (var r = void 0, n = a.length - 1, s; n >= 0; n--)
+    (s = a[n]) && (r = s(d, t, r) || r);
+  return r && y(d, t, r), r;
+};
+class e extends u {
+  /**
+   * Initialize functions
+   */
+  constructor() {
+    super(), this.type = "radio", this.optionalLabel = "(optional)", this.removeChecked = this.removeChecked.bind(this), this.clickHandler = this.clickHandler.bind(this), this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  static get styles() {
+    return l(f.toString());
+  }
+  /**
+   * Autogenerate
+   */
+  firstUpdated() {
+    this.initialChecked = this.checked, this.fieldId = this.fieldId || m(), this.setFormData();
+  }
+  resetField() {
+    this.internals.setFormValue(null);
+  }
+  setFormData() {
+    this.checked ? this.internals.setFormValue(this.value) : this.internals.setFormValue(null);
+  }
+  /**
+   * Remove checked
+   * 1) Remove checked property from all items and set tabindex to -1
+   */
+  removeChecked() {
+    this.parentNode && this.parentNode.querySelectorAll("ed-radio-field-item").forEach((t) => {
+      t.checked = !1, t.shadowRoot.querySelector(".ed-c-radio__input").setAttribute("tabindex", "-1"), t.resetField();
+    });
+  }
+  formResetCallback() {
+    this.checked = this.initialChecked, this.field.checked = this.initialChecked, this.setFormData(), this.requestUpdate();
+  }
+  /**
+   * Toggle active state of primary nav item
+   * 1) Remove isActive state from all sibling elements
+   * 2) Toggle active state of element selected
+   */
+  clickHandler(d) {
+    d.preventDefault(), this.removeChecked(), this.checked = !this.checked, this.shadowRoot.querySelector(".ed-c-radio__input").setAttribute("tabindex", "0"), this.setFormData();
+  }
+  /**
+   * Handle keydown
+   * 1) If left or up arrow key is struck and radio field item exists before current item, remove checked from all items and
+   * add it to the next item
+   * 2) If right or down arrow key is struck and radio field item exists after current item, remove checked from all items and
+   * add checked to the next item. Focus on this item and set tabindex for when focusing out of radio field and back onto checked item.
+   */
+  handleKeyDown(d) {
+    if (this.previousElementSibling && (d.code === "ArrowLeft" || d.code === "ArrowUp")) {
+      const t = this.previousElementSibling;
+      this.removeChecked(), t.shadowRoot.querySelector(".ed-c-radio__input").focus(), t.shadowRoot.querySelector(".ed-c-radio__input").setAttribute("tabindex", "0"), t.checked = !0;
+    } else if (this.nextElementSibling && (d.code === "ArrowRight" || d.code === "ArrowDown")) {
+      const t = this.nextElementSibling;
+      this.removeChecked(), t.shadowRoot.querySelector(".ed-c-radio__input").focus(), t.shadowRoot.querySelector(".ed-c-radio__input").setAttribute("tabindex", "0"), t.checked = !0;
+    }
+    this.setFormData();
+  }
+  render() {
+    const d = this.componentClassNames("ed-c-radio-field-item", {
+      "ed-is-active": this.checked === !0
+    });
+    return c`
+      <li class="${d}" @keydown=${this.handleKeyDown}>
+        <input
+          id="${this.fieldId}"
+          type="radio"
+          name="${this.name}"
+          class="ed-c-radio__input"
+          value="${this.value}"
+          .checked="${this.checked}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readOnly}"
+          @change=${this.clickHandler}
+          aria-describedby="${h(this.ariaDescribedBy)}"
+        />
+        <span class="ed-c-radio__custom-radio"></span>
+        <label class="ed-c-radio-field-item__label" for="${this.fieldId}">
+          <slot></slot>
+        </label>
+      </li>
+    `;
+  }
+}
+i([
+  o({ type: Boolean })
+], e.prototype, "isError");
+i([
+  o({ type: Boolean })
+], e.prototype, "isSuccess");
+i([
+  o({ type: Boolean })
+], e.prototype, "readOnly");
+i([
+  o({ type: Boolean })
+], e.prototype, "disabled");
+i([
+  o()
+], e.prototype, "fieldId");
+i([
+  o()
+], e.prototype, "name");
+i([
+  o({ type: Boolean })
+], e.prototype, "checked");
+i([
+  o()
+], e.prototype, "fieldNote");
+i([
+  o({ type: Boolean })
+], e.prototype, "required");
+i([
+  o()
+], e.prototype, "optionalLabel");
+i([
+  o()
+], e.prototype, "iconName");
+i([
+  o({ type: Boolean })
+], e.prototype, "inverted");
+i([
+  o()
+], e.prototype, "ariaDescribedBy");
+i([
+  p("input")
+], e.prototype, "field");
+customElements.get("ed-radio-field-item") === void 0 && customElements.define("ed-radio-field-item", e);
+export {
+  e as EdRadioFieldItem
+};

package/components/search-form/search-form.d.ts

@@ -0,0 +1,91 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+export declare class EdSearchForm extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * The unique id of the field
+     */
+    fieldId?: string;
+    /**
+     * Label of the form field
+     */
+    label?: string;
+    /**
+     * Inverted variation for dark backgrounds
+     */
+    inverted?: boolean;
+    /**
+     * Visually hide the label from the UI
+     */
+    hideLabel?: boolean;
+    /**
+     * Style variant
+     * <ed-text-passage size="sm">
+     * <ul>
+     * <li>**display** renders a more prominent treatment</li>
+     * </ul>
+     * </ed-text-passage>
+     */
+    variant?: 'display';
+    /**
+     * Input value
+     */
+    value: string;
+    /**
+     * Trim Items value
+     * TODO: Revisit this
+     */
+    trimItems: boolean;
+    /**
+     * Input value
+     * TODO: Revisit this
+     */
+    isActive: boolean;
+    /**
+     * Empty state
+     * TODO: Revisit this
+     */
+    isEmpty: boolean;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Clear button text
+     * 1) Text for the clear button within the input
+     */
+    clearButtonText?: string;
+    /**
+     * isApple
+     * TODO: Revisit this
+     */
+    isApple: boolean;
+    constructor();
+    /**
+     * Set the value TODO: Revisit this
+     * 1) Do some side effect here. Set a pseudo-private property that will contain the actual value
+     * 2) call LitElement's requestUpdate so that a rerender is done if needed
+     */
+    set theValue(value: string);
+    /**
+     * Return the pseudo-private so that when vitextfield.value is accessed the correct value is returned
+     * TODO: Revisit this
+     */
+    get theValue(): string;
+    /**
+     * Clear text input
+     * TODO: Revisit this since logic likely needs to live outside the component
+     */
+    clearSearchForm(): void;
+    /**
+     * TODO: Remove this logic after demo tp create
+     */
+    openDropdown(e: any): void;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-search-form': EdSearchForm;
+    }
+}
+//# sourceMappingURL=search-form.d.ts.map

package/components/search-form/search-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-form.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/search-form/search-form.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAEtF,OAAO,+DAA+D,CAAC;AAEvE,qBAAa,YAAa,SAAQ,SAAS;IACzC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAW;IAEzB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IAEH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAM;IAEnB;;;OAGG;IAEH,SAAS,EAAE,OAAO,CAAS;IAE3B;;;OAGG;IAEH,QAAQ,EAAE,OAAO,CAAS;IAE1B;;;OAGG;IAEH,OAAO,EAAE,OAAO,CAAS;IAEzB;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAmB;IAEvC;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAW;IAEnC;;;OAGG;IAEH,OAAO,EAAE,OAAO,CAAQ;;IAQxB;;;;OAIG;IACH,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAMzB;IAED;;;OAGG;IACH,IAAI,QAAQ,IAZQ,MAAM,CAczB;IAED;;;OAGG;IACH,eAAe;IAKf;;OAEG;IACH,YAAY,CAAC,CAAC,EAAE,GAAG;IASnB,iBAAiB;IAKjB,MAAM;CA0CP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/components/search-form/search-form.js

@@ -0,0 +1,131 @@
+import { unsafeCSS as h, html as c } from "lit";
+import { ifDefined as n } from "lit-html/directives/if-defined.js";
+import { property as r } from "lit/decorators.js";
+import { n as m } from "../index.browser.js";
+import { E as p } from "../EdElement.js";
+import "../button/button.js";
+const f = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-search-form{width:100%}@media all and (min-width:48rem){.ed-c-search-form__body{display:flex}}.ed-c-search-form__body-inner{position:relative}.ed-c-search-form__clear-button{display:inline-flex;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.ed-c-search-form__label{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);display:block;margin-bottom:.5rem}.ed-c-search-form__typeahead{position:relative;flex:1}.ed-c-search-form__dropdown{display:none;position:absolute;top:100%;left:0;width:100%;background:var(--ed-theme-color-background-default);border:1px solid var(--ed-theme-color-border-default);border-radius:var(--ed-theme-border-radius-md);box-shadow:var(--ed-theme-box-shadow-sm);z-index:1}.ed-c-search-form.ed-is-active .ed-c-search-form__dropdown{display:block}.ed-c-search-form__dropdown-list{list-style:none;margin:0;padding:0}.ed-c-search-form__dropdown-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);display:block;padding:.5rem 1rem;color:var(--ed-theme-color-content-default);text-decoration:none}.ed-c-search-form__dropdown-link:hover,.ed-c-search-form__dropdown-link:focus{text-decoration:underline}.ed-c-search-form__input{-webkit-appearance:none;width:100%;border-width:var(--ed-theme-border-width-sm);border-style:solid;border-color:var(--ed-theme-form-color-border-default);border-radius:var(--ed-theme-border-radius-sm);outline:none;padding:.8125rem .5rem;font-family:var(--ed-theme-typography-body-default-font-family);font-weight:var(--ed-theme-typography-body-default-font-weight);font-size:var(--ed-theme-typography-body-default-font-size);line-height:var(--ed-theme-typography-body-default-line-height);letter-spacing:var(--ed-theme-typography-body-default-letter-spacing);text-transform:var(--ed-theme-typography-body-default-text-transform);color:var(--ed-theme-form-color-content-default);background-color:var(--ed-theme-form-color-background-default);transition:border-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),background-color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),box-shadow var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-search-form__input:hover{border-color:var(--ed-theme-color-border-brand);background-color:var(--ed-theme-form-color-background-hover)}.ed-c-search-form__input:focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus)}.ed-c-search-form__input:not(:placeholder-shown):focus:not(:disabled){border-color:var(--ed-theme-form-color-border-focus);background-color:var(--ed-theme-form-color-background-hover)}.ed-is-error .ed-c-search-form__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-error)}.ed-is-success .ed-c-search-form__input:not(:placeholder-shown):focus:not(:disabled){background-color:var(--ed-theme-color-background-utility-success)}.ed-c-search-form__input:active:not(:disabled){border-color:var(--ed-theme-form-color-border)}.ed-c-search-form__input:disabled{background-color:var(--ed-theme-color-background-subtle);border-color:var(--ed-theme-color-border-disabled);color:var(--ed-theme-color-content-disabled);cursor:not-allowed}.ed-c-search-form__input:disabled~.ed-c-text-field__label,.ed-c-search-form__input:disabled:hover~.ed-c-text-field__label,.ed-c-search-form__input:disabled::placeholder{color:var(--ed-theme-color-content-disabled)}.ed-c-search-form__input:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-default);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-search-form__input::placeholder{font-family:var(--ed-theme-typography-body-sm-font-family);font-weight:var(--ed-theme-typography-body-sm-font-weight);font-size:var(--ed-theme-typography-body-sm-font-size);line-height:var(--ed-theme-typography-body-sm-line-height);letter-spacing:var(--ed-theme-typography-body-sm-letter-spacing);text-transform:var(--ed-theme-typography-body-sm-text-transform);color:var(--ed-theme-color-content-subtle);transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-is-error .ed-c-search-form__input::placeholder{color:var(--ed-theme-color-content-utility-error)}.ed-is-error .ed-c-search-form__input:hover::placeholder{color:var(--ed-theme-color-content-utility-error-hover)}.ed-is-error .ed-c-search-form__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-error);background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-search-form__input:hover,.ed-is-error .ed-c-search-form__input:focus{background-color:var(--ed-theme-color-background-utility-error)}.ed-is-error .ed-c-search-form__input:not(:focus){color:var(--ed-theme-color-content-default)}.ed-is-success .ed-c-search-form__input{color:var(--ed-theme-color-content-default);border-color:var(--ed-theme-color-border-utility-success);background-color:var(--ed-theme-color-background-utility-success)}.ed-is-success .ed-c-search-form__input:hover,.ed-is-success .ed-c-search-form__input:focus{background-color:var(--ed-theme-color-background-utility-success)}.ed-c-search-form__input{display:block;width:100%;padding-right:6rem}.ed-c-search-form__button{display:block;margin-top:1rem}@media all and (min-width:48rem){.ed-c-search-form__button{margin-top:0;margin-left:1rem}}.ed-c-search-form__empty-message{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);display:flex;padding:.5rem 1rem;width:100%}";
+var u = Object.defineProperty, o = (i, t, d, y) => {
+  for (var a = void 0, l = i.length - 1, s; l >= 0; l--)
+    (s = i[l]) && (a = s(t, d, a) || a);
+  return a && u(t, d, a), a;
+};
+class e extends p {
+  constructor() {
+    super(), this.label = "Label", this.value = "", this.trimItems = !1, this.isActive = !1, this.isEmpty = !1, this.placeholder = "Find a symbol", this.clearButtonText = "Clear", this.isApple = !0, this.openDropdown = this.openDropdown.bind(this), this.clearSearchForm = this.clearSearchForm.bind(this);
+  }
+  static get styles() {
+    return h(f);
+  }
+  /**
+   * Set the value TODO: Revisit this
+   * 1) Do some side effect here. Set a pseudo-private property that will contain the actual value
+   * 2) call LitElement's requestUpdate so that a rerender is done if needed
+   */
+  set theValue(t) {
+    const d = this.value;
+    this.theValue = t, this.requestUpdate("value", d);
+  }
+  /**
+   * Return the pseudo-private so that when vitextfield.value is accessed the correct value is returned
+   * TODO: Revisit this
+   */
+  get theValue() {
+    return this.theValue;
+  }
+  /**
+   * Clear text input
+   * TODO: Revisit this since logic likely needs to live outside the component
+   */
+  clearSearchForm() {
+    this.value = "", this.isActive = !1, this.shadowRoot.querySelector(".ed-c-search-form__input").focus();
+  }
+  /**
+   * TODO: Remove this logic after demo tp create
+   */
+  openDropdown(t) {
+    this.value = t.target.value, this.value !== "" ? this.isActive = !0 : this.isActive = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.fieldId = this.fieldId || m();
+  }
+  render() {
+    const t = this.componentClassNames("ed-c-search-form", {
+      "ed-c-search-form--inverted": this.inverted === !0,
+      "ed-c-search-form--display": this.variant === "display",
+      "ed-is-active": this.isActive === !0
+    });
+    return c`
+      <div class="${t}">
+        <label class="ed-c-search-form__label ${this.hideLabel === !0 && "ed-u-is-vishidden"}" for="${this.fieldId}">${this.label}</label>
+        <div class="ed-c-search-form__body">
+          <div class="ed-c-search-form__typeahead">
+            <div class="ed-c-search-form__body-inner">
+              <input
+                class="ed-c-search-form__input"
+                aria-expanded=${this.isActive}
+                aria-autocomplete="list"
+                role="combobox"
+                @keyup=${this.openDropdown}
+                .value=${this.value}
+                type="text"
+                id="${this.fieldId}"
+                placeholder="${n(this.placeholder)}"
+              />
+              ${this.isActive ? c`
+                    <ed-button
+                      @click=${this.clearSearchForm}
+                      class="ed-c-search-form__clear-button"
+                      text="${this.clearButtonText}"
+                      size="sm"
+                      variant="bare"
+                    ></ed-button>
+                  ` : ""}
+            </div>
+          </div>
+          <ed-button class="ed-c-search-form__button" text="Search" ?inverted=${this.inverted}></ed-button>
+        </div>
+      </div>
+    `;
+  }
+}
+o([
+  r()
+], e.prototype, "fieldId");
+o([
+  r()
+], e.prototype, "label");
+o([
+  r({ type: Boolean })
+], e.prototype, "inverted");
+o([
+  r({ type: Boolean })
+], e.prototype, "hideLabel");
+o([
+  r()
+], e.prototype, "variant");
+o([
+  r()
+], e.prototype, "value");
+o([
+  r({ type: Boolean })
+], e.prototype, "trimItems");
+o([
+  r({ type: Boolean })
+], e.prototype, "isActive");
+o([
+  r({ type: Boolean })
+], e.prototype, "isEmpty");
+o([
+  r()
+], e.prototype, "placeholder");
+o([
+  r()
+], e.prototype, "clearButtonText");
+o([
+  r({ type: Boolean })
+], e.prototype, "isApple");
+customElements.get("ed-search-form") === void 0 && customElements.define("ed-search-form", e);
+export {
+  e as EdSearchForm
+};

package/components/section/section.d.ts

@@ -0,0 +1,16 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * @slot - The section content
+ *
+ * @slot sectionHeaderAfter - Right-aligned area that appears to the right of the section header area
+ */
+export declare class EdSection extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-section': EdSection;
+    }
+}
+//# sourceMappingURL=section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/section/section.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAEtF;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,MAAM,KAAK,MAAM,4BAEhB;IAED,MAAM;CAgBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/components/section/section.js

@@ -0,0 +1,27 @@
+import { unsafeCSS as t, html as s } from "lit";
+import { E as o } 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-section{margin-bottom:2rem}.ed-c-section-header{display:flex;justify-content:space-between}.ed-c-section__body{padding-top:1rem}@media all and (min-width:60rem){.ed-c-section__body{padding-top:2rem}}";
+class n extends o {
+  static get styles() {
+    return t(d);
+  }
+  render() {
+    const e = this.componentClassNames("ed-c-section", {});
+    return s`
+      <section class="${e}">
+        <header class="ed-c-section-header">
+          <div class="ed-c-section-header__body">
+            <slot name="header"></slot>
+          </div>
+        </header>
+        <div class="ed-c-section__body">
+          <slot></slot>
+        </div>
+      </section>
+    `;
+  }
+}
+customElements.get("ed-section") === void 0 && customElements.define("ed-section", n);
+export {
+  n as EdSection
+};