@brandsync/wc 1.19.0 → 1.20.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @brandsync/wc
 
+## 1.20.1
+
+### Patch Changes
+
+- ea7663c: `bs-company-switcher`: the search combobox now reports `aria-expanded="false"` while the search has no matches (there is no listbox to control then), instead of `aria-expanded="true"` with no `aria-controls` (axe `aria-required-attr`).
+- 3e522bb: Disabled `bs-accordion`, `bs-chip-informative`, `bs-shortcut-row`, `bs-search-item`, `bs-slider` and `bs-stepper-step` now set `aria-disabled="true"` on their container (the disabled state was previously visual only for assistive tech). `bs-search-item` previously set it only when it had a listbox role.
+- aa25194: `bs-popover` now sets `aria-haspopup` and `aria-expanded` on the slotted trigger element instead of on its role-less wrapper `<div>`, where they were invalid ARIA (axe `aria-allowed-attr`). This also fixes `bs-dropdown`, `bs-toolbar` overflow and `bs-company-switcher`. `aria-controls` is no longer set on the wrapper (it pointed across a shadow boundary, so it never resolved), and the `trigger` part no longer carries these attributes.
+
+## 1.20.0
+
+### Minor Changes
+
+- a7178a7: Bug fixes and accessibility (see `MIGRATION.md` for behaviour changes):
+
+  - `bs-progress-linear`: the indeterminate bar now slides across the full track.
+  - `bs-badge variant="inverse"`: legible in dark mode.
+  - `bs-button` / `bs-icon-button`: new `ariaExpanded`, `ariaControls`, `ariaHasPopup` props (and `pressed` on `bs-button`) forwarded to the inner button. `bs-icon-button size="sm"` is now 32x32.
+  - `bs-navigation-drawer-item`: `aria-current="page"` on the selected item; new `href`/`target` renders a real link and a cancelable `bsSelect`; long captions wrap in the collapsed rail.
+  - `bs-tabs`: a value that matches no tab no longer clears a `selected` tab; gap between tabs is 4px; `bsChange` docs say when it fires.
+  - `bs-breadcrumbs`: declares `bsNavigate` so the React/Vue/Angular wrappers expose it. A crumb without `href` no longer looks like a link.
+  - `bs-radio`: `ariaLabel`. New `bs-radio-group` and `bs-checkbox-group`.
+  - `bs-data-table`: `striped`, and per-cell slots (`cell-{id}-{column}`) for app-owned content.
+  - `bs-input`: new `type="combobox"` (listbox rendered inside the component, full combobox ARIA), `ariaLabel`; date icon no longer duplicated and a larger number stepper hit area; description text 14px, field gap 8px; pin gap 6px; chip height 24px.
+  - Tokens: `--bs-typography-font-family-heading/body` now end with `system-ui, sans-serif`. Roboto is still not bundled.
+  - New components: `bs-select`, `bs-link`, `bs-toggle-button`, `bs-toggle-button-group`, `bs-icon`, `bs-heading`, `bs-text`, `bs-code-block`, `bs-toolbar`, `bs-skip-link`, `bs-table-of-contents`, `bs-tag`, `bs-stat`, `bs-description-list` / `bs-description-item`. `bs-card` can be a link or a selectable toggle; `bs-list` gains `variant` (`bulleted`, `numbered`); `bs-empty-state` gains `size` and an `illustration` slot.
+
+  Second batch (behaviour changes, see `MIGRATION.md`):
+
+  - `bs-button`: heights are now sm 32 / md 44 / lg 48px with 12px left/right padding on every size (was 40/48/56 with 24/16/40px). New `--bs-button-padding-x-md` / `-lg` and `--bs-button-outlined-color`.
+  - `bs-icon-button`: explicit icon colours on hover/pressed at `size="xs"`.
+  - `bs-attachment`: the dismiss button is exactly 12px from the top and right.
+  - `bs-snackbar`: the default variant's action label and border use the same inverse token.
+  - `bs-chatbot-suggestion-button`: disabled state uses the disabled surface/text/border tokens instead of an opacity fade.
+  - `bs-composer`: stop icon sized like the other action icons; stronger border for the human variant.
+  - `bs-input`: `type="select"`, the initials title and the country picker no longer render a native `<select>`; they open an in-component listbox styled like the BrandSync menu (queries for a native `<select>` will no longer match). Country is its own field and shows the flag. New `titleLabel`, `countryLabel`, `--bs-input-picker-min-width`.
+  - `bs-slider` (segmented): ticks span the knob height. `bs-tabs`: inline bar is 48px tall; a disabled inline tab matches the bar background. The icon-only inline tab story was removed (a label is required).
+  - `bs-navigation-drawer`: 12px between all items, and between a parent row and its first child.
+  - `bs-navigation-header`: responds to its own width (container query); the right slot never wraps or shrinks; the left slot drops to a second row when narrow.
+  - `bs-avatar`, `bs-chatbot-feedback`, `bs-chatbot-header`: Phosphor glyphs via `bs-icon`. `bs-icon` registry entries can be `{ viewBox, body }`.
+  - New component `bs-dropdown` (menu trigger with outside-click, Escape, focus management).
+  - Tokens: `--bs-*-breakpoints-max-width` are now `px` (were malformed `rem`).
+
 ## 1.19.0
 
 ### Minor Changes

