@kumori/aurora-wui-components 0.0.178 → 0.0.180

package/dist/components/axebow-input/axebow-numeric-input.d.ts

@@ -5,9 +5,10 @@ export declare class AxebowNumericInput extends AxebowInputBase {
     max: number;
     min: number;
     integerOnly: boolean;
-    /** Opt-in exact field width/height (e.g. '6.1875rem' / '2.5rem'). Left
-     *  unset, every existing caller keeps the field's previous default sizing
-     *  unchanged. */
+    /** Opt-in exact size for the field itself - the sl-input box, not the
+     *  label/description column above it (e.g. fixedWidth '6.1875rem' for a
+     *  99px-wide field, fixedHeight '2.5rem' for 40px). Left unset, every
+     *  existing caller keeps the field's previous default sizing unchanged. */
     fixedWidth?: string;
     fixedHeight?: string;
     /** Adds a 22x38 +/- stepper flush against the field's right border,

package/dist/components/axebow-input/axebow-numeric-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-numeric-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-numeric-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,yDAAyD,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,qBACa,kBAAmB,SAAQ,eAAe;IACrD,MAAM,CAAC,MAAM,4BA+CX;IAE0B,GAAG,SAA2B;IAC9B,GAAG,SAAK;IACP,WAAW,UAAS;IAEjD;;qBAEiB;IACW,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD;;uCAEmC;IACN,WAAW,UAAS;IACrB,UAAU,SAAK;IAE3C,OAAO,CAAC,OAAO,EAAE,cAAc;IAmB/B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAgB/B,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa;IAMxC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;IA2BtB,MAAM;CAoBP"}
+{"version":3,"file":"axebow-numeric-input.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-input/axebow-numeric-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,yDAAyD,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,qBACa,kBAAmB,SAAQ,eAAe;IACrD,MAAM,CAAC,MAAM,4BAqEX;IAE0B,GAAG,SAA2B;IAC9B,GAAG,SAAK;IACP,WAAW,UAAS;IAEjD;;;+EAG2E;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAEjD;;uCAEmC;IACN,WAAW,UAAS;IACrB,UAAU,SAAK;IAE3C,OAAO,CAAC,OAAO,EAAE,cAAc;IAyB/B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAgB/B,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa;IAMxC,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;IA2BtB,MAAM;CAoBP"}

package/dist/index.js

@@ -1529,11 +1529,24 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
         display: block;
         width: 100%;
       }
-      /* Both guarded by their own host class - absent unless the matching
-         property is set - so neither ever touches sl-input's own default
-         sizing/padding for every existing caller that doesn't opt in. */
+      /* All three guarded by their own host class - absent unless the
+         matching property is set - so none ever touch sl-input's own
+         default sizing/padding for every existing caller that doesn't opt
+         in. fixedWidth only constrains the field itself (not the host, so
+         the label above keeps its full width and doesn't wrap).
+         !important is needed on the sizing declarations - Shoelace sets its
+         own height internally off --sl-input-height-medium (not just the
+         exposed 'base' part), so both are overridden together to reliably
+         win regardless of which one actually drives the rendered size. */
+      :host(.axebow-fixed-width) sl-input {
+        width: var(--axebow-input-width) !important;
+      }
+      :host(.axebow-fixed-height) sl-input {
+        --sl-input-height-medium: var(--axebow-input-height);
+      }
       :host(.axebow-fixed-height) sl-input::part(base) {
-        height: var(--axebow-input-height);
+        height: var(--axebow-input-height) !important;
+        box-sizing: border-box;
       }
       :host(.axebow-has-stepper) sl-input::part(base) {
         padding-right: 0;
@@ -1544,26 +1557,35 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
         padding: 0;
       }
 
+      /* Only a left border (separating the stepper from the typed number)
+         and a divider between the two buttons - the top/right/bottom edges
+         coincide with sl-input's own border, so drawing our own there
+         would just double it up. */
       .axebow-numeric-stepper {
         display: flex;
         flex-direction: column;
-        width: 1.375rem;
-        height: 2.375rem;
+        width: 1.375rem !important;
+        height: 2.375rem !important;
+        border-left: 1px solid var(--axebow-gray);
         border-radius: 0 var(--sl-input-border-radius-medium, 0.25rem) var(--sl-input-border-radius-medium, 0.25rem) 0;
         overflow: hidden;
       }
       .axebow-numeric-stepper-btn {
-        flex: 1;
+        flex: 1 1 0 !important;
         display: flex;
         align-items: center;
         justify-content: center;
+        min-height: 0;
         min-width: 0;
-        border: 1px solid var(--axebow-gray);
+        border: none;
         background: transparent;
         padding: 0;
         margin: 0;
         cursor: pointer;
       }
+      .axebow-numeric-stepper-btn:first-child {
+        border-bottom: 1px solid var(--axebow-gray);
+      }
       .axebow-numeric-stepper-btn:disabled {
         cursor: not-allowed;
         opacity: 0.5;
@@ -1572,7 +1594,13 @@ var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
 	}
 	updated(changed) {
 		super.updated(changed);
-		if (changed.has("fixedWidth")) this.style.width = this.fixedWidth || "";
+		if (changed.has("fixedWidth")) if (this.fixedWidth) {
+			this.style.setProperty("--axebow-input-width", this.fixedWidth);
+			this.classList.add("axebow-fixed-width");
+		} else {
+			this.style.removeProperty("--axebow-input-width");
+			this.classList.remove("axebow-fixed-width");
+		}
 		if (changed.has("fixedHeight")) if (this.fixedHeight) {
 			this.style.setProperty("--axebow-input-height", this.fixedHeight);
 			this.classList.add("axebow-fixed-height");