@synergy-design-system/components 2.30.1 → 2.31.0-numeric.1

package/dist/chunks/{chunk.UOY56ORY.js → chunk.2IWVCAEF.js}

@@ -1,6 +1,6 @@
 import {
   SynDivider
-} from "./chunk.OJFEU2LY.js";
+} from "./chunk.KITRO6XO.js";
 
 // src/components/divider/divider.ts
 var divider_default = SynDivider;
@@ -9,4 +9,4 @@ SynDivider.define("syn-divider");
 export {
   divider_default
 };
-//# sourceMappingURL=chunk.UOY56ORY.js.map
+//# sourceMappingURL=chunk.2IWVCAEF.js.map

package/dist/chunks/{chunk.2RAC47FN.js → chunk.2YBP4WEH.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.K3XDXZW2.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -55,4 +55,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.2RAC47FN.js.map
+//# sourceMappingURL=chunk.2YBP4WEH.js.map

package/dist/chunks/{chunk.KBBZYAPL.js → chunk.32CPGKWW.js}

@@ -1,6 +1,6 @@
 import {
   SynSpinner
-} from "./chunk.Y5RGUISY.js";
+} from "./chunk.EDVAO5KD.js";
 import {
   FormControlController,
   validValidityState
@@ -17,22 +17,22 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.R3THZVHP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.U3WTJD4D.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   enableDefaultSettings
-} from "./chunk.NUIJATJY.js";
+} from "./chunk.33EV4VCU.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.K3XDXZW2.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -295,4 +295,4 @@ SynButton = __decorateClass([
 export {
   SynButton
 };
-//# sourceMappingURL=chunk.KBBZYAPL.js.map
+//# sourceMappingURL=chunk.32CPGKWW.js.map

package/dist/chunks/{chunk.NUIJATJY.js → chunk.33EV4VCU.js}

@@ -2,7 +2,7 @@ import {
   addGlobalEventNotification,
   extractDefaultSettingsForElement,
   removeGlobalEventNotification
-} from "./chunk.JTSBAJHO.js";
+} from "./chunk.DSW34EOY.js";
 import {
   __privateAdd,
   __privateGet,
@@ -83,4 +83,4 @@ function enableDefaultSettings(name) {
 export {
   enableDefaultSettings
 };
-//# sourceMappingURL=chunk.NUIJATJY.js.map
+//# sourceMappingURL=chunk.33EV4VCU.js.map

package/dist/chunks/{chunk.GAN4SEH5.js → chunk.57AK7CVM.js}

@@ -1,6 +1,6 @@
 import {
   SynProgressBar
-} from "./chunk.WIZJDLTC.js";
+} from "./chunk.TB7FVSDL.js";
 
 // src/components/progress-bar/progress-bar.ts
 var progress_bar_default = SynProgressBar;
@@ -9,4 +9,4 @@ SynProgressBar.define("syn-progress-bar");
 export {
   progress_bar_default
 };
-//# sourceMappingURL=chunk.GAN4SEH5.js.map
+//# sourceMappingURL=chunk.57AK7CVM.js.map

package/dist/chunks/{chunk.SZ73NMRJ.js → chunk.5CAP3G3X.js}

@@ -1,6 +1,6 @@
 import {
   SynDropdown
-} from "./chunk.QHPOPKTJ.js";
+} from "./chunk.N42HYZ3J.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SynDropdown;
@@ -9,4 +9,4 @@ SynDropdown.define("syn-dropdown");
 export {
   dropdown_default
 };
-//# sourceMappingURL=chunk.SZ73NMRJ.js.map
+//# sourceMappingURL=chunk.5CAP3G3X.js.map

package/dist/chunks/{chunk.QVRCVDGA.js → chunk.5F6A2J5X.js}

@@ -1,6 +1,6 @@
 import {
   SynTag
-} from "./chunk.HWNTLXRL.js";
+} from "./chunk.JJI5CPOB.js";
 
 // src/components/tag/tag.ts
 var tag_default = SynTag;
@@ -9,4 +9,4 @@ SynTag.define("syn-tag");
 export {
   tag_default
 };
-//# sourceMappingURL=chunk.QVRCVDGA.js.map
+//# sourceMappingURL=chunk.5F6A2J5X.js.map

package/dist/chunks/{chunk.3A4IZ7IM.js → chunk.5NGEDTDD.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.FHND52A3.js";
+} from "./chunk.QVS5TYTR.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -19,26 +19,26 @@ import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
-  alert_custom_styles_default
-} from "./chunk.QBHZAR4C.js";
-import {
-  alert_styles_default
-} from "./chunk.BXY667C7.js";
+  LocalizeController
+} from "./chunk.GIU3H3J3.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
-import {
-  LocalizeController
-} from "./chunk.GIU3H3J3.js";
 import {
   enableDefaultSettings
-} from "./chunk.NUIJATJY.js";
+} from "./chunk.33EV4VCU.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.K3XDXZW2.js";
+import {
+  alert_custom_styles_default
+} from "./chunk.QBHZAR4C.js";
+import {
+  alert_styles_default
+} from "./chunk.BXY667C7.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -288,4 +288,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.3A4IZ7IM.js.map
+//# sourceMappingURL=chunk.5NGEDTDD.js.map

