feat(autocomplete): add autocomplete component

packages/calcite-components/index.html

@@ -80,6 +80,13 @@ <h1 id="calcite-demo">Calcite demo</h1>
           </a>
         </div>
 
+        <div>
+          <a href="/src/demos/autocomplete.html">
+            <calcite-action scale="s" text="Autocomplete" alignment="start" text-enabled appearance="solid">
+            </calcite-action>
+          </a>
+        </div>
+
         <div>
           <a href="/src/demos/avatar.html">
             <calcite-action scale="s" text="Avatar" alignment="start" text-enabled appearance="solid"> </calcite-action>

packages/calcite-components/src/components/autocomplete-item-group/autocomplete-item-group.e2e.ts

@@ -0,0 +1,39 @@
+import { describe } from "vitest";
+import { defaults, hidden, renders, themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
+
+describe("calcite-autocomplete-item-group", () => {
+  describe("defaults", () => {
+    defaults("calcite-autocomplete-item-group", [
+      { propertyName: "disableSpacing", defaultValue: false },
+      { propertyName: "heading", defaultValue: undefined },
+      { propertyName: "label", defaultValue: undefined },
+      { propertyName: "scale", defaultValue: "m" },
+    ]);
+  });
+
+  describe("renders", () => {
+    renders("calcite-autocomplete-item-group", { display: "flex" });
+  });
+
+  describe("honors hidden attribute", () => {
+    hidden("calcite-autocomplete-item-group");
+  });
+
+  describe("theme", () => {
+    themed("calcite-autocomplete-item-group", {
+      "--calcite-autocomplete-background-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-autocomplete-border-color": {
+        shadowSelector: `.${CSS.heading}`,
+        targetProp: "borderBlockEndColor",
+      },
+      "--calcite-autocomplete-text-color": {
+        shadowSelector: `.${CSS.heading}`,
+        targetProp: "color",
+      },
+    });
+  });
+});

packages/calcite-components/src/components/autocomplete-item-group/autocomplete-item-group.scss

@@ -0,0 +1,61 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-autocomplete-background-color: Specifies the background color of the component.
+ * @prop --calcite-autocomplete-border-color: Specifies the border color of the component.
+ * @prop --calcite-autocomplete-text-color: Specifies the text color of the component.
+ */
+
+.scale--s {
+  @apply text-n2h;
+  --calcite-internal-autocomplete-item-group-spacing-unit-l: theme("spacing.2");
+  --calcite-internal-autocomplete-item-group-spacing-unit-s: theme("spacing.2");
+}
+
+.scale--m {
+  @apply text-n1h;
+  --calcite-internal-autocomplete-item-group-spacing-unit-l: theme("spacing.3");
+  --calcite-internal-autocomplete-item-group-spacing-unit-s: theme("spacing.3");
+}
+
+.scale--l {
+  @apply text-0h;
+  --calcite-internal-autocomplete-item-group-spacing-unit-l: theme("spacing.4");
+  --calcite-internal-autocomplete-item-group-spacing-unit-s: theme("spacing.4");
+}
+
+:host {
+  @apply m-0
+    flex
+    flex-col;
+}
+
+.container {
+  @apply flex
+    flex-col;
+  background-color: var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));
+  padding-block-start: var(--calcite-internal-autocomplete-item-group-spacing-unit-l);
+}
+
+.container--no-spacing {
+  padding-block-start: 0;
+}
+
+.heading {
+  border: 0 solid;
+  @apply box-border
+    w-full
+    min-w-0
+    max-w-full
+    word-break
+    border-b
+    font-bold;
+  color: var(--calcite-autocomplete-text-color, var(--calcite-color-text-2));
+  border-block-end-color: var(--calcite-autocomplete-border-color, var(--calcite-color-border-3));
+  padding-block: var(--calcite-internal-autocomplete-item-group-spacing-unit-l);
+  padding-inline: var(--calcite-internal-autocomplete-item-group-spacing-unit-s);
+}
+
+@include base-component();

packages/calcite-components/src/components/autocomplete-item-group/autocomplete-item-group.tsx

@@ -0,0 +1,75 @@
+import { LitElement, property, h, JsxNode } from "@arcgis/lumina";
+import { Scale } from "../interfaces";
+import { CSS } from "./resources";
+import { styles } from "./autocomplete-item-group.scss";
+
+declare global {
+  interface DeclareElements {
+    "calcite-autocomplete-item-group": AutocompleteItemGroup;
+  }
+}
+
+/** @slot - A slot for adding `calcite-autocomplete-item`s. */
+export class AutocompleteItemGroup extends LitElement {
+  // #region Static Members
+
+  static override styles = styles;
+
+  // #endregion
+
+  // #region Private Properties
+
+  // #endregion
+
+  // #region Public Properties
+
+  /**
+   * When `true`, signifies that the group should not have extra spacing. Used for styling.
+   *
+   * @private
+   */
+  @property() disableSpacing = false;
+
+  /** The component's text. */
+  @property() heading: string;
+
+  /** The component's label. */
+  @property() label: any;
+
+  /**
+   * Specifies the size of the component inherited from the `calcite-autocomplete`, defaults to `m`.
+   *
+   * @private
+   */
+  @property() scale: Scale = "m";
+
+  // #endregion
+
+  // #region Lifecycle
+
+  // #endregion
+
+  // #region Rendering
+
+  override render(): JsxNode {
+    const { scale } = this;
+    return (
+      <div
+        aria-label={this.label ?? this.heading}
+        class={{
+          [CSS.container]: true,
+          [CSS.containerNoSpacing]: this.disableSpacing,
+          [`scale--${scale}`]: true,
+        }}
+        role="group"
+      >
+        <div class={CSS.heading} role="presentation">
+          {this.heading}
+        </div>
+        <slot />
+      </div>
+    );
+  }
+
+  // #endregion
+}

