@brandsync/wc 1.2.0 → 1.4.0

package/dist/collection/components/bs-snackbar/bs-snackbar.css

@@ -10,37 +10,21 @@
  * @prop --bs-snackbar-actions-padding-y: Top/bottom padding of the actions area. Aliased to --bs-spacing-50.
  * @prop --bs-snackbar-actions-padding-x: Right padding of the actions area (the bar's own right edge). Aliased to --bs-spacing-100.
  * @prop --bs-snackbar-actions-gap: Gap between the action button and the close button. Aliased to --bs-spacing-50.
- * @prop --bs-snackbar-action-radius: Corner radius of the action button. Aliased to --bs-border-radius-100.
- * @prop --bs-snackbar-action-font-size: Action button font size. Aliased to --bs-font-size-sm.
- * @prop --bs-snackbar-action-font-weight: Action button font weight. Aliased to --bs-font-weight-medium.
- * @prop --bs-snackbar-action-line-height: Action button line height. Aliased to --bs-line-height-body-sm.
- * @prop --bs-snackbar-close-radius: Corner radius of the close button. Aliased to --bs-border-radius-100.
  * @prop --bs-snackbar-surface-default: Bar background, variant="default". Aliased to --bs-snackbar-bg-default (brandsync-tokens).
  * @prop --bs-snackbar-color-default: Icon/message/close color, variant="default". Aliased to --bs-snackbar-text-default (brandsync-tokens) -- named "-color-", not "-text-", solely to avoid colliding with that vendored token's own name.
- * @prop --bs-snackbar-action-border-default: Action button border, variant="default" (outlined, not filled). Aliased to --bs-blue-300.
- * @prop --bs-snackbar-action-text-default: Action button text, variant="default". Aliased to --bs-snackbar-action-text (brandsync-tokens).
  * @prop --bs-snackbar-surface-info: Bar background, variant="info". Aliased to --bs-color-info-container.
  * @prop --bs-snackbar-text-info: Icon/message/close color, variant="info". Aliased to --bs-text-info.
- * @prop --bs-snackbar-action-bg-info: Action button background, variant="info". Aliased to --bs-snackbar-bg-info (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-info-hover: Action button background, variant="info", hover. Aliased to --bs-color-info-hover.
- * @prop --bs-snackbar-action-bg-info-pressed: Action button background, variant="info", pressed. Aliased to --bs-color-info-pressed.
  * @prop --bs-snackbar-surface-warning: Bar background, variant="warning". Aliased to --bs-color-warning-container.
  * @prop --bs-snackbar-text-warning: Icon/message/close color, variant="warning". Aliased to --bs-text-warning.
- * @prop --bs-snackbar-action-bg-warning: Action button background, variant="warning". Aliased to --bs-snackbar-bg-warning (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-warning-hover: Action button background, variant="warning", hover. Aliased to --bs-color-warning-hover.
- * @prop --bs-snackbar-action-bg-warning-pressed: Action button background, variant="warning", pressed. Aliased to --bs-color-warning-pressed.
  * @prop --bs-snackbar-surface-success: Bar background, variant="success". Aliased to --bs-color-success-container.
  * @prop --bs-snackbar-text-success: Icon/message/close color, variant="success". Aliased to --bs-text-success.
- * @prop --bs-snackbar-action-bg-success: Action button background, variant="success". Aliased to --bs-snackbar-bg-success (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-success-hover: Action button background, variant="success", hover. Aliased to --bs-color-success-hover.
- * @prop --bs-snackbar-action-bg-success-pressed: Action button background, variant="success", pressed. Aliased to --bs-color-success-pressed.
  * @prop --bs-snackbar-surface-error: Bar background, variant="error". Aliased to --bs-color-error-container.
  * @prop --bs-snackbar-text-error: Icon/message/close color, variant="error". Aliased to --bs-text-error.
- * @prop --bs-snackbar-action-bg-error: Action button background, variant="error". Aliased to --bs-snackbar-bg-error (brandsync-tokens).
- * @prop --bs-snackbar-action-bg-error-hover: Action button background, variant="error", hover. Aliased to --bs-color-error-hover.
- * @prop --bs-snackbar-action-bg-error-pressed: Action button background, variant="error", pressed. Aliased to --bs-color-error-pressed.
- * @prop --bs-snackbar-action-text-on-action: Action button text, every colored (filled) variant. Aliased to --bs-text-on-action.
  * @prop --bs-snackbar-spinner-track: Loading spinner's background ring. Aliased to --bs-neutral-200.
+ *
+ * The action/close buttons are composed from bs-button/bs-icon-button (see bs-snackbar.tsx) --
+ * their own fill colors, hover/pressed states, and focus rings are governed by THOSE components'
+ * own custom properties (--bs-button-*, --bs-icon-button-*), not duplicated here.
  */
 :host {
   display: inline-flex;
@@ -59,13 +43,6 @@
   --bs-snackbar-actions-padding-x: var(--bs-spacing-100);
   --bs-snackbar-actions-gap: var(--bs-spacing-50);
 
-  --bs-snackbar-action-radius: var(--bs-border-radius-100);
-  --bs-snackbar-action-font-size: var(--bs-font-size-sm);
-  --bs-snackbar-action-font-weight: var(--bs-font-weight-medium);
-  --bs-snackbar-action-line-height: var(--bs-line-height-body-sm);
-
-  --bs-snackbar-close-radius: var(--bs-border-radius-100);
-
   --bs-snackbar-surface-default: var(--bs-snackbar-bg-default);
   /* Named "-color-", not "-text-", solely to avoid a self-referential cycle: the brandsync-tokens
      vendored token is ALSO literally named --bs-snackbar-text-default, so declaring a property of
@@ -73,34 +50,19 @@
      per the CSS spec -- the property would compute to its initial value (nothing), not fall back
      to the vendored one. */
   --bs-snackbar-color-default: var(--bs-snackbar-text-default);
-  --bs-snackbar-action-border-default: var(--bs-blue-300);
-  --bs-snackbar-action-text-default: var(--bs-snackbar-action-text);
 
   --bs-snackbar-surface-info: var(--bs-color-info-container);
   --bs-snackbar-text-info: var(--bs-text-info);
-  --bs-snackbar-action-bg-info: var(--bs-snackbar-bg-info);
-  --bs-snackbar-action-bg-info-hover: var(--bs-color-info-hover);
-  --bs-snackbar-action-bg-info-pressed: var(--bs-color-info-pressed);
 
   --bs-snackbar-surface-warning: var(--bs-color-warning-container);
   --bs-snackbar-text-warning: var(--bs-text-warning);
-  --bs-snackbar-action-bg-warning: var(--bs-snackbar-bg-warning);
-  --bs-snackbar-action-bg-warning-hover: var(--bs-color-warning-hover);
-  --bs-snackbar-action-bg-warning-pressed: var(--bs-color-warning-pressed);
 
   --bs-snackbar-surface-success: var(--bs-color-success-container);
   --bs-snackbar-text-success: var(--bs-text-success);
-  --bs-snackbar-action-bg-success: var(--bs-snackbar-bg-success);
-  --bs-snackbar-action-bg-success-hover: var(--bs-color-success-hover);
-  --bs-snackbar-action-bg-success-pressed: var(--bs-color-success-pressed);
 
   --bs-snackbar-surface-error: var(--bs-color-error-container);
   --bs-snackbar-text-error: var(--bs-text-error);
-  --bs-snackbar-action-bg-error: var(--bs-snackbar-bg-error);
-  --bs-snackbar-action-bg-error-hover: var(--bs-color-error-hover);
-  --bs-snackbar-action-bg-error-pressed: var(--bs-color-error-pressed);
 
-  --bs-snackbar-action-text-on-action: var(--bs-text-on-action);
   --bs-snackbar-spinner-track: var(--bs-neutral-200);
 }
 
@@ -206,116 +168,7 @@
   padding: var(--bs-snackbar-actions-padding-y) var(--bs-snackbar-actions-padding-x) var(--bs-snackbar-actions-padding-y) 0;
 }
 
-.bs-snackbar__action {
-  height: 32px;
-  padding: 0 var(--bs-spacing-150);
-  border-radius: var(--bs-snackbar-action-radius);
-  font-family: inherit;
-  font-size: var(--bs-snackbar-action-font-size);
-  font-weight: var(--bs-snackbar-action-font-weight);
-  line-height: calc(var(--bs-snackbar-action-line-height) * 1px);
-  white-space: nowrap;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-}
-
-/* default is the only variant whose action button is outlined (transparent, bordered) rather than
-   filled -- matches the Figma spec's dark neutral bar using a lighter bordered button instead of a
-   solid fill, since a solid fill would need its own distinct color unrelated to the bar's own dark
-   surface. */
-.bs-snackbar--default .bs-snackbar__action {
-  border: 1px solid var(--bs-snackbar-action-border-default);
-  color: var(--bs-snackbar-action-text-default);
-}
-
-.bs-snackbar--info .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-info);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--info .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-info-hover);
-}
-.bs-snackbar--info .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-info-pressed);
-}
-
-.bs-snackbar--warning .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-warning);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--warning .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-warning-hover);
-}
-.bs-snackbar--warning .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-warning-pressed);
-}
-
-.bs-snackbar--success .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-success);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--success .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-success-hover);
-}
-.bs-snackbar--success .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-success-pressed);
-}
-
-.bs-snackbar--error .bs-snackbar__action {
-  background: var(--bs-snackbar-action-bg-error);
-  color: var(--bs-snackbar-action-text-on-action);
-}
-.bs-snackbar--error .bs-snackbar__action:hover {
-  background: var(--bs-snackbar-action-bg-error-hover);
-}
-.bs-snackbar--error .bs-snackbar__action:active {
-  background: var(--bs-snackbar-action-bg-error-pressed);
-}
-
-.bs-snackbar__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  flex-shrink: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  border-radius: var(--bs-snackbar-close-radius);
-  color: inherit;
-  cursor: pointer;
-}
-
-.bs-snackbar__close svg {
-  width: 24px;
-  height: 24px;
-}
-
-/* Hover/active feedback for the close button (every variant) and the default variant's outlined
-   action button -- both have a transparent background with only text/border color, so there's no
-   solid fill to darken the way the filled colored-variant action buttons above do. `opacity` was
-   tried here first and was wrong: dimming a transparent element's opacity blends it TOWARD
-   whatever's behind it, which on the light pastel info/warning/success/error surfaces made a
-   "pressed" dark-colored button look LIGHTER/washed-out -- backwards from a pressed state. A
-   `color-mix()` tint using `currentColor` fixes that (a real added tint, not a blend-toward-behind)
-   while still doing the right thing on the dark `default` surface, where content is white and a
-   light-tint hover is the correct/expected direction (same idea as a ripple highlight on a dark
-   surface). Also automatically matches whichever variant's color is active, no separate per-variant
-   hover token needed here. */
-.bs-snackbar--default .bs-snackbar__action:hover,
-.bs-snackbar__close:hover {
-  background: color-mix(in srgb, currentColor 12%, transparent);
-}
-
-.bs-snackbar--default .bs-snackbar__action:active,
-.bs-snackbar__close:active {
-  background: color-mix(in srgb, currentColor 24%, transparent);
-}
-
-.bs-snackbar__action:focus-visible,
-.bs-snackbar__close:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-}
+/* The action/close buttons are now composed from the shared bs-button/bs-icon-button components
+   (see bs-snackbar.tsx) instead of hand-rolled <button> markup -- all the button-level styling
+   (fill colors, hover/pressed states, focus rings, and slotted-icon sizing) lives in those
+   components' own CSS, so there's nothing left to style here. */

