@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/cjs-dev/components/tag/daikin-tag.cjs

@@ -20,35 +20,53 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaWrapper = classVarianceAuthority.cva([
-  "flex",
-  "items-center",
-  "justify-between",
-  "rounded",
-  "overflow-hidden",
-  "size-full",
-  "gap-1",
-  "bg-(--dds-color-common-surface-secondary-default)"
-]);
+const cvaWrapper = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "rounded",
+    "overflow-hidden",
+    "size-full",
+    "gap-1",
+    "bg-(--bg-color-base)"
+  ],
+  {
+    variants: {
+      elevated: {
+        true: [
+          "shadow-[0px_1px_2px_1px_var(--dds-color-common-background-overlay)]"
+        ],
+        false: []
+      }
+    }
+  }
+);
 const cvaRemoveButton = classVarianceAuthority.cva([
   "mr-1",
+  "flex-none",
+  "relative",
   "w-6",
   "h-6",
   "flex",
-  "flex-none",
   "items-center",
   "justify-center",
   "rounded-full",
   "overflow-hidden",
-  "focus-visible:outline-solid",
+  "focus-visible:outline",
   "focus-visible:outline-2",
+  "after:absolute",
+  "after:bg-transparent",
+  "after:size-6",
+  "after:top-1/2",
+  "after:left-1/2",
+  "after:-translate-x-1/2",
+  "after:-translate-y-1/2",
+  "after:rounded-full",
   "focus-visible:outline-ddt-color-common-border-focus",
-  "enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
-  "enabled:hover:[--color-primary:var(--dds-color-common-neutral-hover)]",
-  "enabled:active:[--color-primary:var(--dds-color-common-neutral-press)]",
-  "enabled:[--color-secondary:var(--dds-color-common-surface-secondary-default)]",
-  "enabled:hover:[--color-secondary:var(--dds-color-common-surface-secondary-hover)]",
-  "enabled:active:[--color-secondary:var(--dds-color-common-surface-secondary-press)]",
+  "enabled:[--color-primary:var(--dds-color-common-text-primary)]",
+  "enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-hover)]",
+  "enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-press)]",
   "text-(--color-primary)",
   "bg-(--color-secondary)"
 ]);
