@tmorrow/cre8-wc 2.0.7 → 2.0.8

package/lib/a2ui/stream/types.d.ts

@@ -0,0 +1,174 @@
+/**
+ * A2UI streaming surface protocol — types.
+ *
+ * A "surface" is a live region of UI that an agent builds up over time. The
+ * document model is the same nested `ComponentSpec` tree the one-shot renderer
+ * uses; what streaming adds is (1) addressing individual nodes by the path
+ * grammar the renderer already emits on events, (2) a data model that props can
+ * bind into, and (3) an ordered message envelope so a client can tell a dropped
+ * message from an out-of-order one.
+ */
+import type { ComponentSpec, SpecChild } from '../types.js';
+export declare const A2UI_STREAM_VERSION = 1;
+/** RFC 6901 JSON Pointer into the surface data model, e.g. `/user/name`. */
+export type JsonPointer = string;
+/**
+ * A prop value of this shape resolves against the surface data model instead of
+ * being taken literally. `default` is used when the pointer resolves to
+ * `undefined`.
+ */
+export interface BindingRef {
+    $bind: JsonPointer;
+    default?: unknown;
+}
+export declare function isBindingRef(value: unknown): value is BindingRef;
+/**
+ * Where content goes inside a container node. `null` means the component's
+ * `children` array; a string names a slot. `"default"` is a slot name, and is
+ * NOT the same thing as `children` — see the children-vs-slots rule in the KB.
+ */
+export type ContentTarget = string | null;
+export type PatchOp = 
+/** Append nodes to a container's `children` (slot omitted) or a named slot. */
+{
+    op: 'append';
+    path: string;
+    slot?: ContentTarget;
+    nodes: SpecChild[];
+}
+/** Insert nodes at `index` in a container's content list. */
+ | {
+    op: 'insert';
+    path: string;
+    slot?: ContentTarget;
+    index: number;
+    nodes: SpecChild[];
+}
+/** Replace the node at `path` wholesale. `$` replaces the surface root. */
+ | {
+    op: 'replace';
+    path: string;
+    node: SpecChild;
+}
+/** Remove the node at `path`. `$` clears the surface. */
+ | {
+    op: 'remove';
+    path: string;
+}
+/** Merge props into the node at `path`. A `null` value deletes the prop. */
+ | {
+    op: 'setProps';
+    path: string;
+    props: Record<string, unknown>;
+}
+/** Set event bindings on the node at `path`. A `null` value removes one. */
+ | {
+    op: 'setEvents';
+    path: string;
+    events: Record<string, unknown>;
+}
+/** Replace a container's whole content list with a single text node. */
+ | {
+    op: 'setText';
+    path: string;
+    slot?: ContentTarget;
+    text: string;
+}
+/** Append text to a container's trailing text node — the token-stream op. */
+ | {
+    op: 'appendText';
+    path: string;
+    slot?: ContentTarget;
+    text: string;
+}
+/** Empty a container's content list. */
+ | {
+    op: 'clear';
+    path: string;
+    slot?: ContentTarget;
+};
+export interface DataPatch {
+    pointer: JsonPointer;
+    /** `set` (default) writes `value`; `remove` deletes the pointed-at member. */
+    op?: 'set' | 'remove';
+    value?: unknown;
+}
+export type SurfaceState = 'streaming' | 'idle' | 'done' | 'error';
+interface Envelope {
+    v: typeof A2UI_STREAM_VERSION;
+    surfaceId: string;
+    /** Monotonic per surface, starting at 1. `surface.create` is seq 0. */
+    seq: number;
+}
+export type SurfaceMessage = (Envelope & {
+    type: 'surface.create';
+    catalogId: string;
+    libraryVersion?: string;
+    title?: string;
+    root?: ComponentSpec;
+    data?: Record<string, unknown>;
+}) | (Envelope & {
+    type: 'surface.patch';
+    ops: PatchOp[];
+}) | (Envelope & {
+    type: 'surface.data';
+    patches: DataPatch[];
+}) | (Envelope & {
+    type: 'surface.status';
+    state: SurfaceState;
+    message?: string;
+}) | (Envelope & {
+    type: 'surface.delete';
+});
+/** Client → server. The return path for a named handler firing in the browser. */
+export interface SurfaceEventMessage {
+    v: typeof A2UI_STREAM_VERSION;
+    type: 'surface.event';
+    surfaceId: string;
+    /** Server-assigned on receipt; clients may omit. */
+    seq?: number;
+    component: string;
+    path: string;
+    event: string;
+    handler: string;
+    detail?: unknown;
+    /** ISO 8601. Set by whichever side has a trustworthy clock. */
+    at?: string;
+}
+/**
+ * What changed, as an invalidation hint. The model is the source of truth — a
+ * renderer reads the current state at these paths rather than trusting a diff.
+ */
+export type SurfaceChange = 
+/** The whole tree was replaced (create, root replace, root remove). */
+{
+    kind: 'root';
+}
+/** A container's content list changed; re-reconcile its children. */
+ | {
+    kind: 'content';
+    path: string;
+    slot: ContentTarget;
+}
+/** Only the trailing text of a container changed — the cheap streaming path. */
+ | {
+    kind: 'text';
+    path: string;
+    slot: ContentTarget;
+}
+/** Props on one node changed; re-apply them. */
+ | {
+    kind: 'props';
+    path: string;
+}
+/** Event bindings on one node changed; re-attach. */
+ | {
+    kind: 'events';
+    path: string;
+}
+/** The data model changed; re-resolve every bound prop in the tree. */
+ | {
+    kind: 'data';
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/a2ui/stream/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../a2ui/stream/types.ts"],"names":[],"mappings":"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"}

package/lib/a2ui/stream/types.js

@@ -0,0 +1,18 @@
+/**
+ * A2UI streaming surface protocol — types.
+ *
+ * A "surface" is a live region of UI that an agent builds up over time. The
+ * document model is the same nested `ComponentSpec` tree the one-shot renderer
+ * uses; what streaming adds is (1) addressing individual nodes by the path
+ * grammar the renderer already emits on events, (2) a data model that props can
+ * bind into, and (3) an ordered message envelope so a client can tell a dropped
+ * message from an out-of-order one.
+ */
+export const A2UI_STREAM_VERSION = 1;
+export function isBindingRef(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        typeof value.$bind === 'string');
+}
+//# sourceMappingURL=types.js.map

