@kumori/aurora-wui-components 0.0.136 → 0.0.137

package/dist/components/axebow-button/axebow-button.d.ts

@@ -15,8 +15,20 @@ export declare class AxebowButton extends LitElement {
     value?: string;
     fixedWidth?: string;
     fixedHeight?: string;
+    paddingTop?: string;
+    paddingRight?: string;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    /**
+     * 'simple' keeps each variant's own hover treatment (the default,
+     * unchanged). 'border' switches to the boxed hover look shared by
+     * axebow-more-actions: an anti-flash-white background with rounded
+     * corners, regardless of variant.
+     */
+    hoverStyle: 'simple' | 'border';
     constructor();
     updated(changed: Map<string, unknown>): void;
+    private _syncPaddingVar;
     private _guardDisabledClick;
     static styles: import('lit').CSSResult[];
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/axebow-button/axebow-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-button.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-button/axebow-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIvD,OAAO,2DAA2D,CAAC;AAEnE,qBACa,YAAa,SAAQ,UAAU;IACC,OAAO,EAC9C,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAa;IAEoB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC7C,OAAO,UAAS;IAChB,IAAI,UAAS;IACb,MAAM,UAAS;IACZ,QAAQ,UAAS;IACpB,OAAO,UAAS;IAChB,KAAK,UAAS;IAC9B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;;IAOjD,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWrC,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM,CAAC,MAAM,4BAwIX;IAEF,MAAM;CAwBP"}
+{"version":3,"file":"axebow-button.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-button/axebow-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAkB,MAAM,KAAK,CAAC;AAIvD,OAAO,2DAA2D,CAAC;AAEnE,qBACa,YAAa,SAAQ,UAAU;IACC,OAAO,EAC9C,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,CAAa;IAEoB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC7C,OAAO,UAAS;IAChB,IAAI,UAAS;IACb,MAAM,UAAS;IACZ,QAAQ,UAAS;IACpB,OAAO,UAAS;IAChB,KAAK,UAAS;IAC9B,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD;;;;;OAKG;IACyB,UAAU,EAAE,QAAQ,GAAG,QAAQ,CAAY;;IAOvE,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAerC,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,mBAAmB,CAKzB;IAEF,MAAM,CAAC,MAAM,4BAkLX;IAEF,MAAM;CAyBP"}

package/dist/components/cards/parts/axebow-card-action-banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-card-action-banner.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-action-banner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,kCAAkC,CAAC;AAE1C,qBACa,sBAAuB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BAWX;IAE0B,KAAK,SAAkB;IACtB,WAAW,UAAS;IACrB,eAAe,SAAM;IAEjD,MAAM;IAiBN,OAAO,CAAC,QAAQ;CAGjB"}
+{"version":3,"file":"axebow-card-action-banner.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-action-banner.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,kCAAkC,CAAC;AAE1C,qBACa,sBAAuB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,4BASX;IAE0B,KAAK,SAAkB;IACtB,WAAW,UAAS;IACrB,eAAe,SAAM;IAEjD,MAAM;IAwBN,OAAO,CAAC,QAAQ;CAGjB"}

package/dist/index.js

@@ -976,6 +976,7 @@ var AxebowButton = class AxebowButton extends LitElement {
 		this.loading = false;
 		this.caret = false;
 		this.type = "button";
+		this.hoverStyle = "simple";
 		this._guardDisabledClick = (event) => {
 			if (this.disabled || this.loading) {
 				event.preventDefault();
@@ -989,6 +990,16 @@ var AxebowButton = class AxebowButton extends LitElement {
 		else this.style.removeProperty("--axebow-button-width");
 		if (changed.has("fixedHeight")) if (this.fixedHeight) this.style.setProperty("--axebow-button-height", this.fixedHeight);
 		else this.style.removeProperty("--axebow-button-height");
+		this._syncPaddingVar(changed, "paddingTop", "--axebow-button-padding-top");
+		this._syncPaddingVar(changed, "paddingRight", "--axebow-button-padding-right");
+		this._syncPaddingVar(changed, "paddingBottom", "--axebow-button-padding-bottom");
+		this._syncPaddingVar(changed, "paddingLeft", "--axebow-button-padding-left");
+	}
+	_syncPaddingVar(changed, prop, cssVar) {
+		if (!changed.has(prop)) return;
+		const value = this[prop];
+		if (value) this.style.setProperty(cssVar, value);
+		else this.style.removeProperty(cssVar);
 	}
 	static {
 		this.styles = [unsafeCSS(tailwind_default), css`
@@ -1006,6 +1017,32 @@ var AxebowButton = class AxebowButton extends LitElement {
         min-width: var(--axebow-button-width, 9.375rem);
       }
 
+      /**
+       * The label part carries sl-button's own left/right spacing
+       * (top/bottom are always 0 natively). Each size's fallback points at
+       * shoelace's own token for that size, so unconfigured buttons render
+       * byte-for-byte as before - only an explicit padding* property
+       * changes anything.
+       */
+      sl-button[size='small']::part(label) {
+        padding-top: var(--axebow-button-padding-top, 0);
+        padding-right: var(--axebow-button-padding-right, var(--sl-spacing-small));
+        padding-bottom: var(--axebow-button-padding-bottom, 0);
+        padding-left: var(--axebow-button-padding-left, var(--sl-spacing-small));
+      }
+      sl-button[size='medium']::part(label) {
+        padding-top: var(--axebow-button-padding-top, 0);
+        padding-right: var(--axebow-button-padding-right, var(--sl-spacing-medium));
+        padding-bottom: var(--axebow-button-padding-bottom, 0);
+        padding-left: var(--axebow-button-padding-left, var(--sl-spacing-medium));
+      }
+      sl-button[size='large']::part(label) {
+        padding-top: var(--axebow-button-padding-top, 0);
+        padding-right: var(--axebow-button-padding-right, var(--sl-spacing-large));
+        padding-bottom: var(--axebow-button-padding-bottom, 0);
+        padding-left: var(--axebow-button-padding-left, var(--sl-spacing-large));
+      }
+
       /**
        * Hover is always a plain recolor to axebow-gray, no matter the
        * variant - nothing else about the button's structure changes.
@@ -1124,12 +1161,29 @@ var AxebowButton = class AxebowButton extends LitElement {
         border-color: var(--axebow-gray);
         outline-color: var(--axebow-gray);
       }
+
+      /**
+       * Boxed hover look shared with axebow-more-actions, opt-in via
+       * hoverStyle="border". Declared last so it wins over every
+       * variant's own hover rule above, regardless of which variant
+       * it's combined with.
+       */
+      sl-button[hoverstyle='border']:hover::part(base) {
+        background-color: var(--axebow-anti-flash-white);
+        border-radius: 0.5rem;
+        outline-color: transparent;
+        border-color: transparent;
+      }
+      sl-button[hoverstyle='border']:hover::part(label) {
+        color: var(--axebow-gray);
+      }
     `];
 	}
 	render() {
 		return html`
       <sl-button
         exportparts="base, label, prefix, suffix, caret"
+        hoverstyle=${this.hoverStyle}
         variant=${this.variant}
         size=${this.size}
         ?outline=${this.outline}
@@ -1190,6 +1244,11 @@ __decorate([property({ type: String })], AxebowButton.prototype, "name", void 0)
 __decorate([property({ type: String })], AxebowButton.prototype, "value", void 0);
 __decorate([property({ type: String })], AxebowButton.prototype, "fixedWidth", void 0);
 __decorate([property({ type: String })], AxebowButton.prototype, "fixedHeight", void 0);
+__decorate([property({ type: String })], AxebowButton.prototype, "paddingTop", void 0);
+__decorate([property({ type: String })], AxebowButton.prototype, "paddingRight", void 0);
+__decorate([property({ type: String })], AxebowButton.prototype, "paddingBottom", void 0);
+__decorate([property({ type: String })], AxebowButton.prototype, "paddingLeft", void 0);
+__decorate([property({ type: String })], AxebowButton.prototype, "hoverStyle", void 0);
 AxebowButton = __decorate([customElement("axebow-button")], AxebowButton);
 //#endregion
 //#region src/components/axebow-search/axebow-search.ts
@@ -3011,9 +3070,7 @@ var AxebowCardActionBanner = class AxebowCardActionBanner extends LitElement {
       :host { display: block; }
       .tertiary-bg { background-color: color-mix(in srgb, var(--axebow-tertiary) 10%, white); }
       axebow-button::part(label) { color: var(--axebow-tertiary); font-weight: 600; display: flex; align-items: center; gap: 2px; }
-      axebow-button::part(base) { padding: 0; height: auto; min-height: unset; background-color: transparent; cursor: pointer; }
-      axebow-button:hover::part(base) { background-color: var(--axebow-base); border-radius: 0.375rem; }
-      axebow-button:hover::part(label) { color: var(--axebow-gray); }
+      axebow-button::part(base) { height: auto; min-height: unset; background-color: transparent; cursor: pointer; }
       axebow-icon { display: inline-flex; align-items: center; line-height: 1; }
     `];
 	}
@@ -3023,7 +3080,14 @@ var AxebowCardActionBanner = class AxebowCardActionBanner extends LitElement {
         class="${this.isPlainRole ? "" : "tertiary-bg"} flex items-center justify-end gap-1 w-87 h-6.5 box-border px-3 text-sm text-center overflow-hidden"
       >
         ${this.isPlainRole ? html`<span class="text-(--axebow-gray)">${this.notAllowedLabel}</span>` : html`
-              <axebow-button variant="text" size="small" @click=${this._onClick}>
+              <axebow-button
+                variant="text"
+                size="small"
+                hoverStyle="border"
+                paddingLeft="0"
+                paddingRight="0"
+                @click=${this._onClick}
+              >
                 ${this.label}
                 <axebow-icon iconName="arrow_forward" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
               </axebow-button>