fix(color-picker): ensure shorthand hex is expanded regardless of alp…

…ha channel presence (#11188)

**Related Issue:** #11187 

## Summary

Fixes a regression from
#9701, where only RGBA
shorthand hex values would be accepted by
`calcite-color-picker-hex-input`.

packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts

@@ -112,7 +112,7 @@ describe("calcite-color-picker-hex-input", () => {
 
   it("commits shorthand hex on blur", async () => {
     const defaultHex = "#b33f33";
-    const editedHex = "#aabbcc";
+    const expandedHex = "#aabbcc";
     const page = await newE2EPage();
     await page.setContent(`<calcite-color-picker-hex-input value='${defaultHex}'></calcite-color-picker-hex-input>`);
 
@@ -129,45 +129,53 @@ describe("calcite-color-picker-hex-input", () => {
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
-    expect(await input.getProperty("value")).toBe(editedHex);
+    expect(await input.getProperty("value")).toBe(expandedHex);
 
     await selectText(input);
     await page.keyboard.type("abcd");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
-    expect(await input.getProperty("value")).toBe(editedHex);
+    expect(await input.getProperty("value")).toBe(expandedHex);
   });
 
-  it("commits shorthand hexa on blur", async () => {
+  it("commits shorthand hex and hexa on blur", async () => {
     const defaultHexa = "#b33f33ff";
-    const editedHexa = "#aabbccdd";
+    const expandedHexa = "#aabbccdd";
+    const expandedHex = "#aabbccff";
     const page = await newE2EPage();
     await page.setContent(
       `<calcite-color-picker-hex-input alpha-channel value='${defaultHexa}'></calcite-color-picker-hex-input>`,
     );
 
     const input = await page.find(`calcite-color-picker-hex-input`);
     await selectText(input);
-    await page.keyboard.type("abc");
+    await page.keyboard.type("ab");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
     expect(await input.getProperty("value")).toBe(defaultHexa);
 
+    await selectText(input);
+    await page.keyboard.type("abc");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+
+    expect(await input.getProperty("value")).toBe(expandedHex);
+
     await selectText(input);
     await page.keyboard.type("abcd");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
-    expect(await input.getProperty("value")).toBe(editedHexa);
+    expect(await input.getProperty("value")).toBe(expandedHexa);
 
     await selectText(input);
     await page.keyboard.type("abcde");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
 
-    expect(await input.getProperty("value")).toBe(editedHexa);
+    expect(await input.getProperty("value")).toBe(expandedHexa);
   });
 
   it("normalizes value when initialized", async () => {

packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx

@@ -176,8 +176,9 @@ export class ColorPickerHexInput extends LitElement implements LoadableComponent
     const { allowEmpty, internalColor } = this;
     const willClearValue = allowEmpty && !inputValue;
     const isLonghand = isLonghandHex(hex);
+    const anyShorthand = isShorthandHex(hex, true) || isShorthandHex(hex, false);
 
-    if (isShorthandHex(hex, this.alphaChannel)) {
+    if (anyShorthand) {
       // ensure modified pasted hex values are committed since we prevent default to remove the # char.
       this.onHexInputChange();
     }