@brandsync/wc 0.0.10 → 0.0.12

package/dist/collection/components/bs-ai-chatbot/bs-ai-chatbot.stories.js

@@ -23,18 +23,32 @@ const PANEL_STYLE = `
   background: var(--bs-surface-base);
   font-family: var(--bs-typography-font-family-body), sans-serif;
 `;
+// Page padding per the Genie Chatbot pattern spec (16px left/right, 24px top/bottom -- not a flat
+// 16px on every side). No uniform \`gap\` here: the user-bubble-to-AI-response spacing below is a
+// distinct, much larger value (40px) than any other spacing within a single AI turn, so it's set
+// explicitly per-element instead of via one flex gap.
 const TRANSCRIPT_STYLE = `
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--bs-spacing-200);
-  padding: var(--bs-spacing-200);
+  padding: var(--bs-spacing-300) var(--bs-spacing-200);
 `;
+// The gap from a user's message bubble to the AI's response that follows it, per the Genie
+// Chatbot pattern spec's conversationWindow.userBubbleToAiResponsePx (40px) -- deliberately much
+// larger than ordinary internal spacing (e.g. the 4px gap between an AI response's own text and
+// its action row below).
+const AI_RESPONSE_GAP_STYLE = `margin-top: var(--bs-spacing-500);`;
+// margin: 0 on both -- these render as <p> tags, and this Storybook environment has no CSS reset
+// zeroing the browser's default <p> margin (~1em top/bottom). Left unset, that default margin
+// silently added to the intentional 40px user-bubble-to-AI-response gap (AI_RESPONSE_GAP_STYLE
+// above), measuring 56px instead of the spec's 40px -- confirmed via getBoundingClientRect before
+// this fix.
 const USER_BUBBLE_STYLE = `
   align-self: flex-end;
   max-width: 80%;
+  margin: 0;
   padding: var(--bs-spacing-100) var(--bs-spacing-150);
   border-radius: var(--bs-border-radius-150);
   background: var(--bs-color-primary-container);
@@ -44,6 +58,7 @@ const USER_BUBBLE_STYLE = `
 `;
 const AI_RESPONSE_STYLE = `
   max-width: 100%;
+  margin: 0;
   color: var(--bs-text-default);
   font-size: var(--bs-font-size-md);
   line-height: 1.5;
@@ -62,7 +77,7 @@ export const EmptyState = {
         </div>
       </div>
       <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };
