@brad-frost-web/eddie-web-components 0.32.0 → 0.34.0

package/cdn/components/primary-nav/primary-nav.js

@@ -1,20 +1,23 @@
-import { r as d, b as o, n as l } from "../../chunks/lit.Drf_LhNi.js";
-import { E as m } from "../../chunks/ed-base.CuGZbk3k.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-primary-nav--side-by-side{--ed-primary-nav-item-border-block-end: none}.ed-c-primary-nav__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.ed-c-primary-nav--side-by-side .ed-c-primary-nav__list{flex-direction:row;gap:2rem;--ed-primary-nav-link-padding: size(2) 0}@media all and (min-width:48rem){.ed-c-primary-nav__list{flex-direction:row;gap:2rem}}";
-var v = Object.defineProperty, c = (i, r, n, y) => {
-  for (var e = void 0, a = i.length - 1, s; a >= 0; a--)
-    (s = i[a]) && (e = s(r, n, e) || e);
-  return e && v(r, n, e), e;
+import { r as l, b as y, n } from "../../chunks/lit.Drf_LhNi.js";
+import { E as p } from "../../chunks/ed-base.CuGZbk3k.js";
+const s = '@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-primary-nav--side-by-side{--ed-primary-nav-item-border-block-end: none}.ed-c-primary-nav--size-sm .ed-c-primary-nav__list{--ed-primary-nav-link-hover-transform: none;--ed-primary-nav-link-font-family: var(--ed-theme-typography-body-default-font-family);--ed-primary-nav-link-font-weight: 700;--ed-primary-nav-link-font-size: var(--ed-theme-typography-body-default-font-size);--ed-primary-nav-link-line-height: var(--ed-theme-typography-body-default-line-height);--ed-primary-nav-link-letter-spacing: var(--ed-theme-typography-body-default-letter-spacing);--ed-primary-nav-link-text-transform: var(--ed-theme-typography-body-default-text-transform)}.ed-c-primary-nav--size-md .ed-c-primary-nav__list{--ed-primary-nav-link-hover-transform: none;--ed-primary-nav-link-font-family: var(--ed-theme-typography-body-lg-font-family);--ed-primary-nav-link-font-weight: 700;--ed-primary-nav-link-font-size: var(--ed-theme-typography-body-lg-font-size);--ed-primary-nav-link-line-height: var(--ed-theme-typography-body-lg-line-height);--ed-primary-nav-link-letter-spacing: var(--ed-theme-typography-body-lg-letter-spacing);--ed-primary-nav-link-text-transform: var(--ed-theme-typography-body-lg-text-transform)}.ed-c-primary-nav__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.ed-c-primary-nav--side-by-side .ed-c-primary-nav__list{flex-direction:row;gap:2rem;--ed-primary-nav-link-padding: size(2) 0}@media all and (min-width:48rem){.ed-c-primary-nav__list{flex-direction:row;gap:2rem}}.ed-c-primary-nav--vertical .ed-c-primary-nav__list{flex-direction:column;gap:.75rem;--ed-primary-nav-link-padding: 0;--ed-primary-nav-highlight-padding: 0;--ed-primary-nav-highlight-background: transparent;--ed-primary-nav-highlight-color: var(--ed-theme-color-content-brand);--ed-primary-nav-highlight-text-decoration: underline;--ed-primary-nav-highlight-justify: flex-start}';
+var v = Object.defineProperty, d = (i, r, o, h) => {
+  for (var e = void 0, t = i.length - 1, m; t >= 0; t--)
+    (m = i[t]) && (e = m(r, o, e) || e);
+  return e && v(r, o, e), e;
 };
-class t extends m {
+class a extends p {
   static get styles() {
-    return d(p);
+    return l(s);
   }
   render() {
     const r = this.componentClassNames("ed-c-primary-nav", {
-      "ed-c-primary-nav--side-by-side": this.behavior === "side-by-side"
+      "ed-c-primary-nav--side-by-side": this.behavior === "side-by-side",
+      "ed-c-primary-nav--vertical": this.orientation === "vertical",
+      "ed-c-primary-nav--size-sm": this.size === "sm",
+      "ed-c-primary-nav--size-md": this.size === "md"
     });
-    return o`
+    return y`
       <nav class="${r}" aria-label="Main Navigation">
         <div class="ed-c-primary-nav__list" role="list">
           <slot></slot>
@@ -23,10 +26,16 @@ class t extends m {
     `;
   }
 }
-c([
-  l()
-], t.prototype, "behavior");
-customElements.get("ed-primary-nav") === void 0 && customElements.define("ed-primary-nav", t);
+d([
+  n()
+], a.prototype, "behavior");
+d([
+  n()
+], a.prototype, "orientation");
+d([
+  n()
+], a.prototype, "size");
+customElements.get("ed-primary-nav") === void 0 && customElements.define("ed-primary-nav", a);
 export {
-  t as EdPrimaryNav
+  a as EdPrimaryNav
 };

package/cdn/components/primary-nav-item/primary-nav-item.js

@@ -1,13 +1,13 @@
 import { E as c } from "../../chunks/ed-base.CuGZbk3k.js";
-import { d as h, r as p, c as v, b as l, n } from "../../chunks/lit.Drf_LhNi.js";
+import { d as h, r as v, c as p, b as l, n } from "../../chunks/lit.Drf_LhNi.js";
 import "../icon/icon.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-primary-nav__item{border-block-end:var(--ed-primary-nav-item-border-block-end, var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-subtle))}@media all and (min-width:48rem){.ed-c-primary-nav__item{border-block-end:none}}.ed-c-primary-nav__link{font-family:var(--ed-theme-typography-primary-nav-default-mobile-font-family);font-weight:var(--ed-theme-typography-primary-nav-default-mobile-font-weight);font-size:var(--ed-theme-typography-primary-nav-default-mobile-font-size);line-height:var(--ed-theme-typography-primary-nav-default-mobile-line-height);letter-spacing:var(--ed-theme-typography-primary-nav-default-mobile-letter-spacing);text-transform:var(--ed-theme-typography-primary-nav-default-mobile-text-transform)}@media all and (min-width:48rem){.ed-c-primary-nav__link{font-family:var(--ed-theme-typography-primary-nav-default-font-family);font-weight:var(--ed-theme-typography-primary-nav-default-font-weight);font-size:var(--ed-theme-typography-primary-nav-default-font-size);line-height:var(--ed-theme-typography-primary-nav-default-line-height);letter-spacing:var(--ed-theme-typography-primary-nav-default-letter-spacing);text-transform:var(--ed-theme-typography-primary-nav-default-text-transform)}}.ed-c-primary-nav__link{display:flex;align-items:center;appearance:none;background:none;border:none;border-radius:var(--ed-theme-border-radius-md);white-space:nowrap;width:100%;margin:0;padding:var(--ed-primary-nav-link-padding, 1rem 1rem );color:var(--ed-header-color-content, var(--ed-theme-color-content-knockout));text-decoration:none;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);cursor:pointer}.ed-c-primary-nav__link:hover,.ed-c-primary-nav__link:focus{transform:scale(1.05)}.ed-c-primary-nav__link:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-header-focus-ring-color, var(--ed-theme-focus-ring-color-border-knockout));outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-primary-nav__item--highlight .ed-c-primary-nav__link{padding:1rem;background:var(--ed-theme-color-background-brand-knockout);justify-content:center}.ed-c-primary-nav__item.ed-is-active .ed-c-primary-nav__link{background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-theme-color-content-knockout)}@media all and (min-width:48rem){.ed-c-primary-nav__link{padding:1rem 0}}@media all and (min-width:60rem){.ed-c-primary-nav__link{padding:1rem 0;border-block-end:none}}ed-icon{--ed-icon-height: 1rem ;--ed-icon-width: 1rem ;margin-inline-start:auto;transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-primary-nav__item.ed-is-active ed-icon{transform:rotate(-180deg)}@media all and (min-width:48rem){ed-icon{margin-inline-start:1rem}}.ed-c-primary-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:transparent;opacity:0;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);z-index:-1}@media all and (min-width:48rem){.ed-c-primary-nav__item-panel{position:absolute;inset-block-start:100%;inset-inline-start:0;height:auto;box-shadow:var(--ed-theme-box-shadow-md)}}.ed-c-primary-nav__item.ed-is-active .ed-c-primary-nav__item-panel{display:block;visibility:visible;height:auto;padding-block-start:2rem;padding-block-end:2rem;background:var(--ed-theme-color-background-knockout);opacity:1;z-index:1;transition:opacity var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-primary-nav__item--megamenu .ed-c-primary-nav__item-panel-inner{max-width:70rem;padding-inline-end:2rem;padding-inline-start:2rem;margin:0 auto}";
-var u = Object.defineProperty, r = (o, e, i, d) => {
-  for (var a = void 0, m = o.length - 1, s; m >= 0; m--)
-    (s = o[m]) && (a = s(e, i, a) || a);
-  return a && u(e, i, a), a;
+const y = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-primary-nav__item{border-block-end:var(--ed-primary-nav-item-border-block-end, none)}.ed-c-primary-nav__link{font-family:var(--ed-primary-nav-link-font-family, var(--ed-theme-typography-primary-nav-default-mobile-font-family));font-weight:var(--ed-primary-nav-link-font-weight, var(--ed-theme-typography-primary-nav-default-mobile-font-weight));font-size:var(--ed-primary-nav-link-font-size, var(--ed-theme-typography-primary-nav-default-mobile-font-size));line-height:var(--ed-primary-nav-link-line-height, var(--ed-theme-typography-primary-nav-default-mobile-line-height));letter-spacing:var(--ed-primary-nav-link-letter-spacing, var(--ed-theme-typography-primary-nav-default-mobile-letter-spacing));text-transform:var(--ed-primary-nav-link-text-transform, var(--ed-theme-typography-primary-nav-default-mobile-text-transform));display:flex;align-items:center;appearance:none;background:none;border:none;border-radius:var(--ed-theme-border-radius-md);white-space:nowrap;width:100%;margin:0;padding:var(--ed-primary-nav-link-padding, 1rem 1rem );color:var(--ed-header-color-content, var(--ed-theme-color-content-knockout));text-decoration:none;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);cursor:pointer}.ed-c-primary-nav__link:hover,.ed-c-primary-nav__link:focus{transform:var(--ed-primary-nav-link-hover-transform, scale(1.05))}.ed-c-primary-nav__link:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-header-focus-ring-color, var(--ed-theme-focus-ring-color-border-knockout));outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-primary-nav__item--highlight .ed-c-primary-nav__link{padding:var(--ed-primary-nav-highlight-padding, 1rem );background:var(--ed-primary-nav-highlight-background, var(--ed-theme-color-background-brand-knockout));color:var(--ed-primary-nav-highlight-color, var(--ed-header-color-content, var(--ed-theme-color-content-knockout)));text-decoration:var(--ed-primary-nav-highlight-text-decoration, none);justify-content:var(--ed-primary-nav-highlight-justify, center)}.ed-c-primary-nav__item.ed-is-active .ed-c-primary-nav__link{background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-theme-color-content-knockout)}@media all and (min-width:48rem){.ed-c-primary-nav__link{font-family:var(--ed-primary-nav-link-font-family, var(--ed-theme-typography-primary-nav-default-font-family));font-weight:var(--ed-primary-nav-link-font-weight, var(--ed-theme-typography-primary-nav-default-font-weight));font-size:var(--ed-primary-nav-link-font-size, var(--ed-theme-typography-primary-nav-default-font-size));line-height:var(--ed-primary-nav-link-line-height, var(--ed-theme-typography-primary-nav-default-line-height));letter-spacing:var(--ed-primary-nav-link-letter-spacing, var(--ed-theme-typography-primary-nav-default-letter-spacing));text-transform:var(--ed-primary-nav-link-text-transform, var(--ed-theme-typography-primary-nav-default-text-transform));padding:var(--ed-primary-nav-link-padding, 1rem 0)}}@media all and (min-width:60rem){.ed-c-primary-nav__link{padding:var(--ed-primary-nav-link-padding, 1rem 0);border-block-end:none}}ed-icon{--ed-icon-height: 1rem ;--ed-icon-width: 1rem ;margin-inline-start:auto;transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-primary-nav__item.ed-is-active ed-icon{transform:rotate(-180deg)}@media all and (min-width:48rem){ed-icon{margin-inline-start:1rem}}.ed-c-primary-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:transparent;opacity:0;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);z-index:-1}@media all and (min-width:48rem){.ed-c-primary-nav__item-panel{position:absolute;inset-block-start:100%;inset-inline-start:0;height:auto;box-shadow:var(--ed-theme-box-shadow-md)}}.ed-c-primary-nav__item.ed-is-active .ed-c-primary-nav__item-panel{display:block;visibility:visible;height:auto;padding-block-start:2rem;padding-block-end:2rem;background:var(--ed-theme-color-background-knockout);opacity:1;z-index:1;transition:opacity var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-primary-nav__item--megamenu .ed-c-primary-nav__item-panel-inner{max-width:70rem;padding-inline-end:2rem;padding-inline-start:2rem;margin:0 auto}';
+var f = Object.defineProperty, r = (o, e, i, d) => {
+  for (var t = void 0, m = o.length - 1, s; m >= 0; m--)
+    (s = o[m]) && (t = s(e, i, t) || t);
+  return t && f(e, i, t), t;
 };
-class t extends c {
+class a extends c {
   /**
    * Initialize functions
    */
@@ -15,7 +15,7 @@ class t extends c {
     super(), this.text = "Nav item", this.href = "#", this.iconName = "keyboard-arrow-down", this.handleOnClickOutside = this.handleOnClickOutside.bind(this), this.clickHandler = this.clickHandler.bind(this);
   }
   static get styles() {
-    return p(y);
+    return v(y);
   }
   /**
    * Connected Callback lifecycle
@@ -84,7 +84,7 @@ class t extends c {
         <div class="${e}" @keydown=${this.handleOnKeyDown}>
           <button class="ed-c-primary-nav__link" @click=${this.clickHandler} aria-expanded=${this.isActive === !0}>
             ${this.text}
-            <ed-icon styleModifier="ed-c-button__icon" aria-hidden="true" name="${v(this.iconName)}"></ed-icon>
+            <ed-icon styleModifier="ed-c-button__icon" aria-hidden="true" name="${p(this.iconName)}"></ed-icon>
           </button>
           <div class="ed-c-primary-nav__item-panel">
             <div class="ed-c-primary-nav__item-panel-inner">
@@ -101,23 +101,23 @@ class t extends c {
 }
 r([
   n()
-], t.prototype, "text");
+], a.prototype, "text");
 r([
   n()
-], t.prototype, "href");
+], a.prototype, "href");
 r([
   n()
-], t.prototype, "iconName");
+], a.prototype, "iconName");
 r([
   n({ type: Boolean })
-], t.prototype, "isHighlighted");
+], a.prototype, "isHighlighted");
 r([
   n({ type: Boolean })
-], t.prototype, "megaMenu");
+], a.prototype, "megaMenu");
 r([
   h()
-], t.prototype, "isActive");
-customElements.get("ed-primary-nav-item") === void 0 && customElements.define("ed-primary-nav-item", t);
+], a.prototype, "isActive");
+customElements.get("ed-primary-nav-item") === void 0 && customElements.define("ed-primary-nav-item", a);
 export {
-  t as EdPrimaryNavItem
+  a as EdPrimaryNavItem
 };

package/cdn/components/timeline/timeline.js

@@ -0,0 +1,41 @@
+import { r as m, b as c, n as o } from "../../chunks/lit.Drf_LhNi.js";
+import { E as s } from "../../chunks/ed-base.CuGZbk3k.js";
+const h = '@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-timeline{position:relative;padding-inline-start:3rem;--ed-c-timeline-node-marker-block-start: .25rem ;--ed-c-timeline-node-marker-inline-start: -2.1875rem ;--ed-c-timeline-node-marker-inline-end: auto;--ed-c-timeline-node-marker-block-end: auto;--ed-c-timeline-node-marker-highlight-inline-start: -2.25rem ;--ed-c-timeline-node-body-padding-inline-start: 0;--ed-c-timeline-node-body-padding-inline-end: 0}.ed-c-timeline__line{position:absolute;top:0;bottom:0;left:1rem;border-inline-start:var(--ed-theme-border-width-md) solid var(--ed-theme-color-border-default)}.ed-c-timeline--alternating:not(.ed-c-timeline--horizontal){padding-inline-start:0;--ed-c-timeline-node-marker-size: 3.25rem ;--ed-c-timeline-node-marker-highlight-size: 4rem ;--ed-c-timeline-node-marker-block-start: .25rem }.ed-c-timeline--alternating:not(.ed-c-timeline--horizontal) .ed-c-timeline__line{left:50%;transform:translate(-50%)}.ed-c-timeline--alternating:not(.ed-c-timeline--horizontal) ::slotted(ed-timeline-node:nth-child(odd)){display:block;width:50%;margin-inline-start:auto;--ed-c-timeline-node-body-padding-inline-start: 3rem ;--ed-c-timeline-node-marker-inline-start: -1.625rem ;--ed-c-timeline-node-marker-inline-end: auto;--ed-c-timeline-node-marker-highlight-inline-start: -2rem }.ed-c-timeline--alternating:not(.ed-c-timeline--horizontal) ::slotted(ed-timeline-node:nth-child(even)){display:block;width:50%;text-align:right;--ed-c-timeline-node-body-padding-inline-end: 3rem ;--ed-c-timeline-node-marker-inline-start: auto;--ed-c-timeline-node-marker-inline-end: -1.625rem ;--ed-c-timeline-node-marker-highlight-inline-start: auto;--ed-c-timeline-node-marker-highlight-inline-end: -2rem }.ed-c-timeline--horizontal{display:flex;flex-direction:row;gap:2rem;padding-inline-start:0;padding-block-start:3rem;--ed-c-timeline-node-marker-inline-start: calc(50% - .1875rem) ;--ed-c-timeline-node-marker-inline-end: auto;--ed-c-timeline-node-marker-block-start: -2.1875rem ;--ed-c-timeline-node-marker-block-end: auto;--ed-c-timeline-node-marker-highlight-inline-start: calc(50% - .25rem) ;--ed-c-timeline-node-marker-highlight-block-start: -2.25rem }.ed-c-timeline--horizontal .ed-c-timeline__line{top:1rem;bottom:auto;left:0;right:0;border-inline-start:0;border-block-start:var(--ed-theme-border-width-md) solid var(--ed-theme-color-border-default)}.ed-c-timeline--horizontal ::slotted(ed-timeline-node){flex:1;position:relative}.ed-c-timeline--horizontal.ed-c-timeline--alternating{padding-block-start:0;align-items:stretch;--ed-c-timeline-node-marker-size: 3.25rem ;--ed-c-timeline-node-marker-highlight-size: 4rem }.ed-c-timeline--horizontal.ed-c-timeline--alternating .ed-c-timeline__line{top:50%;transform:translateY(-50%)}.ed-c-timeline--horizontal.ed-c-timeline--alternating ::slotted(ed-timeline-node:nth-child(odd)){align-self:flex-start;padding-block-end:3rem;--ed-c-timeline-node-marker-block-start: auto;--ed-c-timeline-node-marker-block-end: -1.625rem ;--ed-c-timeline-node-marker-inline-start: calc(50% - 1.625rem) ;--ed-c-timeline-node-marker-inline-end: auto;--ed-c-timeline-node-marker-highlight-block-end: -2rem ;--ed-c-timeline-node-marker-highlight-inline-start: calc(50% - 2rem) }.ed-c-timeline--horizontal.ed-c-timeline--alternating ::slotted(ed-timeline-node:nth-child(even)){align-self:flex-end;padding-block-start:3rem;--ed-c-timeline-node-marker-block-start: -1.625rem ;--ed-c-timeline-node-marker-block-end: auto;--ed-c-timeline-node-marker-inline-start: calc(50% - 1.625rem) ;--ed-c-timeline-node-marker-inline-end: auto;--ed-c-timeline-node-marker-highlight-block-start: -2rem ;--ed-c-timeline-node-marker-highlight-inline-start: calc(50% - 2rem) }';
+var g = Object.defineProperty, a = (t, i, l, k) => {
+  for (var e = void 0, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (e = d(i, l, e) || e);
+  return e && g(i, l, e), e;
+};
+class r extends s {
+  constructor() {
+    super(...arguments), this.orientation = "vertical", this.behavior = "stacked";
+  }
+  static get styles() {
+    return m(h);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "list");
+  }
+  render() {
+    const i = this.componentClassNames("ed-c-timeline", {
+      "ed-c-timeline--horizontal": this.orientation === "horizontal",
+      "ed-c-timeline--alternating": this.behavior === "alternating"
+    });
+    return c`
+      <div class="${i}">
+        <div class="ed-c-timeline__line" aria-hidden="true"></div>
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+a([
+  o({ reflect: !0 })
+], r.prototype, "orientation");
+a([
+  o({ reflect: !0 })
+], r.prototype, "behavior");
+customElements.get("ed-timeline") === void 0 && customElements.define("ed-timeline", r);
+export {
+  r as EdTimeline
+};

package/cdn/components/timeline-node/timeline-node.js

@@ -0,0 +1,76 @@
+import { E as h } from "../../chunks/ed-base.CuGZbk3k.js";
+import "../heading/heading.js";
+import { r as p, b as i, A as l, n } from "../../chunks/lit.Drf_LhNi.js";
+const g = '@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-timeline-node{position:relative;padding-block-end:2rem}.ed-c-timeline-node__marker{position:absolute;inset-block-start:var(--ed-c-timeline-node-marker-block-start, .25rem );inset-inline-start:var(--ed-c-timeline-node-marker-inline-start, -2.1875rem );inset-inline-end:var(--ed-c-timeline-node-marker-inline-end, auto);inset-block-end:var(--ed-c-timeline-node-marker-block-end, auto);width:var(--ed-c-timeline-node-marker-size, .375rem );height:var(--ed-c-timeline-node-marker-size, .375rem );border-radius:50%;background:var(--ed-c-timeline-node-marker-color, var(--ed-theme-color-background-brand))}.ed-c-timeline-node--highlight .ed-c-timeline-node__marker{width:var(--ed-c-timeline-node-marker-highlight-size, .5rem );height:var(--ed-c-timeline-node-marker-highlight-size, .5rem );inset-inline-start:var(--ed-c-timeline-node-marker-highlight-inline-start, var(--ed-c-timeline-node-marker-inline-start, -2.25rem ));inset-inline-end:var(--ed-c-timeline-node-marker-highlight-inline-end, var(--ed-c-timeline-node-marker-inline-end, auto));inset-block-start:var(--ed-c-timeline-node-marker-highlight-block-start, var(--ed-c-timeline-node-marker-block-start, .25rem ));inset-block-end:var(--ed-c-timeline-node-marker-highlight-block-end, var(--ed-c-timeline-node-marker-block-end, auto))}.ed-c-timeline-node__marker--custom{background:transparent}.ed-c-timeline-node__marker--custom ::slotted(*){display:block;width:100%;height:100%}.ed-c-timeline-node__body{display:flex;flex-direction:column;gap:.25rem;text-align:inherit;padding-inline-start:var(--ed-c-timeline-node-body-padding-inline-start, 0);padding-inline-end:var(--ed-c-timeline-node-body-padding-inline-end, 0)}.ed-c-timeline-node__eyebrow{font-family:var(--ed-theme-typography-meta-default-font-family);font-weight:var(--ed-theme-typography-meta-default-font-weight);font-size:var(--ed-theme-typography-meta-default-font-size);line-height:var(--ed-theme-typography-meta-default-line-height);letter-spacing:var(--ed-theme-typography-meta-default-letter-spacing);text-transform:var(--ed-theme-typography-meta-default-text-transform);color:var(--ed-c-timeline-node-eyebrow-color, var(--ed-theme-color-content-subtle));text-transform:uppercase;letter-spacing:.04em}.ed-c-timeline-node__date{font-family:var(--ed-theme-typography-meta-default-font-family);font-weight:var(--ed-theme-typography-meta-default-font-weight);font-size:var(--ed-theme-typography-meta-default-font-size);line-height:var(--ed-theme-typography-meta-default-line-height);letter-spacing:var(--ed-theme-typography-meta-default-letter-spacing);text-transform:var(--ed-theme-typography-meta-default-text-transform);color:var(--ed-c-timeline-node-date-color, var(--ed-theme-color-content-subtle))}.ed-c-timeline-node__heading{display:block;color:var(--ed-c-timeline-node-heading-color, inherit)}.ed-c-timeline-node__link{color:inherit;text-decoration:none}.ed-c-timeline-node__link:hover,.ed-c-timeline-node__link:focus{text-decoration:underline;color:var(--ed-theme-link-color-content-hover)}.ed-c-timeline-node__content:empty{display:none}';
+var v = Object.defineProperty, r = (m, o, a, s) => {
+  for (var e = void 0, d = m.length - 1, c; d >= 0; d--)
+    (c = m[d]) && (e = c(o, a, e) || e);
+  return e && v(o, a, e), e;
+};
+class t extends h {
+  constructor() {
+    super(...arguments), this.text = "", this.headingTagName = "h3";
+  }
+  static get styles() {
+    return p(g);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
+  }
+  render() {
+    const o = this.componentClassNames("ed-c-timeline-node", {
+      "ed-c-timeline-node--highlight": this.variant === "highlight",
+      [`ed-c-timeline-node--${this.category}`]: !!this.category
+    }), a = !this.slotEmpty("marker"), s = !this.slotEmpty("eyebrow"), e = this.date ? this.datetime ? i`<time class="ed-c-timeline-node__date" part="date" datetime="${this.datetime}">${this.date}</time>` : i`<span class="ed-c-timeline-node__date" part="date">${this.date}</span>` : l, d = this.text ? i`<ed-heading
+          class="ed-c-timeline-node__heading"
+          part="heading"
+          tagName="${this.headingTagName}"
+          variant="headline-sm"
+        >
+          ${this.href ? i`<a class="ed-c-timeline-node__link" href="${this.href}">${this.text}</a>` : this.text}
+        </ed-heading>` : l;
+    return i`
+      <div class="${o}">
+        <div
+          class="ed-c-timeline-node__marker ${a ? "ed-c-timeline-node__marker--custom" : ""}"
+          part="marker"
+        >
+          ${a ? i`<slot name="marker"></slot>` : l}
+        </div>
+        <div class="ed-c-timeline-node__body" part="body">
+          ${s ? i`<div class="ed-c-timeline-node__eyebrow" part="eyebrow"><slot name="eyebrow"></slot></div>` : l}
+          ${e}
+          ${d}
+          <div class="ed-c-timeline-node__content" part="content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+r([
+  n()
+], t.prototype, "text");
+r([
+  n()
+], t.prototype, "date");
+r([
+  n()
+], t.prototype, "datetime");
+r([
+  n()
+], t.prototype, "href");
+r([
+  n()
+], t.prototype, "headingTagName");
+r([
+  n()
+], t.prototype, "variant");
+r([
+  n({ reflect: !0 })
+], t.prototype, "category");
+customElements.get("ed-timeline-node") === void 0 && customElements.define("ed-timeline-node", t);
+export {
+  t as EdTimelineNode
+};

package/components/badge/badge.d.ts

@@ -1,40 +1,68 @@
 import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
 /**
- * Small informational badge component for displaying status, counts, or labels.
- * Often used to highlight state information like "New", "Updated", or status badges
- * (success, warning, error).
+ * Small, non-interactive status / category indicator. Use badges to provide quick,
+ * decorative status or labelling alongside other content. For interactive chips
+ * (dismissible, selectable) use `ed-tag` instead.
  *
- * Use badges to provide quick, non-intrusive status information alongside other
- * content. Badges are typically decorative and not interactive.
+ * Three independent axes:
+ * - **variant** — semantic color. Unset renders the default (neutral) styling.
+ *   `brand` · `info` · `success` · `warning` · `error`.
+ * - **appearance** — the emphasis/fill, orthogonal to `variant`: `subtle` (default:
+ *   tinted surface, colored border + text) or `solid` (filled knockout surface with
+ *   knockout text, no border).
+ * - **size** — `sm` (default, label-sm) or `md` (label-default).
  *
- * @use Indicating status alongside content — "Active", "Pending", "Failed" — using the `success`, `warning`, or `error` variant to reinforce meaning with color
- * @use Labeling items with short metadata like "New", "Beta", or version numbers that supplement but don't replace the primary content
+ * An optional leading `iconName` renders an icon before the label.
+ *
+ * @use Indicating status alongside content — "Active", "Pending", "Failed" — using `success`, `warning`, or `error` to reinforce meaning with color
+ * @use Labeling items with short, neutral metadata like a category, "Beta", or a version number — leave `variant` unset for the neutral default
+ * @use Drawing extra attention with `appearance="solid"`, or sizing up to `size="md"` in denser-typography contexts
  * @use Inside tables, lists, or cards to visually differentiate items by state without adding interactive complexity
  *
- * @dontuse As a button or interactive element — badges are purely informational. Use `ed-button` for actions
+ * @dontuse As a button or interactive element — badges are purely informational. Use `ed-button` for actions or `ed-tag` for dismissible/selectable chips
  * @dontuse For long text or sentences — badges are designed for 1–3 words. Anything longer should be a field note, alert, or inline message
- * @dontuse As the sole indicator of critical state — always pair the badge with text or context that explains the state (e.g., "Status: Failed" not just a red badge)
+ * @dontuse As the sole indicator of critical state — the badge always carries a text label so color is never the only signal
  * @dontuse For notification counts on icons — this component is a label badge, not a dot/counter overlay
  *
- * @a11y Color alone must not convey the badge's meaning — the `success`, `warning`, and `error` variants use color, but the badge text must independently communicate the status (e.g., "Error" not just a red dot)
- * @a11y Badges are not announced as distinct regions by screen readers — ensure the badge text makes sense in the reading order of the surrounding content
- * @a11y If the badge conveys status that updates dynamically, wrap it in or associate it with an `aria-live` region so screen readers announce changes
+ * @a11y Color is never the only signal of variant — the badge always renders its text label, so success/warning/error meaning is conveyed by words, not just color
+ * @a11y The optional leading icon is decorative (`aria-hidden`) — never rely on it alone to convey meaning
+ * @a11y Badges are not announced as distinct regions — ensure the badge text makes sense in the reading order of the surrounding content
  *
- * @slot - Badge content (text or other elements)
+ * @slot - Badge label content (falls back to the `text` property)
  */
 export declare class EdBadge extends EdElement {
     static get styles(): import('lit').CSSResult;
     /**
-     * The badge text (alternative to slot content).
+     * The badge label text (alternative to slot content).
      */
     text?: string;
     /**
-     * Status variant indicating the badge's semantic meaning.
-     * - `success`: Positive state — approved, complete, active, working properly
-     * - `warning`: Cautionary state — pending, needs review, approaching limit
-     * - `error`: Negative state — failed, rejected, inactive, requires attention
+     * Semantic color variant. When unset, the badge renders in the default
+     * (neutral) styling.
+     * - `brand`: Brand-colored badge
+     * - `info`: Informational or in-progress
+     * - `success`: Positive — approved, complete, active, working properly
+     * - `warning`: Cautionary — pending, needs review, approaching limit
+     * - `error`: Negative — failed, rejected, inactive, requires attention
+     */
+    variant?: 'brand' | 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Visual appearance — the badge's emphasis/fill, orthogonal to `variant`.
+     * - `subtle` (default): tinted background with a colored border and text
+     * - `solid`: filled knockout background with knockout text and no border
+     */
+    appearance?: 'subtle' | 'solid';
+    /**
+     * Size variant — controls the badge typography and padding.
+     * - `sm` (default): `label-sm` typography
+     * - `md`: `label-default` typography
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Optional leading icon name (from the Eddie icon set). Rendered before the
+     * label and inherits the badge's content color.
      */
-    variant?: 'success' | 'warning' | 'error';
+    iconName?: string;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/components/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/badge/badge.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE1C,MAAM;CASP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/badge/badge.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,2DAA2D,CAAC;AAGnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE7D;;;;OAIG;IAEH,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAEhC;;;;OAIG;IAEH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM;CAoBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/components/badge/badge.js

@@ -1,32 +1,51 @@
-import { unsafeCSS as l, html as c } from "lit";
-import { property as i } from "lit/decorators.js";
+import { unsafeCSS as s, nothing as b, html as l } from "lit";
+import { property as o } from "lit/decorators.js";
 import { EdElement as g } from "../EdElement.js";
-const h = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-badge{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);background:var(--ed-theme-color-background-utility-info);color:var(--ed-theme-color-content-default);display:inline-flex;border-radius:var(--ed-theme-border-radius-md);padding:.5rem}.ed-c-badge--success{background:var(--ed-theme-color-background-utility-success)}.ed-c-badge--warning{background:var(--ed-theme-color-background-utility-warning)}.ed-c-badge--error{background:var(--ed-theme-color-background-utility-error)}";
-var m = Object.defineProperty, s = (r, t, d, u) => {
-  for (var e = void 0, a = r.length - 1, n; a >= 0; a--)
-    (n = r[a]) && (e = n(t, d, e) || e);
-  return e && m(t, d, e), e;
+import "../icon/icon.js";
+const h = '@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-badge{font-family:var(--ed-theme-typography-label-sm-font-family);font-weight:var(--ed-theme-typography-label-sm-font-weight);font-size:var(--ed-theme-typography-label-sm-font-size);line-height:var(--ed-theme-typography-label-sm-line-height);letter-spacing:var(--ed-theme-typography-label-sm-letter-spacing);text-transform:var(--ed-theme-typography-label-sm-text-transform);display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-default);border-radius:var(--ed-theme-border-radius-md);background:var(--ed-theme-color-background-subtle);color:var(--ed-theme-color-content-default)}.ed-c-badge__label{white-space:nowrap}ed-icon{--ed-icon-height: .875rem ;--ed-icon-width: .875rem }.ed-c-badge--brand{background:var(--ed-theme-color-background-subtle);border-color:var(--ed-theme-color-border-brand);color:var(--ed-theme-color-content-brand)}.ed-c-badge--info{background:var(--ed-theme-color-background-utility-info);border-color:var(--ed-theme-color-border-utility-info);color:var(--ed-theme-color-content-utility-info)}.ed-c-badge--success{background:var(--ed-theme-color-background-utility-success);border-color:var(--ed-theme-color-border-utility-success);color:var(--ed-theme-color-content-utility-success)}.ed-c-badge--warning{background:var(--ed-theme-color-background-utility-warning);border-color:var(--ed-theme-color-border-utility-warning);color:var(--ed-theme-color-content-utility-warning)}.ed-c-badge--error{background:var(--ed-theme-color-background-utility-error);border-color:var(--ed-theme-color-border-utility-error);color:var(--ed-theme-color-content-utility-error)}.ed-c-badge--solid{border-color:transparent;background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout)}.ed-c-badge--solid.ed-c-badge--brand{background:var(--ed-theme-color-background-brand-knockout)}.ed-c-badge--solid.ed-c-badge--info{background:var(--ed-theme-color-background-utility-info-knockout)}.ed-c-badge--solid.ed-c-badge--success{background:var(--ed-theme-color-background-utility-success-knockout)}.ed-c-badge--solid.ed-c-badge--warning{background:var(--ed-theme-color-background-utility-warning-knockout)}.ed-c-badge--solid.ed-c-badge--error{background:var(--ed-theme-color-background-utility-error-knockout)}.ed-c-badge--md{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);padding:.25rem .75rem}.ed-c-badge--md ed-icon{--ed-icon-height: 1rem ;--ed-icon-width: 1rem }';
+var m = Object.defineProperty, t = (d, a, c, u) => {
+  for (var e = void 0, n = d.length - 1, i; n >= 0; n--)
+    (i = d[n]) && (e = i(a, c, e) || e);
+  return e && m(a, c, e), e;
 };
-class o extends g {
+class r extends g {
   static get styles() {
-    return l(h.toString());
+    return s(h.toString());
   }
   render() {
-    const t = this.componentClassNames("ed-c-badge", {
+    const a = this.componentClassNames("ed-c-badge", {
+      "ed-c-badge--brand": this.variant === "brand",
+      "ed-c-badge--info": this.variant === "info",
       "ed-c-badge--success": this.variant === "success",
       "ed-c-badge--warning": this.variant === "warning",
-      "ed-c-badge--error": this.variant === "error"
+      "ed-c-badge--error": this.variant === "error",
+      "ed-c-badge--solid": this.appearance === "solid",
+      "ed-c-badge--md": this.size === "md"
     });
-    return c` <div class="${t}">${this.text}</div> `;
+    return l`
+      <div class="${a}">
+        ${this.iconName ? l`<ed-icon styleModifier="ed-c-badge__icon" aria-hidden="true" name="${this.iconName}"></ed-icon>` : b}
+        <span class="ed-c-badge__label"><slot>${this.text}</slot></span>
+      </div>
+    `;
   }
 }
-s([
-  i()
-], o.prototype, "text");
-s([
-  i()
-], o.prototype, "variant");
-customElements.get("ed-badge") === void 0 && customElements.define("ed-badge", o);
+t([
+  o()
+], r.prototype, "text");
+t([
+  o()
+], r.prototype, "variant");
+t([
+  o()
+], r.prototype, "appearance");
+t([
+  o()
+], r.prototype, "size");
+t([
+  o()
+], r.prototype, "iconName");
+customElements.get("ed-badge") === void 0 && customElements.define("ed-badge", r);
 export {
-  o as EdBadge
+  r as EdBadge
 };

package/components/dot/dot.js

@@ -2,7 +2,7 @@ import g from "classnames";
 import { unsafeCSS as m, html as d, nothing as s } from "lit";
 import { property as o } from "lit/decorators.js";
 import { EdElement as v } 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-dot{container-type:inline-size;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:6rem;height:6rem;aspect-ratio:1/1;background:var(--ed-theme-color-background-brand);color:var(--ed-theme-color-content-brand-knockout);border-radius:var(--ed-border-radius-round);text-align:center}.ed-c-dot--xs{width:4rem;height:4rem}.ed-c-dot--sm{width:6rem;height:6rem}.ed-c-dot--md{width:8rem;height:8rem}.ed-c-dot--lg{width:10rem;height:10rem}.ed-c-dot--xl{width:12rem;height:12rem}.ed-c-dot--accent-1{background:var(--ed-theme-color-background-accent-1);color:var(--ed-theme-color-content-on-accent-1)}.ed-c-dot--accent-2{background:var(--ed-theme-color-background-accent-2);color:var(--ed-theme-color-content-on-accent-2)}.ed-c-dot--accent-3{background:var(--ed-theme-color-background-accent-3);color:var(--ed-theme-color-content-on-accent-3)}.ed-c-dot--accent-4{background:var(--ed-theme-color-background-accent-4);color:var(--ed-theme-color-content-on-accent-4)}.ed-c-dot--accent-5{background:var(--ed-theme-color-background-accent-5);color:var(--ed-theme-color-content-on-accent-5)}.ed-c-dot--accent-6{background:var(--ed-theme-color-background-accent-6);color:var(--ed-theme-color-content-on-accent-6)}.ed-c-dot--accent-7{background:var(--ed-theme-color-background-accent-7);color:var(--ed-theme-color-content-on-accent-7)}.ed-c-dot--accent-8{background:var(--ed-theme-color-background-accent-8);color:var(--ed-theme-color-content-on-accent-8)}.ed-c-dot--viz-design{background:var(--ed-theme-color-background-viz-design);color:var(--ed-theme-color-content-on-viz-design)}.ed-c-dot--viz-repo{background:var(--ed-theme-color-background-viz-repo);color:var(--ed-theme-color-content-on-viz-repo)}.ed-c-dot--viz-package{background:var(--ed-theme-color-background-viz-package);color:var(--ed-theme-color-content-on-viz-package)}.ed-c-dot--viz-product{background:var(--ed-theme-color-background-viz-product);color:var(--ed-theme-color-content-on-viz-product)}::slotted(ed-icon){--ed-icon-height: 35cqi;--ed-icon-width: 35cqi}.ed-c-dot--stacked ::slotted(ed-icon){--ed-icon-height: 25cqi;--ed-icon-width: 25cqi}::slotted(svg){width:35cqi;height:35cqi}.ed-c-dot--stacked ::slotted(svg){width:25cqi;height:25cqi}.ed-c-dot__image{display:block;width:40cqi;height:40cqi;object-fit:contain}.ed-c-dot--stacked .ed-c-dot__image{width:30cqi;height:30cqi}.ed-c-dot__full-bleed-image{display:block;width:100%;height:100%;object-fit:cover}.ed-c-dot--full-bleed{padding:0;overflow:hidden}.ed-c-dot__label{font-family:var(--ed-theme-typography-viz-label-font-family);font-weight:var(--ed-theme-typography-viz-label-font-weight);font-size:var(--ed-theme-typography-viz-label-font-size);line-height:var(--ed-theme-typography-viz-label-line-height);letter-spacing:var(--ed-theme-typography-viz-label-letter-spacing);text-transform:var(--ed-theme-typography-viz-label-text-transform);text-align:center;text-wrap:balance;text-overflow:ellipsis;padding:0 .5rem;overflow:hidden}";
+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-dot{container-type:inline-size;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:6rem;height:6rem;aspect-ratio:1/1;background:var(--ed-theme-color-background-brand);color:var(--ed-theme-color-content-brand-knockout);border-radius:var(--ed-theme-border-radius-round);text-align:center}.ed-c-dot--xs{width:4rem;height:4rem}.ed-c-dot--sm{width:6rem;height:6rem}.ed-c-dot--md{width:8rem;height:8rem}.ed-c-dot--lg{width:10rem;height:10rem}.ed-c-dot--xl{width:12rem;height:12rem}.ed-c-dot--accent-1{background:var(--ed-theme-color-background-accent-1);color:var(--ed-theme-color-content-on-accent-1)}.ed-c-dot--accent-2{background:var(--ed-theme-color-background-accent-2);color:var(--ed-theme-color-content-on-accent-2)}.ed-c-dot--accent-3{background:var(--ed-theme-color-background-accent-3);color:var(--ed-theme-color-content-on-accent-3)}.ed-c-dot--accent-4{background:var(--ed-theme-color-background-accent-4);color:var(--ed-theme-color-content-on-accent-4)}.ed-c-dot--accent-5{background:var(--ed-theme-color-background-accent-5);color:var(--ed-theme-color-content-on-accent-5)}.ed-c-dot--accent-6{background:var(--ed-theme-color-background-accent-6);color:var(--ed-theme-color-content-on-accent-6)}.ed-c-dot--accent-7{background:var(--ed-theme-color-background-accent-7);color:var(--ed-theme-color-content-on-accent-7)}.ed-c-dot--accent-8{background:var(--ed-theme-color-background-accent-8);color:var(--ed-theme-color-content-on-accent-8)}.ed-c-dot--viz-design{background:var(--ed-theme-color-background-viz-design);color:var(--ed-theme-color-content-on-viz-design)}.ed-c-dot--viz-repo{background:var(--ed-theme-color-background-viz-repo);color:var(--ed-theme-color-content-on-viz-repo)}.ed-c-dot--viz-package{background:var(--ed-theme-color-background-viz-package);color:var(--ed-theme-color-content-on-viz-package)}.ed-c-dot--viz-product{background:var(--ed-theme-color-background-viz-product);color:var(--ed-theme-color-content-on-viz-product)}::slotted(ed-icon){--ed-icon-height: 35cqi;--ed-icon-width: 35cqi}.ed-c-dot--stacked ::slotted(ed-icon){--ed-icon-height: 25cqi;--ed-icon-width: 25cqi}::slotted(svg){width:35cqi;height:35cqi}.ed-c-dot--stacked ::slotted(svg){width:25cqi;height:25cqi}.ed-c-dot__image{display:block;width:40cqi;height:40cqi;object-fit:contain}.ed-c-dot--stacked .ed-c-dot__image{width:30cqi;height:30cqi}.ed-c-dot__full-bleed-image{display:block;width:100%;height:100%;object-fit:cover}.ed-c-dot--full-bleed{padding:0;overflow:hidden}.ed-c-dot__label{font-family:var(--ed-theme-typography-viz-label-font-family);font-weight:var(--ed-theme-typography-viz-label-font-weight);font-size:var(--ed-theme-typography-viz-label-font-size);line-height:var(--ed-theme-typography-viz-label-line-height);letter-spacing:var(--ed-theme-typography-viz-label-letter-spacing);text-transform:var(--ed-theme-typography-viz-label-text-transform);text-align:center;text-wrap:balance;text-overflow:ellipsis;padding:0 .5rem;overflow:hidden}";
 var b = Object.defineProperty, c = (i, r, a, l) => {
   for (var e = void 0, n = i.length - 1, h; n >= 0; n--)
     (h = i[n]) && (e = h(r, a, e) || e);

package/components/header/header.d.ts

@@ -18,6 +18,7 @@ import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdEle
  *
  * @a11y The component renders a `<header>` element with `role="banner"` — there should be only one `banner` landmark per page, so use this once at the top level
  * @a11y When using colored `variant` backgrounds, verify all child text and interactive elements meet WCAG contrast ratios against the chosen background
+ * @a11y With `variant="bare"` the header has no background fill, so child text and interactive elements must meet WCAG contrast against the page background instead of a header fill
  * @a11y The three slot regions (top, default, bottom) are visual layout divisions — they do not create separate landmarks, so screen readers traverse the header as one continuous region
  * @a11y Set `fullWidth` only when the header design intentionally spans edge-to-edge — the default `ed-layout-container` wrapper ensures content stays within readable line lengths
  *
@@ -33,16 +34,25 @@ export declare class EdHeader extends EdElement {
      */
     isActive?: boolean;
     /**
-     * Background color variant   * - **brand** Brand background with knockout content color
+     * Background color variant
+     * - **bare** No background fill — the header sits transparently over the page background
+     * - **brand** Brand background with knockout content color
      * - **brand-knockout** Inverted brand background with knockout content
      * - **accent-1** through **accent-8** Accent background with corresponding on-accent content color
      * */
-    variant?: 'brand' | 'brand-knockout' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'accent-7' | 'accent-8';
+    variant?: 'bare' | 'brand' | 'brand-knockout' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'accent-7' | 'accent-8';
     /**
      * When true, removes the inner `ed-layout-container` so header
      * content spans the full width of the viewport.
      */
     fullWidth?: boolean;
+    /**
+     * Orientation of the header's main content row.
+     * - **vertical** Stacks the header content (logo, nav, actions) into a
+     *   left-aligned column instead of the default horizontal row — for
+     *   sidebar-style or stacked header layouts.
+     */
+    orientation?: 'vertical';
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/header/header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,mFAAmF,CAAC;AAG3F;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;SAIK;IAEL,OAAO,CAAC,EAAE,OAAO,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAE7I;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,MAAM;CA+BP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/header/header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,mFAAmF,CAAC;AAG3F;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;SAMK;IAEL,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAEtJ;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IAEH,WAAW,CAAC,EAAE,UAAU,CAAC;IAEzB,MAAM;CAgCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/components/header/header.js

@@ -1,21 +1,22 @@
-import { unsafeCSS as i, html as o } from "lit";
-import { state as v, property as s } from "lit/decorators.js";
-import { EdElement as m } from "../EdElement.js";
+import { unsafeCSS as s, html as o } from "lit";
+import { state as m, property as h } from "lit/decorators.js";
+import { EdElement as v } from "../EdElement.js";
 import "../layout-container/layout-container.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-header{--ed-header-color-content: var(--ed-theme-color-content-knockout);--ed-header-focus-ring-color: var(--ed-theme-focus-ring-color-border-knockout);background:var(--ed-theme-color-background-knockout);color:var(--ed-header-color-content);position:relative;z-index:3}.ed-c-header__top{position:relative;inset-block-start:0;width:100%;z-index:3}.ed-c-header__top-inner{width:100%}.ed-c-header__middle{width:100%;display:flex;align-items:center;padding-block:.5rem}.ed-c-header--brand{--ed-header-color-content: var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand);color:var(--ed-header-color-content)}.ed-c-header--brand-knockout{--ed-header-color-content: var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-header-color-content)}.ed-c-header--accent-1{--ed-header-color-content: var(--ed-theme-color-content-on-accent-1);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-1);background:var(--ed-theme-color-background-accent-1);color:var(--ed-header-color-content)}.ed-c-header--accent-2{--ed-header-color-content: var(--ed-theme-color-content-on-accent-2);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-2);background:var(--ed-theme-color-background-accent-2);color:var(--ed-header-color-content)}.ed-c-header--accent-3{--ed-header-color-content: var(--ed-theme-color-content-on-accent-3);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-3);background:var(--ed-theme-color-background-accent-3);color:var(--ed-header-color-content)}.ed-c-header--accent-4{--ed-header-color-content: var(--ed-theme-color-content-on-accent-4);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-4);background:var(--ed-theme-color-background-accent-4);color:var(--ed-header-color-content)}.ed-c-header--accent-5{--ed-header-color-content: var(--ed-theme-color-content-on-accent-5);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-5);background:var(--ed-theme-color-background-accent-5);color:var(--ed-header-color-content)}.ed-c-header--accent-6{--ed-header-color-content: var(--ed-theme-color-content-on-accent-6);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-6);background:var(--ed-theme-color-background-accent-6);color:var(--ed-header-color-content)}.ed-c-header--accent-7{--ed-header-color-content: var(--ed-theme-color-content-on-accent-7);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-7);background:var(--ed-theme-color-background-accent-7);color:var(--ed-header-color-content)}.ed-c-header--accent-8{--ed-header-color-content: var(--ed-theme-color-content-on-accent-8);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-8);background:var(--ed-theme-color-background-accent-8);color:var(--ed-header-color-content)}";
-var b = Object.defineProperty, l = (d, r, c, n) => {
-  for (var e = void 0, a = d.length - 1, h; a >= 0; a--)
-    (h = d[a]) && (e = h(r, c, e) || e);
-  return e && b(r, c, e), e;
+const u = '@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-header{--ed-header-color-content: var(--ed-theme-color-content-knockout);--ed-header-focus-ring-color: var(--ed-theme-focus-ring-color-border-knockout);background:var(--ed-theme-color-background-knockout);color:var(--ed-header-color-content);position:relative;z-index:3}@media all and (min-width:60rem){.ed-c-header--vertical{inline-size:var(--ed-sidebar-width, 18rem);min-block-size:100vh}}.ed-c-header__top{position:relative;inset-block-start:0;width:100%;z-index:3}.ed-c-header__top-inner{width:100%}.ed-c-header__middle{width:100%;display:flex;align-items:center;padding-block:.5rem}@media all and (min-width:60rem){.ed-c-header--vertical .ed-c-header__middle{flex-direction:column;align-items:flex-start;gap:1rem}}.ed-c-header--bare{--ed-header-color-content: var(--ed-theme-color-content-default);--ed-header-focus-ring-color: var(--ed-theme-focus-ring-color-border-default);background:transparent;color:var(--ed-header-color-content)}.ed-c-header--brand{--ed-header-color-content: var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand);color:var(--ed-header-color-content)}.ed-c-header--brand-knockout{--ed-header-color-content: var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-header-color-content)}.ed-c-header--accent-1{--ed-header-color-content: var(--ed-theme-color-content-on-accent-1);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-1);background:var(--ed-theme-color-background-accent-1);color:var(--ed-header-color-content)}.ed-c-header--accent-2{--ed-header-color-content: var(--ed-theme-color-content-on-accent-2);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-2);background:var(--ed-theme-color-background-accent-2);color:var(--ed-header-color-content)}.ed-c-header--accent-3{--ed-header-color-content: var(--ed-theme-color-content-on-accent-3);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-3);background:var(--ed-theme-color-background-accent-3);color:var(--ed-header-color-content)}.ed-c-header--accent-4{--ed-header-color-content: var(--ed-theme-color-content-on-accent-4);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-4);background:var(--ed-theme-color-background-accent-4);color:var(--ed-header-color-content)}.ed-c-header--accent-5{--ed-header-color-content: var(--ed-theme-color-content-on-accent-5);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-5);background:var(--ed-theme-color-background-accent-5);color:var(--ed-header-color-content)}.ed-c-header--accent-6{--ed-header-color-content: var(--ed-theme-color-content-on-accent-6);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-6);background:var(--ed-theme-color-background-accent-6);color:var(--ed-header-color-content)}.ed-c-header--accent-7{--ed-header-color-content: var(--ed-theme-color-content-on-accent-7);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-7);background:var(--ed-theme-color-background-accent-7);color:var(--ed-header-color-content)}.ed-c-header--accent-8{--ed-header-color-content: var(--ed-theme-color-content-on-accent-8);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-8);background:var(--ed-theme-color-background-accent-8);color:var(--ed-header-color-content)}';
+var b = Object.defineProperty, d = (a, c, t, n) => {
+  for (var e = void 0, l = a.length - 1, i; l >= 0; l--)
+    (i = a[l]) && (e = i(c, t, e) || e);
+  return e && b(c, t, e), e;
 };
-class t extends m {
+class r extends v {
   static get styles() {
-    return i(u);
+    return s(u);
   }
   render() {
-    const r = this.variant ? `ed-c-header--${this.variant}` : "", c = this.componentClassNames("ed-c-header", {
+    const c = this.variant ? `ed-c-header--${this.variant}` : "", t = this.componentClassNames("ed-c-header", {
       "ed-is-active": this.isActive === !0,
-      [r]: !!this.variant
+      "ed-c-header--vertical": this.orientation === "vertical",
+      [c]: !!this.variant
     }), n = o`
       ${this.slotNotEmpty("top") && o`<div class="ed-c-header__top">
         <slot name="top"></slot>
@@ -28,7 +29,7 @@ class t extends m {
       </div>`}
     `;
     return o`
-      <header role="banner" class="${c}">
+      <header role="banner" class="${t}">
         ${this.fullWidth ? n : o`<ed-layout-container class="ed-c-header__layout-container">
               ${n}
             </ed-layout-container>`}
@@ -36,16 +37,19 @@ class t extends m {
     `;
   }
 }
-l([
-  v()
-], t.prototype, "isActive");
-l([
-  s()
-], t.prototype, "variant");
-l([
-  s({ type: Boolean })
-], t.prototype, "fullWidth");
-customElements.get("ed-header") === void 0 && customElements.define("ed-header", t);
+d([
+  m()
+], r.prototype, "isActive");
+d([
+  h()
+], r.prototype, "variant");
+d([
+  h({ type: Boolean })
+], r.prototype, "fullWidth");
+d([
+  h()
+], r.prototype, "orientation");
+customElements.get("ed-header") === void 0 && customElements.define("ed-header", r);
 export {
-  t as EdHeader
+  r as EdHeader
 };