packages/calcite-components/src/components/autocomplete-item-group/resources.ts

@@ -0,0 +1,5 @@
+export const CSS = {
+  container: "container",
+  containerNoSpacing: "container--no-spacing",
+  heading: "heading",
+};

packages/calcite-components/src/components/autocomplete-item/autocomplete-item.e2e.ts

@@ -0,0 +1,75 @@
+import { describe } from "vitest";
+import { defaults, disabled, hidden, reflects, renders, slots, themed } from "../../tests/commonTests";
+import { CSS, SLOTS } from "./resources";
+
+describe("calcite-autocomplete-item", () => {
+  describe("defaults", () => {
+    defaults("calcite-autocomplete-item", [
+      { propertyName: "active", defaultValue: false },
+      { propertyName: "description", defaultValue: undefined },
+      { propertyName: "disabled", defaultValue: false },
+      { propertyName: "heading", defaultValue: undefined },
+      { propertyName: "iconEnd", defaultValue: undefined },
+      { propertyName: "iconFlipRtl", defaultValue: undefined },
+      { propertyName: "iconStart", defaultValue: undefined },
+      { propertyName: "label", defaultValue: undefined },
+      { propertyName: "scale", defaultValue: "m" },
+      { propertyName: "value", defaultValue: undefined },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-autocomplete-item", [
+      { propertyName: "disabled", value: true },
+      { propertyName: "iconEnd", value: "banana" },
+      { propertyName: "iconFlipRtl", value: "end" },
+      { propertyName: "iconStart", value: "banana" },
+    ]);
+  });
+
+  describe("renders", () => {
+    renders("calcite-autocomplete-item", { display: "flex" });
+  });
+
+  describe("honors hidden attribute", () => {
+    hidden("calcite-autocomplete-item");
+  });
+
+  describe("slots", () => {
+    slots("calcite-autocomplete-item", SLOTS);
+  });
+
+  describe("disabled", () => {
+    disabled("calcite-autocomplete-item", { focusTarget: "none" });
+  });
+
+  describe("slots", () => {
+    slots("calcite-autocomplete-item", SLOTS);
+  });
+
+  describe("theme", () => {
+    themed("calcite-autocomplete-item", {
+      "--calcite-autocomplete-background-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-autocomplete-background-color-hover": {
+        shadowSelector: `.${CSS.container}`,
+        state: "hover",
+        targetProp: "backgroundColor",
+      },
+      "--calcite-autocomplete-description-text-color": {
+        shadowSelector: `.${CSS.description}`,
+        targetProp: "color",
+      },
+      "--calcite-autocomplete-heading-text-color": {
+        shadowSelector: `.${CSS.heading}`,
+        targetProp: "color",
+      },
+      "--calcite-autocomplete-text-color": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "color",
+      },
+    });
+  });
+});

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

@@ -0,0 +1,90 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-autocomplete-background-color: Specifies the background color of the component.
+ * @prop --calcite-autocomplete-background-color-hover: Specifies the background color of the component when hovered.
+ * @prop --calcite-autocomplete-description-text-color: Specifies the text color of the component's description.
+ * @prop --calcite-autocomplete-heading-text-color: Specifies the text color of the component's heading.
+ * @prop --calcite-autocomplete-text-color: Specifies the text color of the component.
+ */
+
+.scale--s {
+  @apply text-n2h;
+  --calcite-internal-autocomplete-item-spacing-unit-l: theme("spacing.2");
+  --calcite-internal-autocomplete-item-spacing-unit-s: theme("spacing.1");
+  --calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs);
+}
+
+.scale--m {
+  @apply text-n1h;
+  --calcite-internal-autocomplete-item-spacing-unit-l: theme("spacing.3");
+  --calcite-internal-autocomplete-item-spacing-unit-s: theme("spacing[1.5]");
+  --calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm);
+}
+
+.scale--l {
+  @apply text-0h;
+  --calcite-internal-autocomplete-item-spacing-unit-l: theme("spacing.4");
+  --calcite-internal-autocomplete-item-spacing-unit-s: theme("spacing[2.5]");
+  --calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size);
+}
+
+:host {
+  @apply flex;
+}
+
+.container {
+  @apply flex
+    w-full
+    min-w-full
+    cursor-pointer
+    focus-base
+    relative
+    box-border
+    items-center;
+  background-color: var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));
+  color: var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));
+  gap: var(--calcite-internal-autocomplete-item-spacing-unit-l);
+  padding-inline: var(--calcite-internal-autocomplete-item-spacing-unit-l);
+  padding-block: var(--calcite-internal-autocomplete-item-spacing-unit-s);
+  @include word-break();
+  justify-content: space-around;
+}
+
+.description {
+  color: var(--calcite-autocomplete-description-text-color);
+  font-size: var(--calcite-internal-autocomplete-item-description-font-size);
+}
+
+.heading {
+  color: var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1));
+}
+
+.heading,
+.description {
+  line-height: var(--calcite-font-line-height-relative-snug);
+}
+
+:host(:hover:not([disabled])) .container {
+  background-color: var(--calcite-autocomplete-background-color-hover, var(--calcite-color-foreground-2));
+
+  .description {
+    color: var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2));
+  }
+}
+
+.container--active {
+  @apply focus-inset;
+}
+
+.content-center {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-block: 0;
+}
+
+@include base-component();
+@include disabled();