@brandsync/wc 0.0.11 → 0.1.0

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

@@ -0,0 +1,321 @@
+/**
+ * @prop --bs-snackbar-radius: Corner radius of the bar. Aliased to --bs-border-radius-100.
+ * @prop --bs-snackbar-shadow: Elevation shadow, since a snackbar floats above page content. Aliased to --bs-shadow-md.
+ * @prop --bs-snackbar-gap: Gap between the content area and the actions area. Aliased to --bs-spacing-100.
+ * @prop --bs-snackbar-content-padding-y: Top/bottom padding of the content area. Aliased to --bs-spacing-200.
+ * @prop --bs-snackbar-content-padding-x: Left padding of the content area (the bar's own left edge). Aliased to --bs-spacing-200.
+ * @prop --bs-snackbar-content-gap: Gap between the icon and the message. Aliased to --bs-spacing-150.
+ * @prop --bs-snackbar-font-size: Message font size. Aliased to --bs-font-size-md.
+ * @prop --bs-snackbar-line-height: Message line height. Aliased to --bs-line-height-body-md.
+ * @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.
+ */
+:host {
+  display: inline-flex;
+
+  --bs-snackbar-radius: var(--bs-border-radius-100);
+  --bs-snackbar-shadow: var(--bs-shadow-md);
+  --bs-snackbar-gap: var(--bs-spacing-100);
+
+  --bs-snackbar-content-padding-y: var(--bs-spacing-200);
+  --bs-snackbar-content-padding-x: var(--bs-spacing-200);
+  --bs-snackbar-content-gap: var(--bs-spacing-150);
+  --bs-snackbar-font-size: var(--bs-font-size-md);
+  --bs-snackbar-line-height: var(--bs-line-height-body-md);
+
+  --bs-snackbar-actions-padding-y: var(--bs-spacing-50);
+  --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
+     that same name here (even aliasing to the "outer" token via var()) creates a cyclic reference
+     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);
+}
+
+.bs-snackbar {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-snackbar-gap);
+  border-radius: var(--bs-snackbar-radius);
+  box-shadow: var(--bs-snackbar-shadow);
+  font-family: inherit;
+}
+
+/* Each variant sets its own surface/text pair -- .bs-snackbar__icon, .bs-snackbar__message, and
+   .bs-snackbar__close all inherit `color` from here rather than each redeclaring it. */
+.bs-snackbar--default {
+  background: var(--bs-snackbar-surface-default);
+  color: var(--bs-snackbar-color-default);
+}
+
+.bs-snackbar--info {
+  background: var(--bs-snackbar-surface-info);
+  color: var(--bs-snackbar-text-info);
+}
+
+.bs-snackbar--warning {
+  background: var(--bs-snackbar-surface-warning);
+  color: var(--bs-snackbar-text-warning);
+}
+
+.bs-snackbar--success {
+  background: var(--bs-snackbar-surface-success);
+  color: var(--bs-snackbar-text-success);
+}
+
+.bs-snackbar--error {
+  background: var(--bs-snackbar-surface-error);
+  color: var(--bs-snackbar-text-error);
+}
+
+.bs-snackbar__content {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-snackbar-content-gap);
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: var(--bs-snackbar-content-padding-y) 0 var(--bs-snackbar-content-padding-y) var(--bs-snackbar-content-padding-x);
+}
+
+.bs-snackbar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.bs-snackbar__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Same border-spin technique as bs-attachment's own upload spinner -- a light track ring plus one
+   accent-colored side, rotated. `color: inherit` means the accent automatically matches whatever
+   variant's text color is currently active, without a separate --bs-snackbar-spinner-accent prop. */
+.bs-snackbar__spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--bs-snackbar-spinner-track);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: bs-snackbar-spin 0.8s linear infinite;
+}
+
+@keyframes bs-snackbar-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bs-snackbar__spinner {
+    animation: none;
+  }
+}
+
+.bs-snackbar__message {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-size: var(--bs-snackbar-font-size);
+  line-height: calc(var(--bs-snackbar-line-height) * 1px);
+}
+
+.bs-snackbar__actions {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  gap: var(--bs-snackbar-actions-gap);
+  flex-shrink: 0;
+  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;
+}

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