package/dist/chunks/{chunk.PDDQXWQR.js → chunk.5OYRCRNV.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.RYQHOPIY.js";
+} from "./chunk.ZIDEDWYN.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.PDDQXWQR.js.map
+//# sourceMappingURL=chunk.5OYRCRNV.js.map

package/dist/chunks/{chunk.SWCGPDHW.js → chunk.63XQMHFQ.js}

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "./chunk.GYSYAXFI.js";
+} from "./chunk.U23YWMIX.js";
 
 // src/components/textarea/textarea.ts
 var textarea_default = SynTextarea;
@@ -9,4 +9,4 @@ SynTextarea.define("syn-textarea");
 export {
   textarea_default
 };
-//# sourceMappingURL=chunk.SWCGPDHW.js.map
+//# sourceMappingURL=chunk.63XQMHFQ.js.map

package/dist/chunks/{chunk.QQ26YV6J.js → chunk.6EJPCDSL.js}

@@ -1,27 +1,27 @@
-import {
-  validate_styles_default
-} from "./chunk.MVM3NN6Y.js";
 import {
   getEventNameForElement,
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.D6UYGOT5.js";
+} from "./chunk.Q7BW6KKX.js";
+import {
+  validate_styles_default
+} from "./chunk.MVM3NN6Y.js";
 import {
   SynAlert
-} from "./chunk.3A4IZ7IM.js";
+} from "./chunk.5NGEDTDD.js";
 import {
   watch
 } from "./chunk.74IOULXM.js";
 import {
   enableDefaultSettings
-} from "./chunk.NUIJATJY.js";
+} from "./chunk.33EV4VCU.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.K3XDXZW2.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -330,4 +330,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.QQ26YV6J.js.map
+//# sourceMappingURL=chunk.6EJPCDSL.js.map

package/dist/chunks/{chunk.BMR7V4GF.js → chunk.6ETN74WB.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.63LZB375.js";
+} from "./chunk.J75DWM6J.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.BMR7V4GF.js.map
+//# sourceMappingURL=chunk.6ETN74WB.js.map

package/dist/chunks/{chunk.K36FG4W2.js → chunk.7BMEQKZX.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.XAQKFEHH.js";
 import {
   SynDivider
-} from "./chunk.OJFEU2LY.js";
+} from "./chunk.KITRO6XO.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -22,24 +22,32 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   SynIcon
-} from "./chunk.R3THZVHP.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.U3WTJD4D.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   enableDefaultSettings
-} from "./chunk.NUIJATJY.js";
+} from "./chunk.33EV4VCU.js";
+import {
+  createNumericStrategy,
+  modernNumericStrategy,
+  nativeNumericStrategy
+} from "./chunk.UBAW2LID.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.K3XDXZW2.js";
 import {
   __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
   __spreadValues
 } from "./chunk.2GFK6XTO.js";
 
