@esri/calcite-components 5.0.0-next.9 → 5.0.0-next.90

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

@@ -1,108 +1,113 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Scale } from '../interfaces';
-import { FlipPlacement, MenuPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { MoveEventDetail, SortMenuItem, ReorderEventDetail, AddEventDetail } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale } from "../interfaces.js";
+import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { MoveEventDetail, SortMenuItem, ReorderEventDetail, AddEventDetail } from "./interfaces.js";
 
-export declare class SortHandle extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. */
-    flipPlacements: FlipPlacement[];
-    /** Specifies the label of the component. */
-    label: string;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /** Defines the "Add to" items. */
-    addToItems: SortMenuItem[];
-    /** Defines the "Move to" items. */
-    moveToItems: SortMenuItem[];
-    /**
-     * 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;
-    /**
-     * Determines where the component will be positioned relative to the container element.
-     *
-     * @default "bottom-start"
-     */
-    placement: MenuPlacement;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** The current position of the handle. */
-    setPosition: number;
-    /** The total number of sortable items. */
-    setSize: number;
-    /**
-     * When `true`, items are no longer sortable.
-     *
-     * @default false
-     */
-    sortDisabled: boolean;
-    /** Specifies the width of the component. */
-    widthScale: Scale;
-    /**
-     * 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.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteSortHandleBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteSortHandleBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calciteSortHandleClose: TargetedEvent<this, void>;
-    /** Fires when a move item has been selected. */
-    readonly calciteSortHandleMove: TargetedEvent<this, MoveEventDetail>;
-    /** Fires when an add item has been selected. */
-    readonly calciteSortHandleAdd: TargetedEvent<this, AddEventDetail>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calciteSortHandleOpen: TargetedEvent<this, void>;
-    /** Fires when a reorder has been selected. */
-    readonly calciteSortHandleReorder: TargetedEvent<this, ReorderEventDetail>;
-    private messages: {
-        reorder: string;
-        addTo: string;
-        moveTo: string;
-        moveToTop: string;
-        moveToBottom: string;
-        moveUp: string;
-        moveDown: string;
-        repositionLabel: string;
-        reposition: string;
-    } & import('@arcgis/lumina/controllers').T9nMeta<{
-        reorder: string;
-        addTo: string;
-        moveTo: string;
-        moveToTop: string;
-        moveToBottom: string;
-        moveUp: string;
-        moveDown: string;
-        repositionLabel: string;
-        reposition: string;
-    }>;
-}
+export abstract class SortHandle extends LitElement {
+  /** Defines the "Add to" items. */
+  accessor addToItems: SortMenuItem[];
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[];
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      reorder?: string;
+      addTo?: string;
+      moveTo?: string;
+      moveToTop?: string;
+      moveToBottom?: string;
+      moveUp?: string;
+      moveDown?: string;
+      repositionLabel?: string;
+      reposition?: string;
+  };
+  /** Defines the "Move to" items. */
+  accessor moveToItems: SortMenuItem[];
+  /**
+   * When `true`, displays and positions the component.
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Specifies the type of positioning to use for overlaid content, where:
+   *
+   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   *
+   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   * @default "absolute"
+   */
+  accessor overlayPositioning: OverlayPositioning;
+  /**
+   * Determines where the component will be positioned relative to the container element.
+   *
+   * @default "bottom-start"
+   */
+  accessor placement: MenuPlacement;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** Specifies the handle's current position. */
+  accessor setPosition: number;
+  /** Specifies the total number of sortable items. */
+  accessor setSize: number;
+  /**
+   * When `true`, prevents sorting of items.
+   *
+   * @default false
+   */
+  accessor sortDisabled: boolean;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /** Specifies the width of the component. */
+  accessor widthScale: Scale;
+  /**
+   * 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.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when an add item has been selected. */
+  readonly calciteSortHandleAdd: import("@arcgis/lumina").TargetedEvent<this, AddEventDetail>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  readonly calciteSortHandleBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  readonly calciteSortHandleBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  readonly calciteSortHandleClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when a move item has been selected. */
+  readonly calciteSortHandleMove: import("@arcgis/lumina").TargetedEvent<this, MoveEventDetail>;
+  /** Fires when the component is open and animation is complete. */
+  readonly calciteSortHandleOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when a reorder has been selected. */
+  readonly calciteSortHandleReorder: import("@arcgis/lumina").TargetedEvent<this, ReorderEventDetail>;
+  readonly "@eventTypes": {
+    calciteSortHandleAdd: SortHandle["calciteSortHandleAdd"]["detail"];
+    calciteSortHandleBeforeClose: SortHandle["calciteSortHandleBeforeClose"]["detail"];
+    calciteSortHandleBeforeOpen: SortHandle["calciteSortHandleBeforeOpen"]["detail"];
+    calciteSortHandleClose: SortHandle["calciteSortHandleClose"]["detail"];
+    calciteSortHandleMove: SortHandle["calciteSortHandleMove"]["detail"];
+    calciteSortHandleOpen: SortHandle["calciteSortHandleOpen"]["detail"];
+    calciteSortHandleReorder: SortHandle["calciteSortHandleReorder"]["detail"];
+  };
+}

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

