@brandsync/wc 1.10.0 → 1.12.0

package/dist/types/components/bs-qr-code/bs-qr-code.d.ts

@@ -0,0 +1,124 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsQrCodeType = 'default' | 'payment';
+export type BsQrCodeSize = 'sm' | 'md' | 'lg';
+export type BsQrCodeState = 'default' | 'loading' | 'error' | 'expired' | 'scanned';
+/**
+ * A block for sharing a link or taking a payment by QR code: a heading, the code on a white quiet
+ * zone, the URL (or the amount, for payments) as text, an optional expiry chip, and Download and
+ * Copy link actions. Matches the Figma "QR code" component (3 sizes x 2 types x 5 states, plus the
+ * "with logo" variant).
+ *
+ * **This component draws a code, it doesn't encode one.** Generate the real code in your product
+ * with a QR library and hand it over either as a `matrix` (a square `boolean[][]`, `true` = dark
+ * module) or as your own element in the `code` slot (an `<img>`, `<svg>` or `<canvas>`).
+ *
+ * The code always sits on a white quiet zone with black modules, in dark mode too -- scanners need
+ * the contrast.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-button` (Download, Copy link, Retry, Refresh), `bs-progress` (the loading spinner), `bs-chip-informative` (the expiry chip), `bs-icon-button` (the close button).
+ *
+ * ## When to use
+ * - Sharing a link to an order, document or page that someone will open on a phone.
+ * - Taking a payment with an amount (`type="payment"`).
+ *
+ * ## When not to use
+ * - Encoding long text blobs -- a QR code that dense is hard to scan at the sizes here.
+ *
+ * ## States
+ * `loading` (generating the code), `error` (couldn't generate it; Retry), `expired` (Refresh) and
+ * `scanned` (done: "Scanned", or "Payment received" for payments). Download and Copy link are disabled
+ * in every state but `default`, and hidden once `scanned`.
+ *
+ * @slot code - The code itself (`<img>`, `<svg>`, `<canvas>`), used instead of `matrix`.
+ * @slot logo - Optional logo centred over the code. Use a high error-correction level when you
+ *   generate the code so it still scans.
+ * @part container - The outer card.
+ * @part close - The close button (when `closable`).
+ * @part head - The heading + description.
+ * @part title - The heading.
+ * @part description - The description under the heading.
+ * @part qr - The bordered white box holding the code and any state overlay.
+ * @part code - The white square the code is drawn on.
+ * @part logo - The wrapper around the logo.
+ * @part overlay - The loading/error/expired/scanned panel covering the code.
+ * @part url - The URL chip (`type="default"`).
+ * @part amount - The amount block (`type="payment"`).
+ * @part expiry - The expiry chip.
+ * @part actions - The Download/Copy row.
+ * @part download - The Download button.
+ * @part copy - The Copy link button.
+ */
+export declare class BsQrCode {
+    /** `default` shows the URL under the code; `payment` shows the amount instead. */
+    type: BsQrCodeType;
+    /** Card size: `sm`, `md` (default) or `lg`. */
+    size: BsQrCodeSize;
+    /** `default`, or one of the overlay states: `loading`, `error`, `expired`, `scanned`. */
+    state: BsQrCodeState;
+    /** Heading text. */
+    heading: string;
+    /** Line under the heading. */
+    description?: string;
+    /** The link shown as text under the code (`type="default"`), and copied by Copy link. */
+    url?: string;
+    /** The amount shown under the code (`type="payment"`), e.g. `"148,00 kr"`. */
+    amount?: string;
+    /** Small label above the amount. */
+    amountLabel: string;
+    /** Text of the expiry chip, e.g. `"Expires in 04:59"`. No chip when empty. */
+    expiry?: string;
+    /** The code as a square matrix of modules, `true` = dark. Must be set as a JS property, not an
+     * HTML attribute -- see CONVENTIONS.md's non-string props rule. Ignored when the `code` slot is
+     * used. */
+    matrix?: boolean[][];
+    /** Accessible name for the code image, e.g. `"QR code for order SO-10482"`. Applies to `matrix`;
+     * give a slotted `<img>` its own `alt`. */
+    codeLabel: string;
+    /** Shows a close button in the corner. */
+    closable: boolean;
+    /** Hides the Download and Copy link row. */
+    hideActions: boolean;
+    /** Hides the Download button. */
+    hideDownload: boolean;
+    /** Hides the Copy link button. */
+    hideCopy: boolean;
+    /** Label of the Download button. */
+    downloadLabel: string;
+    /** Label of the Copy link button. */
+    copyLabel: string;
+    /** Label of the Retry button (`error`). */
+    retryLabel: string;
+    /** Label of the Refresh button (`expired`). */
+    refreshLabel: string;
+    /** Text in the `loading` overlay. */
+    loadingLabel: string;
+    /** Text in the `error` overlay. */
+    errorLabel: string;
+    /** Text in the `expired` overlay. */
+    expiredLabel: string;
+    /** Text in the `scanned` overlay. Defaults to "Payment received" for `type="payment"` and
+     * "Scanned" otherwise. */
+    scannedLabel?: string;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    /** Fires when Download is pressed. The component doesn't render a file; produce it from the code
+     * you generated. */
+    bsDownload: EventEmitter<void>;
+    /** Fires when Copy link is pressed, after the component tries to put `url` on the clipboard.
+     * `{ url }` is the `url` prop. */
+    bsCopy: EventEmitter<{
+        url?: string;
+    }>;
+    /** Fires when Retry is pressed (`error` state). Set `state` back to `loading` yourself. */
+    bsRetry: EventEmitter<void>;
+    /** Fires when Refresh is pressed (`expired` state). Set `state` back to `loading` yourself. */
+    bsRefresh: EventEmitter<void>;
+    /** Fires when the close button is pressed. */
+    bsClose: EventEmitter<void>;
+    /** True while something is assigned to the `logo` slot, so the white plate behind it only shows then. */
+    hasLogo: boolean;
+    private onCopy;
+    private renderMatrix;
+    private renderOverlay;
+    render(): any;
+}

