@happyvertical/smrt-ui 0.32.0 → 0.32.2

package/AGENTS.md

@@ -8,6 +8,26 @@ can consume UI primitives, i18n, the theme system, and the module UI registry
 integration layer. Extracting this leaf is what breaks the domain ⇄ smrt-svelte
 peer cycle (see happyvertical/smrt#1582).
 
+## The UI split — primitive-adoption contract (#1589)
+
+SMRT has one shared set of UI primitives, split across two packages by concern:
+
+- **`smrt-ui` (here) owns the domain-agnostic VISUAL primitives** — `Button`,
+  `Card`, `Modal`/`ConfirmDialog`, `Badge`, `Avatar`, `Chip`, `Dropdown`,
+  `Tooltip`, `Skeleton`, `Tree`, `Pagination`, `DataTable`, … (it has **no**
+  form-input components — those carry i18n/voice logic and belong above the leaf).
+- **`smrt-svelte` owns the FORM primitives** — `Input`, `Textarea`, `Select`,
+  `Checkbox`/`Toggle`, `Form`, and the specialized date/measurement/address/file
+  inputs.
+
+**Domain packages import visual primitives from `smrt-ui` and form primitives
+from `smrt-svelte`, and must not hand-roll raw `<button>` / `<input>` /
+`<select>` / `<textarea>` / `<form>` markup** — re-rolling them re-introduces the
+inconsistent a11y / focus / disabled-state behavior the primitives exist to fix.
+Enforced by `scripts/check-raw-primitives.mjs` (report-only during the #1589
+migration; flips strict per package as it adopts the primitives). smrt-ui's own
+components are exempt — they *are* the primitives.
+
 ## What lives here
 
 | Subpath | Contents |

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.0",
+  "version": "0.32.2",
   "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.0"
+    "@happyvertical/smrt-types": "0.32.2"
   },
   "peerDependencies": {
     "svelte": "^5.18.2"