@esri/calcite-components 3.2.0-next.8 → 3.2.0

package/dist/components/calcite-tile-group/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { html } from "lit";
@@ -14,8 +14,6 @@ const CSS = {
 };
 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{box-sizing:border-box;display:inline-block}:host ::slotted(calcite-tile){margin-block-end:var(--calcite-spacing-px);margin-inline-end:var(--calcite-spacing-px)}.container{display:grid;grid-auto-rows:minmax(auto,1fr)}:host([scale=s]) .container{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}:host([scale=m]) .container{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}:host([scale=l]) .container{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}:host([layout=vertical]) .container{display:flex;flex-direction:column}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class TileGroup extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.items = [];
@@ -32,7 +30,7 @@ class TileGroup extends LitElement {
     this.listen("calciteTileSelect", this.calciteTileSelectHandler);
   }
   static {
-    this.properties = { alignment: [3, { reflect: true }], disabled: [7, { reflect: true, type: Boolean }], label: 1, layout: [3, { reflect: true }], scale: [3, { reflect: true }], selectedItems: [0, { attribute: false }], selectionAppearance: [3, { reflect: true }], selectionMode: [3, { reflect: true }] };
+    this.properties = { alignment: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -57,8 +55,6 @@ class TileGroup extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
   }
-  // #endregion
-  // #region Private Methods
   getSlottedTiles() {
     return this.slotEl?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-tile"));
   }
@@ -141,8 +137,6 @@ class TileGroup extends LitElement {
       this.selectItem(event.target);
     }
   }
