chore: Update Input types to have better support for inputs (#199)

deps: Update deps

---------

Co-authored-by: github-actions <github-actions@github.com>

Author: thelukewalton

package.json

@@ -44,7 +44,7 @@
     "analyze": "cem analyze",
     "build-storybook:with-output-dir": "yarn run build && storybook build -o ",
     "build": "yarn prebuild && node scripts/build.js",
-    "check": "npm-run-all analyze --parallel lint lint:lit-analyzer test docs",
+    "check": "yarn analyze && yarn lint && yarn lint:lit-analyzer && yarn test && yarn docs",
     "create": "cd scripts && node makeWebComponentTemplate.js",
     "docs": "npx typedoc --logLevel Warn",
     "lint:lit-analyzer": "lit-analyzer src/components/**/* src/stories/**/* src/mixins/**/* src/test/**/* src/utils/**/* --quiet",
@@ -92,8 +92,8 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^22.19.17",
     "@types/react": "^19.2.14",
-    "@typescript-eslint/eslint-plugin": "^8.58.0",
-    "@typescript-eslint/parser": "^8.58.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.1",
+    "@typescript-eslint/parser": "^8.58.1",
     "@wc-toolkit/type-parser": "^1.2.0",
     "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
@@ -113,15 +113,15 @@
     "eslint-plugin-tsdoc": "^0.4.0",
     "eslint-plugin-wc": "^2.2.1",
     "lit-analyzer": "^2.0.3",
-    "prettier": "3.8.1",
-    "react": "^19.2.4",
-    "sinon": "^21.0.3",
+    "prettier": "3.8.2",
+    "react": "^19.2.5",
+    "sinon": "^21.1.0",
     "storybook": "^8.6.18",
     "ts-lit-plugin": "^2.0.2",
     "ts-morph": "^25.0.1",
     "typedoc": "^0.28.18",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.58.0",
+    "typescript-eslint": "^8.58.1",
     "vite": "^6.4.2"
   },
   "dependencies": {
@@ -131,7 +131,7 @@
     "@web/test-runner-junit-reporter": "^0.8.0",
     "@zebra-fed/zeta-icons": "1.9.3",
     "lit": "^3.3.2",
-    "sinon": "^21.0.3"
+    "sinon": "^21.1.0"
   },
   "overrides": {
     "@storybook/blocks": {

src/components/checkbox/checkbox.ts

@@ -1,11 +1,9 @@
 import { customElement, property } from "lit/decorators.js";
-import { type InputType } from "../../mixins/form-field.js";
 import { BaseToggleFormElement } from "../base-toggle-form-element.js";
 import styles from "./checkbox.styles.js";
 import "../icon/icon.js";
 import { LitElement } from "lit";
-
-export type CheckboxType = Extract<InputType, "checkbox">;
+import type { ZetaInputType } from "../../mixins/form-field.js";
 
 // TODO: When should change event fire? Does not seem to fire at all? Unless it needs to be in a form?
 
@@ -37,7 +35,7 @@ export class ZetaCheckbox extends BaseToggleFormElement {
     this.internals.role = "checkbox";
   }
 
-  override type: CheckboxType = "checkbox";
+  override type: Extract<ZetaInputType, "checkbox"> = "checkbox";
 
   override value = "on";
 

src/components/dropdown/dropdown-menu/dropdown-menu-button.ts

@@ -2,7 +2,7 @@ import { customElement, eventOptions, property, query, state } from "lit/decorat
 import styles from "./dropdown-menu-button.styles.js";
 import { html, LitElement } from "lit";
 import { Contourable, Flavored, Size } from "../../../mixins/mixins.js";
-import { FormField, type InputType } from "../../../mixins/form-field.js";
+import { FormField, type ZetaInputType } from "../../../mixins/form-field.js";
 import type { ZetaDroppable } from "../droppable.js";
 import "../../button/button.js";
 import "../../radio-button/radio-button.js";
@@ -14,6 +14,7 @@ import { ZetaDropdownEvent } from "../../../events.js";
 import type { ButtonFlavor } from "../../button/button.js";
 
 export type ZetaDropdownItem = { label: string; icon?: ZetaIconName; checked?: boolean; disabled?: boolean; onClick?: () => void };
+export type ZetaDropdownType = Extract<ZetaInputType, "text-dropdown" | "checkbox-dropdown" | "radio-dropdown">;
 
 //TODO check to see if this works with keyboard input
 //     include check to see if input event is fired too
@@ -28,7 +29,7 @@ export type ZetaDropdownItem = { label: string; icon?: ZetaIconName; checked?: b
  * @property {boolean} open - Controls the state of the dropdown menu. Default is false.
  * @property {Array<ZetaDropdownItem>} items - Array of items to populate the dropdown. Includes label, icon (optional), checked (optional), disabled (optional), and onClick (optional) properties.
  * @property {ButtonFlavor} flavor - The flavor of the dropdown button. Default is "primary".
- * @property {InputType} type - The type of dropdown. Options are "text-dropdown", "checkbox-dropdown", and "radio-dropdown". Default is "text-dropdown".
+ * @property {ZetaDropdownType} type - The type of dropdown. Options are "text-dropdown", "checkbox-dropdown", and "radio-dropdown". Default is "text-dropdown".
  * @property {string} name - The name of the dropdown menu button for form control. Default is "default".
  * @property {"left" | "right" | "bottom" | "top"} direction - The direction of the droppable relative to the anchor. Defaults to bottom if left undefined.
  *
@@ -74,7 +75,7 @@ export class ZetaDropdownMenuButton extends FormField(Contourable(Flavored(Size(
    * - "checkbox-dropdown" - A dropdown with checkboxes.
    * - "radio-dropdown" - A dropdown with radio buttons.
    */
-  @property({ type: String }) type: InputType = "text-dropdown";
+  @property({ type: String }) type: ZetaDropdownType = "text-dropdown";
 
   /** The name of the dropdown menu button for form control*/
   @property({ type: String }) name: string = "default";

src/components/radio-button/radio-button.ts

@@ -1,9 +1,9 @@
 import { customElement } from "lit/decorators.js";
-import { type InputType } from "../../mixins/form-field.js";
 
 import { BaseToggleFormElement } from "../base-toggle-form-element.js";
 import styles from "./radio-button.styles.js";
 import { RadioButtonController } from "./radio-button-controller.js";
+import type { ZetaInputType } from "../../mixins/form-field.js";
 
 /** Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
  *
@@ -20,7 +20,8 @@ export class ZetaRadioButton extends BaseToggleFormElement {
     this.internals.role = "radio";
     this.addController(this.radioButtonController);
   }
-  override type: InputType = "radio";
+  override type: Extract<ZetaInputType, "radio"> = "radio";
+
   override handleChange(event: Event): void {
     if (this.checked) super.handleChange(event); //Fires change Event only if checked.
     this.radioButtonController.handleChange();

src/components/search/search.ts

@@ -3,7 +3,7 @@ import { html, LitElement, nothing } from "lit";
 import styles from "./search.styles.js";
 import { Interactive, Size } from "../../mixins/mixins.js";
 import "../icon/icon.js";
-import { FormField, type InputType } from "../../mixins/form-field.js";
+import { FormField, type ZetaInputType } from "../../mixins/form-field.js";
 import { ContourableThree } from "../../mixins/contourable-three.js";
 
 //TODO onsubmit
@@ -25,7 +25,7 @@ import { ContourableThree } from "../../mixins/contourable-three.js";
  */
 @customElement("zeta-search")
 export class ZetaSearch extends FormField(Size(ContourableThree(Interactive(LitElement)))) {
-  type: InputType = "search";
+  override type: Extract<ZetaInputType, "search"> = "search";
 
   static override shadowRootOptions: ShadowRootInit = {
     ...LitElement.shadowRootOptions,

src/components/select-input/select-input.ts

@@ -1,7 +1,7 @@
 import { customElement, property, query, queryAssignedNodes, state } from "lit/decorators.js";
 import { html, LitElement, nothing, type PropertyValues, type TemplateResult } from "lit";
 
-import { FormField, type InputType } from "../../mixins/form-field.js";
+import { FormField, type ZetaInputType } from "../../mixins/form-field.js";
 import { Size } from "../../mixins/size.js";
 import { Contourable } from "../../mixins/contour.js";
 import { Interactive } from "../../mixins/interactive.js";
@@ -45,7 +45,7 @@ export class ZetaSelectInput extends FormField(Size(Contourable(Interactive(LitE
   static styles = [styles, super.styles ?? []];
 
   /** The type used in FormField mixin */
-  @property({ type: String, attribute: false }) type: InputType = "select";
+  override type: Extract<ZetaInputType, "select"> = "select";
 
   /** Whether field is in error state. */
   @property({ type: Boolean, reflect: true }) error = false;

src/components/slider/range-selector/range-selector.ts

@@ -7,7 +7,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { type ZetaRangeSliderEventDetail, ZetaRangeSliderEvent } from "../../../events.js";
 import "../../text-input/text-input.js";
 import "../slider.js";
-import { FormField, type InputType } from "../../../mixins/form-field.js";
+import { FormField, type ZetaInputType } from "../../../mixins/form-field.js";
 
 export type ZetaRangeValues = { min: number; max: number };
 
@@ -50,7 +50,7 @@ export class ZetaRangeSelector extends FormField(Contourable(LitElement)) {
 
   id = "hidden-range-selector-input";
 
-  type: InputType = "range-selector";
+  override type: Extract<ZetaInputType, "range-selector"> = "range-selector";
 
   @query("input#hidden-range-selector-input") hiddenInput!: HTMLInputElement;
   @query(".lower-input") lowerInput!: HTMLInputElement;

src/components/slider/slider-input-field/slider-input-field.ts

@@ -5,7 +5,7 @@ import styles from "./slider-input-field.styles.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import "../../text-input/text-input.js";
 import "../slider.js";
-import { FormField, type InputType } from "../../../mixins/form-field.js";
+import { FormField, type ZetaInputType } from "../../../mixins/form-field.js";
 import { ZetaSlider } from "../slider.js";
 
 //TODO: min / max dont seem to change values of slider correctly.
@@ -46,7 +46,7 @@ export class ZetaSliderInputField extends FormField(Contourable(LitElement)) {
   /**  Disables the input field. */
   @property({ type: Boolean, reflect: true }) disabled: boolean;
 
-  type: InputType = "slider";
+  override type: Extract<ZetaInputType, "slider"> = "slider";
 
   @query("input.contourable-target") input!: HTMLInputElement;
 

src/components/stepper-input/stepper-input.ts

@@ -1,5 +1,5 @@
 import { customElement, property, query } from "lit/decorators.js";
-import { FormField, type InputType } from "../../mixins/form-field.js";
+import { FormField, type ZetaInputType } from "../../mixins/form-field.js";
 import { html, LitElement, nothing } from "lit";
 import styles from "./stepper-input.styles.js";
 import { Contourable } from "../../mixins/mixins.js";
@@ -87,7 +87,7 @@ export class ZetaStepperInput extends FormField(Contourable(LitElement)) {
    */
   @property() errorText?: string;
 
-  type: InputType = "stepper";
+  override type: Extract<ZetaInputType, "stepper"> = "stepper";
 
   handleChange(_event: Event) {
     this.value = this.validateValue(this.value);

src/components/switch/switch.ts

@@ -4,7 +4,7 @@ import styles from "./switch.styles.js";
 import { type ZetaIconName } from "@zebra-fed/zeta-icons";
 import { BaseToggleFormElement } from "../base-toggle-form-element.js";
 import "../icon/icon.js";
-import type { CheckboxType } from "../checkbox/checkbox.js";
+import type { ZetaInputType } from "../../mixins/form-field.js";
 
 //TODO we dont have focus styles for switch
 //TODO Having icons smaller than the thumb is difficult to position
@@ -41,7 +41,8 @@ export class ZetaSwitch extends BaseToggleFormElement {
     super();
     this.internals.role = "switch";
   }
-  override type: CheckboxType = "checkbox";
+
+  override type: Extract<ZetaInputType, "checkbox"> = "checkbox";
 
   //TODO aria-checked -> on=true, off|mixed=false?
   //TODO aria-readonly