@brandsync/wc 1.18.0 → 1.20.0

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

@@ -0,0 +1,155 @@
+import { h } from "@stencil/core";
+import { getIcon } from "./icon-registry";
+/**
+ * A sized, coloured icon. Renders inline SVG from a named registry (`name`), or any SVG you slot in.
+ *
+ * Built-in names: `menu`, `arrow-right`, `arrow-left`, `check`, `close`, `chevron-down`,
+ * `external-link`, `copy`, `search`, plus Phosphor glyphs `user`, `star`, `star-fill`, `x`,
+ * `paper-plane-right`, `note-pencil`, `clock-counter-clockwise`, `arrows-out-simple` (256x256 filled). Add more with `registerIcons({ name: '<path d="..."/>' })`
+ * (exported from the package entry): each value is the inner markup of a 24x24, `currentColor`
+ * stroke icon, or pass `{ viewBox, body }` for a filled glyph on another grid.
+ *
+ * Decorative by default (`aria-hidden`). Set `label` when the icon alone conveys meaning; it is then
+ * exposed as an image with that name. An icon inside a button never needs `label`: name the button.
+ *
+ * Composed from: nothing (leaf). Used by `bs-code-block`.
+ *
+ * ## When to use
+ * - A glyph beside text or inside a button, sized and coloured from tokens.
+ *
+ * ## When not to use
+ * - As a control by itself: wrap it in `bs-icon-button`.
+ * - For a tinted status square: use `bs-icon-tile`.
+ *
+ * @slot - Optional SVG (or `img`) shown when `name` is not set or not registered. Sized to the icon; draw with `currentColor` to follow `tone`.
+ * @part icon - The wrapper around the glyph.
+ */
+export class BsIcon {
+    el;
+    /** Registered icon name (see the component description for the built-in set). */
+    name;
+    /** Size: `xs` 12px, `sm` 16px, `md` 24px, `lg` 32px, `xl` 48px. */
+    size = 'md';
+    /** Colour from the icon tokens. `inherit` uses the surrounding text colour (`currentColor`). */
+    tone = 'default';
+    /** Accessible name. When set the icon is exposed as an image with this name; when empty it is
+     * decorative and hidden from assistive tech. */
+    label;
+    render() {
+        const markup = getIcon(this.name);
+        const filled = typeof markup === 'object';
+        const inner = typeof markup === 'string' ? markup : markup?.body;
+        const labelled = !!this.label;
+        return (h("span", { key: 'a286d23cd079a5fd7dfb472fc96a6b1e2f68e3f4', part: "icon", class: "bs-icon", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, markup ? (h("svg", { viewBox: filled ? markup.viewBox : '0 0 24 24', fill: filled ? 'currentColor' : 'none', stroke: filled ? undefined : 'currentColor', "stroke-width": filled ? undefined : '2', "stroke-linecap": filled ? undefined : 'round', "stroke-linejoin": filled ? undefined : 'round', "aria-hidden": "true", focusable: "false", ref: (svg) => {
+                if (svg && svg.innerHTML !== inner)
+                    svg.innerHTML = inner;
+            } })) : (h("slot", null))));
+    }
+    static get is() { return "bs-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Registered icon name (see the component description for the built-in set)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "BsIconSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-icon/bs-icon.tsx",
+                            "id": "src/components/bs-icon/bs-icon.tsx::BsIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size: `xs` 12px, `sm` 16px, `md` 24px, `lg` 32px, `xl` 48px."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsIconTone",
+                    "resolved": "\"action\" | \"default\" | \"error\" | \"info\" | \"inherit\" | \"inverse\" | \"muted\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BsIconTone": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-icon/bs-icon.tsx",
+                            "id": "src/components/bs-icon/bs-icon.tsx::BsIconTone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour from the icon tokens. `inherit` uses the surrounding text colour (`currentColor`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'default'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name. When set the icon is exposed as an image with this name; when empty it is\ndecorative and hidden from assistive tech."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,52 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+const NAMES = ['menu', 'arrow-right', 'arrow-left', 'check', 'close', 'chevron-down', 'external-link', 'copy', 'search'];
+const meta = {
+    title: 'Components/bs-icon',
+    parameters: { docs: { description: { component: componentDescription('bs-icon') } } },
+    render: args => html `<bs-icon name=${args.name} size=${args.size} tone=${args.tone} label=${args.label || ''}></bs-icon>`,
+    argTypes: {
+        name: { control: 'select', options: NAMES },
+        size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+        tone: { control: 'select', options: ['default', 'muted', 'action', 'success', 'info', 'warning', 'error', 'inverse', 'inherit'] },
+        label: { control: 'text' },
+    },
+    args: { name: 'search', size: 'md', tone: 'default', label: '' },
+};
+export default meta;
+export const Default = {};
+export const AllNames = {
+    name: 'Built-in names',
+    render: () => html `
+    <div style="display: flex; gap: var(--bs-spacing-300); flex-wrap: wrap">
+      ${NAMES.map(n => html `<div style="display: grid; justify-items: center; gap: var(--bs-spacing-50); font-size: var(--bs-font-size-xs)"><bs-icon name=${n}></bs-icon>${n}</div>`)}
+    </div>
+  `,
+};
+export const Sizes = {
+    render: () => html `
+    <div style="display: flex; gap: var(--bs-spacing-200); align-items: center">
+      ${['xs', 'sm', 'md', 'lg', 'xl'].map(s => html `<bs-icon name="check" size=${s}></bs-icon>`)}
+    </div>
+  `,
+};
+export const Tones = {
+    render: () => html `
+    <div style="display: flex; gap: var(--bs-spacing-200); align-items: center">
+      ${['default', 'muted', 'action', 'success', 'info', 'warning', 'error'].map(t => html `<bs-icon name="check" tone=${t}></bs-icon>`)}
+      <span style="color: var(--bs-text-error)"><bs-icon name="check" tone="inherit"></bs-icon></span>
+    </div>
+  `,
+};
+export const Labelled = {
+    name: 'With an accessible name',
+    args: { name: 'check', label: 'Saved' },
+};
+export const Slotted = {
+    name: 'Slotted SVG',
+    render: () => html `
+    <bs-icon tone="action">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8" /></svg>
+    </bs-icon>
+  `,
+};

package/dist/collection/components/bs-icon/icon-registry.js

@@ -0,0 +1,58 @@
+/**
+ * Named icon registry for `bs-icon`.
+ *
+ * Each entry is the *inner* SVG markup (paths, circles, ...) of a 24x24 icon drawn with
+ * `stroke="currentColor"` -- `bs-icon` supplies the `<svg>` wrapper (viewBox, stroke width, caps).
+ * The registry lives on `globalThis` so the lazy-loaded build, the custom-elements build and any
+ * consumer that imports `registerIcons` all share one copy.
+ */
+const KEY = '__bsIconRegistry';
+/*
+ * Phosphor Icons (https://phosphoricons.com), MIT License, (c) 2020-present Phosphor Icons.
+ * Inner SVG markup copied from @phosphor-icons/core (regular weight; `star-fill` is the fill weight).
+ * Entries of the `{ viewBox, body }` form are rendered filled with `currentColor`.
+ */
+const PHOSPHOR = {
+    'user': { viewBox: '0 0 256 256', body: '<path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/>' },
+    'star': { viewBox: '0 0 256 256', body: '<path d="M239.18,97.26A16.38,16.38,0,0,0,224.92,86l-59-4.76L143.14,26.15a16.36,16.36,0,0,0-30.27,0L90.11,81.23,31.08,86a16.46,16.46,0,0,0-9.37,28.86l45,38.83L53,211.75a16.38,16.38,0,0,0,24.5,17.82L128,198.49l50.53,31.08A16.4,16.4,0,0,0,203,211.75l-13.76-58.07,45-38.83A16.43,16.43,0,0,0,239.18,97.26Zm-15.34,5.47-48.7,42a8,8,0,0,0-2.56,7.91l14.88,62.8a.37.37,0,0,1-.17.48c-.18.14-.23.11-.38,0l-54.72-33.65a8,8,0,0,0-8.38,0L69.09,215.94c-.15.09-.19.12-.38,0a.37.37,0,0,1-.17-.48l14.88-62.8a8,8,0,0,0-2.56-7.91l-48.7-42c-.12-.1-.23-.19-.13-.5s.18-.27.33-.29l63.92-5.16A8,8,0,0,0,103,91.86l24.62-59.61c.08-.17.11-.25.35-.25s.27.08.35.25L153,91.86a8,8,0,0,0,6.75,4.92l63.92,5.16c.15,0,.24,0,.33.29S224,102.63,223.84,102.73Z"/>' },
+    'star-fill': { viewBox: '0 0 256 256', body: '<path d="M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z"/>' },
+    'x': { viewBox: '0 0 256 256', body: '<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/>' },
+    'paper-plane-right': { viewBox: '0 0 256 256', body: '<path d="M231.87,114l-168-95.89A16,16,0,0,0,40.92,37.34L71.55,128,40.92,218.67A16,16,0,0,0,56,240a16.15,16.15,0,0,0,7.93-2.1l167.92-96.05a16,16,0,0,0,.05-27.89ZM56,224a.56.56,0,0,0,0-.12L85.74,136H144a8,8,0,0,0,0-16H85.74L56.06,32.16A.46.46,0,0,0,56,32l168,95.83Z"/>' },
+    'note-pencil': { viewBox: '0 0 256 256', body: '<path d="M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,128v80a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h80a8,8,0,0,1,0,16H48V208H208V128a8,8,0,0,1,16,0Z"/>' },
+    'clock-counter-clockwise': { viewBox: '0 0 256 256', body: '<path d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z"/>' },
+    'arrows-out-simple': { viewBox: '0 0 256 256', body: '<path d="M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z"/>' },
+};
+const BUILT_IN = {
+    ...PHOSPHOR,
+    menu: '<path d="M4 6H20"/><path d="M4 12H20"/><path d="M4 18H20"/>',
+    'arrow-right': '<path d="M5 12H19"/><path d="M13 6L19 12L13 18"/>',
+    'arrow-left': '<path d="M19 12H5"/><path d="M11 6L5 12L11 18"/>',
+    check: '<path d="M5 12.5L10 17.5L19 7.5"/>',
+    close: '<path d="M6 6L18 18"/><path d="M18 6L6 18"/>',
+    'chevron-down': '<path d="M6 9L12 15L18 9"/>',
+    'external-link': '<path d="M14 4H20V10"/><path d="M20 4L11 13"/><path d="M18 14V19H5V6H10"/>',
+    copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6C5 5.4 5.4 5 6 5H15"/>',
+    search: '<circle cx="11" cy="11" r="6.5"/><path d="M16 16L20 20"/>',
+};
+function registry() {
+    const g = globalThis;
+    if (!g[KEY])
+        g[KEY] = { ...BUILT_IN };
+    return g[KEY];
+}
+/**
+ * Register (or replace) named icons. Values are inner SVG markup for a 24x24 viewBox using
+ * `currentColor` strokes, or `{ viewBox, body }` for filled glyphs on another grid (rendered with `fill="currentColor"`). Only register markup you trust: it is inserted as-is.
+ * Already-rendered `bs-icon`s pick up new names on their next render.
+ */
+export function registerIcons(icons) {
+    Object.assign(registry(), icons);
+}
+/** The entry (inner SVG markup string, or `{ viewBox, body }`) registered under `name`, or undefined. */
+export function getIcon(name) {
+    return name ? registry()[name] : undefined;
+}
+/** All registered icon names. */
+export function iconNames() {
+    return Object.keys(registry());
+}

package/dist/collection/components/bs-icon-tile/bs-icon-tile.js

@@ -46,8 +46,8 @@ export class BsIconTile {
     render() {
         const labelled = !!this.label;
         return [
-            h("div", { key: 'ea92c7e93e3283dccf7feb0afcc87947eb9f3087', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '50ba78a85b831869ea60882b89739cc0ef36a6b4', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'ab395f4bfc9a40be9ac74f05ebf227a241cdfca8', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            h("span", { key: '07ad1aa22ba646f82b8eb2782ddda0c816dc47a5', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'f4209dee495bf82b95c95fcd754bdf8305d5b02f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            h("div", { key: '312539518cebf4f02edfd480fc56899b5561203d', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, h("span", { key: '451991c16cba6afd20f4029fe39c607c09564119', part: "icon", class: "bs-icon-tile__icon" }, h("slot", { key: 'db458731df94f9abb079d1c432105baa482b5ae4', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            h("span", { key: 'cb8186734c1378b0f4d0ae16e1113bd9a82e5930', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, h("slot", { key: 'ad2416e6a042634eca44acb5d8768754343900b5', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
     static get is() { return "bs-icon-tile"; }