@hpe-web/components 0.0.1 → 1.0.0

package/dist/elements/hpe-accordion/hpe-accordion.d.ts

@@ -0,0 +1,59 @@
+import { LitElement } from "lit";
+/**
+ * A single accordion item with a trigger and expandable content region.
+ *
+ * @tag hpe-accordion-item
+ * @summary Displays a single accordion item with an H5 label and chevron icon.
+ *
+ * @attr {string} label - Accordion trigger label text
+ * @attr {boolean} expanded - Whether the accordion content is expanded
+ * @attr {boolean} disabled - Whether the accordion trigger is disabled
+ *
+ * @slot - Accordion panel content shown when expanded
+ *
+ * @fires accordion-item-toggle - Emitted when the item requests a new expansion state
+ *
+ * @csspart item - The accordion item wrapper
+ * @csspart trigger - The accordion trigger button
+ * @csspart label - The accordion label text
+ * @csspart icon - The chevron icon container
+ * @csspart panel - The expandable content region
+ */
+export declare class HpeAccordionItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    label: string;
+    expanded: boolean;
+    disabled: boolean;
+    private readonly panelId;
+    private readonly triggerId;
+    render(): import("lit-html").TemplateResult<1>;
+    focusTrigger(): void;
+    private handleToggle;
+    private handleKeydown;
+}
+/**
+ * A parent accordion that coordinates related accordion items.
+ *
+ * @tag hpe-accordion
+ * @summary Organizes multiple accordion items and keeps a single item expanded at a time.
+ *
+ * @slot - Accordion item elements (use `<hpe-accordion-item>`)
+ *
+ * @csspart accordion - The accordion container element
+ */
+export declare class HpeAccordion extends LitElement {
+    static styles: import("lit").CSSResult;
+    private items;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private updateItems;
+    private handleItemToggle;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-accordion": HpeAccordion;
+        "hpe-accordion-item": HpeAccordionItem;
+    }
+}
+//# sourceMappingURL=hpe-accordion.d.ts.map

package/dist/elements/hpe-accordion/hpe-accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-accordion.d.ts","sourceRoot":"","sources":["../../../elements/hpe-accordion/hpe-accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAWvC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,0BAAU;IAGhC,KAAK,SAA0B;IAG/B,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0C;IAElE,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA4C;IAE7D,MAAM;IA6Cf,YAAY;IAIZ,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,aAAa;CAiDtB;AAED;;;;;;;;;GASG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAU;IAEhC,OAAO,CAAC,KAAK,CAA0B;IAE9B,iBAAiB;IAQjB,oBAAoB;IAQpB,MAAM;IAQf,OAAO,CAAC,WAAW,CAUjB;IAEF,OAAO,CAAC,gBAAgB,CAQtB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/elements/hpe-accordion/hpe-accordion.js

