@brandsync/wc 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @brandsync/wc
 
+## 1.19.0
+
+### Minor Changes
+
+- e0fb531: Add `bs-presence`, a slot wrapper that fades, slides, scales, or collapses its content when `active` changes. Duration and easing map to the existing motion tokens, and reduced motion snaps the transition to instant.
+- e0fb531: Add `bs-ripple`, a press-ripple building block, and use it in `bs-button`, `bs-icon-button`, `bs-chip-filter`, `bs-chip-input`, `bs-tab`, `bs-inline-tab`, `bs-menu-item`, `bs-list-item`, `bs-search-item`, `bs-tree-item`, `bs-pagination`, `bs-source-link`, `bs-chatbot-suggestion-button`, `bs-chatbot-response-action`, `bs-switch`, `bs-checkbox` and `bs-radio` (each exposes it as `::part(ripple)`). `bs-accordion` now animates its body height and rotates the caret when `expanded` changes (new `--bs-accordion-duration` and `--bs-accordion-easing`). `bs-carousel` slides now fade and slide out and in between pages, and the dots animate (new `--bs-carousel-duration`, `--bs-carousel-easing` and `--bs-carousel-slide-distance`). `bs-dialog`, `bs-side-panel` and `bs-popover` now animate open and close (new `--bs-dialog-*`, `--bs-side-panel-duration`/`-easing` and `--bs-popover-duration`/`-easing`/`-distance`), staying mounted until the exit finishes. All of it follows the motion tokens, and reduced motion turns them off.
+- c3cd521: `bs-tooltip-trigger` now fades its tooltip in and out with a small drift away from the trigger (new `--bs-tooltip-trigger-duration`, `--bs-tooltip-trigger-easing` and `--bs-tooltip-trigger-distance`). `bs-mega-menu` has a new optional `open` prop that fades and drops the panel in and out, keeping it mounted until the exit finishes (new `--bs-mega-menu-duration`, `--bs-mega-menu-easing` and `--bs-mega-menu-distance`); the host `hidden` attribute still shows and hides it instantly, and `hidden` wins over `open`. Reduced motion turns both off.
+
 ## 1.18.0
 
 ### Minor Changes

package/REFERENCE.md

@@ -19,6 +19,11 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `caret` — The trailing caret wrapper.
 - `content` — The body content wrapper.
 
+### CSS custom properties
+
+- `--bs-accordion-duration` — Length of the expand/collapse motion. Aliased to `--bs-duration-default`.
+- `--bs-accordion-easing` — Curve of the expand/collapse motion. Aliased to `--bs-easing-standard`. Expanding and collapsing animate the body's height and rotate the caret. Under `prefers-reduced-motion: reduce` the duration token is `0ms`, so the body snaps.
+
 ## `<bs-accordion-group>`
 
 ### Slots
@@ -296,12 +301,13 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 ### Slots
 
-- `(default)` — Default slot: the button's label content.
+- `(default)` — Default slot: the button's label content. Built from: `bs-ripple` (press feedback).
 - `icon` — Optional leading icon, rendered before the label.
 - `end-icon` — Optional trailing icon, rendered after the label.
 
 ### Parts (`::part()`)
 
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `bs-button::part(ripple) { --bs-ripple-color: ...; }` (also `--bs-ripple-opacity`, `--bs-ripple-duration`).
 - `icon` — The icon wrapper element.
 - `label` — The text label element.
 - `end-icon` — The trailing icon wrapper element.
@@ -329,7 +335,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 ### Parts (`::part()`)
 
-- `icon` — The icon wrapper element. // Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop // comments in bs-icon-button.css, not here -- Stencil's docs generator only parses @prop out of // CSS file comments, not the class-level JSDoc (see bs-tab.css's/bs-inline-tab.css's equivalent note).
+- `icon` — The icon wrapper element.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-icon-button-*) are documented via @prop // comments in bs-icon-button.css, not here -- Stencil's docs generator only parses @prop out of // CSS file comments, not the class-level JSDoc (see bs-tab.css's/bs-inline-tab.css's equivalent note).
 
 ## `<bs-button-skeleton>`
 
@@ -470,6 +477,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `regenerate` — The "Regenerate" icon button.
 - `menu` — The "More options" icon button.
 - `sources` — The "N sources" button (only rendered when `sourcesCount` is set).
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -526,6 +534,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 ### Parts (`::part()`)
 
 - `button` — The button element.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -565,7 +574,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `box` — The visual checkbox square.
 - `icon` — The check/minus icon shown inside the box when `checked` or `indeterminate`.