@@ -73,7 +88,7 @@ export const ActiveConversation = {
       <bs-chatbot-header heading="Genie"></bs-chatbot-header>
       <div style=${TRANSCRIPT_STYLE}>
         <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
-        <div style="display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
+        <div style="${AI_RESPONSE_GAP_STYLE} display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
           <p style=${AI_RESPONSE_STYLE}>
             You can submit a ByggSøk application through the municipal portal. Log in with your ID, select "New
             application", and attach your building plans before submitting for review.
@@ -82,7 +97,7 @@ export const ActiveConversation = {
         </div>
       </div>
       <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };
@@ -93,10 +108,10 @@ export const Thinking = {
       <bs-chatbot-header heading="Genie"></bs-chatbot-header>
       <div style=${TRANSCRIPT_STYLE}>
         <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
-        <bs-ai-thinking label="Retrieving sources"></bs-ai-thinking>
+        <bs-ai-thinking label="Retrieving sources" style=${AI_RESPONSE_GAP_STYLE}></bs-ai-thinking>
       </div>
       <bs-composer aria-label="Message" state="generating" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };
@@ -107,7 +122,7 @@ export const WithSourcesDrawerOpen = {
       <bs-chatbot-header heading="Genie"></bs-chatbot-header>
       <div style=${TRANSCRIPT_STYLE}>
         <p style=${USER_BUBBLE_STYLE}>How do I submit a ByggSøk application?</p>
-        <div style="display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
+        <div style="${AI_RESPONSE_GAP_STYLE} display: flex; flex-direction: column; gap: var(--bs-spacing-50);">
           <p style=${AI_RESPONSE_STYLE}>
             You can submit a ByggSøk application through the municipal portal. Log in with your ID, select "New
             application", and attach your building plans before submitting for review.
@@ -116,7 +131,7 @@ export const WithSourcesDrawerOpen = {
         </div>
       </div>
       <bs-composer aria-label="Message" style="margin: var(--bs-spacing-100) var(--bs-spacing-200) 0;"></bs-composer>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
 
       <!-- Backdrop -->
       <div style="position: absolute; inset: 0; background: rgba(33, 38, 46, 0.32);"></div>
@@ -152,7 +167,7 @@ export const UploadingAttachments = {
           </bs-attachment-list>
         </bs-composer>
       </div>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };
@@ -174,7 +189,7 @@ export const SendFailed = {
         ></bs-composer-status-banner>
         <bs-composer aria-label="Message"></bs-composer>
       </div>
-      <bs-ai-disclaimer style="padding: var(--bs-spacing-100) 0;">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
+      <bs-ai-disclaimer style="padding: var(--bs-spacing-150) 0 var(--bs-spacing-100);">AI can make mistakes. Please verify important information.</bs-ai-disclaimer>
     </div>
   `,
 };

package/dist/collection/components/bs-ai-disclaimer/bs-ai-disclaimer.js

@@ -24,7 +24,8 @@ import { h } from "@stencil/core";
  */
 export class BsAiDisclaimer {
     render() {
-        return (h("div", { key: 'c306fa7e8f7f9dca07642e1038708847847e2d7e', class: "bs-ai-disclaimer" }, h("p", { key: '7f42e2094e7baf287c886ce966a3813657a99a61', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: 'c5a66f6093b413274c20de59e7f82d4f7372b56c' }))));
+        https: //images.unsplash.com/photo-1512917774080-9991f1c4c750?w=200&h=200&fit=crop
+         return (h("div", { key: 'c1215e28befb6e10d60deb9ef777269e3b8a2a49', class: "bs-ai-disclaimer" }, h("p", { key: 'c01f55b4cb73131f79af6cea3636224317fd8f5b', part: "text", class: "bs-ai-disclaimer__text" }, h("slot", { key: '99d3b3ae67d32a3df261bfcc3df39ee39d66ad40' }))));
     }
     static get is() { return "bs-ai-disclaimer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-greeting/bs-ai-greeting.js

@@ -43,7 +43,7 @@ export class BsAiGreeting {
         const subtext = this.productName
             ? `How can I help you with ${this.productName} today?`
             : 'How can I help you today?';
-        return (h("div", { key: '7931e7404b70476a5488e31f07981c97617c1e5b', class: "bs-ai-greeting" }, h("div", { key: '1ba75538642eebb9fe7c24eae2aae9a4eed176cf', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '6cf5d97d81249298d02d3983a039e664a75fbb40', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'f7a1b0235b5b32b1319bc7748e0073fae0defef0', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '5f07b44ca8d000c39204374f99c6608ecbfc22d3', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
+        return (h("div", { key: '4b7c40e6429fd65c0eeae87da40bf87165ba9738', class: "bs-ai-greeting" }, h("div", { key: '8d17a9a1c700e7b6e73daece822c2a857b6b9f25', part: "heading", class: "bs-ai-greeting__heading" }, h("p", { key: '225cf177b61377dbe44c9873629d547c42ba045c', class: "bs-ai-greeting__heading-line" }, "Hi. I'm ", this.assistantName, ","), h("p", { key: 'ed9ddd9d099c3515fb1b58006dc57a0bf45c5a6e', class: "bs-ai-greeting__heading-line" }, "your AI assistant.")), h("p", { key: '3c52a083f6c2a52120e01bec0c54846bc470e631', part: "subtext", class: "bs-ai-greeting__subtext" }, subtext)));
     }
     static get is() { return "bs-ai-greeting"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-ai-thinking/bs-ai-thinking.js

@@ -29,7 +29,7 @@ export class BsAiThinking {
     /** The status text shown next to the icon, e.g. "Retrieving", "Thinking", "Searching". */
     label = 'Thinking';
     render() {
-        return (h("div", { key: 'b72bc5095cc94257821541517f3446bac960df49', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '6c41c71416fc77f7385505754a68786b5f3412fa', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: '8edef57f7b31a03e2add401e42acdb7b6525a432', part: "label", class: "bs-ai-thinking__label" }, this.label)));
+        return (h("div", { key: '2b55697271a1986fca26cd48167608a734ddfcc0', class: "bs-ai-thinking", role: "status", "aria-live": "polite" }, h("img", { key: '900ecba3dc8cd2f925180a9347ecd42db79159ea', part: "icon", class: "bs-ai-thinking__icon", src: GENIE_MARK_ICON, alt: "", "aria-hidden": "true" }), h("span", { key: 'f2f4a35fcdef3111192ca4816a89b1746e3f74a0', part: "label", class: "bs-ai-thinking__label" }, this.label)));
     }
     static get is() { return "bs-ai-thinking"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,10 +7,6 @@
   --bs-attachment-filename-color: var(--bs-text-default);
   --bs-attachment-badge-bg-pdf: var(--bs-badge-bg-error);
   --bs-attachment-badge-bg-document: var(--bs-badge-bg-info);
-  --bs-attachment-remove-bg: var(--bs-button-neutral-container);
-  --bs-attachment-remove-hover: var(--bs-button-neutral-hover);
-  --bs-attachment-remove-pressed: var(--bs-button-neutral-pressed);
-  --bs-attachment-remove-focus: var(--bs-border-neutral-focus);
 }
 
 .bs-attachment {
@@ -98,35 +94,23 @@
   background: var(--bs-attachment-badge-bg-document);
 }
 
-/* --- Remove button --- */
+/* --- Remove button ---
+   bs-icon-button owns its own background/color/radius/hover/pressed/focus styling internally
+   (variant="neutral" size="xs") -- this component only positions it (absolute, top-right corner)
+   and drives the hover/focus-revealed opacity, both external layout concerns bs-icon-button
+   itself has no opinion on. */
 
 .bs-attachment__remove {
-  box-sizing: border-box;
   position: absolute;
-  top: var(--bs-spacing-50);
-  right: var(--bs-spacing-50);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  background: var(--bs-attachment-remove-bg);
-  border: none;
-  border-radius: var(--bs-border-radius-50);
-  color: var(--bs-icon-default);
-  cursor: pointer;
+  /* Verified against Figma node 2513:32843 (EG Genie UI Kit v1.0): the remove button's own 32x32
+     hit-target box sits flush at the thumbnail's top-right corner (top:0, right:0), with the
+     *visible* 16px button centered inside it (8px inset on every side) -- so the visible button's
+     real offset from the thumbnail's corner is 8px, not 4px. */
+  top: var(--bs-spacing-100);
+  right: var(--bs-spacing-100);
   opacity: 0;
   pointer-events: none;
-  transition: background-color var(--bs-duration-fast) var(--bs-easing-standard), opacity var(--bs-duration-fast) var(--bs-easing-standard);
-}
-
-.bs-attachment__remove:hover {
-  background: var(--bs-attachment-remove-hover);
-}
-
-.bs-attachment__remove:active {
-  background: var(--bs-attachment-remove-pressed);
+  transition: opacity var(--bs-duration-fast) var(--bs-easing-standard);
 }
 
 .bs-attachment:hover .bs-attachment__remove,
@@ -135,11 +119,6 @@
   pointer-events: auto;
 }
 
-.bs-attachment__remove:focus-visible {
-  outline: 2px solid var(--bs-attachment-remove-focus);
-  outline-offset: 1px;
-}
-
 /* --- Spinner --- */
 
 .bs-attachment__spinner {

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

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 /**
  * A single file attachment preview for `bs-composer` -- an image thumbnail, or a filename card
  * with a colored file-type badge (PDF/Document), with an optional upload-in-progress spinner and
- * a hover/focus-revealed remove button.
+ * a hover/focus-revealed remove button (a `bs-icon-button` with `size="xs"` `variant="neutral"` --
+ * the same 16x16px compact tier `bs-icon-button` documents as meant for exactly this kind of
+ * chip/tag "remove" control).
  *
  * ## When to use
  * - Rendered by the consuming app for each file a user has attached to a Genie AI chat message,
@@ -27,14 +29,6 @@ import { h } from "@stencil/core";
  * @prop --bs-attachment-badge-bg-pdf - PDF badge background. Aliased to `--bs-badge-bg-error`.
  * @prop --bs-attachment-badge-bg-document - Document badge background. Aliased to
  *   `--bs-badge-bg-info`.
- * @prop --bs-attachment-remove-bg - Remove button (neutral icon button) default background.
- *   Aliased to `--bs-button-neutral-container`.
- * @prop --bs-attachment-remove-hover - Remove button hover background. Aliased to
- *   `--bs-button-neutral-hover`.
- * @prop --bs-attachment-remove-pressed - Remove button active/pressed background. Aliased to
- *   `--bs-button-neutral-pressed`.
- * @prop --bs-attachment-remove-focus - Remove button focus outline color. Aliased to
- *   `--bs-border-neutral-focus`.
  */
 export class BsAttachment {
     /** Which kind of attachment preview to render. */
@@ -56,7 +50,7 @@ export class BsAttachment {
     };
     render() {
         const isImage = this.type === 'image';
-        return (h("div", { key: '7cebfc51b0453ac6c1fa57d38856b4b54f15def9', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("button", { key: '935eb0f9507a9c9d24a1a6121c2fcd0575ac9d16', type: "button", part: "remove", class: "bs-attachment__remove", "aria-label": "Remove attachment", onClick: this.onRemoveClick }, h(CloseIcon, { key: '00e45c411ec831a66dd29d039568f57fc97b3930' })))));
+        return (h("div", { key: '54b6d63b3e3fa98e5ec10444253b145080facc97', class: { 'bs-attachment': true, 'bs-attachment--loading': this.loading }, "aria-busy": this.loading ? 'true' : 'false' }, isImage ? this.renderImage() : this.renderCard(), this.removable && (h("bs-icon-button", { key: 'bc0c6cd660a361886447f38b56578a2271384e99', part: "remove", class: "bs-attachment__remove", size: "xs", variant: "neutral", ariaLabel: `Remove attachment: ${this.fileName}`, onClick: this.onRemoveClick }, h(CloseIcon, { key: 'fc932382233dfe20c46666705f1c79540bc08d35' })))));
     }
     renderImage() {
         return (h("div", { part: "thumbnail", class: "bs-attachment__thumbnail" }, h("img", { class: "bs-attachment__image", src: this.imageSrc, alt: this.imageAlt }), this.loading && h(Spinner, { class: "bs-attachment__spinner bs-attachment__spinner--overlay", size: 16 })));

package/dist/collection/components/bs-attachment-list/bs-attachment-list.js

@@ -58,7 +58,7 @@ export class BsAttachmentList {
         this.canScrollRight = row.scrollWidth - row.clientWidth - row.scrollLeft > 1;
     };
     render() {
-        return (h("div", { key: 'adf8ddac319b3d891d0895cb7e488b875f4bce5e', class: "bs-attachment-list" }, h("div", { key: 'd4247a77596a1a33d03f8657ec015f2d00b4138d', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: 'b4745ab38ca82a43bc48a7bc02669942b2eb0e0f', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: '58bb4815a8fb296f0788c8a4adfb9780049d641d', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
+        return (h("div", { key: 'f63adb537ce78135dfaa7d530a55829636ae318b', class: "bs-attachment-list" }, h("div", { key: '2cdd3a578f03db580b0a06088e6b27ed7ac8b06f', part: "row", class: "bs-attachment-list__row", ref: el => (this.row = el), onScroll: this.onScroll, role: "group", "aria-label": this.ariaLabel, tabIndex: 0 }, h("slot", { key: '8095ab8ad53cee9f357360dd1dd1c4cad4a4d513', onSlotchange: this.onSlotchange })), this.canScrollRight && h("div", { key: 'd09bb07a31bc780709f69838556434dc22b0544c', part: "fade", class: "bs-attachment-list__fade", "aria-hidden": "true" })));
     }
     static get is() { return "bs-attachment-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -78,4 +78,30 @@ describe('bs-button', () => {
         const button = root.shadowRoot.querySelector('button');
         expect(button).toHaveClass('bs-button--icon-only');
     });
+    describe('asymmetric padding for icon + label layouts', () => {
+        it('applies bs-button--has-icon (not bs-button--has-end-icon) with a leading icon and a label', 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).toHaveClass('bs-button--has-icon');
+            expect(button).not.toHaveClass('bs-button--has-end-icon');
+        });
+        it('applies bs-button--has-end-icon (not bs-button--has-icon) with a trailing icon and a label', async () => {
+            const { root } = await render(h("bs-button", null, "Next", h("svg", { slot: "end-icon", viewBox: "0 0 16 16" })));
+            const button = root.shadowRoot.querySelector('button');
+            expect(button).toHaveClass('bs-button--has-end-icon');
+            expect(button).not.toHaveClass('bs-button--has-icon');
+        });
+        it('applies neither class for an icon-only button (padding stays 0 via bs-button--icon-only)', 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).not.toHaveClass('bs-button--has-icon');
+            expect(button).not.toHaveClass('bs-button--has-end-icon');
+        });
+        it('applies neither class for a plain text-only button', async () => {
+            const { root } = await render(h("bs-button", null, "Click me"));
+            const button = root.shadowRoot.querySelector('button');
+            expect(button).not.toHaveClass('bs-button--has-icon');
+            expect(button).not.toHaveClass('bs-button--has-end-icon');
+        });
+    });
 });

package/dist/collection/components/bs-button/{bs-button.css → bs-button/bs-button.css}

@@ -4,7 +4,9 @@
   --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-padding-x-icon-side: var(--bs-spacing-150);
+  --bs-button-padding-x-label-side: var(--bs-spacing-250);
+
   --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);
@@ -30,6 +32,20 @@
   --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);
+  /* Verified against Figma node 2842:50178 ("Style=Neutral, States=Enabled"): the neutral variant
+     has its own 1px border, unlike every other filled variant here -- previously missing entirely. */
+  --bs-button-neutral-border: var(--bs-border-neutral-container);
+  --bs-button-neutral-border-hover: var(--bs-border-neutral-container-hover);
+  --bs-button-neutral-border-pressed: var(--bs-border-neutral-container-pressed);
+  /* Locally overriding the vendored --bs-button-neutral-hover/-pressed tokens (used directly
+     below elsewhere in this codebase) -- they alias to --bs-color-neutral-hover (a dark,
+     near-black scale meant for on-neutral text/icons, not a container background) and
+     --bs-color-primary-pressed (BLUE, not neutral at all) respectively. Verified visually: with
+     the vendored values, hover rendered near-black and pressed rendered blue, neither matching the
+     light-lavender-family redline. --bs-color-neutral-container-hover/-pressed are the correct
+     step family, matching --bs-button-neutral-container (--bs-color-neutral-container) itself. */
+  --bs-button-neutral-hover: var(--bs-color-neutral-container-hover);
+  --bs-button-neutral-pressed: var(--bs-color-neutral-container-pressed);
   --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);
@@ -44,7 +60,9 @@
   border: none;
   border-radius: var(--bs-button-radius);
   font-family: inherit;
-  font-weight: var(--bs-font-weight-semibold);
+  /* Was semibold, then medium -- both wrong per direct comparison against the live Figma file.
+     Every variant's label actually uses the regular weight. */
+  font-weight: var(--bs-font-weight-regular);
   cursor: pointer;
   transition: background-color var(--bs-duration-fast, 120ms) var(--bs-easing-standard, ease);
 }
@@ -66,7 +84,11 @@
 
 .bs-button--md {
   height: var(--bs-button-height-md);
-  padding: 0 var(--bs-spacing-400);
+  /* Verified against Figma node 2842:50344 (71px-wide frame, 39px-wide "Label" text): horizontal
+     padding is spacing/200 (16px) each side, not spacing-400 (32px) -- the previous value was
+     roughly double what the redline specifies. sm/lg padding-x weren't independently re-verified
+     against their own redlines in this pass. */
+  padding: 0 var(--bs-spacing-200);
   font-size: var(--bs-font-size-md);
 }
 
@@ -94,16 +116,20 @@
 .bs-button--neutral {
   background: var(--bs-button-neutral-container);
   color: var(--bs-text-default);
+  border: 1px solid var(--bs-button-neutral-border);
 }
 .bs-button--neutral:hover:not(:disabled) {
   background: var(--bs-button-neutral-hover);
+  border-color: var(--bs-button-neutral-border-hover);
 }
 .bs-button--neutral:active:not(:disabled) {
   background: var(--bs-button-neutral-pressed);
+  border-color: var(--bs-button-neutral-border-pressed);
 }
 .bs-button--neutral:disabled {
   background: var(--bs-button-neutral-disabled);
   color: var(--bs-text-on-disabled);
+  border-color: var(--bs-button-neutral-border);
 }
 
 .bs-button--error {
@@ -145,7 +171,11 @@
 
 .bs-button--warning {
   background: var(--bs-button-warning-default);
-  color: var(--bs-text-default);
+  /* --bs-text-default (not --bs-text-on-action, unlike every other colored variant here) failed
+     WCAG AA contrast against this background in BOTH themes -- verified: light theme was black
+     text on rgb(128,93,0) at 3.49:1 (needs 4.5:1), dark theme was white text on rgb(177,129,0) at
+     3.51:1. --bs-text-on-action flips appropriately per theme and passes in both (6.02:1 / 5.99:1). */
+  color: var(--bs-text-on-action);
 }
 .bs-button--warning:hover:not(:disabled) {
   background: var(--bs-button-warning-hover);
@@ -220,12 +250,14 @@
   outline-color: var(--bs-button-outlined-focus);
 }
 
+/* Gap between icon and label: spacing/xs (4px) per Figma node 2842:50344's state-layer gap, not
+   spacing-100 (8px). */
 .bs-button__icon--visible {
-  margin-right: var(--bs-spacing-100);
+  margin-right: var(--bs-spacing-50);
 }
 
 .bs-button__end-icon--visible {
-  margin-left: var(--bs-spacing-100);
+  margin-left: var(--bs-spacing-50);
 }
 
 .bs-button__icon ::slotted(*),
@@ -245,3 +277,22 @@
 .bs-button--icon-only .bs-button__end-icon--visible {
   margin-left: 0;
 }
+
+/* Verified against a Figma redline for the icon+label layout: the edge next to an icon is
+   tighter (spacing/150, 12px) than the plain text-only edge (16px), and the opposite edge -- next
+   to just the label, with an icon on the other side pulling the button off-balance -- compensates
+   with more padding (spacing/250, 20px), keeping the total horizontal padding budget the same as
+   the icon-less button (12+20 = 16+16 = 32px for size="md"). This is deliberately NOT
+   size-dependent, same as the icon/label gap above -- neither varies by size in the source spec. */
+.bs-button--has-icon:not(.bs-button--has-end-icon) {
+  padding-left: var(--bs-button-padding-x-icon-side);
+  padding-right: var(--bs-button-padding-x-label-side);
+}
+.bs-button--has-end-icon:not(.bs-button--has-icon) {
+  padding-left: var(--bs-button-padding-x-label-side);
+  padding-right: var(--bs-button-padding-x-icon-side);
+}
+.bs-button--has-icon.bs-button--has-end-icon {
+  padding-left: var(--bs-button-padding-x-icon-side);
+  padding-right: var(--bs-button-padding-x-icon-side);
+}

package/dist/collection/components/bs-button/{bs-button.js → bs-button/bs-button.js}

@@ -27,6 +27,11 @@ import { h } from "@stencil/core";
  * @prop --bs-button-height-sm - Height at `size="sm"`. Aliased to `--bs-spacing-500`.
  * @prop --bs-button-height-md - Height at `size="md"`. Aliased to `--bs-spacing-600`.
  * @prop --bs-button-height-lg - Height at `size="lg"`. Aliased to `--bs-spacing-700`.
+ * @prop --bs-button-neutral-border - Border color, `variant="neutral"`, default/disabled. Aliased to `--bs-border-neutral-container`.
+ * @prop --bs-button-neutral-border-hover - Border color, `variant="neutral"`, hover. Aliased to `--bs-border-neutral-container-hover`.
+ * @prop --bs-button-neutral-border-pressed - Border color, `variant="neutral"`, pressed. Aliased to `--bs-border-neutral-container-pressed`.
+ * @prop --bs-button-padding-x-icon-side - Horizontal padding on an edge that's adjacent to a leading/trailing icon (tighter than the plain text-only edge). Aliased to `--bs-spacing-150`.
+ * @prop --bs-button-padding-x-label-side - Horizontal padding on the opposite edge, when an icon on the other side needs compensating extra space to keep the button optically balanced. Aliased to `--bs-spacing-250`.
  */
 export class BsButton {
     el;
@@ -100,7 +105,7 @@ export class BsButton {
     };
     render() {
         const iconOnly = (this.hasIcon || this.hasEndIcon) && !this.hasLabel;
-        return (h("button", { key: '8fe88c418417a4b2f8944c282aa97dbc98aaeb06', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: '85b3a07595c93cbe3113204315669c3b087f216d', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: '53740a910449f215229686fa9c506cce6d399b52', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '3a3b133d9386d0d2044d44cdf0b47bd3e100c6d2', part: "label", class: "bs-button__label" }, h("slot", { key: '9c7c0e468651c0d93aafa53afb3fcab60ab7f311', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'fa5b7afa82c697cfa7cf1a0f564e743832c9c039', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '20bf73485fbd7c30e524e380ec291ac3939c3ba1', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
+        return (h("button", { key: 'b46975b3006b26aee5f52cead685d78c7cc3e4a6', class: `bs-button bs-button--${this.variant} bs-button--${this.size} ${iconOnly ? 'bs-button--icon-only' : ''} ${this.hasIcon && !iconOnly ? 'bs-button--has-icon' : ''} ${this.hasEndIcon && !iconOnly ? 'bs-button--has-end-icon' : ''}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel }, h("span", { key: 'e763e59c2775c3778208eff1e4e78322867e7e2c', part: "icon", class: `bs-button__icon ${this.hasIcon ? 'bs-button__icon--visible' : ''}` }, h("slot", { key: 'b13b8c375a66a34360de7505ae0b3ea88885b3a7', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '10c0fb5b04045e33f67b477e7deb6d213f9455de', part: "label", class: "bs-button__label" }, h("slot", { key: 'd8da8023c86f98cc82a934af4618daaa1fe476cc', onSlotchange: this.onLabelSlotchange })), h("span", { key: 'b584dddc6d4e146bdefb2f0223505c0e4aa5b7ed', part: "end-icon", class: `bs-button__end-icon ${this.hasEndIcon ? 'bs-button__end-icon--visible' : ''}` }, h("slot", { key: '960a015fd755d63fe7385b4516cebe33e29e0808', name: "end-icon", onSlotchange: this.onEndIconSlotchange }))));
     }
     static get is() { return "bs-button"; }
     static get encapsulation() { return "shadow"; }
@@ -126,8 +131,8 @@ export class BsButton {
                     "references": {
                         "BsButtonVariant": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button.tsx",
-                            "id": "src/components/bs-button/bs-button.tsx::BsButtonVariant"
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button/bs-button.tsx",
+                            "id": "src/components/bs-button/bs-button/bs-button.tsx::BsButtonVariant"
                         }
                     }
                 },
