@happyvertical/smrt-ui 0.32.1 → 0.33.0

package/dist/components/ui/Button.svelte

@@ -26,6 +26,12 @@ export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
   fullWidth?: boolean;
   /** Loading state */
   loading?: boolean;
+  /**
+   * Extra class(es) appended after the base `button {variant} {size}` styling.
+   * Lets callers adopt Button for custom-styled buttons without losing their
+   * own CSS (issue #1589) — the base button styling still applies.
+   */
+  class?: string;
 }
 
 const {
@@ -36,6 +42,7 @@ const {
   loading = false,
   type = 'button',
   fullWidth = false,
+  class: className = '',
   onclick,
   children,
   ...rest
@@ -67,7 +74,7 @@ const linkProps = $derived(() => {
 {#if isLink}
   <a
     {href}
-    class="button {variant} {size}"
+    class="button {variant} {size} {className}"
     class:disabled={isDisabled}
     class:full-width={fullWidth}
     class:loading
@@ -88,7 +95,7 @@ const linkProps = $derived(() => {
     {type}
     disabled={isDisabled}
     aria-busy={loading}
-    class="button {variant} {size}"
+    class="button {variant} {size} {className}"
     class:full-width={fullWidth}
     class:loading
     {onclick}

package/dist/components/ui/Button.svelte.d.ts

@@ -21,6 +21,12 @@ export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
     fullWidth?: boolean;
     /** Loading state */
     loading?: boolean;
+    /**
+     * Extra class(es) appended after the base `button {variant} {size}` styling.
+     * Lets callers adopt Button for custom-styled buttons without losing their
+     * own CSS (issue #1589) — the base button styling still applies.
+     */
+    class?: string;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/components/ui/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Button.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAEV,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGrE,iCAAiC;AACjC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC;IACzE,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoED,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Button.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAEV,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGrE,iCAAiC;AACjC,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,CAAC;IACzE,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/ui/__tests__/Button.test.js

@@ -60,6 +60,29 @@ describe('Button', () => {
         const link = screen.getByRole('link', { name: 'Home' });
         expect(link).toHaveAttribute('href', '/home');
     });
+    it('appends a custom class while keeping the base button styling (#1589)', () => {
+        render(Button, {
+            props: { children: textSnippet('Save'), class: 'topic-action-btn' },
+        });
+        const button = screen.getByRole('button', { name: 'Save' });
+        // Caller's class is applied (so custom-styled buttons can adopt Button)...
+        expect(button).toHaveClass('topic-action-btn');
+        // ...without dropping the primitive's own base/variant styling.
+        expect(button).toHaveClass('button');
+        expect(button).toHaveClass('primary');
+    });
+    it('appends a custom class in link mode too', () => {
+        render(Button, {
+            props: {
+                children: textSnippet('Home'),
+                href: '/home',
+                class: 'nav-link',
+            },
+        });
+        const link = screen.getByRole('link', { name: 'Home' });
+        expect(link).toHaveClass('nav-link');
+        expect(link).toHaveClass('button');
+    });
     it('is axe-clean', async () => {
         const { container } = render(Button, {
             props: { children: textSnippet('Accessible') },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -108,7 +108,7 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-types": "0.32.1"
+    "@happyvertical/smrt-types": "0.33.0"
   },
   "peerDependencies": {
     "svelte": "^5.18.2"