@brandsync/wc 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+exports.format = format;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var index = require('./index-nyOcuVbF.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["bs-badge.cjs",[[769,"bs-badge",{"variant":[1]}]]],["bs-button.cjs",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton.cjs",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card.cjs",[[769,"bs-card",{"surface":[1]}]]],["bs-composer.cjs",[[529,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-data-table.cjs",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-input.cjs",[[529,"bs-input",{"value":[1],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4]}]]],["bs-modal.cjs",[[769,"bs-modal",{"open":[1540],"heading":[1],"size":[1],"hasFooter":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,20 @@
+{
+  "entries": [
+    "components/bs-badge/bs-badge.js",
+    "components/bs-button/bs-button.js",
+    "components/bs-card/bs-card.js",
+    "components/bs-composer/bs-composer.js",
+    "components/bs-data-table/bs-data-table.js",
+    "components/bs-modal/bs-modal.js",
+    "components/bs-button-skeleton/bs-button-skeleton.js",
+    "components/bs-input/bs-input.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.44.0",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/bs-badge/bs-badge.cmp.test.js

@@ -0,0 +1,30 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-badge', () => {
+    it('renders the default slot content and default variant class', async () => {
+        const { root } = await render(h("bs-badge", null, "Active"));
+        expect(root).toHaveTextContent('Active');
+        const container = root.shadowRoot.querySelector('.bs-badge');
+        expect(container).toHaveClass('bs-badge--default');
+    });
+    it('exposes the container part on the pill element', async () => {
+        const { root } = await render(h("bs-badge", null, "Active"));
+        const container = root.shadowRoot.querySelector('.bs-badge');
+        expect(container).toEqualAttribute('part', 'container');
+    });
+    const variants = ['default', 'primary', 'success', 'warning', 'info', 'error', 'neutral', 'inverse'];
+    variants.forEach(variant => {
+        it(`applies the "${variant}" variant class`, async () => {
+            const { root } = await render(h("bs-badge", { variant: variant }, "Status"));
+            const container = root.shadowRoot.querySelector('.bs-badge');
+            expect(container).toHaveClass(`bs-badge--${variant}`);
+        });
+    });
+    it('reflects a changed variant prop to the internal class', async () => {
+        const { root, setProps } = await render(h("bs-badge", { variant: "primary" }, "Status"));
+        expect(root.shadowRoot.querySelector('.bs-badge')).toHaveClass('bs-badge--primary');
+        await setProps({ variant: 'error' });
+        const container = root.shadowRoot.querySelector('.bs-badge');
+        expect(container).toHaveClass('bs-badge--error');
+        expect(container).not.toHaveClass('bs-badge--primary');
+    });
+});

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

@@ -0,0 +1,55 @@
+: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);
+}

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

