@esri/calcite-components 5.0.0-next.8 → 5.0.0-next.81

package/dist/components/calcite-select/customElement.d.ts

@@ -1,98 +1,96 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FormComponent, MutableValidityState } from '../../utils/form';
-import { InteractiveComponent } from '../../utils/interactive';
-import { LabelableComponent } from '../../utils/label';
-import { Scale, Status, Width } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { Option } from '../calcite-option/customElement.js';
-import { Label } from '../calcite-label/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { MutableValidityState } from "../../utils/form.js";
+import type { Scale, Status, Width } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Option } from "../calcite-option/customElement.js";
 
 /**
+ * @cssproperty [--calcite-select-font-size] - Specifies the font size of `calcite-option`s in the component.
+ * @cssproperty [--calcite-select-text-color] - Specifies the text color of `calcite-option`s in the component.
+ * @cssproperty [--calcite-select-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-select-icon-color] - Specifies the component's icon color.
+ * @cssproperty [--calcite-select-icon-color-hover] - Specifies the component's icon color when hovered or active.
+ * @cssproperty [--calcite-select-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-select-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-select-shadow] - Specifies the component's shadow.
  * @slot  - A slot for adding `calcite-option`s.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
-export declare class Select extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * The `id` of the form that will be associated with the component.
-     *
-     * When not set, the component will be associated with its ancestor form element, if any.
-     */
-    form: string;
-    /**
-     * Accessible name for the component.
-     *
-     * @required
-     */
-    label: string;
-    /** When provided, displays label text on the component. */
-    labelText: string;
-    /**
-     * Specifies the name of the component.
-     *
-     * Required to pass the component's `value` on form submission.
-     */
-    name: string;
-    /**
-     * When `true` and the component resides in a form,
-     * the component must have a value in order for the form to submit.
-     *
-     * @default false
-     */
-    required: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** The component's selected option `HTMLElement`. */
-    readonly selectedOption: HTMLCalciteOptionElement;
-    /**
-     * Specifies the status of the input field, which determines message and icons.
-     *
-     * @default "idle"
-     */
-    status: Status;
-    /** Specifies the validation icon to display under the component. */
-    validationIcon: IconName | boolean;
-    /** Specifies the validation message to display under the component. */
-    validationMessage: string;
-    /**
-     * The current validation state of the component.
-     *
-     * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
-     */
-    readonly validity: MutableValidityState;
-    /** The component's `selectedOption` value. */
-    value: string;
-    /**
-     * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
-     *
-     * @default "auto"
-     */
-    width: Extract<Width, "auto" | "half" | "full">;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the `selectedOption` changes. */
-    readonly calciteSelectChange: TargetedEvent<this, void>;
-    private messages: Partial<{
-        required: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        required: string;
-    }>;
-}
+export abstract class Select extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the `id` of the component's associated form.
+   *
+   * When not set, the component is associated with its ancestor form element, if one exists.
+   */
+  accessor form: string;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /** Specifies the component's label text. */
+  accessor labelText: string;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: { required?: string; };
+  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  accessor name: string;
+  /**
+   * When `true` and the component resides in a form,
+   * the component must have a value in order for the form to submit.
+   *
+   * @default false
+   */
+  accessor required: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** The component's selected option `HTMLElement`. */
+  get selectedOption(): Option;
+  /**
+   * Specifies the status of the input field, which determines the message and icons.
+   *
+   * @default "idle"
+   */
+  accessor status: Status;
+  /** Specifies the validation icon to display under the component. */
+  accessor validationIcon: IconName | boolean;
+  /** Specifies the validation message to display under the component. */
+  accessor validationMessage: string;
+  /**
+   * The component's current validation state.
+   *
+   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   */
+  get validity(): MutableValidityState;
+  /** The component's `selectedOption` value. */
+  accessor value: string;
+  /**
+   * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+   *
+   * @default "auto"
+   */
+  accessor width: Extract<Width, "auto" | "half" | "full">;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the `selectedOption` changes. */
+  readonly calciteSelectChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteSelectChange: Select["calciteSelectChange"]["detail"];
+  };
+}

