@brandsync/wc 0.0.4 → 0.0.6

package/dist/esm/bs-menu.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-nLORuTUY.js';
+
+const bsMenuCss = () => `:host{display:block;--bs-menu-bg:var(--bs-surface-raised);--bs-menu-radius:var(--bs-border-radius-100);--bs-menu-padding-y:var(--bs-spacing-50);--bs-menu-gap:var(--bs-spacing-50);--bs-menu-shadow:var(--bs-shadow-sm)}.bs-menu{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-menu-gap);background:var(--bs-menu-bg);border-radius:var(--bs-menu-radius);padding:var(--bs-menu-padding-y) 0;box-shadow:var(--bs-menu-shadow);font-family:inherit}`;
+
+const BsMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h("div", { key: 'e5008951228aa528404f810fe9ce90a5ee7298b1', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: 'd2e590cf51f626bd22dce58535fbea81291f9068' })));
+    }
+};
+BsMenu.style = bsMenuCss();
+
+export { BsMenu as bs_menu };

package/dist/esm/loader.js

@@ -4,7 +4,7 @@ export { s as setNonce } from './index-nLORuTUY.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1]}]]],["bs-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-chatbot-response-action",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"]}]]],["bs-composer",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-data-table",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-input",[[529,"bs-input",{"value":[1],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4]}]]],["bs-modal",[[769,"bs-modal",{"open":[1540],"heading":[1],"size":[1],"hasFooter":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]]], options);
+  return bootstrapLazy([["bs-badge",[[769,"bs-badge",{"variant":[1]}]]],["bs-button",[[785,"bs-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1],"ariaLabel":[1,"aria-label"],"hasIcon":[32],"hasEndIcon":[32],"hasLabel":[32]}]]],["bs-button-skeleton",[[513,"bs-button-skeleton",{"size":[1]}]]],["bs-card",[[769,"bs-card",{"surface":[1]}]]],["bs-chatbot-header",[[769,"bs-chatbot-header",{"heading":[1],"expanded":[1540]}]]],["bs-chatbot-response-action",[[769,"bs-chatbot-response-action",{"sourcesCount":[2,"sources-count"],"menuOpen":[1540,"menu-open"]},[[4,"click","onDocumentClick"],[4,"keydown","onKeydown"]]]]],["bs-chatbot-suggestion-button",[[769,"bs-chatbot-suggestion-button",{"disabled":[4]}]]],["bs-composer",[[785,"bs-composer",{"variant":[1],"placeholder":[1],"value":[1],"state":[1],"ariaLabel":[1,"aria-label"]}]]],["bs-data-table",[[513,"bs-data-table",{"columns":[16],"rows":[16],"sortColumn":[1,"sort-column"],"sortDirection":[1,"sort-direction"],"selectable":[4],"cellRenderer":[16],"selectedIds":[32]}]]],["bs-input",[[529,"bs-input",{"value":[1],"type":[1],"label":[1],"placeholder":[1],"description":[1],"error":[1],"disabled":[4]}]]],["bs-menu",[[257,"bs-menu"]]],["bs-menu-item",[[769,"bs-menu-item",{"hasIcon":[32]}]]],["bs-modal",[[769,"bs-modal",{"open":[1540],"heading":[1],"size":[1],"hasFooter":[32]},[[4,"keydown","onKeydown"],[4,"focusin","onFocusIn"]]]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/bs-chatbot-response-action/bs-chatbot-response-action.d.ts

@@ -16,6 +16,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @slot copy-icon - Overrides the default "Copy" button icon.
  * @slot regenerate-icon - Overrides the default "Regenerate" button icon.
  * @slot menu-icon - Overrides the default "More options" button icon.
+ * @slot menu - A `bs-menu` (or other content) rendered in a popup positioned below the "More
+ * options" button, shown only while `menuOpen` is `true`.
  * @slot sources-icon - Overrides the default icon in the "N sources" button.
  * @part like - The "Like" icon button.
  * @part dislike - The "Dislike" icon button.
@@ -39,12 +41,20 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @prop --bs-chatbot-response-action-sources-line-height - Aliased to `--bs-line-height-body-sm`.
  */
 export declare class BsChatbotResponseAction {
+    host: HTMLElement;
     /**
      * Number of sources backing the response. When set to a positive number, renders the "N
      * sources" button (singular "1 source" / plural "N sources"). When unset or `0`, the button is
      * not rendered at all.
      */
     sourcesCount?: number;
+    /**
+     * Whether the "more options" popup menu (the `menu` slot) is currently open. Mutable + reflected
+     * so the component can track/close itself (kebab click, click outside, Escape) the same way
+     * `bs-chatbot-header`'s `expanded` prop tracks its own toggle state, while still emitting
+     * `bsMenuOpen` for the consumer to react to.
+     */
+    menuOpen: boolean;
     /** Fires when the "Like" button is clicked. */
     bsLike: EventEmitter<void>;
     /** Fires when the "Dislike" button is clicked. */
@@ -53,8 +63,9 @@ export declare class BsChatbotResponseAction {
     bsCopy: EventEmitter<void>;
     /** Fires when the "Regenerate" button is clicked. */
     bsRegenerate: EventEmitter<void>;
-    /** Fires when the "More options" button is clicked. */
-    bsMenuOpen: EventEmitter<void>;
+    /** Fires when the "More options" button is clicked or the menu is closed (click outside,
+     * Escape), with the new `menuOpen` value. */
+    bsMenuOpen: EventEmitter<boolean>;
     /** Fires when the "N sources" button is clicked. */
     bsSourcesClick: EventEmitter<void>;
     private onLikeClick;
@@ -62,6 +73,9 @@ export declare class BsChatbotResponseAction {
     private onCopyClick;
     private onRegenerateClick;
     private onMenuClick;
+    private closeMenu;
+    onDocumentClick(ev: MouseEvent): void;
+    onKeydown(ev: KeyboardEvent): void;
     private onSourcesClick;
     render(): any;
 }

package/dist/types/components/bs-chatbot-response-action/bs-chatbot-response-action.stories.d.ts

@@ -8,3 +8,4 @@ type Story = StoryObj<BsChatbotResponseActionArgs>;
 export declare const Default: Story;
 export declare const NoSources: Story;
 export declare const InResponseMessage: Story;
+export declare const WithMenu: Story;

package/dist/types/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A pill-shaped clickable suggestion chip for a Genie AI chat panel (e.g. "How can I help you?").
+ *
+ * One instance renders one chip -- to show several suggestion prompts side by side, render
+ * multiple `bs-chatbot-suggestion-button` elements inside a plain flex-wrap container; this
+ * library doesn't ship a separate list/group component for that since a `<div>` with
+ * `flex-wrap: wrap` is sufficient.
+ *
+ * ## When to use
+ * - Quick-reply/starter prompts shown above or alongside `bs-composer` in a Genie AI chat panel.
+ *
+ * ## When not to use
+ * - As a general-purpose button -- use `bs-button` instead, this component's pill shape and
+ *   tonal color treatment are specific to Genie chat suggestion prompts.
+ *
+ * @slot - Default slot: the suggestion's label text.
+ * @part button - The button element.
+ * @prop --bs-chatbot-suggestion-button-radius - Corner radius. Aliased to `--bs-border-radius-full`.
+ * @prop --bs-chatbot-suggestion-button-border-color - Border color. Aliased to `--bs-border-primary`.
+ * @prop --bs-chatbot-suggestion-button-bg-default - Background in the default (enabled) state.
+ *   Aliased to `--bs-color-primary-container`.
+ * @prop --bs-chatbot-suggestion-button-bg-hover - Background on hover. Aliased to
+ *   `--bs-color-primary-container-hover`.
+ * @prop --bs-chatbot-suggestion-button-bg-pressed - Background when pressed. Aliased directly to
+ *   the primitive `--bs-brand-200` -- there's no pre-built semantic "container-pressed" token
+ *   matching this tonal button's lighter pressed shade progression (50 -> 100 -> 200), so this
+ *   component aliases one locally (same situation `bs-button.css` documents for its
+ *   subtle/outlined/success/warning/info variants).
+ * @prop --bs-chatbot-suggestion-button-bg-focus - Background when focused. Aliased to
+ *   `--bs-color-primary-container-hover` (same as hover).
+ * @prop --bs-chatbot-suggestion-button-text-default - Text color in the default state. Aliased to
+ *   `--bs-text-action`.
+ * @prop --bs-chatbot-suggestion-button-text-hover - Text color on hover, pressed, and focus.
+ *   Aliased to `--bs-text-action-hover`.
+ * @prop --bs-chatbot-suggestion-button-focus-ring-color - Focus ring color. Aliased to
+ *   `--bs-border-primary-focus`.
+ */
+export declare class BsChatbotSuggestionButton {
+    /** Disables the button and applies a reduced-opacity treatment. */
+    disabled: boolean;
+    /** Fires when the button is clicked. */
+    bsSelect: EventEmitter<void>;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/bs-chatbot-suggestion-button/bs-chatbot-suggestion-button.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+interface BsChatbotSuggestionButtonArgs {
+    label: string;
+    disabled: boolean;
+}
+declare const meta: Meta<BsChatbotSuggestionButtonArgs>;
+export default meta;
+type Story = StoryObj<BsChatbotSuggestionButtonArgs>;
+export declare const Default: Story;
+export declare const SuggestionRow: Story;

package/dist/types/components/bs-menu/bs-menu.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-menu/bs-menu.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A generic dropdown/popup menu container: a rounded, elevated list of items (typically
+ * `bs-menu-item` elements).
+ *
+ * ## When to use
+ * - A popup list of actions/options triggered by another control (e.g. a "more options" kebab
+ *   button), such as `bs-chatbot-response-action`'s `menu` slot.
+ *
+ * ## When not to use
+ * - A persistent, always-visible list of options -- this component is purpose-built as a popup
+ *   surface (rounded corners, elevation shadow), not a plain list.
+ *
+ * @slot - Default slot: the menu's items (typically `bs-menu-item` elements, though anything can
+ * be slotted in -- this component doesn't restrict slot content via JS).
+ * @part list - The rounded, elevated box wrapping the slotted items.
+ * @prop --bs-menu-bg - Background of the menu box. Aliased to `--bs-surface-raised`.
+ * @prop --bs-menu-radius - Corner radius of the menu box. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-menu-padding-y - Top/bottom padding of the menu box. Aliased to `--bs-spacing-50`.
+ * @prop --bs-menu-gap - Gap between slotted items. Aliased to `--bs-spacing-50`.
+ * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
+ */
+export declare class BsMenu {
+    render(): any;
+}

package/dist/types/components/bs-menu/bs-menu.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/types/components/bs-menu-item/bs-menu-item.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-menu-item/bs-menu-item.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A single selectable row inside a `bs-menu`: an optional icon plus a text label, rendered as a
+ * real `<button>` for correct keyboard/click semantics.
+ *
+ * ## When to use
+ * - As a child of `bs-menu`, one per selectable action/option.
+ *
+ * ## When not to use
+ * - Outside of `bs-menu` -- this component's sizing/hover treatment is designed to sit inside the
+ *   menu's rounded, padded list box.
+ *
+ * @slot icon - Optional leading icon (24x24). When left empty, no icon space is reserved.
+ * @slot - Default slot: the item's text label.
+ * @part item - The button element.
+ * @part icon - The icon wrapper.
+ * @part label - The label wrapper.
+ * @prop --bs-menu-item-radius - Corner radius of the row. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-menu-item-padding-y - Top/bottom padding. Aliased to `--bs-spacing-100`.
+ * @prop --bs-menu-item-padding-x - Left/right padding. Aliased to `--bs-spacing-150`.
+ * @prop --bs-menu-item-gap - Gap between icon and label. Aliased to `--bs-spacing-100`.
+ * @prop --bs-menu-item-hover - Background on hover. Aliased to `--bs-color-neutral-container`.
+ * @prop --bs-menu-item-pressed - Background when pressed. Aliased to `--bs-color-neutral-container-pressed`.
+ * @prop --bs-menu-item-icon-color - Icon color. Aliased to `--bs-icon-default`.
+ * @prop --bs-menu-item-color - Label text color. Aliased to `--bs-text-muted`.
+ * @prop --bs-menu-item-font-size - Aliased to `--bs-font-size-md`.
+ * @prop --bs-menu-item-line-height - Aliased to `--bs-line-height-body-md`.
+ */
+export declare class BsMenuItem {
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper (and its gap) only
+     * renders when there's actually an icon to show. */
+    hasIcon: boolean;
+    /** Fires when the item is clicked. */
+    bsSelect: EventEmitter<void>;
+    private onIconSlotchange;
+    private onClick;
+    render(): any;
+}

package/dist/types/components/bs-menu-item/bs-menu-item.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const InAMenu: Story;