-- `label` — The label text wrapper. // 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).
+- `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-chip-filter>`
 
@@ -579,6 +589,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `icon` — The icon wrapper element.
 - `label` — The text label element.
 - `caret` — The dropdown caret wrapper element, when `dropdown` is set.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ## `<bs-chip-informative>`
 
@@ -605,6 +616,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `icon` — The icon wrapper element.
 - `label` — The text label element.
 - `remove` — The trailing remove button.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ## `<bs-citation-preview>`
 
@@ -877,7 +889,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `header` — The header row (heading + close button, when the close button isn't floating).
 - `close` — The close button (inline in the header, or floating -- see the class doc above).
 - `body` — The body content wrapper.
-- `footer` — The footer wrapper (only visible when the footer slot has content).
+- `footer` — The footer wrapper (only visible when the footer slot has content). Opening fades the backdrop in and lifts the dialog into place; closing plays the same motion in reverse before the dialog is removed. Length, curve and travel are `--bs-dialog-duration`, `--bs-dialog-easing` and `--bs-dialog-distance`. Under `prefers-reduced-motion: reduce` it is instant.
 
 ## `<bs-divider>`
 
@@ -1158,6 +1170,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `description` — The description line.
 - `support-text` — The support text line.
 - `trailing` — Wrapper around the trailing slot / caret.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -1222,6 +1235,9 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-mega-menu-heading-color` — Column headings. Aliased to `--bs-text-muted`.
 - `--bs-mega-menu-text-color` — Featured title. Aliased to `--bs-text-default`.
 - `--bs-mega-menu-muted-color` — Featured description and footer text. Aliased to `--bs-text-secondary`.
+- `--bs-mega-menu-duration` — Length of the open/close motion (`open` only). Aliased to `--bs-duration-default`.
+- `--bs-mega-menu-easing` — Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+- `--bs-mega-menu-distance` — How far the panel drops while it fades. Aliased to `--bs-spacing-100`. Under `prefers-reduced-motion: reduce` (or a duration of `0ms`) setting `open` shows and hides the panel instantly.
 
 ## `<bs-menu>`
 
@@ -1281,6 +1297,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `item` — The button element.
 - `icon` — The icon wrapper.
 - `label` — The label wrapper.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -1423,6 +1440,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `page` — Each page-number button.
 - `current` — The current page's button (in addition to `page`).
 - `ellipsis` — Each collapsed-range indicator.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ## `<bs-popover>`
 
@@ -1444,6 +1462,26 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-popover-offset` — Gap between trigger and popup. Aliased to `--bs-spacing-100`.
 - `--bs-popover-min-width` — Minimum popup width. Aliased to `--bs-scale-1600`.
 - `--bs-popover-z-index` — Popup stacking order. Aliased to `--bs-z-index-popover`.
+- `--bs-popover-duration` — Length of the open/close motion. Aliased to `--bs-duration-fast`.
+- `--bs-popover-easing` — Curve of the open/close motion. Aliased to `--bs-easing-standard`.
+- `--bs-popover-distance` — How far the popup nudges while it fades. Aliased to `--bs-spacing-50`. The popup fades and nudges toward its trigger when it opens and closes. Length, curve and travel are `--bs-popover-duration`, `--bs-popover-easing` and `--bs-popover-distance`; under `prefers-reduced-motion: reduce` it is instant.
+
+## `<bs-presence>`
+
+### Slots
+
+- `(default)` — The content to show and hide.
+
+### Parts (`::part()`)
+
+- `content` — The element that transitions. Style it with `::part(content)`.
+
+### CSS custom properties
+
+- `--bs-presence-duration` — Transition length. Set from the `duration` prop to a `--bs-duration-*` token.
+- `--bs-presence-easing` — Transition curve. Set from the `easing` prop to a `--bs-easing-*` token.
+- `--bs-presence-distance` — Travel distance for `slide-up` and `slide-down`. Aliased to `--bs-spacing-400`.
+- `--bs-presence-scale` — Closed scale for `scale`. No unitless scale token exists, so the default is `0.96`.
 
 ## `<bs-product-tour>`
 
@@ -1522,7 +1560,21 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `circle` — The visual radio ring.
 - `dot` — The center fill shown inside the ring when `checked`.
-- `label` — The label text wrapper. // 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).
+- `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-ripple>`
+
+### Parts (`::part()`)
+
+- `surface` — The clipping layer the ripple circles are drawn in.
+
+### CSS custom properties
+
+- `--bs-ripple-color` — Ripple colour. `currentColor` by default, so it follows the parent's text colour and works on every variant.
+- `--bs-ripple-opacity` — Starting opacity of the ripple. No opacity token fits, so the default is `0.24`.
+- `--bs-ripple-duration` — Length of the ripple. Aliased to `--bs-duration-slower`.
+- `--bs-ripple-easing` — Curve of the ripple. Aliased to `--bs-easing-decelerate`.
 
 ## `<bs-search-item>`
 
@@ -1541,6 +1593,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `label` — The primary line.
 - `description` — The description line.
 - `trailing` — The trailing text wrapper.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -1629,6 +1682,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `--bs-side-panel-overlay-bg` — Backdrop color. Aliased to `--bs-surface-overlay`.
 - `--bs-side-panel-color` — Text color. Aliased to `--bs-text-default`.
 - `--bs-side-panel-z-index` — Stacking order. Aliased to `--bs-z-index-modal`.
+- `--bs-side-panel-duration` — Length of the slide in/out. Aliased to `--bs-duration-slow`.
+- `--bs-side-panel-easing` — Curve of the slide in/out. Aliased to `--bs-easing-standard`.
 
 ## `<bs-skeleton>`
 
@@ -1686,6 +1741,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `source` — The source system name.
 - `version` — The version label.
 - `arrow` — The trailing "open" arrow icon.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ### CSS custom properties
 
@@ -1792,7 +1848,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `track` — The visual pill-shaped track.
 - `knob` — The sliding circular knob.
-- `label` — The label text wrapper. // Note: this component's CSS Custom Properties are documented via @prop comments in // bs-switch.css, not here.
+- `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 are documented via @prop comments in // bs-switch.css, not here.
 
 ## `<bs-inline-tab>`
 
@@ -1805,7 +1862,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `tab` — The button element.
 - `icon` — The icon wrapper.
-- `label` — The label wrapper. // Note: this component's CSS Custom Properties (--bs-inline-tab-*) are documented via @prop // comments in bs-inline-tab.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).
+- `label` — The label wrapper.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-inline-tab-*) are documented via @prop // comments in bs-inline-tab.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-tab>`
 
@@ -1821,7 +1879,8 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `icon` — The icon wrapper.
 - `label` — The label wrapper.
 - `badge` — The badge wrapper.
-- `indicator` — The selection/hover underline indicator. // Note: this component's CSS Custom Properties (--bs-tab-*) are documented via @prop comments in // bs-tab.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/bs-radio.tsx's equivalent note).
+- `indicator` — The selection/hover underline indicator.
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`. // Note: this component's CSS Custom Properties (--bs-tab-*) are documented via @prop comments in // bs-tab.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/bs-radio.tsx's equivalent note).
 
 ## `<bs-tabs>`
 
@@ -1902,6 +1961,9 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 
 - `--bs-tooltip-trigger-offset` — Gap between trigger and tooltip. Aliased to `--bs-spacing-100`.
 - `--bs-tooltip-trigger-z-index` — Stacking order. Aliased to `--bs-z-index-popover`.
+- `--bs-tooltip-trigger-duration` — Length of the show/hide motion. Aliased to `--bs-duration-fast`.
+- `--bs-tooltip-trigger-easing` — Curve of the show/hide motion. Aliased to `--bs-easing-standard`.
+- `--bs-tooltip-trigger-distance` — How far the tooltip nudges while it fades. Aliased to `--bs-spacing-50`. The tooltip fades in while drifting a few pixels away from the trigger into place, and fades back out toward it. Under `prefers-reduced-motion: reduce` (or a duration of `0ms`) it appears and disappears instantly.
 
 ## `<bs-tree>`
 
@@ -1928,6 +1990,7 @@ Generated from component JSDoc by `scripts/generate-reference.mjs`. Do not edit
 - `icon` — The icon wrapper.
 - `label` — The label wrapper.
 - `group` — The `role="group"` wrapper around the child items (while expanded).
+- `ripple` — The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
 
 ## `<bs-whats-new>`