@@ -1,12 +1,15 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
-import { b as defaultMenuPlacement } from "../../chunks/floating-ui.js";
+import { d as defaultMenuPlacement } from "../../chunks/floating-ui.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   handle: "handle",
   dropdown: "dropdown"
@@ -29,11 +32,12 @@ const IDS = {
   move: "move",
   reorder: "reorder"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.dropdown{block-size: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}`;
+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}.dropdown{block-size: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 SortHandle extends LitElement {
   constructor() {
     super(...arguments);
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.messages = useT9n({ blocking: true });
     this.addToItems = [];
@@ -43,16 +47,17 @@ class SortHandle extends LitElement {
     this.placement = defaultMenuPlacement;
     this.scale = "m";
     this.sortDisabled = false;
+    this.topLayerDisabled = false;
+    this.calciteSortHandleAdd = createEvent({ cancelable: true });
     this.calciteSortHandleBeforeClose = createEvent({ cancelable: false });
     this.calciteSortHandleBeforeOpen = createEvent({ cancelable: false });
     this.calciteSortHandleClose = createEvent({ cancelable: false });
     this.calciteSortHandleMove = createEvent({ cancelable: true });
-    this.calciteSortHandleAdd = createEvent({ cancelable: true });
     this.calciteSortHandleOpen = createEvent({ cancelable: false });
     this.calciteSortHandleReorder = createEvent({ cancelable: true });
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], label: 1, messageOverrides: [0, {}, { attribute: false }], messages: [0, {}, { attribute: false }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], label: 1, messageOverrides: [0, {}, { attribute: false }], messages: [0, {}, { attribute: false }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortDisabled: [7, {}, { reflect: true, type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -77,9 +82,6 @@ class SortHandle extends LitElement {
       this.openHandler();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   openHandler() {
     if (this.disabled) {
       this.open = false;
@@ -142,7 +144,7 @@ class SortHandle extends LitElement {
     const { disabled, flipPlacements, open, overlayPositioning, placement, scale, widthScale, hasNoItems } = this;
     const text = this.getLabel();
     const isDisabled = disabled || hasNoItems;
-    return InteractiveContainer({ disabled, children: html`<calcite-dropdown class=${safeClassMap(CSS.dropdown)} .disabled=${isDisabled} .flipPlacements=${flipPlacements} @calciteDropdownBeforeClose=${this.handleBeforeClose} @calciteDropdownBeforeOpen=${this.handleBeforeOpen} @calciteDropdownClose=${this.handleClose} @calciteDropdownOpen=${this.handleOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} .scale=${scale} .widthScale=${widthScale} ${ref(this.setDropdownEl)}><calcite-action .active=${open} appearance=transparent .aria=${{ expanded: open }} class=${safeClassMap(CSS.handle)} .dragHandle=${true} .icon=${disabled ? ICONS.blank : ICONS.drag} .label=${text} .scale=${scale} slot=${SLOTS.trigger} .text=${text} title=${text ?? nothing}></calcite-action>${this.renderReorderGroup()}${this.renderMoveToGroup()}${this.renderAddToGroup()}</calcite-dropdown>` });
+    return this.interactiveContainer({ disabled, children: html`<calcite-dropdown class=${safeClassMap(CSS.dropdown)} .disabled=${isDisabled} .flipPlacements=${flipPlacements} @calciteDropdownBeforeClose=${this.handleBeforeClose} @calciteDropdownBeforeOpen=${this.handleBeforeOpen} @calciteDropdownClose=${this.handleClose} @calciteDropdownOpen=${this.handleOpen} .overlayPositioning=${overlayPositioning} .placement=${placement} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled} .widthScale=${widthScale} ${ref(this.setDropdownEl)}><calcite-action .active=${open} .aria=${{ expanded: open }} class=${safeClassMap(CSS.handle)} .dragHandle=${true} .icon=${disabled ? ICONS.blank : ICONS.drag} .label=${text} .scale=${scale} slot=${SLOTS.trigger} .text=${text} title=${text ?? nothing}></calcite-action>${this.renderReorderGroup()}${this.renderMoveToGroup()}${this.renderAddToGroup()}</calcite-dropdown>` });
   }
   renderAddToItem(addToItem) {
     return keyed(addToItem.id, html`<calcite-dropdown-item data-id=${addToItem.id ?? nothing} .label=${addToItem.label} @calciteDropdownItemSelect=${this.handleAddTo}>${addToItem.label}</calcite-dropdown-item>`);

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

@@ -1,5 +1 @@
-import "../calcite-dropdown/index.js";
-import "../calcite-action/index.js";
-import "../calcite-dropdown-item/index.js";
-import "../calcite-dropdown-group/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-sort-handle/interfaces.d.ts

@@ -1,15 +1,19 @@
-export type Reorder = "up" | "down" | "top" | "bottom";
 export interface SortMenuItem {
-    element: HTMLElement;
-    id: string;
-    label: string;
+  element: HTMLElement;
+  id: string;
+  label: string;
 }
+
 export interface ReorderEventDetail {
-    reorder: Reorder;
+  reorder: Reorder;
 }
+
 export interface MoveEventDetail {
-    moveTo: SortMenuItem;
+  moveTo: SortMenuItem;
 }
+
 export interface AddEventDetail {
-    addTo: SortMenuItem;
+  addTo: SortMenuItem;
 }
+
+export type Reorder = "up" | "down" | "top" | "bottom";

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

@@ -1,51 +1,52 @@
 /// <reference path="../../index.d.ts" />
-import { default as Sortable } from 'sortablejs';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Layout } from '../interfaces';
-import { DragDetail, SortableComponent } from '../../utils/sortableComponent';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Layout } from "../interfaces.js";
+import type { DragDetail } from "../../utils/sortableComponent.js";
 
 /**
  * @deprecated Use the `calcite-block-group` component instead.
  * @slot  - A slot for adding sortable items.
  */
-export declare class SortableList extends LitElement {
-    /** When provided, the method will be called to determine whether the element can move from the list. */
-    canPull: (detail: DragDetail) => boolean;
-    /** When provided, the method will be called to determine whether the element can be added from another list. */
-    canPut: (detail: DragDetail) => boolean;
-    /**
-     * When `true`, disabled prevents interaction. This state shows items with lower opacity/grayed.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Specifies which items inside the element should be draggable. */
-    dragSelector?: string;
-    /**
-     * The list's group identifier.
-     *
-     * To drag elements from one list into another, both lists must have the same group value.
-     */
-    group?: string;
-    /**
-     * The selector for the handle elements.
-     *
-     * @default "calcite-handle"
-     */
-    handleSelector: string;
-    /**
-     * Indicates the horizontal or vertical orientation of the component.
-     *
-     * @default "vertical"
-     */
-    layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
-    /**
-     * When `true`, content is waiting to be loaded. This state shows a busy indicator.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /** Emitted when the order of the list has changed. */
-    readonly calciteListOrderChange: TargetedEvent<this, void>;
-}
+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;
+  /** When provided, the method will be called to determine whether the element can be added from another list. */
+  accessor canPut: (detail: DragDetail) => boolean;
+  /**
+   * 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,17 +1,20 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.90 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
-import { b as focusElement } from "../../chunks/dom.js";
+import { j as focusElement } from "../../chunks/dom.js";
 import { l as logger } from "../../chunks/logger.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",
   containerHorizontal: "container--horizontal",
   containerVertical: "container--vertical"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{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}`;
+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();
@@ -20,6 +23,7 @@ class SortableList extends LitElement {
     this.mutationObserver = createObserver("mutation", () => {
       this.setUpSorting();
     });
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.handleSelector = "calcite-handle";
     this.layout = "vertical";
@@ -40,14 +44,12 @@ class SortableList extends LitElement {
   }
   load() {
     logger.deprecated("component", {
+      component: this,
       name: "sortable-list",
-      removalVersion: 4,
+      removalVersion: 5,
       suggested: "block-group"
     });
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectSortableComponent(this);
@@ -121,7 +123,7 @@ class SortableList extends LitElement {
   render() {
     const { disabled, layout } = this;
     const horizontal = layout === "horizontal" || false;
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerVertical]: !horizontal,
       [CSS.containerHorizontal]: horizontal