@@ -0,0 +1,64 @@
+import { h } from "@stencil/core";
+/**
+ * A small status or category pill, usually paired with a label or list item.
+ *
+ * ## When to use
+ * - Communicating a short, fixed status (e.g. "Active", "On leave") or category label.
+ *
+ * ## When not to use
+ * - As an interactive/clickable element — a badge is a label, not a control. Use a button
+ *   or chip component if it needs to be clickable.
+ * - For long text — badges are sized for one or two words.
+ *
+ * @slot - Default slot: the badge's label text.
+ * @part container - The pill element.
+ */
+export class BsBadge {
+    /** Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets. */
+    variant = 'default';
+    render() {
+        return (h("span", { key: '9cc06bddba11f57edf97209456e25141a3b80bea', part: "container", class: `bs-badge bs-badge--${this.variant}` }, h("slot", { key: '7c0e4054e99a3dedc94f2a7250075fcb76c115b6' })));
+    }
+    static get is() { return "bs-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsBadgeVariant",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"inverse\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsBadgeVariant": {
+                            "location": "local",
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-badge/bs-badge.tsx",
+                            "id": "src/components/bs-badge/bs-badge.tsx::BsBadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maps directly to the brandsync-tokens `--bs-badge-bg-*` / `--bs-badge-text-*` sets."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,75 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['default', 'primary', 'success', 'warning', 'info', 'error', 'neutral', 'inverse'];
+const meta = {
+    title: 'Components/bs-badge',
+    parameters: { docs: { description: { component: componentDescription('bs-badge') } } },
+    render: args => html `<bs-badge variant=${args.variant}>${args.label}</bs-badge>`,
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: variants,
+            description: propDescription('bs-badge', 'variant'),
+        },
+        label: { control: 'text', description: 'Slotted label content (not a real attribute -- see the default slot).' },
+    },
+    args: {
+        variant: 'primary',
+        label: 'New',
+    },
+};
+export default meta;
+export const Primary = {};
+export const DefaultVariant = {
+    args: { variant: 'default', label: 'Default' },
+};
+export const Success = {
+    args: { variant: 'success', label: 'Active' },
+};
+export const Warning = {
+    args: { variant: 'warning', label: 'Pending' },
+};
+export const Info = {
+    args: { variant: 'info', label: 'Info' },
+};
+export const Error = {
+    args: { variant: 'error', label: 'Failed' },
+};
+export const Neutral = {
+    args: { variant: 'neutral', label: 'Archived' },
+};
+export const Inverse = {
+    args: { variant: 'inverse', label: 'Inverse' },
+    parameters: {
+        // Inverse pairs a light label with a dark background -- render it on a dark surface so it's
+        // legible in the docs canvas instead of looking like an accessibility bug against the default
+        // (light) Storybook canvas background.
+        backgrounds: { default: 'dark' },
+    },
+};
+export const AllVariants = {
+    render: () => html `
+    <div style="display:flex; gap:8px; flex-wrap:wrap;">
+      <bs-badge variant="default">Default</bs-badge>
+      <bs-badge variant="primary">Primary</bs-badge>
+      <bs-badge variant="success">Success</bs-badge>
+      <bs-badge variant="warning">Warning</bs-badge>
+      <bs-badge variant="info">Info</bs-badge>
+      <bs-badge variant="error">Error</bs-badge>
+      <bs-badge variant="neutral">Neutral</bs-badge>
+      <bs-badge variant="inverse">Inverse</bs-badge>
+    </div>
+  `,
+};
+export const LongText = {
+    name: 'Long text (edge case)',
+    args: {
+        variant: 'primary',
+        label: 'This is a much longer status label than a badge is designed to hold',
+    },
+    render: args => html `
+    <div style="max-width: 160px;">
+      <bs-badge variant=${args.variant}>${args.label}</bs-badge>
+    </div>
+  `,
+};

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

@@ -0,0 +1,81 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-button', () => {
+    it('renders the default label slot and variant/size classes', async () => {
+        const { root } = await render(h("bs-button", null, "Click me"));
+        expect(root).toHaveTextContent('Click me');
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveClass('bs-button--primary');
+        expect(button).toHaveClass('bs-button--md');
+    });
+    it('applies the disabled attribute to the native button', async () => {
+        const { root } = await render(h("bs-button", { disabled: true }, "Click me"));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveAttribute('disabled');
+    });
+    it('reflects the variant prop to the internal class', async () => {
+        const { root, setProps } = await render(h("bs-button", { variant: "neutral" }, "Click me"));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--neutral');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--primary');
+    });
+    it('applies the error variant class and reflects on prop change', async () => {
+        const { root, setProps } = await render(h("bs-button", { variant: "error" }, "Delete"));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--error');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--primary');
+        expect(root.shadowRoot.querySelector('button')).not.toHaveClass('bs-button--error');
+    });
+    it('applies the subtle variant class', async () => {
+        const { root } = await render(h("bs-button", { variant: "subtle" }, "Click me"));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--subtle');
+    });
+    it('applies the outlined variant class', async () => {
+        const { root } = await render(h("bs-button", { variant: "outlined" }, "Click me"));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--outlined');
+    });
+    it('applies the success variant class and reflects on prop change', async () => {
+        const { root, setProps } = await render(h("bs-button", { variant: "success" }, "Approve"));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--success');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--primary');
+        expect(root.shadowRoot.querySelector('button')).not.toHaveClass('bs-button--success');
+    });
+    it('applies the warning variant class', async () => {
+        const { root } = await render(h("bs-button", { variant: "warning" }, "Proceed anyway"));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--warning');
+    });
+    it('applies the info variant class', async () => {
+        const { root } = await render(h("bs-button", { variant: "info" }, "View details"));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-button--info');
+    });
+    it('sets aria-label on the inner button from the ariaLabel prop', async () => {
+        const { root } = await render(h("bs-button", { ariaLabel: "Delete" }, "Click me"));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toEqualAttribute('aria-label', 'Delete');
+    });
+    it('applies bs-button--icon-only when the icon slot has content and the default slot does not', async () => {
+        const { root } = await render(h("bs-button", { ariaLabel: "Delete" }, h("svg", { slot: "icon", viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveClass('bs-button--icon-only');
+    });
+    it('does not apply bs-button--icon-only when a label is present alongside the icon', async () => {
+        const { root } = await render(h("bs-button", null, h("svg", { slot: "icon", viewBox: "0 0 16 16" }), "Click me"));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).not.toHaveClass('bs-button--icon-only');
+    });
+    it('applies bs-button__end-icon--visible when the end-icon slot has assigned content', async () => {
+        const { root } = await render(h("bs-button", null, "Next", h("svg", { slot: "end-icon", viewBox: "0 0 16 16" })));
+        const endIcon = root.shadowRoot.querySelector('[part="end-icon"]');
+        expect(endIcon).toHaveClass('bs-button__end-icon--visible');
+    });
+    it('does not apply bs-button__end-icon--visible when the end-icon slot is empty', async () => {
+        const { root } = await render(h("bs-button", null, "Next"));
+        const endIcon = root.shadowRoot.querySelector('[part="end-icon"]');
+        expect(endIcon).not.toHaveClass('bs-button__end-icon--visible');
+    });
+    it('applies bs-button--icon-only when only the end-icon slot has content and the default slot does not', async () => {
+        const { root } = await render(h("bs-button", { ariaLabel: "Next" }, h("svg", { slot: "end-icon", viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveClass('bs-button--icon-only');
+    });
+});

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

@@ -0,0 +1,247 @@
+:host {
+  display: inline-block;
+  --bs-button-height-sm: var(--bs-spacing-500);
+  --bs-button-height-md: var(--bs-spacing-600);
+  --bs-button-height-lg: var(--bs-spacing-700);
+  --bs-button-radius: var(--bs-border-radius-100);
+  
+  --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);
+  /* Same situation as error above: subtle/outlined/success/warning/info don't have a pre-built
+   * brandsync-tokens --bs-button-<variant>-* component layer either, so alias one locally. */
+  --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-outlined-border: var(--bs-border-primary);
+  --bs-button-outlined-border-hover: var(--bs-border-primary-hover);
+  --bs-button-outlined-focus: var(--bs-border-primary-focus);
+  --bs-button-outlined-container: var(--bs-color-primary-container);
+}
+
+.bs-button {
+  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-semibold);
+  cursor: pointer;
+  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-spacing-300);
+  font-size: var(--bs-font-size-sm);
+}
+
+.bs-button--md {
+  height: var(--bs-button-height-md);
+  padding: 0 var(--bs-spacing-400);
+  font-size: var(--bs-font-size-md);
+}
+
+.bs-button--lg {
+  height: var(--bs-button-height-lg);
+  padding: 0 var(--bs-spacing-500);
+  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);
+}
+.bs-button--neutral:hover:not(:disabled) {
+  background: var(--bs-button-neutral-hover);
+}
+.bs-button--neutral:active:not(:disabled) {
+  background: var(--bs-button-neutral-pressed);
+}
+.bs-button--neutral:disabled {
+  background: var(--bs-button-neutral-disabled);
+  color: var(--bs-text-on-disabled);
+}
+
+.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-default);
+}
+.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-color-neutral-default);
+}
+.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-color-primary-default);
+  border: 1.5px 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);
+}
+.bs-button--outlined:active:not(:disabled) {
+  background: var(--bs-button-outlined-container);
+  color: var(--bs-color-primary-pressed);
+  border-color: var(--bs-button-outlined-border-hover);
+}
+.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-right: var(--bs-spacing-100);
+}
+
+.bs-button__end-icon--visible {
+  margin-left: var(--bs-spacing-100);
+}
+
+.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-right: 0;
+}
+.bs-button--icon-only .bs-button__end-icon--visible {
+  margin-left: 0;
+}