package/dist/components/calcite-select/customElement.js

@@ -1,17 +1,20 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.81 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;font-size:var(--calcite-select-font-size);font-weight:var(--calcite-internal-select-font-weight, var(--calcite-font-weight-regular))}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width);block-size:var(--calcite-internal-select-block-size, 32px)}.wrapper:focus-within .icon,.wrapper:active .icon,.wrapper:hover .icon{color:var(--calcite-select-icon-color-hover, var(--calcite-color-text-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-select-font-size: var(--calcite-font-size--2);--calcite-select-spacing-inline: .5rem 2rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 24px}:host([scale=m]){--calcite-internal-select-font-size: var(--calcite-font-size--1);--calcite-select-spacing-inline: .75rem 2.5rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-select-font-size: var(--calcite-font-size-0);--calcite-select-spacing-inline: 1rem 3rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-lg);--calcite-internal-select-block-size: 44px}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0;box-sizing:border-box;inline-size:100%;cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-style:solid;font-family:inherit;outline-color:transparent;font-weight:inherit;font-size:var(--calcite-select-font-size, var(--calcite-internal-select-font-size));color:var(--calcite-select-text-color, var(--calcite-color-text-2));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-width:var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-select-spacing-inline);padding-block:var(--calcite-internal-select-spacing-block);border-inline-end-width:0;line-height:var(--calcite-internal-select-line-height, normal);background-color:var(--calcite-select-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-select-shadow, var(--calcite-shadow-small))}.select:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity: 1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-start-start-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-start-end-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-end-start-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-end-end-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-inline-width:0 var(--calcite-select-internal-icon-border-inline-end-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-internal-select-icon-container-padding-inline)}.icon-container .icon{color:var(--calcite-select-icon-color, var(--calcite-color-text-3))}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.select:focus~.icon-container{border-color:transparent}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+import { u as useInteractive } from "../../chunks/useInteractive.js";
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;font-size:var(--calcite-select-font-size);font-weight:var(--calcite-internal-select-font-weight, var(--calcite-font-weight-regular))}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width);block-size:var(--calcite-internal-select-block-size, 32px)}.wrapper:focus-within .icon,.wrapper:active .icon,.wrapper:hover .icon{color:var(--calcite-select-icon-color-hover, var(--calcite-color-text-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-sm);--calcite-select-spacing-inline: .5rem 2rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 24px}:host([scale=m]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-base);--calcite-select-spacing-inline: .75rem 2.5rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-md);--calcite-select-spacing-inline: 1rem 3rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-lg);--calcite-internal-select-block-size: 44px}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0;box-sizing:border-box;inline-size:100%;cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-style:solid;font-family:inherit;outline-color:transparent;font-weight:inherit;font-size:var(--calcite-select-font-size, var(--calcite-internal-select-font-size));color:var(--calcite-select-text-color, var(--calcite-color-text-2));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-width:var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-select-spacing-inline);padding-block:var(--calcite-internal-select-spacing-block);border-inline-end-width:0;line-height:var(--calcite-internal-select-line-height, normal);background-color:var(--calcite-select-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-select-shadow, var(--calcite-shadow-small))}.select:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity: 1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-start-start-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-start-end-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-end-start-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-end-end-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-inline-width:0 var(--calcite-select-internal-icon-border-inline-end-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-internal-select-icon-container-padding-inline)}.icon-container .icon{color:var(--calcite-select-icon-color, var(--calcite-color-text-3))}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.select:focus~.icon-container{border-color:transparent}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   icon: "icon",
   iconContainer: "icon-container",
