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

package/dist/components/calcite-tree-item/customElement.js

@@ -1,14 +1,16 @@
+/* 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 CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { f as filterDirectChildren, s as slotChangeGetAssignedElements, a as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
+import { B as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   actionsEnd: "actions-end",
-  bulletPointIcon: "bullet-point",
   checkbox: "checkbox",
   checkboxContainer: "checkbox-container",
   checkboxLabel: "checkbox-label",
@@ -26,19 +28,19 @@ const SLOTS = {
 };
 const ICONS = {
   blank: "blank",
-  bulletPoint: "bullet-point",
   checkmark: "check",
   checkSquareF: "check-square-f",
   chevronRight: "chevron-right",
   minusSquareF: "minus-square-f",
   square: "square"
 };
-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([scale=s]){--calcite-internal-tree-item-spacing-unit: .25rem;--calcite-internal-tree-item-padding-block: .25rem;--calcite-internal-tree-item-children-container-padding: 1.25rem;--calcite-internal-tree-item-line-left-position: .75rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-internal-tree-item-spacing-unit: .5rem;--calcite-internal-tree-item-padding-block: .5rem;--calcite-internal-tree-item-children-container-padding: 1.5rem;--calcite-internal-tree-item-line-left-position: 1rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-internal-tree-item-spacing-unit: .75rem;--calcite-internal-tree-item-padding-block: .625rem;--calcite-internal-tree-item-children-container-padding: 2.25rem;--calcite-internal-tree-item-line-left-position: 1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:block;max-inline-size:100%;cursor:pointer}:host .children-container ::slotted(*){padding-inline-start:var(--calcite-internal-tree-item-children-container-padding)}.node-actions-container{display:flex}.node-actions-container .node-container,.node-actions-container .checkbox-container{gap:var(--calcite-internal-tree-item-spacing-unit)}.node-actions-container .node-container{padding-inline:var(--calcite-internal-tree-item-spacing-unit);padding-block:var(--calcite-internal-tree-item-padding-block)}.node-actions-container{color:var(--calcite-tree-text-color, var(--calcite-color-text-3))}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;block-size:100%;inset-inline-start:var(--calcite-internal-tree-item-line-left-position);content:"";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none!important}::slotted(*):hover{text-decoration:none!important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{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))))}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;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))))}:host(:focus:not([disabled])) .checkbox{outline:2px solid transparent;outline-offset:2px}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch}.checkbox-container{display:flex;align-items:center}.checkbox{line-height:0;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-border-input))}.checkbox-label{pointer-events:none;display:flex;align-items:center}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark,.node-container .bullet-point{opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-color-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-tree-text-color-selected, var(--calcite-color-text-1))}:host([selected]) .node-container .bullet-point,:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .bullet-point,:host([has-children]) .node-container .checkmark{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;flex:0 0 auto;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([selected]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children][indeterminate]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
+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([scale=s]){--calcite-internal-tree-item-spacing-unit: .25rem;--calcite-internal-tree-item-padding-block: .25rem;--calcite-internal-tree-item-children-container-padding: 1.25rem;--calcite-internal-tree-item-line-left-position: .75rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host(:is([scale=s],[scale=m])){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-tree-item-spacing-unit: .5rem;--calcite-internal-tree-item-padding-block: .5rem;--calcite-internal-tree-item-children-container-padding: 1.5rem;--calcite-internal-tree-item-line-left-position: 1rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xs);--calcite-internal-tree-item-spacing-unit: .75rem;--calcite-internal-tree-item-padding-block: .625rem;--calcite-internal-tree-item-children-container-padding: 2.25rem;--calcite-internal-tree-item-line-left-position: 1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host{display:block;max-inline-size:100%;cursor:pointer}:host .children-container ::slotted(*){padding-inline-start:var(--calcite-internal-tree-item-children-container-padding)}.node-actions-container{display:flex}.node-actions-container .node-container,.node-actions-container .checkbox-container{gap:var(--calcite-internal-tree-item-spacing-unit)}.node-actions-container .node-container{padding-inline:var(--calcite-internal-tree-item-spacing-unit);padding-block:var(--calcite-internal-tree-item-padding-block)}.node-actions-container{color:var(--calcite-tree-text-color, var(--calcite-color-text-1))}.icon-start{--calcite-icon-color: var(--calcite-color-text-3)}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;block-size:100%;inset-inline-start:var(--calcite-internal-tree-item-line-left-position);content:"";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none!important}::slotted(*):hover{text-decoration:none!important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{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))))}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;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))))}:host(:focus:not([disabled])) .checkbox{outline:2px solid transparent;outline-offset:2px}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch;gap:var(--calcite-internal-tree-item-action-spacing)}.checkbox-container{display:flex;align-items:center}.checkbox{line-height:0;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-border-input))}.checkbox-label{pointer-events:none;display:flex;align-items:center}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .checkmark{opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-color-border-1)}.node-container:hover .checkmark,:host([selected]) .node-container:hover .checkmark,:host(:focus:not([disabled])) .node-container .checkmark{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{--calcite-internal-tree-item-text-color: var(--calcite-tree-text-color-selected, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-medium);color:var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .icon-start,:host([selected]) .node-container:hover .icon-start{--calcite-icon-color: var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .checkmark,:host([selected]) .node-container:hover .checkmark{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .checkmark{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;flex:0 0 auto;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([selected]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children][indeterminate]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
 class TreeItem extends LitElement {
   constructor() {
     super();
     this.actionSlotWrapperRef = createRef();
     this.userChangedValue = false;
+    this.interactiveContainer = useInteractive(this);
     this.hasEndActions = false;
     this.updateAfterInitialRender = false;
     this.depth = -1;
@@ -91,9 +93,6 @@ class TreeItem extends LitElement {
       this.getSelectionMode();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     this.updateAncestorTree();
   }
@@ -233,19 +232,17 @@ class TreeItem extends LitElement {
   }
   render() {
     const rtl = getElementDir(this.el) === "rtl";
-    const showBulletPoint = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist";
-    const showCheckmark = this.selectionMode === "multiple" || this.selectionMode === "multichildren";
+    const showCheckmark = this.selectionMode !== "none" && this.selectionMode !== "ancestors";
     const showBlank = this.selectionMode === "none" && !this.hasChildren;
     const checkboxIsIndeterminate = this.hasChildren && this.indeterminate;
     const chevron = this.hasChildren || this.selectionMode === "ancestors" ? html`<calcite-icon class=${safeClassMap({
       [CSS.chevron]: true,
       [CSS_UTILITY.rtl]: rtl
-    })} data-test-id=icon .icon=${this.hasChildren ? ICONS.chevronRight : ICONS.blank} @click=${this.iconClickHandler} .scale=${getIconScale(this.scale)}></calcite-icon>` : null;
+    })} .icon=${this.hasChildren ? ICONS.chevronRight : ICONS.blank} @click=${this.iconClickHandler} .scale=${getIconScale(this.scale)}></calcite-icon>` : null;
     const defaultSlotNode = keyed("default-slot", html`<slot></slot>`);
     const checkbox = this.selectionMode === "ancestors" ? html`<div class=${safeClassMap(CSS.checkboxContainer)}><calcite-icon class=${safeClassMap(CSS.checkbox)} .icon=${this.selected ? ICONS.checkSquareF : checkboxIsIndeterminate ? ICONS.minusSquareF : ICONS.square} .scale=${getIconScale(this.scale)}></calcite-icon></div>` : null;
-    const selectedIcon = showBulletPoint ? ICONS.bulletPoint : showCheckmark ? ICONS.checkmark : showBlank ? ICONS.blank : null;
+    const selectedIcon = showCheckmark ? ICONS.checkmark : showBlank ? ICONS.blank : null;
     const itemIndicator = selectedIcon ? html`<calcite-icon class=${safeClassMap({
-      [CSS.bulletPointIcon]: selectedIcon === ICONS.bulletPoint,
       [CSS.checkmarkIcon]: selectedIcon === ICONS.checkmark,
       [CSS_UTILITY.rtl]: rtl
     })} .icon=${selectedIcon} .scale=${getIconScale(this.scale)}></calcite-icon>` : null;
@@ -262,13 +259,13 @@ class TreeItem extends LitElement {
     this.el.toggleAttribute("calcite-hydrated-hidden", hidden);
     this.el.role = "treeitem";
     setAttribute(this.el, "tabIndex", this.disabled ? -1 : 0);
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({ [CSS.itemExpanded]: isExpanded })}><div class=${safeClassMap(CSS.nodeAndActionsContainer)}><div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({ [CSS.itemExpanded]: isExpanded })}><div class=${safeClassMap(CSS.nodeAndActionsContainer)}><div class=${safeClassMap({
       [CSS.nodeContainer]: true,
       [CSS_UTILITY.rtl]: rtl
     })} data-selection-mode=${this.selectionMode ?? nothing}>${chevron}${itemIndicator}${checkbox ? checkbox : null}${this.iconStart ? iconStartEl : null}${checkbox ? html`<label class=${safeClassMap(CSS.checkboxLabel)}>${defaultSlotNode}</label>` : defaultSlotNode}</div><div class=${safeClassMap(CSS.actionsEnd)} .hidden=${!hasEndActions} ${ref(this.actionSlotWrapperRef)}>${slotNode}</div></div><div class=${safeClassMap({
       [CSS.childrenContainer]: true,
       [CSS_UTILITY.rtl]: rtl
-    })} data-test-id=calcite-tree-children @click=${this.childrenClickHandler} .role=${this.hasChildren ? "group" : void 0}><slot name=${SLOTS.children} @slotchange=${this.handleChildrenSlotChange}></slot></div></div>` });
+    })} @click=${this.childrenClickHandler} .role=${this.hasChildren ? "group" : void 0}><slot name=${SLOTS.children} @slotchange=${this.handleChildrenSlotChange}></slot></div></div>` });
   }
 }
 customElement("calcite-tree-item", TreeItem);

package/dist/components/calcite-tree-item/index.d.ts

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

package/dist/components/functional/Heading.d.ts

@@ -1,11 +1 @@
-import { TemplateResult } from 'lit-html';
-import { JsxNode, LuminaJsx } from '@arcgis/lumina';
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-interface HeadingProps extends Pick<LuminaJsx.HTMLAttributes, "class" | "key"> {
-    level?: HeadingLevel;
-}
-export declare function constrainHeadingLevel(level: number): HeadingLevel;
-export declare const Heading: ({ children, ...props }: HeadingProps & {
-    children: JsxNode;
-}) => TemplateResult;
-export {};
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/components/interfaces.d.ts

@@ -1,35 +1,40 @@
-import { LuminaJsx } from '@arcgis/lumina';
-import { CamelCase, ReadonlyTuple } from 'type-fest';
+import type { LuminaJsx } from "@arcgis/lumina";
+import type { CamelCase } from "type-fest";
+
 export type Alignment = "start" | "center" | "end";
+
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
-export interface Dimensions {
-    width: number;
-    height: number;
-}
+
 export type FlipContext = "both" | "start" | "end";
+
 export type Height = Scale;
+
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
+
 export type Layout = "horizontal" | "vertical" | "grid" | "inline" | "center" | "auto" | "fixed" | "none" | "horizontal-single";
+
 export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
-export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto";
-export type ModeName = "light" | "dark" | "auto";
+
 export type Position = "start" | "end" | "top" | "bottom";
+
 export type SelectionAppearance = "icon" | "border" | "neutral" | "highlight";
+
 export type SelectionMode = "single" | "none" | "children" | "single-persist" | "multichildren" | "ancestors" | "multiple";
+
 export type Scale = "s" | "m" | "l";
+
 export type Status = "invalid" | "valid" | "idle";
+
 export type Width = Scale | "auto" | "half" | "full";
+
 export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus";
+
 export type CollapseDirection = "down" | "up";
-export type Dir = "ltr" | "rtl";
+
 export type InteractionMode = "interactive" | "static";
-/**
- * Helper type for properties decorated with @queryAssignedElements or @queryAssignedNodes
- * that are intended to support exactly one slotted element or node.
- */
-export type SingleItemSlotArray<T extends HTMLElement | Node> = ReadonlyTuple<T, 1>;
-type RemoveAriaPrefix<K extends string> = K extends `aria-${infer Rest}` ? Rest : K extends `aria${infer Rest}` ? Uncapitalize<Rest> : K;
+
 export type AriaAttributesCamelCased = {
     [K in Exclude<keyof LuminaJsx.AriaAttributes, "role"> as CamelCase<RemoveAriaPrefix<K & string>>]: LuminaJsx.AriaAttributes[K];
 };