package/dist/collection/components/bs-snackbar/bs-snackbar.js

@@ -1,4 +1,14 @@
 import { h } from "@stencil/core";
+// Maps each snackbar variant to the bs-button variant its action button composes -- 'default'
+// (the dark neutral bar) uses 'outlined' since there's no bs-button variant tuned for a dark
+// surface; every colored variant maps 1:1 to the same-named bs-button variant.
+const ACTION_VARIANT = {
+    default: 'outlined',
+    info: 'info',
+    warning: 'warning',
+    success: 'success',
+    error: 'error',
+};
 /**
  * A transient status bar for confirming the result of an action (e.g. "Files uploaded
  * successfully.") -- an icon (or loading spinner), a message, an optional action, and a close
@@ -51,7 +61,7 @@ export class BsSnackbar {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '3dc0997bd057ef72d7322d28ad5c561fb5e24730', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '3b77e4ac957cd73368883afbb7b47fb5cc46966b', class: "bs-snackbar__content" }, h("span", { key: '45a8c01714b0a3bec9ffcc470a83959a1d9f0539', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '6738316060e8da63c45ceda8ec2a2fce0dbcbc24', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'f88fe59ad8c970a222b2349a86df8c9ccb2836ab' }))), h("div", { key: '171fa694e2faccca014bb75234958cd458b17fe7', class: "bs-snackbar__actions" }, this.actionLabel && (h("button", { key: '2f529c556bbc9b6d01fddb23b434a6e381f38529', part: "action", type: "button", class: "bs-snackbar__action", onClick: this.onAction }, this.actionLabel)), h("button", { key: '1f45a977afdd80ee603e122fe8ac36b8161d6ee3', part: "close", type: "button", class: "bs-snackbar__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'f16229c70fdbd0329e4a91fe7fbbf58e43e7870f' })))));
+        return (h("div", { key: 'c1eb9a40025848cfe32c54b699c767fd776106cd', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'eed7f9493d6b92033682b5be7704ceab16f68e39', class: "bs-snackbar__content" }, h("span", { key: 'd05b9efc5e1a641ec4f760e65fb6c7ce73986a96', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '63ed931a3f99d4606394380cee69ca8357aaefda', part: "message", class: "bs-snackbar__message" }, h("slot", { key: '103d0dbe2c62f95f49fec719ea4789736faa9968' }))), h("div", { key: 'aad9025a2d6d53dcbed35d787ab13209c428dbac', class: "bs-snackbar__actions" }, this.actionLabel && (h("bs-button", { key: '2aa411a52c800a3861faf5e01c64e367ef34d3b3', part: "action", variant: ACTION_VARIANT[this.variant], size: "sm", onClick: this.onAction }, this.actionLabel)), h("bs-icon-button", { key: '8a9d212a597c98c612c8f0245c510cc5c5b821be', part: "close", variant: "subtle", size: "md", ariaLabel: "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '0669382c520a2a9d71fa22ede719a9b90ba20b74' })))));
     }
     static get is() { return "bs-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-source-link/bs-source-link.js

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '2729f16097550b7d60f116006c0cce86085e7fe4', class: "bs-source-link__left" }, h("span", { key: 'ba631a3a1c9c42e855dcbeb9554808dbb1b1f564', class: "bs-source-link__filename-row" }, h("span", { key: '324fec2cf91add6f8b7d7a5eeecfb8d5bcf8d087', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '504e4702cfe7c49c1c8186f12e5e893dc0cf166d', name: "icon" }, h(FileTextIcon, { key: 'c7eeca554f6b7fa7b4a7091676ccf6344292abc4' }))), h("p", { key: '7631367fe476e307120ea7e6f0f529016bbc86f7', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'd67eaeb3e770d9119698bafe8f5c952b99999f5d', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '67a08ca2742a10ac99734724e6a4ff0e1abfe870', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '5416ffb3915e03d901901455a47fd97ee7eadde5', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: '2c404027613850e260f93ed561306aa73a9eefd0', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '92e95ac26643f3035dc827a568512032622071e3', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'baf53b5ec528ddf042f1717efdf51658a03aae3f' })),
+            h("span", { key: '8cff33c76d9d1d575c48f7088767f7d18b4d73a1', class: "bs-source-link__left" }, h("span", { key: 'aaa27ac4227afcd7b312b9576c625c54f3e603fe', class: "bs-source-link__filename-row" }, h("span", { key: '999466d6ed1910958f03328adcca796db65243ac', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '65f62019fc6c1b50999a568c54cd3ca00139ee59', name: "icon" }, h(FileTextIcon, { key: '7e3d61345cbbe78267440be6fc89773dc2e80a66' }))), h("p", { key: '8505506cc58f4253d472eed1b95625103031fcdc', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: '89803f29243068cf4f6725d728b299eddd960e8d', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '86e1936b8fc642817e60c6bbb3b52d4cb40c1987', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'c865f4b4004138a5b0aa8b730813d246f229edf4', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'a63eb0e9a935f7cd13bdc3b4beb6dcac1767092e', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: '403063bde49a647031683cdddfe9f9b3bd6cbe7e', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: 'e8f9b58ab3e9ad35239423f9fcef3426905af932' })),
         ];
         return this.href ? (h("a", { class: "bs-source-link", href: this.href, target: this.target, rel: "noopener noreferrer", onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "bs-source-link", onClick: this.onClick }, inner));
     }

package/dist/collection/components/bs-stepper/bs-stepper/bs-stepper.js

@@ -61,7 +61,7 @@ export class BsStepper {
         });
     }
     render() {
-        return h("slot", { key: 'e897ba6e9153f8449bb5189245a22153d0e7e02e', onSlotchange: this.onSlotChange });
+        return h("slot", { key: '02937ad4080ab9309a5a6a7d63d9e5ee9d15e75a', onSlotchange: this.onSlotChange });
     }
     static get is() { return "bs-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-stepper/bs-stepper-step/bs-stepper-step.js

@@ -57,7 +57,7 @@ export class BsStepperStep {
     }
     render() {
         const state = this.state;
-        return (h(Host, { key: '23bdc6334a36d9b2dd28719b9b23fbc17ad8f29b', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: '388e17882bb5215c33e0665107acbcff5c7b4c9c', class: "bs-stepper-step__top" }, h("span", { key: '6cf79ab50a94f9578e76f14ca23cdfa984ef394b', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: '8081181e8865a29f703c74d5a20183513bdf2b66', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '92755c827c9c09b1bae504daabd2067fc498b355' }), state === 'error' && h(ExclamationIcon, { key: '62ac0a0826b8f8b507fcd0a7c47bff3c39f804b4' })), h("span", { key: 'a1c15ede35ab01d876a0289552dffc37c75626d1', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: '5029f8f629af1091bcb8fa2a47ebe12a7bd6628e', class: "bs-stepper-step__connector-line" }))), h("span", { key: '3835e986646f619751043ab0eeb1b5d977f22a58', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: '5da4053ea5ecf588853b5d9678737a67b7aadbe1', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: 'd5544b97eefe9311ac13f0cbcd4bf6d87bc24ca5', part: "description", class: "bs-stepper-step__description" }, this.description)))));
+        return (h(Host, { key: 'f0c04f84a90573ee21e50a9f098539d94bf26624', role: "listitem", class: `bs-stepper-step--${this.direction}` }, h("div", { key: 'a55763b9c34fedb267b1e748df5f533713752074', class: "bs-stepper-step__top" }, h("span", { key: '206ece8ec0ffa8d47409f8a26a2690ae952ee51d', part: "icon", class: `bs-stepper-step__icon bs-stepper-step__icon--${state}` }, state === 'current' && h("span", { key: 'a5fd7021163730fd8b58cbbdaec2f1f0a387fb88', class: "bs-stepper-step__icon-dot" }), state === 'done' && h(CheckIcon, { key: '83b594e1a10d83ffe3f9f49cae59334b9a8a55f2' }), state === 'error' && h(ExclamationIcon, { key: '5f033b26ae0a1e9f14d5a2b4f5f8491ab8e53e6b' })), h("span", { key: '958bf5f997011b76e0450ebdae678aa65bd6760f', part: "connector", class: "bs-stepper-step__connector", "aria-hidden": "true" }, h("span", { key: 'a9bd18dd6358559fe9b9c05439e7f0be537a6792', class: "bs-stepper-step__connector-line" }))), h("span", { key: 'e8b9b0e3ac81ed00ff443eeb40c26a99a7af3c0d', part: "label", class: `bs-stepper-step__label bs-stepper-step__label--${state}` }, h("span", { key: 'e4a675a45ee3202fb5c5ee010e25a77018b8ac5c', part: "name", class: "bs-stepper-step__name" }, this.name), this.showDescription && this.description && (h("span", { key: '25551051646a9aefacf031f5921c57edf093426e', part: "description", class: "bs-stepper-step__description" }, this.description)))));
     }
     static get is() { return "bs-stepper-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-switch/bs-switch.js

@@ -58,7 +58,7 @@ export class BsSwitch {
         const knobClasses = ['bs-switch__knob', `bs-switch__knob--${this.size}`, this.disabled ? 'bs-switch__knob--disabled' : '']
             .filter(Boolean)
             .join(' ');
-        return (h("label", { key: '72a1a031e9ed8763a2b60f3c23de18973cc7409d', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '90427f6930abcb294526caa912331a568f6eaaeb', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'be4eb4528f413527e67f38201c20ca86eeef37c1', part: "track", class: trackClasses }, h("span", { key: '030a60024a77bfae2f78a40128dd62a8581f5fd1', part: "knob", class: knobClasses })), h("span", { key: '5792002eed1c0489a1456e362f0fd3c290522834', part: "label", class: "bs-switch__label" }, h("slot", { key: '9dadf202bcde1760dcda56ca84155ecdb117b746' }))));
+        return (h("label", { key: '4e0abb3231caa07b7218bc69745c822dfd9a66f2', class: `bs-switch ${this.disabled ? 'bs-switch--disabled' : ''}` }, h("input", { key: '04d56f220629b90573469b78070f2ecb420fae92', class: "bs-switch__input", type: "checkbox", role: "switch", checked: this.checked, disabled: this.disabled, "aria-checked": String(this.checked), "aria-label": this.ariaLabel, onChange: this.onChange }), h("span", { key: 'e4b06fc5c17edca3d4f60d0f378c9d0779167617', part: "track", class: trackClasses }, h("span", { key: 'ce10e1a250a06d8ec850fde56064d3d5e1b9ab68', part: "knob", class: knobClasses })), h("span", { key: '6d9514c041e18206029438680fd5093e4f5b29f5', part: "label", class: "bs-switch__label" }, h("slot", { key: '431bf8fd5581cda363eb0f2dac410b177ae7639d' }))));
     }
     static get is() { return "bs-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-inline-tab/bs-inline-tab.js

@@ -86,7 +86,7 @@ export class BsInlineTab {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (h("button", { key: '613b3ae3cfc8f3589a4c98d834cebadeb7d251c2', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: 'ee761ca1154bc2c111f5691dc2958f191ec75170', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: '2387c2f156ba8207ab337e8f32662a50765b70c4', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'e5c4ede4855ba79deffb7566c178c3339605b56c', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: '20d73f50caad707f3f5b6853bbda906ced0e3620', onSlotchange: this.onLabelSlotchange }))));
+        return (h("button", { key: 'dbdf837d83a8c07e65b70f1eb6a3c8de6078214c', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '3e45469cbf9833177b8856f9d5fa061de9f14ce5', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, h("slot", { key: 'fe9714c3e47cd6e4a752514279a6d96b92650cf8', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '2c5543f2daa2800ffcb4e5f33137403102e40e74', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, h("slot", { key: 'f67133602a0c75af9263d5e56f9b5e2479cead4d', onSlotchange: this.onLabelSlotchange }))));
     }
     static get is() { return "bs-inline-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-tab/bs-tab.js

@@ -99,7 +99,7 @@ export class BsTab {
         const iconOnly = this.hasIcon && !this.hasLabel;
         const vertical = this.hasIcon && this.hasLabel && this.iconPosition === 'top';
         const showBadge = this.hasBadge && !iconOnly && !vertical;
-        return (h("button", { key: '108e2a145203f9686056af4ef0afaccb9d2db30a', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '16ac002486b78656a93cdb79ec2c496784fc97bd', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: '18eb1f6346db1658af06d4fd0fe3b9e647459abe', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'f97b7760370940a57d240635aa5680ffab053be8', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '2ba740311a892af6d6db0d84ad0f126ca35c48de', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'f1090ed9db4149673c29d1e62ec62db024c50868', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'a594d11d28f47d5e2665d3f1378892f8fb68c4aa', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '1fd376b6321eeeec0e0a67000bd0c9d5166f9a40', part: "indicator", class: "bs-tab__indicator" })));
+        return (h("button", { key: '0ca426eb442e8ecd8a02d532eae0a7e0fa78e0c7', type: "button", part: "tab", role: "tab", class: `bs-tab ${this.selected ? 'bs-tab--selected' : ''} ${this.disabled ? 'bs-tab--disabled' : ''} ${iconOnly ? 'bs-tab--icon-only' : ''} ${vertical ? 'bs-tab--vertical' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, h("span", { key: '507e8d2f216142177aea162ae42ae56ce84f8759', part: "icon", class: `bs-tab__icon ${this.hasIcon ? 'bs-tab__icon--has-content' : ''}` }, h("slot", { key: 'ee418438e7f95362be5e5ed701d20d6fc0c300f4', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '5dca3c198272ba04422fcd30a27a020b735af804', part: "label", class: `bs-tab__label ${this.hasLabel ? 'bs-tab__label--has-content' : ''}` }, h("slot", { key: '1026142d478c46c75b27f6eceb984188ce4c28d1', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'a00349806770203091af571e480db67b68cf787f', part: "badge", class: `bs-tab__badge ${showBadge ? 'bs-tab__badge--has-content' : ''}` }, h("slot", { key: 'fd1efee948e290272d9bdaca4c11ff6320c17c3e', name: "badge", onSlotchange: this.onBadgeSlotchange })), h("span", { key: '14b2d3857f3b5273e3973c929b83756540c7bfa2', part: "indicator", class: "bs-tab__indicator" })));
     }
     static get is() { return "bs-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tab/bs-tabs/bs-tabs.js

@@ -50,7 +50,7 @@ export class BsTabs {
     }
     render() {
         const vertical = this.orientation === 'vertical';
-        return (h("div", { key: '625a82decaddca7fc41585696f15a8fdd19c3127', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: '059943f777aaf60a2de4026bcb25f561f66a5020' })));
+        return (h("div", { key: '9e9050a33459b5941af1440498780d67682d8273', part: "tablist", role: "tablist", "aria-orientation": this.orientation, class: `bs-tabs bs-tabs--${this.type} ${vertical ? 'bs-tabs--vertical' : ''}` }, h("slot", { key: 'd5987d7600183ef348855ac5d0af37e42f1aa9c2' })));
     }
     static get is() { return "bs-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-toast/bs-toast.js

@@ -25,7 +25,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: '46791568d11373681bdb2eae526fc29f93cc1ba6', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '77b3faf40813c86dd624ec665e6e4eb0e6cb80b8', class: "bs-toast__content" }, h("span", { key: 'b8c2e8d6c729b8aaaf540906f55feaf95ea0d42c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '4c69c6dc371c2f7bc1cf393c293fadfd30fabcea', state: this.state })), h("span", { key: '3938894f0ad2c99bece035b5049b806847b6fc69', part: "message", class: "bs-toast__message" }, h("slot", { key: '35566107844c74a57b37b00d369a8396db821f5f' }))), h("div", { key: 'df56dba231fa2e6cf4ad5bd57bb2b4608161294d', class: "bs-toast__actions" }, h("button", { key: 'c0f78562bd1acbc421b87d6915d48c7768795e78', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: 'b74a4cbb76307190bf9af2651e52791ba814b2af' })))));
+        return (h("div", { key: 'c2beb9820f201006fc992883a7c217dea3dd3195', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'e99f80f1082a725719f0161f5651624aba8c274b', class: "bs-toast__content" }, h("span", { key: 'dc9e372fe92087e78fabf701272c708e8d996aec', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: 'aeaac660f2ef24a350e85cb528f9ecbc4060190f', state: this.state })), h("span", { key: '3ab1414077f1cead1a6927ff9655a1be667a3a8f', part: "message", class: "bs-toast__message" }, h("slot", { key: '256f8e5941ff379ea829a3fc8f8e3f234583a7a3' }))), h("div", { key: '1e0eef65678280fa58f15d37fd7fc974c355b0e4', class: "bs-toast__actions" }, h("button", { key: '3e16a99f8afce3444213e90547ca2ac107edd986', part: "close", type: "button", class: "bs-toast__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '4177c2c53bca1b703a717241af3d7e845ef6ebaa' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-tooltip/bs-tooltip.js

@@ -42,7 +42,7 @@ export class BsTooltip {
      */
     placement = 'top';
     render() {
-        return (h("div", { key: '425dac71d4f76074266a2e1676f8b443e300fd94', class: "bs-tooltip" }, h("span", { key: '0af2492abc554c9def9e338eada6ba7ac156fc28', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '34c5700bfac8ecadd0712a5356f334eac5d497fd', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'd46c949de53165a7a0f7f2fa3ffb2058558ce18d' }))));
+        return (h("div", { key: 'dfceb9c019f507e3be9590d4ae642d86e89811b2', class: "bs-tooltip" }, h("span", { key: 'd361e87774fa906a4e2703cd8b7c2ab16ff624b9', part: "arrow", class: "bs-tooltip__arrow" }), h("div", { key: '21ab2fb2a83762f3f7a3d3f4b9094f2772ae5e7f', part: "bubble", class: "bs-tooltip__bubble" }, h("slot", { key: 'd64aaa1841796be2ccfc1ac7d55a67d37a8f7615' }))));
     }
     static get is() { return "bs-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.js

@@ -1,4 +1,5 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { page } from "vitest/browser";
 describe('bs-navigation-drawer', () => {
     it('renders a <nav> landmark with the logo', async () => {
         const { root } = await render(h("bs-navigation-drawer", null));
@@ -109,6 +110,11 @@ describe('bs-navigation-drawer', () => {
             expect(searchClickSpy).toHaveReceivedEventTimes(1);
         });
         it('hides the search-trigger button when not collapsed', async () => {
+            // The default test viewport (414px) is inside this component's own <= 768px small-screen
+            // breakpoint (see bs-navigation-drawer.css), which forces the same visual treatment as
+            // `collapsed` regardless of the prop -- widen the viewport here so this test is isolated to
+            // the `collapsed` *prop*'s own behavior, not the viewport-driven treatment.
+            await page.viewport(1024, 768);
             const { root } = await render(h("bs-navigation-drawer", null));
             const trigger = root.shadowRoot.querySelector('[part="search-trigger"]');
             expect(getComputedStyle(trigger).display).toBe('none');

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.css

@@ -12,7 +12,10 @@
  *   rhythm) -- bumped up from the originally Figma-measured --bs-spacing-150 (12px) at the user's
  *   request after seeing it rendered (felt cramped in practice), not a Figma re-measurement.
  * @prop --bs-navigation-drawer-width: Default width of the drawer. 280px, matching Figma's own
- *   frame -- overridable by a consumer that needs a different fixed width.
+ *   frame -- overridable by a consumer that needs a different fixed width. Below a 768px viewport
+ *   width, this is overridden by a `@media (max-width: 768px)` rule that forces the existing
+ *   `collapsed` 96px icon-only rail treatment instead (see --bs-navigation-drawer-collapsed-width
+ *   below), so the drawer stops reserving a permanent 280px of layout width on small screens.
  * @prop --bs-navigation-drawer-title-font-family: Title text font family. Aliased to
  *   --bs-typography-font-family-heading.
  * @prop --bs-navigation-drawer-title-font-weight: Title text font weight. Aliased to
@@ -255,3 +258,42 @@
 .bs-navigation-drawer__items::-webkit-scrollbar {
   display: none;
 }
+
+/* Below 768px (a standard tablet/small-screen breakpoint, and the narrow end of this component's
+   normal tablet-and-up usage) a permanently-reserved 280px-wide drawer pushes page content down to
+   an unusably narrow remainder on real small-screen viewports (e.g. 390px). This library has no
+   existing width-based @media breakpoint convention to follow (grepping every other component's
+   CSS only turns up `@media (prefers-reduced-motion: reduce)`), so rather than inventing new
+   open/closed overlay API, this reuses the drawer's own existing `collapsed` 96px icon-only rail
+   treatment (see the `:host([collapsed])` rules above) and applies it unconditionally at this
+   width -- same rail, now driven by viewport instead of only by the `collapsed` prop/toggle. Placed
+   last in this file so it wins over the unscoped `.bs-navigation-drawer`/`__title`/etc. rules above
+   on specificity ties, regardless of whether `collapsed` happens to be reflected on the host. */
+@media (max-width: 768px) {
+  .bs-navigation-drawer {
+    width: var(--bs-navigation-drawer-collapsed-width);
+    padding-left: 0;
+    padding-right: 0;
+    align-items: center;
+  }
+
+  .bs-navigation-drawer__logo--full {
+    display: none;
+  }
+
+  .bs-navigation-drawer__logo--mark {
+    display: flex;
+  }
+
+  .bs-navigation-drawer__title {
+    display: none;
+  }
+
+  .bs-navigation-drawer__search {
+    display: none;
+  }
+
+  .bs-navigation-drawer__search-trigger {
+    display: inline-flex;
+  }
+}

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.js

@@ -117,7 +117,7 @@ export class BsNavigationDrawer {
         this.bsSearchClick.emit();
     };
     render() {
-        return (h("nav", { key: 'fcd220918c861178927434a20225de51d2d37d35', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: 'd156193396387f2785300f56e79af12509b74634', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: '0d136d743d63b455fa837e0f8a14f66dd4ecce40', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '913420e2692e0acff0dfb2375042dbd197e971c2', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '44e1a6f3dc00b3545bcf0967a81562759fde8eff', variant: "mark", background: this.logoBackground }))), h("div", { key: '63aa4a6c561987a6b8308b85403fcca5507b5916', class: "bs-navigation-drawer__title-row" }, h("span", { key: 'd3dec951669d8462c3b5ca24691fb83c4778d787', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '84f6d11f0bdfbd9a01bb2897a637aaf0288299dc', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: 'f5dc6909ddbd27c5782bba9eb1f3cfe9d0d94c56' })))), h("div", { key: '62d76c3000619b51b0f6748e7a85c30bade186b8', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: 'bafd49641220d77c6a8b94b83869910e7dfc3d84', name: "search" })), h("button", { key: '07d29e4f52aca08fbba9f5a9ecab272a7755a45e', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: '773925119f869af5a6f797a36225c7b25a25069a' })), h("div", { key: 'c84356cb2061037cb5e5a152acf2e69f23eb6be8', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'a449e8919b8b6cd29c33013d3691894ccae9a03f' }))));
+        return (h("nav", { key: '2682adb685feb040ae0c7dd4cf772e3d27fb6cdb', class: "bs-navigation-drawer", "aria-label": this.heading }, this.showLogo && (h("div", { key: 'cebf3c545f4a7733c231f32a243aab8ea4e41b0b', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, h("bs-logo", { key: 'c824c6b28effe67f51cedb9f5def01583cfede94', variant: "full", background: this.logoBackground }))), this.showLogo && (h("div", { key: '92414de23c17f5db07fba6e4e5d8ff2e2b69871b', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, h("bs-logo", { key: '7562863099e31061446101cf457499e93ba927fa', variant: "mark", background: this.logoBackground }))), h("div", { key: 'b53d86be5dac1611022bec53b2cf6a541e5f0d46', class: "bs-navigation-drawer__title-row" }, h("span", { key: '8d8ec8b76fc54fc69b6d4b0660fc6d0c26f44799', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (h("button", { key: '10bd90b98b1ba17636542a48792cc8a1e399b2ce', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, h(CaretLeftIcon, { key: '51c56d5f775611f8f833ccac876a9c153fa10215' })))), h("div", { key: '96d15b3514951553c3d7c769e3f457789aab300a', part: "search", class: "bs-navigation-drawer__search" }, h("slot", { key: '823a85d63fe011729a17df2264a2f04b2d376d72', name: "search" })), h("button", { key: '50198e1efe259e142c70a9fd1e132deabd23c81c', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, h(SearchIcon, { key: 'aea08baafa57881baecacf415bf477d8eb7352aa' })), h("div", { key: 'c0e5816d6e0b0dc7a627672218fde6782e3dfe93', part: "items", class: "bs-navigation-drawer__items" }, h("slot", { key: 'edb424c5e52a3500a0c85453349bf4369ea1a87e' }))));
     }
     static get is() { return "bs-navigation-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer-item/bs-navigation-drawer-item.js

@@ -131,7 +131,7 @@ export class BsNavigationDrawerItem {
         // incorrectly also toggle this parent row on every child click. Both are wrapped in a
         // `display: contents` container so render() still returns a single root node (this codebase's
         // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
-        return (h("div", { key: '1962534848f86e901317ef9a039dccff9966568e', class: "bs-navigation-drawer-item__root" }, h("button", { key: '9469e401e0b5acfb48d767bcaa9413052aa2018a', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: '95c4da8c615429c6e082cf3859210ba3dd218250', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: '5b6586d92e101d5f195aa5bf24b321444c59ad86', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: '824f639de788d659ee047b103468a643a0d2ab70', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '61c7c947ef9fb66c08bf374eba3d806ba7b0c484' })), this.expandable && (h("span", { key: '59633b194d64a6892ccb3cb4800138eb2da70828', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: '36d26230ea1b23b3ff57a88a7bc62c45345aaf25' })))), this.expandable && (h("span", { key: 'b3ceaf0b7da48d18c8251beac8e3fa6a7c98c6db', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: '50d1e8df450ac4e90f20db4b53aa0cbe5fb859f2', name: "children" })))));
+        return (h("div", { key: 'f43c51409618490d8c8d326660da42ed7139896c', class: "bs-navigation-drawer-item__root" }, h("button", { key: '3d2b4b05faa9b8c1316242cd68be1dddc69e3f86', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (h("span", { key: '18e56438cf62a985cdecaf7921232a8071a561fa', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, h("slot", { key: 'c5c620b5be6916ecc1fdedbea3a5dedfd31e3508', name: "icon", onSlotchange: this.onIconSlotchange }))), h("span", { key: 'b1a7c8231e57ee80fd9d8b9ab5530171cde97122', part: "label", class: "bs-navigation-drawer-item__label" }, h("slot", { key: '138d2453308c1228bca8eac3e8f22900a77aa8fc' })), this.expandable && (h("span", { key: 'b6e7f7efd5bf3254fb037a5b3eadf786f9c71f79', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, h(ChevronDownIcon, { key: 'af928114df979013bf10aa4b77e8cc969c119f76' })))), this.expandable && (h("span", { key: 'af0419c82ecc3cd9df9d54d090341fd59839c9e7', part: "children", class: "bs-navigation-drawer-item__children" }, h("slot", { key: 'a8e6af7c097668d14f39fea4707f0785b6c6fc4a', name: "children" })))));
     }
     static get is() { return "bs-navigation-drawer-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.css

@@ -104,3 +104,28 @@
   flex: 1 0 0;
   min-width: 0;
 }
+
+/* Below 768px (same breakpoint bs-navigation-drawer's own small-screen treatment uses, for
+   consistency -- this library has no other width-based @media precedent to follow, see that
+   component's CSS for the full reasoning), the bar's non-shrinking children (the fixed-width
+   `bs-logo`, flex-shrink: 0 on `__logo`/`__left` above) no longer reliably fit alongside the
+   `right` slot's action icons in a single row at real small-screen widths (e.g. 390px) -- the
+   `right` slot's min-width: 0 lets flexbox squeeze its *container* down, but the icon buttons
+   inside it don't shrink, so they overflow past the logo instead of wrapping, reading as an
+   overlap/collision. Letting the bar wrap, and forcing `right` onto its own full-width row below
+   (rather than an even smaller, unpredictable wrap point), keeps the logo and action icons from
+   ever sharing contested horizontal space. Only `default`/`with-navigation-drawer` need this --
+   `center`'s logo/right are already flex: 1 and absorb the narrower width themselves. */
+@media (max-width: 768px) {
+  .bs-navigation-header--default,
+  .bs-navigation-header--with-navigation-drawer {
+    flex-wrap: wrap;
+    row-gap: var(--bs-navigation-header-slot-gap);
+  }
+
+  .bs-navigation-header--default .bs-navigation-header__right,
+  .bs-navigation-header--with-navigation-drawer .bs-navigation-header__right {
+    flex: 1 1 100%;
+    justify-content: flex-end;
+  }
+}

package/dist/collection/components/ui-shell/bs-navigation-header/bs-navigation-header/bs-navigation-header.js

@@ -61,7 +61,7 @@ export class BsNavigationHeader {
     render() {
         const showLogo = this.alignment !== 'with-navigation-drawer';
         const rootClasses = `bs-navigation-header bs-navigation-header--${this.alignment}`;
-        return (h("header", { key: '12fd8400a4ad921e6ae34a7ba83468c9eea715c5', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: 'a94a57a41ebe2124a1569a0705a58a373b4fc1fc', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: '47a0548969747ec221c9c228b5f15dac71bb4005', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '5a8022f228cebd6567d955cdf927f3cc59926ff2', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: 'd58f9d4d9bbd1147ba10b729752771def0bca5e9', name: "left" })), h("div", { key: 'b758ce8270101ef57e26ff752025c8408e242073', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: '8b84fda4e31ee941f5b4e0257630f7462d3f9f91', name: "right" }))));
+        return (h("header", { key: 'b6baa3111bbda25128deb3cadbea23925de0815e', class: rootClasses, "aria-label": this.ariaLabel ?? undefined }, this.skipToContentHref && (h("a", { key: '937a066025b7ef047b6ce1a558bc3c7855a450d2', part: "skip-link", class: "bs-navigation-header__skip-link", href: this.skipToContentHref }, this.skipToContentLabel)), showLogo && (h("bs-logo", { key: 'c1197b111efab810242b8a635412da27661d963a', part: "logo", class: "bs-navigation-header__logo", variant: "full", background: this.logoBackground })), h("div", { key: '067d89b1a117393ea6b60fec66828bba4d257070', part: "left", class: "bs-navigation-header__left" }, h("slot", { key: '8cc8de02d1b62c0e347c06d3ca07c2c5b165c74f', name: "left" })), h("div", { key: '94b52a0d3ad8c2df1fd20ed64fe1ab7c032a4d4c', part: "right", class: "bs-navigation-header__right" }, h("slot", { key: '36b66721d428407e5acc2205e21f0039e5be6728', name: "right" }))));
     }
     static get is() { return "bs-navigation-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/bs-ai-disclaimer.js

@@ -1 +1 @@
-import{t as i,p as e,H as s,h as a}from"./p-CsnFdZ3v.js";const t=e(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}render(){return a("div",{key:"26e7b473aa03ada36a706ac5f908ff88a1e1b64a",class:"bs-ai-disclaimer"},a("p",{key:"8f19030e5a8ef09a76d5d149e744b26d7848255e",part:"text",class:"bs-ai-disclaimer__text"},a("slot",{key:"c1493d47be97fa794f4acbc676ada8dfc0f96750"})))}static get style(){return":host{display:block;--bs-ai-disclaimer-padding-x:var(--bs-spacing-200);--bs-ai-disclaimer-text-color:var(--bs-text-secondary);--bs-ai-disclaimer-font-size:var(--bs-font-size-sm);--bs-ai-disclaimer-line-height:var(--bs-line-height-body-sm)}.bs-ai-disclaimer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 var(--bs-ai-disclaimer-padding-x);font-family:inherit}.bs-ai-disclaimer__text{margin:0;flex:1 0 0;min-width:0;color:var(--bs-ai-disclaimer-text-color);font-size:var(--bs-ai-disclaimer-font-size);line-height:calc(var(--bs-ai-disclaimer-line-height) * 1px);text-align:center;word-break:break-word}"}},[257,"bs-ai-disclaimer"]);function r(){"undefined"!=typeof customElements&&["bs-ai-disclaimer"].forEach((e=>{"bs-ai-disclaimer"===e&&(customElements.get(i(e))||customElements.define(i(e),t))}))}r();const c=t,d=r;export{c as BsAiDisclaimer,d as defineCustomElement}
+import{t as i,p as e,H as s,h as a}from"./p-CsnFdZ3v.js";const t=e(class extends s{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow()}render(){return a("div",{key:"870ae28bc88649b92b2508d9c41a415c44a413b4",class:"bs-ai-disclaimer"},a("p",{key:"99ef7bc15c69f5ba1c92353a037ac6a01a872f35",part:"text",class:"bs-ai-disclaimer__text"},a("slot",{key:"faad8221144401799e346e6d0d43d199c7ad2252"})))}static get style(){return":host{display:block;--bs-ai-disclaimer-padding-x:var(--bs-spacing-200);--bs-ai-disclaimer-text-color:var(--bs-text-secondary);--bs-ai-disclaimer-font-size:var(--bs-font-size-sm);--bs-ai-disclaimer-line-height:var(--bs-line-height-body-sm)}.bs-ai-disclaimer{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 var(--bs-ai-disclaimer-padding-x);font-family:inherit}.bs-ai-disclaimer__text{margin:0;flex:1 0 0;min-width:0;color:var(--bs-ai-disclaimer-text-color);font-size:var(--bs-ai-disclaimer-font-size);line-height:calc(var(--bs-ai-disclaimer-line-height) * 1px);text-align:center;word-break:break-word}"}},[257,"bs-ai-disclaimer"]);function r(){"undefined"!=typeof customElements&&["bs-ai-disclaimer"].forEach((e=>{"bs-ai-disclaimer"===e&&(customElements.get(i(e))||customElements.define(i(e),t))}))}r();const c=t,d=r;export{c as BsAiDisclaimer,d as defineCustomElement}

package/dist/components/bs-ai-greeting.js

@@ -1 +1 @@
-import{t as e,p as i,H as t,h as a}from"./p-CsnFdZ3v.js";const n=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}assistantName="Genie";productName;render(){const e=this.productName?`How can I help you with ${this.productName} today?`:"How can I help you today?";return a("div",{key:"ae136c97700f0ed54f2a1e58e712e7e5c0c54959",class:"bs-ai-greeting"},a("div",{key:"050f107d678a52455ce5d396be148f8e86395816",part:"heading",class:"bs-ai-greeting__heading"},a("p",{key:"8db2fe3a6b179fa0cd632ad273782fb87c3aa32d",class:"bs-ai-greeting__heading-line"},"Hi. I'm ",this.assistantName,","),a("p",{key:"f13eced93d8b6250b963885f0b3a17b7c0bdb402",class:"bs-ai-greeting__heading-line"},"your AI assistant.")),a("p",{key:"6e9766b1845217cb3b8c96fd93be2a2a97f003b3",part:"subtext",class:"bs-ai-greeting__subtext"},e))}static get style(){return":host{display:block;--bs-ai-greeting-gap:var(--bs-spacing-200);--bs-ai-greeting-max-width:490px;--bs-ai-greeting-heading-color:var(--bs-text-default);--bs-ai-greeting-heading-font-size:var(--bs-font-size-4xl);--bs-ai-greeting-heading-line-height:var(--bs-line-height-body-lg);--bs-ai-greeting-heading-weight:var(--bs-font-weight-bold);--bs-ai-greeting-heading-gap:var(--bs-spacing-200);--bs-ai-greeting-subtext-color:var(--bs-text-secondary);--bs-ai-greeting-subtext-font-size:var(--bs-font-size-xl);--bs-ai-greeting-subtext-line-height:var(--bs-line-height-body-lg)}.bs-ai-greeting{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bs-ai-greeting-gap);max-width:var(--bs-ai-greeting-max-width);margin:0 auto;text-align:center;font-family:inherit}.bs-ai-greeting__heading{display:flex;flex-direction:column;gap:var(--bs-ai-greeting-heading-gap);color:var(--bs-ai-greeting-heading-color);font-size:var(--bs-ai-greeting-heading-font-size);font-weight:var(--bs-ai-greeting-heading-weight);line-height:calc(var(--bs-ai-greeting-heading-line-height) * 1px)}.bs-ai-greeting__heading-line{margin:0}.bs-ai-greeting__subtext{margin:0;color:var(--bs-ai-greeting-subtext-color);font-size:var(--bs-ai-greeting-subtext-font-size);font-weight:var(--bs-font-weight-regular);line-height:calc(var(--bs-ai-greeting-subtext-line-height) * 1px)}"}},[513,"bs-ai-greeting",{assistantName:[1,"assistant-name"],productName:[1,"product-name"]}]);function s(){"undefined"!=typeof customElements&&["bs-ai-greeting"].forEach((i=>{"bs-ai-greeting"===i&&(customElements.get(e(i))||customElements.define(e(i),n))}))}s();const g=n,r=s;export{g as BsAiGreeting,r as defineCustomElement}
+import{t as e,p as i,H as t,h as a}from"./p-CsnFdZ3v.js";const n=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}assistantName="Genie";productName;render(){const e=this.productName?`How can I help you with ${this.productName} today?`:"How can I help you today?";return a("div",{key:"2abf3146a8d1feba1261de654efea03cb0986340",class:"bs-ai-greeting"},a("div",{key:"f2a2ac07f0c20eb10d55366f5b07b01ad7684ed2",part:"heading",class:"bs-ai-greeting__heading"},a("p",{key:"13e0db0145ca6339cbeacfc1523ee7d573ea848b",class:"bs-ai-greeting__heading-line"},"Hi. I'm ",this.assistantName,","),a("p",{key:"8255a0bfea0ca89dbdb248a697f8667ca2fe25bf",class:"bs-ai-greeting__heading-line"},"your AI assistant.")),a("p",{key:"00ec794006ab8632c878f91fe4a94c688db0ab29",part:"subtext",class:"bs-ai-greeting__subtext"},e))}static get style(){return":host{display:block;--bs-ai-greeting-gap:var(--bs-spacing-200);--bs-ai-greeting-max-width:490px;--bs-ai-greeting-heading-color:var(--bs-text-default);--bs-ai-greeting-heading-font-size:var(--bs-font-size-4xl);--bs-ai-greeting-heading-line-height:var(--bs-line-height-body-lg);--bs-ai-greeting-heading-weight:var(--bs-font-weight-bold);--bs-ai-greeting-heading-gap:var(--bs-spacing-200);--bs-ai-greeting-subtext-color:var(--bs-text-secondary);--bs-ai-greeting-subtext-font-size:var(--bs-font-size-xl);--bs-ai-greeting-subtext-line-height:var(--bs-line-height-body-lg)}.bs-ai-greeting{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bs-ai-greeting-gap);max-width:var(--bs-ai-greeting-max-width);margin:0 auto;text-align:center;font-family:inherit}.bs-ai-greeting__heading{display:flex;flex-direction:column;gap:var(--bs-ai-greeting-heading-gap);color:var(--bs-ai-greeting-heading-color);font-size:var(--bs-ai-greeting-heading-font-size);font-weight:var(--bs-ai-greeting-heading-weight);line-height:calc(var(--bs-ai-greeting-heading-line-height) * 1px)}.bs-ai-greeting__heading-line{margin:0}.bs-ai-greeting__subtext{margin:0;color:var(--bs-ai-greeting-subtext-color);font-size:var(--bs-ai-greeting-subtext-font-size);font-weight:var(--bs-font-weight-regular);line-height:calc(var(--bs-ai-greeting-subtext-line-height) * 1px)}"}},[513,"bs-ai-greeting",{assistantName:[1,"assistant-name"],productName:[1,"product-name"]}]);function s(){"undefined"!=typeof customElements&&["bs-ai-greeting"].forEach((i=>{"bs-ai-greeting"===i&&(customElements.get(e(i))||customElements.define(e(i),n))}))}s();const g=n,r=s;export{g as BsAiGreeting,r as defineCustomElement}