package/REFERENCE.md

@@ -315,17 +315,20 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 ### CSS custom properties
 
 - `--bs-button-radius` — Corner radius. Aliased to `--bs-border-radius-100` by default.
-- `--bs-button-padding-x-sm` — Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-300`.
+- `--bs-button-padding-x-sm` — Left/right padding of a label-only button at `size="sm"`. Aliased to `--bs-spacing-150` (12px).
+- `--bs-button-padding-x-md` — Left/right padding at `size="md"`. Aliased to `--bs-spacing-150` (12px).
+- `--bs-button-padding-x-lg` — Left/right padding at `size="lg"`. Aliased to `--bs-spacing-150` (12px).
 - `--bs-button-width` — Width of the button. `auto` by default (fits its content); set `100%` for a full-width button, e.g. `bs-button { --bs-button-width: 100%; }`.
 - `--bs-button-subtle-color` — Label/icon colour, `variant="subtle"`. Aliased to `--bs-color-neutral-default`; set it to `var(--bs-text-action)` for a blue text button.
-- `--bs-button-height-sm` — Height at `size="sm"`. Aliased to `--bs-spacing-500`.
-- `--bs-button-height-md` — Height at `size="md"`. Aliased to `--bs-spacing-600`.
-- `--bs-button-height-lg` — Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+- `--bs-button-height-sm` — Height at `size="sm"`. Aliased to `--bs-spacing-400` (32px).
+- `--bs-button-height-md` — Height at `size="md"`. Aliased to `--bs-spacing-550` (44px).
+- `--bs-button-height-lg` — Height at `size="lg"`. Aliased to `--bs-spacing-600` (48px).
+- `--bs-button-outlined-color` — Label/icon colour, `variant="outlined"`, default. Aliased to `--bs-color-primary-default`.
 - `--bs-button-neutral-border` — Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
 - `--bs-button-neutral-border-hover` — Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
 - `--bs-button-neutral-border-pressed` — Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
-- `--bs-button-padding-x-icon-side` — Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
-- `--bs-button-padding-x-label-side` — Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
+- `--bs-button-padding-x-icon-side` — Horizontal padding on an edge that's adjacent to a leading/trailing icon (now equal to the text-only edge). Aliased to `--bs-spacing-150`.
+- `--bs-button-padding-x-label-side` — Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-150` (no compensation by default).
 
 ## `<bs-icon-button>`
 
@@ -356,13 +359,14 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 ### Slots
 
 - `image` — Optional hero image across the top of the card, flush with its edges and clipped to its top corners. Presence of assigned content is what shows it -- doesn't affect layout when empty.
-- `header` — Optional heading content above the body.
+- `header` — Optional heading content above the body. ## Clickable and selectable cards Set `href` to make the whole card a link, or `selectable` to make it a toggle (`selected`, `aria-pressed`). The card stays a plain container with ONE real `<a>`/`<button>` (the "stretched link" pattern): the `header` slot is rendered inside it, so the header text is the accessible name (or set `label`), and it is stretched over the whole card, so the card is one tab stop and no interactive element is nested inside another. Controls in the `body`/`footer` slots stay individually clickable and focusable as long as they are *direct* children of the slot (`bs-button`, `a`, `button`, form controls); everything else in those slots passes clicks through to the card.
 - `(default)` — Default slot: the card's main body content.
 - `footer` — Optional actions/content below the body (e.g. a button).
 
 ### Parts (`::part()`)
 
 - `container` — The outer surface element.