-  // #endregion
-  // #region Rendering
   render() {
     const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
     return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} .role=${role}><slot @slotchange=${this.updateTiles} ${ref(this.setSlotEl)}></slot></div>` });

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

@@ -8,24 +8,44 @@ import { TileSelectType } from './interfaces';
 
 /**
  * @deprecated Use the `calcite-tile` component instead.
- * @slot - A slot for adding custom content.
+ * @slot  - A slot for adding custom content.
  */
 export declare class TileSelect extends LitElement {
-    /** When `true`, the component is checked. */
+    /**
+     * When `true`, the component is checked.
+     *
+     * @default false
+     */
     checked: boolean;
     /** A description for the component, which displays below the heading. */
     description: string;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
     /** The component header text, which displays between the icon and description. */
     heading: string;
     /** Specifies an icon to display. */
     icon: IconNameOrString;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+     *
+     * @default false
+     */
     iconFlipRtl: boolean;
-    /** When `inputEnabled` is `true`, specifies the placement of the interactive input on the component. */
+    /**
+     * When `inputEnabled` is `true`, specifies the placement of the interactive input on the component.
+     *
+     * @default "start"
+     */
     inputAlignment: Extract<"end" | "start", Alignment>;
-    /** When `true`, displays an interactive input based on the `type` property. */
+    /**
+     * When `true`, displays an interactive input based on the `type` property.
+     *
+     * @default false
+     */
     inputEnabled: boolean;
     /** Specifies the name of the component on form submission. */
     name: any;
@@ -35,11 +55,17 @@ export declare class TileSelect extends LitElement {
      * `"radio"` is for single selection, and
      *
      * `"checkbox"` is for multiple selections.
+     *
+     * @default "radio"
      */
     type: TileSelectType;
     /** The component's value. */
     value: any;
-    /** Specifies the width of the component. */
+    /**
+     * Specifies the width of the component.
+     *
+     * @default "auto"
+     */
     width: Extract<"auto" | "full", Width>;
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
@@ -50,5 +76,5 @@ export declare class TileSelect extends LitElement {
      *
      * For radios it only emits when checked.
      */
-    readonly calciteTileSelectChange: TargetedEvent<this, undefined>;
+    readonly calciteTileSelectChange: TargetedEvent<this, void>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -31,8 +31,6 @@ const CSS = {
 };
 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:block}:host .container{background-color:var(--calcite-color-foreground-1);box-shadow:0 0 0 1px var(--calcite-color-border-2);box-sizing:border-box;cursor:pointer;display:inline-block;block-size:100%;max-inline-size:300px;padding:.75rem;position:relative;vertical-align:top;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}:host .container.checked{z-index:var(--calcite-z-index);box-shadow:0 0 0 1px var(--calcite-color-brand)}:host .container.heading-only{align-items:center}:host .container:not(.input-enabled) ::slotted(calcite-checkbox),:host .container:not(.input-enabled) ::slotted(calcite-radio-button){position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host .container.focused{outline-color:transparent}:host .container.focused:not(.disabled):not(.input-enabled){outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:-4px;box-shadow:0 0 0 1px var(--calcite-color-brand),inset 0 0 0 2px var(--calcite-color-foreground-1)}:host .container.input-enabled.input-alignment-start.width-auto.heading-only,:host .container.input-enabled.input-alignment-start.width-auto.icon-only,:host .container.input-enabled.input-alignment-start.width-auto.description-only,:host .container.input-enabled.input-alignment-start.width-auto.heading.description,:host .container.input-enabled.input-alignment-start.width-auto.icon.description,:host .container.input-enabled.input-alignment-start.width-auto.heading.icon.description{display:inline-grid;grid-template-columns:max-content 1fr}:host .container.input-enabled.input-alignment-start.heading-only,:host .container.input-enabled.input-alignment-start.icon-only,:host .container.input-enabled.input-alignment-start.description-only,:host .container.input-enabled.input-alignment-start.heading.description,:host .container.input-enabled.input-alignment-start.icon.description,:host .container.input-enabled.input-alignment-start.heading.icon.description{gap:.75rem}:host .container.input-enabled.input-alignment-start .tile{order:1}:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-radio-button){position:absolute;inset-block-start:.75rem;inset-inline-start:.75rem}:host .container.input-enabled.input-alignment-end.width-auto.heading-only,:host .container.input-enabled.input-alignment-end.width-auto.icon-only{display:inline-grid;grid-gap:.75rem;grid-template-columns:max-content 1fr}:host .container.input-enabled.input-alignment-end.heading-only,:host .container.input-enabled.input-alignment-end.icon-only{gap:.75rem}:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-radio-button),:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-radio-button){position:absolute;inset-block-start:.75rem;inset-inline-end:.75rem}:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-checkbox),:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-radio-button){position:absolute;inset-block-start:.75rem;inset-inline-end:.75rem}:host .container.width-full{display:flex;max-inline-size:none}:host .container.width-full .tile{flex:1 1 auto}.tile{pointer-events:none;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;flex-direction:column;gap:.5rem;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile-content-container{display:flex;inline-size:100%;align-items:stretch;padding:0;color:var(--calcite-color-text-2);outline-color:transparent}.tile-content{display:flex;flex:1 1 auto;flex-direction:column;gap:.5rem;inline-size:10%}.tile-heading{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile-description{pointer-events:none;overflow-wrap:break-word;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tile--large-visual{display:grid;justify-content:center;text-align:center;min-block-size:12rem}.tile--large-visual .icon{align-self:flex-end}.tile--large-visual calcite-icon{block-size:64px;inline-size:64px}.tile--large-visual .tile-content-container{align-self:center}:host(:hover) .container:not(.input-enabled){box-shadow:0 0 0 1px var(--calcite-color-brand)}:host(:hover) .tile-heading,.checked .tile-heading{color:var(--calcite-color-text-1)}:host(:hover) .tile-description,.checked .tile-description{color:var(--calcite-color-text-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class TileSelect extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.guid = `calcite-tile-select-${guid()}`;
@@ -57,14 +55,11 @@ class TileSelect extends LitElement {
     this.listen("pointerleave", this.pointerLeaveHandler);
   }
   static {
-    this.properties = { focused: [16, { state: true }], checked: [7, { reflect: true, type: Boolean }], description: [3, { reflect: true }], disabled: [7, { reflect: true, type: Boolean }], heading: [3, { reflect: true }], icon: [3, { reflect: true }], iconFlipRtl: [7, { reflect: true, type: Boolean }], inputAlignment: [3, { reflect: true }], inputEnabled: [7, { reflect: true, type: Boolean }], name: [3, { reflect: true }], type: [3, { reflect: true }], value: 1, width: [3, { reflect: true }] };
+    this.properties = { focused: [16, {}, { state: true }], checked: [7, {}, { reflect: true, type: Boolean }], description: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], heading: [3, {}, { reflect: true }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], inputAlignment: [3, {}, { reflect: true }], inputEnabled: [7, {}, { reflect: true, type: Boolean }], name: [3, {}, { reflect: true }], type: [3, {}, { reflect: true }], value: 1, width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     return this.input?.setFocus();
@@ -95,8 +90,6 @@ class TileSelect extends LitElement {
     super.disconnectedCallback();
     this.input?.remove();
   }
-  // #endregion
-  // #region Private Methods
   checkboxChangeHandler(event) {
     const checkbox = event.target;
     if (checkbox === this.input) {
@@ -162,8 +155,6 @@ class TileSelect extends LitElement {
       this.input.hovered = false;
     }
   }
-  // #endregion
-  // #region Rendering
   renderInput() {
     this.input = this.type === "radio" ? (
       /* we need to call createElement(x) separately to ensure supporting components are properly bundled */

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

@@ -5,15 +5,21 @@ import { TileSelectGroupLayout } from './interfaces';
 
 /**
  * @deprecated Use the `calcite-tile-group` component instead.
- * @slot - A slot for adding `calcite-tile-select` elements.
+ * @slot  - A slot for adding `calcite-tile-select` elements.
  */
 export declare class TileSelectGroup extends LitElement {
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
     /**
      * Defines the layout of the component.
      *
      * Use `"horizontal"` for rows, and `"vertical"` for a single column.
+     *
+     * @default "horizontal"
      */
     layout: TileSelectGroupLayout;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { LitElement } from "@arcgis/lumina";
@@ -15,13 +15,11 @@ class TileSelectGroup extends LitElement {
     this.layout = "horizontal";
   }
   static {
-    this.properties = { disabled: [7, { reflect: true, type: Boolean }], layout: [3, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   load() {
     logger.deprecated("component", {
       name: "tile-select-group",
@@ -32,8 +30,6 @@ class TileSelectGroup extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Rendering
   render() {
     return InteractiveContainer({ disabled: this.disabled, children: html`<slot></slot>` });
   }

package/dist/components/calcite-time-picker/customElement.d.ts

@@ -18,11 +18,26 @@ export declare class TimePicker extends LitElement {
     hourFormat: HourFormat;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
+    /** Specifies the Unicode numeral system used by the component for localization. */
+    numberingSystem: NumberingSystem;
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
+    scale: Scale;
     /**
-     * Made into a prop for testing purposes only
+     * Specifies the granularity the `value` must adhere to (in seconds).
      *
-     * @private
+     * @default 60
      */
+    step: number;
+    /** The component's value in UTC (always 24-hour format). */
+    value: string;
+    /** Sets focus on the component's first focusable element. */
+    setFocus(): Promise<void>;
+    /** Fires when a user changes the component's time */
+    readonly calciteTimePickerChange: TargetedEvent<this, void>;
     private messages: Partial<{
         fractionalSecond: string;
         fractionalSecondDown: string;
@@ -39,7 +54,7 @@ export declare class TimePicker extends LitElement {
         second: string;
         secondDown: string;
         secondUp: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
         fractionalSecond: string;
         fractionalSecondDown: string;
         fractionalSecondUp: string;
@@ -56,16 +71,4 @@ export declare class TimePicker extends LitElement {
         secondDown: string;
         secondUp: string;
     }>;
-    /** Specifies the Unicode numeral system used by the component for localization. */
-    numberingSystem: NumberingSystem;
-    /** Specifies the size of the component. */
-    scale: Scale;
-    /** Specifies the granularity the `value` must adhere to (in seconds). */
-    step: number;
-    /** The component's value in UTC (always 24-hour format). */
-    value: string;
-    /** Sets focus on the component's first focusable element. */
-    setFocus(): Promise<void>;
-    /** Fires when a user changes the component's time */
-    readonly calciteTimePickerChange: TargetedEvent<this, undefined>;
 }

package/dist/components/calcite-time-picker/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { html } from "lit";
@@ -9,7 +9,7 @@ import { n as numberKeys } from "../../chunks/key.js";
 import { i as isValidNumber } from "../../chunks/locale.js";
 import { f as formatTimePart, p as parseTimeString, i as isValidTime, l as localizeTimeStringToParts, g as getMeridiem, a as getLocalizedTimePartSuffix, b as getLocalizedDecimalSeparator, c as localizeTimePart, d as getLocaleHourFormat, e as getMeridiemOrder, m as maxTenthForMinuteAndSecond } from "../../chunks/time.js";
 import { c as componentFocusable, g as getIconScale } from "../../chunks/component.js";
-import { d as decimalPlaces, g as getDecimals } from "../../chunks/math.js";
+import { g as getDecimals, d as decimalPlaces } from "../../chunks/math.js";
 import { g as getElementDir } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { css } from "@lit/reactive-element/css-tag.js";
@@ -50,19 +50,17 @@ const CSS = {
   timePicker: "time-picker",
   meridiemStart: "meridiem--start"
 };
-const styles = css`:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;background-color:var(--calcite-color-foreground-1);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:var(--calcite-border-radius)}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1)}.time-picker .button:hover,.time-picker .button:focus{background-color:var(--calcite-color-foreground-2);outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0}.time-picker .button:active{background-color:var(--calcite-color-foreground-3)}.time-picker .button.top-left{border-start-start-radius:var(--calcite-border-radius)}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-border-radius)}.time-picker .button.top-right{border-start-end-radius:var(--calcite-border-radius)}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-border-radius)}.time-picker .button calcite-icon{color:var(--calcite-color-text-3)}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);font-weight:var(--calcite-font-weight-medium)}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-2);z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-color-brand);z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:.75rem;padding-block:.25rem}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:.75rem}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:1rem;padding-block:.5rem}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1rem}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:1.25rem;padding-block:.75rem}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:1.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;font-weight:var(--calcite-font-weight-medium);--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));color:var(--calcite-time-picker-color, var(--calcite-color-text-1));background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .button:hover,.time-picker .button:focus{outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0;background-color:var(--calcite-time-picker-button-background-color-hover, var(--calcite-color-foreground-2))}.time-picker .button:active{background-color:var(--calcite-time-picker-button-background-color-press, var(--calcite-color-foreground-3))}.time-picker .button.top-left{border-start-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.top-right{border-start-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button calcite-icon{color:var(--calcite-time-picker-icon-color, var(--calcite-color-text-3))}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-xxs)}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-md)}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:var(--calcite-spacing-xl);padding-block:var(--calcite-spacing-sm)}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xl)}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:var(--calcite-spacing-xxl);padding-block:var(--calcite-spacing-md)}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xxl)}:host([hidden]){display:none}[hidden]{display:none}`;
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 class TimePicker extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.pointerActivated = false;
+    this.messages = useT9n();
     this.localizedDecimalSeparator = ".";
     this.hourFormat = "user";
-    this.messages = useT9n();
     this.scale = "m";
     this.step = 60;
     this.value = null;
@@ -72,7 +70,7 @@ class TimePicker extends LitElement {
     this.listen("pointerdown", this.pointerDownHandler);
   }
   static {
-    this.properties = { activeEl: [16, { state: true }], effectiveHourFormat: [16, { state: true }], fractionalSecond: [16, { state: true }], hour: [16, { state: true }], localizedDecimalSeparator: [16, { state: true }], localizedFractionalSecond: [16, { state: true }], localizedHour: [16, { state: true }], localizedHourSuffix: [16, { state: true }], localizedMeridiem: [16, { state: true }], localizedMinute: [16, { state: true }], localizedMinuteSuffix: [16, { state: true }], localizedSecond: [16, { state: true }], localizedSecondSuffix: [16, { state: true }], meridiem: [16, { state: true }], minute: [16, { state: true }], second: [16, { state: true }], showFractionalSecond: [16, { state: true }], showSecond: [16, { state: true }], hourFormat: [3, { reflect: true }], messageOverrides: [0, { attribute: false }], numberingSystem: 1, scale: [3, { reflect: true }], step: [11, { reflect: true, type: Number }], value: 1 };
+    this.properties = { activeEl: [16, {}, { state: true }], effectiveHourFormat: [16, {}, { state: true }], fractionalSecond: [16, {}, { state: true }], hour: [16, {}, { state: true }], localizedDecimalSeparator: [16, {}, { state: true }], localizedFractionalSecond: [16, {}, { state: true }], localizedHour: [16, {}, { state: true }], localizedHourSuffix: [16, {}, { state: true }], localizedMeridiem: [16, {}, { state: true }], localizedMinute: [16, {}, { state: true }], localizedMinuteSuffix: [16, {}, { state: true }], localizedSecond: [16, {}, { state: true }], localizedSecondSuffix: [16, {}, { state: true }], meridiem: [16, {}, { state: true }], minute: [16, {}, { state: true }], second: [16, {}, { state: true }], showFractionalSecond: [16, {}, { state: true }], showSecond: [16, {}, { state: true }], hourFormat: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], numberingSystem: 1, scale: [3, {}, { reflect: true }], step: [11, {}, { reflect: true, type: Number }], value: 1 };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -80,9 +78,6 @@ class TimePicker extends LitElement {
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
     this.el?.focus();
@@ -103,8 +98,6 @@ class TimePicker extends LitElement {
       this.updateLocale();
     }
   }
-  // #endregion
-  // #region Private Methods
   blurHandler() {
     this.activeEl = void 0;
     this.pointerActivated = false;
@@ -226,7 +219,7 @@ class TimePicker extends LitElement {
   fractionalSecondKeyDownHandler(event) {
     const { key } = event;
     if (numberKeys.includes(key)) {
-      const stepPrecision = decimalPlaces(this.step);
+      const { stepPrecision } = this;
       const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
       const fractionalSecondAsIntegerLength = fractionalSecondAsInteger.toString().length;
       let newFractionalSecondAsIntegerString;
@@ -420,7 +413,7 @@ class TimePicker extends LitElement {
   }
   nudgeFractionalSecond(direction) {
     const stepDecimal = getDecimals(this.step);
-    const stepPrecision = decimalPlaces(this.step);
+    const { stepPrecision } = this;
     const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
     const fractionalSecondAsFloat = parseFloat(`0.${this.fractionalSecond}`);
     let nudgedValue;
@@ -450,7 +443,8 @@ class TimePicker extends LitElement {
     return isValidTime(value) && value;
   }
   sanitizeFractionalSecond(fractionalSecond) {
-    return fractionalSecond && decimalPlaces(this.step) !== fractionalSecond.length ? parseFloat(`0.${fractionalSecond}`).toFixed(decimalPlaces(this.step)).replace("0.", "") : fractionalSecond;
+    const { stepPrecision } = this;
+    return fractionalSecond && stepPrecision !== fractionalSecond.length ? parseFloat(`0.${fractionalSecond}`).toFixed(stepPrecision).replace("0.", "") : fractionalSecond;
   }
   secondKeyDownHandler(event) {
     const { key } = event;
@@ -512,12 +506,13 @@ class TimePicker extends LitElement {
   setValue(value) {
     if (isValidTime(value)) {
       const { hour, minute, second, fractionalSecond } = parseTimeString(value);
-      const { effectiveHourFormat, messages: { _lang: locale }, numberingSystem } = this;
+      const { effectiveHourFormat, messages: { _lang: locale }, numberingSystem, step } = this;
       const { localizedHour, localizedHourSuffix, localizedMinute, localizedMinuteSuffix, localizedSecond, localizedDecimalSeparator, localizedFractionalSecond, localizedSecondSuffix, localizedMeridiem } = localizeTimeStringToParts({
         value,
         locale,
         numberingSystem,
-        hour12: effectiveHourFormat === "12"
+        hour12: effectiveHourFormat === "12",
+        step
       });
       this.hour = hour;
       this.minute = minute;
@@ -554,7 +549,7 @@ class TimePicker extends LitElement {
     }
   }
   setValuePart(key, value) {
-    const { effectiveHourFormat, messages: { _lang: locale }, numberingSystem } = this;
+    const { effectiveHourFormat, messages: { _lang: locale }, numberingSystem, step } = this;
     const hour12 = effectiveHourFormat === "12";
     if (key === "meridiem") {
       this.meridiem = value;
@@ -581,7 +576,7 @@ class TimePicker extends LitElement {
         });
       }
     } else if (key === "fractionalSecond") {
-      const stepPrecision = decimalPlaces(this.step);
+      const { stepPrecision } = this;
       if (typeof value === "number") {
         this.fractionalSecond = value === 0 ? "".padStart(stepPrecision, "0") : formatTimePart(value, stepPrecision);
       } else {
@@ -625,15 +620,23 @@ class TimePicker extends LitElement {
       hour12,
       locale,
       numberingSystem,
+      step,
       value: this.value
-    })?.localizedMeridiem || null : localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem });
+    })?.localizedMeridiem || null : localizeTimePart({
+      hour12,
+      value: this.meridiem,
+      part: "meridiem",
+      locale,
+      numberingSystem
+    });
     if (emit) {
       this.calciteTimePickerChange.emit();
     }
   }
   toggleSecond() {
     this.showSecond = this.step < 60;
-    this.showFractionalSecond = decimalPlaces(this.step) > 0;
+    this.stepPrecision = decimalPlaces(this.step);
+    this.showFractionalSecond = this.stepPrecision > 0;
   }
   updateLocale() {
     this.effectiveHourFormat = this.hourFormat === "user" ? getLocaleHourFormat(this.messages._lang) : this.hourFormat;
@@ -641,7 +644,6 @@ class TimePicker extends LitElement {
     this.meridiemOrder = getMeridiemOrder(this.messages._lang);
     this.setValue(this.sanitizeValue(this.value));
   }
-  // #endregion
   render() {
     const hourIsNumber = isValidNumber(this.hour);
     const iconScale = getIconScale(this.scale);
@@ -694,7 +696,7 @@ class TimePicker extends LitElement {
       [CSS.input]: true,
       [CSS.fractionalSecond]: true,
       [CSS.inputFocus]: this.activeEl && this.activeEl === this.fractionalSecondEl
-    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${this.fractionalSecondKeyDownHandler} role=spinbutton tabindex=0 ${ref(this.setFractionalSecondEl)}>${this.localizedFractionalSecond || "--"}</span><span .ariaLabel=${this.messages.fractionalSecondDown} class=${safeClassMap({
+    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${this.fractionalSecondKeyDownHandler} role=spinbutton tabindex=0 ${ref(this.setFractionalSecondEl)}>${this.localizedFractionalSecond || "".padStart(this.stepPrecision, "-")}</span><span .ariaLabel=${this.messages.fractionalSecondDown} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonFractionalSecondDown]: true
     })} @click=${this.fractionalSecondDownClickHandler} role=button><calcite-icon icon=chevron-down .scale=${iconScale}></calcite-icon></span></div>` || ""}${showSecondSuffix && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.secondSuffix]: true })}>${this.localizedSecondSuffix}</span>` || ""}${showMeridiem && html`<div class=${safeClassMap({

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

@@ -4,13 +4,21 @@ import { HeadingLevel } from '../functional/Heading';
 
 /**
  * @deprecated Use the `calcite-card`, `calcite-notice`, `calcite-panel`, or `calcite-tile` component instead.
- * @slot - A slot for adding text and a hyperlink.
- * @slot thumbnail - A slot for adding an HTML image element.
+ * @slot  - A slot for adding text and a hyperlink.
+ * @slot [thumbnail] - A slot for adding an HTML image element.
  */
 export declare class Tip extends LitElement {
-    /** When `true`, the close button is not present on the component. */
+    /**
+     * When `true`, the close button is not present on the component.
+     *
+     * @default false
+     */
     closeDisabled: boolean;
-    /** When `true`, the component does not display. */
+    /**
+     * When `true`, the component does not display.
+     *
+     * @default false
+     */
     closed: boolean;
     /** The component header text. */
     heading: string;
@@ -18,22 +26,19 @@ export declare class Tip extends LitElement {
     headingLevel: HeadingLevel;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
-    private messages: Partial<{
-        close: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        close: string;
-    }>;
     /**
      * When `true`, the component is selected if it has a parent `calcite-tip-manager`.
      *
      * Only one tip can be selected within the `calcite-tip-manager` parent.
+     *
+     * @default false
      */
     selected: boolean;
     /** Emits when the component has been closed. */
-    readonly calciteTipDismiss: TargetedEvent<this, undefined>;
+    readonly calciteTipDismiss: TargetedEvent<this, void>;
+    private messages: Partial<{
+        close: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        close: string;
+    }>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { keyed } from "lit-html/directives/keyed.js";
@@ -30,21 +30,19 @@ const styles = css`:host{position:relative;margin:1rem;box-sizing:border-box;dis
 class Tip extends LitElement {
   constructor() {
     super(...arguments);
+    this.messages = useT9n();
     this.hasThumbnail = false;
     this.closeDisabled = false;
     this.closed = false;
-    this.messages = useT9n();
     this.selected = false;
     this.calciteTipDismiss = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasThumbnail: [16, { state: true }], closeDisabled: [7, { reflect: true, type: Boolean }], closed: [7, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, { type: Number, reflect: true }], messageOverrides: [0, { attribute: false }], selected: [7, { reflect: true, type: Boolean }] };
+    this.properties = { hasThumbnail: [16, {}, { state: true }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], messageOverrides: [0, {}, { attribute: false }], selected: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   async load() {
     logger.deprecated("component", {
       name: "tip",
@@ -52,8 +50,6 @@ class Tip extends LitElement {
       suggested: ["card", "notice", "panel", "tile"]
     });
   }
-  // #endregion
-  // #region Private Methods
   hideTip() {
     this.closed = true;
     this.calciteTipDismiss.emit();
@@ -61,8 +57,6 @@ class Tip extends LitElement {
   handleThumbnailSlotChange(event) {
     this.hasThumbnail = slotChangeHasAssignedElement(event);
   }
-  // #endregion
-  // #region Rendering
   renderHeader() {
     const { heading, headingLevel, el } = this;
     const parentLevel = el.closest("calcite-tip-manager")?.headingLevel;

package/dist/components/calcite-tip-group/customElement.d.ts

@@ -3,7 +3,7 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 
 /**
  * @deprecated Use the `calcite-carousel` and `calcite-carousel-item` components instead.
- * @slot - A slot for adding `calcite-tip`s.
+ * @slot  - A slot for adding `calcite-tip`s.
  */
 export declare class TipGroup extends LitElement {
     /** The component header text for all nested `calcite-tip`s. */

package/dist/components/calcite-tip-group/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { LitElement } from "@arcgis/lumina";
@@ -14,8 +14,6 @@ class TipGroup extends LitElement {
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   load() {
     logger.deprecated("component", {
       name: "tip-group",
@@ -23,8 +21,6 @@ class TipGroup extends LitElement {
       suggested: ["carousel", "carousel-item"]
     });
   }
-  // #endregion
-  // #region Rendering
   render() {
     return html`<slot></slot>`;
   }