chore(linting): restore some ESLint rules

packages/calcite-components/.eslintrc.cjs

@@ -42,16 +42,13 @@ module.exports = {
         message: "Use keydown instead for consistent interaction behavior (e.g., closing, moving focus, etc.).",
       },
     ],
-    "@stencil-community/decorators-context": "off",
+    "@esri/calcite-components/strict-boolean-attributes": "off",
     "@stencil-community/decorators-style": "warn",
     "@stencil-community/no-unused-watch": "off",
     "@stencil-community/own-methods-must-be-private": "off",
     "@stencil-community/own-props-must-be-private": "off",
     "@stencil-community/prefer-vdom-listener": "warn",
     "@stencil-community/required-jsdoc": "off",
-    "@stencil-community/strict-boolean-conditions": "off",
-    "@stencil-community/reserved-member-names": "off",
-    "@stencil-community/ban-exported-const-enums": "off",
     "@typescript-eslint/no-duplicate-enum-values": "off",
     "@typescript-eslint/ban-types": "warn",
     "@typescript-eslint/explicit-module-boundary-types": [

packages/calcite-components/src/components/action-bar/action-bar.tsx

@@ -378,8 +378,8 @@ export class ActionBar
   };
 
   handleTooltipSlotChange = (event: Event): void => {
-    const tooltips = slotChangeGetAssignedElements(event).filter(
-      (el) => el?.matches("calcite-tooltip"),
+    const tooltips = slotChangeGetAssignedElements(event).filter((el) =>
+      el?.matches("calcite-tooltip"),
     ) as HTMLCalciteTooltipElement[];
 
     this.expandTooltip = tooltips[0];

packages/calcite-components/src/components/action-pad/action-pad.tsx

@@ -244,16 +244,16 @@ export class ActionPad
   }
 
   handleDefaultSlotChange = (event: Event): void => {
-    const groups = slotChangeGetAssignedElements(event).filter(
-      (el) => el?.matches("calcite-action-group"),
+    const groups = slotChangeGetAssignedElements(event).filter((el) =>
+      el?.matches("calcite-action-group"),
     ) as HTMLCalciteActionGroupElement[];
 
     this.setGroupLayout(groups);
   };
 
   handleTooltipSlotChange = (event: Event): void => {
-    const tooltips = slotChangeGetAssignedElements(event).filter(
-      (el) => el?.matches("calcite-tooltip"),
+    const tooltips = slotChangeGetAssignedElements(event).filter((el) =>
+      el?.matches("calcite-tooltip"),
     ) as HTMLCalciteTooltipElement[];
 
     this.expandTooltip = tooltips[0];

packages/calcite-components/src/components/input-message/interfaces.ts

@@ -1,5 +1,5 @@
-export enum StatusIconDefaults {
-  valid = "check-circle",
-  invalid = "exclamation-mark-triangle",
-  idle = "information",
-}
+export const StatusIconDefaults = {
+  valid: "check-circle",
+  invalid: "exclamation-mark-triangle",
+  idle: "information",
+};

packages/calcite-components/src/components/input-number/input-number.tsx

@@ -3,6 +3,7 @@ import {
   Element,
   Event,
   EventEmitter,
+  forceUpdate,
   h,
   Host,
   Method,
@@ -95,6 +96,19 @@ export class InputNumber
     TextualInputComponent,
     LoadableComponent
 {
+  //--------------------------------------------------------------------------
+  //
+  //  Global attributes
+  //
+  //--------------------------------------------------------------------------
+
+  @Watch("autofocus")
+  @Watch("enterkeyhint")
+  @Watch("inputmode")
+  handleGlobalAttributesChanged(): void {
+    forceUpdate(this);
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Properties
@@ -104,13 +118,6 @@ export class InputNumber
   /** Specifies the text alignment of the component's value. */
   @Prop({ reflect: true }) alignment: Extract<"start" | "end", Alignment> = "start";
 
-  /**
-   * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus.
-   *
-   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-   */
-  @Prop({ reflect: true }) autofocus = false;
-
   /**
    * When `true`, a clear button is displayed when the component has a value.
    */
@@ -274,22 +281,6 @@ export class InputNumber
    */
   @Prop() autocomplete: string;
 
-  /**
-   * Specifies the type of content to help devices display an appropriate virtual keyboard.
-   * Read the native attribute's documentation on MDN for more info.
-   *
-   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
-   */
-  @Prop() inputMode = "decimal";
-
-  /**
-   * Specifies the action label or icon for the Enter key on virtual keyboards.
-   * Read the native attribute's documentation on MDN for more info.
-   *
-   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
-   */
-  @Prop() enterKeyHint: string;
-
   /** Adds text to the end of the component.  */
   @Prop() suffixText: string;
 
@@ -1041,11 +1032,11 @@ export class InputNumber
       <input
         aria-label={getLabelText(this)}
         autocomplete={this.autocomplete}
-        autofocus={this.autofocus ? true : null}
+        autofocus={this.el.autofocus ? true : null}
         defaultValue={this.defaultValue}
         disabled={this.disabled ? true : null}
-        enterKeyHint={this.enterKeyHint}
-        inputMode={this.inputMode}
+        enterKeyHint={this.el.enterKeyHint}
+        inputMode={this.el.inputMode}
         key="localized-input"
         maxLength={this.maxLength}
         minLength={this.minLength}

packages/calcite-components/src/components/input-text/input-text.tsx

@@ -3,6 +3,7 @@ import {
   Element,
   Event,
   EventEmitter,
+  forceUpdate,
   h,
   Host,
   Method,
@@ -71,6 +72,19 @@ export class InputText
     TextualInputComponent,
     T9nComponent
 {
+  //--------------------------------------------------------------------------
+  //
+  //  Global attributes
+  //
+  //--------------------------------------------------------------------------
+
+  @Watch("autofocus")
+  @Watch("enterkeyhint")
+  @Watch("inputmode")
+  handleGlobalAttributesChanged(): void {
+    forceUpdate(this);
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Properties
@@ -80,13 +94,6 @@ export class InputText
   /** Specifies the text alignment of the component's value. */
   @Prop({ reflect: true }) alignment: Extract<"start" | "end", Alignment> = "start";
 
-  /**
-   * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus.
-   *
-   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-   */
-  @Prop({ reflect: true }) autofocus = false;
-
   /**
    * When `true`, a clear button is displayed when the component has a value.
    */
@@ -191,22 +198,6 @@ export class InputText
    */
   @Prop() autocomplete: string;
 
-  /**
-   * Specifies the type of content to help devices display an appropriate virtual keyboard.
-   * Read the native attribute's documentation on MDN for more info.
-   *
-   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
-   */
-  @Prop() inputMode = "text";
-
-  /**
-   * Specifies the action label or icon for the Enter key on virtual keyboards.
-   * Read the native attribute's documentation on MDN for more info.
-   *
-   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
-   */
-  @Prop() enterKeyHint: string;
-
   /**
    * Specifies a regex pattern the component's `value` must match for validation.
    * Read the native attribute's documentation on MDN for more info.
@@ -624,15 +615,15 @@ export class InputText
       <input
         aria-label={getLabelText(this)}
         autocomplete={this.autocomplete}
-        autofocus={this.autofocus ? true : null}
+        autofocus={this.el.autofocus ? true : null}
         class={{
           [CSS.editingEnabled]: this.editingEnabled,
           [CSS.inlineChild]: !!this.inlineEditableEl,
         }}
         defaultValue={this.defaultValue}
         disabled={this.disabled ? true : null}
-        enterKeyHint={this.enterKeyHint}
-        inputMode={this.inputMode}
+        enterKeyHint={this.el.enterKeyHint}
+        inputMode={this.el.inputMode}
         maxLength={this.maxLength}
         minLength={this.minLength}
         name={this.name}

packages/calcite-components/src/components/input/input.tsx

@@ -3,6 +3,7 @@ import {
   Element,
   Event,
   EventEmitter,
+  forceUpdate,
   h,
   Host,
   Method,
@@ -91,6 +92,19 @@ export class Input
     NumericInputComponent,
     TextualInputComponent
 {
+  //--------------------------------------------------------------------------
+  //
+  //  Global attributes
+  //
+  //--------------------------------------------------------------------------
+
+  @Watch("autofocus")
+  @Watch("enterkeyhint")
+  @Watch("inputmode")
+  handleGlobalAttributesChanged(): void {
+    forceUpdate(this);
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Properties
@@ -100,13 +114,6 @@ export class Input
   /** Specifies the text alignment of the component's value. */
   @Prop({ reflect: true }) alignment: Extract<"start" | "end", Alignment> = "start";
 
-  /**
-   * When `true`, the component is focused on page load. Only one element can contain `autofocus`. If multiple elements have `autofocus`, the first element will receive focus.
-   *
-   * @mdn [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
-   */
-  @Prop({ reflect: true }) autofocus = false;
-
   /**
    * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
    */
@@ -288,22 +295,6 @@ export class Input
    */
   @Prop() multiple = false;
 
-  /**
-   * Specifies the type of content to help devices display an appropriate virtual keyboard.
-   * Read the native attribute's documentation on MDN for more info.
-   *
-   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)
-   */
-  @Prop() inputMode = "text";
-
-  /**
-   * Specifies the action label or icon for the Enter key on virtual keyboards.
-   * Read the native attribute's documentation on MDN for more info.
-   *
-   * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)
-   */
-  @Prop() enterKeyHint: string;
-
   /** Adds text to the end of the component. */
   @Prop() suffixText: string;
 
@@ -1130,11 +1121,11 @@ export class Input
           accept={this.accept}
           aria-label={getLabelText(this)}
           autocomplete={this.autocomplete}
-          autofocus={this.autofocus ? true : null}
+          autofocus={this.el.autofocus ? true : null}
           defaultValue={this.defaultValue}
           disabled={this.disabled ? true : null}
-          enterKeyHint={this.enterKeyHint}
-          inputMode={this.inputMode}
+          enterKeyHint={this.el.enterKeyHint}
+          inputMode={this.el.inputMode}
           key="localized-input"
           maxLength={this.maxLength}
           minLength={this.minLength}
@@ -1162,15 +1153,15 @@ export class Input
               accept={this.accept}
               aria-label={getLabelText(this)}
               autocomplete={this.autocomplete}
-              autofocus={this.autofocus ? true : null}
+              autofocus={this.el.autofocus ? true : null}
               class={{
                 [CSS.editingEnabled]: this.editingEnabled,
                 [CSS.inlineChild]: !!this.inlineEditableEl,
               }}
               defaultValue={this.defaultValue}
               disabled={this.disabled ? true : null}
-              enterKeyHint={this.enterKeyHint}
-              inputMode={this.inputMode}
+              enterKeyHint={this.el.enterKeyHint}
+              inputMode={this.el.inputMode}
               max={this.maxString}
               maxLength={this.maxLength}
               min={this.minString}

packages/calcite-components/src/components/list-item/utils.ts

@@ -19,8 +19,8 @@ export function getListItemChildren(slotEl: HTMLSlotElement): HTMLCalciteListIte
     .map((group) => Array.from(group.querySelectorAll(listItemSelector)))
     .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
 
-  const listItemChildren = assignedElements.filter(
-    (el) => el?.matches(listItemSelector),
+  const listItemChildren = assignedElements.filter((el) =>
+    el?.matches(listItemSelector),
   ) as HTMLCalciteListItemElement[];
 
   const listItemListChildren = (assignedElements.filter((el) => el?.matches(listSelector)) as HTMLCalciteListElement[])

packages/calcite-components/src/components/panel/panel.tsx

@@ -303,8 +303,8 @@ export class Panel
   };
 
   handleActionBarSlotChange = (event: Event): void => {
-    const actionBars = slotChangeGetAssignedElements(event).filter(
-      (el) => el?.matches("calcite-action-bar"),
+    const actionBars = slotChangeGetAssignedElements(event).filter((el) =>
+      el?.matches("calcite-action-bar"),
     ) as HTMLCalciteActionBarElement[];
 
     actionBars.forEach((actionBar) => (actionBar.layout = "horizontal"));

packages/calcite-components/src/components/pick-list-item/pick-list-item.tsx

@@ -91,7 +91,7 @@ export class PickListItem
    *
    * @see [ICON_TYPES](https://github.com/Esri/calcite-design-system/blob/main/src/components/pick-list/resources.ts#L5)
    */
-  @Prop({ reflect: true }) icon: ICON_TYPES | null = null;
+  @Prop({ reflect: true }) icon: typeof ICON_TYPES | null = null;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;

packages/calcite-components/src/components/pick-list/pick-list.tsx

@@ -296,7 +296,7 @@ export class PickList<
   //
   // --------------------------------------------------------------------------
 
-  getIconType(): ICON_TYPES {
+  getIconType(): typeof ICON_TYPES {
     return this.multiple ? ICON_TYPES.square : ICON_TYPES.circle;
   }
 

packages/calcite-components/src/components/pick-list/resources.ts

@@ -2,11 +2,12 @@ export const CSS = {
   sticky: "sticky-pos",
 };
 
-export enum ICON_TYPES {
-  circle = "circle",
-  square = "square",
-  grip = "grip",
-}
+export const ICON_TYPES = {
+  circle: "circle",
+  square: "square",
+  grip: "grip",
+};
+
 export const TEXT = {
   filterResults: "Filter results",
 };

packages/calcite-components/src/components/resources.ts

@@ -1,7 +1,7 @@
-export enum KindIcons {
-  brand = "lightbulb",
-  danger = "exclamationMarkTriangle",
-  info = "information",
-  success = "checkCircle",
-  warning = "exclamationMarkTriangle",
-}
+export const KindIcons = {
+  brand: "lightbulb",
+  danger: "exclamationMarkTriangle",
+  info: "information",
+  success: "checkCircle",
+  warning: "exclamationMarkTriangle",
+};