@esri/calcite-components 6.0.0-next.2 → 6.0.0-next.21

package/dist/components/calcite-color-picker-swatch/customElement.js

@@ -1,104 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
-import { keyed } from "lit/directives/keyed.js";
-import Color from "color";
-import { css, html, nothing, svg } from "lit";
-import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { y as getModeName } from "../../chunks/dom.js";
-import { h as hexify } from "../../chunks/utils3.js";
-const CSS = {
-  swatch: "swatch",
-  noColorSwatch: "swatch--no-color",
-  checker: "checker"
-};
-const COLORS = {
-  borderLight: "rgba(0, 0, 0, 0.3)",
-  borderDark: "rgba(255, 255, 255, 0.15)"
-};
-const checkerSquareSize = 4;
-const CHECKER_DIMENSIONS = {
-  squareSize: checkerSquareSize,
-  size: checkerSquareSize * 2
-};
-const IDS = {
-  checker: "checker",
-  shape: "shape"
-};
-const styles = css`:host{position:relative;display:inline-flex}:host([scale=s]){block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch rect{transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1)}.swatch--no-color rect{fill:var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))}.swatch--no-color line{stroke:var(--calcite-color-status-danger)}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}`;
-class ColorPickerSwatch extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.active = false;
-    this.scale = "m";
-  }
-  static {
-    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], color: 1, scale: [3, {}, { reflect: true }] };
-  }
-  static {
-    this.styles = styles;
-  }
-  load() {
-    this.handleColorChange(this.color);
-  }
-  willUpdate(changes) {
-    if (changes.has("color")) {
-      this.handleColorChange(this.color);
-    }
-  }
-  handleColorChange(color) {
-    this.internalColor = color ? Color(color) : void 0;
-  }
-  render() {
-    const isEmpty = !this.internalColor;
-    const classes = {
-      [CSS.swatch]: true,
-      [CSS.noColorSwatch]: isEmpty
-    };
-    return html`<svg class=${safeClassMap(classes)} xmlns=http://www.w3.org/2000/svg>${this.renderSwatch()}</svg>`;
-  }
-  renderSwatch() {
-    const { active, el, internalColor } = this;
-    const borderRadius = active ? "100%" : "0";
-    const theme = getModeName(el);
-    const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
-    const isEmpty = !internalColor;
-    const commonSwatchProps = {
-      height: "100%",
-      rx: borderRadius,
-      stroke: borderColor,
-      strokeWidth: "2",
-      width: "100%"
-    };
-    if (isEmpty) {
-      return svg`<clipPath id=${IDS.shape}><rect height=100% rx=${borderRadius ?? nothing} width=100% /></clipPath>${this.renderSwatchRect({
-        clipPath: `inset(0 round ${borderRadius})`,
-        ...commonSwatchProps
-      })}<line clip-path=url(#shape) stroke-width=3 x1=100% x2=0 y1=0 y2=100% />`;
-    }
-    const alpha = internalColor.alpha();
-    const hex = hexify(internalColor);
-    const hexa = hexify(internalColor, alpha < 1);
-    return svg`<title>${hexa}</title><defs><pattern height=${CHECKER_DIMENSIONS.size} id=${IDS.checker} patternUnits=userSpaceOnUse width=${CHECKER_DIMENSIONS.size} x=0 y=0><rect class=${safeClassMap(CSS.checker)} height=${CHECKER_DIMENSIONS.squareSize} width=${CHECKER_DIMENSIONS.squareSize} x=0 y=0 /><rect class=${safeClassMap(CSS.checker)} height=${CHECKER_DIMENSIONS.squareSize} width=${CHECKER_DIMENSIONS.squareSize} x=${CHECKER_DIMENSIONS.squareSize} y=${CHECKER_DIMENSIONS.squareSize} /></pattern></defs>${this.renderSwatchRect({
-      fill: "url(#checker)",
-      rx: commonSwatchProps.rx,
-      height: commonSwatchProps.height,
-      width: commonSwatchProps.width
-    })}${this.renderSwatchRect({
-      clipPath: alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`,
-      fill: hex,
-      ...commonSwatchProps
-    })}${alpha < 1 ? this.renderSwatchRect({
-      clipPath: "polygon(100% 0, 100% 100%, 0 100%)",
-      fill: hexa,
-      key: "opacity-fill",
-      ...commonSwatchProps
-    }) : null}`;
-  }
-  renderSwatchRect({ clipPath, fill, height, key, rx, stroke, strokeWidth, width }) {
-    return keyed(key, svg`<rect clip-path=${clipPath ?? nothing} fill=${fill ?? nothing} height=${height ?? nothing} rx=${rx ?? nothing} stroke=${stroke ?? nothing} stroke-width=${strokeWidth ?? nothing} width=${width ?? nothing} />`);
-  }
-}
-customElement("calcite-color-picker-swatch", ColorPickerSwatch);
-export {
-  ColorPickerSwatch
-};

package/dist/components/calcite-color-picker-swatch/index.d.ts

@@ -1 +0,0 @@
-export * from "./customElement.js";

package/dist/components/calcite-color-picker-swatch/index.js

@@ -1 +0,0 @@
-export * from "./customElement.js";

package/dist/components/calcite-focus-trap/customElement.d.ts

@@ -1,53 +0,0 @@
-/// <reference path="../../index.d.ts" />
-import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
-
-/** @slot  - A slot for adding focus-trapped content. */
-export abstract class FocusTrap extends LitElement {
-  /**
-   * Indicates whether the component's focus trap is currently active.
-   *
-   * @default false
-   */
-  get active(): boolean;
-  /**
-   * When `true`, prevents focus trapping.
-   *
-   * @default false
-   */
-  accessor focusTrapDisabled: boolean;
-  /** When defined, provides a condition to disable focus trapping. When `true`, prevents focus trapping. */
-  accessor focusTrapDisabledOverride: (() => boolean) | undefined;
-  /**
-   * Specifies custom focus trap configuration on the component.
-   *
-   * - `"allowOutsideClick"` allows outside clicks.
-   * - `"initialFocus"` enables initial focus.
-   * - `"returnFocusOnDeactivate"` returns focus when not active.
-   * - `"extraContainers"` specifies additional focusable elements external to the trap.
-   * - `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated.
-   */
-  accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
-  /** Activates the component's focus trap. */
-  activate(): Promise<void>;
-  /** Deactivates the component's focus trap. */
-  deactivate(): Promise<void>;
-  /**
-   * Sets focus on the component's first focusable element.
-   *
-   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-   */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /**
-   * Updates the element(s) that are included in the focus-trap of the component.
-   *
-   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
-   */
-  updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
-  /** Fires when the focus-trap active state has changed. */
-  readonly calciteFocusTrapActiveChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  readonly "@eventTypes": {
-    calciteFocusTrapActiveChange: FocusTrap["calciteFocusTrapActiveChange"]["detail"];
-  };
-}