@@ -0,0 +1,172 @@
+import { h } from "@stencil/core";
+/**
+ * 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
+ * button.
+ *
+ * This component only renders the bar itself -- it doesn't manage its own visibility, timing, or
+ * stacking. A consumer (typically a small "toast manager" utility) creates one per message and
+ * removes it from the DOM again, whether on a timer or on `bsDismiss`. Figma's spec doesn't show
+ * auto-dismiss timing at all (it's a static visual spec), so this deliberately doesn't invent one.
+ *
+ * The icon is always the same checkmark glyph across every `variant`, just recolored -- matching
+ * the Figma spec exactly, even though a checkmark for `variant="error"` reads a little oddly
+ * semantically. Worth revisiting with severity-specific icons (warning triangle, error circle,
+ * etc.) if the design updates to specify them.
+ *
+ * ## When to use
+ * - Confirming the outcome of an action that just happened (save succeeded, upload failed) without
+ *   interrupting the user's flow.
+ *
+ * ## When not to use
+ * - For a response that requires the user to make a decision before continuing -- use `bs-dialog`.
+ * - For persistent, always-visible status -- a snackbar is inherently transient.
+ *
+ * @slot - Default slot: the message text.
+ * @part container - The outer bar.
+ * @part icon - The leading icon/spinner wrapper.
+ * @part message - The message text wrapper.
+ * @part action - The optional action button (only rendered when `actionLabel` is set).
+ * @part close - The close button.
+ */
+export class BsSnackbar {
+    /** Color/semantic variant. `default` is the neutral (dark, inverse-surface) bar Figma shows as
+     * the baseline; `info`/`warning`/`success`/`error` use their matching container/text tokens. */
+    variant = 'default';
+    /** Replaces the checkmark icon with a spinning loading indicator, for a message describing
+     * in-progress work (e.g. "Uploading files...") rather than a completed result. */
+    loading = false;
+    /** Label for the optional action button (e.g. "Undo", "Retry"). Omit this prop entirely to
+     * render no action button at all -- its presence, not a boolean flag, is what shows it. */
+    actionLabel;
+    /** Fires when the action button is clicked. Ignored/never fires if `actionLabel` isn't set. */
+    bsAction;
+    /** Fires when the close button is clicked. This component doesn't remove itself from the DOM --
+     * the consumer is expected to do that (or hide it) in response to this event. */
+    bsDismiss;
+    onAction = () => {
+        this.bsAction.emit();
+    };
+    onDismiss = () => {
+        this.bsDismiss.emit();
+    };
+    render() {
+        return (h("div", { key: '9106411da12b9a4687fc15cf51c3398e9f44cf61', part: "container", class: `bs-snackbar bs-snackbar--${this.variant}`, role: "status", "aria-live": this.variant === 'error' ? 'assertive' : 'polite' }, h("div", { key: '47d66fbf472070db51cc4ef1da513068a06bd4cf', class: "bs-snackbar__content" }, h("span", { key: 'aabe82b54a892ae9ce0ec299a8a8282b9c64a158', part: "icon", class: "bs-snackbar__icon", "aria-hidden": "true" }, this.loading ? h("span", { class: "bs-snackbar__spinner" }) : h(CheckCircleIcon, null)), h("span", { key: '0d349ebe58140aed06a6a887a71105aab8218c55', part: "message", class: "bs-snackbar__message" }, h("slot", { key: 'c95af54cae4327a956196c5e252c2e1bafc26e92' }))), h("div", { key: '9d85cb2e47cc696523bc3921afa804648ea13553', class: "bs-snackbar__actions" }, this.actionLabel && (h("button", { key: '59e85117a9351385d258ec9b5bac6cfb6b2d88bf', part: "action", type: "button", class: "bs-snackbar__action", onClick: this.onAction }, this.actionLabel)), h("button", { key: '9e60406a369a599d9a43fb3c9c321e1aa8e1144d', part: "close", type: "button", class: "bs-snackbar__close", "aria-label": "Dismiss", onClick: this.onDismiss }, h(CloseIcon, { key: '93e815dace277cbee4f0f67a2ec1b3321c9ff495' })))));
+    }
+    static get is() { return "bs-snackbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-snackbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-snackbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsSnackbarVariant",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsSnackbarVariant": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-snackbar/bs-snackbar.tsx",
+                            "id": "src/components/bs-snackbar/bs-snackbar.tsx::BsSnackbarVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color/semantic variant. `default` is the neutral (dark, inverse-surface) bar Figma shows as\nthe baseline; `info`/`warning`/`success`/`error` use their matching container/text tokens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Replaces the checkmark icon with a spinning loading indicator, for a message describing\nin-progress work (e.g. \"Uploading files...\") rather than a completed result."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "actionLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the optional action button (e.g. \"Undo\", \"Retry\"). Omit this prop entirely to\nrender no action button at all -- its presence, not a boolean flag, is what shows it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsAction",
+                "name": "bsAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the action button is clicked. Ignored/never fires if `actionLabel` isn't set."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsDismiss",
+                "name": "bsDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the close button is clicked. This component doesn't remove itself from the DOM --\nthe consumer is expected to do that (or hide it) in response to this event."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+const CheckCircleIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M8.25 12.75L10.5 15L15.75 9.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CloseIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M18.75 5.25L5.25 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M18.75 18.75L5.25 5.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));

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