@@ -152,8 +157,8 @@ export class BsButton {
                     "references": {
                         "BsButtonSize": {
                             "location": "local",
-                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button.tsx",
-                            "id": "src/components/bs-button/bs-button.tsx::BsButtonSize"
+                            "path": "/Users/vivka/brandsync-web-components/src/components/bs-button/bs-button/bs-button.tsx",
+                            "id": "src/components/bs-button/bs-button/bs-button.tsx::BsButtonSize"
                         }
                     }
                 },

package/dist/collection/components/bs-button/{bs-button.stories.js → bs-button/bs-button.stories.js}

@@ -1,9 +1,9 @@
 import { html } from "lit";
-import { componentDescription, propDescription } from "../../stories-utils";
+import { componentDescription, propDescription } from "../../../stories-utils";
 const variants = ['primary', 'neutral', 'subtle', 'outlined', 'success', 'warning', 'info', 'error'];
 const sizes = ['sm', 'md', 'lg'];
 const meta = {
-    title: 'Components/bs-button',
+    title: 'Components/bs-button/bs-button',
     parameters: { docs: { description: { component: componentDescription('bs-button') } } },
     render: args => html `
     <bs-button variant=${args.variant} size=${args.size} type=${args.type} ?disabled=${args.disabled}>
@@ -86,31 +86,6 @@ export const WithEndIcon = {
     </bs-button>
   `,
 };