package/dist/types/components/bs-qr-code/bs-qr-code.stories.d.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsQrCodeArgs {
+    type: 'default' | 'payment';
+    size: 'sm' | 'md' | 'lg';
+    state: 'default' | 'loading' | 'error' | 'expired' | 'scanned';
+    heading: string;
+    description: string;
+    url: string;
+    amount: string;
+    expiry: string;
+    closable: boolean;
+    hideActions: boolean;
+}
+declare const meta: Meta<BsQrCodeArgs>;
+export default meta;
+type Story = StoryObj<BsQrCodeArgs>;
+export declare const Default: Story;
+export declare const Payment: Story;
+export declare const WithLogo: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const Loading: Story;
+export declare const Error: Story;
+export declare const Expired: Story;
+export declare const Scanned: Story;
+export declare const PaymentReceived: Story;
+export declare const WithExpiry: Story;
+export declare const Closable: Story;

package/dist/types/components/bs-session-timeout/bs-session-timeout.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-session-timeout/bs-session-timeout.d.ts

@@ -0,0 +1,141 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsSessionTimeoutType = 'warning' | 'signed-out' | 'confirm-identity';
+export interface BsSessionTimeoutAlternative {
+    /** Identifier echoed back in `bsAlternative`. */
+    id: string;
+    label: string;
+    /** Built-in glyph: `fingerprint` (default) or `key`. */
+    icon?: 'fingerprint' | 'key';
+}
+/**
+ * The three moments around an expiring session, as one card. Matches the Figma "Session timeout"
+ * component's three types:
+ *
+ * - `warning` -- "You'll be signed out soon": a live countdown with a draining bar, an optional
+ *   "your work is saved" note, and Sign out now / Stay signed in.
+ * - `signed-out` -- "You've been signed out": who was signed in, with Sign in again and Use a different
+ *   account.
+ * - `confirm-identity` -- "Confirm it's you": a fresh password check before a sensitive action, with
+ *   passkey / BankID alternatives and Cancel.
+ *
+ * The component never signs anyone in or out. It shows the state and emits `bsPrimary`, `bsSecondary`,
+ * `bsAlternative`, `bsCancel` and `bsExpire`; your app talks to the identity provider.
+ *
+ * **Built from:** `bs-card` (the surface), `bs-icon-tile` (the icon), `bs-button` (the actions),
+ * `bs-progress-linear` (the countdown bar), `bs-avatar` (the signed-in account), `bs-input` (the
+ * password field).
+ *
+ * ## When to use
+ * - Warning someone, before it happens, that an inactivity timeout is about to end their session.
+ * - Telling someone their session ended, and letting them pick up where they left off.
+ * - Asking for a fresh credential before a sensitive action.
+ *
+ * ## When not to use
+ * - A first-time sign-in page -- this assumes there was a session.
+ * - Anything that is not about the session or the user's identity -- use `bs-dialog`.
+ *
+ * ## Accessibility
+ * The card is a labelled region. The countdown is a `timer` and is *not* announced every second; a polite
+ * live region announces the time left at 60, 30 and 10 seconds instead. Wrap the card in your own modal
+ * (`bs-dialog`) if the warning must trap focus.
+ *
+ * @slot icon - Replaces the default glyph in the icon tile. Draw it with `currentColor`.
+ * @part container - The card.
+ * @part art - The icon tile.
+ * @part heading - The heading.
+ * @part description - The paragraph under it.
+ * @part countdown - The countdown box (`warning`).
+ * @part time - The big `m:ss` time (`warning`).
+ * @part saved - The "work is saved" note (`warning`).
+ * @part account - The signed-in account summary (`signed-out`).
+ * @part password - The password field (`confirm-identity`).
+ * @part divider - The "or" divider (`confirm-identity`).
+ * @part alternatives - The alternative sign-in buttons (`confirm-identity`).
+ * @part actions - The action buttons.
+ * @part primary - The primary button.
+ * @part secondary - The secondary button.
+ * @part cancel - The Cancel button (`confirm-identity`).
+ */
+export declare class BsSessionTimeout {
+    el: HTMLElement;
+    /** Which moment: `warning`, `signed-out` or `confirm-identity`. */
+    type: BsSessionTimeoutType;
+    /** Heading. Defaults per `type`. */
+    heading?: string;
+    /** HTML heading level, 1-6. */
+    headingLevel: number;
+    /** Paragraph under the heading. Defaults per `type`. */
+    description?: string;
+    /** Hides the icon tile. */
+    hideIcon: boolean;
+    /** Label of the primary button. Defaults per `type` ("Stay signed in", "Sign in again", "Confirm"). */
+    primaryLabel?: string;
+    /** Label of the secondary button. Defaults per `type` ("Sign out now", "Use a different account"); none for
+     * `confirm-identity`. Set to an empty string to hide it. */
+    secondaryLabel?: string;
+    /** Seconds left before the session ends (`warning`). Mutable: with `countdown` the component
+     * decrements it itself; otherwise drive it from your own timer. */
+    secondsLeft: number;
+    /** Length of the warning window in seconds, for the bar: it shows `secondsLeft / totalSeconds`.
+     * Defaults to the `secondsLeft` it first had. */
+    totalSeconds: number;
+    /** Count `secondsLeft` down once a second (`warning`), firing `bsExpire` at zero. */
+    countdown: boolean;
+    /** Text next to the time while a minute or more is left. */
+    timeLeftLabel: string;
+    /** Text next to the time under a minute. */
+    secondsLeftLabel: string;
+    /** Note under the countdown, e.g. "Your draft of INV-2041 is saved automatically." Hidden when empty. */
+    savedMessage?: string;
+    /** Name of the account that was signed in (`signed-out`). */
+    accountName?: string;
+    /** Email of the account that was signed in (`signed-out`). */
+    accountEmail?: string;
+    /** Initials in the avatar (`signed-out`). Derived from `accountName` when not set. */
+    accountInitials?: string;
+    /** Label of the password field. */
+    passwordLabel: string;
+    /** Error shown under the password field, e.g. after a wrong password. */
+    passwordError?: string;
+    /** Label of the divider between the password and the alternatives. */
+    dividerLabel: string;
+    /** Other ways to confirm, shown as outlined buttons under the divider: `[{ id, label, icon? }]`.
+     * Defaults to a passkey and a BankID button. Must be set as a JS property, not an HTML attribute --
+     * see CONVENTIONS.md's non-string props rule. Set `[]` to hide them. */
+    alternatives: BsSessionTimeoutAlternative[];
+    /** Label of the Cancel button (`confirm-identity`). Set to an empty string to hide it. */
+    cancelLabel: string;
+    /** Fires when the primary button is pressed. For `confirm-identity` the detail is
+     * `{ password }`; otherwise it is empty. */
+    bsPrimary: EventEmitter<{
+        password?: string;
+    } | void>;
+    /** Fires when the secondary button is pressed. */
+    bsSecondary: EventEmitter<void>;
+    /** Fires when an alternative method is pressed (`confirm-identity`): `{ id }`. */
+    bsAlternative: EventEmitter<{
+        id: string;
+    }>;
+    /** Fires when Cancel is pressed (`confirm-identity`). */
+    bsCancel: EventEmitter<void>;
+    /** Fires once when `countdown` reaches zero. */
+    bsExpire: EventEmitter<void>;
+    password: string;
+    announcement: string;
+    initialTotal: number;
+    private timer?;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    onTimerInputsChange(): void;
+    private stopTimer;
+    private syncTimer;
+    private tick;
+    private get defaults();
+    private renderHeading;
+    private renderWarning;
+    private renderAccount;
+    private renderConfirm;
+    render(): any;
+}