@@ -0,0 +1,59 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['default', 'info', 'warning', 'success', 'error'];
+// Demonstrates a real consumer reaction to bsDismiss -- the component itself doesn't remove or
+// hide anything on dismiss (see the class JSDoc: that's deliberately left to the consumer). Without
+// this, clicking the close button visibly does nothing in the story, which reads as "the button
+// doesn't work" even though the click handler did fire (see the bsDismiss test coverage).
+const hideOnDismiss = (ev) => {
+    ev.currentTarget.style.display = 'none';
+};
+const meta = {
+    title: 'Components/bs-snackbar',
+    parameters: { docs: { description: { component: componentDescription('bs-snackbar') } } },
+    render: args => html `
+    <bs-snackbar
+      variant=${args.variant}
+      ?loading=${args.loading}
+      action-label=${args.actionLabel || undefined}
+      @bsDismiss=${hideOnDismiss}
+    >
+      ${args.message}
+    </bs-snackbar>
+  `,
+    argTypes: {
+        variant: { control: { type: 'select' }, options: variants, description: propDescription('bs-snackbar', 'variant') },
+        loading: { control: 'boolean', description: propDescription('bs-snackbar', 'loading') },
+        actionLabel: { control: 'text', description: propDescription('bs-snackbar', 'actionLabel') },
+        message: { control: 'text', description: 'Slotted message content (not a real attribute -- see the default slot).' },
+    },
+    args: {
+        variant: 'default',
+        loading: false,
+        actionLabel: 'Click me',
+        message: 'Files uploaded successfully.',
+    },
+};
+export default meta;
+export const Default = {};
+// One instance per variant, side by side, matching the Figma spec's column layout.
+export const AllVariants = {
+    name: 'All variants',
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 12px;">
+      ${variants.map(variant => html `
+          <bs-snackbar variant=${variant} action-label="Click me" @bsDismiss=${hideOnDismiss}>Files uploaded successfully.</bs-snackbar>
+        `)}
+    </div>
+  `,
+};
+export const Overflow = {
+    args: { message: 'Your changes were saved, but some fields may fail.' },
+};
+export const Loading = {
+    args: { loading: true, message: 'Uploading files...', actionLabel: '' },
+};
+export const NoAction = {
+    name: 'No action',
+    args: { actionLabel: '' },
+};

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

@@ -51,8 +51,8 @@ export class BsSourceLink {
     };
     render() {
         const inner = [
-            h("span", { key: '3aa9b7617d8ee912f19a8a51acd9b7bdc91c8db7', class: "bs-source-link__left" }, h("span", { key: '4489eb50cc93b509e51ecb6439be00a49e9bfe5c', class: "bs-source-link__filename-row" }, h("span", { key: '391055326352c9296e9732b8e047e9004735147e', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: 'ec44e5f429c68b315cbf3a4aac93328211ea01f8', name: "icon" }, h(FileTextIcon, { key: '2837c2a63e0575af578db04ced09a6623f4ebead' }))), h("p", { key: '677c00bf7ce6ad0f0a7e91f6e46a50647d8178d9', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'ab536a62b3487f55884dc0fb6c6b78360054223e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '699ca6a8877a1a8e00cb25c54d05345fe6603daa', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: '3235b045ab945f6a58f1bcdaa0d926a5679b04f4', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'adfb7f67f65b26b276163c2538308ceabc62fae5', part: "version", class: "bs-source-link__version" }, this.version)))),
-            h("span", { key: '0c23000d49c1faadd5af81c993283fa2f4cf9272', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '98447d6522f6af02cef14c42b0f817853fca2d3d' })),
+            h("span", { key: '87d5b005650458dac01edfc249af98f004281345', class: "bs-source-link__left" }, h("span", { key: '8eff72ca308f2617826f29312a755925526ffbd6', class: "bs-source-link__filename-row" }, h("span", { key: 'f0d435557cabaf12ee9bd2d155e432accf2fe858', part: "icon", class: "bs-source-link__icon" }, h("slot", { key: '51d36a29f3d77280bc575e32929a64e31e953fb3', name: "icon" }, h(FileTextIcon, { key: 'c51889f0f2cb3ab048b0a6cca1541accb720c4b2' }))), h("p", { key: '213eeb131f508e49f0b22aedce477cc68d0ebe54', part: "filename", class: "bs-source-link__filename" }, this.fileName)), h("span", { key: 'c6ca408b2707ed208f02a85baf393330536a126e', class: "bs-source-link__meta" }, this.sourceName && (h("span", { key: '7ec7920ab0a44d2169e53e24c958b0ad5c9ee58c', part: "source", class: "bs-source-link__source" }, this.sourceName)), this.sourceName && this.version && h("span", { key: 'e5687303c97b0cc5c655c5646c7be367d41d35b8', class: "bs-source-link__dot", "aria-hidden": "true" }), this.version && (h("span", { key: 'b0abbfc1b477d85ac25fe281d0404da62f2f21b0', part: "version", class: "bs-source-link__version" }, this.version)))),
+            h("span", { key: 'a2b93f18243778d72c77e2790ee43a4c3b7214a5', part: "arrow", class: "bs-source-link__arrow", "aria-hidden": "true" }, h(ArrowUpRightIcon, { key: '2cc849857b592ea425ea43cf55a202adde726826' })),
         ];
         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-switch/bs-switch.cmp.test.js

@@ -0,0 +1,71 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-switch', () => {
+    it('renders an unchecked native switch input by default', async () => {
+        const { root } = await render(h("bs-switch", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('type', 'checkbox');
+        expect(input).toEqualAttribute('role', 'switch');
+        expect(input.checked).toBe(false);
+        expect(root.shadowRoot.querySelector('[part="track"]')).not.toHaveClass('bs-switch__track--checked');
+    });
+    it('reflects ariaLabel to the native input, for label-less accessible names', async () => {
+        const { root } = await render(h("bs-switch", { ariaLabel: "Enable notifications" }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).toEqualAttribute('aria-label', 'Enable notifications');
+    });
+    it('does not set aria-label on the native input when ariaLabel is not provided', async () => {
+        const { root } = await render(h("bs-switch", null));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input).not.toHaveAttribute('aria-label');
+    });
+    it('reflects the checked prop to the native input and the track', async () => {
+        const { root } = await render(h("bs-switch", { checked: true }));
+        const input = root.shadowRoot.querySelector('input');
+        expect(input.checked).toBe(true);
+        expect(root.shadowRoot.querySelector('[part="track"]')).toHaveClass('bs-switch__track--checked');
+    });
+    it('clicking the input toggles checked and emits bsChange with the new value', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-switch", null));
+        const bsChangeSpy = spyOnEvent('bsChange');
+        const input = root.shadowRoot.querySelector('input');
+        input.click();
+        await waitForChanges();
+        expect(input.checked).toBe(true);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(1);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(true);
+        input.click();
+        await waitForChanges();
+        expect(input.checked).toBe(false);
+        expect(bsChangeSpy).toHaveReceivedEventTimes(2);
+        expect(bsChangeSpy).toHaveReceivedEventDetail(false);
+    });
+    describe('disabled', () => {
+        it('sets the disabled attribute on the native input', async () => {
+            const { root } = await render(h("bs-switch", { disabled: true }));
+            const input = root.shadowRoot.querySelector('input');
+            expect(input).toHaveAttribute('disabled');
+        });
+        it('prevents toggling via click', async () => {
+            const { root, waitForChanges, spyOnEvent } = await render(h("bs-switch", { disabled: true }));
+            const bsChangeSpy = spyOnEvent('bsChange');
+            const input = root.shadowRoot.querySelector('input');
+            input.click();
+            await waitForChanges();
+            expect(input.checked).toBe(false);
+            expect(bsChangeSpy).toHaveReceivedEventTimes(0);
+        });
+    });
+    ['md', 'lg'].forEach(size => {
+        it(`renders size="${size}" with the matching track modifier class`, async () => {
+            const { root } = await render(h("bs-switch", { size: size }));
+            const track = root.shadowRoot.querySelector('[part="track"]');
+            expect(track).toHaveClass(`bs-switch__track--${size}`);
+        });
+    });
+    it('renders label slot content', async () => {
+        const { root } = await render(h("bs-switch", null, "Enable notifications"));
+        expect(root).toHaveTextContent('Enable notifications');
+        const label = root.shadowRoot.querySelector('[part="label"]');
+        expect(label.querySelector('slot')).not.toBeNull();
+    });
+});