calcite-input-text doesn't show anything when pattern is not matched

[MikeTschudi]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

The sample line

 <calcite-input-text id="srcId" max-length="32" min-length="32" pattern="[a-f0-9A-F]{32}" placeholder="Item, group, or folder id"></calcite-input-text>

only honors the max-length restriction. There's no lack-of-validity display when the text is too short or doesn't match the pattern. (Also tried with "^" prefix and "$" suffix.)

Expected Behavior

Highlights like we see in MDN, e.g., if value is too short:

MDN playground source:

  <label>
    Enter AGO id <input
      pattern="[a-f0-9A-F]{32}"
      size="32"
    />
  </label>

Reproduction Sample

https://codepen.io/miketschudi/pen/GgKEaPY?editors=100

Reproduction Steps

above CodePen is for 3.0.0-next.81. For 2.13.2,
https://codepen.io/miketschudi/pen/WbeOBLV?editors=100

Reproduction Version

3.0.0-next.81

Relevant Info

Windows 11 Enterprise using Chrome 131.0

Here's what the component shows when given "not an id!" in the calcite-input-text field:

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

no effect yet--just found this in a prototype for future work

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Solutions