-export {};
+
+export type RemoveAriaPrefix<K extends string> = K extends `aria-${infer Rest}` ? Rest : K extends `aria${infer Rest}` ? Uncapitalize<Rest> : K;

package/dist/controllers/useFocusTrap.d.ts

@@ -1,74 +1,14 @@
-import { makeGenericController } from '@arcgis/lumina/controllers';
-import { FocusTrap, Options as Options } from 'focus-trap';
-import { LitElement } from '@arcgis/lumina';
-import { SetReturnType } from 'type-fest';
-export interface UseFocusTrap {
-    /**
-     * Activates the focus trap.
-     */
-    activate: () => void;
-    /**
-     * Deactivates the focus trap.
-     */
-    deactivate: () => void;
-    /**
-     * By default, the host element will be used as the focus-trap element, but if the focus-trap element needs to be a different element, use this method prior to activating to set the focus-trap element.
-     */
-    overrideFocusTrapEl: (el: HTMLElement) => void;
-    /**
-     * Sets the extra containers to be used in the focus trap.
-     *
-     * @see https://github.com/focus-trap/focus-trap#trapupdatecontainerelements
-     */
-    setExtraContainers: (extraContainers?: FocusTrapOptions["extraContainers"]) => void;
-    /**
-     * Updates focusable elements within the trap.
-     */
-    updateContainerElements: () => void;
-}
-interface UseFocusTrapOptions<T extends LitElement = LitElement> {
-    /**
-     * The name of the prop that will trigger the focus trap to activate.
-     */
-    triggerProp: keyof T;
-    /**
-     * Options to pass to the focus-trap library.
-     */
-    focusTrapOptions?: Options;
-}
-interface FocusTrapComponent extends LitElement {
-    focusTrapDisabled?: boolean;
-    /**
-     * When defined, provides a condition to disable focus trapping. When `true`, prevents focus trapping.
-     */
-    focusTrapDisabledOverride?: () => boolean;
-    /**
-     * Additional options to configure the focus trap.
-     */
-    focusTrapOptions?: Partial<FocusTrapOptions>;
-}
-export type FocusTrapOptions = 
-/**
- * @see https://github.com/focus-trap/focus-trap#createoptions
- */
-Pick<Options, "allowOutsideClick" | "initialFocus" | "returnFocusOnDeactivate"> & {
-    /**
-     * Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus-trap element.
-     */
-    extraContainers: Parameters<FocusTrap["updateContainerElements"]>[0];
-    /**
-     * By default, when the focus trap is deactivated, focus will return to the element that was focused before the trap was activated. This option allows customizing that behavior.
-     *
-     * Returning undefined will use the default behavior of returning focus to the element focused before activation.
-     */
-    setReturnFocus?: Options["setReturnFocus"] | undefined | SetReturnType<Extract<Options["setReturnFocus"], Function>, undefined>;
-};
-/**
- * A controller for managing focus traps.
- *
- * Note: traps will be deactivated automatically when the component is disconnected.
- *
- * @param options
- */
-export declare const useFocusTrap: <T extends FocusTrapComponent>(options: UseFocusTrapOptions<T>) => ReturnType<typeof makeGenericController<UseFocusTrap, T>>;
-export {};
+import type { FocusTrap, Options } from "focus-trap";
+import type { SetReturnType } from "type-fest";
+
+export type FocusTrapOptions = Pick<Options, "allowOutsideClick" | "initialFocus" | "returnFocusOnDeactivate">
+  & {
+  /** Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus-trap element. */
+  extraContainers: Parameters<FocusTrap["updateContainerElements"]>[0];
+  /**
+   * By default, when the focus trap is deactivated, focus will return to the element that was focused before the trap was activated. This option allows customizing that behavior.
+   *
+   * Returning undefined will use the default behavior of returning focus to the element focused before activation.
+   */
+  setReturnFocus?: Options["setReturnFocus"] | undefined | SetReturnType<Extract<Options["setReturnFocus"], Function>, undefined>;
+};

