fix(web-components/inputs): add explicit autofocus property

packages/web-components/src/base-input/base-input.ts

@@ -65,6 +65,14 @@ export abstract class BaseInput extends BaseClass {
   @property({ type: String })
   public labelledBy = "";
 
+  /**
+   * Indicates that the element should be focused on page load.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  @property({ type: Boolean })
+  public override autofocus = false;
+
   constructor() {
     super();
 

packages/web-components/src/button/base/base-button.ts

@@ -14,6 +14,7 @@ import {
   type FormSubmitterType,
   internals,
   isFocusable,
+  runAfterRepaint,
   setupFormSubmitter,
   withElementInternals,
   withFocusable,
@@ -68,6 +69,14 @@ export abstract class BaseButton extends BaseClass implements FormSubmitter {
   @property()
   public size: "sm" | "md" | "lg" = "md";
 
+  /**
+   * Indicates that the element should be focused on page load.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  @property({ type: Boolean })
+  public override autofocus = false;
+
   /**
    * The variant style of the button.
    * @default "primary"
@@ -98,6 +107,16 @@ export abstract class BaseButton extends BaseClass implements FormSubmitter {
     this._updateFocusability();
   }
 
+  protected override firstUpdated(changed: PropertyValues<this>): void {
+    super.firstUpdated(changed);
+
+    runAfterRepaint(() => {
+      if (!this.autofocus) return;
+
+      this.focus();
+    });
+  }
+
   protected override updated(changed: PropertyValues<this>) {
     super.updated(changed);
 

packages/web-components/src/button/icon-button/index.ts

@@ -18,6 +18,10 @@ export { Slots } from "./constants.ts";
  * @prop {boolean} [loading=false] - Whether the button is in a loading state.
  * @prop {'sm' | 'md' | 'lg'} [size='md'] - The size of the button.
  * @prop {'primary' | 'ghost' | 'naked' | 'elevated' | 'destructive' | 'brand'} [variant='primary'] - The variant style of the button.
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  */
 @customElement("tapsi-icon-button")
 export class TapsiIconButton extends IconButton {

packages/web-components/src/button/standard/index.ts

@@ -19,6 +19,10 @@ export { Slots } from "./constants.ts";
  * @prop {boolean} [loading=false] - Whether the button is in a loading state.
  * @prop {'sm' | 'md' | 'lg'} [size='md'] - The size of the button.
  * @prop {'primary' | 'ghost' | 'naked' | 'elevated' | 'destructive' | 'brand'} [variant='primary'] - The variant style of the button.
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  */
 @customElement("tapsi-button")
 export class TapsiButton extends Button {

packages/web-components/src/checkbox/index.ts

@@ -21,6 +21,10 @@ import { Checkbox } from "./checkbox.ts";
  * owning form can be submitted and will render an error state when
  * `reportValidity()` is invoked when value is empty.\
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  */
 @customElement("tapsi-checkbox")
 export class TapsiCheckbox extends Checkbox {

packages/web-components/src/file-input/file-input.ts

@@ -17,6 +17,7 @@
   logger,
   onReportValidity,
   redispatchEvent,
+  runAfterRepaint,
   toFaNumber,
   waitAMicrotask,
   withConstraintValidation,
@@ -52,7 +53,25 @@
    * - If `true`, a spinner will appear indicating the component is loading.
    * - If a number between 0 and 100, it shows the percentage of the loading state.
    */
-  @property()
+  @property({
+    converter: {
+      fromAttribute(value: string | null): boolean | number {
+        if (value === null) return false;
+        if (value === "") return true;
+
+        const numericValue = Number(value);
+
+        if (Number.isNaN(numericValue)) return true;
+
+        return numericValue;
+      },
+      toAttribute(value: boolean | number): string | null {
+        if (typeof value === "boolean") return value ? "true" : null;
+
+        return `${value}`;
+      },
+    },
+  })
   public loading: boolean | number = false;
 
   /**
@@ -161,6 +180,14 @@
   @property({ type: Boolean, reflect: true })
   public required = false;
 
+  /**
+   * Indicates that the element should be focused on page load.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  @property({ type: Boolean })
+  public override autofocus = false;
+
   @state()
   private _hasPlaceholderIconSlot = false;
 
@@ -196,6 +223,16 @@
     this._handleActivationClick = this._handleActivationClick.bind(this);
   }
 
+  protected override firstUpdated(changed: PropertyValues<this>): void {
+    super.firstUpdated(changed);
+
+    runAfterRepaint(() => {
+      if (!this.autofocus) return;
+
+      this.focus();
+    });
+  }
+
   protected override willUpdate(changed: PropertyValues<this>) {
     super.willUpdate(changed);
 
@@ -476,7 +513,7 @@
 
       if (isFileImage(file.name)) {
         return html`<img
-          src=${ifDefined(this._previewSrc)}
+          src=${this._previewSrc ?? nothing}
           alt="preview"
           class="preview"
         />`;
@@ -609,6 +646,8 @@
   }
 
   protected override render() {
+    console.log(this.loading);
+
     const rootClasses = classMap({
       root: true,
       disabled: this.disabled,

packages/web-components/src/file-input/index.ts

@@ -76,6 +76,10 @@ export * from "./events.ts";
  * value.
  *
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  *
  * @method reset
  * @description - resets the input value

packages/web-components/src/pin-input/index.ts

@@ -36,6 +36,10 @@ export * from "./events.ts";
  * should provide.
  *
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  * @prop {string} [supporting-text=""] -
  * Conveys additional information below the text input, such as how it should
  * be used.

packages/web-components/src/pin-input/pin-input.ts

@@ -100,6 +100,14 @@ export class PinInput extends BaseClass {
   @property({ type: String })
   public autocomplete: AutoFill = "";
 
+  /**
+   * Indicates that the element should be focused on page load.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  @property({ type: Boolean })
+  public override autofocus = false;
+
   /**
    * Conveys additional information below the input, such as how it should
    * be used.

packages/web-components/src/pinwheel/index.ts

@@ -45,6 +45,10 @@ export class TapsiPinwheelItem extends PinwheelItem {
  * Identifies the element (or elements) that labels the pinwheel.
  *
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  *
  * @fires {Event} change - Fires when the pinwheel selected state changes (bubbles).
  */

packages/web-components/src/pinwheel/pinwheel.ts

@@ -60,6 +60,14 @@ export class Pinwheel extends BaseClass {
   @property({ type: String })
   public labelledBy = "";
 
+  /**
+   * Indicates that the element should be focused on page load.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  @property({ type: Boolean })
+  public override autofocus = false;
+
   /**
    * The value of the currently selected item.
    */
@@ -134,6 +142,12 @@ export class Pinwheel extends BaseClass {
         "warning",
       );
     }
+
+    runAfterRepaint(() => {
+      if (!this.autofocus) return;
+
+      this.focus();
+    });
   }
 
   protected override updated(changed: PropertyValues<this>) {

packages/web-components/src/radio/index.ts

@@ -19,6 +19,10 @@ import { Radio } from "./radio.ts";
  * owning form can be submitted and will render an error state when
  * `reportValidity()` is invoked when value is empty.\
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  */
 @customElement("tapsi-radio")
 export class TapsiRadio extends Radio {

packages/web-components/src/rate-slider/index.ts

@@ -31,6 +31,10 @@ import { RateSlider } from "./rate-slider.ts";
  * Defaults to "0".
  *
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  *
  * @method stepDown
  * @description - Decrements the value of the input.

packages/web-components/src/rate-slider/rate-slider.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { map } from "lit/directives/map.js";
@@ -14,6 +14,7 @@ import {
   isActivationClick,
   isSsr,
   logger,
+  runAfterRepaint,
   toFaNumber,
   waitAMicrotask,
   withElementInternals,
@@ -96,6 +97,14 @@ export class RateSlider extends BaseClass {
   @property({ type: String })
   public min = `${DEFAULT_MIN}`;
 
+  /**
+   * Indicates that the element should be focused on page load.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  @property({ type: Boolean })
+  public override autofocus = false;
+
   @query("#root")
   private _root!: HTMLElement | null;
 
@@ -128,6 +137,16 @@ export class RateSlider extends BaseClass {
     }
   }
 
+  protected override firstUpdated(changed: PropertyValues<this>): void {
+    super.firstUpdated(changed);
+
+    runAfterRepaint(() => {
+      if (!this.autofocus) return;
+
+      this.focus();
+    });
+  }
+
   public override connectedCallback() {
     super.connectedCallback();
     // eslint-disable-next-line @typescript-eslint/no-misused-promises

packages/web-components/src/stepper/index.ts

@@ -44,6 +44,10 @@ import { Stepper } from "./stepper.ts";
  * Defaults to "1".
  *
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  *
  * @fires {Event} change - Fires when value changes (bubbles).
  */

packages/web-components/src/stepper/stepper.ts

@@ -12,6 +12,7 @@ import {
   isActivationClick,
   isSsr,
   logger,
+  runAfterRepaint,
   toFaNumber,
   waitAMicrotask,
   withElementInternals,
@@ -126,6 +127,14 @@ export class Stepper extends BaseClass {
   @property({ type: String })
   public step = "1";
 
+  /**
+   * Indicates that the element should be focused on page load.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+   */
+  @property({ type: Boolean })
+  public override autofocus = false;
+
   constructor() {
     super();
 
@@ -163,6 +172,16 @@ export class Stepper extends BaseClass {
     this.removeEventListener("keydown", this._handleKeyDown);
   }
 
+  protected override firstUpdated(changed: PropertyValues<this>): void {
+    super.firstUpdated(changed);
+
+    runAfterRepaint(() => {
+      if (!this.autofocus) return;
+
+      this.focus();
+    });
+  }
+
   protected override updated(changed: PropertyValues<this>) {
     super.updated(changed);
 

packages/web-components/src/switch/index.ts

@@ -19,6 +19,10 @@ import { Switch } from "./switch.ts";
  * owning form can be submitted and will render an error state when
  * `reportValidity()` is invoked when value is empty.\
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  */
 @customElement("tapsi-switch")
 export class TapsiSwitch extends Switch {

packages/web-components/src/text-area/index.ts

@@ -95,6 +95,10 @@ export { BaseTextInputSlots as Slots };
  * appropriate virtual keyboard.
  *
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+ * @prop {boolean} [autofocus=false] -
+ * Indicates that the element should be focused on page load.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
  *
  * @slot leading-icon - the leading icon slot of the text-area
  * @slot trailing - the trailing slot of the text-area

packages/web-components/src/text-area/text-area.ts

@@ -72,7 +72,6 @@ export class TextArea extends BaseTextInput {
         aria-describedby=${ariaDescribedBy}
         ?required=${!!this.required}
         ?disabled=${this.disabled}
-        ?autofocus=${this.autofocus}
         ?readonly=${this.readOnly}
         cols=${this.cols || nothing}
         rows=${this.rows || nothing}