[dapp-kit-next]: expose ::part(trigger) for connect button styling

.changeset/tiny-planets-laugh.md

@@ -0,0 +1,5 @@
+---
+'@mysten/dapp-kit-core': minor
+---
+
+Expose a styleable "trigger" part for more custom styling needs on the connect button

package.json

@@ -20,6 +20,8 @@
 	"pnpm": {
 		"overrides": {
 			"axios": "^1.13.5",
+			"markdown-it@>=13.0.0 <14.1.1": ">=14.1.1",
+			"hono@<4.11.10": ">=4.11.10",
 			"minimatch": ">=10.2.1"
 		}
 	},

packages/dapp-kit-next/packages/dapp-kit-core/.storybook/main.ts

@@ -1,18 +1,14 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 
-import { join, dirname } from 'path';
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
 
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
 function getAbsolutePath(value: string): any {
-	return dirname(require.resolve(join(value, 'package.json')));
+	return dirname(fileURLToPath(import.meta.resolve(value + '/package.json')));
 }
 
 const config: StorybookConfig = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-	addons: [getAbsolutePath('@storybook/addon-essentials')],
 	framework: {
 		name: getAbsolutePath('@storybook/web-components-vite'),
 		options: {},

packages/dapp-kit-next/packages/dapp-kit-core/package.json

@@ -56,8 +56,6 @@
 	},
 	"devDependencies": {
 		"@mysten/sui": "workspace:^",
-		"@storybook/addon-essentials": "^8.6.14",
-		"@storybook/blocks": "^8.6.14",
 		"@storybook/web-components": "^10.1.11",
 		"@storybook/web-components-vite": "^10.1.11",
 		"storybook": "^10.1.11",

packages/dapp-kit-next/packages/dapp-kit-core/src/web/dapp-kit-connect-button.stories.ts

@@ -71,6 +71,25 @@ export const WithCustomTheme: StoryObj<DAppKitConnectButton> = {
 	`,
 };
 
+export const WithCustomTriggerPart: StoryObj<DAppKitConnectButton> = {
+	render: () => html`
+		<style>
+			.custom-part-demo::part(trigger) {
+				height: 56px;
+				padding: 12px 32px;
+				border-radius: 999px;
+				background-color: #e63946;
+				color: #f1faee;
+				font-size: 18px;
+				letter-spacing: 0.5px;
+			}
+		</style>
+		<mysten-dapp-kit-connect-button class="custom-part-demo" .instance=${dAppKit}>
+			Connect
+		</mysten-dapp-kit-connect-button>
+	`,
+};
+
 export const WithRandomSort: StoryObj<DAppKitConnectButton> = {
 	args: {
 		modalOptions: {

packages/dapp-kit-next/packages/dapp-kit-core/src/web/dapp-kit-connect-button.ts

@@ -43,6 +43,8 @@ import type { AccountSelectedEvent } from './internal/connected-account-menu-ite
  * @cssprop --font-sans - Font family used for text content.
  * @cssprop --font-weight-medium - Medium font weight for text (typically used for buttons and interactive elements).
  * @cssprop --font-weight-semibold - Semibold font weight for text (typically used for headings or emphasized text).
+ *
+ * @csspart trigger - The underlying button element. Use `::part(trigger)` to customize sizing, padding, border-radius, etc.
  */
 @customElement('mysten-dapp-kit-connect-button')
 export class DAppKitConnectButton extends ScopedRegistryHost(LitElement) {
@@ -80,6 +82,7 @@ export class DAppKitConnectButton extends ScopedRegistryHost(LitElement) {
 
 		return connection.account
 			? html`<connected-account-menu
+					exportparts="trigger"
 					.connection=${connection}
 					.client=${client}
 					@account-selected=${(event: AccountSelectedEvent) => {
@@ -92,7 +95,7 @@ export class DAppKitConnectButton extends ScopedRegistryHost(LitElement) {
 						this.instance.connectWallet({ wallet: connection.wallet });
 					}}
 				></connected-account-menu>`
-			: html`<internal-button @click=${this.#openModal}>
+			: html`<internal-button exportparts="trigger" @click=${this.#openModal}>
 						<slot>Connect Wallet</slot>
 					</internal-button>
 					<mysten-dapp-kit-connect-modal

packages/dapp-kit-next/packages/dapp-kit-core/src/web/internal/button.ts

@@ -27,6 +27,7 @@ export class Button extends LitElement {
 		return this.href
 			? html`
 					<a
+						part="trigger"
 						href=${this.href}
 						?disabled=${this.disabled}
 						target="_blank"
@@ -38,6 +39,7 @@ export class Button extends LitElement {
 				`
 			: html`
 					<button
+						part="trigger"
 						type="button"
 						?disabled=${this.disabled}
 						class=${classMap({ button: true, [this.variant]: true })}

packages/dapp-kit-next/packages/dapp-kit-core/src/web/internal/connected-account-menu.ts

@@ -63,6 +63,7 @@ export class ConnectedAccountMenu extends ScopedRegistryHost(LitElement) {
 
 	override render() {
 		return html`<internal-button
+				exportparts="trigger"
 				id="menu-button"
 				aria-haspopup="true"
 				aria-controls="menu"