-export const IconOnly = {
-    name: 'Icon-only',
-    render: args => html `
-    <bs-button variant=${args.variant} size=${args.size} ?disabled=${args.disabled} aria-label="Delete">
-      <svg slot="icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <path
-          d="M2 4H14M6 4V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V4M12.5 4L12 13.5C12 13.7761 11.7761 14 11.5 14H4.5C4.22386 14 4 13.7761 4 13.5L3.5 4"
-          stroke="currentColor"
-          stroke-width="1.3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </bs-button>
-  `,
-};
-export const LongLabel = {
-    name: 'Long label (edge case)',
-    args: { label: 'This button has a much longer label than the icon-and-text layout was designed for' },
-    render: args => html `
-    <div style="max-width: 220px;">
-      <bs-button variant=${args.variant} size=${args.size} ?disabled=${args.disabled}> ${args.label} </bs-button>
-    </div>
-  `,
-};
 export const AllCombinations = {
     name: 'All variant × size × disabled combinations',
     render: () => html `

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

@@ -0,0 +1,83 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('bs-icon-button', () => {
+    it('renders the default icon slot and variant/size classes', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm" }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveClass('bs-icon-button--primary');
+        expect(button).toHaveClass('bs-icon-button--md');
+    });
+    it('applies the disabled attribute to the native button', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm", disabled: true }, h("svg", { viewBox: "0 0 16 16" })));
+        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-icon-button", { ariaLabel: "Confirm", variant: "neutral" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--neutral');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--primary');
+    });
+    it('applies the error variant class and reflects on prop change', async () => {
+        const { root, setProps } = await render(h("bs-icon-button", { ariaLabel: "Delete", variant: "error" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--error');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--primary');
+        expect(root.shadowRoot.querySelector('button')).not.toHaveClass('bs-icon-button--error');
+    });
+    it('applies the subtle variant class', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm", variant: "subtle" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--subtle');
+    });
+    it('applies the outlined variant class', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm", variant: "outlined" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--outlined');
+    });
+    it('applies the success variant class and reflects on prop change', async () => {
+        const { root, setProps } = await render(h("bs-icon-button", { ariaLabel: "Approve", variant: "success" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--success');
+        await setProps({ variant: 'primary' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--primary');
+        expect(root.shadowRoot.querySelector('button')).not.toHaveClass('bs-icon-button--success');
+    });
+    it('applies the warning variant class', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Proceed anyway", variant: "warning" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--warning');
+    });
+    it('applies the info variant class', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "View details", variant: "info" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--info');
+    });
+    it('applies each size class', async () => {
+        const { root, setProps } = await render(h("bs-icon-button", { ariaLabel: "Confirm", size: "sm" }, h("svg", { viewBox: "0 0 16 16" })));
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--sm');
+        await setProps({ size: 'lg' });
+        expect(root.shadowRoot.querySelector('button')).toHaveClass('bs-icon-button--lg');
+    });
+    it('renders size="xs" at 16px with an 8px icon and a smaller radius than sm/md/lg', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Remove", size: "xs" }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toHaveClass('bs-icon-button--xs');
+        expect(getComputedStyle(button).width).toBe('16px');
+        expect(getComputedStyle(button).height).toBe('16px');
+        const icon = root.shadowRoot.querySelector('[part="icon"]');
+        expect(getComputedStyle(icon).width).toBe('8px');
+        expect(getComputedStyle(icon).height).toBe('8px');
+    });
+    it('sets aria-label on the inner button from the ariaLabel prop', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Delete" }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toEqualAttribute('aria-label', 'Delete');
+    });
+    it('renders the native button type from the type prop', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Submit", type: "submit" }, h("svg", { viewBox: "0 0 16 16" })));
+        const button = root.shadowRoot.querySelector('button');
+        expect(button).toEqualAttribute('type', 'submit');
+    });
+    it('renders the slotted icon content inside part="icon"', async () => {
+        const { root } = await render(h("bs-icon-button", { ariaLabel: "Confirm" }, h("svg", { class: "my-icon", viewBox: "0 0 16 16" })));
+        const iconWrapper = root.shadowRoot.querySelector('[part="icon"]');
+        expect(iconWrapper).not.toBeNull();
+        expect(iconWrapper.querySelector('slot')).not.toBeNull();
+        expect(root.querySelector('svg.my-icon')).not.toBeNull();
+    });
+});