package/dist/components/calcite-focus-trap/customElement.js

@@ -1,61 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
-import { css, html } from "lit";
-import { LitElement, createEvent } from "@arcgis/lumina";
-import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
-import { u as useFocusable } from "../../chunks/useFocusable.js";
-const styles = css`:host{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
-class FocusTrap extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._active = false;
-    this.focusSetter = useFocusable()(this);
-    this.focusTrapController = useFocusTrap({
-      focusTrapOptions: {
-        onActivate: () => {
-          this.setActive(true);
-        },
-        onDeactivate: () => {
-          this.setActive(false);
-        }
-      }
-    })(this);
-    this.focusTrapDisabled = false;
-    this.calciteFocusTrapActiveChange = createEvent({ cancelable: false });
-  }
-  static {
-    this.properties = { focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], active: [32, {}, { attribute: false, readOnly: true }], focusTrapDisabledOverride: [0, {}, { attribute: false }], focusTrapOptions: [0, {}, { attribute: false }] };
-  }
-  static {
-    this.styles = styles;
-  }
-  get active() {
-    return this._active;
-  }
-  async activate() {
-    this.focusTrapController.activate();
-  }
-  async deactivate() {
-    this.focusTrapController.deactivate();
-  }
-  async setFocus(options) {
-    return this.focusSetter(() => this.el, options);
-  }
-  async updateFocusTrapElements(extraContainers) {
-    this.focusTrapController.setExtraContainers(extraContainers);
-    this.focusTrapController.updateContainerElements();
-  }
-  setActive(active) {
-    const oldActive = this._active;
-    this._active = active;
-    this.requestUpdate("active", oldActive);
-    this.calciteFocusTrapActiveChange.emit();
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-}
-customElement("calcite-focus-trap", FocusTrap);
-export {
-  FocusTrap
-};

package/dist/components/calcite-focus-trap/index.d.ts

@@ -1 +0,0 @@
-export * from "./customElement.js";

package/dist/components/calcite-focus-trap/index.js

@@ -1 +0,0 @@
-export * from "./customElement.js";

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

@@ -1,66 +0,0 @@
-/// <reference path="../../index.d.ts" />
-import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { HandleNudge } from "./types.js";
-
-declare module "@arcgis/lumina" {
-export interface DeclareCssProperties {
-  /** Specifies the component's background color. */
-  "--calcite-handle-background-color": "*";
-  /** Specifies the component's background color on hover. */
-  "--calcite-handle-background-color-hover": "*";
-  /** Specifies the component's background color when selected. */
-  "--calcite-handle-background-color-selected": "*";
-  /** Specifies the component's icon color. */
-  "--calcite-handle-icon-color": "*";
-  /** Specifies the component's icon color on hover. */
-  "--calcite-handle-icon-color-hover": "*";
-  /** Specifies the component's icon color when selected. */
-  "--calcite-handle-icon-color-selected": "*";
-}
-}
-
-/** @deprecated in v3.0.0, removal target v6.0.0. Use the `calcite-sort-handle` component instead. */
-export abstract class Handle extends LitElement {
-  /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
-   *
-   * @default false
-   */
-  accessor disabled: boolean;
-  /** Value for the button title attribute. */
-  accessor dragHandle: string | undefined;
-  /**
-   * Replace localized message strings with your own strings.
-   *
-   * _**Note**: Individual message keys may change between releases._
-   */
-  accessor messageOverrides: {
-      dragHandle?: string | undefined;
-      dragHandleUntitled?: string | undefined;
-      dragHandleActive?: string | undefined;
-      dragHandleChange?: string | undefined;
-      dragHandleCommit?: string | undefined;
-      dragHandleIdle?: string | undefined;
-  };
-  /**
-   * When `true`, the component is selected.
-   *
-   * @default false
-   */
-  accessor selected: boolean;
-  /**
-   * Sets focus on the component.
-   *
-   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-   */
-  setFocus(options?: FocusOptions): Promise<void>;
-  /** Fires whenever the component is selected or unselected. */
-  readonly calciteHandleChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires when the handle is selected and the up or down arrow key is pressed. */
-  readonly calciteHandleNudge: import("@arcgis/lumina").TargetedEvent<this, HandleNudge>;
-  readonly "@eventTypes": {
-    calciteHandleChange: Handle["calciteHandleChange"]["detail"];
-    calciteHandleNudge: Handle["calciteHandleNudge"]["detail"];
-  };
-}

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

@@ -1,128 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { l as logger, c as customElement } from "../../chunks/runtime.js";
-import { css, nothing, html } from "lit";
-import { createRef, ref } from "lit/directives/ref.js";
-import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useFocusable } from "../../chunks/useFocusable.js";
-import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  handle: "handle",
-  handleSelected: "handle--selected"
-};
-const ICONS = {
-  drag: "drag"
-};
-const SUBSTITUTIONS = {
-  itemLabel: "{itemLabel}",
-  position: "{position}",
-  total: "{total}"
-};
-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}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;outline-color:transparent;color:var(--calcite-handle-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-handle-background-color, transparent);padding-block:.75rem;padding-inline:.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}:host(:not([disabled])) .handle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));color:var(--calcite-handle-icon-color-hover, var(--calcite-color-text-1))}:host(:not([disabled])) .handle--selected{color:var(--calcite-handle-icon-color-selected, var(--calcite-color-text-1));background-color:var(--calcite-handle-background-color-selected, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)))}: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 Handle extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.handleButtonRef = createRef();
-    this.messages = useT9n({ blocking: true });
-    this.focusSetter = useFocusable()(this);
-    this.interactiveContainer = useInteractive(this);
-    this.blurUnselectDisabled = false;
-    this.disabled = false;
-    this.selected = false;
-    this.calciteHandleChange = createEvent({ cancelable: false });
-    this.calciteHandleNudge = createEvent({ cancelable: false });
-    this.calciteInternalAssistiveTextChange = createEvent({ cancelable: false });
-  }
-  static {
-    this.properties = { blurUnselectDisabled: [5, {}, { type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], selected: [7, {}, { reflect: true, type: Boolean }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }] };
-  }
-  static {
-    this.styles = styles;
-  }
-  async setFocus(options) {
-    return this.focusSetter(() => this.handleButtonRef.value, options);
-  }
-  willUpdate(changes) {
-    if (changes.has("messages") || changes.has("label") || changes.has("selected") && (this.hasUpdated || this.selected !== false) || changes.has("setPosition") || changes.has("setSize")) {
-      this.handleAriaTextChange();
-    }
-  }
-  loaded() {
-    logger.deprecated("component", {
-      component: this,
-      name: "handle",
-      removalVersion: 5,
-      suggested: "sort-handle"
-    });
-  }
-  handleAriaTextChange() {
-    const message = this.getAriaText("live");
-    if (message) {
-      this.calciteInternalAssistiveTextChange.emit({
-        message
-      });
-    }
-  }
-  getTooltip() {
-    const { label, messages } = this;
-    if (!messages) {
-      return "";
-    }
-    if (!label) {
-      return messages.dragHandleUntitled;
-    }
-    return messages.dragHandle.replace(SUBSTITUTIONS.itemLabel, label);
-  }
-  getAriaText(type) {
-    const { setPosition, setSize, label, messages, selected } = this;
-    if (!messages || !label || typeof setSize !== "number" || typeof setPosition !== "number") {
-      return void 0;
-    }
-    const text = type === "label" ? selected ? messages.dragHandleChange : messages.dragHandleIdle : selected ? messages.dragHandleActive : messages.dragHandleCommit;
-    const replacePosition = text.replace(SUBSTITUTIONS.position, setPosition.toString());
-    const replaceLabel = replacePosition.replace(SUBSTITUTIONS.itemLabel, label);
-    return replaceLabel.replace(SUBSTITUTIONS.total, setSize.toString());
-  }
-  handleKeyDown(event) {
-    if (this.disabled) {
-      return;
-    }
-    switch (event.key) {
-      case " ":
-        this.selected = !this.selected;
-        this.calciteHandleChange.emit();
-        event.preventDefault();
-        break;
-      case "ArrowUp":
-        if (!this.selected) {
-          return;
-        }
-        event.preventDefault();
-        this.calciteHandleNudge.emit({ direction: "up" });
-        break;
-      case "ArrowDown":
-        if (!this.selected) {
-          return;
-        }
-        event.preventDefault();
-        this.calciteHandleNudge.emit({ direction: "down" });
-        break;
-    }
-  }
-  handleBlur() {
-    if (this.blurUnselectDisabled || this.disabled) {
-      return;
-    }
-    if (this.selected) {
-      this.selected = false;
-      this.calciteHandleChange.emit();
-    }
-  }
-  render() {
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<span .ariaChecked=${this.disabled ? void 0 : this.selected} .ariaDisabled=${this.disabled ? this.disabled : void 0} .ariaLabel=${this.disabled ? void 0 : this.getAriaText("label")} class=${safeClassMap({ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected })} @blur=${this.handleBlur} @keydown=${this.handleKeyDown} role=radio tabindex=${(this.disabled ? void 0 : 0) ?? nothing} title=${this.getTooltip() ?? nothing} ${ref(this.handleButtonRef)}><calcite-icon .icon=${ICONS.drag} scale=s></calcite-icon></span>` });
-  }
-}
-customElement("calcite-handle", Handle);
-export {
-  Handle
-};

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

