@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.100

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

@@ -5,37 +5,14 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { C as filterDirectChildren, a as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { C as filterDirectChildren, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
+import { i as isTag } from "../../chunks/resources3.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  actionsEnd: "actions-end",
-  checkbox: "checkbox",
-  checkboxContainer: "checkbox-container",
-  checkboxLabel: "checkbox-label",
-  chevron: "chevron",
-  childrenContainer: "children-container",
-  iconStart: "icon-start",
-  itemExpanded: "item--expanded",
-  nodeAndActionsContainer: "node-actions-container",
-  nodeContainer: "node-container",
-  selectionIcon: "selection-icon"
-};
-const SLOTS = {
-  actionsEnd: "actions-end",
-  children: "children"
-};
-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([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);overflow:hidden}.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{display:grid;grid-template-rows:0fr;max-block-size:max-content;opacity:1;position:relative;transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out,grid-template-rows var(--calcite-internal-animation-timing-medium) ease-in-out}.item--expanded>.children-container{grid-template-rows:1fr;opacity:1;max-block-size:max-content}@starting-style{.item--expanded>.children-container{opacity:0;grid-template-rows:0fr}}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .selection-icon{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 .selection-icon,:host([selected]) .node-container:hover .selection-icon,:host(:focus:not([disabled])) .node-container .selection-icon{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 .selection-icon,:host([selected]) .node-container:hover .selection-icon{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .selection-icon{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]) .selection-icon{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}`;
+import { I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources33.js";
+const isTree = isTag("calcite-tree");
+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-theme-space-2xs, 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-theme-space-xs, 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);overflow:hidden}.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{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:absolute;inset-block-start:0;inline-size:var(--calcite-space-px);transition-timing-function:var(--calcite-animation-easing-function);z-index:var(--calcite-z-index);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:0;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:var(--calcite-border-width-md) solid transparent;outline-offset:var(--calcite-border-width-md)}: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(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}:host(:focus:not([disabled])) .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(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)));outline:var(--calcite-border-width-md) solid transparent;outline-offset:var(--calcite-border-width-md)}:host(:focus:not([disabled])) .checkbox{outline:var(--calcite-border-width-md) solid transparent;outline-offset:var(--calcite-border-width-md)}.actions-end{display:flex;align-self:stretch;flex-direction:row;align-items:center;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{display:grid;grid-template-rows:0fr;max-block-size:max-content;opacity:1;position:relative;transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out,grid-template-rows var(--calcite-internal-animation-timing-medium) ease-in-out}.item--expanded>.children-container{grid-template-rows:1fr;opacity:1;max-block-size:max-content}@starting-style{.item--expanded>.children-container{opacity:0;grid-template-rows:0fr}}.node-container{position:relative;display:flex;flex-grow:1;align-items:center;min-inline-size:0}.node-container .selection-icon{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;opacity:0;color:var(--calcite-color-border-1)}.node-container:hover .selection-icon,:host([selected]) .node-container:hover .selection-icon,:host(:focus:not([disabled])) .node-container .selection-icon{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 .selection-icon,:host([selected]) .node-container:hover .selection-icon{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .selection-icon{display:none}.chevron{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-text-3);position:relative;align-self:center;flex:0 0 auto;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .selection-icon{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();
@@ -62,7 +39,7 @@ class TreeItem extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { hasEndActions: [16, {}, { state: true }], updateAfterInitialRender: [16, {}, { state: true }], depth: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], hasChildren: [39, {}, { reflect: true, readOnly: true, type: Boolean }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], indeterminate: [7, {}, { reflect: true, type: Boolean }], label: 1, lines: [7, {}, { reflect: true, type: Boolean }], parentExpanded: [5, {}, { type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }] };
+    this.properties = { hasEndActions: [16, {}, { state: true }], updateAfterInitialRender: [16, {}, { state: true }], depth: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], hasChildren: [39, {}, { reflect: true, readOnly: true, type: Boolean }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], indeterminate: [7, {}, { reflect: true, type: Boolean }], label: 1, lines: [7, {}, { reflect: true, type: Boolean }], parentExpanded: [5, {}, { type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -178,7 +155,7 @@ class TreeItem extends LitElement {
     childTree.parentExpanded = this.expanded;
   }
   handleChildrenSlotChange(event) {
-    const childTree = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-tree"))[0];
+    const childTree = slotChangeGetAssignedElements(event).find(isTree) ?? null;
     this.childTree = childTree;
     this.requestUpdate("hasChildren");
     this.updateChildTree();
@@ -265,14 +242,16 @@ class TreeItem extends LitElement {
     })} .icon=${selectionIcon} .scale=${getIconScale(this.scale)}></calcite-icon>` : null;
     const hidden = !(this.parentExpanded || this.depth === 1);
     const isExpanded = this.updateAfterInitialRender && this.expanded;
+    const usesAriaChecked = this.selectionMode === "multiple" || this.selectionMode === "multichildren" || this.selectionMode === "ancestors";
+    const usesAriaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist";
     const { hasEndActions } = this;
     const slotNode = keyed("actionsEndSlot", html`<slot name=${SLOTS.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot>`);
     const iconStartEl = html`<calcite-icon class=${safeClassMap(CSS.iconStart)} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`;
-    this.el.ariaChecked = this.selectionMode === "multiple" || this.selectionMode === "multichildren" || this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : null;
-    this.el.ariaExpanded = this.hasChildren ? toAriaBoolean(isExpanded) : null;
+    this.el.ariaChecked = toAriaBoolean(usesAriaChecked && this.selected, usesAriaChecked ? "false" : null);
+    this.el.ariaExpanded = toAriaBoolean(this.hasChildren && isExpanded, this.hasChildren ? "false" : null);
     this.el.inert = hidden;
     this.el.ariaLive = "polite";
-    this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : null;
+    this.el.ariaSelected = toAriaBoolean(usesAriaSelected && this.selected, usesAriaSelected ? "false" : null);
     this.el.role = "treeitem";
     setAttribute(this.el, "tabIndex", this.disabled ? -1 : 0);
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({ [CSS.itemExpanded]: isExpanded })}><div class=${safeClassMap(CSS.nodeAndActionsContainer)}><div class=${safeClassMap({

package/dist/controllers/useTime.d.ts

@@ -9,11 +9,11 @@ export const useTime: (component: LitElement & TimeComponent) => TimeController;
 
 export interface TimeComponent extends LitElement {
   /**
-   * Specifies the component's hour format, where:
+   * Specifies the component's hour format.
    *
-   * `"user"` displays the user's locale format,
-   * `"12"` displays a 12-hour format, and
-   * `"24"` displays a 24-hour format.
+   * - `"user"` displays the user's locale format.
+   * - `"12"` displays a 12-hour format.
+   * - `"24"` displays a 24-hour format.
    */
   hourFormat: HourFormat;
   /**
@@ -38,6 +38,7 @@ export class TimeController extends GenericController<TimeProperties, TimeCompon
   handleMeridiemKeyDownEvent: (event: KeyboardEvent) => void;
   handleMinuteKeyDownEvent: (event: KeyboardEvent) => void;
   handleSecondKeyDownEvent: (event: KeyboardEvent) => void;
+  get hasValue(): boolean;
   hour?: string | null;
   hourFormat?: EffectiveHourFormat | null;
   locale?: Locale | null;
@@ -87,6 +88,8 @@ export type TimeProperties = {
   calciteTimeChange: CustomEvent<string>;
   /** The fractional second portion of the time value. */
   fractionalSecond: string;
+  /** Returns true if any portion of the time value is truthy. */
+  hasValue: boolean;
   /** The hour portion of the time value (in ISO 24-hour format). */
   hour?: string;
   /**