@@ -0,0 +1,206 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var HpeAccordionItem_1;
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./hpe-accordion.styles.js";
+let accordionId = 0;
+/**
+ * A single accordion item with a trigger and expandable content region.
+ *
+ * @tag hpe-accordion-item
+ * @summary Displays a single accordion item with an H5 label and chevron icon.
+ *
+ * @attr {string} label - Accordion trigger label text
+ * @attr {boolean} expanded - Whether the accordion content is expanded
+ * @attr {boolean} disabled - Whether the accordion trigger is disabled
+ *
+ * @slot - Accordion panel content shown when expanded
+ *
+ * @fires accordion-item-toggle - Emitted when the item requests a new expansion state
+ *
+ * @csspart item - The accordion item wrapper
+ * @csspart trigger - The accordion trigger button
+ * @csspart label - The accordion label text
+ * @csspart icon - The chevron icon container
+ * @csspart panel - The expandable content region
+ */
+let HpeAccordionItem = HpeAccordionItem_1 = class HpeAccordionItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.label = "Accordion Item Label";
+        this.expanded = false;
+        this.disabled = false;
+        this.panelId = `hpe-accordion-panel-${accordionId++}`;
+        this.triggerId = `hpe-accordion-trigger-${accordionId++}`;
+    }
+    render() {
+        return html `
+      <div part="item" class="item">
+        <button
+          id=${this.triggerId}
+          part="trigger"
+          class="trigger"
+          type="button"
+          aria-expanded=${this.expanded ? "true" : "false"}
+          aria-controls=${this.panelId}
+          ?disabled=${this.disabled}
+          @click=${this.handleToggle}
+          @keydown=${this.handleKeydown}
+        >
+          <span part="label" class="label">${this.label}</span>
+          <span part="icon" class="icon" aria-hidden="true">
+            <svg
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 6L8 10L12 6"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </span>
+        </button>
+        <div
+          id=${this.panelId}
+          part="panel"
+          class="panel"
+          role="region"
+          aria-labelledby=${this.triggerId}
+          ?hidden=${!this.expanded}
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    focusTrigger() {
+        this.shadowRoot?.querySelector("button")?.focus();
+    }
+    handleToggle() {
+        if (this.disabled) {
+            return;
+        }
+        const requestedExpanded = !this.expanded;
+        const parentAccordion = this.parentElement;
+        if (parentAccordion?.tagName.toLowerCase() === "hpe-accordion") {
+            this.dispatchEvent(new CustomEvent("accordion-item-toggle", {
+                detail: { item: this, expanded: requestedExpanded },
+                bubbles: true,
+                composed: true,
+            }));
+            return;
+        }
+        this.expanded = requestedExpanded;
+    }
+    handleKeydown(event) {
+        const parentAccordion = this.parentElement;
+        if (this.disabled ||
+            !parentAccordion ||
+            parentAccordion.tagName.toLowerCase() !== "hpe-accordion") {
+            return;
+        }
+        const items = Array.from(parentAccordion.querySelectorAll("hpe-accordion-item")).filter((item) => item instanceof HpeAccordionItem_1);
+        const enabledItems = items.filter((item) => !item.disabled);
+        const currentIndex = enabledItems.indexOf(this);
+        if (currentIndex === -1 || enabledItems.length === 0) {
+            return;
+        }
+        let targetItem;
+        switch (event.key) {
+            case "ArrowDown":
+            case "ArrowRight":
+                event.preventDefault();
+                targetItem = enabledItems[currentIndex + 1] || enabledItems[0];
+                break;
+            case "ArrowUp":
+            case "ArrowLeft":
+                event.preventDefault();
+                targetItem =
+                    enabledItems[currentIndex - 1] ||
+                        enabledItems[enabledItems.length - 1];
+                break;
+            case "Home":
+                event.preventDefault();
+                targetItem = enabledItems[0];
+                break;
+            case "End":
+                event.preventDefault();
+                targetItem = enabledItems[enabledItems.length - 1];
+                break;
+        }
+        targetItem?.focusTrigger();
+    }
+};
+HpeAccordionItem.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeAccordionItem.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeAccordionItem.prototype, "expanded", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeAccordionItem.prototype, "disabled", void 0);
+HpeAccordionItem = HpeAccordionItem_1 = __decorate([
+    customElement("hpe-accordion-item")
+], HpeAccordionItem);
+export { HpeAccordionItem };
+/**
+ * A parent accordion that coordinates related accordion items.
+ *
+ * @tag hpe-accordion
+ * @summary Organizes multiple accordion items and keeps a single item expanded at a time.
+ *
+ * @slot - Accordion item elements (use `<hpe-accordion-item>`)
+ *
+ * @csspart accordion - The accordion container element
+ */
+let HpeAccordion = class HpeAccordion extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.updateItems = () => {
+            this.items = Array.from(this.querySelectorAll("hpe-accordion-item")).filter((item) => item instanceof HpeAccordionItem && item.parentElement === this);
+            const expandedItems = this.items.filter((item) => item.expanded);
+            expandedItems.slice(1).forEach((item) => {
+                item.expanded = false;
+            });
+        };
+        this.handleItemToggle = (event) => {
+            const { item: targetItem, expanded } = event.detail;
+            this.items.forEach((item) => {
+                item.expanded = item === targetItem ? expanded : false;
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("accordion-item-toggle", this.handleItemToggle);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener("accordion-item-toggle", this.handleItemToggle);
+    }
+    render() {
+        return html `
+      <div part="accordion" class="accordion">
+        <slot @slotchange=${this.updateItems}></slot>
+      </div>
+    `;
+    }
+};
+HpeAccordion.styles = styles;
+HpeAccordion = __decorate([
+    customElement("hpe-accordion")
+], HpeAccordion);
+export { HpeAccordion };
+//# sourceMappingURL=hpe-accordion.js.map

package/dist/elements/hpe-accordion/hpe-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-accordion.js","sourceRoot":"","sources":["../../../elements/hpe-accordion/hpe-accordion.ts"],"names":[],"mappings":"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"}

package/dist/elements/hpe-accordion/hpe-accordion.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=hpe-accordion.styles.d.ts.map

package/dist/elements/hpe-accordion/hpe-accordion.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-accordion.styles.d.ts","sourceRoot":"","sources":["../../../elements/hpe-accordion/hpe-accordion.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwGlB,CAAC"}

package/dist/elements/hpe-accordion/hpe-accordion.styles.js

@@ -0,0 +1,107 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    --hpe-accordion-font-family: var(
+      --hpe-web-heading-font,
+      "HPE Graphik",
+      Arial,
+      sans-serif
+    );
+    --hpe-accordion-font-size: var(--hpe-web-heading-h5-default-font-size);
+    --hpe-accordion-line-height: var(--hpe-web-heading-h5-default-line-height);
+    --hpe-accordion-font-weight: var(--hpe-web-heading-h5-default-font-weight);
+    --hpe-accordion-letter-spacing: var(
+      --hpe-web-heading-h5-default-letter-spacing
+    );
+    --hpe-accordion-label-color: var(--hpe-web-color-text-strong);
+    --hpe-accordion-icon-color: var(--hpe-web-color-icon-default);
+    --hpe-accordion-border-color: var(--hpe-web-color-border-weak);
+    --hpe-accordion-horizontal-padding: var(--hpe-web-spacing-small);
+    --hpe-accordion-vertical-padding: var(--hpe-web-spacing-small);
+    --hpe-accordion-content-gap: var(--hpe-web-spacing-xxlarge);
+    --hpe-accordion-icon-size: 24px;
+  }
+
+  .accordion {
+    width: 100%;
+  }
+
+  .item {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    border-top: 1px solid var(--hpe-accordion-border-color);
+  }
+
+  .trigger {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--hpe-accordion-content-gap);
+    width: 100%;
+    padding: var(--hpe-accordion-vertical-padding)
+      var(--hpe-accordion-horizontal-padding);
+    background: transparent;
+    border: 0;
+    appearance: none;
+    color: var(--hpe-accordion-label-color);
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.64;
+  }
+
+  .trigger:focus-visible {
+    outline: 2px solid var(--hpe-web-color-border-primary);
+    outline-offset: -2px;
+  }
+
+  .label {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-family: var(--hpe-accordion-font-family);
+    font-size: var(--hpe-accordion-font-size);
+    font-weight: var(--hpe-accordion-font-weight);
+    line-height: var(--hpe-accordion-line-height);
+    letter-spacing: var(--hpe-accordion-letter-spacing);
+    color: var(--hpe-accordion-label-color);
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: var(--hpe-accordion-icon-size);
+    height: var(--hpe-accordion-icon-size);
+    color: var(--hpe-accordion-icon-color);
+    transition: transform 0.2s ease-in-out;
+  }
+
+  :host([expanded]) .icon {
+    transform: rotate(180deg);
+  }
+
+  .icon svg {
+    width: var(--hpe-accordion-icon-size);
+    height: var(--hpe-accordion-icon-size);
+    display: block;
+  }
+
+  .panel {
+    padding: var(--hpe-accordion-vertical-padding)
+      var(--hpe-accordion-horizontal-padding);
+  }
+
+  .panel[hidden] {
+    display: none;
+  }
+`;
+//# sourceMappingURL=hpe-accordion.styles.js.map

package/dist/elements/hpe-accordion/hpe-accordion.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-accordion.styles.js","sourceRoot":"","sources":["../../../elements/hpe-accordion/hpe-accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGxB,CAAC"}

package/dist/elements/hpe-accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { HpeAccordion, HpeAccordionItem } from "./hpe-accordion.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/hpe-accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/hpe-accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/elements/hpe-accordion/index.js

@@ -0,0 +1,2 @@
+export { HpeAccordion, HpeAccordionItem } from "./hpe-accordion.js";
+//# sourceMappingURL=index.js.map

package/dist/elements/hpe-accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../elements/hpe-accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/elements/hpe-agenda/hpe-agenda.d.ts

@@ -0,0 +1,52 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * A stacked agenda pattern for organizing time-based event rows.
+ *
+ * @tag hpe-agenda
+ * @summary Agenda container that applies alternating and border variants to row children.
+ *
+ * @attr {'alternating' | 'border' | 'no-border'} format
+ *
+ * @slot - One or more <hpe-agenda-row> elements.
+ *
+ * @csspart section - Outer agenda section wrapper.
+ * @csspart container - Inner agenda container.
+ */
+export declare class HpeAgenda extends LitElement {
+    static styles: import("lit").CSSResult;
+    format: 'alternating' | 'border' | 'no-border';
+    protected updated(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private syncRows;
+}
+/**
+ * One agenda row with a time column and content column.
+ *
+ * @tag hpe-agenda-row
+ * @summary Two-column agenda row for time and description content.
+ *
+ * @attr {'default' | 'sunken'} tone
+ * @attr {boolean} bordered
+ *
+ * @slot time - Time or label content for the first column.
+ * @slot title - Optional agenda item title.
+ * @slot description - Optional agenda item description.
+ * @slot - Main row content for the second column.
+ *
+ * @csspart row - Row container.
+ * @csspart time - Time column.
+ * @csspart content - Content column.
+ */
+export declare class HpeAgendaRow extends LitElement {
+    static styles: import("lit").CSSResult;
+    tone: 'default' | 'sunken';
+    bordered: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hpe-agenda': HpeAgenda;
+        'hpe-agenda-row': HpeAgendaRow;
+    }
+}
+//# sourceMappingURL=hpe-agenda.d.ts.map

package/dist/elements/hpe-agenda/hpe-agenda.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-agenda.d.ts","sourceRoot":"","sources":["../../../elements/hpe-agenda/hpe-agenda.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIvD;;;;;;;;;;;;GAYG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAU;IAGhC,MAAM,EAAE,aAAa,GAAG,QAAQ,GAAG,WAAW,CAAiB;cAE5C,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAM/C,MAAM;IAUf,OAAO,CAAC,QAAQ,CAkBd;CACH;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,0BAAU;IAGhC,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAa;IAGvC,QAAQ,UAAS;IAER,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;QACxB,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/elements/hpe-agenda/hpe-agenda.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './hpe-agenda.styles.js';
+/**
+ * A stacked agenda pattern for organizing time-based event rows.
+ *
+ * @tag hpe-agenda
+ * @summary Agenda container that applies alternating and border variants to row children.
+ *
+ * @attr {'alternating' | 'border' | 'no-border'} format
+ *
+ * @slot - One or more <hpe-agenda-row> elements.
+ *
+ * @csspart section - Outer agenda section wrapper.
+ * @csspart container - Inner agenda container.
+ */
+let HpeAgenda = class HpeAgenda extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.format = 'alternating';
+        this.syncRows = () => {
+            const defaultSlot = this.shadowRoot?.querySelector('slot');
+            if (!defaultSlot)
+                return;
+            const rows = defaultSlot
+                .assignedElements({ flatten: true })
+                .filter((element) => element instanceof HpeAgendaRow);
+            rows.forEach((row, index) => {
+                row.bordered = this.format === 'border';
+                row.tone =
+                    this.format === 'alternating' && index % 2 === 0
+                        ? 'sunken'
+                        : 'default';
+            });
+        };
+    }
+    updated(changed) {
+        if (changed.has('format')) {
+            this.syncRows();
+        }
+    }
+    render() {
+        return html `
+      <section part="section" class="section">
+        <div part="container" class="container">
+          <slot @slotchange=${this.syncRows}></slot>
+        </div>
+      </section>
+    `;
+    }
+};
+HpeAgenda.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeAgenda.prototype, "format", void 0);
+HpeAgenda = __decorate([
+    customElement('hpe-agenda')
+], HpeAgenda);
+export { HpeAgenda };
+/**
+ * One agenda row with a time column and content column.
+ *
+ * @tag hpe-agenda-row
+ * @summary Two-column agenda row for time and description content.
+ *
+ * @attr {'default' | 'sunken'} tone
+ * @attr {boolean} bordered
+ *
+ * @slot time - Time or label content for the first column.
+ * @slot title - Optional agenda item title.
+ * @slot description - Optional agenda item description.
+ * @slot - Main row content for the second column.
+ *
+ * @csspart row - Row container.
+ * @csspart time - Time column.
+ * @csspart content - Content column.
+ */
+let HpeAgendaRow = class HpeAgendaRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.tone = 'default';
+        this.bordered = false;
+    }
+    render() {
+        return html `
+      <div part="row" class="row">
+        <div part="time" class="time">
+          <slot name="time"></slot>
+        </div>
+        <div part="content" class="content">
+          <slot name="title"></slot>
+          <slot name="description">
+            <slot></slot>
+          </slot>
+        </div>
+      </div>
+    `;
+    }
+};
+HpeAgendaRow.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeAgendaRow.prototype, "tone", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeAgendaRow.prototype, "bordered", void 0);
+HpeAgendaRow = __decorate([
+    customElement('hpe-agenda-row')
+], HpeAgendaRow);
+export { HpeAgendaRow };
+//# sourceMappingURL=hpe-agenda.js.map