+- `action` — The `<a>`/`<button>` that makes the card clickable (only when `href` or `selectable` is set).
 - `image` — The hero image wrapper (only visible when the `image` slot has content).
 - `header` — The header wrapper.
 - `body` — The body wrapper.
@@ -372,7 +376,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 ### Slots
 
-- `(default)` — Default slot: the slides. Each direct child is one slide.
+- `(default)` — Default slot: the slides. Each direct child is one slide and gets `role="group"`, so wrap an image in an element (don't slot a bare `<img>`).
 
 ### Parts (`::part()`)
 
@@ -544,6 +548,9 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-chatbot-suggestion-button-bg-hover` — Background on hover. Aliased to `--bs-color-primary-container-hover`.
 - `--bs-chatbot-suggestion-button-bg-pressed` — Background when pressed. Aliased to `--bs-color-primary-container-pressed`.
 - `--bs-chatbot-suggestion-button-bg-focus` — Background when focused. Aliased to `--bs-color-primary-container-hover` (same as hover).
+- `--bs-chatbot-suggestion-button-bg-disabled` — Background when disabled. Aliased to `--bs-surface-action-disabled`.
+- `--bs-chatbot-suggestion-button-text-disabled` — Text color when disabled. Aliased to `--bs-text-on-disabled`.
+- `--bs-chatbot-suggestion-button-border-color-disabled` — Border color when disabled. Aliased to `--bs-border-neutral-disabled`.
 - `--bs-chatbot-suggestion-button-text-default` — Text color in the default state. Aliased to `--bs-text-action`.
 - `--bs-chatbot-suggestion-button-text-hover` — Text color on hover, pressed, and focus. Aliased to `--bs-text-action-hover`.
 - `--bs-chatbot-suggestion-button-focus-ring-color` — Focus ring color. Aliased to `--bs-border-primary-focus`.
@@ -577,6 +584,20 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `label` — The label text wrapper.
 - `ripple` — The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-checkbox-*) are documented via @prop comments // in bs-checkbox.css, not here -- Stencil's docs generator only parses @prop out of CSS file // comments, not the class-level JSDoc (see bs-input.tsx's equivalent note).
 
+## `<bs-checkbox-group>`
+
+### Slots
+
+- `(default)` — The `bs-checkbox` elements. Give each a `value`.
+
+### Parts (`::part()`)
+
+- `group` — The `fieldset`.
+- `label` — The `legend`.
+- `options` — The wrapper laying out the checkboxes (column, or row when `orientation="horizontal"`).
+- `description` — The helper text (hidden while `error` is set).
+- `error` — The error message.
+
 ## `<bs-chip-filter>`
 
 ### Slots
@@ -640,6 +661,22 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-citation-preview-snippet-radius` — Snippet corner radius. Aliased to `--bs-border-radius-100`.
 - `--bs-citation-preview-page-color` — Page label color. Aliased to `--bs-text-secondary`.
 
+## `<bs-code-block>`
+
+### Slots
+
+- `(default)` — Pre-highlighted code (any markup). Ignored when `code` is set.
+
+### Parts (`::part()`)
+
+- `container` — The `bs-card` surface (block mode).
+- `header` — The header row holding the filename and the Copy button.
+- `filename` — The filename text.
+- `copy-button` — The Copy `bs-button`.
+- `body` — The scrollable code area.
+- `line-numbers` — The line number gutter (when `lineNumbers` is set).
+- `code` — The `code` element (block and inline).
+
 ## `<bs-command-palette>`
 
 ### Slots
@@ -843,6 +880,10 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 ## `<bs-data-table>`
 
+### Slots
+
+- `cell-{row.id}-{column.key}` — Content for one cell (see "Rich cells"). Falls back to the text value.
+
 ### Parts (`::part()`)
 
 - `table` — The `<table>` element.
@@ -871,6 +912,43 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `outside` — A day from the previous/next month, in addition to `day`.
 - `today` — Today's day button, in addition to `day`.
 
+## `<bs-description-item>`
+
+### Slots
+
+- `term` — Rich content for the term (replaces `term`).
+- `(default)` — Rich content for the detail (replaces `description`).
+
+### Parts (`::part()`)
+
+- `container` — The `dl`.
+- `term` — The `dt`.
+- `description` — The `dd`.
+
+### CSS custom properties
+
+- `--bs-description-item-gap` — Gap between term and detail when stacked. Aliased to `--bs-spacing-25`.
+- `--bs-description-item-term-width` — Width of the term column when `layout="horizontal"`. `12rem`.
+- `--bs-description-item-column-gap` — Gap between the term and detail columns when horizontal. Aliased to `--bs-spacing-200`.
+- `--bs-description-item-padding-y` — Vertical padding. Aliased to `--bs-spacing-100`.
+- `--bs-description-item-term-color` — Aliased to `--bs-text-secondary`.
+- `--bs-description-item-description-color` — Aliased to `--bs-text-default`.
+
+## `<bs-description-list>`
+
+### Slots
+
+- `(default)` — The `bs-description-item` children.
+
+### Parts (`::part()`)
+
+- `list` — The list container (`role="group"`).
+
+### CSS custom properties
+
+- `--bs-description-list-divider-color` — Divider colour when `dividers` is set. Aliased to `--bs-border-neutral-container`.
+- `--bs-description-list-gap` — Gap between items. `0`.
+
 ## `<bs-dialog>`
 
 ### Slots
@@ -903,10 +981,22 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-divider-color` — Line colour. Aliased to `--bs-border-neutral-container` (`default`) or `--bs-neutral-100` (`subtle`).
 - `--bs-divider-inset` — Indent applied by `inset`. Aliased to `--bs-spacing-300`.
 
+## `<bs-dropdown>`
+
+### Slots
+
+- `trigger` — The control that toggles the menu (a `bs-button` or `bs-icon-button`).
+- `(default)` — Default slot: a `bs-menu` containing `bs-menu-item`s.
+
+### Parts (`::part()`)
+
+- `popover` — The underlying `bs-popover`; tune the popup with `::part(popover) { --bs-popover-min-width: ...; }`.
+
 ## `<bs-empty-state>`
 
 ### Slots
 
+- `illustration` — A larger illustration or image that replaces the icon tile (use with `size="page"`).
 - `icon` — The glyph inside the icon tile (24px, `currentColor`). Falls back to the tile's intent glyph.
 - `(default)` — The description (overrides the `description` prop).
 - `action` — An optional action, e.g. `<bs-button variant="outlined">`.
@@ -914,6 +1004,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 ### Parts (`::part()`)
 
 - `container` — The centered column.
+- `illustration` — The illustration wrapper (only rendered while the `illustration` slot is filled).
 - `icon` — The icon tile (`bs-icon-tile`).
 - `heading` — The heading element.
 - `description` — The description paragraph.
@@ -924,6 +1015,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-empty-state-padding-y` — Vertical padding. Aliased to `--bs-spacing-700` (56px).
 - `--bs-empty-state-padding-x` — Horizontal padding. Aliased to `--bs-spacing-300` (24px).
 - `--bs-empty-state-gap` — Gap between tile, heading, description and action. Aliased to `--bs-spacing-150`.
+- `--bs-empty-state-heading-size` — Aliased to `--bs-font-size-xl` (`--bs-font-size-3xl` at `size="page"`).
 - `--bs-empty-state-heading-color` — Aliased to `--bs-text-default`.
 - `--bs-empty-state-description-color` — Aliased to `--bs-text-secondary`.
 
@@ -1028,6 +1120,26 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-grid-row-gap` — Row gap. Overrides `--bs-grid-gap` and the `rowGap` prop's token.
 - `--bs-grid-column-gap` — Column gap. Overrides `--bs-grid-gap` and the `columnGap` prop's token.
 
+## `<bs-heading>`
+
+### Slots
+
+- `(default)` — The heading text.
+
+### Parts (`::part()`)
+
+- `heading` — The rendered heading element.
+
+## `<bs-icon>`
+
+### Slots
+
+- `(default)` — Optional SVG (or `img`) shown when `name` is not set or not registered. Sized to the icon; draw with `currentColor` to follow `tone`.
+
+### Parts (`::part()`)
+
+- `icon` — The wrapper around the glyph.
+
 ## `<bs-icon-tile>`
 
 ### Slots
@@ -1050,8 +1162,10 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 ### Parts (`::part()`)
 
-- `field` — The bordered field wrapper containing the icon(s) and native control(s). `type="initials"` renders this part on TWO separate elements instead of one (the title `<select>`'s own small box, and the name `<input>`'s own box) -- Figma specs these as two genuinely independent bordered containers with a gap between them, not one shared field the way every other composite type (`country` included) renders, so `::part(field)` reaches whichever of the two a given selector context matches, same "multiple elements, one shared part name" convention as `bs-attachment`'s own `star` part.
-- `menu` — The `bs-menu` rendered below the field for `type="dropdown"` when `open` and `options` is non-empty.
+- `field` — The bordered field wrapper containing the icon(s) and native control(s). `type="initials"` renders this part on TWO separate elements instead of one (the title picker's own small box, and the name `<input>`'s own box) -- Figma specs these as two genuinely independent bordered containers with a gap between them, not one shared field the way every other composite type renders, so `::part(field)` reaches whichever of the two a given selector context matches, same "multiple elements, one shared part name" convention as `bs-attachment`'s own `star` part.
+- `menu` — The `bs-menu` rendered below the field for `type="dropdown"` when `open` and `options` is non-empty; for `type="combobox"` the popup (listbox + status message) while `open`.
+- `option` — A single `role="option"` row of the `type="combobox"` listbox.
+- `clear` — The clear button (`bs-icon-button`) of `type="combobox"`.
 - `label` — The `<label>` element.
 - `required` — The red `*` rendered after the label text when `required` is set.
 - `icon` — The leading icon wrapper element.
@@ -1138,6 +1252,18 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-keyboard-shortcuts-color` — Main text colour. Aliased to `--bs-text-default`.
 - `--bs-keyboard-shortcuts-color-secondary` — Titles, captions, footer. Aliased to `--bs-text-secondary`.
 
+## `<bs-link>`
+
+### Slots
+
+- `(default)` — Default slot: the link text.
+
+### Parts (`::part()`)
+
+- `link` — The anchor element.
+- `label` — The text wrapper.
+- `icon` — The external-link icon. // Note: CSS Custom Properties (--bs-link-*) are documented via @prop comments in bs-link.css.
+
 ## `<bs-list>`
 
 ### Slots
@@ -1164,6 +1290,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 ### Parts (`::part()`)
 
 - `container` — The row.
+- `marker` — The bullet or number drawn by a bulleted / numbered `bs-list`.
 - `leading` — Wrapper around the leading slot.
 - `content` — The text column.
 - `label` — The label line.
@@ -1451,7 +1578,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 ### Parts (`::part()`)
 
-- `trigger` — The wrapper around the trigger; carries aria-expanded/aria-haspopup/aria-controls.
+- `trigger` — The wrapper around the trigger. `aria-haspopup`/`aria-expanded` are set on the slotted trigger element itself, not on this wrapper.
 - `popup` — The popup surface.
 
 ### CSS custom properties
@@ -1563,6 +1690,20 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `label` — The label text wrapper.
 - `ripple` — The press-ripple halo (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-radio-*) are documented via @prop comments // in bs-radio.css, not here -- Stencil's docs generator only parses @prop out of CSS file // comments, not the class-level JSDoc (see bs-checkbox.tsx's equivalent note).
 
+## `<bs-radio-group>`
+
+### Slots
+
+- `(default)` — The `bs-radio` elements.
+
+### Parts (`::part()`)
+
+- `group` — The `role="radiogroup"` element.
+- `label` — The visible label.
+- `options` — The wrapper laying out the radios (column, or row when `orientation="horizontal"`).
+- `description` — The helper text (hidden while `error` is set).
+- `error` — The error message.
+
 ## `<bs-ripple>`
 
 ### Parts (`::part()`)
@@ -1610,6 +1751,19 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-search-item-color-disabled` — Aliased to `--bs-text-on-disabled`.
 - `--bs-search-item-icon-color` — Aliased to `--bs-icon-default`.
 
+## `<bs-select>`
+
+### Parts (`::part()`)
+
+- `label` — The label element.
+- `field` — The bordered combobox element.
+- `value` — The selected label (or placeholder).
+- `icon` — The chevron.
+- `listbox` — The popup listbox.
+- `option` — A single option row.
+- `description` — Helper text (hidden when `error` is set).
+- `error` — Error message. // Note: CSS Custom Properties (--bs-select-*) are documented via @prop comments in bs-select.css.
+
 ## `<bs-session-timeout>`
 
 ### Slots
@@ -1702,6 +1856,16 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-skeleton-gap` — Gap between text lines. Aliased to `--bs-spacing-100`.
 - `--bs-skeleton-duration` — Pulse duration. Defaults to `1.5s`.
 
+## `<bs-skip-link>`
+
+### Slots
+
+- `(default)` — Default slot: the link text. Falls back to "Skip to main content".
+
+### Parts (`::part()`)
+
+- `link` — The anchor element. // Note: CSS Custom Properties (--bs-skip-link-*) are documented via @prop comments in bs-skip-link.css.
+
 ## `<bs-slider>`
 
 ### Parts (`::part()`)
@@ -1818,6 +1982,21 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `--bs-stack-gap` — Space between items. Defaults from the `gap` prop (`--bs-spacing-<gap>`); may be overridden directly.
 
+## `<bs-stat>`
+
+### Slots
+
+- `icon` — Optional leading icon next to the label.
+- `(default)` — Extra content below the value, e.g. a caption or a sparkline.
+
+### Parts (`::part()`)
+
+- `container` — The card surface (`bs-card`).
+- `label` — The label.
+- `value` — The value.
+- `trend` — The trend row (arrow and change figure).
+- `trend-icon` — The trend arrow.
+
 ## `<bs-stepper>`
 
 ### Slots
@@ -1892,6 +2071,44 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `tablist` — The wrapping element carrying `role="tablist"`. // Note: this component's CSS Custom Properties (--bs-tabs-*) are documented via @prop comments in // bs-tabs.css, not here -- Stencil's docs generator only parses @prop out of CSS file comments, not // the class-level JSDoc (see bs-tab.tsx's equivalent note).
 
+## `<bs-table-of-contents>`
+
+### Slots
+
+- `(default)` — Default slot: anchors (`<a href="#id">`) used as entries when `items` is empty. Not displayed.
+
+### Parts (`::part()`)
+
+- `container` — The `<nav>` landmark.
+- `title` — The visible heading (unless `hideTitle`).
+- `list` — Every `<ul>` (top level and nested).
+- `item` — Every `<li>`.
+- `link` — Every anchor. The current one also matches `[aria-current]`. // Note: CSS Custom Properties (--bs-toc-*) are documented via @prop comments in bs-table-of-contents.css.
+
+## `<bs-tag>`
+
+### Slots
+
+- `(default)` — The tag label.
+- `icon` — Optional leading icon (16px).
+
+### Parts (`::part()`)
+
+- `container` — The tag surface.
+- `icon` — The icon wrapper.
+- `label` — The label (a link when `href` is set).
+- `remove` — The remove button (`bs-icon-button`), only when `removable`.
+
+## `<bs-text>`
+
+### Slots
+
+- `(default)` — The text.
+
+### Parts (`::part()`)
+
+- `text` — The rendered text element.
+
 ## `<bs-timepicker>`
 
 ### Parts (`::part()`)
@@ -1923,6 +2140,44 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `message` — The message text wrapper.
 - `close` — The close button.
 
+## `<bs-toggle-button>`
+
+### Slots
+
+- `icon` — Optional leading icon (24x24). With no default-slot text the button is icon-only and needs `ariaLabel`.
+- `(default)` — Default slot: the label text.
+
+### Parts (`::part()`)
+
+- `button` — The native button.
+- `icon` — The icon wrapper.
+- `label` — The label wrapper.
+- `ripple` — The press-ripple (a `bs-ripple`). // Note: CSS Custom Properties (--bs-toggle-button-*) are documented via @prop comments in the css file.
+
+## `<bs-toggle-button-group>`
+
+### Slots
+
+- `(default)` — `bs-toggle-button` segments.
+
+### Parts (`::part()`)
+
+- `group` — The segmented container. // Note: segment styling is `bs-toggle-button`'s own --bs-toggle-button-* custom properties.
+
+## `<bs-toolbar>`
+
+### Slots
+
+- `left` — The left (leading) group of controls.
+- `right` — The right (trailing) group of controls; pushed to the far end of the bar.
+
+### Parts (`::part()`)
+
+- `container` — The element carrying `role="toolbar"`.
+- `left` — The wrapper around the `left` slot.
+- `right` — The wrapper around the `right` slot.
+- `overflow` — The overflow `bs-popover` (only rendered when `overflow` is set). // Note: CSS Custom Properties (--bs-toolbar-*) are documented via @prop comments in bs-toolbar.css.
+
 ## `<bs-tooltip>`
 
 ### Slots