package/lib/a2ui/stream/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../a2ui/stream/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAerC,MAAM,UAAU,YAAY,CAAC,KAAc;IACzC,OAAO,CACL,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;QACrB,OAAQ,KAA6B,CAAC,KAAK,KAAK,QAAQ,CACzD,CAAC;AACJ,CAAC","sourcesContent":["/**\n * A2UI streaming surface protocol — types.\n *\n * A \"surface\" is a live region of UI that an agent builds up over time. The\n * document model is the same nested `ComponentSpec` tree the one-shot renderer\n * uses; what streaming adds is (1) addressing individual nodes by the path\n * grammar the renderer already emits on events, (2) a data model that props can\n * bind into, and (3) an ordered message envelope so a client can tell a dropped\n * message from an out-of-order one.\n */\n\nimport type { ComponentSpec, SpecChild } from '../types.js';\n\nexport const A2UI_STREAM_VERSION = 1;\n\n/** RFC 6901 JSON Pointer into the surface data model, e.g. `/user/name`. */\nexport type JsonPointer = string;\n\n/**\n * A prop value of this shape resolves against the surface data model instead of\n * being taken literally. `default` is used when the pointer resolves to\n * `undefined`.\n */\nexport interface BindingRef {\n  $bind: JsonPointer;\n  default?: unknown;\n}\n\nexport function isBindingRef(value: unknown): value is BindingRef {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    !Array.isArray(value) &&\n    typeof (value as { $bind?: unknown }).$bind === 'string'\n  );\n}\n\n/**\n * Where content goes inside a container node. `null` means the component's\n * `children` array; a string names a slot. `\"default\"` is a slot name, and is\n * NOT the same thing as `children` — see the children-vs-slots rule in the KB.\n */\nexport type ContentTarget = string | null;\n\nexport type PatchOp =\n  /** Append nodes to a container's `children` (slot omitted) or a named slot. */\n  | { op: 'append'; path: string; slot?: ContentTarget; nodes: SpecChild[] }\n  /** Insert nodes at `index` in a container's content list. */\n  | { op: 'insert'; path: string; slot?: ContentTarget; index: number; nodes: SpecChild[] }\n  /** Replace the node at `path` wholesale. `$` replaces the surface root. */\n  | { op: 'replace'; path: string; node: SpecChild }\n  /** Remove the node at `path`. `$` clears the surface. */\n  | { op: 'remove'; path: string }\n  /** Merge props into the node at `path`. A `null` value deletes the prop. */\n  | { op: 'setProps'; path: string; props: Record<string, unknown> }\n  /** Set event bindings on the node at `path`. A `null` value removes one. */\n  | { op: 'setEvents'; path: string; events: Record<string, unknown> }\n  /** Replace a container's whole content list with a single text node. */\n  | { op: 'setText'; path: string; slot?: ContentTarget; text: string }\n  /** Append text to a container's trailing text node — the token-stream op. */\n  | { op: 'appendText'; path: string; slot?: ContentTarget; text: string }\n  /** Empty a container's content list. */\n  | { op: 'clear'; path: string; slot?: ContentTarget };\n\nexport interface DataPatch {\n  pointer: JsonPointer;\n  /** `set` (default) writes `value`; `remove` deletes the pointed-at member. */\n  op?: 'set' | 'remove';\n  value?: unknown;\n}\n\nexport type SurfaceState = 'streaming' | 'idle' | 'done' | 'error';\n\ninterface Envelope {\n  v: typeof A2UI_STREAM_VERSION;\n  surfaceId: string;\n  /** Monotonic per surface, starting at 1. `surface.create` is seq 0. */\n  seq: number;\n}\n\nexport type SurfaceMessage =\n  | (Envelope & {\n      type: 'surface.create';\n      catalogId: string;\n      libraryVersion?: string;\n      title?: string;\n      root?: ComponentSpec;\n      data?: Record<string, unknown>;\n    })\n  | (Envelope & { type: 'surface.patch'; ops: PatchOp[] })\n  | (Envelope & { type: 'surface.data'; patches: DataPatch[] })\n  | (Envelope & { type: 'surface.status'; state: SurfaceState; message?: string })\n  | (Envelope & { type: 'surface.delete' });\n\n/** Client → server. The return path for a named handler firing in the browser. */\nexport interface SurfaceEventMessage {\n  v: typeof A2UI_STREAM_VERSION;\n  type: 'surface.event';\n  surfaceId: string;\n  /** Server-assigned on receipt; clients may omit. */\n  seq?: number;\n  component: string;\n  path: string;\n  event: string;\n  handler: string;\n  detail?: unknown;\n  /** ISO 8601. Set by whichever side has a trustworthy clock. */\n  at?: string;\n}\n\n/**\n * What changed, as an invalidation hint. The model is the source of truth — a\n * renderer reads the current state at these paths rather than trusting a diff.\n */\nexport type SurfaceChange =\n  /** The whole tree was replaced (create, root replace, root remove). */\n  | { kind: 'root' }\n  /** A container's content list changed; re-reconcile its children. */\n  | { kind: 'content'; path: string; slot: ContentTarget }\n  /** Only the trailing text of a container changed — the cheap streaming path. */\n  | { kind: 'text'; path: string; slot: ContentTarget }\n  /** Props on one node changed; re-apply them. */\n  | { kind: 'props'; path: string }\n  /** Event bindings on one node changed; re-attach. */\n  | { kind: 'events'; path: string }\n  /** The data model changed; re-resolve every bound prop in the tree. */\n  | { kind: 'data' };\n"]}