package/dist/types/components/bs-session-timeout/bs-session-timeout.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsSessionTimeoutArgs {
+    type: 'warning' | 'signed-out' | 'confirm-identity';
+    secondsLeft: number;
+    totalSeconds: number;
+    countdown: boolean;
+    savedMessage: string;
+    accountName: string;
+    accountEmail: string;
+    passwordError: string;
+}
+declare const meta: Meta<BsSessionTimeoutArgs>;
+export default meta;
+type Story = StoryObj<BsSessionTimeoutArgs>;
+export declare const Warning: Story;
+export declare const LiveCountdown: Story;
+export declare const SignedOut: Story;
+export declare const ConfirmIdentity: Story;
+export declare const WrongPassword: Story;

package/dist/types/components/bs-snackbar/bs-snackbar.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { BsButtonVariant } from '../bs-button/bs-button/bs-button';
 export type BsSnackbarVariant = 'default' | 'info' | 'warning' | 'success' | 'error';
 /**
  * A transient status bar for confirming the result of an action (e.g. "Files uploaded
@@ -40,6 +41,12 @@ export declare class BsSnackbar {
     /** Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to
      * render no action button at all -- its presence, not a boolean flag, is what shows it. */
     actionLabel?: string;
+    /** Variant of the action button. Defaults to the one that matches `variant` (outlined for `default`).
+     * Use `subtle` for a plain text action; colour it with `--bs-button-subtle-color` on `::part(action)`. */
+    actionVariant?: BsButtonVariant;
+    /** Hides the close button, for a confirmation that goes away on its own or whose only control is
+     * the action. A snackbar with no way to dismiss it must be removed by the consumer. */
+    hideClose: boolean;
     /** Fires when the action button is clicked. Ignored/never fires if `actionLabel` isn't set. */
     bsAction: EventEmitter<void>;
     /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --

package/dist/types/components/bs-timepicker/bs-timepicker.d.ts

@@ -16,6 +16,8 @@ export interface BsTimepickerChange {
  * The picker renders inline at a fixed width; to show it as a popover, put it in your own overlay
  * and close that overlay from `bsChange`/`bsCancel`.
  *
+ * **Built from:** `bs-card` (the surface), `bs-switch` (the 24h toggle), `bs-input` (the AM/PM dropdown), `bs-button` (Cancel/Confirm).
+ *
  * ## When to use
  * - Picking a time of day where the user steps through hours and minutes.
  *

package/dist/types/components/bs-whats-new/bs-whats-new.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-whats-new/bs-whats-new.d.ts

@@ -0,0 +1,147 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BsWhatsNewEntryTagColor } from '../bs-whats-new-entry/bs-whats-new-entry';
+export type BsWhatsNewType = 'feed' | 'announcement' | 'teaser';
+export interface BsWhatsNewItem {
+    /** Identifier echoed back in `bsEntryAction`. */
+    id: string;
+    /** Which filter tab this entry belongs to (matches a `filters[].value`). */
+    category?: string;
+    tag?: string;
+    tagColor?: BsWhatsNewEntryTagColor;
+    /** The date as text, formatted for the reader. */
+    date?: string;
+    unread?: boolean;
+    heading: string;
+    description?: string;
+    actionLabel?: string;
+    /** URL of an image shown above the title. */
+    image?: string;
+}
+export interface BsWhatsNewFilter {
+    value: string;
+    label: string;
+}
+/**
+ * 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 declare class BsWhatsNew {
+    /** Which form: `feed`, `announcement` or `teaser`. */
+    type: BsWhatsNewType;
+    /** Heading. Defaults to "What's new" for `feed`; set it for the other forms. */
+    heading?: string;
+    /** HTML heading level, 1-6. */
+    headingLevel: number;
+    /** Shows a close button. */
+    closable: boolean;
+    /** Accessible name of the close button. */
+    closeLabel: string;
+    /** 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: BsWhatsNewItem[];
+    /** 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: BsWhatsNewFilter[];
+    /** The selected filter's `value`. Mutable: choosing a tab updates it. */
+    filter: string;
+    /** Label of the "Mark all as read" button, shown while any entry is `unread`. */
+    markAllReadLabel: string;
+    /** Text of the release notes link. */
+    releaseNotesLabel: string;
+    /** URL of the full release notes. The link is only shown when this is set. */
+    releaseNotesUrl?: string;
+    /** Text shown when the selected filter has no entries. */
+    emptyLabel: string;
+    /** Tag text (`announcement`, `teaser`), e.g. "New feature". */
+    tag?: string;
+    /** Colour of the tag. */
+    tagColor: BsWhatsNewEntryTagColor;
+    /** URL of the hero image (`announcement`). Or slot your own into `hero`. */
+    image?: string;
+    /** The bullet points (`announcement`). Must be set as a JS property -- see CONVENTIONS.md. */
+    points: string[];
+    /** Current step, 1-based (`announcement`). Used with `total`. */
+    step: number;
+    /** Number of announcements in the sequence (`announcement`). The step label is hidden when 0. */
+    total: number;
+    /** Template of the step label; `{step}` and `{total}` are replaced. */
+    stepLabel: string;
+    /** Label of the secondary button (`announcement`). Empty hides it. */
+    secondaryLabel: string;
+    /** Label of the primary button (`announcement`). Empty hides it. */
+    primaryLabel: string;
+    /** The date as text (`teaser`). */
+    date?: string;
+    /** The line under the heading (`teaser`). */
+    description?: string;
+    /** Label of the link (`teaser`). */
+    actionLabel: string;
+    /** Fires when "Mark all as read" is pressed (`feed`). Update the entries' `unread` yourself. */
+    bsMarkAllRead: EventEmitter<void>;
+    /** Fires when an entry's action link is pressed (`feed`): `{ id }`. */
+    bsEntryAction: EventEmitter<{
+        id: string;
+    }>;
+    /** Fires when the user picks a filter tab (`feed`): `{ value }`. */
+    bsFilterChange: EventEmitter<{
+        value: string;
+    }>;
+    /** Fires when the close button is pressed. */
+    bsClose: EventEmitter<void>;
+    /** Fires when the primary button (`announcement`) is pressed. */
+    bsPrimary: EventEmitter<void>;
+    /** Fires when the secondary button (`announcement`) is pressed. */
+    bsSecondary: EventEmitter<void>;
+    /** Fires when the teaser's link is pressed (`teaser`) -- open the feed. */
+    bsOpen: EventEmitter<void>;
+    /** True while something is assigned to the `hero` slot, so the hero area only exists then. */
+    hasHeroSlot: boolean;
+    private heading_;
+    private renderClose;
+    private renderTag;
+    private renderFeed;
+    private onFilter;
+    private renderAnnouncement;
+    private renderTeaser;
+    render(): any;
+}

