@brandsync/wc 1.19.0 → 1.20.1

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

@@ -1,6 +1,6 @@
 import { html } from "lit";
 import { componentDescription, propDescription } from "../../stories-utils";
-const inputTypes = ['text', 'email', 'password', 'number', 'search', 'date', 'dropdown', 'select', 'textarea', 'chip', 'initials', 'country', 'pin'];
+const inputTypes = ['text', 'email', 'password', 'number', 'search', 'date', 'dropdown', 'select', 'textarea', 'chip', 'initials', 'country', 'pin', 'combobox'];
 const mailIcon = html `
   <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <path d="M2 4L8 9L14 4M2 4H14V12H2V4Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
@@ -110,6 +110,33 @@ export const Dropdown = {
     ></bs-input>
   `,
 };
+export const Combobox = {
+    render: args => html `
+    <div style="min-height: 280px;">
+      <bs-input
+        type="combobox"
+        label="Country"
+        placeholder="Type to search countries"
+        error=${args.error}
+        .options=${[
+        { label: 'Denmark', value: 'dk' },
+        { label: 'Sweden', value: 'se' },
+        { label: 'Norway', value: 'no' },
+        { label: 'Finland', value: 'fi' },
+        { label: 'Iceland', value: 'is' },
+    ]}
+      ></bs-input>
+    </div>
+  `,
+};
+export const ComboboxLoading = {
+    name: 'Combobox (loading)',
+    render: () => html `
+    <div style="min-height: 120px;">
+      <bs-input type="combobox" ariaLabel="Search people" placeholder="Search people" loading open .options=${[]}></bs-input>
+    </div>
+  `,
+};
 export const Select = {
     render: args => html `
     <bs-input
@@ -139,11 +166,12 @@ export const Country = {
     <bs-input
       type="country"
       label="Phone number"
+      country="DK"
       error=${args.error}
       .countryOptions=${[
-        { code: 'DK', label: 'Denmark' },
-        { code: 'US', label: 'United States' },
-        { code: 'GB', label: 'United Kingdom' },
+        { code: 'DK', label: 'Denmark', flagIcon: '\u{1F1E9}\u{1F1F0}' },
+        { code: 'US', label: 'United States', flagIcon: '\u{1F1FA}\u{1F1F8}' },
+        { code: 'GB', label: 'United Kingdom', flagIcon: '\u{1F1EC}\u{1F1E7}' },
     ]}
       placeholder="Phone number"
     ></bs-input>

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

@@ -38,7 +38,7 @@ export class BsKey {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
     render() {
-        return (h("kbd", { key: 'e84e287f0dd4b06bc63839a8b8bfccfac064bdd2', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: '625fff9396a1d12863cb7eacfd0adf021a70835d', part: "label", class: "bs-key__label" }, h("slot", { key: '62f75a400443b6719994800e0050469d16939197' }, this.label))), h("span", { key: '3a989710a0d213de963feb4c51eb950fa46add68', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: '62ca858bdc844d645701096b6b72ef6291abceb9', name: "icon", onSlotchange: this.onIconSlotChange }))));
+        return (h("kbd", { key: 'b27361677679af4361b8c52c619e9b71c3a3070d', part: "container", class: "bs-key" }, !this.hasIcon && (h("span", { key: '0cc6b002dccd205e506c6beeeb036f8eadd96dca', part: "label", class: "bs-key__label" }, h("slot", { key: '99d7c62980ef97f7cd8d98ad949a0137bdc0f8e7' }, this.label))), h("span", { key: '57ba03cb14b03dfc33879b615d7766734611d514', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, h("slot", { key: 'd3d87b23ec5236cb9c42cff04345eb7601f6c3d6', name: "icon", onSlotchange: this.onIconSlotChange }))));
     }
     static get is() { return "bs-key"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-key-caps/bs-key-caps.js

@@ -41,7 +41,7 @@ export class BsKeyCaps {
     render() {
         const keys = this.keyList();
         const name = this.label ?? (keys.length ? keys.join(' plus ') : undefined);
-        return (h("span", { key: '53c116e6e8a19e8d02f1c0062054ba2446f7e7fc', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: '05d08db73dd84fdc420ea4346bf5b6b4431c5ffc' })));
+        return (h("span", { key: '901f06dbfbe651cf48cde37a2d230f66c801e710', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (h("bs-key", { label: k }))), h("slot", { key: 'c5444e1a1eea07b7ec6548c2d4a20cbae2494c4f' })));
     }
     static get is() { return "bs-key-caps"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.js

@@ -129,10 +129,10 @@ export class BsKeyboardShortcuts {
         const headId = `${this.id}-heading`;
         const noResults = count === 0 && (this.query ?? '').trim() !== '';
         let gi = 0;
-        return (h("bs-card", { key: '79e5266a0337b073391c6c82c629086f3f5a6dce', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: 'ad81f8b924d8d2d5462efd14e3201746fb00d04b', class: "bs-keyboard-shortcuts__body" }, h("div", { key: '54a8c9ea691523fe7f4c3f41157ffcaa814fff91', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: 'd11295fa495307b9d2117b5efda0be187eabbafb', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'ff8e19a76fc9c2d21605d9d7e5642465a0b0977b', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: 'e71f72087979fd4114439ca7db3722e5eba298d4', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: 'b5fb4a70cedbf7104abdc873c147e1f0986cfcd5', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: 'c4d748a98ef98e02a26476c4c8b853d3e77bad11', name: "heading" }, this.heading)), h("bs-icon-button", { key: 'aff51431172e892da6de1181bf3344eca2909e76', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'eb80c782f7af169f434b4ff142c961f85eef3306', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'c576a6aeca7ad33fb18922d6f6b327ac6e2aab5d', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: '200bfa90b61cc7a8ecdde7f373fd6b0c7f438e7c', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '41584586700e0589f078e996ab54497401c87059', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '4987a67e712f50b2259c2a4cd2d945adc14a2786', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: '410cc42bbb55207ec1f8c6f18c6a6ed07eab58b5', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '55cf6495958aa22f6470fd852ca4fae07195b5bc', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'b7538cbce99447c3ac03c1dedceff7a4a84941f2', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '993d7c182bce54e4a0faad2873ab9a8a3257bfd7', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
+        return (h("bs-card", { key: '4adbaa6128cadae5243d72c7664cc96bb8763170', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: 'ced6be76eb5edf1f2ed715538ace0a90f1899088', class: "bs-keyboard-shortcuts__body" }, h("div", { key: '63396fd9922f5fd22dfd8a6f7703e732423d0406', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: '2b48b0537ad8c49966a33c15d3bd7642c61afaa1', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("rect", { key: 'd1575e1a4caadd811d7738a97590b33772d09a3e', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: '8396b0c4a04aa05015745191f5fffb8c9171b624', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: 'edc9090eeec79b8f9c4a732bcc307a3d64598180', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '845c9ee4429df39222cb4dc384bfa4d67f9fb32d', name: "heading" }, this.heading)), h("bs-icon-button", { key: 'a9920ff3ebdf761fcbcff5437883a0aa018b0515', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '1ba14bac88cb1e0b71c26920606926e04647b3f3', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'a5bf2da4c4e046fbf47fcabfc9a359cc2f9e8af5', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: '1494c19d015297481024fb24880129def85a5bf4', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '021639f4a4aabd1a1e93bfa74005e748f10af296', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '7038f274d674816a895538f29ed49893dfe73d71', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: 'c478c63c210bf77c9b579d8be475e40807a3f794', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '0be8befdcf52d17e267ad00cc21582a470f3355b', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: '413e6394239c8ae95db6dda07f3239dc371271dc', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '49ebad833d4086b6e9063cca321183050294974e', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
             const tid = `${this.id}-g${gi++}`;
             return (h("div", { part: "group", class: "bs-keyboard-shortcuts__group", role: "group", "aria-labelledby": tid }, h("div", { part: "group-title", id: tid, class: "bs-keyboard-shortcuts__group-title" }, g.title), h("div", { class: "bs-keyboard-shortcuts__rows", role: "list" }, g.shortcuts.map(s => (h("bs-shortcut-row", { part: "row", action: s.action, keys: s.keys, selectionRole: "listitem", disabled: !!s.disabled || (!this.singleKeyEnabled && isSingleKey(s)) }))))));
-        })))))), this.showFooterHint && (h("div", { key: '4b980ff2fa253a36021615fe9a9203707a728b64', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'b72e0707aef77ffd10c192a622a2c0bc6f387b29', name: "footer" }, h("span", { key: '1324c58fd399271b2f0d983306b39f734e6e2d7f' }, this.footerPrefix), h("bs-key", { key: '47d4279c83abd23982bb4030582a7c21262e99ce', label: this.footerKey }), h("span", { key: '8ab0550e4d65d4c85e8ff3395f5bc230f9faacf8' }, this.footerText)))))));
+        })))))), this.showFooterHint && (h("div", { key: 'c4664361e37fe30fedb7ad4fe70d563158f1b8b4', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'b3e9725588c19ed229c4b0ef41d5af770b9a254f', name: "footer" }, h("span", { key: '4777b862d716e32dbaf52648b1657888a2edf469' }, this.footerPrefix), h("bs-key", { key: '2181a463c533548e1248ac29935f44324f730aae', label: this.footerKey }), h("span", { key: 'a768e533df52cca4e6576e9ec6824a9fc80bb3f3' }, this.footerText)))))));
     }
     static get is() { return "bs-keyboard-shortcuts"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,52 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { blockLinkNavigation } from "../../test/helpers/block-link-navigation";
+blockLinkNavigation();
+describe('bs-link', () => {
+    it('renders an anchor with href, target and default rel for _blank', async () => {
+        const { root } = await render(h("bs-link", { href: "https://example.com", target: "_blank" }, "Docs"));
+        const a = root.shadowRoot.querySelector('a');
+        expect(a.getAttribute('href')).toBe('https://example.com');
+        expect(a.getAttribute('target')).toBe('_blank');
+        expect(a.getAttribute('rel')).toBe('noopener noreferrer');
+        expect(root.shadowRoot.querySelector('[part="icon"]')).not.toBeNull();
+        expect(root.shadowRoot.querySelector('.bs-link__sr').textContent).toContain('new tab');
+    });
+    it('respects an explicit rel and shows the icon for external', async () => {
+        const { root } = await render(h("bs-link", { href: "/x", external: true, rel: "nofollow" }, "X"));
+        expect(root.shadowRoot.querySelector('a').getAttribute('rel')).toBe('nofollow');
+        expect(root.shadowRoot.querySelector('[part="icon"]')).not.toBeNull();
+    });
+    it('has no icon for an internal link and applies variant classes', async () => {
+        const { root } = await render(h("bs-link", { href: "/x", variant: "standalone" }, "X"));
+        expect(root.shadowRoot.querySelector('[part="icon"]')).toBeNull();
+        expect(root.shadowRoot.querySelector('a')).toHaveClass('bs-link--standalone');
+        expect(root.shadowRoot.querySelector('a').getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
+    });
+    it('marks the current page', async () => {
+        const { root } = await render(h("bs-link", { href: "/x", current: true }, "X"));
+        expect(root.shadowRoot.querySelector('a').getAttribute('aria-current')).toBe('page');
+    });
+    it('emits a cancelable bsNavigate on plain click and prevents navigation when cancelled', async () => {
+        const { root, waitForChanges } = await render(h("bs-link", { href: "#go" }, "X"));
+        let detail;
+        root.addEventListener('bsNavigate', (e) => {
+            detail = e.detail;
+            e.preventDefault();
+        });
+        const click = new MouseEvent('click', { bubbles: true, cancelable: true, composed: true, button: 0 });
+        root.shadowRoot.querySelector('a').dispatchEvent(click);
+        await waitForChanges();
+        expect(detail).toEqual({ href: '#go' });
+        expect(click.defaultPrevented).toBe(true);
+    });
+    it('leaves modified and middle clicks to the browser', async () => {
+        const { root } = await render(h("bs-link", { href: "#go" }, "X"));
+        let count = 0;
+        root.addEventListener('bsNavigate', () => count++);
+        const a = root.shadowRoot.querySelector('a');
+        a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true, button: 0, ctrlKey: true }));
+        a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true, button: 0, metaKey: true }));
+        a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, composed: true, button: 1 }));
+        expect(count).toBe(0);
+    });
+});

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

@@ -0,0 +1,129 @@
+/**
+ * @prop --bs-link-color: Text color, resting. Aliased to --bs-text-link.
+ * @prop --bs-link-color-hover: Text color on hover. Aliased to --bs-text-action-hover.
+ * @prop --bs-link-color-visited: Text color for a visited link (text variants only). Aliased to --bs-text-accent.
+ * @prop --bs-link-color-current: Text color for the current page. Aliased to --bs-text-default.
+ * @prop --bs-link-focus-ring-color: Keyboard focus ring. Aliased to --bs-border-neutral-focus.
+ * @prop --bs-link-radius: Corner radius of the focus ring. Aliased to --bs-border-radius-50.
+ * @prop --bs-link-gap: Gap between text and external icon. Aliased to --bs-spacing-50.
+ * @prop --bs-link-icon-size: External icon size. Aliased to --bs-spacing-200.
+ * @prop --bs-link-font-weight: Font weight. Aliased to --bs-font-weight-regular.
+ * @prop --bs-link-target-size: Minimum height/width of the standalone and button targets. Aliased to --bs-spacing-550 (44px).
+ * @prop --bs-link-button-bg: Button variant background. Aliased to --bs-color-primary-default.
+ * @prop --bs-link-button-bg-hover: Button variant background on hover. Aliased to --bs-color-primary-hover.
+ * @prop --bs-link-button-bg-pressed: Button variant background when pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-link-button-color: Button variant text color. Aliased to --bs-text-on-action.
+ * @prop --bs-link-button-radius: Button variant corner radius. Aliased to --bs-border-radius-100.
+ * @prop --bs-link-button-padding-x: Button variant horizontal padding. Aliased to --bs-spacing-250.
+ */
+:host {
+  display: inline;
+
+  --bs-link-color: var(--bs-text-link);
+  --bs-link-color-hover: var(--bs-text-action-hover);
+  --bs-link-color-visited: var(--bs-text-accent);
+  --bs-link-color-current: var(--bs-text-default);
+  --bs-link-focus-ring-color: var(--bs-border-neutral-focus);
+  --bs-link-radius: var(--bs-border-radius-50);
+  --bs-link-gap: var(--bs-spacing-50);
+  --bs-link-icon-size: var(--bs-spacing-200);
+  --bs-link-font-weight: var(--bs-font-weight-regular);
+  --bs-link-target-size: var(--bs-spacing-550);
+
+  --bs-link-button-bg: var(--bs-color-primary-default);
+  --bs-link-button-bg-hover: var(--bs-color-primary-hover);
+  --bs-link-button-bg-pressed: var(--bs-color-primary-pressed);
+  --bs-link-button-color: var(--bs-text-on-action);
+  --bs-link-button-radius: var(--bs-border-radius-100);
+  --bs-link-button-padding-x: var(--bs-spacing-250);
+}
+
+:host([variant='standalone']),
+:host([variant='button']) {
+  display: inline-block;
+}
+
+.bs-link {
+  color: var(--bs-link-color);
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--bs-link-font-weight);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  border-radius: var(--bs-link-radius);
+  cursor: pointer;
+}
+
+.bs-link:visited {
+  color: var(--bs-link-color-visited);
+}
+
+.bs-link:hover {
+  color: var(--bs-link-color-hover);
+  text-decoration-thickness: 2px;
+}
+
+.bs-link:focus-visible {
+  outline: 2px solid var(--bs-link-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.bs-link[aria-current='page'] {
+  color: var(--bs-link-color-current);
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-link__icon {
+  width: var(--bs-link-icon-size);
+  height: var(--bs-link-icon-size);
+  margin-inline-start: var(--bs-link-gap);
+  vertical-align: -0.1em;
+}
+
+.bs-link__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.bs-link--standalone,
+.bs-link--button {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--bs-link-target-size);
+  min-width: var(--bs-link-target-size);
+}
+
+.bs-link--button {
+  justify-content: center;
+  padding: 0 var(--bs-link-button-padding-x);
+  border-radius: var(--bs-link-button-radius);
+  background: var(--bs-link-button-bg);
+  color: var(--bs-link-button-color);
+  font-weight: var(--bs-font-weight-semibold);
+  text-decoration: none;
+}
+
+.bs-link--button:visited,
+.bs-link--button[aria-current='page'] {
+  color: var(--bs-link-button-color);
+}
+
+.bs-link--button:hover {
+  background: var(--bs-link-button-bg-hover);
+  color: var(--bs-link-button-color);
+}
+
+.bs-link--button:active {
+  background: var(--bs-link-button-bg-pressed);
+}
+
+@media (forced-colors: active) {
+  .bs-link { color: LinkText; }
+  .bs-link:visited { color: VisitedText; }
+  .bs-link--button { border: 1px solid ButtonText; color: ButtonText; }
+}

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

@@ -0,0 +1,257 @@
+import { h } from "@stencil/core";
+/**
+ * A navigation link: either text (inline within a sentence, or standalone with a 44px target) or a
+ * link styled as a primary button. Always renders a real `<a href>`.
+ *
+ * Built from: hand-built `<a>` (leaf). `bs-button` renders a `<button>` and has no `href`; nesting a
+ * button in an anchor is invalid HTML, so the `button` variant reuses the primary button's colour
+ * tokens instead. Known gap: add `href` support to `bs-button` and compose it here.
+ *
+ * ## When to use
+ * - Navigating to another page or an external resource.
+ *
+ * ## When not to use
+ * - Triggering an action on the current page (use `bs-button`).
+ *
+ * @slot - Default slot: the link text.
+ * @part link - The anchor element.
+ * @part label - The text wrapper.
+ * @part icon - The external-link icon.
+ */
+// Note: CSS Custom Properties (--bs-link-*) are documented via @prop comments in bs-link.css.
+export class BsLink {
+    /** Destination. */
+    href;
+    /** Browsing context (e.g. `_blank`). `_blank` implies the external icon. */
+    target;
+    /** Link relationship. Defaults to `noopener noreferrer` when `target="_blank"`. */
+    rel;
+    /** `inline` sits in running text; `standalone` has a 44px minimum touch target; `button` is
+     * styled as a primary button (also 44px). */
+    variant = 'inline';
+    /** Shows the external-link icon (always shown for `target="_blank"`). */
+    external = false;
+    /** Visually hidden suffix announced for links that open in a new tab. */
+    externalLabel = '(opens in a new tab)';
+    /** Marks the link as the current page (`aria-current="page"`). */
+    current = false;
+    /** Accessible name override (needed on the host, as `aria-label` does not cross the shadow boundary). */
+    ariaLabel = null;
+    /** Fires on a plain primary click before the browser navigates. **Cancelable**: call
+     * `preventDefault()` to route it yourself (SPA router). Detail is `{ href }`. Ctrl/cmd/shift/alt
+     * and middle clicks are left to the browser. Bubbles and is composed. */
+    bsNavigate;
+    onClick = (ev) => {
+        if (ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey)
+            return;
+        if (this.target && this.target !== '_self')
+            return;
+        const navigate = this.bsNavigate.emit({ href: this.href });
+        if (navigate.defaultPrevented)
+            ev.preventDefault();
+    };
+    render() {
+        const newTab = this.target === '_blank';
+        const showIcon = this.external || newTab;
+        const rel = this.rel ?? (newTab ? 'noopener noreferrer' : undefined);
+        return (h("a", { key: 'c82f367db82bb0c44308b0ab2c6599a846b6adfe', part: "link", class: `bs-link bs-link--${this.variant}`, href: this.href, target: this.target, rel: rel, "aria-label": this.ariaLabel, "aria-current": this.current ? 'page' : undefined, onClick: this.onClick }, h("span", { key: 'f12546ed4826b1e76f99e85a8ed297143655d128', part: "label", class: "bs-link__label" }, h("slot", { key: 'c562356d87247776cd80edccc1b8d6e9b8e35851' })), newTab && h("span", { key: '3c2ee6c9d471bda0302d0a607c46caf3693db568', class: "bs-link__sr" }, this.externalLabel), showIcon && (h("svg", { key: '8af4d1d677dd6942a699e23d8e8f6ceb2470988a', part: "icon", class: "bs-link__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("path", { key: '42df29013dd77d2bd847fedc6817914cc4d50d91', d: "M9 3h4v4M13 3L7.5 8.5M12 9v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))));
+    }
+    static get is() { return "bs-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Destination."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Browsing context (e.g. `_blank`). `_blank` implies the external icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link relationship. Defaults to `noopener noreferrer` when `target=\"_blank\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsLinkVariant",
+                    "resolved": "\"button\" | \"inline\" | \"standalone\"",
+                    "references": {
+                        "BsLinkVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-link/bs-link.tsx",
+                            "id": "src/components/bs-link/bs-link.tsx::BsLinkVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`inline` sits in running text; `standalone` has a 44px minimum touch target; `button` is\nstyled as a primary button (also 44px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'inline'"
+            },
+            "external": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the external-link icon (always shown for `target=\"_blank\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "external",
+                "defaultValue": "false"
+            },
+            "externalLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hidden suffix announced for links that open in a new tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "external-label",
+                "defaultValue": "'(opens in a new tab)'"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the link as the current page (`aria-current=\"page\"`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "current",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name override (needed on the host, as `aria-label` does not cross the shadow boundary)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsNavigate",
+                "name": "bsNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on a plain primary click before the browser navigates. **Cancelable**: call\n`preventDefault()` to route it yourself (SPA router). Detail is `{ href }`. Ctrl/cmd/shift/alt\nand middle clicks are left to the browser. Bubbles and is composed."
+                },
+                "complexType": {
+                    "original": "{ href: string }",
+                    "resolved": "{ href: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,31 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const variants = ['inline', 'standalone', 'button'];
+const meta = {
+    title: 'Components/bs-link',
+    parameters: { docs: { description: { component: componentDescription('bs-link') } } },
+    render: args => html `
+    <bs-link variant=${args.variant} href=${args.href} target=${args.target || undefined} ?external=${args.external} ?current=${args.current}>${args.label}</bs-link>
+  `,
+    argTypes: {
+        variant: { control: 'select', options: variants, description: propDescription('bs-link', 'variant') },
+        href: { control: 'text', description: propDescription('bs-link', 'href') },
+        target: { control: 'select', options: ['', '_self', '_blank'], description: propDescription('bs-link', 'target') },
+        external: { control: 'boolean', description: propDescription('bs-link', 'external') },
+        current: { control: 'boolean', description: propDescription('bs-link', 'current') },
+        label: { control: 'text' },
+    },
+    args: { variant: 'inline', href: '#docs', target: '', external: false, current: false, label: 'Read the documentation' },
+};
+export default meta;
+export const Default = {};
+export const Inline = {
+    render: () => html `<p style="max-width: 360px">Before you start, read <bs-link href="#a">the setup guide</bs-link> and the <bs-link href="#b">release notes</bs-link>.</p>`,
+};
+export const Standalone = { args: { variant: 'standalone' } };
+export const External = { args: { href: 'https://example.com', target: '_blank', label: 'Open example.com' } };
+export const LinkButton = {
+    name: 'Link button',
+    args: { variant: 'button', label: 'Get started' },
+};
+export const Current = { args: { current: true, variant: 'standalone', label: 'Overview' } };

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

@@ -96,4 +96,27 @@ describe('bs-list', () => {
         const { root: r2 } = await mountList({ selectable: true, value: 'a' });
         await runAxeCheck(r2);
     });
+    it('bulleted draws a hidden bullet on each row and keeps list semantics', async () => {
+        const { root, waitForChanges } = await mountList({ variant: 'bulleted' });
+        await waitForChanges();
+        expect(root.shadowRoot.querySelector('[part="list"]')).toEqualAttribute('role', 'list');
+        const a = itemOf(root, 'a');
+        expect(a).toEqualAttribute('role', 'listitem');
+        const m = a.shadowRoot.querySelector('[part="marker"]');
+        expect(m.textContent).toBe('\u2022');
+        expect(m.getAttribute('aria-hidden')).toBe('true');
+    });
+    it('numbered numbers the rows in order and renumbers when the variant changes back', async () => {
+        const { root, waitForChanges } = await mountList({ variant: 'numbered' });
+        await waitForChanges();
+        const nums = Array.from(root.querySelectorAll('bs-list-item')).map(i => i.shadowRoot.querySelector('[part="marker"]')?.textContent);
+        expect(nums).toEqual(['1.', '2.', '3.', '4.']);
+        root.variant = 'plain';
+        await waitForChanges();
+        expect(itemOf(root, 'a').shadowRoot.querySelector('[part="marker"]')).toBeNull();
+    });
+    it('passes axe as a numbered divided list with leading and trailing content', async () => {
+        const { root } = await render(h("bs-list", { ariaLabel: "Steps", variant: "numbered", dividers: true }, h("bs-list-item", { label: "One" }, h("bs-icon-button", { slot: "trailing", ariaLabel: "More" }, h("svg", { viewBox: "0 0 16 16" }))), h("bs-list-item", { label: "Two" })));
+        await runAxeCheck(root);
+    });
 });