@@ -57,6 +75,7 @@ exports.DaikinTag = class DaikinTag extends ddsElement.DDSElement {
     super(...arguments);
     this.hideRemoveButton = false;
     this.tagAriaLabel = null;
+    this.elevated = false;
     this.removeButtonAriaLabel = null;
   }
   _handleRemoveClick(event) {
@@ -66,9 +85,10 @@ exports.DaikinTag = class DaikinTag extends ddsElement.DDSElement {
   render() {
     return lit.html`
       <div
+        part="tag"
         role="group"
         aria-label=${ifDefined_js.ifDefined(this.tagAriaLabel ?? void 0)}
-        class=${cvaWrapper()}
+        class=${cvaWrapper({ elevated: this.elevated })}
       >
         <span
           class="text-ddt-color-common-text-primary p-2 text-(length:--dds-font-size-350) natural-break"
@@ -82,7 +102,9 @@ exports.DaikinTag = class DaikinTag extends ddsElement.DDSElement {
                 aria-label=${ifDefined_js.ifDefined(this.removeButtonAriaLabel ?? "Remove")}
                 @click=${this._handleRemoveClick}
               >
-                <span class="icon-[daikin--close] size-6"></span>
+                <span
+                  class="icon-[daikin--close] text-(--color-primary) size-6 flex-none"
+                ></span>
               </button>
             `}
       </div>
@@ -103,6 +125,52 @@ exports.DaikinTag.styles = lit.css`
     :host {
       display: block;
       width: fit-content;
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-gray);
+    }
+
+    :host([color="gray"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-gray);
+    }
+    :host([color="red"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-red);
+    }
+    :host([color="blue"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-blue);
+    }
+    :host([color="yellow"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-yellow);
+    }
+    :host([color="green"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-green);
+    }
+    :host([color="orange"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-orange);
+    }
+    :host([color="purple"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-purple);
+    }
+
+    :host([elevated]),
+    :host([elevated][color="gray"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-gray);
+    }
+    :host([elevated][color="red"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-red);
+    }
+    :host([elevated][color="blue"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-blue);
+    }
+    :host([elevated][color="yellow"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-yellow);
+    }
+    :host([elevated][color="green"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-green);
+    }
+    :host([elevated][color="orange"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-orange);
+    }
+    :host([elevated][color="purple"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-purple);
     }
   `;
 __decorateClass([
@@ -111,6 +179,17 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, attribute: "tag-aria-label" })
 ], exports.DaikinTag.prototype, "tagAriaLabel", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "gray",
+    isAllowedValue: ddsProperty.oneOf(["gray", "red", "blue", "yellow", "green", "orange", "purple"])
+  })
+], exports.DaikinTag.prototype, "color", 2);
+__decorateClass([
+  ddsProperty.property({ type: Boolean, reflect: true })
+], exports.DaikinTag.prototype, "elevated", 2);
 __decorateClass([
   ddsProperty.property({
     type: String,

package/dist/cjs-dev/components/tag/daikin-tag.d.cts

@@ -4,6 +4,8 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * @fires remove - A custom event emitted when a user clicks the remove button.
  *
+ * @csspart tag - Targets the internal <span> element wrapping the tag. This is typically used to control the tag's styling and interactivity. For example, you can adjust spacing and customize the cursor appearance during dragging: daikin-tag::part(tag) { margin: -4px; padding: 4px; cursor: grab; } daikin-tag::part(tag):active { cursor: grabbing; }
+ *
  * @slot - A slot for the tag content.
  *
  * @example
@@ -26,6 +28,18 @@ export declare class DaikinTag extends DDSElement {
      * Provides an accessible name of the tag.
      */
     tagAriaLabel: string | null;
+    /**
+     * Specify the color of the tag.
+     *
+     * @default "gray"
+     */
+    color: "gray" | "red" | "blue" | "yellow" | "green" | "orange" | "purple";
+    /**
+     * Whether the tag has a shadow to indicate elevation.
+     *
+     * @default false
+     */
+    elevated: boolean;
     /**
      * Provides an accessible name of the remove button.
      */

package/dist/cjs-dev/components/text-area/daikin-text-area.cjs

@@ -23,8 +23,9 @@ var __decorateClass = (decorators2, target, key, kind) => {
 };
 const cvaTextArea = classVarianceAuthority.cva(
   [
+    "block",
     "w-full",
-    "h-full",
+    "box-border",
     "bg-ddt-color-common-background-default",
     "px-4",
     "py-3",
@@ -105,6 +106,7 @@ exports.DaikinTextArea = class DaikinTextArea extends ddsFormElement.DDSFormElem
       error: !this.disabled && this.error,
       resize: this.resizable
     })}
+      style="height: inherit; min-height: inherit;"
       name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
       placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
       autocomplete=${ifDefined_js.ifDefined(this.getBackingProperty("autocomplete"))}
@@ -132,6 +134,7 @@ exports.DaikinTextArea = class DaikinTextArea extends ddsFormElement.DDSFormElem
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && (!!inputGroup.error || !!inputGroup.textareaLimitExceeded);
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -142,9 +145,26 @@ exports.DaikinTextArea.styles = lit.css`
 
     :host {
       display: block;
-      height: 5.5rem;
+      min-height: 5.5rem;
       position: relative;
     }
+
+    :host([readonly]:not([disabled])) textarea {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) textarea:hover,
+    :host([readonly]:not([disabled])) textarea:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly][error]:not([disabled])) textarea,
+    :host([readonly][error]:not([disabled])) textarea:hover,
+    :host([readonly][error]:not([disabled])) textarea:active {
+      --color-base: var(--dds-color-common-danger-default);
+    }
   `;
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })

package/dist/cjs-dev/components/text-field/daikin-text-field.cjs

@@ -30,12 +30,13 @@ const cvaInput = classVarianceAuthority.cva(
     "items-center",
     "w-full",
     "h-full",
-    "pl-(--pl,1rem)",
-    "pr-(--pr,1rem)",
+    "pl-(--pl,calc(var(--dds-padding-30)+0.25rem))",
+    "pr-(--pr,calc(var(--dds-padding-30)+0.25rem))",
     "bg-ddt-color-common-background-default",
     "relative",
     "rounded-sm",
     "overflow-hidden",
+    "text-(length:--dds-font-size-400)",
     "outline-solid",
     "outline-(--color-border)",
     "outline-0",
@@ -70,22 +71,30 @@ const cvaInput = classVarianceAuthority.cva(
       },
       leftIcon: {
         false: [],
-        true: []
+        true: [
+          "[--pl:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10)+var(--dds-space-100))]"
+        ]
       },
       rightIcon: {
         false: [],
-        true: []
+        true: [
+          "[--pr:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10))]"
+        ]
       },
       type: {
         text: [],
-        number: ["[--pr:5.5rem]"],
-        password: ["[--pr:2.75rem]"],
+        number: [
+          "[--pr:calc(var(--dds-icon-button)*2+0.25rem+var(--dds-padding-20))]"
+        ],
+        password: [
+          "[--pr:calc(var(--dds-gap-20)+var(--dds-icon-button)+var(--dds-padding-20))]"
+        ],
         email: [],
         tel: [],
         search: [
           "[&::-webkit-search-cancel-button]:appearance-none",
-          "[--pl:2.75rem]",
-          "[--pr:2.75rem]"
+          "[--pl:calc(var(--dds-padding-30)+var(--dds-icon)+var(--dds-gap-10)+0.25rem)]",
+          "[--pr:calc(0.25rem+var(--dds-padding-30)+1.5rem)]"
         ]
       }
     },
@@ -108,8 +117,8 @@ const cvaIcon = classVarianceAuthority.cva(
   {
     variants: {
       icon: {
-        left: ["left-3"],
-        right: ["right-3"]
+        left: ["left-(--dds-padding-30)"],
+        right: ["right-(--dds-padding-30)"]
       },
       disabled: {
         false: ["text-ddt-color-common-text-primary"],
@@ -118,7 +127,7 @@ const cvaIcon = classVarianceAuthority.cva(
     }
   }
 );
-const cvaShowPasswordIcon = classVarianceAuthority.cva(["size-6"], {
+const cvaShowPasswordIcon = classVarianceAuthority.cva(["size-(--dds-icon)"], {
   variants: {
     showPassword: {
       false: ["icon-[daikin--password-hidden]"],
@@ -136,6 +145,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
     this.minlength = null;
     this.maxlength = null;
     this.step = null;
+    this.stepMode = "free";
     this.min = null;
     this.max = null;
     this.pattern = null;
@@ -221,8 +231,9 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
     }
   }
   _updateNumberValue(sign) {
-    const newValue = numberUtils.updateNumberValue(this.value || "0", sign, {
+    const newValue = numberUtils.updateNumberValue(this.value, sign, {
       step: this.step,
+      stepMode: this.stepMode,
       min: this.min,
       max: this.max
     });
@@ -251,7 +262,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
     >
       <slot
         name="left-icon"
-        class="icon-size-6"
+        class="icon-size-token"
         @slotchange=${this._handleSlotChange}
       ></slot>
     </span>`;
@@ -263,48 +274,56 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
     >
       <slot
         name="right-icon"
-        class="icon-size-6"
+        class="icon-size-token"
         @slotchange=${this._handleSlotChange}
       ></slot>
     </span>`;
     switch (this.type) {
       case "number":
         return lit.html`${leftIconSlot}
-          <span class="inline-flex items-center gap-1 absolute right-2">
-            <daikin-icon-button
-              color="neutral"
-              variant="ghost"
-              ?disabled=${this.disabled}
-              button-aria-label="Decrease"
-              tabindex="-1"
-              @click=${() => this._updateNumberValue(-1)}
-            >
-              <span class="icon-[daikin--number-minus] size-6"></span>
-            </daikin-icon-button>
-            <daikin-icon-button
+        ${this.readonly && !this.disabled ? lit.nothing : lit.html`<span class="inline-flex items-center gap-1 absolute right-2">
+              <daikin-icon-button
+                class="size-(--dds-icon-button)"
+                color="neutral"
+                variant="ghost"
+                ?disabled=${this.disabled}
+                button-aria-label="Decrease"
+                tabindex="-1"
+                @click=${() => this._updateNumberValue(-1)}
+              >
+                <span
+                  class="icon-[daikin--number-minus] size-(--dds-icon)"
+                ></span>
+              </daikin-icon-button>
+              <daikin-icon-button
+                class="size-(--dds-icon-button)"
+                color="neutral"
+                variant="ghost"
+                ?disabled=${this.disabled}
+                button-aria-label="Increase"
+                tabindex="-1"
+                @click=${() => this._updateNumberValue(1)}
+              >
+                <span
+                  class="icon-[daikin--number-plus] size-(--dds-icon)"
+                ></span>
+              </daikin-icon-button>
+            </span>`}`;
+      case "password":
+        return lit.html`${leftIconSlot}${this.readonly && !this.disabled ? lit.nothing : lit.html`<daikin-icon-button
               color="neutral"
               variant="ghost"
               ?disabled=${this.disabled}
-              button-aria-label="Increase"
-              tabindex="-1"
-              @click=${() => this._updateNumberValue(1)}
+              button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
+              class="absolute right-(--dds-padding-20) size-(--dds-icon-button)"
+              @click=${this._handleShowPasswordClick}
             >
-              <span class="icon-[daikin--number-plus] size-6"></span>
-            </daikin-icon-button>
-          </span>`;
-      case "password":
-        return lit.html`${leftIconSlot}<daikin-icon-button
-            color="neutral"
-            variant="ghost"
-            ?disabled=${this.disabled}
-            button-aria-label=${this.showPassword ? "Hide password" : "Show password"}
-            class="absolute right-3"
-            @click=${this._handleShowPasswordClick}
-          >
-            <span
-              class=${cvaShowPasswordIcon({ showPassword: this.showPassword })}
-            ></span>
-          </daikin-icon-button>`;
+              <span
+                class=${cvaShowPasswordIcon({
+          showPassword: this.showPassword
+        })}
+              ></span>
+            </daikin-icon-button>`}`;
       case "search":
         return lit.html`<span
             class=${cvaIcon({
@@ -312,17 +331,17 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
           disabled: this.disabled
         })}
           >
-            <span class="icon-[daikin--search] size-6"></span>
+            <span class="icon-[daikin--search] size-(--dds-icon)"></span>
           </span>
-          ${!!this.value && !!this.value.length ? lit.html`<daikin-icon-button
+          ${!!this.value && !!this.value.length && !this.readonly ? lit.html`<daikin-icon-button
                 color="neutral"
                 variant="ghost"
                 ?disabled=${this.disabled}
                 button-aria-label="Clear"
-                class="absolute right-3 size-6"
+                class="absolute right-(--dds-padding-30) size-6"
                 @click=${this._handleClearClick}
               >
-                <span class="icon-[daikin--close] size-6"></span>
+                <span class="icon-[daikin--close] size-(--dds-icon)"></span>
               </daikin-icon-button>` : lit.nothing}`;
       default:
         return lit.html`${leftIconSlot}${rightIconSlot}`;
@@ -388,6 +407,7 @@ exports.DaikinTextField = class DaikinTextField extends ddsFormElement.DDSFormEl
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -399,7 +419,7 @@ exports.DaikinTextField.styles = lit.css`
     :host {
       display: flex;
       align-items: center;
-      height: 3rem;
+      height: var(--dds-input-height, 3rem);
       position: relative;
     }
 
@@ -410,6 +430,23 @@ exports.DaikinTextField.styles = lit.css`
     input::-ms-clear {
       display: none !important;
     }
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
+    }
   `;
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, fallbackValue: "text" })
@@ -438,6 +475,15 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "step", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "free",
+    isAllowedValue: ddsProperty.oneOf(["free", "snap"]),
+    attribute: "step-mode"
+  })
+], exports.DaikinTextField.prototype, "stepMode", 2);
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTextField.prototype, "min", 2);

package/dist/cjs-dev/components/text-field/daikin-text-field.d.cts

@@ -97,6 +97,15 @@ export declare class DaikinTextField extends DDSFormElement {
      * Interval between values. This is valid when `type="number"`.
      */
     step: string | null;
+    /**
+     * When `type="number"`, whether to allow free input or snap to step boundaries.
+     * - `"free"`: Do not snap to step boundaries; increment/decrement relative to the current value.
+     * - `"snap"`: If the current value is off a step boundary, snap to the next/previous step boundary in the given direction (and finish without applying an extra step).
+     * Note that step boundaries are aligned to the `min` value if specified; otherwise, they are aligned to `0`. For example, with `step="3"`, boundaries are `..., -3, 0, 3, 6, ...`. If `min="-4"` is also set, the boundaries become `-4, -1, 2, 5, ...`.
+     *
+     * @default "free"
+     */
+    stepMode: "free" | "snap";
     /**
      * The minimum value. This is valid when `type="number"`.
      */

package/dist/cjs-dev/components/text-field/number-utils.cjs

@@ -2,14 +2,40 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Big = require("big.js");
 function updateNumberValue(currentValue, direction, options) {
-  const { step, min, max } = options;
+  const { step, stepMode = "free", min, max } = options;
+  const getDecimalPlaces = (value) => {
+    if (value == null || value === "") {
+      return 0;
+    }
+    const stringValue = typeof value === "number" ? `${value}` : value;
+    const decimalPart = stringValue.split(".")[1];
+    return decimalPart ? decimalPart.length : 0;
+  };
+  const currentDecimalPlaces = getDecimalPlaces(currentValue);
+  const stepDecimalPlaces = getDecimalPlaces(step);
+  const minDecimalPlaces = getDecimalPlaces(min);
+  const maxDecimalPlaces = getDecimalPlaces(max);
+  const outputDecimalPlaces = Math.max(currentDecimalPlaces, stepDecimalPlaces);
   try {
     const current = new Big(currentValue || "0");
     const stepBig = new Big(step || "1");
     const minBig = min != null && min !== "" ? new Big(min) : null;
     const maxBig = max != null && max !== "" ? new Big(max) : null;
+    const isEmptyCurrentValue = currentValue.trim() === "";
+    const formatResult = (value) => {
+      if (minBig !== null && value.eq(minBig)) {
+        return value.toFixed(minDecimalPlaces);
+      }
+      if (maxBig !== null && value.eq(maxBig)) {
+        return value.toFixed(maxDecimalPlaces);
+      }
+      return value.toFixed(outputDecimalPlaces);
+    };
+    if (isEmptyCurrentValue && direction === -1 && minBig) {
+      return formatResult(minBig);
+    }
     if (minBig && maxBig && maxBig.lt(minBig)) {
-      return direction === 1 ? minBig.toString() : maxBig.toString();
+      return direction === 1 ? formatResult(minBig) : formatResult(maxBig);
     }
     const isOnStepBoundary = (value) => {
       const diff = value.sub(minBig ?? 0);
@@ -19,22 +45,21 @@ function updateNumberValue(currentValue, direction, options) {
       const base = minBig || new Big(0);
       const offset = value.sub(base);
       const steps = offset.div(stepBig);
+      const truncated = steps.round(0, Big.roundDown);
       let targetSteps;
       if (dir === 1) {
-        targetSteps = steps.round(0, Big.roundUp);
+        targetSteps = truncated.lt(steps) ? truncated.add(1) : truncated;
       } else {
-        targetSteps = steps.round(0, Big.roundDown);
+        targetSteps = truncated.gt(steps) ? truncated.sub(1) : truncated;
       }
       return base.add(targetSteps.mul(stepBig));
     };
     const isInRange = (!minBig || current.gte(minBig)) && (!maxBig || current.lte(maxBig));
-    if (!isInRange || !isOnStepBoundary(current)) {
-      if (!isInRange) {
-        const isBelowMin = minBig && current.lt(minBig);
-        const isAboveMax = maxBig && current.gt(maxBig);
-        if (isBelowMin && direction === -1 || isAboveMax && direction === 1) {
-          return currentValue;
-        }
+    if (!isInRange) {
+      const isBelowMin = minBig && current.lt(minBig);
+      const isAboveMax = maxBig && current.gt(maxBig);
+      if (isBelowMin && direction === -1 || isAboveMax && direction === 1) {
+        return currentValue;
       }
       let nearestStep = findNearestStepInDirection(current, direction);
       if (minBig && nearestStep.lt(minBig)) {
@@ -43,17 +68,24 @@ function updateNumberValue(currentValue, direction, options) {
       if (maxBig && nearestStep.gt(maxBig)) {
         nearestStep = maxBig;
       }
-      return nearestStep.toString();
+      return formatResult(nearestStep);
     }
-    const newValue = direction === 1 ? current.add(stepBig) : current.sub(stepBig);
-    let result = newValue;
-    if (minBig && result.lt(minBig)) {
-      result = minBig;
+    const steppedValue = direction === 1 ? current.add(stepBig) : current.sub(stepBig);
+    if (minBig && steppedValue.lt(minBig) || maxBig && steppedValue.gt(maxBig)) {
+      return currentValue;
+    }
+    if (!isOnStepBoundary(current) && stepMode === "snap") {
+      const nearestStep = findNearestStepInDirection(current, direction);
+      if (minBig && nearestStep.lt(minBig) || maxBig && nearestStep.gt(maxBig)) {
+        return currentValue;
+      }
+      return formatResult(nearestStep);
     }
-    if (maxBig && result.gt(maxBig)) {
-      result = maxBig;
+    const newValue = direction === 1 ? current.add(stepBig) : current.sub(stepBig);
+    if (minBig && newValue.lt(minBig) || maxBig && newValue.gt(maxBig)) {
+      return currentValue;
     }
-    return result.toString();
+    return formatResult(newValue);
   } catch (error) {
     {
       console.warn("Number update operation failed:", error);

package/dist/cjs-dev/components/text-field/number-utils.d.cts

@@ -4,6 +4,13 @@
 export interface NumberUpdateOptions {
     /** Step increment/decrement amount */
     step?: string | null;
+    /**
+     * Step mode determines how the value is adjusted when it is not on a step boundary.
+     * - "free": Do not snap to step boundaries; increment/decrement relative to the current value.
+     * - "snap": If the current value is off a step boundary, snap to the next/previous step boundary in the given direction (and finish without applying an extra step).
+     * Defaults to "free".
+     */
+    stepMode?: "free" | "snap";
     /** Minimum allowed value */
     min?: string | null;
     /** Maximum allowed value */