package/lib/components/accordion/accordion.d.ts

@@ -1,4 +1,11 @@
 import { Cre8Element } from '../cre8-element';
+/** One panel in a data-driven accordion. */
+export interface Cre8AccordionItemData {
+    heading: string;
+    content: string;
+    isActive?: boolean;
+    headingTagVariant?: 'h1' | 'h2' | 'h3' | 'h4';
+}
 /**
  * The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.
  * The header title gives the user a high level overview of the content allowing the user to decide
@@ -29,6 +36,14 @@ export declare class Cre8Accordion extends Cre8Element {
      */
     hasDivider?: boolean;
     connectedCallback(): void;
+    /**
+     * Panels for a data-driven accordion. Each becomes a `cre8-accordion-item`
+     * with its heading as a prop and its content in the default slot.
+     */
+    items?: Cre8AccordionItemData[];
+    /** The composition the data property stands for. */
+    private buildComposition;
+    protected updated(changed: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/lib/components/accordion/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/accordion/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;GAUG;AAEH,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAG3B;;;;;;OAMG;IAEC,UAAU,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;IAErE;;;;;;OAMG;IAEC,UAAU,CAAC,UAAS;IAExB,iBAAiB,IAAI,IAAI;IAIzB,MAAM;CAeP;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../components/accordion/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C,4CAA4C;AAC5C,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC/C;AAED;;;;;;;;;;GAUG;AAGH,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAG3B;;;;;;OAMG;IAEC,UAAU,CAAC,EAAE,WAAW,GAAG,gBAAgB,GAAG,SAAS,GAAG,MAAM,CAAC;IAErE;;;;;;OAMG;IAEC,UAAU,CAAC,UAAS;IAExB,iBAAiB,IAAI,IAAI;IAGzB;;;OAGG;IAEC,KAAK,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAEpC,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IAaxB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,MAAM;CAeP;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF;AAED,eAAe,aAAa,CAAC"}

package/lib/components/accordion/accordion.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
+import { syncLightChildren } from '../utils/light-children';
 import styles from './accordion.styles.js';
 /**
  * The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.
@@ -34,6 +35,25 @@ export class Cre8Accordion extends Cre8Element {
     connectedCallback() {
         super.connectedCallback();
     }
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.items)
+            return null;
+        return this.items.map((item) => ({
+            tag: 'cre8-accordion-item',
+            props: {
+                heading: item.heading,
+                isActive: item.isActive,
+                headingTagVariant: item.headingTagVariant,
+            },
+            text: item.content,
+        }));
+    }
+    updated(changed) {
+        if (['items'].some((key) => changed.has(key))) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-accordion', {
             'cre8-c-inner-divider': this.hasDivider === true,
@@ -56,6 +76,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], Cre8Accordion.prototype, "hasDivider", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8Accordion.prototype, "items", void 0);
 if (customElements.get('cre8-accordion') === undefined) {
     customElements.define('cre8-accordion', Cre8Accordion);
 }

package/lib/components/accordion/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../components/accordion/accordion.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C;;;;;;;;;;GAUG;AAEH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QAcE;;;;;;WAMG;QAEC,eAAU,GAAI,KAAK,CAAC;IAqB1B,CAAC;IAnBC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACrE,sBAAsB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;YAChD,+BAA+B,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM;YAC5F,oCAAoC,EAAE,IAAI,CAAC,UAAU,KAAK,WAAW;YACrE,yCAAyC,EAAE,IAAI,CAAC,UAAU,KAAK,gBAAgB;YAC/E,kCAAkC,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;SACpE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;KAGlC,CAAC;IACJ,CAAC;;AAzCQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAWvB;IADH,QAAQ,EAAE;iDAC0D;AAUjE;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAuB1B,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AAC3D,CAAC;AAOD,eAAe,aAAa,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './accordion.styles.js';\n\n/**\n * The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.\n * The header title gives the user a high level overview of the content allowing the user to decide\n * which sections to expand for the information.\n *\n * Accordion contains Accordion Items as children. This component is the wrapper for grouping related accordion items.\n *\n * Users can select different border types: default (no border), rectangle, rounded bottom, and rounded.\n *\n * @slot - The `cre8-accordion-item` children to group\n */\n\nexport class Cre8Accordion extends Cre8Element {\n    static styles = [styles];\n\n\n  /**\n   * borderType\n   * @prop {'rectangle' | 'rounded-bottom' | 'rounded' | 'none'}\n   *\n   * Controls the border and border-radius of the parent container of the slotted accordions.\n   *\n   */\n  @property()\n      borderType?: 'rectangle' | 'rounded-bottom' | 'rounded' | 'none';\n\n  /**\n   *\n   * When it is true, the inner dividers are displayed;\n   * if it is false, the inner dividers are not displayed\n   * @prop {boolean} hasDivider\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      hasDivider? = false;\n\n  connectedCallback(): void {\n      super.connectedCallback();\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion', {\n          'cre8-c-inner-divider': this.hasDivider === true,\n          'cre8-c-accordion--border-none': this.borderType === undefined || this.borderType === 'none',\n          'cre8-c-accordion--border-rectangle': this.borderType === 'rectangle',\n          'cre8-c-accordion--border-rounded-bottom': this.borderType === 'rounded-bottom',\n          'cre8-c-accordion--border-rounded': this.borderType === 'rounded',\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-accordion') === undefined) {\n    customElements.define('cre8-accordion', Cre8Accordion);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion': Cre8Accordion;\n  }\n}\n\nexport default Cre8Accordion;\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../components/accordion/accordion.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAkB,MAAM,yBAAyB,CAAC;AAC5E,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAU3C;;;;;;;;;;GAUG;AAGH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QAcE;;;;;;WAMG;QAEC,eAAU,GAAI,KAAK,CAAC;IAgD1B,CAAC;IA9CC,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC9B,CAAC;IAQD,oDAAoD;IAC5C,gBAAgB;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC7B,GAAG,EAAE,qBAAqB;YAC1B,KAAK,EAAE;gBACH,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;aAC5C;YACD,IAAI,EAAE,IAAI,CAAC,OAAO;SACrB,CAAC,CAAC,CAAC;IACR,CAAC;IAES,OAAO,CAAC,OAA6B;QAC3C,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YAC5C,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACrD,CAAC;IACL,CAAC;IAGD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE;YACrE,sBAAsB,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;YAChD,+BAA+B,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM;YAC5F,oCAAoC,EAAE,IAAI,CAAC,UAAU,KAAK,WAAW;YACrE,yCAAyC,EAAE,IAAI,CAAC,UAAU,KAAK,gBAAgB;YAC/E,kCAAkC,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;SACpE,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;KAGlC,CAAC;IACJ,CAAC;;AApEQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAWvB;IADH,QAAQ,EAAE;iDAC0D;AAUjE;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AAUpB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;4CACU;AAwCtC,IAAI,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,KAAK,SAAS,EAAE,CAAC;IACrD,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;AAC3D,CAAC;AAOD,eAAe,aAAa,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport styles from './accordion.styles.js';\n\n/** One panel in a data-driven accordion. */\nexport interface Cre8AccordionItemData {\n  heading: string;\n  content: string;\n  isActive?: boolean;\n  headingTagVariant?: 'h1' | 'h2' | 'h3' | 'h4';\n}\n\n/**\n * The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.\n * The header title gives the user a high level overview of the content allowing the user to decide\n * which sections to expand for the information.\n *\n * Accordion contains Accordion Items as children. This component is the wrapper for grouping related accordion items.\n *\n * Users can select different border types: default (no border), rectangle, rounded bottom, and rounded.\n *\n * @slot - The `cre8-accordion-item` children to group\n */\n\n\nexport class Cre8Accordion extends Cre8Element {\n    static styles = [styles];\n\n\n  /**\n   * borderType\n   * @prop {'rectangle' | 'rounded-bottom' | 'rounded' | 'none'}\n   *\n   * Controls the border and border-radius of the parent container of the slotted accordions.\n   *\n   */\n  @property()\n      borderType?: 'rectangle' | 'rounded-bottom' | 'rounded' | 'none';\n\n  /**\n   *\n   * When it is true, the inner dividers are displayed;\n   * if it is false, the inner dividers are not displayed\n   * @prop {boolean} hasDivider\n   *\n   */\n  @property({ type: Boolean, reflect: true })\n      hasDivider? = false;\n\n  connectedCallback(): void {\n      super.connectedCallback();\n  }\n  /**\n   * Panels for a data-driven accordion. Each becomes a `cre8-accordion-item`\n   * with its heading as a prop and its content in the default slot.\n   */\n  @property({ type: Array })\n      items?: Cre8AccordionItemData[];\n\n  /** The composition the data property stands for. */\n  private buildComposition(): ChildSpec[] | null {\n      if (!this.items) return null;\n      return this.items.map((item) => ({\n          tag: 'cre8-accordion-item',\n          props: {\n              heading: item.heading,\n              isActive: item.isActive,\n              headingTagVariant: item.headingTagVariant,\n          },\n          text: item.content,\n      }));\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (['items'].some((key) => changed.has(key))) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-accordion', {\n          'cre8-c-inner-divider': this.hasDivider === true,\n          'cre8-c-accordion--border-none': this.borderType === undefined || this.borderType === 'none',\n          'cre8-c-accordion--border-rectangle': this.borderType === 'rectangle',\n          'cre8-c-accordion--border-rounded-bottom': this.borderType === 'rounded-bottom',\n          'cre8-c-accordion--border-rounded': this.borderType === 'rounded',\n      });\n\n      return html`\n      <div class=\"${componentClassNames}\">\n        <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-accordion') === undefined) {\n    customElements.define('cre8-accordion', Cre8Accordion);\n}\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-accordion': Cre8Accordion;\n  }\n}\n\nexport default Cre8Accordion;\n"]}

package/lib/components/badge/badge.d.ts

@@ -1,18 +1,5 @@
 import { Cre8Element } from '../cre8-element';
 import '../icon/icon';
-export declare enum status {
-    'error' = 0,
-    'warning' = 1,
-    'success' = 2,
-    'info' = 3,
-    'attention' = 4,
-    undefined = 5
-}
-export declare enum variant {
-    'light' = 0,
-    'white' = 1,
-    undefined = 2
-}
 /**
  * Status badges are used most often in tables or fat rows in a list.
  * These Components serve a contextual purpose and don't provide any functionality.
@@ -27,22 +14,22 @@ export declare class Cre8Badge extends Cre8Element {
     text: string;
     /**
      * Status (a color variant prop)
-     * - **neutral** (default) renders a badge with a neutral state treatment
+     * - Omitting this prop renders a badge with the neutral state treatment
      * - **success** renders a badge with success state treatment
      * - **warning** renders a badge with warning state treatment
      * - **error** renders a badge with error state treatment
      * - **info** renders a badge with information state treatment
      * - **attention** renders a badge with attention state treatment
      */
-    status: string;
+    status?: 'success' | 'warning' | 'error' | 'info' | 'attention';
     /**
      * Background Style Variant
      *
-     * - **dark|undefined** (default) renders a badge with a dark background
+     * - Omitting this prop renders a badge with a dark background
      * - **light** renders a badge with a light background
      * - **white** renders a badge with a white background
      */
-    variant: string;
+    variant?: 'light' | 'white';
     /**
      * SVG as a raw string
      * - For badges with icons, the icon is defined by this prop

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAItB,oBAAY,MAAM;IACjB,OAAO,IAAA;IAAE,SAAS,IAAA;IAAE,SAAS,IAAA;IAAE,MAAM,IAAA;IAAE,WAAW,IAAA;IAAE,SAAS,IAAA;CAC7D;AACD,oBAAY,OAAO;IACjB,OAAO,IAAA;IAAE,OAAO,IAAA;IAAE,SAAS,IAAA;CAC5B;AAED;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,IAAI,EAAE,MAAM,CAAa;IAE7B;;;;;;;;OAQG;IAEC,MAAM,EAAE,MAAM,CAAC;IAEnB;;;;;;OAMG;IAEC,OAAO,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IAEC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAItB;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACtC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,IAAI,EAAE,MAAM,CAAa;IAE7B;;;;;;;;OAQG;IAEC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,CAAC;IAEpE;;;;;;OAMG;IAEC,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAEhC;;;;;;;OAOG;IAEC,GAAG,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM;CAkBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/lib/components/badge/badge.js

@@ -10,21 +10,6 @@ import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
 import '../icon/icon';
 import styles from './badge.styles.js';
-export var status;
-(function (status) {
-    status[status["error"] = 0] = "error";
-    status[status["warning"] = 1] = "warning";
-    status[status["success"] = 2] = "success";
-    status[status["info"] = 3] = "info";
-    status[status["attention"] = 4] = "attention";
-    status[status["undefined"] = 5] = "undefined";
-})(status || (status = {}));
-export var variant;
-(function (variant) {
-    variant[variant["light"] = 0] = "light";
-    variant[variant["white"] = 1] = "white";
-    variant[variant["undefined"] = 2] = "undefined";
-})(variant || (variant = {}));
 /**
  * Status badges are used most often in tables or fat rows in a list.
  * These Components serve a contextual purpose and don't provide any functionality.

package/lib/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAEtB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAN,IAAY,MAEX;AAFD,WAAY,MAAM;IACjB,qCAAO,CAAA;IAAE,yCAAS,CAAA;IAAE,yCAAS,CAAA;IAAE,mCAAM,CAAA;IAAE,6CAAW,CAAA;IAAE,6CAAS,CAAA;AAC9D,CAAC,EAFW,MAAM,KAAN,MAAM,QAEjB;AACD,MAAM,CAAN,IAAY,OAEX;AAFD,WAAY,OAAO;IACjB,uCAAO,CAAA;IAAE,uCAAO,CAAA;IAAE,+CAAS,CAAA;AAC7B,CAAC,EAFW,OAAO,KAAP,OAAO,QAElB;AAED;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QAGE;;WAEG;QAEC,SAAI,GAAW,SAAS,CAAC;IAqD/B,CAAC;IAlBC,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,cAAc,EAAE;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;YACtD,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/C,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAClD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,kBAAkB;UACxC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;mBACN,IAAI,CAAC,GAAG;qBACN,CAAC,CAAC,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI;gBACH,CAAC;IACf,CAAC;;AA1DQ,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACE;AAYzB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACR;AAUf;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACP;AAWhB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACV;AAsBnB,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\n\nimport styles from './badge.styles.js';\n\nexport enum status {\n 'error', 'warning', 'success', 'info', 'attention', undefined\n}\nexport enum variant {\n  'light', 'white', undefined\n}\n\n/**\n * Status badges are used most often in tables or fat rows in a list.\n * These Components serve a contextual purpose and don't provide any functionality.\n * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.\n *\n */\nexport class Cre8Badge extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The badge text\n   */\n  @property({ type: String })\n      text: string = undefined;\n\n  /**\n   * Status (a color variant prop)\n   * - **neutral** (default) renders a badge with a neutral state treatment\n   * - **success** renders a badge with success state treatment\n   * - **warning** renders a badge with warning state treatment\n   * - **error** renders a badge with error state treatment\n   * - **info** renders a badge with information state treatment\n   * - **attention** renders a badge with attention state treatment\n   */\n  @property({ type: String })\n      status: string;\n\n  /**\n   * Background Style Variant\n   *\n   * - **dark|undefined** (default) renders a badge with a dark background\n   * - **light** renders a badge with a light background\n   * - **white** renders a badge with a white background\n   */\n  @property({ type: String })\n      variant: string;\n\n  /**\n   * SVG as a raw string\n   * - For badges with icons, the icon is defined by this prop\n   * - Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do\n   * - Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/Feedback.svg?raw';`\n   * - [cre8-icons Github repo](https://github.com/tmorrowdev/cre8-icons) This is the Github\n   * repo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons\n   */\n  @property({ type: String })\n      svg?: string;\n\n  render() {\n      const componentClassName = classnames('cre8-c-badge', {\n          'cre8-c-badge--success': this.status === 'success',\n          'cre8-c-badge--warning': this.status === 'warning',\n          'cre8-c-badge--error': this.status === 'error',\n          'cre8-c-badge--info': this.status === 'info',\n          'cre8-c-badge--attention': this.status === 'attention',\n          'cre8-c-badge--light': this.variant === 'light',\n          'cre8-c-badge--white': this.variant === 'white',\n      });\n\n      return html`<div class=\"${componentClassName}\">\n        ${this.svg ? html` <cre8-icon \n            svg='${this.svg}' aria-hidden='true'></cre8-icon>\n        </cre8-icon>` : ''} \n        ${this.text} \n        </div> `;\n  }\n}\n\nif (customElements.get('cre8-badge') === undefined) {\n    customElements.define('cre8-badge', Cre8Badge);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-badge': Cre8Badge;\n  }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../components/badge/badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAEtB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,WAAW;IAA1C;;QAGE;;WAEG;QAEC,SAAI,GAAW,SAAS,CAAC;IAqD/B,CAAC;IAlBC,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,cAAc,EAAE;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,uBAAuB,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS;YAClD,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,MAAM,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,MAAM,KAAK,WAAW;YACtD,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YAC/C,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;SAClD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,kBAAkB;UACxC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA;mBACN,IAAI,CAAC,GAAG;qBACN,CAAC,CAAC,CAAC,EAAE;UAChB,IAAI,CAAC,IAAI;gBACH,CAAC;IACf,CAAC;;AA1DQ,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACE;AAYzB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACyC;AAUhE;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACK;AAW5B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACV;AAsBnB,IAAI,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;IACjD,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\n\nimport styles from './badge.styles.js';\n\n/**\n * Status badges are used most often in tables or fat rows in a list.\n * These Components serve a contextual purpose and don't provide any functionality.\n * Badges should be organized inside a dedicated table row communicating status such as pending, approved or rejected.\n *\n */\nexport class Cre8Badge extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The badge text\n   */\n  @property({ type: String })\n      text: string = undefined;\n\n  /**\n   * Status (a color variant prop)\n   * - Omitting this prop renders a badge with the neutral state treatment\n   * - **success** renders a badge with success state treatment\n   * - **warning** renders a badge with warning state treatment\n   * - **error** renders a badge with error state treatment\n   * - **info** renders a badge with information state treatment\n   * - **attention** renders a badge with attention state treatment\n   */\n  @property({ type: String })\n      status?: 'success' | 'warning' | 'error' | 'info' | 'attention';\n\n  /**\n   * Background Style Variant\n   *\n   * - Omitting this prop renders a badge with a dark background\n   * - **light** renders a badge with a light background\n   * - **white** renders a badge with a white background\n   */\n  @property({ type: String })\n      variant?: 'light' | 'white';\n\n  /**\n   * SVG as a raw string\n   * - For badges with icons, the icon is defined by this prop\n   * - Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do\n   * - Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/Feedback.svg?raw';`\n   * - [cre8-icons Github repo](https://github.com/tmorrowdev/cre8-icons) This is the Github\n   * repo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons\n   */\n  @property({ type: String })\n      svg?: string;\n\n  render() {\n      const componentClassName = classnames('cre8-c-badge', {\n          'cre8-c-badge--success': this.status === 'success',\n          'cre8-c-badge--warning': this.status === 'warning',\n          'cre8-c-badge--error': this.status === 'error',\n          'cre8-c-badge--info': this.status === 'info',\n          'cre8-c-badge--attention': this.status === 'attention',\n          'cre8-c-badge--light': this.variant === 'light',\n          'cre8-c-badge--white': this.variant === 'white',\n      });\n\n      return html`<div class=\"${componentClassName}\">\n        ${this.svg ? html` <cre8-icon \n            svg='${this.svg}' aria-hidden='true'></cre8-icon>\n        </cre8-icon>` : ''} \n        ${this.text} \n        </div> `;\n  }\n}\n\nif (customElements.get('cre8-badge') === undefined) {\n    customElements.define('cre8-badge', Cre8Badge);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-badge': Cre8Badge;\n  }\n}\n"]}

package/lib/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,4 +1,10 @@
 import { Cre8Element } from '../cre8-element';
+/** One crumb in a data-driven breadcrumb trail. */
+export interface Cre8BreadcrumbData {
+    text: string;
+    /** Omit on the final crumb — the page you are on is not a link. */
+    href?: string;
+}
 /**
  * The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.
  * The breadcrumbs component shows the users their current location relative to the information architecture
@@ -21,6 +27,14 @@ export declare class Cre8Breadcrumbs extends Cre8Element {
      * aria-label attribute to designate at name for the nav. Can be override by user
      */
     navAriaLabel: string;
+    /**
+     * Crumbs for a data-driven trail. Each becomes a `cre8-breadcrumbs-item`,
+     * wrapping a `cre8-text-link` when it has an `href`.
+     */
+    items?: Cre8BreadcrumbData[];
+    /** The composition the data property stands for. */
+    private buildComposition;
+    protected updated(changed: Map<string, unknown>): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/lib/components/breadcrumbs/breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../components/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;GAeG;AAEH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,YAAY,EAAE,MAAM,CAAiB;IAEzC,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,eAAe,CAAC;KACrC;CACF;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../components/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAI9C,mDAAmD;AACnD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;GAeG;AAGH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,YAAY,EAAE,MAAM,CAAiB;IACzC;;;OAGG;IAEC,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAEjC,oDAAoD;IACpD,OAAO,CAAC,gBAAgB;IAWxB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOtD,MAAM;CAWP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,eAAe,CAAC;KACrC;CACF;AAED,eAAe,eAAe,CAAC"}

package/lib/components/breadcrumbs/breadcrumbs.js

@@ -11,6 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
+import { syncLightChildren } from '../utils/light-children';
 import styles from './breadcrumbs.styles.js';
 /**
  * The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.
@@ -36,6 +37,23 @@ export class Cre8Breadcrumbs extends Cre8Element {
          */
         this.navAriaLabel = 'breadcrumbs';
     }
+    /** The composition the data property stands for. */
+    buildComposition() {
+        if (!this.items)
+            return null;
+        return this.items.map((item) => ({
+            tag: 'cre8-breadcrumbs-item',
+            children: item.href
+                ? [{ tag: 'cre8-text-link', props: { href: item.href }, text: item.text }]
+                : undefined,
+            text: item.href ? undefined : item.text,
+        }));
+    }
+    updated(changed) {
+        if (['items'].some((key) => changed.has(key))) {
+            syncLightChildren(this, this.buildComposition());
+        }
+    }
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-breadcrumbs', {});
         return html `
@@ -51,6 +69,9 @@ Cre8Breadcrumbs.styles = [styles];
 __decorate([
     property()
 ], Cre8Breadcrumbs.prototype, "navAriaLabel", void 0);
+__decorate([
+    property({ type: Array })
+], Cre8Breadcrumbs.prototype, "items", void 0);
 if (customElements.get('cre8-breadcrumbs') === undefined) {
     customElements.define('cre8-breadcrumbs', Cre8Breadcrumbs);
 }

package/lib/components/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../components/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":";;;;;;AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAGE;;WAEG;QAEC,iBAAY,GAAW,aAAa,CAAC;IAa3C,CAAC;IAXC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;yBACQ,IAAI,CAAC,YAAY,aAAa,mBAAmB;;;;;KAKrE,CAAC;IACJ,CAAC;;AAlBQ,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,EAAE;qDAC8B;AAe3C,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC;AAC/D,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["/* eslint-disable lit-a11y/list --\n* <slot> is a non-content element, which is permitted as a direct child within a list\n* Ref https://dequeuniversity.com/rules/axe/4.8/list regarding non-content elements\n*/\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './breadcrumbs.styles.js';\n\n/**\n * The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.\n * The breadcrumbs component shows the users their current location relative to the information architecture\n * It enables the users to quickly move up to a parent level or previous location.\n *\n * ## How to Use\n *\n * - Import 'Breadcrumbs' component.\n * - Add the pages in the path of the breadcrumbs using `cre8-breadcrumbs-item`.\n * All the pages in the breadcrumbs component should be interactive.\n * - All the page should link to their respective pages (except the current page) using `cre8-link`.\n * - The current page is included in the breadcrumbs trail.\n * - The current page is always the last text listed and is not an interactive link.\n *\n * @slot - The component content\n */\n\nexport class Cre8Breadcrumbs extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * aria-label attribute to designate at name for the nav. Can be override by user\n   */\n  @property()\n      navAriaLabel: string = 'breadcrumbs';\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-breadcrumbs', {});\n\n      return html`\n      <nav aria-label=\"${this.navAriaLabel}\"  class=\"${componentClassNames}\">\n        <ol class=\"cre8-c-breadcrumbs__list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  }\n}\n\nif (customElements.get('cre8-breadcrumbs') === undefined) {\n    customElements.define('cre8-breadcrumbs', Cre8Breadcrumbs);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-breadcrumbs': Cre8Breadcrumbs;\n  }\n}\n\nexport default Cre8Breadcrumbs;\n"]}
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../components/breadcrumbs/breadcrumbs.ts"],"names":[],"mappings":";;;;;;AAAA;;;EAGE;AACF,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAkB,MAAM,yBAAyB,CAAC;AAC5E,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAS7C;;;;;;;;;;;;;;;GAeG;AAGH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAGE;;WAEG;QAEC,iBAAY,GAAW,aAAa,CAAC;IAsC3C,CAAC;IA9BC,oDAAoD;IAC5C,gBAAgB;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC7B,GAAG,EAAE,uBAAuB;YAC5B,QAAQ,EAAE,IAAI,CAAC,IAAI;gBACf,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC1E,CAAC,CAAC,SAAS;YACf,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;SAC1C,CAAC,CAAC,CAAC;IACR,CAAC;IAES,OAAO,CAAC,OAA6B;QAC3C,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC;YAC5C,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACrD,CAAC;IACL,CAAC;IAGD,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;yBACQ,IAAI,CAAC,YAAY,aAAa,mBAAmB;;;;;KAKrE,CAAC;IACJ,CAAC;;AA3CQ,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,EAAE;qDAC8B;AAMrC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CACO;AAkCnC,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC;AAC/D,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["/* eslint-disable lit-a11y/list --\n* <slot> is a non-content element, which is permitted as a direct child within a list\n* Ref https://dequeuniversity.com/rules/axe/4.8/list regarding non-content elements\n*/\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport { syncLightChildren, type ChildSpec } from '../utils/light-children';\nimport styles from './breadcrumbs.styles.js';\n\n/** One crumb in a data-driven breadcrumb trail. */\nexport interface Cre8BreadcrumbData {\n  text: string;\n  /** Omit on the final crumb — the page you are on is not a link. */\n  href?: string;\n}\n\n/**\n * The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.\n * The breadcrumbs component shows the users their current location relative to the information architecture\n * It enables the users to quickly move up to a parent level or previous location.\n *\n * ## How to Use\n *\n * - Import 'Breadcrumbs' component.\n * - Add the pages in the path of the breadcrumbs using `cre8-breadcrumbs-item`.\n * All the pages in the breadcrumbs component should be interactive.\n * - All the page should link to their respective pages (except the current page) using `cre8-link`.\n * - The current page is included in the breadcrumbs trail.\n * - The current page is always the last text listed and is not an interactive link.\n *\n * @slot - The component content\n */\n\n\nexport class Cre8Breadcrumbs extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * aria-label attribute to designate at name for the nav. Can be override by user\n   */\n  @property()\n      navAriaLabel: string = 'breadcrumbs';\n  /**\n   * Crumbs for a data-driven trail. Each becomes a `cre8-breadcrumbs-item`,\n   * wrapping a `cre8-text-link` when it has an `href`.\n   */\n  @property({ type: Array })\n      items?: Cre8BreadcrumbData[];\n\n  /** The composition the data property stands for. */\n  private buildComposition(): ChildSpec[] | null {\n      if (!this.items) return null;\n      return this.items.map((item) => ({\n          tag: 'cre8-breadcrumbs-item',\n          children: item.href\n              ? [{ tag: 'cre8-text-link', props: { href: item.href }, text: item.text }]\n              : undefined,\n          text: item.href ? undefined : item.text,\n      }));\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n      if (['items'].some((key) => changed.has(key))) {\n          syncLightChildren(this, this.buildComposition());\n      }\n  }\n\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-breadcrumbs', {});\n\n      return html`\n      <nav aria-label=\"${this.navAriaLabel}\"  class=\"${componentClassNames}\">\n        <ol class=\"cre8-c-breadcrumbs__list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  }\n}\n\nif (customElements.get('cre8-breadcrumbs') === undefined) {\n    customElements.define('cre8-breadcrumbs', Cre8Breadcrumbs);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-breadcrumbs': Cre8Breadcrumbs;\n  }\n}\n\nexport default Cre8Breadcrumbs;\n"]}

