@neovici/cosmoz-button 1.1.0 → 1.1.1

package/dist/cosmoz-button.d.ts

@@ -8,6 +8,10 @@ export interface CosmozButtonElement extends HTMLElement {
     'full-width': boolean;
     type: ButtonType;
     value: string | null;
+    href: string | null;
+    target: string | null;
+    rel: string | null;
+    download: string | null;
 }
 /**
  * A customizable button component using Untitled UI design tokens.
@@ -20,12 +24,16 @@ export interface CosmozButtonElement extends HTMLElement {
  * @attr {boolean} full-width - Makes the button 100% width
  * @attr {string} type - Button type: button (default), submit, reset
  * @attr {string} value - Value associated with the button (optional)
+ * @attr {string} href - When present, renders as an anchor link instead of a button
+ * @attr {string} target - Target attribute for the anchor (only with href)
+ * @attr {string} rel - Rel attribute for the anchor (only with href)
+ * @attr {string} download - Download attribute for the anchor (only with href)
  *
  * @slot - Default slot for button text content
  * @slot prefix - Slot for prefix icon (before text)
  * @slot suffix - Slot for suffix icon (after text)
  *
- * @csspart button - The native button element
+ * @csspart button - The native button or anchor element
  */
 declare const CosmozButton: (host: CosmozButtonElement) => import("lit-html").TemplateResult<1>;
 export { CosmozButton };

package/dist/cosmoz-button.js

@@ -1,5 +1,7 @@
 import { normalize } from '@neovici/cosmoz-tokens/normalize';
 import { component, html, useEffect } from '@pionjs/pion';
+import { nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { styles } from './styles';
 const observedAttributes = [
     'variant',
@@ -8,6 +10,10 @@ const observedAttributes = [
     'full-width',
     'type',
     'value',
+    'href',
+    'target',
+    'rel',
+    'download',
 ];
 /**
  * A customizable button component using Untitled UI design tokens.
@@ -20,16 +26,21 @@ const observedAttributes = [
  * @attr {boolean} full-width - Makes the button 100% width
  * @attr {string} type - Button type: button (default), submit, reset
  * @attr {string} value - Value associated with the button (optional)
+ * @attr {string} href - When present, renders as an anchor link instead of a button
+ * @attr {string} target - Target attribute for the anchor (only with href)
+ * @attr {string} rel - Rel attribute for the anchor (only with href)
+ * @attr {string} download - Download attribute for the anchor (only with href)
  *
  * @slot - Default slot for button text content
  * @slot prefix - Slot for prefix icon (before text)
  * @slot suffix - Slot for suffix icon (after text)
  *
- * @csspart button - The native button element
+ * @csspart button - The native button or anchor element
  */
 const CosmozButton = (host) => {
     const disabled = host.hasAttribute('disabled');
     const type = host.getAttribute('type') || 'button';
+    const href = host.getAttribute('href');
     useEffect(() => {
         const handler = (e) => {
             if (host.hasAttribute('disabled'))
@@ -38,11 +49,31 @@ const CosmozButton = (host) => {
         host.addEventListener('click', handler, { capture: true });
         return () => host.removeEventListener('click', handler, { capture: true });
     }, []);
+    const content = html `
+		<slot name="prefix"></slot>
+		<slot></slot>
+		<slot name="suffix"></slot>
+	`;
+    if (href != null) {
+        const target = host.getAttribute('target');
+        const rel = host.getAttribute('rel');
+        const download = host.getAttribute('download');
+        return html `
+			<a
+				href=${href}
+				class="button"
+				part="button"
+				aria-disabled=${disabled ? 'true' : nothing}
+				target=${ifDefined(target)}
+				rel=${ifDefined(rel)}
+				download=${ifDefined(download)}
+				>${content}</a
+			>
+		`;
+    }
     return html `
 		<button type=${type} class="button" ?disabled=${disabled} part="button">
-			<slot name="prefix"></slot>
-			<slot></slot>
-			<slot name="suffix"></slot>
+			${content}
 		</button>
 	`;
 };

package/dist/styles.js

@@ -69,6 +69,9 @@ export const styles = css `
 			box-shadow 0.15s ease;
 		width: 100%;
 		white-space: nowrap;
+		border: none;
+		background: none;
+		text-align: center;
 
 		/* Medium (md) - default size */
 		height: 40px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-button",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A customizable button web component built with Untitled UI design tokens",
   "keywords": [
     "web-components",
@@ -35,19 +35,8 @@
     "storybook:build": "storybook build",
     "storybook:deploy": "storybook-to-ghpages",
     "storybook:preview": "npm run storybook:build && http-server ./storybook-static/ --silent",
-    "prepare": "husky"
-  },
-  "release": {
-    "plugins": [
-      "@semantic-release/commit-analyzer",
-      "@semantic-release/release-notes-generator",
-      "@semantic-release/changelog",
-      "@semantic-release/github",
-      "@semantic-release/npm",
-      "@semantic-release/git"
-    ],
-    "branch": "main",
-    "preset": "conventionalcommits"
+    "prepare": "husky",
+    "changeset": "changeset"
   },
   "publishConfig": {
     "access": "public"
@@ -63,17 +52,16 @@
   "dependencies": {
     "@neovici/cosmoz-tokens": "^3.2.0",
     "@pionjs/pion": "^2.5.2",
-    "@playwright/test": "^1.60.0",
     "lit-html": "^3.3.1"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.27.0",
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.4.1",
     "@neovici/cfg": "^2.13.0",
     "@neovici/testing": "^2.0.0",
     "@open-wc/testing": "^4.0.0",
-    "@semantic-release/changelog": "^6.0.0",
-    "@semantic-release/git": "^10.0.0",
+    "@playwright/test": "1.60.0",
     "@storybook/addon-docs": "^10.2.3",
     "@storybook/web-components-vite": "^10.0.0",
     "@types/mocha": "^10.0.6",
@@ -83,7 +71,6 @@
     "http-server": "^14.1.1",
     "husky": "^9.0.0",
     "lint-staged": "^16.2.7",
-    "semantic-release": "^25.0.3",
     "sinon": "^21.0.1",
     "storybook": "^10.2.4",
     "typescript": "^5.4.3"