@happyvertical/smrt-ui 0.34.1 → 0.34.3

package/dist/components/ui/Button.svelte

@@ -32,6 +32,15 @@ export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
    * own CSS (issue #1589) — the base button styling still applies.
    */
   class?: string;
+  /**
+   * Anchor-mode attributes (link mode only, i.e. when `href` is set). The
+   * component already spreads these onto the rendered `<a>`; they are declared
+   * here so callers migrating an external `<a target="_blank" rel="...">` to
+   * Button (issue #1589) keep them type-checked. Ignored in button mode.
+   */
+  target?: HTMLAnchorAttributes['target'];
+  rel?: HTMLAnchorAttributes['rel'];
+  download?: HTMLAnchorAttributes['download'];
 }
 
 const {
@@ -45,6 +54,12 @@ const {
   class: className = '',
   onclick,
   children,
+  // Anchor-mode attributes pulled out of `rest` so they are only ever applied
+  // in link mode below — in button mode they are dropped, matching the doc and
+  // avoiding invalid `<button target=...>` HTML (PR #1608 review).
+  target,
+  rel,
+  download,
   ...rest
 }: Props = $props();
 
@@ -86,6 +101,9 @@ const linkProps = $derived(() => {
 {#if isLink}
   <a
     href={isDisabled ? undefined : href}
+    {target}
+    {rel}
+    {download}
     class="button {variant} {size} {className}"
     class:disabled={isDisabled}
     class:full-width={fullWidth}

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

@@ -5,7 +5,7 @@
  * renders as an anchor tag. Otherwise renders as a button.
  */
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import type { ButtonSize, ButtonVariant } from '../../types-generic';
 /** Props for Button component */
 export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
@@ -27,6 +27,15 @@ export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'href'> {
      * own CSS (issue #1589) — the base button styling still applies.
      */
     class?: string;
+    /**
+     * Anchor-mode attributes (link mode only, i.e. when `href` is set). The
+     * component already spreads these onto the rendered `<a>`; they are declared
+     * here so callers migrating an external `<a target="_blank" rel="...">` to
+     * Button (issue #1589) keep them type-checked. Ignored in button mode.
+     */
+    target?: HTMLAnchorAttributes['target'];
+    rel?: HTMLAnchorAttributes['rel'];
+    download?: HTMLAnchorAttributes['download'];
 }
 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;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiFD,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,EACV,oBAAoB,EACpB,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;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;CAC7C;AAuFD,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

@@ -83,6 +83,36 @@ describe('Button', () => {
         expect(link).toHaveClass('nav-link');
         expect(link).toHaveClass('button');
     });
+    it('passes target/rel through to the anchor in link mode (#1589)', () => {
+        // External links migrated from `<a target="_blank" rel="...">` to Button
+        // must keep their new-tab + opener-isolation semantics on the rendered <a>.
+        render(Button, {
+            props: {
+                children: textSnippet('Open'),
+                href: 'https://example.com',
+                target: '_blank',
+                rel: 'noreferrer',
+            },
+        });
+        const link = screen.getByRole('link', { name: 'Open' });
+        expect(link).toHaveAttribute('target', '_blank');
+        expect(link).toHaveAttribute('rel', 'noreferrer');
+    });
+    it('drops anchor-only attrs in button mode (no invalid <button target>) (#1608)', () => {
+        // In button mode the anchor-only props must NOT reach the <button> — they
+        // are pulled out of `rest` so the runtime matches the "ignored in button
+        // mode" doc and never emits invalid HTML.
+        render(Button, {
+            props: {
+                children: textSnippet('Save'),
+                target: '_blank',
+                rel: 'noreferrer',
+            },
+        });
+        const button = screen.getByRole('button', { name: 'Save' });
+        expect(button).not.toHaveAttribute('target');
+        expect(button).not.toHaveAttribute('rel');
+    });
     it('is not navigable when disabled in link mode', async () => {
         const { container } = render(Button, {
             props: { children: textSnippet('Home'), href: '/home', disabled: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.34.1",
+  "version": "0.34.3",
   "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.34.1"
+    "@happyvertical/smrt-types": "0.34.3"
   },
   "peerDependencies": {
     "svelte": "^5.18.2"