chore: cherry-pick patch commits to main

packages/calcite-components/.stylelintrc.cjs

@@ -1,13 +1,7 @@
 // @ts-check
 
 // ⚠️ AUTO-GENERATED CODE - DO NOT EDIT
-const customFunctions = [
-  "get-trailing-text-input-padding",
-  "medium-modular-scale",
-  "modular-scale",
-  "scale-duration",
-  "small-modular-scale"
-];
+const customFunctions = [];
 // ⚠️ END OF AUTO-GENERATED CODE
 
 const scssPatternRules = [

packages/calcite-components/src/assets/styles/includes.scss

@@ -153,7 +153,11 @@
   }
 }
 
-@mixin close-button($size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)", $padding: "0") {
+@mixin close-button(
+  $size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)",
+  $padding: "0",
+  $color: "var(--calcite-close-icon-color, var(--calcite-color-text-1))"
+) {
   .close {
     @apply border-none
       cursor-pointer
@@ -168,7 +172,7 @@
     display: flex;
     align-content: center;
     justify-content: center;
-    color: var(--calcite-close-icon-color, var(--calcite-color-text-1));
+    color: #{$color};
     block-size: #{$size};
     inline-size: #{$size};
     padding: #{$padding};

packages/calcite-components/src/components/accordion-item/accordion-item.scss

@@ -3,7 +3,7 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-accordion-border-color: [Deprecate] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.
+ * @prop --calcite-accordion-border-color: [Deprecated] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.
  * @prop --calcite-accordion-item-background-color: Specifies the component's background color.
  * @prop --calcite-accordion-item-border-color: Specifies the component's border color.
  * @prop --calcite-accordion-item-content-space: Specifies the component's padding.

packages/calcite-components/src/components/chip/chip.scss

@@ -28,6 +28,7 @@
 :host([appearance="outline"]),
 :host([appearance="outline-fill"]) {
   .container {
+    --calcite-internal-chip-close-icon-color: var(--calcite-color-text-3);
     color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
   }
 
@@ -42,10 +43,6 @@
   &:host([kind="neutral"]) .container {
     border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1));
   }
-
-  .close {
-    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));
-  }
 }
 :host([appearance="outline"]) .container {
   @apply bg-transparent;
@@ -86,11 +83,9 @@
   }
 }
 :host([kind="neutral"]) .container {
-  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
+  --calcite-internal-chip-close-icon-color: var(--calcite-color-text-3);
 
-  .close {
-    color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-color-text-3)));
-  }
+  color: var(--calcite-chip-text-color, var(--calcite-color-text-1));
 }
 
 :host([selected]) .select-icon {
@@ -391,14 +386,17 @@
   inline-size: var(--calcite-internal-chip-icon-size, 1.5rem /* 24px */);
 }
 
-.close {
-  color: var(--calcite-chip-close-icon-color, var(--calcite-close-icon-color, currentColor));
-}
-
 slot[name="image"]::slotted(*) {
   @apply rounded-half flex h-full w-full overflow-hidden;
 }
 
-@include close-button();
+@include close-button(
+  var(--calcite-internal-close-size, 1.5rem),
+  0,
+  var(
+    --calcite-chip-close-icon-color,
+    var(--calcite-close-icon-color, var(--calcite-internal-chip-close-icon-color, var(--calcite-color-text-1)))
+  )
+);
 @include disabled();
 @include base-component();

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -533,6 +533,49 @@ describe("calcite-combobox", () => {
       expect(visibleItems.length).toBe(1);
       expect(await visibleItems[0].getProperty("value")).toBe("1");
     });