package/dist/controllers/useTime.d.ts

@@ -1,161 +1,133 @@
-import { PropertyValues } from 'lit';
-import { GenericController, T9nMeta } from '@arcgis/lumina/controllers';
-import { GenericT9nStrings } from '@arcgis/toolkit/intl';
-import { LitElement } from '@arcgis/lumina';
-import { EffectiveHourFormat, HourFormat, Meridiem } from '../utils/time';
-import { NumberingSystem, SupportedLocale } from '../utils/locale';
+import type { PropertyValues } from "lit";
+import type { GenericController, T9nMeta } from "@arcgis/lumina/controllers";
+import type { GenericT9nStrings } from "@arcgis/toolkit/intl";
+import type { LitElement, EventEmitter } from "@arcgis/lumina";
+import type { EffectiveHourFormat, HourFormat, Meridiem } from "../utils/time.js";
+import type { Locale, NumberingSystem } from "../utils/locale.js";
+
+export const useTime: (component: LitElement & TimeComponent) => TimeController;
+
 export interface TimeComponent extends LitElement {
-    /**
-     * Specifies the component's hour format, where:
-     *
-     * `"user"` displays the user's locale format,
-     * `"12"` displays a 12-hour format, and
-     * `"24"` displays a 24-hour format.
-     *
-     * @default "user"
-     */
-    hourFormat: HourFormat;
-    /**
-     * Translated messages and locale information
-     *
-     * @internal
-     */
-    messages: Partial<GenericT9nStrings> | T9nMeta<GenericT9nStrings>;
-    /**
-     * Specifies the Unicode numeral system used by the component for localization.
-     */
-    numberingSystem: NumberingSystem;
-    /**
-     * Specifies the granularity the component's `value` must adhere to (in seconds).
-     */
-    step: number;
-    /**
-     * The component's time value in ISO (24-hour) format.
-     */
-    value: string;
+  /**
+   * Specifies the component's hour format, where:
+   *
+   * `"user"` displays the user's locale format,
+   * `"12"` displays a 12-hour format, and
+   * `"24"` displays a 24-hour format.
+   */
+  hourFormat: HourFormat;
+  /**
+   * Translated messages and locale information
+   *
+   * @internal
+   */
+  messages: Partial<GenericT9nStrings> | T9nMeta<GenericT9nStrings>;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  numberingSystem: NumberingSystem;
+  /** Specifies the granularity the component's `value` must adhere to (in seconds). */
+  step: number;
+  /** The component's time value in ISO (24-hour) format. */
+  value: string;
 }