@@ -35,6 +38,7 @@ class Select extends LitElement {
     this.selectRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.required = false;
     this.scale = "m";
@@ -84,9 +88,6 @@ class Select extends LitElement {
       this.value = this.selectedOption?.value;
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     if (typeof this.value === "string") {
       this.updateItemsFromValue(this.value);
@@ -197,7 +198,7 @@ class Select extends LitElement {
   }
   render() {
     const { disabled } = this;
-    return InteractiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.wrapper)}><select aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.select)} .disabled=${disabled} @change=${this.handleInternalSelectChange} .required=${this.required} ${ref(this.selectRef)}><slot></slot></select>${this.renderChevron()}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    return this.interactiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.wrapper)}><select aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.select)} .disabled=${disabled} @change=${this.handleInternalSelectChange} .required=${this.required} ${ref(this.selectRef)}><slot></slot></select>${this.renderChevron()}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-select", Select);

package/dist/components/calcite-select/index.d.ts

@@ -1,3 +1 @@
-import "../calcite-input-message/index.js";
-import "../calcite-icon/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-sheet/customElement.d.ts

@@ -1,122 +1,144 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { Height, LogicalFlowPosition, Scale, Width } from '../interfaces';
-import { FocusTrapOptions } from '../../controllers/useFocusTrap';
-import { DisplayMode, ResizeValues } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Height, LogicalFlowPosition, Scale, Width } from "../interfaces.js";
+import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
+import type { DisplayMode } from "./interfaces.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-/** @slot  - A slot for adding custom content. */
-export declare class Sheet extends LitElement {
-    /**
-     * Passes a function to run before the component closes.
-     *
-     * @returns
-     */
-    beforeClose: (el: HTMLCalciteSheetElement) => Promise<void>;
-    /**
-     * Specifies the display mode - `"float"` (content is separated detached),
-     * or `"overlay"` (displays on top of center content).
-     *
-     * @default "overlay"
-     */
-    displayMode: DisplayMode;
-    /**
-     * When `true`, disables the default close on escape behavior.
-     *
-     * @default false
-     */
-    escapeDisabled: boolean;
-    /**
-     * When `true`, prevents focus trapping.
-     *
-     * @default false
-     */
-    focusTrapDisabled: boolean;
-    /**
-     * Specifies custom focus trap configuration on the component, where
-     *
-     * `"allowOutsideClick`" allows outside clicks,
-     * `"initialFocus"` enables initial focus,
-     * `"returnFocusOnDeactivate"` returns focus when not active, and
-     * `"extraContainers"` specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).
-     * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
-     */
-    focusTrapOptions: Partial<FocusTrapOptions>;
-    /**
-     * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `height` property instead.
-     * @default "m"
-     */
-    heightScale: Scale;
-    /** Specifies the height of the component. */
-    height: Height;
-    /**
-     * Specifies the label of the component.
-     *
-     * @required
-     */
-    label: string;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When `true`, displays and positions the component.
-     *
-     * @default false
-     */
-    get open(): boolean;
-    set open(value: boolean);
-    /**
-     * When `true`, disables the closing of the component when clicked outside.
-     *
-     * @default false
-     */
-    outsideCloseDisabled: boolean;
-    /**
-     * Determines where the component will be positioned.
-     *
-     * @default "inline-start"
-     */
-    position: LogicalFlowPosition;
-    /**
-     * When `true`, the component is resizable.
-     *
-     * @default false
-     */
-    resizable: boolean;
-    /**
-     * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
-     * @default "m"
-     */
-    widthScale: Scale;
-    /** Specifies the width of the component. */
-    width: Extract<Width, Scale>;
-    /**
-     * Sets focus on the component's "close" button - the first focusable item.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /**
-     * Updates the element(s) that are included in the focus-trap of the component.
-     *
-     * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
-     */
-    updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
-    /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteSheetBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteSheetBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calciteSheetClose: TargetedEvent<this, void>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calciteSheetOpen: TargetedEvent<this, void>;
-    private messages: Partial<{
-        resizeEnabled: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        resizeEnabled: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-sheet-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-sheet-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-sheet-shadow] - Specifies the component's shadow.
+ * @cssproperty [--calcite-sheet-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-sheet-resize-background-color] - Specifies the resize handle's background color.
+ * @cssproperty [--calcite-sheet-resize-icon-color] - Specifies the resize handle's text color.
+ * @cssproperty [--calcite-sheet-scrim-background] - Specifies the background color of the component's scrim.
+ * @cssproperty [--calcite-sheet-width] - When `position` is `"inline-start"` or `"inline-end"`, specifies the component's width.
+ * @cssproperty [--calcite-sheet-max-width] - When `position` is `"inline-start"` or `"inline-end"`, specifies the component's maximum width.
+ * @cssproperty [--calcite-sheet-min-width] - When `position` is `"inline-start"` or `"inline-end"`, specifies the component's minimum width.
+ * @cssproperty [--calcite-sheet-height] - When `position` is `"block-start"` or `"block-end"`, specifies the component's height.
+ * @cssproperty [--calcite-sheet-max-height] - When `position` is `"block-start"` or `"block-end"`, specifies the component's maximum height.
+ * @cssproperty [--calcite-sheet-min-height] - When `position` is `"block-start"` or `"block-end"`, specifies the component's minimum height.
+ * @slot  - A slot for adding custom content.
+ */
+export abstract class Sheet extends LitElement {
+  /** Passes a function to run before the component closes. */
+  accessor beforeClose: (el: Sheet) => Promise<void>;
+  /**
+   * Specifies the display mode - `"float"` separates content from main layout,
+   * and `"overlay"` displays on top of center content.
+   *
+   * @default "overlay"
+   */
+  accessor displayMode: DisplayMode;
+  /**
+   * When `true`, disables the default close on escape behavior.
+   *
+   * @default false
+   */
+  accessor escapeDisabled: boolean;
+  /**
+   * When `true`, prevents focus trapping.
+   *
+   * @default false
+   */
+  accessor focusTrapDisabled: boolean;
+  /**
+   * Specifies custom focus trap configuration on the component, where
+   *
+   * `"allowOutsideClick"` allows outside clicks,
+   * `"initialFocus"` enables initial focus,
+   * `"returnFocusOnDeactivate"` returns focus when not active, and
+   * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body.
+   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
+   */
+  accessor focusTrapOptions: Partial<FocusTrapOptions>;
+  /** Specifies the component's height. */
+  accessor height: Height;
+  /**
+   * When `position` is `"block-start"` or `"block-end"`, specifies the component's height.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `height` property instead.
+   * @default "m"
+   */
+  accessor heightScale: Scale;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: { resizeEnabled?: string; };
+  /** @internal */
+  protected messages: Partial<{ resizeEnabled: string; }> & T9nMeta<{ resizeEnabled: string; }>;
+  /**
+   * When `true`, displays and positions the component.
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * When `true`, disables closing the component when the area outside of the component is clicked.
+   *
+   * @default false
+   */
+  accessor outsideCloseDisabled: boolean;
+  /**
+   * Determines where the component will be positioned.
+   *
+   * @default "inline-start"
+   */
+  accessor position: LogicalFlowPosition;
+  /**
+   * When `true`, the component is resizable.
+   *
+   * @default false
+   */
+  accessor resizable: boolean;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /** Specifies the components width. */
+  accessor width: Extract<Width, Scale>;
+  /**
+   * When `position` is `"inline-start"` or `"inline-end"`, specifies the component's width.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
+   * @default "m"
+   */
+  accessor widthScale: Scale;
+  /**
+   * Sets focus on the component's "close" button - the first focusable item.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /**
+   * Updates the element(s) that are included in the component's focus-trap.
+   *
+   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+   */
+  updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  readonly calciteSheetBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  readonly calciteSheetBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  readonly calciteSheetClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is open and animation is complete. */
+  readonly calciteSheetOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteSheetBeforeClose: Sheet["calciteSheetBeforeClose"]["detail"];
+    calciteSheetBeforeOpen: Sheet["calciteSheetBeforeOpen"]["detail"];
+    calciteSheetClose: Sheet["calciteSheetClose"]["detail"];
+    calciteSheetOpen: Sheet["calciteSheetOpen"]["detail"];
+  };
+}