@@ -137,6 +145,7 @@ var LongPressDirective = class extends AsyncDirective {
 var longPress = directive(LongPressDirective);
 
 // src/components/input/input.component.ts
+var _numericStrategy;
 var SynInput = class extends SynergyElement {
   constructor() {
     super(...arguments);
@@ -167,6 +176,26 @@ var SynInput = class extends SynergyElement {
     this.form = "";
     this.required = false;
     this.spellcheck = true;
+    __privateAdd(this, _numericStrategy, nativeNumericStrategy);
+  }
+  set numericStrategy(value) {
+    switch (typeof value) {
+      case "string":
+        __privateSet(this, _numericStrategy, value === "modern" ? modernNumericStrategy : nativeNumericStrategy);
+        break;
+      case "object":
+        __privateSet(this, _numericStrategy, createNumericStrategy(value));
+        break;
+      default:
+        __privateSet(this, _numericStrategy, nativeNumericStrategy);
+    }
+  }
+  /**
+   * @default nativeNumericStrategy
+   * @todo: This must be changed to "modern" in Synergy@3
+   */
+  get numericStrategy() {
+    return __privateGet(this, _numericStrategy);
   }
   //
   // NOTE: We use an in-memory input for these getters/setters instead of the one in the template because the properties
@@ -227,7 +256,7 @@ var SynInput = class extends SynergyElement {
     if (this.disabled || this.readonly) {
       return true;
     }
-    if (this.min === void 0 || this.min === null || this.disabled) {
+    if (this.min === void 0 || this.min === null) {
       return false;
     }
     const min = typeof this.min === "string" ? parseFloat(this.min) : this.min;
@@ -243,7 +272,36 @@ var SynInput = class extends SynergyElement {
     const max = typeof this.max === "string" ? parseFloat(this.max) : this.max;
     return this.valueAsNumber >= max;
   }
+  handleNumericStrategyAutoClamp() {
+    const min = typeof this.min === "string" ? parseFloat(this.min) : this.min;
+    const max = typeof this.max === "string" ? parseFloat(this.max) : this.max;
+    const { valueAsNumber } = this;
+    let nextValue = valueAsNumber;
+    let clampEvent = "";
+    if (nextValue < min) {
+      nextValue = min;
+      clampEvent = "min";
+    } else if (nextValue > max) {
+      nextValue = max;
+      clampEvent = "max";
+    }
+    this.value = nextValue.toString();
+    if (clampEvent) {
+      this.emit("syn-clamp", {
+        detail: {
+          clampedTo: clampEvent,
+          lastUserValue: valueAsNumber
+        }
+      });
+    }
+    this.formControlController.updateValidity();
+    this.emit("syn-change");
+  }
   handleChange() {
+    if (this.type === "number" && __privateGet(this, _numericStrategy).autoClamp) {
+      this.handleNumericStrategyAutoClamp();
+      return;
+    }
     this.value = this.input.value;
     this.emit("syn-change");
   }
@@ -271,6 +329,20 @@ var SynInput = class extends SynergyElement {
     this.formControlController.emitInvalidEvent(event);
   }
   handleKeyDown(event) {
+    if (__privateGet(this, _numericStrategy).noStepAlign && this.type === "number") {
+      const { key } = event;
+      if (key === "ArrowUp" || key === "ArrowDown") {
+        event.preventDefault();
+        event.stopPropagation();
+        if (key === "ArrowUp") {
+          this.handleStepUp();
+        } else if (key === "ArrowDown") {
+          this.handleStepDown();
+        }
+        this.handleChange();
+        return;
+      }
+    }
     const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
     if (event.key === "Enter" && !hasModifier) {
       setTimeout(() => {
@@ -327,6 +399,25 @@ var SynInput = class extends SynergyElement {
   }
   /** Increments the value of a numeric input type by the value of the step attribute. */
   stepUp() {
+    if (__privateGet(this, _numericStrategy).noStepAlign) {
+      const { max, step, valueAsNumber } = this;
+      const usedInitialValue = Number.isNaN(valueAsNumber) ? 0 : valueAsNumber;
+      const usedMin = typeof this.min === "string" ? parseFloat(this.min) : this.min;
+      const usedMax = typeof max === "string" ? parseFloat(max) : max;
+      const usedStep = typeof step === "undefined" || step === null || step === "any" ? 1 : typeof step === "number" ? step : parseFloat(step);
+      let wantedNextValue = usedInitialValue + usedStep;
+      wantedNextValue = Math.abs(wantedNextValue) < Number.EPSILON ? 0 : wantedNextValue;
+      if (typeof usedMax === "number" && usedMax < wantedNextValue) {
+        wantedNextValue = usedMax;
+      } else if (typeof usedMin === "number" && usedMin > wantedNextValue) {
+        wantedNextValue = usedMin;
+      }
+      this.input.value = wantedNextValue.toString();
+      if (this.value !== this.input.value) {
+        this.value = this.input.value;
+      }
+      return;
+    }
     this.input.stepUp();
     if (this.value !== this.input.value) {
       this.value = this.input.value;
@@ -334,6 +425,25 @@ var SynInput = class extends SynergyElement {
   }
   /** Decrements the value of a numeric input type by the value of the step attribute. */
   stepDown() {
+    if (__privateGet(this, _numericStrategy).noStepAlign) {
+      const { min, max, step, valueAsNumber } = this;
+      const usedInitialValue = Number.isNaN(valueAsNumber) ? 0 : valueAsNumber;
+      const usedMin = typeof min === "string" ? parseFloat(min) : min;
+      const usedMax = typeof max === "string" ? parseFloat(max) : max;
+      const usedStep = typeof step === "undefined" || step === null || step === "any" ? 1 : typeof step === "number" ? step : parseFloat(step);
+      let wantedNextValue = usedInitialValue - usedStep;
+      wantedNextValue = Math.abs(wantedNextValue) < Number.EPSILON ? 0 : wantedNextValue;
+      if (typeof usedMin === "number" && usedMin > wantedNextValue) {
+        wantedNextValue = usedMin;
+      } else if (typeof usedMax === "number" && usedMax < wantedNextValue) {
+        wantedNextValue = usedMax;
+      }
+      this.input.value = wantedNextValue.toString();
+      if (this.value !== this.input.value) {
+        this.value = this.input.value;
+      }
+      return;
+    }
     this.input.stepDown();
     if (this.value !== this.input.value) {
       this.value = this.input.value;
@@ -425,7 +535,7 @@ var SynInput = class extends SynergyElement {
               maxlength=${ifDefined(this.maxlength)}
               min=${ifDefined(this.min)}
               max=${ifDefined(this.max)}
-              step=${ifDefined(this.step)}
+              step=${ifDefined(!__privateGet(this, _numericStrategy).noStepValidation ? this.step : "any")}
               .value=${live(this.value)}
               autocapitalize=${ifDefined(this.autocapitalize)}
               autocomplete=${ifDefined(this.autocomplete)}
@@ -529,6 +639,7 @@ var SynInput = class extends SynergyElement {
     `;
   }
 };
+_numericStrategy = new WeakMap();
 SynInput.styles = [component_styles_default, form_control_styles_default, input_styles_default, form_control_custom_styles_default, input_custom_styles_default];
 SynInput.dependencies = {
   "syn-icon": SynIcon,
@@ -637,6 +748,17 @@ __decorateClass([
 __decorateClass([
   property()
 ], SynInput.prototype, "inputmode", 2);
+__decorateClass([
+  property({
+    attribute: "numeric-strategy",
+    converter: {
+      fromAttribute: (value) => {
+        return value === "modern" ? modernNumericStrategy : nativeNumericStrategy;
+      }
+    },
+    type: Object
+  })
+], SynInput.prototype, "numericStrategy", 1);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SynInput.prototype, "handleDisabledChange", 1);
@@ -653,4 +775,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.K36FG4W2.js.map
+//# sourceMappingURL=chunk.7BMEQKZX.js.map

package/dist/chunks/chunk.7BMEQKZX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/input/input.component.ts", "../../src/internal/longpress.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynDivider from '../divider/divider.component.js';\nimport { longPress } from '../../internal/longpress.js';\nimport styles from './input.styles.js';\nimport customStyles from './input.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport {\n  type NumericStrategy,\n  createNumericStrategy,\n  nativeNumericStrategy,\n  modernNumericStrategy,\n} from './strategies.js';\nimport type { SynClampDetails } from '../../events/syn-clamp.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Inputs collect data from the user.\n * @documentation https://synergy.style/components/input\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-divider\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.\n * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-clear - Emitted when the clear button is activated.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart stepper - The container that wraps the number stepper.\n * @csspart decrement-number-stepper - The decrement number stepper button.\n * @csspart increment-number-stepper - The increment number stepper button.\n * @csspart divider - The divider between the increment and decrement number stepper buttons.\n *\n * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.\n * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.\n */\n@enableDefaultSettings('SynInput')\nexport default class SynInput extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = {\n\t\t'syn-icon': SynIcon,\n\t\t'syn-divider': SynDivider\n\t};\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  @query('.input__control') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n  @property() title = ''; // make reactive to pass through\n\n  private __numberInput = Object.assign(document.createElement('input'), { type: 'number' });\n  private __dateInput = Object.assign(document.createElement('input'), { type: 'date' });\n\n  /**\n   * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\n   * to `text`.\n   */\n  @property({ reflect: true }) type:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url' = 'text';\n\n  /** The name of the input, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the input, submitted as a name/value pair with form data. */\n  @property() value = '';\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue = '';\n\n  /** The input's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = '';\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Adds a button to toggle the password's visibility. Only applies to password types. */\n  @property({ attribute: 'password-toggle', type: Boolean }) passwordToggle = false;\n\n  /** Determines whether or not the password is currently visible. Only applies to password input types. */\n  @property({ attribute: 'password-visible', type: Boolean }) passwordVisible = false;\n\n  /** Hides the increment/decrement spin buttons for number inputs. */\n  @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** A regular expression pattern to validate input against. */\n  @property() pattern: string;\n\n  /** The minimum length of input that will be considered valid. */\n  @property({ type: Number }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @property({ type: Number }) maxlength: number;\n\n  /** The input's minimum value. Only applies to date and number input types. */\n  @property() min: number | string;\n\n  /** The input's maximum value. Only applies to date and number input types. */\n  @property() max: number | string;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to date and number input types.\n   */\n  @property() step: number | 'any';\n\n  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n  @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n  /** Indicates whether the browser's autocorrect feature is on or off. */\n  @property() autocorrect: 'off' | 'on';\n\n  /**\n   * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n   * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n   */\n  @property() autocomplete: string;\n\n  /** Indicates that the input should receive focus on page load. */\n  @property({ type: Boolean }) autofocus: boolean;\n\n  /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n  @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /** Enables spell checking on the input. */\n  @property({\n    type: Boolean,\n    converter: {\n      // Allow \"true|false\" attribute values but keep the property boolean\n      fromAttribute: value => (!value || value === 'false' ? false : true),\n      toAttribute: value => (value ? 'true' : 'false')\n    }\n  })\n  spellcheck = true;\n\n  /**\n   * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n   * keyboard on supportive devices.\n   */\n  @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  #numericStrategy: NumericStrategy = nativeNumericStrategy;\n\n  /**\n   * Defines the strategy for handling numbers in the numeric input.\n   * This is used to determine how the input behaves when the user interacts with it.\n   *\n   * Includes the following configuration options:\n   *\n   * - **autoClamp**: If true, the input will clamp the value to the min and max attributes.\n   * - **noStepAlign**: If true, the input will not align the value to the step attribute.\n   * - **noStepValidation**: If true, the input will not validate the value against the step attribute.\n   * \n   * You may provide this as one of the following values:\n   *\n   * - 'native': Uses the native browser implementation.\n   * - 'modern': Uses a more intuitive implementation:\n   *   - Values are clamped to the nearest min or max value.\n   *   - Stepping is inclusive to the provided min and max values.\n   *   - Provided stepping is no longer used in validation.\n   * - An object that matches the `NumericStrategy` type. Note this can only be set via `property`, not as an `attribute`!\n   */\n  @property({\n    attribute: 'numeric-strategy',\n    converter: {\n      fromAttribute: (value) => {\n        return value === 'modern'\n          ? modernNumericStrategy\n          : nativeNumericStrategy;\n      },\n    },\n    type: Object,\n  })\n  set numericStrategy(value: 'native' | 'modern' | Partial<NumericStrategy>) {\n    switch (typeof value) {\n      case 'string': this.#numericStrategy = value === 'modern' ? modernNumericStrategy : nativeNumericStrategy; break;\n      case 'object': this.#numericStrategy = createNumericStrategy(value); break;\n      default: this.#numericStrategy = nativeNumericStrategy;\n    }\n  }\n\n  /**\n   * @default nativeNumericStrategy\n   * @todo: This must be changed to \"modern\" in Synergy@3\n   */\n  get numericStrategy(): 'native' | 'modern' | Partial<NumericStrategy> {\n    return this.#numericStrategy;\n  }\n\n  //\n  // NOTE: We use an in-memory input for these getters/setters instead of the one in the template because the properties\n  // can be set before the component is rendered.\n  //\n\n  /**\n   * Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type=\"{{type}}\">` implementation and may result in an error.\n   */\n  get valueAsDate() {\n    this.__dateInput.type = this.type;\n    this.__dateInput.value = this.value;\n    return this.input?.valueAsDate || this.__dateInput.valueAsDate;\n  }\n\n  set valueAsDate(newValue: Date | null) {\n    this.__dateInput.type = this.type;\n    this.__dateInput.valueAsDate = newValue;\n    this.value = this.__dateInput.value;\n  }\n\n  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */\n  get valueAsNumber() {\n    this.__numberInput.value = this.value;\n    return this.input?.valueAsNumber || this.__numberInput.valueAsNumber;\n  }\n\n  set valueAsNumber(newValue: number) {\n    this.__numberInput.valueAsNumber = newValue;\n    this.value = this.__numberInput.value;\n  }\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleStep(){\n    this.handleInput();\n    this.input.focus();\n  }\n\n  private handleStepUp() {\n    this.stepUp();\n    this.handleStep();\n  }\n\n  private handleStepDown() {\n    this.stepDown();\n    this.handleStep();\n  }\n  \n  private isDecrementDisabled() {\n    if(this.disabled || this.readonly) {\n      return true;\n    }\n\n    if (this.min === undefined || this.min === null) {\n      return false;\n    }\n\n    const min = typeof this.min === 'string' ? parseFloat(this.min) : this.min;\n    return this.valueAsNumber <= min;\n  }\n\n  private isIncrementDisabled() {\n    if(this.disabled || this.readonly) {\n      return true;\n    }\n\n    if (this.max === undefined || this.max === null) {\n      return false;\n    }\n\n    const max = typeof this.max === 'string' ? parseFloat(this.max) : this.max;\n    return this.valueAsNumber >= max;\n  }\n\n  \n  private handleNumericStrategyAutoClamp() {\n    const min = typeof this.min === 'string' ? parseFloat(this.min) : this.min;\n    const max = typeof this.max === 'string' ? parseFloat(this.max) : this.max;\n    const { valueAsNumber } = this;\n\n    let nextValue = valueAsNumber;\n    let clampEvent = '';\n    if (nextValue < min) {\n      nextValue = min;\n      clampEvent = 'min';\n    } else if (nextValue > max) {\n      nextValue = max;\n      clampEvent = 'max';\n    }\n\n    this.value = nextValue.toString();\n\n    // Fire the event if the value was clamped\n    if (clampEvent) {\n      this.emit('syn-clamp', {\n        detail: {\n          clampedTo: clampEvent as SynClampDetails['clampedTo'],\n          lastUserValue: valueAsNumber,\n        }\n      });\n    }\n    this.formControlController.updateValidity();\n    this.emit('syn-change');\n  }\n\n  private handleChange() {\n    if (this.type === 'number' && this.#numericStrategy.autoClamp) {\n      this.handleNumericStrategyAutoClamp();\n      return;\n    }\n    this.value = this.input.value;\n    this.emit('syn-change');\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.emit('syn-clear');\n      this.emit('syn-input');\n      this.emit('syn-change');\n    }\n\n    this.input.focus();\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.formControlController.updateValidity();\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.#numericStrategy.noStepAlign && this.type === 'number') {\n      const { key } = event;\n      if (key === 'ArrowUp' || key === 'ArrowDown') {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (key === 'ArrowUp') {\n          this.handleStepUp();\n        } else if (key === 'ArrowDown') {\n          this.handleStepDown();\n        }\n        this.handleChange();\n        return;\n      }\n    }\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        //\n        // See https://github.com/synergy-design-system/synergy/pull/988\n        //\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formControlController.submit();\n        }\n      });\n    }\n  }\n\n  private handlePasswordToggle() {\n    this.passwordVisible = !this.passwordVisible;\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch('step', { waitUntilFirstUpdate: true })\n  handleStepChange() {\n    // If step changes, the value may become invalid so we need to recheck after the update. We set the new step\n    // imperatively so we don't have to wait for the next render to report the updated validity.\n    this.input.step = String(this.step);\n    this.formControlController.updateValidity();\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    this.formControlController.updateValidity();\n  }\n\n  /** Sets focus on the input. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Selects all the text in the input. */\n  select() {\n    this.input.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    const selectionStart = start ?? this.input.selectionStart!;\n    const selectionEnd = end ?? this.input.selectionEnd!;\n\n    this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n    }\n  }\n\n  /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */\n  showPicker() {\n    if ('showPicker' in HTMLInputElement.prototype) {\n      this.input.showPicker();\n    }\n  }\n\n  /** Increments the value of a numeric input type by the value of the step attribute. */\n  stepUp() {\n    if (this.#numericStrategy.noStepAlign) {\n      const { max, step, valueAsNumber } = this;\n\n      // Needed because the input could be empty. In this case, valueAsNumber is NaN\n      const usedInitialValue = Number.isNaN(valueAsNumber) ? 0 : valueAsNumber;\n      const usedMin = typeof this.min === 'string' ? parseFloat(this.min) : this.min;\n      const usedMax = typeof max === 'string' ? parseFloat(max) : max;\n      const usedStep = (typeof step === 'undefined' || step === null || step === 'any') ? 1 : typeof step === 'number' ? step : parseFloat(step);\n\n      let wantedNextValue = usedInitialValue + usedStep;\n      // Floating point issues...\n      wantedNextValue = Math.abs(wantedNextValue) < Number.EPSILON ? 0 : wantedNextValue;\n\n      if (typeof usedMax === 'number' && usedMax < wantedNextValue) {\n        wantedNextValue = usedMax;\n      } else if (typeof usedMin === 'number' && usedMin > wantedNextValue) {\n        wantedNextValue = usedMin;\n      }\n\n      this.input.value = wantedNextValue.toString();\n\n      if (this.value !== this.input.value) {\n        this.value = this.input.value;\n      }\n      return;\n    }\n    this.input.stepUp();\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n    }\n  }\n\n  /** Decrements the value of a numeric input type by the value of the step attribute. */\n  stepDown() {\n    if (this.#numericStrategy.noStepAlign) {\n      const { min, max, step, valueAsNumber } = this;\n\n      // Needed because the input could be empty. In this case, valueAsNumber is NaN\n      const usedInitialValue = Number.isNaN(valueAsNumber) ? 0 : valueAsNumber;\n      const usedMin = typeof min === 'string' ? parseFloat(min) : min;\n      const usedMax = typeof max === 'string' ? parseFloat(max) : max;\n      const usedStep = (typeof step === 'undefined' || step === null || step === 'any') ? 1 : typeof step === 'number' ? step : parseFloat(step);\n\n      let wantedNextValue = usedInitialValue - usedStep;\n      // Floating point issues...\n      wantedNextValue = Math.abs(wantedNextValue) < Number.EPSILON ? 0 : wantedNextValue;\n      \n      if (typeof usedMin === 'number' && usedMin > wantedNextValue) {\n        wantedNextValue = usedMin;\n      } else if (typeof usedMax === 'number' && usedMax < wantedNextValue) {\n        wantedNextValue = usedMax;\n      }\n      \n      this.input.value = wantedNextValue.toString();\n      if (this.value !== this.input.value) {\n        this.value = this.input.value;\n      }\n      return;\n    }\n    this.input.stepDown();\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n    }\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasPrefixSlot = this.hasSlotController.test('prefix');\n    const hasSuffixSlot = this.hasSlotController.test('suffix');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible = hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'form-control--has-prefix': hasPrefixSlot,\n          'form-control--has-suffix': hasSuffixSlot\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <div\n            part=\"base\"\n            class=${classMap({\n              input: true,\n\n              // Sizes\n              'input--small': this.size === 'small',\n              'input--medium': this.size === 'medium',\n              'input--large': this.size === 'large',\n\n              // States\n              'input--standard': !this.readonly,\n              'input--readonly': this.readonly,\n              'input--disabled': this.disabled,\n              'input--focused': this.hasFocus,\n              'input--empty': !this.value,\n              'input--no-spin-buttons': this.noSpinButtons\n            })}\n          >\n            <span part=\"prefix\" class=\"input__prefix\">\n              <slot name=\"prefix\"></slot>\n            </span>\n\n            <input\n              part=\"input\"\n              id=\"input\"\n              class=\"input__control\"\n              type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}\n              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n              name=${ifDefined(this.name)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              ?required=${this.required}\n              placeholder=${ifDefined(this.placeholder)}\n              minlength=${ifDefined(this.minlength)}\n              maxlength=${ifDefined(this.maxlength)}\n              min=${ifDefined(this.min)}\n              max=${ifDefined(this.max)}\n              step=${ifDefined(!this.#numericStrategy.noStepValidation ? this.step as number : 'any')}\n              .value=${live(this.value)}\n              autocapitalize=${ifDefined(this.autocapitalize)}\n              autocomplete=${ifDefined(this.autocomplete)}\n              autocorrect=${ifDefined(this.autocorrect)}\n              ?autofocus=${this.autofocus}\n              spellcheck=${this.spellcheck}\n              pattern=${ifDefined(this.pattern)}\n              enterkeyhint=${ifDefined(this.enterkeyhint)}\n              inputmode=${ifDefined(this.inputmode)}\n              aria-describedby=\"help-text\"\n              @change=${this.handleChange}\n              @input=${this.handleInput}\n              @invalid=${this.handleInvalid}\n              @keydown=${this.handleKeyDown}\n              @focus=${this.handleFocus}\n              @blur=${this.handleBlur}\n            />\n\n            ${isClearIconVisible\n              ? html`\n                  <button\n                    part=\"clear-button\"\n                    class=\"input__clear\"\n                    type=\"button\"\n                    aria-label=${this.localize.term('clearEntry')}\n                    @click=${this.handleClearClick}\n                    tabindex=\"-1\"\n                  >\n                    <slot name=\"clear-icon\">\n                      <syn-icon name=\"x-circle-fill\" library=\"system\"></syn-icon>\n                    </slot>\n                  </button>\n                `\n              : ''}\n            ${this.passwordToggle && !this.disabled\n              ? html`\n                  <button\n                    part=\"password-toggle-button\"\n                    class=\"input__password-toggle\"\n                    type=\"button\"\n                    aria-label=${this.localize.term(this.passwordVisible ? 'hidePassword' : 'showPassword')}\n                    @click=${this.handlePasswordToggle}\n                    tabindex=\"-1\"\n                  >\n                    ${this.passwordVisible\n                      ? html`\n                          <slot name=\"show-password-icon\">\n                            <syn-icon name=\"eye-slash\" library=\"system\"></syn-icon>\n                          </slot>\n                        `\n                      : html`\n                          <slot name=\"hide-password-icon\">\n                            <syn-icon name=\"eye\" library=\"system\"></syn-icon>\n                          </slot>\n                        `}\n                  </button>\n                `\n              : ''}\n\n            <span part=\"suffix\" class=\"input__suffix\">\n              <slot name=\"suffix\"></slot>\n            </span>\n\n            ${this.type === 'number' && !this.noSpinButtons\n              ? html`\n              <div part=\"stepper\" class=\"input__number-stepper\">\n                <button\n                  part=\"decrement-number-stepper\"\n                  class=\"input__number-stepper-button\"\n                  type=\"button\"\n                  ?disabled=${this.isDecrementDisabled()}\n                  aria-hidden=\"true\"\n                  ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange()})}\n                  tabindex=\"-1\"\n                >\n                  <slot name=\"decrement-number-stepper\">\n                    <syn-icon name=\"indeterminate\" library=\"system\"></syn-icon>\n                  </slot>\n                </button>\n                <syn-divider class=\"input__number-divider\" part=\"divider\" vertical></syn-divider>\n                <button\n                  part=\"increment-number-stepper\"\n                  class=\"input__number-stepper-button\"\n                  type=\"button\"\n                  ?disabled=${this.isIncrementDisabled()}\n                  aria-hidden=\"true\"\n                  ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange()})}\n                  tabindex=\"-1\"\n                >\n                  <slot name=\"increment-number-stepper\">\n                    <syn-icon name=\"add\" library=\"system\"></syn-icon>\n                  </slot>\n                </button>\n              </div>\n                `\n            : ''}\n          </div>\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n", "import { type ElementPart, noChange, nothing } from 'lit';\nimport {\n  AsyncDirective,\n  type DirectiveParameters,\n  type Part,\n  PartType,\n  directive,\n} from 'lit/async-directive.js';\n\ntype Callbacks = {\n  start: () => void;\n  end: () => void;\n};\n\n/**\n * A directive that determines,if a HTMLButtonElement is long pressed or only clicked.\n * Depending on the state it executes the callback once or repeating.\n *\n * Usage:\n *\n *  <button\n *    ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange()})}\n *  >\n *    my button\n *  </button>\n */\nclass LongPressDirective extends AsyncDirective {\n  host: HTMLButtonElement;\n\n  observer: MutationObserver;\n\n  callbacks: Callbacks;\n\n  interval: NodeJS.Timeout;\n\n  timeout: NodeJS.Timeout;\n\n  constructor(part: Part) {\n    super(part);\n    if (part.type !== PartType.ELEMENT || !(part.element instanceof HTMLButtonElement)) {\n      throw new Error('The `longPress` directive must be used on an HTMLButtonElement.');\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars, class-methods-use-this\n  render(_callback: Callbacks): typeof nothing {\n    return nothing;\n  }\n\n  update(part: ElementPart, [callbacks]: DirectiveParameters<this>): typeof noChange {\n    // initial call\n    if (this.callbacks === undefined && this.host === undefined) {\n      this.host = part.element as HTMLButtonElement;\n      this.callbacks = { ...callbacks };\n      this.host.addEventListener('pointerdown', this.handlePointerDown);\n    }\n\n    return noChange;\n  }\n\n  reconnected(): void {\n    this.host.addEventListener('pointerdown', this.handlePointerDown);\n  }\n\n  protected disconnected(): void {\n    this.stopSpinningAndCleanUp();\n    this.host.removeEventListener('pointerdown', this.handlePointerDown);\n    document.removeEventListener('pointerup', this.handlePointerUp);\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    // do nothing if the click was not done from the left mouse button or if the button is disabled\n    if (event.button !== 0 || this.host.disabled) {\n      return;\n    }\n    this.spinOnLongPressCallback(event);\n  };\n\n  /**\n   * Start spinning on long press clicks otherwise handle as single click event\n   */\n  private spinOnLongPressCallback(event: PointerEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    // Start spinning only on long press\n    this.timeout = setTimeout(() => {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      this.timeout = undefined;\n      this.interval = setInterval(() => {\n        this.callbacks.start();\n      }, 50);\n    }, 500);\n\n    document.addEventListener('pointerup', this.handlePointerUp);\n\n    // when buttons becoming disabled during long-press\n    this.observer?.disconnect();\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (mutation.attributeName === 'disabled') {\n          this.stopSpinningAndCleanUp();\n        }\n      });\n    });\n    this.observer.observe(this.host, { attributes: true });\n  }\n\n  private handlePointerUp = (pointerUp?: PointerEvent) => {\n    pointerUp?.preventDefault();\n    pointerUp?.stopPropagation();\n\n    // we did not start to spin\n    if (this.timeout) {\n      this.callbacks.start();\n    }\n\n    this.stopSpinningAndCleanUp();\n\n    this.callbacks.end();\n    document.removeEventListener('pointerup', this.handlePointerUp);\n  };\n\n  /**\n   * Stop the spinning and clean up all timer and observer\n   */\n  private stopSpinningAndCleanUp() {\n    // stop spinning\n    clearInterval(this.interval);\n\n    clearTimeout(this.timeout);\n    this.observer?.disconnect();\n  }\n}\n\nexport const longPress = directive(LongPressDirective);\n\nexport type { LongPressDirective };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.UTPP6KE2.js → chunk.7RHGZPLP.js}

@@ -1,6 +1,6 @@
 import {
   SynCheckbox
-} from "./chunk.RAU2GK6I.js";
+} from "./chunk.KTCGXZQ4.js";
 
 // src/components/checkbox/checkbox.ts
 var checkbox_default = SynCheckbox;
@@ -9,4 +9,4 @@ SynCheckbox.define("syn-checkbox");
 export {
   checkbox_default
 };
-//# sourceMappingURL=chunk.UTPP6KE2.js.map
+//# sourceMappingURL=chunk.7RHGZPLP.js.map