@@ -1 +0,0 @@
-export * from "./customElement.js";

package/dist/components/calcite-handle/index.js

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

package/dist/components/calcite-handle/types.d.ts

@@ -1,3 +0,0 @@
-export interface HandleNudge {
-  direction: "up" | "down";
-}

package/dist/components/calcite-sortable-list/customElement.d.ts

@@ -1,52 +0,0 @@
-/// <reference path="../../index.d.ts" />
-import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Layout } from "../types.js";
-import type { DragDetail } from "../../controllers/useSortable.js";
-
-/**
- * @deprecated in v3.0.0, removal target v6.0.0. Use the `calcite-block-group` component instead.
- * @slot  - A slot for adding sortable items.
- */
-export abstract class SortableList extends LitElement {
-  /** When provided, the method will be called to determine whether the element can move from the list. */
-  accessor canPull: ((detail: DragDetail) => boolean) | undefined;
-  /** When provided, the method will be called to determine whether the element can be added from another list. */
-  accessor canPut: ((detail: DragDetail) => boolean) | undefined;
-  /**
-   * When `true`, disabled prevents interaction. This state shows items with lower opacity/grayed.
-   *
-   * @default false
-   */
-  accessor disabled: boolean;
-  /** Specifies which items inside the element should be draggable. */
-  accessor dragSelector: string | undefined;
-  /**
-   * Specifies the list's group.
-   *
-   * To drag elements from one list into another, both lists must have the same group value.
-   */
-  accessor group: string | undefined;
-  /**
-   * Specifies the selector for the handle elements.
-   *
-   * @default "calcite-handle"
-   */
-  accessor handleSelector: string;
-  /**
-   * Indicates the horizontal or vertical orientation of the component.
-   *
-   * @default "vertical"
-   */
-  accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-  /**
-   * When `true`, content is waiting to be loaded. This state shows a busy indicator.
-   *
-   * @default false
-   */
-  accessor loading: boolean;
-  /** Fires when the order of the list changes. */
-  readonly calciteListOrderChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  readonly "@eventTypes": {
-    calciteListOrderChange: SortableList["calciteListOrderChange"]["detail"];
-  };
-}

