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

package/components/timeline/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/timeline/timeline.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AAGtF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAEpD;;;;OAIG;IAEH,QAAQ,EAAE,SAAS,GAAG,aAAa,CAAa;IAEhD,iBAAiB;IAOjB,MAAM;CAaP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/components/timeline/timeline.js

@@ -0,0 +1,42 @@
+import { unsafeCSS as m, html as c } from "lit";
+import { property as o } from "lit/decorators.js";
+import { EdElement as s } from "../EdElement.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/components/timeline-node/timeline-node.d.ts

@@ -0,0 +1,129 @@
+import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
+/**
+ * A single entry on a timeline. Displays a marker on the connecting line plus
+ * an optional eyebrow tag, date, heading, and slotted body content.
+ *
+ * The component is content-agnostic: visual treatment per content type
+ * (article, talk, release, blog post, etc.) is driven by the generic
+ * `category` prop, which adds a `.ed-c-timeline-node--{category}` modifier
+ * class to the host element. Consumers wire their own per-category styling
+ * via attribute selectors and CSS custom properties — see the **Per-category
+ * styling** section below.
+ *
+ * **Per-category styling**
+ *
+ * The component exposes its internal elements via CSS `::part()` and reflects
+ * the `category` attribute on the host. Consumers can reach into the shadow
+ * DOM to apply per-category color (or any other treatment) like this:
+ *
+ * ```css
+ * ed-timeline-node[category="blog"] {
+ *   --ed-c-timeline-node-marker-color: var(--my-blog-color);
+ *   --ed-c-timeline-node-heading-color: var(--my-blog-color);
+ * }
+ *
+ * ed-timeline-node[category="release"]::part(marker) {
+ *   border-radius: 2px;
+ * }
+ * ```
+ *
+ * Custom-property hooks (with their fallback tokens):
+ *
+ * - `--ed-c-timeline-node-marker-color` (fallback: `--ed-theme-color-background-brand`)
+ * - `--ed-c-timeline-node-heading-color` (fallback: `inherit`)
+ *
+ * Exposed parts: `marker`, `body`, `eyebrow`, `date`, `heading`, `content`.
+ *
+ * **Scroll-in animations**
+ *
+ * The component does not ship animation logic. Consumers wire their own
+ * IntersectionObserver and toggle the `ed-is-visible` class on the host
+ * element, then write the animation CSS via the exposed parts:
+ *
+ * ```js
+ * const observer = new IntersectionObserver(entries => {
+ *   for (const entry of entries) {
+ *     entry.target.classList.toggle('ed-is-visible', entry.isIntersecting);
+ *   }
+ * }, { threshold: 0.05 });
+ * for (const node of document.querySelectorAll('ed-timeline-node')) observer.observe(node);
+ * ```
+ *
+ * ```css
+ * ed-timeline-node::part(marker) { opacity: 0; transform: scale(0); transition: opacity .5s, transform .5s; }
+ * ed-timeline-node.ed-is-visible::part(marker) { opacity: 1; transform: scale(1); }
+ * ```
+ *
+ * @use Representing a single event, milestone, or entry within an `ed-timeline` wrapper
+ * @use Displaying a dated entry with a heading that optionally links to a detail page
+ * @use Using `variant="highlight"` to visually emphasize key milestones (current role, major release)
+ * @use Setting `datetime` to a machine-readable ISO 8601 value — the `date` label then renders inside a `<time datetime="…">` element
+ * @use Setting `category` to a project-defined slug (e.g. `"talk"`, `"release"`, `"blog"`) so consumer CSS can apply per-category visual treatment via `[category="…"]` host selectors and the documented custom-property hooks
+ * @use Projecting a custom marker (icon, avatar, accent dot) via the `marker` slot for richer per-node visual treatment that doesn't fit the category-color pattern
+ * @use Adding a category or type label above the date via the `eyebrow` slot (e.g. "Talk", "Article", "Project")
+ *
+ * @dontuse Outside of an `ed-timeline` — the node relies on the parent timeline for its connecting line and spacing context
+ * @dontuse Without setting `text` (or projecting heading content) — a node with no heading is visually empty and semantically meaningless
+ * @dontuse As a standalone card or list item — use `ed-card` or `ed-r-project-card` for non-timeline contexts
+ *
+ * @a11y Set `headingTagName` to match the surrounding document outline — do not leave the default `h3` if the timeline appears at a different heading depth
+ * @a11y When `href` is provided the heading becomes a link — ensure `text` clearly describes the destination without relying on surrounding visual context
+ * @a11y Set `datetime` to a machine-readable ISO 8601 value (e.g. `2026-05`, `2026-05-14`, `2026-05-14T15:30`) so assistive tech and search engines can parse the date
+ * @a11y The component sets `role="listitem"` to pair with the parent `ed-timeline`'s `role="list"` — do not override unless the surrounding context requires it
+ * @a11y When using consumer-driven scroll animations via `ed-is-visible`, respect `prefers-reduced-motion` in the consumer CSS
+ *
+ * @slot - Body content for this timeline entry (text passages, images, tags)
+ * @slot marker - Custom marker projected over the timeline line in place of the default dot
+ * @slot eyebrow - Small category or type label rendered above the date and heading
+ *
+ * @csspart marker - The marker dot (or wrapper around the slotted custom marker)
+ * @csspart body - The wrapper holding eyebrow, date, heading, and content
+ * @csspart eyebrow - The eyebrow wrapper (only present when the eyebrow slot is filled)
+ * @csspart date - The date label (`<time>` when `datetime` is set, otherwise `<span>`)
+ * @csspart heading - The heading element (`ed-heading`)
+ * @csspart content - The default-slot wrapper holding body content
+ */
+export declare class EdTimelineNode extends EdElement {
+    static get styles(): import('lit').CSSResult;
+    /**
+     * The heading text for this timeline node
+     */
+    text: string;
+    /**
+     * Display label for the entry date (e.g. "May 2026", "Q2 2026")
+     */
+    date?: string;
+    /**
+     * Machine-readable ISO 8601 datetime for the entry. When set, the `date`
+     * label renders inside a `<time datetime="…">` element.
+     */
+    datetime?: string;
+    /**
+     * URL the heading links to. When provided, the heading text becomes a link.
+     */
+    href?: string;
+    /**
+     * Semantic heading tag for the entry heading (h2–h6). Defaults to h3.
+     */
+    headingTagName: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Visual variant of the node marker
+     */
+    variant?: 'default' | 'highlight';
+    /**
+     * Free-form category slug. Reflected as an attribute on the host and added
+     * as a `.ed-c-timeline-node--{category}` modifier class on the wrapper.
+     * Consumers wire per-category styling via `ed-timeline-node[category="…"]`
+     * selectors that set the documented `--ed-c-timeline-node-*` custom
+     * properties — see the component-level docs for the pattern.
+     */
+    category?: string;
+    connectedCallback(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ed-timeline-node': EdTimelineNode;
+    }
+}
+//# sourceMappingURL=timeline-node.d.ts.map

package/components/timeline-node/timeline-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-node.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/timeline-node/timeline-node.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,oBAAoB,CAAC;AAK5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,cAAc,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAExD;;OAEG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAElC;;;;;;OAMG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,iBAAiB;IAOjB,MAAM;CAiDP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,77 @@
+import { EdElement as c } from "../EdElement.js";
+import "../heading/heading.js";
+import { unsafeCSS as p, html as i, nothing as l } from "lit";
+import { property as n } from "lit/decorators.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, d, a, s) => {
+  for (var e = void 0, o = m.length - 1, h; o >= 0; o--)
+    (h = m[o]) && (e = h(d, a, e) || e);
+  return e && v(d, a, e), e;
+};
+class t extends c {
+  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 d = 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, o = 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="${d}">
+        <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}
+          ${o}
+          <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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brad-frost-web/eddie-web-components",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "private": false,
   "publishConfig": {
     "access": "public"