@brandsync/wc 1.19.0 → 1.20.0

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

@@ -0,0 +1,126 @@
+import { h } from "@stencil/core";
+/**
+ * Body and caption text mapped to the typography tokens, with the element (`as`) chosen separately
+ * from the look (`variant`) and the colour (`tone`).
+ *
+ * Variants: `lead` 18px, `body` 16px, `small` 14px, `caption` 12px (`--bs-font-size-*`,
+ * `--bs-typography-font-family-body`).
+ *
+ * Composed from: nothing (leaf).
+ *
+ * ## When to use
+ * - Paragraphs, helper copy, captions and inline spans that should follow the type scale and theme.
+ *
+ * ## When not to use
+ * - Headings: use `bs-heading` so the document outline is right.
+ * - Code: use `bs-code-block`.
+ *
+ * @slot - The text.
+ * @part text - The rendered text element.
+ */
+export class BsText {
+    /** The rendered element. `span` (and `small`, `strong`, `em`, `label`) make the host inline. */
+    as = 'p';
+    /** Visual style. */
+    variant = 'body';
+    /** Text colour from the text tokens. `inherit` uses the surrounding colour. */
+    tone = 'default';
+    render() {
+        const Tag = this.as;
+        return (h(Tag, { key: '249b8ddd92904587ac8eff6a585f03e8d228aae9', part: "text", class: `bs-text bs-text--${this.variant}` }, h("slot", { key: '2e29e03955058bb6feb8aff484ddf0f7d5836cd0' })));
+    }
+    static get is() { return "bs-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-text.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "as": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTextAs",
+                    "resolved": "\"div\" | \"em\" | \"label\" | \"p\" | \"small\" | \"span\" | \"strong\"",
+                    "references": {
+                        "BsTextAs": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-text/bs-text.tsx",
+                            "id": "src/components/bs-text/bs-text.tsx::BsTextAs"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rendered element. `span` (and `small`, `strong`, `em`, `label`) make the host inline."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "as",
+                "defaultValue": "'p'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTextVariant",
+                    "resolved": "\"body\" | \"caption\" | \"lead\" | \"small\"",
+                    "references": {
+                        "BsTextVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-text/bs-text.tsx",
+                            "id": "src/components/bs-text/bs-text.tsx::BsTextVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'body'"
+            },
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsTextTone",
+                    "resolved": "\"action\" | \"default\" | \"error\" | \"info\" | \"inherit\" | \"inverse\" | \"link\" | \"muted\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsTextTone": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-text/bs-text.tsx",
+                            "id": "src/components/bs-text/bs-text.tsx::BsTextTone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text colour from the text tokens. `inherit` uses the surrounding colour."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const meta = {
+    title: 'Components/bs-text',
+    parameters: { docs: { description: { component: componentDescription('bs-text') } } },
+    render: args => html `<bs-text as=${args.as} variant=${args.variant} tone=${args.tone}>${args.text}</bs-text>`,
+    argTypes: {
+        as: { control: 'select', options: ['p', 'span', 'div', 'label', 'small', 'strong', 'em'] },
+        variant: { control: 'inline-radio', options: ['lead', 'body', 'small', 'caption'] },
+        tone: { control: 'select', options: ['default', 'secondary', 'muted', 'action', 'link', 'success', 'info', 'warning', 'error', 'inverse', 'inherit'] },
+        text: { control: 'text' },
+    },
+    args: { as: 'p', variant: 'body', tone: 'default', text: 'Payment reminders are sent at the time your customers are most likely to respond.' },
+};
+export default meta;
+export const Default = {};
+export const Variants = {
+    render: () => html `${['lead', 'body', 'small', 'caption'].map(v => html `<bs-text variant=${v}>${v}: The quick brown fox jumps over the lazy dog.</bs-text>`)}`,
+};
+export const Tones = {
+    render: () => html `${['default', 'secondary', 'muted', 'action', 'link', 'success', 'info', 'warning', 'error'].map(t => html `<bs-text tone=${t}>Tone ${t}</bs-text>`)}`,
+};
+export const Inline = {
+    render: () => html `<bs-text>Total due <bs-text as="span" tone="error">kr 1 480,00</bs-text> by Friday.</bs-text>`,
+};

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

@@ -200,14 +200,14 @@ export class BsTimepicker {
         return (h("div", { part: "spinner", class: "bs-timepicker__spinner" }, h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.increaseLabel), tabindex: -1, onClick: () => this.stepBy(col, 1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M18 15L12 9L6 15", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { part: "value", class: "bs-timepicker__value", role: "spinbutton", tabindex: 0, "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": n, "aria-valuetext": pad(n), onKeyDown: this.onKeyDown(col), onBlur: () => (this.typed = '') }, pad(n)), h("button", { part: "step", type: "button", class: "bs-timepicker__step", "aria-label": stepLabel(this.decreaseLabel), tabindex: -1, onClick: () => this.stepBy(col, -1) }, h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
     }
     render() {
-        return (h("bs-card", { key: 'b1fee3176c728113e01b14515e910f7026b2c40e', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: '29246aa5712a7f1e391338a579f3d7660a7a8b66', class: "bs-timepicker__body" }, h("div", { key: '0ccbf049e87278cc973262f45025843eccc4e050', part: "header", class: "bs-timepicker__header" }, h("div", { key: 'e039bff5a90391b009739a2747255dfa21961394', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '7f7be2239e319dc2052891a8199bc1d0cc9bb516', class: "bs-timepicker__format" }, h("span", { key: 'a9acefb7f828b6740df0ef4f8c29c9f12c951f91' }, this.formatLabel), h("bs-switch", { key: '4a0ed6ac9b476ac690897f5fc97461a2ba1d9187', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '615e0947d07879b5096520f6a6131b5d7126bd5a', class: "bs-timepicker__divider" }), h("div", { key: 'bec825c705ecb1dcf49527df3ffda30f06815f8d', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: 'b1afee8b925ce49e44e6d2389ac03697b108dbc4', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'a716d2643c7a0ea095380283f535f5cd44a77ba9', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'f271946fadd8f8f8e3086c731af9501461e6ef26', cx: "2", cy: "10", r: "2" }), h("circle", { key: 'e661d9d6b96598430853eefca97bccf6138c00b8', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: 'be80bc06f68362e85510a9450d693483e9bb2d3c', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
+        return (h("bs-card", { key: 'fdbf8e19525a53d43094d1b2115c232fb0ea9500', part: "container", class: "bs-timepicker", surface: "raised" }, h("div", { key: 'a2b9aa1ce9529d3f52fd45f4ca5af02582930a15', class: "bs-timepicker__body" }, h("div", { key: 'c59f6c9fdec3a1f9ffb81aa7e5bac9421dadcd35', part: "header", class: "bs-timepicker__header" }, h("div", { key: '2825b6a11f97a7186eb6340faa816b0b6d8be28a', part: "title", class: "bs-timepicker__title" }, this.heading), h("label", { key: '4f6dc3e9768f0396b3e59943496a9d9443a8501c', class: "bs-timepicker__format" }, h("span", { key: 'b94eccc6949019c78b98051a8eba3d41a4546cf1' }, this.formatLabel), h("bs-switch", { key: '6a2d43b1b37472720d5ca1f84951dc908b37689e', part: "format-toggle", size: "md", ariaLabel: this.formatLabel, checked: !this.is12h, onBsChange: (ev) => (this.format = ev.detail ? '24h' : '12h') }))), h("div", { key: '01efb69cc03be59785b36df9fccf4452a1894225', class: "bs-timepicker__divider" }), h("div", { key: 'ead194685c2ae0976d4f134ad0231208e3fab1ea', part: "selector", class: "bs-timepicker__selector" }, this.renderColumn('hour', this.hourLabel), h("div", { key: '0250edfefe27363208489c147026462edbf7648a', part: "separator", class: "bs-timepicker__separator", "aria-hidden": "true" }, h("svg", { key: 'e79c68f3dd11a3ee9edd5d18ebd9065e4019f029', viewBox: "0 0 4 32", fill: "currentColor" }, h("circle", { key: 'b0fcd6e48bddfbf722c0aa6356be05665258cda6', cx: "2", cy: "10", r: "2" }), h("circle", { key: '892630f5f5a51aa48f97d8a7c86791aef6bd2ba2', cx: "2", cy: "22", r: "2" }))), this.renderColumn('minute', this.minuteLabel), this.is12h && (h("bs-input", { key: '502e6bebb0f241b3800b699efbb8cdbcf671597d', part: "period", class: "bs-timepicker__period", type: "dropdown", label: this.periodLabel, value: this.isPm ? 'PM' : 'AM', options: [
                 { label: 'AM', value: 'AM' },
                 { label: 'PM', value: 'PM' },
             ], onBsChange: (ev) => {
                 const pm = ev.detail === 'PM';
                 if (pm !== this.isPm)
                     this.hour = (this.hour + 12) % 24;
-            } }))), h("div", { key: 'e3f5ed344ef98046ea70b97aee10ac63f8fb631a', class: "bs-timepicker__divider" }), h("div", { key: '8b8b51a4e2f105a87031a20c4f468547c5785f08', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'cfe71e9a9aac09fd0be9535bbbbaf230f9d84a6a', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '2c5ad6714d50a248641c0de155c14dcee3857f1e', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
+            } }))), h("div", { key: 'ed95958ca424696e252fe90eab8855d0bdffd89c', class: "bs-timepicker__divider" }), h("div", { key: '77c404d4617a5ee6f669a2ffba63fa5729f98cf5', part: "footer", class: "bs-timepicker__footer" }, h("bs-button", { key: 'fbeb76d30f1eea912b3e37def67f8058b74626a7', part: "cancel", variant: "subtle", onClick: this.cancel }, this.cancelLabel), h("bs-button", { key: '1baf37a0708379ef23951f76765d048087d3083b', part: "confirm", variant: "primary", onClick: this.confirm }, this.confirmLabel)))));
     }
     static get is() { return "bs-timepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class BsToast {
         this.bsDismiss.emit();
     };
     render() {
-        return (h("div", { key: 'ea3ed372472902ee9cf1e141906dec39991a6ac5', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: 'b5cd7562bf23e9b62101d6c6fbd7d0c4c34263ef', class: "bs-toast__content" }, h("span", { key: '3f8503c548a6d25eb2322d0df601c7a32047285c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '455b38877ab4e0d48a5ff02f17eb6e8f248c52ce', state: this.state })), h("span", { key: '1f2f0013b4171170d5739ad614711f8a91f35fa7', part: "message", class: "bs-toast__message" }, h("slot", { key: '1298f3d0fbb25843418b8e730d3ed84264e86759' }))), h("div", { key: 'b6c64714995f907901e78ed3c99bc03bbdaee468', class: "bs-toast__actions" }, h("button", { key: '5d92217352987cdd55b4ce5c7f49d7f44c766fe8', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: 'cb983078424ad5b520dffeda81d8bcafd1b9cf2b' })))));
+        return (h("div", { key: '8cca96362a50acd1f552c08163e8a2991b191d17', part: "container", class: `bs-toast bs-toast--${this.state}`, role: "status", "aria-live": this.state === 'error' ? 'assertive' : 'polite' }, h("div", { key: '01cc2a6b9b8ba851dec751efff862fe3225058be', class: "bs-toast__content" }, h("span", { key: '29ed8cc01ac3f5b46d0cb8299bc60af5fdaf281c', part: "icon", class: "bs-toast__icon", "aria-hidden": "true" }, h(StateIcon, { key: '568f57389206d284b9717fa7f1cb894f20d50cf7', state: this.state })), h("span", { key: '7271784969a334c9e5f297a1ca845c2c08d12c5d', part: "message", class: "bs-toast__message" }, h("slot", { key: 'b46cf88eb3ac95c47ea8aff52f9accd1a9755546' }))), h("div", { key: '23d69f46262dbd5a4279d608f4a72c2a9c2e1463', class: "bs-toast__actions" }, h("button", { key: '722b445b6fcf22f97ed44fca3ecd9a2d286f8bad', part: "close", type: "button", class: "bs-toast__close", "aria-label": this.dismissLabel, onClick: this.onDismiss }, h(CloseIcon, { key: '2401bd61c3f8873b8a37d2f9474850c253b1b9ab' })))));
     }
     static get is() { return "bs-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-toggle-button/bs-toggle-button.cmp.test.js

@@ -0,0 +1,47 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-toggle-button', () => {
+    it('is a toggle with aria-pressed by default and emits bsChange', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-toggle-button", null, "Bold"));
+        const spy = spyOnEvent('bsChange');
+        const btn = root.shadowRoot.querySelector('button');
+        expect(btn.getAttribute('aria-pressed')).toBe('false');
+        btn.click();
+        await waitForChanges();
+        expect(btn.getAttribute('aria-pressed')).toBe('true');
+        expect(root.pressed).toBe(true);
+        expect(spy).toHaveReceivedEventDetail(true);
+        btn.click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventDetail(false);
+    });
+    it('radio mode uses role=radio/aria-checked and does not unpress', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-toggle-button", { mode: "radio", pressed: true }, "A"));
+        const spy = spyOnEvent('bsChange');
+        const btn = root.shadowRoot.querySelector('button');
+        expect(btn.getAttribute('role')).toBe('radio');
+        expect(btn.getAttribute('aria-checked')).toBe('true');
+        expect(btn.hasAttribute('aria-pressed')).toBe(false);
+        btn.click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    it('disabled blocks interaction', async () => {
+        const { root, waitForChanges, spyOnEvent } = await render(h("bs-toggle-button", { disabled: true }, "A"));
+        const spy = spyOnEvent('bsChange');
+        const btn = root.shadowRoot.querySelector('button');
+        expect(btn.disabled).toBe(true);
+        btn.click();
+        await waitForChanges();
+        expect(spy).toHaveReceivedEventTimes(0);
+    });
+    it('is icon-only without label text and passes ariaLabel', async () => {
+        const { root } = await render(h("bs-toggle-button", { ariaLabel: "Grid view" }, h("svg", { slot: "icon", viewBox: "0 0 8 8" })));
+        const btn = root.shadowRoot.querySelector('button');
+        expect(btn.getAttribute('aria-label')).toBe('Grid view');
+        expect(btn).toHaveClass('bs-toggle-button--icon-only');
+    });
+    it('tabbable=false sets tabindex -1', async () => {
+        const { root } = await render(h("bs-toggle-button", { tabbable: false }, "A"));
+        expect(root.shadowRoot.querySelector('button').getAttribute('tabindex')).toBe('-1');
+    });
+});

package/dist/collection/components/bs-toggle-button/bs-toggle-button.css

@@ -0,0 +1,125 @@
+/**
+ * @prop --bs-toggle-button-height: Button height. Aliased to --bs-spacing-550 (44px).
+ * @prop --bs-toggle-button-padding-x: Horizontal padding. Aliased to --bs-spacing-200.
+ * @prop --bs-toggle-button-gap: Gap between icon and label. Aliased to --bs-spacing-100.
+ * @prop --bs-toggle-button-radius: Corner radius (a group squares the inner corners). Aliased to --bs-border-radius-100.
+ * @prop --bs-toggle-button-border-width: Border width. Aliased to --bs-border-width-thin.
+ * @prop --bs-toggle-button-border: Border color. Aliased to --bs-border-neutral-container.
+ * @prop --bs-toggle-button-border-pressed: Border color when pressed. Aliased to --bs-border-primary.
+ * @prop --bs-toggle-button-bg: Background, default. Aliased to --bs-surface-base.
+ * @prop --bs-toggle-button-bg-hover: Background on hover. Aliased to --bs-color-neutral-container-hover.
+ * @prop --bs-toggle-button-bg-pressed: Background when pressed. Aliased to --bs-color-primary-container.
+ * @prop --bs-toggle-button-bg-pressed-hover: Background when pressed and hovered. Aliased to --bs-color-primary-container-hover.
+ * @prop --bs-toggle-button-bg-disabled: Background when disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-toggle-button-color: Label/icon color. Aliased to --bs-text-default.
+ * @prop --bs-toggle-button-color-pressed: Label/icon color when pressed. Aliased to --bs-text-action.
+ * @prop --bs-toggle-button-color-disabled: Label/icon color when disabled. Aliased to --bs-text-on-disabled.
+ * @prop --bs-toggle-button-focus-ring-color: Keyboard focus ring. Aliased to --bs-border-neutral-focus.
+ */
+:host {
+  display: inline-block;
+  position: relative;
+
+  --bs-toggle-button-height: var(--bs-spacing-550);
+  --bs-toggle-button-padding-x: var(--bs-spacing-200);
+  --bs-toggle-button-gap: var(--bs-spacing-100);
+  --bs-toggle-button-radius: var(--bs-border-radius-100);
+  --bs-toggle-button-border-width: var(--bs-border-width-thin);
+  --bs-toggle-button-border: var(--bs-border-neutral-container);
+  --bs-toggle-button-border-pressed: var(--bs-border-primary);
+  --bs-toggle-button-bg: var(--bs-surface-base);
+  --bs-toggle-button-bg-hover: var(--bs-color-neutral-container-hover);
+  --bs-toggle-button-bg-pressed: var(--bs-color-primary-container);
+  --bs-toggle-button-bg-pressed-hover: var(--bs-color-primary-container-hover);
+  --bs-toggle-button-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-toggle-button-color: var(--bs-text-default);
+  --bs-toggle-button-color-pressed: var(--bs-text-action);
+  --bs-toggle-button-color-disabled: var(--bs-text-on-disabled);
+  --bs-toggle-button-focus-ring-color: var(--bs-border-neutral-focus);
+}
+
+:host(:hover),
+:host(:focus-within) {
+  z-index: 1;
+}
+
+.bs-toggle-button {
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-toggle-button-gap);
+  height: var(--bs-toggle-button-height);
+  min-width: var(--bs-toggle-button-height);
+  padding: 0 var(--bs-toggle-button-padding-x);
+  border: var(--bs-toggle-button-border-width) solid var(--bs-toggle-button-border);
+  border-radius: var(--bs-toggle-button-radius);
+  background: var(--bs-toggle-button-bg);
+  color: var(--bs-toggle-button-color);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+  font-weight: var(--bs-font-weight-medium);
+  cursor: pointer;
+}
+
+.bs-toggle-button--icon-only {
+  padding: 0;
+}
+
+.bs-toggle-button:hover:not(:disabled) {
+  background: var(--bs-toggle-button-bg-hover);
+}
+
+.bs-toggle-button--pressed {
+  background: var(--bs-toggle-button-bg-pressed);
+  border-color: var(--bs-toggle-button-border-pressed);
+  color: var(--bs-toggle-button-color-pressed);
+}
+
+.bs-toggle-button--pressed:hover:not(:disabled) {
+  background: var(--bs-toggle-button-bg-pressed-hover);
+}
+
+.bs-toggle-button:focus-visible {
+  outline: 2px solid var(--bs-toggle-button-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.bs-toggle-button:disabled {
+  background: var(--bs-toggle-button-bg-disabled);
+  color: var(--bs-toggle-button-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-toggle-button__icon {
+  display: none;
+  width: var(--bs-spacing-300);
+  height: var(--bs-spacing-300);
+}
+
+.bs-toggle-button__icon ::slotted(*) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* The icon wrapper only takes space once an icon is slotted. */
+.bs-toggle-button__icon--has-content {
+  display: inline-flex;
+}
+
+.bs-toggle-button__label {
+  display: inline-flex;
+}
+
+.bs-toggle-button--icon-only .bs-toggle-button__label {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  .bs-toggle-button { border-color: ButtonText; }
+  .bs-toggle-button--pressed { background: Highlight; color: HighlightText; }
+  .bs-toggle-button:disabled { border-color: GrayText; color: GrayText; }
+}

package/dist/collection/components/bs-toggle-button/bs-toggle-button.js

@@ -0,0 +1,234 @@
+import { h } from "@stencil/core";
+/**
+ * A button that is either pressed or not. Standalone it is a toggle (`aria-pressed`); inside a
+ * `bs-toggle-button-group` the group sets its `mode` (`toggle` for multiple choice, `radio` for
+ * single choice, which switches the semantics to `role="radio"` + `aria-checked`).
+ *
+ * Built from: hand-built `<button>` (the segment shape and pressed state differ from `bs-button`) plus
+ * `bs-ripple`.
+ *
+ * ## When to use
+ * - A two-state option such as "Bold", or a segment of a `bs-toggle-button-group`.
+ *
+ * ## When not to use
+ * - Triggering an action (use `bs-button`) or an on/off setting that applies immediately (use `bs-switch`).
+ *
+ * @slot icon - Optional leading icon (24x24). With no default-slot text the button is icon-only and
+ * needs `ariaLabel`.
+ * @slot - Default slot: the label text.
+ * @part button - The native button.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @part ripple - The press-ripple (a `bs-ripple`).
+ */
+// Note: CSS Custom Properties (--bs-toggle-button-*) are documented via @prop comments in the css file.
+export class BsToggleButton {
+    el;
+    /** Identifies the segment inside a group's `value`/`values`. */
+    value;
+    /** Whether the button is pressed/selected. */
+    pressed = false;
+    /** Disables the button. */
+    disabled = false;
+    /** Semantics. Normally set by the parent group. */
+    mode = 'toggle';
+    /** Roving tabindex, set by the parent group (`false` = `tabindex="-1"`). Standalone: always tabbable. */
+    tabbable = true;
+    /** Accessible name; required for an icon-only button. */
+    ariaLabel = null;
+    /** Emitted on user interaction with the new `pressed` value. A radio-mode button that is already
+     * pressed does not emit. Bubbles, so a group can coordinate its segments. */
+    bsChange;
+    hasLabel = false;
+    hasIcon = false;
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onLabelSlotchange = (ev) => {
+        this.hasLabel = ev.target.assignedNodes().some(n => n.nodeType === 1 || !!n.textContent?.trim());
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        if (this.mode === 'radio') {
+            if (this.pressed)
+                return;
+            this.pressed = true;
+        }
+        else {
+            this.pressed = !this.pressed;
+        }
+        this.bsChange.emit(this.pressed);
+    };
+    render() {
+        const radio = this.mode === 'radio';
+        return (h("button", { key: 'ec490445b357966720ae68f8f1e748d650b4028f', type: "button", part: "button", class: `bs-toggle-button ${this.pressed ? 'bs-toggle-button--pressed' : ''} ${this.hasLabel ? '' : 'bs-toggle-button--icon-only'}`, role: radio ? 'radio' : undefined, "aria-pressed": radio ? undefined : String(this.pressed), "aria-checked": radio ? String(this.pressed) : undefined, "aria-label": this.ariaLabel, disabled: this.disabled, tabindex: this.tabbable ? undefined : -1, onClick: this.onClick }, h("bs-ripple", { key: 'd774dd4ba709a7056a66148ce10a530198a6880b', part: "ripple", centered: false, disabled: this.disabled }), h("span", { key: '2379755618752fedb3c877a10513f2c62f8cbb9c', part: "icon", class: `bs-toggle-button__icon ${this.hasIcon ? 'bs-toggle-button__icon--has-content' : ''}` }, h("slot", { key: '15ad567b32ede0f8aa8bc00f3aebf232044cb2fb', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: 'd103bd76433e1aa4876380b6fb24061fb37b1643', part: "label", class: "bs-toggle-button__label" }, h("slot", { key: '83257a1e5543cc7e3ce490a52617c7d599605cec', onSlotchange: this.onLabelSlotchange }))));
+    }
+    static get is() { return "bs-toggle-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-toggle-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-toggle-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifies the segment inside a group's `value`/`values`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "pressed": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is pressed/selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pressed",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsToggleButtonMode",
+                    "resolved": "\"radio\" | \"toggle\"",
+                    "references": {
+                        "BsToggleButtonMode": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-toggle-button/bs-toggle-button.tsx",
+                            "id": "src/components/bs-toggle-button/bs-toggle-button.tsx::BsToggleButtonMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantics. Normally set by the parent group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'toggle'"
+            },
+            "tabbable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Roving tabindex, set by the parent group (`false` = `tabindex=\"-1\"`). Standalone: always tabbable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabbable",
+                "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name; required for an icon-only button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasLabel": {},
+            "hasIcon": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on user interaction with the new `pressed` value. A radio-mode button that is already\npressed does not emit. Bubbles, so a group can coordinate its segments."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bs-toggle-button/bs-toggle-button.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const gridIcon = html `<svg slot="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" stroke="currentColor" stroke-width="1.5"/></svg>`;
+const meta = {
+    title: 'Components/bs-toggle-button',
+    parameters: { docs: { description: { component: componentDescription('bs-toggle-button') } } },
+    render: args => html `<bs-toggle-button ?pressed=${args.pressed} ?disabled=${args.disabled}>${args.label}</bs-toggle-button>`,
+    argTypes: {
+        pressed: { control: 'boolean', description: propDescription('bs-toggle-button', 'pressed') },
+        disabled: { control: 'boolean', description: propDescription('bs-toggle-button', 'disabled') },
+        label: { control: 'text' },
+    },
+    args: { pressed: false, disabled: false, label: 'Bold' },
+};
+export default meta;
+export const Default = {};
+export const Pressed = { args: { pressed: true } };
+export const Disabled = { args: { disabled: true } };
+export const IconOnly = {
+    name: 'Icon only',
+    render: () => html `<bs-toggle-button ariaLabel="Grid view">${gridIcon}</bs-toggle-button>`,
+};