@brandsync/wc 1.10.0 → 1.11.0

package/dist/collection/components/bs-whats-new/bs-whats-new.js

@@ -0,0 +1,790 @@
+import { h } from "@stencil/core";
+/**
+ * A product's "What's new" surface, in three forms matching the Figma component:
+ *
+ * - `feed` -- a docked panel: heading, "Mark all as read", filter tabs, the list of updates (each a
+ *   `bs-whats-new-entry`) and a link to the full release notes.
+ * - `announcement` -- one big update, with a hero image, a tag, a heading, a few bullet points, "1 of 3"
+ *   and Remind me later / Next.
+ * - `teaser` -- a small card pointing at the feed: tag, date, heading, a line of text and "Open What's new".
+ *
+ * The component only shows what you give it and reports what the user pressed. It doesn't fetch updates,
+ * track which the user has seen, or decide when to appear: your app owns `entries` (with their `unread`
+ * flags) and reacts to the events.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-whats-new-entry` (each update), `bs-tabs` (the filters),
+ * `bs-chip-informative` (the tags), `bs-button`, `bs-icon-button`.
+ *
+ * ## When to use
+ * - Telling users about changes to the product, in a place they can come back to.
+ *
+ * ## When not to use
+ * - Messages about the user's own data or an action they just took -- use `bs-snackbar`, `bs-toast`.
+ * - A guided walk through the interface -- use `bs-product-tour`.
+ *
+ * @slot hero - The hero image of the `announcement` (or any media). Use `image` for a plain URL.
+ * @part container - The card.
+ * @part heading - The heading.
+ * @part close - The close button.
+ * @part mark-all-read - The "Mark all as read" button (`feed`).
+ * @part filters - The filter tabs (`feed`).
+ * @part entries - The list of updates (`feed`).
+ * @part entry - Each update (`feed`).
+ * @part release-notes - The release notes link (`feed`).
+ * @part hero - The hero area (`announcement`).
+ * @part tag - The tag chip (`announcement`, `teaser`).
+ * @part points - The bullet list (`announcement`).
+ * @part step - The "1 of 3" label (`announcement`).
+ * @part secondary - The Remind me later button (`announcement`).
+ * @part primary - The Next button (`announcement`).
+ * @part date - The date (`teaser`).
+ * @part description - The text (`teaser`).
+ * @part action - The Open What's new link (`teaser`).
+ */
+export class BsWhatsNew {
+    /** Which form: `feed`, `announcement` or `teaser`. */
+    type = 'feed';
+    /** Heading. Defaults to "What's new" for `feed`; set it for the other forms. */
+    heading;
+    /** HTML heading level, 1-6. */
+    headingLevel = 2;
+    /** Shows a close button. */
+    closable = false;
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
+    // --- feed --------------------------------------------------------------------------------
+    /** The updates in the feed: `[{ id, category?, tag?, tagColor?, date?, unread?, heading, description?,
+     * actionLabel?, image? }]`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's
+     * non-string props rule. */
+    entries = [];
+    /** The filter tabs: `[{ value, label }]`. `value: "all"` shows every entry; any other value shows the
+     * entries whose `category` matches. Defaults to All, New Features, Improvements and Fixes
+     * (categories `features`, `improvements`, `fixes`). Set `[]` for no tabs. */
+    filters = [
+        { value: 'all', label: 'All' },
+        { value: 'features', label: 'New Features' },
+        { value: 'improvements', label: 'Improvements' },
+        { value: 'fixes', label: 'Fixes' },
+    ];
+    /** The selected filter's `value`. Mutable: choosing a tab updates it. */
+    filter = 'all';
+    /** Label of the "Mark all as read" button, shown while any entry is `unread`. */
+    markAllReadLabel = 'Mark all as read';
+    /** Text of the release notes link. */
+    releaseNotesLabel = 'See all release notes';
+    /** URL of the full release notes. The link is only shown when this is set. */
+    releaseNotesUrl;
+    /** Text shown when the selected filter has no entries. */
+    emptyLabel = 'Nothing new here yet.';
+    // --- announcement ------------------------------------------------------------------------
+    /** Tag text (`announcement`, `teaser`), e.g. "New feature". */
+    tag;
+    /** Colour of the tag. */
+    tagColor = 'info';
+    /** URL of the hero image (`announcement`). Or slot your own into `hero`. */
+    image;
+    /** The bullet points (`announcement`). Must be set as a JS property -- see CONVENTIONS.md. */
+    points = [];
+    /** Current step, 1-based (`announcement`). Used with `total`. */
+    step = 1;
+    /** Number of announcements in the sequence (`announcement`). The step label is hidden when 0. */
+    total = 0;
+    /** Template of the step label; `{step}` and `{total}` are replaced. */
+    stepLabel = '{step} of {total}';
+    /** Label of the secondary button (`announcement`). Empty hides it. */
+    secondaryLabel = 'Remind me later';
+    /** Label of the primary button (`announcement`). Empty hides it. */
+    primaryLabel = 'Next';
+    // --- teaser ------------------------------------------------------------------------------
+    /** The date as text (`teaser`). */
+    date;
+    /** The line under the heading (`teaser`). */
+    description;
+    /** Label of the link (`teaser`). */
+    actionLabel = 'Open What’s new';
+    // --- events ------------------------------------------------------------------------------
+    /** Fires when "Mark all as read" is pressed (`feed`). Update the entries' `unread` yourself. */
+    bsMarkAllRead;
+    /** Fires when an entry's action link is pressed (`feed`): `{ id }`. */
+    bsEntryAction;
+    /** Fires when the user picks a filter tab (`feed`): `{ value }`. */
+    bsFilterChange;
+    /** Fires when the close button is pressed. */
+    bsClose;
+    /** Fires when the primary button (`announcement`) is pressed. */
+    bsPrimary;
+    /** Fires when the secondary button (`announcement`) is pressed. */
+    bsSecondary;
+    /** Fires when the teaser's link is pressed (`teaser`) -- open the feed. */
+    bsOpen;
+    /** True while something is assigned to the `hero` slot, so the hero area only exists then. */
+    hasHeroSlot = false;
+    // --- pieces ------------------------------------------------------------------------------
+    heading_(text, cls = '') {
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 2));
+        return h(`h${level}`, { part: 'heading', id: 'heading', class: { 'bs-wn__heading': true, [cls]: !!cls } }, text);
+    }
+    renderClose(compact = false) {
+        if (!this.closable)
+            return null;
+        return (h("bs-icon-button", { part: "close", class: { 'bs-wn__close': true, 'bs-wn__close--compact': compact }, variant: "subtle", size: "md", ariaLabel: this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { d: "M6 6L18 18M18 6L6 18" }))));
+    }
+    renderTag() {
+        if (!this.tag)
+            return null;
+        return (h("bs-chip-informative", { part: "tag", size: "sm", color: this.tagColor }, this.tag));
+    }
+    renderFeed() {
+        const all = this.entries ?? [];
+        const visible = this.filter === 'all' ? all : all.filter(e => e.category === this.filter);
+        const anyUnread = all.some(e => e.unread);
+        const filters = this.filters ?? [];
+        return (h("bs-card", { part: "container", class: "bs-wn bs-wn--feed", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-wn__feed" }, h("div", { class: "bs-wn__head" }, this.heading_(this.heading ?? 'What’s new'), h("span", { class: "bs-wn__spacer" }), anyUnread && (h("bs-button", { part: "mark-all-read", class: "bs-wn__text-button", variant: "subtle", size: "sm", onClick: () => this.bsMarkAllRead.emit() }, this.markAllReadLabel)), this.renderClose()), filters.length > 0 && (h("div", { part: "filters", class: "bs-wn__filters" }, h("bs-tabs", { value: this.filter, onBsChange: (ev) => this.onFilter(ev.detail.value) }, filters.map(f => (h("bs-tab", { key: f.value, value: f.value, selected: f.value === this.filter }, f.label)))))), visible.length === 0 ? (h("p", { class: "bs-wn__empty" }, this.emptyLabel)) : (h("div", { part: "entries", class: "bs-wn__entries" }, visible.map((e, i) => (h("bs-whats-new-entry", { key: e.id, part: "entry", tag: e.tag, tagColor: e.tagColor, date: e.date, unread: !!e.unread, heading: e.heading, headingLevel: Math.min(6, (Number(this.headingLevel) || 2) + 1), description: e.description, actionLabel: e.actionLabel, divider: i < visible.length - 1 || !!this.releaseNotesUrl, onBsAction: () => this.bsEntryAction.emit({ id: e.id }) }, e.image && h("img", { slot: "image", src: e.image, alt: "" })))))), this.releaseNotesUrl && (h("div", { class: "bs-wn__footer" }, h("a", { part: "release-notes", class: "bs-wn__link", href: this.releaseNotesUrl }, h("span", { class: "bs-wn__link-text" }, this.releaseNotesLabel), h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M7 17L17 7" }), h("path", { d: "M8 7H17V16" }))))))));
+    }
+    onFilter(value) {
+        if (value === this.filter)
+            return;
+        this.filter = value;
+        this.bsFilterChange.emit({ value });
+    }
+    renderAnnouncement() {
+        const step = this.total > 0 ? this.stepLabel.replace('{step}', String(this.step)).replace('{total}', String(this.total)) : '';
+        const points = this.points ?? [];
+        return (h("bs-card", { part: "container", class: "bs-wn bs-wn--announcement", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-wn__announcement" }, this.renderClose(), h("div", { part: "hero", class: { 'bs-wn__hero': true, 'bs-wn__hero--visible': !!this.image || this.hasHeroSlot } }, this.image && h("img", { src: this.image, alt: "" }), h("slot", { name: "hero", onSlotchange: (ev) => (this.hasHeroSlot = ev.target.assignedNodes().length > 0) })), h("div", { class: "bs-wn__body" }, this.renderTag(), this.heading_(this.heading ?? '', 'bs-wn__heading--lg'), points.length > 0 && (h("ul", { part: "points", class: "bs-wn__points" }, points.map(p => (h("li", null, h("svg", { class: "bs-wn__check", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M3.5 9.5L7 13L14.5 5" })), h("span", null, p)))))), h("div", { class: "bs-wn__announcement-footer" }, h("span", { part: "step", class: "bs-wn__step" }, step), h("div", { class: "bs-wn__actions" }, this.secondaryLabel && (h("bs-button", { part: "secondary", class: "bs-wn__text-button bs-wn__text-button--md", variant: "subtle", onClick: () => this.bsSecondary.emit() }, this.secondaryLabel)), this.primaryLabel && (h("bs-button", { part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, this.primaryLabel))))))));
+    }
+    renderTeaser() {
+        return (h("bs-card", { part: "container", class: "bs-wn bs-wn--teaser", surface: "base", role: "region", "aria-labelledby": "heading" }, h("div", { class: "bs-wn__teaser" }, h("div", { class: "bs-wn__teaser-row" }, this.renderTag(), this.date && (h("span", { part: "date", class: "bs-wn__date" }, this.date)), h("span", { class: "bs-wn__spacer" }), this.renderClose(true)), this.heading_(this.heading ?? '', 'bs-wn__heading--sm'), this.description && (h("p", { part: "description", class: "bs-wn__description" }, this.description)), this.actionLabel && (h("bs-button", { part: "action", class: "bs-wn__text-button bs-wn__link-button", variant: "subtle", size: "sm", onClick: () => this.bsOpen.emit() }, this.actionLabel, h("svg", { slot: "end-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { d: "M5 12H19" }), h("path", { d: "M13 6L19 12L13 18" })))))));
+    }
+    render() {
+        switch (this.type) {
+            case 'announcement':
+                return this.renderAnnouncement();
+            case 'teaser':
+                return this.renderTeaser();
+            default:
+                return this.renderFeed();
+        }
+    }
+    static get is() { return "bs-whats-new"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-whats-new.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-whats-new.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsWhatsNewType",
+                    "resolved": "\"announcement\" | \"feed\" | \"teaser\"",
+                    "references": {
+                        "BsWhatsNewType": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-whats-new/bs-whats-new.tsx",
+                            "id": "src/components/bs-whats-new/bs-whats-new.tsx::BsWhatsNewType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which form: `feed`, `announcement` or `teaser`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'feed'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading. Defaults to \"What's new\" for `feed`; set it for the other forms."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "headingLevel": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML heading level, 1-6."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "2"
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "entries": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsWhatsNewItem[]",
+                    "resolved": "BsWhatsNewItem[]",
+                    "references": {
+                        "BsWhatsNewItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-whats-new/bs-whats-new.tsx",
+                            "id": "src/components/bs-whats-new/bs-whats-new.tsx::BsWhatsNewItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The updates in the feed: `[{ id, category?, tag?, tagColor?, date?, unread?, heading, description?,\nactionLabel?, image? }]`. Must be set as a JS property, not an HTML attribute -- see CONVENTIONS.md's\nnon-string props rule."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "filters": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsWhatsNewFilter[]",
+                    "resolved": "BsWhatsNewFilter[]",
+                    "references": {
+                        "BsWhatsNewFilter": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-whats-new/bs-whats-new.tsx",
+                            "id": "src/components/bs-whats-new/bs-whats-new.tsx::BsWhatsNewFilter"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The filter tabs: `[{ value, label }]`. `value: \"all\"` shows every entry; any other value shows the\nentries whose `category` matches. Defaults to All, New Features, Improvements and Fixes\n(categories `features`, `improvements`, `fixes`). Set `[]` for no tabs."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n    { value: 'all', label: 'All' },\n    { value: 'features', label: 'New Features' },\n    { value: 'improvements', label: 'Improvements' },\n    { value: 'fixes', label: 'Fixes' },\n  ]"
+            },
+            "filter": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected filter's `value`. Mutable: choosing a tab updates it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "filter",
+                "defaultValue": "'all'"
+            },
+            "markAllReadLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the \"Mark all as read\" button, shown while any entry is `unread`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mark-all-read-label",
+                "defaultValue": "'Mark all as read'"
+            },
+            "releaseNotesLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the release notes link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "release-notes-label",
+                "defaultValue": "'See all release notes'"
+            },
+            "releaseNotesUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the full release notes. The link is only shown when this is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "release-notes-url"
+            },
+            "emptyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown when the selected filter has no entries."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-label",
+                "defaultValue": "'Nothing new here yet.'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag text (`announcement`, `teaser`), e.g. \"New feature\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "tagColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsWhatsNewEntryTagColor",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsWhatsNewEntryTagColor": {
+                            "location": "import",
+                            "path": "../bs-whats-new-entry/bs-whats-new-entry",
+                            "id": "src/components/bs-whats-new-entry/bs-whats-new-entry.tsx::BsWhatsNewEntryTagColor",
+                            "referenceLocation": "BsWhatsNewEntryTagColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour of the tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-color",
+                "defaultValue": "'info'"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the hero image (`announcement`). Or slot your own into `hero`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
+            },
+            "points": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The bullet points (`announcement`). Must be set as a JS property -- see CONVENTIONS.md."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current step, 1-based (`announcement`). Used with `total`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "1"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of announcements in the sequence (`announcement`). The step label is hidden when 0."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total",
+                "defaultValue": "0"
+            },
+            "stepLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template of the step label; `{step}` and `{total}` are replaced."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step-label",
+                "defaultValue": "'{step} of {total}'"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the secondary button (`announcement`). Empty hides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label",
+                "defaultValue": "'Remind me later'"
+            },
+            "primaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the primary button (`announcement`). Empty hides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-label",
+                "defaultValue": "'Next'"
+            },
+            "date": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The date as text (`teaser`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "date"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The line under the heading (`teaser`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the link (`teaser`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-label",
+                "defaultValue": "'Open What\u2019s new'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasHeroSlot": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsMarkAllRead",
+                "name": "bsMarkAllRead",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when \"Mark all as read\" is pressed (`feed`). Update the entries' `unread` yourself."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsEntryAction",
+                "name": "bsEntryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when an entry's action link is pressed (`feed`): `{ id }`."
+                },
+                "complexType": {
+                    "original": "{ id: string }",
+                    "resolved": "{ id: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsFilterChange",
+                "name": "bsFilterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the user picks a filter tab (`feed`): `{ value }`."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsPrimary",
+                "name": "bsPrimary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the primary button (`announcement`) is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSecondary",
+                "name": "bsSecondary",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the secondary button (`announcement`) is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsOpen",
+                "name": "bsOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the teaser's link is pressed (`teaser`) -- open the feed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}