package/lib/components/chart/chart.d.ts

@@ -72,9 +72,9 @@ export interface Cre8ChartEventDetail {
  * ></cre8-chart>
  * ```
  *
- * @fires cre8-chart-click - Fired when a chart element is clicked
- * @fires cre8-chart-hover - Fired when hovering over chart elements
- * @fires cre8-chart-ready - Fired when the chart is initialized
+ * @fires chart-click - Fired when a chart element is clicked
+ * @fires chart-hover - Fired when hovering over chart elements
+ * @fires chart-ready - Fired when the chart is initialized
  */
 export declare class Cre8Chart extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/chart/chart.js

@@ -34,9 +34,9 @@ Chart.register(...registerables);
  * ></cre8-chart>
  * ```
  *
- * @fires cre8-chart-click - Fired when a chart element is clicked
- * @fires cre8-chart-hover - Fired when hovering over chart elements
- * @fires cre8-chart-ready - Fired when the chart is initialized
+ * @fires chart-click - Fired when a chart element is clicked
+ * @fires chart-hover - Fired when hovering over chart elements
+ * @fires chart-ready - Fired when the chart is initialized
  */
 export class Cre8Chart extends Cre8Element {
     constructor() {
@@ -181,7 +181,7 @@ export class Cre8Chart extends Cre8Element {
         const config = this._buildChartConfig();
         this._chartInstance = new Chart(ctx, config);
         this.dispatch({
-            eventName: 'cre8-chart-ready',
+            eventName: 'chart-ready',
             detailObj: { chart: this._chartInstance },
         });
     }
@@ -411,7 +411,7 @@ export class Cre8Chart extends Cre8Element {
                 label,
             };
             // @ts-expect-error: `dispatch` is not defined on `Cre8Element`
-            this.dispatch({ eventName: 'cre8-chart-click', detailObj: detail });
+            this.dispatch({ eventName: 'chart-click', detailObj: detail });
         }
     }
     /**
@@ -438,7 +438,7 @@ export class Cre8Chart extends Cre8Element {
                 label,
             };
             // @ts-expect-error: `dispatch` is not defined on `Cre8Element`
-            this.dispatch({ eventName: 'cre8-chart-hover', detailObj: detail });
+            this.dispatch({ eventName: 'chart-hover', detailObj: detail });
         }
     }
     /**