@brandsync/wc 1.21.0 → 1.22.1

package/dist/types/components/bs-chip/bs-chip-informative/bs-chip-informative.d.ts

@@ -1,22 +1,30 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
 export type BsChipInformativeColor = 'neutral' | 'warning' | 'success' | 'info' | 'error';
 export type BsChipInformativeSize = 'sm' | 'md' | 'lg';
 /**
- * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
- * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
- * -- no click/select/remove behavior, no hover/focus/pressed states.
+ * A pill-shaped label for conveying a category or status at a glance, optionally paired with a
+ * leading icon. By default it is purely informational -- no click/select behavior, no
+ * hover/focus/pressed states. Two opt-ins cover what used to need a separate `bs-tag`: `removable`
+ * adds a remove button (`bsRemove`), and `href` turns the label into a link.
  *
  * ## When to use
  * - Conveying a category or status inline with other content, with more color options and an
  *   optional icon than `bs-badge` offers.
+ * - Metadata on a record (topics, keywords, owners) that can be removed one by one (`removable`) or
+ *   that leads to a filtered view or detail page (`href`).
  *
  * ## When not to use
- * - Anything clickable/selectable -- use `bs-chip-filter`.
+ * - Toggling a filter on and off -- use `bs-chip-filter`; entering free-text values -- use
+ *   `bs-chip-input`.
  * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
  *
+ * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
+ *
  * @slot - Default slot: the chip's label content.
  * @slot icon - Optional leading icon.
  * @part icon - The icon wrapper element.
- * @part label - The text label element.
+ * @part label - The text label element (a link when `href` is set).
+ * @part remove - The remove button (`bs-icon-button`), only when `removable`.
  */
 export declare class BsChipInformative {
     el: HTMLElement;
@@ -31,10 +39,26 @@ export declare class BsChipInformative {
     /** Overrides `color` with the disabled token set, regardless of its value. Reflected so
      * `:host([disabled])` can apply it in CSS. */
     disabled: boolean;
+    /** Shows a remove button that emits `bsRemove`. The consumer removes the element. Off by default,
+     * so a plain chip stays non-interactive. */
+    removable: boolean;
+    /** Turns the label into a link to this URL. Ignored while `disabled`. */
+    href?: string;
+    /** Link target, only used with `href`. `_blank` also sets `rel="noopener noreferrer"`. */
+    target?: string;
+    /** Prefix of the remove button's accessible name ("Remove {label}"). */
+    removeLabel: string;
+    /** Fires when the remove button is activated, only when `removable`. No payload; the consumer
+     * removes the chip. Move focus somewhere sensible in your handler -- it is lost with the element. */
+    bsRemove: EventEmitter<void>;
     /** Tracks whether the `icon` slot has assigned content, so the icon/label gap and left-edge
      * padding only apply when there's actually a leading icon. */
     hasIcon: boolean;
+    /** The label's text, used for the remove button's accessible name. */
+    labelText: string;
     componentWillLoad(): void;
+    private readLabel;
+    private onRemove;
     private hasSlottedContent;
     private onIconSlotchange;
     render(): any;

package/dist/types/components/bs-chip/bs-chip-informative/bs-chip-informative.stories.d.ts

@@ -16,6 +16,8 @@ export declare const Info: Story;
 export declare const Error: Story;
 export declare const WithIcon: Story;
 export declare const Disabled: Story;
+export declare const Removable: Story;
+export declare const AsLink: Story;
 export declare const Small: Story;
 export declare const Medium: Story;
 export declare const AllVariants: Story;

package/dist/types/components/bs-data-table/bs-data-table.d.ts

@@ -46,6 +46,8 @@ export declare class BsDataTable {
     sortDirection: 'asc' | 'desc';
     /** Accessible name of the select-all checkbox in the header (when `selectable`). */
     selectAllLabel: string;
+    /** Accessible name of each row's checkbox (when `selectable`). */
+    selectRowLabel: string;
     selectable: boolean;
     /** Alternates the row background (even rows use `--bs-data-table-stripe-bg`) so wide tables are
      * easier to scan. Follows dark mode through the token. Row hover still wins. */

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

@@ -122,6 +122,9 @@ export declare class BsInput {
     countryLabel: string;
     /** Number of cells for `type="pin"`. */
     length: number;
+    /** `type="pin"`: accessible name of each cell, with `{n}` replaced by its 1-based position and `{total}` by `length`. The
+     * first cell keeps the field's visible `label` as its name when there is one. */
+    pinCellLabel: string;
     /** `type="combobox"`: shows a loading indicator and, while no options match, a loading message
      * in the popup instead of "no results". Use while fetching `options` asynchronously. */
     loading: boolean;

package/dist/types/components/bs-progress/bs-progress.stories.d.ts

@@ -6,6 +6,7 @@ interface BsProgressArgs {
     strokeWidth: BsProgressStrokeWidth;
     value: number;
     showLabel: boolean;
+    ariaLabel: string;
 }
 declare const meta: Meta<BsProgressArgs>;
 export default meta;

package/dist/types/components/bs-progress-linear/bs-progress-linear.stories.d.ts

@@ -6,6 +6,7 @@ interface BsProgressLinearArgs {
     value: number;
     showLabel: boolean;
     label: string;
+    ariaLabel: string;
 }
 declare const meta: Meta<BsProgressLinearArgs>;
 export default meta;

package/dist/types/components/bs-split-pane/bs-split-pane.d.ts

@@ -60,12 +60,15 @@ export declare class BsSplitPane {
     sizes: Array<number | undefined>;
     draggingIndex: number;
     private observer?;
+    private sizeObserver?;
     private dragStart?;
     /** Toggles `collapsed` and emits `bsCollapsedChange`. */
     toggleCollapsed(): Promise<void>;
     componentWillLoad(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    componentDidRender(): void;
+    private updateScrollable;
     private countPanes;
     private isRtl;
     private axisSize;

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

@@ -2,6 +2,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export type BsTagColor = 'neutral' | 'info' | 'success' | 'warning' | 'error';
 export type BsTagSize = 'sm' | 'md' | 'lg';
 /**
+ * @deprecated Use `bs-chip-informative` with `removable` and/or `href` instead -- it has the same colours and
+ * sizes plus the remove button and link option, so a separate tag component is redundant. `bs-tag` keeps
+ * working unchanged and will be removed in a later major version.
+ *
  * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
  * neutral or coloured, optionally removable, and optionally a link.
  *

package/dist/types/components/bs-toggle-button/bs-toggle-button.d.ts

@@ -41,6 +41,7 @@ export declare class BsToggleButton {
     bsChange: EventEmitter<boolean>;
     hasLabel: boolean;
     hasIcon: boolean;
+    componentWillLoad(): void;
     private onIconSlotchange;
     private onLabelSlotchange;
     private onClick;

package/dist/types/components/tokens/tokens.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const BrandScale: Story;
+export declare const Surfaces: Story;
+export declare const SemanticColors: Story;
+export declare const TextColors: Story;
+export declare const Spacing: Story;
+export declare const BorderRadius: Story;
+export declare const Typography: Story;
+export declare const ZIndex: Story;

package/dist/types/components.d.ts

@@ -1623,15 +1623,20 @@ export namespace Components {
         "size": BsChipFilterSize;
     }
     /**
-     * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
-     * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
-     * -- no click/select/remove behavior, no hover/focus/pressed states.
+     * A pill-shaped label for conveying a category or status at a glance, optionally paired with a
+     * leading icon. By default it is purely informational -- no click/select behavior, no
+     * hover/focus/pressed states. Two opt-ins cover what used to need a separate `bs-tag`: `removable`
+     * adds a remove button (`bsRemove`), and `href` turns the label into a link.
      * ## When to use
      * - Conveying a category or status inline with other content, with more color options and an
      *   optional icon than `bs-badge` offers.
+     * - Metadata on a record (topics, keywords, owners) that can be removed one by one (`removable`) or
+     *   that leads to a filtered view or detail page (`href`).
      * ## When not to use
-     * - Anything clickable/selectable -- use `bs-chip-filter`.
+     * - Toggling a filter on and off -- use `bs-chip-filter`; entering free-text values -- use
+     *   `bs-chip-input`.
      * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+     * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
      */
     interface BsChipInformative {
         /**
@@ -1644,11 +1649,29 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Turns the label into a link to this URL. Ignored while `disabled`.
+         */
+        "href"?: string;
+        /**
+          * Shows a remove button that emits `bsRemove`. The consumer removes the element. Off by default, so a plain chip stays non-interactive.
+          * @default false
+         */
+        "removable": boolean;
+        /**
+          * Prefix of the remove button's accessible name ("Remove {label}").
+          * @default 'Remove'
+         */
+        "removeLabel": string;
         /**
           * Sizing scale. Controls height and font-size/line-height together -- unlike `bs-chip-filter`/`bs-chip-input`, Figma specs a distinct (smaller) font at `size="sm"`, not just a shorter pill.
           * @default 'lg'
          */
         "size": BsChipInformativeSize;
+        /**
+          * Link target, only used with `href`. `_blank` also sets `rel="noopener noreferrer"`.
+         */
+        "target"?: string;
     }
     /**
      * A pill-shaped, removable representation of a discrete piece of user-entered data (e.g. a tag,
@@ -2472,6 +2495,11 @@ export namespace Components {
           * @default 'Select all rows'
          */
         "selectAllLabel": string;
+        /**
+          * Accessible name of each row's checkbox (when `selectable`).
+          * @default 'Select row'
+         */
+        "selectRowLabel": string;
         /**
           * @default false
          */
@@ -3480,6 +3508,11 @@ export namespace Components {
           * @default []
          */
         "options": { label: string; value: string }[];
+        /**
+          * `type="pin"`: accessible name of each cell, with `{n}` replaced by its 1-based position and `{total}` by `length`. The first cell keeps the field's visible `label` as its name when there is one.
+          * @default 'Digit {n} of {total}'
+         */
+        "pinCellLabel": string;
         "placeholder"?: string;
         /**
           * Marks the field as required: renders a red `*` after the label and sets `aria-required="true"` on the control. Applies regardless of `type`.
@@ -6133,6 +6166,9 @@ export namespace Components {
         "value"?: string;
     }
     /**
+     * @deprecated Use `bs-chip-informative` with `removable` and/or `href` instead -- it has the same colours and
+     * sizes plus the remove button and link option, so a separate tag component is redundant. `bs-tag` keeps
+     * working unchanged and will be removed in a later major version.
      * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
      * neutral or coloured, optionally removable, and optionally a link.
      * ## When to use
@@ -6837,6 +6873,10 @@ export interface BsChipFilterCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsChipFilterElement;
 }
+export interface BsChipInformativeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBsChipInformativeElement;
+}
 export interface BsChipInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBsChipInputElement;
@@ -8051,18 +8091,34 @@ declare global {
         prototype: HTMLBsChipFilterElement;
         new (): HTMLBsChipFilterElement;
     };
+    interface HTMLBsChipInformativeElementEventMap {
+        "bsRemove": void;
+    }
     /**
-     * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
-     * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
-     * -- no click/select/remove behavior, no hover/focus/pressed states.
+     * A pill-shaped label for conveying a category or status at a glance, optionally paired with a
+     * leading icon. By default it is purely informational -- no click/select behavior, no
+     * hover/focus/pressed states. Two opt-ins cover what used to need a separate `bs-tag`: `removable`
+     * adds a remove button (`bsRemove`), and `href` turns the label into a link.
      * ## When to use
      * - Conveying a category or status inline with other content, with more color options and an
      *   optional icon than `bs-badge` offers.
+     * - Metadata on a record (topics, keywords, owners) that can be removed one by one (`removable`) or
+     *   that leads to a filtered view or detail page (`href`).
      * ## When not to use
-     * - Anything clickable/selectable -- use `bs-chip-filter`.
+     * - Toggling a filter on and off -- use `bs-chip-filter`; entering free-text values -- use
+     *   `bs-chip-input`.
      * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+     * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
      */
     interface HTMLBsChipInformativeElement extends Components.BsChipInformative, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBsChipInformativeElementEventMap>(type: K, listener: (this: HTMLBsChipInformativeElement, ev: BsChipInformativeCustomEvent<HTMLBsChipInformativeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBsChipInformativeElementEventMap>(type: K, listener: (this: HTMLBsChipInformativeElement, ev: BsChipInformativeCustomEvent<HTMLBsChipInformativeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLBsChipInformativeElement: {
         prototype: HTMLBsChipInformativeElement;
@@ -10675,6 +10731,9 @@ declare global {
         "bsRemove": void;
     }
     /**
+     * @deprecated Use `bs-chip-informative` with `removable` and/or `href` instead -- it has the same colours and
+     * sizes plus the remove button and link option, so a separate tag component is redundant. `bs-tag` keeps
+     * working unchanged and will be removed in a later major version.
      * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
      * neutral or coloured, optionally removable, and optionally a link.
      * ## When to use
@@ -12783,15 +12842,20 @@ declare namespace LocalJSX {
         "size"?: BsChipFilterSize;
     }
     /**
-     * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
-     * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
-     * -- no click/select/remove behavior, no hover/focus/pressed states.
+     * A pill-shaped label for conveying a category or status at a glance, optionally paired with a
+     * leading icon. By default it is purely informational -- no click/select behavior, no
+     * hover/focus/pressed states. Two opt-ins cover what used to need a separate `bs-tag`: `removable`
+     * adds a remove button (`bsRemove`), and `href` turns the label into a link.
      * ## When to use
      * - Conveying a category or status inline with other content, with more color options and an
      *   optional icon than `bs-badge` offers.
+     * - Metadata on a record (topics, keywords, owners) that can be removed one by one (`removable`) or
+     *   that leads to a filtered view or detail page (`href`).
      * ## When not to use
-     * - Anything clickable/selectable -- use `bs-chip-filter`.
+     * - Toggling a filter on and off -- use `bs-chip-filter`; entering free-text values -- use
+     *   `bs-chip-input`.
      * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+     * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
      */
     interface BsChipInformative {
         /**
@@ -12804,11 +12868,33 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Turns the label into a link to this URL. Ignored while `disabled`.
+         */
+        "href"?: string;
+        /**
+          * Fires when the remove button is activated, only when `removable`. No payload; the consumer removes the chip. Move focus somewhere sensible in your handler -- it is lost with the element.
+         */
+        "onBsRemove"?: (event: BsChipInformativeCustomEvent<void>) => void;
+        /**
+          * Shows a remove button that emits `bsRemove`. The consumer removes the element. Off by default, so a plain chip stays non-interactive.
+          * @default false
+         */
+        "removable"?: boolean;
+        /**
+          * Prefix of the remove button's accessible name ("Remove {label}").
+          * @default 'Remove'
+         */
+        "removeLabel"?: string;
         /**
           * Sizing scale. Controls height and font-size/line-height together -- unlike `bs-chip-filter`/`bs-chip-input`, Figma specs a distinct (smaller) font at `size="sm"`, not just a shorter pill.
           * @default 'lg'
          */
         "size"?: BsChipInformativeSize;
+        /**
+          * Link target, only used with `href`. `_blank` also sets `rel="noopener noreferrer"`.
+         */
+        "target"?: string;
     }
     /**
      * A pill-shaped, removable representation of a discrete piece of user-entered data (e.g. a tag,
@@ -13734,6 +13820,11 @@ declare namespace LocalJSX {
           * @default 'Select all rows'
          */
         "selectAllLabel"?: string;
+        /**
+          * Accessible name of each row's checkbox (when `selectable`).
+          * @default 'Select row'
+         */
+        "selectRowLabel"?: string;
         /**
           * @default false
          */
@@ -14858,6 +14949,11 @@ declare namespace LocalJSX {
           * @default []
          */
         "options"?: { label: string; value: string }[];
+        /**
+          * `type="pin"`: accessible name of each cell, with `{n}` replaced by its 1-based position and `{total}` by `length`. The first cell keeps the field's visible `label` as its name when there is one.
+          * @default 'Digit {n} of {total}'
+         */
+        "pinCellLabel"?: string;
         "placeholder"?: string;
         /**
           * Marks the field as required: renders a red `*` after the label and sets `aria-required="true"` on the control. Applies regardless of `type`.
@@ -17747,6 +17843,9 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     /**
+     * @deprecated Use `bs-chip-informative` with `removable` and/or `href` instead -- it has the same colours and
+     * sizes plus the remove button and link option, so a separate tag component is redundant. `bs-tag` keeps
+     * working unchanged and will be removed in a later major version.
      * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
      * neutral or coloured, optionally removable, and optionally a link.
      * ## When to use
@@ -18670,6 +18769,10 @@ declare namespace LocalJSX {
         "color": BsChipInformativeColor;
         "size": BsChipInformativeSize;
         "disabled": boolean;
+        "removable": boolean;
+        "href": string;
+        "target": string;
+        "removeLabel": string;
     }
     interface BsChipInputAttributes {
         "size": BsChipInputSize;
@@ -18796,6 +18899,7 @@ declare namespace LocalJSX {
         "sortColumn": string;
         "sortDirection": 'asc' | 'desc';
         "selectAllLabel": string;
+        "selectRowLabel": string;
         "selectable": boolean;
         "striped": boolean;
     }
@@ -18988,6 +19092,7 @@ declare namespace LocalJSX {
         "country": string;
         "countryLabel": string;
         "length": number;
+        "pinCellLabel": string;
         "loading": boolean;
         "filterOptions": boolean;
         "noResultsLabel": string;
@@ -20280,15 +20385,20 @@ declare module "@stencil/core" {
              */
             "bs-chip-filter": LocalJSX.IntrinsicElements["bs-chip-filter"] & JSXBase.HTMLAttributes<HTMLBsChipFilterElement>;
             /**
-             * A pill-shaped, non-interactive label for conveying a category or status at a glance, optionally
-             * paired with a leading icon. Unlike `bs-chip-filter`/`bs-chip-input`, this is purely informational
-             * -- no click/select/remove behavior, no hover/focus/pressed states.
+             * A pill-shaped label for conveying a category or status at a glance, optionally paired with a
+             * leading icon. By default it is purely informational -- no click/select behavior, no
+             * hover/focus/pressed states. Two opt-ins cover what used to need a separate `bs-tag`: `removable`
+             * adds a remove button (`bsRemove`), and `href` turns the label into a link.
              * ## When to use
              * - Conveying a category or status inline with other content, with more color options and an
              *   optional icon than `bs-badge` offers.
+             * - Metadata on a record (topics, keywords, owners) that can be removed one by one (`removable`) or
+             *   that leads to a filtered view or detail page (`href`).
              * ## When not to use
-             * - Anything clickable/selectable -- use `bs-chip-filter`.
+             * - Toggling a filter on and off -- use `bs-chip-filter`; entering free-text values -- use
+             *   `bs-chip-input`.
              * - A short, fixed status label with no color/icon needs -- `bs-badge` is the simpler choice.
+             * **Built from:** `bs-icon-button` (the remove control, `size="xs"`).
              */
             "bs-chip-informative": LocalJSX.IntrinsicElements["bs-chip-informative"] & JSXBase.HTMLAttributes<HTMLBsChipInformativeElement>;
             /**
@@ -21906,6 +22016,9 @@ declare module "@stencil/core" {
              */
             "bs-tabs": LocalJSX.IntrinsicElements["bs-tabs"] & JSXBase.HTMLAttributes<HTMLBsTabsElement>;
             /**
+             * @deprecated Use `bs-chip-informative` with `removable` and/or `href` instead -- it has the same colours and
+             * sizes plus the remove button and link option, so a separate tag component is redundant. `bs-tag` keeps
+             * working unchanged and will be removed in a later major version.
              * A small label that categorises or annotates an item (a topic, a keyword, a status of a record). It can be
              * neutral or coloured, optionally removable, and optionally a link.
              * ## When to use

package/dist/types/play-utils.d.ts

@@ -0,0 +1,6 @@
+/** Finds `selector` inside the canvas and waits for Stencil to finish its first render. */
+export declare function ready<T extends HTMLElement>(canvasElement: HTMLElement, selector: string): Promise<T>;
+/** Finds `selector` in `host`'s shadow root, throwing a readable error instead of returning null. */
+export declare function inShadow<T extends Element>(host: Element, selector: string): T;
+/** Collects every `name` event fired on `host` so a play function can assert on them afterwards. */
+export declare function recordEvents<D = unknown>(host: Element, name: string): CustomEvent<D>[];

package/dist/types/raw-css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css?raw' {
+  const css: string;
+  export default css;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandsync/wc",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "publishConfig": {
     "access": "public"
   },
@@ -63,8 +63,6 @@
     "generate": "stencil generate",
     "storybook": "npm run build && storybook dev -p 6006",
     "build-storybook": "npm run build && storybook build",
-    "test:visual": "node visual/visual.mjs",
-    "test:visual:docker": "docker run --rm -v $(cd ../.. && pwd):/work -w /work/packages/wc mcr.microsoft.com/playwright:v1.63.0-noble node visual/visual.mjs",
     "prepare-assets": "cp ../../CONVENTIONS.md ./CONVENTIONS.md && node scripts/generate-reference.mjs && node scripts/validate-tokens.mjs"
   },
   "devDependencies": {
@@ -83,9 +81,7 @@
     "@vitest/browser-playwright": "^4.0.0",
     "axe-core": "^4.14.0",
     "lit": "^3.3.3",
-    "pixelmatch": "^8.0.0",
     "playwright": "^1.52.0",
-    "pngjs": "^7.0.0",
     "storybook": "^10.5.8",
     "vitest": "^4.1.11"
   },

package/reference.d.ts

@@ -32,7 +32,7 @@ export interface BsParts {
   "bs-checkbox": "box" | "icon" | "label" | "ripple";
   "bs-checkbox-group": "group" | "label" | "options" | "description" | "error";
   "bs-chip-filter": "icon" | "label" | "caret" | "ripple";
-  "bs-chip-informative": "icon" | "label";
+  "bs-chip-informative": "icon" | "label" | "remove";
   "bs-chip-input": "body" | "icon" | "label" | "remove" | "ripple";
   "bs-citation-preview": "container" | "header" | "snippet" | "page";
   "bs-code-block": "container" | "header" | "filename" | "copy-button" | "body" | "line-numbers" | "code";

package/reference.json

@@ -1927,7 +1927,12 @@
       {
         "kind": "part",
         "name": "label",
-        "description": "The text label element."
+        "description": "The text label element (a link when `href` is set)."
+      },
+      {
+        "kind": "part",
+        "name": "remove",
+        "description": "The remove button (`bs-icon-button`), only when `removable`."
       }
     ],
     "cssProperties": []

package/dist/brandsync-wc/p-06277bb8.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as a}from"./p-wz7B473u.js";const s=class{constructor(a){t(this,a),this.bsSort=e(this,"bsSort"),this.bsRowSelect=e(this,"bsRowSelect")}columns=[];rows=[];sortColumn;sortDirection="asc";selectAllLabel="Select all rows";selectable=!1;striped=!1;cellRenderer;bsSort;bsRowSelect;selectedIds=new Set;onHeaderClick=t=>{t.sortable&&this.bsSort.emit({column:t.key,direction:this.sortColumn===t.key&&"asc"===this.sortDirection?"desc":"asc"})};onRowCheckboxChange=(t,e)=>{const a=e.target.checked,s=new Set(this.selectedIds);a?s.add(t.id):s.delete(t.id),this.selectedIds=s,this.bsRowSelect.emit({id:t.id,selected:a})};onSelectAllChange=t=>{const e=t.target.checked;this.selectedIds=e?new Set(this.rows.map((t=>t.id))):new Set;for(const t of this.rows)this.bsRowSelect.emit({id:t.id,selected:e})};async clearSelection(){const t=Array.from(this.selectedIds);this.selectedIds=new Set;for(const e of t)this.bsRowSelect.emit({id:e,selected:!1})}render(){return a("table",{key:"3d8e5b69b6d41002e5af375573f47aec0e117a38",part:"table",class:"bs-data-table"},a("thead",{key:"ea97468d460ec2b7ef4b238a335fe05f049a1f0f",part:"head"},a("tr",{key:"cb73245678610583887157e314aa89c080390022"},this.selectable&&a("th",{key:"45df220057b0b2e6698ebc29424dc6c6055799c4",class:"bs-data-table__select-col"},this.rows.length>0&&a("input",{key:"542ee807044a65c5ccf8e9285ece9584f921dff2",type:"checkbox","aria-label":this.selectAllLabel,checked:this.selectedIds.size>0&&this.selectedIds.size===this.rows.length,indeterminate:this.selectedIds.size>0&&this.selectedIds.size<this.rows.length,onChange:this.onSelectAllChange})),this.columns.map((t=>{const e=this.sortColumn===t.key;return a("th",{part:"header-cell",class:"bs-data-table__header-cell","aria-sort":t.sortable?e?"asc"===this.sortDirection?"ascending":"descending":"none":void 0},t.sortable?a("button",{type:"button",class:"bs-data-table__sort-button",onClick:()=>this.onHeaderClick(t)},t.label,e&&a("span",{class:"bs-data-table__sort-indicator"},"asc"===this.sortDirection?" ▲":" ▼")):t.label)})))),a("tbody",{key:"cd2b2ef74629630e166b0c9b4dc0a4ea339d4de6",part:"body"},this.rows.map((t=>a("tr",{part:"row",class:"bs-data-table__row"},this.selectable&&a("td",{class:"bs-data-table__select-col"},a("input",{type:"checkbox",checked:this.selectedIds.has(t.id),onChange:e=>this.onRowCheckboxChange(t,e)})),this.columns.map((e=>this.cellRenderer?a("td",{part:"cell",class:"bs-data-table__cell",innerHTML:this.cellRenderer(t,e)}):a("td",{part:"cell",class:"bs-data-table__cell"},a("slot",{name:`cell-${t.id}-${e.key}`},String(t[e.key]??""))))))))))}};s.style=":host{display:block;--bs-data-table-cell-padding-y:var(--bs-spacing-200);--bs-data-table-cell-padding-x:var(--bs-spacing-300);--bs-data-table-stripe-bg:var(--bs-surface-container)}.bs-data-table{width:100%;border-collapse:collapse;font-family:inherit;font-size:var(--bs-font-size-sm);color:var(--bs-text-default)}.bs-data-table__header-cell{text-align:start;padding:var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);border-bottom:1px solid var(--bs-border-default);font-weight:var(--bs-font-weight-semibold);color:var(--bs-text-secondary);white-space:nowrap}.bs-data-table__sort-button{display:inline-flex;align-items:center;border:none;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;user-select:none}.bs-data-table__sort-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-data-table__sort-indicator{color:var(--bs-text-action)}.bs-data-table__row:hover{background:var(--bs-surface-hover)}:host([striped]) .bs-data-table__row:nth-child(even){background:var(--bs-data-table-stripe-bg)}:host([striped]) .bs-data-table__row:nth-child(even):hover{background:var(--bs-surface-hover)}.bs-data-table__cell{padding:var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);border-bottom:1px solid var(--bs-border-default)}.bs-data-table__select-col{width:var(--bs-spacing-500);padding:var(--bs-data-table-cell-padding-y) var(--bs-data-table-cell-padding-x);border-bottom:1px solid var(--bs-border-default)}";export{s as bs_data_table}

package/dist/brandsync-wc/p-0d3d56ef.entry.js

@@ -1 +0,0 @@
-import{r as e,c as s,a,h as r}from"./p-wz7B473u.js";const o=class{constructor(a){e(this,a),this.bsCollapse=s(this,"bsCollapse")}get el(){return a(this)}heading="Sources";collapseLabel="Collapse sources";count;bsCollapse;slottedCount=0;onSlotchange=e=>{this.slottedCount=e.target.assignedElements().filter((e=>"bs-source-link"===e.tagName.toLowerCase())).length};onCollapseClick=()=>{this.bsCollapse.emit()};render(){const e=this.count??this.slottedCount;return r("div",{key:"72666e1a78127010e3ac2ebe6ce0f94117c4b432",class:"bs-chatbot-sources-drawer",role:"region","aria-label":this.heading},r("div",{key:"a82c23071c94ab034e5618d03bdea9f23bf83f1f",class:"bs-chatbot-sources-drawer__header"},r("div",{key:"592aa5597e26e34b9583dd3987e98a202f1f515e",class:"bs-chatbot-sources-drawer__title-group"},r("h2",{key:"d7d0841ad59dea22cda3c80cca96423c752760f3",part:"heading",class:"bs-chatbot-sources-drawer__heading"},this.heading),e>0&&r("span",{key:"ca952fc240dc656ecb3b8626fe6ff04a6205b0b6",part:"count",class:"bs-chatbot-sources-drawer__count"},e)),r("button",{key:"733c375428582c657025ddde7b412174a4095324",type:"button",part:"collapse",class:"bs-chatbot-sources-drawer__collapse","aria-label":this.collapseLabel,onClick:this.onCollapseClick},r("slot",{key:"5b40e0be91f2c0d7370d597ca54854fea05d9c28",name:"collapse-icon"},r(t,{key:"0e0386e798e8c437ba6440d0d5a2f77afcd5b989"})))),r("div",{key:"71e980ce1ebbc1c6f1e61f61cfa669a85088d09e",part:"list",class:"bs-chatbot-sources-drawer__list"},r("slot",{key:"3ad1f3ddb4b91b5e7f22167e471977708b8649cd",onSlotchange:this.onSlotchange})))}},t=()=>r("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},r("path",{d:"M7.5 4.375L13.125 10L7.5 15.625",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}));o.style=":host{display:block;--bs-chatbot-sources-drawer-bg:var(--bs-surface-raised);--bs-chatbot-sources-drawer-header-shadow:var(--bs-shadow-xs);--bs-chatbot-sources-drawer-header-padding-x:var(--bs-spacing-200);--bs-chatbot-sources-drawer-header-padding-top:var(--bs-spacing-150);--bs-chatbot-sources-drawer-header-padding-bottom:var(--bs-spacing-100);--bs-chatbot-sources-drawer-heading-color:var(--bs-text-default);--bs-chatbot-sources-drawer-count-bg:var(--bs-badge-bg-neutral-container);--bs-chatbot-sources-drawer-count-color:var(--bs-badge-text-neutral);--bs-chatbot-sources-drawer-collapse-hover:var(--bs-surface-hover);--bs-chatbot-sources-drawer-section-gap:var(--bs-spacing-200);--bs-chatbot-sources-drawer-list-padding:var(--bs-spacing-200);--bs-chatbot-sources-drawer-list-gap:var(--bs-spacing-50)}.bs-chatbot-sources-drawer{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-chatbot-sources-drawer-section-gap);width:100%;height:100%;background:var(--bs-chatbot-sources-drawer-bg);font-family:inherit}.bs-chatbot-sources-drawer__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding:var(--bs-chatbot-sources-drawer-header-padding-top) var(--bs-chatbot-sources-drawer-header-padding-x) var(--bs-chatbot-sources-drawer-header-padding-bottom);box-shadow:var(--bs-chatbot-sources-drawer-header-shadow)}.bs-chatbot-sources-drawer__title-group{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-chatbot-sources-drawer__heading{margin:0;color:var(--bs-chatbot-sources-drawer-heading-color);font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-line-height-heading-h4) * 1px)}.bs-chatbot-sources-drawer__count{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:16px;max-width:34px;padding:var(--bs-spacing-50) var(--bs-spacing-100);background:var(--bs-chatbot-sources-drawer-count-bg);border-radius:var(--bs-border-radius-50);color:var(--bs-chatbot-sources-drawer-count-color);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-chatbot-sources-drawer__collapse{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:none;border-radius:var(--bs-border-radius-100);color:var(--bs-icon-default);cursor:pointer}.bs-chatbot-sources-drawer__collapse:hover{background:var(--bs-chatbot-sources-drawer-collapse-hover)}.bs-chatbot-sources-drawer__collapse:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:1px}.bs-chatbot-sources-drawer__list{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-chatbot-sources-drawer-list-gap);padding:0 var(--bs-chatbot-sources-drawer-list-padding) var(--bs-chatbot-sources-drawer-list-padding);overflow-y:auto}";export{o as bs_chatbot_sources_drawer}

package/dist/brandsync-wc/p-4865d4e1.entry.js

@@ -1 +0,0 @@
-import{r as t,c as o,a as e,h as b}from"./p-wz7B473u.js";const s=class{constructor(e){t(this,e),this.bsChange=o(this,"bsChange")}get el(){return e(this)}value;pressed=!1;disabled=!1;mode="toggle";tabbable=!0;ariaLabel=null;bsChange;hasLabel=!1;hasIcon=!1;onIconSlotchange=t=>{this.hasIcon=t.target.assignedNodes().length>0};onLabelSlotchange=t=>{this.hasLabel=t.target.assignedNodes().some((t=>1===t.nodeType||!!t.textContent?.trim()))};onClick=()=>{if(!this.disabled){if("radio"===this.mode){if(this.pressed)return;this.pressed=!0}else this.pressed=!this.pressed;this.bsChange.emit(this.pressed)}};render(){const t="radio"===this.mode;return b("button",{key:"444c2161afae1af1e82ee454014c61b938ef2b23",type:"button",part:"button",class:`bs-toggle-button ${this.pressed?"bs-toggle-button--pressed":""} ${this.hasLabel?"":"bs-toggle-button--icon-only"}`,role:t?"radio":void 0,"aria-pressed":t?void 0:String(this.pressed),"aria-checked":t?String(this.pressed):void 0,"aria-label":this.ariaLabel,disabled:this.disabled,tabindex:this.tabbable?void 0:-1,onClick:this.onClick},b("bs-ripple",{key:"392b1d00b0d5dda96d0eb7161989579830e31cf9",part:"ripple",centered:!1,disabled:this.disabled}),b("span",{key:"b59e51d2bf13a3ea0a4eedab7dc120d07e812bc2",part:"icon",class:"bs-toggle-button__icon "+(this.hasIcon?"bs-toggle-button__icon--has-content":"")},b("slot",{key:"34c7b4c9830b479b57aaef951423c19b551c026f",name:"icon",onSlotchange:this.onIconSlotchange})),b("span",{key:"402c92bcd76b444df01aee9f42dfbc765fc8ec96",part:"label",class:"bs-toggle-button__label"},b("slot",{key:"de6cbdf862a8dbb028733e25c58312b4a707f827",onSlotchange:this.onLabelSlotchange})))}static get delegatesFocus(){return!0}};s.style=":host{display:inline-block;position:relative;--bs-toggle-button-height:var(--bs-spacing-550);--bs-toggle-button-padding-x:var(--bs-spacing-200);--bs-toggle-button-gap:var(--bs-spacing-100);--bs-toggle-button-radius:var(--bs-border-radius-100);--bs-toggle-button-border-width:var(--bs-border-width-thin);--bs-toggle-button-border:var(--bs-border-neutral-container);--bs-toggle-button-border-pressed:var(--bs-border-primary);--bs-toggle-button-bg:var(--bs-surface-base);--bs-toggle-button-bg-hover:var(--bs-color-neutral-container-hover);--bs-toggle-button-bg-pressed:var(--bs-color-primary-container);--bs-toggle-button-bg-pressed-hover:var(--bs-color-primary-container-hover);--bs-toggle-button-bg-disabled:var(--bs-surface-action-disabled);--bs-toggle-button-color:var(--bs-text-default);--bs-toggle-button-color-pressed:var(--bs-text-action);--bs-toggle-button-color-disabled:var(--bs-text-on-disabled);--bs-toggle-button-focus-ring-color:var(--bs-border-neutral-focus)}:host(:hover),:host(:focus-within){z-index:1}.bs-toggle-button{box-sizing:border-box;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--bs-toggle-button-gap);height:var(--bs-toggle-button-height);min-width:var(--bs-toggle-button-height);padding:0 var(--bs-toggle-button-padding-x);border:var(--bs-toggle-button-border-width) solid var(--bs-toggle-button-border);border-radius:var(--bs-toggle-button-radius);background:var(--bs-toggle-button-bg);color:var(--bs-toggle-button-color);font-family:inherit;font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-medium);cursor:pointer}.bs-toggle-button--icon-only{padding:0}.bs-toggle-button:hover:not(:disabled){background:var(--bs-toggle-button-bg-hover)}.bs-toggle-button--pressed{background:var(--bs-toggle-button-bg-pressed);border-color:var(--bs-toggle-button-border-pressed);color:var(--bs-toggle-button-color-pressed)}.bs-toggle-button--pressed:hover:not(:disabled){background:var(--bs-toggle-button-bg-pressed-hover)}.bs-toggle-button:focus-visible{outline:2px solid var(--bs-toggle-button-focus-ring-color);outline-offset:2px}.bs-toggle-button:disabled{background:var(--bs-toggle-button-bg-disabled);color:var(--bs-toggle-button-color-disabled);cursor:not-allowed}.bs-toggle-button__icon{display:none;width:var(--bs-spacing-300);height:var(--bs-spacing-300)}.bs-toggle-button__icon ::slotted(*){display:block;width:100%;height:100%}.bs-toggle-button__icon--has-content{display:inline-flex}.bs-toggle-button__label{display:inline-flex}.bs-toggle-button--icon-only .bs-toggle-button__label{display:none}@media (forced-colors: active){.bs-toggle-button{border-color:ButtonText}.bs-toggle-button--pressed{background:Highlight;color:HighlightText}.bs-toggle-button:disabled{border-color:GrayText;color:GrayText}}";export{s as bs_toggle_button}

package/dist/brandsync-wc/p-48ce098c.entry.js

@@ -1 +0,0 @@
-import{r as s,c as a,a as e,h as r}from"./p-wz7B473u.js";const t=class{constructor(e){s(this,e),this.bsNavigate=a(this,"bsNavigate")}get el(){return e(this)}label="Breadcrumb";size="md";bsNavigate;onSizeChange(s){this.propagateSize(s)}componentDidLoad(){this.propagateSize(this.size)}onSlotChange=()=>{this.propagateSize(this.size)};propagateSize(s){this.el.querySelectorAll(":scope > bs-breadcrumb, :scope > bs-breadcrumb-overflow").forEach((a=>{a.size=s}))}render(){return r("nav",{key:"0c84afcbcfd5b6f92847d5688ed5201d4d94de23","aria-label":this.label},r("ol",{key:"03d527ed21c159d74cbb1215107479dbbd72b4a4",part:"list",class:"bs-breadcrumbs__list"},r("slot",{key:"7c5d8aa5aef659e6c140ef1bb6992f35ab150d1c",onSlotchange:this.onSlotChange})))}static get watchers(){return{size:[{onSizeChange:0}]}}};t.style=":host{display:block;--bs-breadcrumbs-gap:var(--bs-spacing-50)}.bs-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;gap:var(--bs-breadcrumbs-gap)}";export{t as bs_breadcrumbs}