@kumori/aurora-wui-components 0.0.136 → 0.0.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,8 +15,20 @@ export declare class AxebowButton extends LitElement {
15
15
  value?: string;
16
16
  fixedWidth?: string;
17
17
  fixedHeight?: string;
18
+ paddingTop?: string;
19
+ paddingRight?: string;
20
+ paddingBottom?: string;
21
+ paddingLeft?: string;
22
+ /**
23
+ * 'simple' keeps each variant's own hover treatment (the default,
24
+ * unchanged). 'border' switches to the boxed hover look shared by
25
+ * axebow-more-actions: an anti-flash-white background with rounded
26
+ * corners, regardless of variant.
27
+ */
28
+ hoverStyle: 'simple' | 'border';
18
29
  constructor();
19
30
  updated(changed: Map<string, unknown>): void;
31
+ private _syncPaddingVar;
20
32
  private _guardDisabledClick;
21
33
  static styles: import('lit').CSSResult[];
22
34
  render(): import('lit-html').TemplateResult<1>;
@@ -1 +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"}
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;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"}
@@ -1 +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"}
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;IAkBN,OAAO,CAAC,QAAQ;CAGjB"}
@@ -1 +1 @@
1
- {"version":3,"file":"axebow-card-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-footer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,oDAAoD,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAEjC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,4BAGX;IAE2B,UAAU,UAAS;IACnB,WAAW,UAAS;IACrB,UAAU,SAAM;IAChB,aAAa,SAAM;IACnB,WAAW,SAAM;IAChB,WAAW,UAAS;IACpB,eAAe,UAAS;IAC1B,kBAAkB,EAAE,cAAc,EAAE,CAAM;IACzC,UAAU,SAAW;IACrB,gBAAgB,SAAU;IAC1B,WAAW,SAAM;IAE7C,MAAM;IAiCN,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,SAAS;CAGlB"}
1
+ {"version":3,"file":"axebow-card-footer.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/parts/axebow-card-footer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,oDAAoD,CAAC;AAC5D,OAAO,yBAAyB,CAAC;AAEjC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,4BAGX;IAE2B,UAAU,UAAS;IACnB,WAAW,UAAS;IACrB,UAAU,SAAM;IAChB,aAAa,SAAM;IACnB,WAAW,SAAM;IAChB,WAAW,UAAS;IACpB,eAAe,UAAS;IAC1B,kBAAkB,EAAE,cAAc,EAAE,CAAM;IACzC,UAAU,SAAW;IACrB,gBAAgB,SAAU;IAC1B,WAAW,SAAM;IAE7C,MAAM;IAyCN,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,SAAS;CAGlB"}
package/dist/index.js CHANGED
@@ -976,6 +976,7 @@ var AxebowButton = class AxebowButton extends LitElement {
976
976
  this.loading = false;
977
977
  this.caret = false;
978
978
  this.type = "button";
979
+ this.hoverStyle = "simple";
979
980
  this._guardDisabledClick = (event) => {
980
981
  if (this.disabled || this.loading) {
981
982
  event.preventDefault();
@@ -989,6 +990,16 @@ var AxebowButton = class AxebowButton extends LitElement {
989
990
  else this.style.removeProperty("--axebow-button-width");
990
991
  if (changed.has("fixedHeight")) if (this.fixedHeight) this.style.setProperty("--axebow-button-height", this.fixedHeight);
991
992
  else this.style.removeProperty("--axebow-button-height");
993
+ this._syncPaddingVar(changed, "paddingTop", "--axebow-button-padding-top");
994
+ this._syncPaddingVar(changed, "paddingRight", "--axebow-button-padding-right");
995
+ this._syncPaddingVar(changed, "paddingBottom", "--axebow-button-padding-bottom");
996
+ this._syncPaddingVar(changed, "paddingLeft", "--axebow-button-padding-left");
997
+ }
998
+ _syncPaddingVar(changed, prop, cssVar) {
999
+ if (!changed.has(prop)) return;
1000
+ const value = this[prop];
1001
+ if (value) this.style.setProperty(cssVar, value);
1002
+ else this.style.removeProperty(cssVar);
992
1003
  }
993
1004
  static {
994
1005
  this.styles = [unsafeCSS(tailwind_default), css`
@@ -1006,6 +1017,32 @@ var AxebowButton = class AxebowButton extends LitElement {
1006
1017
  min-width: var(--axebow-button-width, 9.375rem);
1007
1018
  }
1008
1019
 
1020
+ /**
1021
+ * The label part carries sl-button's own left/right spacing
1022
+ * (top/bottom are always 0 natively). Each size's fallback points at
1023
+ * shoelace's own token for that size, so unconfigured buttons render
1024
+ * byte-for-byte as before - only an explicit padding* property
1025
+ * changes anything.
1026
+ */
1027
+ sl-button[size='small']::part(label) {
1028
+ padding-top: var(--axebow-button-padding-top, 0);
1029
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-small));
1030
+ padding-bottom: var(--axebow-button-padding-bottom, 0);
1031
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-small));
1032
+ }
1033
+ sl-button[size='medium']::part(label) {
1034
+ padding-top: var(--axebow-button-padding-top, 0);
1035
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-medium));
1036
+ padding-bottom: var(--axebow-button-padding-bottom, 0);
1037
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-medium));
1038
+ }
1039
+ sl-button[size='large']::part(label) {
1040
+ padding-top: var(--axebow-button-padding-top, 0);
1041
+ padding-right: var(--axebow-button-padding-right, var(--sl-spacing-large));
1042
+ padding-bottom: var(--axebow-button-padding-bottom, 0);
1043
+ padding-left: var(--axebow-button-padding-left, var(--sl-spacing-large));
1044
+ }
1045
+
1009
1046
  /**
1010
1047
  * Hover is always a plain recolor to axebow-gray, no matter the
1011
1048
  * variant - nothing else about the button's structure changes.
@@ -1124,12 +1161,29 @@ var AxebowButton = class AxebowButton extends LitElement {
1124
1161
  border-color: var(--axebow-gray);
1125
1162
  outline-color: var(--axebow-gray);
1126
1163
  }
1164
+
1165
+ /**
1166
+ * Boxed hover look shared with axebow-more-actions, opt-in via
1167
+ * hoverStyle="border". Declared last so it wins over every
1168
+ * variant's own hover rule above, regardless of which variant
1169
+ * it's combined with.
1170
+ */
1171
+ sl-button[hoverstyle='border']:hover::part(base) {
1172
+ background-color: var(--axebow-anti-flash-white);
1173
+ border-radius: 0.5rem;
1174
+ outline-color: transparent;
1175
+ border-color: transparent;
1176
+ }
1177
+ sl-button[hoverstyle='border']:hover::part(label) {
1178
+ color: var(--axebow-gray);
1179
+ }
1127
1180
  `];
1128
1181
  }
1129
1182
  render() {
1130
1183
  return html`
1131
1184
  <sl-button
1132
1185
  exportparts="base, label, prefix, suffix, caret"
1186
+ hoverstyle=${this.hoverStyle}
1133
1187
  variant=${this.variant}
1134
1188
  size=${this.size}
1135
1189
  ?outline=${this.outline}
@@ -1190,6 +1244,11 @@ __decorate([property({ type: String })], AxebowButton.prototype, "name", void 0)
1190
1244
  __decorate([property({ type: String })], AxebowButton.prototype, "value", void 0);
1191
1245
  __decorate([property({ type: String })], AxebowButton.prototype, "fixedWidth", void 0);
1192
1246
  __decorate([property({ type: String })], AxebowButton.prototype, "fixedHeight", void 0);
1247
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingTop", void 0);
1248
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingRight", void 0);
1249
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingBottom", void 0);
1250
+ __decorate([property({ type: String })], AxebowButton.prototype, "paddingLeft", void 0);
1251
+ __decorate([property({ type: String })], AxebowButton.prototype, "hoverStyle", void 0);
1193
1252
  AxebowButton = __decorate([customElement("axebow-button")], AxebowButton);
1194
1253
  //#endregion
1195
1254
  //#region src/components/axebow-search/axebow-search.ts
@@ -3010,20 +3069,21 @@ var AxebowCardActionBanner = class AxebowCardActionBanner extends LitElement {
3010
3069
  this.styles = [unsafeCSS(tailwind_default), css`
3011
3070
  :host { display: block; }
3012
3071
  .tertiary-bg { background-color: color-mix(in srgb, var(--axebow-tertiary) 10%, white); }
3072
+ .clickable { cursor: pointer; }
3073
+ .clickable:hover { background-color: var(--axebow-base); --axebow-tertiary: var(--axebow-gray); }
3013
3074
  axebow-button::part(label) { color: var(--axebow-tertiary); font-weight: 600; display: flex; align-items: center; gap: 2px; }
3014
- axebow-button::part(base) { padding: 0; height: auto; min-height: unset; background-color: transparent; cursor: pointer; }
3015
- axebow-button:hover::part(base) { background-color: var(--axebow-base); border-radius: 0.375rem; }
3016
- axebow-button:hover::part(label) { color: var(--axebow-gray); }
3075
+ axebow-button::part(base) { padding: 0; height: auto; min-height: unset; pointer-events: none; background-color: transparent; }
3017
3076
  axebow-icon { display: inline-flex; align-items: center; line-height: 1; }
3018
3077
  `];
3019
3078
  }
3020
3079
  render() {
3021
3080
  return html`
3022
3081
  <div
3023
- 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"
3082
+ class="${this.isPlainRole ? "" : "tertiary-bg clickable"} flex items-center justify-center gap-1 w-87 h-6.5 box-border px-3 text-sm text-center overflow-hidden"
3083
+ @click=${this.isPlainRole ? void 0 : this._onClick}
3024
3084
  >
3025
3085
  ${this.isPlainRole ? html`<span class="text-(--axebow-gray)">${this.notAllowedLabel}</span>` : html`
3026
- <axebow-button variant="text" size="small" @click=${this._onClick}>
3086
+ <axebow-button variant="text" size="small">
3027
3087
  ${this.label}
3028
3088
  <axebow-icon iconName="arrow_forward" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
3029
3089
  </axebow-button>
@@ -3119,7 +3179,15 @@ var AxebowCardFooter = class AxebowCardFooter extends LitElement {
3119
3179
  .moreActionsLabel=${this.moreActionsLabel}
3120
3180
  @toggled=${this._onToggled}
3121
3181
  ></axebow-more-actions>
3122
- ` : showAction ? html`<axebow-button variant="text" size="medium" @click=${this._onAction}>${this.actionLabel}</axebow-button>` : ""}
3182
+ ` : showAction ? html`<axebow-button
3183
+ variant="text"
3184
+ size="medium"
3185
+ hoverStyle="border"
3186
+ paddingLeft="0.5rem"
3187
+ paddingRight="0.5rem"
3188
+ @click=${this._onAction}
3189
+ >${this.actionLabel}</axebow-button
3190
+ >` : ""}
3123
3191
  </div>
3124
3192
  `;
3125
3193
  }