package/dist/types/components/bs-whats-new/bs-whats-new.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsWhatsNewArgs {
+    type: 'feed' | 'announcement' | 'teaser';
+    heading: string;
+    closable: boolean;
+    releaseNotesUrl: string;
+}
+declare const meta: Meta<BsWhatsNewArgs>;
+export default meta;
+type Story = StoryObj<BsWhatsNewArgs>;
+export declare const Feed: Story;
+export declare const Announcement: Story;
+export declare const Teaser: Story;
+export declare const Interactive: Story;

package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BsWhatsNewEntryTagColor = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+/**
+ * One update in a "What's new" list: a tag ("New feature", "Improvement", "Fix"), a date, an unread dot,
+ * an optional image, a title, a short description and an optional action link ("Try it"). Matches the Figma
+ * "What's new / Entry" component. It is a plain block of content -- no card -- so it can sit in a feed
+ * (`bs-whats-new`), a list, or a page of release notes.
+ *
+ * **Built from:** `bs-chip-informative` (the tag) and `bs-button` (the action).
+ *
+ * ## When to use
+ * - Announcing a change to the product, with enough detail to know whether it matters.
+ *
+ * ## When not to use
+ * - A message about the user's own data or an action they just took -- use `bs-snackbar` or `bs-toast`.
+ *
+ * @slot image - An image (or any media) shown above the title. Nothing is shown when empty.
+ * @part meta - The row with the tag, date and unread dot.
+ * @part tag - The tag chip.
+ * @part date - The date.
+ * @part unread - The unread dot.
+ * @part image - The wrapper around the image slot.
+ * @part heading - The title.
+ * @part description - The description.
+ * @part action - The action button.
+ * @part divider - The rule under the entry.
+ */
+export declare class BsWhatsNewEntry {
+    /** The tag text, e.g. "New feature". No tag when empty. */
+    tag?: string;
+    /** Colour of the tag: `info` (default), `success`, `warning`, `error` or `neutral`. */
+    tagColor: BsWhatsNewEntryTagColor;
+    /** The date as text, already formatted for the reader (e.g. "24.09.2026"). */
+    date?: string;
+    /** Shows a dot after the date for an update the user hasn't seen. */
+    unread: boolean;
+    /** Title. */
+    heading?: string;
+    /** HTML heading level for the title, 1-6. */
+    headingLevel: number;
+    /** Short description under the title. */
+    description?: string;
+    /** Label of the action link (e.g. "Try it"). No action when empty. */
+    actionLabel?: string;
+    /** Draws a rule under the entry, to separate it from the next one. */
+    divider: boolean;
+    /** Visually hidden text for the unread dot. */
+    unreadLabel: string;
+    /** Fires when the action link is pressed. */
+    bsAction: EventEmitter<void>;
+    hasImage: boolean;
+    render(): any;
+}

package/dist/types/components/bs-whats-new-entry/bs-whats-new-entry.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsWhatsNewEntryArgs {
+    tag: string;
+    tagColor: 'info' | 'success' | 'warning' | 'error' | 'neutral';
+    date: string;
+    unread: boolean;
+    heading: string;
+    description: string;
+    actionLabel: string;
+    divider: boolean;
+}
+declare const meta: Meta<BsWhatsNewEntryArgs>;
+export default meta;
+type Story = StoryObj<BsWhatsNewEntryArgs>;
+export declare const Default: Story;
+export declare const WithImageAndAction: Story;
+export declare const Fix: Story;
+export declare const TitleOnly: Story;