package/dist/components/calcite-sortable-list/customElement.js

@@ -1,133 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
-import { l as logger, c as customElement } from "../../chunks/runtime.js";
-import { css, html } from "lit";
-import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { c as createObserver } from "../../chunks/observers.js";
-import { f as focusElement } from "../../chunks/dom.js";
-import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { u as useSortable } from "../../chunks/useSortable.js";
-const CSS = {
-  container: "container",
-  containerHorizontal: "container--horizontal",
-  containerVertical: "container--vertical"
-};
-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([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;flex:1 1 auto}.container--vertical{flex-direction:column}.container--horizontal{flex-direction:row}:host([hidden]){display:none}[hidden]{display:none}`;
-class SortableList extends LitElement {
-  constructor() {
-    super();
-    this.dragEnabled = true;
-    this.items = [];
-    this.mutationObserver = createObserver("mutation", () => {
-      this.setUpSorting();
-    });
-    this.sortable = useSortable()(this);
-    this.interactiveContainer = useInteractive(this);
-    this.disabled = false;
-    this.handleSelector = "calcite-handle";
-    this.layout = "vertical";
-    this.loading = false;
-    this.calciteListOrderChange = createEvent({ cancelable: false });
-    this.listen("calciteHandleNudge", this.calciteHandleNudgeNextHandler);
-  }
-  static {
-    this.properties = { canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragSelector: [3, {}, { reflect: true }], group: [3, {}, { reflect: true }], handleSelector: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }] };
-  }
-  static {
-    this.styles = styles;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setUpSorting();
-    this.beginObserving();
-  }
-  load() {
-    logger.deprecated("component", {
-      component: this,
-      name: "sortable-list",
-      removalVersion: 5,
-      suggested: "block-group"
-    });
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.endObserving();
-  }
-  calciteHandleNudgeNextHandler(event) {
-    this.handleNudgeEvent(event);
-  }
-  onGlobalDragStart() {
-    this.endObserving();
-  }
-  onGlobalDragEnd() {
-    this.beginObserving();
-  }
-  onDragEnd() {
-  }
-  onDragStart() {
-  }
-  onDragSort() {
-    this.items = Array.from(this.el.children);
-    this.calciteListOrderChange.emit();
-  }
-  handleNudgeEvent(event) {
-    const { direction } = event.detail;
-    const handle = event.composedPath().find((el) => el.matches(this.handleSelector));
-    const sortItem = this.items.find((item) => {
-      return handle && item.contains(handle) || event.composedPath().includes(item);
-    });
-    const lastIndex = this.items.length - 1;
-    const startingIndex = sortItem ? this.items.indexOf(sortItem) : -1;
-    let appendInstead = false;
-    let buddyIndex;
-    if (direction === "up") {
-      if (startingIndex === 0) {
-        appendInstead = true;
-      } else {
-        buddyIndex = startingIndex - 1;
-      }
-    } else {
-      if (startingIndex === lastIndex) {
-        buddyIndex = 0;
-      } else if (startingIndex === lastIndex - 1) {
-        appendInstead = true;
-      } else {
-        buddyIndex = startingIndex + 2;
-      }
-    }
-    this.endObserving();
-    if (appendInstead) {
-      sortItem.parentElement.appendChild(sortItem);
-    } else {
-      sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
-    }
-    this.items = Array.from(this.el.children);
-    this.beginObserving();
-    requestAnimationFrame(() => focusElement(handle));
-    if (handle && "selected" in handle) {
-      handle.selected = true;
-    }
-  }
-  setUpSorting() {
-    this.items = Array.from(this.el.children);
-    this.sortable.reset();
-  }
-  beginObserving() {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-  }
-  endObserving() {
-    this.mutationObserver?.disconnect();
-  }
-  render() {
-    const { disabled, layout } = this;
-    const horizontal = layout === "horizontal" || false;
-    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({
-      [CSS.container]: true,
-      [CSS.containerVertical]: !horizontal,
-      [CSS.containerHorizontal]: horizontal
-    })}><slot></slot></div>` });
-  }
-}
-customElement("calcite-sortable-list", SortableList);
-export {
-  SortableList
-};

package/dist/components/calcite-sortable-list/index.d.ts

@@ -1 +0,0 @@
-export * from "./customElement.js";

package/dist/components/calcite-sortable-list/index.js

@@ -1 +0,0 @@
-export * from "./customElement.js";