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

package/dist/components/calcite-input-time-picker/index.d.ts

@@ -1,6 +1,5 @@
 import "../calcite-input-message/index.js";
-import "../calcite-input-text/index.js";
+import "../calcite-icon/index.js";
 import "../calcite-popover/index.js";
 import "../calcite-time-picker/index.js";
-import "../calcite-icon/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-input-time-picker/index.js

@@ -1,6 +1,5 @@
 import "../calcite-input-message/index.js";
-import "../calcite-input-text/index.js";
+import "../calcite-icon/index.js";
 import "../calcite-popover/index.js";
 import "../calcite-time-picker/index.js";
-import "../calcite-icon/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-input-time-picker/resources.d.ts

@@ -1,4 +1,22 @@
 export declare const CSS: {
+    clockIcon: string;
+    container: string;
+    decimalSeparator: string;
+    delimiter: string;
+    empty: string;
+    fractionalSecond: string;
+    hour: string;
+    hourSuffix: string;
+    input: string;
+    inputContainer: string;
+    meridiem: string;
+    meridiemStart: string;
+    meridiemEnd: string;
+    minute: string;
+    minuteSuffix: string;
+    readOnly: string;
+    second: string;
+    secondSuffix: string;
     toggleIcon: string;
 };
 export declare const IDS: {

package/dist/components/calcite-input-time-zone/customElement.d.ts

@@ -15,9 +15,15 @@ export declare class InputTimeZone extends LitElement {
      * When `true`, an empty value (`null`) will be allowed as a `value`.
      *
      * When `false`, an offset or name value is enforced, and clearing the input or blurring will restore the last valid `value`.
+     *
+     * @default false
      */
     clearable: boolean;
-    /** 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 `id` of the form that will be associated with the component.
@@ -25,15 +31,115 @@ export declare class InputTimeZone extends LitElement {
      * When not set, the component will be associated with its ancestor form element, if any.
      */
     form: string;
-    /** Specifies the component's maximum number of options to display before displaying a scrollbar. */
+    /**
+     * Specifies the component's maximum number of options to display before displaying a scrollbar.
+     *
+     * @default 0
+     */
     maxItems: number;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * This specifies the type of `value` and the associated options presented to the user:
+     *
+     * Using `"offset"` will provide options that show timezone offsets.
+     *
+     * Using `"name"` will provide options that show the IANA time zone names.
+     *
+     * @default "offset"
+     */
+    mode: TimeZoneMode;
+    /**
+     * Specifies the name of the component.
+     *
+     * Required to pass the component's `value` on form submission.
+     */
+    name: string;
+    /**
+     * Specifies how the offset will be displayed, where
      *
-     * @private
+     * `"user"` uses `UTC` or `GMT` depending on the user's locale,
+     * `"gmt"` always uses `GMT`, and
+     * `"utc"` always uses `UTC`.
+     *
+     * This only applies to the `offset` mode.
+     *
+     * @default "user"
      */
+    offsetStyle: OffsetStyle;
+    /**
+     * When `true`, displays and positions the component.
+     *
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+     *
+     * @default "absolute"
+     */
+    overlayPositioning: OverlayPositioning;
+    /**
+     * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+     *
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups.
+     *
+     * It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`).
+     *
+     * @see [Date.prototype.toISOString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+     */
+    referenceDate: Date | string;
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
+    scale: Scale;
+    /**
+     * Specifies the status of the input field, which determines message and icons.
+     *
+     * @default "idle"
+     */
+    status: Status;
+    /** Specifies the validation icon to display under the component. */
+    validationIcon: IconNameOrString | boolean;
+    /** Specifies the validation message to display under the component. */
+    validationMessage: string;
+    /**
+     * The current validation state of the component.
+     *
+     * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+     */
+    readonly validity: MutableValidityState;
+    /**
+     * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC.
+     *
+     * If no value is provided, the user's time zone offset will be selected by default.
+     *
+     * @see [Identifying time zones and zone offsets](https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC).
+     */
+    get value(): string;
+    set value(value: string);
+    /** Sets focus on the component. */
+    setFocus(): Promise<void>;
+    /** Fires when the component is requested to be closed and before the closing transition begins. */
+    readonly calciteInputTimeZoneBeforeClose: TargetedEvent<this, void>;
+    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+    readonly calciteInputTimeZoneBeforeOpen: TargetedEvent<this, void>;
+    /** Fires when the component's `value` changes. */
+    readonly calciteInputTimeZoneChange: TargetedEvent<this, void>;
+    /** Fires after the component is closed and animation is complete. */
+    readonly calciteInputTimeZoneClose: TargetedEvent<this, void>;
+    /** Fires after the component is opened and animation is complete. */
+    readonly calciteInputTimeZoneOpen: TargetedEvent<this, void>;
     private messages: {
         chooseTimeZone: string;
         offsetPlaceholder: string;
@@ -641,7 +747,7 @@ export declare class InputTimeZone extends LitElement {
         ZA: string;
         ZM: string;
         ZW: string;
-    } & import('@arcgis/components-controllers').T9nMeta<{
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
         chooseTimeZone: string;
         offsetPlaceholder: string;
         regionPlaceholder: string;
@@ -1249,88 +1355,4 @@ export declare class InputTimeZone extends LitElement {
         ZM: string;
         ZW: string;
     }>;
-    /**
-     * This specifies the type of `value` and the associated options presented to the user:
-     *
-     * Using `"offset"` will provide options that show timezone offsets.
-     *
-     * Using `"name"` will provide options that show the IANA time zone names.
-     *
-     * @default "offset"
-     */
-    mode: TimeZoneMode;
-    /**
-     * Specifies the name of the component.
-     *
-     * Required to pass the component's `value` on form submission.
-     */
-    name: string;
-    /**
-     * Specifies how the offset will be displayed, where
-     *
-     * `"user"` uses `UTC` or `GMT` depending on the user's locale,
-     * `"gmt"` always uses `GMT`, and
-     * `"utc"` always uses `UTC`.
-     *
-     * This only applies to the `offset` mode.
-     *
-     * @default "user"
-     */
-    offsetStyle: OffsetStyle;
-    /** When `true`, displays and positions the component. */
-    open: boolean;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     */
-    overlayPositioning: OverlayPositioning;
-    /** When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. */
-    readOnly: boolean;
-    /**
-     * This `date` will be used as a reference to Daylight Savings Time when creating time zone item groups.
-     *
-     * It can be either a Date instance or a string in ISO format (`"YYYY-MM-DD"`, `"YYYY-MM-DDTHH:MM:SS.SSSZ"`).
-     *
-     * @see [Date.prototype.toISOString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
-     */
-    referenceDate: Date | string;
-    /** Specifies the size of the component. */
-    scale: Scale;
-    /** Specifies the status of the input field, which determines message and icons. */
-    status: Status;
-    /** Specifies the validation icon to display under the component. */
-    validationIcon: IconNameOrString | boolean;
-    /** Specifies the validation message to display under the component. */
-    validationMessage: string;
-    /**
-     * The current validation state of the component.
-     *
-     * @readonly
-     * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
-     */
-    readonly validity: MutableValidityState;
-    /**
-     * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC.
-     *
-     * If no value is provided, the user's time zone offset will be selected by default.
-     *
-     * @see [Identifying time zones and zone offsets](https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC).
-     */
-    get value(): string;
-    set value(value: string);
-    /** Sets focus on the component. */
-    setFocus(): Promise<void>;
-    /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteInputTimeZoneBeforeClose: TargetedEvent<this, undefined>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteInputTimeZoneBeforeOpen: TargetedEvent<this, undefined>;
-    /** Fires when the component's `value` changes. */
-    readonly calciteInputTimeZoneChange: TargetedEvent<this, undefined>;
-    /** Fires after the component is closed and animation is complete. */
-    readonly calciteInputTimeZoneClose: TargetedEvent<this, undefined>;
-    /** Fires after the component is opened and animation is complete. */
-    readonly calciteInputTimeZoneOpen: TargetedEvent<this, undefined>;
 }

package/dist/components/calcite-input-time-zone/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 { repeat } from "lit-html/directives/repeat.js";
@@ -182,11 +182,11 @@ function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()
   const parts = dateTimeFormat.formatToParts(referenceDateInMs);
   return parts.find(({ type }) => type === "timeZoneName").value;
 }
-function isGroup(item) {
-  return item.items !== void 0;
+function hasGroups(items) {
+  return items[0].items !== void 0;
 }
 function flattenTimeZoneItems(timeZoneItems) {
-  return isGroup(timeZoneItems[0]) ? timeZoneItems.flatMap((item) => item.items) : timeZoneItems;
+  return hasGroups(timeZoneItems) ? timeZoneItems.flatMap((item) => item.items) : timeZoneItems;
 }
 function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
   return valueToMatch == null ? null : flattenTimeZoneItems(timeZoneItems).find(
@@ -200,10 +200,10 @@ const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;use
 class InputTimeZone extends LitElement {
   constructor() {
     super(...arguments);
+    this.messages = useT9n({ blocking: true });
     this.clearable = false;
     this.disabled = false;
     this.maxItems = 0;
-    this.messages = useT9n({ blocking: true });
     this.mode = "offset";
     this.offsetStyle = "user";
     this.open = false;
@@ -232,7 +232,7 @@ class InputTimeZone extends LitElement {
     this.calciteInputTimeZoneOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { clearable: [7, { reflect: true, type: Boolean }], disabled: [7, { reflect: true, type: Boolean }], form: [3, { reflect: true }], maxItems: [11, { reflect: true, type: Number }], messageOverrides: [0, { attribute: false }], mode: [3, { reflect: true }], name: [3, { reflect: true }], offsetStyle: [3, { reflect: true }], open: [7, { reflect: true, type: Boolean }], overlayPositioning: [3, { reflect: true }], readOnly: [7, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, { reflect: true, type: Boolean }], scale: [3, { reflect: true }], status: [3, { reflect: true }], validationIcon: [3, { reflect: true, converter: stringOrBoolean }], validationMessage: 1, validity: [0, { attribute: false }], value: 1 };
+    this.properties = { clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], mode: [3, {}, { reflect: true }], name: [3, {}, { reflect: true }], offsetStyle: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], referenceDate: 1, required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -240,28 +240,16 @@ class InputTimeZone extends LitElement {
   static {
     this.styles = styles;
   }
-  /**
-   * The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC.
-   *
-   * If no value is provided, the user's time zone offset will be selected by default.
-   *
-   * @see [Identifying time zones and zone offsets](https://www.w3.org/International/core/2005/09/timezone.html#:~:text=What%20is%20a%20%22zone%20offset,or%20%22%2D%22%20from%20UTC).
-   */
   get value() {
     return this._value;
   }
   set value(value) {
     this._value = value;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     await this.comboboxEl.setFocus();
   }
-  // #endregion
-  // #region Lifecycle
   connectedCallback() {
     super.connectedCallback();
     connectForm(this);
@@ -301,8 +289,6 @@ class InputTimeZone extends LitElement {
     disconnectForm(this);
     disconnectLabel(this);
   }
-  // #endregion
-  // #region Private Methods
   async handleTimeZoneItemPropsChange() {
     if (!this.timeZoneItems || !this.hasUpdated) {
       return;
@@ -345,12 +331,6 @@ class InputTimeZone extends LitElement {
   setComboboxRef(el) {
     this.comboboxEl = el;
   }
-  /**
-   * Helps override the selected item's label for region mode outside of item rendering logic to avoid flickering text change
-   *
-   * @param open
-   * @private
-   */
   overrideSelectedLabelForRegion(open) {
     if (this.mode !== "region" || !this.selectedTimeZoneItem) {
       return;
@@ -425,8 +405,6 @@ class InputTimeZone extends LitElement {
     value = value === void 0 ? "" : value;
     return value ? this.normalizer(value) : value;
   }
-  // #endregion
-  // #region Rendering
   render() {
     return InteractiveContainer({ disabled: this.disabled, children: html`<calcite-combobox .clearDisabled=${!this.clearable} .disabled=${this.disabled} .label=${this.messages.chooseTimeZone} lang=${this.messages._lang ?? nothing} .maxItems=${this.maxItems} @calciteComboboxBeforeClose=${this.onComboboxBeforeClose} @calciteComboboxBeforeOpen=${this.onComboboxBeforeOpen} @calciteComboboxChange=${this.onComboboxChange} @calciteComboboxClose=${this.onComboboxClose} @calciteComboboxOpen=${this.onComboboxOpen} .overlayPositioning=${this.overlayPositioning} .placeholder=${this.mode === "name" ? this.messages.namePlaceholder : this.mode === "offset" ? this.messages.offsetPlaceholder : this.messages.regionPlaceholder} placeholder-icon=search .readOnly=${this.readOnly} .scale=${this.scale} .selectionMode=${this.clearable ? "single" : "single-persist"} .status=${this.status} .validationIcon=${this.validationIcon} .validationMessage=${this.validationMessage} ${ref(this.setComboboxRef)}>${this.renderItems()}</calcite-combobox>${HiddenFormInputSlot({ component: this })}` });
   }

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

@@ -3,14 +3,26 @@ import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Alignment, Scale } from '../interfaces';
 
-/** @slot - A slot for adding text and a component that can be labeled. */
+/** @slot  - A slot for adding text and a component that can be labeled. */
 export declare class Label extends LitElement {
-    /** Specifies the text alignment of the component. */
+    /**
+     * Specifies the text alignment of the component.
+     *
+     * @default "start"
+     */
     alignment: Alignment;
     /** Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component. */
     for: string;
-    /** Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line. */
+    /**
+     * Defines the layout of the label in relation to the component. Use `"inline"` positions to wrap the label and component on the same line.
+     *
+     * @default "default"
+     */
     layout: "inline" | "inline-space-between" | "default";
-    /** Specifies the size of the component. */
+    /**
+     * Specifies the size of the component.
+     *
+     * @default "m"
+     */
     scale: Scale;
 }

package/dist/components/calcite-label/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";
@@ -11,8 +11,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:flex}:host([alignment=start]){text-align:start}:host([alignment=end]){text-align:end}:host([alignment=center]){text-align:center}:host([scale=s]) .container{gap:.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, .5rem)}:host([scale=m]) .container{gap:.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;margin-block-end:var(--calcite-label-margin-bottom, .75rem)}:host([scale=l]) .container{gap:.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-block-end:var(--calcite-label-margin-bottom, 1rem)}:host .container{margin-inline:0px;margin-block-start:0px;inline-size:100%;line-height:1.375;color:var(--calcite-color-text-1);color:var(--calcite-label-text-color, var(--calcite-color-text-1))}:host([layout=default]) .container{display:flex;flex-direction:column}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:flex;flex-direction:row;align-items:center;gap:.5rem}:host([layout=inline][scale=l]) .container{gap:.75rem}:host([layout=inline-space-between]) .container{justify-content:space-between}:host([disabled])>.container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--tw-bg-opacity: 1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--tw-bg-opacity: 0}: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 Label extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.alignment = "start";
@@ -22,7 +20,7 @@ class Label extends LitElement {
     this.listen("click", this.labelClickHandler);
   }
   static {
-    this.properties = { alignment: [3, { reflect: true }], for: [3, { reflect: true }], layout: [3, { reflect: true }], scale: [3, { reflect: true }] };
+    this.properties = { alignment: [3, {}, { reflect: true }], for: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -40,8 +38,6 @@ class Label extends LitElement {
     super.disconnectedCallback();
     document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
   }
-  // #endregion
-  // #region Private Methods
   labelClickHandler(event) {
     if (window.getSelection()?.type === "Range") {
       return;
@@ -50,8 +46,6 @@ class Label extends LitElement {
       sourceEvent: event
     });
   }
-  // #endregion
-  // #region Rendering
   render() {
     return html`<div class=${safeClassMap(CSS.container)}><slot></slot></div>`;
   }

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

@@ -11,16 +11,21 @@ import { IconNameOrString } from '../calcite-icon/interfaces';
  *
  * It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission
  *
- * @slot - A slot for adding text.
+ * @slot  - A slot for adding text.
  */
 export declare class Link 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;
     /**
      * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
      * Without a value, the browser will suggest a filename/extension.
      *
      * @see [Global download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
+     * @default false
      */
     download: string | boolean;
     /** Specifies the URL of the linked resource, which can be set as an absolute or relative path. */

package/dist/components/calcite-link/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 CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
@@ -12,8 +12,6 @@ import { c as componentFocusable } from "../../chunks/component.js";
 import { css } from "@lit/reactive-element/css-tag.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0;border-style:none;font-family:inherit;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none;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,background-size;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{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))))}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;margin-block-start:-.25em}:host .calcite-link--icon.icon-start{margin-inline-end:.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;color:var(--calcite-link-text-color, var(--calcite-color-text-link));line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-color-brand-underline),var(--calcite-color-brand-underline));background-position-x:0%,100%;background-position-y:min(1.5em,100%);background-repeat:no-repeat,no-repeat;background-size:0% 1px,100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px,100% 1px}:host span:active,:host a:active{background-size:100% 2px,100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%,100% 100%}: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 Link extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.disabled = false;
@@ -21,14 +19,11 @@ class Link extends LitElement {
     this.listen("click", this.clickHandler);
   }
   static {
-    this.properties = { disabled: [7, { reflect: true, type: Boolean }], download: [3, { reflect: true, converter: stringOrBoolean }], href: [3, { reflect: true }], iconEnd: [3, { reflect: true }], iconFlipRtl: [3, { reflect: true }], iconStart: [3, { reflect: true }], rel: 1, target: 1 };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], rel: 1, target: 1 };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
     focusElement(this.childEl);
@@ -36,8 +31,6 @@ class Link extends LitElement {
   updated() {
     updateHostInteraction(this);
   }
-  // #endregion
-  // #region Private Methods
   clickHandler(event) {
     if (this.disabled) {
       return;
@@ -54,8 +47,6 @@ class Link extends LitElement {
   storeTagRef(el) {
     this.childEl = el;
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { download, el } = this;
     const dir = getElementDir(el);