@brad-frost-web/eddie-web-components 0.20.0 → 0.26.0

package/cdn/components/accordion/accordion.js

@@ -1,10 +1,10 @@
 import { r as d, b as i, n as a } from "../../chunks/lit.Drf_LhNi.js";
 import { E as l } from "../../chunks/ed-base.CuGZbk3k.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-accordion--inverted{color:var(--ed-theme-color-content-knockout);--ed-accordion-panel-button-hover-text-color: var(--ed-theme-color-content-subtle)}";
-var h = Object.defineProperty, v = (t, o, n, f) => {
+var v = Object.defineProperty, h = (t, o, n, f) => {
   for (var e = void 0, r = t.length - 1, s; r >= 0; r--)
     (s = t[r]) && (e = s(o, n, e) || e);
-  return e && h(o, n, e), e;
+  return e && v(o, n, e), e;
 };
 class c extends l {
   static get styles() {
@@ -15,13 +15,13 @@ class c extends l {
       "ed-c-accordion--inverted": this.inverted === !0
     });
     return i`
-      <dl class="${o}">
+      <div class="${o}" role="list">
         <slot></slot>
-      </dl>
+      </div>
     `;
   }
 }
-v([
+h([
   a({ type: Boolean })
 ], c.prototype, "inverted");
 customElements.get("ed-accordion") === void 0 && customElements.define("ed-accordion", c);

package/cdn/components/accordion-panel/accordion-panel.js

@@ -1,12 +1,12 @@
-import { r as c, b as h, n as a } from "../../chunks/lit.Drf_LhNi.js";
+import { r as c, b as h, n as o } from "../../chunks/lit.Drf_LhNi.js";
 import { n as l } from "../../chunks/index.browser.D527xXcp.js";
 import { E as p } from "../../chunks/ed-base.CuGZbk3k.js";
 import "../icon/icon.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-accordion-panel{border-block-end:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle)}.ed-c-accordion-panel__button{display:flex;align-items:center;appearance:none;background:none;border:none;padding:1rem 0;width:100%;cursor:pointer;color:inherit;overflow-x:hidden;transition:color var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-accordion-panel__button:hover,.ed-c-accordion-panel__button:focus{color:var(--ed-accordion-panel-button-hover-text-color, var(--ed-theme-color-content-default-hover))}ed-icon{margin-inline-start:auto;transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-accordion-panel.ed-is-active ed-icon{transform:rotate(-180deg)}.ed-c-accordion-panel__body{margin:0;padding:0;overflow:hidden;visibility:hidden;transition:height var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease),visibility var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-accordion-panel.ed-is-active .ed-c-accordion-panel__body{visibility:visible}.ed-c-accordion-panel__body-inner{padding-block-end:1rem;padding-block-start:1rem}.ed-c-accordion--condensed .ed-c-accordion-panel__body-inner{padding-block-start:.5rem;padding-block-end:.5rem}";
-var b = Object.defineProperty, n = (o, t, s, v) => {
-  for (var e = void 0, d = o.length - 1, r; d >= 0; d--)
-    (r = o[d]) && (e = r(t, s, e) || e);
-  return e && b(t, s, e), e;
+var b = Object.defineProperty, a = (n, t, d, v) => {
+  for (var e = void 0, s = n.length - 1, r; s >= 0; s--)
+    (r = n[s]) && (e = r(t, d, e) || e);
+  return e && b(t, d, e), e;
 };
 class i extends p {
   static get styles() {
@@ -23,7 +23,7 @@ class i extends p {
    * 1) Set panel height on load. Active state should set panel height to content within panel
    */
   connectedCallback() {
-    super.connectedCallback(), this.id = this.id || l(), this.ariaLabelledBy = this.ariaLabelledBy || l(), this.setPanelHeight(), this.isActive && (this.fullyOpen = !0, this.setPanelHeight());
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem"), this.id = this.id || l(), this.ariaLabelledBy = this.ariaLabelledBy || l(), this.setPanelHeight(), this.isActive && (this.fullyOpen = !0, this.setPanelHeight());
   }
   /**
    * Set panel height
@@ -55,7 +55,7 @@ class i extends p {
     });
     return h`
       <div class="${t}">
-        <dt class="ed-c-accordion-panel__header">
+        <div class="ed-c-accordion-panel__header">
           <button
             class="ed-c-accordion-panel__button"
             aria-expanded="${!!this.isActive}"
@@ -66,27 +66,27 @@ class i extends p {
             <slot name="header"></slot>
             <ed-icon name="keyboard-arrow-down"></ed-icon>
           </button>
-        </dt>
-        <dd class="ed-c-accordion-panel__body" aria-labelledby="${this.ariaLabelledBy}" id="${this.id}" style=${"height: " + this.height}>
+        </div>
+        <div class="ed-c-accordion-panel__body" aria-labelledby="${this.ariaLabelledBy}" id="${this.id}" style=${"height: " + this.height}>
           <div class="ed-c-accordion-panel__body-inner" #bodyInner>
             <slot></slot>
           </div>
-        </dd>
+        </div>
       </div>
     `;
   }
 }
-n([
-  a({ type: Boolean })
+a([
+  o({ type: Boolean })
 ], i.prototype, "isActive");
-n([
-  a({ type: Boolean })
+a([
+  o({ type: Boolean })
 ], i.prototype, "fullyOpen");
-n([
-  a()
+a([
+  o()
 ], i.prototype, "ariaLabelledBy");
-n([
-  a()
+a([
+  o()
 ], i.prototype, "height");
 customElements.get("ed-accordion-panel") === void 0 && customElements.define("ed-accordion-panel", i);
 export {

package/cdn/components/alert/alert.js

@@ -59,6 +59,8 @@ class e extends m {
                     size="lg"
                     iconName="close"
                     iconPosition="after"
+                    text="Dismiss"
+                    ?hideText=${!0}
                     @click=${this.handleDismiss}
                   ></ed-button>` : b}
             </div>

package/cdn/components/black-friday-modal/black-friday-modal.js

@@ -1,5 +1,5 @@
 import { E as m } from "../../chunks/ed-base.CuGZbk3k.js";
-import { r as h, c as g, o as s, b as r, n as d, e as b } from "../../chunks/lit.Drf_LhNi.js";
+import { r as h, c as b, o as n, b as r, n as d, e as g } from "../../chunks/lit.Drf_LhNi.js";
 import "../button/button.js";
 import "../grid/grid.js";
 import "../grid-item/grid-item.js";
@@ -9,8 +9,8 @@ import "../heading/heading.js";
 import "../text-passage/text-passage.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-black-friday-modal{display:block;height:0;width:0;padding:0 0 4rem;overflow:hidden;position:fixed;max-width:none;max-height:none;inset-block-start:unset;inset-block-end:0;inset-inline-end:0;background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout);border:none;z-index:1000;transition:height var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-black-friday-modal[open]{visibility:visible;width:100%;height:100vh;box-shadow:0 -5px 10px #0006;overflow:auto}.ed-c-black-friday-modal__header{display:flex;justify-content:space-between;position:relative;align-items:baseline;gap:1rem;margin-block-end:4rem;box-shadow:0 10px 0 -5px var(--ed-theme-color-background-accent-1),0 20px 0 -10px var(--ed-theme-color-background-accent-2),0 30px 0 -16px var(--ed-theme-color-background-accent-4)}.ed-c-black-friday-modal__header-media{position:absolute;overflow:hidden;height:100%;width:100%}.ed-c-black-friday-modal__header-media:after{content:"";position:absolute;inset:0;background:#0009;z-index:1}.ed-c-black-friday-modal__header-media-image{position:relative;display:block;width:100%;height:100%;object-fit:cover}.ed-c-black-friday-modal__header-content{position:relative;width:100%}.ed-c-black-friday-modal__header-content-text{position:relative;width:100%;text-align:center;padding:7rem 0 2rem;z-index:3}@media all and (min-width:48rem){.ed-c-black-friday-modal__header-content-text{padding:2rem 0}}.ed-c-black-friday-modal__header-content-description{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-black-friday-modal__title{margin-block-end:1rem}.ed-c-black-friday-modal__description{max-width:35rem}.ed-c-black-friday-modal__close-button{position:absolute;inset-block-start:5.5rem;inset-inline-end:.5rem;appearance:none;background:none;outline:none;border:none;padding:.5rem;z-index:4;cursor:pointer;color:var(--ed-theme-color-content-knockout)}.ed-c-black-friday-modal__close-button:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-knockout);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}@media all and (min-width:48rem){.ed-c-black-friday-modal__close-button{inset-block-start:.5rem;inset-inline-end:.5rem}}@media all and (min-width:60rem){.ed-c-black-friday-modal__close-button{padding:1rem}}.ed-c-black-friday-modal__close-icon{fill:currentColor;height:2rem;width:2rem}.ed-c-black-friday-modal__promos{display:block;margin-block-end:4rem}.ed-c-black-friday-modal__image{display:block;width:100%}.ed-c-black-friday-modal__section-title{display:block;margin-block-end:1rem;text-align:center}.ed-c-black-friday-modal__card{display:flex;flex-direction:column;height:100%}.ed-c-black-friday-modal__card-body{flex:1}.ed-c-black-friday-modal__card-footer{padding:.5rem 1rem 1rem;text-align:center}.ed-c-black-friday-modal__card-media{display:block;overflow:hidden;margin-block-end:1rem;border:1px solid var(--ed-theme-color-border-knockout);border-radius:.5rem}.ed-c-black-friday-modal__card-media:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-knockout);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-black-friday-modal__card-image{display:block;width:100%}.ed-c-black-friday-modal__card-title-anchor{display:block;text-decoration:none;color:var(--ed-theme-color-content-knockout)}.ed-c-black-friday-modal__card-title-anchor:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-theme-focus-ring-color-border-knockout);outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-black-friday-modal__card-title{display:block;margin-block-end:1rem;text-align:center}.ed-c-black-friday-modal__card-description{display:block;margin-block-end:1rem}.ed-c-black-friday-modal__card-description p{text-align:center}.ed-c-black-friday-modal__header-content-title{text-shadow:2px 0 0 var(--ed-theme-color-background-accent-2),4px 0 0 var(--ed-theme-color-background-accent-1);letter-spacing:1.5px}.ed-c-black-friday-modal__card-paragraph{text-align:center}.ed-c-black-friday-modal__card-list-container{display:flex;flex-direction:column;align-items:center}.ed-c-black-friday-modal__card-list{padding:0;margin:0}.strikethrough{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);text-decoration:line-through;color:var(--ed-theme-color-content-subtle)}.ed-c-black-friday-modal__cta{margin-block-start:2rem;text-align:center}';
 var u = Object.defineProperty, i = (c, a, e, p) => {
-  for (var o = void 0, l = c.length - 1, n; l >= 0; l--)
-    (n = c[l]) && (o = n(a, e, o) || o);
+  for (var o = void 0, l = c.length - 1, s; l >= 0; l--)
+    (s = c[l]) && (o = s(a, e, o) || o);
   return o && u(a, e, o), o;
 };
 class t extends m {
@@ -164,7 +164,7 @@ class t extends m {
       <dialog
         aria-labelledby="black-friday-modal-heading"
         class="${a}"
-        open=${g(this.isActive ? "true" : void 0)}
+        open=${b(this.isActive ? "true" : void 0)}
         @keydown=${this.handleKeyDown}
       >
         <header class="ed-c-black-friday-modal__header">
@@ -177,13 +177,12 @@ class t extends m {
                 <ed-heading id="black-friday-modal-heading" tagName="h2" variant="display-lg" class="ed-u-display-block ed-u-margin-bottom-sm"
                   ><span class="ed-c-black-friday-modal__header-content-title">${this.heading}</span></ed-heading
                 >
-                <div class="ed-c-black-friday-modal__header-content-description">${s(this.description)}</div>
+                <div class="ed-c-black-friday-modal__header-content-description">${n(this.description)}</div>
               </ed-layout-container>
             </div>
           </div>
-          <button class="ed-c-black-friday-modal__close-button" @click=${this.closeModal}>
-            <ed-icon name="close" />
-            <span class="is-vishidden">${this.closeButtonText}</span>
+          <button class="ed-c-black-friday-modal__close-button" @click=${this.closeModal} aria-label="${this.closeButtonText}">
+            <ed-icon name="close" aria-hidden="true"></ed-icon>
           </button>
         </header>
         <div class="ed-c-black-friday-modal__body">
@@ -201,11 +200,11 @@ class t extends m {
                             ` : r` <img class="ed-c-black-friday-modal__card-image" src="${e.imgSrc}" alt="${e.imgAlt}" /> `}
                         <ed-heading tagName="h4" variant="title-lg" class="ed-c-black-friday-modal__card-title">${e.heading}</ed-heading>
 
-                        <ed-text-passage class="ed-c-black-friday-modal__card-description"> ${s(e.description)} </ed-text-passage>
+                        <ed-text-passage class="ed-c-black-friday-modal__card-description"> ${n(e.description)} </ed-text-passage>
                       </div>
                       ${e.href && e.buttonText ? r`
                             <footer class="ed-c-black-friday-modal__card-footer">
-                              <ed-button href="${e.href}" size="lg">${s(e.buttonText)}</ed-button>
+                              <ed-button href="${e.href}" size="lg">${n(e.buttonText)}</ed-button>
                             </footer>
                           ` : ""}
                     </div>
@@ -277,7 +276,7 @@ i([
   d({ type: Array })
 ], t.prototype, "courses");
 i([
-  b(".ed-c-black-friday-modal__close-button")
+  g(".ed-c-black-friday-modal__close-button")
 ], t.prototype, "closeButton");
 customElements.get("ed-black-friday-modal") === void 0 && customElements.define("ed-black-friday-modal", t);
 export {

package/cdn/components/breadcrumbs/breadcrumbs.js

@@ -1,7 +1,7 @@
 import { r as s, b as r } from "../../chunks/lit.Drf_LhNi.js";
 import { E as t } from "../../chunks/ed-base.CuGZbk3k.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-inline-start:.5rem;margin-block-start:.5rem}";
-class o extends t {
+class a extends t {
   static get styles() {
     return s(m.toString());
   }
@@ -9,14 +9,14 @@ class o extends t {
     const e = this.componentClassNames("ed-c-breadcrumbs", {});
     return r`
       <nav class="${e}">
-        <ol class="ed-c-breadcrumbs__list">
+        <div class="ed-c-breadcrumbs__list" role="list">
           <slot></slot>
-        </ol>
+        </div>
       </nav>
     `;
   }
 }
-customElements.get("ed-breadcrumbs") === void 0 && customElements.define("ed-breadcrumbs", o);
+customElements.get("ed-breadcrumbs") === void 0 && customElements.define("ed-breadcrumbs", a);
 export {
-  o as EdBreadcrumbs
+  a as EdBreadcrumbs
 };

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

@@ -1,34 +1,37 @@
-import { r as l, c as d, b as n, n as m } from "../../chunks/lit.Drf_LhNi.js";
+import { r as l, c as d, b as s, n as c } from "../../chunks/lit.Drf_LhNi.js";
 import { E as h } from "../../chunks/ed-base.CuGZbk3k.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-inline-end:.5rem;text-decoration:none;color:var(--ed-theme-link-color-content-default)}.ed-c-breadcrumbs__link:hover,.ed-c-breadcrumbs__link:focus{text-decoration:underline;color:var(--ed-theme-link-color-content-hover)}ed-icon{--ed-icon-fill: var(--ed-theme-color-content-subtle);--ed-icon-height: .5rem;--ed-icon-width: .5rem}";
-var f = Object.defineProperty, c = (r, t, i, p) => {
+var f = Object.defineProperty, m = (r, t, i, p) => {
   for (var e = void 0, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (e = a(t, i, e) || e);
   return e && f(t, i, e), e;
 };
-class s extends h {
+class n extends h {
   static get styles() {
     return l(b.toString());
   }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
+  }
   render() {
     const t = this.componentClassNames("ed-c-breadcrumbs__item", {});
-    return n`
-      <li class="${t}">
-        ${this.href ? n`<a class="ed-c-breadcrumbs__link" href=${d(this.href)} target=${d(this.target)}>
+    return s`
+      <div class="${t}">
+        ${this.href ? s`<a class="ed-c-breadcrumbs__link" href=${d(this.href)} target=${d(this.target)}>
                 <slot></slot>
               </a>
-              <ed-icon name="keyboard-arrow-right"> </ed-icon>` : n`<slot></slot>`}
-      </li>
+              <ed-icon name="keyboard-arrow-right"> </ed-icon>` : s`<slot></slot>`}
+      </div>
     `;
   }
 }
-c([
-  m()
-], s.prototype, "href");
-c([
-  m()
-], s.prototype, "target");
-customElements.get("ed-breadcrumbs-item") === void 0 && customElements.define("ed-breadcrumbs-item", s);
+m([
+  c()
+], n.prototype, "href");
+m([
+  c()
+], n.prototype, "target");
+customElements.get("ed-breadcrumbs-item") === void 0 && customElements.define("ed-breadcrumbs-item", n);
 export {
-  s as EdBreadcrumbsItem
+  n as EdBreadcrumbsItem
 };

package/cdn/components/checkbox-field/checkbox-field.js

@@ -2,10 +2,10 @@ import { E as p } from "../../chunks/ed-base.CuGZbk3k.js";
 import { r as h, c as n, b as c, n as t } from "../../chunks/lit.Drf_LhNi.js";
 import "../field-note/field-note.js";
 const y = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-checkbox-field{border:none;margin:0;padding:0}.ed-c-checkbox-field--inverted{color:var(--ed-theme-color-content-knockout)}.ed-c-checkbox-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-block-end:.5rem;display:inline-block;margin-block-end:1rem}.ed-c-checkbox-field__list{list-style:none;margin:0;padding:0}";
-var f = Object.defineProperty, o = (r, l, a, b) => {
-  for (var i = void 0, d = r.length - 1, s; d >= 0; d--)
-    (s = r[d]) && (i = s(l, a, i) || i);
-  return i && f(l, a, i), i;
+var f = Object.defineProperty, o = (r, l, s, b) => {
+  for (var i = void 0, d = r.length - 1, a; d >= 0; d--)
+    (a = r[d]) && (i = a(l, s, i) || i);
+  return i && f(l, s, i), i;
 };
 class e extends p {
   constructor() {
@@ -28,9 +28,9 @@ class e extends p {
         </legend>
 
         <div class="ed-c-checkbox-field__body">
-          <ul class="ed-c-checkbox-field__list">
+          <div class="ed-c-checkbox-field__list" role="list">
             <slot></slot>
-          </ul>
+          </div>
         </div>
         ${this.fieldNote && c`<ed-field-note
           ?inverted=${this.inverted}

package/cdn/components/checkbox-field-item/checkbox-field-item.js

@@ -1,8 +1,8 @@
 import { a as l } from "../../chunks/ed-base.CuGZbk3k.js";
-import { r as h, c as b, b as p, n as t, e as k } from "../../chunks/lit.Drf_LhNi.js";
+import { r as h, c as b, b as p, n as t, e as m } from "../../chunks/lit.Drf_LhNi.js";
 import { n as s } from "../../chunks/index.browser.D527xXcp.js";
 import "../icon/icon.js";
-const m = `@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-checkbox-field-item{display:contents}.ed-c-checkbox-field-item{display:flex;position:relative;margin:.75rem 0 0;padding:0}:host(:first-child) .ed-c-checkbox-field-item{margin-block-start:0}.ed-c-checkbox-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;inset-block-start:.03125rem;margin-inline-start:.5rem;flex:1}.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-block-start:0;inset-inline-end:0;inset-block-end:0;inset-inline-start:0;width:1.5rem;height:1.5rem;flex-shrink:0;z-index:1}.ed-c-checkbox__custom-check:before{content:"";position:absolute;inset-block-start:0;inset-inline-end:0;inset-block-end:0;inset-inline-start: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;inset-block-start:.25rem;inset-inline-end:.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")}`;
+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-checkbox-field-item{display:contents}.ed-c-checkbox-field-item{display:flex;position:relative;margin:.75rem 0 0;padding:0}:host(:first-child) .ed-c-checkbox-field-item{margin-block-start:0}.ed-c-checkbox-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;inset-block-start:.03125rem;margin-inline-start:.5rem;flex:1}.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-block-start:0;inset-inline-end:0;inset-block-end:0;inset-inline-start:0;width:1.5rem;height:1.5rem;flex-shrink:0;z-index:1}.ed-c-checkbox__custom-check:before{content:"";position:absolute;inset-block-start:0;inset-inline-end:0;inset-block-end:0;inset-inline-start: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;inset-block-start:.25rem;inset-inline-end:.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, o = (d, r, a, f) => {
   for (var c = void 0, i = d.length - 1, n; i >= 0; i--)
     (n = d[i]) && (c = n(r, a, c) || c);
@@ -13,7 +13,7 @@ class e extends l {
     super(...arguments), this.type = "checkbox", this.checked = !1, this.optionalLabel = "(optional)";
   }
   static get styles() {
-    return h(m.toString());
+    return h(k.toString());
   }
   /**
    * Connected callback
@@ -23,7 +23,7 @@ class e extends l {
    * 4) Set the aria-describedby if the fieldNote is set
    */
   connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || s(), this.setFormData(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || s()), this.defaultValue = this.checked;
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem"), this.fieldId = this.fieldId || s(), this.setFormData(), this.fieldNote && (this.ariaDescribedBy = this.ariaDescribedBy || s()), this.defaultValue = this.checked;
   }
   setFormData() {
     this.checked ? this.internals.setFormValue(this.value) : this.internals.setFormValue(null);
@@ -37,7 +37,7 @@ class e extends l {
   render() {
     const r = this.componentClassNames("ed-c-checkbox-field-item", {});
     return p`
-      <li class="${r}">
+      <div class="${r}">
         <input
           id="${this.fieldId}"
           type="checkbox"
@@ -56,7 +56,7 @@ class e extends l {
         <label class="ed-c-checkbox-field-item__label" for="${this.fieldId}">
           <slot></slot>
         </label>
-      </li>
+      </div>
     `;
   }
 }
@@ -100,7 +100,7 @@ o([
   t()
 ], e.prototype, "ariaDescribedBy");
 o([
-  k("input")
+  m("input")
 ], e.prototype, "field");
 customElements.get("ed-checkbox-field-item") === void 0 && customElements.define("ed-checkbox-field-item", e);
 export {