package/dist/elements/hpe-agenda/hpe-agenda.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-agenda.js","sourceRoot":"","sources":["../../../elements/hpe-agenda/hpe-agenda.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD;;;;;;;;;;;;GAYG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIL,WAAM,GAA2C,aAAa,CAAC;QAkBvD,aAAQ,GAAG,GAAG,EAAE;YACtB,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAChD,MAAM,CACmB,CAAC;YAE5B,IAAI,CAAC,WAAW;gBAAE,OAAO;YAEzB,MAAM,IAAI,GAAG,WAAW;iBACrB,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iBACnC,MAAM,CAAC,CAAC,OAAO,EAA2B,EAAE,CAAC,OAAO,YAAY,YAAY,CAAC,CAAC;YAEjF,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;gBAC1B,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;gBACxC,GAAG,CAAC,IAAI;oBACN,IAAI,CAAC,MAAM,KAAK,aAAa,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC;wBAC9C,CAAC,CAAC,QAAQ;wBACV,CAAC,CAAC,SAAS,CAAC;YAClB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;IAnCoB,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;8BAGe,IAAI,CAAC,QAAQ;;;KAGtC,CAAC;IACJ,CAAC;;AAnBe,gBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACmC;AAJpD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyCrB;;AAED;;;;;;;;;;;;;;;;;GAiBG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAIL,SAAI,GAAyB,SAAS,CAAC;QAGvC,aAAQ,GAAG,KAAK,CAAC;IAiBnB,CAAC;IAfU,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;;;;;;KAYV,CAAC;IACJ,CAAC;;AAtBe,mBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACW;AAGvC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAC1B;AAPN,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAwBxB"}

package/dist/elements/hpe-agenda/hpe-agenda.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=hpe-agenda.styles.d.ts.map

package/dist/elements/hpe-agenda/hpe-agenda.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-agenda.styles.d.ts","sourceRoot":"","sources":["../../../elements/hpe-agenda/hpe-agenda.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgFlB,CAAC"}