@brandsync/wc 1.18.0 → 1.20.0

package/dist/cjs/bs-attachment.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsAttachmentCss = () => `:host{display:inline-block;--bs-attachment-size:112px;--bs-attachment-radius:var(--bs-border-radius-100);--bs-attachment-border-color:var(--bs-border-default);--bs-attachment-card-bg:var(--bs-surface-base);--bs-attachment-filename-color:var(--bs-text-default);--bs-attachment-badge-bg-pdf:var(--bs-badge-bg-error);--bs-attachment-badge-bg-document:var(--bs-badge-bg-info)}.bs-attachment{box-sizing:border-box;position:relative;display:inline-flex;font-family:inherit}.bs-attachment__thumbnail{position:relative;width:var(--bs-attachment-size);height:var(--bs-attachment-size);border-radius:var(--bs-attachment-radius);overflow:hidden}.bs-attachment--loading .bs-attachment__thumbnail{border:var(--bs-border-width-thin) solid var(--bs-attachment-border-color)}.bs-attachment__image{display:block;width:100%;height:100%;object-fit:cover}.bs-attachment--loading .bs-attachment__image{filter:blur(2px)}.bs-attachment__spinner--overlay{position:absolute;top:50%;left:50%}.bs-attachment__card{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:var(--bs-spacing-100);width:var(--bs-attachment-size);height:var(--bs-attachment-size);padding:var(--bs-spacing-100);background:var(--bs-attachment-card-bg);border:var(--bs-border-width-thin) solid var(--bs-attachment-border-color);border-radius:var(--bs-attachment-radius)}.bs-attachment__filename{margin:0;flex:1 0 0;min-height:0;width:100%;overflow:hidden;color:var(--bs-attachment-filename-color);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px);text-overflow:ellipsis;word-break:break-word}.bs-attachment__badge{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--bs-spacing-50);border-radius:var(--bs-border-radius-50)}.bs-attachment__badge--pdf{background:var(--bs-attachment-badge-bg-pdf)}.bs-attachment__badge--document{background:var(--bs-attachment-badge-bg-document)}.bs-attachment__remove{position:absolute;top:var(--bs-spacing-100);inset-inline-end:var(--bs-spacing-100);opacity:0;pointer-events:none;transition:opacity var(--bs-duration-fast) var(--bs-easing-standard)}.bs-attachment:hover .bs-attachment__remove,.bs-attachment:focus-within .bs-attachment__remove{opacity:1;pointer-events:auto}.bs-attachment__spinner{display:inline-block;box-sizing:border-box;border:2px solid rgba(255, 255, 255, 0.35);border-top-color:var(--bs-white);border-radius:50%;animation:bs-attachment-spin 0.8s linear infinite}.bs-attachment__spinner.bs-attachment__spinner--overlay{animation-name:bs-attachment-spin-centered}@keyframes bs-attachment-spin{to{transform:rotate(360deg)}}@keyframes bs-attachment-spin-centered{from{transform:translate(-50%, -50%) rotate(0deg)}to{transform:translate(-50%, -50%) rotate(360deg)}}@media (prefers-reduced-motion: reduce){.bs-attachment__spinner{animation:none}}`;
+const bsAttachmentCss = () => `:host{display:inline-block;--bs-attachment-size:112px;--bs-attachment-radius:var(--bs-border-radius-100);--bs-attachment-border-color:var(--bs-border-default);--bs-attachment-card-bg:var(--bs-surface-base);--bs-attachment-filename-color:var(--bs-text-default);--bs-attachment-badge-bg-pdf:var(--bs-badge-bg-error);--bs-attachment-badge-bg-document:var(--bs-badge-bg-info)}.bs-attachment{box-sizing:border-box;position:relative;display:inline-flex;font-family:inherit}.bs-attachment__thumbnail{position:relative;width:var(--bs-attachment-size);height:var(--bs-attachment-size);border-radius:var(--bs-attachment-radius);overflow:hidden}.bs-attachment--loading .bs-attachment__thumbnail{border:var(--bs-border-width-thin) solid var(--bs-attachment-border-color)}.bs-attachment__image{display:block;width:100%;height:100%;object-fit:cover}.bs-attachment--loading .bs-attachment__image{filter:blur(2px)}.bs-attachment__spinner--overlay{position:absolute;top:50%;left:50%}.bs-attachment__card{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:var(--bs-spacing-100);width:var(--bs-attachment-size);height:var(--bs-attachment-size);padding:var(--bs-spacing-100);background:var(--bs-attachment-card-bg);border:var(--bs-border-width-thin) solid var(--bs-attachment-border-color);border-radius:var(--bs-attachment-radius)}.bs-attachment__filename{margin:0;flex:1 0 0;min-height:0;width:100%;overflow:hidden;color:var(--bs-attachment-filename-color);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px);text-overflow:ellipsis;word-break:break-word}.bs-attachment__badge{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:var(--bs-spacing-50);border-radius:var(--bs-border-radius-50)}.bs-attachment__badge--pdf{background:var(--bs-attachment-badge-bg-pdf)}.bs-attachment__badge--document{background:var(--bs-attachment-badge-bg-document)}.bs-attachment__remove{position:absolute;display:flex;top:var(--bs-spacing-150);inset-inline-end:var(--bs-spacing-150);opacity:0;pointer-events:none;transition:opacity var(--bs-duration-fast) var(--bs-easing-standard)}.bs-attachment:hover .bs-attachment__remove,.bs-attachment:focus-within .bs-attachment__remove{opacity:1;pointer-events:auto}.bs-attachment__spinner{display:inline-block;box-sizing:border-box;border:2px solid rgba(255, 255, 255, 0.35);border-top-color:var(--bs-white);border-radius:50%;animation:bs-attachment-spin 0.8s linear infinite}.bs-attachment__spinner.bs-attachment__spinner--overlay{animation-name:bs-attachment-spin-centered}@keyframes bs-attachment-spin{to{transform:rotate(360deg)}}@keyframes bs-attachment-spin-centered{from{transform:translate(-50%, -50%) rotate(0deg)}to{transform:translate(-50%, -50%) rotate(360deg)}}@media (prefers-reduced-motion: reduce){.bs-attachment__spinner{animation:none}}`;
 
 const BsAttachment = class {
     constructor(hostRef) {
@@ -32,7 +32,7 @@ const BsAttachment = class {
     };
     render() {
         const isImage = this.type === 'image';
-        return (index.h("div", { key: '1b70040e8fc2199fed52e81d97701199ed060900', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (index.h("bs-icon-button", { key: '7fcb8dcc715c2439ce62219e693fc416025b1359', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `${this.removeLabel}: ${this.fileName}`, onClick: this.onRemoveClick }, index.h(CloseIcon, { key: 'c9fc3e64c2b1ef2e9ec4c3d5dcb20aebea4950e4' })))));
+        return (index.h("div", { key: '397e7570d4765a1e4dfb410666c0fb0b78c06686', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (index.h("bs-icon-button", { key: '738b5e3dbf1e2b0856bb20dc5eb3027d1cd87ef5', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `${this.removeLabel}: ${this.fileName}`, onClick: this.onRemoveClick }, index.h(CloseIcon, { key: 'd21c9d3832f170c5af2d01e2d76b83be3acd3da7' })))));
     }
     renderImage() {
         return (index.h("div", { part: "thumbnail", class: "bs-attachment__thumbnail" }, index.h("img", { class: "bs-attachment__image", src: this.imageSrc, alt: this.imageAlt }), this.loading && index.h(Spinner, { class: "bs-attachment__spinner bs-attachment__spinner--overlay", size: 16, label: this.uploadingLabel })));

package/dist/cjs/bs-avatar.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsAvatarCss = () => `:host{display:inline-flex;vertical-align:middle;--bs-avatar-size-xs:24px;--bs-avatar-size-sm:32px;--bs-avatar-size-md:44px;--bs-avatar-size-lg:64px;--bs-avatar-size-xl:96px;--bs-avatar-size-xxl:128px;--bs-avatar-radius:var(--bs-border-radius-full);--bs-avatar-border-width:var(--bs-border-width-thin);--bs-avatar-border-width-xxl:1.333px}.bs-avatar{box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--bs-avatar-radius);border:var(--bs-avatar-border-width) solid var(--bs-avatar-border-primary);background:var(--bs-avatar-bg-dafault);flex-shrink:0;user-select:none;-webkit-user-select:none}.bs-avatar--xs{width:var(--bs-avatar-size-xs);height:var(--bs-avatar-size-xs)}.bs-avatar--sm{width:var(--bs-avatar-size-sm);height:var(--bs-avatar-size-sm)}.bs-avatar--md{width:var(--bs-avatar-size-md);height:var(--bs-avatar-size-md)}.bs-avatar--lg{width:var(--bs-avatar-size-lg);height:var(--bs-avatar-size-lg)}.bs-avatar--xl{width:var(--bs-avatar-size-xl);height:var(--bs-avatar-size-xl)}.bs-avatar--xxl{width:var(--bs-avatar-size-xxl);height:var(--bs-avatar-size-xxl);border-width:var(--bs-avatar-border-width-xxl)}.bs-avatar__image{display:block;width:100%;height:100%;object-fit:cover}.bs-avatar__icon{width:60%;height:60%;color:var(--bs-avatar-icon-primary)}.bs-avatar__initials{color:var(--bs-avatar-text-default);font-family:var(--bs-typography-font-family-body, Roboto), sans-serif;font-weight:var(--bs-font-weight-medium);text-align:center;white-space:nowrap}.bs-avatar--xs .bs-avatar__initials,.bs-avatar--sm .bs-avatar__initials{font-size:var(--bs-fontsize-caption-sm);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-avatar--md .bs-avatar__initials{font-family:var(--bs-typography-font-family-heading, Roboto), sans-serif;font-weight:var(--bs-font-weight-bold);font-size:var(--bs-fontsize-heading-h6);line-height:calc(var(--bs-line-height-heading-h6) * 1px)}.bs-avatar--lg .bs-avatar__initials{font-size:var(--bs-fontsize-body-md);line-height:calc(var(--bs-line-height-body-md) * 1px)}.bs-avatar--xl .bs-avatar__initials,.bs-avatar--xxl .bs-avatar__initials{font-family:var(--bs-typography-font-family-heading, Roboto), sans-serif;font-weight:var(--bs-font-weight-bold);font-size:var(--bs-fontsize-heading-h4);line-height:calc(var(--bs-line-height-heading-h4) * 1px)}:host(:hover:not([disabled])) .bs-avatar{background:var(--bs-avatar-bg-hover);border-color:var(--bs-avatar-border-hover)}:host(:active:not([disabled])) .bs-avatar{background:var(--bs-avatar-bg-pressed);border-color:var(--bs-avatar-border-pressed)}:host(:focus-visible:not([disabled])){outline:none}:host(:focus-visible:not([disabled])) .bs-avatar{background:var(--bs-avatar-bg-focused);border-color:var(--bs-avatar-border-focused);box-shadow:0 0 0 3px var(--bs-avatar-border-focus)}:host([disabled]){opacity:0.5}`;
+const bsAvatarCss = () => `:host{display:inline-flex;vertical-align:middle;--bs-avatar-size-xs:24px;--bs-avatar-size-sm:32px;--bs-avatar-size-md:44px;--bs-avatar-size-lg:64px;--bs-avatar-size-xl:96px;--bs-avatar-size-xxl:128px;--bs-avatar-radius:var(--bs-border-radius-full);--bs-avatar-border-width:var(--bs-border-width-thin);--bs-avatar-border-width-xxl:1.333px}.bs-avatar{box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--bs-avatar-radius);border:var(--bs-avatar-border-width) solid var(--bs-avatar-border-primary);background:var(--bs-avatar-bg-dafault);flex-shrink:0;user-select:none;-webkit-user-select:none}.bs-avatar--xs{width:var(--bs-avatar-size-xs);height:var(--bs-avatar-size-xs);--bs-avatar-icon-size:calc(var(--bs-avatar-size-xs) * 0.6)}.bs-avatar--sm{width:var(--bs-avatar-size-sm);height:var(--bs-avatar-size-sm);--bs-avatar-icon-size:calc(var(--bs-avatar-size-sm) * 0.6)}.bs-avatar--md{width:var(--bs-avatar-size-md);height:var(--bs-avatar-size-md);--bs-avatar-icon-size:calc(var(--bs-avatar-size-md) * 0.6)}.bs-avatar--lg{width:var(--bs-avatar-size-lg);height:var(--bs-avatar-size-lg);--bs-avatar-icon-size:calc(var(--bs-avatar-size-lg) * 0.6)}.bs-avatar--xl{width:var(--bs-avatar-size-xl);height:var(--bs-avatar-size-xl);--bs-avatar-icon-size:calc(var(--bs-avatar-size-xl) * 0.6)}.bs-avatar--xxl{width:var(--bs-avatar-size-xxl);height:var(--bs-avatar-size-xxl);--bs-avatar-icon-size:calc(var(--bs-avatar-size-xxl) * 0.6);border-width:var(--bs-avatar-border-width-xxl)}.bs-avatar__image{display:block;width:100%;height:100%;object-fit:cover}.bs-avatar__icon{--bs-icon-size:var(--bs-avatar-icon-size);color:var(--bs-avatar-icon-primary)}.bs-avatar__initials{color:var(--bs-avatar-text-default);font-family:var(--bs-typography-font-family-body, Roboto), sans-serif;font-weight:var(--bs-font-weight-medium);text-align:center;white-space:nowrap}.bs-avatar--xs .bs-avatar__initials,.bs-avatar--sm .bs-avatar__initials{font-size:var(--bs-fontsize-caption-sm);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-avatar--md .bs-avatar__initials{font-family:var(--bs-typography-font-family-heading, Roboto), sans-serif;font-weight:var(--bs-font-weight-bold);font-size:var(--bs-fontsize-heading-h6);line-height:calc(var(--bs-line-height-heading-h6) * 1px)}.bs-avatar--lg .bs-avatar__initials{font-size:var(--bs-fontsize-body-md);line-height:calc(var(--bs-line-height-body-md) * 1px)}.bs-avatar--xl .bs-avatar__initials,.bs-avatar--xxl .bs-avatar__initials{font-family:var(--bs-typography-font-family-heading, Roboto), sans-serif;font-weight:var(--bs-font-weight-bold);font-size:var(--bs-fontsize-heading-h4);line-height:calc(var(--bs-line-height-heading-h4) * 1px)}:host(:hover:not([disabled])) .bs-avatar{background:var(--bs-avatar-bg-hover);border-color:var(--bs-avatar-border-hover)}:host(:active:not([disabled])) .bs-avatar{background:var(--bs-avatar-bg-pressed);border-color:var(--bs-avatar-border-pressed)}:host(:focus-visible:not([disabled])){outline:none}:host(:focus-visible:not([disabled])) .bs-avatar{background:var(--bs-avatar-bg-focused);border-color:var(--bs-avatar-border-focused);box-shadow:0 0 0 3px var(--bs-avatar-border-focus)}:host([disabled]){opacity:0.5}`;
 
 const BsAvatar = class {
     constructor(hostRef) {
@@ -45,16 +45,9 @@ const BsAvatar = class {
         if (this.type === 'image') {
             return (index.h("span", { part: "container", class: classes }, index.h("img", { part: "image", class: "bs-avatar__image", src: this.src ?? undefined, alt: this.alt ?? '' })));
         }
-        return (index.h("span", { part: "container", class: classes, role: "img", "aria-label": this.ariaLabel ?? undefined }, this.type === 'initials' ? (index.h("span", { part: "initials", class: "bs-avatar__initials" }, this.initials)) : (index.h(UserIcon, null))));
+        return (index.h("span", { part: "container", class: classes, role: "img", "aria-label": this.ariaLabel ?? undefined }, this.type === 'initials' ? (index.h("span", { part: "initials", class: "bs-avatar__initials" }, this.initials)) : (index.h("bs-icon", { part: "icon", class: "bs-avatar__icon", name: "user", tone: "inherit" }))));
     }
 };
-// A generic, standard "user" silhouette (head + shoulders bust) -- not a pixel port of Figma's own
-// exported icon asset (a plain raster/vector glyph this common isn't a proprietary brand asset
-// worth treating as a fixed image import, unlike e.g. bs-logo's actual wordmark), same
-// inline-icon-helper-function pattern as bs-chatbot-header.tsx's NewChatIcon/ExpandIcon/etc. Single
-// shared viewBox scales cleanly to every avatar size via plain CSS width/height, so one glyph
-// covers all six sizes.
-const UserIcon = () => (index.h("svg", { part: "icon", class: "bs-avatar__icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("circle", { cx: "12", cy: "8", r: "4", fill: "currentColor" }), index.h("path", { d: "M4 20.5C4 16.634 7.582 13.5 12 13.5C16.418 13.5 20 16.634 20 20.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
 BsAvatar.style = bsAvatarCss();
 
 exports.bs_avatar = BsAvatar;

package/dist/cjs/bs-badge.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsBadgeCss = () => `:host{display:inline-block}.bs-badge{display:inline-flex;align-items:center;height:var(--bs-spacing-400);padding:0 var(--bs-spacing-200);border-radius:var(--bs-border-radius-full);font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-medium);font-family:inherit;white-space:nowrap}.bs-badge--default{background:var(--bs-badge-bg-default);color:var(--bs-badge-text-default)}.bs-badge--primary{background:var(--bs-badge-bg-primary-container);color:var(--bs-badge-text-primary)}.bs-badge--success{background:var(--bs-badge-bg-success-container);color:var(--bs-badge-text-success)}.bs-badge--warning{background:var(--bs-badge-bg-warning-container);color:var(--bs-badge-text-warning)}.bs-badge--info{background:var(--bs-badge-bg-info-container);color:var(--bs-badge-text-info)}.bs-badge--error{background:var(--bs-badge-bg-error-container);color:var(--bs-badge-text-error)}.bs-badge--neutral{background:var(--bs-badge-bg-neutral-container);color:var(--bs-badge-text-neutral)}.bs-badge--inverse{background:var(--bs-badge-bg-inverse);color:var(--bs-badge-text-inverse)}`;
+const bsBadgeCss = () => `:host{display:inline-block}.bs-badge{display:inline-flex;align-items:center;height:var(--bs-spacing-400);padding:0 var(--bs-spacing-200);border-radius:var(--bs-border-radius-full);font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-medium);font-family:inherit;white-space:nowrap}.bs-badge--default{background:var(--bs-badge-bg-default);color:var(--bs-badge-text-default)}.bs-badge--primary{background:var(--bs-badge-bg-primary-container);color:var(--bs-badge-text-primary)}.bs-badge--success{background:var(--bs-badge-bg-success-container);color:var(--bs-badge-text-success)}.bs-badge--warning{background:var(--bs-badge-bg-warning-container);color:var(--bs-badge-text-warning)}.bs-badge--info{background:var(--bs-badge-bg-info-container);color:var(--bs-badge-text-info)}.bs-badge--error{background:var(--bs-badge-bg-error-container);color:var(--bs-badge-text-error)}.bs-badge--neutral{background:var(--bs-badge-bg-neutral-container);color:var(--bs-badge-text-neutral)}.bs-badge--inverse{background:var(--bs-surface-inverse);color:var(--bs-badge-text-inverse)}`;
 
 const BsBadge = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const BsBadge = class {
     /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
     variant = 'default';
     render() {
-        return (index.h("span", { key: '12d18ea63d62468cede43efaddbf1d4a707c31be', part: "container", class: `bs-badge bs-badge--${this.variant}` }, index.h("slot", { key: '7418716533cf907da4b9cd05a01aaea69e257425' })));
+        return (index.h("span", { key: 'e81df8a115da1e47eec003565f06f7d8f2bce24a', part: "container", class: `bs-badge bs-badge--${this.variant}` }, index.h("slot", { key: '112b68af29d688640aace037db5f9d786956d264' })));
     }
 };
 BsBadge.style = bsBadgeCss();

package/dist/cjs/bs-breadcrumb-overflow.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsBreadcrumbOverflowCss = () => `:host{display:inline-flex;align-items:center;--bs-breadcrumb-overflow-gap:var(--bs-spacing-50);--bs-breadcrumb-overflow-separator-color:var(--bs-icon-default);--bs-breadcrumb-overflow-ellipsis-color:var(--bs-icon-muted);--bs-breadcrumb-overflow-radius:var(--bs-border-radius-100);--bs-breadcrumb-overflow-padding-y:var(--bs-spacing-100);--bs-breadcrumb-overflow-padding-x:var(--bs-spacing-150);--bs-breadcrumb-overflow-hover:var(--bs-color-neutral-container-hover);--bs-breadcrumb-overflow-color:var(--bs-text-muted);--bs-breadcrumb-overflow-font-size:var(--bs-font-size-md);--bs-breadcrumb-overflow-line-height:var(--bs-line-height-body-md);--bs-breadcrumb-overflow-font-size-sm:var(--bs-font-size-sm);--bs-breadcrumb-overflow-line-height-sm:var(--bs-line-height-body-sm);gap:var(--bs-breadcrumb-overflow-gap)}:host(:first-child) .bs-breadcrumb-overflow__separator{display:none}:host([size='sm']) .bs-breadcrumb-overflow__link{font-size:var(--bs-breadcrumb-overflow-font-size-sm);line-height:calc(var(--bs-breadcrumb-overflow-line-height-sm) * 1px)}.bs-breadcrumb-overflow__separator{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--bs-breadcrumb-overflow-separator-color)}.bs-breadcrumb-overflow__separator svg{width:16px;height:16px}.bs-breadcrumb-overflow__wrapper{position:relative;display:inline-flex}.bs-breadcrumb-overflow__ellipsis{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;padding:0;border:none;background:transparent;cursor:pointer;color:var(--bs-breadcrumb-overflow-ellipsis-color);border-radius:var(--bs-breadcrumb-overflow-radius)}.bs-breadcrumb-overflow__ellipsis:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-breadcrumb-overflow__ellipsis svg{width:24px;height:24px}.bs-breadcrumb-overflow__menu{position:absolute;top:calc(100% + var(--bs-breadcrumb-overflow-gap));inset-inline-start:0;z-index:1;white-space:nowrap}.bs-breadcrumb-overflow__link{display:block;box-sizing:border-box;padding:var(--bs-breadcrumb-overflow-padding-y) var(--bs-breadcrumb-overflow-padding-x);border-radius:var(--bs-breadcrumb-overflow-radius);color:var(--bs-breadcrumb-overflow-color);font-size:var(--bs-breadcrumb-overflow-font-size);line-height:calc(var(--bs-breadcrumb-overflow-line-height) * 1px);text-decoration:none;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}a.bs-breadcrumb-overflow__link:hover,a.bs-breadcrumb-overflow__link:focus-visible{background:var(--bs-breadcrumb-overflow-hover)}a.bs-breadcrumb-overflow__link:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:-2px}`;
 
@@ -58,7 +58,7 @@ const BsBreadcrumbOverflow = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e4c2c1cf0601cff0d084fef4f295ad09ef6c3643', role: "listitem" }, index.h("span", { key: 'a085ee9e9d41e5836cb60ccada98a357ba2ba264', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, index.h(CaretRightIcon, { key: '59685abc8d64a821f812f365c4ebd64ba1450ef6' })), index.h("span", { key: '357986825b4f2fcb6af583c031ce8190606df118', class: "bs-breadcrumb-overflow__wrapper" }, index.h("button", { key: '2f10d676681ee442dc66703b8a838b40c8b71a91', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, index.h(DotsThreeIcon, { key: '1a74b819b245fb62fb2599acc3ff458eac024e52' })), this.open && this.items.length > 0 && (index.h("bs-menu", { key: 'c8e57092e8396da8a7d8157eae69022154050075', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (index.h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (index.h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
+        return (index.h(index.Host, { key: '8b47ed9e6346d813bf2db5a510151027d6f2a523', role: "listitem" }, index.h("span", { key: '7eb3b681a555c1bf07b16c34c8e7364384ecb3d2', part: "separator", class: "bs-breadcrumb-overflow__separator", "aria-hidden": "true" }, index.h(CaretRightIcon, { key: '4bd4ced37d1a24b37f507b53b7b6c0fe8f577de7' })), index.h("span", { key: '03f6ff9300d53bcbddf6d8fb57ed08a85fe9e67b', class: "bs-breadcrumb-overflow__wrapper" }, index.h("button", { key: '9b0fb0cfc28ccffbfe54dffc8a5612d1c83b27f5', type: "button", part: "ellipsis", class: "bs-breadcrumb-overflow__ellipsis", "aria-haspopup": "menu", "aria-expanded": String(this.open), "aria-label": this.overflowLabel, onClick: this.onEllipsisToggle }, index.h(DotsThreeIcon, { key: '932b86a682c495b1acc47cd703294c5b2dbf3c03' })), this.open && this.items.length > 0 && (index.h("bs-menu", { key: '809bbfe99843c3e531ee2e620a5adca4c66360d9', part: "menu", class: "bs-breadcrumb-overflow__menu" }, this.items.map(item => item.href ? (index.h("a", { part: "link", class: "bs-breadcrumb-overflow__link", href: item.href, onClick: this.onItemClick(item.href) }, item.label)) : (index.h("span", { part: "link", class: "bs-breadcrumb-overflow__link" }, item.label))))))));
     }
 };
 const CaretRightIcon = () => (index.h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/cjs/bs-breadcrumb.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsBreadcrumbCss = () => `:host{display:inline-flex;align-items:center;--bs-breadcrumb-gap:var(--bs-spacing-50);--bs-breadcrumb-separator-color:var(--bs-icon-default);--bs-breadcrumb-color-default:var(--bs-text-muted);--bs-breadcrumb-color-hover:var(--bs-text-default);--bs-breadcrumb-color-current:var(--bs-text-default);--bs-breadcrumb-font-size:var(--bs-font-size-md);--bs-breadcrumb-line-height:var(--bs-line-height-body-md);--bs-breadcrumb-font-size-sm:var(--bs-font-size-sm);--bs-breadcrumb-line-height-sm:var(--bs-line-height-body-sm);--bs-breadcrumb-font-weight-default:var(--bs-font-weight-regular);--bs-breadcrumb-font-weight-current:var(--bs-font-weight-semibold);--bs-breadcrumb-focus-ring-color:var(--bs-border-neutral-focus);--bs-breadcrumb-radius:var(--bs-border-radius-50);gap:var(--bs-breadcrumb-gap);font-family:inherit;font-size:var(--bs-breadcrumb-font-size);line-height:calc(var(--bs-breadcrumb-line-height) * 1px)}:host(:first-child) .bs-breadcrumb__separator{display:none}:host([size='sm']){font-size:var(--bs-breadcrumb-font-size-sm);line-height:calc(var(--bs-breadcrumb-line-height-sm) * 1px)}.bs-breadcrumb__separator{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--bs-breadcrumb-separator-color)}.bs-breadcrumb__separator svg{width:16px;height:16px}.bs-breadcrumb__link{color:var(--bs-breadcrumb-color-default);font-weight:var(--bs-breadcrumb-font-weight-default);text-decoration:none;border-radius:var(--bs-breadcrumb-radius);transition:color var(--bs-duration-fast) var(--bs-easing-standard)}a.bs-breadcrumb__link:hover{color:var(--bs-breadcrumb-color-hover)}a.bs-breadcrumb__link:focus-visible{outline:2px solid var(--bs-breadcrumb-focus-ring-color);outline-offset:2px}.bs-breadcrumb__current{color:var(--bs-breadcrumb-color-current);font-weight:var(--bs-breadcrumb-font-weight-current)}`;
+const bsBreadcrumbCss = () => `:host{display:inline-flex;align-items:center;--bs-breadcrumb-gap:var(--bs-spacing-50);--bs-breadcrumb-separator-color:var(--bs-icon-default);--bs-breadcrumb-color-default:var(--bs-text-muted);--bs-breadcrumb-color-hover:var(--bs-text-default);--bs-breadcrumb-color-plain:var(--bs-text-secondary);--bs-breadcrumb-color-current:var(--bs-text-default);--bs-breadcrumb-font-size:var(--bs-font-size-md);--bs-breadcrumb-line-height:var(--bs-line-height-body-md);--bs-breadcrumb-font-size-sm:var(--bs-font-size-sm);--bs-breadcrumb-line-height-sm:var(--bs-line-height-body-sm);--bs-breadcrumb-font-weight-default:var(--bs-font-weight-regular);--bs-breadcrumb-font-weight-current:var(--bs-font-weight-semibold);--bs-breadcrumb-focus-ring-color:var(--bs-border-neutral-focus);--bs-breadcrumb-radius:var(--bs-border-radius-50);gap:var(--bs-breadcrumb-gap);font-family:inherit;font-size:var(--bs-breadcrumb-font-size);line-height:calc(var(--bs-breadcrumb-line-height) * 1px)}:host(:first-child) .bs-breadcrumb__separator{display:none}:host([size='sm']){font-size:var(--bs-breadcrumb-font-size-sm);line-height:calc(var(--bs-breadcrumb-line-height-sm) * 1px)}.bs-breadcrumb__separator{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--bs-breadcrumb-separator-color)}.bs-breadcrumb__separator svg{width:16px;height:16px}.bs-breadcrumb__link{color:var(--bs-breadcrumb-color-default);font-weight:var(--bs-breadcrumb-font-weight-default);text-decoration:none;border-radius:var(--bs-breadcrumb-radius);transition:color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-breadcrumb__link--plain{color:var(--bs-breadcrumb-color-plain);cursor:default}a.bs-breadcrumb__link:hover{color:var(--bs-breadcrumb-color-hover)}a.bs-breadcrumb__link:focus-visible{outline:2px solid var(--bs-breadcrumb-focus-ring-color);outline-offset:2px}.bs-breadcrumb__current{color:var(--bs-breadcrumb-color-current);font-weight:var(--bs-breadcrumb-font-weight-current)}`;
 
 const BsBreadcrumb = class {
     constructor(hostRef) {
@@ -41,7 +41,7 @@ const BsBreadcrumb = class {
             ev.preventDefault();
     };
     render() {
-        return (index.h(index.Host, { key: '4bab1e3218264a8c97ccb1b9df4d0bf66fe8a4c7', role: "listitem" }, index.h("span", { key: '1012f764261168bb246e4fef76b1988b70cd290c', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, index.h(CaretRightIcon, { key: 'b37d81c4bfd0313fb313b862e194ca30950ee839' })), this.current ? (index.h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, index.h("slot", null))) : this.href ? (index.h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, index.h("slot", null))) : (index.h("span", { part: "link", class: "bs-breadcrumb__link" }, index.h("slot", null)))));
+        return (index.h(index.Host, { key: 'b6d483d8dd99cda45b49bfc488aeec3514e3b234', role: "listitem" }, index.h("span", { key: '2dd5b9265590a43403f22830d34c1c7c4815927e', part: "separator", class: "bs-breadcrumb__separator", "aria-hidden": "true" }, index.h(CaretRightIcon, { key: '7178d1170e8fbdde1281514ac6916bf1e7561e7b' })), this.current ? (index.h("span", { part: "current", class: "bs-breadcrumb__current", "aria-current": "page" }, index.h("slot", null))) : this.href ? (index.h("a", { part: "link", class: "bs-breadcrumb__link", href: this.href, onClick: this.onLinkClick }, index.h("slot", null))) : (index.h("span", { part: "link", class: "bs-breadcrumb__link bs-breadcrumb__link--plain" }, index.h("slot", null)))));
     }
 };
 const CaretRightIcon = () => (index.h("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, index.h("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));

package/dist/cjs/bs-breadcrumbs.cjs.entry.js

@@ -1,12 +1,13 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsBreadcrumbsCss = () => `:host{display:block;--bs-breadcrumbs-gap:var(--bs-spacing-50)}.bs-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;gap:var(--bs-breadcrumbs-gap)}`;
 
 const BsBreadcrumbs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.bsNavigate = index.createEvent(this, "bsNavigate");
     }
     get el() { return index.getElement(this); }
     /** Accessible name for the `<nav>` landmark, via `aria-label`. Same pattern as
@@ -21,6 +22,13 @@ const BsBreadcrumbs = class {
      * `bs-tab`/`bs-inline-tab` children. Re-propagated on `size` changes and whenever the slotted
      * children change (e.g. a crumb added later). */
     size = 'md';
+    /** Fires when a crumb's link (or one in a `bs-breadcrumb-overflow` popup) is clicked, before the
+     * browser navigates. **Cancelable**: call `event.preventDefault()` to route it yourself. Detail
+     * is `{ href }`. This is the child's own event bubbling up; it is declared here (and never
+     * emitted from here) so the framework wrappers expose `onBsNavigate` / `(bsNavigate)` /
+     * `@bs-navigate` on `<bs-breadcrumbs>`. `event.target` is the crumb that was clicked. */
+    // eslint-disable-next-line @stencil-community/own-props-must-be-private
+    bsNavigate;
     onSizeChange(size) {
         this.propagateSize(size);
     }
@@ -36,7 +44,7 @@ const BsBreadcrumbs = class {
         });
     }
     render() {
-        return (index.h("nav", { key: '8e8c96763ed36fcbf87fcd8fa348c294cad89096', "aria-label": this.label }, index.h("ol", { key: 'aae3d390d6ddc68fba3e2ef96bfb57160715fc95', part: "list", class: "bs-breadcrumbs__list" }, index.h("slot", { key: '2edfd750dcb70d9fd9bec01ac42ad52c79dc3a34', onSlotchange: this.onSlotChange }))));
+        return (index.h("nav", { key: '439813704a14d5697c3b74805f8e11473183fc67', "aria-label": this.label }, index.h("ol", { key: '1ef451cfb2e92781c5ef12255ce960ccd1190c78', part: "list", class: "bs-breadcrumbs__list" }, index.h("slot", { key: '624b30239abeaacd56584fc0342fe31c3f823eb8', onSlotchange: this.onSlotChange }))));
     }
     static get watchers() { return {
         "size": [{

package/dist/cjs/bs-button-skeleton.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
 const bsButtonSkeletonCss = () => `:host{display:inline-block;--bs-button-skeleton-height-sm:var(--bs-spacing-500);--bs-button-skeleton-height-md:var(--bs-spacing-600);--bs-button-skeleton-height-lg:var(--bs-spacing-700);--bs-button-skeleton-width:96px}.bs-button-skeleton{display:inline-block;border-radius:var(--bs-border-radius-100);width:var(--bs-button-skeleton-width);background:var(--bs-color-neutral-container);animation:bs-button-skeleton-pulse 1.5s ease-in-out infinite}.bs-button-skeleton--sm{height:var(--bs-button-skeleton-height-sm)}.bs-button-skeleton--md{height:var(--bs-button-skeleton-height-md)}.bs-button-skeleton--lg{height:var(--bs-button-skeleton-height-lg)}@keyframes bs-button-skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}@media (prefers-reduced-motion: reduce){.bs-button-skeleton{animation:none}}`;
 
@@ -13,7 +13,7 @@ const BsButtonSkeleton = class {
     /** Accessible name announced for the loading placeholder. */
     loadingLabel = 'Loading';
     render() {
-        return index.h("span", { key: 'ba65829a03b8c34ec0f42b157626e5869978d3bf', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": this.loadingLabel });
+        return index.h("span", { key: 'eceeb97c96ab7be19cce6cb2fc5952b197bcbaab', part: "container", class: `bs-button-skeleton bs-button-skeleton--${this.size}`, role: "status", "aria-label": this.loadingLabel });
     }
 };
 BsButtonSkeleton.style = bsButtonSkeletonCss();

package/dist/cjs/bs-button_2.cjs.entry.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var index = require('./index-BFxk-bY6.js');
+
+const bsButtonCss = () => `:host{display:inline-block;width:var(--bs-button-width);--bs-button-width:auto;--bs-button-subtle-color:var(--bs-color-neutral-default);--bs-button-height-sm:var(--bs-spacing-400);--bs-button-height-md:var(--bs-spacing-550);--bs-button-height-lg:var(--bs-spacing-600);--bs-button-radius:var(--bs-border-radius-100);--bs-button-padding-x-sm:var(--bs-spacing-150);--bs-button-padding-x-md:var(--bs-spacing-150);--bs-button-padding-x-lg:var(--bs-spacing-150);--bs-button-padding-x-icon-side:var(--bs-spacing-150);--bs-button-padding-x-label-side:var(--bs-spacing-150);--bs-button-error-default:var(--bs-color-error-default);--bs-button-error-hover:var(--bs-color-error-hover);--bs-button-error-focus:var(--bs-border-error-focus);--bs-button-error-pressed:var(--bs-color-error-pressed);--bs-button-error-disabled:var(--bs-surface-action-disabled);--bs-button-success-default:var(--bs-color-success-default);--bs-button-success-hover:var(--bs-color-success-hover);--bs-button-success-focus:var(--bs-border-success-focus);--bs-button-success-pressed:var(--bs-color-success-pressed);--bs-button-success-disabled:var(--bs-surface-action-disabled);--bs-button-warning-default:var(--bs-color-warning-default);--bs-button-warning-hover:var(--bs-color-warning-hover);--bs-button-warning-focus:var(--bs-border-warning-focus);--bs-button-warning-pressed:var(--bs-color-warning-pressed);--bs-button-warning-disabled:var(--bs-surface-action-disabled);--bs-button-info-default:var(--bs-color-info-default);--bs-button-info-hover:var(--bs-color-info-hover);--bs-button-info-focus:var(--bs-border-info-focus);--bs-button-info-pressed:var(--bs-color-info-pressed);--bs-button-info-disabled:var(--bs-surface-action-disabled);--bs-button-subtle-hover:var(--bs-color-neutral-container);--bs-button-subtle-pressed:var(--bs-color-neutral-container-pressed);--bs-button-subtle-focus:var(--bs-border-primary-focus);--bs-button-neutral-border:var(--bs-border-neutral-container);--bs-button-neutral-border-hover:var(--bs-border-neutral-container-hover);--bs-button-neutral-border-pressed:var(--bs-border-neutral-container-pressed);--bs-button-neutral-hover:var(--bs-color-neutral-container-hover);--bs-button-neutral-pressed:var(--bs-color-neutral-container-pressed);--bs-button-outlined-color:var(--bs-color-primary-default);--bs-button-outlined-border:var(--bs-color-primary-default);--bs-button-outlined-border-hover:var(--bs-color-primary-hover);--bs-button-outlined-border-pressed:var(--bs-color-primary-pressed);--bs-button-outlined-text-hover:var(--bs-text-action-hover);--bs-button-outlined-focus:var(--bs-border-primary-focus);--bs-button-outlined-container:var(--bs-color-primary-container)}.bs-button{width:100%;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;border-radius:var(--bs-button-radius);font-family:inherit;font-weight:var(--bs-font-weight-regular);cursor:pointer;position:relative;transition:background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease)}.bs-button:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-button:disabled{cursor:not-allowed}.bs-button--sm{height:var(--bs-button-height-sm);padding:0 var(--bs-button-padding-x-sm);font-size:var(--bs-font-size-sm)}.bs-button--md{height:var(--bs-button-height-md);padding:0 var(--bs-button-padding-x-md);font-size:var(--bs-font-size-md)}.bs-button--lg{height:var(--bs-button-height-lg);padding:0 var(--bs-button-padding-x-lg);font-size:var(--bs-font-size-lg)}.bs-button--primary{background:var(--bs-button-primary-default);color:var(--bs-text-on-action)}.bs-button--primary:hover:not(:disabled){background:var(--bs-button-primary-hover)}.bs-button--primary:active:not(:disabled){background:var(--bs-button-primary-pressed)}.bs-button--primary:disabled{background:var(--bs-button-primary-disabled);color:var(--bs-text-on-disabled)}.bs-button--neutral{background:var(--bs-button-neutral-container);color:var(--bs-text-default);border:1px solid var(--bs-button-neutral-border)}.bs-button--neutral:hover:not(:disabled){background:var(--bs-button-neutral-hover);border-color:var(--bs-button-neutral-border-hover)}.bs-button--neutral:active:not(:disabled){background:var(--bs-button-neutral-pressed);border-color:var(--bs-button-neutral-border-pressed)}.bs-button--neutral:disabled{background:var(--bs-button-neutral-disabled);color:var(--bs-text-on-disabled);border-color:var(--bs-button-neutral-border)}.bs-button--error{background:var(--bs-button-error-default);color:var(--bs-text-on-action)}.bs-button--error:hover:not(:disabled){background:var(--bs-button-error-hover)}.bs-button--error:active:not(:disabled){background:var(--bs-button-error-pressed)}.bs-button--error:disabled{background:var(--bs-button-error-disabled);color:var(--bs-text-on-disabled)}.bs-button--error:focus-visible{outline-color:var(--bs-button-error-focus)}.bs-button--success{background:var(--bs-button-success-default);color:var(--bs-text-on-action)}.bs-button--success:hover:not(:disabled){background:var(--bs-button-success-hover)}.bs-button--success:active:not(:disabled){background:var(--bs-button-success-pressed)}.bs-button--success:disabled{background:var(--bs-button-success-disabled);color:var(--bs-text-on-disabled)}.bs-button--success:focus-visible{outline-color:var(--bs-button-success-focus)}.bs-button--warning{background:var(--bs-button-warning-default);color:var(--bs-text-on-action)}.bs-button--warning:hover:not(:disabled){background:var(--bs-button-warning-hover)}.bs-button--warning:active:not(:disabled){background:var(--bs-button-warning-pressed)}.bs-button--warning:disabled{background:var(--bs-button-warning-disabled);color:var(--bs-text-on-disabled)}.bs-button--warning:focus-visible{outline-color:var(--bs-button-warning-focus)}.bs-button--info{background:var(--bs-button-info-default);color:var(--bs-text-on-action)}.bs-button--info:hover:not(:disabled){background:var(--bs-button-info-hover)}.bs-button--info:active:not(:disabled){background:var(--bs-button-info-pressed)}.bs-button--info:disabled{background:var(--bs-button-info-disabled);color:var(--bs-text-on-disabled)}.bs-button--info:focus-visible{outline-color:var(--bs-button-info-focus)}.bs-button--subtle{background:transparent;color:var(--bs-button-subtle-color)}.bs-button--subtle:hover:not(:disabled){background:var(--bs-button-subtle-hover)}.bs-button--subtle:active:not(:disabled){background:var(--bs-button-subtle-pressed)}.bs-button--subtle:disabled{background:transparent;color:var(--bs-text-on-disabled)}.bs-button--subtle:focus-visible{outline-color:var(--bs-button-subtle-focus);background:var(--bs-button-subtle-hover)}.bs-button--outlined{background:transparent;color:var(--bs-button-outlined-color);border:1px solid var(--bs-button-outlined-border)}.bs-button--outlined:hover:not(:disabled){background:var(--bs-button-outlined-container);border-color:var(--bs-button-outlined-border-hover);color:var(--bs-button-outlined-text-hover)}.bs-button--outlined:active:not(:disabled){background:var(--bs-button-outlined-container);color:var(--bs-button-outlined-text-hover);border-color:var(--bs-button-outlined-border-pressed)}.bs-button--outlined:disabled{opacity:var(--bs-opacity-disabled);cursor:not-allowed}.bs-button--outlined:focus-visible{outline-color:var(--bs-button-outlined-focus)}.bs-button__icon--visible{margin-inline-end:var(--bs-spacing-50)}.bs-button__end-icon--visible{margin-inline-start:var(--bs-spacing-50)}.bs-button__icon ::slotted(*),.bs-button__end-icon ::slotted(*){display:block;width:1em;height:1em}.bs-button--icon-only{padding:0;aspect-ratio:1 / 1}.bs-button--icon-only .bs-button__icon--visible{margin-inline-end:0}.bs-button--icon-only .bs-button__end-icon--visible{margin-inline-start:0}.bs-button--has-icon:not(.bs-button--has-end-icon){padding-inline-start:var(--bs-button-padding-x-icon-side);padding-inline-end:var(--bs-button-padding-x-label-side)}.bs-button--has-end-icon:not(.bs-button--has-icon){padding-inline-start:var(--bs-button-padding-x-label-side);padding-inline-end:var(--bs-button-padding-x-icon-side)}.bs-button--has-icon.bs-button--has-end-icon{padding-inline-start:var(--bs-button-padding-x-icon-side);padding-inline-end:var(--bs-button-padding-x-icon-side)}@media (forced-colors: active){.bs-button{border:1px solid ButtonText}.bs-button:disabled{border-color:GrayText;color:GrayText}.bs-button:focus-visible{outline:2px solid Highlight;outline-offset:2px}}`;
+
+const BsButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    /**
+     * Visual style. Maps directly to the brandsync-tokens `--bs-button-*` semantic set.
+     * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
+     * emphasis alternative to `primary`.
+     */
+    variant = 'primary';
+    /** Sizing scale. */
+    size = 'md';
+    /** Disables the button and applies the disabled token set. */
+    disabled = false;
+    /** Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation
+     * runs); `reset` resets it; `button` (default) does nothing on its own. */
+    type = 'button';
+    /**
+     * Accessible name for the button. Required for icon-only usage (no visible label text via the
+     * default slot) so screen readers still announce what the button does. Stencil reflects this
+     * camelCase prop to the `aria-label` HTML attribute automatically.
+     */
+    ariaLabel = null;
+    /**
+     * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
+     * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component
+     * does not toggle itself; the owner flips this on click.
+     */
+    pressed;
+    /** Forwarded to the inner `<button>` as `aria-expanded`, for disclosure/menu buttons. */
+    ariaExpanded = null;
+    /** Forwarded to the inner `<button>` as `aria-controls`. Note an id only resolves inside this
+     * component's shadow tree, so it can't point at an element in the page's light DOM. */
+    ariaControls = null;
+    /** Forwarded to the inner `<button>` as `aria-haspopup`. */
+    ariaHasPopup = null;
+    /** Tracks whether the `icon` slot has assigned content, so the icon/label gap only
+     * applies when there's actually an icon. */
+    hasIcon = false;
+    /** Tracks whether the `end-icon` slot has assigned content, so the icon/label gap only
+     * applies when there's actually a trailing icon. */
+    hasEndIcon = false;
+    /**
+     * Tracks whether the default (label) slot has assigned content, so an icon-only button can be
+     * styled/sized differently (see `bs-button--icon-only`).
+     *
+     * Known edge case (not fixed, same simplification `hasIcon`/similar flags elsewhere in this
+     * codebase already make): a default slot containing only whitespace (e.g. a lone space text
+     * node) still counts as `hasLabel = true`, since checking for assigned nodes doesn't
+     * distinguish whitespace-only text nodes from real content.
+     */
+    hasLabel = false;
+    /**
+     * Computes the initial `hasIcon`/`hasEndIcon`/`hasLabel` state directly from the host's light
+     * DOM children, before first render.
+     *
+     * This can't be left to the `slotchange` handlers below alone: `slotchange` only fires when a
+     * slot's *assigned nodes* change, and a slot that starts out with zero assigned nodes and stays
+     * that way never fires it (nothing changed). Relying on `slotchange` alone left an icon-only
+     * button (default slot empty from the start) permanently stuck on its initial `hasLabel`
+     * default, so `bs-button--icon-only` never applied.
+     */
+    componentWillLoad() {
+        this.hasIcon = this.hasSlottedContent('icon');
+        this.hasEndIcon = this.hasSlottedContent('end-icon');
+        this.hasLabel = this.hasSlottedContent(null);
+    }
+    hasSlottedContent(slotName) {
+        return Array.from(this.el.childNodes).some(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                return node.getAttribute('slot') === slotName;
+            }
+            // Only elements can carry a `slot` attribute -- any other node type (text, comments) can
+            // only ever be assigned to the default slot.
+            return slotName === null;
+        });
+    }
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onEndIconSlotchange = (ev) => {
+        this.hasEndIcon = ev.target.assignedNodes().length > 0;
+    };
+    onLabelSlotchange = (ev) => {
+        this.hasLabel = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        const form = this.internals?.form;
+        if (!form || this.disabled)
+            return;
+        if (this.type === 'submit')
+            form.requestSubmit();
+        else if (this.type === 'reset')
+            form.reset();
+    };
+    render() {
+        const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
+        return (index.h("button", { key: 'fd998f3e3d58633626c99ffb47228c3308150d05', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), "aria-expanded": this.ariaExpanded, "aria-controls": this.ariaControls, "aria-haspopup": this.ariaHasPopup, onClick: this.onClick }, index.h("bs-ripple", { key: 'b6909337c1e6f35bc42b6dc06db31cd2e822a299', part: "ripple", centered: iconOnly, disabled: this.disabled }), index.h("span", { key: 'a753ffbf8a61011bc6c4ae05937a035605a1d79a', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, index.h("slot", { key: '66e9b0f67e04b3891f66ee311ffaebd266c3824b', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: 'e9007a0a0fe2b51ac3401195feff203c94cfbe3b', part: "label", class: "bs-button__label" }, index.h("slot", { key: 'df18ce6e274b6f99e496944aa40fd9977f99dd86', onSlotchange: this.onLabelSlotchange })), index.h("span", { key: 'ddf8300967a813c02ae1996eee42793211b71537', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, index.h("slot", { key: '4d200a0c215ff52161941315bbdab21a08daf90a', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+};
+BsButton.style = bsButtonCss();
+
+const bsRippleCss = () => `:host{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden;pointer-events:none;--bs-ripple-color:currentColor;--bs-ripple-opacity:0.24;--bs-ripple-duration:var(--bs-duration-slower);--bs-ripple-easing:var(--bs-easing-decelerate)}.bs-ripple{position:absolute;inset:0;overflow:hidden;border-radius:inherit}.bs-ripple__circle{position:absolute;border-radius:50%;background:var(--bs-ripple-color);opacity:0;transform:scale(0);pointer-events:none}`;
+
+const BsRipple = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Always start the ripple from the centre instead of the press point. Use it for round or icon-only controls. */
+    centered = false;
+    /** Turns the ripple off. A disabled parent (`<button disabled>`) also stops it. */
+    disabled = false;
+    /**
+     * CSS selector of the element to listen on, found with `closest()` from the ripple (so it stays inside
+     * the same shadow tree). By default the ripple listens on its parent. Use it when the pressable element
+     * is bigger than the ripple's own parent, e.g. a switch whose ripple sits on the knob but whose whole
+     * `<label>` is the press target.
+     */
+    triggerSelector;
+    onTriggerChange() {
+        this.bind();
+    }
+    surface;
+    target;
+    connectedCallback() {
+        this.bind();
+    }
+    componentDidLoad() {
+        // Props are set by now, so a `triggerSelector` is resolved against the final DOM.
+        this.bind();
+    }
+    disconnectedCallback() {
+        this.unbind();
+    }
+    bind() {
+        this.unbind();
+        const target = (this.triggerSelector && this.el.closest(this.triggerSelector)) || this.el.parentElement || this.el.getRootNode().host;
+        this.target = target;
+        this.target?.addEventListener('pointerdown', this.onPointerDown);
+    }
+    unbind() {
+        this.target?.removeEventListener('pointerdown', this.onPointerDown);
+        this.target = undefined;
+    }
+    onPointerDown = (ev) => {
+        if (this.disabled || ev.button !== 0 || this.target?.disabled)
+            return;
+        const surface = this.surface;
+        if (!surface)
+            return;
+        const style = getComputedStyle(this.el);
+        const duration = this.toMs(style.getPropertyValue('--bs-ripple-duration'));
+        if (duration === 0)
+            return;
+        const rect = this.el.getBoundingClientRect();
+        const x = this.centered ? rect.width / 2 : ev.clientX - rect.left;
+        const y = this.centered ? rect.height / 2 : ev.clientY - rect.top;
+        // Radius that reaches the farthest corner, so the ripple always covers the whole surface.
+        const radius = Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
+        const circle = document.createElement('span');
+        circle.className = 'bs-ripple__circle';
+        circle.style.left = `${x - radius}px`;
+        circle.style.top = `${y - radius}px`;
+        circle.style.width = circle.style.height = `${radius * 2}px`;
+        surface.appendChild(circle);
+        const opacity = style.getPropertyValue('--bs-ripple-opacity').trim() || '0.24';
+        const animation = circle.animate([
+            { transform: 'scale(0)', opacity },
+            { transform: 'scale(1)', opacity: 0 },
+        ], { duration, easing: style.getPropertyValue('--bs-ripple-easing').trim() || 'ease-out' });
+        animation.onfinish = animation.oncancel = () => circle.remove();
+    };
+    toMs(value) {
+        const v = value.trim();
+        if (v.endsWith('ms'))
+            return parseFloat(v);
+        if (v.endsWith('s'))
+            return parseFloat(v) * 1000;
+        return 0;
+    }
+    render() {
+        return (index.h(index.Host, { key: '7a50bc82ef24d834acb7158e7b63ff688eb7972b', "aria-hidden": "true" }, index.h("div", { key: 'f20c8ceacc9b68569c1845f82922f5af74146d4c', part: "surface", class: "bs-ripple", ref: el => (this.surface = el) })));
+    }
+    static get watchers() { return {
+        "triggerSelector": [{
+                "onTriggerChange": 0
+            }]
+    }; }
+};
+BsRipple.style = bsRippleCss();
+
+exports.bs_button = BsButton;
+exports.bs_ripple = BsRipple;

package/dist/cjs/bs-card.cjs.entry.js

@@ -1,16 +1,48 @@
 'use strict';
 
-var index = require('./index-BYfMRtlW.js');
+var index = require('./index-BFxk-bY6.js');
 
-const bsCardCss = () => `:host{display:block;--bs-card-bg:var(--bs-paper-bg-raised);--bs-card-radius:var(--bs-border-radius-100);--bs-card-padding:var(--bs-spacing-200);--bs-card-border-width:0px;--bs-card-border-color:var(--bs-border-default);--bs-card-shadow:var(--bs-shadow-sm);--bs-card-overflow:hidden}:host([surface='base']){--bs-card-bg:var(--bs-paper-bg-base);--bs-card-shadow:none}:host([surface='container']){--bs-card-bg:var(--bs-paper-bg-container);--bs-card-shadow:none}.bs-card{box-sizing:border-box;height:100%;overflow:var(--bs-card-overflow);border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-radius);background:var(--bs-card-bg);box-shadow:var(--bs-card-shadow);font-family:inherit;color:var(--bs-text-default)}.bs-card__image--visible ::slotted(img){display:block;width:100%;height:auto;object-fit:cover}.bs-card__content{padding:var(--bs-card-padding)}.bs-card__header ::slotted(*){margin:0 0 var(--bs-spacing-100) 0}.bs-card__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--bs-spacing-200)}.bs-card__footer ::slotted(*){margin:var(--bs-spacing-100) 0 0 0}@media (forced-colors: active){.bs-card{border:1px solid CanvasText}}`;
+const bsCardCss = () => `:host{display:block;--bs-card-bg:var(--bs-paper-bg-raised);--bs-card-radius:var(--bs-border-radius-100);--bs-card-padding:var(--bs-spacing-200);--bs-card-border-width:0px;--bs-card-border-color:var(--bs-border-default);--bs-card-shadow:var(--bs-shadow-sm);--bs-card-overflow:hidden;--bs-card-bg-hover:var(--bs-surface-hover);--bs-card-bg-selected:var(--bs-surface-selected);--bs-card-ring-color-selected:var(--bs-border-primary);--bs-card-ring-width-selected:2px;--bs-card-focus-ring-color:var(--bs-border-neutral-focus)}:host([surface='base']){--bs-card-bg:var(--bs-paper-bg-base);--bs-card-shadow:none}:host([surface='container']){--bs-card-bg:var(--bs-paper-bg-container);--bs-card-shadow:none}.bs-card{box-sizing:border-box;height:100%;overflow:var(--bs-card-overflow);border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-radius);background:var(--bs-card-bg);box-shadow:var(--bs-card-shadow);font-family:inherit;color:var(--bs-text-default);position:relative}.bs-card__action{display:block;box-sizing:border-box;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}.bs-card__action::after{content:'';position:absolute;inset:0}.bs-card__action:focus-visible{outline:none}.bs-card--interactive{cursor:pointer;transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-card--interactive:hover{background:var(--bs-card-bg-hover)}.bs-card--selected,.bs-card--selected:hover{background:var(--bs-card-bg-selected);box-shadow:0 0 0 var(--bs-card-ring-width-selected) var(--bs-card-ring-color-selected), var(--bs-card-shadow)}.bs-card--interactive:has(.bs-card__action:focus-visible){outline:2px solid var(--bs-card-focus-ring-color);outline-offset:calc(var(--bs-card-ring-width-selected) + 2px)}.bs-card--interactive .bs-card__body,.bs-card--interactive .bs-card__footer{position:relative;pointer-events:none}.bs-card--interactive .bs-card__body ::slotted(:is(a,button,input,select,textarea,bs-button,bs-icon-button,bs-checkbox,bs-switch,bs-radio,bs-input,[tabindex])),.bs-card--interactive .bs-card__footer ::slotted(:is(a,button,input,select,textarea,bs-button,bs-icon-button,bs-checkbox,bs-switch,bs-radio,bs-input,[tabindex])){pointer-events:auto}.bs-card__image--visible ::slotted(img){display:block;width:100%;height:auto;object-fit:cover}.bs-card__content{padding:var(--bs-card-padding)}.bs-card__header ::slotted(*){margin:0 0 var(--bs-spacing-100) 0}.bs-card__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--bs-spacing-200)}.bs-card__footer ::slotted(*){margin:var(--bs-spacing-100) 0 0 0}@media (forced-colors: active){.bs-card{border:1px solid CanvasText}.bs-card--selected{outline:2px solid Highlight}}`;
 
 const BsCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.bsChange = index.createEvent(this, "bsChange");
+        this.bsNavigate = index.createEvent(this, "bsNavigate");
     }
     /** Maps to the brandsync-tokens `--bs-paper-bg-*` set — Brandsync's tokens don't have a
      * dedicated "card" component yet, so this reuses the existing Paper surface tokens. */
     surface = 'raised';
+    /** Makes the whole card a link to this URL (a real `<a>`). Takes precedence over `selectable`. */
+    href;
+    /** Link `target`, only used with `href`. With `_blank`, `rel` defaults to `noopener noreferrer`. */
+    target;
+    /** Link `rel`, only used with `href`. */
+    rel;
+    /** Makes the whole card a toggle (a real `<button aria-pressed>`). Ignored when `href` is set. */
+    selectable = false;
+    /** Whether a `selectable` card is selected. Mutable and reflected; toggled by the user. */
+    selected = false;
+    /** Accessible name for the clickable card, used instead of the `header` slot text. Set it when
+     * there is no `header` content, or when the header text is not a good name on its own. */
+    label;
+    /** Fires when a `selectable` card is toggled by the user, with the new `selected` value. */
+    bsChange;
+    /** Fires when a link card (`href`) is clicked, before the browser navigates. **Cancelable**:
+     * `preventDefault()` stops the navigation so you can route it yourself. Detail is `{ href }`.
+     * Modified clicks (ctrl/cmd/shift/alt, middle button) are left to the browser. */
+    bsNavigate;
+    onLinkClick = (ev) => {
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        const navigate = this.bsNavigate.emit({ href: this.href });
+        if (navigate.defaultPrevented)
+            ev.preventDefault();
+    };
+    onToggleClick = () => {
+        this.selected = !this.selected;
+        this.bsChange.emit(this.selected);
+    };
     /** Tracks whether the `image` slot has assigned content, so the image wrapper only reserves
      * layout space (and clips its top corners) when there's actually an image -- same pattern as
      * `bs-dialog`'s `hasImage`. */
@@ -19,7 +51,16 @@ const BsCard = class {
         this.hasImage = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (index.h("div", { key: 'be681abe6454f6f0ef03ec8ef05f2ef7e036b2fb', part: "container", class: `bs-card bs-card--${this.surface}` }, index.h("div", { key: '94fcc1a41307d29cd6e3d1c0db68e4ad56f76e66', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, index.h("slot", { key: 'fa2441f597664fcfb1920f7f6b6d81cebb33c3cf', name: "image", onSlotchange: this.onImageSlotchange })), index.h("div", { key: 'f45578aeab67c531e3f1066788b646464e4ee5a3', class: "bs-card__content" }, index.h("div", { key: '44bc9e76ebb151099736e73fac2eea1e5baba014', part: "header", class: "bs-card__header" }, index.h("slot", { key: '58f766725dd1bd81aa4a5f5fa1da2626fd705582', name: "header" })), index.h("div", { key: '8ee2df46d6a643e0f7d13ec875a363b4ef714b00', part: "body", class: "bs-card__body" }, index.h("slot", { key: '8c47ca1e2acffbc952cf15a0518c3ca2d640fe58' })), index.h("div", { key: 'de5856f9b0a72cd42345320fbdd2a290640039d7', part: "footer", class: "bs-card__footer" }, index.h("slot", { key: '982cee8e6fb70228faf2cd7a55312ef690bd23a2', name: "footer" })))));
+        const isLink = !!this.href;
+        const isToggle = !isLink && this.selectable;
+        const rel = this.rel ?? (this.target === '_blank' ? 'noopener noreferrer' : undefined);
+        const header = index.h("slot", { key: 'a30b4f1a71f4469458a8c701b38b51deb1b92df5', name: "header" });
+        const classes = ['bs-card', `bs-card--${this.surface}`];
+        if (isLink || isToggle)
+            classes.push('bs-card--interactive');
+        if (isToggle && this.selected)
+            classes.push('bs-card--selected');
+        return (index.h("div", { key: '0e88c7d2f07f0ef7bbfada87cd83415aa6949075', part: "container", class: classes.join(' ') }, index.h("div", { key: '553162d5aa9d0f3b4b03eed02bb0d1717adf5695', part: "image", class: `bs-card__image ${this.hasImage ? 'bs-card__image--visible' : ''}` }, index.h("slot", { key: 'de82a0591157228f5586c816795d634ea1b41d3d', name: "image", onSlotchange: this.onImageSlotchange })), index.h("div", { key: 'a09828b31c202312751cbba9161aa81e2f79e51d', class: "bs-card__content" }, index.h("div", { key: '03592a2cb3a598f04a5b9253b80301fbf910fdf9', part: "header", class: "bs-card__header" }, isLink ? (index.h("a", { part: "action", class: "bs-card__action", href: this.href, target: this.target, rel: rel, "aria-label": this.label, onClick: this.onLinkClick }, header)) : isToggle ? (index.h("button", { part: "action", type: "button", class: "bs-card__action", "aria-pressed": String(this.selected), "aria-label": this.label, onClick: this.onToggleClick }, header)) : (header)), index.h("div", { key: '0d174a856927702a274f2b60df02c4691d5927f3', part: "body", class: "bs-card__body" }, index.h("slot", { key: '7bc6b590ee94e45028e35bf8d9f83aaefcf63ff0' })), index.h("div", { key: '6f3b9db20a6dd2c8799570ae8a5c6252ebde642f', part: "footer", class: "bs-card__footer" }, index.h("slot", { key: '08a0cc866f737490346c7969e45d089d89be9143', name: "footer" })))));
     }
 };
 BsCard.style = bsCardCss();