-type TimeProperties = {
-    /**
-     * Change event that fires when the value is committed on Enter keypress or blur
-     */
-    calciteTimeChange: CustomEvent<string>;
-    /**
-     * The fractional second portion of the time value.
-     */
-    fractionalSecond: string;
-    /**
-     * The hour portion of the time value (in ISO 24-hour format).
-     */
-    hour: string;
-    /**
-     * The effective hour format, calculated based on the component's hour-format property.
-     * The component's hour-format of "user" will resolve to the locale's default hour format.
-     *
-     * `"12"` displays a 12-hour format, and
-     * `"24"` displays a 24-hour format.
-     */
-    hourFormat: EffectiveHourFormat;
-    /**
-     * The language and region code to localize the time value.
-     */
-    locale: SupportedLocale;
-    /**
-     * The decimal separator used by the locale.
-     */
-    localizedDecimalSeparator: string;
-    /**
-     * The decimal separator used by the locale.
-     */
-    localizedFractionalSecond: string;
-    /**
-     * The localized fractional second portion of the time value.
-     */
-    localizedHour: string;
-    /**
-     * The hour suffix used by the locale.
-     */
-    localizedHourSuffix: string;
-    /**
-     * The localized meridiem portion of the time value, when hourFormat resolves to 12.
-     */
-    localizedMeridiem: string;
-    /**
-     * The localized minute portion of the time value.
-     */
-    localizedMinute: string;
-    /**
-     * The localized minute suffix used by the locale.
-     */
-    localizedMinuteSuffix: string;
-    /**
-     * The localized second portion of the time value.
-     */
-    localizedSecond: string;
-    /**
-     * The localized second suffix used by the locale.
-     */
-    localizedSecondSuffix: string;
-    /**
-     * The effective meridiem of the time value, when hourFormat resolves to 12.
-     *
-     * `"AM"` for hours between 0 and 12
-     * `"PM"` for hours between 12 and 23
-     */
-    meridiem: Meridiem;
-    /**
-     * An integer representing the order in which the meridiem appears for the locale within an array of values returned by Intl.DateTimeFormat.
-     */
-    meridiemOrder: number;
-    /**
-     * The minute portion of the time value.
-     */
-    minute: string;
-    /**
-     * The second portion of the time value.
-     */
-    second: string;
-};
-declare class TimeController extends GenericController<TimeProperties, TimeComponent> {
-    fractionalSecond: string;
-    hour: string;
-    hourFormat: EffectiveHourFormat;
-    locale: SupportedLocale;
-    localizedDecimalSeparator: string;
-    localizedFractionalSecond: string;
-    localizedHour: string;
-    localizedHourSuffix: string;
-    localizedMeridiem: string;
-    localizedMinute: string;
-    localizedMinuteSuffix: string;
-    localizedSecond: string;
-    localizedSecondSuffix: string;
-    meridiem: Meridiem;
-    meridiemOrder: number;
-    minute: string;
-    second: string;
-    userChangedValue: boolean;
-    handleHourKeyDownEvent: (event: KeyboardEvent) => void;
-    handleMinuteKeyDownEvent: (event: KeyboardEvent) => void;
-    handleSecondKeyDownEvent: (event: KeyboardEvent) => void;
-    handleFractionalSecondKeyDownEvent: (event: KeyboardEvent) => void;
-    handleMeridiemKeyDownEvent: (event: KeyboardEvent) => void;
-    calciteTimeChange: import('@arcgis/lumina').EventEmitter<string>;
-    decrementHour(): void;
-    decrementMinute(): void;
-    decrementSecond(): void;
-    incrementHour(): void;
-    incrementMinute(): void;
-    incrementSecond(): void;
-    nudgeFractionalSecond(direction: "up" | "down"): void;
-    toggleMeridiem(direction: "down" | "up"): void;
-    hostConnected(): void;
-    hostUpdate(changes: PropertyValues): void;
-    private decrementMinuteOrSecond;
-    private incrementMinuteOrSecond;
-    private setHourFormat;
-    private setMeridiemOrder;
-    setValue(value: string, userChangedValue?: boolean): void;
-    setValuePart(key: "hour" | "minute" | "second" | "fractionalSecond" | "meridiem", value?: number | string | Meridiem): void;
+
+export class TimeController extends GenericController<TimeProperties, TimeComponent> {
+  calciteTimeChange: EventEmitter<string>;
+  fractionalSecond: string;
+  handleFractionalSecondKeyDownEvent: (event: KeyboardEvent) => void;
+  handleHourKeyDownEvent: (event: KeyboardEvent) => void;
+  handleMeridiemKeyDownEvent: (event: KeyboardEvent) => void;
+  handleMinuteKeyDownEvent: (event: KeyboardEvent) => void;
+  handleSecondKeyDownEvent: (event: KeyboardEvent) => void;
+  hour: string;
+  hourFormat: EffectiveHourFormat;
+  locale: Locale;
+  /** @default "." */
+  localizedDecimalSeparator: string;
+  localizedFractionalSecond: string;
+  localizedHour: string;
+  localizedHourSuffix: string;
+  localizedMeridiem: string;
+  localizedMinute: string;
+  localizedMinuteSuffix: string;
+  localizedSecond: string;
+  localizedSecondSuffix: string;
+  meridiem: Meridiem;
+  meridiemOrder: number;
+  minute: string;
+  second: string;
+  /** @default false */
+  userChangedValue: boolean;
+  decrementHour(): void;
+  decrementMinute(): void;
+  decrementSecond(): void;
+  hostConnected(): void;
+  /** @param changes */
+  hostUpdate(changes: PropertyValues): void;
+  incrementHour(): void;
+  incrementMinute(): void;
+  incrementSecond(): void;
+  /** @param direction */
+  nudgeFractionalSecond(direction: "up" | "down"): void;
+  /**
+   * @param value
+   * @param userChangedValue
+   */
+  setValue(value: string, userChangedValue?: boolean): void;
+  /**
+   * @param key
+   * @param value
+   */
+  setValuePart(key: "hour" | "minute" | "second" | "fractionalSecond" | "meridiem", value?: number | string | Meridiem): void;
+  /** @param direction */
+  toggleMeridiem(direction: "down" | "up"): void;
 }
-export declare const useTime: (component: LitElement & TimeComponent) => TimeController;
-export {};
+
+export type TimeProperties = {
+  /** Change event that fires when the value is committed on Enter keypress or blur */
+  calciteTimeChange: CustomEvent<string>;
+  /** The fractional second portion of the time value. */
+  fractionalSecond: string;
+  /** The hour portion of the time value (in ISO 24-hour format). */
+  hour: string;
+  /**
+   * The effective hour format, calculated based on the component's hour-format property.
+   * The component's hour-format of "user" will resolve to the locale's default hour format.
+   *
+   * `"12"` displays a 12-hour format, and
+   * `"24"` displays a 24-hour format.
+   */
+  hourFormat: EffectiveHourFormat;
+  /** The language and region code to localize the time value. */
+  locale: Locale;
+  /** The decimal separator used by the locale. */
+  localizedDecimalSeparator: string;
+  /** The decimal separator used by the locale. */
+  localizedFractionalSecond: string;
+  /** The localized fractional second portion of the time value. */
+  localizedHour: string;
+  /** The hour suffix used by the locale. */
+  localizedHourSuffix: string;
+  /** The localized meridiem portion of the time value, when hourFormat resolves to 12. */
+  localizedMeridiem: string;
+  /** The localized minute portion of the time value. */
+  localizedMinute: string;
+  /** The localized minute suffix used by the locale. */
+  localizedMinuteSuffix: string;
+  /** The localized second portion of the time value. */
+  localizedSecond: string;
+  /** The localized second suffix used by the locale. */
+  localizedSecondSuffix: string;
+  /**
+   * The effective meridiem of the time value, when hourFormat resolves to 12.
+   *
+   * `"AM"` for hours between 0 and 12
+   * `"PM"` for hours between 12 and 23
+   */
+  meridiem: Meridiem;
+  /** An integer representing the order in which the meridiem appears for the locale within an array of values returned by Intl.DateTimeFormat. */
+  meridiemOrder: number;
+  /** The minute portion of the time value. */
+  minute: string;
+  /** The second portion of the time value. */
+  second: string;
+};