+
+    it("should restore filter text when no items are filtered", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-combobox placeholder="Select a field" selection-mode="single-persist">
+          <calcite-combobox-item
+            id="one"
+            value="Natural Resources"
+            text-label="Natural Resources"
+            selected
+          ></calcite-combobox-item>
+          <calcite-combobox-item id="two" value="Agriculture" text-label="Agriculture"></calcite-combobox-item>
+          <calcite-combobox-item id="three" value="Transportation" text-label="Transportation"></calcite-combobox-item>
+        </calcite-combobox>
+      `);
+
+      const combobox = await page.find("calcite-combobox");
+      const input = await page.find("calcite-combobox >>> input");
+      await combobox.click();
+      await page.waitForChanges();
+      await combobox.type("an");
+      await page.waitForChanges();
+      await new Promise((res) => setTimeout(() => res(true), DEBOUNCE.filter));
+      const one = await page.find("#one");
+      const two = await page.find("#two");
+      const three = await page.find("#three");
+
+      expect(await one.isVisible()).toBeFalsy();
+      expect(await two.isVisible()).toBeFalsy();
+      expect(await three.isVisible()).toBeTruthy();
+
+      await combobox.type("m");
+      await new Promise((res) => setTimeout(() => res(true), DEBOUNCE.filter));
+      await page.waitForChanges();
+      expect(await one.isVisible()).toBeFalsy();
+      expect(await two.isVisible()).toBeFalsy();
+      expect(await three.isVisible()).toBeFalsy();
+
+      expect(await combobox.getProperty("value")).toBe("Natural Resources");
+      expect((await combobox.getProperty("filteredItems")).length).toBe(0);
+      expect(await input.getProperty("value")).toBe("anm");
+      expect(input).not.toHaveClass(`${CSS.inputHidden}`);
+    });
   });
 
   it("should control max items displayed", async () => {

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

@@ -1600,7 +1600,7 @@ export class Combobox
     const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
     const single = isSingleLike(selectionMode);
     const selectedItem = selectedItems[0];
-    const showLabel = !open && single && !!selectedItem;
+    const showLabel = !open && single && !!selectedItem && !this.filterText;
 
     return (
       <span
@@ -1633,7 +1633,7 @@ export class Combobox
           class={{
             [CSS.input]: true,
             "input--single": true,
-            "input--hidden": showLabel,
+            [CSS.inputHidden]: showLabel,
             "input--icon": this.showingInlineIcon && !!this.placeholderIcon,
           }}
           data-test-id="input"

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

@@ -4,6 +4,7 @@ export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 
 export const CSS = {
   input: "input",
+  inputHidden: "input--hidden",
   chipInvisible: "chip--invisible",
   selectionDisplayFit: "selection-display-fit",
   selectionDisplaySingle: "selection-display-single",

packages/calcite-components/src/components/dialog/dialog.e2e.ts

@@ -921,6 +921,17 @@ describe("calcite-dialog", () => {
     expect(await alert.getProperty("embedded")).toBe(true);
   });
 
+  it("should not set transform when not dragEnabled or resizable", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-dialog open> test </calcite-dialog>`);
+    await skipAnimations(page);
+    await page.setViewport({ width: 1200, height: 1200 });
+    await page.waitForChanges();
+
+    const container = await page.find(`calcite-dialog >>> .${CSS.dialog}`);
+    expect((await container.getComputedStyle()).transform).toBe("none");
+  });
+
   describe("keyboard movement", () => {
     it("should move properly via arrow keys", async () => {
       const page = await newE2EPage();
@@ -931,19 +942,19 @@ describe("calcite-dialog", () => {
       await page.setViewport({ width: 1200, height: 1200 });
       await page.waitForChanges();
       const container = await page.find(`calcite-dialog >>> .${CSS.dialog}`);
-      expect((await container.getComputedStyle()).transform).toBe("matrix(1, 0, 0, 1, 0, 0)");
+      expect((await container.getComputedStyle()).transform).toBe("none");
 
       await dispatchDialogKeydown({ page, key: "ArrowDown", shiftKey: false });
       expect((await container.getComputedStyle()).transform).toBe(`matrix(1, 0, 0, 1, 0, ${dialogDragStep})`);
 
       await dispatchDialogKeydown({ page, key: "ArrowUp", shiftKey: false });
-      expect((await container.getComputedStyle()).transform).toBe("matrix(1, 0, 0, 1, 0, 0)");
+      expect((await container.getComputedStyle()).transform).toBe("none");
 
       await dispatchDialogKeydown({ page, key: "ArrowLeft", shiftKey: false });
       expect((await container.getComputedStyle()).transform).toBe(`matrix(1, 0, 0, 1, -${dialogDragStep}, 0)`);
 
       await dispatchDialogKeydown({ page, key: "ArrowRight", shiftKey: false });
-      expect((await container.getComputedStyle()).transform).toBe("matrix(1, 0, 0, 1, 0, 0)");
+      expect((await container.getComputedStyle()).transform).toBe("none");
     });
   });
 

packages/calcite-components/src/components/dialog/dialog.stories.ts

@@ -376,8 +376,16 @@ const themedStyle = html`--calcite-dialog-scrim-background-color: purple; --calc
 --calcite-dialog-content-space: 50px; --calcite-dialog-offset-x: 50px; --calcite-dialog-offset-y: -30px;`;
 
 export const withShellInside = (): string =>
-  html`<calcite-dialog open modal heading="heading" description="description" scale="m" width-scale="l">
-    <calcite-shell>
+  html`<calcite-dialog
+    open
+    modal
+    heading="heading"
+    description="description"
+    scale="m"
+    width-scale="l"
+    style="--calcite-dialog-content-space: 0;"
+  >
+    <calcite-shell style="position:relative">
       <calcite-shell-panel slot="panel-start">
         <calcite-action-bar slot="action-bar" expanded>
           <calcite-action-group>

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

@@ -605,18 +605,26 @@ export class Dialog
       dragPosition: { x, y },
       resizePosition,
       transitionEl,
+      dragEnabled,
+      resizable,
     } = this;
 
     if (!transitionEl) {
       return;
     }
 
+    if (!dragEnabled && !resizable) {
+      transitionEl.style.transform = null;
+      return;
+    }
+
     const { top, right, bottom, left } = this.getAdjustedResizePosition(resizePosition);
 
     const translateX = Math.round(x + left + right);
     const translateY = Math.round(y + top + bottom);
 
-    transitionEl.style.transform = `translate(${translateX}px, ${translateY}px)`;
+    transitionEl.style.transform =
+      translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
   }
 
   private updateSize({

packages/calcite-components/src/components/notice/notice.e2e.ts

@@ -36,7 +36,9 @@ describe("calcite-notice", () => {
   });
 
   describe("openClose", () => {
-    openClose("calcite-notice");
+    openClose("calcite-notice", {
+      collapsedOnClose: "vertical",
+    });
   });
 
   describe("slots", () => {

packages/calcite-components/src/components/notice/notice.scss

@@ -78,6 +78,7 @@
     flex
     w-full
     opacity-0;
+  overflow: hidden;
   max-block-size: 0;
   transition-property: opacity, max-block-size;
   transition-duration: var(--calcite-animation-timing);
@@ -104,6 +105,7 @@
     max-h-full
     items-center
     opacity-100;
+  overflow: visible;
 }
 
 @include slotted("title", "*", ".container") {

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

@@ -164,8 +164,7 @@
   items-stretch
   overflow-auto
   h-full
-  focus-base
-  relative;
+  focus-base;
   padding: var(--calcite-panel-content-space, 0);
   background: var(--calcite-panel-background-color, var(--calcite-color-background));
 }

packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx

@@ -6,9 +6,17 @@ import {
 } from "../../utils/conditionalSlot";
 import { getSlotted } from "../../utils/dom";
 import { Position, Scale } from "../interfaces";
+import { logger } from "../../utils/logger";
 import { CSS, SLOTS } from "./resources";
 
+logger.deprecated("component", {
+  name: "shell-center-row",
+  removalVersion: 4,
+  suggested: "shell-panel",
+});
+
 /**
+ * @deprecated Use the `calcite-shell-panel` component instead.
  * @slot - A slot for adding content to the `calcite-shell-panel`.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the `calcite-shell-panel`.
  */